@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/dist/chunk-TTGIHMDR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/panels/panel-toolbar.tsx"],"names":[],"mappings":"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","file":"chunk-TTGIHMDR.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport {\n  Toolbar,\n  type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  List,\n  type ListConfig,\n} from '../../components/collections/list/list.js';\nimport { Pane, type PaneConfig } from '../../components/layout/pane/pane.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../content/semantic-content.js';\nimport { isRelocatableGroup } from './panel-toolbar-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: PanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n  /** The `data-action` the toggle button carries. */\n  action: string;\n  /** The panel's short name, for the accessible \"Show …\" / \"Hide …\" label. */\n  name: string;\n  /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */\n  showLabel?: string;\n  /** Accessible label while the panel is open. Defaults to `Hide {name}`. */\n  hideLabel?: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` precedes the `leading` zone. Groups may appear in any of the\n *   `leading`, `center`, and `trailing` zones while the panel is open.\n * - Groups marked `relocateOnCollapse` move to the work area's toolbar while\n *   the panel is collapsed, preserving their order across the three zones.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n *   open, and right after the relocated groups in the work area's toolbar\n *   while it is collapsed.\n *\n * Relocated content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s. Pass groups directly or in\n * arrays so their render-time annotation remains available to the panel.\n *\n * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,\n * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no\n * divider of its own: the panel's `Pane` draws the line under it while the\n * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).\n */\nexport interface PanelToolbar extends ToolbarConfig {\n  /** Accessible name of the panel's toolbar. */\n  label: string;\n  title?: KerfUiContent;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  toggle?: PanelToggle;\n}\n\n/** A panel's fixed bottom toolbar, below its optional footer content. */\nexport interface PanelBottomToolbar extends ToolbarConfig {\n  label: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */\nexport type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';\n\nfunction panelChromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n  side: PanelSide,\n  toggle: PanelToggle,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  return (\n    <ToolbarControlGroup label={toggle.name} appearance=\"borderless\" single>\n      <button\n        type=\"button\"\n        {...attributes}\n        data-action={toggle.action}\n        aria-expanded={String(!collapsed)}\n        aria-label={\n          collapsed\n            ? (toggle.showLabel ?? `Show ${toggle.name}`)\n            : (toggle.hideLabel ?? `Hide ${toggle.name}`)\n        }\n      >\n        <LucideIcon icon={glyph.icon} name={glyph.name} />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * The panel's own toolbar: content keeps its chosen zones and the toggle trails.\n */\nexport function composedPanelToolbar(\n  toolbar: PanelToolbar,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  return (\n    <Toolbar\n      label={toolbar.label}\n      dividerSides={toolbar.dividerSides}\n      centerAlign={toolbar.centerAlign}\n      responsive={toolbar.responsive}\n      responsiveAt={toolbar.responsiveAt}\n      safeAreaEdges={toolbar.safeAreaEdges}\n      center={toolbar.center}\n      leading={\n        <>\n          {toolbar.title}\n          {toolbar.leading}\n        </>\n      }\n      trailing={\n        <>\n          {toolbar.trailing}\n          {toolbar.toggle\n            ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes)\n            : null}\n        </>\n      }\n    />\n  );\n}\n\n/**\n * A toolbar panel's body: its content in a `Pane` under its composed toolbar,\n * with its optional `footer` below. The panel's `pane` configuration forwards\n * to that `Pane`; an omitted or `undefined` field keeps the `Pane` default.\n */\nexport function composedPanelBody({\n  toolbar,\n  side,\n  collapsed,\n  attributes,\n  pane,\n  header,\n  headerList,\n  headerPlacement = 'fixed',\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement = 'fixed',\n  content,\n}: {\n  toolbar: PanelToolbar;\n  side: PanelSide;\n  collapsed: boolean;\n  attributes: PanelToggleAttributes;\n  pane: PaneConfig | undefined;\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: PanelChromePlacement;\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: PanelBottomToolbar;\n  footerPlacement?: PanelChromePlacement;\n  content: KerfUiContent;\n}): SafeHtml {\n  const panelHeader = (\n    <>\n      {composedPanelToolbar(toolbar, side, collapsed, attributes)}\n      {header ? panelChromeList(header, headerList) : null}\n    </>\n  );\n  const panelFooter =\n    footer || bottomToolbar ? (\n      <>\n        {footer ? panelChromeList(footer, footerList) : null}\n        {bottomToolbar ? (\n          <Toolbar\n            position=\"footer\"\n            label={bottomToolbar.label}\n            dividerSides={bottomToolbar.dividerSides}\n            centerAlign={bottomToolbar.centerAlign}\n            responsive={bottomToolbar.responsive}\n            responsiveAt={bottomToolbar.responsiveAt}\n            safeAreaEdges={bottomToolbar.safeAreaEdges}\n            leading={bottomToolbar.leading}\n            center={bottomToolbar.center}\n            trailing={bottomToolbar.trailing}\n          />\n        ) : null}\n      </>\n    ) : undefined;\n  const scrollHeader = headerPlacement === 'scroll';\n  const scrollFooter = footerPlacement === 'scroll';\n  return (\n    <Pane\n      header={scrollHeader ? undefined : panelHeader}\n      footer={scrollFooter ? undefined : panelFooter}\n      chromePlacement={\n        headerPlacement === 'auto' || footerPlacement === 'auto'\n          ? 'auto'\n          : 'fixed'\n      }\n      contentElement={pane?.contentElement}\n      contentLabel={pane?.contentLabel}\n      separators={pane?.separators}\n      safeAreaEdges={pane?.safeAreaEdges}\n      chromeDividers={pane?.chromeDividers}\n      appearance={pane?.appearance}\n      deepInset={pane?.deepInset}\n      tabIndex={pane?.tabIndex}\n      outlined={pane?.outlined}\n    >\n      {scrollHeader ? panelHeader : null}\n      {content}\n      {scrollFooter ? panelFooter : null}\n    </Pane>\n  );\n}\n\n/**\n * The groups a collapsed panel hands to the work area, in zone order, then its\n * toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n  toolbar: PanelToolbar | undefined,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): KerfUiContent[] {\n  if (!collapsed || !toolbar) return [];\n  const groups: KerfUiContent[] = [];\n  const collect = (content: KerfUiContent): void => {\n    if (Array.isArray(content)) {\n      for (const item of content) collect(item);\n    } else if (isRelocatableGroup(content)) {\n      groups.push(content);\n    }\n  };\n  collect(toolbar.leading);\n  collect(toolbar.center);\n  collect(toolbar.trailing);\n  return [\n    ...groups,\n    toolbar.toggle\n      ? panelToggleGroup(side, toolbar.toggle, true, attributes)\n      : null,\n  ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}

package/dist/chunk-U657IHFB.js

