npm - infaira-canvas - Versions diffs - 0.1.9 - Mend

infaira-canvas 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +264 -0
package/dist/commands/init.d.ts +17 -0
package/dist/commands/init.js +647 -0
package/dist/commands/upload.d.ts +8 -0
package/dist/commands/upload.js +164 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +123 -0
package/package.json +44 -0
package/templates/ICan-Customizing-Components.md +195 -0
package/templates/ICan-Widget-Development-Guide.md +500 -0
package/templates/ICan-Widget-Styling-Patterns.md +890 -0
package/templates/ICan-Widget-Theming-Guide.md +633 -0
package/templates/README.md +127 -0
package/templates/designer.d.ts +468 -0
package/templates/ican.d.ts +763 -0
package/templates/index.html +2225 -0
package/templates/resources/favicon.ico +2 -0
package/templates/resources/ican-components.js +1734 -0
package/templates/resources/infaira-icon.png +0 -0
package/templates/resources/infaira-logo.png +0 -0
package/templates/site.webmanifest +17 -0
package/templates/ui.html +1670 -0

package/templates/ui.html ADDED Viewed

@@ -0,0 +1,1670 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ICan Dev Harness — InfAIra Canvas</title>
+  <link rel="manifest" href="./site.webmanifest" />
+  <link rel="icon" type="image/png" href="./resources/infaira-icon.png" />
+  <meta name="theme-color" content="#7c6aff" />
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <!-- React 16 -->
+  <script src="https://unpkg.com/react@16.14.0/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
+  <!-- ICan Components -->
+  <script src="./resources/ican-components.js"></script>
+  <style>
+    /* ═══════════════════════════════════════════════════════
+       ICan Dev Harness — Theme Variables
+       Dark (default) | Light | Glass Dark | Glass Light
+       ═══════════════════════════════════════════════════════ */
+    /* ── Dark Theme (default) ─────────────────────────────── */
+    :root {
+      --ican-bg: #09090b;
+      --ican-header-bg: #0f0f12;
+      --ican-primary-bg: #141417;
+      --ican-secondary-bg: #1a1a1f;
+      --ican-primary-text: #fafafa;
+      --ican-secondary-text: #a1a1aa;
+      --ican-tertiary-text: #52525b;
+      --ican-border: rgba(255, 255, 255, 0.06);
+      --ican-border-bright: rgba(255, 255, 255, 0.12);
+      --ican-border-focus: #7c6aff;
+      --ican-accent: #7c6aff;
+      --ican-accent-hover: #6b59e8;
+      --ican-accent-text: #a99aff;
+      --ican-accent-dim: rgba(124, 106, 255, 0.08);
+      --ican-error: #f87171;
+      --ican-success: #4ade80;
+      --ican-warning: #fbbf24;
+      --ican-info: #60a5fa;
+      --ican-success-dim: rgba(74, 222, 128, 0.08);
+      --ican-error-dim: rgba(248, 113, 113, 0.08);
+      --ican-warning-dim: rgba(251, 191, 36, 0.08);
+      --ican-card-bg: #141417;
+      --ican-card-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
+      --ican-card-hover-shadow: 0 8px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
+      --ican-input-bg: #1a1a1f;
+      --ican-hover: rgba(255, 255, 255, 0.05);
+      --ican-modal-bg: #111114;
+      --ican-modal-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
+      --ican-btn-primary-bg: #7c6aff;
+      --ican-btn-primary-text: #ffffff;
+      --ican-btn-secondary-bg: #1a1a1f;
+      --ican-btn-secondary-text: #fafafa;
+      --ican-scrollbar-thumb: rgba(255, 255, 255, 0.10);
+      --ican-backdrop-filter: none;
+      --ican-glass-border: rgba(255, 255, 255, 0.10);
+      --ican-font-brand: 'Comfortaa', cursive;
+      --ican-font-body: 'Inter', system-ui, -apple-system, sans-serif;
+      --ican-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+      --ican-radius-xs: 4px;
+      --ican-radius-sm: 6px;
+      --ican-radius-md: 10px;
+      --ican-radius-lg: 16px;
+      --ican-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
+      --ican-transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    /* ── Light Theme ──────────────────────────────────────── */
+    [data-theme='light'] {
+      --ican-bg: #f5f5f7;
+      --ican-header-bg: rgba(255, 255, 255, 0.85);
+      --ican-primary-bg: #ffffff;
+      --ican-secondary-bg: #f0f0f4;
+      --ican-primary-text: #1d1d1f;
+      --ican-secondary-text: #6e6e80;
+      --ican-tertiary-text: #aeaeb8;
+      --ican-border: rgba(0, 0, 0, 0.06);
+      --ican-border-bright: rgba(0, 0, 0, 0.11);
+      --ican-border-focus: #5b4cd9;
+      --ican-accent: #5b4cd9;
+      --ican-accent-hover: #4a3cb5;
+      --ican-accent-text: #4a3cb5;
+      --ican-accent-dim: rgba(91, 76, 217, 0.07);
+      --ican-error: #dc2626;
+      --ican-success: #16a34a;
+      --ican-warning: #d97706;
+      --ican-info: #2563eb;
+      --ican-success-dim: rgba(22, 163, 74, 0.07);
+      --ican-error-dim: rgba(220, 38, 38, 0.07);
+      --ican-warning-dim: rgba(217, 119, 6, 0.07);
+      --ican-card-bg: #ffffff;
+      --ican-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
+      --ican-card-hover-shadow: 0 10px 30px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
+      --ican-input-bg: #f5f5f7;
+      --ican-hover: rgba(0, 0, 0, 0.035);
+      --ican-modal-bg: #ffffff;
+      --ican-modal-shadow: 0 25px 65px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
+      --ican-btn-primary-bg: #5b4cd9;
+      --ican-btn-primary-text: #ffffff;
+      --ican-btn-secondary-bg: #f0f0f5;
+      --ican-btn-secondary-text: #1d1d1f;
+      --ican-scrollbar-thumb: rgba(0, 0, 0, 0.14);
+      --ican-backdrop-filter: blur(20px) saturate(180%);
+      --ican-glass-border: rgba(0, 0, 0, 0.06);
+    }
+    /* ── Glass Dark Theme ─────────────────────────────────── */
+    [data-theme='glass-dark'] {
+      --ican-bg: transparent;
+      --ican-header-bg: rgba(255, 255, 255, 0.04);
+      --ican-primary-bg: rgba(255, 255, 255, 0.06);
+      --ican-secondary-bg: rgba(255, 255, 255, 0.05);
+      --ican-primary-text: rgba(255, 255, 255, 0.95);
+      --ican-secondary-text: rgba(220, 220, 245, 0.65);
+      --ican-tertiary-text: rgba(180, 180, 220, 0.40);
+      --ican-border: rgba(255, 255, 255, 0.13);
+      --ican-border-bright: rgba(255, 255, 255, 0.22);
+      --ican-border-focus: rgba(200, 190, 255, 0.90);
+      --ican-accent: #b4a8ff;
+      --ican-accent-hover: #a099ff;
+      --ican-accent-text: rgba(200, 190, 255, 0.95);
+      --ican-accent-dim: rgba(180, 168, 255, 0.14);
+      --ican-error: #fca5a5;
+      --ican-success: #86efac;
+      --ican-warning: #fcd34d;
+      --ican-info: #7dd3fc;
+      --ican-success-dim: rgba(134, 239, 172, 0.12);
+      --ican-error-dim: rgba(252, 165, 165, 0.12);
+      --ican-warning-dim: rgba(252, 211, 77, 0.12);
+      --ican-card-bg: rgba(255, 255, 255, 0.08);
+      --ican-card-shadow: 0 8px 32px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
+      --ican-card-hover-shadow: 0 16px 56px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
+      --ican-input-bg: rgba(255, 255, 255, 0.08);
+      --ican-hover: rgba(255, 255, 255, 0.08);
+      --ican-modal-bg: rgba(15, 10, 40, 0.72);
+      --ican-modal-shadow: 0 32px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.16);
+      --ican-btn-primary-bg: rgba(140, 120, 255, 0.75);
+      --ican-btn-primary-text: #ffffff;
+      --ican-btn-secondary-bg: rgba(255, 255, 255, 0.10);
+      --ican-btn-secondary-text: rgba(255, 255, 255, 0.90);
+      --ican-scrollbar-thumb: rgba(255, 255, 255, 0.18);
+      --ican-backdrop-filter: blur(24px) saturate(200%) brightness(1.12);
+      --ican-glass-border: rgba(255, 255, 255, 0.18);
+    }
+    /* ── Glass Light Theme ────────────────────────────────── */
+    [data-theme='glass-light'] {
+      --ican-bg: transparent;
+      --ican-header-bg: rgba(255, 255, 255, 0.30);
+      --ican-primary-bg: rgba(255, 255, 255, 0.42);
+      --ican-secondary-bg: rgba(255, 255, 255, 0.35);
+      --ican-primary-text: rgba(20, 20, 40, 0.92);
+      --ican-secondary-text: rgba(60, 60, 100, 0.62);
+      --ican-tertiary-text: rgba(100, 100, 140, 0.45);
+      --ican-border: rgba(255, 255, 255, 0.55);
+      --ican-border-bright: rgba(255, 255, 255, 0.70);
+      --ican-border-focus: rgba(90, 70, 220, 0.80);
+      --ican-accent: #5b4cd9;
+      --ican-accent-hover: #4a3cb5;
+      --ican-accent-text: #4a3cb5;
+      --ican-accent-dim: rgba(91, 76, 217, 0.10);
+      --ican-error: #dc2626;
+      --ican-success: #16a34a;
+      --ican-warning: #d97706;
+      --ican-info: #2563eb;
+      --ican-success-dim: rgba(22, 163, 74, 0.10);
+      --ican-error-dim: rgba(220, 38, 38, 0.10);
+      --ican-warning-dim: rgba(217, 119, 6, 0.10);
+      --ican-card-bg: rgba(255, 255, 255, 0.48);
+      --ican-card-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.60), inset 0 1px 0 rgba(255,255,255,0.80);
+      --ican-card-hover-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.70), inset 0 1px 0 rgba(255,255,255,0.85);
+      --ican-input-bg: rgba(255, 255, 255, 0.50);
+      --ican-hover: rgba(255, 255, 255, 0.30);
+      --ican-modal-bg: rgba(255, 255, 255, 0.72);
+      --ican-modal-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.65), inset 0 1px 0 rgba(255,255,255,0.90);
+      --ican-btn-primary-bg: rgba(91, 76, 217, 0.85);
+      --ican-btn-primary-text: #ffffff;
+      --ican-btn-secondary-bg: rgba(255, 255, 255, 0.55);
+      --ican-btn-secondary-text: rgba(30, 30, 60, 0.85);
+      --ican-scrollbar-thumb: rgba(0, 0, 0, 0.12);
+      --ican-backdrop-filter: blur(22px) saturate(190%) brightness(1.08);
+      --ican-glass-border: rgba(255, 255, 255, 0.50);
+    }
+    /* ── Glass Dark: vivid deep purple background ─────────── */
+    [data-theme='glass-dark'] body {
+      background:
+        radial-gradient(ellipse 70% 60% at 5%  10%, rgba(100, 70,  200, 0.40) 0%, transparent 70%),
+        radial-gradient(ellipse 80% 50% at 80%  5%, rgba( 50,100,  200, 0.30) 0%, transparent 65%),
+        radial-gradient(ellipse 60% 50% at 5%  90%, rgba( 80, 50,  180, 0.35) 0%, transparent 60%),
+        radial-gradient(ellipse 65% 55% at 90% 85%, rgba( 40, 80,  160, 0.25) 0%, transparent 60%),
+        #08061a;
+    }
+    /* ── Glass Light: bright pastel sky background ────────── */
+    [data-theme='glass-light'] body {
+      background:
+        radial-gradient(ellipse 55% 50% at 0%   15%, rgba(160,130,255,0.65) 0%, transparent 70%),
+        radial-gradient(ellipse 90% 45% at 55%   0%, rgba(100,180,255,0.75) 0%, transparent 65%),
+        radial-gradient(ellipse 45% 55% at 0%   60%, rgba(255,120,180,0.55) 0%, transparent 65%),
+        radial-gradient(ellipse 55% 50% at 85%  50%, rgba( 80,220,220,0.40) 0%, transparent 60%),
+        radial-gradient(ellipse 50% 40% at 5%   95%, rgba(255,170,120,0.50) 0%, transparent 60%),
+        radial-gradient(ellipse 60% 50% at 90%  90%, rgba(255,140,200,0.45) 0%, transparent 55%),
+        #d0e4ff;
+    }
+    /* ── Glass noise grain overlay ────────────────────────── */
+    [data-theme='glass-dark'] body::before,
+    [data-theme='glass-light'] body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
+      opacity: 0.04;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-repeat: repeat;
+      background-size: 180px 180px;
+    }
+    [data-theme='glass-light'] body::before { opacity: 0.035; }
+    /* ── Glass: app layer above noise ─────────────────────── */
+    [data-theme='glass-dark'] #app,
+    [data-theme='glass-light'] #app { position: relative; z-index: 1; }
+    /* ── Glass: frosted header ────────────────────────────── */
+    [data-theme='glass-dark'] .ican-header,
+    [data-theme='glass-light'] .ican-header {
+      backdrop-filter: var(--ican-backdrop-filter);
+      -webkit-backdrop-filter: var(--ican-backdrop-filter);
+      border-color: var(--ican-glass-border);
+    }
+    /* ── Light: frosted header ────────────────────────────── */
+    [data-theme='light'] .ican-header {
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
+    }
+    /* ── Glass: frosted widget cards ──────────────────────── */
+    [data-theme='glass-dark'] .ican-widget-card,
+    [data-theme='glass-light'] .ican-widget-card {
+      backdrop-filter: blur(32px) saturate(200%) brightness(1.06);
+      -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.06);
+      border-color: var(--ican-glass-border);
+    }
+    /* ── Glass: frosted panel ─────────────────────────────── */
+    [data-theme='glass-dark'] .ican-panel,
+    [data-theme='glass-light'] .ican-panel,
+    [data-theme='glass-dark'] .ican-theme-dropdown,
+    [data-theme='glass-light'] .ican-theme-dropdown {
+      backdrop-filter: blur(48px) saturate(210%);
+      -webkit-backdrop-filter: blur(48px) saturate(210%);
+    }
+    /* ── Glass: frosted conn bar ──────────────────────────── */
+    [data-theme='glass-dark'] .ican-conn-bar,
+    [data-theme='glass-light'] .ican-conn-bar {
+      backdrop-filter: var(--ican-backdrop-filter);
+      -webkit-backdrop-filter: var(--ican-backdrop-filter);
+      border-color: var(--ican-glass-border);
+    }
+    /* ═══════════════════════════════════════════════════════
+       Reset & Base
+       ═══════════════════════════════════════════════════════ */
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      transition-property: color, background-color, border-color, box-shadow, opacity, transform;
+      transition-duration: 150ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    html, body { height: 100%; }
+    body {
+      font-family: var(--ican-font-body);
+      color: var(--ican-primary-text);
+      background-color: var(--ican-bg);
+      line-height: 1.5;
+    }
+    *:focus-visible { outline: 2px solid var(--ican-border-focus); outline-offset: 2px; }
+    * { scrollbar-width: thin; scrollbar-color: var(--ican-scrollbar-thumb) transparent; }
+    ::-webkit-scrollbar { width: 5px; height: 5px; }
+    ::-webkit-scrollbar-thumb { background: var(--ican-scrollbar-thumb); border-radius: 3px; }
+    /* ═══════════════════════════════════════════════════════
+       Layout Shell
+       ═══════════════════════════════════════════════════════ */
+    #app {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
+    /* ═══════════════════════════════════════════════════════
+       Header  (z-index 600 keeps it above the theme backdrop 499)
+       ═══════════════════════════════════════════════════════ */
+    .ican-header {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      z-index: 600;
+      height: 56px;
+      background: var(--ican-header-bg);
+      border-bottom: 1px solid var(--ican-border);
+      display: flex;
+      align-items: center;
+      padding: 0 18px;
+      gap: 10px;
+      flex-shrink: 0;
+    }
+    .ican-logo {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      text-decoration: none;
+      flex-shrink: 0;
+    }
+    .ican-logo img { height: 28px; width: auto; }
+    .ican-logo-name {
+      font-family: var(--ican-font-brand);
+      font-size: 17px;
+      font-weight: 600;
+      color: var(--ican-primary-text);
+      letter-spacing: -0.3px;
+    }
+    .ican-logo-name em { font-style: normal; color: var(--ican-accent); }
+    .ican-sep { width: 1px; height: 22px; background: var(--ican-border-bright); flex-shrink: 0; }
+    .ican-dev-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      background: var(--ican-accent-dim);
+      color: var(--ican-accent-text);
+      border-radius: var(--ican-radius-xs);
+      border: 1px solid rgba(124, 106, 255, 0.20);
+      font-size: 10px;
+      font-weight: 700;
+      font-family: var(--ican-font-mono);
+      letter-spacing: 0.8px;
+      text-transform: uppercase;
+    }
+    .ican-spacer { flex: 1; }
+    /* ─── Icon Button ─── */
+    .ican-icon-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 34px;
+      border: 1px solid var(--ican-border);
+      border-radius: var(--ican-radius-sm);
+      background: transparent;
+      color: var(--ican-secondary-text);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .ican-icon-btn:hover {
+      background: var(--ican-hover);
+      color: var(--ican-primary-text);
+      border-color: var(--ican-border-bright);
+    }
+    /* ─── Avatar ─── */
+    .ican-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: var(--ican-radius-sm);
+      background: linear-gradient(135deg, var(--ican-accent), #e879f9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 700;
+      font-family: var(--ican-font-brand);
+      flex-shrink: 0;
+    }
+    /* ─── Theme Switcher ─── */
+    .ican-theme-switcher { position: relative; flex-shrink: 0; }
+    .ican-theme-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0 10px;
+      height: 34px;
+      border: 1px solid var(--ican-border);
+      border-radius: var(--ican-radius-sm);
+      background: transparent;
+      color: var(--ican-secondary-text);
+      cursor: pointer;
+      font-size: 12px;
+      font-family: var(--ican-font-body);
+      font-weight: 500;
+    }
+    .ican-theme-btn:hover {
+      background: var(--ican-hover);
+      color: var(--ican-primary-text);
+      border-color: var(--ican-border-bright);
+    }
+    .ican-theme-swatch {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .ican-theme-dropdown {
+      position: absolute;
+      top: calc(100% + 6px);
+      right: 0;
+      z-index: 700;
+      min-width: 180px;
+      background: var(--ican-modal-bg);
+      border: 1px solid var(--ican-border-bright);
+      border-radius: var(--ican-radius-md);
+      box-shadow: var(--ican-modal-shadow);
+      padding: 6px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .ican-theme-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 10px;
+      border-radius: var(--ican-radius-sm);
+      border: none;
+      background: transparent;
+      color: var(--ican-primary-text);
+      cursor: pointer;
+      font-size: 13px;
+      font-family: var(--ican-font-body);
+      font-weight: 500;
+      width: 100%;
+      text-align: left;
+    }
+    .ican-theme-option:hover { background: var(--ican-hover); }
+    .ican-theme-option.active { background: var(--ican-accent-dim); color: var(--ican-accent-text); }
+    .ican-theme-option-check { margin-left: auto; color: var(--ican-accent); }
+    /* ─── Primary Button ─── */
+    .ican-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0 14px;
+      height: 34px;
+      border-radius: var(--ican-radius-sm);
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--ican-font-body);
+      cursor: pointer;
+      border: 1px solid transparent;
+    }
+    .ican-btn-primary {
+      background: var(--ican-btn-primary-bg);
+      color: var(--ican-btn-primary-text);
+    }
+    .ican-btn-primary:hover { opacity: 0.88; }
+    .ican-btn-ghost {
+      background: transparent;
+      color: var(--ican-secondary-text);
+      border-color: var(--ican-border);
+    }
+    .ican-btn-ghost:hover {
+      background: var(--ican-hover);
+      color: var(--ican-primary-text);
+      border-color: var(--ican-border-bright);
+    }
+    .ican-btn:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+    /* ═══════════════════════════════════════════════════════
+       Connection Bar
+       ═══════════════════════════════════════════════════════ */
+    .ican-conn-bar {
+      position: fixed;
+      top: 56px;
+      left: 0;
+      right: 0;
+      z-index: 590;
+      background: var(--ican-primary-bg);
+      border-bottom: 1px solid var(--ican-border);
+      padding: 8px 18px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .ican-conn-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
+      color: var(--ican-tertiary-text);
+      font-family: var(--ican-font-mono);
+      flex-shrink: 0;
+    }
+    .ican-conn-input {
+      flex: 1;
+      min-width: 160px;
+      height: 30px;
+      padding: 0 10px;
+      border: 1px solid var(--ican-border-bright);
+      border-radius: var(--ican-radius-sm);
+      background: var(--ican-input-bg);
+      color: var(--ican-primary-text);
+      font-size: 12px;
+      font-family: var(--ican-font-mono);
+    }
+    .ican-conn-input::placeholder { color: var(--ican-tertiary-text); }
+    .ican-conn-input:focus { border-color: var(--ican-border-focus); outline: none; box-shadow: 0 0 0 3px var(--ican-accent-dim); }
+    .ican-conn-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 11px;
+      color: var(--ican-tertiary-text);
+      font-family: var(--ican-font-mono);
+    }
+    .ican-status-dot {
+      width: 7px; height: 7px;
+      border-radius: 50%;
+      background: var(--ican-tertiary-text);
+    }
+    .ican-status-dot.connected { background: var(--ican-success); box-shadow: 0 0 0 3px var(--ican-success-dim); }
+    /* ═══════════════════════════════════════════════════════
+       Main Content Area
+       ═══════════════════════════════════════════════════════ */
+    .ican-main {
+      margin-top: 56px;
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px 20px;
+      background: transparent;
+    }
+    .ican-main--with-conn { margin-top: 104px; } /* 56 header + 48 conn bar */
+    /* ═══════════════════════════════════════════════════════
+       Widget Grid
+       ═══════════════════════════════════════════════════════ */
+    .ican-widget-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
+      gap: 20px;
+    }
+    /* ═══════════════════════════════════════════════════════
+       Empty States
+       ═══════════════════════════════════════════════════════ */
+    /* State A: Waiting for `npm run build` */
+    .ican-waiting {
+      grid-column: 1 / -1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 80px 24px;
+      gap: 20px;
+      text-align: center;
+    }
+    .ican-waiting__icon {
+      width: 72px; height: 72px;
+      border-radius: var(--ican-radius-lg);
+      background: var(--ican-accent-dim);
+      border: 1px solid rgba(124, 106, 255, 0.18);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ican-accent);
+    }
+    .ican-waiting__title {
+      font-family: var(--ican-font-brand);
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--ican-primary-text);
+    }
+    .ican-waiting__sub {
+      font-size: 13px;
+      color: var(--ican-secondary-text);
+      max-width: 340px;
+      line-height: 1.6;
+    }
+    .ican-waiting__cmd {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      background: var(--ican-primary-bg);
+      border: 1px solid var(--ican-border-bright);
+      border-radius: var(--ican-radius-md);
+      font-family: var(--ican-font-mono);
+      font-size: 14px;
+      color: var(--ican-accent-text);
+    }
+    .ican-waiting__hint {
+      font-size: 12px;
+      color: var(--ican-tertiary-text);
+    }
+    /* State B: Widgets available — inline cards */
+    .ican-available {
+      grid-column: 1 / -1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      padding: 40px 0;
+      text-align: center;
+    }
+    .ican-available__heading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+    .ican-available__title {
+      font-family: var(--ican-font-brand);
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--ican-primary-text);
+    }
+    .ican-available__sub {
+      font-size: 13px;
+      color: var(--ican-secondary-text);
+    }
+    .ican-available__grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      justify-content: center;
+      max-width: 680px;
+    }
+    .ican-available__card {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 18px;
+      background: var(--ican-card-bg);
+      border: 1px solid var(--ican-border-bright);
+      border-radius: var(--ican-radius-md);
+      box-shadow: var(--ican-card-shadow);
+      min-width: 240px;
+      text-align: left;
+    }
+    .ican-available__card-icon {
+      width: 40px; height: 40px;
+      border-radius: var(--ican-radius-sm);
+      background: var(--ican-accent-dim);
+      border: 1px solid rgba(124, 106, 255, 0.15);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ican-accent);
+      flex-shrink: 0;
+    }
+    .ican-available__card-info { flex: 1; overflow: hidden; }
+    .ican-available__card-name {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--ican-primary-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ican-available__card-id {
+      font-size: 10px;
+      font-family: var(--ican-font-mono);
+      color: var(--ican-tertiary-text);
+      margin-top: 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    /* ═══════════════════════════════════════════════════════
+       Widget Card
+       ═══════════════════════════════════════════════════════ */
+    .ican-widget-card {
+      background: var(--ican-card-bg);
+      border: 1px solid var(--ican-border);
+      border-radius: var(--ican-radius-lg);
+      box-shadow: var(--ican-card-shadow);
+      display: flex;
+      flex-direction: column;
+      min-height: 340px;
+      overflow: hidden;
+    }
+    .ican-widget-card-header {
+      display: flex;
+      align-items: center;
+      padding: 0 14px;
+      height: 46px;
+      border-bottom: 1px solid var(--ican-border);
+      gap: 8px;
+      flex-shrink: 0;
+    }
+    .ican-drag-handle {
+      color: var(--ican-tertiary-text);
+      cursor: grab;
+      display: flex;
+      align-items: center;
+    }
+    .ican-drag-handle:active { cursor: grabbing; }
+    .ican-widget-card-name {
+      font-family: var(--ican-font-brand);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.6px;
+      text-transform: uppercase;
+      color: var(--ican-primary-text);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ican-widget-card-close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px; height: 26px;
+      border: none;
+      border-radius: var(--ican-radius-xs);
+      background: transparent;
+      color: var(--ican-tertiary-text);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .ican-widget-card-close:hover { background: var(--ican-error-dim); color: var(--ican-error); }
+    .ican-widget-card-body { flex: 1; overflow: auto; position: relative; }
+    /* ─── Widget Error ─── */
+    .ican-widget-error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      min-height: 200px;
+      padding: 24px;
+      gap: 8px;
+      color: var(--ican-error);
+      text-align: center;
+    }
+    .ican-widget-error-icon { color: var(--ican-error); }
+    .ican-widget-error-title { font-size: 13px; font-weight: 600; }
+    .ican-widget-error-msg {
+      font-size: 11px;
+      color: var(--ican-tertiary-text);
+      font-family: var(--ican-font-mono);
+      max-width: 100%;
+      overflow-wrap: break-word;
+    }
+    /* ═══════════════════════════════════════════════════════
+       Add Widget Panel (slide-in from right)
+       ═══════════════════════════════════════════════════════ */
+    .ican-panel-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 800;
+      background: rgba(0, 0, 0, 0.4);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 200ms ease;
+    }
+    .ican-panel-overlay.open { opacity: 1; pointer-events: all; }
+    .ican-panel {
+      position: fixed;
+      top: 0; right: 0; bottom: 0;
+      z-index: 801;
+      width: 340px;
+      max-width: 100vw;
+      background: var(--ican-modal-bg);
+      border-left: 1px solid var(--ican-border-bright);
+      box-shadow: -4px 0 32px rgba(0,0,0,0.25);
+      display: flex;
+      flex-direction: column;
+      transform: translateX(100%);
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .ican-panel.open { transform: translateX(0); }
+    .ican-panel-header {
+      display: flex;
+      align-items: center;
+      padding: 0 18px;
+      height: 56px;
+      border-bottom: 1px solid var(--ican-border);
+      gap: 12px;
+      flex-shrink: 0;
+    }
+    .ican-panel-title {
+      font-family: var(--ican-font-brand);
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--ican-primary-text);
+      flex: 1;
+    }
+    .ican-panel-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .ican-panel-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 16px;
+      gap: 12px;
+      color: var(--ican-tertiary-text);
+      text-align: center;
+    }
+    .ican-registry-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 14px;
+      border: 1px solid var(--ican-border);
+      border-radius: var(--ican-radius-md);
+      background: var(--ican-primary-bg);
+    }
+    .ican-registry-item-icon {
+      width: 38px; height: 38px;
+      border-radius: var(--ican-radius-sm);
+      background: var(--ican-accent-dim);
+      border: 1px solid rgba(124, 106, 255, 0.15);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ican-accent);
+      flex-shrink: 0;
+    }
+    .ican-registry-item-info { flex: 1; overflow: hidden; }
+    .ican-registry-item-name {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--ican-primary-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ican-registry-item-id {
+      font-size: 10px;
+      color: var(--ican-tertiary-text);
+      font-family: var(--ican-font-mono);
+      margin-top: 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    /* ═══════════════════════════════════════════════════════
+       Toast Notifications
+       ═══════════════════════════════════════════════════════ */
+    .ican-toast-container {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      pointer-events: none;
+    }
+    .ican-toast {
+      padding: 10px 16px;
+      border-radius: var(--ican-radius-sm);
+      background: var(--ican-card-bg);
+      border: 1px solid var(--ican-border-bright);
+      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+      font-size: 13px;
+      color: var(--ican-primary-text);
+      max-width: 320px;
+      pointer-events: all;
+      animation: toastIn 200ms ease forwards;
+    }
+    .ican-toast.success { border-left: 3px solid var(--ican-success); }
+    .ican-toast.error   { border-left: 3px solid var(--ican-error); }
+    .ican-toast.info    { border-left: 3px solid var(--ican-accent); }
+    @keyframes toastIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* ═══════════════════════════════════════════════════════
+       ICan Component CSS (used by ican-components.js)
+       ═══════════════════════════════════════════════════════ */
+    .ican-widget-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; }
+    .ican-card {
+      background: var(--ican-card-bg);
+      border: 1px solid var(--ican-border);
+      border-radius: var(--ican-radius-md);
+      padding: 14px;
+    }
+    .ican-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 24px;
+      color: var(--ican-secondary-text);
+      font-size: 13px;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .ican-spinner {
+      width: 28px; height: 28px;
+      border: 2.5px solid var(--ican-border);
+      border-top-color: var(--ican-accent);
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      flex-shrink: 0;
+    }
+    .ican-error-display {
+      display: flex;
+      gap: 8px;
+      padding: 12px 16px;
+      background: var(--ican-error-dim);
+      border-radius: var(--ican-radius-sm);
+      color: var(--ican-error);
+      font-size: 13px;
+    }
+    .ican-badge {
+      display: inline-flex;
+      align-items: center;
+      font-size: 10px;
+      padding: 2px 7px;
+      border-radius: 99px;
+      font-weight: 600;
+    }
+    .ican-badge--default  { background: var(--ican-accent-dim);   color: var(--ican-accent-text); }
+    .ican-badge--success  { background: var(--ican-success-dim);  color: var(--ican-success); }
+    .ican-badge--error    { background: var(--ican-error-dim);    color: var(--ican-error); }
+  </style>
+</head>
+<body>
+<div id="app"></div>
+<div id="toast-root" class="ican-toast-container"></div>
+<script>
+(function () {
+  'use strict';
+  /* ─── SVG Icon helpers (Heroicons outline 20px) ─────────── */
+  var SVG = {
+    /* cube / widget */
+    cube: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg>',
+    /* squares / grid */
+    squares: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zm0 9.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zm9.75-9.75A2.25 2.25 0 0115.75 3.75H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zm0 9.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>',
+    /* plus */
+    plus: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>',
+    /* x-mark / close */
+    xmark: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>',
+    /* cog */
+    cog: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>',
+    /* swatch / theme */
+    swatch: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z"/></svg>',
+    /* chevron-down */
+    chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>',
+    /* check */
+    check: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>',
+    /* command-line / terminal */
+    terminal: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>',
+    /* signal / connection */
+    signal: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.008H12V12z"/></svg>',
+    /* drag dots */
+    drag: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-7 7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-7 7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></svg>',
+    /* warning */
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>',
+  };
+  function icon(svgStr, style) {
+    var wrapper = document.createElement('span');
+    wrapper.innerHTML = svgStr;
+    var el = wrapper.firstChild;
+    if (style) { Object.assign(el.style, style); }
+    return el;
+  }
+  /* helper to render an SVG as a React element */
+  var h = React.createElement;
+  function SvgIcon(props) {
+    return h('span', {
+      dangerouslySetInnerHTML: { __html: props.svg },
+      style: Object.assign({ display: 'inline-flex', alignItems: 'center' }, props.style || {}),
+      'aria-hidden': 'true'
+    });
+  }
+  /* ─── Constants ─────────────────────────────────────────── */
+  var LS_THEME    = 'ican_theme';
+  var LS_ADDED    = 'ican_added_widgets';
+  var LS_ORCH_URL = 'ican_orchUrl';
+  var LS_API_KEY  = 'ican_apiKey';
+  /* ─── Themes ─────────────────────────────────────────────── */
+  var THEMES = [
+    { key: 'dark',        label: 'Dark',        type: 'Dark',        bg: '#09090b', mid: '#141417', accent: '#7c6aff', glass: false },
+    { key: 'light',       label: 'Light',       type: 'Light',       bg: '#f5f5f7', mid: '#ffffff', accent: '#5b4cd9', glass: false },
+    { key: 'glass-dark',  label: 'Glass Dark',  type: 'Glass-Dark',  bg: '#08061a', mid: 'rgba(80,50,180,0.4)', accent: '#b4a8ff', glass: true },
+    { key: 'glass-light', label: 'Glass Light', type: 'Glass-Light', bg: '#d0e4ff', mid: 'rgba(160,130,255,0.5)', accent: '#5b4cd9', glass: true },
+  ];
+  function getThemeMeta(key) {
+    for (var i = 0; i < THEMES.length; i++) {
+      if (THEMES[i].key === key) return THEMES[i];
+    }
+    return THEMES[0];
+  }
+  /* ─── Widget Registry ────────────────────────────────────── */
+  window.__ican_registry = new Map();
+  window.registerWidget = function (config) {
+    if (!config || !config.id) {
+      console.warn('[ICan Dev] registerWidget called without a valid config.id');
+      return;
+    }
+    window.__ican_registry.set(config.id, config);
+    console.log('[ICan Dev] Widget registered:', config.id, config.name || '');
+    window.dispatchEvent(new CustomEvent('ican:registry-updated'));
+  };
+  /* ─── icanContext factory ─────────────────────────────────── */
+  function makeICanContext(themeKey) {
+    var meta = getThemeMeta(themeKey);
+    return {
+      environment:    'dev',
+      userKey:        'dev-user-001',
+      language:       'en',
+      root:           'root',
+      orchUrl:        localStorage.getItem(LS_ORCH_URL) || '',
+      apiKey:         localStorage.getItem(LS_API_KEY)  || '',
+      executeAction:  function (model, action, params) {
+        console.log('[ICan Dev] executeAction:', model, action, params);
+        return Promise.resolve([]);
+      },
+      executeService: function (app, service, params) {
+        console.log('[ICan Dev] executeService:', app, service, params);
+        return Promise.resolve(null);
+      },
+      fireEvent:      function (id) {
+        console.log('[ICan Dev] fireEvent:', id);
+        return Promise.resolve();
+      },
+      hasAppRole:     function () { return true; },
+      $L:             function (code) { return code; },
+      themeName:      meta.label,
+      themeType:      meta.type,
+    };
+  }
+  /* ─── Theme helpers ──────────────────────────────────────── */
+  function getStoredTheme() {
+    return localStorage.getItem(LS_THEME) || 'dark';
+  }
+  function applyTheme(key) {
+    var el = document.documentElement;
+    if (key === 'dark') { el.removeAttribute('data-theme'); }
+    else { el.setAttribute('data-theme', key); }
+    localStorage.setItem(LS_THEME, key);
+  }
+  applyTheme(getStoredTheme());
+  /* ─── Persistence helpers ────────────────────────────────── */
+  function loadAddedWidgets() {
+    try {
+      var raw = localStorage.getItem(LS_ADDED);
+      return raw ? JSON.parse(raw) : [];
+    } catch (_e) { return []; }
+  }
+  function saveAddedWidgets(ids) {
+    localStorage.setItem(LS_ADDED, JSON.stringify(ids));
+  }
+  /* ─── Toast ──────────────────────────────────────────────── */
+  function showToast(msg, type) {
+    var root = document.getElementById('toast-root');
+    if (!root) return;
+    var el = document.createElement('div');
+    el.className = 'ican-toast ' + (type || 'info');
+    el.textContent = msg;
+    root.appendChild(el);
+    setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 3000);
+  }
+  /* ═══════════════════════════════════════════════════════════
+     Sub-components
+     ═══════════════════════════════════════════════════════════ */
+  /* ─── WidgetRenderer ─────────────────────────────────────── */
+  function WidgetRenderer(props) {
+    var cfg = props.config;
+    var ctx = props.icanContext;
+    if (!cfg || !cfg.component) {
+      return h('div', { className: 'ican-widget-error' },
+        h(SvgIcon, { svg: SVG.warning }),
+        h('div', { className: 'ican-widget-error-title' }, 'No component defined'),
+        h('div', { className: 'ican-widget-error-msg' }, cfg ? cfg.id : 'unknown')
+      );
+    }
+    try {
+      return h(cfg.component, Object.assign({}, cfg.defaultProps || {}, { icanContext: ctx }));
+    } catch (err) {
+      return h('div', { className: 'ican-widget-error' },
+        h(SvgIcon, { svg: SVG.warning }),
+        h('div', { className: 'ican-widget-error-title' }, 'Render error'),
+        h('div', { className: 'ican-widget-error-msg' }, String(err && err.message ? err.message : err))
+      );
+    }
+  }
+  /* ─── ErrorBoundary ──────────────────────────────────────── */
+  var ErrorBoundary = (function () {
+    function ErrorBoundary(props) {
+      React.Component.call(this, props);
+      this.state = { hasError: false, error: null };
+    }
+    ErrorBoundary.prototype = Object.create(React.Component.prototype);
+    ErrorBoundary.prototype.constructor = ErrorBoundary;
+    ErrorBoundary.getDerivedStateFromError = function (error) {
+      return { hasError: true, error: error };
+    };
+    ErrorBoundary.prototype.render = function () {
+      if (this.state.hasError) {
+        return h('div', { className: 'ican-widget-error' },
+          h(SvgIcon, { svg: SVG.warning }),
+          h('div', { className: 'ican-widget-error-title' }, 'Widget crashed'),
+          h('div', { className: 'ican-widget-error-msg' },
+            this.state.error ? String(this.state.error.message || this.state.error) : 'Unknown error'
+          )
+        );
+      }
+      return this.props.children;
+    };
+    return ErrorBoundary;
+  }());
+  /* ─── WidgetCard ─────────────────────────────────────────── */
+  function WidgetCard(props) {
+    var cfg = props.config;
+    var ctx = props.icanContext;
+    var onRemove = props.onRemove;
+    return h('div', { className: 'ican-widget-card' },
+      h('div', { className: 'ican-widget-card-header' },
+        h('span', { className: 'ican-drag-handle', title: 'Drag to reorder', 'aria-hidden': 'true' },
+          h(SvgIcon, { svg: SVG.drag })
+        ),
+        h('span', { className: 'ican-widget-card-name' }, cfg.name || cfg.id),
+        h('button', {
+          className: 'ican-widget-card-close',
+          type: 'button',
+          title: 'Remove widget',
+          'aria-label': 'Remove ' + (cfg.name || cfg.id),
+          onClick: function () { onRemove(cfg.id); }
+        }, h(SvgIcon, { svg: SVG.xmark }))
+      ),
+      h('div', { className: 'ican-widget-card-body' },
+        h(ErrorBoundary, null,
+          h(WidgetRenderer, { config: cfg, icanContext: ctx })
+        )
+      )
+    );
+  }
+  /* ─── AddWidgetPanel ─────────────────────────────────────── */
+  function AddWidgetPanel(props) {
+    var open     = props.open;
+    var onClose  = props.onClose;
+    var registry = props.registry;
+    var addedIds = props.addedIds;
+    var onAdd    = props.onAdd;
+    var entries = [];
+    registry.forEach(function (cfg, id) { entries.push({ id: id, config: cfg }); });
+    return h(React.Fragment, null,
+      h('div', { className: 'ican-panel-overlay' + (open ? ' open' : ''), onClick: onClose, 'aria-hidden': 'true' }),
+      h('aside', { className: 'ican-panel' + (open ? ' open' : ''), role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Add Widget' },
+        h('div', { className: 'ican-panel-header' },
+          h(SvgIcon, { svg: SVG.cube, style: { color: 'var(--ican-accent)' } }),
+          h('span', { className: 'ican-panel-title' }, 'Add Widget'),
+          h('button', { className: 'ican-icon-btn', type: 'button', onClick: onClose, 'aria-label': 'Close panel', title: 'Close' },
+            h(SvgIcon, { svg: SVG.xmark })
+          )
+        ),
+        h('div', { className: 'ican-panel-body' },
+          entries.length === 0
+            ? h('div', { className: 'ican-panel-empty' },
+                h(SvgIcon, { svg: SVG.terminal, style: { color: 'var(--ican-accent)', marginBottom: 8 } }),
+                h('div', { style: { fontSize: 13, lineHeight: 1.6 } },
+                  'No widgets registered yet. Build your widget and run ',
+                  h('code', { style: { fontFamily: 'var(--ican-font-mono)', fontSize: 11, background: 'var(--ican-primary-bg)', padding: '1px 5px', borderRadius: 3 } }, 'npm run build'),
+                  ' to register it.'
+                )
+              )
+            : entries.map(function (entry) {
+                var alreadyAdded = addedIds.indexOf(entry.id) !== -1;
+                return h('div', { className: 'ican-registry-item', key: entry.id },
+                  h('div', { className: 'ican-registry-item-icon' }, h(SvgIcon, { svg: SVG.squares })),
+                  h('div', { className: 'ican-registry-item-info' },
+                    h('div', { className: 'ican-registry-item-name' }, entry.config.name || entry.id),
+                    h('div', { className: 'ican-registry-item-id' }, entry.id)
+                  ),
+                  h('button', {
+                    className: 'ican-btn ' + (alreadyAdded ? 'ican-btn-ghost' : 'ican-btn-primary'),
+                    type: 'button',
+                    disabled: alreadyAdded,
+                    onClick: function () { onAdd(entry.id); },
+                    'aria-label': (alreadyAdded ? 'Already added: ' : 'Add ') + (entry.config.name || entry.id),
+                    style: { padding: '0 10px', height: 30, fontSize: 12 }
+                  }, alreadyAdded
+                    ? h(React.Fragment, null, h(SvgIcon, { svg: SVG.check }), ' Added')
+                    : h(React.Fragment, null, h(SvgIcon, { svg: SVG.plus }), ' Add')
+                  )
+                );
+              })
+        )
+      )
+    );
+  }
+  /* ─── ConnectionBar ──────────────────────────────────────── */
+  function ConnectionBar(props) {
+    var orchUrl   = props.orchUrl;
+    var apiKey    = props.apiKey;
+    var onSave    = props.onSave;
+    var stateRef  = { orchUrl: orchUrl, apiKey: apiKey };
+    return h('div', { className: 'ican-conn-bar' },
+      h('span', { className: 'ican-conn-label' }, 'Orch URL'),
+      h('input', {
+        className: 'ican-conn-input',
+        type: 'text',
+        defaultValue: orchUrl,
+        placeholder: 'https://your-orch-instance.example.com',
+        'aria-label': 'Orchestration URL',
+        onChange: function (e) { stateRef.orchUrl = e.target.value; }
+      }),
+      h('span', { className: 'ican-conn-label' }, 'API Key'),
+      h('input', {
+        className: 'ican-conn-input',
+        type: 'password',
+        defaultValue: apiKey,
+        placeholder: 'your-api-key',
+        'aria-label': 'API Key',
+        onChange: function (e) { stateRef.apiKey = e.target.value; }
+      }),
+      h('button', {
+        className: 'ican-btn ican-btn-primary',
+        type: 'button',
+        style: { padding: '0 12px', height: 30, fontSize: 12 },
+        onClick: function () { onSave(stateRef.orchUrl, stateRef.apiKey); }
+      }, 'Save'),
+      h('div', { className: 'ican-conn-status' },
+        h('div', { className: 'ican-status-dot' + (orchUrl ? ' connected' : '') }),
+        orchUrl ? 'Connected' : 'Not configured'
+      )
+    );
+  }
+  /* ═══════════════════════════════════════════════════════════
+     Main App
+     ═══════════════════════════════════════════════════════════ */
+  var App = (function () {
+    function App(props) {
+      React.Component.call(this, props);
+      var storedTheme = getStoredTheme();
+      this.state = {
+        theme:       storedTheme,
+        themeDdOpen: false,
+        panelOpen:   false,
+        registry:    new Map(window.__ican_registry),
+        addedIds:    loadAddedWidgets(),
+        orchUrl:     localStorage.getItem(LS_ORCH_URL) || '',
+        apiKey:      localStorage.getItem(LS_API_KEY)  || '',
+        showConn:    false,
+      };
+      this._onRegistryUpdate = this._onRegistryUpdate.bind(this);
+      this._setTheme         = this._setTheme.bind(this);
+      this._openPanel        = this._openPanel.bind(this);
+      this._closePanel       = this._closePanel.bind(this);
+      this._addWidget        = this._addWidget.bind(this);
+      this._removeWidget     = this._removeWidget.bind(this);
+      this._saveConnection   = this._saveConnection.bind(this);
+    }
+    App.prototype = Object.create(React.Component.prototype);
+    App.prototype.constructor = App;
+    App.prototype.componentDidMount = function () {
+      window.addEventListener('ican:registry-updated', this._onRegistryUpdate);
+    };
+    App.prototype.componentWillUnmount = function () {
+      window.removeEventListener('ican:registry-updated', this._onRegistryUpdate);
+    };
+    App.prototype._onRegistryUpdate = function () {
+      this.setState({ registry: new Map(window.__ican_registry) });
+    };
+    App.prototype._setTheme = function (key) {
+      applyTheme(key);
+      this.setState({ theme: key, themeDdOpen: false });
+    };
+    App.prototype._openPanel = function () {
+      this.setState({ panelOpen: true });
+    };
+    App.prototype._closePanel = function () {
+      this.setState({ panelOpen: false });
+    };
+    App.prototype._addWidget = function (id) {
+      var addedIds = this.state.addedIds.slice();
+      if (addedIds.indexOf(id) === -1) {
+        addedIds.push(id);
+        saveAddedWidgets(addedIds);
+        this.setState({ addedIds: addedIds, panelOpen: false });
+        showToast('Widget added to dashboard', 'success');
+      }
+    };
+    App.prototype._removeWidget = function (id) {
+      var addedIds = this.state.addedIds.filter(function (x) { return x !== id; });
+      saveAddedWidgets(addedIds);
+      this.setState({ addedIds: addedIds });
+      showToast('Widget removed', 'info');
+    };
+    App.prototype._saveConnection = function (orchUrl, apiKey) {
+      localStorage.setItem(LS_ORCH_URL, orchUrl);
+      localStorage.setItem(LS_API_KEY, apiKey);
+      this.setState({ orchUrl: orchUrl, apiKey: apiKey });
+      showToast('Connection settings saved', 'success');
+    };
+    App.prototype.render = function () {
+      var self  = this;
+      var s     = this.state;
+      var icanContext = makeICanContext(s.theme);
+      var themeMeta  = getThemeMeta(s.theme);
+      /* collect added widget configs */
+      var addedConfigs = s.addedIds
+        .map(function (id) { return s.registry.get(id); })
+        .filter(Boolean);
+      /* unadded widgets (for the inline available state) */
+      var unadded = [];
+      s.registry.forEach(function (cfg, id) {
+        if (s.addedIds.indexOf(id) === -1) unadded.push({ id: id, config: cfg });
+      });
+      /* is canvas completely empty? */
+      var isEmpty = addedConfigs.length === 0;
+      return h(React.Fragment, null,
+        /* ── Header ── */
+        h('header', { className: 'ican-header' },
+          /* Brand */
+          h('a', { className: 'ican-logo', href: '#', 'aria-label': 'InfAIra ICan home' },
+            h('img', { src: './resources/infaira-icon.png', alt: 'InfAIra icon' }),
+            h('span', { className: 'ican-logo-name' },
+              'Inf', h('em', null, 'AI'), 'ra'
+            )
+          ),
+          h('div', { className: 'ican-sep' }),
+          h('span', { className: 'ican-dev-badge' }, 'DEV'),
+          h('div', { className: 'ican-spacer' }),
+          /* Connection toggle */
+          h('button', {
+            className: 'ican-icon-btn',
+            type: 'button',
+            title: 'Connection settings',
+            'aria-label': 'Connection settings',
+            onClick: function () { self.setState({ showConn: !s.showConn }); }
+          }, h(SvgIcon, { svg: SVG.signal })),
+          /* Add Widget button (shown when there are both added + unadded) */
+          addedConfigs.length > 0 && unadded.length > 0
+            ? h('button', {
+                className: 'ican-btn ican-btn-primary',
+                type: 'button',
+                'aria-label': 'Add widget',
+                onClick: self._openPanel
+              },
+              h(SvgIcon, { svg: SVG.plus }),
+              'Add Widget'
+            )
+            : null,
+          /* Theme switcher */
+          h('div', { className: 'ican-theme-switcher' },
+            /* transparent backdrop — closes dropdown without React stopPropagation issues */
+            s.themeDdOpen
+              ? h('div', {
+                  style: { position: 'fixed', inset: 0, zIndex: 499 },
+                  onClick: function () { self.setState({ themeDdOpen: false }); }
+                })
+              : null,
+            h('button', {
+              className: 'ican-theme-btn',
+              type: 'button',
+              'aria-label': 'Switch theme',
+              'aria-expanded': s.themeDdOpen,
+              onClick: function () { self.setState({ themeDdOpen: !s.themeDdOpen }); }
+            },
+              h(SvgIcon, { svg: SVG.swatch }),
+              themeMeta.label,
+              h(SvgIcon, { svg: SVG.chevronDown, style: { opacity: 0.6 } })
+            ),
+            s.themeDdOpen
+              ? h('div', { className: 'ican-theme-dropdown', role: 'listbox', 'aria-label': 'Theme options' },
+                  THEMES.map(function (t) {
+                    var isActive = s.theme === t.key;
+                    return h('button', {
+                      key: t.key,
+                      className: 'ican-theme-option' + (isActive ? ' active' : ''),
+                      type: 'button',
+                      role: 'option',
+                      'aria-selected': isActive,
+                      onClick: function () { self._setTheme(t.key); }
+                    },
+                      h('span', {
+                        className: 'ican-theme-swatch',
+                        style: {
+                          background: t.glass
+                            ? 'linear-gradient(135deg, ' + t.bg + ', ' + t.accent + ')'
+                            : 'linear-gradient(135deg, ' + t.mid + ', ' + t.accent + ')',
+                          border: '1px solid rgba(255,255,255,0.15)'
+                        }
+                      }),
+                      t.label,
+                      isActive
+                        ? h('span', { className: 'ican-theme-option-check' }, h(SvgIcon, { svg: SVG.check }))
+                        : null
+                    );
+                  })
+                )
+              : null
+          ),
+          /* Settings */
+          h('button', {
+            className: 'ican-icon-btn',
+            type: 'button',
+            title: 'Settings',
+            'aria-label': 'Settings'
+          }, h(SvgIcon, { svg: SVG.cog })),
+          /* Avatar */
+          h('div', { className: 'ican-avatar', title: 'Dev User', 'aria-label': 'Dev user avatar' }, 'D')
+        ),
+        /* ── Connection Bar (collapsible) ── */
+        s.showConn
+          ? h(ConnectionBar, {
+              orchUrl: s.orchUrl,
+              apiKey:  s.apiKey,
+              onSave:  self._saveConnection
+            })
+          : null,
+        /* ── Main Content ── */
+        h('main', {
+          className: 'ican-main' + (s.showConn ? ' ican-main--with-conn' : '')
+        },
+          h('div', { className: 'ican-widget-grid' },
+            /* ─ State A: Nothing registered — waiting for npm run build ─ */
+            isEmpty && s.registry.size === 0
+              ? h('div', { className: 'ican-waiting' },
+                  h('div', { className: 'ican-waiting__icon' }, h(SvgIcon, { svg: SVG.terminal })),
+                  h('div', { className: 'ican-waiting__title' }, 'Waiting for your widget…'),
+                  h('div', { className: 'ican-waiting__sub' },
+                    'Build your widget bundle to register it here. This page auto-refreshes when ',
+                    h('code', { style: { fontFamily: 'var(--ican-font-mono)', fontSize: 12 } }, 'dist/main.js'),
+                    ' is ready.'
+                  ),
+                  h('div', { className: 'ican-waiting__cmd' },
+                    h(SvgIcon, { svg: SVG.terminal, style: { opacity: 0.7 } }),
+                    h('span', null, 'npm run build')
+                  ),
+                  h('div', { className: 'ican-waiting__hint' }, 'Keep this tab open — widgets register automatically on load.')
+                )
+              /* ─ State B: Widgets registered, none added yet ─ */
+              : isEmpty && s.registry.size > 0
+                ? h('div', { className: 'ican-available' },
+                    h('div', { className: 'ican-available__heading' },
+                      h('div', { className: 'ican-available__title' }, 'Widgets ready to add'),
+                      h('div', { className: 'ican-available__sub' }, 'Click a widget below to add it to your dashboard.')
+                    ),
+                    h('div', { className: 'ican-available__grid' },
+                      unadded.map(function (entry) {
+                        return h('div', { className: 'ican-available__card', key: entry.id },
+                          h('div', { className: 'ican-available__card-icon' }, h(SvgIcon, { svg: SVG.squares })),
+                          h('div', { className: 'ican-available__card-info' },
+                            h('div', { className: 'ican-available__card-name' }, entry.config.name || entry.id),
+                            h('div', { className: 'ican-available__card-id' }, entry.id)
+                          ),
+                          h('button', {
+                            className: 'ican-btn ican-btn-primary',
+                            type: 'button',
+                            onClick: function () { self._addWidget(entry.id); },
+                            'aria-label': 'Add ' + (entry.config.name || entry.id),
+                            style: { padding: '0 12px', height: 32, fontSize: 12 }
+                          }, h(SvgIcon, { svg: SVG.plus }), ' Add')
+                        );
+                      })
+                    )
+                  )
+              /* ─ State C: Widgets on canvas ─ */
+              : addedConfigs.map(function (cfg) {
+                  return h(WidgetCard, {
+                    key:        cfg.id,
+                    config:     cfg,
+                    icanContext: icanContext,
+                    onRemove:   self._removeWidget
+                  });
+                })
+          )
+        ),
+        /* ── Add Widget Panel ── */
+        h(AddWidgetPanel, {
+          open:     s.panelOpen,
+          onClose:  self._closePanel,
+          registry: s.registry,
+          addedIds: s.addedIds,
+          onAdd:    self._addWidget
+        })
+      );
+    };
+    return App;
+  }());
+  /* ─── Load widget bundle then mount ─────────────────────── */
+  function mountApp() {
+    ReactDOM.render(h(App, null), document.getElementById('app'));
+  }
+  function loadWidgetScript(callback) {
+    var script = document.createElement('script');
+    script.src = './dist/main.js?t=' + Date.now();
+    script.onload = function () {
+      console.log('[ICan Dev] dist/main.js loaded successfully');
+      callback();
+    };
+    script.onerror = function () {
+      console.warn('[ICan Dev] dist/main.js not found. Run `npm run build` in your widget folder.');
+      callback();
+    };
+    document.head.appendChild(script);
+  }
+  loadWidgetScript(mountApp);
+}());
+</script>
+</body>
+</html>