@flanksource/clicky-ui 0.2.14 → 0.2.15

package/dist/components/FormatOptionsDropdown.cjs

@@ -4,27 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
 require("react");
 const Icon = require("../data/Icon.cjs");
 const SplitButton = require("./SplitButton.cjs");
-const UiEye = require("../icons/components/UiEye.cjs");
-const UiFileCode = require("../icons/components/UiFileCode.cjs");
-const UiTable = require("../icons/components/UiTable.cjs");
-const UiComment = require("../icons/components/UiComment.cjs");
+const formatOptions = require("./format-options.cjs");
 const UiCheck = require("../icons/components/UiCheck.cjs");
-const CLICKY_FORMAT_OPTIONS = [
-  { value: "clicky", label: "Clicky", description: "Rendered Clicky JSON with the rich Clicky viewer", icon: UiEye.UiEye },
-  { value: "json", label: "JSON", description: "Plain JSON for inspecting the raw response body", icon: UiFileCode.UiFileCode },
-  { value: "yaml", label: "YAML", description: "YAML for config-friendly inspection and export", icon: UiFileCode.UiFileCode },
-  { value: "csv", label: "CSV", description: "Comma-separated values for spreadsheets and imports", icon: UiTable.UiTable },
-  { value: "markdown", label: "Markdown", description: "Markdown formatted for docs, comments, and chat", icon: UiFileCode.UiFileCode },
-  { value: "html", label: "HTML", description: "Browser-ready HTML preview of the formatted output", icon: UiFileCode.UiFileCode },
-  { value: "pdf", label: "PDF", description: "Portable document for sharing and printing", icon: UiFileCode.UiFileCode },
-  { value: "pretty", label: "Pretty", description: "Human-readable plain text output from the formatter", icon: UiFileCode.UiFileCode },
-  { value: "excel", label: "Excel", description: "Spreadsheet workbook for offline analysis", icon: UiTable.UiTable },
-  { value: "slack", label: "Slack", description: "Slack Block Kit JSON for chat-native output", icon: UiComment.UiComment }
-];
 function FormatOptionsDropdown({
   value,
   onChange,
-  options = CLICKY_FORMAT_OPTIONS,
+  options = formatOptions.CLICKY_FORMAT_OPTIONS,
   label,
   variant = "outline",
   size = "default",
@@ -57,6 +42,5 @@ function FormatOptionsDropdown({
     }
   );
 }
-exports.CLICKY_FORMAT_OPTIONS = CLICKY_FORMAT_OPTIONS;
 exports.FormatOptionsDropdown = FormatOptionsDropdown;
 //# sourceMappingURL=FormatOptionsDropdown.cjs.map

package/dist/components/FormatOptionsDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormatOptionsDropdown.cjs","sources":["../../src/components/FormatOptionsDropdown.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type ButtonProps } from \"./button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiCheck, UiComment, UiEye, UiFileCode, UiTable } from \"../icons\";\nimport { SplitButton } from \"./SplitButton\";\n\nexport type FormatOption = {\n  /** Stable identifier emitted by `onChange`. */\n  value: string;\n  /** Visible label. */\n  label: string;\n  /** Secondary description shown in the menu. */\n  description?: string;\n  /** Icon rendered before the label. */\n  icon?: StaticIconComponent;\n};\n\n/**\n * Clicky output formats with their label, description, and icon. Mirrors the\n * metadata in `Clicky.tsx`'s `getRemoteFormatMeta` so the format picker can live\n * as a standalone component.\n */\nexport const CLICKY_FORMAT_OPTIONS: FormatOption[] = [\n  { value: \"clicky\", label: \"Clicky\", description: \"Rendered Clicky JSON with the rich Clicky viewer\", icon: UiEye },\n  { value: \"json\", label: \"JSON\", description: \"Plain JSON for inspecting the raw response body\", icon: UiFileCode },\n  { value: \"yaml\", label: \"YAML\", description: \"YAML for config-friendly inspection and export\", icon: UiFileCode },\n  { value: \"csv\", label: \"CSV\", description: \"Comma-separated values for spreadsheets and imports\", icon: UiTable },\n  { value: \"markdown\", label: \"Markdown\", description: \"Markdown formatted for docs, comments, and chat\", icon: UiFileCode },\n  { value: \"html\", label: \"HTML\", description: \"Browser-ready HTML preview of the formatted output\", icon: UiFileCode },\n  { value: \"pdf\", label: \"PDF\", description: \"Portable document for sharing and printing\", icon: UiFileCode },\n  { value: \"pretty\", label: \"Pretty\", description: \"Human-readable plain text output from the formatter\", icon: UiFileCode },\n  { value: \"excel\", label: \"Excel\", description: \"Spreadsheet workbook for offline analysis\", icon: UiTable },\n  { value: \"slack\", label: \"Slack\", description: \"Slack Block Kit JSON for chat-native output\", icon: UiComment },\n];\n\nexport type FormatOptionsDropdownProps = {\n  /** Active format value. */\n  value: string;\n  /** Called with the chosen format value. */\n  onChange: (value: string) => void;\n  /** Available formats. Defaults to the clicky output formats. */\n  options?: FormatOption[];\n  /** Override the primary button label. Defaults to the active option's label. */\n  label?: ReactNode;\n  /** Variant forwarded to the split button. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the split button. */\n  size?: ButtonProps[\"size\"];\n  /** Classes applied to the wrapper. */\n  className?: string;\n};\n\nexport function FormatOptionsDropdown({\n  value,\n  onChange,\n  options = CLICKY_FORMAT_OPTIONS,\n  label,\n  variant = \"outline\",\n  size = \"default\",\n  className,\n}: FormatOptionsDropdownProps) {\n  const active = options.find((option) => option.value === value);\n\n  return (\n    <SplitButton\n      label={label ?? active?.label ?? value}\n      {...(active?.icon ? { icon: active.icon } : {})}\n      onClick={() => onChange(value)}\n      variant={variant}\n      size={size}\n      title=\"Choose format\"\n      {...(className ? { className } : {})}\n      menuClassName=\"min-w-[18rem]\"\n      items={options.map((option) => ({\n        ...(option.icon ? { icon: option.icon } : {}),\n        ...(option.description ? { title: option.description } : {}),\n        label: (\n          <span className=\"flex min-w-0 flex-col\">\n            <span className=\"flex items-center gap-2 font-medium\">\n              {option.label}\n              {option.value === value && <Icon icon={UiCheck} className=\"text-xs text-muted-foreground\" />}\n            </span>\n            {option.description && (\n              <span className=\"text-xs text-muted-foreground\">{option.description}</span>\n            )}\n          </span>\n        ),\n        onSelect: () => onChange(option.value),\n      }))}\n    />\n  );\n}\n"],"names":["UiEye","UiFileCode","UiTable","UiComment","jsx","SplitButton","jsxs","Icon","UiCheck"],"mappings":";;;;;;;;;;;AAsBO,MAAM,wBAAwC;AAAA,EACnD,EAAE,OAAO,UAAU,OAAO,UAAU,aAAa,oDAAoD,MAAMA,YAAA;AAAA,EAC3G,EAAE,OAAO,QAAQ,OAAO,QAAQ,aAAa,mDAAmD,MAAMC,sBAAA;AAAA,EACtG,EAAE,OAAO,QAAQ,OAAO,QAAQ,aAAa,kDAAkD,MAAMA,sBAAA;AAAA,EACrG,EAAE,OAAO,OAAO,OAAO,OAAO,aAAa,uDAAuD,MAAMC,gBAAA;AAAA,EACxG,EAAE,OAAO,YAAY,OAAO,YAAY,aAAa,mDAAmD,MAAMD,sBAAA;AAAA,EAC9G,EAAE,OAAO,QAAQ,OAAO,QAAQ,aAAa,sDAAsD,MAAMA,sBAAA;AAAA,EACzG,EAAE,OAAO,OAAO,OAAO,OAAO,aAAa,8CAA8C,MAAMA,sBAAA;AAAA,EAC/F,EAAE,OAAO,UAAU,OAAO,UAAU,aAAa,uDAAuD,MAAMA,sBAAA;AAAA,EAC9G,EAAE,OAAO,SAAS,OAAO,SAAS,aAAa,6CAA6C,MAAMC,gBAAA;AAAA,EAClG,EAAE,OAAO,SAAS,OAAO,SAAS,aAAa,+CAA+C,MAAMC,UAAAA,UAAA;AACtG;AAmBO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,GAA+B;AAC7B,QAAM,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK;AAE9D,SACEC,2BAAAA;AAAAA,IAACC,YAAAA;AAAAA,IAAA;AAAA,MACC,OAAO,UAAS,iCAAQ,UAAS;AAAA,MAChC,IAAI,iCAAQ,QAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,MAC5C,SAAS,MAAM,SAAS,KAAK;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACL,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,eAAc;AAAA,MACd,OAAO,QAAQ,IAAI,CAAC,YAAY;AAAA,QAC9B,GAAI,OAAO,OAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,QAC1C,GAAI,OAAO,cAAc,EAAE,OAAO,OAAO,YAAA,IAAgB,CAAA;AAAA,QACzD,OACEC,2BAAAA,KAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,UAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,uCACb,UAAA;AAAA,YAAA,OAAO;AAAA,YACP,OAAO,UAAU,SAASF,+BAACG,KAAAA,QAAK,MAAMC,QAAAA,SAAS,WAAU,gCAAA,CAAgC;AAAA,UAAA,GAC5F;AAAA,UACC,OAAO,eACNJ,2BAAAA,IAAC,UAAK,WAAU,iCAAiC,iBAAO,YAAA,CAAY;AAAA,QAAA,GAExE;AAAA,QAEF,UAAU,MAAM,SAAS,OAAO,KAAK;AAAA,MAAA,EACrC;AAAA,IAAA;AAAA,EAAA;AAGR;;;"}
+{"version":3,"file":"FormatOptionsDropdown.cjs","sources":["../../src/components/FormatOptionsDropdown.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type ButtonProps } from \"./button\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { SplitButton } from \"./SplitButton\";\nimport { CLICKY_FORMAT_OPTIONS, type FormatOption } from \"./format-options\";\n\nexport type FormatOptionsDropdownProps = {\n  /** Active format value. */\n  value: string;\n  /** Called with the chosen format value. */\n  onChange: (value: string) => void;\n  /** Available formats. Defaults to the clicky output formats. */\n  options?: FormatOption[];\n  /** Override the primary button label. Defaults to the active option's label. */\n  label?: ReactNode;\n  /** Variant forwarded to the split button. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the split button. */\n  size?: ButtonProps[\"size\"];\n  /** Classes applied to the wrapper. */\n  className?: string;\n};\n\nexport function FormatOptionsDropdown({\n  value,\n  onChange,\n  options = CLICKY_FORMAT_OPTIONS,\n  label,\n  variant = \"outline\",\n  size = \"default\",\n  className,\n}: FormatOptionsDropdownProps) {\n  const active = options.find((option) => option.value === value);\n\n  return (\n    <SplitButton\n      label={label ?? active?.label ?? value}\n      {...(active?.icon ? { icon: active.icon } : {})}\n      onClick={() => onChange(value)}\n      variant={variant}\n      size={size}\n      title=\"Choose format\"\n      {...(className ? { className } : {})}\n      menuClassName=\"min-w-[18rem]\"\n      items={options.map((option) => ({\n        ...(option.icon ? { icon: option.icon } : {}),\n        ...(option.description ? { title: option.description } : {}),\n        label: (\n          <span className=\"flex min-w-0 flex-col\">\n            <span className=\"flex items-center gap-2 font-medium\">\n              {option.label}\n              {option.value === value && <Icon icon={UiCheck} className=\"text-xs text-muted-foreground\" />}\n            </span>\n            {option.description && (\n              <span className=\"text-xs text-muted-foreground\">{option.description}</span>\n            )}\n          </span>\n        ),\n        onSelect: () => onChange(option.value),\n      }))}\n    />\n  );\n}\n"],"names":["CLICKY_FORMAT_OPTIONS","jsx","SplitButton","jsxs","Icon","UiCheck"],"mappings":";;;;;;;;AAwBO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,UAAUA,cAAAA;AAAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,GAA+B;AAC7B,QAAM,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK;AAE9D,SACEC,2BAAAA;AAAAA,IAACC,YAAAA;AAAAA,IAAA;AAAA,MACC,OAAO,UAAS,iCAAQ,UAAS;AAAA,MAChC,IAAI,iCAAQ,QAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,MAC5C,SAAS,MAAM,SAAS,KAAK;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACL,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,eAAc;AAAA,MACd,OAAO,QAAQ,IAAI,CAAC,YAAY;AAAA,QAC9B,GAAI,OAAO,OAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,QAC1C,GAAI,OAAO,cAAc,EAAE,OAAO,OAAO,YAAA,IAAgB,CAAA;AAAA,QACzD,OACEC,2BAAAA,KAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,UAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,uCACb,UAAA;AAAA,YAAA,OAAO;AAAA,YACP,OAAO,UAAU,SAASF,+BAACG,KAAAA,QAAK,MAAMC,QAAAA,SAAS,WAAU,gCAAA,CAAgC;AAAA,UAAA,GAC5F;AAAA,UACC,OAAO,eACNJ,2BAAAA,IAAC,UAAK,WAAU,iCAAiC,iBAAO,YAAA,CAAY;AAAA,QAAA,GAExE;AAAA,QAEF,UAAU,MAAM,SAAS,OAAO,KAAK;AAAA,MAAA,EACrC;AAAA,IAAA;AAAA,EAAA;AAGR;;"}

