@withpotter/components 0.13.0-next.101

package/dist/templates/use-mobile-template-preview.js

@@ -0,0 +1,24 @@
+"use client";
+import { useState } from "react";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+function useMobileTemplatePreview() {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+  return {
+    /** Should the preview dialog be showing, in this preview mode? */
+    shows: (previewMode) => previewMode === "stage" || previewMode === "dialog" || isMobile && open,
+    /** Called when a template is tapped; a no-op where the panel is visible. */
+    openIfMobile: () => {
+      if (isMobile) setOpen(true);
+    },
+    /** Close, then run whatever the caller was going to do next. */
+    close: (then) => {
+      setOpen(false);
+      then?.();
+    }
+  };
+}
+export {
+  useMobileTemplatePreview
+};
+//# sourceMappingURL=use-mobile-template-preview.js.map

package/dist/templates/use-mobile-template-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/use-mobile-template-preview.ts"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\n\n/**\n * Whether the phone's template preview dialog is open.\n *\n * The `panel` preview sits above the grid and is `hidden sm:block`, so on a\n * phone tapping a template selected it and showed nothing at all: View did\n * nothing, because the one place the preview could appear was display:none.\n * The dashboard opens with the CURRENT template already selected, so the\n * dialog cannot key off the selection alone or it would cover the page on\n * arrival. It opens only on a tap, which is what this tracks.\n */\nexport function useMobileTemplatePreview() {\n  const isMobile = useIsMobile();\n  const [open, setOpen] = useState(false);\n\n  return {\n    /** Should the preview dialog be showing, in this preview mode? */\n    shows: (previewMode: 'panel' | 'stage' | 'dialog') =>\n      previewMode === 'stage' || previewMode === 'dialog' || (isMobile && open),\n    /** Called when a template is tapped; a no-op where the panel is visible. */\n    openIfMobile: () => {\n      if (isMobile) setOpen(true);\n    },\n    /** Close, then run whatever the caller was going to do next. */\n    close: (then?: () => void) => {\n      setOpen(false);\n      then?.();\n    },\n  };\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAYrB,SAAS,2BAA2B;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,SAAO;AAAA;AAAA,IAEL,OAAO,CAAC,gBACN,gBAAgB,WAAW,gBAAgB,YAAa,YAAY;AAAA;AAAA,IAEtE,cAAc,MAAM;AAClB,UAAI,SAAU,SAAQ,IAAI;AAAA,IAC5B;AAAA;AAAA,IAEA,OAAO,CAAC,SAAsB;AAC5B,cAAQ,KAAK;AACb,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}

package/dist/templates/use-recent-templates.d.ts

@@ -0,0 +1,9 @@
+/**
+ * What this merchant opened lately, newest first. Kept in the browser: the
+ * registry carries no dates and nothing records who looked at what, so
+ * "recent" can only honestly mean "you looked at it".
+ */
+export declare function useRecentTemplates(): {
+    recents: string[];
+    remember: (id: string) => void;
+};

package/dist/templates/use-recent-templates.js

@@ -0,0 +1,28 @@
+"use client";
+import { useState } from "react";
+const RECENTS_KEY = "template-gallery-recent";
+function useRecentTemplates() {
+  const [recents, setRecents] = useState(() => {
+    try {
+      const saved = JSON.parse(
+        window.localStorage.getItem(RECENTS_KEY) ?? "[]"
+      );
+      return Array.isArray(saved) ? saved.filter((x) => typeof x === "string") : [];
+    } catch {
+      return [];
+    }
+  });
+  const remember = (id) => {
+    const next = [id, ...recents.filter((x) => x !== id)].slice(0, 12);
+    setRecents(next);
+    try {
+      window.localStorage.setItem(RECENTS_KEY, JSON.stringify(next));
+    } catch {
+    }
+  };
+  return { recents, remember };
+}
+export {
+  useRecentTemplates
+};
+//# sourceMappingURL=use-recent-templates.js.map

