@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-BDOG4YSM.js

@@ -0,0 +1,989 @@
+"use client";
+import {
+  SchemaFormStore,
+  useBranchHasError,
+  useEffectiveValues,
+  useFieldSnapshot,
+  useSchemaFormMeta,
+  useVisibleFieldNames
+} from "./chunk-BWL7HWEF.js";
+import {
+  checkFileIssue,
+  fieldLabel,
+  normalizeFormSpec,
+  optionLabel,
+  optionValue
+} from "./chunk-TNOANK34.js";
+import {
+  ListEditor
+} from "./chunk-ALNJV4XB.js";
+import {
+  KeyValueEditor
+} from "./chunk-NZUKZRT7.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-QKZX5HDY.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-72H7HUTH.js";
+import {
+  FileUpload,
+  FileUploadDropzone,
+  FileUploadItem,
+  FileUploadList,
+  useFileUpload
+} from "./chunk-RYPK72YP.js";
+import {
+  Descriptions,
+  DescriptionsItem
+} from "./chunk-UUSOIPM2.js";
+import {
+  Spinner
+} from "./chunk-W7OIVERI.js";
+import {
+  StatusBadge
+} from "./chunk-DXC3DTCV.js";
+import {
+  Checkbox
+} from "./chunk-K4V2ELUZ.js";
+import {
+  NumberInput
+} from "./chunk-GTDCC4YX.js";
+import {
+  Textarea
+} from "./chunk-FZEG2R3E.js";
+import {
+  Skeleton
+} from "./chunk-UPGIQXUY.js";
+import {
+  Input
+} from "./chunk-I3U52BDH.js";
+import {
+  Label
+} from "./chunk-U756JCDK.js";
+import {
+  AdvancedGroup
+} from "./chunk-PSXUEWUS.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-FG3PDWE3.js";
+import {
+  Badge
+} from "./chunk-HNLYRHAU.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/schema-form/schema-form.tsx
+import {
+  createContext,
+  forwardRef,
+  memo,
+  use,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Check } from "lucide-react";
+import { ChevronRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SchemaFormStoreContext = createContext(null);
+function useSchemaFormStore() {
+  const store = use(SchemaFormStoreContext);
+  if (!store) {
+    throw new Error("SchemaForm sub-components must be rendered inside <SchemaFormProvider>.");
+  }
+  return store;
+}
+function controlId(formId, name) {
+  return `${formId}-field-${name}`;
+}
+function descId(formId, name) {
+  return `${formId}-desc-${name}`;
+}
+function errorId(formId, name) {
+  return `${formId}-error-${name}`;
+}
+function SchemaFormProvider({
+  spec,
+  values: valuesProp,
+  onChange,
+  onSubmit,
+  disabled = false,
+  submitted = false,
+  submitting = false,
+  loading = false,
+  error = null,
+  children
+}) {
+  const formId = useId();
+  const storeProps = {
+    spec,
+    valuesProp,
+    onChange,
+    onSubmit,
+    disabled,
+    submitted,
+    submitting,
+    loading,
+    error
+  };
+  const [store] = useState(() => new SchemaFormStore(storeProps, formId));
+  const changed = store.syncProps(storeProps);
+  useLayoutEffect(() => {
+    if (changed) store.notify();
+  });
+  const [pendingFocus, setPendingFocus] = useState(null);
+  useEffect(() => store.onPendingFocus((name) => setPendingFocus({ name })), [store]);
+  useEffect(() => {
+    if (!pendingFocus || typeof document === "undefined") return;
+    const el = document.getElementById(controlId(store.formId, pendingFocus.name));
+    el?.focus();
+  }, [pendingFocus, store]);
+  return /* @__PURE__ */ jsx(SchemaFormStoreContext, { value: store, children });
+}
+function StringControl({
+  field,
+  value,
+  invalid,
+  disabled,
+  readOnly,
+  id,
+  describedBy,
+  setValue
+}) {
+  const text = value === void 0 ? "" : String(value);
+  const commonAria = {
+    id,
+    "aria-invalid": invalid || void 0,
+    "aria-describedby": describedBy,
+    "aria-required": field.required || void 0,
+    required: field.required
+  };
+  if (field.multiline) {
+    return /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ...commonAria,
+        name: field.name,
+        value: text,
+        disabled,
+        readOnly,
+        maxLength: field.maxLength,
+        onChange: (e) => setValue(field.name, e.target.value)
+      }
+    );
+  }
+  const inputType = field.format === "email" ? "email" : field.format === "uri" ? "url" : field.format === "date" ? "date" : field.format === "date-time" ? "datetime-local" : "text";
+  const spellCheck = field.format === "email" || field.format === "uri" ? false : void 0;
+  const inputMode = field.format === "email" ? "email" : field.format === "uri" ? "url" : void 0;
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...commonAria,
+      type: inputType,
+      name: field.name,
+      value: text,
+      disabled,
+      readOnly,
+      minLength: field.minLength,
+      maxLength: field.maxLength,
+      spellCheck,
+      inputMode,
+      onChange: (e) => setValue(field.name, e.target.value)
+    }
+  );
+}
+function NumberControl({
+  field,
+  value,
+  invalid,
+  disabled,
+  readOnly,
+  id,
+  describedBy,
+  setValue
+}) {
+  const num = typeof value === "number" ? value : null;
+  return /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      id,
+      name: field.name,
+      value: num,
+      min: field.min,
+      max: field.max,
+      step: field.type === "integer" ? 1 : void 0,
+      disabled,
+      readOnly,
+      "aria-invalid": invalid || void 0,
+      "aria-describedby": describedBy,
+      "aria-required": field.required || void 0,
+      onValueChange: (next) => setValue(field.name, next ?? void 0)
+    }
+  );
+}
+function BooleanControl({
+  field,
+  value,
+  disabled,
+  id,
+  describedBy,
+  setValue
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id,
+        name: field.name,
+        checked: value === true,
+        disabled,
+        "aria-describedby": describedBy,
+        "aria-required": field.required || void 0,
+        onCheckedChange: (checked) => setValue(field.name, checked === true)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Label, { htmlFor: id, className: "flex items-center gap-1 font-normal", children: [
+      fieldLabel(field),
+      field.required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive-text", children: "*" })
+    ] })
+  ] });
+}
+function EnumControl({
+  field,
+  value,
+  invalid,
+  disabled,
+  id,
+  describedBy,
+  setValue
+}) {
+  const { t } = useLocale();
+  const current = typeof value === "string" && value.length > 0 ? value : void 0;
+  return /* @__PURE__ */ jsxs(Select, { value: current, disabled, onValueChange: (v) => setValue(field.name, v), children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        id,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        "aria-required": field.required || void 0,
+        children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("ui.schemaForm.selectPlaceholder") })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: optionValue(option), children: optionLabel(option) }, optionValue(option))) })
+  ] });
+}
+function MultiEnumControl({
+  field,
+  value,
+  disabled,
+  id,
+  labelId,
+  describedBy,
+  setValue
+}) {
+  const { t } = useLocale();
+  const selected = Array.isArray(value) ? value : [];
+  const toggle = (optValue, checked) => {
+    const next = checked ? [...selected, optValue] : selected.filter((v) => v !== optValue);
+    setValue(field.name, next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      id,
+      tabIndex: -1,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      className: "flex flex-col gap-2 focus:outline-none",
+      children: [
+        field.options.map((option) => {
+          const optValue = optionValue(option);
+          const optionId = `${id}-${optValue}`;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: optionId,
+                checked: selected.includes(optValue),
+                disabled,
+                onCheckedChange: (checked) => toggle(optValue, checked === true)
+              }
+            ),
+            /* @__PURE__ */ jsx(Label, { htmlFor: optionId, className: "font-normal", children: optionLabel(option) })
+          ] }, optValue);
+        }),
+        field.options.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground", children: t("noResults") })
+      ]
+    }
+  );
+}
+function ListControl({
+  field,
+  value,
+  disabled,
+  id,
+  labelId,
+  describedBy,
+  setValue
+}) {
+  const items = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ jsx(
+    ListEditor,
+    {
+      id,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      value: items,
+      max: field.maxItems,
+      placeholder: field.itemPlaceholder,
+      disabled,
+      onValueChange: (next) => setValue(field.name, next)
+    }
+  );
+}
+function KeyValueControl({
+  field,
+  value,
+  disabled,
+  id,
+  labelId,
+  describedBy,
+  setValue
+}) {
+  const rows = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ jsx(
+    KeyValueEditor,
+    {
+      id,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      value: rows,
+      keyPlaceholder: field.keyPlaceholder,
+      valuePlaceholder: field.valuePlaceholder,
+      disabled,
+      onValueChange: (next) => setValue(field.name, next)
+    }
+  );
+}
+function FileControlList({ field }) {
+  const { files } = useFileUpload();
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx(FileUploadList, { children: files.map((uploadFile) => {
+    const issue = checkFileIssue(uploadFile.file, field);
+    return /* @__PURE__ */ jsx(
+      FileUploadItem,
+      {
+        uploadFile,
+        status: issue ? "error" : "success",
+        errorMessage: issue?.message
+      },
+      uploadFile.id
+    );
+  }) });
+}
+function fileIdentity(file) {
+  return `${file.name}-${file.size}-${file.lastModified}`;
+}
+function FileControl({
+  field,
+  value,
+  disabled,
+  id,
+  labelId,
+  describedBy,
+  setValue
+}) {
+  const controlledFiles = useMemo(() => {
+    const selected = Array.isArray(value) ? value : [];
+    return selected.map((file) => ({
+      id: fileIdentity(file),
+      file
+    }));
+  }, [value]);
+  const lastCommittedRef = useRef([]);
+  const maxFiles = field.multiple ? field.maxFiles : 1;
+  return /* @__PURE__ */ jsxs(
+    FileUpload,
+    {
+      id,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      accept: field.accept,
+      multiple: field.multiple,
+      maxFiles,
+      disabled,
+      files: controlledFiles,
+      onFilesChange: (list) => {
+        const next = list.map((u) => u.file);
+        lastCommittedRef.current = next;
+        setValue(field.name, next);
+      },
+      onFilesRejected: (rejections) => {
+        const wrongType = rejections.filter((r) => r.reason === "accept").map((r) => r.file);
+        if (wrongType.length === 0) return;
+        const merged = [...lastCommittedRef.current, ...wrongType];
+        setValue(field.name, maxFiles ? merged.slice(0, maxFiles) : merged);
+      },
+      children: [
+        /* @__PURE__ */ jsx(FileUploadDropzone, {}),
+        /* @__PURE__ */ jsx(FileControlList, { field })
+      ]
+    }
+  );
+}
+function GroupTabsControl({
+  field,
+  value,
+  disabled,
+  id,
+  labelId,
+  describedBy,
+  setValue
+}) {
+  const active = (typeof value === "string" ? value : void 0) ?? field.default ?? field.groups[0]?.key;
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: active,
+      onValueChange: (next) => setValue(field.name, next),
+      id,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      children: [
+        /* @__PURE__ */ jsx(TabsList, { children: field.groups.map((group) => /* @__PURE__ */ jsx(TabsTrigger, { value: group.key, disabled, children: group.label }, group.key)) }),
+        field.groups.map((group) => /* @__PURE__ */ jsxs(TabsContent, { value: group.key, className: "flex flex-col gap-4 pt-3", children: [
+          group.description && /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: group.description }),
+          /* @__PURE__ */ jsx(GroupTabsBranch, { group })
+        ] }, group.key))
+      ]
+    }
+  );
+}
+function GroupTabsBranch({ group }) {
+  const store = useSchemaFormStore();
+  const visibleNames = useVisibleFieldNames(store, group.fields);
+  return /* @__PURE__ */ jsx(Fragment, { children: visibleNames.map((name) => /* @__PURE__ */ jsx(SchemaFormField, { name }, name)) });
+}
+function AdvancedGroupBranch({ group }) {
+  const store = useSchemaFormStore();
+  const hasError = useBranchHasError(store, group.fields);
+  const visibleNames = useVisibleFieldNames(store, group.fields);
+  const [manualOpen, setManualOpen] = useState(void 0);
+  const open = manualOpen ?? hasError;
+  return /* @__PURE__ */ jsx(
+    AdvancedGroup,
+    {
+      title: group.label,
+      summary: group.description,
+      open,
+      onOpenChange: setManualOpen,
+      children: visibleNames.map((name) => /* @__PURE__ */ jsx(SchemaFormField, { name }, name))
+    }
+  );
+}
+function GroupAdvancedControl({ field }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: field.groups.map((group) => /* @__PURE__ */ jsx(AdvancedGroupBranch, { group }, group.key)) });
+}
+var SchemaFormField = memo(
+  forwardRef(function SchemaFormField2({ name, className, ...props }, ref) {
+    const store = useSchemaFormStore();
+    const meta = useSchemaFormMeta(store);
+    const snapshot = useFieldSnapshot(store, name);
+    const field = store.getField(name);
+    if (!field) return null;
+    if (!snapshot.visible) return null;
+    const id = controlId(meta.formId, name);
+    const labelId = `${meta.formId}-label-${name}`;
+    const invalid = snapshot.invalid;
+    const description = field.description;
+    const hasDesc = Boolean(description);
+    const describedBy = [hasDesc ? descId(meta.formId, name) : null, invalid ? errorId(meta.formId, name) : null].filter(Boolean).join(" ") || void 0;
+    const controlProps = {
+      field,
+      value: snapshot.value,
+      invalid,
+      disabled: snapshot.disabled,
+      readOnly: snapshot.readOnly,
+      id,
+      labelId,
+      describedBy,
+      setValue: store.setValue
+    };
+    if (field.type !== "group" && field.readOnly) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-slot": "schema-form-field",
+          "data-readonly": "",
+          className: cn("flex flex-col gap-1.5", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(Descriptions, { layout: "vertical", children: /* @__PURE__ */ jsx(
+              DescriptionsItem,
+              {
+                label: fieldLabel(field),
+                numeric: field.type === "number" || field.type === "integer",
+                children: readOnlyText(snapshot.value)
+              }
+            ) }),
+            hasDesc && /* @__PURE__ */ jsx("p", { id: descId(meta.formId, name), className: "text-caption text-muted-foreground", children: description })
+          ]
+        }
+      );
+    }
+    const isBoolean = field.type === "boolean";
+    const isGroup = field.type === "group";
+    const isRegionField = field.type === "multi-enum" || field.type === "list" || field.type === "key-value" || field.type === "file" || isGroup;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "schema-form-field",
+        className: cn("flex flex-col gap-1.5", className),
+        ...props,
+        children: [
+          !isBoolean && /* @__PURE__ */ jsxs(
+            Label,
+            {
+              id: labelId,
+              htmlFor: isRegionField ? void 0 : id,
+              className: "flex items-center gap-1",
+              children: [
+                fieldLabel(field),
+                field.required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive-text", children: "*" })
+              ]
+            }
+          ),
+          field.type === "string" && /* @__PURE__ */ jsx(StringControl, { ...controlProps, field }),
+          (field.type === "number" || field.type === "integer") && /* @__PURE__ */ jsx(NumberControl, { ...controlProps, field }),
+          field.type === "boolean" && /* @__PURE__ */ jsx(BooleanControl, { ...controlProps, field }),
+          field.type === "enum" && /* @__PURE__ */ jsx(EnumControl, { ...controlProps, field }),
+          field.type === "multi-enum" && /* @__PURE__ */ jsx(MultiEnumControl, { ...controlProps, field }),
+          field.type === "list" && /* @__PURE__ */ jsx(ListControl, { ...controlProps, field }),
+          field.type === "key-value" && /* @__PURE__ */ jsx(KeyValueControl, { ...controlProps, field }),
+          field.type === "file" && /* @__PURE__ */ jsx(FileControl, { ...controlProps, field }),
+          field.type === "group" && field.variant === "tabs" && /* @__PURE__ */ jsx(GroupTabsControl, { ...controlProps, field }),
+          field.type === "group" && field.variant === "advanced" && /* @__PURE__ */ jsx(GroupAdvancedControl, { field }),
+          hasDesc && /* @__PURE__ */ jsx("p", { id: descId(meta.formId, name), className: "text-caption text-muted-foreground", children: description }),
+          invalid && /* @__PURE__ */ jsx("p", { id: errorId(meta.formId, name), className: "text-caption text-destructive-text", children: snapshot.errorText })
+        ]
+      }
+    );
+  })
+);
+var SchemaFormFields = forwardRef(
+  function SchemaFormFields2({ className, ...props }, ref) {
+    const store = useSchemaFormStore();
+    const meta = useSchemaFormMeta(store);
+    const visibleNames = useVisibleFieldNames(store, meta.spec.fields);
+    const { spec, loading } = meta;
+    if (spec.fields.length === 0 && loading) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-slot": "schema-form-fields",
+          className: cn("flex flex-col gap-4", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(SchemaFormSkeletonAnnouncement, {}),
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex flex-col gap-4", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full" })
+            ] }, i)) })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "schema-form-fields",
+        className: cn("flex flex-col gap-4", className),
+        ...props,
+        children: spec.sections ? (() => {
+          const grouped = new Set(spec.sections.flatMap((section) => section.fields));
+          const visible = new Set(visibleNames);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            visibleNames.filter((name) => !grouped.has(name)).map((name) => /* @__PURE__ */ jsx(SchemaFormField, { name }, name)),
+            spec.sections.map((section) => {
+              const names = section.fields.filter((name) => visible.has(name));
+              if (names.length === 0) return null;
+              return /* @__PURE__ */ jsx(
+                SchemaFormSection,
+                {
+                  label: section.label,
+                  collapsed: section.collapsed,
+                  children: names.map((name) => /* @__PURE__ */ jsx(SchemaFormField, { name }, name))
+                },
+                section.id
+              );
+            })
+          ] });
+        })() : visibleNames.map((name) => /* @__PURE__ */ jsx(SchemaFormField, { name }, name))
+      }
+    );
+  }
+);
+function readOnlyText(value) {
+  if (value === void 0 || value === "") return "\u2014";
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "\u2014";
+    return value.map(
+      (item) => typeof item === "string" ? item : item instanceof File ? item.name : `${item.key}: ${item.value}`
+    ).join(", ");
+  }
+  return String(value);
+}
+function SchemaFormSection({
+  label,
+  collapsed,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      defaultOpen: !collapsed,
+      "data-slot": "schema-form-section",
+      className: "group/section flex flex-col gap-3 border-t border-border-strong pt-3",
+      children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            "data-slot": "schema-form-section-trigger",
+            className: "focus-ring flex w-full items-center gap-1 rounded-sm text-start text-subtitle text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 shrink-0 transition-transform group-data-[state=open]/section:rotate-90 motion-reduce:transition-none"
+                }
+              ),
+              label
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent, { "data-slot": "schema-form-section-content", className: "flex flex-col gap-4", children })
+      ]
+    }
+  );
+}
+function SchemaFormSkeletonAnnouncement() {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: t("loading") });
+}
+var SchemaFormError = forwardRef(
+  function SchemaFormError2({ className, ...props }, ref) {
+    const store = useSchemaFormStore();
+    const { error } = useSchemaFormMeta(store);
+    if (!error) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-slot": "schema-form-error",
+        className: cn(
+          "rounded-md border-s-2 border-s-destructive bg-destructive/10 px-3 py-2 text-body text-destructive-text",
+          className
+        ),
+        ...props,
+        children: error
+      }
+    );
+  }
+);
+var SchemaFormSubmit = forwardRef(
+  function SchemaFormSubmit2({ label, className, onClick, ...props }, ref) {
+    const { t } = useLocale();
+    const store = useSchemaFormStore();
+    const { spec, submitting, submitted, disabled, loading } = useSchemaFormMeta(store);
+    if (submitted) {
+      return /* @__PURE__ */ jsxs(Badge, { variant: "success", "aria-live": "polite", className: "w-fit", children: [
+        /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3" }),
+        t("ui.schemaForm.submitted")
+      ] });
+    }
+    const text = label ?? spec.submitLabel ?? t("ui.schemaForm.submit");
+    const blocked = submitting || loading;
+    const handleClick = (e) => {
+      if (blocked) {
+        e.preventDefault();
+        return;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        type: "submit",
+        "data-slot": "schema-form-submit",
+        disabled,
+        "aria-disabled": blocked || void 0,
+        "aria-busy": submitting || void 0,
+        onClick: handleClick,
+        className: cn(blocked && "cursor-not-allowed", className),
+        ...props,
+        children: [
+          submitting && /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-current" }),
+          submitting ? t("ui.schemaForm.submitting") : text
+        ]
+      }
+    );
+  }
+);
+var SchemaFormTestAction = forwardRef(
+  function SchemaFormTestAction2({ onTest, label, pendingLabel, successLabel, failureLabel, className, ...props }, ref) {
+    const { t } = useLocale();
+    const store = useSchemaFormStore();
+    const { disabled: formDisabled, loading, submitted, submitting } = useSchemaFormMeta(store);
+    const effectiveValues = useEffectiveValues(store);
+    const [status, setStatus] = useState("idle");
+    const [failureMessage, setFailureMessage] = useState(null);
+    const latestEffectiveValuesRef = useRef(effectiveValues);
+    latestEffectiveValuesRef.current = effectiveValues;
+    const testedValuesRef = useRef(null);
+    const pending = status === "pending";
+    const transientlyBlocked = loading || pending;
+    const nativelyBlocked = formDisabled || submitted || submitting;
+    useEffect(() => {
+      if ((status === "success" || status === "failure") && testedValuesRef.current !== effectiveValues) {
+        setStatus("idle");
+        setFailureMessage(null);
+      }
+    }, [effectiveValues, status]);
+    const handleClick = (e) => {
+      if (nativelyBlocked || transientlyBlocked) {
+        e.preventDefault();
+        return;
+      }
+      const testedValues = effectiveValues;
+      testedValuesRef.current = testedValues;
+      setStatus("pending");
+      setFailureMessage(null);
+      void (async () => {
+        try {
+          await onTest(testedValues);
+          if (latestEffectiveValuesRef.current !== testedValues) {
+            setStatus("idle");
+            return;
+          }
+          setStatus("success");
+        } catch (err) {
+          if (latestEffectiveValuesRef.current !== testedValues) {
+            setStatus("idle");
+            return;
+          }
+          setStatus("failure");
+          setFailureMessage(err instanceof Error ? err.message : null);
+        }
+      })();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "schema-form-test-action",
+        className: cn("flex flex-wrap items-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: nativelyBlocked,
+              "aria-disabled": transientlyBlocked || void 0,
+              "aria-busy": pending || void 0,
+              onClick: handleClick,
+              className: cn(transientlyBlocked && "cursor-not-allowed"),
+              children: [
+                pending && /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-current" }),
+                pending ? pendingLabel ?? t("ui.schemaForm.testAction.pending") : label ?? t("ui.schemaForm.testAction.label")
+              ]
+            }
+          ),
+          status === "success" && /* @__PURE__ */ jsx(StatusBadge, { status: "complete", "aria-live": "polite", children: successLabel ?? t("ui.schemaForm.testAction.success") }),
+          status === "failure" && /* @__PURE__ */ jsx(StatusBadge, { status: "failed", role: "alert", children: failureMessage ?? failureLabel ?? t("ui.schemaForm.testAction.failure") })
+        ]
+      }
+    );
+  }
+);
+var SchemaFormRoot = forwardRef(
+  function SchemaFormRoot2({ className, children, ...props }, ref) {
+    const { t } = useLocale();
+    const store = useSchemaFormStore();
+    const { headingId, spec, disabled, submitting, loading } = useSchemaFormMeta(store);
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      if (disabled || submitting || loading) return;
+      store.submit();
+    };
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        ref,
+        "data-slot": "schema-form-root",
+        noValidate: true,
+        onSubmit: handleSubmit,
+        "aria-labelledby": spec.title ? headingId : void 0,
+        "aria-label": spec.title ? void 0 : spec.formName || t("ui.schemaForm.label"),
+        className: cn("flex w-full flex-col gap-4", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SchemaFormTitle = forwardRef(
+  function SchemaFormTitle2({ className, children, ...props }, ref) {
+    const store = useSchemaFormStore();
+    const { headingId, spec } = useSchemaFormMeta(store);
+    const content = children ?? spec.title;
+    if (!content) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: headingId,
+        className: cn("text-subtitle text-foreground text-balance", className),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+var SchemaFormDescription = forwardRef(
+  function SchemaFormDescription2({ className, children, ...props }, ref) {
+    const store = useSchemaFormStore();
+    const { spec } = useSchemaFormMeta(store);
+    const content = children ?? spec.description;
+    if (!content) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn("text-body text-muted-foreground text-pretty", className),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+var SchemaFormFallback = forwardRef(
+  function SchemaFormFallback2({ message = "This form could not be displayed.", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        "data-slot": "schema-form-fallback",
+        className: cn(
+          // Sole structural cue is the border (no fill) — reads in every theme.
+          "flex items-center justify-center rounded-md border border-border-strong px-4 py-6 text-center text-body text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: message
+      }
+    );
+  }
+);
+var SchemaForm = forwardRef(function SchemaForm2({
+  spec,
+  values,
+  onChange,
+  onSubmit,
+  submitLabel,
+  disabled,
+  submitted,
+  submitting,
+  loading,
+  error,
+  className,
+  ...props
+}, ref) {
+  const result = useMemo(() => normalizeFormSpec(spec), [spec]);
+  if (!result.ok) {
+    return /* @__PURE__ */ jsx(SchemaFormFallback, { ref, message: result.reason, className, ...props });
+  }
+  const normalized = result.spec;
+  const empty = normalized.fields.length === 0;
+  if (empty && !loading) {
+    return /* @__PURE__ */ jsx(
+      SchemaFormFallback,
+      {
+        ref,
+        message: "This form has no fields to fill in.",
+        className,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SchemaFormProvider,
+    {
+      spec: normalized,
+      values,
+      onChange,
+      onSubmit,
+      disabled,
+      submitted,
+      submitting,
+      loading,
+      error,
+      children: /* @__PURE__ */ jsx("div", { ref, "data-slot": "schema-form", className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs(SchemaFormRoot, { children: [
+        (normalized.title || normalized.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(SchemaFormTitle, {}),
+          /* @__PURE__ */ jsx(SchemaFormDescription, {})
+        ] }),
+        /* @__PURE__ */ jsx(SchemaFormFields, {}),
+        /* @__PURE__ */ jsx(SchemaFormError, {}),
+        /* @__PURE__ */ jsx(SchemaFormSubmit, { label: submitLabel })
+      ] }) })
+    }
+  );
+});
+
+export {
+  SchemaFormProvider,
+  SchemaFormField,
+  SchemaFormFields,
+  SchemaFormError,
+  SchemaFormSubmit,
+  SchemaFormTestAction,
+  SchemaFormRoot,
+  SchemaFormTitle,
+  SchemaFormDescription,
+  SchemaFormFallback,
+  SchemaForm
+};
+//# sourceMappingURL=chunk-BDOG4YSM.js.map