makersclaw 0.8.0 → 0.8.1

package/registry/blocks/source-receipt/demo.jsx

@@ -0,0 +1,71 @@
+"use client";
+
+// SourceReceipt for a page, a mail, two sources to pick from, and a
+// source with nothing to underline — the gallery's and the smoke test's
+// surface. Not installed into apps.
+import { useState } from "react";
+import { Button } from "../components/ui";
+import { SourceReceipt } from "../components/blocks/source-receipt";
+
+export default function SourceReceiptDemo() {
+  const [picked, setPicked] = useState(null);
+  const pick = (which, words) =>
+    picked === which ? (
+      <Button size="sm" variant="primary" disabled>
+        Picked
+      </Button>
+    ) : (
+      <Button size="sm" onClick={() => setPicked(which)}>
+        {words}
+      </Button>
+    );
+  return (
+    <div className="grid gap-6 p-6 [grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))]">
+      <SourceReceipt
+        title="Careers · Klarwerk"
+        url="https://www.klarwerk.de/careers"
+        date="read 22 Sep"
+        trust="their own site, five months old"
+        sure="likely"
+        excerpt="We're a team of 70 across Berlin and Leipzig. Our team of 70 ships payroll software for 2,000 shops."
+        marks={["team of 70"]}
+      />
+      <SourceReceipt
+        kind="mail"
+        title="Re: scheduling for all the shops"
+        site="Sofia Reyes <sofia@crumb.co>"
+        date="Sat 12 Sep"
+        trust="her email signature"
+        sure="sure"
+        excerpt="Sofia Reyes — Head of Retail Operations, Crumb & Co. +1 612 555 0142"
+        marks={["head of retail operations"]}
+        onOpen={() => undefined}
+        openLabel="Open the mail"
+      />
+      <SourceReceipt
+        title="Klarwerk on LinkedIn"
+        url="linkedin.com/company/klarwerk"
+        date="read 22 Sep"
+        trust="a profile the company keeps"
+        sure="likely"
+        excerpt="[[51–200 employees]] · [[85]] members"
+        action={pick("one", "Pick 85")}
+        picked={picked === "one"}
+      />
+      <SourceReceipt
+        title="A 2023 directory"
+        url="https://directory.example.org/companies/klarwerk-gmbh-berlin-leipzig-payroll-software-2023"
+        date="read 22 Sep"
+        trust="a 2023 directory"
+        sure="guess"
+        excerpt="Klarwerk GmbH, payroll software, Berlin. About 60 staff."
+        marks={["about 60", "nothing that appears"]}
+        action={pick("other", "Pick 60")}
+        picked={picked === "other"}
+      />
+      <div className="w-80 max-w-full">
+        <SourceReceipt title="A source with no words kept" url="nordlicht.io/team" date="read 21 Sep" />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/source-receipt/index.js

@@ -0,0 +1,3 @@
+// The SourceReceipt block — `makersclaw add source-receipt`. Fixed:
+// compose it through its props (README.md beside this file).
+export { SourceReceipt, markExcerpt } from "./source-receipt";

package/registry/blocks/source-receipt/source-receipt.jsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Button, Icon, cx } from "../../ui";
+import { Clipping } from "../agent-column";
+
+// SourceReceipt — where one value came from, as a clipping (the app kit,
+// D15): the page or the mail, its date, a trust word ("their own site",
+// "a 2023 directory"), the words on it with the deciding ones underlined,
+// and Open the source. For a value that is not in an agent column: a
+// CRM's found title, a note's proof margin, a newsletter's source line.
+//
+// It is NOT a second receipt. The clipping is agent-column's (Data
+// Enrichment's "the receipt"); this wraps it for one source standing on
+// its own, so both draw the same thing. No door: the source is app data
+// the agent wrote. Props in, callbacks out.
+
+/** Wrap every occurrence of each mark in [[…]] (the clipping's mark for
+ *  deciding words), case-insensitive, longest first so no mark lands
+ *  inside another. With no marks, the excerpt's own [[…]] (the agent's)
+ *  stand; with marks, they replace them. Plain strings only: never HTML. */
+export function markExcerpt(excerpt, marks) {
+  const list = [...new Set((marks ?? []).map((m) => String(m ?? "").trim()).filter((m) => m && !/[[\]]/.test(m)))].sort((a, b) => b.length - a.length);
+  if (!list.length) return String(excerpt ?? "");
+  const text = String(excerpt ?? "").replace(/\[\[|\]\]/g, "");
+  if (!text) return text;
+  const re = new RegExp(list.map((m) => m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|"), "gi");
+  return text.replace(re, (hit) => `[[${hit}]]`);
+}
+
+/** "acme.com", from a URL; null when it is not one. */
+function siteOf(url) {
+  try {
+    return new URL(/^https?:/i.test(url) ? url : `https://${url}`).hostname.replace(/^www\./i, "");
+  } catch {
+    return null;
+  }
+}
+
+/**
+ *   title     the page's or the mail's title ("Careers · Klarwerk")
+ *   site      where: a site ("klarwerk.de") or a mailbox ("Sofia Reyes
+ *             <sofia@crumb.co>"); from `url` when left out
+ *   url       the source's address; the clipping links it
+ *   kind      "site" (default) or "mail": the icon before the trust word
+ *   date      when it was read or sent, in words ("read 22 Sep")
+ *   trust     a word for how far to trust it ("their own site")
+ *   sure      sure · likely · guess: the trust mark's shape, beside the title
+ *   excerpt   the words on it
+ *   marks     the deciding words, underlined wherever they appear
+ *   onOpen()  opens the source; without it, with a url, the source opens
+ *             in a new tab
+ *   openLabel default "Open the source"
+ *   action    a node at the head's end (a "Pick" for one of two)
+ *   picked    drawn as the one chosen
+ */
+export function SourceReceipt({
+  title,
+  site,
+  url,
+  kind = "site",
+  date,
+  trust,
+  sure,
+  excerpt,
+  marks = [],
+  onOpen,
+  openLabel = "Open the source",
+  action,
+  picked = false,
+  className,
+}) {
+  const where = site ?? (url ? siteOf(url) : null);
+  // The clipping draws a url as its linked address; a mailbox or a site
+  // without one rides in its date line instead.
+  const read = [url ? null : where, date].filter(Boolean).join(" · ") || undefined;
+  const href = url ? (/^https?:/i.test(url) ? url : `https://${url}`) : null;
+  return (
+    <Clipping
+      source={{ url: url || undefined, title: title || where || undefined, evidence: excerpt ? markExcerpt(excerpt, marks) : undefined, read }}
+      trust={sure}
+      title={title || where || "A source"}
+      action={action}
+      picked={picked}
+      className={cx("min-w-0 text-sm", className)}
+    >
+      {trust || onOpen || href ? (
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+          {trust ? (
+            <span className="inline-flex min-w-0 items-center gap-1 text-muted-foreground">
+              <Icon name={kind === "mail" ? "mail" : "globe"} size={12} className="shrink-0" />
+              <span className="min-w-0 break-words">{trust}</span>
+            </span>
+          ) : null}
+          {onOpen ? (
+            <Button variant="link" size="inherit" onClick={onOpen} className="ml-auto">
+              {openLabel} <Icon name="external" size={12} />
+            </Button>
+          ) : href ? (
+            <Button variant="link" size="inherit" href={href} target="_blank" rel="noreferrer" className="ml-auto">
+              {openLabel} <Icon name="external" size={12} />
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+    </Clipping>
+  );
+}

package/registry/blocks/spreadsheet/spreadsheet.jsx

@@ -154,13 +154,22 @@ export function Spreadsheet({
     const el = rootRef.current;
     if (!el) return;
     setBoxW(el.clientWidth);
-    const ro = new ResizeObserver(() => setBoxW(el.clientWidth));
+    // The new width is taken in the next frame, never inside the observer's
+    // own delivery: a change made there that touches anything observed
+    // (the virtualisers watch this grid too) makes the browser report
+    // "ResizeObserver loop completed with undelivered notifications".
+    let frame = 0;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setBoxW(el.clientWidth));
+    });
     ro.observe(el);
     const mq = window.matchMedia?.("(pointer: coarse)");
     const onMq = () => setCoarse(Boolean(mq?.matches));
     onMq();
     mq?.addEventListener?.("change", onMq);
     return () => {
+      cancelAnimationFrame(frame);
       ro.disconnect();
       mq?.removeEventListener?.("change", onMq);
     };
@@ -1065,6 +1074,10 @@ export function Spreadsheet({
     overscan: 10,
     scrollMargin: headH,
     initialRect: { width: 1200, height: typeof height === "number" ? height : 560 },
+    // The scroller's new size is read in the next frame, not inside the
+    // observer's delivery (a synchronous re-render there is what the
+    // browser reports as a ResizeObserver loop).
+    useAnimationFrameWithResizeObserver: true,
     rangeExtractor: keepRow,
     getItemKey: (i) => viewRows[i]?.id ?? i,
   });
@@ -1077,6 +1090,7 @@ export function Spreadsheet({
     overscan: 2,
     scrollMargin: gutterW + frozenW,
     initialRect: { width: 1200, height: typeof height === "number" ? height : 560 },
+    useAnimationFrameWithResizeObserver: true,
     rangeExtractor: keepCol,
     getItemKey: (i) => scrollCols[i]?.key ?? i,
   });

package/registry/blocks/step-picker/README.md

@@ -0,0 +1,78 @@
+# StepPicker
+
+The two ways to choose a step of an automation. They only say which kind a
+person chose; where the step goes is the editor's call (`flow-editor` and
+`automation-editor` do it for you).
+
+- `StepPicker` — the popover a **+** on a connector opens: a search box,
+  then the kinds grouped Your apps · Think · Flow · Data · Tell · More,
+  each with one line on what it does and a tag: **free**, **paid** (it
+  costs credits when it runs) or **soon** (the platform does not run it
+  yet).
+- `PaletteBar` — the strip along the bottom of a canvas: one icon per
+  kind, grouped, with an "AI" mark on a model call and an "A" on the agent.
+
+```jsx
+import { StepPicker, PaletteBar } from "../components/blocks/step-picker";   // a Makersclaw app
+import { StepPicker, PaletteBar } from "@/components/makersclaw/blocks/step-picker";   // a shadcn project
+```
+
+`makersclaw add step-picker` lays `automation-model` with it, which holds
+the catalog both read. Client components. Tokens only: an agent step is
+drawn in the app's accent (`primary`, as the kit's AgentMark draws the agent: solid for the agent, outlined for one model call) and everything else plain.
+
+## Props
+
+### StepPicker
+
+- `onPick(kind)` — a kind was chosen: `action` · `tool` · `llm` · `agent` ·
+  `condition` · `loop` · `wait` · `stop` · `set` · `brain.read` · `search` ·
+  `notify` · `automation`.
+- `onClose()` — Escape, or a press outside it.
+- `title` — the dialog's name for a screen reader (default "Add a step").
+- `inline` — in the flow of a page (the outline view), not floating over a
+  canvas.
+- `runnable` — a `Set` of the kinds the platform runs. The rest say
+  "soon". Default: the kinds the engine runs today.
+- `style`, `className` — where the floating panel sits. Never colour.
+
+### PaletteBar
+
+- `onAdd(kind)` — a kind was pressed.
+- `className`.
+
+## Never
+
+- Never offer a kind the platform cannot run without saying "soon": the
+  save would refuse it later.
+- Never a price in the picker beyond free or paid: a step's price comes
+  from the automation's estimate, on its card.
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { StepPicker } from "../components/blocks/step-picker";
+import { Button } from "../components/ui";
+
+export default function AddStep({ onAdd }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <Button variant="secondary" icon="plus" onClick={() => setOpen(true)}>
+        Add a step
+      </Button>
+      {open ? (
+        <StepPicker
+          onClose={() => setOpen(false)}
+          onPick={(kind) => {
+            setOpen(false);
+            onAdd(kind);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+```

package/registry/blocks/step-picker/block.json

@@ -0,0 +1,31 @@
+{
+  "name": "step-picker",
+  "title": "StepPicker",
+  "description": "The two ways to choose a step of an automation: StepPicker, the popover a + on a connector opens (a search box, the kinds grouped Your apps / Think / Flow / Data / Tell, one line on what each does and whether it is free, paid or coming), and PaletteBar, the strip along the bottom of a canvas (one icon per kind). Both only say which kind a person chose; where it goes is the editor's call.",
+  "useWhen": "A screen lets a person add a step to an automation: from a + on the canvas or the outline (flow-editor does it for you), or from a button of your own. Not a general command palette (use Command).",
+  "tags": [
+    "automation",
+    "workflow",
+    "step",
+    "picker",
+    "palette",
+    "add",
+    "node",
+    "search",
+    "kinds",
+    "trigger",
+    "n8n",
+    "make"
+  ],
+  "exports": [
+    "PaletteBar",
+    "StepPicker"
+  ],
+  "files": [
+    "index.js",
+    "step-picker.jsx"
+  ],
+  "requires": [
+    "automation-model"
+  ]
+}

package/registry/blocks/step-picker/demo.jsx

@@ -0,0 +1,23 @@
+"use client";
+
+// StepPicker and PaletteBar — the gallery's and the smoke test's surface.
+// Not installed into apps. Press a kind: the page says which.
+import { useState } from "react";
+import { PaletteBar, StepPicker } from "../components/blocks/step-picker";
+
+export default function StepPickerDemo() {
+  const [said, setSaid] = useState("Nothing chosen yet.");
+  return (
+    <div className="grid gap-6 p-4">
+      <p className="m-0 text-sm" role="status">
+        {said}
+      </p>
+      <div className="max-w-sm">
+        <StepPicker inline onClose={() => setSaid("Closed.")} onPick={(kind) => setSaid(`Chose ${kind}.`)} />
+      </div>
+      <div className="max-w-full">
+        <PaletteBar onAdd={(kind) => setSaid(`Added ${kind}.`)} />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/step-picker/index.js

@@ -0,0 +1,3 @@
+// The StepPicker block — `makersclaw add step-picker`. Fixed: compose it
+// through its props (README.md beside this file).
+export { PaletteBar, StepPicker } from "./step-picker";

package/registry/blocks/step-picker/step-picker.jsx

@@ -0,0 +1,144 @@
+"use client";
+
+// Two ways to choose a step: the picker a + on a connector opens (search,
+// the kinds grouped, what each does), and the palette along the bottom of
+// a canvas (one icon per kind, grouped). Both read the catalog
+// (automation-model); both only say which kind a person chose. Where it
+// goes is the editor's call. Props in, callbacks out; tokens only.
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Input, cx } from "../../ui";
+import { Glyph, KINDS, isRunnable, paletteGroups } from "../automation-model";
+
+const matches = (k, q) => {
+  if (!q) return true;
+  const hay = `${k.name} ${k.blurb} ${k.kind}`.toLowerCase();
+  return q
+    .toLowerCase()
+    .split(/\s+/)
+    .every((w) => hay.includes(w));
+};
+
+/** How a kind is dressed: the agent solid in the app's accent, a model
+ *  call outlined in it, every other kind plain. */
+const TILE = {
+  plain: "border-border bg-card text-muted-foreground",
+  model: "border-primary/55 bg-card text-primary",
+  agent: "border-primary bg-primary/15 text-primary",
+};
+
+/**
+ *   onPick(kind)   a kind was chosen ("action", "condition", "llm" …)
+ *   onClose()      Escape, or a press outside
+ *   title          the dialog's name (default "Add a step")
+ *   inline         in the flow of a page (the outline), not floating
+ *   runnable       a Set of the kinds the platform runs; the rest say "soon"
+ *                  (default: automation-model's RUNNABLE)
+ *   className, style   the floating panel's place (the editor sets it)
+ */
+export function StepPicker({ onPick, onClose, title = "Add a step", inline = false, runnable, className, style }) {
+  const [q, setQ] = useState("");
+  const ref = useRef(null);
+  const groups = useMemo(
+    () =>
+      paletteGroups()
+        .map((g) => ({ ...g, kinds: g.kinds.filter((k) => matches(k, q)) }))
+        .filter((g) => g.kinds.length),
+    [q],
+  );
+
+  useEffect(() => {
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose?.();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose?.();
+      }
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={ref}
+      role="dialog"
+      aria-label={title}
+      style={style}
+      onPointerDown={(e) => e.stopPropagation()}
+      className={cx(
+        "z-20 flex min-w-0 flex-col gap-2 rounded-lg border border-border bg-popover p-2 text-popover-foreground",
+        inline ? "w-full" : "absolute w-[330px] max-w-[calc(100%_-_1rem)] shadow-lg",
+        className,
+      )}
+    >
+      <Input type="search" placeholder="Search steps" aria-label="Search steps" value={q} autoFocus onChange={(e) => setQ(e.target.value)} />
+      <div data-scroll className={cx("grid min-w-0 gap-2 overflow-y-auto", inline ? "max-h-72" : "max-h-[320px]")}>
+        {groups.length === 0 ? <p className="m-0 p-2 text-sm text-muted-foreground">No step matches “{q}”.</p> : null}
+        {groups.map((g) => (
+          <section key={g.group} aria-label={g.label} className="grid gap-0.5">
+            <h4 className="m-0 px-2 pt-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground">{g.label}</h4>
+            {g.kinds.map((k) => (
+              <button
+                key={k.kind}
+                type="button"
+                onClick={() => onPick?.(k.kind)}
+                className="flex min-w-0 items-center gap-2.5 rounded-md border border-transparent px-2 py-1.5 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <span className={cx("inline-flex size-9 shrink-0 items-center justify-center rounded-lg border", TILE[k.tone] ?? TILE.plain)}>
+                  <Glyph name={k.glyph} size={18} />
+                </span>
+                <span className="grid min-w-0 flex-1 gap-0.5">
+                  <b className="text-[13px] font-semibold">{k.name}</b>
+                  <span className="text-xs leading-snug text-muted-foreground">{k.blurb}</span>
+                </span>
+                <span className="shrink-0 rounded-full border border-border px-1.5 text-2xs text-muted-foreground">{k.paid ? "paid" : !isRunnable(k.kind, runnable) ? "soon" : "free"}</span>
+              </button>
+            ))}
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The bar along the bottom of a canvas: every kind, one icon each, grouped.
+ *   onAdd(kind)   a kind was pressed
+ */
+export function PaletteBar({ onAdd, className }) {
+  const groups = paletteGroups();
+  return (
+    <div role="toolbar" aria-label="Add a step" className={cx("flex max-w-full items-end gap-3 overflow-x-auto rounded-xl border border-border bg-card p-1.5 text-card-foreground shadow-md", className)}>
+      {groups.map((g) => (
+        <div key={g.group} className="grid shrink-0 gap-1">
+          <span className="px-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground">{g.label}</span>
+          <div className="flex gap-0.5">
+            {g.kinds.map((k) => (
+              <button
+                key={k.kind}
+                type="button"
+                title={`${k.name}: ${k.blurb}`}
+                aria-label={`Add ${KINDS[k.kind].name}`}
+                onClick={() => onAdd?.(k.kind)}
+                className={cx(
+                  "relative inline-flex size-9 items-center justify-center rounded-lg border border-transparent hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  k.tone === "plain" ? "text-muted-foreground hover:text-foreground" : "text-primary",
+                )}
+              >
+                <Glyph name={k.glyph} size={16} />
+                {k.mark ? <em className="absolute -bottom-0.5 -right-0.5 rounded-full bg-primary px-1 text-2xs font-bold not-italic leading-none text-primary-foreground">{k.mark === "model" ? "AI" : "A"}</em> : null}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/registry/blocks/step-settings/README.md

@@ -0,0 +1,100 @@
+# StepSettings
+
+The panel for one step of an automation, made for its kind, and the panel
+for the automation as a whole. In a run the same panel is read-only and
+adds how the step went.
+
+**StepSettings** — a name; then what the kind needs, in a person's words:
+
+- **App action** — picked from the app's declared actions (`actions`),
+  with what to give it; in a team automation, which app.
+- **Connected tool** — the kind of account (mail, calendar, chat — never a
+  product), the tool, which account when there are several, what to give it.
+- **Condition** — "Go the Yes way when …"; anything else goes No.
+- **For each** — the list, at most how many, what to collect.
+- **Ask the model** — what to ask, Quick or Careful, standing instructions.
+- **Agent** — what it should do, and the most it may spend.
+- **Buy paid data** (a Zero step) — the paid service, its address, how it is
+  called (Ask, Send, Replace, Change), what to give it, and the most one call
+  may cost in dollars. Plain code: no model, and the same call is never paid
+  for twice.
+- **Set, Wait, Stop, Tell someone, Search, Another automation, Company
+  brain** — their own few fields.
+
+Every text field takes data from earlier steps (`data-picker`). For every
+step: **If it fails** (stop or carry on without it; how many tries) and a
+plain **To fix** list of what is wrong with it. In a run (`readOnly` and a
+`summary`): how it went, how many times, what it cost, what went in and
+what came out (for those who may read it), and the agent's fix (`fix-note`).
+
+**FlowSettings** — name; what it does; if it is still running when the next
+is due (skip, queue, run both); only when something changed; what happens
+when a step fails (retry, then the agent; the agent first; stop); the most
+one run may spend; what a manual run asks for first; its versions.
+
+```jsx
+import { StepSettings, FlowSettings } from "../components/blocks/step-settings";   // a Makersclaw app
+import { StepSettings, FlowSettings } from "@/components/makersclaw/blocks/step-settings";   // a shadcn project
+```
+
+`makersclaw add step-settings` lays `data-picker`, `fix-note` and
+`automation-model` with it. Client components. Each is a panel (a head, a
+scrolling body, a foot): place it beside or over the canvas.
+
+## Props
+
+### StepSettings
+
+- `step` — the step shown.
+- `available` — `availableBefore(def, step.id, stepTitle)`, plus
+  `inputs: [{ name, label }]` for a manual run's questions. `samples` —
+  `{ [stepId]: a real output }`, or null.
+- `apps` — `[{ id, name }]`; `ownedByApp` — an app's own automation needs
+  no app on an action. `actions` — `[{ name, description }]`.
+- `problems` — lines about this step (`issuesFor(issues, step.id)`).
+- `readOnly`, `summary` (a run's `summarizeSteps(rows).get(step.id)`),
+  `dataVisible` (the member may read what went in and out), `onKeepFix()`,
+  `runActions` (a node drawn under how the step went: run-view puts its
+  "Retry from this step" there).
+- `onChange(patch)` — fields to change, for `updateStep(def, id, patch)`.
+  `onRemove()` (asks first when the step holds others), `onDuplicate()`,
+  `onClose()`.
+
+### FlowSettings
+
+- `def`, `readOnly`, `versions` (`[{ version, kind, note, created_at }]`),
+  `liveVersion`, `onChange(def)`, `onClose`, `onReset` ("Reset to the app's
+  version", when it was edited from a shipped one).
+
+### The rows
+
+`TextField`, `NumberField`, `SelectField` and `SwitchField`: a labelled
+control each, on the kit's parts.
+
+## Never
+
+- Never show the definition's own keys: a step's words are a person's.
+  (The step id is shown small, because a run's rows and an app update
+  match steps by it.)
+- Never let the panel save: it only says what changed. The screen saves.
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { availableBefore, stepTitle, updateStep } from "../components/blocks/automation-model";
+import { StepSettings } from "../components/blocks/step-settings";
+
+const START = { format: 1, key: "t", name: "T", trigger: { type: "manual" }, inputs: {}, settings: {}, steps: [{ id: "tell", kind: "notify", message: "Hello" }] };
+
+export default function Panel() {
+  const [def, setDef] = useState(START);
+  const step = def.steps[0];
+  return (
+    <div className="h-[520px] max-w-sm overflow-hidden rounded-lg border border-border">
+      <StepSettings step={step} available={availableBefore(def, step.id, stepTitle)} onChange={(patch) => setDef(updateStep(def, step.id, patch))} onClose={() => {}} />
+    </div>
+  );
+}
+```

package/registry/blocks/step-settings/block.json

@@ -0,0 +1,44 @@
+{
+  "name": "step-settings",
+  "title": "StepSettings",
+  "description": "The panel for one step of an automation, made for its kind: a name; an app action picked from the app's declared actions with what to give it; a connected tool by kind of account; a condition; a for-each's list and limit; a model call's question and tier; an agent step's instructions and credit limit; a paid-data step's service, address and price ceiling; a wait; a stop; a note for the owner; and, for every step, what happens if it fails (stop or carry on, how many tries) and a plain list of what is wrong with it. Every text field takes data from earlier steps (data-picker). In a run the same panel is read-only and shows how the step went, what went in and what came out, and what the agent changed (fix-note). FlowSettings is the panel for the automation as a whole: name, what it does, overlap, what happens when a step fails, the most a run may spend, what a manual run asks first, and its versions.",
+  "useWhen": "A step or an automation is edited or read in your own screen. automation-editor and run-view place these for you.",
+  "tags": [
+    "automation",
+    "workflow",
+    "step",
+    "settings",
+    "form",
+    "panel",
+    "inspector",
+    "action",
+    "condition",
+    "loop",
+    "llm",
+    "agent",
+    "retry",
+    "failure",
+    "versions",
+    "n8n",
+    "make"
+  ],
+  "exports": [
+    "FlowSettings",
+    "NumberField",
+    "SelectField",
+    "StepSettings",
+    "SwitchField",
+    "TextField"
+  ],
+  "files": [
+    "index.js",
+    "step-settings.jsx",
+    "flow-settings.jsx",
+    "fields.jsx"
+  ],
+  "requires": [
+    "automation-model",
+    "data-picker",
+    "fix-note"
+  ]
+}