@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/reveal.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/reveal.ts
+/**
+* The words of a reply as they stream, shown at a reading pace. The model writes in bursts (often
+* the whole answer in a second or two, after it has thought): drawn as they land they pop in
+* rather than flow. Revealed a few characters a frame, faster the further behind, they flow like
+* writing and never lag the stream by more than about a second.
+*/
+/** At least this many characters a frame: about 150 a second at 60 frames. */
+const MIN_STEP = 2.5;
+/** How many characters to show next frame, of `total`, having shown `shown`. */
+function nextShown(shown, total) {
+	if (shown >= total) return total;
+	const behind = total - shown;
+	return Math.min(total, shown + Math.max(MIN_STEP, behind / 60));
+}
+/**
+* `text` as far as it is revealed: from `from` characters on, a little more each frame until all
+* of it shows. Text that starts again (a new reply) starts the reveal again; `onShown` hears how
+* far it got, so another reveal can go on from there.
+*/
+function useReveal(text, from = 0, onShown) {
+	const [shown, setShown] = useState(() => Math.min(from, text.length));
+	const told = useRef(onShown);
+	told.current = onShown;
+	const visible = Math.min(shown, text.length);
+	useEffect(() => {
+		if (visible >= text.length) return void 0;
+		if (typeof requestAnimationFrame === "undefined") {
+			setShown(text.length);
+			return;
+		}
+		const frame = requestAnimationFrame(() => {
+			setShown((now) => nextShown(Math.min(now, text.length), text.length));
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}, [visible, text.length]);
+	useEffect(() => {
+		told.current?.(Math.floor(visible));
+	}, [visible]);
+	return text.slice(0, Math.floor(visible));
+}
+//#endregion
+export { MIN_STEP, nextShown, useReveal };
+
+//# sourceMappingURL=reveal.js.map

package/dist/reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal.js","names":[],"sources":["../src/reveal.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * The words of a reply as they stream, shown at a reading pace. The model writes in bursts (often\n * the whole answer in a second or two, after it has thought): drawn as they land they pop in\n * rather than flow. Revealed a few characters a frame, faster the further behind, they flow like\n * writing and never lag the stream by more than about a second.\n */\n\n/** At least this many characters a frame: about 150 a second at 60 frames. */\nexport const MIN_STEP = 2.5;\n/** Within about this many frames whatever is behind is shown. */\nexport const CATCH_UP = 60;\n\n/** How many characters to show next frame, of `total`, having shown `shown`. */\nexport function nextShown(shown: number, total: number): number {\n  if (shown >= total) return total;\n  const behind = total - shown;\n  return Math.min(total, shown + Math.max(MIN_STEP, behind / CATCH_UP));\n}\n\n/**\n * `text` as far as it is revealed: from `from` characters on, a little more each frame until all\n * of it shows. Text that starts again (a new reply) starts the reveal again; `onShown` hears how\n * far it got, so another reveal can go on from there.\n */\nexport function useReveal(text: string, from = 0, onShown?: (count: number) => void): string {\n  const [shown, setShown] = useState(() => Math.min(from, text.length));\n  const told = useRef(onShown);\n  told.current = onShown;\n  const visible = Math.min(shown, text.length);\n\n  useEffect(() => {\n    if (visible >= text.length) return undefined;\n    if (typeof requestAnimationFrame === \"undefined\") {\n      setShown(text.length);\n      return undefined;\n    }\n    const frame = requestAnimationFrame(() => {\n      setShown((now) => nextShown(Math.min(now, text.length), text.length));\n    });\n    return () => {\n      cancelAnimationFrame(frame);\n    };\n  }, [visible, text.length]);\n\n  useEffect(() => {\n    told.current?.(Math.floor(visible));\n  }, [visible]);\n\n  return text.slice(0, Math.floor(visible));\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,WAAW;;AAKxB,SAAgB,UAAU,OAAe,OAAuB;CAC9D,IAAI,SAAS,OAAO,OAAO;CAC3B,MAAM,SAAS,QAAQ;CACvB,OAAO,KAAK,IAAI,OAAO,QAAQ,KAAK,IAAI,UAAU,SAAA,EAAiB,CAAC;AACtE;;;;;;AAOA,SAAgB,UAAU,MAAc,OAAO,GAAG,SAA2C;CAC3F,MAAM,CAAC,OAAO,YAAY,eAAe,KAAK,IAAI,MAAM,KAAK,MAAM,CAAC;CACpE,MAAM,OAAO,OAAO,OAAO;CAC3B,KAAK,UAAU;CACf,MAAM,UAAU,KAAK,IAAI,OAAO,KAAK,MAAM;CAE3C,gBAAgB;EACd,IAAI,WAAW,KAAK,QAAQ,OAAO,KAAA;EACnC,IAAI,OAAO,0BAA0B,aAAa;GAChD,SAAS,KAAK,MAAM;GACpB;EACF;EACA,MAAM,QAAQ,4BAA4B;GACxC,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,KAAK,MAAM,GAAG,KAAK,MAAM,CAAC;EACtE,CAAC;EACD,aAAa;GACX,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,SAAS,KAAK,MAAM,CAAC;CAEzB,gBAAgB;EACd,KAAK,UAAU,KAAK,MAAM,OAAO,CAAC;CACpC,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO,KAAK,MAAM,GAAG,KAAK,MAAM,OAAO,CAAC;AAC1C"}

package/dist/stepGlyphs.js

@@ -0,0 +1,62 @@
+import { ArrowUUpLeftIcon, ArrowsDownUpIcon, BookOpenTextIcon, BookmarkSimpleIcon, CameraIcon, ChatTeardropTextIcon, CursorClickIcon, DownloadSimpleIcon, FilePlusIcon, FileTextIcon, GlobeSimpleIcon, HandIcon, MagicWandIcon, MagnifyingGlassIcon, NotePencilIcon, PaperPlaneTiltIcon, PlayIcon, PlugIcon, SlidersHorizontalIcon, TextboxIcon, VideoCameraIcon, WrenchIcon } from "@phosphor-icons/react";
+//#region src/stepGlyphs.ts
+/**
+* A step's glyph by its action: the kind of work it is, v2's (reading, writing, changing,
+* searching, running, settings, asking, remembering, an app), so the list reads at a glance. An
+* action this package does not know, an agent's own among them, is work: a wrench.
+*/
+const GLYPHS = {
+	show: WrenchIcon,
+	ask_person: ChatTeardropTextIcon,
+	escalate: ChatTeardropTextIcon,
+	notify: ChatTeardropTextIcon,
+	search_files: MagnifyingGlassIcon,
+	remember: BookmarkSimpleIcon,
+	recall: BookmarkSimpleIcon,
+	load_skill: FileTextIcon,
+	data_find: MagnifyingGlassIcon,
+	data_add: FilePlusIcon,
+	data_update: NotePencilIcon,
+	squad_agents: FileTextIcon,
+	create_agent: FilePlusIcon,
+	update_agent: NotePencilIcon,
+	set_tools: SlidersHorizontalIcon,
+	test_automation: PlayIcon,
+	switch_automation: SlidersHorizontalIcon,
+	run_automation: PlayIcon,
+	find_apps: MagnifyingGlassIcon,
+	connect_app: PlugIcon,
+	app_tools: PlugIcon,
+	app_events: PlugIcon,
+	give_app: PlugIcon,
+	take_app: PlugIcon,
+	read_code: FileTextIcon,
+	write_code: FilePlusIcon,
+	delete_code: NotePencilIcon,
+	run_action: PlayIcon,
+	create_table: FilePlusIcon,
+	give_table: SlidersHorizontalIcon,
+	take_table: SlidersHorizontalIcon,
+	ask_key: ChatTeardropTextIcon,
+	ask_builder: MagicWandIcon,
+	agent_files: MagnifyingGlassIcon,
+	keep_agent_file: FilePlusIcon,
+	browser_open: GlobeSimpleIcon,
+	browser_read: BookOpenTextIcon,
+	browser_click: CursorClickIcon,
+	browser_fill: TextboxIcon,
+	browser_scroll: ArrowsDownUpIcon,
+	browser_back: ArrowUUpLeftIcon,
+	browser_submit: PaperPlaneTiltIcon,
+	browser_hand_over: HandIcon,
+	browser_attach: FilePlusIcon,
+	browser_download: DownloadSimpleIcon,
+	browser_screenshot: CameraIcon,
+	browser_record: VideoCameraIcon,
+	browser_fill_key: TextboxIcon
+};
+const stepGlyph = (action) => GLYPHS[action] ?? WrenchIcon;
+//#endregion
+export { stepGlyph };
+
+//# sourceMappingURL=stepGlyphs.js.map

package/dist/stepGlyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepGlyphs.js","names":[],"sources":["../src/stepGlyphs.ts"],"sourcesContent":["import {\n  ArrowUUpLeftIcon,\n  ArrowsDownUpIcon,\n  BookOpenTextIcon,\n  BookmarkSimpleIcon,\n  CameraIcon,\n  ChatTeardropTextIcon,\n  CursorClickIcon,\n  DownloadSimpleIcon,\n  FilePlusIcon,\n  FileTextIcon,\n  GlobeSimpleIcon,\n  HandIcon,\n  MagicWandIcon,\n  MagnifyingGlassIcon,\n  NotePencilIcon,\n  PaperPlaneTiltIcon,\n  PlayIcon,\n  PlugIcon,\n  SlidersHorizontalIcon,\n  TextboxIcon,\n  VideoCameraIcon,\n  WrenchIcon,\n  type Icon,\n} from \"@phosphor-icons/react\";\n\n/**\n * A step's glyph by its action: the kind of work it is, v2's (reading, writing, changing,\n * searching, running, settings, asking, remembering, an app), so the list reads at a glance. An\n * action this package does not know, an agent's own among them, is work: a wrench.\n */\nconst GLYPHS: Readonly<Record<string, Icon>> = {\n  show: WrenchIcon,\n  ask_person: ChatTeardropTextIcon,\n  escalate: ChatTeardropTextIcon,\n  notify: ChatTeardropTextIcon,\n  search_files: MagnifyingGlassIcon,\n  remember: BookmarkSimpleIcon,\n  recall: BookmarkSimpleIcon,\n  load_skill: FileTextIcon,\n  data_find: MagnifyingGlassIcon,\n  data_add: FilePlusIcon,\n  data_update: NotePencilIcon,\n  squad_agents: FileTextIcon,\n  create_agent: FilePlusIcon,\n  update_agent: NotePencilIcon,\n  set_tools: SlidersHorizontalIcon,\n  test_automation: PlayIcon,\n  switch_automation: SlidersHorizontalIcon,\n  run_automation: PlayIcon,\n  find_apps: MagnifyingGlassIcon,\n  connect_app: PlugIcon,\n  app_tools: PlugIcon,\n  app_events: PlugIcon,\n  give_app: PlugIcon,\n  take_app: PlugIcon,\n  read_code: FileTextIcon,\n  write_code: FilePlusIcon,\n  delete_code: NotePencilIcon,\n  run_action: PlayIcon,\n  create_table: FilePlusIcon,\n  give_table: SlidersHorizontalIcon,\n  take_table: SlidersHorizontalIcon,\n  ask_key: ChatTeardropTextIcon,\n  ask_builder: MagicWandIcon,\n  agent_files: MagnifyingGlassIcon,\n  keep_agent_file: FilePlusIcon,\n  browser_open: GlobeSimpleIcon,\n  browser_read: BookOpenTextIcon,\n  browser_click: CursorClickIcon,\n  browser_fill: TextboxIcon,\n  browser_scroll: ArrowsDownUpIcon,\n  browser_back: ArrowUUpLeftIcon,\n  browser_submit: PaperPlaneTiltIcon,\n  browser_hand_over: HandIcon,\n  browser_attach: FilePlusIcon,\n  browser_download: DownloadSimpleIcon,\n  browser_screenshot: CameraIcon,\n  browser_record: VideoCameraIcon,\n  browser_fill_key: TextboxIcon,\n};\n\nexport const stepGlyph = (action: string): Icon => GLYPHS[action] ?? WrenchIcon;\n"],"mappings":";;;;;;;AA+BA,MAAM,SAAyC;CAC7C,MAAM;CACN,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,cAAc;CACd,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,WAAW;CACX,UAAU;CACV,aAAa;CACb,cAAc;CACd,cAAc;CACd,cAAc;CACd,WAAW;CACX,iBAAiB;CACjB,mBAAmB;CACnB,gBAAgB;CAChB,WAAW;CACX,aAAa;CACb,WAAW;CACX,YAAY;CACZ,UAAU;CACV,UAAU;CACV,WAAW;CACX,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,cAAc;CACd,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,aAAa;CACb,aAAa;CACb,iBAAiB;CACjB,cAAc;CACd,cAAc;CACd,eAAe;CACf,cAAc;CACd,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,mBAAmB;CACnB,gBAAgB;CAChB,kBAAkB;CAClB,oBAAoB;CACpB,gBAAgB;CAChB,kBAAkB;AACpB;AAEA,MAAa,aAAa,WAAyB,OAAO,WAAW"}

package/dist/surface/Form.js

@@ -0,0 +1,264 @@
+import { useKit } from "../kit/context.js";
+import { Button } from "../kit/Button.js";
+import { Field } from "../kit/Field.js";
+import { FileField } from "../kit/FileField.js";
+import { Chips, Choices } from "../kit/Choices.js";
+import { Combobox } from "../kit/Combobox.js";
+import { DateField } from "../kit/DateField.js";
+import { Checkbox, NumberInput, SecretInput, TextArea, TextInput } from "../kit/Inputs.js";
+import { RangeField } from "../kit/RangeField.js";
+import { RatingField } from "../kit/RatingField.js";
+import { DateTimeField, TimeField } from "../kit/TimeField.js";
+import { useScope, useSurfaceParts } from "./scope.js";
+import { filled, problemsOf, startValues } from "./values.js";
+import { useRef, useState } from "react";
+import { CheckIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/surface/Form.tsx
+/**
+* Fields to fill and the one button that sends them. It starts from what the person already sent
+* when the surface was answered (and draws it so, closed), else from what the agent gave.
+*/
+function FormView({ block }) {
+	const { answered } = useScope();
+	const mine = answered?.name === block.action ? answered.data : void 0;
+	return /* @__PURE__ */ jsx(Filling, {
+		block,
+		answered: mine
+	}, mine ? "answered" : "open");
+}
+/**
+* The form's values, held here. Sending checks every field first: what is wrong shows under
+* each (a file field also says what it still waits on: a file on its way, one that failed), the
+* first such field takes the focus, and from then on the words follow the values.
+*/
+function Filling({ block, answered }) {
+	const { active, onAction, files } = useScope();
+	const { messages, code } = useKit();
+	const part = useSurfaceParts();
+	const form = useRef(null);
+	const [values, setValues] = useState(() => startValues(block.fields, answered));
+	const [waits, setWaits] = useState({});
+	const [tried, setTried] = useState(false);
+	const check = () => ({
+		...problemsOf(block.fields, values, code, messages),
+		...waits
+	});
+	const problems = tried ? check() : {};
+	const submit = (event) => {
+		event.preventDefault();
+		if (!active) return;
+		const found = check();
+		const first = block.fields.find((field) => field.name in found);
+		if (first) {
+			setTried(true);
+			focusField(form.current, first.name);
+			return;
+		}
+		onAction(filled(block, values, code, messages, files?.known));
+	};
+	const waitOn = (name) => (problem) => {
+		setWaits((now) => {
+			if ((now[name] ?? null) === problem) return now;
+			const { [name]: _, ...rest } = now;
+			return problem === null ? rest : {
+				...rest,
+				[name]: problem
+			};
+		});
+	};
+	return /* @__PURE__ */ jsx("form", {
+		ref: form,
+		noValidate: true,
+		onSubmit: submit,
+		part: "form",
+		className: part("sc-surface__form"),
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			disabled: !active && !answered,
+			children: [block.fields.map((field) => /* @__PURE__ */ jsx(Field, {
+				name: field.name,
+				label: field.kind === "checkbox" ? void 0 : field.label,
+				optional: !field.required,
+				help: field.help,
+				error: problems[field.name],
+				group: grouped(field),
+				children: (ids) => /* @__PURE__ */ jsx(Control, {
+					field,
+					ids,
+					value: values[field.name] ?? null,
+					disabled: !active,
+					onChange: (value) => setValues((now) => ({
+						...now,
+						[field.name]: value
+					})),
+					onWait: waitOn(field.name)
+				})
+			}, field.name)), /* @__PURE__ */ jsx("div", {
+				className: part("sc-surface__foot"),
+				children: answered ? /* @__PURE__ */ jsxs("p", {
+					className: part("sc-surface__sent"),
+					children: [/* @__PURE__ */ jsx(CheckIcon, {
+						"aria-hidden": true,
+						weight: "bold"
+					}), messages.sent]
+				}) : /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					tone: "primary",
+					className: part("sc-surface__submit"),
+					children: block.submit ?? messages.send
+				})
+			})]
+		})
+	});
+}
+/** Puts the focus on a field's first control that takes it. */
+function focusField(form, name) {
+	form?.querySelector(`[data-field="${name}"] :is(input, textarea, button[tabindex="0"], button:not([tabindex]))`)?.focus();
+}
+/** Whether the field draws as a group of buttons rather than one control a label points at. */
+function grouped({ kind, options = [], times }) {
+	if (kind === "select") return options.length <= 5;
+	if (kind === "multiselect") return options.length <= 8;
+	if (kind === "time") return times !== void 0;
+	return kind === "rating" || kind === "datetime" || kind === "file";
+}
+/**
+* The kit's control for the field's kind, given the field's narrowing; a select or a
+* multiselect by how many options it has: all in sight when few, a list to search when many.
+*/
+function Control({ field, ids, value, disabled, onChange, onWait }) {
+	const { messages } = useKit();
+	const { files } = useScope();
+	const control = {
+		...ids,
+		label: field.label ?? field.placeholder,
+		required: field.required,
+		disabled
+	};
+	const text = typeof value === "string" ? value : "";
+	const number = typeof value === "number" ? value : null;
+	const options = field.options ?? [];
+	switch (field.kind) {
+		case "text":
+		case "email":
+		case "phone":
+		case "url": return /* @__PURE__ */ jsx(TextInput, {
+			...control,
+			kind: field.kind,
+			value: text,
+			onChange,
+			placeholder: field.placeholder
+		});
+		case "textarea": return /* @__PURE__ */ jsx(TextArea, {
+			...control,
+			value: text,
+			onChange,
+			placeholder: field.placeholder
+		});
+		case "secret": return /* @__PURE__ */ jsx(SecretInput, {
+			...control,
+			value: text,
+			onChange,
+			placeholder: field.placeholder
+		});
+		case "number": return /* @__PURE__ */ jsx(NumberInput, {
+			...control,
+			value: number,
+			onChange,
+			min: field.min,
+			max: field.max,
+			step: field.step,
+			unit: field.unit,
+			placeholder: field.placeholder
+		});
+		case "checkbox": return /* @__PURE__ */ jsx(Checkbox, {
+			...control,
+			value: value === true,
+			onChange,
+			children: field.label ?? field.placeholder
+		});
+		case "date": return /* @__PURE__ */ jsx(DateField, {
+			...control,
+			value: text || null,
+			onChange,
+			dates: field.dates,
+			earliest: field.earliest,
+			latest: field.latest,
+			placeholder: field.placeholder
+		});
+		case "time": return /* @__PURE__ */ jsx(TimeField, {
+			...control,
+			value: text || null,
+			onChange,
+			times: field.times,
+			placeholder: field.placeholder
+		});
+		case "datetime": return /* @__PURE__ */ jsx(DateTimeField, {
+			...control,
+			value: text || null,
+			onChange,
+			dates: field.dates,
+			earliest: field.earliest,
+			latest: field.latest,
+			times: field.times
+		});
+		case "range": return /* @__PURE__ */ jsx(RangeField, {
+			...control,
+			value: number ?? field.min ?? 0,
+			onChange,
+			min: field.min,
+			max: field.max,
+			step: field.step,
+			unit: field.unit
+		});
+		case "rating": return /* @__PURE__ */ jsx(RatingField, {
+			...control,
+			value: number,
+			onChange,
+			max: field.max
+		});
+		case "select": return grouped(field) ? /* @__PURE__ */ jsx(Choices, {
+			...control,
+			options,
+			value: text || null,
+			onChange
+		}) : /* @__PURE__ */ jsx(Combobox, {
+			...control,
+			options,
+			value: text ? [text] : [],
+			multiple: false,
+			onChange: (ids) => onChange(ids[0] ?? null),
+			placeholder: field.placeholder ?? messages.pick
+		});
+		case "multiselect": {
+			const picked = Array.isArray(value) ? value : [];
+			return grouped(field) ? /* @__PURE__ */ jsx(Chips, {
+				...control,
+				options,
+				value: picked,
+				onChange
+			}) : /* @__PURE__ */ jsx(Combobox, {
+				...control,
+				options,
+				value: picked,
+				multiple: true,
+				onChange,
+				placeholder: field.placeholder ?? messages.pick
+			});
+		}
+		case "file": return /* @__PURE__ */ jsx(FileField, {
+			...control,
+			value: Array.isArray(value) ? value : [],
+			onChange,
+			files,
+			accept: field.accept,
+			multiple: field.multiple,
+			maxMb: field.max_mb,
+			onWait
+		});
+	}
+}
+//#endregion
+export { FormView };
+
+//# sourceMappingURL=Form.js.map

