@lotics/ui 4.4.0 → 4.5.0

package/examples/tpl_dieline.tsx

@@ -1,28 +1,31 @@
-import { useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
-import { colors, solid, tint } from "@lotics/ui/colors";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { PanResponder, StyleSheet, View, type ViewStyle } from "react-native";
+import { colors } 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 { IconButton } from "@lotics/ui/icon_button";
+import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { DotsIndicator } from "@lotics/ui/dots_indicator";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
 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.
+// the page IS the design. The dieline fills the centre, a FLOATING composer sits
+// at the bottom, and a pinned PARAMS PANEL (the RecordReview field-card, here in
+// live-edit mode) floats at the centre-right. Empty → drop a photo in the
+// composer → the centre processes while the composer MORPHS into a progress pill
+// (AgentProgress) → the dieline reveals, the params panel appears, the composer
+// returns. Two ways to change it: prompt the agent ("5 mm taller"), or edit a
+// param directly — either re-flows the design in place. The geometry is
+// deterministic (the app owns it); the agent only proposes parameters. The panel
+// carries the single Download. All mock — the recipe, not a CAD engine.
 // ─────────────────────────────────────────────────────────────────────────────
 
 type ScriptStep = Omit<AgentRunStep, "status">;
+type Dims = { L: number; W: number; H: number };
 
 const RECOGNIZE: ScriptStep[] = [
   { id: "r1", label: "Reading the photo", detail: "A single brown carton on a white sweep, card left for scale." },
@@ -37,12 +40,43 @@ const editScript = (prompt: string): ScriptStep[] => [
   { id: "e2", label: "Recomputing the dieline", kind: "tool" },
 ];
 
+const ZOOM_MIN = 0.4;
+const ZOOM_MAX = 2.5;
+const ZOOM_STEP = 0.25;
+
+// `grab`/`grabbing` are web-only cursors outside RN's typed `CursorValue` union,
+// so this needs a boundary cast (the kit casts `cursor` the same way).
+const grabCursor = (grabbing: boolean): ViewStyle => ({ cursor: grabbing ? "grabbing" : "grab" } as unknown as ViewStyle);
+
 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 [dims, setDims] = useState<Dims>({ L: 320, W: 230, H: 150 });
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
   const [prompt, setPrompt] = useState("");
 
+  // Drag-to-pan — like a design tool: grab anywhere on the canvas and move it.
+  // The committed pan is read at grant via a ref (the responder is built once).
+  const panRef = useRef(pan);
+  panRef.current = pan;
+  const grantRef = useRef({ x: 0, y: 0 });
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 3 || Math.abs(g.dy) > 3,
+        onPanResponderGrant: () => {
+          grantRef.current = panRef.current;
+          setDragging(true);
+        },
+        onPanResponderMove: (_e, g) => setPan({ x: grantRef.current.x + g.dx, y: grantRef.current.y + g.dy }),
+        onPanResponderRelease: () => setDragging(false),
+        onPanResponderTerminate: () => setDragging(false),
+      }),
+    [],
+  );
+
   // 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);
@@ -98,53 +132,68 @@ export function TplDieline() {
     });
   };
 
+  const editParam = (key: keyof Dims, value: number) => setDims((d) => ({ ...d, [key]: value }));
+
   const newSession = () => {
     setRun(null);
     setRevealed(0);
     setDesignReady(false);
     setDims({ L: 320, W: 230, H: 150 });
+    resetView();
     setPhase("empty");
   };
 
+  const zoomBy = (d: number) => setZoom((z) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round((z + d) * 100) / 100)));
+  const resetView = () => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  };
+
   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}
