@flanksource/clicky-ui 0.3.6 → 0.3.7

package/README.md

@@ -54,6 +54,17 @@ export function ClickyPanel() {
 
 `OperationCatalog` and `EntityExplorerApp` (both exported from `@flanksource/clicky-ui/rpc`) render an OpenAPI spec — fetched via an `OperationsApiClient` — as a navigable list of operations grouped by entity surface. They expect the spec to declare `x-clicky` surface metadata for the surfaces they should expose. See `apps/kitchen-sink/src/demos/OperationExplorerDemo.tsx` for a fake-client example.
 
+## Markdown editor field
+
+`JsonSchemaForm` fields with `format: md` — and the standalone `MdxEditorField` exported from `@flanksource/clicky-ui/mdx-editor` — render an [MDXEditor](https://mdxeditor.dev/)-backed rich-text field. Its base styles ship as a **separate** stylesheet so apps that don't use the field don't pay its weight (the editor's JavaScript is also loaded lazily, on first render). Import it once at the app root, in addition to `styles.css`:
+
+```tsx
+import "@flanksource/clicky-ui/styles.css";
+import "@flanksource/clicky-ui/mdx-editor.css"; // only if you render the markdown field
+```
+
+Without this import the field renders, but its toolbar and content are unstyled.
+
 ## Bundle size guidance
 
 Prefer subpath imports in production apps:
@@ -118,6 +129,37 @@ Both hooks persist their choice to `localStorage` under `clicky-ui-theme` / `cli
 </script>
 ```
 
+## Lint rules
+
+The package ships opt-in [oxlint](https://oxc.rs/docs/guide/usage/linter/js-plugins.html)
+rules that keep consuming projects on clicky-ui's components, overlays, theming
+and icons instead of rebuilding them by hand. Enable them in your downstream
+`.oxlintrc.json`:
+
+```json
+{
+  "jsPlugins": [
+    {
+      "name": "clicky-ui",
+      "specifier": "@flanksource/clicky-ui/oxlint-plugins"
+    }
+  ],
+  "rules": {
+    "clicky-ui/prefer-clicky-components": "warn",
+    "clicky-ui/no-adhoc-overlay": "error",
+    "clicky-ui/prefer-tailwind-classes": "warn",
+    "clicky-ui/prefer-theme-tokens": "error",
+    "clicky-ui/prefer-clicky-icons": "warn"
+  }
+}
+```
+
+The rules flag rebuilt primitives (`<button>`, `<table>`, …), ad-hoc dialogs and
+arbitrary z-index, hand-rolled inline styles, hardcoded colors / raw theme
+storage access, and icons imported from unapproved libraries or faked with
+emoji. See [`oxlint-plugins/README.md`](./oxlint-plugins/README.md) for the full
+guide.
+
 ## License
 
 Apache-2.0

package/dist/components/DateField.d.ts

@@ -16,7 +16,7 @@ export type DateFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"
     /** Accessible label for the calendar/open button. */
     openButtonLabel?: string;
 };
-export declare const DateField: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+export declare const DateField: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
     /** Selects native date input or date-time input behavior. */
     mode?: DateFieldMode;
     /** ISO date or datetime-local string shown in the input. */

package/dist/components/DatePicker.d.ts

@@ -7,7 +7,7 @@ export type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"
     buttonClassName?: string;
     openButtonLabel?: string;
 };
-export declare const DatePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+export declare const DatePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
     value?: string;
     onChange?: (value: string) => void;
     className?: string;

package/dist/components/DateTimePicker.d.ts

@@ -11,7 +11,7 @@ export type DateTimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "t
     /** Leading in-field adornment, rendered at the left edge of the input. */
     prefix?: ReactNode;
 };