@@ -0,0 +1,158 @@
+// src/shared/styles/css-values.ts
+var uiColorNames = [
+  "brand-border-loud",
+  "brand-border-normal",
+  "brand-border-quiet",
+  "brand-fill-loud",
+  "brand-fill-normal",
+  "brand-fill-quiet",
+  "brand-on-fill",
+  "brand-on-loud",
+  "brand-on-normal",
+  "brand-on-quiet",
+  "danger-border-loud",
+  "danger-border-normal",
+  "danger-border-quiet",
+  "danger-fill-loud",
+  "danger-fill-normal",
+  "danger-fill-quiet",
+  "danger-on-fill",
+  "danger-on-loud",
+  "danger-on-normal",
+  "danger-on-quiet",
+  "neutral-border-loud",
+  "neutral-border-normal",
+  "neutral-border-quiet",
+  "neutral-fill-loud",
+  "neutral-fill-normal",
+  "neutral-fill-quiet",
+  "neutral-on-loud",
+  "neutral-on-normal",
+  "neutral-on-quiet",
+  "pop-border-loud",
+  "pop-border-normal",
+  "pop-border-quiet",
+  "pop-fill-loud",
+  "pop-fill-normal",
+  "pop-fill-quiet",
+  "pop-on-fill",
+  "pop-on-loud",
+  "pop-on-normal",
+  "pop-on-quiet",
+  "success-border-loud",
+  "success-border-normal",
+  "success-border-quiet",
+  "success-fill-loud",
+  "success-fill-normal",
+  "success-fill-quiet",
+  "success-on-fill",
+  "success-on-loud",
+  "success-on-normal",
+  "success-on-quiet",
+  "surface",
+  "surface-lowered",
+  "surface-raised",
+  "text",
+  "text-link",
+  "text-quiet",
+  "warning-border-loud",
+  "warning-border-normal",
+  "warning-border-quiet",
+  "warning-fill-loud",
+  "warning-fill-normal",
+  "warning-fill-quiet",
+  "warning-on-fill",
+  "warning-on-loud",
+  "warning-on-normal",
+  "warning-on-quiet"
+];
+var spaceVariables = {
+  none: "--kui-space-none",
+  "2xs": "--kui-space-2xs",
+  xs: "--kui-space-xs",
+  s: "--kui-space-s",
+  m: "--kui-space-m",
+  l: "--kui-space-l",
+  xl: "--kui-space-xl"
+};
+function serializeNumber(value, helper) {
+  if (!Number.isFinite(value))
+    throw new RangeError(`${helper}() requires a finite number.`);
+  return String(Object.is(value, -0) ? 0 : value);
+}
+function serializeNonnegativeNumber(value, helper) {
+  const serialized = serializeNumber(value, helper);
+  if (value < 0)
+    throw new RangeError(`${helper}() requires nonnegative flex factors.`);
+  return serialized;
+}
+function validateCustomPropertyName(name, helper, example) {
+  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))
+    throw new TypeError(
+      `${helper}() requires an ASCII custom property name such as ${example}.`
+    );
+}
+function dimension(value, unit, helper) {
+  return `${serializeNumber(value, helper)}${unit}`;
+}
+function px(value) {
+  return dimension(value, "px", "px");
+}
+function rem(value) {
+  return dimension(value, "rem", "rem");
+}
+function remify(value) {
+  return rem(value / 16);
+}
+function em(value) {
+  return dimension(value, "em", "em");
+}
+function pct(value) {
+  return dimension(value, "%", "pct");
+}
+function space(name) {
+  const variable = spaceVariables[name];
+  if (variable === void 0)
+    throw new RangeError(
+      `space() received unknown spacing name ${String(name)}.`
+    );
+  return `var(${variable})`;
+}
+function lengthVar(name, fallback) {
+  validateCustomPropertyName(name, "lengthVar", "--app-gap");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function plus(first, second, ...rest) {
+  return [first, second, ...rest].join(" + ");
+}
+function calc(expression) {
+  return `calc(${expression})`;
+}
+function flex(grow, shrink = 1, basis = "auto") {
+  return `${serializeNonnegativeNumber(grow, "flex")} ${serializeNonnegativeNumber(shrink, "flex")} ${basis}`;
+}
+function uiColor(name) {
+  if (!uiColorNames.includes(name))
+    throw new RangeError(
+      `uiColor() received unknown color name ${String(name)}.`
+    );
+  return `var(--kui-color-${name})`;
+}
+function colorVar(name, fallback) {
+  validateCustomPropertyName(name, "colorVar", "--app-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function foregroundColorVar(name, fallback) {
+  validateCustomPropertyName(name, "foregroundColorVar", "--app-icon-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function foregroundColor(value) {
+  const color = value.trim();
+  if (!color || /[;{}<>]|\p{Cc}/u.test(color))
+    throw new TypeError("foregroundColor() requires one CSS color value.");
+  return color;
+}
+
+export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
+
+//# sourceMappingURL=chunk-U657IHFB.js.map

package/dist/chunk-U657IHFB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles/css-values.ts"],"names":[],"mappings":"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","file":"chunk-U657IHFB.js","sourcesContent":["declare const cssValueBrand: unique symbol;\ndeclare const cssLengthBrand: unique symbol;\ndeclare const cssLengthExpressionBrand: unique symbol;\ndeclare const cssFlexBrand: unique symbol;\ndeclare const cssColorBrand: unique symbol;\ndeclare const cssForegroundColorBrand: unique symbol;\n\n/**\n * A complete typed CSS value minted by a property-specific Kerf UI builder.\n *\n * This brand is an authoring correctness aid, not a sanitizer or security\n * boundary. Prefer the narrower property grammar, such as {@link CssLength},\n * whenever one is available.\n */\nexport type CssValue = string & {\n  readonly [cssValueBrand]: 'CssValue';\n};\n\n/**\n * A complete CSS length-percentage value suitable for dimension-valued UI\n * props. Despite the concise name, percentages are intentionally included.\n */\nexport type CssLength = CssValue & {\n  readonly [cssLengthBrand]: 'CssLength';\n};\n\n/**\n * An incomplete arithmetic expression. Wrap it with {@link calc} before\n * passing it to a prop that accepts {@link CssLength}.\n */\nexport type CssLengthExpression = string & {\n  readonly [cssLengthExpressionBrand]: 'CssLengthExpression';\n};\n\n/** A complete CSS `flex` shorthand. It is not interchangeable with a length. */\nexport type CssFlex = CssValue & {\n  readonly [cssFlexBrand]: 'CssFlex';\n};\n\n/** A complete CSS color value. It is not interchangeable with a length. */\nexport type CssColor = CssValue & {\n  readonly [cssColorBrand]: 'CssColor';\n};\n\n/**\n * A complete CSS color meant to paint a foreground: text or an icon drawn over\n * a surface. Mint it with {@link uiColor} and a foreground token name\n * ({@link UiForegroundColorName}) or with {@link foregroundColorVar}. It is a\n * {@link CssColor}, but a plain `CssColor` is not a foreground color: fill,\n * border, and surface tokens are pale backgrounds that leave a foreground\n * nearly invisible.\n */\nexport type CssForegroundColor = CssColor & {\n  readonly [cssForegroundColorBrand]: 'CssForegroundColor';\n};\n\nexport type CssFlexKeyword = 'none' | 'auto' | 'initial';\nexport type CssFlexBasis =\n  | CssLength\n  | 'auto'\n  | 'content'\n  | 'min-content'\n  | 'max-content'\n  | 'fit-content';\nexport type CssSizeKeyword =\n  'auto' | 'min-content' | 'max-content' | 'fit-content';\n/** A complete width/height value accepted by dimension-valued UI props. */\nexport type CssSize = CssLength | CssSizeKeyword;\n\nconst uiColorNames = [\n  'brand-border-loud',\n  'brand-border-normal',\n  'brand-border-quiet',\n  'brand-fill-loud',\n  'brand-fill-normal',\n  'brand-fill-quiet',\n  'brand-on-fill',\n  'brand-on-loud',\n  'brand-on-normal',\n  'brand-on-quiet',\n  'danger-border-loud',\n  'danger-border-normal',\n  'danger-border-quiet',\n  'danger-fill-loud',\n  'danger-fill-normal',\n  'danger-fill-quiet',\n  'danger-on-fill',\n  'danger-on-loud',\n  'danger-on-normal',\n  'danger-on-quiet',\n  'neutral-border-loud',\n  'neutral-border-normal',\n  'neutral-border-quiet',\n  'neutral-fill-loud',\n  'neutral-fill-normal',\n  'neutral-fill-quiet',\n  'neutral-on-loud',\n  'neutral-on-normal',\n  'neutral-on-quiet',\n  'pop-border-loud',\n  'pop-border-normal',\n  'pop-border-quiet',\n  'pop-fill-loud',\n  'pop-fill-normal',\n  'pop-fill-quiet',\n  'pop-on-fill',\n  'pop-on-loud',\n  'pop-on-normal',\n  'pop-on-quiet',\n  'success-border-loud',\n  'success-border-normal',\n  'success-border-quiet',\n  'success-fill-loud',\n  'success-fill-normal',\n  'success-fill-quiet',\n  'success-on-fill',\n  'success-on-loud',\n  'success-on-normal',\n  'success-on-quiet',\n  'surface',\n  'surface-lowered',\n  'surface-raised',\n  'text',\n  'text-link',\n  'text-quiet',\n  'warning-border-loud',\n  'warning-border-normal',\n  'warning-border-quiet',\n  'warning-fill-loud',\n  'warning-fill-normal',\n  'warning-fill-quiet',\n  'warning-on-fill',\n  'warning-on-loud',\n  'warning-on-normal',\n  'warning-on-quiet',\n] as const;\n\n/** Names of the public `--kui-color-*` semantic tokens. */\nexport type UiColorName = (typeof uiColorNames)[number];\n\n/** The semantic tokens that paint a foreground: the `*-on-*` and text roles. */\nexport type UiForegroundColorName = Extract<\n  UiColorName,\n  `${string}-on-${string}` | 'text' | 'text-quiet' | 'text-link'\n>;\n\n/** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */\nexport type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\n/** A token or complete typed length for one gap axis. */\nexport type UiGapValue = UiSpaceName | CssLength;\n\n/** A shared gap or independent column and row gaps. */\nexport type UiGap =\n  UiGapValue | Readonly<{ column: UiGapValue; row: UiGapValue }>;\n\nconst spaceVariables = {\n  none: '--kui-space-none',\n  '2xs': '--kui-space-2xs',\n  xs: '--kui-space-xs',\n  s: '--kui-space-s',\n  m: '--kui-space-m',\n  l: '--kui-space-l',\n  xl: '--kui-space-xl',\n} as const satisfies Record<UiSpaceName, string>;\n\nfunction serializeNumber(value: number, helper: string): string {\n  if (!Number.isFinite(value))\n    throw new RangeError(`${helper}() requires a finite number.`);\n  return String(Object.is(value, -0) ? 0 : value);\n}\n\nfunction serializeNonnegativeNumber(value: number, helper: string): string {\n  const serialized = serializeNumber(value, helper);\n  if (value < 0)\n    throw new RangeError(`${helper}() requires nonnegative flex factors.`);\n  return serialized;\n}\n\nfunction validateCustomPropertyName(\n  name: string,\n  helper: string,\n  example: string,\n): void {\n  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))\n    throw new TypeError(\n      `${helper}() requires an ASCII custom property name such as ${example}.`,\n    );\n}\n\nfunction dimension(value: number, unit: string, helper: string): CssLength {\n  return `${serializeNumber(value, helper)}${unit}` as CssLength;\n}\n\n/** Create a complete pixel length. */\nexport function px(value: number): CssLength {\n  return dimension(value, 'px', 'px');\n}\n\n/** Create a complete root-font-relative length. */\nexport function rem(value: number): CssLength {\n  return dimension(value, 'rem', 'rem');\n}\n\n/** Converts a pixel value into rem units by dividing by 16. */\nexport function remify(value: number): CssLength {\n  return rem(value / 16);\n}\n\n/** Create a complete current-font-relative length. */\nexport function em(value: number): CssLength {\n  return dimension(value, 'em', 'em');\n}\n\n/** Create a complete percentage length. */\nexport function pct(value: number): CssLength {\n  return dimension(value, '%', 'pct');\n}\n\n/** Resolve a Kerf UI spacing step to its public custom property. */\nexport function space(name: UiSpaceName): CssLength {\n  const variable = spaceVariables[name];\n  if (variable === undefined)\n    throw new RangeError(\n      `space() received unknown spacing name ${String(name)}.`,\n    );\n  return `var(${variable})` as CssLength;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a CSS\n * length-percentage. The deliberately narrow name grammar keeps this helper\n * from becoming an arbitrary CSS-string constructor.\n */\nexport function lengthVar(\n  name: `--${string}`,\n  fallback?: CssLength,\n): CssLength {\n  validateCustomPropertyName(name, 'lengthVar', '--app-gap');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssLength;\n}\n\n/** Combine two or more complete lengths into a non-standalone sum. */\nexport function plus(\n  first: CssLength,\n  second: CssLength,\n  ...rest: readonly CssLength[]\n): CssLengthExpression {\n  return [first, second, ...rest].join(' + ') as CssLengthExpression;\n}\n\n/** Turn a typed length expression into a complete CSS `calc()` value. */\nexport function calc(expression: CssLengthExpression): CssLength {\n  return `calc(${expression})` as CssLength;\n}\n\n/** Build a complete, structured CSS flex shorthand. */\nexport function flex(\n  grow: number,\n  shrink = 1,\n  basis: CssFlexBasis = 'auto',\n): CssFlex {\n  return `${serializeNonnegativeNumber(grow, 'flex')} ${serializeNonnegativeNumber(shrink, 'flex')} ${basis}` as CssFlex;\n}\n\n/**\n * The brand {@link uiColor} returns for a token name: a\n * {@link CssForegroundColor} for a foreground token, otherwise a plain\n * {@link CssColor}.\n */\nexport type UiColor<Name extends UiColorName> =\n  Name extends UiForegroundColorName ? CssForegroundColor : CssColor;\n\n/**\n * Resolve a public Kerf UI semantic color token. A foreground token name\n * (`success-on-quiet`, `text-quiet`, …) returns a {@link CssForegroundColor};\n * any other token returns a plain {@link CssColor}.\n */\nexport function uiColor<Name extends UiColorName>(name: Name): UiColor<Name> {\n  if (!(uiColorNames as readonly string[]).includes(name))\n    throw new RangeError(\n      `uiColor() received unknown color name ${String(name)}.`,\n    );\n  return `var(--kui-color-${name})` as UiColor<Name>;\n}\n\n/** Reference an application-owned custom property whose contract is a color. */\nexport function colorVar(name: `--${string}`, fallback?: CssColor): CssColor {\n  validateCustomPropertyName(name, 'colorVar', '--app-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssColor;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a\n * foreground color (text or an icon over a surface). Use it where a prop\n * accepts only {@link CssForegroundColor}, such as `SelectChoice.color`.\n */\nexport function foregroundColorVar(\n  name: `--${string}`,\n  fallback?: CssForegroundColor,\n): CssForegroundColor {\n  validateCustomPropertyName(name, 'foregroundColorVar', '--app-icon-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssForegroundColor;\n}\n\n/**\n * Use an application-chosen CSS color for foreground content. The browser\n * resolves the color syntax; this checks only that it is one declaration value.\n */\nexport function foregroundColor(value: string): CssForegroundColor {\n  const color = value.trim();\n  if (!color || /[;{}<>]|\\p{Cc}/u.test(color))\n    throw new TypeError('foregroundColor() requires one CSS color value.');\n  return color as CssForegroundColor;\n}\n"]}

package/dist/chunk-VLGQIYZ5.js

@@ -0,0 +1,295 @@
+import { LucideIcon } from './chunk-NP3FSLNX.js';
+import { Search, X } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+function orderedParts(query, tokens) {
+  const ordered = tokens.map((token, index) => ({
+    token,
+    index,
+    offset: Math.max(0, Math.min(query.length, token.offset ?? query.length))
+  })).sort(
+    (left, right) => left.offset - right.offset || left.index - right.index
+  );
+  const parts = [];
+  let cursor = 0;
+  for (const { token, offset } of ordered) {
+    parts.push({ kind: "text", value: query.slice(cursor, offset) });
+    parts.push({ kind: "token", token: { ...token, offset } });
+    cursor = offset;
+  }
+  parts.push({ kind: "text", value: query.slice(cursor) });
+  return parts;
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x" });
+}
+function TokenSearchField({
+  id,
+  label,
+  query = "",
+  tokens = [],
+  model,
+  revision,
+  placeholder = "Search",
+  tokenPlaceholder = "Add search\u2026",
+  disabled = false,
+  autofocus = false,
+  fill = false,
+  collapsible = false,
+  expanded = false,
+  expandAction = "expand-token-search",
+  expandLabel,
+  leading,
+  trailing,
+  trailingAction,
+  presentation = "standalone",
+  hint,
+  required = false,
+  editAction = "edit-search-token",
+  removeAction = "remove-search-token",
+  clearAction = "clear-token-search",
+  clearLabel = "Clear search",
+  clearIcon,
+  className = "",
+  editorAttributes = {},
+  slot
+}) {
+  if (model) {
+    query = model.state.value.query;
+    tokens = model.state.value.tokens;
+  }
+  const suggestions = model?.suggestions.value ?? [];
+  const parts = orderedParts(query, tokens);
+  const tokenKey = tokens.map((token) => token.value).join("|");
+  const key = model ? `${id}@${String(revision ?? "")}:${model.editorRevision.value}:${tokenKey}` : revision === void 0 ? `${id}:${tokenKey}` : `${id}@${String(revision)}:${tokenKey}`;
+  const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
+  const control = /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-token-search ${presentation === "form-field" ? "" : className}`.trim(),
+      "data-component": "token-search-field",
+      "data-token-search-id": id,
+      "data-disabled": String(disabled),
+      "data-collapsible": String(collapsible),
+      "data-expanded": String(resolvedExpanded),
+      "data-fill": String(fill),
+      "data-has-trailing": String(Boolean(trailing || trailingAction)),
+      "data-presentation": presentation,
+      "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
+      "data-placeholder-visible": String(
+        query.length === 0 && tokens.length === 0
+      ),
+      slot,
+      children: !resolvedExpanded ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          class: "kui-token-search__expand",
+          "data-action": expandAction,
+          "aria-label": expandLabel ?? label,
+          title: expandLabel ?? label,
+          disabled,
+          children: /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { class: "kui-token-search__leading", "aria-hidden": "true", children: leading ?? /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...editorAttributes,
+            class: "kui-token-search__editor",
+            "data-key": key,
+            "data-morph-skip": true,
+            "data-token-search-editor": id,
+            "data-token-count": tokens.length,
+            "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
+            role: "searchbox",
+            "aria-label": presentation === "form-field" ? void 0 : label,
+            "aria-labelledby": presentation === "form-field" ? `${id}-label` : void 0,
+            "aria-describedby": presentation === "form-field" && hint ? `${id}-hint` : void 0,
+            "aria-required": required ? "true" : void 0,
+            "aria-disabled": disabled ? "true" : void 0,
+            contenteditable: disabled ? "false" : "true",
+            spellcheck: "false",
+            autofocus,
+            children: parts.map(
+              (part) => part.kind === "text" ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-token-search-text": true,
+                  "data-empty": String(part.value.length === 0),
+                  children: part.value || (tokens.length ? "\u200B" : "")
+                }
+              ) : /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  class: "kui-token-search__token",
+                  contenteditable: "false",
+                  "data-component": "token-search-token",
+                  "data-token-value": part.token.value,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "kui-token-search__token-edit",
+                        "data-action": editAction,
+                        "data-token-value": part.token.value,
+                        "aria-label": `Edit ${part.token.accessibleLabel ?? part.token.label}`,
+                        disabled,
+                        children: part.token.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "kui-token-search__token-remove",
+                        "data-action": removeAction,
+                        "data-token-value": part.token.value,
+                        "aria-label": `Remove ${part.token.accessibleLabel ?? part.token.label}`,
+                        disabled,
+                        children: /* @__PURE__ */ jsx(CloseIcon, {})
+                      }
+                    )
+                  ]
+                }
+              )
+            )
+          }
+        ),
+        (query || tokens.length > 0) && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "kui-token-search__clear",
+            "data-action": clearAction,
+            "aria-label": clearLabel,
+            title: clearLabel,
+            disabled,
+            children: clearIcon ?? /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ),
+        trailingAction ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "kui-token-search__trailing-action",
+            id: trailingAction.id,
+            "data-action": trailingAction.action,
+            "aria-label": trailingAction.label,
+            title: trailingAction.label,
+            disabled,
+            children: trailingAction.icon
+          }
+        ) : trailing ? /* @__PURE__ */ jsx("span", { class: "kui-token-search__trailing", children: trailing }) : null,
+        !disabled && suggestions.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-token-search__suggestions",
+            "data-token-search-keep-open": true,
+            children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                class: "kui-token-search__suggestion",
+                "data-token-search-suggestion": suggestion.value,
+                children: suggestion.label
+              }
+            ))
+          }
+        )
+      ] })
+    }
+  );
+  if (presentation !== "form-field") return control;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-token-search__field ${className}`.trim(),
+      "data-token-search-form-field": id,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            class: "kui-token-search__field-label",
+            id: `${id}-label`,
+            "data-token-search-form-label": id,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { class: "kui-token-search__field-required", "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ),
+        control,
+        hint && /* @__PURE__ */ jsx("div", { class: "kui-token-search__field-hint", id: `${id}-hint`, children: hint })
+      ]
+    }
+  );
+}
+function readTokenSearchField(editor, knownTokens = []) {
+  let query = "";
+  const tokens = [];
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      query += (node.textContent ?? "").replaceAll("\xA0", " ").replaceAll("\u200B", "");
+      return;
+    }
+    if (!(node instanceof HTMLElement)) return;
+    if (node.matches('[data-component="token-search-token"]')) {
+      const value = node.dataset.tokenValue;
+      const known = knownTokens.find((token) => token.value === value);
+      if (known) tokens.push({ ...known, offset: query.length });
+      else if (value)
+        tokens.push({ value, label: value, offset: query.length });
+      return;
+    }
+    if (node.tagName === "BR") {
+      query += " ";
+      return;
+    }
+    for (const child of node.childNodes) visit(child);
+  };
+  for (const child of editor.childNodes) visit(child);
+  return { query, tokens };
+}
+function placeTokenSearchCaret(editor, offset) {
+  editor.focus({ preventScroll: true });
+  const selection = globalThis.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  if (offset === void 0) {
+    range.selectNodeContents(editor);
+    range.collapse(false);
+  } else {
+    let remaining = Math.max(0, offset);
+    let found = false;
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => node.parentElement?.closest('[data-component="token-search-token"]') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+    });
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const source = node.textContent ?? "";
+      const length = source.replaceAll("\u200B", "").length;
+      if (remaining <= length) {
+        range.setStart(
+          node,
+          source === "\u200B" ? 0 : Math.min(remaining, source.length)
+        );
+        range.collapse(true);
+        found = true;
+        break;
+      }
+      remaining -= length;
+    }
+    if (!found) {
+      range.selectNodeContents(editor);
+      range.collapse(false);
+    }
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
+
+//# sourceMappingURL=chunk-VLGQIYZ5.js.map