package/dist/templates/use-recent-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/use-recent-templates.ts"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nconst RECENTS_KEY = 'template-gallery-recent';\n\n/**\n * What this merchant opened lately, newest first. Kept in the browser: the\n * registry carries no dates and nothing records who looked at what, so\n * \"recent\" can only honestly mean \"you looked at it\".\n */\nexport function useRecentTemplates() {\n  const [recents, setRecents] = useState<string[]>(() => {\n    try {\n      const saved = JSON.parse(\n        window.localStorage.getItem(RECENTS_KEY) ?? '[]',\n      );\n      return Array.isArray(saved)\n        ? saved.filter((x) => typeof x === 'string')\n        : [];\n    } catch {\n      // Storage blocked or garbled (or no window yet); starts empty.\n      return [];\n    }\n  });\n\n  const remember = (id: string) => {\n    const next = [id, ...recents.filter((x) => x !== id)].slice(0, 12);\n    setRecents(next);\n    try {\n      window.localStorage.setItem(RECENTS_KEY, JSON.stringify(next));\n    } catch {\n      // Not worth failing a selection over.\n    }\n  };\n\n  return { recents, remember };\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AAEzB,MAAM,cAAc;AAOb,SAAS,qBAAqB;AACnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmB,MAAM;AACrD,QAAI;AACF,YAAM,QAAQ,KAAK;AAAA,QACjB,OAAO,aAAa,QAAQ,WAAW,KAAK;AAAA,MAC9C;AACA,aAAO,MAAM,QAAQ,KAAK,IACtB,MAAM,OAAO,CAAC,MAAM,OAAO,MAAM,QAAQ,IACzC,CAAC;AAAA,IACP,QAAQ;AAEN,aAAO,CAAC;AAAA,IACV;AAAA,EACF,CAAC;AAED,QAAM,WAAW,CAAC,OAAe;AAC/B,UAAM,OAAO,CAAC,IAAI,GAAG,QAAQ,OAAO,CAAC,MAAM,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE;AACjE,eAAW,IAAI;AACf,QAAI;AACF,aAAO,aAAa,QAAQ,aAAa,KAAK,UAAU,IAAI,CAAC;AAAA,IAC/D,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SAAO,EAAE,SAAS,SAAS;AAC7B;","names":[]}

package/dist/templates/workflow-canvas.css