package/dist/surface/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":[],"sources":["../../src/surface/Form.tsx"],"sourcesContent":["import { CheckIcon } from \"@phosphor-icons/react\";\nimport { useRef, useState, type FormEvent } from \"react\";\n\nimport type { FieldValue, FormBlock, FormField } from \"../blocks\";\nimport { Button } from \"../kit/Button\";\nimport { Chips, Choices } from \"../kit/Choices\";\nimport { Combobox } from \"../kit/Combobox\";\nimport { useKit } from \"../kit/context\";\nimport { DateField } from \"../kit/DateField\";\nimport { Field, type FieldIds } from \"../kit/Field\";\nimport { FileField } from \"../kit/FileField\";\nimport { Checkbox, NumberInput, SecretInput, TextArea, TextInput } from \"../kit/Inputs\";\nimport { RangeField } from \"../kit/RangeField\";\nimport { RatingField } from \"../kit/RatingField\";\nimport { DateTimeField, TimeField } from \"../kit/TimeField\";\nimport { useScope, useSurfaceParts } from \"./scope\";\nimport { FEW_CHIPS, FEW_OPTIONS, filled, problemsOf, startValues, type Values } from \"./values\";\n\n/**\n * Fields to fill and the one button that sends them. It starts from what the person already sent\n * when the surface was answered (and draws it so, closed), else from what the agent gave.\n */\nexport function FormView({ block }: { block: FormBlock }) {\n  const { answered } = useScope();\n  const mine = answered?.name === block.action ? answered.data : undefined;\n  // An answer that lands later starts the form again from it.\n  return <Filling key={mine ? \"answered\" : \"open\"} block={block} answered={mine} />;\n}\n\n/**\n * The form's values, held here. Sending checks every field first: what is wrong shows under\n * each (a file field also says what it still waits on: a file on its way, one that failed), the\n * first such field takes the focus, and from then on the words follow the values.\n */\nfunction Filling({\n  block,\n  answered,\n}: {\n  block: FormBlock;\n  answered: Record<string, unknown> | undefined;\n}) {\n  const { active, onAction, files } = useScope();\n  const { messages, code } = useKit();\n  const part = useSurfaceParts();\n  const form = useRef<HTMLFormElement>(null);\n  const [values, setValues] = useState<Values>(() => startValues(block.fields, answered));\n  const [waits, setWaits] = useState<Readonly<Record<string, string>>>({});\n  const [tried, setTried] = useState(false);\n  const check = () => ({ ...problemsOf(block.fields, values, code, messages), ...waits });\n  const problems = tried ? check() : {};\n\n  const submit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    if (!active) return;\n    const found = check();\n    const first = block.fields.find((field) => field.name in found);\n    if (first) {\n      setTried(true);\n      focusField(form.current, first.name);\n      return;\n    }\n    onAction(filled(block, values, code, messages, files?.known));\n  };\n\n  const waitOn = (name: string) => (problem: string | null) => {\n    setWaits((now) => {\n      if ((now[name] ?? null) === problem) return now;\n      const { [name]: _, ...rest } = now;\n      return problem === null ? rest : { ...rest, [name]: problem };\n    });\n  };\n\n  return (\n    <form ref={form} noValidate onSubmit={submit} part=\"form\" className={part(\"sc-surface__form\")}>\n      {/* Answered, each control is closed on its own, so what still opens (a file sent) can. */}\n      <fieldset disabled={!active && !answered}>\n        {block.fields.map((field) => (\n          <Field\n            key={field.name}\n            name={field.name}\n            label={field.kind === \"checkbox\" ? undefined : field.label}\n            optional={!field.required}\n            help={field.help}\n            error={problems[field.name]}\n            group={grouped(field)}\n          >\n            {(ids) => (\n              <Control\n                field={field}\n                ids={ids}\n                value={values[field.name] ?? null}\n                disabled={!active}\n                onChange={(value) => setValues((now) => ({ ...now, [field.name]: value }))}\n                onWait={waitOn(field.name)}\n              />\n            )}\n          </Field>\n        ))}\n        <div className={part(\"sc-surface__foot\")}>\n          {answered ? (\n            <p className={part(\"sc-surface__sent\")}>\n              <CheckIcon aria-hidden weight=\"bold\" />\n              {messages.sent}\n            </p>\n          ) : (\n            <Button type=\"submit\" tone=\"primary\" className={part(\"sc-surface__submit\")}>\n              {block.submit ?? messages.send}\n            </Button>\n          )}\n        </div>\n      </fieldset>\n    </form>\n  );\n}\n\n/** Puts the focus on a field's first control that takes it. */\nfunction focusField(form: HTMLFormElement | null, name: string) {\n  form\n    ?.querySelector<HTMLElement>(\n      `[data-field=\"${name}\"] :is(input, textarea, button[tabindex=\"0\"], button:not([tabindex]))`,\n    )\n    ?.focus();\n}\n\n/** Whether the field draws as a group of buttons rather than one control a label points at. */\nfunction grouped({ kind, options = [], times }: FormField): boolean {\n  if (kind === \"select\") return options.length <= FEW_OPTIONS;\n  if (kind === \"multiselect\") return options.length <= FEW_CHIPS;\n  if (kind === \"time\") return times !== undefined;\n  return kind === \"rating\" || kind === \"datetime\" || kind === \"file\";\n}\n\n/**\n * The kit's control for the field's kind, given the field's narrowing; a select or a\n * multiselect by how many options it has: all in sight when few, a list to search when many.\n */\nfunction Control({\n  field,\n  ids,\n  value,\n  disabled,\n  onChange,\n  onWait,\n}: {\n  field: FormField;\n  ids: FieldIds;\n  value: FieldValue;\n  disabled: boolean;\n  onChange: (value: FieldValue) => void;\n  onWait: (problem: string | null) => void;\n}) {\n  const { messages } = useKit();\n  const { files } = useScope();\n  const control = {\n    ...ids,\n    label: field.label ?? field.placeholder,\n    required: field.required,\n    disabled,\n  };\n  const text = typeof value === \"string\" ? value : \"\";\n  const number = typeof value === \"number\" ? value : null;\n  const options = field.options ?? [];\n  switch (field.kind) {\n    case \"text\":\n    case \"email\":\n    case \"phone\":\n    case \"url\":\n      return (\n        <TextInput\n          {...control}\n          kind={field.kind}\n          value={text}\n          onChange={onChange}\n          placeholder={field.placeholder}\n        />\n      );\n    case \"textarea\":\n      return (\n        <TextArea {...control} value={text} onChange={onChange} placeholder={field.placeholder} />\n      );\n    case \"secret\":\n      return (\n        <SecretInput\n          {...control}\n          value={text}\n          onChange={onChange}\n          placeholder={field.placeholder}\n        />\n      );\n    case \"number\":\n      return (\n        <NumberInput\n          {...control}\n          value={number}\n          onChange={onChange}\n          min={field.min}\n          max={field.max}\n          step={field.step}\n          unit={field.unit}\n          placeholder={field.placeholder}\n        />\n      );\n    case \"checkbox\":\n      return (\n        <Checkbox {...control} value={value === true} onChange={onChange}>\n          {field.label ?? field.placeholder}\n        </Checkbox>\n      );\n    case \"date\":\n      return (\n        <DateField\n          {...control}\n          value={text || null}\n          onChange={onChange}\n          dates={field.dates}\n          earliest={field.earliest}\n          latest={field.latest}\n          placeholder={field.placeholder}\n        />\n      );\n    case \"time\":\n      return (\n        <TimeField\n          {...control}\n          value={text || null}\n          onChange={onChange}\n          times={field.times}\n          placeholder={field.placeholder}\n        />\n      );\n    case \"datetime\":\n      return (\n        <DateTimeField\n          {...control}\n          value={text || null}\n          onChange={onChange}\n          dates={field.dates}\n          earliest={field.earliest}\n          latest={field.latest}\n          times={field.times}\n        />\n      );\n    case \"range\":\n      return (\n        <RangeField\n          {...control}\n          value={number ?? field.min ?? 0}\n          onChange={onChange}\n          min={field.min}\n          max={field.max}\n          step={field.step}\n          unit={field.unit}\n        />\n      );\n    case \"rating\":\n      return <RatingField {...control} value={number} onChange={onChange} max={field.max} />;\n    case \"select\":\n      return grouped(field) ? (\n        <Choices {...control} options={options} value={text || null} onChange={onChange} />\n      ) : (\n        <Combobox\n          {...control}\n          options={options}\n          value={text ? [text] : []}\n          multiple={false}\n          onChange={(ids) => onChange(ids[0] ?? null)}\n          placeholder={field.placeholder ?? messages.pick}\n        />\n      );\n    case \"multiselect\": {\n      const picked = Array.isArray(value) ? value : [];\n      return grouped(field) ? (\n        <Chips {...control} options={options} value={picked} onChange={onChange} />\n      ) : (\n        <Combobox\n          {...control}\n          options={options}\n          value={picked}\n          multiple\n          onChange={onChange}\n          placeholder={field.placeholder ?? messages.pick}\n        />\n      );\n    }\n    case \"file\":\n      return (\n        <FileField\n          {...control}\n          value={Array.isArray(value) ? value : []}\n          onChange={onChange}\n          files={files}\n          accept={field.accept}\n          multiple={field.multiple}\n          maxMb={field.max_mb}\n          onWait={onWait}\n        />\n      );\n  }\n}\n"],"mappings":"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"}

