@gnome-ui/react 1.45.0 → 1.45.2

package/dist/components/ShortcutLabel/ShortcutLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutLabel.cjs","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./ShortcutLabel.module.css\";\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl:      \"⌃\",\n  control:   \"⌃\",\n  shift:     \"⇧\",\n  alt:       \"⌥\",\n  option:    \"⌥\",\n  super:     \"⊞\",\n  win:       \"⊞\",\n  cmd:       \"⌘\",\n  command:   \"⌘\",\n  meta:      \"⌘\",\n  up:        \"↑\",\n  down:      \"↓\",\n  left:      \"←\",\n  right:     \"→\",\n  enter:     \"↵\",\n  return:    \"↵\",\n  backspace: \"⌫\",\n  delete:    \"⌦\",\n  escape:    \"⎋\",\n  esc:       \"⎋\",\n  tab:       \"⇥\",\n  space:     \"␣\",\n  pageup:    \"⇞\",\n  pagedown:  \"⇟\",\n  home:      \"⇱\",\n  end:       \"⇲\",\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport function ShortcutLabel({ shortcut, symbols = true, className, ...props }: ShortcutLabelProps) {\n  const tokens = shortcut.split(\"+\").map((t) => t.trim()).filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(\" \")}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols\n          ? (SYMBOL_MAP[token.toLowerCase()] ?? token)\n          : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":"qFA6BA,IAAM,EAAqC,CACzC,KAAW,IACX,QAAW,IACX,MAAW,IACX,IAAW,IACX,OAAW,IACX,MAAW,IACX,IAAW,IACX,IAAW,IACX,QAAW,IACX,KAAW,IACX,GAAW,IACX,KAAW,IACX,KAAW,IACX,MAAW,IACX,MAAW,IACX,OAAW,IACX,UAAW,IACX,OAAW,IACX,OAAW,IACX,IAAW,IACX,IAAW,IACX,MAAW,IACX,OAAW,IACX,SAAW,IACX,KAAW,IACX,IAAW,IACZ,CAaD,SAAgB,EAAc,CAAE,WAAU,UAAU,GAAM,YAAW,GAAG,GAA6B,CACnG,IAAM,EAAS,EAAS,MAAM,IAAI,CAAC,IAAK,GAAM,EAAE,MAAM,CAAC,CAAC,OAAO,QAAQ,CAEvE,OACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,aAAY,EACZ,GAAI,WAEH,EAAO,KAAK,EAAO,IAAM,CACxB,IAAM,EAAU,EACX,EAAW,EAAM,aAAa,GAAK,EACpC,EAEJ,OACE,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,aAC5B,EACG,CAFI,EAEJ,EAER,CACG,CAAA"}
+{"version":3,"file":"ShortcutLabel.cjs","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ShortcutLabel.module.css';\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl: '⌃',\n  control: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  option: '⌥',\n  super: '⊞',\n  win: '⊞',\n  cmd: '⌘',\n  command: '⌘',\n  meta: '⌘',\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  enter: '↵',\n  return: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  escape: '⎋',\n  esc: '⎋',\n  tab: '⇥',\n  space: '␣',\n  pageup: '⇞',\n  pagedown: '⇟',\n  home: '⇱',\n  end: '⇲',\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport const ShortcutLabel = ({\n  shortcut,\n  symbols = true,\n  className,\n  ...props\n}: ShortcutLabelProps) => {\n  const tokens = shortcut\n    .split('+')\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(' ')}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols ? (SYMBOL_MAP[token.toLowerCase()] ?? token) : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n};\n"],"mappings":"qFA8BA,IAAM,EAAqC,CACzC,KAAM,IACN,QAAS,IACT,MAAO,IACP,IAAK,IACL,OAAQ,IACR,MAAO,IACP,IAAK,IACL,IAAK,IACL,QAAS,IACT,KAAM,IACN,GAAI,IACJ,KAAM,IACN,KAAM,IACN,MAAO,IACP,MAAO,IACP,OAAQ,IACR,UAAW,IACX,OAAQ,IACR,OAAQ,IACR,IAAK,IACL,IAAK,IACL,MAAO,IACP,OAAQ,IACR,SAAU,IACV,KAAM,IACN,IAAK,GACP,EAaa,GAAiB,CAC5B,WACA,UAAU,GACV,YACA,GAAG,KACqB,CACxB,IAAM,EAAS,EACZ,MAAM,GAAG,EACT,IAAK,GAAM,EAAE,KAAK,CAAC,EACnB,OAAO,OAAO,EAEjB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,aAAY,EACZ,GAAI,WAEH,EAAO,KAAK,EAAO,IAAM,CACxB,IAAM,EAAU,EAAW,EAAW,EAAM,YAAY,IAAM,EAAS,EAEvE,OACE,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,aAC5B,CACE,EAFK,CAEL,CAET,CAAC,CACG,CAAA,CAEV"}

package/dist/components/ShortcutLabel/ShortcutLabel.d.ts