@@ -0,0 +1,168 @@
+/* The workflow canvas.
+   ---------------------------------------------------------------------------
+   Anatomy measured off Flora's technique canvas (also xyflow) on 2026-08-23;
+   every colour is one of ours. See the note at the top of workflow-canvas.tsx
+   for why the palette deliberately did not come across with the geometry. */
+
+.wf-canvas {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-subtle);
+  border-radius: var(--radius-lg, 10px);
+  overflow: hidden;
+}
+
+/* xyflow paints its own light-mode surface behind the graph. */
+.wf-canvas .react-flow__renderer,
+.wf-canvas .react-flow {
+  background: transparent;
+}
+
+.wf-canvas .wf-bg {
+  color: var(--border-subtle);
+}
+
+/* ── The lane frame ───────────────────────────────────────────────────────
+   24px and 2.5px are Flora's, and the 2.5px matters: at 2px the frame reads as
+   another card border, and at 3px it reads as a container you can open.
+
+   THE FILL IS A WASH, AND THAT IS NOT DECORATION. xyflow paints every edge in
+   one SVG layer UNDER the node layer, so an opaque frame does not sit behind
+   its lane — it sits on top of every connector in it. This shipped opaque for
+   one render and the graph came out as rows of loose chips with no arrows at
+   all, which is why Flora's frame is `rgba(94,247,120,.04)` rather than a
+   surface colour. Ours is the same idea in our own ink. */
+.wf-frame {
+  width: 100%;
+  height: 100%;
+  border: 2.5px solid var(--border-default);
+  border-radius: 24px;
+  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
+  pointer-events: none;
+  position: relative;
+}
+
+/* THE CHIP CLEARS THE FRAME. `100% + 8px` above the top-left corner, which is
+   Flora's `--label-offset` exactly. On the border it reads as a badge stuck to
+   the box; clear of it, it reads as the box's name. */
+.wf-frame-chip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translateY(calc(-100% - 8px));
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 8px;
+  font-size: var(--font-size-2xs, 11px);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: #fff;
+  white-space: nowrap;
+}
+
+/* ── A stage ──────────────────────────────────────────────────────────────
+   10px, because radius in this product is 10px at every step and a 24px chip
+   inside a 24px frame would read as the same object twice. */
+.wf-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-base);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm, 13px);
+  font-weight: 500;
+  box-shadow: var(--shadow-sm);
+  transition:
+    box-shadow var(--motion-fast) ease,
+    border-color var(--motion-fast) ease;
+}
+
+.wf-stage-start {
+  color: var(--text-secondary);
+}
+.wf-stage-live {
+  border-color: color-mix(in srgb, var(--brand-500) 34%, transparent);
+  background: color-mix(in srgb, var(--brand-500) 8%, var(--bg-base));
+  color: var(--brand-500);
+}
+.wf-stage-good {
+  border-color: color-mix(in srgb, var(--success) 34%, transparent);
+  background: var(--success-bg);
+  color: var(--success);
+}
+.wf-stage-end {
+  background: var(--bg-muted);
+  color: var(--text-tertiary);
+}
+.wf-stage-exit {
+  border-color: color-mix(in srgb, var(--error) 30%, transparent);
+  background: var(--error-bg);
+  color: var(--error);
+}
+
+/* SELECTION IS A RING, NOT A RECOLOUR — Flora's rule, and the right one: the
+   stage colours already mean something, so tinting a selected node would make
+   it claim a state it is not in. */
+.wf-stage.is-selected {
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--brand-500) 55%, transparent),
+    var(--shadow-md);
+}
+
+/* The attachment point, never a control. Nothing on this canvas connects. */
+.wf-canvas .wf-handle {
+  opacity: 0;
+  pointer-events: none;
+  border: none;
+  background: transparent;
+  width: 8px;
+  height: 8px;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ── Edges ────────────────────────────────────────────────────────────────
+   A hairline and no arrowhead. The curve leaves one node's right edge and
+   arrives at the next one's left, which states the direction without a glyph
+   at every junction — sixteen arrowheads on one screen is a lot of ink for a
+   fact the layout already carries.
+
+   NOT `--border-strong`, which is what this reached for first and which is
+   white at 11% — a fine edge for a 1px rule between two rows of a table, and
+   completely invisible as a 1.25px line crossing 100px of empty dark canvas.
+   The first render of this had no connectors at all and the graph read as a
+   row of loose chips. A connector is the content here, not chrome. */
+.wf-canvas .wf-edge .react-flow__edge-path {
+  stroke: color-mix(in srgb, var(--text-tertiary) 70%, transparent);
+  stroke-width: 1.25px;
+}
+
+/* An escape hatch is drawn quieter than the path it leaves: it is a thing that
+   CAN happen, not a step anyone is working towards. */
+.wf-canvas .wf-edge.is-exit .react-flow__edge-path {
+  stroke: color-mix(in srgb, var(--error) 40%, transparent);
+  stroke-dasharray: 3 4;
+}
+
+.wf-canvas .react-flow__edge-text {
+  font-family: inherit;
+}
+
+/* xyflow's attribution sits on our sunken ground, where its stock white is a
+   bright rectangle in the corner. */
+.wf-canvas .react-flow__attribution {
+  background: transparent;
+}
+.wf-canvas .react-flow__attribution a {
+  color: var(--text-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wf-stage {
+    transition: none;
+  }
+}

package/dist/templates/workflow-canvas.d.ts

@@ -0,0 +1,14 @@
+import '@xyflow/react/dist/style.css';
+import type { WorkflowShape } from '@withpotter/lib/intents/workflow-shape';
+import './workflow-canvas.css';
+/**
+ * The canvas.
+ *
+ * `fitView` on mount rather than a chosen zoom: the graphs are different widths
+ * per archetype — a shop's status lane is five stages and a bookings club's is
+ * four — so any fixed zoom is right for one of them and wrong for the rest.
+ */
+export declare function WorkflowCanvas({ shape, className, }: {
+    shape: WorkflowShape;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/templates/workflow-canvas.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import {
+  Background,
+  BackgroundVariant,
+  Handle,
+  Position,
+  ReactFlow
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import "./workflow-canvas.css";
+const NODE_W = 152;
+const NODE_H = 40;
+const COL_GAP = 104;
+const ROW_GAP = 30;
+const FRAME_PAD = 22;
+const LANE_GAP = 78;
+const LANE_TONE = {
+  status: "var(--brand-500)",
+  money: "var(--success)",
+  fulfilment: "var(--info)"
+};
+const STAGE_CLASS = {
+  start: "wf-stage-start",
+  live: "wf-stage-live",
+  good: "wf-stage-good",
+  end: "wf-stage-end",
+  exit: "wf-stage-exit"
+};
+function StageNode({ data, selected }) {
+  const d = data;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `wf-stage ${STAGE_CLASS[d.tone]}${selected ? " is-selected" : ""}`,
+      style: { width: NODE_W, height: NODE_H },
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "wf-handle" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: d.label }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "wf-handle" })
+      ]
+    }
+  );
+}
+function FrameNode({ data }) {
+  const d = data;
+  return /* @__PURE__ */ jsx("div", { className: "wf-frame", children: /* @__PURE__ */ jsx("span", { className: "wf-frame-chip", style: { background: d.tone }, children: d.label }) });
+}
+const NODE_TYPES = { stage: StageNode, frame: FrameNode };
+function layout(shape) {
+  const nodes = [];
+  const edges = [];
+  let laneY = 0;
+  for (const lane of shape.lanes) {
+    const forward = lane.stages.filter((s) => s.tone !== "exit");
+    const exits = lane.stages.filter((s) => s.tone === "exit");
+    const colFor = /* @__PURE__ */ new Map();
+    forward.forEach((s, i) => colFor.set(s.key, i));
+    const rows = exits.length > 0 ? 2 : 1;
+    const frameW = Math.max(1, forward.length) * (NODE_W + COL_GAP) - COL_GAP + FRAME_PAD * 2;
+    const frameH = rows * NODE_H + (rows - 1) * ROW_GAP + FRAME_PAD * 2;
+    nodes.push({
+      id: `frame-${lane.key}`,
+      type: "frame",
+      position: { x: -FRAME_PAD, y: laneY },
+      data: { label: lane.label, tone: LANE_TONE[lane.key] },
+      draggable: false,
+      selectable: false,
+      style: { width: frameW, height: frameH },
+      zIndex: 0
+    });
+    forward.forEach((s, i) => {
+      nodes.push({
+        id: `${lane.key}:${s.key}`,
+        type: "stage",
+        position: { x: i * (NODE_W + COL_GAP), y: laneY + FRAME_PAD },
+        data: { label: s.label, tone: s.tone },
+        draggable: false,
+        zIndex: 1
+      });
+    });
+    exits.forEach((s, i) => {
+      const from = lane.edges.find((e) => e.to === s.key)?.from;
+      const col = (from === void 0 ? void 0 : colFor.get(from)) ?? i;
+      nodes.push({
+        id: `${lane.key}:${s.key}`,
+        type: "stage",
+        position: {
+          x: col * (NODE_W + COL_GAP),
+          y: laneY + FRAME_PAD + NODE_H + ROW_GAP
+        },
+        data: { label: s.label, tone: s.tone },
+        draggable: false,
+        zIndex: 1
+      });
+    });
+    for (const e of lane.edges) {
+      const source = `${lane.key}:${e.from}`;
+      const target = `${lane.key}:${e.to}`;
+      if (!nodes.some((n) => n.id === source)) continue;
+      if (!nodes.some((n) => n.id === target)) continue;
+      edges.push({
+        id: `${lane.key}:${e.from}->${e.to}`,
+        source,
+        target,
+        type: "default",
+        label: e.verb,
+        className: e.exit ? "wf-edge is-exit" : "wf-edge",
+        /**
+         * THE LABEL NEEDS ITS OWN GROUND. Without one the connector runs
+         * straight through the words and every verb on the canvas reads as
+         * struck through — "Mark confirmed" with a line through it, which is
+         * the opposite of what a verb on an arrow is meant to say. xyflow draws
+         * the label at the path's midpoint and does not part the stroke for it.
+         */
+        labelShowBg: true,
+        labelBgStyle: { fill: "var(--bg-subtle)", stroke: "none" },
+        labelBgPadding: [6, 2],
+        labelBgBorderRadius: 4,
+        labelStyle: {
+          fill: "var(--text-tertiary)",
+          fontSize: 11
+        }
+      });
+    }
+    laneY += frameH + LANE_GAP;
+  }
+  return { nodes, edges };
+}
+function WorkflowCanvas({
+  shape,
+  className
+}) {
+  const { nodes, edges } = useMemo(() => layout(shape), [shape]);
+  return /* @__PURE__ */ jsx("div", { className: `wf-canvas ${className ?? ""}`, children: /* @__PURE__ */ jsx(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes: NODE_TYPES,
+      fitView: true,
+      fitViewOptions: { padding: 0.18, maxZoom: 1 },
+      minZoom: 0.3,
+      maxZoom: 1.6,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      edgesFocusable: false,
+      proOptions: { hideAttribution: false },
+      zoomOnScroll: false,
+      panOnScroll: true,
+      preventScrolling: false,
+      children: /* @__PURE__ */ jsx(
+        Background,
+        {
+          variant: BackgroundVariant.Dots,
+          gap: 22,
+          size: 1,
+          className: "wf-bg"
+        }
+      )
+    }
+  ) });
+}
+export {
+  WorkflowCanvas
+};
+//# sourceMappingURL=workflow-canvas.js.map