package/dist/surface/Markdown.js

@@ -0,0 +1,42 @@
+import { parse } from "../markdown.js";
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/surface/Markdown.tsx
+/** A heading sits two levels under the page's own (its title, a dialog's): `#` is an `h3`. */
+const HEADINGS = [
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+/** The little Markdown of an agent's words, as headings, paragraphs and lists; the chat's too. */
+function Markdown({ text }) {
+	return parse(text).map((node, index) => {
+		if (node.kind === "heading") {
+			const Heading = HEADINGS[Math.min(node.level, HEADINGS.length) - 1] ?? "h6";
+			return /* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsx(Words, { inline: node.inline }) }, index);
+		}
+		return node.kind === "list" ? /* @__PURE__ */ jsx("ul", { children: node.items.map((item, at) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Words, { inline: item }) }, at)) }, index) : /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Words, { inline: node.inline }) }, index);
+	});
+}
+/** One line's words, its bold, italic, code and links drawn; a link opens apart, never in place. */
+function Words({ inline }) {
+	return inline.map((part, index) => {
+		switch (part.kind) {
+			case "text": return /* @__PURE__ */ jsx(Fragment, { children: part.text }, index);
+			case "strong": return /* @__PURE__ */ jsx("strong", { children: part.text }, index);
+			case "em": return /* @__PURE__ */ jsx("em", { children: part.text }, index);
+			case "code": return /* @__PURE__ */ jsx("code", { children: part.text }, index);
+			case "link": return /* @__PURE__ */ jsx("a", {
+				href: part.href,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				children: part.text
+			}, index);
+		}
+	});
+}
+//#endregion
+export { Markdown, Words };
+
+//# sourceMappingURL=Markdown.js.map

