@lotics/ui 4.2.0 → 4.4.0

package/AGENTS.md

@@ -33,7 +33,8 @@ Pick by capability, not by name. (→ the source file for the API.)
   (`renderOptionContent={(o) => <OptionBadge value={o} />}`).
 - **Pick member(s)** — `MemberSelect` (a `Picker` that renders each option as a `MemberChip`,
   single or multi) — the ready member picker; pass it the roster (`members={useMembers().members}`).
-  Don't re-wire `Picker` + `renderOptionContent` + a directory by hand.
+  Don't re-wire `Picker` + `renderOptionContent` + a directory by hand. To edit a `select_member`
+  field IN PLACE (chip at rest → picker on click) use its inline-edit twin `InlineMemberSelect`.
 - **A person / member (display)** — `MemberChip` (avatar + name + optional secondary line) — the
   ONE way to show a member inline: a picker option, an assignee, a `select_member` value. Pure:
   resolve the member from your directory (`useMembers`) and pass `name` / `image`; never hand-roll
@@ -49,7 +50,8 @@ Pick by capability, not by name. (→ the source file for the API.)
   `Checkbox`, `Switch`, `RadioPicker`; dates via `DatePicker` / `DateRangeFilterField`, times
   via `TimePicker`.
 - **Edit a record's fields in place** — the `Inline*` family: `InlineTextInput` ·
-  `InlineNumberInput` · `InlineSelect` · `InlineDatePicker` · `InlineTimePicker` (see §Data entry).
+  `InlineNumberInput` · `InlineSelect` · `InlineMemberSelect` · `InlineDatePicker` ·
+  `InlineTimePicker` (see §Data entry).
 - **Tabular data** — `Table` (columns defined once; sortable headers via `SortHeader`; paired
   with `Pagination`). Never an HTML `<table>` or a `.map` of rows.
 - **Numbers & charts** — `KPIStrip` / `KPICard` / `Metric` (headline figures), `TrendChip`
@@ -73,6 +75,12 @@ Pick by capability, not by name. (→ the source file for the API.)
 - **Specialized work surfaces** — `ScanField` (scan/verify), `StepList` (guided run),
   `RemainderMeter` + `AllocationRow` (allocation), `Timeline`, `Calendar`, `Gantt`,
   `comments_thread`.
+- **AI surfaces** — `PromptField` (the NL command that triggers agent work — NOT a chat),
+  `AgentRun` (the live streaming work feed) + `AgentProgress` (its compact, floating, expandable
+  form — a composer's "working" state), `Suggestion` (review-for-approval of a proposal)
+  + `Confidence`, `AssistedField` (a confirmable AI estimate), `ChangeReview` (before→after for an
+  agent-proposed edit — whole-set OR 1-by-1), `Clarify` (the agent asks back — a question + quick
+  replies), `Sources` (provenance chips for AI output). See §AI workflows.
 
 ---
 
@@ -101,7 +109,9 @@ hover tints it (no pencil — that shifts), click swaps the input in **at the sa
 reflow, the whole point), and it commits on blur (Enter saves, Escape reverts) or via
 `controls="buttons"` (✓ primary / ✕). One per type — `InlineTextInput` · `InlineNumberInput`
 (`format` for currency/units) · `InlineSelect` (plain options OR `renderOptionContent`; floats a
-`Picker` menu in a popover so the row never grows) · `InlineDatePicker` · `InlineTimePicker` — all
+`Picker` menu in a popover so the row never grows; `renderValue` renders the RESTING value as a
+node — a colored `OptionBadge`, not just a label) · `InlineMemberSelect` (a `MemberChip` at rest →
+member picker; the inline twin of `MemberSelect`) · `InlineDatePicker` · `InlineTimePicker` — all
 on `useInlineEdit` + `InlineEditView` (custom inputs join via those). `onSave` is async: the
 saving spinner sits INSIDE the control (never a sibling — that reflows); an error shows inline
 without losing the edit. Pair with `DetailRow` (label left, inline value right). Not every field