package/dist/chunk-VLGQIYZ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/token-search-field/token-search-field.tsx"],"names":[],"mappings":";;;;AAmHA,SAAS,YAAA,CACP,OACA,MAAA,EACmB;AACnB,EAAA,MAAM,OAAA,GAAU,MAAA,CACb,GAAA,CAAI,CAAC,OAAO,KAAA,MAAW;AAAA,IACtB,KAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,KAAA,CAAM,MAAA,EAAQ,KAAA,CAAM,MAAA,IAAU,KAAA,CAAM,MAAM,CAAC;AAAA,IACxE,CAAA,CACD,IAAA;AAAA,IACC,CAAC,MAAM,KAAA,KAAU,IAAA,CAAK,SAAS,KAAA,CAAM,MAAA,IAAU,IAAA,CAAK,KAAA,GAAQ,KAAA,CAAM;AAAA,GACpE;AACF,EAAA,MAAM,QAA2B,EAAC;AAClC,EAAA,IAAI,MAAA,GAAS,CAAA;AACb,EAAA,KAAA,MAAW,EAAE,KAAA,EAAO,MAAA,EAAO,IAAK,OAAA,EAAS;AACvC,IAAA,KAAA,CAAM,IAAA,CAAK,EAAE,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAO,MAAM,KAAA,CAAM,MAAA,EAAQ,MAAM,CAAA,EAAG,CAAA;AAC/D,IAAA,KAAA,CAAM,IAAA,CAAK,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,MAAA,EAAO,EAAG,CAAA;AACzD,IAAA,MAAA,GAAS,MAAA;AAAA,EACX;AACA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,IAAA,EAAM,MAAA,EAAQ,OAAO,KAAA,CAAM,KAAA,CAAM,MAAM,CAAA,EAAG,CAAA;AACvD,EAAA,OAAO,KAAA;AACT;AAEA,SAAS,SAAA,GAAY;AACnB,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,CAAA,EAAG,MAAK,GAAA,EAAI,CAAA;AACvC;AAEO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,EAAA;AAAA,EACR,SAAS,EAAC;AAAA,EACV,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,gBAAA,GAAmB,kBAAA;AAAA,EACnB,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,KAAA;AAAA,EACZ,IAAA,GAAO,KAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,qBAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA,GAAe,YAAA;AAAA,EACf,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,UAAA,GAAa,mBAAA;AAAA,EACb,YAAA,GAAe,qBAAA;AAAA,EACf,WAAA,GAAc,oBAAA;AAAA,EACd,UAAA,GAAa,cAAA;AAAA,EACb,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,mBAAmB,EAAC;AAAA,EACpB;AACF,CAAA,EAA0B;AACxB,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,KAAA,GAAQ,KAAA,CAAM,MAAM,KAAA,CAAM,KAAA;AAC1B,IAAA,MAAA,GAAS,KAAA,CAAM,MAAM,KAAA,CAAM,MAAA;AAAA,EAC7B;AACA,EAAA,MAAM,WAAA,GAAc,KAAA,EAAO,WAAA,CAAY,KAAA,IAAS,EAAC;AACjD,EAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,KAAA,EAAO,MAAM,CAAA;AACxC,EAAA,MAAM,QAAA,GAAW,OAAO,GAAA,CAAI,CAAC,UAAU,KAAA,CAAM,KAAK,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAC5D,EAAA,MAAM,GAAA,GAAM,KAAA,GACR,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,MAAA,CAAO,QAAA,IAAY,EAAE,CAAC,CAAA,CAAA,EAAI,KAAA,CAAM,cAAA,CAAe,KAAK,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAA,GACzE,QAAA,KAAa,MAAA,GACX,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAA,GACjB,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,MAAA,CAAO,QAAQ,CAAC,IAAI,QAAQ,CAAA,CAAA;AAC3C,EAAA,MAAM,gBAAA,GACJ,CAAC,WAAA,IAAe,QAAA,IAAY,MAAM,MAAA,GAAS,CAAA,IAAK,OAAO,MAAA,GAAS,CAAA;AAClE,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAA,iBAAA,EAAoB,YAAA,KAAiB,eAAe,EAAA,GAAK,SAAS,GAAG,IAAA,EAAK;AAAA,MACjF,gBAAA,EAAe,oBAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MACtB,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,MAC9B,kBAAA,EAAkB,OAAO,WAAW,CAAA;AAAA,MACpC,eAAA,EAAe,OAAO,gBAAgB,CAAA;AAAA,MACtC,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,mBAAA,EAAmB,MAAA,CAAO,OAAA,CAAQ,QAAA,IAAY,cAAc,CAAC,CAAA;AAAA,MAC7D,mBAAA,EAAmB,YAAA;AAAA,MACnB,kBAAA,EAAkB,MAAA,CAAO,MAAA,GAAS,gBAAA,GAAmB,WAAA;AAAA,MACrD,0BAAA,EAA0B,MAAA;AAAA,QACxB,KAAA,CAAM,MAAA,KAAW,CAAA,IAAK,MAAA,CAAO,MAAA,KAAW;AAAA,OAC1C;AAAA,MACA,IAAA;AAAA,MAEC,WAAC,gBAAA,mBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,KAAA,EAAM,0BAAA;AAAA,UACN,aAAA,EAAa,YAAA;AAAA,UACb,cAAY,WAAA,IAAe,KAAA;AAAA,UAC3B,OAAO,WAAA,IAAe,KAAA;AAAA,UACtB,QAAA;AAAA,UAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAA,EAAQ,MAAK,QAAA,EAAS;AAAA;AAAA,0BAG1C,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,2BAAA,EAA4B,aAAA,EAAY,MAAA,EACjD,QAAA,EAAA,OAAA,oBAAW,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAK,QAAA,EAAS,CAAA,EACtD,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACE,GAAG,gBAAA;AAAA,YACJ,KAAA,EAAM,0BAAA;AAAA,YACN,UAAA,EAAU,GAAA;AAAA,YACV,iBAAA,EAAe,IAAA;AAAA,YACf,0BAAA,EAA0B,EAAA;AAAA,YAC1B,oBAAkB,MAAA,CAAO,MAAA;AAAA,YACzB,kBAAA,EAAkB,MAAA,CAAO,MAAA,GAAS,gBAAA,GAAmB,WAAA;AAAA,YACrD,IAAA,EAAK,WAAA;AAAA,YACL,YAAA,EAAY,YAAA,KAAiB,YAAA,GAAe,MAAA,GAAY,KAAA;AAAA,YACxD,iBAAA,EACE,YAAA,KAAiB,YAAA,GAAe,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,GAAW,MAAA;AAAA,YAElD,oBACE,YAAA,KAAiB,YAAA,IAAgB,IAAA,GAAO,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAAA,YAEzD,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,YACnC,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,YACnC,eAAA,EAAiB,WAAW,OAAA,GAAU,MAAA;AAAA,YACtC,UAAA,EAAW,OAAA;AAAA,YACX,SAAA;AAAA,YAEC,QAAA,EAAA,KAAA,CAAM,GAAA;AAAA,cAAI,CAAC,IAAA,KACV,IAAA,CAAK,IAAA,KAAS,MAAA,mBACZ,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,wBAAA,EAAsB,IAAA;AAAA,kBACtB,YAAA,EAAY,MAAA,CAAO,IAAA,CAAK,KAAA,CAAM,WAAW,CAAC,CAAA;AAAA,kBAEzC,QAAA,EAAA,IAAA,CAAK,KAAA,KAAU,MAAA,CAAO,MAAA,GAAS,QAAA,GAAW,EAAA;AAAA;AAAA,eAC7C,mBAEA,IAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAM,yBAAA;AAAA,kBACN,eAAA,EAAgB,OAAA;AAAA,kBAChB,gBAAA,EAAe,oBAAA;AAAA,kBACf,kBAAA,EAAkB,KAAK,KAAA,CAAM,KAAA;AAAA,kBAE7B,QAAA,EAAA;AAAA,oCAAA,GAAA;AAAA,sBAAC,QAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAK,QAAA;AAAA,wBACL,KAAA,EAAM,8BAAA;AAAA,wBACN,aAAA,EAAa,UAAA;AAAA,wBACb,kBAAA,EAAkB,KAAK,KAAA,CAAM,KAAA;AAAA,wBAC7B,cAAY,CAAA,KAAA,EAAQ,IAAA,CAAK,MAAM,eAAA,IAAmB,IAAA,CAAK,MAAM,KAAK,CAAA,CAAA;AAAA,wBAClE,QAAA;AAAA,wBAEC,eAAK,KAAA,CAAM;AAAA;AAAA,qBACd;AAAA,oCACA,GAAA;AAAA,sBAAC,QAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAK,QAAA;AAAA,wBACL,KAAA,EAAM,gCAAA;AAAA,wBACN,aAAA,EAAa,YAAA;AAAA,wBACb,kBAAA,EAAkB,KAAK,KAAA,CAAM,KAAA;AAAA,wBAC7B,cAAY,CAAA,OAAA,EAAU,IAAA,CAAK,MAAM,eAAA,IAAmB,IAAA,CAAK,MAAM,KAAK,CAAA,CAAA;AAAA,wBACpE,QAAA;AAAA,wBAEA,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb;AAAA;AAAA;AACF;AAEJ;AAAA,SACF;AAAA,QAAA,CACE,KAAA,IAAS,MAAA,CAAO,MAAA,GAAS,CAAA,qBACzB,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,yBAAA;AAAA,YACN,aAAA,EAAa,WAAA;AAAA,YACb,YAAA,EAAY,UAAA;AAAA,YACZ,KAAA,EAAO,UAAA;AAAA,YACP,QAAA;AAAA,YAEC,QAAA,EAAA,SAAA,wBAAc,SAAA,EAAA,EAAU;AAAA;AAAA,SAC3B;AAAA,QAED,cAAA,mBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,mCAAA;AAAA,YACN,IAAI,cAAA,CAAe,EAAA;AAAA,YACnB,eAAa,cAAA,CAAe,MAAA;AAAA,YAC5B,cAAY,cAAA,CAAe,KAAA;AAAA,YAC3B,OAAO,cAAA,CAAe,KAAA;AAAA,YACtB,QAAA;AAAA,YAEC,QAAA,EAAA,cAAA,CAAe;AAAA;AAAA,YAEhB,QAAA,mBACF,GAAA,CAAC,UAAK,KAAA,EAAM,4BAAA,EAA8B,oBAAS,CAAA,GACjD,IAAA;AAAA,QACH,CAAC,QAAA,IAAY,WAAA,CAAY,MAAA,GAAS,CAAA,oBACjC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,+BAAA;AAAA,YACN,6BAAA,EAA2B,IAAA;AAAA,YAE1B,QAAA,EAAA,WAAA,CAAY,GAAA,CAAI,CAAC,UAAA,qBAChB,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,KAAA,EAAM,8BAAA;AAAA,gBACN,gCAA8B,UAAA,CAAW,KAAA;AAAA,gBAExC,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,aAEf;AAAA;AAAA;AACH,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAEF,EAAA,IAAI,YAAA,KAAiB,cAAc,OAAO,OAAA;AAC1C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,wBAAA,EAA2B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnD,8BAAA,EAA8B,EAAA;AAAA,MAE9B,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,+BAAA;AAAA,YACN,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,YACT,8BAAA,EAA8B,EAAA;AAAA,YAE7B,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,OAAM,kCAAA,EAAmC,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAElE;AAAA;AAAA;AAAA,SAEJ;AAAA,QACC,OAAA;AAAA,QACA,IAAA,wBACE,KAAA,EAAA,EAAI,KAAA,EAAM,gCAA+B,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAChD,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAGO,SAAS,oBAAA,CACd,MAAA,EACA,WAAA,GAA2C,EAAC,EACrB;AACvB,EAAA,IAAI,KAAA,GAAQ,EAAA;AACZ,EAAA,MAAM,SAA6B,EAAC;AACpC,EAAA,MAAM,KAAA,GAAQ,CAAC,IAAA,KAAqB;AAClC,IAAA,IAAI,IAAA,CAAK,QAAA,KAAa,IAAA,CAAK,SAAA,EAAW;AACpC,MAAA,KAAA,IAAA,CAAU,IAAA,CAAK,eAAe,EAAA,EAC3B,UAAA,CAAW,QAAU,GAAG,CAAA,CACxB,UAAA,CAAW,QAAA,EAAU,EAAE,CAAA;AAC1B,MAAA;AAAA,IACF;AACA,IAAA,IAAI,EAAE,gBAAgB,WAAA,CAAA,EAAc;AACpC,IAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,uCAAuC,CAAA,EAAG;AACzD,MAAA,MAAM,KAAA,GAAQ,KAAK,OAAA,CAAQ,UAAA;AAC3B,MAAA,MAAM,QAAQ,WAAA,CAAY,IAAA,CAAK,CAAC,KAAA,KAAU,KAAA,CAAM,UAAU,KAAK,CAAA;AAC/D,MAAA,IAAI,KAAA,SAAc,IAAA,CAAK,EAAE,GAAG,KAAA,EAAO,MAAA,EAAQ,KAAA,CAAM,MAAA,EAAQ,CAAA;AAAA,WAAA,IAChD,KAAA;AACP,QAAA,MAAA,CAAO,IAAA,CAAK,EAAE,KAAA,EAAO,KAAA,EAAO,OAAO,MAAA,EAAQ,KAAA,CAAM,QAAQ,CAAA;AAC3D,MAAA;AAAA,IACF;AACA,IAAA,IAAI,IAAA,CAAK,YAAY,IAAA,EAAM;AACzB,MAAA,KAAA,IAAS,GAAA;AACT,MAAA;AAAA,IACF;AACA,IAAA,KAAA,MAAW,KAAA,IAAS,IAAA,CAAK,UAAA,EAAY,KAAA,CAAM,KAAK,CAAA;AAAA,EAClD,CAAA;AACA,EAAA,KAAA,MAAW,KAAA,IAAS,MAAA,CAAO,UAAA,EAAY,KAAA,CAAM,KAAK,CAAA;AAClD,EAAA,OAAO,EAAE,OAAO,MAAA,EAAO;AACzB;AAGO,SAAS,qBAAA,CACd,QACA,MAAA,EACM;AACN,EAAA,MAAA,CAAO,KAAA,CAAM,EAAE,aAAA,EAAe,IAAA,EAAM,CAAA;AACpC,EAAA,MAAM,SAAA,GAAY,WAAW,YAAA,EAAa;AAC1C,EAAA,IAAI,CAAC,SAAA,EAAW;AAChB,EAAA,MAAM,KAAA,GAAQ,SAAS,WAAA,EAAY;AACnC,EAAA,IAAI,WAAW,MAAA,EAAW;AACxB,IAAA,KAAA,CAAM,mBAAmB,MAAM,CAAA;AAC/B,IAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAAA,EACtB,CAAA,MAAO;AACL,IAAA,IAAI,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,MAAM,CAAA;AAClC,IAAA,IAAI,KAAA,GAAQ,KAAA;AACZ,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,gBAAA,CAAiB,MAAA,EAAQ,WAAW,SAAA,EAAW;AAAA,MACrE,UAAA,EAAY,CAAC,IAAA,KACX,IAAA,CAAK,aAAA,EAAe,QAAQ,uCAAuC,CAAA,GAC/D,UAAA,CAAW,aAAA,GACX,UAAA,CAAW;AAAA,KAClB,CAAA;AACD,IAAA,KAAA,IAAS,IAAA,GAAO,OAAO,QAAA,EAAS,EAAG,MAAM,IAAA,GAAO,MAAA,CAAO,UAAS,EAAG;AACjE,MAAA,MAAM,MAAA,GAAS,KAAK,WAAA,IAAe,EAAA;AACnC,MAAA,MAAM,MAAA,GAAS,MAAA,CAAO,UAAA,CAAW,QAAA,EAAU,EAAE,CAAA,CAAE,MAAA;AAC/C,MAAA,IAAI,aAAa,MAAA,EAAQ;AACvB,QAAA,KAAA,CAAM,QAAA;AAAA,UACJ,IAAA;AAAA,UACA,WAAW,QAAA,GAAW,CAAA,GAAI,KAAK,GAAA,CAAI,SAAA,EAAW,OAAO,MAAM;AAAA,SAC7D;AACA,QAAA,KAAA,CAAM,SAAS,IAAI,CAAA;AACnB,QAAA,KAAA,GAAQ,IAAA;AACR,QAAA;AAAA,MACF;AACA,MAAA,SAAA,IAAa,MAAA;AAAA,IACf;AACA,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,KAAA,CAAM,mBAAmB,MAAM,CAAA;AAC/B,MAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAAA,IACtB;AAAA,EACF;AACA,EAAA,SAAA,CAAU,eAAA,EAAgB;AAC1B,EAAA,SAAA,CAAU,SAAS,KAAK,CAAA;AAC1B","file":"chunk-VLGQIYZ5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { TokenSearchModel } from './model/token-search-model.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\nexport interface TokenSearchTrailingAction {\n  icon: SafeHtml;\n  label: string;\n  action: string;\n  id?: string;\n}\n\nexport type TokenSearchEditorAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip'?: never;\n    'data-token-search-editor'?: never;\n    'data-token-count'?: never;\n    'data-placeholder'?: never;\n  }\n>;\n\ninterface TokenSearchFieldBaseProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */\n  model?: TokenSearchModel;\n  /**\n   * Editor identity for a programmatic text replacement. The editor's text is\n   * DOM-owned between token changes, so a new `query` with the same tokens\n   * does not re-render it (that would reset the caret on every keystroke).\n   * Change `revision` when the app replaces the text itself — reseeding a\n   * persistent dialog's field on reopen, applying a saved search — and the\n   * editor is rebuilt from `query` and `tokens`.\n   */\n  revision?: string | number;\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  /** Let an expanded collapsible field consume the available inline width. */\n  fill?: boolean;\n  leading?: KerfUiContent;\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */\n  clearIcon?: SafeHtml;\n  className?: string;\n  editorAttributes?: TokenSearchEditorAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype TokenSearchTrailingProps =\n  | { trailing?: KerfUiContent; trailingAction?: never }\n  | { trailing?: never; trailingAction: TokenSearchTrailingAction };\n\ntype TokenSearchPresentationProps =\n  | {\n      /** Standalone field chrome or the inset visual layer of a configured toolbar group. */\n      presentation?: 'standalone' | 'toolbar-group';\n      hint?: never;\n      required?: never;\n    }\n  | {\n      /** Visible form label and optional hint around the full-width standalone control. */\n      presentation: 'form-field';\n      hint?: string;\n      /** Marks the editor required; the app validates its value. */\n      required?: boolean;\n    };\n\ntype TokenSearchCollapsibleProps =\n  | {\n      /** Allow an empty field to render as one iconic action. */\n      collapsible: true;\n      /** Keep an empty collapsible field open while the application owns focus. */\n      expanded?: boolean;\n      expandAction?: string;\n      expandLabel?: string;\n    }\n  | {\n      collapsible?: false;\n      expanded?: never;\n      expandAction?: never;\n      expandLabel?: never;\n    };\n\nexport type TokenSearchFieldProps = TokenSearchFieldBaseProps &\n  TokenSearchCollapsibleProps &\n  TokenSearchTrailingProps &\n  TokenSearchPresentationProps;\n\nexport interface TokenSearchFieldValue {\n  query: string;\n  tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n  { kind: 'text'; value: string } | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(\n  query: string,\n  tokens: readonly TokenSearchToken[],\n): TokenSearchPart[] {\n  const ordered = tokens\n    .map((token, index) => ({\n      token,\n      index,\n      offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)),\n    }))\n    .sort(\n      (left, right) => left.offset - right.offset || left.index - right.index,\n    );\n  const parts: TokenSearchPart[] = [];\n  let cursor = 0;\n  for (const { token, offset } of ordered) {\n    parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n    parts.push({ kind: 'token', token: { ...token, offset } });\n    cursor = offset;\n  }\n  parts.push({ kind: 'text', value: query.slice(cursor) });\n  return parts;\n}\n\nfunction CloseIcon() {\n  return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n  id,\n  label,\n  query = '',\n  tokens = [],\n  model,\n  revision,\n  placeholder = 'Search',\n  tokenPlaceholder = 'Add search…',\n  disabled = false,\n  autofocus = false,\n  fill = false,\n  collapsible = false,\n  expanded = false,\n  expandAction = 'expand-token-search',\n  expandLabel,\n  leading,\n  trailing,\n  trailingAction,\n  presentation = 'standalone',\n  hint,\n  required = false,\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear search',\n  clearIcon,\n  className = '',\n  editorAttributes = {},\n  slot,\n}: TokenSearchFieldProps) {\n  if (model) {\n    query = model.state.value.query;\n    tokens = model.state.value.tokens;\n  }\n  const suggestions = model?.suggestions.value ?? [];\n  const parts = orderedParts(query, tokens);\n  const tokenKey = tokens.map((token) => token.value).join('|');\n  const key = model\n    ? `${id}@${String(revision ?? '')}:${model.editorRevision.value}:${tokenKey}`\n    : revision === undefined\n      ? `${id}:${tokenKey}`\n      : `${id}@${String(revision)}:${tokenKey}`;\n  const resolvedExpanded =\n    !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  const control = (\n    <div\n      class={`kui-token-search ${presentation === 'form-field' ? '' : className}`.trim()}\n      data-component=\"token-search-field\"\n      data-token-search-id={id}\n      data-disabled={String(disabled)}\n      data-collapsible={String(collapsible)}\n      data-expanded={String(resolvedExpanded)}\n      data-fill={String(fill)}\n      data-has-trailing={String(Boolean(trailing || trailingAction))}\n      data-presentation={presentation}\n      data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n      data-placeholder-visible={String(\n        query.length === 0 && tokens.length === 0,\n      )}\n      slot={slot}\n    >\n      {!resolvedExpanded ? (\n        <button\n          type=\"button\"\n          class=\"kui-token-search__expand\"\n          data-action={expandAction}\n          aria-label={expandLabel ?? label}\n          title={expandLabel ?? label}\n          disabled={disabled}\n        >\n          <LucideIcon icon={Search} name=\"search\" />\n        </button>\n      ) : (\n        <>\n          <span class=\"kui-token-search__leading\" aria-hidden=\"true\">\n            {leading ?? <LucideIcon icon={Search} name=\"search\" />}\n          </span>\n          <div\n            {...editorAttributes}\n            class=\"kui-token-search__editor\"\n            data-key={key}\n            data-morph-skip\n            data-token-search-editor={id}\n            data-token-count={tokens.length}\n            data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n            role=\"searchbox\"\n            aria-label={presentation === 'form-field' ? undefined : label}\n            aria-labelledby={\n              presentation === 'form-field' ? `${id}-label` : undefined\n            }\n            aria-describedby={\n              presentation === 'form-field' && hint ? `${id}-hint` : undefined\n            }\n            aria-required={required ? 'true' : undefined}\n            aria-disabled={disabled ? 'true' : undefined}\n            contenteditable={disabled ? 'false' : 'true'}\n            spellcheck=\"false\"\n            autofocus={autofocus}\n          >\n            {parts.map((part) =>\n              part.kind === 'text' ? (\n                <span\n                  data-token-search-text\n                  data-empty={String(part.value.length === 0)}\n                >\n                  {part.value || (tokens.length ? '\\u200b' : '')}\n                </span>\n              ) : (\n                <span\n                  class=\"kui-token-search__token\"\n                  contenteditable=\"false\"\n                  data-component=\"token-search-token\"\n                  data-token-value={part.token.value}\n                >\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-edit\"\n                    data-action={editAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    {part.token.label}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-remove\"\n                    data-action={removeAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    <CloseIcon />\n                  </button>\n                </span>\n              ),\n            )}\n          </div>\n          {(query || tokens.length > 0) && (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__clear\"\n              data-action={clearAction}\n              aria-label={clearLabel}\n              title={clearLabel}\n              disabled={disabled}\n            >\n              {clearIcon ?? <CloseIcon />}\n            </button>\n          )}\n          {trailingAction ? (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__trailing-action\"\n              id={trailingAction.id}\n              data-action={trailingAction.action}\n              aria-label={trailingAction.label}\n              title={trailingAction.label}\n              disabled={disabled}\n            >\n              {trailingAction.icon}\n            </button>\n          ) : trailing ? (\n            <span class=\"kui-token-search__trailing\">{trailing}</span>\n          ) : null}\n          {!disabled && suggestions.length > 0 && (\n            <div\n              class=\"kui-token-search__suggestions\"\n              data-token-search-keep-open\n            >\n              {suggestions.map((suggestion) => (\n                <button\n                  type=\"button\"\n                  class=\"kui-token-search__suggestion\"\n                  data-token-search-suggestion={suggestion.value}\n                >\n                  {suggestion.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n  if (presentation !== 'form-field') return control;\n  return (\n    <div\n      class={`kui-token-search__field ${className}`.trim()}\n      data-token-search-form-field={id}\n    >\n      <div\n        class=\"kui-token-search__field-label\"\n        id={`${id}-label`}\n        data-token-search-form-label={id}\n      >\n        {label}\n        {required && (\n          <span class=\"kui-token-search__field-required\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </div>\n      {control}\n      {hint && (\n        <div class=\"kui-token-search__field-hint\" id={`${id}-hint`}>\n          {hint}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(\n  editor: HTMLElement,\n  knownTokens: readonly TokenSearchToken[] = [],\n): TokenSearchFieldValue {\n  let query = '';\n  const tokens: TokenSearchToken[] = [];\n  const visit = (node: Node): void => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      query += (node.textContent ?? '')\n        .replaceAll('\\u00a0', ' ')\n        .replaceAll('\\u200b', '');\n      return;\n    }\n    if (!(node instanceof HTMLElement)) return;\n    if (node.matches('[data-component=\"token-search-token\"]')) {\n      const value = node.dataset.tokenValue;\n      const known = knownTokens.find((token) => token.value === value);\n      if (known) tokens.push({ ...known, offset: query.length });\n      else if (value)\n        tokens.push({ value, label: value, offset: query.length });\n      return;\n    }\n    if (node.tagName === 'BR') {\n      query += ' ';\n      return;\n    }\n    for (const child of node.childNodes) visit(child);\n  };\n  for (const child of editor.childNodes) visit(child);\n  return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(\n  editor: HTMLElement,\n  offset?: number,\n): void {\n  editor.focus({ preventScroll: true });\n  const selection = globalThis.getSelection();\n  if (!selection) return;\n  const range = document.createRange();\n  if (offset === undefined) {\n    range.selectNodeContents(editor);\n    range.collapse(false);\n  } else {\n    let remaining = Math.max(0, offset);\n    let found = false;\n    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n      acceptNode: (node) =>\n        node.parentElement?.closest('[data-component=\"token-search-token\"]')\n          ? NodeFilter.FILTER_REJECT\n          : NodeFilter.FILTER_ACCEPT,\n    });\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      const source = node.textContent ?? '';\n      const length = source.replaceAll('\\u200b', '').length;\n      if (remaining <= length) {\n        range.setStart(\n          node,\n          source === '\\u200b' ? 0 : Math.min(remaining, source.length),\n        );\n        range.collapse(true);\n        found = true;\n        break;\n      }\n      remaining -= length;\n    }\n    if (!found) {\n      range.selectNodeContents(editor);\n      range.collapse(false);\n    }\n  }\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n"]}