@@ -35,4 +35,4 @@ export interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html
  */
-export declare function ShortcutLabel({ shortcut, symbols, className, ...props }: ShortcutLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const ShortcutLabel: ({ shortcut, symbols, className, ...props }: ShortcutLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ShortcutLabel/ShortcutLabel.js

@@ -28,8 +28,7 @@ var n = {
 	pagedown: "⇟",
 	home: "⇱",
 	end: "⇲"
-};
-function r({ shortcut: r, symbols: i = !0, className: a, ...o }) {
+}, r = ({ shortcut: r, symbols: i = !0, className: a, ...o }) => {
 	let s = r.split("+").map((e) => e.trim()).filter(Boolean);
 	return /* @__PURE__ */ t("span", {
 		className: [e.label, a].filter(Boolean).join(" "),
@@ -43,7 +42,7 @@ function r({ shortcut: r, symbols: i = !0, className: a, ...o }) {
 			}, a);
 		})
 	});
-}
+};
 //#endregion
 export { r as ShortcutLabel };
 

package/dist/components/ShortcutLabel/ShortcutLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutLabel.js","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./ShortcutLabel.module.css\";\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl:      \"⌃\",\n  control:   \"⌃\",\n  shift:     \"⇧\",\n  alt:       \"⌥\",\n  option:    \"⌥\",\n  super:     \"⊞\",\n  win:       \"⊞\",\n  cmd:       \"⌘\",\n  command:   \"⌘\",\n  meta:      \"⌘\",\n  up:        \"↑\",\n  down:      \"↓\",\n  left:      \"←\",\n  right:     \"→\",\n  enter:     \"↵\",\n  return:    \"↵\",\n  backspace: \"⌫\",\n  delete:    \"⌦\",\n  escape:    \"⎋\",\n  esc:       \"⎋\",\n  tab:       \"⇥\",\n  space:     \"␣\",\n  pageup:    \"⇞\",\n  pagedown:  \"⇟\",\n  home:      \"⇱\",\n  end:       \"⇲\",\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport function ShortcutLabel({ shortcut, symbols = true, className, ...props }: ShortcutLabelProps) {\n  const tokens = shortcut.split(\"+\").map((t) => t.trim()).filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(\" \")}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols\n          ? (SYMBOL_MAP[token.toLowerCase()] ?? token)\n          : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;AA6BA,IAAM,IAAqC;CACzC,MAAW;CACX,SAAW;CACX,OAAW;CACX,KAAW;CACX,QAAW;CACX,OAAW;CACX,KAAW;CACX,KAAW;CACX,SAAW;CACX,MAAW;CACX,IAAW;CACX,MAAW;CACX,MAAW;CACX,OAAW;CACX,OAAW;CACX,QAAW;CACX,WAAW;CACX,QAAW;CACX,QAAW;CACX,KAAW;CACX,KAAW;CACX,OAAW;CACX,QAAW;CACX,UAAW;CACX,MAAW;CACX,KAAW;CACZ;AAaD,SAAgB,EAAc,EAAE,aAAU,aAAU,IAAM,cAAW,GAAG,KAA6B;CACnG,IAAM,IAAS,EAAS,MAAM,IAAI,CAAC,KAAK,MAAM,EAAE,MAAM,CAAC,CAAC,OAAO,QAAQ;AAEvE,QACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,cAAY;EACZ,GAAI;YAEH,EAAO,KAAK,GAAO,MAAM;GACxB,IAAM,IAAU,IACX,EAAW,EAAM,aAAa,KAAK,IACpC;AAEJ,UACE,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;IACG,EAFI,EAEJ;IAER;EACG,CAAA"}
+{"version":3,"file":"ShortcutLabel.js","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ShortcutLabel.module.css';\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl: '⌃',\n  control: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  option: '⌥',\n  super: '⊞',\n  win: '⊞',\n  cmd: '⌘',\n  command: '⌘',\n  meta: '⌘',\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  enter: '↵',\n  return: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  escape: '⎋',\n  esc: '⎋',\n  tab: '⇥',\n  space: '␣',\n  pageup: '⇞',\n  pagedown: '⇟',\n  home: '⇱',\n  end: '⇲',\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport const ShortcutLabel = ({\n  shortcut,\n  symbols = true,\n  className,\n  ...props\n}: ShortcutLabelProps) => {\n  const tokens = shortcut\n    .split('+')\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(' ')}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols ? (SYMBOL_MAP[token.toLowerCase()] ?? token) : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n};\n"],"mappings":";;;AA8BA,IAAM,IAAqC;CACzC,MAAM;CACN,SAAS;CACT,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,KAAK;CACL,KAAK;CACL,SAAS;CACT,MAAM;CACN,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,KAAK;CACL,OAAO;CACP,QAAQ;CACR,UAAU;CACV,MAAM;CACN,KAAK;AACP,GAaa,KAAiB,EAC5B,aACA,aAAU,IACV,cACA,GAAG,QACqB;CACxB,IAAM,IAAS,EACZ,MAAM,GAAG,EACT,KAAK,MAAM,EAAE,KAAK,CAAC,EACnB,OAAO,OAAO;CAEjB,OACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7D,cAAY;EACZ,GAAI;YAEH,EAAO,KAAK,GAAO,MAAM;GACxB,IAAM,IAAU,IAAW,EAAW,EAAM,YAAY,MAAM,IAAS;GAEvE,OACE,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;GACE,GAFK,CAEL;EAET,CAAC;CACG,CAAA;AAEV"}

