@menukfernandoo/canvas-flow 0.1.0 → 0.2.0

package/dist/chrome.css

@@ -1,46 +1,28 @@
 :root {
-  --ink-900: #0f1115;
-  --ink-800: #11141a;
-  --ink-700: #171a21;
-  --ink-600: #1c212b;
-  --steel-700: #2a2f3a;
-  --steel-600: #303745;
-  --steel-500: #3c4557;
-  --steel-400: #8c96aa;
-  --steel-300: #aeb6c6;
-  --steel-200: #b9c0cf;
-  --steel-100: #d8deea;
-  --cream-50: #fffbf3;
-  --cream-100: #f7f3ea;
-  --cream-200: #e8e1cf;
-  --brass-500: #f4c95d;
-  --brass-400: #ffd877;
-  --brass-ink: #17130a;
-  --sage-900: #172419;
-  --sage-700: #315f3a;
-  --sage-300: #8fe39e;
-  --amber-900: #25230f;
-  --amber-700: #5d4d1b;
-  --rust-500: #f06464;
-  --bg: var(--ink-900);
-  --bg-panel: var(--ink-800);
-  --bg-bar: var(--ink-700);
-  --bg-elevated: var(--ink-600);
-  --fg: var(--cream-100);
-  --fg-muted: var(--steel-100);
-  --fg-dim: var(--steel-200);
-  --fg-faint: var(--steel-300);
-  --fg-label: var(--steel-400);
-  --border: var(--steel-600);
-  --border-subtle: var(--steel-700);
-  --border-strong: var(--steel-500);
-  --accent: var(--brass-500);
-  --accent-hover: var(--brass-400);
-  --accent-ink: var(--brass-ink);
-  --danger: var(--rust-500);
-  --font-serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
-  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  /* Canvas Flow — cool blue-graphite instrument surface with an electric
+     indigo -> cyan "flow" accent. Deliberately not a warm charcoal/brass theme. */
+  --bg: #0b0e14;
+  --bg-bar: #0e121b;
+  --bg-panel: #0f1420;
+  --bg-elevated: #161d2c;
+  --surface-hover: #1b2334;
+  --border: #232c40;
+  --border-subtle: #1a2231;
+  --border-strong: #35425f;
+  --fg: #e9edf7;
+  --fg-muted: #c3ccdd;
+  --fg-dim: #9aa4bd;
+  --fg-faint: #6d7791;
+  --fg-label: #57617a;
+  --accent: #6d5cff;
+  --accent-hover: #8676ff;
+  --accent-2: #34e0cf;
+  --accent-ink: #f3f5ff;
+  --flow: linear-gradient(90deg, var(--accent), var(--accent-2));
+  --danger: #ff6b74;
+  --warn: #f0b45a;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
   --text-xs: 12px;
   --lh-xs: 1.35;
   --text-sm: 13px;
@@ -86,15 +68,15 @@
   --space-20: 40px;
   --space-24: 48px;
   --space-32: 64px;
-  --radius-sm: 8px;
-  --radius-md: 10px;
-  --radius-lg: 12px;
-  --radius-xl: 14px;
+  --radius-sm: 5px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
   --radius-pill: 999px;
   --hairline: 1px solid var(--border);
   --hairline-subtle: 1px solid var(--border-subtle);
-  --shadow-tooltip: 0 16px 44px rgba(0, 0, 0, 0.35);
-  --shadow-floating: 0 20px 70px rgba(0, 0, 0, 0.35);
+  --shadow-tooltip: 0 10px 30px rgba(2, 5, 12, 0.55);
+  --shadow-floating: 0 18px 54px rgba(2, 5, 12, 0.6);
   --bar-h: 56px;
   --panel-w: 360px;
   --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
@@ -144,26 +126,34 @@ body.canvasflow {
   display: flex;
   align-items: flex-end;
   height: 22px;
-  gap: 8px;
+  gap: 9px;
   white-space: nowrap;
   flex-shrink: 0;
 }
 .brand-mark {
-  font-family: var(--font-serif);
-  font-style: italic;
-  font-size: 22px;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: var(--w-semi);
+  letter-spacing: var(--track-tight);
   line-height: 1;
   color: var(--fg);
 }
+.brand-flow {
+  background: var(--flow);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
 .brand-support {
-  font-family: var(--font-sans);
+  font-family: var(--font-mono);
   font-size: 10px;
-  font-weight: 600;
+  font-weight: var(--w-medium);
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--fg-muted);
+  color: var(--fg-faint);
   position: relative;
-  top: 1px;
+  top: -1px;
 }
 .spacer {
   flex: 1;
@@ -173,8 +163,10 @@ body.canvasflow {
   align-items: center;
   gap: 8px;
   color: var(--fg-muted);
-  font-family: inherit;
-  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--w-medium);
+  letter-spacing: 0.04em;
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -208,6 +200,9 @@ body.canvasflow {
     left 150ms var(--ease),
     background 150ms var(--ease);
 }
+.annotate-switch[aria-pressed="true"] {
+  color: var(--fg);
+}
 .annotate-switch[aria-pressed="true"] .switch-track {
   background: var(--accent);
 }
@@ -227,14 +222,14 @@ body.canvasflow {
   border: 1px solid var(--border-subtle);
   background: transparent;
   color: var(--fg-dim);
-  border-radius: 9px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   padding: 0;
 }
 .more-button:hover:not(:disabled),
 .more-button[aria-expanded="true"] {
   border-color: var(--border-strong);
-  background: var(--steel-700);
+  background: var(--surface-hover);
   color: var(--fg);
 }
 .more-button:disabled {
@@ -262,8 +257,9 @@ body.canvasflow {
   padding: 7px 10px 9px;
 }
 .menu-label {
+  font-family: var(--font-mono);
   font-size: 9px;
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   letter-spacing: var(--track-label);
   text-transform: uppercase;
   color: var(--fg-faint);
@@ -279,14 +275,14 @@ body.canvasflow {
   background: transparent;
   padding: 3px 4px;
   margin: 0 -4px;
-  border-radius: 7px;
+  border-radius: 5px;
   cursor: pointer;
   font-family: var(--font-mono);
   font-size: 12px;
   color: var(--fg-muted);
 }
 .menu-file:hover {
-  background: var(--steel-700);
+  background: var(--surface-hover);
 }
 .menu-file > svg {
   opacity: 0.7;
@@ -312,7 +308,7 @@ body.canvasflow {
   white-space: nowrap;
 }
 .copy-hint {
-  font-family: var(--font-sans);
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: var(--w-semi);
   color: var(--fg-faint);
@@ -358,7 +354,7 @@ body.canvasflow {
   color: var(--fg);
 }
 .menu-item:hover:not(:disabled) {
-  background: var(--steel-700);
+  background: var(--surface-hover);
 }
 .menu-item:disabled {
   cursor: not-allowed;
@@ -375,7 +371,7 @@ body.canvasflow {
   opacity: 1;
 }
 .menu-item.danger:hover:not(:disabled) {
-  background: rgba(240, 100, 100, 0.1);
+  background: rgba(255, 107, 116, 0.12);
 }
 .button {
   border: 0;
@@ -385,7 +381,7 @@ body.canvasflow {
   color: var(--accent-ink);
   font-family: inherit;
   font-size: var(--text-sm);
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   white-space: nowrap;
   cursor: pointer;
   transition:
@@ -414,7 +410,7 @@ body.canvasflow {
 .send-caret {
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
   padding: 9px;
-  border-left: 1px solid rgba(23, 19, 10, 0.22);
+  border-left: 1px solid rgba(11, 14, 20, 0.28);
   display: grid;
   place-items: center;
 }
@@ -422,7 +418,7 @@ body.canvasflow {
   right: 0;
   bottom: 44px;
   width: 208px;
-  border-radius: 11px;
+  border-radius: var(--radius-lg);
 }
 .share-overlay {
   position: fixed;
@@ -431,7 +427,7 @@ body.canvasflow {
   display: grid;
   place-items: center;
   padding: var(--space-16);
-  background: rgba(15, 17, 21, 0.72);
+  background: rgba(6, 9, 15, 0.74);
 }
 .share-overlay[hidden] {
   display: none;
@@ -455,14 +451,15 @@ body.canvasflow {
   margin-bottom: var(--space-8);
 }
 .share-kicker {
+  font-family: var(--font-mono);
   color: var(--fg-label);
   font-size: var(--text-xs);
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   letter-spacing: var(--track-label);
   text-transform: uppercase;
 }
 .share-link {
-  color: inherit;
+  color: var(--accent-2);
   text-decoration: underline;
   text-decoration-color: var(--border-strong);
   text-underline-offset: 2px;
@@ -473,11 +470,12 @@ body.canvasflow {
 }
 .share-head h2 {
   margin: var(--space-2) 0 0;
-  font-family: var(--font-serif);
-  font-size: var(--text-2xl);
-  font-style: italic;
-  font-weight: var(--w-regular);
-  line-height: var(--lh-2xl);
+  font-family: var(--font-sans);
+  font-size: var(--text-xl);
+  font-style: normal;
+  font-weight: var(--w-semi);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-xl);
 }
 .share-close {
   display: flex;
@@ -519,9 +517,10 @@ body.canvasflow {
   display: grid;
   gap: var(--space-4);
   min-width: 0;
+  font-family: var(--font-mono);
   color: var(--fg-muted);
   font-size: var(--text-xs);
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   letter-spacing: var(--track-label);
   text-transform: uppercase;
 }
@@ -530,16 +529,22 @@ body.canvasflow {
   min-width: 0;
   width: 100%;
   border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   background: var(--bg);
   color: var(--fg);
   font: inherit;
+  font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--w-regular);
   letter-spacing: 0;
   padding: 10px;
   text-transform: none;
 }
+.share-grid input:focus,
+.share-result input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
 .share-grid input::placeholder {
   color: var(--fg-label);
 }
@@ -581,7 +586,7 @@ body.canvasflow {
   color: var(--fg-muted);
   font: inherit;
   font-size: var(--text-xs);
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   padding: 0 10px;
   cursor: pointer;
   white-space: nowrap;
@@ -603,7 +608,7 @@ body.canvasflow {
   color: var(--fg-muted);
   font-family: inherit;
   font-size: var(--text-sm);
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   padding: 9px 14px;
   cursor: pointer;
 }
@@ -627,18 +632,34 @@ body.canvasflow {
 .panel {
   width: var(--panel-w);
   border-left: var(--hairline-subtle);
-  background: var(--bg-panel);
+  background-color: var(--bg-panel);
+  background-image: radial-gradient(circle at 1px 1px, rgba(150, 170, 220, 0.05) 1px, transparent 0);
+  background-size: 18px 18px;
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
 }
 .panel h2 {
-  font-size: 15px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-mono);
+  font-size: 11px;
   line-height: 1.3;
-  margin: 16px 16px 8px;
+  margin: 18px 16px 10px;
   font-weight: var(--w-semi);
-  letter-spacing: 0;
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  color: var(--fg-dim);
+}
+.panel h2::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--flow);
+  flex-shrink: 0;
 }
 .chat {
   flex: 1;
@@ -651,16 +672,18 @@ body.canvasflow {
 }
 .bubble {
   max-width: 85%;
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-lg);
   padding: 10px 12px;
   background: var(--bg-elevated);
   border: var(--hairline);
   color: var(--fg);
+  line-height: var(--lh-sm);
 }
 .bubble.user {
   align-self: flex-end;
   background: var(--bg-elevated);
   border-color: var(--border-strong);
+  border-left: 2px solid var(--accent);
 }
 .bubble.agent {
   align-self: flex-start;
@@ -686,8 +709,9 @@ body.canvasflow {
   display: block;
   color: var(--fg-faint);
   margin-bottom: 4px;
+  font-family: var(--font-mono);
   font-size: 10px;
-  font-weight: var(--w-bold);
+  font-weight: var(--w-semi);
   letter-spacing: var(--track-label);
   text-transform: uppercase;
 }
@@ -704,12 +728,14 @@ body.canvasflow {
   gap: 8px;
   padding: 12px 16px;
   border-top: var(--hairline-subtle);
+  background: var(--bg-panel);
   min-width: 0;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 .presence-banner {
   border: 1px solid var(--border);
+  border-left: 2px solid var(--warn);
   border-radius: var(--radius-sm);
   background: var(--bg-elevated);
   color: var(--fg-muted);
@@ -741,8 +767,9 @@ body.canvasflow {
   background: var(--bg-elevated);
   color: var(--fg-muted);
   padding: 5px 7px 5px 11px;
+  font-family: var(--font-mono);
   font-size: 12px;
-  font-weight: var(--w-bold);
+  font-weight: var(--w-medium);
 }
 .pill-preview {
   display: block;
@@ -764,6 +791,10 @@ body.canvasflow {
   color: var(--fg-muted);
   cursor: pointer;
 }
+.pill-close:hover {
+  background: var(--border-strong);
+  color: var(--fg);
+}
 .pill-close svg {
   display: block;
 }
@@ -784,9 +815,10 @@ body.canvasflow {
   box-shadow: var(--shadow-tooltip);
 }
 .tooltip-label {
+  font-family: var(--font-mono);
   color: var(--fg-label);
   font-size: 10px;
-  font-weight: 900;
+  font-weight: 700;
   letter-spacing: var(--track-label);
   text-transform: uppercase;
   margin: 0 0 4px;
@@ -822,6 +854,11 @@ body.canvasflow {
   font: inherit;
   font-family: var(--font-sans);
   box-sizing: border-box;
+  transition: border-color 120ms var(--ease);
+}
+.composer textarea:focus {
+  border-color: var(--accent);
+  outline: none;
 }
 .composer textarea::placeholder {
   color: var(--fg-label);
@@ -845,7 +882,7 @@ body.canvasflow {
 .ended-overlay {
   position: fixed;
   inset: var(--bar-h) 0 0 0;
-  background: rgba(15, 17, 21, 0.86);
+  background: rgba(6, 9, 15, 0.88);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -857,15 +894,19 @@ body.canvasflow {
 .ended-card {
   width: min(360px, calc(100vw - 48px));
   border: 1px solid var(--border);
+  border-top: 2px solid var(--accent);
   border-radius: var(--radius-xl);
   background: var(--bg-panel);
-  padding: 20px 24px;
+  padding: 22px 24px;
   text-align: center;
+  box-shadow: var(--shadow-floating);
 }
 .ended-title {
-  font-family: var(--font-serif);
-  font-style: italic;
-  font-size: 22px;
+  font-family: var(--font-sans);
+  font-style: normal;
+  font-size: 20px;
+  font-weight: var(--w-semi);
+  letter-spacing: var(--track-tight);
   line-height: 1.3;
   color: var(--fg);
   margin-bottom: 8px;
@@ -887,10 +928,10 @@ body.canvasflow {
   left: var(--space-8);
   right: var(--space-8);
   z-index: 20;
-  border: 1px solid rgba(244, 201, 93, 0.35);
+  border: 1px solid rgba(240, 180, 90, 0.4);
   border-radius: var(--radius-lg);
-  background: rgba(37, 35, 15, 0.92);
-  color: var(--brass-400);
+  background: rgba(28, 22, 10, 0.92);
+  color: var(--warn);
   padding: var(--space-6) var(--space-8);
   font-size: var(--text-sm);
   line-height: var(--lh-sm);
@@ -938,3 +979,10 @@ body.layout-gate-active iframe#artifact {
     flex-direction: column;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

package/dist/cli.mjs

@@ -4630,7 +4630,7 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
   }
   function highlightElement(el) {
     if (!el) return;
-    el.style.outline = "var(--canvasflow-annotate-outline,2px solid #f4c95d)";
+    el.style.outline = "var(--canvasflow-annotate-outline,2px solid #6d5cff)";
     el.style.outlineOffset = "var(--canvasflow-annotate-offset,2px)";
   }
   function clearHighlight(el) {
@@ -4660,7 +4660,7 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     if (annotationMode && !style) {
       style = document.createElement("style");
       style.id = "canvasflow-cursor-style";
-      style.textContent = ":root{--canvasflow-accent:#f4c95d;--canvasflow-annotate-outline:2px solid var(--canvasflow-accent);--canvasflow-annotate-offset:2px}*{cursor:default!important}[data-canvasflow-action],[data-canvasflow-action] *{cursor:pointer!important}input,textarea,[contenteditable]:not([contenteditable='false']){cursor:text!important}button,select,label,option,input[type='button'],input[type='submit'],input[type='reset'],input[type='checkbox'],input[type='radio'],input[type='file'],input[type='color'],input[type='range'],input[type='image']{cursor:pointer!important}";
+      style.textContent = ":root{--canvasflow-accent:#6d5cff;--canvasflow-annotate-outline:2px solid var(--canvasflow-accent);--canvasflow-annotate-offset:2px}*{cursor:default!important}[data-canvasflow-action],[data-canvasflow-action] *{cursor:pointer!important}input,textarea,[contenteditable]:not([contenteditable='false']){cursor:text!important}button,select,label,option,input[type='button'],input[type='submit'],input[type='reset'],input[type='checkbox'],input[type='radio'],input[type='file'],input[type='color'],input[type='range'],input[type='image']{cursor:pointer!important}";
       document.head.appendChild(style);
     }
     if (!annotationMode && style) style.remove();
@@ -5015,7 +5015,7 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     document.documentElement.appendChild(host);
     shadow = host.attachShadow({ mode: "open" });
     const style = document.createElement("style");
-    style.textContent = `:host{all:initial;position:fixed;z-index:2147483647;left:0;top:0;color-scheme:dark;--ink-900:#0f1115;--ink-800:#11141a;--ink-700:#171a21;--ink-600:#1c212b;--steel-700:#2a2f3a;--steel-600:#303745;--steel-500:#3c4557;--steel-400:#8c96aa;--steel-300:#aeb6c6;--steel-200:#b9c0cf;--steel-100:#d8deea;--cream-50:#fffbf3;--cream-100:#f7f3ea;--cream-200:#e8e1cf;--brass-500:#f4c95d;--brass-400:#ffd877;--brass-ink:#17130a;--bg:var(--ink-900);--bg-panel:var(--ink-800);--bg-elevated:var(--ink-600);--fg:var(--cream-100);--fg-faint:var(--steel-300);--border:var(--steel-600);--accent:#f4c95d;--accent-hover:#ffd877;--font-sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--radius-md:10px;--radius-xl:14px;--shadow-floating:0 20px 70px rgba(0,0,0,.35);font-family:var(--font-sans)}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.canvasflow-text-highlight{position:fixed;pointer-events:none;background:rgba(244,201,93,.28);border-radius:2px;box-shadow:0 0 0 1px rgba(244,201,93,.45)}.canvasflow-annotation-card{position:fixed;width:min(320px,calc(100vw - 24px));padding:12px;border-radius:var(--radius-xl);background:var(--bg-panel);color:var(--fg);border:1px solid var(--accent);box-shadow:var(--shadow-floating);font:14px/1.4 var(--font-sans)}.canvasflow-heading{font-weight:700;margin-bottom:6px}.canvasflow-annotation-card textarea{width:100%;min-height:86px;resize:vertical;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:9px;font:inherit;font-family:var(--font-sans)}.canvasflow-annotation-card textarea::placeholder{color:var(--fg-faint)}.canvasflow-annotation-card .canvasflow-hint{margin-top:6px;font-size:11px;color:var(--fg-faint)}.canvasflow-annotation-card .canvasflow-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.canvasflow-annotation-card button{border:0;border-radius:var(--radius-md);padding:8px 10px;font-family:var(--font-sans);font-size:13px;font-weight:700;cursor:pointer}.canvasflow-annotation-card button:active{opacity:.85}.canvasflow-annotation-card .canvasflow-send{background:var(--accent);color:var(--brass-ink)}.canvasflow-annotation-card .canvasflow-send:hover{background:var(--accent-hover)}.canvasflow-annotation-card .canvasflow-cancel{background:var(--steel-700);color:var(--fg)}`;
+    style.textContent = `:host{all:initial;position:fixed;z-index:2147483647;left:0;top:0;color-scheme:dark;--bg:#0b0e14;--bg-panel:#0f1420;--bg-elevated:#161d2c;--fg:#e9edf7;--fg-faint:#6d7791;--border:#2a3550;--accent:#6d5cff;--accent-hover:#8676ff;--accent-2:#34e0cf;--accent-ink:#f3f5ff;--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;--radius-md:6px;--radius-xl:10px;--shadow-floating:0 18px 54px rgba(2,5,12,.6);font-family:var(--font-sans)}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.canvasflow-text-highlight{position:fixed;pointer-events:none;background:rgba(109,92,255,.26);border-radius:2px;box-shadow:0 0 0 1px rgba(109,92,255,.5)}.canvasflow-annotation-card{position:fixed;width:min(320px,calc(100vw - 24px));padding:12px;border-radius:var(--radius-xl);background:var(--bg-panel);color:var(--fg);border:1px solid var(--accent);box-shadow:var(--shadow-floating);font:14px/1.4 var(--font-sans)}.canvasflow-heading{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:8px}.canvasflow-annotation-card textarea{width:100%;min-height:86px;resize:vertical;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:9px;font:inherit;font-family:var(--font-sans)}.canvasflow-annotation-card textarea:focus{outline:none;border-color:var(--accent)}.canvasflow-annotation-card textarea::placeholder{color:var(--fg-faint)}.canvasflow-annotation-card .canvasflow-hint{margin-top:6px;font-size:11px;color:var(--fg-faint)}.canvasflow-annotation-card .canvasflow-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.canvasflow-annotation-card button{border:0;border-radius:var(--radius-md);padding:8px 10px;font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer}.canvasflow-annotation-card button:active{opacity:.85}.canvasflow-annotation-card .canvasflow-send{background:var(--accent);color:var(--accent-ink)}.canvasflow-annotation-card .canvasflow-send:hover{background:var(--accent-hover)}.canvasflow-annotation-card .canvasflow-cancel{background:var(--bg-elevated);color:var(--fg)}`;
     shadow.appendChild(style);
     return shadow;
   }
@@ -6165,7 +6165,7 @@ function createChromeHtml(session, { layoutGateEnabled = true } = {}) {
 <link rel="stylesheet" href="/chrome.css">
 </head>
 <body class="${bodyClass}">
-<div class="bar"><div class="brand"><span class="brand-mark">CanvasFlow</span><span class="brand-support">Editor</span></div><div class="spacer" aria-hidden="true"></div><button class="annotate-switch" id="annotation" type="button" aria-pressed="true" title="${escapeHtml(modeToggleHint)}"><span class="switch-track" aria-hidden="true"><span class="switch-knob"></span></span><span>Annotate</span></button><div class="more-wrap" id="moreWrap"><button class="more-button" id="moreButton" type="button" title="More" aria-haspopup="menu" aria-expanded="false">${chromeIcons.more}</button><div class="menu more-menu" id="moreMenu" hidden><div class="menu-head"><div class="menu-label">Editing</div><button class="menu-file" id="copyPath" type="button" title="Copy path \xB7 ${escapeHtml(session.file)}">${chromeIcons.file}<span class="menu-file-text"><span class="path-head">${escapeHtml(pathHead)}</span><span class="path-tail">${escapeHtml(pathTail)}</span></span><span class="copy-hint" id="copyHint"><span class="icon-copy">${chromeIcons.copy}</span><span class="icon-check">${chromeIcons.check}</span><span id="copyHintText">Copy</span></span></button></div><div class="menu-rule"></div><button class="menu-item" id="reloadArtifact" type="button">${chromeIcons.refresh}<span>Reload artifact</span></button><button class="menu-item" id="copySnapshot" type="button">${chromeIcons.camera}<span>Copy DOM snapshot</span></button><button class="menu-item" id="exportArtifact" type="button">${chromeIcons.download}<span>Export standalone HTML</span></button><button class="menu-item" id="shareArtifact" type="button">${chromeIcons.globe}<span>Publish link</span></button><div class="menu-rule"></div><button class="menu-item danger" id="end" type="button">${chromeIcons.exit}<span>End session</span></button></div></div></div>
+<div class="bar"><div class="brand"><span class="brand-mark">canvas<span class="brand-flow">flow</span></span><span class="brand-support">review</span></div><div class="spacer" aria-hidden="true"></div><button class="annotate-switch" id="annotation" type="button" aria-pressed="true" title="${escapeHtml(modeToggleHint)}"><span class="switch-track" aria-hidden="true"><span class="switch-knob"></span></span><span>Annotate</span></button><div class="more-wrap" id="moreWrap"><button class="more-button" id="moreButton" type="button" title="More" aria-haspopup="menu" aria-expanded="false">${chromeIcons.more}</button><div class="menu more-menu" id="moreMenu" hidden><div class="menu-head"><div class="menu-label">Editing</div><button class="menu-file" id="copyPath" type="button" title="Copy path \xB7 ${escapeHtml(session.file)}">${chromeIcons.file}<span class="menu-file-text"><span class="path-head">${escapeHtml(pathHead)}</span><span class="path-tail">${escapeHtml(pathTail)}</span></span><span class="copy-hint" id="copyHint"><span class="icon-copy">${chromeIcons.copy}</span><span class="icon-check">${chromeIcons.check}</span><span id="copyHintText">Copy</span></span></button></div><div class="menu-rule"></div><button class="menu-item" id="reloadArtifact" type="button">${chromeIcons.refresh}<span>Reload artifact</span></button><button class="menu-item" id="copySnapshot" type="button">${chromeIcons.camera}<span>Copy DOM snapshot</span></button><button class="menu-item" id="exportArtifact" type="button">${chromeIcons.download}<span>Export standalone HTML</span></button><button class="menu-item" id="shareArtifact" type="button">${chromeIcons.globe}<span>Publish link</span></button><div class="menu-rule"></div><button class="menu-item danger" id="end" type="button">${chromeIcons.exit}<span>End session</span></button></div></div></div>
 <div class="layout"><div class="frame"><iframe id="artifact" sandbox="allow-scripts allow-forms allow-popups allow-downloads" data-artifact-src="/artifact/${session.key}/index.html"></iframe><div class="layout-issue-banner" id="layoutIssueBanner" hidden>This surface may have layout issues. Your agent has been notified.</div></div><aside class="panel"><h2>Conversation</h2><div class="chat" id="chatLog"></div><div class="composer"><div class="presence-banner" id="presenceBanner" hidden>Your agent is not listening. If this persists, ask your agent to poll for updates from CanvasFlow.</div><div class="annotation-pills" id="annotationPills"></div><textarea id="chatInput" placeholder="Write a message for the agent..."></textarea><div class="actions" id="sendActions"><span class="send-hint" id="sendHint" hidden>Write a message or annotate an element first.</span><div class="split"><button class="button send-main" id="send">Send to Agent</button><button class="button send-caret" id="sendCaret" type="button" title="Send options" aria-haspopup="menu" aria-expanded="false">${chromeIcons.caret}</button></div><div class="menu send-menu" id="sendMenu" hidden><button class="menu-item" id="sendFromMenu" type="button">${chromeIcons.send}<span>Send to Agent</span></button><button class="menu-item danger" id="sendAndEnd" type="button">${chromeIcons.exit}<span>Send &amp; end session</span></button></div></div></div></aside></div>
 <div class="share-overlay" id="shareDialog" role="dialog" aria-modal="true" aria-labelledby="shareTitleText" hidden><form class="share-card" id="shareForm"><div class="share-head"><div><div class="share-kicker">Publish to <a class="share-link" href="https://ht-ml.app" target="_blank" rel="noopener noreferrer">ht-ml.app</a></div><h2 id="shareTitleText">Publish artifact</h2></div><button class="share-close" id="shareClose" type="button" aria-label="Close publish dialog"><svg width="14" height="14" viewBox="0 0 10 10" fill="none" aria-hidden="true" focusable="false"><path d="M1 1L9 9M9 1L1 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></div><p class="share-note">ht-ml.app is a separate, third-party hosting service, not part of CanvasFlow. Publishing sends this artifact to its servers.</p><p class="share-copy">This uploads this artifact to ht-ml.app with local assets inlined. Without a password, the page is PUBLIC and anyone with the link can open it. With a password, the page is PRIVATE and viewers must supply the password to view.</p><p class="share-note">Do not publish secrets. The CanvasFlow annotation SDK is not included.</p><div class="share-grid"><label>Password (optional)<input id="sharePassword" name="password" type="password" autocomplete="new-password" placeholder="Leave blank for a public page"></label></div><div class="share-status" id="shareStatus" role="status"></div><div class="share-result" id="shareResult" hidden><label>Share URL<div class="share-copy-row"><input id="shareUrl" readonly><button class="share-copy-btn" id="copyShareUrl" type="button">Copy URL</button></div></label><label>Update key (secret)<div class="share-copy-row"><input id="shareUpdateKey" readonly><button class="share-copy-btn" id="copyUpdateKey" type="button">Copy key</button></div></label><p class="share-note">Keep the update key private. ht-ml.app returns it once and it is the only way to update or delete this page later.</p></div><div class="share-actions"><button class="share-cancel" id="shareCancel" type="button">Cancel</button><button class="button" id="sharePublish" type="submit">Publish</button></div></form></div>
 <div class="ended-overlay layout-gate-overlay" id="layoutGateOverlay"${layoutGateHidden}><div class="ended-card"><div class="ended-title" id="layoutGateTitle">Checking layout.<br>One moment.</div><p class="ended-copy" id="layoutGateCopy">CanvasFlow is waiting for fonts and final geometry before revealing this artifact.</p><button class="button ended-action" id="layoutGateAction" type="button">Show anyway</button></div></div>
@@ -6378,7 +6378,7 @@ function normalizePagePath(path6) {
 var COMMANDS = /* @__PURE__ */ new Set(["open", "poll", "end", "stop", "server", "playbook", "design", "setup", "export", "share"]);
 var RESERVED = new Set(RESERVED_COMMANDS);
 var DESCRIPTION = "Canvas Flow helps agents turn rich HTML artifacts into collaborative human review surfaces. Whenever you are about to give user a complex response that will be easier to understand via a rich / interactive page, consider using Canvas Flow. First generate an interactive HTML artifact according to user request, then run `canvas-flow <html-file>` so the user can visually review it, annotate elements or selected text, queue prompts, and send feedback back through `canvas-flow poll`.";
-var VERSION = "0.1.0";
+var VERSION = "0.2.0";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@menukfernandoo/canvas-flow",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "packageManager": "pnpm@11.1.1",
   "description": "HTML is the new markdown. CanvasFlow is the new editor for your HTML artifacts.",
   "type": "module",