package/dist/components/FormatOptionsDropdown.d.ts

@@ -1,22 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from './button';
-import { StaticIconComponent } from '../data/Icon';
-export type FormatOption = {
-    /** Stable identifier emitted by `onChange`. */
-    value: string;
-    /** Visible label. */
-    label: string;
-    /** Secondary description shown in the menu. */
-    description?: string;
-    /** Icon rendered before the label. */
-    icon?: StaticIconComponent;
-};
-/**
- * Clicky output formats with their label, description, and icon. Mirrors the
- * metadata in `Clicky.tsx`'s `getRemoteFormatMeta` so the format picker can live
- * as a standalone component.
- */
-export declare const CLICKY_FORMAT_OPTIONS: FormatOption[];
+import { FormatOption } from './format-options';
 export type FormatOptionsDropdownProps = {
     /** Active format value. */
     value: string;

package/dist/components/FormatOptionsDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormatOptionsDropdown.d.ts","sourceRoot":"","sources":["../../src/components/FormatOptionsDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,MAAM,YAAY,GAAG;IACzB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,YAAY,EAW/C,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAA+B,EAC/B,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,SAAS,GACV,EAAE,0BAA0B,2CA+B5B"}
+{"version":3,"file":"FormatOptionsDropdown.d.ts","sourceRoot":"","sources":["../../src/components/FormatOptionsDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,OAAO,EAAyB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5E,MAAM,MAAM,0BAA0B,GAAG;IACvC,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAA+B,EAC/B,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,SAAS,GACV,EAAE,0BAA0B,2CA+B5B"}

package/dist/components/FormatOptionsDropdown.js

@@ -2,23 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Icon } from "../data/Icon.js";
 import { SplitButton } from "./SplitButton.js";
-import { UiEye } from "../icons/components/UiEye.js";
-import { UiFileCode } from "../icons/components/UiFileCode.js";
-import { UiTable } from "../icons/components/UiTable.js";
-import { UiComment } from "../icons/components/UiComment.js";
+import { CLICKY_FORMAT_OPTIONS } from "./format-options.js";
 import { UiCheck } from "../icons/components/UiCheck.js";
-const CLICKY_FORMAT_OPTIONS = [
-  { value: "clicky", label: "Clicky", description: "Rendered Clicky JSON with the rich Clicky viewer", icon: UiEye },
-  { value: "json", label: "JSON", description: "Plain JSON for inspecting the raw response body", icon: UiFileCode },
-  { value: "yaml", label: "YAML", description: "YAML for config-friendly inspection and export", icon: UiFileCode },
-  { value: "csv", label: "CSV", description: "Comma-separated values for spreadsheets and imports", icon: UiTable },
-  { value: "markdown", label: "Markdown", description: "Markdown formatted for docs, comments, and chat", icon: UiFileCode },
-  { value: "html", label: "HTML", description: "Browser-ready HTML preview of the formatted output", icon: UiFileCode },
-  { value: "pdf", label: "PDF", description: "Portable document for sharing and printing", icon: UiFileCode },
-  { value: "pretty", label: "Pretty", description: "Human-readable plain text output from the formatter", icon: UiFileCode },
-  { value: "excel", label: "Excel", description: "Spreadsheet workbook for offline analysis", icon: UiTable },
-  { value: "slack", label: "Slack", description: "Slack Block Kit JSON for chat-native output", icon: UiComment }
-];
 function FormatOptionsDropdown({
   value,
   onChange,
@@ -56,7 +41,6 @@ function FormatOptionsDropdown({
   );
 }
 export {
-  CLICKY_FORMAT_OPTIONS,
   FormatOptionsDropdown
 };
 //# sourceMappingURL=FormatOptionsDropdown.js.map

package/dist/components/FormatOptionsDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatOptionsDropdown.js","sources":["../../src/components/FormatOptionsDropdown.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type ButtonProps } from \"./button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiCheck, UiComment, UiEye, UiFileCode, UiTable } from \"../icons\";\nimport { SplitButton } from \"./SplitButton\";\n\nexport type FormatOption = {\n  /** Stable identifier emitted by `onChange`. */\n  value: string;\n  /** Visible label. */\n  label: string;\n  /** Secondary description shown in the menu. */\n  description?: string;\n  /** Icon rendered before the label. */\n  icon?: StaticIconComponent;\n};\n\n/**\n * Clicky output formats with their label, description, and icon. Mirrors the\n * metadata in `Clicky.tsx`'s `getRemoteFormatMeta` so the format picker can live\n * as a standalone component.\n */\nexport const CLICKY_FORMAT_OPTIONS: FormatOption[] = [\n  { value: \"clicky\", label: \"Clicky\", description: \"Rendered Clicky JSON with the rich Clicky viewer\", icon: UiEye },\n  { value: \"json\", label: \"JSON\", description: \"Plain JSON for inspecting the raw response body\", icon: UiFileCode },\n  { value: \"yaml\", label: \"YAML\", description: \"YAML for config-friendly inspection and export\", icon: UiFileCode },\n  { value: \"csv\", label: \"CSV\", description: \"Comma-separated values for spreadsheets and imports\", icon: UiTable },\n  { value: \"markdown\", label: \"Markdown\", description: \"Markdown formatted for docs, comments, and chat\", icon: UiFileCode },\n  { value: \"html\", label: \"HTML\", description: \"Browser-ready HTML preview of the formatted output\", icon: UiFileCode },\n  { value: \"pdf\", label: \"PDF\", description: \"Portable document for sharing and printing\", icon: UiFileCode },\n  { value: \"pretty\", label: \"Pretty\", description: \"Human-readable plain text output from the formatter\", icon: UiFileCode },\n  { value: \"excel\", label: \"Excel\", description: \"Spreadsheet workbook for offline analysis\", icon: UiTable },\n  { value: \"slack\", label: \"Slack\", description: \"Slack Block Kit JSON for chat-native output\", icon: UiComment },\n];\n\nexport type FormatOptionsDropdownProps = {\n  /** Active format value. */\n  value: string;\n  /** Called with the chosen format value. */\n  onChange: (value: string) => void;\n  /** Available formats. Defaults to the clicky output formats. */\n  options?: FormatOption[];\n  /** Override the primary button label. Defaults to the active option's label. */\n  label?: ReactNode;\n  /** Variant forwarded to the split button. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the split button. */\n  size?: ButtonProps[\"size\"];\n  /** Classes applied to the wrapper. */\n  className?: string;\n};\n\nexport function FormatOptionsDropdown({\n  value,\n  onChange,\n  options = CLICKY_FORMAT_OPTIONS,\n  label,\n  variant = \"outline\",\n  size = \"default\",\n  className,\n}: FormatOptionsDropdownProps) {\n  const active = options.find((option) => option.value === value);\n\n  return (\n    <SplitButton\n      label={label ?? active?.label ?? value}\n      {...(active?.icon ? { icon: active.icon } : {})}\n      onClick={() => onChange(value)}\n      variant={variant}\n      size={size}\n      title=\"Choose format\"\n      {...(className ? { className } : {})}\n      menuClassName=\"min-w-[18rem]\"\n      items={options.map((option) => ({\n        ...(option.icon ? { icon: option.icon } : {}),\n        ...(option.description ? { title: option.description } : {}),\n        label: (\n          <span className=\"flex min-w-0 flex-col\">\n            <span className=\"flex items-center gap-2 font-medium\">\n              {option.label}\n              {option.value === value && <Icon icon={UiCheck} className=\"text-xs text-muted-foreground\" />}\n            </span>\n            {option.description && (\n              <span className=\"text-xs text-muted-foreground\">{option.description}</span>\n            )}\n          </span>\n        ),\n        onSelect: () => onChange(option.value),\n      }))}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAsBO,MAAM,wBAAwC;AAAA,EACnD,EAAE,OAAO,UAAU,OAAO,UAAU,aAAa,oDAAoD,MAAM,MAAA;AAAA,EAC3G,EAAE,OAAO,QAAQ,OAAO,QAAQ,aAAa,mDAAmD,MAAM,WAAA;AAAA,EACtG,EAAE,OAAO,QAAQ,OAAO,QAAQ,aAAa,kDAAkD,MAAM,WAAA;AAAA,EACrG,EAAE,OAAO,OAAO,OAAO,OAAO,aAAa,uDAAuD,MAAM,QAAA;AAAA,EACxG,EAAE,OAAO,YAAY,OAAO,YAAY,aAAa,mDAAmD,MAAM,WAAA;AAAA,EAC9G,EAAE,OAAO,QAAQ,OAAO,QAAQ,aAAa,sDAAsD,MAAM,WAAA;AAAA,EACzG,EAAE,OAAO,OAAO,OAAO,OAAO,aAAa,8CAA8C,MAAM,WAAA;AAAA,EAC/F,EAAE,OAAO,UAAU,OAAO,UAAU,aAAa,uDAAuD,MAAM,WAAA;AAAA,EAC9G,EAAE,OAAO,SAAS,OAAO,SAAS,aAAa,6CAA6C,MAAM,QAAA;AAAA,EAClG,EAAE,OAAO,SAAS,OAAO,SAAS,aAAa,+CAA+C,MAAM,UAAA;AACtG;AAmBO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,GAA+B;AAC7B,QAAM,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK;AAE9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,UAAS,iCAAQ,UAAS;AAAA,MAChC,IAAI,iCAAQ,QAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,MAC5C,SAAS,MAAM,SAAS,KAAK;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACL,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,eAAc;AAAA,MACd,OAAO,QAAQ,IAAI,CAAC,YAAY;AAAA,QAC9B,GAAI,OAAO,OAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,QAC1C,GAAI,OAAO,cAAc,EAAE,OAAO,OAAO,YAAA,IAAgB,CAAA;AAAA,QACzD,OACE,qBAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,uCACb,UAAA;AAAA,YAAA,OAAO;AAAA,YACP,OAAO,UAAU,SAAS,oBAAC,QAAK,MAAM,SAAS,WAAU,gCAAA,CAAgC;AAAA,UAAA,GAC5F;AAAA,UACC,OAAO,eACN,oBAAC,UAAK,WAAU,iCAAiC,iBAAO,YAAA,CAAY;AAAA,QAAA,GAExE;AAAA,QAEF,UAAU,MAAM,SAAS,OAAO,KAAK;AAAA,MAAA,EACrC;AAAA,IAAA;AAAA,EAAA;AAGR;"}
+{"version":3,"file":"FormatOptionsDropdown.js","sources":["../../src/components/FormatOptionsDropdown.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type ButtonProps } from \"./button\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { SplitButton } from \"./SplitButton\";\nimport { CLICKY_FORMAT_OPTIONS, type FormatOption } from \"./format-options\";\n\nexport type FormatOptionsDropdownProps = {\n  /** Active format value. */\n  value: string;\n  /** Called with the chosen format value. */\n  onChange: (value: string) => void;\n  /** Available formats. Defaults to the clicky output formats. */\n  options?: FormatOption[];\n  /** Override the primary button label. Defaults to the active option's label. */\n  label?: ReactNode;\n  /** Variant forwarded to the split button. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the split button. */\n  size?: ButtonProps[\"size\"];\n  /** Classes applied to the wrapper. */\n  className?: string;\n};\n\nexport function FormatOptionsDropdown({\n  value,\n  onChange,\n  options = CLICKY_FORMAT_OPTIONS,\n  label,\n  variant = \"outline\",\n  size = \"default\",\n  className,\n}: FormatOptionsDropdownProps) {\n  const active = options.find((option) => option.value === value);\n\n  return (\n    <SplitButton\n      label={label ?? active?.label ?? value}\n      {...(active?.icon ? { icon: active.icon } : {})}\n      onClick={() => onChange(value)}\n      variant={variant}\n      size={size}\n      title=\"Choose format\"\n      {...(className ? { className } : {})}\n      menuClassName=\"min-w-[18rem]\"\n      items={options.map((option) => ({\n        ...(option.icon ? { icon: option.icon } : {}),\n        ...(option.description ? { title: option.description } : {}),\n        label: (\n          <span className=\"flex min-w-0 flex-col\">\n            <span className=\"flex items-center gap-2 font-medium\">\n              {option.label}\n              {option.value === value && <Icon icon={UiCheck} className=\"text-xs text-muted-foreground\" />}\n            </span>\n            {option.description && (\n              <span className=\"text-xs text-muted-foreground\">{option.description}</span>\n            )}\n          </span>\n        ),\n        onSelect: () => onChange(option.value),\n      }))}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;AAwBO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,GAA+B;AAC7B,QAAM,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK;AAE9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,UAAS,iCAAQ,UAAS;AAAA,MAChC,IAAI,iCAAQ,QAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,MAC5C,SAAS,MAAM,SAAS,KAAK;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACL,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,eAAc;AAAA,MACd,OAAO,QAAQ,IAAI,CAAC,YAAY;AAAA,QAC9B,GAAI,OAAO,OAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AAAA,QAC1C,GAAI,OAAO,cAAc,EAAE,OAAO,OAAO,YAAA,IAAgB,CAAA;AAAA,QACzD,OACE,qBAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,uCACb,UAAA;AAAA,YAAA,OAAO;AAAA,YACP,OAAO,UAAU,SAAS,oBAAC,QAAK,MAAM,SAAS,WAAU,gCAAA,CAAgC;AAAA,UAAA,GAC5F;AAAA,UACC,OAAO,eACN,oBAAC,UAAK,WAAU,iCAAiC,iBAAO,YAAA,CAAY;AAAA,QAAA,GAExE;AAAA,QAEF,UAAU,MAAM,SAAS,OAAO,KAAK;AAAA,MAAA,EACrC;AAAA,IAAA;AAAA,EAAA;AAGR;"}

package/dist/components/JsonSchemaForm.cjs

@@ -1,18 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const DropdownMenu = require("../overlay/DropdownMenu.cjs");
+const jsonSchemaFormFields = require("./json-schema-form-fields.cjs");
 const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const jsonSchemaFormPreferences = require("./json-schema-form-preferences.cjs");
+const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
 const DEFAULT_LABEL_MAX_WIDTH = "40ch";
 const DEFAULT_VALUE_MAX_WIDTH = "600px";
-function resolveFormLayout(layout, inline) {
-  const base = layout ?? { mode: inline ? "inline" : "stacked" };
-  if (base.mode !== "inline") return { mode: "stacked" };
+function resolveFormLayout(layout, inline, modeOverride) {
+  const baseMode = (layout == null ? void 0 : layout.mode) ?? (inline ? "inline" : "stacked");
+  const mode = modeOverride ?? baseMode;
+  const valueMaxWidth = (layout == null ? void 0 : layout.valueMaxWidth) ?? DEFAULT_VALUE_MAX_WIDTH;
+  if (mode !== "inline") return { mode: "stacked", valueMaxWidth };
   return {
     mode: "inline",
-    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,
-    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH
+    labelMaxWidth: (layout == null ? void 0 : layout.labelMaxWidth) ?? DEFAULT_LABEL_MAX_WIDTH,
+    valueMaxWidth
   };
 }
 function JsonSchemaForm({
@@ -29,26 +38,133 @@ function JsonSchemaForm({
   requiredFirst = false,
   title,
   pre,
-  post
+  post,
+  showPreferencesMenu = true,
+  persistPreferences = true,
+  preferencesStorageKey = jsonSchemaFormPreferences.DEFAULT_PREFERENCES_STORAGE_KEY
 }) {
-  const resolvedLayout = resolveFormLayout(layout, inline);
+  const [prefs, setPrefs] = react.useState(
+    () => showPreferencesMenu && persistPreferences ? jsonSchemaFormPreferences.readPreferences(preferencesStorageKey) : {}
+  );
+  const effectiveSize = prefs.size ?? size;
+  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);
+  const applyPrefs = (next) => {
+    setPrefs(next);
+    if (persistPreferences) jsonSchemaFormPreferences.writePreferences(preferencesStorageKey, next);
+  };
   const ctx = {
     readOnly,
     hideReadOnlyFields,
     layout: resolvedLayout,
-    size,
+    size: effectiveSize,
     requiredFirst,
     pre: pre ?? [],
     post: post ?? [],
     depth: 0,
+    render: jsonSchemaFormRender.renderApi,
     ...idPrefix ? { idPrefix } : {}
   };
   const rows = jsonSchemaFormRender.renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0);
-  const rowGap = resolvedLayout.mode === "inline" ? jsonSchemaFormSize.inlineRowGapClass[size] : jsonSchemaFormSize.stackedRowGapClass[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[size]), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("font-semibold", jsonSchemaFormSize.labelSizeClass[size]), children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid", rowGap), children: rows })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[effectiveSize]), children: [
+    showPreferencesMenu && /* @__PURE__ */ jsxRuntime.jsx(
+      PreferencesMenu,
+      {
+        size: effectiveSize,
+        layoutMode: resolvedLayout.mode,
+        onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
+        onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next })
+      }
+    ),
+    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("font-semibold", jsonSchemaFormSize.labelSizeClass[effectiveSize]), children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.FieldsGrid, { layout: resolvedLayout, size: effectiveSize, children: rows })
   ] });
 }