package/dist/components/ShortcutLabel/index.d.ts

@@ -1,2 +1,2 @@
-export { ShortcutLabel } from './ShortcutLabel';
 export type { ShortcutLabelProps } from './ShortcutLabel';
+export { ShortcutLabel } from './ShortcutLabel';

package/dist/components/ShortcutLabel.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ShortcutLabel/ShortcutLabel.cjs`);exports.ShortcutLabel=e.ShortcutLabel;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ShortcutLabel/ShortcutLabel.cjs");exports.ShortcutLabel=e.ShortcutLabel;

package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ShortcutsDialog.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=`button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])`;function a({open:a,onClose:o,title:s=`Keyboard Shortcuts`,sections:c}){let[l,u]=(0,t.useState)(``),d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useRef)(`shortcuts-title-${Math.random().toString(36).slice(2,9)}`);(0,t.useEffect)(()=>{a?(p.current=document.activeElement,requestAnimationFrame(()=>f.current?.focus())):(u(``),p.current?.focus())},[a]);let h=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),o();return}if(e.key!==`Tab`)return;let t=Array.from(d.current?.querySelectorAll(i)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[o]);if(!a)return null;let g=l.trim().toLowerCase(),_=c.map(e=>({...e,shortcuts:e.shortcuts.filter(({description:e,keys:t})=>!g||e.toLowerCase().includes(g)||t.some(e=>e.toLowerCase().includes(g)))})).filter(e=>e.shortcuts.length>0),v=(0,r.jsx)(`div`,{className:e.default.backdrop,onClick:o,"aria-hidden":`true`,children:(0,r.jsxs)(`div`,{ref:d,role:`dialog`,"aria-modal":`true`,"aria-labelledby":m.current,className:e.default.dialog,onKeyDown:h,onClick:e=>e.stopPropagation(),children:[(0,r.jsxs)(`div`,{className:e.default.header,children:[(0,r.jsx)(`span`,{id:m.current,className:e.default.title,children:s}),(0,r.jsx)(`button`,{type:`button`,className:e.default.closeBtn,"aria-label":`Close`,onClick:o,children:`×`})]}),(0,r.jsxs)(`div`,{className:e.default.searchRow,children:[(0,r.jsx)(`span`,{className:e.default.searchIcon,"aria-hidden":`true`,children:`⌕`}),(0,r.jsx)(`input`,{ref:f,type:`search`,className:e.default.searchInput,placeholder:`Search shortcuts…`,value:l,onChange:e=>u(e.target.value),"aria-label":`Search shortcuts`}),l&&(0,r.jsx)(`button`,{type:`button`,className:e.default.searchClear,"aria-label":`Clear search`,onClick:()=>{u(``),f.current?.focus()},children:`×`})]}),(0,r.jsx)(`div`,{className:e.default.body,role:`list`,children:_.length===0?(0,r.jsxs)(`p`,{className:e.default.empty,children:[`No shortcuts match "`,l,`"`]}):_.map(t=>(0,r.jsxs)(`section`,{className:e.default.section,children:[(0,r.jsx)(`h3`,{className:e.default.sectionTitle,children:t.title}),(0,r.jsx)(`ul`,{className:e.default.list,children:t.shortcuts.map(t=>(0,r.jsxs)(`li`,{className:e.default.row,role:`listitem`,children:[(0,r.jsx)(`span`,{className:e.default.keys,"aria-label":t.keys.join(` + `),children:t.keys.map((n,i)=>(0,r.jsxs)(`span`,{className:e.default.keyCap,children:[(0,r.jsx)(`kbd`,{children:n}),i<t.keys.length-1&&(0,r.jsx)(`span`,{className:e.default.plus,"aria-hidden":`true`,children:`+`})]},i))}),(0,r.jsx)(`span`,{className:e.default.description,children:t.description})]},t.description))})]},t.title))})]})});return typeof document>`u`?v:(0,n.createPortal)(v,document.body)}exports.ShortcutsDialog=a;
+const e=require("./ShortcutsDialog.module.css.cjs");let t=require("react"),n=require("react-dom"),r=require("react/jsx-runtime");var i=`button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])`,a=({open:a,onClose:o,title:s=`Keyboard Shortcuts`,sections:c})=>{let[l,u]=(0,t.useState)(``),d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useRef)(`shortcuts-title-${Math.random().toString(36).slice(2,9)}`);(0,t.useEffect)(()=>{a?(p.current=document.activeElement,requestAnimationFrame(()=>f.current?.focus())):(u(``),p.current?.focus())},[a]);let h=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),o();return}if(e.key!==`Tab`)return;let t=Array.from(d.current?.querySelectorAll(i)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[o]);if(!a)return null;let g=l.trim().toLowerCase(),_=c.map(e=>({...e,shortcuts:e.shortcuts.filter(({description:e,keys:t})=>!g||e.toLowerCase().includes(g)||t.some(e=>e.toLowerCase().includes(g)))})).filter(e=>e.shortcuts.length>0),v=(0,r.jsx)(`div`,{className:e.default.backdrop,onClick:o,"aria-hidden":`true`,children:(0,r.jsxs)(`div`,{ref:d,role:`dialog`,"aria-modal":`true`,"aria-labelledby":m.current,className:e.default.dialog,onKeyDown:h,onClick:e=>e.stopPropagation(),children:[(0,r.jsxs)(`div`,{className:e.default.header,children:[(0,r.jsx)(`span`,{id:m.current,className:e.default.title,children:s}),(0,r.jsx)(`button`,{type:`button`,className:e.default.closeBtn,"aria-label":`Close`,onClick:o,children:`×`})]}),(0,r.jsxs)(`div`,{className:e.default.searchRow,children:[(0,r.jsx)(`span`,{className:e.default.searchIcon,"aria-hidden":`true`,children:`⌕`}),(0,r.jsx)(`input`,{ref:f,type:`search`,className:e.default.searchInput,placeholder:`Search shortcuts…`,value:l,onChange:e=>u(e.target.value),"aria-label":`Search shortcuts`}),l&&(0,r.jsx)(`button`,{type:`button`,className:e.default.searchClear,"aria-label":`Clear search`,onClick:()=>{u(``),f.current?.focus()},children:`×`})]}),(0,r.jsx)(`div`,{className:e.default.body,role:`list`,children:_.length===0?(0,r.jsxs)(`p`,{className:e.default.empty,children:[`No shortcuts match "`,l,`"`]}):_.map(t=>(0,r.jsxs)(`section`,{className:e.default.section,children:[(0,r.jsx)(`h3`,{className:e.default.sectionTitle,children:t.title}),(0,r.jsx)(`ul`,{className:e.default.list,children:t.shortcuts.map(t=>(0,r.jsxs)(`li`,{className:e.default.row,children:[(0,r.jsx)(`span`,{className:e.default.keys,"aria-label":t.keys.join(` + `),children:t.keys.map((n,i)=>(0,r.jsxs)(`span`,{className:e.default.keyCap,children:[(0,r.jsx)(`kbd`,{children:n}),i<t.keys.length-1&&(0,r.jsx)(`span`,{className:e.default.plus,"aria-hidden":`true`,children:`+`})]},i))}),(0,r.jsx)(`span`,{className:e.default.description,children:t.description})]},t.description))})]},t.title))})]})});return typeof document>`u`?v:(0,n.createPortal)(v,document.body)};exports.ShortcutsDialog=a;
 //# sourceMappingURL=ShortcutsDialog.cjs.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./ShortcutsDialog.module.css\";\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport function ShortcutsDialog({\n  open,\n  onClose,\n  title = \"Keyboard Shortcuts\",\n  sections,\n}: ShortcutsDialogProps) {\n  const [query, setQuery] = useState(\"\");\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery(\"\");\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      if (e.key !== \"Tab\") return;\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) return null;\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={onClose}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button\n            type=\"button\"\n            className={styles.closeBtn}\n            aria-label=\"Close\"\n            onClick={onClose}\n          >\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">⌕</span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => { setQuery(\"\"); searchRef.current?.focus(); }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row} role=\"listitem\">\n                      <span className={styles.keys} aria-label={shortcut.keys.join(\" + \")}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">+</span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShortcutsDialog.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport const ShortcutsDialog = ({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) => {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/ShortcutsDialog/ShortcutsDialog.d.ts

@@ -34,4 +34,4 @@ export interface ShortcutsDialogProps {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html
  */
-export declare function ShortcutsDialog({ open, onClose, title, sections, }: ShortcutsDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const ShortcutsDialog: ({ open, onClose, title, sections, }: ShortcutsDialogProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ShortcutsDialog/ShortcutsDialog.js

@@ -3,8 +3,7 @@ import { useCallback as t, useEffect as n, useRef as r, useState as i } from "re
 import { createPortal as a } from "react-dom";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/ShortcutsDialog/ShortcutsDialog.tsx
-var c = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function l({ open: l, onClose: u, title: d = "Keyboard Shortcuts", sections: f }) {
+var c = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", l = ({ open: l, onClose: u, title: d = "Keyboard Shortcuts", sections: f }) => {
 	let [p, m] = i(""), h = r(null), g = r(null), _ = r(null), v = r(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);
 	n(() => {
 		l ? (_.current = document.activeElement, requestAnimationFrame(() => g.current?.focus())) : (m(""), _.current?.focus());
@@ -98,7 +97,6 @@ function l({ open: l, onClose: u, title: d = "Keyboard Shortcuts", sections: f }
 							className: e.list,
 							children: t.shortcuts.map((t) => /* @__PURE__ */ s("li", {
 								className: e.row,
-								role: "listitem",
 								children: [/* @__PURE__ */ o("span", {
 									className: e.keys,
 									"aria-label": t.keys.join(" + "),
@@ -122,7 +120,7 @@ function l({ open: l, onClose: u, title: d = "Keyboard Shortcuts", sections: f }
 		})
 	});
 	return typeof document > "u" ? S : a(S, document.body);
-}
+};
 //#endregion
 export { l as ShortcutsDialog };
 

package/dist/components/ShortcutsDialog/ShortcutsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./ShortcutsDialog.module.css\";\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport function ShortcutsDialog({\n  open,\n  onClose,\n  title = \"Keyboard Shortcuts\",\n  sections,\n}: ShortcutsDialogProps) {\n  const [query, setQuery] = useState(\"\");\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery(\"\");\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      if (e.key !== \"Tab\") return;\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) return null;\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={onClose}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button\n            type=\"button\"\n            className={styles.closeBtn}\n            aria-label=\"Close\"\n            onClick={onClose}\n          >\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">⌕</span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => { setQuery(\"\"); searchRef.current?.focus(); }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row} role=\"listitem\">\n                      <span className={styles.keys} aria-label={shortcut.keys.join(\" + \")}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">+</span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport const ShortcutsDialog = ({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) => {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_backdrop_zvuhh_3`,t=`_dialog_zvuhh_26`,n=`_header_zvuhh_59`,r=`_title_zvuhh_67`,i=`_closeBtn_zvuhh_74`,a=`_searchRow_zvuhh_112`,o=`_searchIcon_zvuhh_124`,s=`_searchInput_zvuhh_132`,c=`_searchClear_zvuhh_151`,l=`_body_zvuhh_174`,u=`_empty_zvuhh_182`,d=`_section_zvuhh_193`,f=`_sectionTitle_zvuhh_199`,p=`_list_zvuhh_209`,m=`_row_zvuhh_225`,h=`_keys_zvuhh_240`,g=`_keyCap_zvuhh_247`,_=`_plus_zvuhh_277`,v=`_description_zvuhh_284`,y={backdrop:e,"backdrop-in":`_backdrop-in_zvuhh_1`,dialog:t,"dialog-in":`_dialog-in_zvuhh_1`,header:n,title:r,closeBtn:i,searchRow:a,searchIcon:o,searchInput:s,searchClear:c,body:l,empty:u,section:d,sectionTitle:f,list:p,row:m,keys:h,keyCap:g,plus:_,description:v};exports.default=y;
+var e={backdrop:`_backdrop_16tbw_3`,"backdrop-in":`_backdrop-in_16tbw_1`,dialog:`_dialog_16tbw_30`,"dialog-in":`_dialog-in_16tbw_1`,header:`_header_16tbw_63`,title:`_title_16tbw_71`,closeBtn:`_closeBtn_16tbw_78`,searchRow:`_searchRow_16tbw_117`,searchIcon:`_searchIcon_16tbw_129`,searchInput:`_searchInput_16tbw_137`,searchClear:`_searchClear_16tbw_158`,body:`_body_16tbw_183`,empty:`_empty_16tbw_191`,section:`_section_16tbw_202`,sectionTitle:`_sectionTitle_16tbw_208`,list:`_list_16tbw_218`,row:`_row_16tbw_234`,keys:`_keys_16tbw_249`,keyCap:`_keyCap_16tbw_256`,plus:`_plus_16tbw_286`,description:`_description_16tbw_293`};exports.default=e;
 //# sourceMappingURL=ShortcutsDialog.module.css.cjs.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.module.css.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n              opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button { display: none; }\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover { opacity: 1; }\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ShortcutsDialog.module.css.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button {\n  display: none;\n}\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover {\n  opacity: 1;\n}\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.js

