@lotics/ui 4.6.0 → 4.6.1

package/AGENTS.md

@@ -222,8 +222,15 @@ accepts / edits / dismisses, the deterministic app applies. The agent owns judgm
 (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.
+- **Command** — `PromptField`, a single-row pill for a TEXT-ONLY trigger (Enter sends; the field
+  locks + the send spins while it runs). The imperative "do this" surface. Its `onAttach` is a bare
+  trigger with NO review step, so it CANNOT do attach→review→submit — **never auto-run an agent on
+  attach.** When a run needs a FILE + a prompt together (attach a photo, review/remove it, add a
+  note, THEN send), reach for **`Composer`** instead: fill `actionsButton` with the attach button,
+  the `files` slot with `FileThumbnail`s (each `onRemove`-able), and set `sendDisabled` so Send fires
+  with an attachment and/or text (`onSend(text)` — the host already holds the uploaded file id). The
+  canvas (`tpl_dieline`) uses `Composer` for exactly this; `Composer` morphs into `AgentProgress`
+  while running just like the pill.
 - **Show the work** — `AgentRun`: a live feed of the agent's steps (reasoning, tool calls) on a
   spine, the running node a pulsing ink dot (a done step settles to a hollow ring). Transparent
   work, NEVER a bare spinner — the
@@ -252,8 +259,9 @@ Compose the surfaces as a loop, and reach for the right one by job:
 Ten shapes prove the range. The first four PRODUCE — 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 on a pannable/zoomable surface: it stays
-  CENTRED at every zoom (a floating zoom pill bottom-left), the FLOATING composer at the bottom
-  morphs into `AgentProgress` while running, and a pinned PARAMS PANEL (the `RecordReview` field-card
+  CENTRED at every zoom (a floating zoom pill bottom-left), the FLOATING composer at the bottom (a
+  `Composer`: attach a photo → review/remove it → add a note → send, with `sendDisabled` allowing a
+  file-and/or-text submit — NOT auto-run on attach) morphs into `AgentProgress` while running, and a pinned PARAMS PANEL (the `RecordReview` field-card
   in live-edit mode, carrying the single Download; minimizes to a pill) floats centre-right. Panel, zoom pill and composer
   float ON TOP — they never shift the design. (Floating layers use a `pointerEvents:"none"` wrapper
   with the interactive child set `"auto"`; RN-Web ignores `"box-none"` in style, so a full-width
@@ -309,8 +317,9 @@ controls — while **status/severity/diffs use functional colour** the way the r
 
 Card chrome (borders, microlabels) stays neutral — colour marks the *state*, never the container.
 The **composer keeps its icons**: `PromptField` is a single-row pill with circular attach + send
-`Button`s; `AgentProgress` is the `WaveAvatar` pill. "No icons" was only ever about the review
-surfaces' sparkles/severity glyphs, not functional affordances.
+`Button`s; `Composer` (the file+prompt variant) shows an attach `actionsButton` + a `FileThumbnail`
+attachment row (each `onRemove`-able) + send; `AgentProgress` is the `WaveAvatar` pill. "No icons"
+was only ever about the review surfaces' sparkles/severity glyphs, not functional affordances.
 
 ---
 

package/examples/tpl_dieline.tsx

@@ -8,9 +8,19 @@ 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 { Composer } from "@lotics/ui/composer";
+import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { type AgentRunStep } from "@lotics/ui/agent_run";
 
+// A real app fills the attachment from `useFileUpload` (the uploaded file's URL);
+// this mock uses an inline placeholder so the example needs no network image.
+const MOCK_PHOTO: DisplayFile = {
+  id: "att-carton",
+  filename: "carton.jpg",
+  mimeType: "image/jpeg",
+  url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==",
+};
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Template · AI design canvas (the carton "dieline" app) — the FLAGSHIP shape:
 // the page IS the design. The dieline fills the centre, a FLOATING composer sits
@@ -56,6 +66,7 @@ export function TplDieline() {
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [dragging, setDragging] = useState(false);
   const [prompt, setPrompt] = useState("");
+  const [attachment, setAttachment] = useState<DisplayFile | null>(null);
 
   // 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).
@@ -116,6 +127,7 @@ export function TplDieline() {
   const submitPrompt = (text: string) => {
     setPrompt("");
     if (!designReady) {
+      setAttachment(null); // the attached photo is consumed into the run
       startRecognize();
       return;
     }
@@ -136,6 +148,7 @@ export function TplDieline() {
 
   const newSession = () => {
     setRun(null);
+    setAttachment(null);
     setRevealed(0);
     setDesignReady(false);
     setDims({ L: 320, W: 230, H: 150 });
@@ -197,12 +210,16 @@ export function TplDieline() {
           {phase === "working" ? (
             <AgentProgress steps={liveSteps} state="streaming" />
           ) : (
-            <PromptField
+            <Composer
               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…"}
+              onSend={submitPrompt}
+              sendDisabled={prompt.trim().length === 0 && !attachment}
+              placeholder={designReady ? "Describe a change — “make it 5 mm taller”" : "Attach a photo, add a note, then send…"}
+              actionsButton={
+                <Button icon="paperclip" color="secondary" accessibilityLabel="Attach a photo" onPress={() => setAttachment(MOCK_PHOTO)} />
+              }
+              files={attachment ? <FileThumbnail file={attachment} size={56} onRemove={() => setAttachment(null)} /> : null}
             />
           )}
         </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",