@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/dist/controls/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.js","names":[],"sources":["../../src/controls/choice.tsx"],"sourcesContent":["/**\n * CHOICE — boolean · select · multiselect · tags (V2 HEAD 9829bf1 kit/controls/choice.tsx, DESIGN 8.10–8.12).\n * Rule (production): few options → segmented, many → dropdown, many values → checkboxes, on/off → switch card.\n * D46: `layout: \"segmented\"` is a request, not a promise. With 4+ options, or labels that would wrap or truncate\n * in a 340px inspector (`fitsSegmented`), it renders the dropdown instead, so every schema follows the rule.\n *\n * Values are the ones production stores, untouched by any adapter (schema.ts plans them AS_IS): boolean, the option's\n * string, a string[] of option values, a string[] of tags. Tags are written the way the backend judges them\n * (tagsValueProblem: trimmed, case-insensitively unique, at most TAG_VALUE_MAX_LENGTH characters), and a tag the\n * control will not add says why under the box instead of vanishing.\n *\n * Option icons are all or none per list (the schema adapter's rule): a list draws icons only when every option names an\n * icon that can be drawn, so labels stay aligned and no option gets a stand-in glyph. The host's glyphs come first\n * (KitServices.IconGlyph, the BetterCMS set the site renders: every stored option icon is one of its names); with no\n * host renderer, the kit's own drawn icons.\n */\nimport * as React from \"react\";\nimport { IconCheck, IconPlus, IconX } from \"@tabler/icons-react\";\nimport { Checkbox, Segmented, Switch } from \"../ui/controls\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay\";\nimport { Select } from \"../ui/select\";\nimport { fitsSegmented } from \"../ui/choice-switch\";\nimport { shortcutHintsOn } from \"../ui/shortcut-hint\";\nimport { cn } from \"../lib/cn\";\nimport { KitIcon, iconKey } from \"../lib/icons\";\nimport type { Option } from \"../schema/types\";\nimport { useKitEnv, useKitServices, type KitServices } from \"../context\";\nimport { dockIconOf } from \"../adapters/icons\";\nimport type { ControlProps } from \"../types\";\nimport { TAG_VALUE_MAX_LENGTH } from \"../adapters/prod-types\";\nimport { UnknownValueNote } from \"./unknown-value\";\n\nconst str = (v: unknown) => (typeof v === \"string\" ? v : v == null ? \"\" : String(v));\nconst opts = (o?: Option[]) => o ?? [];\n\n/**\n * Icons for a list: every option's icon when all of them resolve, otherwise none (never a fallback glyph). `Glyph` is\n * the host's renderer (KitServices.IconGlyph): it draws every BetterCMS icon name (the option's kit name read back\n * through dockIconOf); without it, or when a name is not in that set, the kit's own drawn icons.\n */\nexport function optionIcons(options: Option[], className?: string, Glyph?: KitServices[\"IconGlyph\"]): (React.ReactNode | undefined)[] {\n  if (options.length === 0) return [];\n  const dock = options.map((o) => dockIconOf(o.icon));\n  // a block box, as the kit's own <svg> is under preflight: an inline glyph would sit on a line box and grow the row\n  if (Glyph && dock.every((n) => n !== undefined)) return dock.map((n) => <Glyph name={n!} className={cn(\"flex\", className)} />);\n  const all = options.every((o) => iconKey(o.icon) !== undefined);\n  return options.map((o) => (all ? <KitIcon name={o.icon} className={className} /> : undefined));\n}\n\n/** The limit sentence (DESIGN 8.12), shared by multiselect and tags. */\nfunction LimitLine({ max }: { max: number }) {\n  return <span className=\"px-0.5 text-kit-xs text-kit-fg-3\">That's the limit of {max}. Remove one to add another.</span>;\n}\n\n/**\n * Roving focus for a radiogroup of buttons (WAI-ARIA radio group, as Segmented does): Tab lands on the selected option\n * (or the first), arrows move and select, Home / End jump.\n */\nfunction useRadioKeys(values: string[], current: string, onPick: (v: string) => void, readOnly?: boolean) {\n  const focusable = values.includes(current) ? current : values[0];\n  const onKeyDown = (e: React.KeyboardEvent, i: number) => {\n    if (readOnly || !values.length) return;\n    const n = values.length;\n    const next =\n      e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n        ? (i + 1) % n\n        : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n          ? (i - 1 + n) % n\n          : e.key === \"Home\"\n            ? 0\n            : e.key === \"End\"\n              ? n - 1\n              : -1;\n    if (next < 0) return;\n    e.preventDefault();\n    onPick(values[next]);\n    const group = (e.currentTarget as HTMLElement).closest(\"[role=radiogroup]\");\n    group?.querySelector<HTMLElement>(`[data-choice-value=\"${CSS.escape(values[next])}\"]`)?.focus();\n  };\n  return { tabIndexOf: (v: string) => (v === focusable ? 0 : -1), onKeyDown };\n}\n\n/**\n * Adds or removes one id of the control's own in aria-describedby, leaving the ids FieldShell wires (help, issue)\n * in place (as ScaleSlider does).\n */\nexport function useOwnDescription(ref: React.RefObject<HTMLElement | null>, ownId: string | null) {\n  const last = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const ids = (el.getAttribute(\"aria-describedby\") ?? \"\").split(\" \").filter((t) => t && t !== last.current && t !== ownId);\n    if (ownId) ids.push(ownId);\n    if (ids.length) el.setAttribute(\"aria-describedby\", ids.join(\" \"));\n    else el.removeAttribute(\"aria-describedby\");\n    last.current = ownId;\n  });\n}\n\n/** Boolean switch (used inside the switch card the shell draws). Commits immediately. */\nexport function BooleanControl({ field, value, onChange, readOnly, id }: ControlProps) {\n  if (field.layout === \"checkbox\")\n    return <Checkbox id={id} checked={Boolean(value)} disabled={readOnly} onCheckedChange={(c) => onChange(c === true)} aria-label={field.title} nativeButton render={<button type=\"button\" />} />;\n  /* V2's switch is a native <button role=\"switch\"> (Radix); Base UI draws a <span> unless asked for the button */\n  return <Switch id={id} checked={Boolean(value)} disabled={readOnly} onCheckedChange={(c) => onChange(c)} aria-label={field.title} nativeButton render={<button type=\"button\" />} />;\n}\n\n/**\n * A stored value none of the options names any more (renamed or removed) is kept and flagged under the control, with\n * change-to and remove (H4). @see UnknownValueNote\n */\nexport function SelectControl(props: ControlProps) {\n  const options = opts(props.field.options);\n  const v = str(props.value);\n  if (v === \"\" || options.length === 0 || options.some((o) => o.value === v)) return <SelectInput {...props} />;\n  return (\n    <div className=\"flex min-w-0 flex-col gap-1.5\">\n      <SelectInput {...props} />\n      <UnknownValueNote\n        items={[{ key: v, label: `“${v}”`, options: options.map((o) => ({ value: o.value, label: o.label })) }]}\n        onRemap={(_, to) => props.onChange(to)}\n        onRemove={() => props.onChange(null)}\n        readOnly={props.readOnly}\n      />\n    </div>\n  );\n}\n\nfunction SelectInput({ field, value, onChange, readOnly, id }: ControlProps) {\n  const { variant } = useKitEnv();\n  const { IconGlyph } = useKitServices();\n  const options = opts(field.options);\n  const v = str(value);\n  const fits = fitsSegmented(options.map((o) => o.label));\n  const layout = field.layout ?? (fits ? \"segmented\" : \"dropdown\");\n  const pick = (n: string) => {\n    if (!readOnly && n !== v) onChange(n);\n  };\n  const keys = useRadioKeys(\n    options.map((o) => o.value),\n    v,\n    pick,\n    readOnly,\n  );\n\n  if (layout === \"segmented\" && fits) {\n    const icons = optionIcons(options, \"size-3.5\", IconGlyph);\n    return (\n      <Segmented\n        aria-label={field.title}\n        value={v}\n        onChange={pick}\n        items={options.map((o, i) => ({ value: o.value, label: o.label, icon: icons[i], disabled: readOnly }))}\n        className=\"w-full [&>button]:min-w-0 [&>button]:flex-1\"\n      />\n    );\n  }\n  if (layout === \"radio\")\n    return (\n      <div role=\"radiogroup\" id={id} aria-label={field.title} className=\"flex flex-col gap-0.5\">\n        {options.map((o, i) => (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            data-choice-value={o.value}\n            aria-checked={o.value === v}\n            tabIndex={keys.tabIndexOf(o.value)}\n            disabled={readOnly}\n            onClick={() => pick(o.value)}\n            onKeyDown={(e) => keys.onKeyDown(e, i)}\n            className=\"flex items-start gap-2.5 rounded-kit-md px-1.5 py-1.5 text-left hover:bg-kit-hover\"\n          >\n            <span className={cn(\"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\", o.value === v ? \"border-kit-accent\" : \"border-kit-line-strong\")}>\n              {o.value === v ? <span className=\"size-2 rounded-full bg-kit-accent\" /> : null}\n            </span>\n            <span className=\"min-w-0\">\n              <span className=\"block text-kit-sm text-kit-fg\">{o.label}</span>\n              {o.description ? <span className=\"block text-kit-xs text-kit-fg-3\">{o.description}</span> : null}\n            </span>\n          </button>\n        ))}\n      </div>\n    );\n  if (layout === \"cards\" || layout === \"grid\") {\n    /* V2 draws the icon itself as the button's first child (no wrapper), coloured by the selected state */\n    const iconsOn = optionIcons(options, \"size-4 text-kit-fg\", IconGlyph);\n    const iconsOff = optionIcons(options, \"size-4 text-kit-fg-3\", IconGlyph);\n    return (\n      <div role=\"radiogroup\" id={id} aria-label={field.title} className={cn(\"grid gap-1.5\", variant === \"document\" ? \"grid-cols-3\" : \"grid-cols-2\")}>\n        {options.map((o, i) => {\n          const on = o.value === v;\n          return (\n            <button\n              key={o.value}\n              type=\"button\"\n              role=\"radio\"\n              data-choice-value={o.value}\n              aria-checked={on}\n              tabIndex={keys.tabIndexOf(o.value)}\n              disabled={readOnly}\n              onClick={() => pick(o.value)}\n              onKeyDown={(e) => keys.onKeyDown(e, i)}\n              className={cn(\n                \"relative flex flex-col items-start gap-1.5 rounded-kit-lg border p-2.5 text-left transition-[border-color,box-shadow] duration-150\",\n                on ? \"border-[var(--kit-emphasis-line)] bg-kit-control-bg shadow-kit-xs\" : \"border-kit-line hover:border-kit-line-strong\",\n              )}\n            >\n              {(on ? iconsOn : iconsOff)[i] ?? null}\n              <span className=\"text-kit-sm font-medium text-kit-fg\">{o.label}</span>\n              {o.description ? <span className=\"text-kit-xs leading-4 text-kit-fg-3\">{o.description}</span> : null}\n              {on ? <IconCheck aria-hidden className=\"absolute right-2 top-2 size-3.5 text-kit-fg\" stroke={2} /> : null}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n  const icons = optionIcons(options, undefined, IconGlyph);\n  return (\n    <Select\n      id={id}\n      aria-label={field.title}\n      size={variant === \"document\" ? \"lg\" : \"md\"}\n      value={v || undefined}\n      disabled={readOnly}\n      onValueChange={pick}\n      placeholder={field.placeholder ?? \"Select…\"}\n      options={options.map((o, i) => ({ value: o.value, label: o.label, description: o.description, icon: icons[i] }))}\n    />\n  );\n}\n\n/** As `SelectControl`: each stored choice no option names any more is kept and flagged, with change-to and remove. */\nexport function MultiSelectControl(props: ControlProps) {\n  const list = Array.isArray(props.value) ? (props.value as unknown[]).filter((x): x is string => typeof x === \"string\") : [];\n  const options = opts(props.field.options);\n  const unknown = options.length ? list.filter((x) => !options.some((o) => o.value === x)) : [];\n  if (unknown.length === 0) return <MultiSelectInput {...props} />;\n  return (\n    <div className=\"flex min-w-0 flex-col gap-1.5\">\n      <MultiSelectInput {...props} />\n      <UnknownValueNote\n        items={unknown.map((x) => ({ key: x, label: `“${x}”`, options: options.filter((o) => !list.includes(o.value)).map((o) => ({ value: o.value, label: o.label })) }))}\n        onRemap={(from, to) => props.onChange(list.map((x) => (x === from ? to : x)))}\n        onRemove={(from) => props.onChange(list.filter((x) => x !== from))}\n        readOnly={props.readOnly}\n      />\n    </div>\n  );\n}\n\nfunction MultiSelectInput({ field, value, onChange, readOnly, id }: ControlProps) {\n  const list = Array.isArray(value) ? (value as unknown[]).filter((x): x is string => typeof x === \"string\") : [];\n  const options = opts(field.options);\n  const max = field.validation?.max;\n  const full = max != null && list.length >= max;\n  const toggle = (o: string) => {\n    if (readOnly) return;\n    if (list.includes(o)) onChange(list.filter((x) => x !== o));\n    else if (!full) onChange([...list, o]);\n  };\n  const label = (val: string) => options.find((o) => o.value === val)?.label ?? val;\n  /* V2 draws the control bare; the limit line (ours: say why the next pick is refused) wraps it only while it shows */\n  const withLimit = (body: React.ReactElement) =>\n    full && !readOnly ? (\n      <div className=\"flex flex-col gap-1\">\n        {body}\n        <LimitLine max={max!} />\n      </div>\n    ) : (\n      body\n    );\n  if (field.layout === \"checkbox\" || field.layout === \"list\")\n    return withLimit(\n      <>\n        <div id={id} role=\"group\" aria-label={field.title} className=\"flex flex-col gap-0.5\">\n          {options.map((o) => {\n            const on = list.includes(o.value);\n            return (\n              <label key={o.value} className={cn(\"flex cursor-pointer items-center gap-2.5 rounded-kit-md px-1.5 py-1.5 hover:bg-kit-hover\", !on && full && \"cursor-not-allowed hover:bg-transparent\")}>\n                <Checkbox checked={on} disabled={readOnly || (!on && full)} onCheckedChange={() => toggle(o.value)} nativeButton render={<button type=\"button\" />} />\n                <span className=\"text-kit-sm text-kit-fg\">{o.label}</span>\n              </label>\n            );\n          })}\n        </div>\n      </>,\n    );\n  return withLimit(\n    <>\n      <Popover>\n        {/* read-only there is no trigger to carry the field id, so the chip row is the named group */}\n        <div\n          id={readOnly ? id : undefined}\n          role={readOnly ? \"group\" : undefined}\n          aria-label={readOnly ? field.title : undefined}\n          className=\"flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors hover:border-kit-line-strong\"\n        >\n          {list.map((o) => (\n            <span key={o} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md border border-kit-line bg-kit-control-bg pl-2 pr-1 text-kit-sm text-kit-fg shadow-kit-xs\">\n              {label(o)}\n              {readOnly ? null : (\n                <button type=\"button\" aria-label={`Remove ${label(o)}`} onClick={() => toggle(o)} className=\"flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n                  <IconX className=\"size-3\" stroke={1.5} />\n                </button>\n              )}\n            </span>\n          ))}\n          {readOnly ? null : (\n            <PopoverTrigger id={id} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n              <IconPlus aria-hidden className=\"size-3.5\" stroke={1.5} />\n              {list.length ? \"Add\" : field.placeholder ?? \"Choose…\"}\n            </PopoverTrigger>\n          )}\n        </div>\n        <PopoverContent className=\"w-60 p-1\">\n          <div role=\"group\" aria-label={field.title}>\n            {options.map((o) => {\n              const on = list.includes(o.value);\n              const blocked = !on && full;\n              return (\n                <button\n                  key={o.value}\n                  type=\"button\"\n                  role=\"checkbox\"\n                  aria-checked={on}\n                  disabled={blocked}\n                  onClick={() => toggle(o.value)}\n                  className={cn(\"flex h-8 w-full items-center gap-2 rounded-kit-md px-2 text-left text-kit-sm hover:bg-kit-hover\", blocked && \"opacity-40 hover:bg-transparent\")}\n                >\n                  <span className={cn(\"flex size-4 items-center justify-center rounded-kit-md border\", on ? \"border-kit-accent bg-kit-accent text-kit-accent-on\" : \"border-kit-line-strong\")}>\n                    {on ? <IconCheck aria-hidden className=\"size-3\" stroke={3} /> : null}\n                  </span>\n                  {o.label}\n                </button>\n              );\n            })}\n          </div>\n          {full ? <div className=\"px-2 pb-1 pt-1.5\"><LimitLine max={max!} /></div> : null}\n        </PopoverContent>\n      </Popover>\n    </>,\n  );\n}\n\n/** Why a typed tag is not added, or null when it is (the backend's own checks, said in words). */\nexport function tagRefusal(tag: string, list: string[]): string | null {\n  if (Array.from(tag).length > TAG_VALUE_MAX_LENGTH) return `A tag can be up to ${TAG_VALUE_MAX_LENGTH} characters.`;\n  const folded = tag.toLowerCase();\n  const twin = list.find((t) => t.trim().toLowerCase() === folded);\n  if (twin !== undefined) return `\"${twin}\" is already a tag.`;\n  return null;\n}\n\n/** Chip input. Says so at its limit, and says why a tag was not added, instead of silently dropping it. */\nexport function TagsControl({ field, value, onChange, readOnly, id, onBlur }: ControlProps) {\n  const list = Array.isArray(value) ? (value as unknown[]).map((x) => str(x)) : [];\n  const [draft, setDraft] = React.useState(\"\");\n  const [refusal, setRefusal] = React.useState<string | null>(null);\n  const reasonId = React.useId();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  useOwnDescription(inputRef, refusal ? reasonId : null);\n  const max = field.validation?.max;\n  const full = max != null && list.length >= max;\n  const add = () => {\n    const t = draft.trim().replace(/,$/, \"\").trim();\n    if (!t || full) {\n      setDraft(\"\");\n      setRefusal(null);\n      return;\n    }\n    const why = tagRefusal(t, list);\n    if (why) {\n      // keep the text so it can be fixed; the reason reads under the box\n      setRefusal(why);\n      return;\n    }\n    onChange([...list, t]);\n    setDraft(\"\");\n    setRefusal(null);\n  };\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <div className=\"flex min-h-8 flex-wrap items-center gap-1 rounded-kit-md border border-kit-line-strong bg-kit-field-bg p-1 transition-colors focus-within:border-kit-line-strong focus-within:bg-kit-field-bg hover:border-kit-line-strong\">\n        {list.map((t, i) => (\n          <span key={`${t}-${i}`} className=\"inline-flex h-6 items-center gap-1 rounded-kit-md bg-kit-selected pl-2 pr-1 text-kit-sm text-kit-fg\">\n            {t}\n            {readOnly ? null : (\n              <button type=\"button\" aria-label={`Remove ${t}`} onClick={() => onChange(list.filter((_, j) => j !== i))} className=\"flex rounded-kit-md p-0.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\">\n                <IconX className=\"size-3\" stroke={1.5} />\n              </button>\n            )}\n          </span>\n        ))}\n        {readOnly ? null : (\n          <input\n            ref={inputRef}\n            id={id}\n            value={draft}\n            disabled={full}\n            onChange={(e) => {\n              setDraft(e.target.value);\n              if (refusal) setRefusal(null);\n            }}\n            onBlur={() => {\n              add();\n              onBlur?.();\n            }}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" || e.key === \",\") {\n                e.preventDefault();\n                add();\n              } else if (e.key === \"Backspace\" && !draft && list.length) onChange(list.slice(0, -1));\n            }}\n            placeholder={full ? \"\" : list.length ? \"Add…\" : field.placeholder ?? (shortcutHintsOn() ? \"Type and press Enter\" : \"Add…\")}\n            className=\"h-6 min-w-20 flex-1 bg-transparent px-1.5 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3\"\n          />\n        )}\n      </div>\n      {refusal && !readOnly ? (\n        <span id={reasonId} role=\"status\" aria-live=\"polite\" className=\"px-0.5 text-kit-xs text-kit-fg-3\">\n          {refusal}\n        </span>\n      ) : null}\n      {full && !readOnly ? <LimitLine max={max!} /> : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/controls/code-register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/controls/code-register.js