@@ -198,6 +208,57 @@ the "this is a gate" framing.
 
 ---
 
+## AI workflows — AI proposes, the human decides
+
+The AI surfaces share ONE law: the agent never commits — it **proposes**, the human
+accepts / edits / dismisses, the deterministic app applies. The agent owns judgment
+(recognition, estimation, intent→parameters); the app owns geometry, math, and the write.
+Compose the surfaces as a loop, and reach for the right one by job:
+
+- **Command** — `PromptField`, NOT a chat composer. A prompt TRIGGERS agent work (Enter sends);
+  while it runs the field locks and the send spins. The imperative "do this" surface.
+- **Show the work** — `AgentRun`: a live feed of the agent's steps (reasoning, tool calls) on a
+  spine, the running node pulsing violet. Transparent work, NEVER a bare spinner — the
+  intelligence is legible. On a canvas/composer app reach for `AgentProgress` — `AgentRun`
+  collapsed into a floating pill (avatar + current step) that EXPANDS on press; the composer
+  morphs into it while running, and reveals again when done.
+- **Review before apply** — `Suggestion` (a NEW proposed value → accept / edit / dismiss, carrying
+  a `Confidence` chip) or `ChangeReview` (an EDIT to existing state → before→after, apply / discard).
+  For a shortlist, stack ranked `Suggestion`s (highest confidence first). `ChangeReview` also has a
+  **1-by-1** mode — pass `onAcceptItem`/`onRejectItem` and each suggested change gets its own ✓/✕,
+  Apply committing only the accepted set (the chat copilot). Nothing auto-applies.
+- **Confirmable estimates** — `AssistedField`: an AI-prefilled value reads as a TINTED ESTIMATE
+  until a person confirms or overrides it — provenance stays visible. Stack several with one
+  form-level "Confirm all".
+- **Ask back** — `Clarify`: when the agent is unsure, it asks a question with quick-reply options
+  and PAUSES, instead of guessing wrong. Human-in-the-loop input mid-run.
+- **Provenance** — `Sources`: openable chips saying where the output came FROM (records, a
+  document + page, a table), under any answer / summary / extracted value. Makes AI output
+  verifiable — show it on anything produced from data the agent read.
+- **Session, not chat** — the outputs accrue as a history the user can CLEAR ("New session"); the
+  APP owns the evolving state, each run is a discrete task. (The agent may re-read the session for
+  "make it a bit less", but it's a run LOG, not a conversation transcript — that's why it's not a
+  chat.)
+
+Four shapes prove the range — pick by whether the work is a living artifact, a conversation, a
+single pass, or generated prose:
+- **Canvas** (`tpl_dieline`) — the page IS the design, a FLOATING composer at the bottom that
+  morphs into `AgentProgress` while running; the centre goes empty → processing → result, and a
+  prompt re-flows the design in place. For a design/document the user shapes over time.
+- **Chat** (`tpl_assistant`) — a conversation where the agent's answer carries suggested edits the
+  user approves/rejects **1-by-1** (`ChangeReview` per-item), applying only the accepted set. An AI
+  copilot that proposes changes to a record and never commits on its own.
+- **One-shot** (`tpl_extract`) — document → stream → confirm each extracted field → submit. A
+  data-capture pass with no iteration.
+- **Draft** (`tpl_draft`) — the agent writes a first draft from context; the OUTPUT itself streams
+  (the text fills in live), then becomes an editable surface the human refines before sending.
+  Tone/length steer it. For generated prose — a reply, a quote, a listing.
+
+The AI accent is **violet** — distinct from the purpose accents (blue=pipeline, emerald=money), it
+marks what came from the agent.
+
+---
+
 ## Composition grammar
 
 - **Canvas**: full-bleed `colors.zinc[50]` ScrollView; content column `maxWidth` 880–1040,
@@ -340,6 +401,12 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
   `tpl_timeline` (audit feed).
 - **Planning & time** — `tpl_calendar` · `tpl_attendance` · `tpl_shifts`.
 - **Administration** — `tpl_settings`.
