@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

package/ux-demo/recipes/navigation-sidebar.tsx

@@ -1,26 +1,152 @@
 import '@kerfjs/ui/layout.css';
-import './recipes.css';
 
+import { ContentItem } from '@kerfjs/ui/content-item';
+import { List } from '@kerfjs/ui/list';
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
+import { Pane } from '@kerfjs/ui/pane';
+import { Text } from '@kerfjs/ui/text';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { signal } from 'kerfjs';
 import { Folder, Inbox, Plus, Settings, Users } from 'lucide';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'compact',
+    minHeight: 'medium',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.',
+};
 
 export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal('inbox');
   const expanded = signal(true);
-  const render = () => <aside class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane" data-recipe="recipe-navigation-sidebar">
-    <div class="recipe-sidebar__body kui-pane__content kui-content">
-      <section><MenuHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><MenuItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><MenuItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><MenuItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
-      <section><MenuHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><MenuItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><MenuItem action="recipe-action" itemId="archive" label="Archived" disabled title="Available to administrators" /><div class="kui-content-item"><strong>Quarterly goal</strong><p class="kui-recipe__muted">Ship accessible navigation patterns to every workspace.</p></div></>}</section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.</p>
-    </div>
-    <footer class="recipe-sidebar__footer kui-pane__footer"><Toolbar label="Sidebar actions" divider={false} leading={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Add project" data-action="recipe-action" data-recipe-command="add"><LucideIcon icon={Plus} name="plus" /></button></ToolbarControlGroup>} trailing={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Workspace settings" data-action="recipe-action" data-recipe-command="settings"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup>} /></footer>
-  </aside>;
-  return { render, action(command, element) { if (element.matches('.kui-menu-header__toggle')) { expanded.value = !expanded.value; announce(expanded.value ? 'Projects expanded' : 'Projects collapsed'); return; } const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Selected ${id}` : `${command} requested`); } };
+  const render = () => (
+    <Pane
+      element="aside"
+      label="Workspace navigation"
+      rootAttributes={{ 'data-recipe': 'recipe-navigation-sidebar' }}
+      footer={
+        <Toolbar
+          label="Sidebar actions"
+          dividerSides="t"
+          leading={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Add project"
+                data-action="recipe-action"
+                data-recipe-command="add"
+              >
+                <LucideIcon icon={Plus} name="plus" />
+              </button>
+            </ToolbarControlGroup>
+          }
+          trailing={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Workspace settings"
+                data-action="recipe-action"
+                data-recipe-command="settings"
+              >
+                <LucideIcon icon={Settings} name="settings" />
+              </button>
+            </ToolbarControlGroup>
+          }
+        />
+      }
+    >
+      <section>
+        <ListHeader
+          label="Workspace"
+          count={3}
+          countLabel="3 workspaces"
+          action="recipe-action"
+          actionLabel="Add workspace item"
+          actionIcon={<LucideIcon icon={Plus} name="plus" />}
+        />
+        <ListItem
+          action="recipe-action"
+          itemId="inbox"
+          label="Inbox"
+          icon={<LucideIcon icon={Inbox} name="inbox" />}
+          trailing={<span>12</span>}
+          selected={selected.value === 'inbox'}
+        />
+        <ListItem
+          action="recipe-action"
+          itemId="shared"
+          label="Shared with me"
+          icon={<LucideIcon icon={Users} name="users" />}
+          selected={selected.value === 'shared'}
+        />
+        <ListItem
+          action="recipe-action"
+          itemId="drafts"
+          label="Drafts without an icon"
+          selected={selected.value === 'drafts'}
+        />
+      </section>
+      <section>
+        <ListHeader
+          label="Projects"
+          toggle
+          action="recipe-action"
+          expanded={expanded.value}
+        />
+        {expanded.value && (
+          <>
+            <ListItem
+              action="recipe-action"
+              itemId="design"
+              label="Design system rollout across desktop and tablet"
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              selected={selected.value === 'design'}
+              multiline
+            />
+            <ListItem
+              action="recipe-action"
+              itemId="archive"
+              label="Archived"
+              disabled
+              title="Available to administrators"
+            />
+            <ContentItem>
+              <List gap="2xs">
+                <Text variant="span">
+                  <strong>Quarterly goal</strong>
+                </Text>
+                <Text variant="span" tone="quiet" size="compact">
+                  Ship accessible navigation patterns to every workspace.
+                </Text>
+              </List>
+            </ContentItem>
+          </>
+        )}
+      </section>
+    </Pane>
+  );
+  return {
+    render,
+    action(command, element) {
+      if (element.matches('.kui-list-header__toggle')) {
+        expanded.value = !expanded.value;
+        announce(expanded.value ? 'Projects expanded' : 'Projects collapsed');
+        return;
+      }
+      const id = element.dataset.itemId;
+      if (id) selected.value = id;
+      announce(id ? `Selected ${id}` : `${command} requested`);
+    },
+  };
 };

package/ux-demo/recipes/navigation-stack.tsx

@@ -1,16 +1,32 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/nav-stack.css';
 import '@kerfjs/ui/toolbar-text.css';
-import './recipes.css';
 
+import { ContentItem } from '@kerfjs/ui/content-item';
+import { List } from '@kerfjs/ui/list';
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
 import { NavStack, type NavStackView } from '@kerfjs/ui/nav-stack';
+import { Row } from '@kerfjs/ui/row';
+import { Text } from '@kerfjs/ui/text';
 import { signal } from 'kerfjs';
 import { ChevronRight, FileText, Folder } from 'lucide';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'compact',
+    height: 'tall',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns the stack as a signal of views and pushes/pops it; NavStack renders the stack and wireNavStack slides the content and settles the chrome. The app owns selection, data, and routing.',
+};
 
 interface LibraryItem {
   id: string;
@@ -19,41 +35,80 @@ interface LibraryItem {
 }
 
 const ITEMS: LibraryItem[] = [
-  { id: 'tokens', label: 'Design tokens', detail: 'Semantic color, spacing, and radius scales shared across every surface.' },
-  { id: 'controls', label: 'Toolbar controls', detail: 'Control groups and segmented controls with their hover and pressed contracts.' },
-  { id: 'layouts', label: 'App layouts', detail: 'Navigation stacks, split views, workbench, and bottom-tab scaffolds.' },
+  {
+    id: 'tokens',
+    label: 'Design tokens',
+    detail:
+      'Semantic color, spacing, and radius scales shared across every surface.',
+  },
+  {
+    id: 'controls',
+    label: 'Toolbar controls',
+    detail:
+      'Control groups and segmented controls with their hover and pressed contracts.',
+  },
+  {
+    id: 'layouts',
+    label: 'App layouts',
+    detail:
+      'Navigation stacks, split views, workbench, and bottom-tab scaffolds.',
+  },
 ];
 
 export const createRecipe: RecipeFactory = (announce) => {
   const listView = (): NavStackView => ({
     key: 'library',
     title: 'Library',
-    content: <div class="recipe-navstack__view kui-pane__content kui-content">
-      <section>
-        <MenuHeader label="Components" />
-        {ITEMS.map((item) => <MenuItem action="recipe-action" itemId={item.id} label={item.label} icon={<LucideIcon icon={Folder} name="folder" />} trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />} />)}
-      </section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns the stack as a signal of views and pushes/pops it; `NavStack` renders the stack and `wireNavStack` slides the content and settles the chrome. The app owns selection, data, and routing.</p>
-    </div>,
+    content: (
+      <List>
+        <section>
+          <ListHeader label="Components" />
+          {ITEMS.map((item) => (
+            <ListItem
+              action="recipe-action"
+              itemId={item.id}
+              label={item.label}
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />}
+            />
+          ))}
+        </section>
+      </List>
+    ),
   });
 
   const detailView = (item: LibraryItem): NavStackView => ({
     key: item.id,
     title: item.label,
-    content: <div class="recipe-navstack__view kui-pane__content kui-content">
-      <div class="kui-content-item">
-        <LucideIcon icon={FileText} name="file-text" />
-        <strong>{item.label}</strong>
-        <p class="kui-recipe__muted">{item.detail}</p>
-      </div>
-    </div>,
+    content: (
+      <List controlInsets="t">
+        <ContentItem>
+          <Row gap="xs">
+            <LucideIcon icon={FileText} name="file-text" />
+            <List gap="2xs">
+              <Text variant="span">
+                <strong>{item.label}</strong>
+              </Text>
+              <Text variant="span" tone="quiet" size="compact">
+                {item.detail}
+              </Text>
+            </List>
+          </Row>
+        </ContentItem>
+      </List>
+    ),
   });
 
   const views = signal<NavStackView[]>([listView()]);
 
-  const render = () => <section class="kui-recipe recipe-navstack kui-recipe__surface" data-recipe="recipe-navigation-stack">
-    <div class="recipe-navstack__stage"><NavStack id="recipe-nav" label="Component library" views={views.value} /></div>
-  </section>;
+  const render = () => (
+    <section
+      data-recipe="recipe-navigation-stack"
+      aria-label="Component library"
+    >
+      <NavStack id="recipe-nav" label="Component library" views={views.value} />
+    </section>
+  );
 
   return {
     render,

package/ux-demo/recipes/types.ts

@@ -1,3 +1,4 @@
+import type { CatalogExampleViewport } from '@kerfjs/ui/catalog';
 import type { SafeHtml } from 'kerfjs';
 
 export interface RecipeController {
@@ -5,7 +6,27 @@ export interface RecipeController {
   action(command: string, element: HTMLElement): void;
   change?(element: HTMLElement): void;
   afterHide?(element: HTMLElement): void;
-  resize?(id: string, size: number): void;
+  /**
+   * Install any imperative wiring the recipe owns on its mounted root (e.g.
+   * `wireSidebar` for a collapsible rail/drawer), returning a disposer. The
+   * application boundary calls it once per mount and disposes it on teardown.
+   */
+  wire?(root: HTMLElement): () => void;
 }
 
-export type RecipeFactory = (announce: (message: string) => void) => RecipeController;
+export type RecipeFactory = (
+  announce: (message: string) => void,
+) => RecipeController;
+
+/**
+ * Catalog-only presentation for one recipe. The UX catalog frames the recipe in
+ * a `CatalogExample` viewport and shows `note` when recipe notes are toggled on;
+ * an application that copies the recipe ignores this export and mounts the
+ * controller into its own container.
+ */
+export interface RecipePresentation {
+  /** Catalog-owned specimen frame: width, height, surface, and border. */
+  viewport?: CatalogExampleViewport;
+  /** Ownership note: what the recipe owns versus what the application owns. */
+  note: string;
+}

package/ux-demo/recipes/workspace-header.tsx

@@ -1,12 +1,93 @@
 import '@kerfjs/ui/layout.css';
-import './recipes.css';
 
-import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { List } from '@kerfjs/ui/list';
+import { ListInsetText } from '@kerfjs/ui/list-inset-text';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Text } from '@kerfjs/ui/text';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    width: 'full',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.',
+};
 
 export const createRecipe: RecipeFactory = (announce) => ({
-  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PanelHeader title="Accessibility readiness and responsive navigation rollout" titleId="recipe-workspace-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
-  action(command) { announce(`${command} requested`); },
+  render: () => (
+    <section
+      data-recipe="recipe-workspace-header"
+      aria-labelledby="recipe-workspace-title"
+    >
+      <List gap="l" controlInsets="tb">
+        <List>
+          <ListInsetText sides="rl">
+            <Text variant="span" tone="quiet" size="compact">
+              Northstar workspace · Product planning
+            </Text>
+          </ListInsetText>
+          <Toolbar
+            label="Workspace heading"
+            responsive="stack"
+            responsiveAt="compact"
+            leading={
+              <ToolbarText
+                text="Accessibility readiness and responsive navigation rollout"
+                size="xlarge"
+                id="recipe-workspace-title"
+                headingLevel={1}
+                wrap
+                maxLines={2}
+              />
+            }
+            trailing={
+              <ToolbarControlGroup
+                appearance="borderless"
+                buttonAppearance="push"
+                content="text"
+              >
+                <button
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="share"
+                >
+                  Share
+                </button>
+                <button
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="more"
+                >
+                  More actions
+                </button>
+                <button
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="publish"
+                >
+                  Publish update
+                </button>
+              </ToolbarControlGroup>
+            }
+          />
+        </List>
+        <StateBanner
+          title="Ready for review"
+          detail="All required checks passed 18 minutes ago."
+          tone="success"
+        />
+      </List>
+    </section>
+  ),
+  action(command) {
+    announce(`${command} requested`);
+  },
 });

package/dist/browser/menu-action-row.js

@@ -1,3 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/menu-action-row.css';
-export * from '../menu-action-row.js';

package/dist/browser/menu-header.js

@@ -1,5 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/lucide-icon.css';
-import '../styles/disclosure-arrow.css';
-import '../styles/menu-header.css';
-export * from '../menu-header.js';

package/dist/browser/menu-item.js

@@ -1,3 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/menu-item.css';
-export * from '../menu-item.js';

package/dist/chunk-24Z2XE6C.js

@@ -1,10 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/toolbar-text.tsx
-function ToolbarText({ text, size = "default", className = "", id }) {
-  return /* @__PURE__ */ jsx("span", { class: `kui-toolbar-text ${className}`.trim(), "data-component": "toolbar-text", "data-size": size, id, children: text });
-}
-
-export { ToolbarText };
-
-//# sourceMappingURL=chunk-24Z2XE6C.js.map

package/dist/chunk-24Z2XE6C.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAUO,SAAS,WAAA,CAAY,EAAE,IAAA,EAAM,IAAA,GAAO,WAAW,SAAA,GAAY,EAAA,EAAI,IAAG,EAAqB;AAC5F,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAM,IAAS,QAAA,EAAA,IAAA,EAAK,CAAA;AAC3H","file":"chunk-24Z2XE6C.js","sourcesContent":["export type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';\n\nexport interface ToolbarTextProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n}\n\nexport function ToolbarText({ text, size = 'default', className = '', id }: ToolbarTextProps) {\n  return <span class={`kui-toolbar-text ${className}`.trim()} data-component=\"toolbar-text\" data-size={size} id={id}>{text}</span>;\n}\n"]}

package/dist/chunk-2RJBFNB6.js

@@ -1,172 +0,0 @@
-import { placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-import { delegate, signal } from 'kerfjs';
-
-function editorFromEvent(root, event) {
-  const target = event.target;
-  if (!(target instanceof Element)) return;
-  const editor = target.closest("[data-token-search-editor]");
-  return editor && root.contains(editor) ? editor : void 0;
-}
-function caretQueryOffset(editor) {
-  const selection = editor.ownerDocument.getSelection();
-  if (!selection || selection.rangeCount === 0) return;
-  const selectionRange = selection.getRangeAt(0);
-  if (!editor.contains(selectionRange.startContainer)) return;
-  const prefixRange = editor.ownerDocument.createRange();
-  prefixRange.selectNodeContents(editor);
-  prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
-  const prefix = editor.ownerDocument.createElement("div");
-  prefix.append(prefixRange.cloneContents());
-  return readTokenSearchField(prefix).query.length;
-}
-function replacementEditor(root, id) {
-  return [...root.querySelectorAll("[data-token-search-editor]")].find((editor) => editor.dataset.tokenSearchEditor === id);
-}
-function editorIsEmpty(editor) {
-  const value = readTokenSearchField(editor);
-  return value.query.length === 0 && value.tokens.length === 0;
-}
-function wireTokenSearchFields(root, { onSubmit, collapsible = true } = {}) {
-  const managed = collapsible !== false;
-  const config = typeof collapsible === "object" ? collapsible : {};
-  const expandOnActivate = managed && (config.expandOnActivate ?? true);
-  const collapseOnEmptyBlur = managed && (config.collapseOnEmptyBlur ?? true);
-  const collapseOnEscape = managed && (config.collapseOnEscape ?? true);
-  const manageFocus = managed && (config.manageFocus ?? true);
-  const adopted = config.signals ?? {};
-  const created = /* @__PURE__ */ new Map();
-  const signalFor = (id) => {
-    const own = adopted[id];
-    if (own) return own;
-    let field = created.get(id);
-    if (!field) {
-      field = signal(false);
-      created.set(id, field);
-    }
-    return field;
-  };
-  const setExpanded = (id, next) => {
-    const state = signalFor(id);
-    if (state.value !== next) state.value = next;
-  };
-  const view = () => root.ownerDocument.defaultView;
-  const focusAfterRender = (id, selector) => {
-    view().requestAnimationFrame(() => {
-      const target = root.querySelector(
-        `[data-component="token-search-field"][data-token-search-id="${CSS.escape(id)}"] ${selector}`
-      );
-      if (!target) return;
-      if (target.matches("[data-token-search-editor]")) placeTokenSearchCaret(target);
-      else target.focus();
-    });
-  };
-  const openField = (id) => {
-    setExpanded(id, true);
-    if (manageFocus) focusAfterRender(id, "[data-token-search-editor]");
-  };
-  const closeField = (id) => {
-    setExpanded(id, false);
-    if (manageFocus) focusAfterRender(id, ".kui-token-search__expand");
-  };
-  const pending = /* @__PURE__ */ new WeakMap();
-  const onBeforeInput = (event) => {
-    const inputEvent = event;
-    const editor = editorFromEvent(root, event);
-    if (!editor || !inputEvent.inputType.startsWith("delete") || editor.ownerDocument.activeElement !== editor) return;
-    const field = editor.closest('[data-component="token-search-field"]');
-    const id = field?.dataset.tokenSearchId;
-    const offset = caretQueryOffset(editor);
-    if (!id || offset === void 0 || field?.dataset.disabled === "true") return;
-    pending.set(editor, {
-      id,
-      offset,
-      tokenCount: editor.querySelectorAll('[data-component="token-search-token"]').length
-    });
-  };
-  const onInput = (event) => {
-    const editor = editorFromEvent(root, event);
-    if (!editor) return;
-    const deletion = pending.get(editor);
-    pending.delete(editor);
-    if (!deletion || editor.querySelectorAll('[data-component="token-search-token"]').length >= deletion.tokenCount) return;
-    editor.ownerDocument.defaultView.requestAnimationFrame(() => {
-      const replacement = replacementEditor(root, deletion.id);
-      if (!replacement) return;
-      const active = replacement.ownerDocument.activeElement;
-      if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;
-      placeTokenSearchCaret(replacement, deletion.offset);
-    });
-  };
-  root.addEventListener("beforeinput", onBeforeInput, true);
-  root.addEventListener("input", onInput, true);
-  const disposers = [
-    () => root.removeEventListener("beforeinput", onBeforeInput, true),
-    () => root.removeEventListener("input", onInput, true)
-  ];
-  disposers.push(
-    delegate(root, "keydown", "[data-token-search-editor]", (event, element) => {
-      const keyboardEvent = event;
-      const editor = element;
-      if (keyboardEvent.isComposing) return;
-      const field = editor.closest('[data-component="token-search-field"]');
-      const id = field?.dataset.tokenSearchId;
-      if (!id || field?.dataset.disabled === "true") return;
-      if (keyboardEvent.key === "Enter") {
-        keyboardEvent.preventDefault();
-        onSubmit?.({ id, editor });
-        return;
-      }
-      if (collapseOnEscape && keyboardEvent.key === "Escape" && field?.dataset.collapsible === "true" && editorIsEmpty(editor)) {
-        keyboardEvent.preventDefault();
-        closeField(id);
-      }
-    })
-  );
-  if (expandOnActivate) {
-    disposers.push(
-      delegate(root, "click", ".kui-token-search__expand", (_event, element) => {
-        const field = element.closest('[data-component="token-search-field"]');
-        const id = field?.dataset.tokenSearchId;
-        if (id && field?.dataset.disabled !== "true") openField(id);
-      })
-    );
-  }
-  if (collapseOnEmptyBlur) {
-    disposers.push(
-      delegate(root, "mousedown", '[data-component="token-search-field"][data-collapsible="true"] button', (event) => {
-        event.preventDefault();
-      })
-    );
-    disposers.push(
-      delegate(root, "focusout", "[data-token-search-editor]", (event, element) => {
-        const editor = element;
-        const field = editor.closest('[data-component="token-search-field"]');
-        const id = field?.dataset.tokenSearchId;
-        if (!id || field?.dataset.collapsible !== "true" || field.dataset.disabled === "true") return;
-        const next = event.relatedTarget;
-        if (next instanceof Node && field.contains(next)) return;
-        if (!editorIsEmpty(editor)) return;
-        view().queueMicrotask(() => {
-          if (!field.contains(field.ownerDocument.activeElement)) setExpanded(id, false);
-        });
-      })
-    );
-  }
-  const dispose = () => {
-    for (const stop of disposers.splice(0)) stop();
-  };
-  const handle = (() => dispose());
-  handle.dispose = dispose;
-  handle.expanded = (id) => managed ? signalFor(id) : void 0;
-  handle.open = (id) => {
-    if (managed) openField(id);
-  };
-  handle.close = (id) => {
-    if (managed) closeField(id);
-  };
-  return handle;
-}
-
-export { wireTokenSearchFields };
-
-//# sourceMappingURL=chunk-2RJBFNB6.js.map