+const SIZE_OPTIONS = [
+  { value: "xs", label: "Extra small" },
+  { value: "sm", label: "Small" },
+  { value: "md", label: "Medium" },
+  { value: "lg", label: "Large" },
+  { value: "xl", label: "Extra large" }
+];
+const LAYOUT_OPTIONS = [
+  { value: "stacked", label: "Stacked" },
+  { value: "inline", label: "Inline" }
+];
+function PreferencesMenu({
+  size,
+  layoutMode,
+  onSelectSize,
+  onSelectLayout
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "right",
+      menuLabel: "Form display options",
+      className: "absolute right-0 top-0 z-10",
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Form display options",
+          "aria-haspopup": "menu",
+          className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiEllipsis.UiEllipsis, className: "text-sm" })
+        }
+      ),
+      children: (closeMenu) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PreferenceSection, { title: "Size" }),
+        SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+          PreferenceItem,
+          {
+            label: opt.label,
+            selected: opt.value === size,
+            onSelect: () => {
+              onSelectSize(opt.value);
+              closeMenu();
+            }
+          },
+          opt.value
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(PreferenceSection, { title: "Layout" }),
+        LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+          PreferenceItem,
+          {
+            label: opt.label,
+            selected: opt.value === layoutMode,
+            onSelect: () => {
+              onSelectLayout(opt.value);
+              closeMenu();
+            }
+          },
+          opt.value
+        ))
+      ] })
+    }
+  );
+}
+function PreferenceSection({ title }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title });
+}
+function PreferenceItem({
+  label,
+  selected,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": selected,
+      className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex w-3.5 shrink-0 justify-center", children: selected && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-xs" }) }),
+        label
+      ]
+    }
+  );
+}
 exports.JsonSchemaForm = JsonSchemaForm;
 //# sourceMappingURL=JsonSchemaForm.cjs.map