@@ -1,28 +1,27 @@
-//#region src/components/ShortcutsDialog/ShortcutsDialog.module.css
-var e = "_backdrop_zvuhh_3", t = "_dialog_zvuhh_26", n = "_header_zvuhh_59", r = "_title_zvuhh_67", i = "_closeBtn_zvuhh_74", a = "_searchRow_zvuhh_112", o = "_searchIcon_zvuhh_124", s = "_searchInput_zvuhh_132", c = "_searchClear_zvuhh_151", l = "_body_zvuhh_174", u = "_empty_zvuhh_182", d = "_section_zvuhh_193", f = "_sectionTitle_zvuhh_199", p = "_list_zvuhh_209", m = "_row_zvuhh_225", h = "_keys_zvuhh_240", g = "_keyCap_zvuhh_247", _ = "_plus_zvuhh_277", v = "_description_zvuhh_284", y = {
-	backdrop: e,
-	"backdrop-in": "_backdrop-in_zvuhh_1",
-	dialog: t,
-	"dialog-in": "_dialog-in_zvuhh_1",
-	header: n,
-	title: r,
-	closeBtn: i,
-	searchRow: a,
-	searchIcon: o,
-	searchInput: s,
-	searchClear: c,
-	body: l,
-	empty: u,
-	section: d,
-	sectionTitle: f,
-	list: p,
-	row: m,
-	keys: h,
-	keyCap: g,
-	plus: _,
-	description: v
+var e = {
+	backdrop: "_backdrop_16tbw_3",
+	"backdrop-in": "_backdrop-in_16tbw_1",
+	dialog: "_dialog_16tbw_30",
+	"dialog-in": "_dialog-in_16tbw_1",
+	header: "_header_16tbw_63",
+	title: "_title_16tbw_71",
+	closeBtn: "_closeBtn_16tbw_78",
+	searchRow: "_searchRow_16tbw_117",
+	searchIcon: "_searchIcon_16tbw_129",
+	searchInput: "_searchInput_16tbw_137",
+	searchClear: "_searchClear_16tbw_158",
+	body: "_body_16tbw_183",
+	empty: "_empty_16tbw_191",
+	section: "_section_16tbw_202",
+	sectionTitle: "_sectionTitle_16tbw_208",
+	list: "_list_16tbw_218",
+	row: "_row_16tbw_234",
+	keys: "_keys_16tbw_249",
+	keyCap: "_keyCap_16tbw_256",
+	plus: "_plus_16tbw_286",
+	description: "_description_16tbw_293"
 };
 //#endregion
-export { y as default };
+export { e as default };
 
 //# sourceMappingURL=ShortcutsDialog.module.css.js.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.module.css.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n              opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button { display: none; }\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover { opacity: 1; }\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ShortcutsDialog.module.css.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button {\n  display: none;\n}\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover {\n  opacity: 1;\n}\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ShortcutsDialog/index.d.ts

@@ -1,2 +1,2 @@
+export type { ShortcutEntry, ShortcutsDialogProps, ShortcutsSection } from './ShortcutsDialog';
 export { ShortcutsDialog } from './ShortcutsDialog';
-export type { ShortcutsDialogProps, ShortcutsSection, ShortcutEntry } from './ShortcutsDialog';

package/dist/components/ShortcutsDialog.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ShortcutsDialog/ShortcutsDialog.cjs`);exports.ShortcutsDialog=e.ShortcutsDialog;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ShortcutsDialog/ShortcutsDialog.cjs");exports.ShortcutsDialog=e.ShortcutsDialog;

package/dist/components/Sidebar/Sidebar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../hooks/useBreakpoint.cjs`),t=require(`../SearchBar/SearchBar.cjs`),n=require(`../StatusPage/StatusPage.cjs`),r=require(`./Sidebar.module.css.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);var o=(0,i.createContext)(!1);function s(){return(0,i.useContext)(o)}var c=(0,i.createContext)(``);function l(e,t){let n=0;return i.Children.forEach(e,e=>{if(!(0,i.isValidElement)(e))return;let r=e.props;typeof r.label==`string`?r.label.toLowerCase().includes(t.toLowerCase())&&n++:r.children&&(n+=l(r.children,t))}),n}var u={blue:`variantBlue`,green:`variantGreen`,red:`variantRed`,yellow:`variantYellow`,black:`variantBlack`,transparent:`variantTransparent`,blurred:`variantBlurred`};function d({children:s,collapsed:d=!1,searchable:f,filter:p,onFilterChange:m,mode:h,variant:g=`classic`,className:_,...v}){let[y,b]=(0,i.useState)(``),{isNarrow:x}=e.useBreakpoint(),S=p!==void 0,C=S?p:y,w=e=>{S||b(e),m?.(e)},T=C.length>0,E=h??(x?`page`:`sidebar`),D=!T||l(s,C)>0;return(0,a.jsx)(o.Provider,{value:d,children:(0,a.jsx)(c.Provider,{value:C,children:(0,a.jsxs)(`nav`,{className:[r.default.sidebar,d?r.default.collapsed:null,E===`page`?r.default.pageMode:null,g===`classic`?null:r.default[u[g]],_].filter(Boolean).join(` `),...v,children:[f&&(0,a.jsx)(`div`,{className:r.default.searchWrap,children:(0,a.jsx)(t.SearchBar,{open:!0,value:C,onChange:e=>w(e.target.value),onClose:()=>w(``),onClear:()=>w(``),inline:!0})}),T&&!D?(0,a.jsx)(n.StatusPage,{title:`No Results`,description:`No items match your search.`,compact:!0}):s]})})})}exports.Sidebar=d,exports.SidebarCollapsedContext=o,exports.SidebarFilterContext=c,exports.useSidebarCollapsed=s;
+const e=require("../../hooks/useBreakpoint.cjs"),t=require("../SearchBar/SearchBar.cjs"),n=require("../StatusPage/StatusPage.cjs"),r=require("./Sidebar.module.css.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.createContext)(!1);function s(){return(0,i.useContext)(o)}var c=(0,i.createContext)(``);function l(e,t){let n=0;return i.Children.forEach(e,e=>{if(!(0,i.isValidElement)(e))return;let r=e.props;typeof r.label==`string`?r.label.toLowerCase().includes(t.toLowerCase())&&n++:r.children&&(n+=l(r.children,t))}),n}var u={blue:`variantBlue`,green:`variantGreen`,red:`variantRed`,yellow:`variantYellow`,black:`variantBlack`,transparent:`variantTransparent`,blurred:`variantBlurred`},d=({children:s,collapsed:d=!1,searchable:f,filter:p,onFilterChange:m,mode:h,variant:g=`classic`,className:_,...v})=>{let[y,b]=(0,i.useState)(``),{isNarrow:x}=e.useBreakpoint(),S=p!==void 0,C=S?p:y,w=e=>{S||b(e),m?.(e)},T=C.length>0,E=h??(x?`page`:`sidebar`),D=!T||l(s,C)>0;return(0,a.jsx)(o.Provider,{value:d,children:(0,a.jsx)(c.Provider,{value:C,children:(0,a.jsxs)(`nav`,{className:[r.default.sidebar,d?r.default.collapsed:null,E===`page`?r.default.pageMode:null,g===`classic`?null:r.default[u[g]],_].filter(Boolean).join(` `),...v,children:[f&&(0,a.jsx)(`div`,{className:r.default.searchWrap,children:(0,a.jsx)(t.SearchBar,{open:!0,value:C,onChange:e=>w(e.target.value),onClose:()=>w(``),onClear:()=>w(``),inline:!0})}),T&&!D?(0,a.jsx)(n.StatusPage,{title:`No Results`,description:`No items match your search.`,compact:!0}):s]})})})};exports.Sidebar=d,exports.SidebarCollapsedContext=o,exports.SidebarFilterContext=c,exports.useSidebarCollapsed=s;
 //# sourceMappingURL=Sidebar.cjs.map

package/dist/components/Sidebar/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  isValidElement,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { SearchBar } from \"../SearchBar\";\nimport { StatusPage } from \"../StatusPage\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./Sidebar.module.css\";\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\nexport const SidebarFilterContext = createContext(\"\");\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n    const props = child.props as Record<string, unknown>;\n    if (typeof props.label === \"string\") {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) count++;\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: \"variantBlue\",\n  green: \"variantGreen\",\n  red: \"variantRed\",\n  yellow: \"variantYellow\",\n  black: \"variantBlack\",\n  transparent: \"variantTransparent\",\n  blurred: \"variantBlurred\",\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: \"sidebar\" | \"page\";\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: \"classic\" | \"blue\" | \"green\" | \"red\" | \"yellow\" | \"black\" | \"transparent\" | \"blurred\";\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport function Sidebar({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = \"classic\",\n  className,\n  ...props\n}: SidebarProps) {\n  const [internalFilter, setInternalFilter] = useState(\"\");\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) setInternalFilter(v);\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? \"page\" : \"sidebar\");\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === \"page\" ? styles.pageMode : null,\n            variant !== \"classic\" ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange(\"\")}\n                onClear={() => handleFilterChange(\"\")}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage\n              title=\"No Results\"\n              description=\"No items match your search.\"\n              compact\n            />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n}\n"],"mappings":"+NAiBA,IAAa,GAAA,EAAA,EAAA,eAAwC,GAAM,CAG3D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,EAAwB,CAI5C,IAAa,GAAA,EAAA,EAAA,eAAqC,GAAG,CAKrD,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAUZ,OATA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CAAE,OAC5B,IAAM,EAAQ,EAAM,MAChB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,EAAE,IACrD,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,EAAO,GAElE,CACK,EAKT,IAAM,EAAuC,CAC3C,KAAM,cACN,MAAO,eACP,IAAK,aACL,OAAQ,gBACR,MAAO,eACP,YAAa,qBACb,QAAS,iBACV,CAwDD,SAAgB,EAAQ,CACtB,WACA,YAAY,GACZ,aACA,OAAQ,EACR,iBACA,OACA,UAAU,UACV,YACA,GAAG,GACY,CACf,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,GAAG,CAClD,CAAE,YAAa,EAAA,eAAe,CAE9B,EAAe,IAAqB,IAAA,GACpC,EAAc,EAAe,EAAmB,EAEhD,EAAsB,GAAc,CACnC,GAAc,EAAkB,EAAE,CACvC,IAAiB,EAAE,EAGf,EAAiB,EAAY,OAAS,EACtC,EAAgB,IAAS,EAAW,OAAS,WAC7C,EAAa,CAAC,GAAkB,EAAmB,EAAU,EAAY,CAAG,EAElF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CAAkC,MAAO,YACvC,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAA,QAAO,UAAY,KAC/B,IAAkB,OAAS,EAAA,QAAO,SAAW,KAC7C,IAAY,UAA4C,KAAhC,EAAA,QAAO,EAAa,IAC5C,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAVN,CAYG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAA,GACA,MAAO,EACP,SAAW,GAAM,EAAmB,EAAE,OAAO,MAAM,CACnD,YAAe,EAAmB,GAAG,CACrC,YAAe,EAAmB,GAAG,CACrC,OAAA,GACA,CAAA,CACE,CAAA,CAGP,GAAkB,CAAC,GAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,MAAM,aACN,YAAY,8BACZ,QAAA,GACA,CAAA,CAEF,EAEE,GACwB,CAAA,CACC,CAAA"}
+{"version":3,"file":"Sidebar.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const Sidebar = ({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) => {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n"],"mappings":"+NAoBA,IAAa,GAAA,EAAA,EAAA,eAAwC,EAAK,EAI1D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,CAAuB,CAC3C,CAIA,IAAa,GAAA,EAAA,EAAA,eAAqC,EAAE,EAKpD,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,CAAK,EACvB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,GACzD,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,CAAM,EAEnE,CAAC,EAEM,CACT,CAIA,IAAM,EAAuC,CAC3C,KAAM,cACN,MAAO,eACP,IAAK,aACL,OAAQ,gBACR,MAAO,eACP,YAAa,qBACb,QAAS,gBACX,EAwDa,GAAW,CACtB,WACA,YAAY,GACZ,aACA,OAAQ,EACR,iBACA,OACA,UAAU,UACV,YACA,GAAG,KACe,CAClB,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,EAAE,EACjD,CAAE,YAAa,EAAA,cAAc,EAE7B,EAAe,IAAqB,IAAA,GACpC,EAAc,EAAe,EAAmB,EAEhD,EAAsB,GAAc,CACnC,GACH,EAAkB,CAAC,EAGrB,IAAiB,CAAC,CACpB,EAEM,EAAiB,EAAY,OAAS,EACtC,EAAgB,IAAS,EAAW,OAAS,WAC7C,EAAa,CAAC,GAAkB,EAAmB,EAAU,CAAW,EAAI,EAElF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CAAkC,MAAO,YACvC,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAA,QAAO,UAAY,KAC/B,IAAkB,OAAS,EAAA,QAAO,SAAW,KAC7C,IAAY,UAA4C,KAAhC,EAAA,QAAO,EAAa,IAC5C,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAVN,CAYG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAA,GACA,MAAO,EACP,SAAW,GAAM,EAAmB,EAAE,OAAO,KAAK,EAClD,YAAe,EAAmB,EAAE,EACpC,YAAe,EAAmB,EAAE,EACpC,OAAA,EACD,CAAA,CACE,CAAA,EAGN,GAAkB,CAAC,GAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,MAAM,aAAa,YAAY,8BAA8B,QAAA,EAAS,CAAA,EAElF,CAEC,GACwB,CAAA,CACC,CAAA,CAEtC"}

package/dist/components/Sidebar/Sidebar.d.ts

@@ -34,7 +34,7 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
      * When omitted the sidebar auto-switches to `"page"` at ≤ 400 sp,
      * mirroring `AdwSidebar` mobile behaviour.
      */
-    mode?: "sidebar" | "page";
+    mode?: 'sidebar' | 'page';
     /**
      * Visual style variant for the sidebar background.
      * - `"classic"` — default GNOME gray
@@ -43,7 +43,7 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
      * - `"transparent"` — no background, inherits parent
      * - `"blurred"` — frosted glass (backdrop-filter blur), like macOS
      */
-    variant?: "classic" | "blue" | "green" | "red" | "yellow" | "black" | "transparent" | "blurred";
+    variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';
 }
 /**
  * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.
@@ -56,4 +56,4 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html
  */
-export declare function Sidebar({ children, collapsed, searchable, filter: controlledFilter, onFilterChange, mode, variant, className, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare const Sidebar: ({ children, collapsed, searchable, filter: controlledFilter, onFilterChange, mode, variant, className, ...props }: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/Sidebar.js

@@ -26,8 +26,7 @@ var h = {
 	black: "variantBlack",
 	transparent: "variantTransparent",
 	blurred: "variantBlurred"
-};
-function g({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterChange: f, mode: g, variant: _ = "classic", className: v, ...y }) {
+}, g = ({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterChange: f, mode: g, variant: _ = "classic", className: v, ...y }) => {
 	let [b, x] = c(""), { isNarrow: S } = e(), C = s !== void 0, w = C ? s : b, T = (e) => {
 		C || x(e), f?.(e);
 	}, E = w.length > 0, D = g ?? (S ? "page" : "sidebar"), O = !E || m(i, w) > 0;
@@ -62,7 +61,7 @@ function g({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterC
 			})
 		})
 	});
-}
+};
 //#endregion
 export { g as Sidebar, d as SidebarCollapsedContext, p as SidebarFilterContext, f as useSidebarCollapsed };