@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/chunk-M5KZ26VV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/pane/pane.tsx"],"names":[],"mappings":"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","file":"chunk-M5KZ26VV.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\n\n/**\n * Logical pane sides: where a {@link Pane} can show a separator and where it can\n * compensate for a device safe-area inset.\n */\nexport type PaneSeparatorSide =\n  'block-start' | 'block-end' | 'inline-start' | 'inline-end';\n\n/** Semantic root elements supported by {@link Pane}. */\nexport type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';\n\n/** Semantic elements supported by the scrolling content slot. */\nexport type PaneContentElement = 'div' | 'main' | 'nav' | 'section';\n\nconst paneProtectedAttributes = new Set([\n  'data-component',\n  'data-chrome-placement',\n  'data-chrome-dividers',\n  'data-appearance',\n  'data-background',\n  'data-kui-tint',\n  'data-kui-tint-accent',\n  'data-deep-inset',\n  'data-outlined',\n  'data-scroll-clearance',\n  'data-header-presentation',\n  'data-header-material',\n  'data-scroll-edge',\n  'data-scroll-edge-distance',\n  'data-header-overlay',\n  'data-separator-block-start',\n  'data-separator-block-end',\n  'data-separator-inline-start',\n  'data-separator-inline-end',\n  'data-safe-area-block-start',\n  'data-safe-area-block-end',\n  'data-safe-area-inline-start',\n  'data-safe-area-inline-end',\n]);\n\nconst allPaneSides: readonly PaneSeparatorSide[] = [\n  'block-start',\n  'block-end',\n  'inline-start',\n  'inline-end',\n];\n\ntype PaneRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-separator-block-start'?: never;\n    'data-separator-block-end'?: never;\n    'data-separator-inline-start'?: never;\n    'data-separator-inline-end'?: never;\n    'data-safe-area-block-start'?: never;\n    'data-safe-area-block-end'?: never;\n    'data-safe-area-inline-start'?: never;\n    'data-safe-area-inline-end'?: never;\n    'data-chrome-placement'?: never;\n    'data-chrome-dividers'?: never;\n    'data-appearance'?: never;\n    'data-background'?: never;\n    'data-kui-tint'?: never;\n    'data-kui-tint-accent'?: never;\n    'data-deep-inset'?: never;\n    'data-outlined'?: never;\n    'data-scroll-clearance'?: never;\n    'data-header-presentation'?: never;\n    'data-header-material'?: never;\n    'data-scroll-edge'?: never;\n    'data-scroll-edge-distance'?: never;\n    'data-header-overlay'?: never;\n  }\n>;\n\n/** How a Pane's header and footer relate to its scrolling content. */\nexport type PaneChromePlacement = 'fixed' | 'auto';\n\n/**\n * When a Pane draws the divider between its pinned header or footer and its\n * scrolling content: `scroll` while content is scrolled away beneath that\n * chrome, as `wireScrollDividers` reports; `always`; or `none`.\n */\nexport type PaneChromeDividers = 'scroll' | 'always' | 'none';\n\n/**\n * How a Pane's header relates to its scrolling content: `docked` in its own\n * row above the content, or `overlay` laid over the content's top edge on the\n * translucent chrome material, so content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type PaneHeaderPresentation = 'docked' | 'overlay' | 'clear';\n\n/** Background treatment of the Pane's scrolling work surface. */\nexport type PaneAppearance = 'default' | 'sunken';\n\nexport interface PaneProps {\n  /** Optional fixed chrome above the scrolling content, arranged vertically. */\n  header?: KerfUiContent;\n  /** The pane's primary vertical, scrolling content stack. */\n  children?: KerfUiContent;\n  /** Optional fixed chrome below the scrolling content. */\n  footer?: KerfUiContent;\n  /**\n   * Whether the header and footer stay pinned around the scrolling content.\n   * `fixed` (default) always pins them. `auto` pins them while the pane is\n   * tall enough, and below 480px of height (30rem, so it scales with the text\n   * size) lets the whole pane scroll as one column, so tall chrome can never\n   * squeeze the content to nothing.\n   */\n  chromePlacement?: PaneChromePlacement;\n  /**\n   * The divider under the header and over the footer, where they meet the\n   * scrolling content. Omitted defaults to `scroll` for a plain pane and\n   * `always` for `appearance=\"sunken\"`. `scroll` shows the header's divider only\n   * while the content is scrolled down, and the footer's only while more\n   * content lies below — never when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane; unwired, neither shows. `always` shows both; `none` neither.\n   * The line is drawn inside the chrome, so no state moves the content.\n   */\n  chromeDividers?: PaneChromeDividers;\n  /**\n   * `docked` (default) gives the header its own row above the scrolling\n   * content. `overlay` lays the header over the content's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, forced colors, or without\n   * `backdrop-filter`), so content scrolls visibly beneath it. Once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane it measures the header and publishes its height as the\n   * `--kui-scroll-clearance-block-start` context, which the content adds to\n   * its block-start padding and `scroll-padding` without any\n   * `scrollClearance` prop, so the first item, and anything focused or\n   * scrolled into view, rests clear of the header. Until then, and with\n   * `chromePlacement=\"auto\"`, the header stays docked. Keep overlay header\n   * text in the normal text color: quiet text can fall below AA over the\n   * content passing beneath it.\n   */\n  headerPresentation?: PaneHeaderPresentation;\n  /**\n   * With `headerPresentation=\"clear\"`, `material` fades the chrome material\n   * in behind the header once content scrolls beneath it (default `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /** Paint the scrolling work surface with the shared lowered-surface color. */\n  appearance?: PaneAppearance;\n  /**\n   * Paint the whole pane, header and footer included, in an app-chosen color\n   * (`uiColor('surface-raised')`, `fillColor('#1f2a44')`, or `colorVar(…)`\n   * from `@kerfjs/ui/css-values`). It replaces the appearance's fill: a sunken\n   * pane drops its lowered color and grain. Omitted, the pane keeps its\n   * default (transparent, or the sunken surface). Forced colors paint\n   * `Canvas`. Keep text at AA over the color; a dark color needs a matching\n   * tint or dark tones for its content.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint: `{ color, scheme }`, the app's color and the scheme it\n   * belongs to. The pane paints the tinted surface (unless `background` is\n   * set) and its whole subtree, chrome material and quiet fills included,\n   * re-derives its surface and text tokens from the color with lightness\n   * clamped to keep text at WCAG AA. Without relative color syntax, or under\n   * `prefers-contrast: more`, the scope keeps the plain palette in the\n   * declared scheme.\n   */\n  tint?: SurfaceTint;\n  /**\n   * Clear chrome that lies over the scrolling content's block-start and/or\n   * block-end edge, such as a `DialogSurface` floating footer over a filling\n   * Pane. The content scroller adds the inherited\n   * `--kui-scroll-clearance-block-*` context that chrome publishes to its block\n   * padding and `scroll-padding`, so content scrolls visibly beneath the chrome\n   * while its first and last items (and anything focused or scrolled into\n   * view) can still rest clear of it. Defaults to none.\n   */\n  scrollClearance?: ScrollClearance;\n  /** Add 8px to every side of scrolling content (default: false). */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the Pane root. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  /** Root semantics. Defaults to `div`. */\n  element?: PaneElement;\n  /** Scrolling content semantics. Defaults to `div`. */\n  contentElement?: PaneContentElement;\n  /** Independent logical-edge separator lines. Defaults to none. */\n  separators?: readonly PaneSeparatorSide[];\n  /**\n   * Sides on which the pane may compensate for a device safe-area inset.\n   * Defaults to every side: the pane pads its slots for each side that still\n   * reaches an unsafe screen edge, as its surrounding layout reports, while its\n   * background and separators paint through. List only the sides an app-owned\n   * layout places at a screen edge, or pass `[]` to opt out.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  id?: string;\n  /** Accessible name for a landmark root such as `aside` or `main`. */\n  label?: string;\n  /** Accessible name for a landmark scrolling slot such as `nav`. */\n  contentLabel?: string;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */\n  rootAttributes?: PaneRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A pane's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `Pane` for the app (a Workbench panel or work area,\n * or a CollapsiblePanel) forwards, so the app configures that pane instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type PaneConfig = Pick<\n  PaneProps,\n  | 'contentElement'\n  | 'contentLabel'\n  | 'separators'\n  | 'safeAreaEdges'\n  | 'chromeDividers'\n  | 'headerPresentation'\n  | 'scrollEdge'\n  | 'scrollEdgeDistance'\n  | 'appearance'\n  | 'background'\n  | 'tint'\n  | 'deepInset'\n  | 'scrollClearance'\n  | 'tabIndex'\n  | 'outlined'\n>;\n\nfunction paneContent(\n  element: PaneContentElement,\n  children: KerfUiContent,\n  className: string,\n  label: string | undefined,\n) {\n  const attributes = {\n    class: `kui-pane__content kui-content ${className}`.trim(),\n    'aria-label': label,\n  };\n  if (element === 'main') return <main {...attributes}>{children}</main>;\n  if (element === 'nav') return <nav {...attributes}>{children}</nav>;\n  if (element === 'section')\n    return <section {...attributes}>{children}</section>;\n  return <div {...attributes}>{children}</div>;\n}\n\n/**\n * An unpadded application column with optional fixed header/footer slots and one\n * scrolling vertical content owner. Separator lines are independently opt-in on\n * each logical edge, so the same component works as a sidebar, main area,\n * inspector, or dialog column.\n */\nexport function Pane({\n  header,\n  children,\n  footer,\n  chromePlacement = 'fixed',\n  chromeDividers,\n  headerPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  appearance = 'default',\n  background,\n  tint,\n  deepInset = false,\n  scrollClearance,\n  tabIndex,\n  outlined = false,\n  element = 'div',\n  contentElement = 'div',\n  separators = [],\n  safeAreaEdges = allPaneSides,\n  id,\n  label,\n  contentLabel,\n  className = '',\n  headerClassName = '',\n  contentClassName = '',\n  footerClassName = '',\n  rootAttributes = {},\n  slot,\n}: PaneProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    paneProtectedAttributes,\n  );\n  const content = paneContent(\n    contentElement,\n    children,\n    contentClassName,\n    contentLabel,\n  );\n  const resolvedChromeDividers =\n    chromeDividers ?? (appearance === 'sunken' ? 'always' : 'scroll');\n  if (appearance === 'sunken' && background === undefined)\n    ensureSunkenTexture();\n  const tinted = surfaceTintAttributes(tint);\n  const clearHeader = headerPresentation === 'clear' && header !== undefined;\n  const body = (\n    <>\n      {header === undefined ? null : (\n        <header\n          class={`kui-pane__header kui-pane__toolbar ${headerClassName}`.trim()}\n        >\n          {header}\n        </header>\n      )}\n      {content}\n      {footer === undefined ? null : (\n        <footer class={`kui-pane__footer ${footerClassName}`.trim()}>\n          {footer}\n        </footer>\n      )}\n    </>\n  );\n  const attributes = {\n    ...safeRootAttributes,\n    class: `kui-pane ${tinted.className} ${className}`\n      .replace(/\\s+/g, ' ')\n      .trim(),\n    id,\n    'data-component': 'pane',\n    'data-appearance': appearance === 'sunken' ? 'sunken' : undefined,\n    'data-background': background === undefined ? undefined : '',\n    'data-kui-tint': tinted['data-kui-tint'],\n    'data-kui-tint-accent': tinted['data-kui-tint-accent'],\n    style: joinStyles(\n      background === undefined\n        ? undefined\n        : `--_kui-pane-background:${background}`,\n      tinted.style,\n    ),\n    'data-deep-inset': deepInset ? 'true' : undefined,\n    'data-outlined': outlined ? 'true' : undefined,\n    'data-scroll-clearance': scrollClearance,\n    'data-header-presentation':\n      headerPresentation !== 'docked' && header !== undefined\n        ? 'overlay'\n        : undefined,\n    'data-header-material': clearHeader ? 'clear' : undefined,\n    ...scrollEdgeAttributes(scrollEdge, scrollEdgeDistance, clearHeader),\n    'data-chrome-placement': chromePlacement === 'auto' ? 'auto' : undefined,\n    'data-chrome-dividers':\n      resolvedChromeDividers === 'always' || resolvedChromeDividers === 'none'\n        ? resolvedChromeDividers\n        : undefined,\n    'data-separator-block-start': String(separators.includes('block-start')),\n    'data-separator-block-end': String(separators.includes('block-end')),\n    'data-separator-inline-start': String(separators.includes('inline-start')),\n    'data-separator-inline-end': String(separators.includes('inline-end')),\n    'data-safe-area-block-start': String(safeAreaEdges.includes('block-start')),\n    'data-safe-area-block-end': String(safeAreaEdges.includes('block-end')),\n    'data-safe-area-inline-start': String(\n      safeAreaEdges.includes('inline-start'),\n    ),\n    'data-safe-area-inline-end': String(safeAreaEdges.includes('inline-end')),\n    'aria-label': label,\n    tabindex: tabIndex,\n    slot,\n  };\n\n  if (element === 'article') return <article {...attributes}>{body}</article>;\n  if (element === 'aside') return <aside {...attributes}>{body}</aside>;\n  if (element === 'main') return <main {...attributes}>{body}</main>;\n  if (element === 'section') return <section {...attributes}>{body}</section>;\n  return <div {...attributes}>{body}</div>;\n}\n\nexport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nexport type { ScrollEdge } from '../../../shared/layout/scroll-edge.js';\nexport type {\n  SurfaceTint,\n  SurfaceTintScheme,\n} from '../../../shared/styles/surface-tint.js';\n"]}

package/dist/chunk-MF6ZUUJZ.js

@@ -0,0 +1,300 @@
+import { LucideIcon } from './chunk-LOSRXZAH.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",
+          {
+            ...trailingAction.attributes,
+            type: "button",
+            class: "kui-token-search__trailing-action",
+            id: trailingAction.id,
+            "data-action": trailingAction.action,
+            "aria-label": trailingAction.label,
+            "aria-expanded": trailingAction.expanded === void 0 ? void 0 : String(trailingAction.expanded),
+            "aria-pressed": trailingAction.pressed === void 0 ? void 0 : String(trailingAction.pressed),
+            "aria-controls": trailingAction.controls,
+            "aria-haspopup": trailingAction.haspopup,
+            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-MF6ZUUJZ.js.map

package/dist/chunk-MF6ZUUJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/token-search-field/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-MF6ZUUJZ.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\n/**\n * Domain `data-*` metadata for a trailing action button. The component owns\n * `data-action` (pass `action`) and its state attributes.\n */\nexport type TokenSearchTrailingActionAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-component'?: never;\n    'data-key'?: never;\n  }\n>;\n\ninterface TokenSearchTrailingActionBase {\n  /** Decorative glyph, such as a `LucideIcon`. */\n  icon: SafeHtml;\n  /** Accessible name and tooltip, in title style (\"Search Help\"). */\n  label: string;\n  /** Delegated `data-action` value. */\n  action: string;\n  id?: string;\n  /** `aria-controls`: the id of the surface this button opens or toggles. */\n  controls?: string;\n  /** `aria-haspopup` for a button that opens a dialog, menu, or listbox. */\n  haspopup?: 'dialog' | 'menu' | 'listbox' | 'true';\n  /** Domain `data-*` metadata for the app's delegated handler. */\n  attributes?: TokenSearchTrailingActionAttributes;\n}\n\n/**\n * A compact icon button in the field's trailing slot, sized and styled like\n * the clear button. Pass `expanded` for a disclosure (a help surface it opens)\n * or `pressed` for a toggle; the button shows the state with its hover fill.\n */\nexport type TokenSearchTrailingAction = TokenSearchTrailingActionBase &\n  (\n    | { expanded?: boolean; pressed?: never }\n    | { expanded?: never; pressed?: boolean }\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              {...trailingAction.attributes}\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              aria-expanded={\n                trailingAction.expanded === undefined\n                  ? undefined\n                  : String(trailingAction.expanded)\n              }\n              aria-pressed={\n                trailingAction.pressed === undefined\n                  ? undefined\n                  : String(trailingAction.pressed)\n              }\n              aria-controls={trailingAction.controls}\n              aria-haspopup={trailingAction.haspopup}\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-MHMWQ7RB.js

@@ -0,0 +1,19 @@
+import { space } from './chunk-IQSRHXZR.js';
+
+// src/shared/layout/gap.ts
+var spaceNames = [
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl"
+];
+function gapLength(value) {
+  return spaceNames.includes(value) ? space(value) : value;
+}
+
+export { gapLength };
+
+//# sourceMappingURL=chunk-MHMWQ7RB.js.map

package/dist/chunk-MHMWQ7RB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/layout/gap.ts"],"names":[],"mappings":";;;AAMA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAGO,SAAS,UAAU,KAAA,EAA2B;AACnD,EAAA,OAAO,WAAW,QAAA,CAAS,KAAoB,CAAA,GAC3C,KAAA,CAAM,KAAoB,CAAA,GAC1B,KAAA;AACN","file":"chunk-MHMWQ7RB.js","sourcesContent":["import {\n  space,\n  type UiGapValue,\n  type UiSpaceName,\n} from '../styles/css-values.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\n/** Resolve a public spacing name while preserving a complete typed CSS length. */\nexport function gapLength(value: UiGapValue): string {\n  return spaceNames.includes(value as UiSpaceName)\n    ? space(value as UiSpaceName)\n    : value;\n}\n"]}

package/dist/chunk-MJ5RU6XT.js

@@ -0,0 +1,173 @@
+// src/wiring/wire-list-reorder.ts
+var ROW = '[data-component="list-item"], [data-component="list-item-link"], [data-component="list-action-row"]';
+var LIST = '[data-component="list"]';
+var DRAG_TYPE = "application/x-kerf-list-items";
+function reorderListItems(items, getId, sourceIds, target) {
+  const moving = new Set(sourceIds);
+  if (moving.has(target.id)) return [...items];
+  const moved = items.filter((item) => moving.has(getId(item)));
+  const remaining = items.filter((item) => !moving.has(getId(item)));
+  const index = remaining.findIndex((item) => getId(item) === target.id);
+  if (!moved.length || index < 0) return [...items];
+  remaining.splice(index + (target.position === "after" ? 1 : 0), 0, ...moved);
+  return remaining;
+}
+function rowOf(target) {
+  return target instanceof Element ? target.closest(ROW) ?? void 0 : void 0;
+}
+function reorderable(row) {
+  return row.getAttribute("draggable") === "true" && Boolean(row.dataset.itemId);
+}
+function scopeOf(row) {
+  return row.closest(LIST) ?? row.parentElement ?? void 0;
+}
+function rowsIn(scope) {
+  return [...scope.querySelectorAll(ROW)].filter(
+    (row) => reorderable(row) && scopeOf(row) === scope
+  );
+}
+function selected(row) {
+  if (row.dataset.component === "list-action-row")
+    return row.dataset.selected === "true" || row.dataset.pressed === "true";
+  return row.getAttribute("aria-current") === "page" || row.getAttribute("aria-pressed") === "true";
+}
+function sourcesFor(row, rows) {
+  return selected(row) ? rows.filter(selected) : [row];
+}
+function positionFor(event, row) {
+  const bounds = row.getBoundingClientRect();
+  return event.clientY < bounds.top + bounds.height / 2 ? "before" : "after";
+}
+function focusTarget(row) {
+  return row.querySelector(":scope > .kui-list-action-row__primary") ?? row;
+}
+function wireListReorder(root, { onReorder }) {
+  let disposed = false;
+  let dragged;
+  const clearDropPositions = () => root.querySelectorAll(`:is(${ROW})[data-drop-position]`).forEach((row) => delete row.dataset.dropPosition);
+  const clear = () => {
+    dragged = void 0;
+    root.querySelectorAll(
+      `:is(${ROW}):is([data-dragging], [data-drop-position])`
+    ).forEach((row) => {
+      delete row.dataset.dragging;
+      delete row.dataset.dropPosition;
+    });
+  };
+  const report = (scope, change) => {
+    const listId = scope.dataset.listId;
+    onReorder(listId ? { listId, ...change } : change);
+  };
+  const view = (root.nodeType === 9 ? root : root.ownerDocument).defaultView;
+  const refocus = (listId, itemId) => {
+    const restore = () => {
+      if (disposed) return;
+      const row = [...root.querySelectorAll(ROW)].find(
+        (candidate) => candidate.dataset.itemId === itemId && scopeOf(candidate)?.dataset.listId === listId
+      );
+      if (!row) return;
+      const target = focusTarget(row);
+      if (target.ownerDocument.activeElement === target) return;
+      target.focus();
+      target.scrollIntoView({ block: "nearest", inline: "nearest" });
+    };
+    globalThis.queueMicrotask(restore);
+    view.requestAnimationFrame(restore);
+  };
+  const onDragStart = (event) => {
+    const dragEvent = event;
+    const row = rowOf(event.target);
+    const scope = row && scopeOf(row);
+    if (!row || !scope || !reorderable(row)) return;
+    const sources = sourcesFor(row, rowsIn(scope));
+    const sourceIds = sources.map((source) => source.dataset.itemId);
+    dragged = { scope, sourceIds };
+    for (const source of sources) source.dataset.dragging = "true";
+    if (dragEvent.dataTransfer) {
+      dragEvent.dataTransfer.effectAllowed = "move";
+      dragEvent.dataTransfer.setData(DRAG_TYPE, sourceIds.join("\n"));
+    }
+  };
+  const dropRow = (event) => {
+    const row = rowOf(event.target);
+    if (!dragged || !row || !reorderable(row) || scopeOf(row) !== dragged.scope || dragged.sourceIds.includes(row.dataset.itemId))
+      return void 0;
+    return row;
+  };
+  const onDragOver = (event) => {
+    if (!dragged) return;
+    const dragEvent = event;
+    const row = dropRow(event);
+    clearDropPositions();
+    if (!row) return;
+    dragEvent.preventDefault();
+    row.dataset.dropPosition = positionFor(dragEvent, row);
+    if (dragEvent.dataTransfer) dragEvent.dataTransfer.dropEffect = "move";
+  };
+  const onDrop = (event) => {
+    const current = dragged;
+    const row = dropRow(event);
+    if (!current || !row) {
+      clear();
+      return;
+    }
+    event.preventDefault();
+    const target = {
+      id: row.dataset.itemId,
+      position: positionFor(event, row)
+    };
+    clear();
+    report(current.scope, {
+      sourceIds: current.sourceIds,
+      target,
+      source: "pointer"
+    });
+  };
+  const onKeyDown = (event) => {
+    const keyboardEvent = event;
+    if (!keyboardEvent.altKey || !keyboardEvent.shiftKey || keyboardEvent.ctrlKey || keyboardEvent.metaKey || keyboardEvent.key !== "ArrowUp" && keyboardEvent.key !== "ArrowDown")
+      return;
+    const row = rowOf(event.target);
+    const scope = row && scopeOf(row);
+    if (!row || !scope || !reorderable(row)) return;
+    const rows = rowsIn(scope);
+    const sources = sourcesFor(row, rows);
+    const up = keyboardEvent.key === "ArrowUp";
+    const edge = rows.indexOf(up ? sources[0] : sources.at(-1));
+    const neighbors = up ? rows.slice(0, edge).reverse() : rows.slice(edge + 1);
+    const neighbor = neighbors.find(
+      (candidate) => !sources.includes(candidate)
+    );
+    if (!neighbor) return;
+    keyboardEvent.preventDefault();
+    const listId = scope.dataset.listId;
+    const focusedId = row.dataset.itemId;
+    report(scope, {
+      sourceIds: sources.map((source) => source.dataset.itemId),
+      target: {
+        id: neighbor.dataset.itemId,
+        position: up ? "before" : "after"
+      },
+      source: "keyboard"
+    });
+    refocus(listId, focusedId);
+  };
+  root.addEventListener("dragstart", onDragStart);
+  root.addEventListener("dragover", onDragOver);
+  root.addEventListener("drop", onDrop);
+  root.addEventListener("dragend", clear);
+  root.addEventListener("keydown", onKeyDown);
+  return () => {
+    disposed = true;
+    clear();
+    root.removeEventListener("dragstart", onDragStart);
+    root.removeEventListener("dragover", onDragOver);
+    root.removeEventListener("drop", onDrop);
+    root.removeEventListener("dragend", clear);
+    root.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+export { reorderListItems, wireListReorder };
+
+//# sourceMappingURL=chunk-MJ5RU6XT.js.map

package/dist/chunk-MJ5RU6XT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wiring/wire-list-reorder.ts"],"names":[],"mappings":"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","file":"chunk-MJ5RU6XT.js","sourcesContent":["/** Which edge of the target row the moved rows land beside. */\nexport type ListDropPosition = 'before' | 'after';\n\n/** How the person asked for the move. */\nexport type ListReorderSource = 'pointer' | 'keyboard';\n\n/** The row the moved rows land beside, and on which side of it. */\nexport interface ListReorderTarget {\n  id: string;\n  position: ListDropPosition;\n}\n\n/** One requested reorder. The application applies it to its own ordered state. */\nexport interface ListReorder {\n  /** The containing list's `data-list-id`, when it has one. */\n  listId?: string;\n  /** The moved rows' `itemId`s, in their current order. */\n  sourceIds: string[];\n  target: ListReorderTarget;\n  source: ListReorderSource;\n}\n\nexport interface WireListReorderOptions {\n  /** Apply the change synchronously (for example with `reorderListItems`) and re-render. */\n  onReorder: (change: ListReorder) => void;\n}\n\nconst ROW =\n  '[data-component=\"list-item\"], [data-component=\"list-item-link\"], [data-component=\"list-action-row\"]';\nconst LIST = '[data-component=\"list\"]';\nconst DRAG_TYPE = 'application/x-kerf-list-items';\n\n/**\n * Move `sourceIds` (kept in their current relative order) to `target`'s side\n * of the target row. Returns a new array; an unknown target, a target that is\n * itself being moved, or no known sources leave the order unchanged.\n */\nexport function reorderListItems<T>(\n  items: readonly T[],\n  getId: (item: T) => string,\n  sourceIds: readonly string[],\n  target: ListReorderTarget,\n): T[] {\n  const moving = new Set(sourceIds);\n  if (moving.has(target.id)) return [...items];\n  const moved = items.filter((item) => moving.has(getId(item)));\n  const remaining = items.filter((item) => !moving.has(getId(item)));\n  const index = remaining.findIndex((item) => getId(item) === target.id);\n  if (!moved.length || index < 0) return [...items];\n  remaining.splice(index + (target.position === 'after' ? 1 : 0), 0, ...moved);\n  return remaining;\n}\n\nfunction rowOf(target: EventTarget | null): HTMLElement | undefined {\n  return target instanceof Element\n    ? (target.closest<HTMLElement>(ROW) ?? undefined)\n    : undefined;\n}\n\nfunction reorderable(row: HTMLElement): boolean {\n  return (\n    row.getAttribute('draggable') === 'true' && Boolean(row.dataset.itemId)\n  );\n}\n\n/** The list a row reorders within: its List, or its parent element. */\nfunction scopeOf(row: HTMLElement): HTMLElement | undefined {\n  return row.closest<HTMLElement>(LIST) ?? row.parentElement ?? undefined;\n}\n\nfunction rowsIn(scope: HTMLElement): HTMLElement[] {\n  return [...scope.querySelectorAll<HTMLElement>(ROW)].filter(\n    (row) => reorderable(row) && scopeOf(row) === scope,\n  );\n}\n\nfunction selected(row: HTMLElement): boolean {\n  if (row.dataset.component === 'list-action-row')\n    return row.dataset.selected === 'true' || row.dataset.pressed === 'true';\n  return (\n    row.getAttribute('aria-current') === 'page' ||\n    row.getAttribute('aria-pressed') === 'true'\n  );\n}\n\n/** A selected row carries every selected row of its list; any other row moves alone. */\nfunction sourcesFor(row: HTMLElement, rows: readonly HTMLElement[]) {\n  return selected(row) ? rows.filter(selected) : [row];\n}\n\nfunction positionFor(event: DragEvent, row: HTMLElement): ListDropPosition {\n  const bounds = row.getBoundingClientRect();\n  return event.clientY < bounds.top + bounds.height / 2 ? 'before' : 'after';\n}\n\nfunction focusTarget(row: HTMLElement): HTMLElement {\n  return (\n    row.querySelector<HTMLElement>(':scope > .kui-list-action-row__primary') ??\n    row\n  );\n}\n\n/**\n * Wire native drag-and-drop and Alt+Shift+ArrowUp/ArrowDown reordering for\n * draggable `ListItem`, `ListItemLink`, and `ListActionRow` rows below `root`.\n * Rows reorder within their `List` (or parent element) and are identified by\n * `itemId`. Dragging a selected or pressed row moves every selected row of\n * its list. While a pointer drag is in progress the wiring paints the same\n * `data-dragging` / `data-drop-position` attributes the rows' `dragging` and\n * `dropPosition` props render. Order stays application state: `onReorder`\n * reports the change and the application re-renders. Returns a disposer.\n */\nexport function wireListReorder(\n  root: HTMLElement | Document,\n  { onReorder }: WireListReorderOptions,\n): () => void {\n  let disposed = false;\n  let dragged: { scope: HTMLElement; sourceIds: string[] } | undefined;\n\n  const clearDropPositions = () =>\n    root\n      .querySelectorAll<HTMLElement>(`:is(${ROW})[data-drop-position]`)\n      .forEach((row) => delete row.dataset.dropPosition);\n  const clear = () => {\n    dragged = undefined;\n    root\n      .querySelectorAll<HTMLElement>(\n        `:is(${ROW}):is([data-dragging], [data-drop-position])`,\n      )\n      .forEach((row) => {\n        delete row.dataset.dragging;\n        delete row.dataset.dropPosition;\n      });\n  };\n  const report = (scope: HTMLElement, change: Omit<ListReorder, 'listId'>) => {\n    const listId = scope.dataset.listId;\n    onReorder(listId ? { listId, ...change } : change);\n  };\n  const view = (root.nodeType === 9 ? (root as Document) : root.ownerDocument)!\n    .defaultView!;\n  /**\n   * Return focus to the moved row by identity. An unkeyed re-render morphs\n   * rows in place, so the focused element can come to hold a different row;\n   * a render may also land after a microtask (a scheduled effect). Check once\n   * after the synchronous render and again before the next frame.\n   */\n  const refocus = (listId: string | undefined, itemId: string) => {\n    const restore = () => {\n      if (disposed) return;\n      const row = [...root.querySelectorAll<HTMLElement>(ROW)].find(\n        (candidate) =>\n          candidate.dataset.itemId === itemId &&\n          scopeOf(candidate)?.dataset.listId === listId,\n      );\n      if (!row) return;\n      const target = focusTarget(row);\n      if (target.ownerDocument.activeElement === target) return;\n      target.focus();\n      target.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    };\n    globalThis.queueMicrotask(restore);\n    view.requestAnimationFrame(restore);\n  };\n\n  const onDragStart = (event: Event) => {\n    const dragEvent = event as DragEvent;\n    const row = rowOf(event.target);\n    const scope = row && scopeOf(row);\n    if (!row || !scope || !reorderable(row)) return;\n    const sources = sourcesFor(row, rowsIn(scope));\n    const sourceIds = sources.map((source) => source.dataset.itemId!);\n    dragged = { scope, sourceIds };\n    for (const source of sources) source.dataset.dragging = 'true';\n    if (dragEvent.dataTransfer) {\n      dragEvent.dataTransfer.effectAllowed = 'move';\n      dragEvent.dataTransfer.setData(DRAG_TYPE, sourceIds.join('\\n'));\n    }\n  };\n  /** The row under a drag event that the dragged rows may land beside. */\n  const dropRow = (event: Event) => {\n    const row = rowOf(event.target);\n    if (\n      !dragged ||\n      !row ||\n      !reorderable(row) ||\n      scopeOf(row) !== dragged.scope ||\n      dragged.sourceIds.includes(row.dataset.itemId!)\n    )\n      return undefined;\n    return row;\n  };\n  const onDragOver = (event: Event) => {\n    if (!dragged) return;\n    const dragEvent = event as DragEvent;\n    const row = dropRow(event);\n    clearDropPositions();\n    if (!row) return;\n    dragEvent.preventDefault();\n    row.dataset.dropPosition = positionFor(dragEvent, row);\n    if (dragEvent.dataTransfer) dragEvent.dataTransfer.dropEffect = 'move';\n  };\n  const onDrop = (event: Event) => {\n    const current = dragged;\n    const row = dropRow(event);\n    if (!current || !row) {\n      clear();\n      return;\n    }\n    event.preventDefault();\n    const target: ListReorderTarget = {\n      id: row.dataset.itemId!,\n      position: positionFor(event as DragEvent, row),\n    };\n    clear();\n    report(current.scope, {\n      sourceIds: current.sourceIds,\n      target,\n      source: 'pointer',\n    });\n  };\n  const onKeyDown = (event: Event) => {\n    const keyboardEvent = event as KeyboardEvent;\n    if (\n      !keyboardEvent.altKey ||\n      !keyboardEvent.shiftKey ||\n      keyboardEvent.ctrlKey ||\n      keyboardEvent.metaKey ||\n      (keyboardEvent.key !== 'ArrowUp' && keyboardEvent.key !== 'ArrowDown')\n    )\n      return;\n    const row = rowOf(event.target);\n    const scope = row && scopeOf(row);\n    if (!row || !scope || !reorderable(row)) return;\n    const rows = rowsIn(scope);\n    const sources = sourcesFor(row, rows);\n    const up = keyboardEvent.key === 'ArrowUp';\n    const edge = rows.indexOf(up ? sources[0]! : sources.at(-1)!);\n    const neighbors = up ? rows.slice(0, edge).reverse() : rows.slice(edge + 1);\n    const neighbor = neighbors.find(\n      (candidate) => !sources.includes(candidate),\n    );\n    if (!neighbor) return;\n    keyboardEvent.preventDefault();\n    // Read identity before reporting: a synchronous controlled render can\n    // morph these very elements into other rows.\n    const listId = scope.dataset.listId;\n    const focusedId = row.dataset.itemId!;\n    report(scope, {\n      sourceIds: sources.map((source) => source.dataset.itemId!),\n      target: {\n        id: neighbor.dataset.itemId!,\n        position: up ? 'before' : 'after',\n      },\n      source: 'keyboard',\n    });\n    refocus(listId, focusedId);\n  };\n\n  root.addEventListener('dragstart', onDragStart);\n  root.addEventListener('dragover', onDragOver);\n  root.addEventListener('drop', onDrop);\n  root.addEventListener('dragend', clear);\n  root.addEventListener('keydown', onKeyDown);\n  return () => {\n    disposed = true;\n    clear();\n    root.removeEventListener('dragstart', onDragStart);\n    root.removeEventListener('dragover', onDragOver);\n    root.removeEventListener('drop', onDrop);\n    root.removeEventListener('dragend', clear);\n    root.removeEventListener('keydown', onKeyDown);\n  };\n}\n"]}