package/dist/components/JsonSchemaForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport {\n  DEFAULT_FORM_SIZE,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n} from \"./json-schema-form-size\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props to a single resolved\n// FormLayout. An explicit `layout` wins; otherwise `inline` selects the inline\n// preset. Width caps are only filled for inline mode.\nfunction resolveFormLayout(layout: FormLayout | undefined, inline: boolean): FormLayout {\n  const base = layout ?? { mode: inline ? \"inline\" : \"stacked\" };\n  if (base.mode !== \"inline\") return { mode: \"stacked\" };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n}: JsonSchemaFormProps) {\n  const resolvedLayout = resolveFormLayout(layout, inline);\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    size,\n    requiredFirst,\n    pre: pre ?? [],\n    post: post ?? [],\n    depth: 0,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n  const rowGap = resolvedLayout.mode === \"inline\" ? inlineRowGapClass[size] : stackedRowGapClass[size];\n  return (\n    <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[size])}>{title}</h3>}\n      <div className={cn(\"grid\", rowGap)}>{rows}</div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_FORM_SIZE","renderObjectFields","inlineRowGapClass","stackedRowGapClass","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass"],"mappings":";;;;;;AAWA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAKhC,SAAS,kBAAkB,QAAgC,QAA6B;AACtF,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,WAAW,UAAA;AACnD,MAAI,KAAK,SAAS,SAAU,QAAO,EAAE,MAAM,UAAA;AAC3C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,eAAe,KAAK,iBAAiB;AAAA,IACrC,eAAe,KAAK,iBAAiB;AAAA,EAAA;AAEzC;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,OAAOA,mBAAAA;AAAAA,EACP;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,iBAAiB,kBAAkB,QAAQ,MAAM;AACvD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,OAAO;AAAA,IACP,GAAI,WAAW,EAAE,aAAa,CAAA;AAAA,EAAC;AAEjC,QAAM,OAAOC,qBAAAA,mBAAmB,QAAQ,OAAO,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAErG,QAAM,SAAS,eAAe,SAAS,WAAWC,mBAAAA,kBAAkB,IAAI,IAAIC,mBAAAA,mBAAmB,IAAI;AACnG,SACEC,2BAAAA,KAAC,SAAI,WAAWC,MAAAA,GAAG,iBAAiBC,sCAAmB,IAAI,CAAC,GACzD,UAAA;AAAA,IAAA,SAASC,2BAAAA,IAAC,QAAG,WAAWF,MAAAA,GAAG,iBAAiBG,mBAAAA,eAAe,IAAI,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,mCAC1E,OAAA,EAAI,WAAWH,MAAAA,GAAG,QAAQ,MAAM,GAAI,UAAA,KAAA,CAAK;AAAA,EAAA,GAC5C;AAEJ;;"}
+{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiEllipsis } from \"../icons\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-fields\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport {\n  DEFAULT_FORM_SIZE,\n  fieldInnerGapClass,\n  labelSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    requiredFirst,\n    pre: pre ?? [],\n    post: post ?? [],\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n  return (\n    <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n      {showPreferencesMenu && (\n        <PreferencesMenu\n          size={effectiveSize}\n          layoutMode={resolvedLayout.mode}\n          onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n          onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n        />\n      )}\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n      <FieldsGrid layout={resolvedLayout} size={effectiveSize}>\n        {rows}\n      </FieldsGrid>\n    </div>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size and layout mode. Selecting an item fires the matching callback and closes\n// the menu; the parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  onSelectSize,\n  onSelectLayout,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className=\"inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon icon={UiEllipsis} className=\"text-sm\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({\n  label,\n  selected,\n  onSelect,\n}: {\n  label: string;\n  selected: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":["DEFAULT_FORM_SIZE","DEFAULT_PREFERENCES_STORAGE_KEY","useState","readPreferences","writePreferences","renderApi","renderObjectFields","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass","FieldsGrid","DropdownMenu","Icon","UiEllipsis","Fragment","UiCheck"],"mappings":"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"}

