npm - @gnome-ui/react - Versions diffs - 1.45.0 → 1.45.1 - Mend

@gnome-ui/react 1.45.0 → 1.45.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (610) hide show

package/dist/components/SegmentedBar/SegmentedBar.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedBar.module.css.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── /\n\n.track {\n display: flex;\n width: 100%;\n height: 8px;\n border-radius: var(--gnome-radius-pill);\n overflow: hidden;\n gap: 2px;\n / Track color is visible in the 2 px gaps between segments /\n background-color: var(--gnome-light-3, #deddda);\n}\n\n/ ─── Segment ───────────────────────────────────────────────────────────────── /\n\n.segment {\n height: 100%;\n cursor: default;\n transition:\n opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed { opacity: 0.35; }\n.highlighted { filter: brightness(1.15); }\n\n/ ─── Default palette (GNOME tokens, cycling across color families) ─────────── /\n\n.color0 { background-color: var(--gnome-blue-3, #3584e4); }\n.color1 { background-color: var(--gnome-green-3, #33d17a); }\n.color2 { background-color: var(--gnome-purple-3, #9141ac); }\n.color3 { background-color: var(--gnome-orange-3, #ff7800); }\n.color4 { background-color: var(--gnome-red-3, #e01b24); }\n.color5 { background-color: var(--gnome-brown-3, #986a44); }\n.color6 { background-color: var(--gnome-blue-5, #1a5fb4); }\n.color7 { background-color: var(--gnome-green-5, #26a269); }\n\n/ ─── Dark mode ─────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .track {\n background-color: var(--gnome-dark-2, #5e5c64);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .segment {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SegmentedBar.module.css.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── /\n\n.track {\n display: flex;\n width: 100%;\n height: 8px;\n border-radius: var(--gnome-radius-pill);\n overflow: hidden;\n gap: 2px;\n / Track color is visible in the 2 px gaps between segments /\n background-color: var(--gnome-light-3, #deddda);\n}\n\n/ ─── Segment ───────────────────────────────────────────────────────────────── /\n\n.segment {\n height: 100%;\n cursor: default;\n transition:\n opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n opacity: 0.35;\n}\n.highlighted {\n filter: brightness(1.15);\n}\n\n/ ─── Default palette (GNOME tokens, cycling across color families) ─────────── /\n\n.color0 {\n background-color: var(--gnome-blue-3, #3584e4);\n}\n.color1 {\n background-color: var(--gnome-green-3, #33d17a);\n}\n.color2 {\n background-color: var(--gnome-purple-3, #9141ac);\n}\n.color3 {\n background-color: var(--gnome-orange-3, #ff7800);\n}\n.color4 {\n background-color: var(--gnome-red-3, #e01b24);\n}\n.color5 {\n background-color: var(--gnome-brown-3, #986a44);\n}\n.color6 {\n background-color: var(--gnome-blue-5, #1a5fb4);\n}\n.color7 {\n background-color: var(--gnome-green-5, #26a269);\n}\n\n/ ─── Dark mode ─────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .track {\n background-color: var(--gnome-dark-2, #5e5c64);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .segment {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/SegmentedBar/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export { SegmentedBar } from './SegmentedBar';
 export type { SegmentedBarProps, SegmentedBarSegment } from './SegmentedBar';
+export { SegmentedBar } from './SegmentedBar';

package/dist/components/Separator/Separator.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\~~";\~~nimport styles from \"./Separator.module.css\";\n\nexport type SeparatorOrientation = \"horizontal\" \| \"vertical\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n /** Direction of the dividing line. Defaults to `\"horizontal\"`. /\n orientation?: SeparatorOrientation;\n}\n\n/\n Thin dividing line that separates groups of content.\n \n Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n \n @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({\n orientation = \"horizontal~~\",\n~~ className~~,\n~~ ...props\n}: SeparatorProps) {\n const classes = [\n styles.separator,\n orientation === \"vertical\" ? styles.vertical : styles.horizontal,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n if (orientation === \"vertical\") {\n return (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className={classes}\n {...(props as HTMLAttributes<HTMLDivElement>)}\n />\n );\n }\n\n return <hr className={classes} {...props} />;\n}\n"],"mappings":"~~iFAkBA~~,SAAgB,EAAU,~~CACxB~~,cAAc,~~aACd~~,~~YACA~~,GAAG,~~GACc~~,~~CACjB~~,IAAM,EAAU,CACd,EAAA,QAAO,UACP,IAAgB,WAAa,EAAA,QAAO,SAAW,EAAA,QAAO,WACtD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAaZ,OAXI,IAAgB,YAEhB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,YACL,mBAAiB,WACjB,UAAW,EACX,GAAK,EACL,CAAA,EAIC,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAS,GAAI,EAAS,CAAA"}
1	+ {"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' \| 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n /** Direction of the dividing line. Defaults to `\"horizontal\"`. /\n orientation?: SeparatorOrientation;\n}\n\n/\n Thin dividing line that separates groups of content.\n \n Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n \n @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({ orientation = 'horizontal', className, ...props }: SeparatorProps) {\n const classes = [\n styles.separator,\n orientation === 'vertical' ? styles.vertical : styles.horizontal,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (orientation === 'vertical') {\n return (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className={classes}\n {...(props as HTMLAttributes<HTMLDivElement>)}\n />\n );\n }\n\n return <hr className={classes} {...props} />;\n}\n"],"mappings":"iFAmBA,SAAgB,EAAU,CAAE,cAAc,aAAc,YAAW,GAAG,GAAyB,CAC7F,IAAM,EAAU,CACd,EAAA,QAAO,UACP,IAAgB,WAAa,EAAA,QAAO,SAAW,EAAA,QAAO,WACtD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAaZ,OAXI,IAAgB,YAEhB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,YACL,mBAAiB,WACjB,UAAW,EACX,GAAK,EACL,CAAA,EAIC,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAS,GAAI,EAAS,CAAA"}