package/dist/templates/workflow-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/workflow-canvas.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport {\n  Background,\n  BackgroundVariant,\n  Handle,\n  Position,\n  ReactFlow,\n  type Edge,\n  type Node,\n  type NodeProps,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport type {\n  StageTone,\n  WorkflowLane,\n  WorkflowShape,\n} from '@withpotter/lib/intents/workflow-shape';\nimport './workflow-canvas.css';\n\n/**\n * The archetype's workflow, on a real canvas.\n *\n * xyflow was ALREADY a dependency — `@xyflow/react@12.11.2`, in package.json,\n * installed, and imported by nothing at all. Which is this codebase's own\n * recurring failure written in a lockfile: a capability declared and never\n * connected. It is connected now.\n *\n * THE ANATOMY IS FLORA'S, MEASURED. Their technique canvas is xyflow too, and\n * the parts worth copying are the ones a screenshot could not have given:\n *\n *   · a group frame at 24px radius with a 2.5px border and a ~4% wash\n *   · its label chip lifted CLEAR of the frame — `100% + 8px` above the\n *     top-left corner — rather than sitting on the border, which is what makes\n *     it read as a tab on the group instead of a badge stuck to it\n *   · bezier edges with control points at the horizontal midpoint, hairline,\n *     no arrowheads: the port and the curve carry the direction\n *   · selection as a ring, never a recolour\n *\n * THE PALETTE IS NOT THEIRS, and that is deliberate. Flora colours by node\n * KIND — grass for outputs, purple for inputs — which is a category colour, and\n * this app has an argued position against those (see `step-shape.tsx`: colour\n * lands on the glyph, never on the label, the border or the fill). So the lane\n * frames here are neutral and the colour lands on the small chip and on the\n * stage tone, which is what our own `orderDisplay.statusColors` already means.\n * Amber stays out of it entirely: this product reserves amber for \"this needs\n * you\", and a starting state does not.\n *\n * NOTHING IS EDITABLE. Pan, zoom and select are on because they cost nothing\n * and a wide graph needs them; dragging a node is off, because the positions\n * carry meaning — they are the archetype's order — and letting someone shuffle\n * them would produce a picture that is no longer true. Flora's read-only canvas\n * makes exactly the same call.\n */\n\nconst NODE_W = 152;\nconst NODE_H = 40;\nconst COL_GAP = 104;\nconst ROW_GAP = 30;\nconst FRAME_PAD = 22;\nconst LANE_GAP = 78;\n\n/** The chip's own hue per lane. The frame stays neutral. */\nconst LANE_TONE: Record<WorkflowLane['key'], string> = {\n  status: 'var(--brand-500)',\n  money: 'var(--success)',\n  fulfilment: 'var(--info)',\n};\n\nconst STAGE_CLASS: Record<StageTone, string> = {\n  start: 'wf-stage-start',\n  live: 'wf-stage-live',\n  good: 'wf-stage-good',\n  end: 'wf-stage-end',\n  exit: 'wf-stage-exit',\n};\n\ntype StageData = { label: string; tone: StageTone };\ntype FrameData = { label: string; tone: string };\n\n/**\n * A stage.\n *\n * The handles are real xyflow handles and they are invisible — same as Flora's,\n * and for the same reason: they are where an edge attaches, not something a\n * merchant is meant to see or grab. Nothing on this canvas connects anything.\n */\nfunction StageNode({ data, selected }: NodeProps) {\n  const d = data as StageData;\n  return (\n    <div\n      className={`wf-stage ${STAGE_CLASS[d.tone]}${selected ? ' is-selected' : ''}`}\n      style={{ width: NODE_W, height: NODE_H }}\n    >\n      <Handle type=\"target\" position={Position.Left} className=\"wf-handle\" />\n      <span className=\"truncate\">{d.label}</span>\n      <Handle type=\"source\" position={Position.Right} className=\"wf-handle\" />\n    </div>\n  );\n}\n\n/**\n * The lane's frame, and its chip.\n *\n * A node rather than an xyflow group, because a group would make the stages its\n * children and their coordinates relative — which buys nothing here (nothing\n * moves) and costs the straightforward absolute layout below. Flora does the\n * same: their frames are `techniqueViewLabel` nodes with `pointer-events: none`,\n * sitting behind everything.\n */\nfunction FrameNode({ data }: NodeProps) {\n  const d = data as FrameData;\n  return (\n    <div className=\"wf-frame\">\n      <span className=\"wf-frame-chip\" style={{ background: d.tone }}>\n        {d.label}\n      </span>\n    </div>\n  );\n}\n\nconst NODE_TYPES = { stage: StageNode, frame: FrameNode };\n\n/**\n * Where everything sits.\n *\n * Lanes stack; stages run left to right in the order the archetype's own\n * transition map produced them. Exits drop to a second row inside the lane, so\n * the forward path stays one readable line and \"this can also be cancelled\"\n * does not interrupt it.\n */\nfunction layout(shape: WorkflowShape): { nodes: Node[]; edges: Edge[] } {\n  const nodes: Node[] = [];\n  const edges: Edge[] = [];\n  let laneY = 0;\n\n  for (const lane of shape.lanes) {\n    const forward = lane.stages.filter((s) => s.tone !== 'exit');\n    const exits = lane.stages.filter((s) => s.tone === 'exit');\n    const colFor = new Map<string, number>();\n    forward.forEach((s, i) => colFor.set(s.key, i));\n\n    const rows = exits.length > 0 ? 2 : 1;\n    const frameW =\n      Math.max(1, forward.length) * (NODE_W + COL_GAP) -\n      COL_GAP +\n      FRAME_PAD * 2;\n    const frameH = rows * NODE_H + (rows - 1) * ROW_GAP + FRAME_PAD * 2;\n\n    nodes.push({\n      id: `frame-${lane.key}`,\n      type: 'frame',\n      position: { x: -FRAME_PAD, y: laneY },\n      data: { label: lane.label, tone: LANE_TONE[lane.key] },\n      draggable: false,\n      selectable: false,\n      style: { width: frameW, height: frameH },\n      zIndex: 0,\n    });\n\n    forward.forEach((s, i) => {\n      nodes.push({\n        id: `${lane.key}:${s.key}`,\n        type: 'stage',\n        position: { x: i * (NODE_W + COL_GAP), y: laneY + FRAME_PAD },\n        data: { label: s.label, tone: s.tone },\n        draggable: false,\n        zIndex: 1,\n      });\n    });\n\n    // Exits sit under the stage they leave from, so the drop reads as \"from\n    // here\" rather than as a row of endings parked at the end of the lane.\n    exits.forEach((s, i) => {\n      const from = lane.edges.find((e) => e.to === s.key)?.from;\n      const col = (from === undefined ? undefined : colFor.get(from)) ?? i;\n      nodes.push({\n        id: `${lane.key}:${s.key}`,\n        type: 'stage',\n        position: {\n          x: col * (NODE_W + COL_GAP),\n          y: laneY + FRAME_PAD + NODE_H + ROW_GAP,\n        },\n        data: { label: s.label, tone: s.tone },\n        draggable: false,\n        zIndex: 1,\n      });\n    });\n\n    for (const e of lane.edges) {\n      const source = `${lane.key}:${e.from}`;\n      const target = `${lane.key}:${e.to}`;\n      if (!nodes.some((n) => n.id === source)) continue;\n      if (!nodes.some((n) => n.id === target)) continue;\n      edges.push({\n        id: `${lane.key}:${e.from}->${e.to}`,\n        source,\n        target,\n        type: 'default',\n        label: e.verb,\n        className: e.exit ? 'wf-edge is-exit' : 'wf-edge',\n        /**\n         * THE LABEL NEEDS ITS OWN GROUND. Without one the connector runs\n         * straight through the words and every verb on the canvas reads as\n         * struck through — \"Mark confirmed\" with a line through it, which is\n         * the opposite of what a verb on an arrow is meant to say. xyflow draws\n         * the label at the path's midpoint and does not part the stroke for it.\n         */\n        labelShowBg: true,\n        labelBgStyle: { fill: 'var(--bg-subtle)', stroke: 'none' },\n        labelBgPadding: [6, 2],\n        labelBgBorderRadius: 4,\n        labelStyle: {\n          fill: 'var(--text-tertiary)',\n          fontSize: 11,\n        },\n      });\n    }\n\n    laneY += frameH + LANE_GAP;\n  }\n\n  return { nodes, edges };\n}\n\n/**\n * The canvas.\n *\n * `fitView` on mount rather than a chosen zoom: the graphs are different widths\n * per archetype — a shop's status lane is five stages and a bookings club's is\n * four — so any fixed zoom is right for one of them and wrong for the rest.\n */\nexport function WorkflowCanvas({\n  shape,\n  className,\n}: {\n  shape: WorkflowShape;\n  className?: string;\n}) {\n  const { nodes, edges } = useMemo(() => layout(shape), [shape]);\n\n  return (\n    <div className={`wf-canvas ${className ?? ''}`}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={NODE_TYPES}\n        fitView\n        fitViewOptions={{ padding: 0.18, maxZoom: 1 }}\n        minZoom={0.3}\n        maxZoom={1.6}\n        nodesDraggable={false}\n        nodesConnectable={false}\n        edgesFocusable={false}\n        proOptions={{ hideAttribution: false }}\n        // A canvas inside a page that also scrolls must not eat the wheel:\n        // pinch and the zoom controls are the way in, and a merchant scrolling\n        // past this should not find the page stuck while the graph zooms.\n        zoomOnScroll={false}\n        panOnScroll\n        preventScrolling={false}\n      >\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={22}\n          size={1}\n          className=\"wf-bg\"\n        />\n      </ReactFlow>\n    </div>\n  );\n}\n"],"mappings":";AA2FI,SAIE,KAJF;AAzFJ,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,OAAO;AAMP,OAAO;AAqCP,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,UAAU;AAChB,MAAM,YAAY;AAClB,MAAM,WAAW;AAGjB,MAAM,YAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AACd;AAEA,MAAM,cAAyC;AAAA,EAC7C,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAYA,SAAS,UAAU,EAAE,MAAM,SAAS,GAAc;AAChD,QAAM,IAAI;AACV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,YAAY,YAAY,EAAE,IAAI,CAAC,GAAG,WAAW,iBAAiB,EAAE;AAAA,MAC3E,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MAEvC;AAAA,4BAAC,UAAO,MAAK,UAAS,UAAU,SAAS,MAAM,WAAU,aAAY;AAAA,QACrE,oBAAC,UAAK,WAAU,YAAY,YAAE,OAAM;AAAA,QACpC,oBAAC,UAAO,MAAK,UAAS,UAAU,SAAS,OAAO,WAAU,aAAY;AAAA;AAAA;AAAA,EACxE;AAEJ;AAWA,SAAS,UAAU,EAAE,KAAK,GAAc;AACtC,QAAM,IAAI;AACV,SACE,oBAAC,SAAI,WAAU,YACb,8BAAC,UAAK,WAAU,iBAAgB,OAAO,EAAE,YAAY,EAAE,KAAK,GACzD,YAAE,OACL,GACF;AAEJ;AAEA,MAAM,aAAa,EAAE,OAAO,WAAW,OAAO,UAAU;AAUxD,SAAS,OAAO,OAAwD;AACtE,QAAM,QAAgB,CAAC;AACvB,QAAM,QAAgB,CAAC;AACvB,MAAI,QAAQ;AAEZ,aAAW,QAAQ,MAAM,OAAO;AAC9B,UAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM;AAC3D,UAAM,QAAQ,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM;AACzD,UAAM,SAAS,oBAAI,IAAoB;AACvC,YAAQ,QAAQ,CAAC,GAAG,MAAM,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC;AAE9C,UAAM,OAAO,MAAM,SAAS,IAAI,IAAI;AACpC,UAAM,SACJ,KAAK,IAAI,GAAG,QAAQ,MAAM,KAAK,SAAS,WACxC,UACA,YAAY;AACd,UAAM,SAAS,OAAO,UAAU,OAAO,KAAK,UAAU,YAAY;AAElE,UAAM,KAAK;AAAA,MACT,IAAI,SAAS,KAAK,GAAG;AAAA,MACrB,MAAM;AAAA,MACN,UAAU,EAAE,GAAG,CAAC,WAAW,GAAG,MAAM;AAAA,MACpC,MAAM,EAAE,OAAO,KAAK,OAAO,MAAM,UAAU,KAAK,GAAG,EAAE;AAAA,MACrD,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MACvC,QAAQ;AAAA,IACV,CAAC;AAED,YAAQ,QAAQ,CAAC,GAAG,MAAM;AACxB,YAAM,KAAK;AAAA,QACT,IAAI,GAAG,KAAK,GAAG,IAAI,EAAE,GAAG;AAAA,QACxB,MAAM;AAAA,QACN,UAAU,EAAE,GAAG,KAAK,SAAS,UAAU,GAAG,QAAQ,UAAU;AAAA,QAC5D,MAAM,EAAE,OAAO,EAAE,OAAO,MAAM,EAAE,KAAK;AAAA,QACrC,WAAW;AAAA,QACX,QAAQ;AAAA,MACV,CAAC;AAAA,IACH,CAAC;AAID,UAAM,QAAQ,CAAC,GAAG,MAAM;AACtB,YAAM,OAAO,KAAK,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG;AACrD,YAAM,OAAO,SAAS,SAAY,SAAY,OAAO,IAAI,IAAI,MAAM;AACnE,YAAM,KAAK;AAAA,QACT,IAAI,GAAG,KAAK,GAAG,IAAI,EAAE,GAAG;AAAA,QACxB,MAAM;AAAA,QACN,UAAU;AAAA,UACR,GAAG,OAAO,SAAS;AAAA,UACnB,GAAG,QAAQ,YAAY,SAAS;AAAA,QAClC;AAAA,QACA,MAAM,EAAE,OAAO,EAAE,OAAO,MAAM,EAAE,KAAK;AAAA,QACrC,WAAW;AAAA,QACX,QAAQ;AAAA,MACV,CAAC;AAAA,IACH,CAAC;AAED,eAAW,KAAK,KAAK,OAAO;AAC1B,YAAM,SAAS,GAAG,KAAK,GAAG,IAAI,EAAE,IAAI;AACpC,YAAM,SAAS,GAAG,KAAK,GAAG,IAAI,EAAE,EAAE;AAClC,UAAI,CAAC,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,MAAM,EAAG;AACzC,UAAI,CAAC,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,MAAM,EAAG;AACzC,YAAM,KAAK;AAAA,QACT,IAAI,GAAG,KAAK,GAAG,IAAI,EAAE,IAAI,KAAK,EAAE,EAAE;AAAA,QAClC;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAO,EAAE;AAAA,QACT,WAAW,EAAE,OAAO,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQxC,aAAa;AAAA,QACb,cAAc,EAAE,MAAM,oBAAoB,QAAQ,OAAO;AAAA,QACzD,gBAAgB,CAAC,GAAG,CAAC;AAAA,QACrB,qBAAqB;AAAA,QACrB,YAAY;AAAA,UACV,MAAM;AAAA,UACN,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH;AAEA,aAAS,SAAS;AAAA,EACpB;AAEA,SAAO,EAAE,OAAO,MAAM;AACxB;AASO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,MAAM,OAAO,KAAK,GAAG,CAAC,KAAK,CAAC;AAE7D,SACE,oBAAC,SAAI,WAAW,aAAa,aAAa,EAAE,IAC1C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAO;AAAA,MACP,gBAAgB,EAAE,SAAS,MAAM,SAAS,EAAE;AAAA,MAC5C,SAAS;AAAA,MACT,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,YAAY,EAAE,iBAAiB,MAAM;AAAA,MAIrC,cAAc;AAAA,MACd,aAAW;AAAA,MACX,kBAAkB;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,kBAAkB;AAAA,UAC3B,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/viewer-banner.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Persistent banner shown to viewers so they understand why Save/Delete
+ * buttons return "You do not have permission…" errors from the backend.
+ * Renders nothing for owners/managers/staff.
+ */
+export declare function ViewerBanner(): import("react").JSX.Element | null;

package/dist/viewer-banner.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye } from "lucide-react";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+function ViewerBanner() {
+  const { loading, isViewer } = usePermissions();
+  if (loading || !isViewer) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start gap-3 px-4 py-3 bg-[var(--info-bg)] border border-[var(--info)]/20 rounded-md", children: [
+    /* @__PURE__ */ jsx(Eye, { className: "size-5 text-[var(--info)] mt-0.5 shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--info)]", children: "View-only access" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--info)] mt-0.5", children: "You've been invited as a viewer. You can browse the dashboard but cannot add, edit, or delete content. Ask a business owner to upgrade your role if you need write access." })
+    ] })
+  ] });
+}
+export {
+  ViewerBanner
+};
+//# sourceMappingURL=viewer-banner.js.map