-export declare const DateTimePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange" | "prefix"> & {
+export declare const DateTimePicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "value" | "onChange" | "type"> & {
     value?: string;
     onChange?: (value: string) => void;
     className?: string;

package/dist/components/FormLookupProvider.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const formLookupContext = require("./form-lookup-context.cjs");
+function FormLookupProvider({
+  fetcher,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(formLookupContext.FormLookupContext.Provider, { value: fetcher, children });
+}
+exports.FormLookupProvider = FormLookupProvider;
+//# sourceMappingURL=FormLookupProvider.cjs.map

package/dist/components/FormLookupProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLookupProvider.cjs","sources":["../../src/components/FormLookupProvider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { LookupFetcher } from \"./json-schema-form-types\";\nimport { FormLookupContext } from \"./form-lookup-context\";\n\nexport function FormLookupProvider({\n  fetcher,\n  children,\n}: {\n  fetcher?: LookupFetcher;\n  children: ReactNode;\n}) {\n  return <FormLookupContext.Provider value={fetcher}>{children}</FormLookupContext.Provider>;\n}\n"],"names":["FormLookupContext"],"mappings":";;;;AAIO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,wCAAQA,kBAAAA,kBAAkB,UAAlB,EAA2B,OAAO,SAAU,UAAS;AAC/D;;"}

package/dist/components/FormLookupProvider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { LookupFetcher } from './json-schema-form-types';
+export declare function FormLookupProvider({ fetcher, children, }: {
+    fetcher?: LookupFetcher;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormLookupProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLookupProvider.d.ts","sourceRoot":"","sources":["../../src/components/FormLookupProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAEA"}

package/dist/components/FormLookupProvider.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { FormLookupContext } from "./form-lookup-context.js";
+function FormLookupProvider({
+  fetcher,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FormLookupContext.Provider, { value: fetcher, children });
+}
+export {
+  FormLookupProvider
+};
+//# sourceMappingURL=FormLookupProvider.js.map

package/dist/components/FormLookupProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLookupProvider.js","sources":["../../src/components/FormLookupProvider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { LookupFetcher } from \"./json-schema-form-types\";\nimport { FormLookupContext } from \"./form-lookup-context\";\n\nexport function FormLookupProvider({\n  fetcher,\n  children,\n}: {\n  fetcher?: LookupFetcher;\n  children: ReactNode;\n}) {\n  return <FormLookupContext.Provider value={fetcher}>{children}</FormLookupContext.Provider>;\n}\n"],"names":[],"mappings":";;AAIO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,6BAAQ,kBAAkB,UAAlB,EAA2B,OAAO,SAAU,UAAS;AAC/D;"}

package/dist/components/JsonSchemaForm.cjs

@@ -6,7 +6,7 @@ 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 formLookupContext = require("./form-lookup-context.cjs");
+const FormLookupProvider = require("./FormLookupProvider.cjs");
 const jsonSchemaFormDiscriminator = require("./json-schema-form-discriminator.cjs");
 const jsonSchemaFormRefs = require("./json-schema-form-refs.cjs");
 const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