package/dist/components/JsonSchemaForm.d.ts

@@ -1,3 +1,3 @@
 import { JsonSchemaFormProps } from './json-schema-form-types';
-export declare function JsonSchemaForm({ schema, value, onChange, readOnly, inline, layout, size, idPrefix, hideReadOnlyFields, hiddenKeys, requiredFirst, title, pre, post, }: JsonSchemaFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonSchemaForm({ schema, value, onChange, readOnly, inline, layout, size, idPrefix, hideReadOnlyFields, hiddenKeys, requiredFirst, title, pre, post, showPreferencesMenu, persistPreferences, preferencesStorageKey, }: JsonSchemaFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=JsonSchemaForm.d.ts.map

package/dist/components/JsonSchemaForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.d.ts","sourceRoot":"","sources":["../../src/components/JsonSchemaForm.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAc,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAuBhF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,MAAc,EACd,MAAM,EACN,IAAwB,EACxB,QAAQ,EACR,kBAA0B,EAC1B,UAAU,EACV,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,IAAI,GACL,EAAE,mBAAmB,2CAsBrB"}
+{"version":3,"file":"JsonSchemaForm.d.ts","sourceRoot":"","sources":["../../src/components/JsonSchemaForm.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAc,mBAAmB,EAAiB,MAAM,0BAA0B,CAAC;AAgC/F,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,MAAc,EACd,MAAM,EACN,IAAwB,EACxB,QAAQ,EACR,kBAA0B,EAC1B,UAAU,EACV,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,IAAI,EACJ,mBAA0B,EAC1B,kBAAyB,EACzB,qBAAuD,GACxD,EAAE,mBAAmB,2CA6CrB"}

package/dist/components/JsonSchemaForm.js

@@ -1,16 +1,25 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { cn } from "../lib/utils.js";
-import { renderObjectFields } from "./json-schema-form-render.js";
-import { inlineRowGapClass, DEFAULT_FORM_SIZE, stackedRowGapClass, labelSizeClass, fieldInnerGapClass } from "./json-schema-form-size.js";
+import { Icon } from "../data/Icon.js";
+import { DropdownMenu } from "../overlay/DropdownMenu.js";
+import { FieldsGrid } from "./json-schema-form-fields.js";
+import { renderObjectFields, renderApi } from "./json-schema-form-render.js";
+import { DEFAULT_FORM_SIZE, labelSizeClass, fieldInnerGapClass } from "./json-schema-form-size.js";
+import { readPreferences, DEFAULT_PREFERENCES_STORAGE_KEY, writePreferences } from "./json-schema-form-preferences.js";
+import { UiEllipsis } from "../icons/components/UiEllipsis.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
 const DEFAULT_LABEL_MAX_WIDTH = "40ch";
 const DEFAULT_VALUE_MAX_WIDTH = "600px";
-function resolveFormLayout(layout, inline) {
-  const base = layout ?? { mode: inline ? "inline" : "stacked" };
-  if (base.mode !== "inline") return { mode: "stacked" };
+function resolveFormLayout(layout, inline, modeOverride) {
+  const baseMode = (layout == null ? void 0 : layout.mode) ?? (inline ? "inline" : "stacked");
+  const mode = modeOverride ?? baseMode;
+  const valueMaxWidth = (layout == null ? void 0 : layout.valueMaxWidth) ?? DEFAULT_VALUE_MAX_WIDTH;
+  if (mode !== "inline") return { mode: "stacked", valueMaxWidth };
   return {
     mode: "inline",
-    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,
-    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH
+    labelMaxWidth: (layout == null ? void 0 : layout.labelMaxWidth) ?? DEFAULT_LABEL_MAX_WIDTH,
+    valueMaxWidth
   };
 }
 function JsonSchemaForm({
@@ -27,27 +36,134 @@ function JsonSchemaForm({
   requiredFirst = false,
   title,
   pre,
-  post
+  post,
+  showPreferencesMenu = true,
+  persistPreferences = true,
+  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY
 }) {
-  const resolvedLayout = resolveFormLayout(layout, inline);
+  const [prefs, setPrefs] = useState(
+    () => showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {}
+  );
+  const effectiveSize = prefs.size ?? size;
+  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);
+  const applyPrefs = (next) => {
+    setPrefs(next);
+    if (persistPreferences) writePreferences(preferencesStorageKey, next);
+  };
   const ctx = {
     readOnly,
     hideReadOnlyFields,
     layout: resolvedLayout,
-    size,
+    size: effectiveSize,
     requiredFirst,
     pre: pre ?? [],
     post: post ?? [],
     depth: 0,
+    render: renderApi,
     ...idPrefix ? { idPrefix } : {}
   };
   const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0);
-  const rowGap = resolvedLayout.mode === "inline" ? inlineRowGapClass[size] : stackedRowGapClass[size];
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", fieldInnerGapClass[size]), children: [
-    title && /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", labelSizeClass[size]), children: title }),
-    /* @__PURE__ */ jsx("div", { className: cn("grid", rowGap), children: rows })
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col", fieldInnerGapClass[effectiveSize]), children: [
+    showPreferencesMenu && /* @__PURE__ */ jsx(
+      PreferencesMenu,
+      {
+        size: effectiveSize,
+        layoutMode: resolvedLayout.mode,
+        onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
+        onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next })
+      }
+    ),
+    title && /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", labelSizeClass[effectiveSize]), children: title }),
+    /* @__PURE__ */ jsx(FieldsGrid, { layout: resolvedLayout, size: effectiveSize, children: rows })
   ] });
 }