package/dist/viewer-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/viewer-banner.tsx"],"sourcesContent":["'use client';\n\nimport { Eye } from 'lucide-react';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\n\n/**\n * Persistent banner shown to viewers so they understand why Save/Delete\n * buttons return \"You do not have permission…\" errors from the backend.\n * Renders nothing for owners/managers/staff.\n */\nexport function ViewerBanner() {\n  const { loading, isViewer } = usePermissions();\n\n  if (loading || !isViewer) return null;\n\n  return (\n    <div className=\"mb-4 flex items-start gap-3 px-4 py-3 bg-[var(--info-bg)] border border-[var(--info)]/20 rounded-md\">\n      <Eye className=\"size-5 text-[var(--info)] mt-0.5 shrink-0\" />\n      <div className=\"flex-1\">\n        <p className=\"text-sm font-medium text-[var(--info)]\">\n          View-only access\n        </p>\n        <p className=\"text-sm text-[var(--info)] mt-0.5\">\n          You&apos;ve been invited as a viewer. You can browse the dashboard but\n          cannot add, edit, or delete content. Ask a business owner to upgrade\n          your role if you need write access.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAiBM,cACA,YADA;AAfN,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAOxB,SAAS,eAAe;AAC7B,QAAM,EAAE,SAAS,SAAS,IAAI,eAAe;AAE7C,MAAI,WAAW,CAAC,SAAU,QAAO;AAEjC,SACE,qBAAC,SAAI,WAAU,uGACb;AAAA,wBAAC,OAAI,WAAU,6CAA4C;AAAA,IAC3D,qBAAC,SAAI,WAAU,UACb;AAAA,0BAAC,OAAE,WAAU,0CAAyC,8BAEtD;AAAA,MACA,oBAAC,OAAE,WAAU,qCAAoC,wLAIjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/voice/voice-composer.d.ts

@@ -0,0 +1,47 @@
+import { useVoiceRecorder } from '@withpotter/hooks/use-voice-recorder';
+export type Recorder = ReturnType<typeof useVoiceRecorder>;
+/**
+ * The recorder lives in the widget, not in here.
+ *
+ * Recording has to survive the dialog closing — while you are talking, the
+ * sheet gets out of the way so you can see the screen you are describing, and
+ * Radix unmounts dialog content when it closes. If the hook lived in this
+ * component, that unmount would run its cleanup and kill the microphone
+ * mid-sentence. So the hook is owned above and these are views over it.
+ */
+interface VoiceComposerProps {
+    recorder: Recorder;
+    disabled?: boolean;
+    /**
+     * The line under "Record a voice note". Defaults to the sheet's wording,
+     * which promises a reply — pass something truthful anywhere nobody is going
+     * to write back. See `IdleRow`.
+     */
+    hint?: string;
+}
+/** The panel form: sits under the message box inside the sheet. */
+export declare function VoiceComposer({ recorder, disabled, hint, }: VoiceComposerProps): import("react").JSX.Element | null;
+/**
+ * The docked form: a bar pinned to the bottom of the viewport while recording,
+ * with the sheet closed behind it.
+ *
+ * A modal is the right container for composing a written message and the wrong
+ * one for recording. The most useful voice note a merchant sends is the one
+ * recorded while looking at the thing that is broken — "this order won't let
+ * me refund it" is a different message when the order is on screen. A dialog
+ * covers exactly the context being described.
+ */
+export declare function VoiceDock({ recorder }: {
+    recorder: Recorder;
+}): import("react").JSX.Element;
+export declare function RecordingRow({ seconds, maxSeconds, peaksRef, onStop, onDiscard, stopping, }: {
+    seconds: number;
+    maxSeconds: number;
+    peaksRef: {
+        current: number[];
+    };
+    onStop: () => void;
+    onDiscard: () => void;
+    stopping: boolean;
+}): import("react").JSX.Element;
+export {};