+        {phase !== "empty" ? <Button title="New" color="secondary" shape="rounded" icon="plus" 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` },
-                ]}
-              />
+      {/* canvas region — a pannable + zoomable surface (DRAG to pan, the zoom pill
+          to scale). The design sits CENTRED at rest and zoom scales it about that
+          centre; panel, zoom pill and composer float ON TOP, never shifting it. */}
+      <View
+        style={[{ flex: 1, overflow: "hidden" }, designReady ? grabCursor(dragging) : null]}
+        {...(designReady ? panResponder.panHandlers : {})}
+      >
+        <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 48 }}>
+          {phase === "empty" ? (
+            <EmptyFrame />
+          ) : phase === "working" && !designReady ? (
+            <BuildingFrame />
+          ) : (
+            <View style={{ opacity: phase === "working" ? 0.45 : 1, transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale: zoom }] }}>
+              <DielinePreview L={dims.L} W={dims.W} H={dims.H} />
+            </View>
+          )}
+        </View>
+
+        {designReady ? (
+          <>
+            <View style={[StyleSheet.absoluteFill, { pointerEvents: "none", alignItems: "flex-end", justifyContent: "center", paddingRight: 24 }]}>
+              <View style={{ pointerEvents: "auto" }}>
+                <ParamsPanel dims={dims} onEditParam={editParam} onDownload={() => {}} />
+              </View>
             </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 style={{ position: "absolute", left: 24, bottom: 24 }}>
+              <ZoomBar zoom={zoom} onZoomOut={() => zoomBy(-ZOOM_STEP)} onZoomIn={() => zoomBy(ZOOM_STEP)} onReset={resetView} />
             </View>
-          </View>
-        )}
-      </ScrollView>
+          </>
+        ) : null}
+      </View>
 
-      {/* 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 }}>
+      {/* floating composer — morphs into the progress pill while the agent runs.
+          box-none so its full-width band doesn't intercept the zoom bar / canvas. */}
+      <View style={{ position: "absolute", left: 0, right: 0, bottom: 24, alignItems: "center", paddingHorizontal: 16, pointerEvents: "none" }}>
+        <View style={{ width: "100%", maxWidth: 620, pointerEvents: "auto" }}>
           {phase === "working" ? (
             <AgentProgress steps={liveSteps} state="streaming" />
           ) : (
@@ -162,12 +211,108 @@ export function TplDieline() {
   );
 }
 
-function EmptyFrame() {
+// The pinned right-rail — the RecordReview field-card in live-edit mode: each
+// parameter is click-to-edit and re-flows the design on save; one primary
+// Download. Floats over the canvas, so it carries the composer's lift.
+const PARAMS: { key: keyof Dims; label: string }[] = [
+  { key: "L", label: "Length" },
+  { key: "W", label: "Width" },
+  { key: "H", label: "Height" },
+];
+
+function ParamsPanel({ dims, onEditParam, onDownload }: { dims: Dims; onEditParam: (key: keyof Dims, value: number) => void; onDownload: () => void }) {
+  const [open, setOpen] = useState(true);
   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 style={[panel.card, open ? panel.cardOpen : panel.cardMin]}>
+      <View style={panel.header}>
+        <View style={{ flex: 1, gap: 1 }}>
+          <Text size="sm" weight="semibold">Parameters</Text>
+          {open ? <Text size="xs" color="muted">FEFCO 0201 · B-flute</Text> : null}
+        </View>
+        <IconButton icon={open ? "minus" : "plus"} accessibilityLabel={open ? "Minimize parameters" : "Expand parameters"} onPress={() => setOpen((o) => !o)} />
       </View>
+
+      {open ? (
+        <>
+          <View style={panel.fields}>
+            {PARAMS.map((p) => (
+              <View key={p.key} style={panel.row}>
+                <Text size="sm" color="muted" style={panel.label}>{p.label}</Text>
+                <View style={panel.value}>
+                  <View style={{ flex: 1 }}>
+                    <InlineTextInput
+                      value={String(dims[p.key])}
+                      accessibilityLabel={`Edit ${p.label}`}
+                      onSave={(next) => {
+                        const n = Math.round(Number(next.replace(/[^\d.]/g, "")));
+                        if (Number.isFinite(n) && n > 0) onEditParam(p.key, n);
+                      }}
+                    />
+                  </View>
+                  <Text size="sm" color="muted">mm</Text>
+                </View>
+              </View>
+            ))}
+          </View>
+
+          <Button title="Download" color="primary" shape="rounded" icon="file-down" alignSelf="stretch" onPress={onDownload} />
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+const panel = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 14,
+    boxShadow: "0 4px 14px rgba(24,24,27,0.08)",
+  },
+  cardOpen: { width: 264 },
+  cardMin: { paddingVertical: 8, paddingHorizontal: 12 },
+  header: { flexDirection: "row", alignItems: "center", gap: 10 },
+  fields: { gap: 2 },
+  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 34 },
+  label: { width: 70 },
+  value: { flex: 1, flexDirection: "row", alignItems: "center", gap: 6 },
+});
+
+// The canvas zoom control — out / percentage (tap to reset) / in, in a floating
+// pill that carries the same lift as the composer and params panel.
+function ZoomBar({ zoom, onZoomOut, onZoomIn, onReset }: { zoom: number; onZoomOut: () => void; onZoomIn: () => void; onReset: () => void }) {
+  return (
+    <View style={zoombar.bar}>
+      <IconButton icon="minus" accessibilityLabel="Zoom out" onPress={onZoomOut} />
+      <PressableHighlight accessibilityRole="button" accessibilityLabel="Reset zoom to 100%" onPress={onReset} style={zoombar.pct}>
+        <Text size="xs" weight="medium" tabular>{Math.round(zoom * 100)}%</Text>
+      </PressableHighlight>
+      <IconButton icon="plus" accessibilityLabel="Zoom in" onPress={onZoomIn} />
+    </View>
+  );
+}
+
+const zoombar = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    padding: 4,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    boxShadow: "0 4px 14px rgba(24,24,27,0.08)",
+  },
+  pct: { minWidth: 50, height: 28, alignItems: "center", justifyContent: "center", borderRadius: 8, paddingHorizontal: 6 },
+});
+
+function EmptyFrame() {
+  return (
+    <View style={frame.box}>
       <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>
@@ -178,20 +323,38 @@ function EmptyFrame() {
 
 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")} />
+    <View style={[frame.box, { backgroundColor: colors.zinc[50] }]}>
+      <DotsIndicator size={9} color={colors.zinc[900]} />
       <Text size="sm" color="muted">Designing your dieline…</Text>
     </View>
   );
 }
 
+const frame = StyleSheet.create({
+  box: {
+    width: 640,
+    maxWidth: "100%",
+    height: 360,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    borderColor: colors.zinc[300],
+    borderStyle: "dashed",
+    backgroundColor: colors.background,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+  },
+});
+
 // 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 }) {
+// cut; dashed = crease. Re-flows whenever a dimension changes. Sized to fill the
+// canvas (TARGET wide), so the design reads as the hero.
+const TARGET = 780;
+function DielinePreview({ L, W, H }: Dims) {
   const TAB = 40;
   const blankW = 2 * (L + W) + TAB;
   const flap = W / 2;
-  const scale = 520 / blankW;
+  const scale = TARGET / blankW;
   const px = (mm: number) => Math.max(2, mm * scale);
   const walls = [
     { w: W, label: "Side" },
@@ -204,11 +367,11 @@ function DielinePreview({ L, W, H }: { L: number; W: number; H: number }) {
   const crease = { borderColor: colors.zinc[300], borderStyle: "dashed" as const };
 
   return (
-    <View style={{ alignItems: "flex-start", gap: 10 }}>
+    <View style={{ alignItems: "flex-start", gap: 12 }}>
       <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) }}>
+            <View key={`tf-${i}`} style={{ width: px(p.w), borderLeftWidth: i === 0 ? 0 : 1, ...crease, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100] }}>
               <Text size="xs" color="muted">flap</Text>
             </View>
           ))}
@@ -227,7 +390,7 @@ function DielinePreview({ L, W, H }: { L: number; W: number; H: number }) {
         </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) }}>
+            <View key={`bf-${i}`} style={{ width: px(p.w), borderLeftWidth: i === 0 ? 0 : 1, ...crease, alignItems: "center", justifyContent: "center", backgroundColor: colors.zinc[100] }}>
               <Text size="xs" color="muted">flap</Text>
             </View>
           ))}

package/examples/tpl_draft.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
 import { ScrollView, View } from "react-native";
-import { colors, solid, tint } from "@lotics/ui/colors";
+import { colors } from "@lotics/ui/colors";
 import { Text } from "@lotics/ui/text";
 import { Button } from "@lotics/ui/button";
-import { Icon } from "@lotics/ui/icon";
 import { Card, CardBody, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
 import { SegmentedControl } from "@lotics/ui/segmented_control";
 import { TextInputField } from "@lotics/ui/text_input_field";
@@ -107,7 +106,7 @@ export function TplDraft() {
             <CardBody>
               <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 16 }}>
                 <View style={{ gap: 6 }}>
-                  <Text size="xs" color="muted" transform="uppercase">Tone</Text>
+                  <Text size="xs" color="muted" weight="medium">Tone</Text>
                   <SegmentedControl
                     accessibilityLabel="Tone"
                     options={[{ label: "Friendly", value: "friendly" }, { label: "Formal", value: "formal" }]}
@@ -117,7 +116,7 @@ export function TplDraft() {
                   />
                 </View>
                 <View style={{ gap: 6 }}>
-                  <Text size="xs" color="muted" transform="uppercase">Length</Text>
+                  <Text size="xs" color="muted" weight="medium">Length</Text>
                   <SegmentedControl
                     accessibilityLabel="Length"
                     options={[{ label: "Short", value: "short" }, { label: "Detailed", value: "detailed" }]}
@@ -130,16 +129,15 @@ export function TplDraft() {
 
               {phase === "idle" ? (
                 <View style={{ alignItems: "flex-start", paddingTop: 4 }}>
-                  <Button title="Draft a reply" color="primary" shape="rounded" icon="sparkles" onPress={startDraft} />
+                  <Button title="Draft a reply" color="primary" shape="rounded" onPress={startDraft} />
                 </View>
               ) : null}
 
               {phase === "drafting" ? (
-                <View style={{ borderWidth: 1, borderColor: tint("violet", 0.35), borderRadius: 10, padding: 14, gap: 10, backgroundColor: tint("violet", 0.03) }}>
+                <View style={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, padding: 14, gap: 10, backgroundColor: colors.zinc[50] }}>
                   <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <Icon name="sparkles" size={13} color={solid("violet")} />
-                    <Text size="xs" color="muted" style={{ flex: 1 }}>Drafting…</Text>
-                    <DotsIndicator size={5} color={solid("violet")} />
+                    <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Drafting</Text>
+                    <DotsIndicator size={5} color={colors.zinc[900]} />
                   </View>
                   <Text size="sm">{streamed}</Text>
                 </View>