@k2b/ui 0.35.0 → 0.37.0

package/dist/browser/actions/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/Tabs.tsx"],"sourcesContent":["import { children, createEffect, createMemo, createUniqueId, For, type JSX, Show } from \"solid-js\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"../layout/scroll-fade\";\n\nexport type TabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n  panel?: JSX.Element;\n  onClose?: () => void;\n  closeLabel?: string;\n};\n\nexport type TabsItemProps<T extends string = string> = Omit<TabOption<T>, \"panel\"> & {\n  children?: JSX.Element;\n};\n\ntype TabsItemSlot<T extends string = string> = {\n  readonly kind: typeof TABS_ITEM;\n  readonly props: TabsItemProps<T>;\n};\n\nexport type TabsProps<T extends string = string> = {\n  value: MaybeAccessor<T>;\n  onValueChange: (value: T) => void;\n  ariaLabel: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n  variant?: \"line\" | \"pill\";\n  trailing?: JSX.Element;\n  /** Data-driven alternative to colocated `Tabs.Item` children. */\n  options?: readonly TabOption<T>[];\n  children?: JSX.Element;\n};\n\ntype TabsComponent = (<T extends string = string>(props: TabsProps<T>) => JSX.Element) & {\n  Item: <T extends string = string>(props: TabsItemProps<T>) => JSX.Element;\n};\n\nconst TABS_ITEM = Symbol(\"Tabs.Item\");\n\nconst isTabsItem = <T extends string>(value: unknown): value is TabsItemSlot<T> =>\n  !!value && typeof value === \"object\" && \"kind\" in value && value.kind === TABS_ITEM;\n\nconst collectTabsItems = <T extends string>(value: unknown): TabsItemSlot<T>[] => {\n  if (Array.isArray(value)) return value.flatMap(collectTabsItems<T>);\n  return isTabsItem<T>(value) ? [value] : [];\n};\n\nfunction TabsItem<T extends string = string>(props: TabsItemProps<T>): JSX.Element {\n  return { kind: TABS_ITEM, props } satisfies TabsItemSlot<T> as unknown as JSX.Element;\n}\n\n/** Controlled, keyboard-accessible tabs with compositional or data-driven items. */\nfunction TabsRoot<T extends string = string>(props: TabsProps<T>): JSX.Element {\n  const messages = useUiMessages();\n  let root: HTMLDivElement | undefined;\n  let list: HTMLDivElement | undefined;\n  createScrollFade(\n    () => list,\n    () => props.orientation !== \"vertical\",\n  );\n  const instanceId = `k2b-tabs-${createUniqueId()}`;\n  const resolvedChildren = children(() => props.children);\n  const trailing = children(() => props.trailing);\n  const items = createMemo<readonly TabOption<T>[]>(() => {\n    if (props.options) return props.options;\n    return collectTabsItems<T>(resolvedChildren.toArray()).map((item) => ({\n      value: item.props.value,\n      label: item.props.label,\n      icon: item.props.icon,\n      disabled: item.props.disabled,\n      panel: item.props.children,\n      onClose: item.props.onClose,\n      closeLabel: item.props.closeLabel,\n    }));\n  });\n  const buttons: HTMLButtonElement[] = [];\n  let closing: T | undefined;\n  const requestClose = (option: TabOption<T>) => {\n    closing = option.value;\n    option.onClose?.();\n  };\n  const current = () => resolveMaybeAccessor(props.value);\n  const active = createMemo(() => items().find((option) => option.value === current()));\n  const activeIndex = createMemo(() =>\n    Math.max(\n      0,\n      items().findIndex((option) => option.value === current()),\n    ),\n  );\n  const enabled = () =>\n    items()\n      .map((option, index) => ({ option, index }))\n      .filter(({ option }) => !option.disabled);\n  const tabStopIndex = createMemo(() => {\n    const selected = items().findIndex((option) => option.value === current() && !option.disabled);\n    return selected >= 0 ? selected : (enabled()[0]?.index ?? -1);\n  });\n  createEffect(() => {\n    const index = activeIndex();\n    const removed = closing !== undefined && !items().some((item) => item.value === closing);\n    if (removed) closing = undefined;\n    queueMicrotask(() => {\n      buttons[index]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n      if (removed) {\n        const target = items().length ? buttons[index] : root?.querySelector<HTMLElement>(\".k2b-tabs__trailing button\");\n        target?.focus();\n      }\n    });\n  });\n  const select = (index: number) => {\n    const option = items()[index];\n    if (!option || option.disabled) return;\n    props.onValueChange(option.value);\n    queueMicrotask(() => buttons[index]?.focus());\n  };\n  const move = (index: number, delta: 1 | -1) => {\n    const available = enabled();\n    if (available.length === 0) return;\n    const currentIndex = available.findIndex((item) => item.index === index);\n    const next = available[(currentIndex + delta + available.length) % available.length] ?? available[0];\n    if (next) select(next.index);\n  };\n\n  return (\n    <div\n      ref={root}\n      class={`k2b-tabs ${props.class ?? \"\"}`}\n      data-orientation={props.orientation ?? \"horizontal\"}\n      data-variant={props.variant ?? \"line\"}\n    >\n      <div class=\"k2b-tabs__bar\">\n        <div\n          ref={list}\n          data-scroll-fade-mode={props.orientation !== \"vertical\" ? \"both\" : undefined}\n          data-scroll-fade-axis=\"horizontal\"\n          class=\"k2b-tabs__list\"\n          role=\"tablist\"\n          aria-label={props.ariaLabel}\n          aria-orientation={props.orientation ?? \"horizontal\"}\n        >\n          <For each={items()}>\n            {(option, index) => {\n              const id = () => `${instanceId}-tab-${index()}`;\n              const panelId = () => `${instanceId}-panel-${index()}`;\n              return (\n                <div class=\"k2b-tabs__item\" role=\"presentation\">\n                  <button\n                    ref={(element) => {\n                      buttons[index()] = element;\n                    }}\n                    id={id()}\n                    type=\"button\"\n                    role=\"tab\"\n                    aria-selected={current() === option.value}\n                    aria-controls={option.panel !== undefined ? panelId() : undefined}\n                    tabIndex={tabStopIndex() === index() ? 0 : -1}\n                    disabled={option.disabled}\n                    onClick={() => props.onValueChange(option.value)}\n                    onKeyDown={(event) => {\n                      if ((event.key === \"Delete\" || event.key === \"Backspace\") && option.onClose) {\n                        event.preventDefault();\n                        requestClose(option);\n                        return;\n                      }\n                      const previous = props.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n                      const next = props.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n                      if (event.key === previous || event.key === next) {\n                        event.preventDefault();\n                        move(index(), event.key === next ? 1 : -1);\n                      } else if (event.key === \"Home\" || event.key === \"End\") {\n                        event.preventDefault();\n                        const available = enabled();\n                        const target = event.key === \"End\" ? available.at(-1) : available[0];\n                        if (target) select(target.index);\n                      }\n                    }}\n                  >\n                    <Show when={option.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                    <span class={props.variant === \"pill\" ? \"k2b-truncate-fade\" : undefined}>{option.label}</span>\n                  </button>\n                  <Show when={option.onClose}>\n                    <button\n                      type=\"button\"\n                      class=\"k2b-tabs__close\"\n                      aria-label={\n                        option.closeLabel ??\n                        messages().closeNamed({ name: typeof option.label === \"string\" ? option.label : props.ariaLabel })\n                      }\n                      disabled={option.disabled}\n                      onClick={() => requestClose(option)}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </Show>\n                </div>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={trailing()}>\n          <div class=\"k2b-tabs__trailing\">{trailing()}</div>\n        </Show>\n      </div>\n      <Show when={active()?.panel !== undefined}>\n        <div\n          id={`${instanceId}-panel-${activeIndex()}`}\n          class=\"k2b-tabs__panel\"\n          role=\"tabpanel\"\n          aria-labelledby={`${instanceId}-tab-${activeIndex()}`}\n          tabIndex={0}\n        >\n          {active()?.panel}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport const Tabs = TabsRoot as TabsComponent;\nTabs.Item = TabsItem;\n\nexport default Tabs;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/Tabs.tsx"],"sourcesContent":["import { children, createEffect, createMemo, createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\nimport { KeyedFor } from \"../internal/keyed-for\";\n\nconst tabName = (label: JSX.Element) => (typeof label === \"string\" ? label : undefined);\n\nimport { useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"../layout/scroll-fade\";\n\nexport type TabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n  panel?: JSX.Element;\n  onClose?: () => void;\n  closeLabel?: string;\n};\n\nexport type TabsItemProps<T extends string = string> = Omit<TabOption<T>, \"panel\"> & {\n  children?: JSX.Element;\n};\n\ntype TabsItemSlot<T extends string = string> = {\n  readonly kind: typeof TABS_ITEM;\n  readonly props: TabsItemProps<T>;\n};\n\nexport type TabsProps<T extends string = string> = {\n  value: MaybeAccessor<T>;\n  onValueChange: (value: T) => void;\n  ariaLabel: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n  variant?: \"line\" | \"pill\";\n  trailing?: JSX.Element;\n  /** Data-driven alternative to colocated `Tabs.Item` children. */\n  options?: readonly TabOption<T>[];\n  children?: JSX.Element;\n};\n\ntype TabsComponent = (<T extends string = string>(props: TabsProps<T>) => JSX.Element) & {\n  Item: <T extends string = string>(props: TabsItemProps<T>) => JSX.Element;\n};\n\nconst TABS_ITEM = Symbol(\"Tabs.Item\");\n\nconst isTabsItem = <T extends string>(value: unknown): value is TabsItemSlot<T> =>\n  !!value && typeof value === \"object\" && \"kind\" in value && value.kind === TABS_ITEM;\n\nconst collectTabsItems = <T extends string>(value: unknown): TabsItemSlot<T>[] => {\n  if (Array.isArray(value)) return value.flatMap(collectTabsItems<T>);\n  return isTabsItem<T>(value) ? [value] : [];\n};\n\nfunction TabsItem<T extends string = string>(props: TabsItemProps<T>): JSX.Element {\n  return { kind: TABS_ITEM, props } satisfies TabsItemSlot<T> as unknown as JSX.Element;\n}\n\n/** Controlled, keyboard-accessible tabs with compositional or data-driven items. */\nfunction TabsRoot<T extends string = string>(props: TabsProps<T>): JSX.Element {\n  const messages = useUiMessages();\n  let root: HTMLDivElement | undefined;\n  let list: HTMLDivElement | undefined;\n  createScrollFade(\n    () => list,\n    () => props.orientation !== \"vertical\",\n  );\n  const instanceId = `k2b-tabs-${createUniqueId()}`;\n  const resolvedChildren = children(() => props.children);\n  const trailing = children(() => props.trailing);\n  const items = createMemo<readonly TabOption<T>[]>(() => {\n    if (props.options) return props.options;\n    return collectTabsItems<T>(resolvedChildren.toArray()).map((item) => ({\n      value: item.props.value,\n      label: item.props.label,\n      icon: item.props.icon,\n      disabled: item.props.disabled,\n      panel: item.props.children,\n      onClose: item.props.onClose,\n      closeLabel: item.props.closeLabel,\n    }));\n  });\n  const buttons: HTMLButtonElement[] = [];\n  let closing: T | undefined;\n  const requestClose = (option: TabOption<T>) => {\n    closing = option.value;\n    option.onClose?.();\n  };\n  const current = () => resolveMaybeAccessor(props.value);\n  const active = createMemo(() => items().find((option) => option.value === current()));\n  const activeIndex = createMemo(() =>\n    Math.max(\n      0,\n      items().findIndex((option) => option.value === current()),\n    ),\n  );\n  const enabled = () =>\n    items()\n      .map((option, index) => ({ option, index }))\n      .filter(({ option }) => !option.disabled);\n  const tabStopIndex = createMemo(() => {\n    const selected = items().findIndex((option) => option.value === current() && !option.disabled);\n    return selected >= 0 ? selected : (enabled()[0]?.index ?? -1);\n  });\n  createEffect(() => {\n    const index = activeIndex();\n    const removed = closing !== undefined && !items().some((item) => item.value === closing);\n    if (removed) closing = undefined;\n    queueMicrotask(() => {\n      buttons[index]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n      if (removed) {\n        const target = items().length ? buttons[index] : root?.querySelector<HTMLElement>(\".k2b-tabs__trailing button\");\n        target?.focus();\n      }\n    });\n  });\n  const select = (index: number) => {\n    const option = items()[index];\n    if (!option || option.disabled) return;\n    props.onValueChange(option.value);\n    queueMicrotask(() => buttons[index]?.focus());\n  };\n  const move = (index: number, delta: 1 | -1) => {\n    const available = enabled();\n    if (available.length === 0) return;\n    const currentIndex = available.findIndex((item) => item.index === index);\n    const next = available[(currentIndex + delta + available.length) % available.length] ?? available[0];\n    if (next) select(next.index);\n  };\n\n  return (\n    <div\n      ref={root}\n      class={`k2b-tabs ${props.class ?? \"\"}`}\n      data-orientation={props.orientation ?? \"horizontal\"}\n      data-variant={props.variant ?? \"line\"}\n    >\n      <div class=\"k2b-tabs__bar\">\n        <div\n          ref={list}\n          data-scroll-fade-mode={props.orientation !== \"vertical\" ? \"both\" : undefined}\n          data-scroll-fade-axis=\"horizontal\"\n          class=\"k2b-tabs__list\"\n          role=\"tablist\"\n          aria-label={props.ariaLabel}\n          aria-orientation={props.orientation ?? \"horizontal\"}\n        >\n          {/* Keyed by value: tab objects are rebuilt whenever a tab's props change, and a tab replaced between press and\n              release would swallow the click (#2140). */}\n          <KeyedFor each={items()} by={(option) => option.value}>\n            {(option, index) => {\n              const id = () => `${instanceId}-tab-${index()}`;\n              const panelId = () => `${instanceId}-panel-${index()}`;\n              return (\n                <div class=\"k2b-tabs__item\" role=\"presentation\">\n                  <button\n                    ref={(element) => {\n                      buttons[index()] = element;\n                    }}\n                    id={id()}\n                    type=\"button\"\n                    role=\"tab\"\n                    aria-selected={current() === option().value}\n                    aria-controls={option().panel !== undefined ? panelId() : undefined}\n                    tabIndex={tabStopIndex() === index() ? 0 : -1}\n                    disabled={option().disabled}\n                    onClick={() => props.onValueChange(option().value)}\n                    onKeyDown={(event) => {\n                      if ((event.key === \"Delete\" || event.key === \"Backspace\") && option().onClose) {\n                        event.preventDefault();\n                        requestClose(option());\n                        return;\n                      }\n                      const previous = props.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n                      const next = props.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n                      if (event.key === previous || event.key === next) {\n                        event.preventDefault();\n                        move(index(), event.key === next ? 1 : -1);\n                      } else if (event.key === \"Home\" || event.key === \"End\") {\n                        event.preventDefault();\n                        const available = enabled();\n                        const target = event.key === \"End\" ? available.at(-1) : available[0];\n                        if (target) select(target.index);\n                      }\n                    }}\n                  >\n                    <Show when={option().icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                    <span class={props.variant === \"pill\" ? \"k2b-truncate-fade\" : undefined}>{option().label}</span>\n                  </button>\n                  <Show when={option().onClose}>\n                    <button\n                      type=\"button\"\n                      class=\"k2b-tabs__close\"\n                      aria-label={option().closeLabel ?? messages().closeNamed({ name: tabName(option().label) ?? props.ariaLabel })}\n                      disabled={option().disabled}\n                      onClick={() => requestClose(option())}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </Show>\n                </div>\n              );\n            }}\n          </KeyedFor>\n        </div>\n        <Show when={trailing()}>\n          <div class=\"k2b-tabs__trailing\">{trailing()}</div>\n        </Show>\n      </div>\n      <Show when={active()?.panel !== undefined}>\n        <div\n          id={`${instanceId}-panel-${activeIndex()}`}\n          class=\"k2b-tabs__panel\"\n          role=\"tabpanel\"\n          aria-labelledby={`${instanceId}-tab-${activeIndex()}`}\n          tabIndex={0}\n        >\n          {active()?.panel}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport const Tabs = TabsRoot as TabsComponent;\nTabs.Item = TabsItem;\n\nexport default Tabs;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/chat/ChatComposer.js

@@ -2113,13 +2113,38 @@ export function ChatComposer(props) {
     _$runHydrationEvents();
     return _el$18;
   })();