+- **AI workflows** — `tpl_dieline` (the design CANVAS: photo → stream → the dieline reveals at
+  centre, the floating composer morphing into `AgentProgress`; prompt to iterate) · `tpl_assistant`
+  (a chat copilot: the agent's answer carries suggested edits approved/rejected 1-by-1) ·
+  `tpl_extract` (one-shot extract-&-confirm: document → stream → confirm each field → submit) ·
+  `tpl_draft` (draft generation: context → the reply text streams into an editable surface →
+  refine → send; tone/length steer it).
 
 ---
 
@@ -354,8 +421,9 @@ status_badge · button · icon_button · link · link_button · pill_button · t
 picker · combobox · tag_input (TagInput — chip box + Add-popover; for tags, not Combobox multi) ·
 text_input_field · number_input · search_input · form_field · checkbox · checkbox_input · switch ·
 radio_picker · counter · range_slider · date_picker · date_range_filter_field · time_picker ·
-inline_text_input · inline_number_input · inline_select · inline_date_picker · inline_time_picker
-(the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` + `InlineEditView`) ·
+inline_text_input · inline_number_input · inline_select · inline_member_select · inline_date_picker ·
+inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
+`InlineEditView`; `InlineSelect`/`InlineMemberSelect` take `renderValue` for a chip/badge at rest) ·
 list · list_item · menu_button · menu_list_item · detail_row · pressable_row · action_menu ·
 floating_action_bar · filter_pill · sort_header · table · pagination · accordion · stepper ·
 step_progress · step_list · timeline · drawer (+ DrawerFooter) · dialog · popover · tooltip ·
@@ -366,5 +434,10 @@ status_grid (StatusGrid + StatusLegend) · heatmap · legend_item · remainder_m
 scan_field · file_dropzone · file_thumbnail · file_thumbnail_grid · file_preview ·
 file_gallery_modal · image_gallery · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
-comments_thread · format_money · format_date · colors (solid · tint · ramp · ColorName ·
+comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating
+expandable form — a composer's working state) · prompt_field (the NL command surface + optional
+`onAttach`, not a chat) · suggestion (review-for-approval) · confidence (calibrated high/med/low) ·
+assisted_field (confirmable AI estimate) · change_review (before→after — whole-set OR 1-by-1) ·
+clarify (the agent asks back) · sources (provenance chips) ·
+format_money · format_date · colors (solid · tint · ramp · ColorName ·
 isColorName · asColorName — coerce a stored option/status token to a ColorName, neutral fallback).

package/examples/tpl_assistant.tsx

@@ -0,0 +1,141 @@
+import { useRef, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { colors, solid, tint } from "@lotics/ui/colors";
+import { Text } from "@lotics/ui/text";
+import { Icon } from "@lotics/ui/icon";
+import { DotsIndicator } from "@lotics/ui/dots_indicator";
+import { PromptField } from "@lotics/ui/prompt_field";
+import { ChangeReview, type ChangeReviewItem, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · AI assistant — a CHAT workflow, a different shape from the design
+// canvas: a conversation where the agent's answer carries SUGGESTED EDITS the
+// human approves or rejects ONE BY ONE (a before→after diff per change, ✓/✕),
+// then applies only the accepted set. The review-each-edit pattern — an AI
+// copilot proposing changes to a record, never committing on its own. All mock.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ChatMsg {
+  id: string;
+  role: "user" | "agent";
+  text?: string;
+  /** An agent turn may carry suggested edits to review 1-by-1. */
+  changes?: ChangeReviewItem[];
+  applied?: boolean;
+  typing?: boolean;
+}
+
+const SUGGESTED: Omit<ChangeReviewItem, "status">[] = [
+  { label: "Company", before: "acme packaging co", after: "Acme Packaging Co." },
+  { label: "Phone", before: "0901234567", after: "+84 90 123 4567" },
+  { label: "Email", before: "SALES@ACME.VN", after: "sales@acme.vn" },
+  { label: "Industry", after: "Packaging" },
+];
+
+export function TplAssistant() {
+  const idRef = useRef(1);
+  const nextId = () => `m${idRef.current++}`;
+  const [messages, setMessages] = useState<ChatMsg[]>([
+    { id: "m0", role: "agent", text: "Paste a record or ask me to tidy one up — I'll propose changes you can approve one by one." },
+  ]);
+  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
+  const [prompt, setPrompt] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [proposed, setProposed] = useState(false);
+
+  const send = (text: string) => {
+    setPrompt("");
+    const userMsg: ChatMsg = { id: nextId(), role: "user", text };
+    const typingId = nextId();
+    setMessages((m) => [...m, userMsg, { id: typingId, role: "agent", typing: true }]);
+    setBusy(true);
+    setTimeout(() => {
+      setBusy(false);
+      setMessages((m) =>
+        m.map((msg) =>
+          msg.id === typingId
+            ? proposed
+              ? { id: msg.id, role: "agent", text: "Done — anything else to adjust?" }
+              : { id: msg.id, role: "agent", text: "Here's what I'd standardize on this contact. Review each:", changes: SUGGESTED.map((c) => ({ ...c, status: "pending" })) }
+            : msg,
+        ),
+      );
+      setProposed(true);
+    }, 1300);
+  };
+
+  const decide = (msgId: string, index: number, status: ChangeReviewItemStatus) => {
+    setDecisions((d) => ({ ...d, [`${msgId}:${index}`]: status }));
+  };
+
+  const applyMsg = (msgId: string) => {
+    const msg = messages.find((m) => m.id === msgId);
+    const n = (msg?.changes ?? []).filter((_, i) => decisions[`${msgId}:${i}`] === "accepted").length;
+    setMessages((m) => [
+      ...m.map((x) => (x.id === msgId ? { ...x, applied: true } : x)),
+      { id: nextId(), role: "agent", text: `Applied ${n} change${n === 1 ? "" : "s"} to the contact.` },
+    ]);
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.zinc[50] }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[200], backgroundColor: colors.background }}>
+        <View style={{ width: 24, height: 24, borderRadius: 7, alignItems: "center", justifyContent: "center", backgroundColor: tint("violet", 0.12) }}>
+          <Icon name="sparkles" size={13} color={solid("violet")} />
+        </View>
+        <Text size="sm" weight="semibold">Record assistant</Text>
+      </View>
+
+      <ScrollView contentContainerStyle={{ padding: 20, paddingBottom: 140, gap: 16, maxWidth: 760, width: "100%", alignSelf: "center" }}>
+        {messages.map((m) => {
+          if (m.role === "user") {
+            return (
+              <View key={m.id} style={{ alignItems: "flex-end" }}>
+                <View style={{ maxWidth: "82%", backgroundColor: colors.zinc[900], borderRadius: 14, paddingHorizontal: 14, paddingVertical: 10 }}>
+                  <Text size="sm" color="inverted">{m.text}</Text>
+                </View>
+              </View>
+            );
+          }
+          const active = m.changes != null && !m.applied;
+          return (
+            <View key={m.id} style={{ flexDirection: "row", gap: 10, alignItems: "flex-start" }}>
+              <View style={{ width: 26, height: 26, borderRadius: 8, alignItems: "center", justifyContent: "center", backgroundColor: tint("violet", 0.12), marginTop: 1 }}>
+                <Icon name="sparkles" size={14} color={solid("violet")} />
+              </View>
+              <View style={{ flex: 1, gap: 10 }}>
+                {m.typing ? (
+                  <View style={{ paddingVertical: 6 }}><DotsIndicator size={6} color={colors.zinc[400]} /></View>
+                ) : null}
+                {m.text ? <Text size="sm">{m.text}</Text> : null}
+                {m.changes ? (
+                  <ChangeReview
+                    changes={m.changes.map((c, i) => ({ ...c, status: decisions[`${m.id}:${i}`] ?? "pending" }))}
+                    status={m.applied ? "applied" : "open"}
+                    applyLabel="Apply accepted"
+                    onAcceptItem={active ? (i) => decide(m.id, i, "accepted") : undefined}
+                    onRejectItem={active ? (i) => decide(m.id, i, "rejected") : undefined}
+                    onApply={active ? () => applyMsg(m.id) : undefined}
+                    onDiscard={active ? () => setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, applied: true } : x))) : undefined}
+                  />
+                ) : null}
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      <View style={{ position: "absolute", left: 0, right: 0, bottom: 20, alignItems: "center", paddingHorizontal: 16 }}>
+        <View style={{ width: "100%", maxWidth: 720 }}>
+          <PromptField
+            value={prompt}
+            onChangeText={setPrompt}
+            onSubmit={send}
+            busy={busy}
+            placeholder={proposed ? "Ask for another change…" : "Try: “Tidy up this contact”"}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

package/examples/tpl_dieline.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { colors, solid, tint } from "@lotics/ui/colors";
+import { Text } from "@lotics/ui/text";
+import { Button } from "@lotics/ui/button";
+import { Badge } from "@lotics/ui/badge";
+import { Icon } from "@lotics/ui/icon";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { DotsIndicator } from "@lotics/ui/dots_indicator";
+import { AgentProgress } from "@lotics/ui/agent_progress";
+import { PromptField } from "@lotics/ui/prompt_field";
+import { type AgentRunStep } from "@lotics/ui/agent_run";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · AI design canvas (the carton "dieline" app) — the FLAGSHIP shape:
+// the whole page is a canvas with the design at its centre and a FLOATING
+// composer at the bottom. Empty → drop a photo in the composer → the centre
+// shows a processing state while the composer MORPHS into a progress pill
+// (AgentProgress — press it to watch the stream) → the dieline reveals and the
+// composer returns → prompt to adjust, the design re-flows in place. The
+// geometry is deterministic (the app owns it); the agent only proposes
+// parameters. All mock — the recipe, not a CAD engine.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type ScriptStep = Omit<AgentRunStep, "status">;
+
+const RECOGNIZE: ScriptStep[] = [
+  { id: "r1", label: "Reading the photo", detail: "A single brown carton on a white sweep, card left for scale." },
+  { id: "r2", label: "reference_dielines.search", kind: "tool" },
+  { id: "r3", label: "Identifying the box style", detail: "Four flaps meet at the centre seam → Regular Slotted Container, FEFCO 0201." },
+  { id: "r4", label: "Estimating dimensions", detail: "Scaling against the reference card — about 320 × 230 × 150 mm." },
+  { id: "r5", label: "Drafting the dieline", kind: "tool" },
+];
+
+const editScript = (prompt: string): ScriptStep[] => [
+  { id: "e1", label: "Reading the request", detail: prompt },
+  { id: "e2", label: "Recomputing the dieline", kind: "tool" },
+];
+
+export function TplDieline() {
+  const [phase, setPhase] = useState<"empty" | "working" | "done">("empty");
+  const [designReady, setDesignReady] = useState(false);
+  const [dims, setDims] = useState({ L: 320, W: 230, H: 150 });
+  const [prompt, setPrompt] = useState("");
+
+  // Streaming engine — reveal a run's steps over time, then fire onDone.
+  const [run, setRun] = useState<{ script: ScriptStep[]; onDone: () => void } | null>(null);
+  const [revealed, setRevealed] = useState(0);
+  useEffect(() => {
+    if (!run) return;
+    if (revealed >= run.script.length) {
+      const t = setTimeout(() => {
+        run.onDone();
+        setRun(null);
+        setRevealed(0);
+      }, 650);
+      return () => clearTimeout(t);
+    }
+    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 60 : 780);
+    return () => clearTimeout(t);
+  }, [run, revealed]);
+
+  const liveSteps: AgentRunStep[] = run
+    ? run.script.slice(0, revealed).map((s, i) => ({
+        ...s,
+        status: revealed < run.script.length && i === revealed - 1 ? "running" : "done",
+      }))
+    : [];
+
+  const startRecognize = () => {
+    setPhase("working");
+    setRevealed(0);
+    setRun({
+      script: RECOGNIZE,
+      onDone: () => {
+        setDesignReady(true);
+        setPhase("done");
+      },
+    });
+  };
+
+  const submitPrompt = (text: string) => {
+    setPrompt("");
+    if (!designReady) {
+      startRecognize();
+      return;
+    }
+    setPhase("working");
+    setRevealed(0);
+    setRun({
+      script: editScript(text),
+      onDone: () => {
+        const m = /(\d+)\s*mm/i.exec(text);
+        const delta = m ? Number(m[1]) : 5;
+        setDims((d) => ({ ...d, H: /short|less|low/i.test(text) ? Math.max(20, d.H - delta) : d.H + delta }));
+        setPhase("done");
+      },
+    });
+  };
+
+  const newSession = () => {
+    setRun(null);
+    setRevealed(0);
+    setDesignReady(false);
+    setDims({ L: 320, W: 230, H: 150 });
+    setPhase("empty");
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.zinc[50] }}>
+      {/* slim top bar */}
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[200], backgroundColor: colors.background }}>
+        <Text size="sm" weight="semibold" style={{ flex: 1 }}>Carton design</Text>
+        {designReady ? <Badge color="violet" variant="dot" label="FEFCO 0201 · AI-assisted" /> : null}
+        {phase !== "empty" ? <Button title="New" color="muted" shape="rounded" icon="rotate-ccw" onPress={newSession} /> : null}
+      </View>
+
+      {/* canvas — the design lives at the centre */}
+      <ScrollView contentContainerStyle={{ flexGrow: 1, alignItems: "center", justifyContent: "center", padding: 32, paddingBottom: 180 }}>
+        {phase === "empty" ? (
+          <EmptyFrame />
+        ) : phase === "working" && !designReady ? (
+          <BuildingFrame />
+        ) : (
+          <View style={{ gap: 16, alignItems: "center", opacity: phase === "working" ? 0.45 : 1 }}>
+            <DielinePreview L={dims.L} W={dims.W} H={dims.H} />
+            <View style={{ width: 540, maxWidth: "100%" }}>
+              <KPIStrip
+                items={[
+                  { label: "Blank length", value: `${2 * (dims.L + dims.W) + 40} mm` },
+                  { label: "Blank width", value: `${dims.H + dims.W} mm` },
+                  { label: "Board", value: "B-flute" },
+                  { label: "Height", value: `${dims.H} mm` },
+                ]}
+              />
+            </View>
+            <View style={{ flexDirection: "row", gap: 8 }}>
+              <Button title="Download DXF" color="secondary" shape="rounded" icon="file-down" onPress={() => {}} />
+              <Button title="Download PDF" color="secondary" shape="rounded" icon="file-down" onPress={() => {}} />
+            </View>
+          </View>
+        )}
+      </ScrollView>
+
+      {/* floating composer — morphs into the progress pill while the agent runs */}
+      <View style={{ position: "absolute", left: 0, right: 0, bottom: 24, alignItems: "center", paddingHorizontal: 16 }}>
+        <View style={{ width: "100%", maxWidth: 620 }}>
+          {phase === "working" ? (
+            <AgentProgress steps={liveSteps} state="streaming" />
+          ) : (
+            <PromptField
+              value={prompt}
+              onChangeText={setPrompt}
+              onSubmit={submitPrompt}
+              onAttach={startRecognize}
+              placeholder={designReady ? "Describe a change — “make it 5 mm taller”" : "Attach a photo of the carton to start…"}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function EmptyFrame() {
+  return (
+    <View style={{ width: 540, maxWidth: "100%", height: 300, borderRadius: 16, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed", backgroundColor: colors.background, alignItems: "center", justifyContent: "center", gap: 12 }}>
+      <View style={{ width: 44, height: 44, borderRadius: 12, alignItems: "center", justifyContent: "center", backgroundColor: tint("violet", 0.1) }}>
+        <Icon name="image" size={22} color={solid("violet")} />
+      </View>
+      <View style={{ alignItems: "center", gap: 2 }}>
+        <Text size="md" weight="medium">Your dieline appears here</Text>
+        <Text size="sm" color="muted">Attach a photo of the carton in the composer below.</Text>
+      </View>
+    </View>
+  );
+}
+
+function BuildingFrame() {
+  return (
+    <View style={{ width: 540, maxWidth: "100%", height: 300, borderRadius: 16, borderWidth: 1.5, borderColor: tint("violet", 0.4), borderStyle: "dashed", backgroundColor: tint("violet", 0.03), alignItems: "center", justifyContent: "center", gap: 14 }}>
+      <DotsIndicator size={9} color={solid("violet")} />
+      <Text size="sm" color="muted">Designing your dieline…</Text>
+    </View>
+  );
+}
+
+// A schematic RSC dieline, View-based, scaled from the dimensions. Solid edges =
+// cut; dashed = crease. Re-flows whenever a dimension changes.
+function DielinePreview({ L, W, H }: { L: number; W: number; H: number }) {
+  const TAB = 40;
+  const blankW = 2 * (L + W) + TAB;
+  const flap = W / 2;
+  const scale = 520 / blankW;
+  const px = (mm: number) => Math.max(2, mm * scale);
+  const walls = [
+    { w: W, label: "Side" },
+    { w: L, label: "Front" },
+    { w: W, label: "Side" },
+    { w: L, label: "Back" },
+  ];
+  const flapH = px(flap);
+  const wallH = px(H);
+  const crease = { borderColor: colors.zinc[300], borderStyle: "dashed" as const };
+
+  return (
+    <View style={{ alignItems: "flex-start", gap: 10 }}>
+      <View style={{ borderWidth: 1.5, borderColor: colors.zinc[500], backgroundColor: colors.background }}>
+        <View style={{ flexDirection: "row", height: flapH }}>
+          {walls.map((p, i) => (
+            <View key={`tf-${i}`} style={{ width: px(p.w), borderLeftWidth: i === 0 ? 0 : 1, ...crease, alignItems: "center", justifyContent: "center", backgroundColor: tint("violet", 0.04) }}>
+              <Text size="xs" color="muted">flap</Text>
+            </View>
+          ))}
+          <View style={{ width: px(TAB) }} />
+        </View>
+        <View style={{ flexDirection: "row", height: wallH, borderTopWidth: 1, borderBottomWidth: 1, ...crease }}>
+          {walls.map((p, i) => (
+            <View key={`w-${i}`} style={{ width: px(p.w), borderLeftWidth: i === 0 ? 0 : 1, ...crease, alignItems: "center", justifyContent: "center" }}>
+              <Text size="xs" weight="medium">{p.label}</Text>
+              <Text size="xs" color="muted" tabular>{p.w} mm</Text>
+            </View>
+          ))}
+          <View style={{ width: px(TAB), borderLeftWidth: 1, ...crease, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100] }}>
+            <Text size="xs" color="muted">glue</Text>
+          </View>
+        </View>
+        <View style={{ flexDirection: "row", height: flapH }}>
+          {walls.map((p, i) => (
+            <View key={`bf-${i}`} style={{ width: px(p.w), borderLeftWidth: i === 0 ? 0 : 1, ...crease, alignItems: "center", justifyContent: "center", backgroundColor: tint("violet", 0.04) }}>
+              <Text size="xs" color="muted">flap</Text>
+            </View>
+          ))}
+          <View style={{ width: px(TAB) }} />
+        </View>
+      </View>
+      <View style={{ flexDirection: "row", gap: 16 }}>
+        <Legend dashed label="Crease (score)" />
+        <Legend label="Cut" />
+      </View>
+    </View>
+  );
+}
+
+function Legend({ dashed, label }: { dashed?: boolean; label: string }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+      <View style={{ width: 18, borderTopWidth: 1.5, borderColor: dashed ? colors.zinc[300] : colors.zinc[500], borderStyle: dashed ? "dashed" : "solid" }} />
+      <Text size="xs" color="muted">{label}</Text>
+    </View>
+  );
+}