feat(elements): add eco-provider-frame and dataprovider interfaces; improve virtual keyboard interactions; add demos, exports and bump dev dependencies

ts_web/views/eco-view-browser/eco-view-browser.demo.ts

@@ -0,0 +1,34 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      width: 100%;
+      height: 100%;
+      min-height: 600px;
+      background: hsl(240 10% 4%);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+  </style>
+  <div class="demo-container">
+    <eco-view-browser
+      .bookmarks=${[
+        { id: 'bm-1', title: 'Google', url: 'https://www.google.com', createdAt: new Date() },
+        { id: 'bm-2', title: 'GitHub', url: 'https://github.com', createdAt: new Date() },
+        { id: 'bm-3', title: 'Stack Overflow', url: 'https://stackoverflow.com', createdAt: new Date() },
+        { id: 'bm-4', title: 'MDN Web Docs', url: 'https://developer.mozilla.org', createdAt: new Date() },
+      ]}
+      .showBookmarksBar=${true}
+      @navigate=${(e: CustomEvent) => console.log('Navigate:', e.detail)}
+      @bookmark-add=${(e: CustomEvent) => console.log('Bookmark add:', e.detail)}
+      @bookmark-remove=${(e: CustomEvent) => console.log('Bookmark remove:', e.detail)}
+      @browser-back=${() => console.log('Browser back')}
+      @browser-forward=${() => console.log('Browser forward')}
+      @browser-refresh=${() => console.log('Browser refresh')}
+      @browser-stop=${() => console.log('Browser stop')}
+      @new-tab=${() => console.log('New tab')}
+      @open-devtools=${() => console.log('Open devtools')}
+    ></eco-view-browser>
+  </div>
+`;