@adea-ai/ui 0.140.0 → 0.142.0

package/dist/components/composites/confirmation/confirmation.js

@@ -0,0 +1,300 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { CodeBlock } from "../../ui/code-block/code-block.js";
+import { DiffBlock } from "../../ui/diff-block/diff-block.js";
+import { Spinner } from "../../ui/spinner/spinner.js";
+import { boundText } from "../sources/source.js";
+import { confirmationOutcome, decisionReason, isAwaitingAnswer, settleDecision } from "./confirmation-model.js";
+import { createComponent, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+import { Ban, Check, Clock, Lock, ShieldQuestion } from "lucide-solid";
+import { Show, createEffect, createSignal, createUniqueId, splitProps } from "solid-js";
+//#region src/components/composites/confirmation/confirmation.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<p class="m-0 mt-0.5 text-xs text-muted-foreground [overflow-wrap:anywhere]">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="shrink-0 text-xs text-muted-foreground">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<p role=status class="m-0 text-xs text-muted-foreground">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<p role=alert class="m-0 text-xs text-destructive [overflow-wrap:anywhere]">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<footer class="flex flex-wrap items-center justify-end gap-2"><span role=status class=visually-hidden>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<section data-slot=confirmation><header class="flex items-start gap-2.5"><span aria-hidden=true class="mt-0.5 text-muted-foreground [&amp;_svg]:size-4"></span><div class="min-w-0 flex-1"><h3 class="m-0 text-sm font-semibold [overflow-wrap:anywhere]">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<p tabindex=-1 role=status class="m-0 flex items-center gap-1.5 text-xs text-muted-foreground outline-none">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div role=region aria-label="Proposed changes"tabindex=0 class="max-h-64 overflow-auto rounded-xl outline-none focus-visible:ring-3 focus-visible:ring-primary-subtle">`);
+function Confirmation(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"state",
+		"title",
+		"description",
+		"details",
+		"onApprove",
+		"onDeny",
+		"approveLabel",
+		"denyLabel",
+		"disabledReason",
+		"error",
+		"resolvedBy",
+		"resolvedAt",
+		"children"
+	]);
+	const uid = createUniqueId();
+	const titleId = `${uid}-title`;
+	const reasonId = `${uid}-reason`;
+	const state = () => local.state ?? "requested";
+	const awaiting = () => isAwaitingAnswer(state());
+	const [pending, setPending] = createSignal(void 0);
+	const [failure, setFailure] = createSignal(void 0);
+	let inflight = false;
+	let root;
+	let outcome;
+	const reasonFor = (handler, missing) => {
+		if (pending() !== void 0) return "Your answer is being sent.";
+		return decisionReason({
+			state: state(),
+			disabledReason: local.disabledReason,
+			hasHandler: handler !== void 0,
+			unavailableFallback: "This request cannot be answered right now.",
+			missingFallback: missing
+		});
+	};
+	const approveReason = () => reasonFor(local.onApprove, "Approving is not available here.");
+	const denyReason = () => reasonFor(local.onDeny, "Denying is not available here.");
+	const reasons = () => [...new Set([approveReason(), denyReason()].filter(Boolean))].join(" ");
+	const error = () => local.error ? boundText(local.error, 240) : failure();
+	const choose = async (choice) => {
+		const handler = choice === "approve" ? local.onApprove : local.onDeny;
+		const blocked = choice === "approve" ? approveReason() : denyReason();
+		if (inflight || blocked || !awaiting()) return;
+		inflight = true;
+		setPending(choice);
+		setFailure(void 0);
+		const result = await settleDecision(handler);
+		inflight = false;
+		setPending(void 0);
+		if (!result.ok) setFailure(result.message);
+	};
+	let wasAwaiting = awaiting();
+	createEffect(() => {
+		const now = awaiting();
+		if (wasAwaiting && !now) {
+			const active = document.activeElement;
+			if (active === null || active === document.body || root?.contains(active)) outcome?.focus();
+		}
+		wasAwaiting = now;
+	});
+	const buttonProps = (choice) => {
+		const blocked = () => choice === "approve" ? approveReason() : denyReason();
+		const disabled = () => pending() !== void 0 || blocked() !== void 0;
+		return {
+			"aria-disabled": disabled() || void 0,
+			"aria-describedby": blocked() ? reasonId : void 0,
+			onClick: () => void choose(choice)
+		};
+	};
+	return (() => {
+		var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
+		use((element) => root = element, _el$);
+		setAttribute(_el$, "aria-labelledby", titleId);
+		spread(_el$, mergeProps({
+			get ["data-state"]() {
+				return state();
+			},
+			get ["class"]() {
+				return cn("flex w-full max-w-xl min-w-0 flex-col gap-3 rounded-xl border bg-card p-4", {
+					"border-ring": awaiting(),
+					"border-border": !awaiting()
+				});
+			}
+		}, rest), false, true);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return state() === "approved";
+			},
+			get children() {
+				return createComponent(Check, { "class": "text-success" });
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return state() === "denied";
+			},
+			get children() {
+				return createComponent(Ban, {});
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return state() === "expired";
+			},
+			get children() {
+				return createComponent(Clock, {});
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return state() === "unavailable";
+			},
+			get children() {
+				return createComponent(Lock, {});
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return state() === "requested";
+			},
+			get children() {
+				return createComponent(ShieldQuestion, {});
+			}
+		}), null);
+		setAttribute(_el$5, "id", titleId);
+		insert(_el$5, () => boundText(local.title, 200));
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return local.description;
+			},
+			get children() {
+				var _el$6 = _tmpl$();
+				insert(_el$6, () => boundText(local.description ?? "", 400));
+				return _el$6;
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return awaiting();
+			},
+			get children() {
+				var _el$7 = _tmpl$2();
+				insert(_el$7, () => state() === "requested" ? "Needs your answer" : "Cannot be answered now");
+				return _el$7;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.details;
+			},
+			children: (details) => createComponent(Details, { get details() {
+				return details();
+			} })
+		}), null);
+		insert(_el$, () => local.children, null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return awaiting();
+			},
+			get fallback() {
+				return (() => {
+					var _el$10 = _tmpl$7();
+					use((element) => outcome = element, _el$10);
+					insert(_el$10, () => confirmationOutcome(state(), local.resolvedBy, local.resolvedAt));
+					return _el$10;
+				})();
+			},
+			get children() {
+				return [
+					createComponent(Show, {
+						get when() {
+							return reasons();
+						},
+						get children() {
+							var _el$8 = _tmpl$3();
+							setAttribute(_el$8, "id", reasonId);
+							insert(_el$8, reasons);
+							return _el$8;
+						}
+					}),
+					createComponent(Show, {
+						get when() {
+							return error();
+						},
+						get children() {
+							var _el$9 = _tmpl$4();
+							insert(_el$9, error);
+							return _el$9;
+						}
+					}),
+					(() => {
+						var _el$0 = _tmpl$5(), _el$1 = _el$0.firstChild;
+						insert(_el$0, createComponent(Button, mergeProps({
+							type: "button",
+							variant: "outline",
+							size: "sm"
+						}, () => buttonProps("deny"), { get children() {
+							return [createComponent(Show, {
+								get when() {
+									return pending() === "deny";
+								},
+								get children() {
+									return createComponent(Spinner, {
+										size: "sm",
+										label: false
+									});
+								}
+							}), memo(() => local.denyLabel ?? "Deny")];
+						} })), _el$1);
+						insert(_el$0, createComponent(Button, mergeProps({
+							type: "button",
+							size: "sm"
+						}, () => buttonProps("approve"), { get children() {
+							return [createComponent(Show, {
+								get when() {
+									return pending() === "approve";
+								},
+								get children() {
+									return createComponent(Spinner, {
+										size: "sm",
+										label: false
+									});
+								}
+							}), memo(() => local.approveLabel ?? "Approve")];
+						} })), _el$1);
+						insert(_el$1, () => pending() !== void 0 ? "Sending your answer" : "");
+						return _el$0;
+					})()
+				];
+			}
+		}), null);
+		return _el$;
+	})();
+}
+/** A name from the host or the model, cleaned and clipped before it reaches a header. */
+function bounded(value, limit) {
+	return value ? boundText(value, limit) || void 0 : void 0;
+}
+function Details(props) {
+	return createComponent(Show, {
+		get when() {
+			return memo(() => props.details.kind === "diff")() && props.details;
+		},
+		get fallback() {
+			return createComponent(CodeBlock, {
+				size: "sm",
+				get code() {
+					return props.details.code;
+				},
+				get language() {
+					return bounded(props.details.language, 24);
+				},
+				get title() {
+					return bounded(props.details.title, 80);
+				},
+				complete: true,
+				wrap: true,
+				maxHeight: "14rem"
+			});
+		},
+		children: (diff) => (() => {
+			var _el$11 = _tmpl$8();
+			insert(_el$11, createComponent(DiffBlock, {
+				get patch() {
+					return diff().patch;
+				},
+				get title() {
+					return bounded(diff().title, 80);
+				},
+				complete: true
+			}));
+			return _el$11;
+		})()
+	});
+}
+//#endregion
+export { Confirmation };
+
+//# sourceMappingURL=confirmation.js.map