+const SIZE_OPTIONS = [
+  { value: "xs", label: "Extra small" },
+  { value: "sm", label: "Small" },
+  { value: "md", label: "Medium" },
+  { value: "lg", label: "Large" },
+  { value: "xl", label: "Extra large" }
+];
+const LAYOUT_OPTIONS = [
+  { value: "stacked", label: "Stacked" },
+  { value: "inline", label: "Inline" }
+];
+function PreferencesMenu({
+  size,
+  layoutMode,
+  onSelectSize,
+  onSelectLayout
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "right",
+      menuLabel: "Form display options",
+      className: "absolute right-0 top-0 z-10",
+      trigger: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Form display options",
+          "aria-haspopup": "menu",
+          className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: /* @__PURE__ */ jsx(Icon, { icon: UiEllipsis, className: "text-sm" })
+        }
+      ),
+      children: (closeMenu) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PreferenceSection, { title: "Size" }),
+        SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
+          PreferenceItem,
+          {
+            label: opt.label,
+            selected: opt.value === size,
+            onSelect: () => {
+              onSelectSize(opt.value);
+              closeMenu();
+            }
+          },
+          opt.value
+        )),
+        /* @__PURE__ */ jsx(PreferenceSection, { title: "Layout" }),
+        LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
+          PreferenceItem,
+          {
+            label: opt.label,
+            selected: opt.value === layoutMode,
+            onSelect: () => {
+              onSelectLayout(opt.value);
+              closeMenu();
+            }
+          },
+          opt.value
+        ))
+      ] })
+    }
+  );
+}
+function PreferenceSection({ title }) {
+  return /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title });
+}
+function PreferenceItem({
+  label,
+  selected,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": selected,
+      className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex w-3.5 shrink-0 justify-center", children: selected && /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-xs" }) }),
+        label
+      ]
+    }
+  );
+}
 export {
   JsonSchemaForm
 };