package/dist/components/Separator/Separator.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorOrientation = 'horizontal' | 'vertical';
 export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
     /** Direction of the dividing line. Defaults to `"horizontal"`. */
     orientation?: SeparatorOrientation;

package/dist/components/Separator/Separator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\~~";\~~nimport styles from \"./Separator.module.css\";\n\nexport type SeparatorOrientation = \"horizontal\" \| \"vertical\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n /** Direction of the dividing line. Defaults to `\"horizontal\"`. /\n orientation?: SeparatorOrientation;\n}\n\n/\n Thin dividing line that separates groups of content.\n \n Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n \n @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({\n orientation = \"horizontal~~\",\n~~ className~~,\n~~ ...props\n}: SeparatorProps) {\n const classes = [\n styles.separator,\n orientation === \"vertical\" ? styles.vertical : styles.horizontal,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n if (orientation === \"vertical\") {\n return (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className={classes}\n {...(props as HTMLAttributes<HTMLDivElement>)}\n />\n );\n }\n\n return <hr className={classes} {...props} />;\n}\n"],"mappings":";;;~~AAkBA~~,SAAgB,EAAU,~~EACxB~~,iBAAc,~~cACd~~,~~cACA~~,GAAG,~~KACc~~;~~CACjB~~,IAAM,IAAU;EACd,EAAO;EACP,MAAgB,aAAa,EAAO,WAAW,EAAO;EACtD;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAaZ,QAXI,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAW;EACX,GAAK;EACL,CAAA,GAIC,kBAAC,MAAD;EAAI,WAAW;EAAS,GAAI;EAAS,CAAA"}
1	+ {"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' \| 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n /** Direction of the dividing line. Defaults to `\"horizontal\"`. /\n orientation?: SeparatorOrientation;\n}\n\n/\n Thin dividing line that separates groups of content.\n \n Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n \n @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({ orientation = 'horizontal', className, ...props }: SeparatorProps) {\n const classes = [\n styles.separator,\n orientation === 'vertical' ? styles.vertical : styles.horizontal,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (orientation === 'vertical') {\n return (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className={classes}\n {...(props as HTMLAttributes<HTMLDivElement>)}\n />\n );\n }\n\n return <hr className={classes} {...props} />;\n}\n"],"mappings":";;;AAmBA,SAAgB,EAAU,EAAE,iBAAc,cAAc,cAAW,GAAG,KAAyB;CAC7F,IAAM,IAAU;EACd,EAAO;EACP,MAAgB,aAAa,EAAO,WAAW,EAAO;EACtD;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAaZ,QAXI,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAW;EACX,GAAK;EACL,CAAA,GAIC,kBAAC,MAAD;EAAI,WAAW;EAAS,GAAI;EAAS,CAAA"}