package/dist/components/composites/confirmation/confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmation.js","names":["Ban","Check","Clock","Lock","ShieldQuestion","createEffect","createSignal","createUniqueId","Show","splitProps","ComponentProps","JSX","cn","Button","CodeBlock","DiffBlock","Spinner","boundText","confirmationOutcome","decisionReason","isAwaitingAnswer","settleDecision","ConfirmationState","ConfirmationDetails","Readonly","kind","code","language","title","patch","ConfirmationProps","Omit","state","description","details","onApprove","Promise","onDeny","approveLabel","denyLabel","disabledReason","error","resolvedBy","resolvedAt","children","Element","Choice","Confirmation","props","local","rest","uid","titleId","reasonId","awaiting","pending","setPending","undefined","failure","setFailure","inflight","root","HTMLElement","outcome","HTMLParagraphElement","reasonFor","handler","missing","hasHandler","unavailableFallback","missingFallback","approveReason","denyReason","reasons","Set","filter","Boolean","join","choose","choice","blocked","result","ok","message","wasAwaiting","now","active","document","activeElement","body","contains","focus","buttonProps","disabled","onClick","_el$","_tmpl$6","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$use","element","_$setAttribute","_$spread","_$mergeProps","data-state","class","_$insert","_$createComponent","when","_el$6","_tmpl$","_el$7","_tmpl$2","Details","fallback","_el$10","_tmpl$7","_el$8","_tmpl$3","_el$9","_tmpl$4","_el$0","_tmpl$5","_el$1","type","variant","size","label","_$memo","bounded","value","limit","Extract","complete","wrap","maxHeight","diff","_el$11","_tmpl$8","_$mergeProps","_$createComponent","_$memo"],"sources":["../../../../src/components/composites/confirmation/confirmation.tsx"],"sourcesContent":["import { Ban, Check, Clock, Lock, ShieldQuestion } from 'lucide-solid'\nimport {\n  createEffect,\n  createSignal,\n  createUniqueId,\n  Show,\n  splitProps,\n  type ComponentProps,\n  type JSX,\n} from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button'\nimport { CodeBlock } from '../../ui/code-block'\nimport { DiffBlock } from '../../ui/diff-block'\nimport { Spinner } from '../../ui/spinner'\nimport { boundText } from '../sources/source'\nimport {\n  confirmationOutcome,\n  decisionReason,\n  isAwaitingAnswer,\n  settleDecision,\n  type ConfirmationState,\n} from './confirmation-model'\n\n/**\n * Confirmation.\n *\n * The agent has stopped a tool and will not continue until the person approves or\n * denies it. Like `Questionnaire`, this is one of the two elements in a transcript\n * the reader *must* act on, so it is allowed a card surface — and the border is\n * the focus ring's colour only while it is waiting. Once answered it drops to a\n * hairline and a one-line record, because a settled decision should read as\n * history, not as something still asking.\n *\n * ## It shows what is being approved, and nothing else\n *\n * `title` and `description` say what the tool wants to do; `details` is the\n * evidence, rendered as `CodeBlock size=\"sm\"` (a command, a request) or\n * `DiffBlock` (a patch). Details are text: never interpreted, and a long one\n * scrolls inside its block. Approve and Deny exist only while the request is\n * open; afterwards they are replaced by the outcome, with *who* and *when* only if\n * the host supplied them.\n *\n * ## The host owns authority\n *\n * Whether this client may answer is not decided here. No handler, or a host\n * `disabledReason`, or the `unavailable` state, leaves the buttons visible and\n * disabled with the reason beside them in words — never hidden, because a reader\n * who cannot see the choice cannot tell whether the agent is waiting on them.\n *\n * ## Answering is a round trip\n *\n * `onApprove` / `onDeny` may return a promise. While one is pending both buttons\n * refuse input (a synchronous guard as well as the signal, so a double click in\n * one tick cannot submit twice) and the pressed one shows a spinner. A failure\n * shows `error` (or the rejection's own message) and re-enables the buttons. The\n * buttons use `aria-disabled` rather than `disabled`: a native disabled button\n * drops focus, and the reader's place would be lost mid-decision. When the state\n * settles, focus moves to the outcome line if it was in the card, so a keyboard\n * user is not stranded on a control that no longer exists.\n */\nexport type ConfirmationDetails =\n  | Readonly<{ kind: 'code'; code: string; language?: string; title?: string }>\n  | Readonly<{ kind: 'diff'; patch: string; title?: string }>\n\nexport type ConfirmationProps = Omit<ComponentProps<'section'>, 'title' | 'onError'> & {\n  state?: ConfirmationState\n  /** What the tool wants to do, as a short sentence. */\n  title: string\n  description?: string\n  details?: ConfirmationDetails\n  onApprove?: () => void | Promise<void>\n  onDeny?: () => void | Promise<void>\n  approveLabel?: string\n  denyLabel?: string\n  /** Why the choice cannot be made right now; shown in words beside the buttons. */\n  disabledReason?: string\n  /** A failed answer, in words. Overrides the rejection's own message. */\n  error?: string\n  /** Who answered, once settled. Omit if unknown; nothing is assumed. */\n  resolvedBy?: string\n  /** When it was answered, already formatted for the reader. Omit if unknown. */\n  resolvedAt?: string\n  /** Extra content between the details and the buttons. */\n  children?: JSX.Element\n}\n\ntype Choice = 'approve' | 'deny'\n\nexport function Confirmation(props: ConfirmationProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'state',\n    'title',\n    'description',\n    'details',\n    'onApprove',\n    'onDeny',\n    'approveLabel',\n    'denyLabel',\n    'disabledReason',\n    'error',\n    'resolvedBy',\n    'resolvedAt',\n    'children',\n  ])\n  const uid = createUniqueId()\n  const titleId = `${uid}-title`\n  const reasonId = `${uid}-reason`\n  const state = (): ConfirmationState => local.state ?? 'requested'\n  const awaiting = () => isAwaitingAnswer(state())\n  const [pending, setPending] = createSignal<Choice | undefined>(undefined)\n  const [failure, setFailure] = createSignal<string | undefined>(undefined)\n  let inflight = false\n  let root: HTMLElement | undefined\n  let outcome: HTMLParagraphElement | undefined\n\n  const reasonFor = (handler: (() => void | Promise<void>) | undefined, missing: string) => {\n    if (pending() !== undefined) return 'Your answer is being sent.'\n    return decisionReason({\n      state: state(),\n      disabledReason: local.disabledReason,\n      hasHandler: handler !== undefined,\n      unavailableFallback: 'This request cannot be answered right now.',\n      missingFallback: missing,\n    })\n  }\n  const approveReason = () => reasonFor(local.onApprove, 'Approving is not available here.')\n  const denyReason = () => reasonFor(local.onDeny, 'Denying is not available here.')\n  // One sentence per distinct reason, so two identical reasons are not read twice.\n  const reasons = () => [...new Set([approveReason(), denyReason()].filter(Boolean))].join(' ')\n  const error = () => (local.error ? boundText(local.error, 240) : failure())\n\n  const choose = async (choice: Choice) => {\n    const handler = choice === 'approve' ? local.onApprove : local.onDeny\n    const blocked = choice === 'approve' ? approveReason() : denyReason()\n    if (inflight || blocked || !awaiting()) return\n    inflight = true\n    setPending(choice)\n    setFailure(undefined)\n    const result = await settleDecision(handler)\n    inflight = false\n    setPending(undefined)\n    if (!result.ok) setFailure(result.message)\n  }\n\n  // The buttons are replaced by the outcome line; keep a keyboard reader in the card.\n  // The previous value is kept by hand: `on(..., { defer: true })` does not record the\n  // input of its skipped first run, so its \"previous\" is undefined on the first change.\n  let wasAwaiting = awaiting()\n  createEffect(() => {\n    const now = awaiting()\n    if (wasAwaiting && !now) {\n      const active = document.activeElement\n      if (active === null || active === document.body || root?.contains(active)) {\n        outcome?.focus()\n      }\n    }\n    wasAwaiting = now\n  })\n\n  const buttonProps = (choice: Choice) => {\n    const blocked = () => (choice === 'approve' ? approveReason() : denyReason())\n    const disabled = () => pending() !== undefined || blocked() !== undefined\n    return {\n      'aria-disabled': disabled() || undefined,\n      'aria-describedby': blocked() ? reasonId : undefined,\n      onClick: () => void choose(choice),\n    }\n  }\n\n  return (\n    <section\n      ref={(element) => (root = element)}\n      data-slot=\"confirmation\"\n      data-state={state()}\n      aria-labelledby={titleId}\n      class={cn('flex w-full max-w-xl min-w-0 flex-col gap-3 rounded-xl border bg-card p-4', {\n        'border-ring': awaiting(),\n        'border-border': !awaiting(),\n      })}\n      {...rest}\n    >\n      <header class=\"flex items-start gap-2.5\">\n        <span aria-hidden=\"true\" class=\"mt-0.5 text-muted-foreground [&_svg]:size-4\">\n          <Show when={state() === 'approved'}>\n            <Check class=\"text-success\" />\n          </Show>\n          <Show when={state() === 'denied'}>\n            <Ban />\n          </Show>\n          <Show when={state() === 'expired'}>\n            <Clock />\n          </Show>\n          <Show when={state() === 'unavailable'}>\n            <Lock />\n          </Show>\n          <Show when={state() === 'requested'}>\n            <ShieldQuestion />\n          </Show>\n        </span>\n        <div class=\"min-w-0 flex-1\">\n          <h3 id={titleId} class=\"m-0 text-sm font-semibold [overflow-wrap:anywhere]\">\n            {boundText(local.title, 200)}\n          </h3>\n          <Show when={local.description}>\n            <p class=\"m-0 mt-0.5 text-xs text-muted-foreground [overflow-wrap:anywhere]\">\n              {boundText(local.description ?? '', 400)}\n            </p>\n          </Show>\n        </div>\n        <Show when={awaiting()}>\n          <span class=\"shrink-0 text-xs text-muted-foreground\">\n            {state() === 'requested' ? 'Needs your answer' : 'Cannot be answered now'}\n          </span>\n        </Show>\n      </header>\n\n      <Show when={local.details}>{(details) => <Details details={details()} />}</Show>\n\n      {local.children}\n\n      <Show\n        when={awaiting()}\n        fallback={\n          <p\n            ref={(element) => (outcome = element)}\n            tabindex=\"-1\"\n            role=\"status\"\n            class=\"m-0 flex items-center gap-1.5 text-xs text-muted-foreground outline-none\"\n          >\n            {confirmationOutcome(state(), local.resolvedBy, local.resolvedAt)}\n          </p>\n        }\n      >\n        <Show when={reasons()}>\n          <p id={reasonId} role=\"status\" class=\"m-0 text-xs text-muted-foreground\">\n            {reasons()}\n          </p>\n        </Show>\n        <Show when={error()}>\n          <p role=\"alert\" class=\"m-0 text-xs text-destructive [overflow-wrap:anywhere]\">\n            {error()}\n          </p>\n        </Show>\n        <footer class=\"flex flex-wrap items-center justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" {...buttonProps('deny')}>\n            <Show when={pending() === 'deny'}>\n              <Spinner size=\"sm\" label={false} />\n            </Show>\n            {local.denyLabel ?? 'Deny'}\n          </Button>\n          <Button type=\"button\" size=\"sm\" {...buttonProps('approve')}>\n            <Show when={pending() === 'approve'}>\n              <Spinner size=\"sm\" label={false} />\n            </Show>\n            {local.approveLabel ?? 'Approve'}\n          </Button>\n          {/* Present from the start: a live region inserted with its text is not reliably announced. */}\n          <span role=\"status\" class=\"visually-hidden\">\n            {pending() !== undefined ? 'Sending your answer' : ''}\n          </span>\n        </footer>\n      </Show>\n    </section>\n  )\n}\n\n/** A name from the host or the model, cleaned and clipped before it reaches a header. */\nfunction bounded(value: string | undefined, limit: number): string | undefined {\n  return value ? boundText(value, limit) || undefined : undefined\n}\n\nfunction Details(props: { details: ConfirmationDetails }) {\n  return (\n    <Show\n      when={props.details.kind === 'diff' && props.details}\n      fallback={\n        <CodeBlock\n          size=\"sm\"\n          code={(props.details as Extract<ConfirmationDetails, { kind: 'code' }>).code}\n          language={bounded(\n            (props.details as Extract<ConfirmationDetails, { kind: 'code' }>).language,\n            24\n          )}\n          title={bounded(props.details.title, 80)}\n          complete\n          wrap\n          maxHeight=\"14rem\"\n        />\n      }\n    >\n      {(diff) => (\n        // The diff block has no height cap of its own, so the cap lives here; a\n        // scroller must be focusable, hence the labelled region and tab stop.\n        <div\n          role=\"region\"\n          aria-label=\"Proposed changes\"\n          tabindex=\"0\"\n          class=\"max-h-64 overflow-auto rounded-xl outline-none focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n        >\n          <DiffBlock\n            patch={(diff() as Extract<ConfirmationDetails, { kind: 'diff' }>).patch}\n            title={bounded(diff().title, 80)}\n            complete\n          />\n        </div>\n      )}\n    </Show>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/confirmation/index.d.ts