package/dist/chunk-XK4E225T.js

@@ -0,0 +1,34 @@
+import { LoadingSpinner } from './chunk-YOKEL75M.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function EmptyState({
+  title,
+  detail,
+  icon,
+  action,
+  busy = false,
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-empty-state ${className}`.trim(),
+      "data-component": "empty-state",
+      "data-busy": String(busy),
+      role: "status",
+      "aria-busy": String(busy),
+      slot,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-empty-state__icon", children: busy ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : icon }),
+        /* @__PURE__ */ jsx("strong", { children: title }),
+        detail && /* @__PURE__ */ jsx("span", { children: detail }),
+        action && /* @__PURE__ */ jsx("div", { class: "kui-empty-state__action", children: action })
+      ]
+    }
+  );
+}
+
+export { EmptyState };
+
+//# sourceMappingURL=chunk-XK4E225T.js.map

package/dist/chunk-XK4E225T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/empty-state/empty-state.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,uBAAA,EACR,iCAAO,GAAA,CAAC,cAAA,EAAA,EAAe,IAAK,IAAA,EAC/B,CAAA;AAAA,wBACA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACd,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACxB,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D;AAEJ","file":"chunk-XK4E225T.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LoadingSpinner } from '../loading-spinner/loading-spinner.js';\n\nexport interface EmptyStateProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  busy?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function EmptyState({\n  title,\n  detail,\n  icon,\n  action,\n  busy = false,\n  className = '',\n  slot,\n}: EmptyStateProps) {\n  return (\n    <section\n      class={`kui-empty-state ${className}`.trim()}\n      data-component=\"empty-state\"\n      data-busy={String(busy)}\n      role=\"status\"\n      aria-busy={String(busy)}\n      slot={slot}\n    >\n      <div class=\"kui-empty-state__icon\">\n        {busy ? <LoadingSpinner /> : icon}\n      </div>\n      <strong>{title}</strong>\n      {detail && <span>{detail}</span>}\n      {action && <div class=\"kui-empty-state__action\">{action}</div>}\n    </section>\n  );\n}\n"]}