package/dist/components/Separator/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
+export type { SeparatorOrientation, SeparatorProps } from './Separator';
 export { Separator } from './Separator';
-export type { SeparatorProps, SeparatorOrientation } from './Separator';

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

	@@ -1 +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"}
1	+ {"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 function 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,IACN,CAaD,SAAgB,EAAc,CAC5B,WACA,UAAU,GACV,YACA,GAAG,GACkB,CACrB,IAAM,EAAS,EACZ,MAAM,IAAI,CACV,IAAK,GAAM,EAAE,MAAM,CAAC,CACpB,OAAO,QAAQ,CAElB,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,EAAW,EAAW,EAAM,aAAa,GAAK,EAAS,EAEvE,OACE,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,aAC5B,EACG,CAFI,EAEJ,EAER,CACG,CAAA"}

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

	@@ -1 +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"}
1	+ {"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 function 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;CACN;AAaD,SAAgB,EAAc,EAC5B,aACA,aAAU,IACV,cACA,GAAG,KACkB;CACrB,IAAM,IAAS,EACZ,MAAM,IAAI,CACV,KAAK,MAAM,EAAE,MAAM,CAAC,CACpB,OAAO,QAAQ;AAElB,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,IAAW,EAAW,EAAM,aAAa,KAAK,IAAS;AAEvE,UACE,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;IACG,EAFI,EAEJ;IAER;EACG,CAAA"}

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

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

package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs CHANGED Viewed

@@ -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"])`;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,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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 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\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.js CHANGED Viewed

