@athenaintel/react 0.57.2 → 0.60.0

package/dist/chat/typed-interrupts/interrupt-card-shell.js

@@ -0,0 +1,182 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ClockIcon, AlertCircleIcon } from "lucide-react";
+import { useRef, useEffect } from "react";
+import { cn } from "cnfast";
+const WAIT_FOR_STREAMING_MESSAGE = "Please wait for the conversation to finish streaming";
+const INTERACTION_DELAY_MS = 200;
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-1.5", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "size-2 rounded-full",
+        status === "processing" && "animate-pulse bg-blue-500",
+        status === "completed" && "bg-green-500",
+        (status === "pending" || status === "awaiting-input") && "animate-pulse bg-yellow-500"
+      )
+    }
+  ) });
+}
+function InteractionWatcher({
+  onInteraction,
+  children
+}) {
+  const ref = useRef(null);
+  const onInteractionRef = useRef(onInteraction);
+  onInteractionRef.current = onInteraction;
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return void 0;
+    let ready = false;
+    let fired = false;
+    const readyTimer = setTimeout(() => {
+      ready = true;
+    }, INTERACTION_DELAY_MS);
+    const handle = (event) => {
+      if (!ready || fired) return;
+      if (event instanceof MouseEvent && event.type === "click") {
+        const rect = element.getBoundingClientRect();
+        const outside = rect.width > 0 && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
+        if (outside) return;
+      }
+      fired = true;
+      onInteractionRef.current();
+    };
+    const kinds = ["click", "keydown", "touchstart", "scroll"];
+    for (const kind of kinds) element.addEventListener(kind, handle, { capture: true, passive: true });
+    return () => {
+      clearTimeout(readyTimer);
+      for (const kind of kinds) element.removeEventListener(kind, handle, { capture: true });
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref, children });
+}
+function InterruptCardShell({
+  status = "awaiting-input",
+  title,
+  description,
+  icon,
+  content,
+  actions,
+  hasTimeout = false,
+  onInteraction
+}) {
+  const card = /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-sm", children: [
+    /* @__PURE__ */ jsx(StatusDot, { status }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-foreground [&_svg]:size-5", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground text-sm", children: title }),
+          description ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground text-sm", children: description }) : null
+        ] })
+      ] }),
+      content ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: content }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null
+    ] })
+  ] });
+  if (hasTimeout && onInteraction) {
+    return /* @__PURE__ */ jsx(InteractionWatcher, { onInteraction, children: card });
+  }
+  return card;
+}
+function HoverHint({ label, children }) {
+  return /* @__PURE__ */ jsxs("span", { className: "group/typed-hint relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute bottom-full left-1/2 z-20 mb-1 w-max max-w-xs -translate-x-1/2 rounded-md bg-foreground px-3 py-1.5 text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/typed-hint:opacity-100 group-hover/typed-hint:opacity-100 group-hover/typed-hint:delay-300",
+        children: label
+      }
+    )
+  ] });
+}
+function WaitForStreamingHint({
+  active,
+  children
+}) {
+  if (!active) return children;
+  return /* @__PURE__ */ jsx(HoverHint, { label: WAIT_FOR_STREAMING_MESSAGE, children });
+}
+function formatCountdown(seconds) {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor(seconds % 86400 / 3600);
+  if (days > 0) return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  if (minutes > 0) return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  return `${secs}s`;
+}
+function formatSecondsForDisplay(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, "0")}`;
+}
+function TimedInterruptCountdown({
+  timeoutRemaining,
+  timeoutSeconds,
+  isTimedOut,
+  isTimeoutCancelled,
+  className
+}) {
+  if (isTimeoutCancelled) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-green-600", className), children: [
+      /* @__PURE__ */ jsx(ClockIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Timeout cancelled - take your time" })
+    ] });
+  }
+  if (timeoutRemaining === null || timeoutSeconds === null) return null;
+  if (isTimedOut) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-amber-600", className), children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4 animate-pulse" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Timed out - resuming automatically..." })
+    ] });
+  }
+  const progress = timeoutSeconds > 0 ? (timeoutSeconds - timeoutRemaining) / timeoutSeconds * 100 : 100;
+  const urgent = timeoutRemaining <= 10;
+  const critical = timeoutRemaining <= 5;
+  const tone = critical ? "text-red-500" : urgent ? "text-amber-500" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), "data-testid": "typed-interrupt-countdown", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ClockIcon, { className: cn("size-4", tone, critical && "animate-pulse") }),
+      /* @__PURE__ */ jsxs("span", { className: cn("font-medium text-sm", tone), children: [
+        "Auto-continuing in ",
+        formatCountdown(timeoutRemaining)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "h-full rounded-full transition-all duration-1000 ease-linear",
+          critical ? "bg-red-500" : urgent ? "bg-amber-500" : "bg-primary"
+        ),
+        style: { width: `${Math.max(0, 100 - progress)}%` }
+      }
+    ) })
+  ] });
+}
+function formatKeyAsName(key) {
+  if (!key) return "";
+  return key.replace(/_/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+export {
+  HoverHint,
+  InterruptCardShell,
+  TimedInterruptCountdown,
+  WAIT_FOR_STREAMING_MESSAGE,
+  WaitForStreamingHint,
+  formatKeyAsName,
+  formatSecondsForDisplay
+};
+//# sourceMappingURL=interrupt-card-shell.js.map

package/dist/chat/typed-interrupts/interrupt-card-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interrupt-card-shell.js","sources":["../../../src/chat/typed-interrupts/interrupt-card-shell.tsx"],"sourcesContent":["/**\n * The look every typed card shares (Olympus's `InterruptProgressUI`): a\n * status dot, the kind's icon, a title and description, the card's content and\n * its actions. A timed park's card also stops the backend's timer the first\n * time the person clicks, types, touches or scrolls inside it (Olympus's\n * `InterruptInteractionWrapper`), never on a pointer merely passing over it or\n * on the focus moving in.\n */\nimport { AlertCircleIcon, ClockIcon } from 'lucide-react';\nimport { type ReactElement, type ReactNode, useEffect, useRef } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport type InterruptCardStatus = 'pending' | 'awaiting-input' | 'processing' | 'completed';\n\n/** What a disabled control says while the conversation still streams. */\nexport const WAIT_FOR_STREAMING_MESSAGE = 'Please wait for the conversation to finish streaming';\n\n/** Clicks, keys, touches and scrolls inside this long after mount are the auto-focus, not the person. */\nconst INTERACTION_DELAY_MS = 200;\n\nfunction StatusDot({ status }: { status: InterruptCardStatus }) {\n  return (\n    <div className=\"shrink-0 pt-1.5\">\n      <div\n        aria-hidden\n        className={cn(\n          'size-2 rounded-full',\n          status === 'processing' && 'animate-pulse bg-blue-500',\n          status === 'completed' && 'bg-green-500',\n          (status === 'pending' || status === 'awaiting-input') && 'animate-pulse bg-yellow-500',\n        )}\n      />\n    </div>\n  );\n}\n\n/**\n * Calls `onInteraction` once, on the first click, key, touch or scroll inside\n * `children` after the auto-focus window. Listens on the element itself, so\n * the wrapper is no control of its own.\n */\nfunction InteractionWatcher({\n  onInteraction,\n  children,\n}: {\n  onInteraction: () => void;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const onInteractionRef = useRef(onInteraction);\n  onInteractionRef.current = onInteraction;\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return undefined;\n    let ready = false;\n    let fired = false;\n    const readyTimer = setTimeout(() => {\n      ready = true;\n    }, INTERACTION_DELAY_MS);\n    const handle = (event: Event) => {\n      if (!ready || fired) return;\n      // A click whose point lies outside the card (a portal's) is not the card's.\n      if (event instanceof MouseEvent && event.type === 'click') {\n        const rect = element.getBoundingClientRect();\n        const outside =\n          rect.width > 0 &&\n          (event.clientX < rect.left ||\n            event.clientX > rect.right ||\n            event.clientY < rect.top ||\n            event.clientY > rect.bottom);\n        if (outside) return;\n      }\n      fired = true;\n      onInteractionRef.current();\n    };\n    const kinds = ['click', 'keydown', 'touchstart', 'scroll'] as const;\n    for (const kind of kinds) element.addEventListener(kind, handle, { capture: true, passive: true });\n    return () => {\n      clearTimeout(readyTimer);\n      for (const kind of kinds) element.removeEventListener(kind, handle, { capture: true });\n    };\n  }, []);\n  return <div ref={ref}>{children}</div>;\n}\n\nexport interface InterruptCardShellProps {\n  status?: InterruptCardStatus;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  content?: ReactNode;\n  actions?: ReactNode;\n  /** The park has a timer: the first interaction inside calls `onInteraction`. */\n  hasTimeout?: boolean;\n  onInteraction?: () => void;\n}\n\nexport function InterruptCardShell({\n  status = 'awaiting-input',\n  title,\n  description,\n  icon,\n  content,\n  actions,\n  hasTimeout = false,\n  onInteraction,\n}: InterruptCardShellProps) {\n  const card = (\n    <div className=\"flex w-full items-start gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-sm\">\n      <StatusDot status={status} />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n        <div className=\"flex items-start gap-2\">\n          {icon ? <div className=\"shrink-0 text-foreground [&_svg]:size-5\">{icon}</div> : null}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"font-medium text-foreground text-sm\">{title}</div>\n            {description ? (\n              <div className=\"mt-1 text-muted-foreground text-sm\">{description}</div>\n            ) : null}\n          </div>\n        </div>\n        {content ? <div className=\"flex flex-col gap-3\">{content}</div> : null}\n        {actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n      </div>\n    </div>\n  );\n  if (hasTimeout && onInteraction) {\n    return <InteractionWatcher onInteraction={onInteraction}>{card}</InteractionWatcher>;\n  }\n  return card;\n}\n\n/**\n * A short hint shown above `children` while the pointer rests on them (or the\n * focus is inside). Plain CSS, not a Radix tooltip: a host whose bundler puts\n * every dependency in its startup chunk (the Office task pane) would otherwise\n * download the tooltip's popper stack on every open for these lazily loaded\n * cards. The hint is visual only; the control's own text names it.\n */\nexport function HoverHint({ label, children }: { label: ReactNode; children: ReactElement }) {\n  return (\n    <span className=\"group/typed-hint relative inline-flex\">\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute bottom-full left-1/2 z-20 mb-1 w-max max-w-xs -translate-x-1/2 rounded-md bg-foreground px-3 py-1.5 text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/typed-hint:opacity-100 group-hover/typed-hint:opacity-100 group-hover/typed-hint:delay-300\"\n      >\n        {label}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Wraps a control that is off while the conversation streams, saying why on\n * hover; otherwise renders the control as it is.\n */\nexport function WaitForStreamingHint({\n  active,\n  children,\n}: {\n  active: boolean;\n  children: ReactElement;\n}) {\n  if (!active) return children;\n  return <HoverHint label={WAIT_FOR_STREAMING_MESSAGE}>{children}</HoverHint>;\n}\n\nfunction formatCountdown(seconds: number): string {\n  const days = Math.floor(seconds / 86_400);\n  const hours = Math.floor((seconds % 86_400) / 3600);\n  if (days > 0) return hours > 0 ? `${days}d ${hours}h` : `${days}d`;\n  const minutes = Math.floor((seconds % 3600) / 60);\n  const secs = Math.floor(seconds % 60);\n  if (hours > 0) {\n    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n  }\n  if (minutes > 0) return `${minutes}:${secs.toString().padStart(2, '0')}`;\n  return `${secs}s`;\n}\n\n/** `m:ss` (or `h:mm:ss`) of a wait. */\nexport function formatSecondsForDisplay(seconds: number): string {\n  const hours = Math.floor(seconds / 3600);\n  const minutes = Math.floor((seconds % 3600) / 60);\n  const secs = Math.floor(seconds % 60);\n  if (hours > 0) {\n    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n  }\n  return `${minutes}:${secs.toString().padStart(2, '0')}`;\n}\n\n/** The auto-continue countdown of a timed park (Olympus's `TimedInterruptCountdown`). */\nexport function TimedInterruptCountdown({\n  timeoutRemaining,\n  timeoutSeconds,\n  isTimedOut,\n  isTimeoutCancelled,\n  className,\n}: {\n  timeoutRemaining: number | null;\n  timeoutSeconds: number | null;\n  isTimedOut: boolean;\n  isTimeoutCancelled: boolean;\n  className?: string;\n}) {\n  if (isTimeoutCancelled) {\n    return (\n      <div className={cn('flex items-center gap-2 text-green-600', className)}>\n        <ClockIcon className=\"size-4\" />\n        <span className=\"font-medium text-sm\">Timeout cancelled - take your time</span>\n      </div>\n    );\n  }\n  if (timeoutRemaining === null || timeoutSeconds === null) return null;\n  if (isTimedOut) {\n    return (\n      <div className={cn('flex items-center gap-2 text-amber-600', className)}>\n        <AlertCircleIcon className=\"size-4 animate-pulse\" />\n        <span className=\"font-medium text-sm\">Timed out - resuming automatically...</span>\n      </div>\n    );\n  }\n  const progress = timeoutSeconds > 0 ? ((timeoutSeconds - timeoutRemaining) / timeoutSeconds) * 100 : 100;\n  const urgent = timeoutRemaining <= 10;\n  const critical = timeoutRemaining <= 5;\n  const tone = critical ? 'text-red-500' : urgent ? 'text-amber-500' : 'text-muted-foreground';\n  return (\n    <div className={cn('flex flex-col gap-1', className)} data-testid=\"typed-interrupt-countdown\">\n      <div className=\"flex items-center gap-2\">\n        <ClockIcon className={cn('size-4', tone, critical && 'animate-pulse')} />\n        <span className={cn('font-medium text-sm', tone)}>\n          Auto-continuing in {formatCountdown(timeoutRemaining)}\n        </span>\n      </div>\n      <div className=\"h-1 w-full overflow-hidden rounded-full bg-muted\">\n        <div\n          className={cn(\n            'h-full rounded-full transition-all duration-1000 ease-linear',\n            critical ? 'bg-red-500' : urgent ? 'bg-amber-500' : 'bg-primary',\n          )}\n          style={{ width: `${Math.max(0, 100 - progress)}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n\n/** `delete_assets` → `Delete Assets` (Olympus's `formatToolIdAsName`). */\nexport function formatKeyAsName(key: string): string {\n  if (!key) return '';\n  return key\n    .replace(/_/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n}\n"],"names":[],"mappings":"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"}

package/dist/chat/typed-interrupts/json-schema-form.cjs

@@ -0,0 +1,388 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const require$$0 = require("react");
+const interruptCardShell = require("./interrupt-card-shell.cjs");
+const cnfast = require("cnfast");
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeJsonSchema(schema) {
+  if (!isRecord(schema)) return {};
+  const result = { ...schema };
+  if (Array.isArray(result.anyOf) && result.anyOf.length === 2) {
+    const [first, second] = result.anyOf;
+    const kept = isRecord(first) && first.type !== void 0 && isRecord(second) && second.type === "null" ? first : isRecord(first) && first.type === "null" && isRecord(second) && second.type !== void 0 ? second : null;
+    if (kept) {
+      const { anyOf: _anyOf, ...rest } = result;
+      const merged = { ...rest, ...kept };
+      if (merged.default === null) delete merged.default;
+      return normalizeJsonSchema(merged);
+    }
+  }
+  if (isRecord(result.properties)) {
+    result.properties = Object.fromEntries(
+      Object.entries(result.properties).map(([key, value]) => [key, normalizeJsonSchema(value)])
+    );
+  }
+  if (isRecord(result.items)) result.items = normalizeJsonSchema(result.items);
+  return result;
+}
+function resolve(schema, root) {
+  let current = schema;
+  if (Array.isArray(current.allOf) && current.allOf.length === 1 && isRecord(current.allOf[0])) {
+    const { allOf: _allOf, ...rest } = current;
+    current = { ...current.allOf[0], ...rest };
+  }
+  for (let depth = 0; depth < 8 && typeof current.$ref === "string"; depth += 1) {
+    const match = /^#\/(\$defs|definitions)\/(.+)$/.exec(current.$ref);
+    const definitions = match ? root[match[1]] : void 0;
+    const target = match && isRecord(definitions) ? definitions[match[2]] : void 0;
+    if (!isRecord(target)) break;
+    const { $ref: _ref, ...rest } = current;
+    current = { ...normalizeJsonSchema(target), ...rest };
+  }
+  return current;
+}
+function properties(schema) {
+  return isRecord(schema.properties) ? Object.entries(schema.properties).flatMap(
+    ([key, value]) => isRecord(value) ? [[key, value]] : []
+  ) : [];
+}
+function requiredKeys(schema) {
+  return new Set(Array.isArray(schema.required) ? schema.required.filter((key) => typeof key === "string") : []);
+}
+function schemaDefaults(schema, root = schema) {
+  const values = {};
+  for (const [key, raw] of properties(schema)) {
+    const field = resolve(raw, root);
+    if ("default" in field) {
+      values[key] = field.default;
+    } else if (field.type === "object" && isRecord(field.properties)) {
+      const nested = schemaDefaults(field, root);
+      if (Object.keys(nested).length > 0) values[key] = nested;
+    }
+  }
+  return values;
+}
+function fieldKind(field) {
+  if (Array.isArray(field.enum) && field.enum.length > 0) return "enum";
+  switch (field.type) {
+    case "boolean":
+      return "boolean";
+    case "integer":
+    case "number":
+      return "number";
+    case "string":
+      return "string";
+    case "object":
+      return isRecord(field.properties) ? "object" : "json";
+    case "array": {
+      const items = isRecord(field.items) ? field.items : {};
+      if (Array.isArray(items.enum) && items.enum.length > 0) return "choices";
+      return items.type === "string" || items.type === "number" || items.type === "integer" ? "lines" : "json";
+    }
+    default:
+      return "json";
+  }
+}
+const STRING_INPUT_TYPES = {
+  date: "date",
+  "date-time": "datetime-local",
+  time: "time",
+  email: "email",
+  uri: "url"
+};
+const INPUT_CLASS = "w-full rounded-md border border-input bg-background px-3 py-1.5 text-foreground text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50";
+function pathKey(path) {
+  return path.join(".");
+}
+function setIn(value, path, next) {
+  const [head, ...rest] = path;
+  if (head === void 0) return value;
+  const copy = { ...value };
+  if (rest.length === 0) {
+    if (next === void 0) delete copy[head];
+    else copy[head] = next;
+    return copy;
+  }
+  copy[head] = setIn(isRecord(copy[head]) ? copy[head] : {}, rest, next);
+  return copy;
+}
+function getIn(value, path) {
+  let current = value;
+  for (const key of path) current = isRecord(current) ? current[key] : void 0;
+  return current;
+}
+function JsonSchemaForm(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ObjectFields, { ...props, objectSchema: props.schema, path: [] });
+}
+function ObjectFields({
+  objectSchema,
+  path,
+  ...form
+}) {
+  const required = requiredKeys(objectSchema);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: properties(objectSchema).map(([key, raw]) => /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
+    {
+      ...form,
+      field: resolve(raw, form.schema),
+      name: key,
+      path: [...path, key],
+      required: required.has(key)
+    },
+    key
+  )) });
+}
+function Field({
+  field,
+  name,
+  path,
+  required,
+  ...form
+}) {
+  const id = require$$0.useId();
+  const key = pathKey(path);
+  const label = typeof field.title === "string" && field.title ? field.title : interruptCardShell.formatKeyAsName(name);
+  const description = typeof field.description === "string" ? field.description : null;
+  const error = form.errors[key];
+  const current = getIn(form.value, path);
+  const set = (next) => form.onChange(setIn(form.value, path, next));
+  const setDraft = (text) => form.onDraftsChange({ ...form.drafts, [key]: text });
+  const kind = fieldKind(field);
+  const describedBy = [description ? `${id}-description` : null, error ? `${id}-error` : null].filter(Boolean).join(" ") || void 0;
+  let control;
+  switch (kind) {
+    case "object":
+      return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "flex flex-col gap-2 rounded-md border border-border p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "px-1 font-medium text-foreground text-sm", children: label }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: description }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(ObjectFields, { ...form, objectSchema: field, path })
+      ] });
+    case "boolean":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: "flex items-center gap-2 text-foreground text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              type: "checkbox",
+              checked: current === true,
+              onChange: (event) => set(event.target.checked),
+              disabled: form.disabled,
+              "aria-describedby": describedBy
+            }
+          ),
+          label
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FieldNotes, { id, description, error })
+      ] });
+    case "enum": {
+      const options = field.enum.map((option) => String(option));
+      const selected = current === void 0 || current === null ? "" : String(current);
+      control = /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          id,
+          value: selected,
+          onChange: (event) => {
+            const index = options.indexOf(event.target.value);
+            set(index >= 0 ? field.enum[index] : void 0);
+          },
+          disabled: form.disabled,
+          "aria-describedby": describedBy,
+          "aria-invalid": error ? true : void 0,
+          className: INPUT_CLASS,
+          children: [
+            selected === "" || !required ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select…" }) : null,
+            options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+          ]
+        }
+      );
+      break;
+    }
+    case "choices": {
+      const items = isRecord(field.items) ? field.items : {};
+      const options = items.enum ?? [];
+      const chosen = Array.isArray(current) ? current : [];
+      return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "flex flex-col gap-1", "aria-describedby": describedBy, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("legend", { className: "font-medium text-foreground text-sm", children: [
+          label,
+          required ? /* @__PURE__ */ jsxRuntime.jsx(RequiredMark, {}) : null
+        ] }),
+        options.map((option) => {
+          const checked = chosen.includes(option);
+          return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-foreground text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                disabled: form.disabled,
+                onChange: () => set(checked ? chosen.filter((each) => each !== option) : [...chosen, option])
+              }
+            ),
+            String(option)
+          ] }, String(option));
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(FieldNotes, { id, description, error })
+      ] });
+    }
+    case "number":
+      control = /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id,
+          type: "number",
+          value: form.drafts[key] ?? (typeof current === "number" ? String(current) : ""),
+          onChange: (event) => setDraft(event.target.value),
+          min: typeof field.minimum === "number" ? field.minimum : void 0,
+          max: typeof field.maximum === "number" ? field.maximum : void 0,
+          step: field.type === "integer" ? 1 : "any",
+          disabled: form.disabled,
+          "aria-describedby": describedBy,
+          "aria-invalid": error ? true : void 0,
+          className: INPUT_CLASS
+        }
+      );
+      break;
+    case "string":
+      control = /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id,
+          type: typeof field.format === "string" ? STRING_INPUT_TYPES[field.format] ?? "text" : "text",
+          value: typeof current === "string" ? current : "",
+          onChange: (event) => set(event.target.value),
+          maxLength: typeof field.maxLength === "number" ? field.maxLength : void 0,
+          disabled: form.disabled,
+          "aria-describedby": describedBy,
+          "aria-invalid": error ? true : void 0,
+          className: INPUT_CLASS
+        }
+      );
+      break;
+    case "lines":
+      control = /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          id,
+          rows: 3,
+          placeholder: "One per line",
+          value: form.drafts[key] ?? (Array.isArray(current) ? current.join("\n") : ""),
+          onChange: (event) => setDraft(event.target.value),
+          disabled: form.disabled,
+          "aria-describedby": describedBy,
+          "aria-invalid": error ? true : void 0,
+          className: INPUT_CLASS
+        }
+      );
+      break;
+    default:
+      control = /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          id,
+          rows: 4,
+          placeholder: "JSON",
+          value: form.drafts[key] ?? (current === void 0 ? "" : JSON.stringify(current, null, 2)),
+          onChange: (event) => setDraft(event.target.value),
+          disabled: form.disabled,
+          "aria-describedby": describedBy,
+          "aria-invalid": error ? true : void 0,
+          className: cnfast.cn(INPUT_CLASS, "font-mono text-xs")
+        }
+      );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: "font-medium text-foreground text-sm", children: [
+      label,
+      required ? /* @__PURE__ */ jsxRuntime.jsx(RequiredMark, {}) : null
+    ] }),
+    control,
+    /* @__PURE__ */ jsxRuntime.jsx(FieldNotes, { id, description, error })
+  ] });
+}
+function RequiredMark() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "pl-0.5 text-destructive", children: "*" });
+}
+function FieldNotes({ id, description, error }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    description ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-description`, className: "text-muted-foreground text-xs", children: description }) : null,
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-error`, className: "text-destructive text-xs", children: error }) : null
+  ] });
+}
+function readJsonSchemaForm({
+  schema,
+  value,
+  drafts
+}) {
+  const errors = {};
+  let result = value;
+  const walk = (objectSchema, path) => {
+    const required = requiredKeys(objectSchema);
+    for (const [key, raw] of properties(objectSchema)) {
+      const field = resolve(raw, schema);
+      const fieldPath = [...path, key];
+      const id = pathKey(fieldPath);
+      const kind = fieldKind(field);
+      if (kind === "object") {
+        walk(field, fieldPath);
+        continue;
+      }
+      const draft = drafts[id];
+      if (draft !== void 0) {
+        const text = draft.trim();
+        if (text === "") {
+          result = setIn(result, fieldPath, void 0);
+        } else if (kind === "number") {
+          const parsed = Number(text);
+          if (!Number.isFinite(parsed) || field.type === "integer" && !Number.isInteger(parsed)) {
+            errors[id] = field.type === "integer" ? "Enter a whole number." : "Enter a number.";
+            continue;
+          }
+          result = setIn(result, fieldPath, parsed);
+        } else if (kind === "lines") {
+          const items = isRecord(field.items) ? field.items : {};
+          const lines = text.split("\n").map((line) => line.trim()).filter(Boolean);
+          const integers = items.type === "integer";
+          const numeric = items.type === "number" || integers;
+          const parsed = numeric ? lines.map(Number) : lines;
+          if (numeric && parsed.some((each) => !Number.isFinite(each) || integers && !Number.isInteger(each))) {
+            errors[id] = integers ? "Enter one whole number per line." : "Enter one number per line.";
+            continue;
+          }
+          result = setIn(result, fieldPath, parsed);
+        } else {
+          try {
+            result = setIn(result, fieldPath, JSON.parse(text));
+          } catch {
+            errors[id] = "Enter valid JSON.";
+            continue;
+          }
+        }
+      }
+      const current = getIn(result, fieldPath);
+      const empty = current === void 0 || current === null || current === "" || Array.isArray(current) && current.length === 0;
+      if (empty) {
+        if (required.has(key) && kind !== "boolean") errors[id] = "This field is required.";
+        continue;
+      }
+      if (typeof current === "number") {
+        if (typeof field.minimum === "number" && current < field.minimum) {
+          errors[id] = `Must be at least ${field.minimum}.`;
+        } else if (typeof field.maximum === "number" && current > field.maximum) {
+          errors[id] = `Must be at most ${field.maximum}.`;
+        }
+      }
+    }
+  };
+  walk(schema, []);
+  return Object.keys(errors).length > 0 ? { errors } : { value: result };
+}
+exports.JsonSchemaForm = JsonSchemaForm;
+exports.normalizeJsonSchema = normalizeJsonSchema;
+exports.readJsonSchemaForm = readJsonSchemaForm;
+exports.schemaDefaults = schemaDefaults;
+//# sourceMappingURL=json-schema-form.cjs.map