@@ -73,7 +73,7 @@ function JsonSchemaForm({
   const resolvedSchema = react.useMemo(() => jsonSchemaFormRefs.rehydrateRefs(schema), [schema]);
   const discKey = typeof resolvedSchema["x-discriminator"] === "string" ? resolvedSchema["x-discriminator"] : void 0;
   const inPickerPhase = discKey != null && (value[discKey] == null || value[discKey] === "");
-  return /* @__PURE__ */ jsxRuntime.jsx(formLookupContext.FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[effectiveSize]), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(FormLookupProvider.FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[effectiveSize]), children: [
     showPreferencesMenu && !inPickerPhase && /* @__PURE__ */ jsxRuntime.jsx(
       PreferencesMenu,
       {

package/dist/components/JsonSchemaForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useMemo, 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 { FormLookupProvider } from \"./form-lookup-context\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\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  type SortMode,\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  lookupFetcher,\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  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\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    sortMode: effectiveSortMode,\n    pre: pre ?? [],\n    post: post ?? [],\n    rootValue: value,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey =\n    typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (value[discKey] == null || value[discKey] === \"\");\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n    <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n      {showPreferencesMenu && !inPickerPhase && (\n        <PreferencesMenu\n          size={effectiveSize}\n          layoutMode={resolvedLayout.mode}\n          sortMode={effectiveSortMode}\n          onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n          onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n          onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n        />\n      )}\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n      <FieldsGrid layout={resolvedLayout} size={effectiveSize}>\n        {discKey ? (\n          <DiscriminatedForm\n            schema={resolvedSchema}\n            value={value}\n            onChange={onChange}\n            ctx={ctx}\n            discKey={discKey}\n          />\n        ) : (\n          renderObjectFields(resolvedSchema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined)\n        )}\n      </FieldsGrid>\n    </div>\n    </FormLookupProvider>\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\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\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  sortMode,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => 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          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(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","useMemo","rehydrateRefs","FormLookupProvider","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass","FieldsGrid","DiscriminatedForm","renderObjectFields","DropdownMenu","Icon","UiEllipsis","Fragment","UiCheck"],"mappings":"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"}
+{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useMemo, 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 { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\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  type SortMode,\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  lookupFetcher,\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  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\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    sortMode: effectiveSortMode,\n    pre: pre ?? [],\n    post: post ?? [],\n    rootValue: value,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey =\n    typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (value[discKey] == null || value[discKey] === \"\");\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n    <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n      {showPreferencesMenu && !inPickerPhase && (\n        <PreferencesMenu\n          size={effectiveSize}\n          layoutMode={resolvedLayout.mode}\n          sortMode={effectiveSortMode}\n          onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n          onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n          onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n        />\n      )}\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n      <FieldsGrid layout={resolvedLayout} size={effectiveSize}>\n        {discKey ? (\n          <DiscriminatedForm\n            schema={resolvedSchema}\n            value={value}\n            onChange={onChange}\n            ctx={ctx}\n            discKey={discKey}\n          />\n        ) : (\n          renderObjectFields(resolvedSchema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined)\n        )}\n      </FieldsGrid>\n    </div>\n    </FormLookupProvider>\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\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\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  sortMode,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => 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          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(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","useMemo","rehydrateRefs","FormLookupProvider","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass","FieldsGrid","DiscriminatedForm","renderObjectFields","DropdownMenu","Icon","UiEllipsis","Fragment","UiCheck"],"mappings":"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"}

package/dist/components/JsonSchemaForm.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { FieldsGrid } from "./json-schema-form-fields.js";
-import { FormLookupProvider } from "./form-lookup-context.js";
+import { FormLookupProvider } from "./FormLookupProvider.js";
 import { DiscriminatedForm } from "./json-schema-form-discriminator.js";
 import { rehydrateRefs } from "./json-schema-form-refs.js";
 import { renderApi, renderObjectFields } from "./json-schema-form-render.js";

package/dist/components/JsonSchemaForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useMemo, 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 { FormLookupProvider } from \"./form-lookup-context\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\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  type SortMode,\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  lookupFetcher,\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  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\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    sortMode: effectiveSortMode,\n    pre: pre ?? [],\n    post: post ?? [],\n    rootValue: value,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey =\n    typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (value[discKey] == null || value[discKey] === \"\");\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n    <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n      {showPreferencesMenu && !inPickerPhase && (\n        <PreferencesMenu\n          size={effectiveSize}\n          layoutMode={resolvedLayout.mode}\n          sortMode={effectiveSortMode}\n          onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n          onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n          onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n        />\n      )}\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n      <FieldsGrid layout={resolvedLayout} size={effectiveSize}>\n        {discKey ? (\n          <DiscriminatedForm\n            schema={resolvedSchema}\n            value={value}\n            onChange={onChange}\n            ctx={ctx}\n            discKey={discKey}\n          />\n        ) : (\n          renderObjectFields(resolvedSchema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined)\n        )}\n      </FieldsGrid>\n    </div>\n    </FormLookupProvider>\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\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\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  sortMode,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => 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          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(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":";;;;;;;;;;;;;;AA0BA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAQhC,SAAS,kBACP,QACA,QACA,cACY;AACZ,QAAM,YAAW,iCAAQ,UAAS,SAAS,WAAW;AACtD,QAAM,OAAO,gBAAgB;AAC7B,QAAM,iBAAgB,iCAAQ,kBAAiB;AAC/C,MAAI,SAAS,SAAU,QAAO,EAAE,MAAM,WAAW,cAAA;AACjD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,gBAAe,iCAAQ,kBAAiB;AAAA,IACxC;AAAA,EAAA;AAEJ;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;AAAA,EACA,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,wBAAwB;AAAA,EACxB;AACF,GAAwB;AAGtB,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IAA0B,MAClD,uBAAuB,qBAAqB,gBAAgB,qBAAqB,IAAI,CAAA;AAAA,EAAC;AAGxF,QAAM,gBAAgB,MAAM,QAAQ;AACpC,QAAM,iBAAiB,kBAAkB,QAAQ,QAAQ,MAAM,UAAU;AAEzE,QAAM,oBAAoB,MAAM,aAAa,gBAAgB,mBAAmB;AAEhF,QAAM,aAAa,CAAC,SAA0B;AAC5C,aAAS,IAAI;AACb,QAAI,mBAAoB,kBAAiB,uBAAuB,IAAI;AAAA,EACtE;AAEA,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAI,WAAW,EAAE,aAAa,CAAA;AAAA,EAAC;AAKjC,QAAM,iBAAiB,QAAQ,MAAM,cAAc,MAAM,GAAG,CAAC,MAAM,CAAC;AAGpE,QAAM,UACJ,OAAO,eAAe,iBAAiB,MAAM,WAAW,eAAe,iBAAiB,IAAI;AAC9F,QAAM,gBAAgB,WAAW,SAAS,MAAM,OAAO,KAAK,QAAQ,MAAM,OAAO,MAAM;AAEvF,6BACG,oBAAA,EAAoB,GAAI,gBAAgB,EAAE,SAAS,kBAAkB,IACtE,UAAA,qBAAC,SAAI,WAAW,GAAG,0BAA0B,mBAAmB,aAAa,CAAC,GAC3E,UAAA;AAAA,IAAA,uBAAuB,CAAC,iBACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,YAAY,eAAe;AAAA,QAC3B,UAAU;AAAA,QACV,cAAc,CAAC,SAAS,WAAW,EAAE,GAAG,OAAO,MAAM,MAAM;AAAA,QAC3D,gBAAgB,CAAC,SAAS,WAAW,EAAE,GAAG,OAAO,YAAY,MAAM;AAAA,QACnE,cAAc,CAAC,SAAS,WAAW,EAAE,GAAG,OAAO,UAAU,KAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGlE,SAAS,oBAAC,MAAA,EAAG,WAAW,GAAG,iBAAiB,eAAe,aAAa,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,wBACnF,YAAA,EAAW,QAAQ,gBAAgB,MAAM,eACvC,UAAA,UACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAGF,mBAAmB,gBAAgB,OAAO,UAAU,KAAK,aAAa,EAAE,eAAe,MAAS,EAAA,CAEpG;AAAA,EAAA,EAAA,CACF,EAAA,CACA;AAEJ;AAEA,MAAM,eAAqD;AAAA,EACzD,EAAE,OAAO,MAAM,OAAO,cAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,cAAA;AACxB;AAEA,MAAM,iBAAyD;AAAA,EAC7D,EAAE,OAAO,WAAW,OAAO,UAAA;AAAA,EAC3B,EAAE,OAAO,UAAU,OAAO,SAAA;AAC5B;AAEA,MAAM,eAAqD;AAAA,EACzD,EAAE,OAAO,UAAU,OAAO,eAAA;AAAA,EAC1B,EAAE,OAAO,kBAAkB,OAAO,iBAAA;AAAA,EAClC,EAAE,OAAO,YAAY,OAAO,0BAAA;AAC9B;AAKA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,iBAAc;AAAA,UACd,WAAU;AAAA,UAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAI/C,UAAA,CAAC,cACA,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,mBAAA,EAAkB,OAAM,OAAA,CAAO;AAAA,QAC/B,aAAa,IAAI,CAAC,QACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,UAAU,IAAI,UAAU;AAAA,YACxB,UAAU,MAAM;AACd,2BAAa,IAAI,KAAK;AACtB,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,UANK,IAAI;AAAA,QAAA,CAQZ;AAAA,QACD,oBAAC,mBAAA,EAAkB,OAAM,SAAA,CAAS;AAAA,QACjC,eAAe,IAAI,CAAC,QACnB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,UAAU,IAAI,UAAU;AAAA,YACxB,UAAU,MAAM;AACd,6BAAe,IAAI,KAAK;AACxB,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,UANK,IAAI;AAAA,QAAA,CAQZ;AAAA,QACD,oBAAC,mBAAA,EAAkB,OAAM,OAAA,CAAO;AAAA,QAC/B,aAAa,IAAI,CAAC,QACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,UAAU,IAAI,UAAU;AAAA,YACxB,UAAU,MAAM;AACd,2BAAa,IAAI,KAAK;AACtB,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,UANK,IAAI;AAAA,QAAA,CAQZ;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,kBAAkB,EAAE,SAA4B;AACvD,SACE,oBAAC,OAAA,EAAI,WAAU,0FACZ,UAAA,OACH;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,WAAU;AAAA,MACV,SAAS;AAAA,MAET,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,sCACb,UAAA,YAAY,oBAAC,QAAK,MAAM,SAAS,WAAU,UAAA,CAAU,EAAA,CACxD;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useMemo, 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 { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\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  type SortMode,\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  lookupFetcher,\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  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\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    sortMode: effectiveSortMode,\n    pre: pre ?? [],\n    post: post ?? [],\n    rootValue: value,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n  };\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey =\n    typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (value[discKey] == null || value[discKey] === \"\");\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n    <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n      {showPreferencesMenu && !inPickerPhase && (\n        <PreferencesMenu\n          size={effectiveSize}\n          layoutMode={resolvedLayout.mode}\n          sortMode={effectiveSortMode}\n          onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n          onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n          onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n        />\n      )}\n      {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n      <FieldsGrid layout={resolvedLayout} size={effectiveSize}>\n        {discKey ? (\n          <DiscriminatedForm\n            schema={resolvedSchema}\n            value={value}\n            onChange={onChange}\n            ctx={ctx}\n            discKey={discKey}\n          />\n        ) : (\n          renderObjectFields(resolvedSchema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined)\n        )}\n      </FieldsGrid>\n    </div>\n    </FormLookupProvider>\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\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\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  sortMode,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => 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          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(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/ListMenu.cjs

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const button = require("./button.cjs");
+const useListMenuSelection = require("./use-list-menu-selection.cjs");
+function ListMenu({
+  className,
+  selection,
+  showCheckboxes = true,
+  children,
+  ...props
+}) {
+  const menu = /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("divide-y divide-border", className), ...props, children });
+  if (!selection) return menu;
+  return /* @__PURE__ */ jsxRuntime.jsx(useListMenuSelection.ListMenuSelectionContext.Provider, { value: { selection, showCheckboxes }, children: menu });
+}
+function ListMenuSection({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...props });
+}
+function ListMenuHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ListMenuItem({
+  active = false,
+  selected = false,
+  accentClassName = "border-transparent",
+  interactive = true,
+  itemKey,
+  hideCheckbox = false,
+  className,
+  onClick,
+  children,
+  ...props
+}) {
+  const ctx = useListMenuSelection.useListMenuSelectionContext();
+  const selectable = ctx !== null && itemKey !== void 0;
+  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;
+  const handleClick = (event) => {
+    if (selectable && event.shiftKey) {
+      event.preventDefault();
+      ctx.selection.toggle(itemKey, { shiftKey: true });
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;
+  const body = selectable && showCheckbox ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "mt-0.5 size-4 shrink-0 rounded border-input",
+        checked: rowSelected,
+        "aria-label": "Select item",
+        onClick: (event) => {
+          event.stopPropagation();
+          if (event.shiftKey) {
+            event.preventDefault();
+            ctx.selection.toggle(itemKey, { shiftKey: true });
+          }
+        },
+        onChange: () => ctx.selection.toggle(itemKey)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children })
+  ] }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "min-w-0 overflow-hidden border-l-2 transition-colors",
+        interactive && "cursor-pointer",
+        active ? "border-primary bg-primary/10" : rowSelected ? "border-primary/40 bg-primary/5 hover:bg-primary/10" : utils.cn(accentClassName, interactive && "hover:bg-muted"),
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: body
+    }
+  );
+}
+function ListMenuActionBar({
+  selection: selectionProp,
+  actions = [],
+  renderLabel,
+  hideWhenEmpty = true,
+  clearLabel = "Clear",
+  className,
+  children,
+  ...props
+}) {
+  const ctx = useListMenuSelection.useListMenuSelectionContext();
+  const selection = selectionProp ?? (ctx == null ? void 0 : ctx.selection);
+  if (!selection) return null;
+  const { count } = selection;
+  if (hideWhenEmpty && count === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: renderLabel ? renderLabel(count) : `${count} selected` }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+          actions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: action.variant ?? "outline",
+              disabled: action.disabled || count === 0,
+              onClick: () => action.onClick(selection.selectedKeys),
+              children: [
+                action.icon,
+                action.label
+              ]
+            },
+            i
+          )),
+          children,
+          clearLabel !== null && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", size: "sm", variant: "ghost", onClick: () => selection.clear(), children: clearLabel })
+        ] })
+      ]
+    }
+  );
+}
+exports.ListMenu = ListMenu;
+exports.ListMenuActionBar = ListMenuActionBar;
+exports.ListMenuHeader = ListMenuHeader;
+exports.ListMenuItem = ListMenuItem;
+exports.ListMenuSection = ListMenuSection;
+//# sourceMappingURL=ListMenu.cjs.map