@@ -98,7 +98,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(" + "),

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

	@@ -1 +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":";;;;;~~AAyCA~~,IAAM,IACJ;AAgBF,SAAgB,EAAgB,EAC9B,SACA,YACA,WAAQ,sBACR,eACuB;CACvB,IAAM,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,IAAY,EAAuB,KAAK,EACxC,IAAY,EAAyB,KAAK,EAC1C,IAAoB,EAAuB,KAAK,EAChD,IAAU,EAAO,mBAAmB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,GAAG;AAGnF,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,eAErC,4BAA4B,EAAU,SAAS,OAAO,CAAC,KAEvD,EAAS,GAAG,EACX,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAGV,IAAM,IAAgB,GACnB,MAAqC;AACpC,MAAI,EAAE,QAAQ,UAAU;AAEtB,GADA,EAAE,gBAAgB,EAClB,GAAS;~~AACT~~;;~~AAEF~~,MAAI,EAAE,QAAQ,~~MAAO~~;~~EAErB~~,IAAM,IAAY,MAAM,KACtB,EAAU,SAAS,iBAA8B,EAAU,IAAI,EAAE,CAClE;~~AACD~~,MAAI,EAAU,WAAW,~~EAAG~~;~~EAE5B~~,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,EAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAM,OAAO;IAInB,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,~~EAAM~~,QAAO;~~CAGlB~~,IAAM,IAAI,EAAM,MAAM,CAAC,aAAa,EAC9B,IAAW,EACd,KAAK,OAAa;EACjB,GAAG;EACH,WAAW,EAAQ,UAAU,QAC1B,EAAE,gBAAa,cACd,CAAC,KACD,EAAY,aAAa,CAAC,SAAS,EAAE,IACrC,EAAK,MAAM,MAAM,EAAE,aAAa,CAAC,SAAS,EAAE,CAAC,CAChD;EACF,EAAE,CACF,QAAQ,MAAM,EAAE,UAAU,SAAS,EAAE,EAElC,IACJ,kBAAC,OAAD;~~EACE~~,WAAW,EAAO;~~EAClB~~,SAAS;~~EACT~~,eAAY;~~YAEZ~~,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,EAAQ;GACzB,WAAW,EAAO;GAClB,WAAW;GACX,UAAU,MAAM,EAAE,iBAAiB;aAPrC;IAUE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,QAAD;MAAM,IAAI,EAAQ;MAAS,WAAW,EAAO;gBAC1C;MACI,CAAA,EACP,kBAAC,UAAD;~~MACE~~,MAAK;~~MACL~~,WAAW,EAAO;~~MAClB~~,cAAW;~~MACX~~,SAAS;~~gBACV~~;~~MAEQ~~,CAAA,CACL;;IAGN,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAY,eAAY;iBAAO;~~OAAQ~~,CAAA;~~MAC/D~~,kBAAC,SAAD;OACE,KAAK;OACL,MAAK;OACL,WAAW,EAAO;OAClB,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;OACzC,cAAW;OACX,CAAA;MACD,KACC,kBAAC,UAAD;OACE,MAAK;OACL,WAAW,EAAO;OAClB,cAAW;OACX,eAAe;~~AAAgB~~,~~QAAd~~,EAAS,GAAG,~~EAAE~~,EAAU,SAAS,OAAO;;~~iBAC1D~~;OAEQ,CAAA;MAEP;;IAGN,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAM,MAAK;eAC/B,EAAS,WAAW,IACnB,kBAAC,KAAD;MAAG,WAAW,EAAO;gBAArB;OAA4B;OAAqB;OAAM;OAAK;UAE5D,EAAS,KAAK,MACZ,kBAAC,WAAD;MAA6B,WAAW,EAAO;gBAA/C,CACE,kBAAC,MAAD;OAAI,WAAW,EAAO;iBAAe,EAAQ;OAAW,CAAA,EACxD,kBAAC,MAAD;OAAI,WAAW,EAAO;iBACnB,EAAQ,UAAU,KAAK,MACtB,kBAAC,MAAD;QAA+B,WAAW,EAAO;~~QAAK~~,~~MAAK;kBAA3D,~~CACE,kBAAC,QAAD;SAAM,WAAW,EAAO;SAAM,cAAY,EAAS,KAAK,KAAK,MAAM;mBAChE,EAAS,KAAK,KAAK,GAAK,MACvB,kBAAC,QAAD;UAAc,WAAW,EAAO;oBAAhC,CACE,kBAAC,OAAD,EAAA,UAAM,GAAU,CAAA,EACf,IAAI,EAAS,KAAK,SAAS,KAC1B,kBAAC,QAAD;WAAM,WAAW,EAAO;WAAM,eAAY;qBAAO;~~WAAQ~~,CAAA,~~CAEtD~~;~~YALI~~,~~EAKJ~~,CACP;SACG,CAAA,EACP,kBAAC,QAAD;SAAM,WAAW,EAAO;mBAAc,EAAS;SAAmB,CAAA,CAC/D;~~UAZI~~,EAAS,~~YAYb~~,CACL;OACC,CAAA,CACG;~~QAnBI~~,EAAQ,~~MAmBZ~~,CACV;KAEA,CAAA;IACF;;EACF,CAAA;~~AAIR~~,~~QADI~~,OAAO,WAAa,~~MAAoB~~,~~IACrC~~,EAAa,GAAM,SAAS,KAAK"}
