@flanksource/clicky-ui 0.3.10 → 0.3.12

package/dist/components/JsonSchemaForm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { DropdownMenu } from "../overlay/DropdownMenu.js";
@@ -7,10 +7,14 @@ import { FieldsGrid } from "./json-schema-form-fields.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";
+import { renderObjectFields, renderApi } from "./json-schema-form-render.js";
+import { applySchemaDefaults } from "./json-schema-form-resolve.js";
+import { normalizeColumns } from "./json-schema-form-utils.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 { UiSearch } from "../icons/components/UiSearch.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiEllipsisBold } from "../icons/components/UiEllipsisBold.js";
 import { UiCheck } from "../icons/components/UiCheck.js";
 const DEFAULT_LABEL_MAX_WIDTH = "40ch";
 const DEFAULT_VALUE_MAX_WIDTH = "600px";
@@ -48,6 +52,7 @@ function JsonSchemaForm({
   const [prefs, setPrefs] = useState(
     () => showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {}
   );
+  const [fieldFilter, setFieldFilter] = useState("");
   const effectiveSize = prefs.size ?? size;
   const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);
   const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? "required-first" : "schema");
@@ -55,6 +60,14 @@ function JsonSchemaForm({
     setPrefs(next);
     if (persistPreferences) writePreferences(preferencesStorageKey, next);
   };
+  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);
+  const effectiveValue = useMemo(
+    () => applySchemaDefaults(resolvedSchema, value),
+    [resolvedSchema, value]
+  );
+  useEffect(() => {
+    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);
+  }, [effectiveValue, onChange, readOnly, value]);
   const ctx = {
     readOnly,
     hideReadOnlyFields,
@@ -63,14 +76,23 @@ function JsonSchemaForm({
     sortMode: effectiveSortMode,
     pre: pre ?? [],
     post: post ?? [],
-    rootValue: value,
+    rootValue: effectiveValue,
+    onRootChange: onChange,
     depth: 0,
     render: renderApi,
-    ...idPrefix ? { idPrefix } : {}
+    ...idPrefix ? { idPrefix } : {},
+    ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
   };
-  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);
   const discKey = typeof resolvedSchema["x-discriminator"] === "string" ? resolvedSchema["x-discriminator"] : void 0;
-  const inPickerPhase = discKey != null && (value[discKey] == null || value[discKey] === "");
+  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === "");
+  const objectRows = discKey ? null : renderObjectFields(
+    resolvedSchema,
+    effectiveValue,
+    onChange,
+    ctx,
+    hiddenKeys ? { hiddenKeys } : void 0
+  );
+  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== "";
   return /* @__PURE__ */ jsx(FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col", fieldInnerGapClass[effectiveSize]), children: [
     showPreferencesMenu && !inPickerPhase && /* @__PURE__ */ jsx(
       PreferencesMenu,
@@ -78,22 +100,38 @@ function JsonSchemaForm({
         size: effectiveSize,
         layoutMode: resolvedLayout.mode,
         sortMode: effectiveSortMode,
+        fieldFilter,
+        onFilterChange: setFieldFilter,
         onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
         onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next }),
         onSelectSort: (next) => applyPrefs({ ...prefs, sortMode: next })
       }
     ),
     title && /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", labelSizeClass[effectiveSize]), children: title }),