package/dist/surface/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.js","names":[],"sources":["../../src/surface/Markdown.tsx"],"sourcesContent":["import { Fragment } from \"react\";\n\nimport { parse, type Inline } from \"../markdown\";\n\n/** A heading sits two levels under the page's own (its title, a dialog's): `#` is an `h3`. */\nconst HEADINGS = [\"h3\", \"h4\", \"h5\", \"h6\"] as const;\n\n/** The little Markdown of an agent's words, as headings, paragraphs and lists; the chat's too. */\nexport function Markdown({ text }: { text: string }) {\n  return parse(text).map((node, index) => {\n    if (node.kind === \"heading\") {\n      const Heading = HEADINGS[Math.min(node.level, HEADINGS.length) - 1] ?? \"h6\";\n      return (\n        <Heading key={index}>\n          <Words inline={node.inline} />\n        </Heading>\n      );\n    }\n    return node.kind === \"list\" ? (\n      <ul key={index}>\n        {node.items.map((item, at) => (\n          <li key={at}>\n            <Words inline={item} />\n          </li>\n        ))}\n      </ul>\n    ) : (\n      <p key={index}>\n        <Words inline={node.inline} />\n      </p>\n    );\n  });\n}\n\n/** One line's words, its bold, italic, code and links drawn; a link opens apart, never in place. */\nexport function Words({ inline }: { inline: Inline[] }) {\n  return inline.map((part, index) => {\n    switch (part.kind) {\n      case \"text\":\n        return <Fragment key={index}>{part.text}</Fragment>;\n      case \"strong\":\n        return <strong key={index}>{part.text}</strong>;\n      case \"em\":\n        return <em key={index}>{part.text}</em>;\n      case \"code\":\n        return <code key={index}>{part.text}</code>;\n      case \"link\":\n        return (\n          <a key={index} href={part.href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {part.text}\n          </a>\n        );\n    }\n  });\n}\n"],"mappings":";;;;;AAKA,MAAM,WAAW;CAAC;CAAM;CAAM;CAAM;AAAI;;AAGxC,SAAgB,SAAS,EAAE,QAA0B;CACnD,OAAO,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UAAU;EACtC,IAAI,KAAK,SAAS,WAAW;GAC3B,MAAM,UAAU,SAAS,KAAK,IAAI,KAAK,OAAO,SAAS,MAAM,IAAI,MAAM;GACvE,OACE,oBAAC,SAAD,EAAA,UACE,oBAAC,OAAD,EAAO,QAAQ,KAAK,OAAS,CAAA,EACtB,GAFK,KAEL;EAEb;EACA,OAAO,KAAK,SAAS,SACnB,oBAAC,MAAD,EAAA,UACG,KAAK,MAAM,KAAK,MAAM,OACrB,oBAAC,MAAD,EAAA,UACE,oBAAC,OAAD,EAAO,QAAQ,KAAO,CAAA,EACpB,GAFK,EAEL,CACL,EACC,GANK,KAML,IAEJ,oBAAC,KAAD,EAAA,UACE,oBAAC,OAAD,EAAO,QAAQ,KAAK,OAAS,CAAA,EAC5B,GAFK,KAEL;CAEP,CAAC;AACH;;AAGA,SAAgB,MAAM,EAAE,UAAgC;CACtD,OAAO,OAAO,KAAK,MAAM,UAAU;EACjC,QAAQ,KAAK,MAAb;GACE,KAAK,QACH,OAAO,oBAAC,UAAD,EAAA,UAAuB,KAAK,KAAe,GAA5B,KAA4B;GACpD,KAAK,UACH,OAAO,oBAAC,UAAD,EAAA,UAAqB,KAAK,KAAa,GAA1B,KAA0B;GAChD,KAAK,MACH,OAAO,oBAAC,MAAD,EAAA,UAAiB,KAAK,KAAS,GAAtB,KAAsB;GACxC,KAAK,QACH,OAAO,oBAAC,QAAD,EAAA,UAAmB,KAAK,KAAW,GAAxB,KAAwB;GAC5C,KAAK,QACH,OACE,oBAAC,KAAD;IAAe,MAAM,KAAK;IAAM,QAAO;IAAS,KAAI;IACjD,UAAA,KAAK;GACL,GAFK,KAEL;EAET;CACF,CAAC;AACH"}