@@ -0,0 +1,3 @@
+export { Confirmation, type ConfirmationDetails, type ConfirmationProps } from './confirmation';
+export { confirmationOutcome, decisionReason, isAwaitingAnswer, settleDecision, type ConfirmationState, type DecisionResult, } from './confirmation-model';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/composites/confirmation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAC/F,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,KAAK,iBAAiB,EACtB,KAAK,cAAc,GACpB,MAAM,sBAAsB,CAAA"}

package/dist/components/composites/confirmation/index.js

@@ -0,0 +1,3 @@
+import { confirmationOutcome, decisionReason, isAwaitingAnswer, settleDecision } from "./confirmation-model.js";
+import { Confirmation } from "./confirmation.js";
+export { Confirmation, confirmationOutcome, decisionReason, isAwaitingAnswer, settleDecision };

package/dist/components/composites/context/context-model.d.ts

@@ -0,0 +1,69 @@
+/**
+ * The figures a host may know about a context window. Every one is optional and
+ * means "the host told us", so absence is never rendered as zero: `used: 0` is a
+ * fresh conversation, a missing `used` is an unknown.
+ */
+export type ContextBreakdown = Readonly<{
+    input?: number;
+    output?: number;
+    cacheRead?: number;
+    cacheWrite?: number;
+    reasoning?: number;
+}>;
+export type ContextCost = Readonly<{
+    amount: number;
+    /** An ISO 4217 code such as `USD`. Without one the amount is shown unlabelled. */
+    currency?: string;
+}>;
+export type ContextFigures = Readonly<{
+    /** Tokens in the window now. */
+    used?: number;
+    /** The window's size. */
+    total?: number;
+    breakdown?: ContextBreakdown;
+    cost?: ContextCost;
+}>;
+/** A usable figure: a finite, non-negative number. NaN, Infinity and negatives are "unknown". */
+export declare function isFigure(value: number | undefined): value is number;
+/** The breakdown entries the host actually supplied, in a fixed reading order. */
+export declare function breakdownRows(breakdown: ContextBreakdown | undefined): readonly {
+    key: string;
+    label: string;
+    value: number;
+}[];
+/**
+ * Whether there is anything to show. When there is not, the trigger is not
+ * rendered at all: an empty gauge or "0%" would assert an empty window.
+ */
+export declare function hasContextFigures(figures: ContextFigures): boolean;
+/**
+ * Percentage of the window used, rounded. Needs both figures and a non-empty
+ * window; it is not clamped, because "112%" is the truth about an overrun and a
+ * clamp would hide it (the ring is what saturates, not the number).
+ */
+export declare function contextPercent(used: number | undefined, total: number | undefined): number | undefined;
+export type ContextLevel = 'normal' | 'high' | 'critical' | 'full';
+/**
+ * How full, in steps. The step changes an icon and a word as well as a colour, so
+ * it reads without colour vision and in a screen reader.
+ */
+export declare function contextLevel(percent: number | undefined): ContextLevel;
+export declare function contextLevelWord(level: ContextLevel): string | undefined;
+/** Compact token count for the trigger: 950, 1.2K, 48.2K, 1.3M. */
+export declare function formatTokens(value: number, locale?: string): string;
+/** The exact count for the popover. */
+export declare function formatExact(value: number, locale?: string): string;
+/**
+ * Money, with its currency symbol when the code is valid. An unrecognised code
+ * (`Intl` throws a RangeError) is shown as written, bounded, rather than being
+ * swapped for a currency the host never named.
+ */
+export declare function formatCost(cost: ContextCost, locale?: string): string;
+/**
+ * The trigger's accessible name: the whole claim in words. Percent when both
+ * figures are known, else the most informative thing that is.
+ */
+export declare function contextLabel(figures: ContextFigures, locale?: string): string | undefined;
+/** The short visible text inside the trigger. Always a prefix-compatible part of `contextLabel`. */
+export declare function contextShort(figures: ContextFigures, locale?: string): string | undefined;
+//# sourceMappingURL=context-model.d.ts.map