-    /* @__PURE__ */ jsx(FieldsGrid, { layout: resolvedLayout, size: effectiveSize, children: discKey ? /* @__PURE__ */ jsx(
-      DiscriminatedForm,
+    /* @__PURE__ */ jsx(
+      FieldsGrid,
       {
-        schema: resolvedSchema,
-        value,
-        onChange,
-        ctx,
-        discKey
+        layout: resolvedLayout,
+        size: effectiveSize,
+        columns: normalizeColumns(resolvedSchema["x-columns"]),
+        ...typeof resolvedSchema["x-classes"] === "string" ? { className: resolvedSchema["x-classes"] } : {},
+        children: discKey ? /* @__PURE__ */ jsx(
+          DiscriminatedForm,
+          {
+            schema: resolvedSchema,
+            value: effectiveValue,
+            onChange,
+            ctx,
+            discKey
+          }
+        ) : objectRows
       }
-    ) : renderObjectFields(resolvedSchema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0) })
+    ),
+    noMatches && /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground", labelSizeClass[effectiveSize]), children: [
+      "No fields match “",
+      fieldFilter.trim(),
+      "”."
+    ] })
   ] }) });
 }
 const SIZE_OPTIONS = [
@@ -116,10 +154,13 @@ function PreferencesMenu({
   size,
   layoutMode,
   sortMode,
+  fieldFilter,
+  onFilterChange,
   onSelectSize,
   onSelectLayout,
   onSelectSort
 }) {
+  const filterActive = fieldFilter.trim() !== "";
   return /* @__PURE__ */ jsx(
     DropdownMenu,
     {
@@ -132,11 +173,45 @@ function PreferencesMenu({
           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" })
+          className: cn(
+            "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            filterActive ? "text-primary" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { icon: UiEllipsisBold, className: "text-lg" })
         }
       ),
       children: (closeMenu) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 pb-1.5 pt-1", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UiSearch,
+              className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              "aria-label": "Filter fields",
+              placeholder: "Filter fields…",
+              value: fieldFilter,
+              onChange: (e) => onFilterChange(e.target.value),
+              onKeyDown: (e) => e.stopPropagation(),
+              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          ),
+          filterActive && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Clear filter",
+              onClick: () => onFilterChange(""),
+              className: "absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-xs" })
+            }
+          )
+        ] }) }),
         /* @__PURE__ */ jsx(PreferenceSection, { title: "Size" }),
         SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
           PreferenceItem,

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 \"./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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"}
+{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiEllipsisBold, UiSearch } 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 { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport { normalizeColumns } from \"./json-schema-form-utils\";\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  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\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  // 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  const effectiveValue = useMemo(\n    () => applySchemaDefaults(resolvedSchema, value),\n    [resolvedSchema, value],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\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: effectiveValue,\n    onRootChange: onChange,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n  };\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 =\n    discKey != null &&\n    (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(\n        resolvedSchema,\n        effectiveValue,\n        onChange,\n        ctx,\n        hiddenKeys ? { hiddenKeys } : undefined,\n      );\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\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          fieldFilter={fieldFilter}\n          onFilterChange={setFieldFilter}\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\n        layout={resolvedLayout}\n        size={effectiveSize}\n        columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n        {...(typeof resolvedSchema[\"x-classes\"] === \"string\"\n          ? { className: resolvedSchema[\"x-classes\"] }\n          : {})}\n      >\n        {discKey ? (\n          <DiscriminatedForm\n            schema={resolvedSchema}\n            value={effectiveValue}\n            onChange={onChange}\n            ctx={ctx}\n            discKey={discKey}\n          />\n        ) : (\n          objectRows\n        )}\n      </FieldsGrid>\n      {noMatches && (\n        <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n          No fields match “{fieldFilter.trim()}”.\n        </p>\n      )}\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, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\";\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={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          <div className=\"px-2 pb-1.5 pt-1\">\n            <div className=\"relative\">\n              <Icon\n                icon={UiSearch}\n                className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                aria-label=\"Filter fields\"\n                placeholder=\"Filter fields…\"\n                value={fieldFilter}\n                onChange={(e) => onFilterChange(e.target.value)}\n                // Keep arrow/space/enter keys inside the input instead of driving\n                // the menu's list navigation or closing it.\n                onKeyDown={(e) => e.stopPropagation()}\n                className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n              />\n              {filterActive && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear filter\"\n                  onClick={() => onFilterChange(\"\")}\n                  className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-xs\" />\n                </button>\n              )}\n            </div>\n          </div>\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/MdxEditorField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorField.cjs","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n  MdxEditorAdmonitionOptions,\n  MdxEditorCodeBlockLanguage,\n  MdxEditorCodeBlockOptions,\n  MdxEditorCodeMirrorOptions,\n  MdxEditorDiffModeOptions,\n  MdxEditorFieldProps,\n  MdxEditorHeadingLevel,\n  MdxEditorImageOptions,\n  MdxEditorImagePreviewHandler,\n  MdxEditorImageUploadHandler,\n  MdxEditorLinkOptions,\n  MdxEditorPlugin,\n  MdxEditorPluginOptions,\n  MdxEditorToolbarOptions,\n  MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n  focus: () => void;\n  getContentEditableHTML: () => string;\n  getMarkdown: () => string;\n  getSelectionMarkdown: () => string;\n  insertMarkdown: (markdown: string) => void;\n  setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n  xs: \"min-h-32\",\n  sm: \"min-h-36\",\n  md: \"min-h-40\",\n  lg: \"min-h-48\",\n  xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n  mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n  return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n  id,\n  value = \"\",\n  onChange,\n  readOnly = false,\n  disabled = false,\n  size = \"md\",\n  placeholder,\n  className,\n  contentClassName,\n  textareaClassName,\n  \"aria-label\": ariaLabel,\n  commitInitialMarkdownNormalize = false,\n  ...pluginOptions\n}: MdxEditorFieldProps) {\n  const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n  const editorRef = useRef<MdxEditorMethods>(null);\n  const lastValueRef = useRef(value);\n  const readonly = readOnly || disabled;\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMdxEditorModule()\n      .then((mod) => {\n        if (!cancelled) setMdx(mod);\n      })\n      .catch(() => {\n        if (!cancelled) setMdx(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!mdx || value === lastValueRef.current) return;\n    lastValueRef.current = value;\n    editorRef.current?.setMarkdown(value);\n  }, [mdx, value]);\n\n  const commit = useCallback(\n    (next: string, initialMarkdownNormalize = false) => {\n      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n      lastValueRef.current = next;\n      onChange?.(next);\n    },\n    [commitInitialMarkdownNormalize, onChange],\n  );\n\n  const plugins = useMemo(\n    () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n    [mdx, pluginOptions],\n  );\n\n  if (!mdx) {\n    const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n    return (\n      <textarea\n        id={id}\n        data-jsf-input\n        rows={6}\n        aria-label={fallbackAriaLabel}\n        className={cn(\n          inputClass(size),\n          \"h-auto resize-y font-mono\",\n          EDITOR_MIN_HEIGHT_CLASS[size],\n          textareaClassName,\n        )}\n        value={value}\n        disabled={readonly}\n        placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n        onChange={(event) => commit(event.target.value)}\n      />\n    );\n  }\n\n  const { MDXEditor } = mdx;\n  return (\n    <div id={id} data-jsf-input className=\"min-w-0\">\n      <MDXEditor\n        ref={editorRef}\n        markdown={value}\n        readOnly={readonly}\n        placeholder={placeholder}\n        plugins={plugins}\n        className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n        contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n        onChange={commit}\n      />\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useCallback","useMemo","createMdxEditorPlugins","jsx","cn","inputClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAIA,MAAAA,SAAiC,IAAI;AAC3D,QAAM,YAAYC,MAAAA,OAAyB,IAAI;AAC/C,QAAM,eAAeA,MAAAA,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7BC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,QAAAA,UAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAASC,MAAAA;AAAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAUC,MAAAA;AAAAA,IACd,MAAO,MAAMC,sBAAAA,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAWC,MAAAA;AAAAA,UACTC,oBAAAA,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,wCACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAWC,MAAAA,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0BA,MAAAA,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;;"}
+{"version":3,"file":"MdxEditorField.cjs","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n  MdxEditorAdmonitionOptions,\n  MdxEditorCodeBlockEditorContext,\n  MdxEditorCodeBlockEditorDescriptor,\n  MdxEditorCodeBlockEditorProps,\n  MdxEditorCodeBlockLanguage,\n  MdxEditorCodeBlockOptions,\n  MdxEditorCodeMirrorOptions,\n  MdxEditorDiffModeOptions,\n  MdxEditorFieldProps,\n  MdxEditorHeadingLevel,\n  MdxEditorImageOptions,\n  MdxEditorImagePreviewHandler,\n  MdxEditorImageUploadHandler,\n  MdxEditorLinkOptions,\n  MdxEditorPlugin,\n  MdxEditorPluginOptions,\n  MdxEditorToolbarOptions,\n  MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n  focus: () => void;\n  getContentEditableHTML: () => string;\n  getMarkdown: () => string;\n  getSelectionMarkdown: () => string;\n  insertMarkdown: (markdown: string) => void;\n  setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n  xs: \"min-h-32\",\n  sm: \"min-h-36\",\n  md: \"min-h-40\",\n  lg: \"min-h-48\",\n  xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n  mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n  return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n  id,\n  value = \"\",\n  onChange,\n  readOnly = false,\n  disabled = false,\n  size = \"md\",\n  placeholder,\n  className,\n  contentClassName,\n  textareaClassName,\n  \"aria-label\": ariaLabel,\n  commitInitialMarkdownNormalize = false,\n  ...pluginOptions\n}: MdxEditorFieldProps) {\n  const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n  const editorRef = useRef<MdxEditorMethods>(null);\n  const lastValueRef = useRef(value);\n  const readonly = readOnly || disabled;\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMdxEditorModule()\n      .then((mod) => {\n        if (!cancelled) setMdx(mod);\n      })\n      .catch(() => {\n        if (!cancelled) setMdx(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!mdx || value === lastValueRef.current) return;\n    lastValueRef.current = value;\n    editorRef.current?.setMarkdown(value);\n  }, [mdx, value]);\n\n  const commit = useCallback(\n    (next: string, initialMarkdownNormalize = false) => {\n      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n      lastValueRef.current = next;\n      onChange?.(next);\n    },\n    [commitInitialMarkdownNormalize, onChange],\n  );\n\n  const plugins = useMemo(\n    () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n    [mdx, pluginOptions],\n  );\n\n  if (!mdx) {\n    const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n    return (\n      <textarea\n        id={id}\n        data-jsf-input\n        rows={6}\n        aria-label={fallbackAriaLabel}\n        className={cn(\n          inputClass(size),\n          \"h-auto resize-y font-mono\",\n          EDITOR_MIN_HEIGHT_CLASS[size],\n          textareaClassName,\n        )}\n        value={value}\n        disabled={readonly}\n        placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n        onChange={(event) => commit(event.target.value)}\n      />\n    );\n  }\n\n  const { MDXEditor } = mdx;\n  return (\n    <div id={id} data-jsf-input className=\"min-w-0\">\n      <MDXEditor\n        ref={editorRef}\n        markdown={value}\n        readOnly={readonly}\n        placeholder={placeholder}\n        plugins={plugins}\n        className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n        contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n        onChange={commit}\n      />\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useCallback","useMemo","createMdxEditorPlugins","jsx","cn","inputClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAIA,MAAAA,SAAiC,IAAI;AAC3D,QAAM,YAAYC,MAAAA,OAAyB,IAAI;AAC/C,QAAM,eAAeA,MAAAA,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7BC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,QAAAA,UAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAASC,MAAAA;AAAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAUC,MAAAA;AAAAA,IACd,MAAO,MAAMC,sBAAAA,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAWC,MAAAA;AAAAA,UACTC,oBAAAA,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,wCACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAWC,MAAAA,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0BA,MAAAA,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;;"}