package/dist/surface/Surface.d.ts

@@ -1,21 +1,35 @@
-import type { SurfaceAction, SurfaceData } from "./types.js";
+import { Surface as Surface$1 } from "../blocks.js";
+import { KitLocale, KitMessages } from "../kit/messages.js";
+import { FileHost } from "../kit/uploads.js";
+import { SurfaceAction } from "./values.js";
+import { SurfaceClassNames, SurfaceComponents } from "./scope.js";
+//#region src/surface/Surface.d.ts
 export interface SurfaceProps {
-    surface: SurfaceData;
-    /**
-     * What the user did on the surface (a pick, a form), in the shape the API's `Action` expects.
-     * Without it the surface is a record of what was shown: nothing on it can be pressed.
-     */
-    onAction?: ((action: SurfaceAction) => void) | undefined;
-    /** The agent is at work on it now: a browser in it shows it working. */
-    active?: boolean | undefined;
+  surface: Surface$1;
+  onAction: (action: SurfaceAction) => void;
+  /** False draws the inputs disabled: a surface already answered, or one from an older turn. */
+  active?: boolean | undefined;
+  /** What the person already did on it: the option picked, the button pressed, the form sent. */
+  answered?: SurfaceAction | undefined;
+  components?: SurfaceComponents | undefined;
+  classNames?: SurfaceClassNames;
+  /** The words its controls say, in the host's language; English by default. */
+  messages?: Partial<KitMessages> | undefined;
+  /** The language of its calendar, days, times and numbers; English by default. */
+  locale?: KitLocale | undefined;
+  /**
+   * Where its file fields' files go (uploaded as they are picked) and how the ones sent are found
+   * and opened: the conversation's. None: a file field takes no files.
+   */
+  files?: FileHost | undefined;
 }
 /**
- * Draws what an agent shows: a surface of the `signalcore-basic.v1` catalog (see
- * `signalcore_core.ui`). Only catalog components exist here, styled by us, plus the host's own
- * where the provider registers them; a surface is data, never code. Picks and form submissions
- * go back as an action, never as typed text.
- *
- * A surface that cannot be drawn (a damaged payload, a component nobody here knows) or whose
- * drawing throws shows its text twin instead, so one bad surface never takes the page down.
+ * What the agent showed, drawn block by block with the kit's primitives (a `card` is a `Card`, a
+ * `list` a `List` of `Row`s, a form's fields its controls); a block or a field kind the API has
+ * grown since this renderer was written leaves the whole surface to its text twin, so nothing
+ * is half-drawn. Each block's action comes back through `onAction`; the host wraps it with the
+ * surface's id.
  */
-export declare function Surface(props: SurfaceProps): import("react").JSX.Element;
+export declare function Surface({ surface, onAction, active, answered, components, classNames, messages, locale, files }: SurfaceProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Surface.d.ts.map