1	+ {"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 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\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 CHANGED Viewed

@@ -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_16tbw_3`,t=`_dialog_16tbw_30`,n=`_header_16tbw_63`,r=`_title_16tbw_71`,i=`_closeBtn_16tbw_78`,a=`_searchRow_16tbw_117`,o=`_searchIcon_16tbw_129`,s=`_searchInput_16tbw_137`,c=`_searchClear_16tbw_158`,l=`_body_16tbw_183`,u=`_empty_16tbw_191`,d=`_section_16tbw_202`,f=`_sectionTitle_16tbw_208`,p=`_list_16tbw_218`,m=`_row_16tbw_234`,h=`_keys_16tbw_249`,g=`_keyCap_16tbw_256`,_=`_plus_16tbw_286`,v=`_description_16tbw_293`,y={backdrop:e,"backdrop-in":`_backdrop-in_16tbw_1`,dialog:t,"dialog-in":`_dialog-in_16tbw_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;
 //# sourceMappingURL=ShortcutsDialog.module.css.cjs.map

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

	@@ -1 +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":""}
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 {\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 CHANGED Viewed

@@ -1,9 +1,9 @@
 //#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 = {
+var e = "_backdrop_16tbw_3", t = "_dialog_16tbw_30", n = "_header_16tbw_63", r = "_title_16tbw_71", i = "_closeBtn_16tbw_78", a = "_searchRow_16tbw_117", o = "_searchIcon_16tbw_129", s = "_searchInput_16tbw_137", c = "_searchClear_16tbw_158", l = "_body_16tbw_183", u = "_empty_16tbw_191", d = "_section_16tbw_202", f = "_sectionTitle_16tbw_208", p = "_list_16tbw_218", m = "_row_16tbw_234", h = "_keys_16tbw_249", g = "_keyCap_16tbw_256", _ = "_plus_16tbw_286", v = "_description_16tbw_293", y = {
 	backdrop: e,
-	"backdrop-in": "_backdrop-in_zvuhh_1",
+	"backdrop-in": "_backdrop-in_16tbw_1",
 	dialog: t,
-	"dialog-in": "_dialog-in_zvuhh_1",
+	"dialog-in": "_dialog-in_16tbw_1",
 	header: n,
 	title: r,
 	closeBtn: i,

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

	@@ -1 +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":""}
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 {\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 CHANGED Viewed

@@ -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/Sidebar/Sidebar.cjs.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 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) {\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,GAAM,CAI3D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,EAAwB,CAK5C,IAAa,GAAA,EAAA,EAAA,eAAqC,GAAG,CAKrD,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CACxB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,EAC1D,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,EAAO,GAElE,CAEK,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,GACH,EAAkB,EAAE,CAGtB,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,CAAY,MAAM,aAAa,YAAY,8BAA8B,QAAA,GAAU,CAAA,CAEnF,EAEE,GACwB,CAAA,CACC,CAAA"}

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

@@ -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.

package/dist/components/Sidebar/Sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidebar.js","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":";;;;;;;~~AAiBA~~,IAAa,IAA0B,EAAc,GAAM;~~AAG3D~~,SAAgB,IAAsB;AACpC,QAAO,EAAW,EAAwB;;~~AAI5C~~,IAAa,IAAuB,EAAc,GAAG;AAKrD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;~~AAUZ~~,~~QATA~~,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,~~CAAE~~;~~EAC5B~~,IAAM,IAAQ,EAAM;~~AACpB~~,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,~~IAAE~~,~~MACrD~~,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,~~EACK~~;;AAKT,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;CACV;AAwDD,SAAgB,EAAQ,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,EAAE,gBAAa,GAAe,EAE9B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;~~AAExC~~,~~EADK~~,~~KAAc~~,EAAkB,EAAE,~~EACvC~~,IAAiB,EAAE;IAGf,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,EAAY,GAAG;AAElF,QACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;KACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;MACnD,eAAe,EAAmB,GAAG;MACrC,eAAe,EAAmB,GAAG;MACrC,QAAA;MACA,CAAA;KACE,CAAA,EAGP,KAAkB,CAAC,IAClB,kBAAC,GAAD;~~KACE~~,OAAM;~~KACN~~,aAAY;~~KACZ~~,SAAA;~~KACA~~,CAAA,~~GAEF~~,EAEE;;GACwB,CAAA;EACC,CAAA"}
1	+ {"version":3,"file":"Sidebar.js","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 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) {\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":";;;;;;;AAoBA,IAAa,IAA0B,EAAc,GAAM;AAI3D,SAAgB,IAAsB;AACpC,QAAO,EAAW,EAAwB;;AAK5C,IAAa,IAAuB,EAAc,GAAG;AAKrD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAiBZ,QAhBA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CACxB;EAGF,IAAM,IAAQ,EAAM;AAEpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAC1D,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EAEK;;AAKT,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;CACV;AAwDD,SAAgB,EAAQ,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,EAAE,gBAAa,GAAe,EAE9B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;AAKxC,EAJK,KACH,EAAkB,EAAE,EAGtB,IAAiB,EAAE;IAGf,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,EAAY,GAAG;AAElF,QACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;KACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;MACnD,eAAe,EAAmB,GAAG;MACrC,eAAe,EAAmB,GAAG;MACrC,QAAA;MACA,CAAA;KACE,CAAA,EAGP,KAAkB,CAAC,IAClB,kBAAC,GAAD;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;KAAU,CAAA,GAEnF,EAEE;;GACwB,CAAA;EACC,CAAA"}

package/dist/components/Sidebar/Sidebar.module.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`_sidebar_1sdji_3`,t=`_section_1sdji_21`,n=`_sectionHeader_1sdji_35`,r=`_sectionHeaderIcon_1sdji_71`,i=`_sectionTitle_1sdji_78`,a=`_sectionChevron_1sdji_94`,o=`_sectionBody_1sdji_104`,s=`_sectionBodyCollapsed_1sdji_110`,c=`_sectionBodyInner_1sdji_114`,l=`_list_1sdji_120`,u=`_item_1sdji_131`,d=`_itemBtn_1sdji_137`,f=`_active_1sdji_184`,p=`_itemIcon_1sdji_200`,m=`_itemLabel_1sdji_213`,h=`_itemSuffix_1sdji_223`,g=`_contextMenu_1sdji_232`,_=`_contextMenuItem_1sdji_256`,v=`_contextMenuDestructive_1sdji_292`,y=`_searchWrap_1sdji_298`,b=`_variantBlue_1sdji_309`,x=`_variantGreen_1sdji_318`,S=`_variantRed_1sdji_327`,C=`_variantYellow_1sdji_336`,w=`_variantBlack_1sdji_345`,T=`_variantTransparent_1sdji_354`,E=`_variantBlurred_1sdji_359`,D=`_pageMode_1sdji_375`,O=`_dragOver_1sdji_382`,k=`_collapsed_1sdji_390`,A=`_itemCollapsed_1sdji_401`,j={sidebar:e,section:t,sectionHeader:n,sectionHeaderIcon:r,sectionTitle:i,sectionChevron:a,sectionBody:o,sectionBodyCollapsed:s,sectionBodyInner:c,list:l,item:u,itemBtn:d,active:f,itemIcon:p,itemLabel:m,itemSuffix:h,contextMenu:g,"menu-in":`_menu-in_1sdji_1`,contextMenuItem:_,contextMenuDestructive:v,searchWrap:y,variantBlue:b,variantGreen:x,variantRed:S,variantYellow:C,variantBlack:w,variantTransparent:T,variantBlurred:E,pageMode:D,dragOver:O,collapsed:k,itemCollapsed:A};exports.default=j;
+var e=`_sidebar_156vz_3`,t=`_section_156vz_21`,n=`_sectionHeader_156vz_35`,r=`_sectionHeaderIcon_156vz_71`,i=`_sectionTitle_156vz_78`,a=`_sectionChevron_156vz_94`,o=`_sectionBody_156vz_104`,s=`_sectionBodyCollapsed_156vz_110`,c=`_sectionBodyInner_156vz_114`,l=`_list_156vz_120`,u=`_item_156vz_131`,d=`_itemBtn_156vz_137`,f=`_active_156vz_184`,p=`_itemIcon_156vz_200`,m=`_itemLabel_156vz_213`,h=`_itemSuffix_156vz_223`,g=`_contextMenu_156vz_232`,_=`_contextMenuItem_156vz_262`,v=`_contextMenuDestructive_156vz_298`,y=`_searchWrap_156vz_304`,b=`_variantBlue_156vz_315`,x=`_variantGreen_156vz_324`,S=`_variantRed_156vz_333`,C=`_variantYellow_156vz_342`,w=`_variantBlack_156vz_351`,T=`_variantTransparent_156vz_360`,E=`_variantBlurred_156vz_365`,D=`_pageMode_156vz_381`,O=`_dragOver_156vz_388`,k=`_collapsed_156vz_396`,A=`_itemCollapsed_156vz_407`,j={sidebar:e,section:t,sectionHeader:n,sectionHeaderIcon:r,sectionTitle:i,sectionChevron:a,sectionBody:o,sectionBodyCollapsed:s,sectionBodyInner:c,list:l,item:u,itemBtn:d,active:f,itemIcon:p,itemLabel:m,itemSuffix:h,contextMenu:g,"menu-in":`_menu-in_156vz_1`,contextMenuItem:_,contextMenuDestructive:v,searchWrap:y,variantBlue:b,variantGreen:x,variantRed:S,variantYellow:C,variantBlack:w,variantTransparent:T,variantBlurred:E,pageMode:D,dragOver:O,collapsed:k,itemCollapsed:A};exports.default=j;
 //# sourceMappingURL=Sidebar.module.css.cjs.map