package/dist/components/composites/context/context-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-model.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/context/context-model.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAC,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAC,CAAA;AAEF,iGAAiG;AACjG,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,MAAM,CAEnE;AAUD,kFAAkF;AAClF,wBAAgB,aAAa,CAC3B,SAAS,EAAE,gBAAgB,GAAG,SAAS,GACtC,SAAS;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CAQ1D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAOlE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,EAAE,MAAM,GAAG,SAAS,GACxB,MAAM,GAAG,SAAS,CAGpB;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAElE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,CAMtE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS,CAWxE;AAED,mEAAmE;AACnE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAU,GAAG,MAAM,CAIpE;AAED,uCAAuC;AACvC,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAU,GAAG,MAAM,CAEnE;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,SAAU,GAAG,MAAM,CAYtE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAU,GAAG,MAAM,GAAG,SAAS,CAY1F;AAED,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAU,GAAG,MAAM,GAAG,SAAS,CAQ1F"}

package/dist/components/composites/context/context-model.js

@@ -0,0 +1,122 @@
+import { boundText } from "../sources/source.js";
+//#region src/components/composites/context/context-model.ts
+/** A usable figure: a finite, non-negative number. NaN, Infinity and negatives are "unknown". */
+function isFigure(value) {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
+var BREAKDOWN_ROWS = [
+	["input", "Input"],
+	["output", "Output"],
+	["cacheRead", "Cache read"],
+	["cacheWrite", "Cache write"],
+	["reasoning", "Reasoning"]
+];
+/** The breakdown entries the host actually supplied, in a fixed reading order. */
+function breakdownRows(breakdown) {
+	if (!breakdown) return [];
+	const rows = [];
+	for (const [key, label] of BREAKDOWN_ROWS) {
+		const value = breakdown[key];
+		if (isFigure(value)) rows.push({
+			key,
+			label,
+			value
+		});
+	}
+	return rows;
+}
+/**
+* Whether there is anything to show. When there is not, the trigger is not
+* rendered at all: an empty gauge or "0%" would assert an empty window.
+*/
+function hasContextFigures(figures) {
+	return isFigure(figures.used) || isFigure(figures.total) || breakdownRows(figures.breakdown).length > 0 || figures.cost !== void 0 && isFigure(figures.cost.amount);
+}
+/**
+* Percentage of the window used, rounded. Needs both figures and a non-empty
+* window; it is not clamped, because "112%" is the truth about an overrun and a
+* clamp would hide it (the ring is what saturates, not the number).
+*/
+function contextPercent(used, total) {
+	if (!isFigure(used) || !isFigure(total) || total <= 0) return void 0;
+	return Math.round(used / total * 100);
+}
+/**
+* How full, in steps. The step changes an icon and a word as well as a colour, so
+* it reads without colour vision and in a screen reader.
+*/
+function contextLevel(percent) {
+	if (percent === void 0) return "normal";
+	if (percent >= 100) return "full";
+	if (percent >= 90) return "critical";
+	if (percent >= 75) return "high";
+	return "normal";
+}
+function contextLevelWord(level) {
+	switch (level) {
+		case "high": return "Getting full";
+		case "critical": return "Nearly full";
+		case "full": return "Full";
+		case "normal": return;
+	}
+}
+/** Compact token count for the trigger: 950, 1.2K, 48.2K, 1.3M. */
+function formatTokens(value, locale = "en-US") {
+	return new Intl.NumberFormat(locale, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value);
+}
+/** The exact count for the popover. */
+function formatExact(value, locale = "en-US") {
+	return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+}
+/**
+* Money, with its currency symbol when the code is valid. An unrecognised code
+* (`Intl` throws a RangeError) is shown as written, bounded, rather than being
+* swapped for a currency the host never named.
+*/
+function formatCost(cost, locale = "en-US") {
+	const digits = {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: cost.amount < 1 ? 4 : 2
+	};
+	if (!cost.currency) return new Intl.NumberFormat(locale, digits).format(cost.amount);
+	try {
+		return new Intl.NumberFormat(locale, {
+			...digits,
+			style: "currency",
+			currency: cost.currency
+		}).format(cost.amount);
+	} catch {
+		return `${new Intl.NumberFormat(locale, digits).format(cost.amount)} ${boundText(cost.currency, 8)}`;
+	}
+}
+/**
+* The trigger's accessible name: the whole claim in words. Percent when both
+* figures are known, else the most informative thing that is.
+*/
+function contextLabel(figures, locale = "en-US") {
+	const percent = contextPercent(figures.used, figures.total);
+	if (percent !== void 0) {
+		const word = contextLevelWord(contextLevel(percent));
+		return `${percent}% of context used${word ? `, ${word.toLowerCase()}` : ""}`;
+	}
+	if (isFigure(figures.used)) return `${formatTokens(figures.used, locale)} tokens used`;
+	if (isFigure(figures.total)) return `${formatTokens(figures.total, locale)} token context window`;
+	if (breakdownRows(figures.breakdown).length > 0) return "Token usage";
+	if (figures.cost && isFigure(figures.cost.amount)) return `Cost ${formatCost(figures.cost, locale)}`;
+}
+/** The short visible text inside the trigger. Always a prefix-compatible part of `contextLabel`. */
+function contextShort(figures, locale = "en-US") {
+	const percent = contextPercent(figures.used, figures.total);
+	if (percent !== void 0) return `${percent}%`;
+	if (isFigure(figures.used)) return formatTokens(figures.used, locale);
+	if (isFigure(figures.total)) return formatTokens(figures.total, locale);
+	if (breakdownRows(figures.breakdown).length > 0) return "Usage";
+	if (figures.cost && isFigure(figures.cost.amount)) return formatCost(figures.cost, locale);
+}
+//#endregion
+export { breakdownRows, contextLabel, contextLevel, contextLevelWord, contextPercent, contextShort, formatCost, formatExact, formatTokens, hasContextFigures, isFigure };
+
+//# sourceMappingURL=context-model.js.map

package/dist/components/composites/context/context-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-model.js","names":[],"sources":["../../../../src/components/composites/context/context-model.ts"],"sourcesContent":["import { boundText } from '../sources/source'\n\n/**\n * The figures a host may know about a context window. Every one is optional and\n * means \"the host told us\", so absence is never rendered as zero: `used: 0` is a\n * fresh conversation, a missing `used` is an unknown.\n */\nexport type ContextBreakdown = Readonly<{\n  input?: number\n  output?: number\n  cacheRead?: number\n  cacheWrite?: number\n  reasoning?: number\n}>\n\nexport type ContextCost = Readonly<{\n  amount: number\n  /** An ISO 4217 code such as `USD`. Without one the amount is shown unlabelled. */\n  currency?: string\n}>\n\nexport type ContextFigures = Readonly<{\n  /** Tokens in the window now. */\n  used?: number\n  /** The window's size. */\n  total?: number\n  breakdown?: ContextBreakdown\n  cost?: ContextCost\n}>\n\n/** A usable figure: a finite, non-negative number. NaN, Infinity and negatives are \"unknown\". */\nexport function isFigure(value: number | undefined): value is number {\n  return typeof value === 'number' && Number.isFinite(value) && value >= 0\n}\n\nconst BREAKDOWN_ROWS = [\n  ['input', 'Input'],\n  ['output', 'Output'],\n  ['cacheRead', 'Cache read'],\n  ['cacheWrite', 'Cache write'],\n  ['reasoning', 'Reasoning'],\n] as const\n\n/** The breakdown entries the host actually supplied, in a fixed reading order. */\nexport function breakdownRows(\n  breakdown: ContextBreakdown | undefined\n): readonly { key: string; label: string; value: number }[] {\n  if (!breakdown) return []\n  const rows: { key: string; label: string; value: number }[] = []\n  for (const [key, label] of BREAKDOWN_ROWS) {\n    const value = breakdown[key]\n    if (isFigure(value)) rows.push({ key, label, value })\n  }\n  return rows\n}\n\n/**\n * Whether there is anything to show. When there is not, the trigger is not\n * rendered at all: an empty gauge or \"0%\" would assert an empty window.\n */\nexport function hasContextFigures(figures: ContextFigures): boolean {\n  return (\n    isFigure(figures.used) ||\n    isFigure(figures.total) ||\n    breakdownRows(figures.breakdown).length > 0 ||\n    (figures.cost !== undefined && isFigure(figures.cost.amount))\n  )\n}\n\n/**\n * Percentage of the window used, rounded. Needs both figures and a non-empty\n * window; it is not clamped, because \"112%\" is the truth about an overrun and a\n * clamp would hide it (the ring is what saturates, not the number).\n */\nexport function contextPercent(\n  used: number | undefined,\n  total: number | undefined\n): number | undefined {\n  if (!isFigure(used) || !isFigure(total) || total <= 0) return undefined\n  return Math.round((used / total) * 100)\n}\n\nexport type ContextLevel = 'normal' | 'high' | 'critical' | 'full'\n\n/**\n * How full, in steps. The step changes an icon and a word as well as a colour, so\n * it reads without colour vision and in a screen reader.\n */\nexport function contextLevel(percent: number | undefined): ContextLevel {\n  if (percent === undefined) return 'normal'\n  if (percent >= 100) return 'full'\n  if (percent >= 90) return 'critical'\n  if (percent >= 75) return 'high'\n  return 'normal'\n}\n\nexport function contextLevelWord(level: ContextLevel): string | undefined {\n  switch (level) {\n    case 'high':\n      return 'Getting full'\n    case 'critical':\n      return 'Nearly full'\n    case 'full':\n      return 'Full'\n    case 'normal':\n      return undefined\n  }\n}\n\n/** Compact token count for the trigger: 950, 1.2K, 48.2K, 1.3M. */\nexport function formatTokens(value: number, locale = 'en-US'): string {\n  return new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(\n    value\n  )\n}\n\n/** The exact count for the popover. */\nexport function formatExact(value: number, locale = 'en-US'): string {\n  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value)\n}\n\n/**\n * Money, with its currency symbol when the code is valid. An unrecognised code\n * (`Intl` throws a RangeError) is shown as written, bounded, rather than being\n * swapped for a currency the host never named.\n */\nexport function formatCost(cost: ContextCost, locale = 'en-US'): string {\n  const digits = { minimumFractionDigits: 2, maximumFractionDigits: cost.amount < 1 ? 4 : 2 }\n  if (!cost.currency) return new Intl.NumberFormat(locale, digits).format(cost.amount)\n  try {\n    return new Intl.NumberFormat(locale, {\n      ...digits,\n      style: 'currency',\n      currency: cost.currency,\n    }).format(cost.amount)\n  } catch {\n    return `${new Intl.NumberFormat(locale, digits).format(cost.amount)} ${boundText(cost.currency, 8)}`\n  }\n}\n\n/**\n * The trigger's accessible name: the whole claim in words. Percent when both\n * figures are known, else the most informative thing that is.\n */\nexport function contextLabel(figures: ContextFigures, locale = 'en-US'): string | undefined {\n  const percent = contextPercent(figures.used, figures.total)\n  if (percent !== undefined) {\n    const word = contextLevelWord(contextLevel(percent))\n    return `${percent}% of context used${word ? `, ${word.toLowerCase()}` : ''}`\n  }\n  if (isFigure(figures.used)) return `${formatTokens(figures.used, locale)} tokens used`\n  if (isFigure(figures.total)) return `${formatTokens(figures.total, locale)} token context window`\n  if (breakdownRows(figures.breakdown).length > 0) return 'Token usage'\n  if (figures.cost && isFigure(figures.cost.amount))\n    return `Cost ${formatCost(figures.cost, locale)}`\n  return undefined\n}\n\n/** The short visible text inside the trigger. Always a prefix-compatible part of `contextLabel`. */\nexport function contextShort(figures: ContextFigures, locale = 'en-US'): string | undefined {\n  const percent = contextPercent(figures.used, figures.total)\n  if (percent !== undefined) return `${percent}%`\n  if (isFigure(figures.used)) return formatTokens(figures.used, locale)\n  if (isFigure(figures.total)) return formatTokens(figures.total, locale)\n  if (breakdownRows(figures.breakdown).length > 0) return 'Usage'\n  if (figures.cost && isFigure(figures.cost.amount)) return formatCost(figures.cost, locale)\n  return undefined\n}\n"],"mappings":"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"}