@@ -0,0 +1,8 @@
+import { CodeControl } from "./code.js";
+import { CONTROLS } from "../engine/kit-field.js";
+//#region src/controls/code-register.ts
+/** Lane C3: the code field in the engine's dispatch table (one line per type; merge with other lanes by line). */
+CONTROLS.code = CodeControl;
+//#endregion
+
+//# sourceMappingURL=code-register.js.map

package/dist/controls/code-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-register.js","names":[],"sources":["../../src/controls/code-register.ts"],"sourcesContent":["/** Lane C3: the code field in the engine's dispatch table (one line per type; merge with other lanes by line). */\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { CodeControl } from \"./code\";\n\nCONTROLS.code = CodeControl;\n"],"mappings":";;;;AAIA,SAAS,OAAO"}

package/dist/controls/code.d.ts

@@ -0,0 +1,42 @@
+import type { ControlProps } from "../types";
+/** Why a JSON text does not parse ("" when it does, or is empty). */
+export declare function jsonProblem(text: string): string;
+export interface CodeSurfaceProps {
+    /** "json": the JSON header, Format and the parse footer. "code": the language list. */
+    kind: "json" | "code";
+    value: string;
+    onChange: (v: string) => void;
+    /** code: the language shown in the header ("" = none) and what picking one does; absent = no list */
+    language?: string;
+    onLanguage?: (language: string) => void;
+    /** code: the only languages the field allows (its config.languages); absent = the built-in list */
+    languages?: string[];
+    readOnly?: boolean;
+    id?: string;
+    invalid?: boolean;
+    minRows?: number;
+    label?: string;
+    describedBy?: string;
+}
+export declare function CodeSurface({ kind, value, onChange, language, onLanguage, languages, readOnly, id, invalid, minRows, label, describedBy }: CodeSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeDialogField({ kind, title, description, text, readOnly, id, invalid, language, languages, onDone, }: {
+    kind: "json" | "code";
+    title: string;
+    description?: string;
+    text: string;
+    readOnly?: boolean;
+    id: string;
+    invalid?: boolean;
+    language?: string;
+    languages?: string[];
+    /** commit the draft; returns the reason it can't be saved, or null when saved */
+    onDone: (draft: string, language: string | undefined) => string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CodeControl({ field, value, onChange, readOnly, id, invalid }: ControlProps): import("react/jsx-runtime").JSX.Element;
+/** A stored value the control cannot read: named, shown, kept as it is (never replaced by a stray edit). */
+export declare function UnreadableValue({ id, title, kind, value }: {
+    id: string;
+    title: string;
+    kind: string;
+    value: unknown;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/controls/code.js

@@ -0,0 +1,397 @@
+import { CODE_MAX_LENGTH } from "../adapters/prod-types.js";
+import { cn } from "../lib/cn.js";
+import { useKitEnv, useKitServices } from "../context.js";
+import { isObj } from "../lib/path.js";
+import { Button } from "../ui/button.js";
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "../ui/overlay.js";
+import { Select } from "../ui/select.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, IconBraces, IconCode, IconMaximize } from "@tabler/icons-react";
+//#region src/controls/code.tsx
+/**
+* CODE — the code field (DESIGN 8.21), V2 controls/misc.tsx (CodeSurface, CodeControl) fitted to what prod stores.
+*
+* Values (backend reference-validation `code`, adapters/values.ts codeToProd):
+*   "<p>hi</p>"                         a bare string, kept a string
+*   { language?: "html", code: "…" }    the object form; only `code` and `language` are written back
+* The language list sits in the surface header. Picking one writes the object form; a value that never changes its
+* language keeps the shape it was stored in. A value over CODE_MAX_LENGTH characters is refused with the reason.
+*
+* Panel: a one-line summary button that opens a `lg` dialog editing a draft (Cancel / Done). Document: the surface
+* inline. The surface: mono 12/20 textarea with line numbers, Tab inserts two spaces (Shift+Tab leaves the field),
+* Copy, and for JSON a Format action and a live "Invalid JSON · {reason}" footer (json.tsx).
+*/
+var CODE_LANGUAGES = [
+	{
+		value: "html",
+		label: "HTML"
+	},
+	{
+		value: "css",
+		label: "CSS"
+	},
+	{
+		value: "js",
+		label: "JS"
+	},
+	{
+		value: "ts",
+		label: "TS"
+	},
+	{
+		value: "json",
+		label: "JSON"
+	},
+	{
+		value: "liquid",
+		label: "Liquid"
+	},
+	{
+		value: "markdown",
+		label: "Markdown"
+	},
+	{
+		value: "shell",
+		label: "Shell"
+	}
+];
+var PLAIN = "plain";
+/** The picker: Plain text, then the field's allowed languages (or the built-in list), then the stored one if it is outside them. */
+function languageOptions(language, allowed) {
+	const list = allowed ? allowed.map((v) => CODE_LANGUAGES.find((l) => l.value === v) ?? {
+		value: v,
+		label: v
+	}) : CODE_LANGUAGES;
+	return [
+		{
+			value: PLAIN,
+			label: "Plain text"
+		},
+		...list,
+		...language && !list.some((l) => l.value === language) ? [{
+			value: language,
+			label: language
+		}] : []
+	];
+}
+/** Why a JSON text does not parse ("" when it does, or is empty). */
+function jsonProblem(text) {
+	if (!text.trim()) return "";
+	try {
+		JSON.parse(text);
+		return "";
+	} catch (e) {
+		return e.message.replace(/^JSON\.parse: /, "");
+	}
+}
+function CodeSurface({ kind, value, onChange, language, onLanguage, languages, readOnly, id, invalid, minRows = 8, label, describedBy }) {
+	const { toast } = useKitServices();
+	const lines = Math.max(minRows, value.split("\n").length);
+	const problem = kind === "json" ? jsonProblem(value) : value.length > 1e5 ? `Code can hold up to ${CODE_MAX_LENGTH.toLocaleString("en-US")} characters; this has ${value.length.toLocaleString("en-US")}.` : "";
+	const footerId = id ? `${id}-problem` : void 0;
+	const format = () => {
+		try {
+			onChange(JSON.stringify(JSON.parse(value), null, 2));
+			toast?.success("JSON formatted");
+		} catch {
+			toast?.("Fix the JSON before formatting");
+		}
+	};
+	const copy = () => {
+		navigator.clipboard?.writeText(value);
+		toast?.success("Copied");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("overflow-hidden rounded-kit-lg border bg-kit-subtle", invalid || problem ? "border-[var(--kit-field-invalid)]" : "border-kit-line"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-8 items-center justify-between border-b border-kit-line px-2",
+				children: [kind === "json" ? /* @__PURE__ */ jsx("span", {
+					className: "px-1 font-kit-mono text-kit-xs text-kit-fg-3",
+					children: "JSON"
+				}) : onLanguage ? /* @__PURE__ */ jsx(Select, {
+					"aria-label": "Code language",
+					size: "sm",
+					variant: "ghost",
+					disabled: readOnly,
+					value: language || PLAIN,
+					onValueChange: (l) => onLanguage(l === PLAIN ? "" : l),
+					options: languageOptions(language, languages)
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "px-1 font-kit-mono text-kit-xs text-kit-fg-3",
+					children: "Code"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [kind === "json" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: readOnly,
+						className: "rounded-kit-md px-1.5 py-0.5 text-kit-xs text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg",
+						onClick: format,
+						children: "Format"
+					}) : null, /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "rounded-kit-md px-1.5 py-0.5 text-kit-xs text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg",
+						onClick: copy,
+						children: "Copy"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex max-h-[60vh] overflow-auto font-kit-mono text-kit-xs leading-5",
+				children: [/* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: "select-none border-r border-kit-line bg-kit-subtle px-2 py-2 text-right text-kit-fg-4",
+					children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i))
+				}), /* @__PURE__ */ jsx("textarea", {
+					id,
+					spellCheck: false,
+					autoCapitalize: "off",
+					autoCorrect: "off",
+					value,
+					readOnly,
+					"aria-invalid": invalid || !!problem || void 0,
+					"aria-label": label,
+					"aria-describedby": [describedBy, problem ? footerId : void 0].filter(Boolean).join(" ") || void 0,
+					onChange: (e) => onChange(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Tab" && !e.shiftKey && !readOnly) {
+							e.preventDefault();
+							const el = e.currentTarget;
+							const s = el.selectionStart;
+							onChange(value.slice(0, s) + "  " + value.slice(el.selectionEnd));
+							requestAnimationFrame(() => el.setSelectionRange(s + 2, s + 2));
+						}
+					},
+					style: { height: lines * 20 + 16 },
+					className: "min-w-0 flex-1 resize-none bg-kit-field-bg px-3 py-2 text-kit-fg outline-none"
+				})]
+			}),
+			problem ? /* @__PURE__ */ jsx("div", {
+				id: footerId,
+				className: "border-t border-kit-danger-line bg-kit-danger-soft px-3 py-1.5 text-kit-xs text-kit-danger-fg",
+				children: kind === "json" ? `Invalid JSON · ${problem}` : problem
+			}) : null
+		]
+	});
+}
+function CodeDialogField({ kind, title, description, text, readOnly, id, invalid, language, languages, onDone }) {
+	const { toast } = useKitServices();
+	const [open, setOpen] = React.useState(false);
+	const [draft, setDraft] = React.useState(text);
+	const [lang, setLang] = React.useState(language);
+	const [refusal, setRefusal] = React.useState(null);
+	const first = text.split("\n").find((l) => l.trim()) ?? "";
+	const Icon = kind === "json" ? IconBraces : IconCode;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		id,
+		type: "button",
+		"aria-haspopup": "dialog",
+		"aria-invalid": invalid || void 0,
+		onClick: () => {
+			setDraft(text);
+			setLang(language);
+			setRefusal(null);
+			setOpen(true);
+		},
+		className: cn("group/code flex w-full items-center gap-2 rounded-kit-md border border-kit-line bg-kit-subtle px-2.5 py-2 text-left transition-colors hover:border-kit-line-strong", invalid && "border-[var(--kit-field-invalid)]"),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				className: "size-4 shrink-0 text-kit-fg-3",
+				stroke: 1.5,
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 flex-1 truncate font-kit-mono text-kit-xs", first ? "text-kit-fg-2" : "text-kit-fg-3"),
+				children: first || "Empty"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums shrink-0 text-kit-2xs text-kit-fg-3",
+				children: text ? `${text.split("\n").length} lines` : ""
+			}),
+			/* @__PURE__ */ jsx(IconMaximize, {
+				className: "size-3.5 shrink-0 text-kit-fg-3 group-hover/code:text-kit-fg",
+				stroke: 1.5,
+				"aria-hidden": true
+			})
+		]
+	}), /* @__PURE__ */ jsx(Modal, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs(ModalContent, {
+			size: "lg",
+			children: [
+				/* @__PURE__ */ jsx(ModalHeader, {
+					title,
+					description: description ?? (kind === "json" ? "Structured data for developers" : "Custom code")
+				}),
+				/* @__PURE__ */ jsxs(ModalBody, { children: [/* @__PURE__ */ jsx(CodeSurface, {
+					kind,
+					value: draft,
+					onChange: setDraft,
+					language: lang ?? "",
+					onLanguage: kind === "code" ? setLang : void 0,
+					languages,
+					readOnly,
+					minRows: 14,
+					label: title
+				}), refusal ? /* @__PURE__ */ jsxs("p", {
+					role: "alert",
+					className: "mt-2 flex items-start gap-1.5 text-kit-xs text-kit-danger-fg",
+					children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						stroke: 1.5,
+						"aria-hidden": true
+					}), refusal]
+				}) : null] }),
+				/* @__PURE__ */ jsxs(ModalFooter, { children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-hint": "shortcuts",
+						className: "text-kit-xs text-kit-fg-3",
+						children: "Esc to close"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "mr-auto",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						onClick: () => setOpen(false),
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						disabled: readOnly,
+						onClick: () => {
+							const why = onDone(draft, lang);
+							if (why) {
+								setRefusal(why);
+								toast?.(kind === "json" ? "Invalid JSON" : "Can't save this code", { description: "Fix it before saving." });
+								return;
+							}
+							setOpen(false);
+						},
+						children: "Done"
+					})
+				] })
+			]
+		})
+	})] });
+}
+function readCode(v) {
+	if (v == null) return {
+		ok: true,
+		code: "",
+		object: false
+	};
+	if (typeof v === "string") return {
+		ok: true,
+		code: v,
+		object: false
+	};
+	if (isObj(v) && typeof v.code === "string" && (v.language === void 0 || typeof v.language === "string")) return {
+		ok: true,
+		code: v.code,
+		language: v.language,
+		object: true
+	};
+	return { ok: false };
+}
+/** The stored shape for edited code: a string stays a string until a language is picked; the object keeps its form. */
+function codeValue(prev, code, language) {
+	const lang = language ?? prev.language ?? "";
+	if (!prev.object && !lang) return code;
+	return lang ? {
+		language: lang,
+		code
+	} : { code };
+}
+var tooLong = (code) => code.length > 1e5 ? `Code can hold up to ${CODE_MAX_LENGTH.toLocaleString("en-US")} characters; this has ${code.length.toLocaleString("en-US")}.` : null;
+function CodeControl({ field, value, onChange, readOnly, id, invalid }) {
+	const { variant } = useKitEnv();
+	const [refused, setRefused] = React.useState(null);
+	const read = readCode(value);
+	if (!read.ok) return /* @__PURE__ */ jsx(UnreadableValue, {
+		id,
+		title: field.title,
+		kind: "code",
+		value
+	});
+	if (variant === "document") return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx(CodeSurface, {
+			kind: "code",
+			id,
+			invalid: invalid || !!refused,
+			readOnly,
+			value: read.code,
+			language: read.language ?? "",
+			languages: field.languages,
+			onChange: (code) => {
+				const why = tooLong(code);
+				setRefused(why);
+				if (!why) onChange(codeValue(read, code, void 0));
+			},
+			onLanguage: (l) => onChange(codeValue(read, read.code, l))
+		}), refused ? /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-kit-xs text-kit-danger-fg",
+			children: refused
+		}) : null]
+	});
+	return /* @__PURE__ */ jsx(CodeDialogField, {
+		kind: "code",
+		id,
+		title: field.title,
+		description: field.description || void 0,
+		text: read.code,
+		language: read.language,
+		languages: field.languages,
+		readOnly,
+		invalid,
+		onDone: (draft, lang) => {
+			const why = tooLong(draft);
+			if (why) return why;
+			const next = codeValue(read, draft, lang);
+			if (draft !== read.code || (lang ?? "") !== (read.language ?? "")) onChange(next);
+			return null;
+		}
+	});
+}
+/** A stored value the control cannot read: named, shown, kept as it is (never replaced by a stray edit). */
+function UnreadableValue({ id, title, kind, value }) {
+	let raw;
+	try {
+		raw = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+	} catch {
+		raw = String(value);
+	}
+	return /* @__PURE__ */ jsxs("output", {
+		id,
+		tabIndex: 0,
+		"data-slot": `${kind}-unreadable`,
+		className: "flex min-w-0 items-start gap-2 rounded-kit-md border border-dashed border-kit-line-strong bg-kit-subtle px-2.5 py-2 text-kit-xs text-kit-fg-2 outline-none focus-visible:outline-2 focus-visible:outline-kit-focus-ring",
+		children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+			className: "mt-0.5 size-3.5 shrink-0 text-kit-warning-fg",
+			stroke: 1.5,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0",
+			children: [
+				title,
+				" holds a value this ",
+				kind,
+				" editor can't read, so it is kept as it is:",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "block max-h-24 overflow-auto whitespace-pre-wrap break-all font-kit-mono text-kit-fg",
+					children: raw
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { CodeControl, CodeDialogField, CodeSurface, UnreadableValue, jsonProblem };
+
+//# sourceMappingURL=code.js.map

package/dist/controls/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","names":[],"sources":["../../src/controls/code.tsx"],"sourcesContent":["/**\n * CODE — the code field (DESIGN 8.21), V2 controls/misc.tsx (CodeSurface, CodeControl) fitted to what prod stores.\n *\n * Values (backend reference-validation `code`, adapters/values.ts codeToProd):\n *   \"<p>hi</p>\"                         a bare string, kept a string\n *   { language?: \"html\", code: \"…\" }    the object form; only `code` and `language` are written back\n * The language list sits in the surface header. Picking one writes the object form; a value that never changes its\n * language keeps the shape it was stored in. A value over CODE_MAX_LENGTH characters is refused with the reason.\n *\n * Panel: a one-line summary button that opens a `lg` dialog editing a draft (Cancel / Done). Document: the surface\n * inline. The surface: mono 12/20 textarea with line numbers, Tab inserts two spaces (Shift+Tab leaves the field),\n * Copy, and for JSON a Format action and a live \"Invalid JSON · {reason}\" footer (json.tsx).\n */\nimport * as React from \"react\";\nimport { IconAlertTriangle, IconBraces, IconCode, IconMaximize } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { isObj } from \"../lib/path\";\nimport { useKitEnv, useKitServices } from \"../context\";\nimport { CODE_MAX_LENGTH } from \"../adapters/prod-types\";\nimport type { ControlProps } from \"../types\";\nimport { Button } from \"../ui/button\";\nimport { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from \"../ui/overlay\";\nimport { Select } from \"../ui/select\";\n\nconst CODE_LANGUAGES: { value: string; label: string }[] = [\n  { value: \"html\", label: \"HTML\" },\n  { value: \"css\", label: \"CSS\" },\n  { value: \"js\", label: \"JS\" },\n  { value: \"ts\", label: \"TS\" },\n  { value: \"json\", label: \"JSON\" },\n  { value: \"liquid\", label: \"Liquid\" },\n  { value: \"markdown\", label: \"Markdown\" },\n  { value: \"shell\", label: \"Shell\" },\n];\nconst PLAIN = \"plain\";\n\n/** The picker: Plain text, then the field's allowed languages (or the built-in list), then the stored one if it is outside them. */\nfunction languageOptions(language: string | undefined, allowed: string[] | undefined) {\n  const list = allowed ? allowed.map((v) => CODE_LANGUAGES.find((l) => l.value === v) ?? { value: v, label: v }) : CODE_LANGUAGES;\n  return [{ value: PLAIN, label: \"Plain text\" }, ...list, ...(language && !list.some((l) => l.value === language) ? [{ value: language, label: language }] : [])];\n}\n\n/** Why a JSON text does not parse (\"\" when it does, or is empty). */\nexport function jsonProblem(text: string): string {\n  if (!text.trim()) return \"\";\n  try {\n    JSON.parse(text);\n    return \"\";\n  } catch (e) {\n    return (e as Error).message.replace(/^JSON\\.parse: /, \"\");\n  }\n}\n\n/* ── The surface ──────────────────────────────────────────────────────── */\nexport interface CodeSurfaceProps {\n  /** \"json\": the JSON header, Format and the parse footer. \"code\": the language list. */\n  kind: \"json\" | \"code\";\n  value: string;\n  onChange: (v: string) => void;\n  /** code: the language shown in the header (\"\" = none) and what picking one does; absent = no list */\n  language?: string;\n  onLanguage?: (language: string) => void;\n  /** code: the only languages the field allows (its config.languages); absent = the built-in list */\n  languages?: string[];\n  readOnly?: boolean;\n  id?: string;\n  invalid?: boolean;\n  minRows?: number;\n  label?: string;\n  describedBy?: string;\n}\n\nexport function CodeSurface({ kind, value, onChange, language, onLanguage, languages, readOnly, id, invalid, minRows = 8, label, describedBy }: CodeSurfaceProps) {\n  const { toast } = useKitServices();\n  const lines = Math.max(minRows, value.split(\"\\n\").length);\n  const problem = kind === \"json\" ? jsonProblem(value) : value.length > CODE_MAX_LENGTH ? `Code can hold up to ${CODE_MAX_LENGTH.toLocaleString(\"en-US\")} characters; this has ${value.length.toLocaleString(\"en-US\")}.` : \"\";\n  const footerId = id ? `${id}-problem` : undefined;\n  const format = () => {\n    try {\n      onChange(JSON.stringify(JSON.parse(value), null, 2));\n      toast?.success(\"JSON formatted\");\n    } catch {\n      toast?.(\"Fix the JSON before formatting\");\n    }\n  };\n  const copy = () => {\n    void navigator.clipboard?.writeText(value);\n    toast?.success(\"Copied\");\n  };\n  return (\n    <div className={cn(\"overflow-hidden rounded-kit-lg border bg-kit-subtle\", invalid || problem ? \"border-[var(--kit-field-invalid)]\" : \"border-kit-line\")}>\n      <div className=\"flex h-8 items-center justify-between border-b border-kit-line px-2\">\n        {kind === \"json\" ? (\n          <span className=\"px-1 font-kit-mono text-kit-xs text-kit-fg-3\">JSON</span>\n        ) : onLanguage ? (\n          <Select\n            aria-label=\"Code language\"\n            size=\"sm\"\n            variant=\"ghost\"\n            disabled={readOnly}\n            value={language || PLAIN}\n            onValueChange={(l) => onLanguage(l === PLAIN ? \"\" : l)}\n            options={languageOptions(language, languages)}\n          />\n        ) : (\n          <span className=\"px-1 font-kit-mono text-kit-xs text-kit-fg-3\">Code</span>\n        )}\n        <div className=\"flex items-center gap-1\">\n          {kind === \"json\" ? (\n            <button type=\"button\" disabled={readOnly} className=\"rounded-kit-md px-1.5 py-0.5 text-kit-xs text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg\" onClick={format}>\n              Format\n            </button>\n          ) : null}\n          <button type=\"button\" className=\"rounded-kit-md px-1.5 py-0.5 text-kit-xs text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg\" onClick={copy}>\n            Copy\n          </button>\n        </div>\n      </div>\n      <div className=\"flex max-h-[60vh] overflow-auto font-kit-mono text-kit-xs leading-5\">\n        <div aria-hidden className=\"select-none border-r border-kit-line bg-kit-subtle px-2 py-2 text-right text-kit-fg-4\">\n          {Array.from({ length: lines }).map((_, i) => (\n            <div key={i}>{i + 1}</div>\n          ))}\n        </div>\n        <textarea\n          id={id}\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          value={value}\n          readOnly={readOnly}\n          aria-invalid={invalid || !!problem || undefined}\n          aria-label={label}\n          aria-describedby={[describedBy, problem ? footerId : undefined].filter(Boolean).join(\" \") || undefined}\n          onChange={(e) => onChange(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Tab\" && !e.shiftKey && !readOnly) {\n              e.preventDefault();\n              const el = e.currentTarget;\n              const s = el.selectionStart;\n              onChange(value.slice(0, s) + \"  \" + value.slice(el.selectionEnd));\n              requestAnimationFrame(() => el.setSelectionRange(s + 2, s + 2));\n            }\n          }}\n          style={{ height: lines * 20 + 16 }}\n          className=\"min-w-0 flex-1 resize-none bg-kit-field-bg px-3 py-2 text-kit-fg outline-none\"\n        />\n      </div>\n      {problem ? (\n        <div id={footerId} className=\"border-t border-kit-danger-line bg-kit-danger-soft px-3 py-1.5 text-kit-xs text-kit-danger-fg\">\n          {kind === \"json\" ? `Invalid JSON · ${problem}` : problem}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/* ── Panel: summary button + dialog over a draft ─────────────────────── */\nexport function CodeDialogField({\n  kind, title, description, text, readOnly, id, invalid, language, languages, onDone,\n}: {\n  kind: \"json\" | \"code\";\n  title: string;\n  description?: string;\n  text: string;\n  readOnly?: boolean;\n  id: string;\n  invalid?: boolean;\n  language?: string;\n  languages?: string[];\n  /** commit the draft; returns the reason it can't be saved, or null when saved */\n  onDone: (draft: string, language: string | undefined) => string | null;\n}) {\n  const { toast } = useKitServices();\n  const [open, setOpen] = React.useState(false);\n  const [draft, setDraft] = React.useState(text);\n  const [lang, setLang] = React.useState(language);\n  const [refusal, setRefusal] = React.useState<string | null>(null);\n  const first = text.split(\"\\n\").find((l) => l.trim()) ?? \"\";\n  const Icon = kind === \"json\" ? IconBraces : IconCode;\n  return (\n    <>\n      <button\n        id={id}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-invalid={invalid || undefined}\n        onClick={() => {\n          setDraft(text);\n          setLang(language);\n          setRefusal(null);\n          setOpen(true);\n        }}\n        className={cn(\n          \"group/code flex w-full items-center gap-2 rounded-kit-md border border-kit-line bg-kit-subtle px-2.5 py-2 text-left transition-colors hover:border-kit-line-strong\",\n          invalid && \"border-[var(--kit-field-invalid)]\",\n        )}\n      >\n        <Icon className=\"size-4 shrink-0 text-kit-fg-3\" stroke={1.5} aria-hidden />\n        <span className={cn(\"min-w-0 flex-1 truncate font-kit-mono text-kit-xs\", first ? \"text-kit-fg-2\" : \"text-kit-fg-3\")}>{first || \"Empty\"}</span>\n        <span className=\"tabular-nums shrink-0 text-kit-2xs text-kit-fg-3\">{text ? `${text.split(\"\\n\").length} lines` : \"\"}</span>\n        <IconMaximize className=\"size-3.5 shrink-0 text-kit-fg-3 group-hover/code:text-kit-fg\" stroke={1.5} aria-hidden />\n      </button>\n      <Modal open={open} onOpenChange={setOpen}>\n        <ModalContent size=\"lg\">\n          <ModalHeader title={title} description={description ?? (kind === \"json\" ? \"Structured data for developers\" : \"Custom code\")} />\n          <ModalBody>\n            <CodeSurface kind={kind} value={draft} onChange={setDraft} language={lang ?? \"\"} onLanguage={kind === \"code\" ? setLang : undefined} languages={languages} readOnly={readOnly} minRows={14} label={title} />\n            {refusal ? (\n              <p role=\"alert\" className=\"mt-2 flex items-start gap-1.5 text-kit-xs text-kit-danger-fg\">\n                <IconAlertTriangle className=\"mt-0.5 size-3.5 shrink-0\" stroke={1.5} aria-hidden />\n                {refusal}\n              </p>\n            ) : null}\n          </ModalBody>\n          <ModalFooter>\n            <span data-hint=\"shortcuts\" className=\"text-kit-xs text-kit-fg-3\">\n              Esc to close\n            </span>\n            <span className=\"mr-auto\" aria-hidden />\n            <Button variant=\"ghost\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              variant=\"primary\"\n              disabled={readOnly}\n              onClick={() => {\n                const why = onDone(draft, lang);\n                if (why) {\n                  setRefusal(why);\n                  toast?.(kind === \"json\" ? \"Invalid JSON\" : \"Can't save this code\", { description: \"Fix it before saving.\" });\n                  return;\n                }\n                setOpen(false);\n              }}\n            >\n              Done\n            </Button>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n\n/* ── The control ──────────────────────────────────────────────────────── */\ntype CodeRead = { ok: true; code: string; language?: string; object: boolean } | { ok: false };\nfunction readCode(v: unknown): CodeRead {\n  if (v == null) return { ok: true, code: \"\", object: false };\n  if (typeof v === \"string\") return { ok: true, code: v, object: false };\n  if (isObj(v) && typeof v.code === \"string\" && (v.language === undefined || typeof v.language === \"string\")) return { ok: true, code: v.code, language: v.language as string | undefined, object: true };\n  return { ok: false };\n}\n\n/** The stored shape for edited code: a string stays a string until a language is picked; the object keeps its form. */\nfunction codeValue(prev: CodeRead & { ok: true }, code: string, language: string | undefined): string | { language?: string; code: string } {\n  const lang = language ?? prev.language ?? \"\";\n  if (!prev.object && !lang) return code;\n  return lang ? { language: lang, code } : { code };\n}\nconst tooLong = (code: string) => (code.length > CODE_MAX_LENGTH ? `Code can hold up to ${CODE_MAX_LENGTH.toLocaleString(\"en-US\")} characters; this has ${code.length.toLocaleString(\"en-US\")}.` : null);\n\nexport function CodeControl({ field, value, onChange, readOnly, id, invalid }: ControlProps) {\n  const { variant } = useKitEnv();\n  const [refused, setRefused] = React.useState<string | null>(null);\n  const read = readCode(value);\n  if (!read.ok) return <UnreadableValue id={id} title={field.title} kind=\"code\" value={value} />;\n  if (variant === \"document\")\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        <CodeSurface\n          kind=\"code\"\n          id={id}\n          invalid={invalid || !!refused}\n          readOnly={readOnly}\n          value={read.code}\n          language={read.language ?? \"\"}\n          languages={field.languages}\n          onChange={(code) => {\n            const why = tooLong(code);\n            setRefused(why);\n            if (!why) onChange(codeValue(read, code, undefined));\n          }}\n          onLanguage={(l) => onChange(codeValue(read, read.code, l))}\n        />\n        {refused ? (\n          <p role=\"alert\" className=\"text-kit-xs text-kit-danger-fg\">\n            {refused}\n          </p>\n        ) : null}\n      </div>\n    );\n  return (\n    <CodeDialogField\n      kind=\"code\"\n      id={id}\n      title={field.title}\n      description={field.description || undefined}\n      text={read.code}\n      language={read.language}\n      languages={field.languages}\n      readOnly={readOnly}\n      invalid={invalid}\n      onDone={(draft, lang) => {\n        const why = tooLong(draft);\n        if (why) return why;\n        const next = codeValue(read, draft, lang);\n        if (draft !== read.code || (lang ?? \"\") !== (read.language ?? \"\")) onChange(next);\n        return null;\n      }}\n    />\n  );\n}\n\n/** A stored value the control cannot read: named, shown, kept as it is (never replaced by a stray edit). */\nexport function UnreadableValue({ id, title, kind, value }: { id: string; title: string; kind: string; value: unknown }) {\n  let raw: string;\n  try {\n    raw = typeof value === \"string\" ? value : JSON.stringify(value, null, 2);\n  } catch {\n    raw = String(value);\n  }\n  return (\n    <output\n      id={id}\n      tabIndex={0}\n      data-slot={`${kind}-unreadable`}\n      className=\"flex min-w-0 items-start gap-2 rounded-kit-md border border-dashed border-kit-line-strong bg-kit-subtle px-2.5 py-2 text-kit-xs text-kit-fg-2 outline-none focus-visible:outline-2 focus-visible:outline-kit-focus-ring\"\n    >\n      <IconAlertTriangle className=\"mt-0.5 size-3.5 shrink-0 text-kit-warning-fg\" stroke={1.5} aria-hidden />\n      <span className=\"min-w-0\">\n        {title} holds a value this {kind} editor can't read, so it is kept as it is:{\" \"}\n        <span className=\"block max-h-24 overflow-auto whitespace-pre-wrap break-all font-kit-mono text-kit-fg\">{raw}</span>\n      </span>\n    </output>\n  );\n}\n"],"mappings":"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"}

package/dist/controls/color.d.ts

@@ -0,0 +1,5 @@
+import type { ControlProps } from "../types";
+export declare const HEX_COLOR: RegExp;
+/** #RGB / #RRGGBBAA → #RRGGBB for the native picker, which takes only six digits. */
+export declare function pickerHex(v: string): string;
+export declare function ColorControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;