+ void;
+ reject: (error: Error) => void;
+ timeout: ReturnType;
+ }> = new Map();
+
+ async connectedCallback(): Promise {
+ await super.connectedCallback();
+ this.setupMessageListener();
+ }
+
+ async disconnectedCallback(): Promise {
+ await super.disconnectedCallback();
+ this.cleanupMessageListener();
+ this.clearPendingRequests();
+ }
+
+ private setupMessageListener(): void {
+ this.messageHandler = (event: MessageEvent) => {
+ this.handleProviderMessage(event);
+ };
+ window.addEventListener('message', this.messageHandler);
+ }
+
+ private cleanupMessageListener(): void {
+ if (this.messageHandler) {
+ window.removeEventListener('message', this.messageHandler);
+ this.messageHandler = null;
+ }
+ }
+
+ private clearPendingRequests(): void {
+ for (const [requestId, pending] of this.pendingRequests) {
+ clearTimeout(pending.timeout);
+ pending.reject(new Error('Provider disconnected'));
+ }
+ this.pendingRequests.clear();
+ }
+
+ public render(): TemplateResult {
+ return html`
+ {
+ const requestId = crypto.randomUUID();
+
+ return new Promise((resolve, reject) => {
+ const timeout = setTimeout(() => {
+ this.pendingRequests.delete(requestId);
+ reject(new Error('Request timeout'));
+ }, timeoutMs);
+
+ this.pendingRequests.set(requestId, { resolve, reject, timeout });
+
+ this.sendMessage({
+ type: 'send-data',
+ requestId,
+ payload: data,
+ });
+ });
+ }
+
+ public async requestData(request: IRequestDataPayload, timeoutMs = 30000): Promise {
+ const requestId = crypto.randomUUID();
+
+ return new Promise((resolve, reject) => {
+ const timeout = setTimeout(() => {
+ this.pendingRequests.delete(requestId);
+ reject(new Error('Request timeout'));
+ }, timeoutMs);
+
+ this.pendingRequests.set(requestId, { resolve, reject, timeout });
+
+ this.sendMessage({
+ type: 'request-data',
+ requestId,
+ payload: request,
+ });
+ });
+ }
+
+ public ping(): void {
+ this.sendMessage({
+ type: 'ping',
+ requestId: crypto.randomUUID(),
+ });
+ }
+
+ public hasFeature(feature: TProviderFeature): boolean {
+ return this.confirmedFeatures.includes(feature);
+ }
+
+ public getStatus(): TProviderStatus {
+ return this.status;
+ }
+}
diff --git a/ts_web/elements/eco-provider-frame/index.ts b/ts_web/elements/eco-provider-frame/index.ts
new file mode 100644
index 0000000..46eacc6
--- /dev/null
+++ b/ts_web/elements/eco-provider-frame/index.ts
@@ -0,0 +1 @@
+export * from './eco-provider-frame.js';
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index 7964ef4..43b438a 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -6,3 +6,4 @@ export * from './00group-applauncher/index.js';
// Standalone Components
export * from './eco-screensaver/index.js';
+export * from './eco-provider-frame/index.js';
diff --git a/ts_web/elements/interfaces/dataprovider.ts b/ts_web/elements/interfaces/dataprovider.ts
new file mode 100644
index 0000000..8d73000
--- /dev/null
+++ b/ts_web/elements/interfaces/dataprovider.ts
@@ -0,0 +1,158 @@
+/**
+ * Data Provider System Interfaces
+ *
+ * Data providers are external web apps that can be registered to provide
+ * or receive data from ecobridge applications. They communicate via
+ * postMessage API in sandboxed iframes.
+ */
+
+// Provider feature types - what capabilities a provider can offer
+export type TProviderFeature =
+ | 'scan-destination' // Can receive scanned documents
+ | 'media-source' // Can provide media URLs for playback
+ | 'document-storage' // Can store/retrieve documents
+ | 'print-destination'; // Can receive print jobs
+
+// Provider connection status
+export type TProviderStatus = 'connected' | 'disconnected' | 'loading' | 'error';
+
+/**
+ * Data Provider configuration and state
+ */
+export interface IDataProvider {
+ id: string;
+ name: string;
+ url: string;
+ features: TProviderFeature[]; // Features declared by provider
+ confirmedFeatures: TProviderFeature[]; // Features user has approved
+ icon?: string; // Base64 data URL or icon URL
+ lastSeen: Date;
+ status: TProviderStatus;
+ enabled: boolean;
+}
+
+/**
+ * Provider registration payload (sent by provider on ready)
+ */
+export interface IProviderRegistration {
+ name: string;
+ features: TProviderFeature[];
+ icon?: string;
+ version?: string;
+}
+
+/**
+ * Message types from Provider to Ecobridge
+ */
+export type TProviderToEcobridgeMessageType =
+ | 'provider-ready' // Provider loaded and declaring features
+ | 'provider-features' // Provider updating its features
+ | 'provider-response' // Response to an ecobridge request
+ | 'provider-error' // Error occurred in provider
+ | 'data-offer'; // Provider offering data (e.g., media URL)
+
+/**
+ * Message from Provider to Ecobridge
+ */
+export interface IProviderMessage {
+ type: TProviderToEcobridgeMessageType;
+ providerId: string;
+ requestId?: string; // For responses to specific requests
+ payload: unknown;
+}
+
+/**
+ * Provider ready message payload
+ */
+export interface IProviderReadyPayload {
+ name: string;
+ features: TProviderFeature[];
+ icon?: string;
+ version?: string;
+}
+
+/**
+ * Provider response payload
+ */
+export interface IProviderResponsePayload {
+ success: boolean;
+ data?: unknown;
+ error?: string;
+}
+
+/**
+ * Provider data offer payload (e.g., for media-source)
+ */
+export interface IProviderDataOfferPayload {
+ type: 'media-url' | 'document' | 'file-list';
+ data: unknown;
+ metadata?: Record;
+}
+
+/**
+ * Message types from Ecobridge to Provider
+ */
+export type TEcobridgeToProviderMessageType =
+ | 'request-features' // Ask provider to declare features
+ | 'send-data' // Send data to provider (e.g., scan)
+ | 'request-data' // Request data from provider (e.g., media URL)
+ | 'ping'; // Health check
+
+/**
+ * Message from Ecobridge to Provider
+ */
+export interface IEcobridgeMessage {
+ type: TEcobridgeToProviderMessageType;
+ requestId: string;
+ payload?: unknown;
+}
+
+/**
+ * Send data payload (e.g., sending scan to provider)
+ */
+export interface ISendDataPayload {
+ dataType: 'scan' | 'document' | 'print-job';
+ data: string; // Base64 encoded data
+ format: string; // File format (pdf, jpeg, etc.)
+ filename?: string;
+ metadata?: Record;
+}
+
+/**
+ * Request data payload (e.g., requesting media from provider)
+ */
+export interface IRequestDataPayload {
+ dataType: 'media-url' | 'document' | 'file-list';
+ filter?: Record;
+}
+
+/**
+ * Feature change event - when provider's features differ from confirmed
+ */
+export interface IFeatureChangeRequest {
+ providerId: string;
+ providerName: string;
+ addedFeatures: TProviderFeature[];
+ removedFeatures: TProviderFeature[];
+ currentFeatures: TProviderFeature[];
+}
+
+/**
+ * Provider store schema for persistence
+ */
+export interface IProviderStore {
+ providers: IDataProvider[];
+ lastUpdated: Date;
+}
+
+/**
+ * Events dispatched by eco-provider-frame
+ */
+export interface IProviderFrameEvents {
+ 'provider-ready': CustomEvent<{ provider: IDataProvider }>;
+ 'provider-features-changed': CustomEvent<{ request: IFeatureChangeRequest }>;
+ 'provider-response': CustomEvent<{ requestId: string; response: IProviderResponsePayload }>;
+ 'provider-data-offer': CustomEvent<{ offer: IProviderDataOfferPayload }>;
+ 'provider-error': CustomEvent<{ error: string }>;
+ 'provider-disconnected': CustomEvent<{ providerId: string }>;
+}
diff --git a/ts_web/elements/interfaces/index.ts b/ts_web/elements/interfaces/index.ts
index f857640..a808335 100644
--- a/ts_web/elements/interfaces/index.ts
+++ b/ts_web/elements/interfaces/index.ts
@@ -3,3 +3,4 @@ export * from './appbarmenuitem.js';
export * from './menugroup.js';
export * from './appconfig.js';
export * from './secondarymenu.js';
+export * from './dataprovider.js';
diff --git a/ts_web/views/eco-view-browser/eco-view-browser.demo.ts b/ts_web/views/eco-view-browser/eco-view-browser.demo.ts
new file mode 100644
index 0000000..748b67d
--- /dev/null
+++ b/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`
+
+ {
+ await super.connectedCallback();
+ // Check if we're in Electron - webview tag only works in Electron
+ // Since nodeIntegration is disabled, we check for the existence of electronAPI
+ // or if we're in a file:// protocol (Electron loads from file://)
+ this.isElectron = typeof window !== 'undefined' && (
+ typeof (window as any).electronAPI !== 'undefined' ||
+ window.location.protocol === 'file:' ||
+ navigator.userAgent.includes('Electron')
+ );
+
+ if (this.defaultUrl) {
+ this.inputUrl = this.defaultUrl;
+ }
+ }
+
+ protected updated(changedProperties: Map): void {
+ super.updated(changedProperties);
+ // Bind webview events after it's rendered
+ this.bindWebviewEvents();
+ }
+
+ private bindWebviewEvents(): void {
+ if (!this.isElectron || this.webviewEventsBound) return;
+
+ const webview = this.shadowRoot?.querySelector('webview') as any;
+ if (!webview) return;
+
+ this.webviewEventsBound = true;
+
+ webview.addEventListener('did-start-loading', () => {
+ this.isLoading = true;
+ });
+
+ webview.addEventListener('did-stop-loading', () => {
+ this.isLoading = false;
+ this.updateNavigationState();
+ });
+
+ webview.addEventListener('did-navigate', (e: any) => {
+ this.currentUrl = e.url || this.currentUrl;
+ this.inputUrl = this.currentUrl;
+ this.updateNavigationState();
+ });
+
+ webview.addEventListener('did-navigate-in-page', (e: any) => {
+ if (e.isMainFrame) {
+ this.currentUrl = e.url || this.currentUrl;
+ this.inputUrl = this.currentUrl;
+ }
+ });
+
+ webview.addEventListener('page-title-updated', (e: any) => {
+ this.pageTitle = e.title || '';
+ });
+
+ webview.addEventListener('page-favicon-updated', (e: any) => {
+ // Could store favicon for bookmarks
+ });
+
+ webview.addEventListener('dom-ready', () => {
+ this.updateNavigationState();
+ });
+
+ console.log('Webview events bound');
+ }
+
+ public render(): TemplateResult {
+ return html`
+ {
+ if (!this.selectedScannerId || this.isScanning) return;
+
+ this.isScanning = true;
+ this.dispatchEvent(new CustomEvent('scan-request', {
+ detail: {
+ scannerId: this.selectedScannerId,
+ settings: this.settings,
+ },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ public setScanResult(result: { data: string; format: TScanFormat; thumbnail?: string }): void {
+ const doc: IScannedDocument = {
+ id: crypto.randomUUID(),
+ timestamp: new Date(),
+ format: result.format,
+ data: result.data,
+ thumbnail: result.thumbnail,
+ size: result.data.length,
+ };
+
+ this.currentDocument = doc;
+ this.currentPreview = result.thumbnail || `data:image/${result.format};base64,${result.data}`;
+ this.scanHistory = [doc, ...this.scanHistory.slice(0, 19)]; // Keep last 20
+ this.isScanning = false;
+ }
+
+ public setScanError(error: string): void {
+ this.isScanning = false;
+ console.error('Scan error:', error);
+ // Could dispatch error event or show toast
+ }
+
+ private handleSaveLocal(): void {
+ if (!this.currentDocument) return;
+
+ this.dispatchEvent(new CustomEvent('save-local', {
+ detail: { document: this.currentDocument },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleSendToProvider(providerId: string): void {
+ if (!this.currentDocument) return;
+
+ this.showSendToMenu = false;
+ this.dispatchEvent(new CustomEvent('send-to-provider', {
+ detail: {
+ providerId,
+ document: this.currentDocument,
+ },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleHistoryItemClick(doc: IScannedDocument): void {
+ this.currentDocument = doc;
+ this.currentPreview = doc.thumbnail || `data:image/${doc.format};base64,${doc.data}`;
+ this.activePanel = 'scan';
+ }
+
+ private updateSetting(key: K, value: IScanSettings[K]): void {
+ this.settings = { ...this.settings, [key]: value };
+ this.dispatchEvent(new CustomEvent('settings-change', {
+ detail: { settings: this.settings },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private getColorModeLabel(mode: TScanColorMode): string {
+ const labels: Record = {
+ color: 'Color',
+ grayscale: 'Grayscale',
+ blackwhite: 'Black & White',
+ };
+ return labels[mode];
+ }
+
+ private getSourceLabel(source: TScanSource): string {
+ const labels: Record = {
+ flatbed: 'Flatbed',
+ adf: 'Document Feeder',
+ 'adf-duplex': 'Document Feeder (Duplex)',
+ };
+ return labels[source];
+ }
+
+ private formatDate(date: Date): string {
+ return new Intl.DateTimeFormat('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ }).format(date);
+ }
+}
diff --git a/ts_web/views/eco-view-scan/index.ts b/ts_web/views/eco-view-scan/index.ts
new file mode 100644
index 0000000..27928cc
--- /dev/null
+++ b/ts_web/views/eco-view-scan/index.ts
@@ -0,0 +1 @@
+export * from './eco-view-scan.js';
diff --git a/ts_web/views/eco-view-system/eco-view-system.ts b/ts_web/views/eco-view-system/eco-view-system.ts
index ec826f0..17ca507 100644
--- a/ts_web/views/eco-view-system/eco-view-system.ts
+++ b/ts_web/views/eco-view-system/eco-view-system.ts
@@ -149,27 +149,83 @@ export class EcoViewSystem extends DeesElement {
@property({ type: String })
accessor activePanel: TSystemPanel = 'overview';
- // Mock system data
- @state()
- accessor cpuUsage = 42;
+ // System data (can be set externally)
+ @property({ type: Number })
+ accessor cpuUsage = 0;
+
+ @property({ type: Number })
+ accessor memoryUsage = 0;
+
+ @property({ type: Number })
+ accessor diskUsage = 0;
+
+ @property({ type: Number })
+ accessor cpuTemp = 0;
+
+ @property({ type: String })
+ accessor uptime = '--';
+
+ @property({ type: Number })
+ accessor cpuCores = 0;
+
+ @property({ type: String })
+ accessor cpuModel = 'Unknown';
+
+ @property({ type: Number })
+ accessor cpuSpeed = 0;
+
+ @property({ type: Number })
+ accessor memoryTotal = 0;
+
+ @property({ type: Number })
+ accessor memoryUsed = 0;
+
+ @property({ type: Number })
+ accessor memoryFree = 0;
+
+ @property({ type: String })
+ accessor hostname = 'Unknown';
+
+ @property({ type: String })
+ accessor platform = 'Unknown';
+
+ @property({ type: Array })
+ accessor loadAvg: number[] = [0, 0, 0];
@state()
- accessor memoryUsage = 67;
+ accessor networkIn = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
@state()
- accessor diskUsage = 54;
+ accessor networkOut = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
- @state()
- accessor cpuTemp = 58;
+ // Public method to update metrics from backend
+ public setMetrics(metrics: {
+ cpu: { usage: number; cores: number; model: string; speed: number; loadAvg: number[] };
+ memory: { total: number; used: number; free: number; usagePercent: number };
+ system: { platform: string; hostname: string; uptimeFormatted: string };
+ }): void {
+ this.cpuUsage = metrics.cpu.usage;
+ this.cpuCores = metrics.cpu.cores;
+ this.cpuModel = metrics.cpu.model;
+ this.cpuSpeed = metrics.cpu.speed;
+ this.loadAvg = metrics.cpu.loadAvg;
+ this.memoryUsage = metrics.memory.usagePercent;
+ this.memoryTotal = metrics.memory.total;
+ this.memoryUsed = metrics.memory.used;
+ this.memoryFree = metrics.memory.free;
+ this.hostname = metrics.system.hostname;
+ this.platform = metrics.system.platform;
+ this.uptime = metrics.system.uptimeFormatted;
+ }
- @state()
- accessor uptime = '14d 7h 32m';
-
- @state()
- accessor networkIn = [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 72];
-
- @state()
- accessor networkOut = [32, 28, 35, 42, 38, 45, 52, 48, 55, 62, 58, 65];
+ // Helper to format bytes
+ private formatBytes(bytes: number): string {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+ }
private getMenuGroups(): ISecondaryMenuGroup[] {
return [
@@ -299,6 +355,7 @@ export class EcoViewSystem extends DeesElement {
value: this.memoryUsage,
type: 'gauge' as const,
icon: 'lucide:memoryStick',
+ description: this.memoryTotal ? `${this.formatBytes(this.memoryUsed)} of ${this.formatBytes(this.memoryTotal)}` : undefined,
gaugeOptions: {
min: 0,
max: 100,
@@ -373,12 +430,12 @@ export class EcoViewSystem extends DeesElement {
description: 'Since last reboot',
},
{
- id: 'processes',
- title: 'Processes',
- value: 247,
- type: 'number' as const,
- icon: 'lucide:layers',
- description: '12 running, 235 sleeping',
+ id: 'hostname',
+ title: 'Hostname',
+ value: this.hostname,
+ type: 'text' as const,
+ icon: 'lucide:server',
+ description: `${this.platform} - ${this.cpuCores} cores`,
},
];
diff --git a/ts_web/views/index.ts b/ts_web/views/index.ts
index ddbb266..b8bb6f3 100644
--- a/ts_web/views/index.ts
+++ b/ts_web/views/index.ts
@@ -4,3 +4,5 @@ export * from './eco-view-saasshare/index.js';
export * from './eco-view-system/index.js';
export * from './eco-view-home/index.js';
export * from './eco-view-login/index.js';
+export * from './eco-view-scan/index.js';
+export * from './eco-view-browser/index.js';
e.preventDefault()}
+ >
e.preventDefault()}
>
diff --git a/ts_web/elements/eco-provider-frame/eco-provider-frame.demo.ts b/ts_web/elements/eco-provider-frame/eco-provider-frame.demo.ts
new file mode 100644
index 0000000..d767a72
--- /dev/null
+++ b/ts_web/elements/eco-provider-frame/eco-provider-frame.demo.ts
@@ -0,0 +1,46 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+
+
+
+`;
diff --git a/ts_web/elements/eco-provider-frame/eco-provider-frame.ts b/ts_web/elements/eco-provider-frame/eco-provider-frame.ts
new file mode 100644
index 0000000..3188670
--- /dev/null
+++ b/ts_web/elements/eco-provider-frame/eco-provider-frame.ts
@@ -0,0 +1,502 @@
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ css,
+ cssManager,
+ state,
+ query,
+} from '@design.estate/dees-element';
+import { DeesIcon } from '@design.estate/dees-catalog';
+import type {
+ IDataProvider,
+ IProviderMessage,
+ IEcobridgeMessage,
+ IProviderReadyPayload,
+ IProviderResponsePayload,
+ IProviderDataOfferPayload,
+ IFeatureChangeRequest,
+ TProviderFeature,
+ TProviderStatus,
+ ISendDataPayload,
+ IRequestDataPayload,
+} from '../interfaces/dataprovider.js';
+import { demo } from './eco-provider-frame.demo.js';
+
+// Ensure components are registered
+DeesIcon;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'eco-provider-frame': EcoProviderFrame;
+ }
+}
+
+@customElement('eco-provider-frame')
+export class EcoProviderFrame extends DeesElement {
+ public static demo = demo;
+ public static demoGroup = 'Elements';
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+
+ .provider-frame-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ }
+
+ .loading-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ background: ${cssManager.bdTheme('rgba(255,255,255,0.9)', 'rgba(0,0,0,0.8)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+ z-index: 10;
+ }
+
+ .loading-overlay dees-icon {
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+ }
+
+ .error-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ background: ${cssManager.bdTheme('rgba(255,255,255,0.95)', 'rgba(0,0,0,0.9)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 70%)')};
+ z-index: 10;
+ padding: 32px;
+ text-align: center;
+ }
+
+ .error-overlay .error-icon {
+ color: hsl(0 72% 50%);
+ }
+
+ .error-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: hsl(0 72% 50%);
+ }
+
+ .error-message {
+ font-size: 14px;
+ max-width: 400px;
+ line-height: 1.5;
+ }
+
+ .retry-button {
+ margin-top: 8px;
+ padding: 10px 20px;
+ font-size: 14px;
+ font-weight: 500;
+ background: hsl(217 91% 60%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: background 0.15s ease;
+ }
+
+ .retry-button:hover {
+ background: hsl(217 91% 55%);
+ }
+
+ .disconnected-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ background: ${cssManager.bdTheme('rgba(255,255,255,0.95)', 'rgba(0,0,0,0.9)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ z-index: 10;
+ }
+ `,
+ ];
+
+ @property({ type: String })
+ accessor providerId = '';
+
+ @property({ type: String })
+ accessor providerUrl = '';
+
+ @property({ type: String })
+ accessor providerName = '';
+
+ @property({ type: Array })
+ accessor confirmedFeatures: TProviderFeature[] = [];
+
+ @property({ type: Boolean })
+ accessor sandboxed = true;
+
+ @state()
+ accessor status: TProviderStatus = 'loading';
+
+ @state()
+ accessor error: string | null = null;
+
+ @state()
+ accessor currentFeatures: TProviderFeature[] = [];
+
+ @query('iframe')
+ accessor iframe: HTMLIFrameElement | null;
+
+ private messageHandler: ((e: MessageEvent) => void) | null = null;
+ private pendingRequests: Map
+ The provider frame loads external web apps that implement the ecobridge provider protocol.
+ In this demo, no provider URL is set, so it shows the loading state.
+
+
+ console.log('Provider ready:', e.detail)}
+ @provider-features-changed=${(e: CustomEvent) => console.log('Features changed:', e.detail)}
+ @provider-response=${(e: CustomEvent) => console.log('Response:', e.detail)}
+ @provider-error=${(e: CustomEvent) => console.log('Error:', e.detail)}
+ >
+
+
+ ${this.providerUrl ? html`
+
+ ` : ''}
+ ${this.renderOverlay()}
+
+ `;
+ }
+
+ private renderOverlay(): TemplateResult | null {
+ switch (this.status) {
+ case 'loading':
+ return html`
+
+ `;
+ case 'error':
+ return html`
+
+ `;
+ case 'disconnected':
+ return html`
+
+ `;
+ default:
+ return null;
+ }
+ }
+
+ private handleIframeLoad(): void {
+ // Start waiting for provider-ready message
+ // If not received within timeout, show error
+ setTimeout(() => {
+ if (this.status === 'loading') {
+ this.status = 'error';
+ this.error = 'Provider did not respond. Make sure it implements the ecobridge provider protocol.';
+ }
+ }, 10000); // 10 second timeout for provider to declare ready
+ }
+
+ private handleIframeError(): void {
+ this.status = 'error';
+ this.error = 'Failed to load provider URL';
+ }
+
+ private handleProviderMessage(event: MessageEvent): void {
+ // Verify origin matches provider URL
+ if (!this.providerUrl) return;
+
+ try {
+ const providerOrigin = new URL(this.providerUrl).origin;
+ if (event.origin !== providerOrigin) return;
+ } catch {
+ return;
+ }
+
+ const message = event.data as IProviderMessage;
+ if (!message || typeof message.type !== 'string') return;
+
+ // Only accept messages from this provider
+ if (message.providerId && message.providerId !== this.providerId) return;
+
+ switch (message.type) {
+ case 'provider-ready':
+ this.handleProviderReady(message.payload as IProviderReadyPayload);
+ break;
+ case 'provider-features':
+ this.handleFeaturesUpdate(message.payload as { features: TProviderFeature[] });
+ break;
+ case 'provider-response':
+ this.handleProviderResponse(message.requestId!, message.payload as IProviderResponsePayload);
+ break;
+ case 'provider-error':
+ this.handleProviderError(message.payload as { error: string });
+ break;
+ case 'data-offer':
+ this.handleDataOffer(message.payload as IProviderDataOfferPayload);
+ break;
+ }
+ }
+
+ private handleProviderReady(payload: IProviderReadyPayload): void {
+ this.currentFeatures = payload.features || [];
+
+ // Check for feature changes
+ if (this.confirmedFeatures.length > 0) {
+ const added = this.currentFeatures.filter(f => !this.confirmedFeatures.includes(f));
+ const removed = this.confirmedFeatures.filter(f => !this.currentFeatures.includes(f));
+
+ if (added.length > 0 || removed.length > 0) {
+ const request: IFeatureChangeRequest = {
+ providerId: this.providerId,
+ providerName: payload.name || this.providerName,
+ addedFeatures: added,
+ removedFeatures: removed,
+ currentFeatures: this.currentFeatures,
+ };
+
+ this.dispatchEvent(new CustomEvent('provider-features-changed', {
+ detail: { request },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+ }
+
+ this.status = 'connected';
+
+ const provider: IDataProvider = {
+ id: this.providerId,
+ name: payload.name || this.providerName,
+ url: this.providerUrl,
+ features: this.currentFeatures,
+ confirmedFeatures: this.confirmedFeatures,
+ icon: payload.icon,
+ lastSeen: new Date(),
+ status: 'connected',
+ enabled: true,
+ };
+
+ this.dispatchEvent(new CustomEvent('provider-ready', {
+ detail: { provider },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleFeaturesUpdate(payload: { features: TProviderFeature[] }): void {
+ const previousFeatures = [...this.currentFeatures];
+ this.currentFeatures = payload.features || [];
+
+ const added = this.currentFeatures.filter(f => !previousFeatures.includes(f));
+ const removed = previousFeatures.filter(f => !this.currentFeatures.includes(f));
+
+ if (added.length > 0 || removed.length > 0) {
+ const request: IFeatureChangeRequest = {
+ providerId: this.providerId,
+ providerName: this.providerName,
+ addedFeatures: added,
+ removedFeatures: removed,
+ currentFeatures: this.currentFeatures,
+ };
+
+ this.dispatchEvent(new CustomEvent('provider-features-changed', {
+ detail: { request },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+ }
+
+ private handleProviderResponse(requestId: string, response: IProviderResponsePayload): void {
+ const pending = this.pendingRequests.get(requestId);
+ if (pending) {
+ clearTimeout(pending.timeout);
+ this.pendingRequests.delete(requestId);
+ pending.resolve(response);
+ }
+
+ this.dispatchEvent(new CustomEvent('provider-response', {
+ detail: { requestId, response },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleProviderError(payload: { error: string }): void {
+ this.dispatchEvent(new CustomEvent('provider-error', {
+ detail: { error: payload.error },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleDataOffer(offer: IProviderDataOfferPayload): void {
+ this.dispatchEvent(new CustomEvent('provider-data-offer', {
+ detail: { offer },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ // Public API
+ public retry(): void {
+ this.status = 'loading';
+ this.error = null;
+ if (this.iframe) {
+ this.iframe.src = this.providerUrl;
+ }
+ }
+
+ public sendMessage(message: IEcobridgeMessage): void {
+ if (!this.iframe?.contentWindow) {
+ console.warn('Cannot send message: iframe not ready');
+ return;
+ }
+
+ try {
+ const origin = new URL(this.providerUrl).origin;
+ this.iframe.contentWindow.postMessage(message, origin);
+ } catch (e) {
+ console.error('Failed to send message to provider:', e);
+ }
+ }
+
+ public async sendData(data: ISendDataPayload, timeoutMs = 30000): Promise
+ 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')}
+ >
+
+`;
diff --git a/ts_web/views/eco-view-browser/eco-view-browser.ts b/ts_web/views/eco-view-browser/eco-view-browser.ts
new file mode 100644
index 0000000..1237e3a
--- /dev/null
+++ b/ts_web/views/eco-view-browser/eco-view-browser.ts
@@ -0,0 +1,959 @@
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ css,
+ cssManager,
+ state,
+} from '@design.estate/dees-element';
+import { DeesIcon } from '@design.estate/dees-catalog';
+import { demo } from './eco-view-browser.demo.js';
+
+// Ensure components are registered
+DeesIcon;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'eco-view-browser': EcoViewBrowser;
+ }
+}
+
+// Types
+export interface IBookmark {
+ id: string;
+ title: string;
+ url: string;
+ favicon?: string;
+ createdAt: Date;
+}
+
+export interface IBrowserState {
+ url: string;
+ title: string;
+ canGoBack: boolean;
+ canGoForward: boolean;
+ isLoading: boolean;
+}
+
+export type TBrowserPanel = 'browser' | 'bookmarks';
+
+@customElement('eco-view-browser')
+export class EcoViewBrowser extends DeesElement {
+ public static demo = demo;
+ public static demoGroup = 'Views';
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .browser-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+
+ .toolbar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
+ border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
+ }
+
+ .nav-buttons {
+ display: flex;
+ gap: 4px;
+ }
+
+ .nav-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .nav-button:hover:not(:disabled) {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ }
+
+ .nav-button:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+
+ .nav-button.loading dees-icon {
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+ }
+
+ .url-container {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+ border-radius: 8px;
+ padding: 0 12px;
+ height: 36px;
+ transition: border-color 0.15s ease;
+ }
+
+ .url-container:focus-within {
+ border-color: hsl(217 91% 60%);
+ }
+
+ .url-icon {
+ margin-right: 8px;
+ opacity: 0.5;
+ }
+
+ .url-input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')};
+ outline: none;
+ }
+
+ .url-input::placeholder {
+ color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
+ }
+
+ .bookmark-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .bookmark-button:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+ }
+
+ .bookmark-button.bookmarked {
+ color: hsl(45 93% 47%);
+ }
+
+ .bookmark-button.bookmarked:hover {
+ color: hsl(45 93% 40%);
+ }
+
+ .menu-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .menu-button:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+ }
+
+ .webview-container {
+ flex: 1;
+ position: relative;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 5%)')};
+ overflow: hidden;
+ }
+
+ .webview-wrapper {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ webview {
+ width: 100%;
+ height: 100%;
+ border: none;
+ display: flex;
+ }
+
+ .placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+ gap: 16px;
+ }
+
+ .placeholder dees-icon {
+ opacity: 0.3;
+ }
+
+ .placeholder-text {
+ font-size: 14px;
+ }
+
+ .placeholder-hint {
+ font-size: 12px;
+ opacity: 0.7;
+ }
+
+ .bookmarks-bar {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 12px;
+ background: ${cssManager.bdTheme('#fafafa', 'hsl(240 6% 9%)')};
+ border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 13%)')};
+ overflow-x: auto;
+ }
+
+ .bookmarks-bar::-webkit-scrollbar {
+ height: 4px;
+ }
+
+ .bookmarks-bar::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .bookmarks-bar::-webkit-scrollbar-thumb {
+ background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(240 5% 25%)')};
+ border-radius: 2px;
+ }
+
+ .bookmark-chip {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 10px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
+ border-radius: 6px;
+ font-size: 12px;
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+ cursor: pointer;
+ white-space: nowrap;
+ transition: all 0.15s ease;
+ }
+
+ .bookmark-chip:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(240 5% 18%)')};
+ border-color: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(240 5% 25%)')};
+ }
+
+ .bookmark-chip .favicon {
+ width: 14px;
+ height: 14px;
+ border-radius: 2px;
+ }
+
+ .dropdown-menu {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: 4px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 25%)')};
+ border-radius: 8px;
+ box-shadow: 0 4px 16px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+ min-width: 180px;
+ z-index: 100;
+ overflow: hidden;
+ }
+
+ .dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ cursor: pointer;
+ transition: background 0.1s ease;
+ }
+
+ .dropdown-item:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(240 5% 20%)')};
+ }
+
+ .dropdown-item.destructive {
+ color: hsl(0 72% 50%);
+ }
+
+ .dropdown-item.destructive:hover {
+ background: hsl(0 72% 95%);
+ }
+
+ .dropdown-divider {
+ height: 1px;
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
+ margin: 4px 0;
+ }
+
+ .menu-container {
+ position: relative;
+ }
+
+ /* Bookmarks panel styles */
+ .bookmarks-panel {
+ padding: 32px 48px;
+ overflow-y: auto;
+ height: 100%;
+ }
+
+ .panel-header {
+ margin-bottom: 24px;
+ }
+
+ .panel-title {
+ font-size: 28px;
+ font-weight: 600;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ margin: 0 0 8px 0;
+ }
+
+ .panel-description {
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ margin: 0;
+ }
+
+ .bookmarks-list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .bookmark-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .bookmark-item:hover {
+ border-color: hsl(217 91% 60%);
+ transform: translateX(2px);
+ }
+
+ .bookmark-item .favicon {
+ width: 20px;
+ height: 20px;
+ border-radius: 4px;
+ flex-shrink: 0;
+ }
+
+ .bookmark-info {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .bookmark-title {
+ font-size: 14px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .bookmark-url {
+ font-size: 12px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .bookmark-delete {
+ opacity: 0;
+ transition: opacity 0.15s ease;
+ }
+
+ .bookmark-item:hover .bookmark-delete {
+ opacity: 1;
+ }
+
+ .bookmark-delete-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border: none;
+ border-radius: 4px;
+ background: transparent;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ cursor: pointer;
+ }
+
+ .bookmark-delete-btn:hover {
+ background: hsl(0 72% 95%);
+ color: hsl(0 72% 50%);
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 60px 20px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .empty-state dees-icon {
+ margin-bottom: 16px;
+ opacity: 0.4;
+ }
+
+ .empty-state p {
+ font-size: 14px;
+ margin: 0;
+ }
+
+ .loading-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg,
+ hsl(217 91% 60%) 0%,
+ hsl(217 91% 70%) 50%,
+ hsl(217 91% 60%) 100%
+ );
+ background-size: 200% 100%;
+ animation: loading 1.5s linear infinite;
+ }
+
+ @keyframes loading {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+ }
+ `,
+ ];
+
+ @property({ type: Array })
+ accessor bookmarks: IBookmark[] = [];
+
+ @property({ type: Boolean })
+ accessor showBookmarksBar = true;
+
+ @property({ type: String })
+ accessor defaultUrl = '';
+
+ @state()
+ accessor activePanel: TBrowserPanel = 'browser';
+
+ @state()
+ accessor currentUrl = '';
+
+ @state()
+ accessor inputUrl = '';
+
+ @state()
+ accessor pageTitle = '';
+
+ @state()
+ accessor canGoBack = false;
+
+ @state()
+ accessor canGoForward = false;
+
+ @state()
+ accessor isLoading = false;
+
+ @state()
+ accessor showMenu = false;
+
+ private isElectron = false;
+ private webviewEventsBound = false;
+
+ async connectedCallback(): Promise
+ ${this.renderToolbar()}
+ ${this.showBookmarksBar && this.bookmarks.length > 0 ? this.renderBookmarksBar() : ''}
+ ${this.activePanel === 'browser' ? this.renderBrowserContent() : this.renderBookmarksPanel()}
+
+ `;
+ }
+
+ private renderToolbar(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private renderMenu(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private renderBookmarksBar(): TemplateResult {
+ return html`
+
+ ${this.bookmarks.slice(0, 10).map(bookmark => html`
+
+ `;
+ }
+
+ private renderBrowserContent(): TemplateResult {
+ return html`
+ this.navigate(bookmark.url)}
+ >
+ ${bookmark.favicon
+ ? html`
`
+ : html`
+ `)}
+
+ ${this.isLoading ? html`` : ''}
+
+ `;
+ }
+
+ private renderWebview(): TemplateResult {
+ // In Electron, we use webview tag. In browser, we show a notice.
+ if (this.isElectron) {
+ // Reset event binding flag when URL changes so events get rebound
+ // Note: webview events are bound in updated() lifecycle
+ return html`
+
+ ${this.currentUrl ? this.renderWebview() : this.renderPlaceholder()}
+
+
+
+ `;
+ }
+ }
+
+ private renderPlaceholder(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ private renderBookmarksPanel(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ // Navigation methods
+ private navigate(url: string): void {
+ if (!url) return;
+
+ // Add protocol if missing
+ if (!/^https?:\/\//i.test(url)) {
+ // Check if it looks like a domain
+ if (/^[a-zA-Z0-9][a-zA-Z0-9-]*\.[a-zA-Z]{2,}/.test(url)) {
+ url = 'https://' + url;
+ } else {
+ // Treat as search query
+ url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
+ }
+ }
+
+ this.currentUrl = url;
+ this.inputUrl = url;
+ this.isLoading = true;
+
+ this.dispatchEvent(new CustomEvent('navigate', {
+ detail: { url },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleUrlKeydown(e: KeyboardEvent): void {
+ if (e.key === 'Enter') {
+ this.navigate(this.inputUrl);
+ }
+ }
+
+ private get webview(): any {
+ return this.shadowRoot?.querySelector('webview');
+ }
+
+ private handleBack(): void {
+ const wv = this.webview;
+ if (wv && this.isElectron) {
+ wv.goBack();
+ }
+ this.dispatchEvent(new CustomEvent('browser-back', { bubbles: true, composed: true }));
+ }
+
+ private handleForward(): void {
+ const wv = this.webview;
+ if (wv && this.isElectron) {
+ wv.goForward();
+ }
+ this.dispatchEvent(new CustomEvent('browser-forward', { bubbles: true, composed: true }));
+ }
+
+ private handleRefresh(): void {
+ const wv = this.webview;
+ if (wv && this.isElectron) {
+ wv.reload();
+ }
+ this.dispatchEvent(new CustomEvent('browser-refresh', { bubbles: true, composed: true }));
+ }
+
+ private handleStop(): void {
+ const wv = this.webview;
+ if (wv && this.isElectron) {
+ wv.stop();
+ }
+ this.isLoading = false;
+ this.dispatchEvent(new CustomEvent('browser-stop', { bubbles: true, composed: true }));
+ }
+
+ private handleFaviconUpdate(e: any): void {
+ // Could update current page favicon for bookmarks
+ }
+
+ private updateNavigationState(): void {
+ if (this.webview && this.isElectron) {
+ this.canGoBack = (this.webview as any).canGoBack?.() || false;
+ this.canGoForward = (this.webview as any).canGoForward?.() || false;
+ }
+ }
+
+ // Bookmark methods
+ private isCurrentPageBookmarked(): boolean {
+ return this.bookmarks.some(b => b.url === this.currentUrl);
+ }
+
+ private toggleBookmark(): void {
+ if (!this.currentUrl) return;
+
+ if (this.isCurrentPageBookmarked()) {
+ const bookmark = this.bookmarks.find(b => b.url === this.currentUrl);
+ if (bookmark) {
+ this.removeBookmark(bookmark.id);
+ }
+ } else {
+ this.addBookmark();
+ }
+ }
+
+ private addBookmark(): void {
+ const bookmark: IBookmark = {
+ id: crypto.randomUUID(),
+ title: this.pageTitle || this.currentUrl,
+ url: this.currentUrl,
+ createdAt: new Date(),
+ };
+
+ this.dispatchEvent(new CustomEvent('bookmark-add', {
+ detail: { bookmark },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private removeBookmark(id: string): void {
+ this.dispatchEvent(new CustomEvent('bookmark-remove', {
+ detail: { id },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private handleBookmarkClick(bookmark: IBookmark): void {
+ this.navigate(bookmark.url);
+ this.activePanel = 'browser';
+ }
+
+ // Menu actions
+ private handleNewTab(): void {
+ this.showMenu = false;
+ this.dispatchEvent(new CustomEvent('new-tab', { bubbles: true, composed: true }));
+ }
+
+ private handleOpenDevTools(): void {
+ this.showMenu = false;
+ if (this.webview && this.isElectron) {
+ (this.webview as any).openDevTools();
+ }
+ this.dispatchEvent(new CustomEvent('open-devtools', { bubbles: true, composed: true }));
+ }
+
+ private handleCopyUrl(): void {
+ this.showMenu = false;
+ if (this.currentUrl) {
+ navigator.clipboard.writeText(this.currentUrl);
+ }
+ }
+
+ // Public API
+ public goTo(url: string): void {
+ this.navigate(url);
+ }
+
+ public setBookmarks(bookmarks: IBookmark[]): void {
+ this.bookmarks = bookmarks;
+ }
+
+ public getState(): IBrowserState {
+ return {
+ url: this.currentUrl,
+ title: this.pageTitle,
+ canGoBack: this.canGoBack,
+ canGoForward: this.canGoForward,
+ isLoading: this.isLoading,
+ };
+ }
+}
diff --git a/ts_web/views/eco-view-browser/index.ts b/ts_web/views/eco-view-browser/index.ts
new file mode 100644
index 0000000..cf013ac
--- /dev/null
+++ b/ts_web/views/eco-view-browser/index.ts
@@ -0,0 +1 @@
+export * from './eco-view-browser.js';
diff --git a/ts_web/views/eco-view-scan/eco-view-scan.demo.ts b/ts_web/views/eco-view-scan/eco-view-scan.demo.ts
new file mode 100644
index 0000000..8c47dee
--- /dev/null
+++ b/ts_web/views/eco-view-scan/eco-view-scan.demo.ts
@@ -0,0 +1,30 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+
+
+
+
+ ${this.bookmarks.length > 0
+ ? html`
+ Bookmarks
+Your saved websites
+
+ ${this.bookmarks.map(bookmark => html`
+
+ `
+ : html`
+ this.handleBookmarkClick(bookmark)}>
+ ${bookmark.favicon
+ ? html``
+ : html`
+ `)}
+
+
+ ${bookmark.title || bookmark.url}
+ ${bookmark.url}
+
+
+
+
+
+ `
+ }
+ No bookmarks yet. Star a page to save it here.
+
+ console.log('Scanner selected:', e.detail)}
+ @scan-request=${(e: CustomEvent) => console.log('Scan requested:', e.detail)}
+ @save-local=${(e: CustomEvent) => console.log('Save local:', e.detail)}
+ @send-to-provider=${(e: CustomEvent) => console.log('Send to provider:', e.detail)}
+ >
+
+`;
diff --git a/ts_web/views/eco-view-scan/eco-view-scan.ts b/ts_web/views/eco-view-scan/eco-view-scan.ts
new file mode 100644
index 0000000..5448cba
--- /dev/null
+++ b/ts_web/views/eco-view-scan/eco-view-scan.ts
@@ -0,0 +1,839 @@
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ css,
+ cssManager,
+ state,
+} from '@design.estate/dees-element';
+import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
+import type { ISecondaryMenuGroup } from '../../elements/interfaces/secondarymenu.js';
+import { demo } from './eco-view-scan.demo.js';
+
+// Ensure components are registered
+DeesAppuiSecondarymenu;
+DeesIcon;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'eco-view-scan': EcoViewScan;
+ }
+}
+
+// Types
+export type TScanFormat = 'pdf' | 'jpeg' | 'png' | 'tiff';
+export type TScanColorMode = 'color' | 'grayscale' | 'blackwhite';
+export type TScanSource = 'flatbed' | 'adf' | 'adf-duplex';
+export type TScanPanel = 'scan' | 'history' | 'settings';
+
+export interface IScanSettings {
+ format: TScanFormat;
+ resolution: number;
+ colorMode: TScanColorMode;
+ source: TScanSource;
+}
+
+export interface IScannedDocument {
+ id: string;
+ timestamp: Date;
+ format: TScanFormat;
+ data: string; // base64
+ thumbnail?: string;
+ size: number;
+ name?: string;
+}
+
+export interface IScannerInfo {
+ id: string;
+ name: string;
+ address: string;
+ status: 'online' | 'offline' | 'busy' | 'error';
+ capabilities?: {
+ resolutions: number[];
+ formats: TScanFormat[];
+ colorModes: TScanColorMode[];
+ sources: TScanSource[];
+ };
+}
+
+export interface IDataProviderInfo {
+ id: string;
+ name: string;
+ icon?: string;
+}
+
+@customElement('eco-view-scan')
+export class EcoViewScan extends DeesElement {
+ public static demo = demo;
+ public static demoGroup = 'Views';
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .scan-container {
+ display: flex;
+ height: 100%;
+ }
+
+ dees-appui-secondarymenu {
+ flex-shrink: 0;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+ border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
+ }
+
+ .content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 32px 48px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .panel-header {
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .panel-header-left {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .panel-title {
+ font-size: 28px;
+ font-weight: 600;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ }
+
+ .panel-description {
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .scanner-selector {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 24px;
+ }
+
+ .scanner-selector label {
+ font-size: 14px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+ }
+
+ .scanner-selector select {
+ flex: 1;
+ max-width: 300px;
+ padding: 10px 14px;
+ font-size: 14px;
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+ border-radius: 8px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')};
+ cursor: pointer;
+ }
+
+ .scanner-selector select:focus {
+ outline: none;
+ border-color: hsl(217 91% 60%);
+ }
+
+ .preview-area {
+ flex: 1;
+ min-height: 300px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+ border: 2px dashed ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ margin-bottom: 24px;
+ }
+
+ .preview-area.has-image {
+ border-style: solid;
+ }
+
+ .preview-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
+ }
+
+ .preview-placeholder dees-icon {
+ opacity: 0.5;
+ }
+
+ .preview-image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+
+ .action-bar {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 32px;
+ }
+
+ .action-button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 24px;
+ font-size: 14px;
+ font-weight: 500;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .action-button.primary {
+ background: hsl(217 91% 60%);
+ color: white;
+ }
+
+ .action-button.primary:hover:not(:disabled) {
+ background: hsl(217 91% 55%);
+ }
+
+ .action-button.secondary {
+ background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(240 5% 20%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 90%)')};
+ }
+
+ .action-button.secondary:hover:not(:disabled) {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 25%)')};
+ }
+
+ .action-button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ .action-button.scanning dees-icon {
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+ }
+
+ .dropdown-container {
+ position: relative;
+ }
+
+ .dropdown-menu {
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ margin-bottom: 4px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 25%)')};
+ border-radius: 8px;
+ box-shadow: 0 4px 16px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+ min-width: 200px;
+ z-index: 100;
+ overflow: hidden;
+ }
+
+ .dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ cursor: pointer;
+ transition: background 0.1s ease;
+ }
+
+ .dropdown-item:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(240 5% 20%)')};
+ }
+
+ .dropdown-item dees-icon {
+ opacity: 0.7;
+ }
+
+ .settings-section {
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 20px;
+ }
+
+ .settings-section-title {
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ }
+
+ .setting-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 0;
+ border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 18%)')};
+ }
+
+ .setting-row:last-child {
+ border-bottom: none;
+ }
+
+ .setting-label {
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+ }
+
+ .setting-control select {
+ padding: 8px 12px;
+ font-size: 14px;
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+ border-radius: 6px;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')};
+ cursor: pointer;
+ }
+
+ .history-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 16px;
+ }
+
+ .history-item {
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ border-radius: 8px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .history-item:hover {
+ border-color: hsl(217 91% 60%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+ }
+
+ .history-thumbnail {
+ width: 100%;
+ aspect-ratio: 1;
+ background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(240 5% 18%)')};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .history-thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .history-info {
+ padding: 10px;
+ }
+
+ .history-name {
+ font-size: 13px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ margin-bottom: 4px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .history-date {
+ font-size: 12px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 60px 20px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .empty-state dees-icon {
+ margin-bottom: 16px;
+ opacity: 0.4;
+ }
+
+ .empty-state p {
+ font-size: 14px;
+ margin: 0;
+ }
+ `,
+ ];
+
+ @property({ type: Array })
+ accessor scanners: IScannerInfo[] = [];
+
+ @property({ type: Array })
+ accessor providers: IDataProviderInfo[] = [];
+
+ @state()
+ accessor activePanel: TScanPanel = 'scan';
+
+ @state()
+ accessor selectedScannerId: string | null = null;
+
+ @state()
+ accessor isScanning = false;
+
+ @state()
+ accessor currentPreview: string | null = null;
+
+ @state()
+ accessor currentDocument: IScannedDocument | null = null;
+
+ @state()
+ accessor scanHistory: IScannedDocument[] = [];
+
+ @state()
+ accessor settings: IScanSettings = {
+ format: 'pdf',
+ resolution: 300,
+ colorMode: 'color',
+ source: 'flatbed',
+ };
+
+ @state()
+ accessor showSendToMenu = false;
+
+ private get selectedScanner(): IScannerInfo | null {
+ return this.scanners.find(s => s.id === this.selectedScannerId) || null;
+ }
+
+ private get availableResolutions(): number[] {
+ return this.selectedScanner?.capabilities?.resolutions || [150, 300, 600];
+ }
+
+ private get availableFormats(): TScanFormat[] {
+ return this.selectedScanner?.capabilities?.formats || ['pdf', 'jpeg', 'png'];
+ }
+
+ private get availableColorModes(): TScanColorMode[] {
+ return this.selectedScanner?.capabilities?.colorModes || ['color', 'grayscale'];
+ }
+
+ private get availableSources(): TScanSource[] {
+ return this.selectedScanner?.capabilities?.sources || ['flatbed'];
+ }
+
+ public render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ private getMenuGroups(): ISecondaryMenuGroup[] {
+ return [
+ {
+ name: 'SCAN',
+ iconName: 'lucide:scan',
+ items: [
+ {
+ key: 'scan',
+ label: 'New Scan',
+ iconName: 'lucide:plus',
+ action: () => this.activePanel = 'scan',
+ },
+ ],
+ },
+ {
+ name: 'HISTORY',
+ iconName: 'lucide:history',
+ items: [
+ {
+ key: 'history',
+ label: 'Recent Scans',
+ iconName: 'lucide:clock',
+ action: () => this.activePanel = 'history',
+ badge: this.scanHistory.length > 0 ? this.scanHistory.length : undefined,
+ },
+ ],
+ },
+ {
+ name: 'OPTIONS',
+ iconName: 'lucide:settings',
+ items: [
+ {
+ key: 'settings',
+ label: 'Scan Settings',
+ iconName: 'lucide:sliders',
+ action: () => this.activePanel = 'settings',
+ },
+ ],
+ },
+ ];
+ }
+
+ private renderContent(): TemplateResult {
+ switch (this.activePanel) {
+ case 'scan':
+ return this.renderScanPanel();
+ case 'history':
+ return this.renderHistoryPanel();
+ case 'settings':
+ return this.renderSettingsPanel();
+ default:
+ return this.renderScanPanel();
+ }
+ }
+
+ private renderScanPanel(): TemplateResult {
+ return html`
+
+ ${this.renderContent()}
+
+
+
+
+
+
+ Scan Document
+Select a scanner and start scanning
+
+
+
+
+
+
+ ${this.currentPreview
+ ? html`
`
+ : html`
+
+
+
+ `;
+ }
+
+ private renderSendToMenu(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private renderHistoryPanel(): TemplateResult {
+ return html`
+
+
+ `
+ }
+
+
+
+ ${this.scanHistory.length > 0
+ ? html`
+
+
+ Recent Scans
+View and manage your scanned documents
+
+ ${this.scanHistory.map(doc => html`
+
+ `
+ : html`
+ this.handleHistoryItemClick(doc)}>
+
+ `)}
+
+ ${doc.thumbnail
+ ? html`
`
+ : html`
+
+
+ ${doc.name || `Scan ${doc.id.slice(0, 8)}`}
+ ${this.formatDate(doc.timestamp)}
+
+
+ `
+ }
+ `;
+ }
+
+ private renderSettingsPanel(): TemplateResult {
+ return html`
+ No scans yet. Start scanning to see your documents here.
+
+
+
+
+
+ Scan Settings
+Configure default scan options
+
+
+ `;
+ }
+
+ private handleScannerChange(e: Event): void {
+ const select = e.target as HTMLSelectElement;
+ this.selectedScannerId = select.value || null;
+ this.dispatchEvent(new CustomEvent('scanner-select', {
+ detail: { scannerId: this.selectedScannerId },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private async handleScan(): PromiseOutput Settings
+
+
+ Format
+
+
+
+
+
+
+ Resolution (DPI)
+
+
+
+
+
+
+ Color Mode
+
+
+
+
+
+
+ Source
+
+
+
+
+