package/dist/components/MdxEditorField.d.ts

@@ -1,4 +1,4 @@
 import { MdxEditorFieldProps } from './mdx-editor-options';
-export type { MdxEditorAdmonitionOptions, MdxEditorCodeBlockLanguage, MdxEditorCodeBlockOptions, MdxEditorCodeMirrorOptions, MdxEditorDiffModeOptions, MdxEditorFieldProps, MdxEditorHeadingLevel, MdxEditorImageOptions, MdxEditorImagePreviewHandler, MdxEditorImageUploadHandler, MdxEditorLinkOptions, MdxEditorPlugin, MdxEditorPluginOptions, MdxEditorToolbarOptions, MdxEditorViewMode, } from './mdx-editor-options';
+export type { MdxEditorAdmonitionOptions, MdxEditorCodeBlockEditorContext, MdxEditorCodeBlockEditorDescriptor, MdxEditorCodeBlockEditorProps, MdxEditorCodeBlockLanguage, MdxEditorCodeBlockOptions, MdxEditorCodeMirrorOptions, MdxEditorDiffModeOptions, MdxEditorFieldProps, MdxEditorHeadingLevel, MdxEditorImageOptions, MdxEditorImagePreviewHandler, MdxEditorImageUploadHandler, MdxEditorLinkOptions, MdxEditorPlugin, MdxEditorPluginOptions, MdxEditorToolbarOptions, MdxEditorViewMode, } from './mdx-editor-options';
 export declare function MdxEditorField({ id, value, onChange, readOnly, disabled, size, placeholder, className, contentClassName, textareaClassName, "aria-label": ariaLabel, commitInitialMarkdownNormalize, ...pluginOptions }: MdxEditorFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MdxEditorField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorField.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAIhE,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AA0B9B,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,KAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,IAAW,EACX,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EAAE,SAAS,EACvB,8BAAsC,EACtC,GAAG,aAAa,EACjB,EAAE,mBAAmB,2CA6ErB"}
+{"version":3,"file":"MdxEditorField.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAIhE,YAAY,EACV,0BAA0B,EAC1B,+BAA+B,EAC/B,kCAAkC,EAClC,6BAA6B,EAC7B,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AA0B9B,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,KAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,IAAW,EACX,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EAAE,SAAS,EACvB,8BAAsC,EACtC,GAAG,aAAa,EACjB,EAAE,mBAAmB,2CA6ErB"}

package/dist/components/MdxEditorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorField.js","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n  MdxEditorAdmonitionOptions,\n  MdxEditorCodeBlockLanguage,\n  MdxEditorCodeBlockOptions,\n  MdxEditorCodeMirrorOptions,\n  MdxEditorDiffModeOptions,\n  MdxEditorFieldProps,\n  MdxEditorHeadingLevel,\n  MdxEditorImageOptions,\n  MdxEditorImagePreviewHandler,\n  MdxEditorImageUploadHandler,\n  MdxEditorLinkOptions,\n  MdxEditorPlugin,\n  MdxEditorPluginOptions,\n  MdxEditorToolbarOptions,\n  MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n  focus: () => void;\n  getContentEditableHTML: () => string;\n  getMarkdown: () => string;\n  getSelectionMarkdown: () => string;\n  insertMarkdown: (markdown: string) => void;\n  setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n  xs: \"min-h-32\",\n  sm: \"min-h-36\",\n  md: \"min-h-40\",\n  lg: \"min-h-48\",\n  xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n  mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n  return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n  id,\n  value = \"\",\n  onChange,\n  readOnly = false,\n  disabled = false,\n  size = \"md\",\n  placeholder,\n  className,\n  contentClassName,\n  textareaClassName,\n  \"aria-label\": ariaLabel,\n  commitInitialMarkdownNormalize = false,\n  ...pluginOptions\n}: MdxEditorFieldProps) {\n  const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n  const editorRef = useRef<MdxEditorMethods>(null);\n  const lastValueRef = useRef(value);\n  const readonly = readOnly || disabled;\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMdxEditorModule()\n      .then((mod) => {\n        if (!cancelled) setMdx(mod);\n      })\n      .catch(() => {\n        if (!cancelled) setMdx(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!mdx || value === lastValueRef.current) return;\n    lastValueRef.current = value;\n    editorRef.current?.setMarkdown(value);\n  }, [mdx, value]);\n\n  const commit = useCallback(\n    (next: string, initialMarkdownNormalize = false) => {\n      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n      lastValueRef.current = next;\n      onChange?.(next);\n    },\n    [commitInitialMarkdownNormalize, onChange],\n  );\n\n  const plugins = useMemo(\n    () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n    [mdx, pluginOptions],\n  );\n\n  if (!mdx) {\n    const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n    return (\n      <textarea\n        id={id}\n        data-jsf-input\n        rows={6}\n        aria-label={fallbackAriaLabel}\n        className={cn(\n          inputClass(size),\n          \"h-auto resize-y font-mono\",\n          EDITOR_MIN_HEIGHT_CLASS[size],\n          textareaClassName,\n        )}\n        value={value}\n        disabled={readonly}\n        placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n        onChange={(event) => commit(event.target.value)}\n      />\n    );\n  }\n\n  const { MDXEditor } = mdx;\n  return (\n    <div id={id} data-jsf-input className=\"min-w-0\">\n      <MDXEditor\n        ref={editorRef}\n        markdown={value}\n        readOnly={readonly}\n        placeholder={placeholder}\n        plugins={plugins}\n        className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n        contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n        onChange={commit}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiC,IAAI;AAC3D,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAAS;AAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAU;AAAA,IACd,MAAO,MAAM,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,6BACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0B,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;"}
+{"version":3,"file":"MdxEditorField.js","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n  MdxEditorAdmonitionOptions,\n  MdxEditorCodeBlockEditorContext,\n  MdxEditorCodeBlockEditorDescriptor,\n  MdxEditorCodeBlockEditorProps,\n  MdxEditorCodeBlockLanguage,\n  MdxEditorCodeBlockOptions,\n  MdxEditorCodeMirrorOptions,\n  MdxEditorDiffModeOptions,\n  MdxEditorFieldProps,\n  MdxEditorHeadingLevel,\n  MdxEditorImageOptions,\n  MdxEditorImagePreviewHandler,\n  MdxEditorImageUploadHandler,\n  MdxEditorLinkOptions,\n  MdxEditorPlugin,\n  MdxEditorPluginOptions,\n  MdxEditorToolbarOptions,\n  MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n  focus: () => void;\n  getContentEditableHTML: () => string;\n  getMarkdown: () => string;\n  getSelectionMarkdown: () => string;\n  insertMarkdown: (markdown: string) => void;\n  setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n  xs: \"min-h-32\",\n  sm: \"min-h-36\",\n  md: \"min-h-40\",\n  lg: \"min-h-48\",\n  xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n  mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n  return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n  id,\n  value = \"\",\n  onChange,\n  readOnly = false,\n  disabled = false,\n  size = \"md\",\n  placeholder,\n  className,\n  contentClassName,\n  textareaClassName,\n  \"aria-label\": ariaLabel,\n  commitInitialMarkdownNormalize = false,\n  ...pluginOptions\n}: MdxEditorFieldProps) {\n  const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n  const editorRef = useRef<MdxEditorMethods>(null);\n  const lastValueRef = useRef(value);\n  const readonly = readOnly || disabled;\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMdxEditorModule()\n      .then((mod) => {\n        if (!cancelled) setMdx(mod);\n      })\n      .catch(() => {\n        if (!cancelled) setMdx(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!mdx || value === lastValueRef.current) return;\n    lastValueRef.current = value;\n    editorRef.current?.setMarkdown(value);\n  }, [mdx, value]);\n\n  const commit = useCallback(\n    (next: string, initialMarkdownNormalize = false) => {\n      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n      lastValueRef.current = next;\n      onChange?.(next);\n    },\n    [commitInitialMarkdownNormalize, onChange],\n  );\n\n  const plugins = useMemo(\n    () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n    [mdx, pluginOptions],\n  );\n\n  if (!mdx) {\n    const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n    return (\n      <textarea\n        id={id}\n        data-jsf-input\n        rows={6}\n        aria-label={fallbackAriaLabel}\n        className={cn(\n          inputClass(size),\n          \"h-auto resize-y font-mono\",\n          EDITOR_MIN_HEIGHT_CLASS[size],\n          textareaClassName,\n        )}\n        value={value}\n        disabled={readonly}\n        placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n        onChange={(event) => commit(event.target.value)}\n      />\n    );\n  }\n\n  const { MDXEditor } = mdx;\n  return (\n    <div id={id} data-jsf-input className=\"min-w-0\">\n      <MDXEditor\n        ref={editorRef}\n        markdown={value}\n        readOnly={readonly}\n        placeholder={placeholder}\n        plugins={plugins}\n        className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n        contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n        onChange={commit}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAuCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiC,IAAI;AAC3D,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAAS;AAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAU;AAAA,IACd,MAAO,MAAM,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,6BACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0B,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;"}