package/dist/components/composites/context/context.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps } from 'solid-js';
+import { Popover } from '../../ui/popover';
+import { type ContextFigures } from './context-model';
+/**
+ * Context.
+ *
+ * How much of the model's context window is in use, as a compact trigger that
+ * opens the figures behind it. It sits next to the composer, where the reader
+ * decides whether to keep going or start fresh, so the trigger is small and the
+ * detail is a press away rather than permanent chrome.
+ *
+ * ## Every figure is a claim, so every figure is optional
+ *
+ * A host passes whatever it knows: `used`, `total`, a `breakdown` (input, output,
+ * cache read and write, reasoning), a `cost`. A missing value is omitted — never
+ * drawn as 0, which would say "empty" about a window nobody measured — and when
+ * *nothing* is known the trigger is not rendered at all (`hasContextFigures`).
+ * Nothing is estimated here; the one derived row, "Remaining", appears only when
+ * both `used` and `total` are known and `used` does not exceed `total`.
+ *
+ * ## Never colour alone
+ *
+ * The ring shows the fraction; past 75% the ring gives way to a warning glyph
+ * (triangle, then octagon at 90% and above), the popover says "Getting full",
+ * "Nearly full" or "Full" in words, and the trigger's accessible name speaks the
+ * same. An overrun is reported as it is ("112%"); only the ring saturates.
+ *
+ * It is a `Popover`, not a hover card: the figures must be reachable by keyboard
+ * and by touch, and Escape closes it and returns focus to the trigger.
+ */
+export type ContextProps = ContextFigures & {
+    /** BCP 47 tag for number formatting. Defaults to `en-US`, so output is stable. */
+    locale?: string;
+    placement?: ComponentProps<typeof Popover>['placement'];
+    class?: string;
+};
+export declare function Context(props: ContextProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/composites/context/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/context/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAGrE,OAAO,EAAE,OAAO,EAAgD,MAAM,kBAAkB,CAAA;AAExF,OAAO,EAWL,KAAK,cAAc,EAEpB,MAAM,iBAAiB,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG;IAC1C,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,kCAmG1C"}