-  const commandRowMap = createMemo(() => new Map(commandModel().rows.map(row => [row.command, row])));
+
+  // A press on a row remembers its command. The host can rebuild the list, or the whole menu, between press and release;
+  // the browser then sends the click to a common ancestor (#2140). A release on the same command's new row runs it.
+  let pressedCommand;
+  onMount(() => {
+    const release = event => {
+      const pressed = pressedCommand;
+      pressedCommand = undefined;
+      if (!pressed || pressed.row.isConnected || event.type !== "pointerup") return;
+      const under = document.elementFromPoint(event.clientX, event.clientY)?.closest("[data-command-key]");
+      if (!under || under.dataset.commandKey !== pressed.key || !shellRef?.contains(under)) return;
+      const command = commandRowMap().get(pressed.key)?.command;
+      if (command) void executeCommand(command);
+    };
+    window.addEventListener("pointerup", release, true);
+    window.addEventListener("pointercancel", release, true);
+    onCleanup(() => {
+      window.removeEventListener("pointerup", release, true);
+      window.removeEventListener("pointercancel", release, true);
+    });
+  });
+  // Rows are keyed by the command's key, not its object: hosts rebuild their command objects whenever their inputs change,
+  // and a row replaced between the press and the release would swallow the click (#2140).
+  const commandRowMap = createMemo(() => new Map(commandModel().rows.map(row => [chatCommandKey(row.command), row])));
   const commandGroupKey = group => group.scopeTitle ? "scope" : group.section ? `section:${group.section.id}` : "flat";
