@k2b/ui 0.24.0 → 0.26.0

package/dist/browser/actions/SpotlightSearch.js

@@ -1,5 +1,6 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
@@ -10,7 +11,8 @@ import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<button type=button><i aria-hidden=true></i><span class=k2b-spotlight-button__label></span><!$><!/>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<kbd>`);
+  _tmpl$2 = /*#__PURE__*/_$template(`<kbd class=k2b-kbd><kbd class=k2b-kbd__key>`);
+import { Kbd } from "../content/Kbd";
 import { prompts } from "../feedback/prompts";
 import { resolveUiMessages, useUiMessages } from "../intl/messages";
 import { resolveSpotlightMessages } from "./spotlight-messages";
@@ -35,7 +37,7 @@ export function SpotlightButton(props) {
   const variant = () => props.variant ?? "default";
   const label = () => props.label ?? messages().searchLabel;
   const icon = () => props.icon ?? "ti ti-search";
-  const shortcut = () => props.shortcutLabel;
+  const shortcut = () => props.shortcut ?? props.shortcutLabel;
   const title = () => props.title ?? label();
   const showsShortcut = () => Boolean(shortcut()) && ["chip", "sidebar"].includes(variant());
   return (() => {
@@ -48,11 +50,16 @@ export function SpotlightButton(props) {
     _$insert(_el$3, label);
     _$insert(_el$, (() => {
       var _c$ = _$memo(() => !!showsShortcut());
-      return () => _c$() && (() => {
-        var _el$6 = _$getNextElement(_tmpl$2);
-        _$insert(_el$6, shortcut);
+      return () => _c$() && (props.shortcut !== undefined ? _$createComponent(Kbd, {
+        get keys() {
+          return props.shortcut;
+        }
+      }) : (() => {
+        var _el$6 = _$getNextElement(_tmpl$2),
+          _el$7 = _el$6.firstChild;
+        _$insert(_el$7, () => props.shortcutLabel);
         return _el$6;
-      })();
+      })());
     })(), _el$5, _co$);
     _$effect(_p$ => {
       var _v$ = `k2b-spotlight-button ${props.class ?? ""}`,

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/SpotlightSearch.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport type { PromptSearchInput, PromptSearchItem, PromptSearchOptions } from \"../feedback/prompts\";\nimport { prompts } from \"../feedback/prompts\";\nimport { resolveUiMessages, useUiMessages } from \"../intl/messages\";\nimport { resolveSpotlightMessages } from \"./spotlight-messages\";\n\nexport type SpotlightSearchResolver<T = unknown> = (input: PromptSearchInput) => Promise<PromptSearchItem<T>[]> | PromptSearchItem<T>[];\n\nexport type SpotlightSearchOptions<T = unknown> = PromptSearchOptions & {\n  resolve: SpotlightSearchResolver<T>;\n};\n\nexport type SpotlightButtonVariant = \"default\" | \"compact\" | \"chip\" | \"sidebar\" | \"sidebar-mobile\" | \"icon\";\n\nexport type SpotlightButtonProps = {\n  variant?: SpotlightButtonVariant;\n  label?: string;\n  title?: string;\n  icon?: string;\n  shortcutLabel?: string | false;\n  ariaLabel?: string;\n  disabled?: boolean;\n  class?: string;\n  onClick: () => void | Promise<void>;\n};\n\nexport const openSpotlightSearch = <T extends unknown = unknown>(\n  options: SpotlightSearchOptions<T>,\n): Promise<PromptSearchItem<T> | undefined> => {\n  const { resolve, ...promptOptions } = options;\n  const messages = resolveUiMessages();\n  const spotlightMessages = resolveSpotlightMessages();\n  return prompts.search(resolve, {\n    icon: \"ti ti-search\",\n    placeholder: messages.search,\n    minQueryLength: 0,\n    noResultsText: spotlightMessages.spotlightNoResults,\n    size: \"small\",\n    ...promptOptions,\n  });\n};\n\nexport function SpotlightButton(props: SpotlightButtonProps): JSX.Element {\n  const messages = useUiMessages();\n  const variant = () => props.variant ?? \"default\";\n  const label = () => props.label ?? messages().searchLabel;\n  const icon = () => props.icon ?? \"ti ti-search\";\n  const shortcut = () => props.shortcutLabel;\n  const title = () => props.title ?? label();\n  const showsShortcut = () => Boolean(shortcut()) && [\"chip\", \"sidebar\"].includes(variant());\n\n  return (\n    <button\n      type=\"button\"\n      class={`k2b-spotlight-button ${props.class ?? \"\"}`}\n      data-variant={variant()}\n      disabled={props.disabled}\n      aria-label={props.ariaLabel ?? ([\"compact\", \"icon\"].includes(variant()) ? label() : undefined)}\n      title={title()}\n      onClick={() => void props.onClick()}\n    >\n      <i class={icon()} aria-hidden=\"true\" />\n      <span class=\"k2b-spotlight-button__label\">{label()}</span>\n      {showsShortcut() && <kbd>{shortcut()}</kbd>}\n    </button>\n  );\n}\n\nexport default SpotlightButton;\n"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,OAAO,QAAQ,qBAAqB;AAC7C,SAAS,iBAAiB,EAAE,aAAa,QAAQ,kBAAkB;AACnE,SAAS,wBAAwB,QAAQ,sBAAsB;AAsB/D,OAAO,MAAM,mBAAmB,GAC9B,OAAkC,IACW;EAC7C,MAAM;IAAE,OAAO;IAAE,GAAG;EAAc,CAAC,GAAG,OAAO;EAC7C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,CAAC;EACpC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,CAAC;EACpD,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE;IAC7B,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,QAAQ,CAAC,MAAM;IAC5B,cAAc,EAAE,CAAC;IACjB,aAAa,EAAE,iBAAiB,CAAC,kBAAkB;IACnD,IAAI,EAAE,OAAO;IACb,GAAG;EACL,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,SAAS;EAChD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW;EACzD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,cAAc;EAC/C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,aAAa;EAC1C,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;EAC1C,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;EAE1F;IAAA;MAAA;MAAA;MAAA;MAAA;IAAA,eAQa,MAAM,KAAK,KAAK,CAAC,OAAO,CAAC,CAAC;IAAA,gBAGQ,KAAK;IAAA;MAAA,yBAC/C,aAAa,CAAC,CAAC;MAAA,aAAf;QAAA;QAAA,gBAAyB,QAAQ;QAAA;MAAA,IAAS;IAAA;IAAA;MAAA,UATpC,wBAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OACpC,OAAO,CAAC,CAAC;QAAA,OACb,KAAK,CAAC,QAAQ;QAAA,OACZ,KAAK,CAAC,SAAS,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC;QAAA,OACvF,KAAK,CAAC,CAAC;QAAA,OAGJ,IAAI,CAAC,CAAC;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;IAAA;EAAA;AAKtB;AAEA,eAAe,eAAe;AAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/SpotlightSearch.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Kbd } from \"../content/Kbd\";\nimport type { PromptSearchInput, PromptSearchItem, PromptSearchOptions } from \"../feedback/prompts\";\nimport { prompts } from \"../feedback/prompts\";\nimport { resolveUiMessages, useUiMessages } from \"../intl/messages\";\nimport { resolveSpotlightMessages } from \"./spotlight-messages\";\n\nexport type SpotlightSearchResolver<T = unknown> = (input: PromptSearchInput) => Promise<PromptSearchItem<T>[]> | PromptSearchItem<T>[];\n\nexport type SpotlightSearchOptions<T = unknown> = PromptSearchOptions & {\n  resolve: SpotlightSearchResolver<T>;\n};\n\nexport type SpotlightButtonVariant = \"default\" | \"compact\" | \"chip\" | \"sidebar\" | \"sidebar-mobile\" | \"icon\";\n\nexport type SpotlightButtonProps = {\n  variant?: SpotlightButtonVariant;\n  label?: string;\n  title?: string;\n  icon?: string;\n  /** Shortcut such as \"mod+k\"; takes precedence over shortcutLabel. */\n  shortcut?: string;\n  shortcutLabel?: string | false;\n  ariaLabel?: string;\n  disabled?: boolean;\n  class?: string;\n  onClick: () => void | Promise<void>;\n};\n\nexport const openSpotlightSearch = <T extends unknown = unknown>(\n  options: SpotlightSearchOptions<T>,\n): Promise<PromptSearchItem<T> | undefined> => {\n  const { resolve, ...promptOptions } = options;\n  const messages = resolveUiMessages();\n  const spotlightMessages = resolveSpotlightMessages();\n  return prompts.search(resolve, {\n    icon: \"ti ti-search\",\n    placeholder: messages.search,\n    minQueryLength: 0,\n    noResultsText: spotlightMessages.spotlightNoResults,\n    size: \"small\",\n    ...promptOptions,\n  });\n};\n\nexport function SpotlightButton(props: SpotlightButtonProps): JSX.Element {\n  const messages = useUiMessages();\n  const variant = () => props.variant ?? \"default\";\n  const label = () => props.label ?? messages().searchLabel;\n  const icon = () => props.icon ?? \"ti ti-search\";\n  const shortcut = () => props.shortcut ?? props.shortcutLabel;\n  const title = () => props.title ?? label();\n  const showsShortcut = () => Boolean(shortcut()) && [\"chip\", \"sidebar\"].includes(variant());\n\n  return (\n    <button\n      type=\"button\"\n      class={`k2b-spotlight-button ${props.class ?? \"\"}`}\n      data-variant={variant()}\n      disabled={props.disabled}\n      aria-label={props.ariaLabel ?? ([\"compact\", \"icon\"].includes(variant()) ? label() : undefined)}\n      title={title()}\n      onClick={() => void props.onClick()}\n    >\n      <i class={icon()} aria-hidden=\"true\" />\n      <span class=\"k2b-spotlight-button__label\">{label()}</span>\n      {showsShortcut() &&\n        (props.shortcut !== undefined ? (\n          <Kbd keys={props.shortcut} />\n        ) : (\n          <kbd class=\"k2b-kbd\">\n            <kbd class=\"k2b-kbd__key\">{props.shortcutLabel}</kbd>\n          </kbd>\n        ))}\n    </button>\n  );\n}\n\nexport default SpotlightButton;\n"],"mappings":";;;;;;;;;;;;;;AACA,SAAS,GAAG,QAAQ,gBAAgB;AAEpC,SAAS,OAAO,QAAQ,qBAAqB;AAC7C,SAAS,iBAAiB,EAAE,aAAa,QAAQ,kBAAkB;AACnE,SAAS,wBAAwB,QAAQ,sBAAsB;AAwB/D,OAAO,MAAM,mBAAmB,GAC9B,OAAkC,IACW;EAC7C,MAAM;IAAE,OAAO;IAAE,GAAG;EAAc,CAAC,GAAG,OAAO;EAC7C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,CAAC;EACpC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,CAAC;EACpD,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE;IAC7B,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,QAAQ,CAAC,MAAM;IAC5B,cAAc,EAAE,CAAC;IACjB,aAAa,EAAE,iBAAiB,CAAC,kBAAkB;IACnD,IAAI,EAAE,OAAO;IACb,GAAG;EACL,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,SAAS;EAChD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW;EACzD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,cAAc;EAC/C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,aAAa;EAC5D,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;EAC1C,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;EAE1F;IAAA;MAAA;MAAA;MAAA;MAAA;IAAA,eAQa,MAAM,KAAK,KAAK,CAAC,OAAO,CAAC,CAAC;IAAA,gBAGQ,KAAK;IAAA;MAAA,yBAC/C,aAAa,CAAC,CAAC;MAAA,aAAf,UACE,KAAK,CAAC,QAAQ,KAAK,SAAS,qBAC1B,GAAG;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,QAAQ;QAAA;MAAA;QAAA;UAAA;QAAA,sBAGI,KAAK,CAAC,aAAa;QAAA;MAAA,IAEjD,CAAC;IAAA;IAAA;MAAA,UAhBG,wBAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OACpC,OAAO,CAAC,CAAC;QAAA,OACb,KAAK,CAAC,QAAQ;QAAA,OACZ,KAAK,CAAC,SAAS,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC;QAAA,OACvF,KAAK,CAAC,CAAC;QAAA,OAGJ,IAAI,CAAC,CAAC;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;IAAA;EAAA;AAYtB;AAEA,eAAe,eAAe;AAAC","ignoreList":[]}

