npm - @jamie-tam/forge - Versions diffs - 6.0.0 - Mend

@jamie-tam/forge 6.0.0

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 (213) hide show

package/skills/build-wireframe/assets/baseline-template.html ADDED Viewed

@@ -0,0 +1,486 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Wireframe — annotated</title>
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://cdn.tailwindcss.com/3.4.13"></script>
+<script src="https://unpkg.com/lucide@0.453.0/dist/umd/lucide.js"></script>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" crossorigin="anonymous"></script>
+<style>
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --border: 240 5.9% 90%;
+  }
+  html, body {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: 'Inter', -apple-system, system-ui, sans-serif;
+    font-feature-settings: "cv01", "ss03";
+    -webkit-font-smoothing: antialiased;
+  }
+  .bg-muted\/40  { background: hsl(var(--muted) / 0.4); }
+  .text-muted-foreground   { color: hsl(var(--muted-foreground)); }
+  .border-border           { border-color: hsl(var(--border)); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel" data-presets="env,react">
+// ─── primitives ──────────────────────────────────────────────────────────
+const I = ({ name, className="w-4 h-4", strokeWidth=1.75 }) => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current && window.lucide) {
+      ref.current.innerHTML = '';
+      const el = document.createElement('i');
+      el.setAttribute('data-lucide', name);
+      el.setAttribute('stroke-width', String(strokeWidth));
+      ref.current.appendChild(el);
+      window.lucide.createIcons({ attrs: { class: className }});
+    }
+  }, [name, className, strokeWidth]);
+  return <span ref={ref} className={"inline-flex "+className} />;
+};
+const Card = ({className="", children, ...rest}) => (
+  <div className={"rounded-lg border border-border bg-white "+className} {...rest}>{children}</div>
+);
+const Separator = ({className=""}) => <div className={"h-px w-full bg-border "+className} />;
+const Badge = ({variant="outline", className="", children}) => {
+  const v = {
+    outline:   "border border-border text-zinc-700",
+    secondary: "bg-zinc-100 text-zinc-700 border border-transparent",
+    default:   "bg-zinc-900 text-white border border-transparent",
+  }[variant];
+  return <span className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none ${v} ${className}`}>{children}</span>;
+};
+const Button = ({variant="default", size="sm", className="", children, ...p}) => {
+  const v = {
+    default:   "bg-zinc-900 text-white hover:bg-zinc-800 border border-zinc-900",
+    secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 border border-transparent",
+    ghost:     "text-zinc-700 hover:bg-zinc-100 border border-transparent",
+    outline:   "bg-white text-zinc-900 hover:bg-zinc-50 border border-border",
+    accent:    "bg-amber-500 text-white hover:bg-amber-600 border border-amber-500",
+    success:   "bg-emerald-500 text-white hover:bg-emerald-600 border border-emerald-500",
+    danger:    "bg-rose-500 text-white hover:bg-rose-600 border border-rose-500",
+  }[variant];
+  const s = { sm: "h-9 px-4 text-[13px]", xs: "h-7 px-2.5 text-[12px]", md: "h-10 px-5 text-[14px]" }[size];
+  return <button className={`inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition ${v} ${s} ${className}`} {...p}>{children}</button>;
+};
+const Avatar = ({initials, className=""}) => (
+  <span className={`inline-flex items-center justify-center rounded-full bg-zinc-100 text-zinc-600 text-[11px] font-semibold ${className}`}>{initials}</span>
+);
+// ─── shared shell ────────────────────────────────────────────────────────
+const Topbar = ({mode="ready", livePill=null, anchorId=null, livePillAnchorId=null}) => {
+  const presence = {
+    ready:   {cls: "border-emerald-200 bg-emerald-50 text-emerald-800", dot: "bg-emerald-500", label: "Ready"},
+    busy:    {cls: "border-amber-200 bg-amber-50 text-amber-800",       dot: "bg-amber-500",   label: "Busy"},
+    oncall:  {cls: "border-amber-200 bg-amber-50 text-amber-800",       dot: "bg-amber-500",   label: "On call"},
+  }[mode];
+  return (
+    <div className="relative flex items-center gap-5 h-16 px-7 border-b border-border bg-white">
+      <div className="flex items-center gap-2.5">
+        <div className="w-7 h-7 rounded bg-zinc-900 grid place-items-center text-white text-[13px] font-bold">⊛</div>
+        <span className="text-[17px] font-semibold tracking-tight">brand</span>
+      </div>
+      <div className="ml-3 flex items-center gap-2.5 h-10 px-3.5 rounded-md border border-border bg-zinc-50 w-[340px]">
+        <I name="search" className="w-4 h-4 text-zinc-400" />
+        <span className="text-[14px] text-zinc-400">⌘K  Search · jump · run command</span>
+      </div>
+      <div className="flex-1" />
+      {livePill && (
+        <span className="relative inline-flex items-center gap-2 h-9 px-3 rounded-md border border-amber-300 bg-amber-50 text-amber-900 text-[13.5px] font-semibold">
+          {livePillAnchorId && <span id={livePillAnchorId} className="absolute left-1/2 bottom-0" data-callout-anchor="" />}
+          <I name="phone" className="w-4 h-4" />
+          {livePill}
+        </span>
+      )}
+      <span className={`relative inline-flex items-center gap-2 h-9 px-3 rounded-md border ${presence.cls} text-[13.5px] font-medium`}>
+        <span className={`w-2 h-2 rounded-full ${presence.dot}`} /> {presence.label}
+        <I name="chevron-down" className="w-3.5 h-3.5 opacity-60" />
+      </span>
+      <div className="relative">
+        <button className="h-9 w-9 rounded-md grid place-items-center hover:bg-zinc-100 border border-border">
+          <I name="bell" className="w-[18px] h-[18px] text-zinc-700" />
+        </button>
+        <span className="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[11px] font-bold">2</span>
+      </div>
+      <div className="flex items-center gap-2 pl-1">
+        <Avatar initials="PN" className="w-8 h-8 text-[12px]" />
+        <span className="text-[13.5px] text-zinc-700">Priya</span>
+        <I name="chevron-down" className="w-3.5 h-3.5 text-zinc-400" />
+      </div>
+      {anchorId && <span id={anchorId} className="absolute left-1/2 bottom-0" data-callout-anchor="" />}
+    </div>
+  );
+};
+const Sidebar = ({active="home", anchor=null}) => {
+  const items = [
+    {key:"home",   icon:"home",        label:"Home"},
+    {key:"cases",  icon:"search",      label:"Cases"},
+    {key:"customers", icon:"users",    label:"Customers"},
+    {key:"reports", icon:"bar-chart-3", label:"Reports"},
+    {key:"library", icon:"book-open",  label:"Knowledge"},
+  ];
+  return (
+    <div className="w-14 shrink-0 border-r border-border bg-white flex flex-col items-center py-4 gap-2 relative">
+      {items.map((it) => (
+        <div key={it.key} className="relative">
+          <button title={it.label}
+                  className={`w-10 h-10 rounded-md grid place-items-center transition ${it.key===active?"bg-amber-50 text-amber-700 ring-1 ring-amber-200":"text-zinc-500 hover:bg-zinc-100"}`}>
+            <I name={it.icon} className="w-[18px] h-[18px]" />
+          </button>
+          {anchor && it.key === anchor.key && <span id={anchor.id} className="absolute top-1/2 left-0" data-callout-anchor="" />}
+        </div>
+      ))}
+      <div className="flex-1" />
+      <button title="Settings" className="w-10 h-10 rounded-md grid place-items-center text-zinc-500 hover:bg-zinc-100">
+        <I name="settings" className="w-[18px] h-[18px]" />
+      </button>
+    </div>
+  );
+};
+const InboxRow = ({channel, id, name, sub, active=false, accent}) => {
+  const ch = { phone:"phone", email:"mail", chat:"message-square", whatsapp:"message-circle", calendar:"calendar-clock" }[channel];
+  const accentBg = active ? (accent==="emerald" ? "bg-emerald-50 border-l-emerald-500" : "bg-amber-50 border-l-amber-500") : "";
+  return (
+    <div className={`flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer ${active ? `border-l-2 ${accentBg}` : "hover:bg-zinc-50"}`}>
+      <I name={ch} className="w-4 h-4 text-zinc-500 shrink-0" />
+      <span className="font-mono text-[12.5px] text-zinc-500 shrink-0">{id}</span>
+      <span className="text-[13.5px] text-zinc-800 truncate flex-1">{name}</span>
+      {sub && <span className="text-[12px] text-zinc-500 truncate">{sub}</span>}
+    </div>
+  );
+};
+const SectionHead = ({label, count, expanded=true}) => (
+  <div className="flex items-center gap-2 px-2.5 py-2.5">
+    <I name={expanded?"chevron-down":"chevron-right"} className="w-4 h-4 text-zinc-400" />
+    <span className="text-[13px] font-semibold text-zinc-800">{label}</span>
+    <span className="text-[12px] text-zinc-400 font-mono">· {count}</span>
+  </div>
+);
+const LeftCaseList = ({activeCaseId=null, anchorId=null, injectActive=null}) => (
+  <aside className="w-[300px] shrink-0 border-r border-border bg-white flex flex-col relative">
+    <div className="p-4 border-b border-border">
+      <Button variant="accent" className="w-full justify-between h-11 px-4 text-[14px]" size="md">
+        <span className="inline-flex items-center gap-2">
+          <I name="sparkles" className="w-4 h-4" />
+          Pick Next
+        </span>
+        <I name="arrow-right" className="w-4 h-4" />
+      </Button>
+    </div>
+    <div className="flex-1 overflow-hidden px-1.5 py-1">
+      <SectionHead label="Open" count={injectActive ? "5" : "4"} />
+      <div className="space-y-0.5">
+        {injectActive && <InboxRow channel={injectActive.channel} id={injectActive.id} name={injectActive.name} active={activeCaseId===injectActive.id} accent={injectActive.accent || "amber"} />}
+        <InboxRow channel="phone" id="CS-101" name="Sample · phone case" active={activeCaseId==="CS-101"} accent="amber" />
+        <InboxRow channel="email" id="CS-102" name="Sample · email case" active={activeCaseId==="CS-102"} accent="emerald" />
+        <InboxRow channel="chat"  id="CS-103" name="Sample · chat case" />
+      </div>
+      <SectionHead label="Later" count="0" expanded={false} />
+      <SectionHead label="Done" count="0" expanded={false} />
+    </div>
+    {anchorId && <span id={anchorId} className="absolute left-0 top-1/2" data-callout-anchor="" />}
+  </aside>
+);
+const RightRail = ({customer="Customer Name", tier="Tier · NPS", status="Active", anchorId=null}) => (
+  <aside className="w-[300px] shrink-0 border-l border-border bg-white flex flex-col relative">
+    {anchorId && <span id={anchorId} className="absolute left-0 top-1/2" data-callout-anchor="" />}
+    <div className="border-b border-border px-4 py-3 flex gap-4 text-[13px] font-semibold">
+      <span className="text-amber-700 border-b-2 border-amber-500 pb-2 -mb-3">Details</span>
+      <span className="text-zinc-400">AI Copilot</span>
+      <span className="text-zinc-400">Apps</span>
+    </div>
+    <div className="px-4 py-4 text-[12.5px] space-y-4 overflow-y-auto">
+      <div>
+        <div className="text-[11px] uppercase tracking-[0.08em] text-zinc-500 font-semibold mb-1.5">Status</div>
+        <div className="text-zinc-800">{status}</div>
+      </div>
+      <Separator />
+      <div>
+        <div className="text-[11px] uppercase tracking-[0.08em] text-zinc-500 font-semibold mb-1.5">Customer</div>
+        <div className="text-[14px] font-semibold text-zinc-900">{customer}</div>
+        <div className="text-[12px] text-zinc-500">{tier}</div>
+      </div>
+    </div>
+  </aside>
+);
+// ─── callout system ──────────────────────────────────────────────────────
+const Callouts = ({hostRef, scale, callouts}) => {
+  const [paths, setPaths] = React.useState([]);
+  const [box, setBox] = React.useState({w:0, h:0});
+  React.useLayoutEffect(() => { setPaths([]); }, [callouts]);
+  const recompute = React.useCallback(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const hostRect = host.getBoundingClientRect();
+    setBox({w: hostRect.width, h: hostRect.height});
+    const next = (callouts||[]).map((c) => {
+      const el = host.querySelector(`#${c.id}`);
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      const ax = r.left - hostRect.left + (c.anchor==="left" ? 0 : c.anchor==="right" ? r.width : r.width/2);
+      const ay = r.top  - hostRect.top  + (c.anchor==="top" ? 0 : c.anchor==="bottom" ? r.height : r.height/2);
+      const margin = 60;
+      let lx, ly, side = c.side;
+      if (side === "left")        { lx = -margin;                 ly = ay; }
+      else if (side === "right")  { lx = hostRect.width + margin;  ly = ay; }
+      else if (side === "top")    { lx = ax; ly = -margin; }
+      else                        { lx = ax; ly = hostRect.height + margin; }
+      return { ...c, ax, ay, lx, ly, side };
+    }).filter(Boolean);
+    // collision avoidance — push later labels right (top/bottom) or down (left/right)
+    const labelW = 230, labelH = 36, gap = 12;
+    for (const sideKey of ["top", "bottom"]) {
+      const group = next.filter(p => p.side === sideKey).sort((a,b) => a.lx - b.lx);
+      for (let i = 1; i < group.length; i++) {
+        const minDelta = labelW + gap;
+        if (group[i].lx - group[i-1].lx < minDelta) group[i].lx = group[i-1].lx + minDelta;
+      }
+    }
+    for (const sideKey of ["left", "right"]) {
+      const group = next.filter(p => p.side === sideKey).sort((a,b) => a.ay - b.ay);
+      for (let i = 1; i < group.length; i++) {
+        const minDelta = labelH + gap;
+        if (group[i].ly - group[i-1].ly < minDelta) group[i].ly = group[i-1].ly + minDelta;
+      }
+    }
+    setPaths(next);
+  }, [hostRef, callouts]);
+  React.useEffect(() => {
+    recompute();
+    const ro = new ResizeObserver(recompute);
+    if (hostRef.current) ro.observe(hostRef.current);
+    window.addEventListener('resize', recompute);
+    const t1 = setTimeout(recompute, 80);
+    const t2 = setTimeout(recompute, 240);
+    return () => { ro.disconnect(); window.removeEventListener('resize', recompute); clearTimeout(t1); clearTimeout(t2); };
+  }, [recompute, scale, callouts]);
+  const labelW = 230, labelH = 32;
+  return (
+    <div className="absolute inset-0 pointer-events-none" style={{zIndex: 5}}>
+      <svg className="absolute inset-0" width={box.w} height={box.h} style={{overflow:"visible"}}>
+        {paths.map((p) => {
+          let d;
+          if (p.side === "left" || p.side === "right") {
+            if (Math.abs(p.ly - p.ay) < 2) {
+              d = `M ${p.lx} ${p.ly} L ${p.ax} ${p.ay}`;
+            } else {
+              const elbowX = p.side === "right" ? p.lx - 16 : p.lx + 16;
+              d = `M ${p.lx} ${p.ly} L ${elbowX} ${p.ly} L ${elbowX} ${p.ay} L ${p.ax} ${p.ay}`;
+            }
+          } else {
+            const elbowY = p.side === "bottom" ? p.ly - 16 : p.ly + 16;
+            d = `M ${p.lx} ${p.ly} L ${p.lx} ${elbowY} L ${p.ax} ${elbowY} L ${p.ax} ${p.ay}`;
+          }
+          return (
+            <g key={p.id}>
+              <path d={d} fill="none" stroke="rgb(161 161 170)" strokeWidth="1" strokeDasharray="3 3" />
+              <circle cx={p.ax} cy={p.ay} r="3" fill="rgb(82 82 91)" />
+            </g>
+          );
+        })}
+      </svg>
+      {paths.map((p) => {
+        const style = { position:"absolute", width: labelW };
+        if (p.side === "left")        { style.right = box.w - p.lx; style.top = p.ly - labelH/2; }
+        else if (p.side === "right")  { style.left  = p.lx;          style.top = p.ly - labelH/2; }
+        else if (p.side === "top")    { style.left  = p.lx - labelW/2; style.bottom = box.h - p.ly + labelH/2; }
+        else                          { style.left  = p.lx - labelW/2; style.top    = p.ly - labelH/2; }
+        return (
+          <div key={p.id} style={style}
+               className="text-[12px] leading-[1.3] text-zinc-700 bg-amber-50 border border-amber-200 rounded px-2.5 py-1.5 shadow-sm text-center">
+            {p.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+// ─── stage shell ─────────────────────────────────────────────────────────
+const stageStyle = {width: 1920, height: 1080};
+const StateShell = ({children}) => (
+  <div className="absolute top-0 left-0 origin-top-left rounded-md border border-border overflow-hidden bg-white" style={stageStyle}>
+    {children}
+  </div>
+);
+// ─── EXAMPLE STATE — replace with your own ───────────────────────────────
+const Example = () => (
+  <StateShell>
+    <Topbar mode="ready" anchorId="x-topbar" />
+    <div className="flex" style={{height: 1080-64}}>
+      <Sidebar active="home" anchor={{key:"home", id:"x-sidebar"}} />
+      <LeftCaseList anchorId="x-caselist" />
+      <main className="flex-1 min-w-0 overflow-hidden flex flex-col">
+        <div className="flex-1 px-12 py-10 space-y-6">
+          <div className="relative">
+            <span id="x-greeting" className="absolute left-1/2 bottom-0" data-callout-anchor="" />
+            <div className="text-[40px] font-semibold tracking-tight leading-none">Hello, agent</div>
+            <div className="text-[16px] text-muted-foreground mt-3">This is the example state. Replace it.</div>
+          </div>
+          <div className="relative">
+            <span id="x-content" className="absolute right-0 top-1/2" data-callout-anchor="" />
+            <Card className="p-6">
+              <div className="text-[11px] uppercase tracking-[0.08em] text-zinc-500 font-semibold mb-2">Section</div>
+              <div className="text-[18px] text-zinc-900">Replace this card with your real centre content.</div>
+            </Card>
+          </div>
+        </div>
+        <div className="relative px-12 py-5 border-t border-border bg-zinc-50/60 flex items-center gap-8">
+          <span id="x-footer" className="absolute left-1/2 bottom-0" data-callout-anchor="" />
+          <span className="text-[12px] uppercase tracking-[0.08em] text-zinc-500 font-semibold">Today</span>
+          <span className="text-[14px] text-zinc-700">23 handled · CSAT 4.6 · FCR 87%</span>
+        </div>
+      </main>
+    </div>
+  </StateShell>
+);
+const Example_CALLOUTS = [
+  { id: "x-topbar",    side: "top",    anchor: "bottom", label: "Topbar — brand · search · presence · bell · user" },
+  { id: "x-sidebar",   side: "left",   anchor: "left",   label: "Sidebar — navigation column" },
+  { id: "x-caselist",  side: "left",   anchor: "left",   label: "Inbox — case list grouped by Open / Later / Done" },
+  { id: "x-greeting",  side: "top",    anchor: "bottom", label: "Greeting — day-orientation glance" },
+  { id: "x-content",   side: "right",  anchor: "right",  label: "Section — replace with your real annotation" },
+  { id: "x-footer",    side: "bottom", anchor: "bottom", label: "Today's KPI strip" },
+];
+// ─── view registry ───────────────────────────────────────────────────────
+const VIEWS = {
+  "example": {label: "Example", group: "agent", render: Example, callouts: Example_CALLOUTS},
+  // Add more states here. Pattern: {label, group: "agent"|"sup"|"demo", render, callouts}
+};
+// ─── tabs ────────────────────────────────────────────────────────────────
+const Tabs = ({active, onSelect}) => {
+  const groupKeys = (g) => Object.keys(VIEWS).filter(k => VIEWS[k].group === g);
+  const agentKeys = groupKeys("agent");
+  const demoKeys  = groupKeys("demo");
+  const supKeys   = groupKeys("sup");
+  const TabBtn = ({k}) => {
+    const v = VIEWS[k];
+    const isActive = active === k;
+    return (
+      <button onClick={() => onSelect(k)}
+              className={`h-8 px-3 rounded-md text-[13px] font-semibold transition border ${isActive?"bg-amber-50 text-amber-900 ring-1 ring-amber-200 border-amber-200":"bg-white text-zinc-700 border-transparent hover:bg-zinc-100"}`}>
+        {v.label}
+      </button>
+    );
+  };
+  return (
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-2 px-8 py-3 bg-white border border-border rounded-md mx-auto mb-4 overflow-x-auto" style={{maxWidth: 2400}}>
+      {agentKeys.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-[10.5px] uppercase tracking-[0.12em] text-zinc-500 font-bold">Agent</span>
+          <div className="flex items-center gap-1 ml-1">{agentKeys.map(k => <TabBtn key={k} k={k} />)}</div>
+        </div>
+      )}
+      {demoKeys.length > 0 && <>
+        <span className="border-l border-border h-6 mx-2" />
+        <div className="flex items-center gap-2">
+          <span className="text-[10.5px] uppercase tracking-[0.12em] text-cyan-600 font-bold">Demo</span>
+          <div className="flex items-center gap-1 ml-1">{demoKeys.map(k => <TabBtn key={k} k={k} />)}</div>
+        </div>
+      </>}
+      {supKeys.length > 0 && <>
+        <span className="border-l border-border h-6 mx-2" />
+        <div className="flex items-center gap-2">
+          <span className="text-[10.5px] uppercase tracking-[0.12em] text-violet-600 font-bold">Supervisor</span>
+          <div className="flex items-center gap-1 ml-1">{supKeys.map(k => <TabBtn key={k} k={k} />)}</div>
+        </div>
+      </>}
+      <div className="ml-auto text-[11px] text-zinc-400 font-mono shrink-0">#{active}</div>
+    </div>
+  );
+};
+// ─── App ─────────────────────────────────────────────────────────────────
+const App = () => {
+  const initial = (window.location.hash || "").replace("#","");
+  const [active, setActive] = React.useState(VIEWS[initial] ? initial : Object.keys(VIEWS)[0]);
+  // demo views push their per-step callouts here; null = use static view.callouts
+  const [dynamicCallouts, setDynamicCallouts] = React.useState(null);
+  // NO reset-on-active effect — demo cleanup-on-unmount handles it.
+  React.useEffect(() => {
+    const onHash = () => {
+      const h = window.location.hash.replace("#","");
+      if (VIEWS[h]) setActive(h);
+    };
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+  const onSelect = (k) => { window.location.hash = "#"+k; setActive(k); };
+  const view = VIEWS[active];
+  const Render = view.render;
+  const effectiveCallouts = dynamicCallouts !== null ? dynamicCallouts : view.callouts;
+  const stageRef = React.useRef(null);
+  const [scale, setScale] = React.useState(1);
+  React.useEffect(() => {
+    const onResize = () => {
+      if (!stageRef.current) return;
+      const w = stageRef.current.clientWidth;
+      setScale(Math.min(1, w / 1920));
+    };
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [active]);
+  return (
+    <div className="bg-background text-foreground min-h-screen">
+      <Tabs active={active} onSelect={onSelect} />
+      <div className="mx-auto pb-12" style={{maxWidth: 2400}}>
+        <div ref={stageRef} className="relative overflow-visible mt-32" style={{aspectRatio: "16 / 9", marginLeft: 320, marginRight: 320, width: "calc(100% - 640px)", maxWidth: 1920}}>
+          <div className="absolute inset-0" style={{transform: `scale(${scale})`, transformOrigin: "top left"}}>
+            <Render setCallouts={setDynamicCallouts} />
+          </div>
+          <Callouts hostRef={stageRef} scale={scale} callouts={effectiveCallouts} />
+        </div>
+        <div className="px-8 mt-6 mx-auto text-[12px] text-zinc-500" style={{maxWidth: 2400}}>
+          <span className="uppercase tracking-[0.08em] font-semibold text-zinc-700">{VIEWS[active].label}</span>
+          <span className="mx-2">·</span>
+          <span>1920 × 1080 · scaled to fit · annotated callouts in the side gutters</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>

package/skills/build-wireframe/references/demo-walkthroughs.md ADDED Viewed

@@ -0,0 +1,170 @@
+# Demo walkthroughs — interactive click-through state
+Demo views are wireframe states with internal `step` state — the user clicks a button (Accept / End / Save / Edit / etc.) and the view advances to the next step. Each step has its own callouts, swapped dynamically when the step changes.
+This pattern is what makes the artifact feel like a "click-through prototype" instead of static slides.
+## Why it's tricky
+The tab navigation pattern uses a static `view.callouts` array per view. For demos, the callouts depend on internal state, which the App doesn't know about. The naive approach — let the demo component define `_CALLOUTS` and switch between them — doesn't work because the Callouts overlay is rendered by App, not the demo.
+There are two failure modes you must avoid:
+1. **No callouts ever render.** If the demo doesn't push its callouts to App, App reads `view.callouts: []` and renders nothing.
+2. **Callouts disappear immediately on mount.** If App has a useEffect that resets dynamic callouts on view change (e.g. `useEffect(() => setDynamic(null), [active])`), it overrides the demo's mount-time push because parent useEffects run AFTER child useEffects. The demo sets the array, then App immediately nulls it. Result: zero callouts on screen.
+Both happened during iteration. The fix below avoids both.
+## The pattern (correct version)
+### App side
+```jsx
+const App = () => {
+  const [active, setActive] = React.useState(...);
+  // demos push their per-step callouts here; null = use static view.callouts
+  const [dynamicCallouts, setDynamicCallouts] = React.useState(null);
+  // NO reset effect on [active] — demo's cleanup-on-unmount handles it
+  const view = VIEWS[active];
+  const Render = view.render;
+  const effectiveCallouts = dynamicCallouts !== null ? dynamicCallouts : view.callouts;
+  return (
+    <div>
+      <Tabs active={active} onSelect={setActive} />
+      <div ref={stageRef} ...>
+        <div className="absolute inset-0" style={{transform: `scale(${scale})`, transformOrigin: "top left"}}>
+          {/* Static views ignore the prop; demos consume it */}
+          <Render setCallouts={setDynamicCallouts} />
+        </div>
+        <Callouts hostRef={stageRef} scale={scale} callouts={effectiveCallouts} />
+      </div>
+    </div>
+  );
+};
+```
+### Demo side
+```jsx
+// Top-level array per demo — clear, easy to scan, matches step indices
+const D1_STEP_CALLOUTS = [
+  // step 0
+  [
+    { id: "d1s0-banner", side: "top", anchor: "top",
+      label: "Inbound banner · 8s auto-accept countdown" },
+  ],
+  // step 1
+  [
+    { id: "d1s1-callpanel", side: "right", anchor: "right",
+      label: "Live call panel · transcript + controls" },
+    { id: "d1s1-end", side: "bottom", anchor: "bottom",
+      label: "End → opens the wrap-up modal" },
+  ],
+  // step 2 — wrap-up modal
+  [
+    { id: "a-wrapmodal", side: "right", anchor: "right",
+      label: "Wrap-up · same modal as the canonical S7 view" },
+    { id: "d1s2-save", side: "bottom", anchor: "bottom",
+      label: "Save & next loops back to home" },
+  ],
+  // step 3 — toast
+  [
+    { id: "d1s3-toast", side: "top", anchor: "top",
+      label: "Demo complete · ↻ Restart to replay" },
+  ],
+];
+const DemoInbound = ({setCallouts}) => {
+  const [step, setStep] = React.useState(0);
+  const restart = () => setStep(0);
+  // Push the active step's callouts up. Cleanup-on-unmount nulls them so
+  // switching to another view doesn't leak stale callouts.
+  React.useEffect(() => {
+    if (setCallouts) setCallouts(D1_STEP_CALLOUTS[step] || []);
+    return () => { if (setCallouts) setCallouts(null); };
+  }, [step, setCallouts]);
+  if (step === 0) return <DemoStage step={0} total={4} label="Banner · awaiting accept" restart={restart}>
+    <InboundBanner anchorId="d1s0-banner" onAccept={() => setStep(1)} />
+    {/* dimmed shell underneath */}
+  </DemoStage>;
+  if (step === 1) return <DemoStage step={1} total={4} label="Active call · 02:14" restart={restart}>
+    {/* call panel with anchorId="d1s1-callpanel"; End button with anchorId="d1s1-end" */}
+  </DemoStage>;
+  // ...
+};
+```
+The cleanup function `return () => setCallouts(null)` is what makes view switches clean. Order on view change:
+1. Old demo unmounts → cleanup runs → `setDynamicCallouts(null)`
+2. New view mounts
+3. If new view is another demo: its useEffect fires → pushes its step-0 callouts
+4. If new view is static: nothing pushes; `dynamicCallouts` stays null; App falls back to `view.callouts`
+No race, no stale callouts.
+## DemoStage wrapper
+The demo's outer wrapper that adds the step-indicator strip at the top of the canvas:
+```jsx
+const DemoStage = ({step, total, label, restart, children}) => (
+  <div className="absolute top-0 left-0 origin-top-left rounded-md border border-border overflow-hidden bg-white" style={{width: 1920, height: 1080}}>
+    {/* step indicator strip — 32px tall, sits above the wireframe content */}
+    <div className="flex items-center gap-3 h-8 px-5 bg-amber-50/60 border-b border-amber-200 text-[12px]">
+      <span className="font-semibold text-amber-800 uppercase tracking-[0.06em]">Step {step + 1} of {total}</span>
+      <span className="text-zinc-500">·</span>
+      <span className="text-zinc-700">{label}</span>
+      <button onClick={restart} className="ml-auto inline-flex items-center gap-1 text-amber-700 hover:underline">
+        <I name="rotate-ccw" className="w-3 h-3" /> Restart
+      </button>
+    </div>
+    {/* content gets 1080 - 32 = 1048 px of height */}
+    {children}
+  </div>
+);
+```
+When the children include a Topbar (h-16 = 64px) and a flex shell, give the inner flex `style={{height: 1080 - 32 - 64}}` to account for both the step strip and the topbar.
+## Reusable demo sub-components
+Don't refactor static state components to accept a million props. Keep the static path simple. For demos, build small `Demo*` variants that accept the action callbacks and anchor IDs:
+- `DemoInboundBanner({onAccept, anchorId})` — green slide-down with a clickable Accept
+- `DemoVoiceCenter({onEnd, direction, customerName, caseId, title, elapsed, anchorIds})` — call panel with End button wired up
+- `DemoOutboundRingingCenter({onConnect, customerName, caseId, anchorId})` — pulsing ringing card
+- `DemoRightRailWithCall({onCall, customer, phone, anchorIds})` — the right rail with a Call button
+- `DemoCompleteToast({restart, anchorId})` — top-right toast with restart link
+For the wrap-up modal: **don't fork**. The S7 `WrapUpModal` should accept `onSave`, `onHome`, `headline`, `subline`, `saveAnchorId` props (all optional). S7 calls it with no props (existing behavior); demos pass their own. One source of truth — what supervisors see in S7 is what agents see at the end of every demo.
+## Anchor ID convention
+For demo anchors, use `d{N}s{step}-{element}` — e.g. `d1s2-save`, `d2s0-call`. This makes IDs unique across all 14+ views and easy to grep.
+For the wrap-up modal, demos REUSE the canonical S7 anchors (`a-wrapmodal`, `a-summary`, `a-axes`, `a-merge`, `a-status`) plus their own save-button anchor. The modal renders only one at a time; no ID conflict.
+## Inject-active-row pattern
+When a demo accepts a new inbound (call, chat, email), the inbox should reflect the new case. The shared `LeftCaseList` accepts an `injectActive` prop:
+```jsx
+<LeftCaseList
+  activeCaseId="CS-4861"
+  injectActive={{id: "CS-4861", name: "Chan · live call", channel: "phone"}}
+/>
+```
+The injected row prepends to the Open section, the Open count bumps by 1, and the row gets the `active` highlight when `activeCaseId` matches. The existing rows below stay (modeling that the customer might have OTHER cases too — e.g. a separate email).
+This avoids the trap of "the highlighted case in the inbox is the wrong channel" — accepting a phone call but highlighting an existing email row.
+## Step indicator UX
+A small but important touch: the step indicator strip sits at the very top of the canvas (above the topbar), in a faint amber band, with the format `STEP N OF M · {label} · ↻ Restart`. It says enough to orient a viewer who jumped in mid-flow without reading the surrounding context. Don't let `{label}` exceed ~30 characters or it pushes Restart off-screen at smaller scales.