-  const renderCommandRow = command => {
-    const highlight = () => commandRowMap().get(command)?.highlight;
-    const title = () => command.label ?? command.name;
-    const opening = () => openingRow() === chatCommandKey(command);
-    const failure = () => openFailures()[chatCommandKey(command)];
+  const renderCommandRow = initial => {
+    const key = chatCommandKey(initial);
+    const command = () => commandRowMap().get(key)?.command ?? initial;
+    const highlight = () => commandRowMap().get(key)?.highlight;
+    const title = () => command().label ?? command().name;
+    const opening = () => openingRow() === key;
+    const failure = () => openFailures()[key];
     return (() => {
       var _el$30 = _$getNextElement(_tmpl$13),
         _el$31 = _el$30.firstChild,
@@ -2131,9 +2156,16 @@ export function ChatComposer(props) {
         [_el$46, _co$8] = _$getNextMarker(_el$45.nextSibling);
       _el$30.$$click = event => {
         event.preventDefault();
-        void executeCommand(command);
+        void executeCommand(command());
       };
       _el$30.$$mousedown = keepFieldFocus;
+      _el$30.$$pointerdown = event => {
+        pressedCommand = {
+          key,
+          row: event.currentTarget
+        };
+      };
+      _$setAttribute(_el$30, "data-command-key", key);
       _$insert(_el$33, _$createComponent(Show, {
         get when() {
           return highlight();
@@ -2149,17 +2181,17 @@ export function ChatComposer(props) {
       }));
       _$insert(_el$32, _$createComponent(Show, {
         get when() {
-          return _$memo(() => !!command.open)() && !command.reason;
+          return _$memo(() => !!command().open)() && !command().reason;
         },
         get fallback() {
           return _$createComponent(Show, {
             get when() {
-              return command.reason ?? command.description;
+              return command().reason ?? command().description;
             },
             get children() {
               var _el$48 = _$getNextElement(_tmpl$15);
-              _$insert(_el$48, () => command.reason ?? command.description);
-              _$effect(() => _$setAttribute(_el$48, "id", command.reason ? `${commandOptionId(command)}-reason` : undefined));
+              _$insert(_el$48, () => command().reason ?? command().description);
+              _$effect(() => _$setAttribute(_el$48, "id", command().reason ? `${commandOptionId(command())}-reason` : undefined));
               return _el$48;
             }
           });
@@ -2171,8 +2203,8 @@ export function ChatComposer(props) {
             _el$37 = _el$36.firstChild,
             _el$38 = _el$37.nextSibling,
             [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling);
-          _$insert(_el$35, () => failure() ?? command.description);
-          _$insert(_el$36, () => command.busyLabel ?? chatMessages().commandOpening, _el$39, _co$6);
+          _$insert(_el$35, () => failure() ?? command().description);
+          _$insert(_el$36, () => command().busyLabel ?? chatMessages().commandOpening, _el$39, _co$6);
           _$effect(_p$ => {
             var _v$13 = opening() ? "busy" : failure() ? "failed" : undefined,
               _v$14 = opening() ? "true" : undefined,
@@ -2191,7 +2223,7 @@ export function ChatComposer(props) {
       }), _el$41, _co$7);
       _$insert(_el$30, _$createComponent(Show, {
         get when() {
-          return command.selected;
+          return command().selected;
         },
         get children() {
           var _el$42 = _$getNextElement(_tmpl$12),
@@ -2202,14 +2234,14 @@ export function ChatComposer(props) {
         }
       }), _el$46, _co$8);
       _$effect(_p$ => {
-        var _v$16 = commandOptionId(command),
-          _v$17 = selectedCommand() === command,
-          _v$18 = Boolean(command.disabled || command.reason),
+        var _v$16 = commandOptionId(command()),
+          _v$17 = selectedCommandKey() === key,
+          _v$18 = Boolean(command().disabled || command().reason),
           _v$19 = opening() ? "true" : undefined,
-          _v$20 = command.reason ? `${commandOptionId(command)}-reason` : undefined,
-          _v$21 = command.reason ? "true" : undefined,
-          _v$22 = selectedCommand() === command ? "true" : undefined,
-          _v$23 = command.icon ?? "ti ti-slash";
+          _v$20 = command().reason ? `${commandOptionId(command())}-reason` : undefined,
+          _v$21 = command().reason ? "true" : undefined,
+          _v$22 = selectedCommandKey() === key ? "true" : undefined,
+          _v$23 = command().icon ?? "ti ti-slash";
         _v$16 !== _p$.e && _$setAttribute(_el$30, "id", _p$.e = _v$16);
         _v$17 !== _p$.t && _$setAttribute(_el$30, "aria-selected", _p$.t = _v$17);
         _v$18 !== _p$.a && _$setAttribute(_el$30, "aria-disabled", _p$.a = _v$18);
@@ -2486,7 +2518,8 @@ export function ChatComposer(props) {
               children: key => {
                 const group = createMemo(() => commandModel().groups.find(group => commandGroupKey(group) === key));
                 const headingId = () => `${commandListId}-g-${key === "scope" ? "scope" : props.commandSections?.findIndex(section => section.id === group()?.section?.id)}`;
-                const rows = () => group()?.rows.map(row => row.command) ?? [];
+                const rows = () => group()?.rows.map(row => chatCommandKey(row.command)) ?? [];
+                const row = key => commandRowMap().get(key).command;
                 return _$createComponent(Show, {
                   when: key !== "flat",
                   get fallback() {
@@ -2494,7 +2527,7 @@ export function ChatComposer(props) {
                       get each() {
                         return rows();
                       },
-                      children: renderCommandRow
+                      children: key => renderCommandRow(row(key))
                     });
                   },
                   get children() {
@@ -2520,7 +2553,7 @@ export function ChatComposer(props) {
                       get each() {
                         return rows();
                       },
-                      children: renderCommandRow
+                      children: key => renderCommandRow(row(key))
                     }), _el$161, _co$39);
                     _$insert(_el$154, _$createComponent(Index, {
                       get each() {
@@ -3193,5 +3226,5 @@ export function ChatComposer(props) {
     return _el$57;
   })();
 }
-_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "mousedown", "focusout"]);
+_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown", "mousedown", "focusout"]);
 //# sourceMappingURL=ChatComposer.js.map