package/dist/components/JsonSchemaForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport {\n  DEFAULT_FORM_SIZE,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n} from \"./json-schema-form-size\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props to a single resolved\n// FormLayout. An explicit `layout` wins; otherwise `inline` selects the inline\n// preset. Width caps are only filled for inline mode.\nfunction resolveFormLayout(layout: FormLayout | undefined, inline: boolean): FormLayout {\n  const base = layout ?? { mode: inline ? \"inline\" : \"stacked\" };\n  if (base.mode !== \"inline\") return { mode: \"stacked\" };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n}: JsonSchemaFormProps) {\n  const resolvedLayout = resolveFormLayout(layout, inline);\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    size,\n    requiredFirst,\n    pre: pre ?? [],\n    post: post ?? [],\n    depth: 0,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n  const rowGap = resolvedLayout.mode === \"inline\" ? inlineRowGapClass[size] : stackedRowGapClass[size];\n  return (\n    <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[size])}>{title}</h3>}\n      <div className={cn(\"grid\", rowGap)}>{rows}</div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAKhC,SAAS,kBAAkB,QAAgC,QAA6B;AACtF,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,WAAW,UAAA;AACnD,MAAI,KAAK,SAAS,SAAU,QAAO,EAAE,MAAM,UAAA;AAC3C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,eAAe,KAAK,iBAAiB;AAAA,IACrC,eAAe,KAAK,iBAAiB;AAAA,EAAA;AAEzC;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,iBAAiB,kBAAkB,QAAQ,MAAM;AACvD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,OAAO;AAAA,IACP,GAAI,WAAW,EAAE,aAAa,CAAA;AAAA,EAAC;AAEjC,QAAM,OAAO,mBAAmB,QAAQ,OAAO,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAErG,QAAM,SAAS,eAAe,SAAS,WAAW,kBAAkB,IAAI,IAAI,mBAAmB,IAAI;AACnG,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,mBAAmB,IAAI,CAAC,GACzD,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAG,WAAW,GAAG,iBAAiB,eAAe,IAAI,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,wBAC1E,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,GAAI,UAAA,KAAA,CAAK;AAAA,EAAA,GAC5C;AAEJ;"}
+{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiEllipsis } from \"../icons\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-fields\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport {\n  DEFAULT_FORM_SIZE,\n  fieldInnerGapClass,\n  labelSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    requiredFirst,\n    pre: pre ?? [],\n    post: post ?? [],\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n  return (\n    <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n      {showPreferencesMenu && (\n        <PreferencesMenu\n          size={effectiveSize}\n          layoutMode={resolvedLayout.mode}\n          onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n          onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n        />\n      )}\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n      <FieldsGrid layout={resolvedLayout} size={effectiveSize}>\n        {rows}\n      </FieldsGrid>\n    </div>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size and layout mode. Selecting an item fires the matching callback and closes\n// the menu; the parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  onSelectSize,\n  onSelectLayout,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className=\"inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon icon={UiEllipsis} className=\"text-sm\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({\n  label,\n  selected,\n  onSelect,\n}: {\n  label: string;\n  selected: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SecretKeySelector.cjs

@@ -147,5 +147,4 @@ function buildKeyOptions(keys, previews, selectedKey) {
   return base;
 }
 exports.SecretKeySelector = SecretKeySelector;
-exports.buildKeyOptions = buildKeyOptions;
 //# sourceMappingURL=SecretKeySelector.cjs.map