package/dist/components/MdxEditorToolbar.cjs

@@ -5,7 +5,12 @@ function isEnabled(value, defaultValue = true) {
   return value === void 0 ? defaultValue : value !== false;
 }
 function diffViewOptions(diffMode) {
-  return diffMode ? ["rich-text", "source", "diff"] : void 0;
+  var _a;
+  if (!diffMode) return void 0;
+  if (typeof diffMode === "object" && ((_a = diffMode.viewModes) == null ? void 0 : _a.length)) {
+    return [...diffMode.viewModes];
+  }
+  return ["rich-text", "source", "diff"];
 }
 function MdxEditorToolbar({
   mdx,

package/dist/components/MdxEditorToolbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorToolbar.cjs","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  return diffMode ? [\"rich-text\", \"source\", \"diff\"] : undefined;\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;AAC7F,SAAO,WAAW,CAAC,aAAa,UAAU,MAAM,IAAI;AACtD;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAMA,+BAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAMA,2BAAAA,IAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAOA,2BAAAA,IAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAF,2BAAAA,IAAC,UAAA,EAAS;AAAA,mCACT,WAAA,EAAU;AAAA,mCACV,4BAAA,EAA2B;AAAA,mCAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,oCAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,qCAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,oCAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,oCAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAMA,2BAAAA,IAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,oCAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,oCAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAOA,2BAAAA,IAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;;"}
+{"version":3,"file":"MdxEditorToolbar.cjs","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  if (!diffMode) return undefined;\n  if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n    return [...diffMode.viewModes];\n  }\n  return [\"rich-text\", \"source\", \"diff\"];\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;;AAC7F,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,OAAO,aAAa,cAAY,cAAS,cAAT,mBAAoB,SAAQ;AAC9D,WAAO,CAAC,GAAG,SAAS,SAAS;AAAA,EAC/B;AACA,SAAO,CAAC,aAAa,UAAU,MAAM;AACvC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAMA,+BAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAMA,2BAAAA,IAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAOA,2BAAAA,IAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAF,2BAAAA,IAAC,UAAA,EAAS;AAAA,mCACT,WAAA,EAAU;AAAA,mCACV,4BAAA,EAA2B;AAAA,mCAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,oCAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,qCAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,oCAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,oCAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAMA,2BAAAA,IAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,oCAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,oCAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAOA,2BAAAA,IAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,eAAe,GAAG,cAAc,mBAAmB,CAAC,CAAC;AAU1D,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,OAAO,GACR,EAAE;IACD,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,sBAAsB,CAAC;CACjC,2CAgBA"}
+{"version":3,"file":"MdxEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,eAAe,GAAG,cAAc,mBAAmB,CAAC,CAAC;AAc1D,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,OAAO,GACR,EAAE;IACD,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,sBAAsB,CAAC;CACjC,2CAgBA"}

package/dist/components/MdxEditorToolbar.js

@@ -3,7 +3,12 @@ function isEnabled(value, defaultValue = true) {
   return value === void 0 ? defaultValue : value !== false;
 }
 function diffViewOptions(diffMode) {
-  return diffMode ? ["rich-text", "source", "diff"] : void 0;
+  var _a;
+  if (!diffMode) return void 0;
+  if (typeof diffMode === "object" && ((_a = diffMode.viewModes) == null ? void 0 : _a.length)) {
+    return [...diffMode.viewModes];
+  }
+  return ["rich-text", "source", "diff"];
 }
 function MdxEditorToolbar({
   mdx,

package/dist/components/MdxEditorToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  return diffMode ? [\"rich-text\", \"source\", \"diff\"] : undefined;\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":";AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;AAC7F,SAAO,WAAW,CAAC,aAAa,UAAU,MAAM,IAAI;AACtD;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAM,oBAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAM,oBAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAO,oBAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAS;AAAA,wBACT,WAAA,EAAU;AAAA,wBACV,4BAAA,EAA2B;AAAA,wBAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,yBAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,0BAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,yBAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,yBAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAM,oBAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,yBAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,yBAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAO,oBAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;"}
+{"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  if (!diffMode) return undefined;\n  if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n    return [...diffMode.viewModes];\n  }\n  return [\"rich-text\", \"source\", \"diff\"];\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":";AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;;AAC7F,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,OAAO,aAAa,cAAY,cAAS,cAAT,mBAAoB,SAAQ;AAC9D,WAAO,CAAC,GAAG,SAAS,SAAS;AAAA,EAC/B;AACA,SAAO,CAAC,aAAa,UAAU,MAAM;AACvC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAM,oBAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAM,oBAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAO,oBAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAS;AAAA,wBACT,WAAA,EAAU;AAAA,wBACV,4BAAA,EAA2B;AAAA,wBAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,yBAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,0BAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,yBAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,yBAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAM,oBAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,yBAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,yBAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAO,oBAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;"}

package/dist/components/MultiSelect.cjs

@@ -60,7 +60,6 @@ function MultiSelect({
         ref: refs.setReference,
         type: "button",
         variant: "outline",
-        size: "sm",
         disabled,
         "aria-label": ariaLabel ?? `${placeholder} filter`,
         className: utils.cn(

package/dist/components/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div className={cn(\"inline-flex\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","useMemo","cn","jsxs","Button","jsx","Icon","UiChevronUp","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div className={cn(\"inline-flex\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","useMemo","cn","jsxs","Button","jsx","Icon","UiChevronUp","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAoBpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8DAE0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAqHlB"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAoBpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8DAE0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAoHlB"}

package/dist/components/MultiSelect.js

@@ -58,7 +58,6 @@ function MultiSelect({
         ref: refs.setReference,
         type: "button",
         variant: "outline",
-        size: "sm",
         disabled,
         "aria-label": ariaLabel ?? `${placeholder} filter`,
         className: cn(

package/dist/components/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div className={cn(\"inline-flex\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div className={cn(\"inline-flex\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}