package/dist/components/ListMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMenu.cjs","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  ListMenuSelectionContext,\n  useListMenuSelectionContext,\n  type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n   * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n   */\n  selection?: ListMenuSelection;\n  /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n  showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n  className,\n  selection,\n  showCheckboxes = true,\n  children,\n  ...props\n}: ListMenuProps) {\n  const menu = (\n    <div className={cn(\"divide-y divide-border\", className)} {...props}>\n      {children}\n    </div>\n  );\n  if (!selection) return menu;\n  return (\n    <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n      {menu}\n    </ListMenuSelectionContext.Provider>\n  );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n  return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the primary selected-row treatment used for the open/detail row. */\n  active?: boolean;\n  /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n  selected?: boolean;\n  /** Left-border class when neither active nor selected. */\n  accentClassName?: string;\n  /** Whether the row gets pointer and hover affordances. */\n  interactive?: boolean;\n  /** Stable key that opts the row into `ListMenu` multi-select. */\n  itemKey?: string;\n  /** Hide the leading checkbox for this row even when selection is enabled. */\n  hideCheckbox?: boolean;\n};\n\nexport function ListMenuItem({\n  active = false,\n  selected = false,\n  accentClassName = \"border-transparent\",\n  interactive = true,\n  itemKey,\n  hideCheckbox = false,\n  className,\n  onClick,\n  children,\n  ...props\n}: ListMenuItemProps) {\n  const ctx = useListMenuSelectionContext();\n  const selectable = ctx !== null && itemKey !== undefined;\n  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (selectable && event.shiftKey) {\n      event.preventDefault();\n      ctx.selection.toggle(itemKey, { shiftKey: true });\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n  const body =\n    selectable && showCheckbox ? (\n      <div className=\"flex items-start gap-2\">\n        <input\n          type=\"checkbox\"\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n          checked={rowSelected}\n          aria-label=\"Select item\"\n          onClick={(event) => {\n            event.stopPropagation();\n            if (event.shiftKey) {\n              event.preventDefault();\n              ctx.selection.toggle(itemKey, { shiftKey: true });\n            }\n          }}\n          onChange={() => ctx.selection.toggle(itemKey)}\n        />\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    ) : (\n      children\n    );\n\n  return (\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n        interactive && \"cursor-pointer\",\n        active\n          ? \"border-primary bg-primary/10\"\n          : rowSelected\n            ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n            : cn(accentClassName, interactive && \"hover:bg-muted\"),\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {body}\n    </div>\n  );\n}\n\nexport type ListMenuAction = {\n  label: ReactNode;\n  /** Receives the currently selected keys (ordered as in the menu). */\n  onClick: (selectedKeys: string[]) => void;\n  icon?: ReactNode;\n  disabled?: boolean;\n  variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n  selection?: ListMenuSelection;\n  /** Bulk actions executed across every selected key. */\n  actions?: ListMenuAction[];\n  /** Override the \"{n} selected\" summary. */\n  renderLabel?: (count: number) => ReactNode;\n  /** Hide the whole bar when nothing is selected (default true). */\n  hideWhenEmpty?: boolean;\n  /** Label for the clear button; pass null to hide it. */\n  clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n  selection: selectionProp,\n  actions = [],\n  renderLabel,\n  hideWhenEmpty = true,\n  clearLabel = \"Clear\",\n  className,\n  children,\n  ...props\n}: ListMenuActionBarProps) {\n  const ctx = useListMenuSelectionContext();\n  const selection = selectionProp ?? ctx?.selection;\n  if (!selection) return null;\n  const { count } = selection;\n  if (hideWhenEmpty && count === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-foreground\">\n        {renderLabel ? renderLabel(count) : `${count} selected`}\n      </span>\n      <div className=\"ml-auto flex items-center gap-1\">\n        {actions.map((action, i) => (\n          <Button\n            key={i}\n            type=\"button\"\n            size=\"sm\"\n            variant={action.variant ?? \"outline\"}\n            disabled={action.disabled || count === 0}\n            onClick={() => action.onClick(selection.selectedKeys)}\n          >\n            {action.icon}\n            {action.label}\n          </Button>\n        ))}\n        {children}\n        {clearLabel !== null && (\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n            {clearLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","cn","ListMenuSelectionContext","useListMenuSelectionContext","jsxs","Button"],"mappings":"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"}

package/dist/components/ListMenu.d.ts

@@ -0,0 +1,54 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonProps } from './button';
+import { ListMenuSelection } from './use-list-menu-selection';
+export type ListMenuProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Enables multi-select. Pass the object returned by `useListMenuSelection`;
+     * rows that set `itemKey` then become selectable via checkbox or Shift+Click.
+     */
+    selection?: ListMenuSelection;
+    /** Render a leading checkbox on selectable rows (default true when `selection` is set). */
+    showCheckboxes?: boolean;
+};
+export declare function ListMenu({ className, selection, showCheckboxes, children, ...props }: ListMenuProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;
+export declare function ListMenuSection({ className, ...props }: ListMenuSectionProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;
+export declare function ListMenuHeader({ className, ...props }: ListMenuHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {
+    /** Applies the primary selected-row treatment used for the open/detail row. */
+    active?: boolean;
+    /** Applies the softer selected treatment used for checkbox or multi-select rows. */
+    selected?: boolean;
+    /** Left-border class when neither active nor selected. */
+    accentClassName?: string;
+    /** Whether the row gets pointer and hover affordances. */
+    interactive?: boolean;
+    /** Stable key that opts the row into `ListMenu` multi-select. */
+    itemKey?: string;
+    /** Hide the leading checkbox for this row even when selection is enabled. */
+    hideCheckbox?: boolean;
+};
+export declare function ListMenuItem({ active, selected, accentClassName, interactive, itemKey, hideCheckbox, className, onClick, children, ...props }: ListMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuAction = {
+    label: ReactNode;
+    /** Receives the currently selected keys (ordered as in the menu). */
+    onClick: (selectedKeys: string[]) => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+    variant?: ButtonProps["variant"];
+};
+export type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {
+    /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */
+    selection?: ListMenuSelection;
+    /** Bulk actions executed across every selected key. */
+    actions?: ListMenuAction[];
+    /** Override the "{n} selected" summary. */
+    renderLabel?: (count: number) => ReactNode;
+    /** Hide the whole bar when nothing is selected (default true). */
+    hideWhenEmpty?: boolean;
+    /** Label for the clear button; pass null to hide it. */
+    clearLabel?: ReactNode;
+};
+export declare function ListMenuActionBar({ selection: selectionProp, actions, renderLabel, hideWhenEmpty, clearLabel, className, children, ...props }: ListMenuActionBarProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ListMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListMenu.d.ts","sourceRoot":"","sources":["../../src/components/ListMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,SAAS,EACT,cAAqB,EACrB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAYf;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAE5E;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAc,EACd,QAAgB,EAChB,eAAsC,EACtC,WAAkB,EAClB,OAAO,EACP,YAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAwDnB;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACpE,qFAAqF;IACrF,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EAAE,aAAa,EACxB,OAAY,EACZ,WAAW,EACX,aAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,kDAyCxB"}