package/dist/browser/actions/Toolbar.js

@@ -1,5 +1,8 @@
 import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
@@ -9,7 +12,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div role=group>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span role=separator>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-toolbar__spacer aria-hidden=true>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<div role=toolbar>`);
-import { createContext, useContext } from "solid-js";
+import { createContext, onCleanup, onMount, useContext } from "solid-js";
 const defaultToolbarOrientation = () => "horizontal";
 const ToolbarOrientationContext = createContext(defaultToolbarOrientation);
 const ToolbarGroup = props => (() => {
@@ -49,12 +52,81 @@ const ToolbarSeparator = props => {
   })();
 };
 const ToolbarSpacer = () => _$getNextElement(_tmpl$3);
+const rovingFocus = (root, orientation) => {
+  let last;
+  const setLast = item => {
+    if (item === last) return;
+    if (last) resizeObserver.unobserve(last);
+    last = item;
+    if (last) resizeObserver.observe(last);
+  };
+  const controls = () => Array.from(root.querySelectorAll("button, a[href], input, select, textarea, [tabindex]")).filter(item => {
+    if (item.matches("textarea, select") || item.isContentEditable || item.matches("input") && !/^(button|checkbox|reset|submit|image|color|file)$/i.test(item.getAttribute("type") ?? "text")) return false;
+    const nested = item.closest('[role="menu"], [role="listbox"], [role="dialog"], [popover]');
+    return !nested || !root.contains(nested);
+  });
+  const items = () => controls().filter(item => !item.matches(":disabled") && item.getClientRects().length > 0);
+  const sync = () => {
+    const available = items();
+    if (!last || !available.includes(last)) setLast(available[0]);
+    for (const item of controls()) item.tabIndex = item === last ? 0 : -1;
+  };
+  const focusin = event => {
+    if (event.target instanceof HTMLElement && items().includes(event.target)) {
+      setLast(event.target);
+      sync();
+    }
+  };
+  const keydown = event => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const available = items();
+    const target = event.target;
+    if (!(target instanceof HTMLElement) || !available.includes(target)) return;
+    const forward = orientation() === "vertical" ? "ArrowDown" : getComputedStyle(root).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const backward = orientation() === "vertical" ? "ArrowUp" : forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+    const index = available.indexOf(target);
+    const next = event.key === "Home" ? 0 : event.key === "End" ? available.length - 1 : event.key === forward ? (index + 1) % available.length : event.key === backward ? (index + available.length - 1) % available.length : -1;
+    if (next < 0) return;
+    event.preventDefault();
+    setLast(available[next]);
+    sync();
+    last?.focus();
+  };
+  const observer = new MutationObserver(sync);
+  observer.observe(root, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["disabled", "hidden", "class", "style"]
+  });
+  const resizeObserver = new ResizeObserver(sync);
+  resizeObserver.observe(root);
+  root.addEventListener("focusin", focusin);
+  sync();
+  return {
+    keydown,
+    cleanup: () => {
+      observer.disconnect();
+      resizeObserver.disconnect();
+      root.removeEventListener("focusin", focusin);
+    }
+  };
+};
 export const Toolbar = Object.assign(props => {
   const orientation = () => props.orientation ?? "horizontal";
+  let root;
+  let navigation;
+  onMount(() => {
+    navigation = rovingFocus(root, orientation);
+    onCleanup(navigation.cleanup);
+  });
   return _$createComponent(ToolbarOrientationContext.Provider, {
     value: orientation,
     get children() {
       var _el$4 = _$getNextElement(_tmpl$4);
+      _el$4.$$keydown = event => navigation?.keydown(event);
+      var _ref$ = root;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$4) : root = _el$4;
       _$insert(_el$4, () => props.children);
       _$effect(_p$ => {
         var _v$6 = `k2b-toolbar ${props.class ?? ""}`,
@@ -75,6 +147,7 @@ export const Toolbar = Object.assign(props => {
         o: undefined,
         i: undefined
       });
+      _$runHydrationEvents();
       return _el$4;
     }
   });
@@ -84,4 +157,5 @@ export const Toolbar = Object.assign(props => {
   Spacer: ToolbarSpacer
 });
 export default Toolbar;
+_$delegateEvents(["keydown"]);
 //# sourceMappingURL=Toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/Toolbar.tsx"],"sourcesContent":["import { createContext, type JSX, useContext } from \"solid-js\";\n\nexport type ToolbarProps = {\n  children: JSX.Element;\n  label: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  wrap?: boolean;\n  class?: string;\n};\n\nexport type ToolbarGroupProps = { children: JSX.Element; label?: string; class?: string };\nexport type ToolbarSeparatorProps = { class?: string };\n\ntype ToolbarComponent = ((props: ToolbarProps) => JSX.Element) & {\n  Group: (props: ToolbarGroupProps) => JSX.Element;\n  Separator: (props: ToolbarSeparatorProps) => JSX.Element;\n  Spacer: () => JSX.Element;\n};\n\ntype ToolbarOrientation = NonNullable<ToolbarProps[\"orientation\"]>;\n\nconst defaultToolbarOrientation: () => ToolbarOrientation = () => \"horizontal\";\nconst ToolbarOrientationContext = createContext(defaultToolbarOrientation);\n\nconst ToolbarGroup = (props: ToolbarGroupProps): JSX.Element => (\n  <div class={`k2b-toolbar__group ${props.class ?? \"\"}`} role=\"group\" aria-label={props.label}>\n    {props.children}\n  </div>\n);\n\nconst ToolbarSeparator = (props: ToolbarSeparatorProps): JSX.Element => {\n  const toolbarOrientation = useContext(ToolbarOrientationContext);\n  const separatorOrientation = () => (toolbarOrientation() === \"horizontal\" ? \"vertical\" : \"horizontal\");\n\n  return (\n    <span\n      class={`k2b-toolbar__separator ${props.class ?? \"\"}`}\n      role=\"separator\"\n      aria-orientation={separatorOrientation()}\n      data-orientation={separatorOrientation()}\n    />\n  );\n};\n\nconst ToolbarSpacer = (): JSX.Element => <span class=\"k2b-toolbar__spacer\" aria-hidden=\"true\" />;\n\nexport const Toolbar = Object.assign(\n  (props: ToolbarProps): JSX.Element => {\n    const orientation = () => props.orientation ?? \"horizontal\";\n\n    return (\n      <ToolbarOrientationContext.Provider value={orientation}>\n        <div\n          class={`k2b-toolbar ${props.class ?? \"\"}`}\n          role=\"toolbar\"\n          aria-label={props.label}\n          aria-orientation={orientation()}\n          data-orientation={orientation()}\n          data-wrap={props.wrap ? \"true\" : undefined}\n        >\n          {props.children}\n        </div>\n      </ToolbarOrientationContext.Provider>\n    );\n  },\n  { Group: ToolbarGroup, Separator: ToolbarSeparator, Spacer: ToolbarSpacer },\n) as ToolbarComponent;\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,aAAa,EAAY,UAAU,QAAQ,UAAU;AAqB9D,MAAM,yBAAmD,GAAG,MAAM,YAAY;AAC9E,MAAM,yBAAyB,GAAG,aAAa,CAAC,yBAAyB,CAAC;AAE1E,MAAM,YAAY,GAAI,KAAwB;EAAA;EAAA,qBAEzC,KAAK,CAAC,QAAQ;EAAA;IAAA,UADL,sBAAsB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;MAAA,OAA2B,KAAK,CAAC,KAAK;IAAA;IAAA;IAAA;EAAA;IAAA;IAAA;EAAA;EAAA;AAAA,IAG5F;AAED,MAAM,gBAAgB,GAAI,KAA4B,IAAkB;EACtE,MAAM,kBAAkB,GAAG,UAAU,CAAC,yBAAyB,CAAC;EAChE,MAAM,oBAAoB,GAAG,MAAO,kBAAkB,CAAC,CAAC,KAAK,YAAY,GAAG,UAAU,GAAG,YAAa;EAEtG;IAAA;IAAA;MAAA,WAEW,0BAA0B,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OAElC,oBAAoB,CAAC,CAAC;QAAA,OACtB,oBAAoB,CAAC,CAAC;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAG9C,CAAC;AAED,MAAM,aAAa,GAAG,+BAA0E;AAEhG,OAAO,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CACjC,KAAmB,IAAkB;EACpC,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,WAAW,IAAI,YAAY;EAE3D,yBACG,yBAAyB,CAAC,QAAQ;IAAC,KAAK,EAAE,WAAW;IAAA;MAAA;MAAA,sBASjD,KAAK,CAAC,QAAQ;MAAA;QAAA,WAPR,eAAe,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;UAAA,OAE7B,KAAK,CAAC,KAAK;UAAA,OACL,WAAW,CAAC,CAAC;UAAA,OACb,WAAW,CAAC,CAAC;UAAA,OACpB,KAAK,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;MAAA;QAAA;QAAA;QAAA;QAAA;QAAA;MAAA;MAAA;IAAA;EAAA;AAMlD,CAAC,EACD;EAAE,KAAK,EAAE,YAAY;EAAE,SAAS,EAAE,gBAAgB;EAAE,MAAM,EAAE;AAAc,CAC5E,CAAqB;AAErB,eAAe,OAAO","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/Toolbar.tsx"],"sourcesContent":["import { createContext, type JSX, onCleanup, onMount, useContext } from \"solid-js\";\n\nexport type ToolbarProps = {\n  children: JSX.Element;\n  label: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  wrap?: boolean;\n  class?: string;\n};\n\nexport type ToolbarGroupProps = { children: JSX.Element; label?: string; class?: string };\nexport type ToolbarSeparatorProps = { class?: string };\n\ntype ToolbarComponent = ((props: ToolbarProps) => JSX.Element) & {\n  Group: (props: ToolbarGroupProps) => JSX.Element;\n  Separator: (props: ToolbarSeparatorProps) => JSX.Element;\n  Spacer: () => JSX.Element;\n};\n\ntype ToolbarOrientation = NonNullable<ToolbarProps[\"orientation\"]>;\n\nconst defaultToolbarOrientation: () => ToolbarOrientation = () => \"horizontal\";\nconst ToolbarOrientationContext = createContext(defaultToolbarOrientation);\n\nconst ToolbarGroup = (props: ToolbarGroupProps): JSX.Element => (\n  <div class={`k2b-toolbar__group ${props.class ?? \"\"}`} role=\"group\" aria-label={props.label}>\n    {props.children}\n  </div>\n);\n\nconst ToolbarSeparator = (props: ToolbarSeparatorProps): JSX.Element => {\n  const toolbarOrientation = useContext(ToolbarOrientationContext);\n  const separatorOrientation = () => (toolbarOrientation() === \"horizontal\" ? \"vertical\" : \"horizontal\");\n\n  return (\n    <span\n      class={`k2b-toolbar__separator ${props.class ?? \"\"}`}\n      role=\"separator\"\n      aria-orientation={separatorOrientation()}\n      data-orientation={separatorOrientation()}\n    />\n  );\n};\n\nconst ToolbarSpacer = (): JSX.Element => <span class=\"k2b-toolbar__spacer\" aria-hidden=\"true\" />;\n\nconst rovingFocus = (root: HTMLDivElement, orientation: () => ToolbarOrientation) => {\n  let last: HTMLElement | undefined;\n  const setLast = (item: HTMLElement | undefined) => {\n    if (item === last) return;\n    if (last) resizeObserver.unobserve(last);\n    last = item;\n    if (last) resizeObserver.observe(last);\n  };\n  const controls = () =>\n    Array.from(root.querySelectorAll<HTMLElement>(\"button, a[href], input, select, textarea, [tabindex]\")).filter((item) => {\n      if (\n        item.matches(\"textarea, select\") ||\n        item.isContentEditable ||\n        (item.matches(\"input\") && !/^(button|checkbox|reset|submit|image|color|file)$/i.test(item.getAttribute(\"type\") ?? \"text\"))\n      )\n        return false;\n      const nested = item.closest('[role=\"menu\"], [role=\"listbox\"], [role=\"dialog\"], [popover]');\n      return !nested || !root.contains(nested);\n    });\n  const items = () => controls().filter((item) => !item.matches(\":disabled\") && item.getClientRects().length > 0);\n  const sync = () => {\n    const available = items();\n    if (!last || !available.includes(last)) setLast(available[0]);\n    for (const item of controls()) item.tabIndex = item === last ? 0 : -1;\n  };\n  const focusin = (event: FocusEvent) => {\n    if (event.target instanceof HTMLElement && items().includes(event.target)) {\n      setLast(event.target);\n      sync();\n    }\n  };\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n    const available = items();\n    const target = event.target;\n    if (!(target instanceof HTMLElement) || !available.includes(target)) return;\n    const forward = orientation() === \"vertical\" ? \"ArrowDown\" : getComputedStyle(root).direction === \"rtl\" ? \"ArrowLeft\" : \"ArrowRight\";\n    const backward = orientation() === \"vertical\" ? \"ArrowUp\" : forward === \"ArrowRight\" ? \"ArrowLeft\" : \"ArrowRight\";\n    const index = available.indexOf(target);\n    const next =\n      event.key === \"Home\"\n        ? 0\n        : event.key === \"End\"\n          ? available.length - 1\n          : event.key === forward\n            ? (index + 1) % available.length\n            : event.key === backward\n              ? (index + available.length - 1) % available.length\n              : -1;\n    if (next < 0) return;\n    event.preventDefault();\n    setLast(available[next]);\n    sync();\n    last?.focus();\n  };\n  const observer = new MutationObserver(sync);\n  observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: [\"disabled\", \"hidden\", \"class\", \"style\"] });\n  const resizeObserver = new ResizeObserver(sync);\n  resizeObserver.observe(root);\n  root.addEventListener(\"focusin\", focusin);\n  sync();\n  return {\n    keydown,\n    cleanup: () => {\n      observer.disconnect();\n      resizeObserver.disconnect();\n      root.removeEventListener(\"focusin\", focusin);\n    },\n  };\n};\n\nexport const Toolbar = Object.assign(\n  (props: ToolbarProps): JSX.Element => {\n    const orientation = () => props.orientation ?? \"horizontal\";\n    let root!: HTMLDivElement;\n    let navigation: ReturnType<typeof rovingFocus> | undefined;\n    onMount(() => {\n      navigation = rovingFocus(root, orientation);\n      onCleanup(navigation.cleanup);\n    });\n\n    return (\n      <ToolbarOrientationContext.Provider value={orientation}>\n        <div\n          ref={root}\n          onKeyDown={(event) => navigation?.keydown(event)}\n          class={`k2b-toolbar ${props.class ?? \"\"}`}\n          role=\"toolbar\"\n          aria-label={props.label}\n          aria-orientation={orientation()}\n          data-orientation={orientation()}\n          data-wrap={props.wrap ? \"true\" : undefined}\n        >\n          {props.children}\n        </div>\n      </ToolbarOrientationContext.Provider>\n    );\n  },\n  { Group: ToolbarGroup, Separator: ToolbarSeparator, Spacer: ToolbarSpacer },\n) as ToolbarComponent;\n\nexport default Toolbar;\n"],"mappings":"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","ignoreList":[]}