@gnome-ui/react 1.36.1 → 1.36.3

package/dist/components/ViewSwitcher/ViewSwitcherItem.js

@@ -0,0 +1,34 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./ViewSwitcher.module.css.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ViewSwitcher/ViewSwitcherItem.tsx
+function i({ label: i, icon: a, active: o = !1, className: s, disabled: c, ...l }) {
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": o,
+		tabIndex: o ? 0 : -1,
+		disabled: c,
+		className: [
+			t.item,
+			o ? t.active : null,
+			s
+		].filter(Boolean).join(" "),
+		...l,
+		children: [a && /* @__PURE__ */ n("span", {
+			className: t.itemIcon,
+			children: /* @__PURE__ */ n(e, {
+				icon: a,
+				size: "md",
+				"aria-hidden": !0
+			})
+		}), /* @__PURE__ */ n("span", {
+			className: t.itemLabel,
+			children: i
+		})]
+	});
+}
+//#endregion
+export { i as ViewSwitcherItem };
+
+//# sourceMappingURL=ViewSwitcherItem.js.map

package/dist/components/ViewSwitcher/ViewSwitcherItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherItem.js","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcherItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./ViewSwitcher.module.css\";\n\nexport interface ViewSwitcherItemProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Display label. */\n  label: string;\n  /** Optional icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n}\n\n/**\n * Individual option inside a `ViewSwitcher`.\n *\n * Renders as `role=\"radio\"` so the group has proper radiogroup semantics.\n */\nexport function ViewSwitcherItem({\n  label,\n  icon,\n  active = false,\n  className,\n  disabled,\n  ...props\n}: ViewSwitcherItemProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.itemLabel}>{label}</span>\n    </button>\n  );\n}\n"],"mappings":";;;;AAoBA,SAAgB,EAAiB,EAC/B,UACA,SACA,YAAS,IACT,cACA,aACA,GAAG,KACqB;AACxB,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAbN,CAeG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;GAAa,CAAA,CAC1C"}

package/dist/components/ViewSwitcher.cjs

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

package/dist/components/ViewSwitcher.d.ts

@@ -0,0 +1,2 @@
+export * from './ViewSwitcher/index'
+export {}

package/dist/components/ViewSwitcher.js

@@ -0,0 +1,3 @@
+import { ViewSwitcher as e } from "./ViewSwitcher/ViewSwitcher.js";
+import { ViewSwitcherItem as t } from "./ViewSwitcher/ViewSwitcherItem.js";
+export { e as ViewSwitcher, t as ViewSwitcherItem };

package/dist/components/ViewSwitcherBar/ViewSwitcherBar.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ViewSwitcherBar.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({children:n,reveal:r=!0,className:i,...a}){return r?(0,t.jsx)(`div`,{role:`navigation`,"aria-label":`Bottom navigation`,className:[e.default.bar,i].filter(Boolean).join(` `),...a,children:n}):null}exports.ViewSwitcherBar=n;
+//# sourceMappingURL=ViewSwitcherBar.cjs.map

package/dist/components/ViewSwitcherBar/ViewSwitcherBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherBar.cjs","names":[],"sources":["../../../src/components/ViewSwitcherBar/ViewSwitcherBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./ViewSwitcherBar.module.css\";\n\nexport interface ViewSwitcherBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `ViewSwitcherItem` elements to render in the bottom bar.\n   * Use the same items you pass to the header-bar `ViewSwitcher`.\n   */\n  children: ReactNode;\n  /**\n   * Whether the bar is visible.\n   * Typically tied to `useBreakpoint().isMedium` so it appears\n   * automatically when the window is ≤ 550 px wide.\n   */\n  reveal?: boolean;\n}\n\n/**\n * Bottom navigation bar for `ViewSwitcher` items on narrow screens (≤ 550 px),\n * mirroring the Adwaita `AdwViewSwitcherBar` pattern.\n *\n * Use in tandem with a `ViewSwitcher` in the `HeaderBar`:\n * - **Wide** (> 550 px): show the `ViewSwitcher` in the header, hide the bar.\n * - **Narrow** (≤ 550 px): hide the header switcher, reveal the bar.\n *\n * @example\n * const { isMedium } = useBreakpoint();\n * <>\n *   <HeaderBar\n *     title={\n *       !isMedium && (\n *         <ViewSwitcher aria-label=\"View\">…items…</ViewSwitcher>\n *       )\n *     }\n *   />\n *   <ViewSwitcherBar reveal={isMedium}>…items…</ViewSwitcherBar>\n * </>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcherBar.html\n */\nexport function ViewSwitcherBar({\n  children,\n  reveal = true,\n  className,\n  ...props\n}: ViewSwitcherBarProps) {\n  if (!reveal) return null;\n\n  return (\n    <div\n      role=\"navigation\"\n      aria-label=\"Bottom navigation\"\n      className={[styles.bar, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"uFAwCA,SAAgB,EAAgB,CAC9B,WACA,SAAS,GACT,YACA,GAAG,GACoB,CAGvB,OAFK,GAGH,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,aACL,aAAW,oBACX,UAAW,CAAC,EAAA,QAAO,IAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC5D,GAAI,EAEH,WACG,CAAA,CAVY"}

package/dist/components/ViewSwitcherBar/ViewSwitcherBar.js

@@ -0,0 +1,16 @@
+import e from "./ViewSwitcherBar.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ViewSwitcherBar/ViewSwitcherBar.tsx
+function n({ children: n, reveal: r = !0, className: i, ...a }) {
+	return r ? /* @__PURE__ */ t("div", {
+		role: "navigation",
+		"aria-label": "Bottom navigation",
+		className: [e.bar, i].filter(Boolean).join(" "),
+		...a,
+		children: n
+	}) : null;
+}
+//#endregion
+export { n as ViewSwitcherBar };
+
+//# sourceMappingURL=ViewSwitcherBar.js.map

package/dist/components/ViewSwitcherBar/ViewSwitcherBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherBar.js","names":[],"sources":["../../../src/components/ViewSwitcherBar/ViewSwitcherBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./ViewSwitcherBar.module.css\";\n\nexport interface ViewSwitcherBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `ViewSwitcherItem` elements to render in the bottom bar.\n   * Use the same items you pass to the header-bar `ViewSwitcher`.\n   */\n  children: ReactNode;\n  /**\n   * Whether the bar is visible.\n   * Typically tied to `useBreakpoint().isMedium` so it appears\n   * automatically when the window is ≤ 550 px wide.\n   */\n  reveal?: boolean;\n}\n\n/**\n * Bottom navigation bar for `ViewSwitcher` items on narrow screens (≤ 550 px),\n * mirroring the Adwaita `AdwViewSwitcherBar` pattern.\n *\n * Use in tandem with a `ViewSwitcher` in the `HeaderBar`:\n * - **Wide** (> 550 px): show the `ViewSwitcher` in the header, hide the bar.\n * - **Narrow** (≤ 550 px): hide the header switcher, reveal the bar.\n *\n * @example\n * const { isMedium } = useBreakpoint();\n * <>\n *   <HeaderBar\n *     title={\n *       !isMedium && (\n *         <ViewSwitcher aria-label=\"View\">…items…</ViewSwitcher>\n *       )\n *     }\n *   />\n *   <ViewSwitcherBar reveal={isMedium}>…items…</ViewSwitcherBar>\n * </>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcherBar.html\n */\nexport function ViewSwitcherBar({\n  children,\n  reveal = true,\n  className,\n  ...props\n}: ViewSwitcherBarProps) {\n  if (!reveal) return null;\n\n  return (\n    <div\n      role=\"navigation\"\n      aria-label=\"Bottom navigation\"\n      className={[styles.bar, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAwCA,SAAgB,EAAgB,EAC9B,aACA,YAAS,IACT,cACA,GAAG,KACoB;AAGvB,QAFK,IAGH,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,WAAW,CAAC,EAAO,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC5D,GAAI;EAEH;EACG,CAAA,GAVY"}

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

@@ -0,0 +1,2 @@
+var e={bar:`_bar_njcvu_3`};exports.default=e;
+//# sourceMappingURL=ViewSwitcherBar.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherBar.module.css.cjs","names":[],"sources":["../../../src/components/ViewSwitcherBar/ViewSwitcherBar.module.css"],"sourcesContent":["/* ─── Bottom bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: stretch;\n\n  width: 100%;\n  min-height: 52px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-top: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n\n  /* Safe-area inset for mobile browsers */\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* Each child (ViewSwitcherItem) fills equal width */\n.bar > * {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n\n  /* Override the horizontal pill style from ViewSwitcherItem */\n  border-radius: 0 !important;\n  padding: 6px 4px !important;\n  font-size: var(--gnome-font-size-caption, 0.8125rem) !important;\n  min-height: 52px;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-top-color: rgba(0, 0, 0, 0.3);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,5 @@
+var e = { bar: "_bar_njcvu_3" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ViewSwitcherBar.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherBar.module.css.js","names":[],"sources":["../../../src/components/ViewSwitcherBar/ViewSwitcherBar.module.css"],"sourcesContent":["/* ─── Bottom bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: stretch;\n\n  width: 100%;\n  min-height: 52px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-top: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n\n  /* Safe-area inset for mobile browsers */\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* Each child (ViewSwitcherItem) fills equal width */\n.bar > * {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n\n  /* Override the horizontal pill style from ViewSwitcherItem */\n  border-radius: 0 !important;\n  padding: 6px 4px !important;\n  font-size: var(--gnome-font-size-caption, 0.8125rem) !important;\n  min-height: 52px;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-top-color: rgba(0, 0, 0, 0.3);\n  }\n}\n"],"mappings":""}

package/dist/components/ViewSwitcherBar.cjs

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

package/dist/components/ViewSwitcherBar.d.ts

@@ -0,0 +1,2 @@
+export * from './ViewSwitcherBar/index'
+export {}

package/dist/components/ViewSwitcherBar.js

@@ -0,0 +1,2 @@
+import { ViewSwitcherBar as e } from "./ViewSwitcherBar/ViewSwitcherBar.js";
+export { e as ViewSwitcherBar };

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ViewSwitcherSidebar.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.createContext)(null);function i(){let e=(0,t.useContext)(r);if(!e)throw Error(`ViewSwitcherSidebarItem must be used inside ViewSwitcherSidebar`);return e}function a({value:i,onValueChange:a,"aria-label":o=`Views`,collapsed:s=!1,header:c,footer:l,children:u,className:d,...f}){let p=(0,t.useRef)(null);function m(e){let t=Array.from(p.current?.querySelectorAll(`[role=radio]:not(:disabled)`)??[]),n=t.findIndex(e=>e===document.activeElement);if(n===-1)return;let r=n;if(e.key===`ArrowDown`||e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowUp`||e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),t[r].focus(),t[r].click()}return(0,n.jsx)(r.Provider,{value:{value:i,onValueChange:a,collapsed:s},children:(0,n.jsxs)(`nav`,{className:[e.default.sidebar,s?e.default.sidebarCollapsed:null,d].filter(Boolean).join(` `),onKeyDown:m,...f,children:[c&&(0,n.jsx)(`div`,{className:e.default.header,children:c}),(0,n.jsx)(`ul`,{ref:p,role:`radiogroup`,"aria-label":o,className:e.default.list,children:u}),l&&(0,n.jsx)(`div`,{className:e.default.footer,children:l})]})})}exports.ViewSwitcherSidebar=a,exports.useViewSwitcherSidebar=i;
+//# sourceMappingURL=ViewSwitcherSidebar.cjs.map

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherSidebar.cjs","names":[],"sources":["../../../src/components/ViewSwitcherSidebar/ViewSwitcherSidebar.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./ViewSwitcherSidebar.module.css\";\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface ViewSwitcherSidebarContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  collapsed: boolean;\n}\n\nconst ViewSwitcherSidebarContext =\n  createContext<ViewSwitcherSidebarContextValue | null>(null);\n\nexport function useViewSwitcherSidebar() {\n  const ctx = useContext(ViewSwitcherSidebarContext);\n  if (!ctx)\n    throw new Error(\n      \"ViewSwitcherSidebarItem must be used inside ViewSwitcherSidebar\",\n    );\n  return ctx;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface ViewSwitcherSidebarProps extends HTMLAttributes<HTMLElement> {\n  /** Name of the currently active view. */\n  value: string;\n  /** Called with the new view name when the user selects an item. */\n  onValueChange: (value: string) => void;\n  /** Accessible label for the group. Defaults to `\"Views\"`. */\n  \"aria-label\"?: string;\n  /**\n   * When `true`, items render icon-only (labels hidden) and the sidebar\n   * shrinks to its compact width. Used by `AdaptiveLayout` on tablet viewports.\n   */\n  collapsed?: boolean;\n  /** Rendered above the scrollable item list (e.g. user card). */\n  header?: ReactNode;\n  /** Rendered below the scrollable item list (e.g. collapse toggle). */\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Sidebar-style view switcher for apps with more than 4 top-level views,\n * or when the sidebar layout fits better than a header-bar `ViewSwitcher`.\n *\n * Mirrors `AdwViewSwitcherSidebar` (libadwaita 1.9 / GNOME 50), the modern\n * replacement for `GtkStackSidebar`.\n *\n * Compose with `ViewSwitcherSidebarItem` for each view. The active item is\n * highlighted with the accent colour; keyboard ↑ / ↓ cycles through items.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcherSidebar.html\n *\n * @example\n * ```tsx\n * <ViewSwitcherSidebar value={view} onValueChange={setView}>\n *   <ViewSwitcherSidebarItem name=\"photos\" label=\"Photos\" icon={MediaPlay} />\n *   <ViewSwitcherSidebarItem name=\"albums\" label=\"Albums\" icon={Star} count={12} />\n * </ViewSwitcherSidebar>\n * ```\n */\nexport function ViewSwitcherSidebar({\n  value,\n  onValueChange,\n  \"aria-label\": ariaLabel = \"Views\",\n  collapsed = false,\n  header,\n  footer,\n  children,\n  className,\n  ...props\n}: ViewSwitcherSidebarProps) {\n  const groupRef = useRef<HTMLUListElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>(\n        \"[role=radio]:not(:disabled)\",\n      ) ?? [],\n    );\n    const idx = items.findIndex((el) => el === document.activeElement);\n    if (idx === -1) return;\n\n    let next = idx;\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\")\n      next = (idx + 1) % items.length;\n    else if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\")\n      next = (idx - 1 + items.length) % items.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = items.length - 1;\n    else return;\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <ViewSwitcherSidebarContext.Provider value={{ value, onValueChange, collapsed }}>\n      <nav\n        className={[styles.sidebar, collapsed ? styles.sidebarCollapsed : null, className].filter(Boolean).join(\" \")}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {header && <div className={styles.header}>{header}</div>}\n        <ul\n          ref={groupRef}\n          role=\"radiogroup\"\n          aria-label={ariaLabel}\n          className={styles.list}\n        >\n          {children}\n        </ul>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </nav>\n    </ViewSwitcherSidebarContext.Provider>\n  );\n}\n"],"mappings":"8GAkBA,IAAM,GAAA,EAAA,EAAA,eACkD,KAAK,CAE7D,SAAgB,GAAyB,CACvC,IAAM,GAAA,EAAA,EAAA,YAAiB,EAA2B,CAClD,GAAI,CAAC,EACH,MAAU,MACR,kEACD,CACH,OAAO,EA4CT,SAAgB,EAAoB,CAClC,QACA,gBACA,aAAc,EAAY,QAC1B,YAAY,GACZ,SACA,SACA,WACA,YACA,GAAG,GACwB,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CAE/C,SAAS,EAAc,EAA+B,CACpD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAChB,8BACD,EAAI,EAAE,CACR,CACK,EAAM,EAAM,UAAW,GAAO,IAAO,SAAS,cAAc,CAClE,GAAI,IAAQ,GAAI,OAEhB,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,aAAe,EAAE,MAAQ,aACrC,GAAQ,EAAM,GAAK,EAAM,eAClB,EAAE,MAAQ,WAAa,EAAE,MAAQ,YACxC,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,eACjC,EAAE,MAAQ,OAAQ,EAAO,UACzB,EAAE,MAAQ,MAAO,EAAO,EAAM,OAAS,OAC3C,OAEL,EAAE,gBAAgB,CAClB,EAAM,GAAM,OAAO,CACnB,EAAM,GAAM,OAAO,CAGrB,OACE,EAAA,EAAA,KAAC,EAA2B,SAA5B,CAAqC,MAAO,CAAE,QAAO,gBAAe,YAAW,WAC7E,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,QAAS,EAAY,EAAA,QAAO,iBAAmB,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC5G,UAAW,EACX,GAAI,WAHN,CAKG,IAAU,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAS,EAAa,CAAA,EACxD,EAAA,EAAA,KAAC,KAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EAAA,QAAO,KAEjB,WACE,CAAA,CACJ,IAAU,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAS,EAAa,CAAA,CACpD,GAC8B,CAAA"}

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.js

@@ -0,0 +1,61 @@
+import e from "./ViewSwitcherSidebar.module.css.js";
+import { createContext as t, useContext as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/ViewSwitcherSidebar/ViewSwitcherSidebar.tsx
+var o = t(null);
+function s() {
+	let e = n(o);
+	if (!e) throw Error("ViewSwitcherSidebarItem must be used inside ViewSwitcherSidebar");
+	return e;
+}
+function c({ value: t, onValueChange: n, "aria-label": s = "Views", collapsed: c = !1, header: l, footer: u, children: d, className: f, ...p }) {
+	let m = r(null);
+	function h(e) {
+		let t = Array.from(m.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n = t.findIndex((e) => e === document.activeElement);
+		if (n === -1) return;
+		let r = n;
+		if (e.key === "ArrowDown" || e.key === "ArrowRight") r = (n + 1) % t.length;
+		else if (e.key === "ArrowUp" || e.key === "ArrowLeft") r = (n - 1 + t.length) % t.length;
+		else if (e.key === "Home") r = 0;
+		else if (e.key === "End") r = t.length - 1;
+		else return;
+		e.preventDefault(), t[r].focus(), t[r].click();
+	}
+	return /* @__PURE__ */ i(o.Provider, {
+		value: {
+			value: t,
+			onValueChange: n,
+			collapsed: c
+		},
+		children: /* @__PURE__ */ a("nav", {
+			className: [
+				e.sidebar,
+				c ? e.sidebarCollapsed : null,
+				f
+			].filter(Boolean).join(" "),
+			onKeyDown: h,
+			...p,
+			children: [
+				l && /* @__PURE__ */ i("div", {
+					className: e.header,
+					children: l
+				}),
+				/* @__PURE__ */ i("ul", {
+					ref: m,
+					role: "radiogroup",
+					"aria-label": s,
+					className: e.list,
+					children: d
+				}),
+				u && /* @__PURE__ */ i("div", {
+					className: e.footer,
+					children: u
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { c as ViewSwitcherSidebar, s as useViewSwitcherSidebar };
+
+//# sourceMappingURL=ViewSwitcherSidebar.js.map

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherSidebar.js","names":[],"sources":["../../../src/components/ViewSwitcherSidebar/ViewSwitcherSidebar.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./ViewSwitcherSidebar.module.css\";\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface ViewSwitcherSidebarContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  collapsed: boolean;\n}\n\nconst ViewSwitcherSidebarContext =\n  createContext<ViewSwitcherSidebarContextValue | null>(null);\n\nexport function useViewSwitcherSidebar() {\n  const ctx = useContext(ViewSwitcherSidebarContext);\n  if (!ctx)\n    throw new Error(\n      \"ViewSwitcherSidebarItem must be used inside ViewSwitcherSidebar\",\n    );\n  return ctx;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface ViewSwitcherSidebarProps extends HTMLAttributes<HTMLElement> {\n  /** Name of the currently active view. */\n  value: string;\n  /** Called with the new view name when the user selects an item. */\n  onValueChange: (value: string) => void;\n  /** Accessible label for the group. Defaults to `\"Views\"`. */\n  \"aria-label\"?: string;\n  /**\n   * When `true`, items render icon-only (labels hidden) and the sidebar\n   * shrinks to its compact width. Used by `AdaptiveLayout` on tablet viewports.\n   */\n  collapsed?: boolean;\n  /** Rendered above the scrollable item list (e.g. user card). */\n  header?: ReactNode;\n  /** Rendered below the scrollable item list (e.g. collapse toggle). */\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Sidebar-style view switcher for apps with more than 4 top-level views,\n * or when the sidebar layout fits better than a header-bar `ViewSwitcher`.\n *\n * Mirrors `AdwViewSwitcherSidebar` (libadwaita 1.9 / GNOME 50), the modern\n * replacement for `GtkStackSidebar`.\n *\n * Compose with `ViewSwitcherSidebarItem` for each view. The active item is\n * highlighted with the accent colour; keyboard ↑ / ↓ cycles through items.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcherSidebar.html\n *\n * @example\n * ```tsx\n * <ViewSwitcherSidebar value={view} onValueChange={setView}>\n *   <ViewSwitcherSidebarItem name=\"photos\" label=\"Photos\" icon={MediaPlay} />\n *   <ViewSwitcherSidebarItem name=\"albums\" label=\"Albums\" icon={Star} count={12} />\n * </ViewSwitcherSidebar>\n * ```\n */\nexport function ViewSwitcherSidebar({\n  value,\n  onValueChange,\n  \"aria-label\": ariaLabel = \"Views\",\n  collapsed = false,\n  header,\n  footer,\n  children,\n  className,\n  ...props\n}: ViewSwitcherSidebarProps) {\n  const groupRef = useRef<HTMLUListElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>(\n        \"[role=radio]:not(:disabled)\",\n      ) ?? [],\n    );\n    const idx = items.findIndex((el) => el === document.activeElement);\n    if (idx === -1) return;\n\n    let next = idx;\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\")\n      next = (idx + 1) % items.length;\n    else if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\")\n      next = (idx - 1 + items.length) % items.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = items.length - 1;\n    else return;\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <ViewSwitcherSidebarContext.Provider value={{ value, onValueChange, collapsed }}>\n      <nav\n        className={[styles.sidebar, collapsed ? styles.sidebarCollapsed : null, className].filter(Boolean).join(\" \")}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {header && <div className={styles.header}>{header}</div>}\n        <ul\n          ref={groupRef}\n          role=\"radiogroup\"\n          aria-label={ariaLabel}\n          className={styles.list}\n        >\n          {children}\n        </ul>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </nav>\n    </ViewSwitcherSidebarContext.Provider>\n  );\n}\n"],"mappings":";;;;AAkBA,IAAM,IACJ,EAAsD,KAAK;AAE7D,SAAgB,IAAyB;CACvC,IAAM,IAAM,EAAW,EAA2B;AAClD,KAAI,CAAC,EACH,OAAU,MACR,kEACD;AACH,QAAO;;AA4CT,SAAgB,EAAoB,EAClC,UACA,kBACA,cAAc,IAAY,SAC1B,eAAY,IACZ,WACA,WACA,aACA,cACA,GAAG,KACwB;CAC3B,IAAM,IAAW,EAAyB,KAAK;CAE/C,SAAS,EAAc,GAA+B;EACpD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAChB,8BACD,IAAI,EAAE,CACR,EACK,IAAM,EAAM,WAAW,MAAO,MAAO,SAAS,cAAc;AAClE,MAAI,MAAQ,GAAI;EAEhB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aACrC,MAAQ,IAAM,KAAK,EAAM;WAClB,EAAE,QAAQ,aAAa,EAAE,QAAQ,YACxC,MAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;WACjC,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAIL,EAFA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO,EACnB,EAAM,GAAM,OAAO;;AAGrB,QACE,kBAAC,EAA2B,UAA5B;EAAqC,OAAO;GAAE;GAAO;GAAe;GAAW;YAC7E,kBAAC,OAAD;GACE,WAAW;IAAC,EAAO;IAAS,IAAY,EAAO,mBAAmB;IAAM;IAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC5G,WAAW;GACX,GAAI;aAHN;IAKG,KAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAS;KAAa,CAAA;IACxD,kBAAC,MAAD;KACE,KAAK;KACL,MAAK;KACL,cAAY;KACZ,WAAW,EAAO;KAEjB;KACE,CAAA;IACJ,KAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAS;KAAa,CAAA;IACpD;;EAC8B,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={sidebar:`_sidebar_1hdq3_3`,sidebarCollapsed:`_sidebarCollapsed_1hdq3_15`,itemBtn:`_itemBtn_1hdq3_19`,header:`_header_1hdq3_26`,footer:`_footer_1hdq3_31`,list:`_list_1hdq3_38`,item:`_item_1hdq3_19`,active:`_active_1hdq3_84`,itemIcon:`_itemIcon_1hdq3_130`,itemLabel:`_itemLabel_1hdq3_143`,itemSuffix:`_itemSuffix_1hdq3_153`,count:`_count_1hdq3_160`};exports.default=e;
+//# sourceMappingURL=ViewSwitcherSidebar.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherSidebar.module.css.cjs","names":[],"sources":["../../../src/components/ViewSwitcherSidebar/ViewSwitcherSidebar.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: 240px;\n  height: 100%;\n  background-color: var(--gnome-sidebar-bg-color, #ebebeb);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  border-right: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  overflow: hidden;\n  transition: width var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.sidebarCollapsed {\n  width: 56px;\n}\n\n.sidebarCollapsed .itemBtn {\n  justify-content: center;\n  padding: 9px;\n}\n\n/* ─── Header / Footer slots ─────────────────────────────────────────────────── */\n\n.header {\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n.footer {\n  flex-shrink: 0;\n  border-top: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── List ──────────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* ─── Item wrapper ──────────────────────────────────────────────────────────── */\n\n.item {\n  display: block;\n}\n\n/* ─── Item button ───────────────────────────────────────────────────────────── */\n\n.itemBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  width: 100%;\n  padding: 9px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  min-height: 42px;\n\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.itemBtn:hover:not(:disabled):not(.active) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-sidebar-bg-color, #ebebeb) 88%,\n    black 12%\n  );\n}\n\n.itemBtn:active:not(:disabled):not(.active) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-sidebar-bg-color, #ebebeb) 78%,\n    black 22%\n  );\n}\n\n.itemBtn:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.itemBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active ────────────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.active:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 92%, black 8%);\n}\n\n.active:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 84%, black 16%);\n}\n\n/* ─── Icon ──────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.active .itemIcon {\n  opacity: 1;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Suffix / count ────────────────────────────────────────────────────────── */\n\n.itemSuffix {\n  flex-shrink: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n\n.count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1;\n\n  /* Inactive: dim pill */\n  background-color: rgba(0, 0, 0, 0.12);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.active .count {\n  /* Active: white pill on accent */\n  background-color: rgba(255, 255, 255, 0.25);\n  color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .sidebar {\n    border-right-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .header,\n  .footer {\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .itemBtn:hover:not(:disabled):not(.active) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-sidebar-bg-color, #303030) 85%,\n      white 15%\n    );\n  }\n\n  .itemBtn:active:not(:disabled):not(.active) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-sidebar-bg-color, #303030) 75%,\n      white 25%\n    );\n  }\n\n  .count {\n    background-color: rgba(255, 255, 255, 0.12);\n    color: var(--gnome-sidebar-fg-color, rgba(255, 255, 255, 0.87));\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .itemBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,18 @@
+var e = {
+	sidebar: "_sidebar_1hdq3_3",
+	sidebarCollapsed: "_sidebarCollapsed_1hdq3_15",
+	itemBtn: "_itemBtn_1hdq3_19",
+	header: "_header_1hdq3_26",
+	footer: "_footer_1hdq3_31",
+	list: "_list_1hdq3_38",
+	item: "_item_1hdq3_19",
+	active: "_active_1hdq3_84",
+	itemIcon: "_itemIcon_1hdq3_130",
+	itemLabel: "_itemLabel_1hdq3_143",
+	itemSuffix: "_itemSuffix_1hdq3_153",
+	count: "_count_1hdq3_160"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ViewSwitcherSidebar.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherSidebar.module.css.js","names":[],"sources":["../../../src/components/ViewSwitcherSidebar/ViewSwitcherSidebar.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: 240px;\n  height: 100%;\n  background-color: var(--gnome-sidebar-bg-color, #ebebeb);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  border-right: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  overflow: hidden;\n  transition: width var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.sidebarCollapsed {\n  width: 56px;\n}\n\n.sidebarCollapsed .itemBtn {\n  justify-content: center;\n  padding: 9px;\n}\n\n/* ─── Header / Footer slots ─────────────────────────────────────────────────── */\n\n.header {\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n.footer {\n  flex-shrink: 0;\n  border-top: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── List ──────────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* ─── Item wrapper ──────────────────────────────────────────────────────────── */\n\n.item {\n  display: block;\n}\n\n/* ─── Item button ───────────────────────────────────────────────────────────── */\n\n.itemBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  width: 100%;\n  padding: 9px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  min-height: 42px;\n\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.itemBtn:hover:not(:disabled):not(.active) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-sidebar-bg-color, #ebebeb) 88%,\n    black 12%\n  );\n}\n\n.itemBtn:active:not(:disabled):not(.active) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-sidebar-bg-color, #ebebeb) 78%,\n    black 22%\n  );\n}\n\n.itemBtn:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.itemBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active ────────────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.active:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 92%, black 8%);\n}\n\n.active:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 84%, black 16%);\n}\n\n/* ─── Icon ──────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.active .itemIcon {\n  opacity: 1;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Suffix / count ────────────────────────────────────────────────────────── */\n\n.itemSuffix {\n  flex-shrink: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n\n.count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1;\n\n  /* Inactive: dim pill */\n  background-color: rgba(0, 0, 0, 0.12);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.active .count {\n  /* Active: white pill on accent */\n  background-color: rgba(255, 255, 255, 0.25);\n  color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .sidebar {\n    border-right-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .header,\n  .footer {\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .itemBtn:hover:not(:disabled):not(.active) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-sidebar-bg-color, #303030) 85%,\n      white 15%\n    );\n  }\n\n  .itemBtn:active:not(:disabled):not(.active) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-sidebar-bg-color, #303030) 75%,\n      white 25%\n    );\n  }\n\n  .count {\n    background-color: rgba(255, 255, 255, 0.12);\n    color: var(--gnome-sidebar-fg-color, rgba(255, 255, 255, 0.87));\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .itemBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Icon/Icon.cjs`),t=require(`./ViewSwitcherSidebar.module.css.cjs`),n=require(`./ViewSwitcherSidebar.cjs`);let r=require(`react/jsx-runtime`);function i({name:i,label:a,icon:o,count:s,suffix:c,disabled:l,className:u,...d}){let{value:f,onValueChange:p,collapsed:m}=n.useViewSwitcherSidebar(),h=f===i,g=c??s??null;return(0,r.jsx)(`li`,{className:t.default.item,children:(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":h,tabIndex:h?0:-1,disabled:l,onClick:()=>p(i),className:[t.default.itemBtn,h?t.default.active:null,u].filter(Boolean).join(` `),...d,children:[o&&(0,r.jsx)(`span`,{className:t.default.itemIcon,children:(0,r.jsx)(e.Icon,{icon:o,size:`md`,"aria-hidden":!0})}),!m&&(0,r.jsx)(`span`,{className:t.default.itemLabel,children:a}),!m&&g!=null&&(0,r.jsx)(`span`,{className:t.default.itemSuffix,children:typeof g==`number`?(0,r.jsx)(`span`,{className:t.default.count,children:g>99?`99+`:g}):g})]})})}exports.ViewSwitcherSidebarItem=i;
+//# sourceMappingURL=ViewSwitcherSidebarItem.cjs.map

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherSidebarItem.cjs","names":[],"sources":["../../../src/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useViewSwitcherSidebar } from \"./ViewSwitcherSidebar\";\nimport styles from \"./ViewSwitcherSidebar.module.css\";\n\nexport interface ViewSwitcherSidebarItemProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — matched against the group's `value`. */\n  name: string;\n  /** View label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * Optional trailing count (unread messages, items…).\n   * Rendered as a small badge at the trailing edge.\n   */\n  count?: number;\n  /**\n   * Optional trailing widget. Takes precedence over `count`.\n   * Use for custom badges, buttons, or status indicators.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * Individual view item inside a `ViewSwitcherSidebar`.\n *\n * Renders as `role=\"radio\"`. Only the active item is in the natural Tab order;\n * all others use `tabIndex={-1}` and are reached via arrow-key navigation.\n */\nexport function ViewSwitcherSidebarItem({\n  name,\n  label,\n  icon,\n  count,\n  suffix,\n  disabled,\n  className,\n  ...props\n}: ViewSwitcherSidebarItemProps) {\n  const { value, onValueChange, collapsed } = useViewSwitcherSidebar();\n  const active = value === name;\n  const trailing = suffix ?? (count != null ? count : null);\n\n  return (\n    <li className={styles.item}>\n      <button\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={active}\n        tabIndex={active ? 0 : -1}\n        disabled={disabled}\n        onClick={() => onValueChange(name)}\n        className={[\n          styles.itemBtn,\n          active ? styles.active : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      >\n        {icon && (\n          <span className={styles.itemIcon}>\n            <Icon icon={icon} size=\"md\" aria-hidden />\n          </span>\n        )}\n        {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n        {!collapsed && trailing != null && (\n          <span className={styles.itemSuffix}>\n            {typeof trailing === \"number\" ? (\n              <span className={styles.count}>{trailing > 99 ? \"99+\" : trailing}</span>\n            ) : (\n              trailing\n            )}\n          </span>\n        )}\n      </button>\n    </li>\n  );\n}\n"],"mappings":"gKAgCA,SAAgB,EAAwB,CACtC,OACA,QACA,OACA,QACA,SACA,WACA,YACA,GAAG,GAC4B,CAC/B,GAAM,CAAE,QAAO,gBAAe,aAAc,EAAA,wBAAwB,CAC9D,EAAS,IAAU,EACnB,EAAW,GAAW,GAAwB,KAEpD,OACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,eACpB,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,EAAK,CAClC,UAAW,CACT,EAAA,QAAO,QACP,EAAS,EAAA,QAAO,OAAS,KACzB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAdN,CAgBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,CAAC,IAAa,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CAC/D,CAAC,GAAa,GAAY,OACzB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,oBACrB,OAAO,GAAa,UACnB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAW,GAAK,MAAQ,EAAgB,CAAA,CAExE,EAEG,CAAA,CAEF,GACN,CAAA"}

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.js

@@ -0,0 +1,50 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./ViewSwitcherSidebar.module.css.js";
+import { useViewSwitcherSidebar as n } from "./ViewSwitcherSidebar.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.tsx
+function a({ name: a, label: o, icon: s, count: c, suffix: l, disabled: u, className: d, ...f }) {
+	let { value: p, onValueChange: m, collapsed: h } = n(), g = p === a, _ = l ?? c ?? null;
+	return /* @__PURE__ */ r("li", {
+		className: t.item,
+		children: /* @__PURE__ */ i("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": g,
+			tabIndex: g ? 0 : -1,
+			disabled: u,
+			onClick: () => m(a),
+			className: [
+				t.itemBtn,
+				g ? t.active : null,
+				d
+			].filter(Boolean).join(" "),
+			...f,
+			children: [
+				s && /* @__PURE__ */ r("span", {
+					className: t.itemIcon,
+					children: /* @__PURE__ */ r(e, {
+						icon: s,
+						size: "md",
+						"aria-hidden": !0
+					})
+				}),
+				!h && /* @__PURE__ */ r("span", {
+					className: t.itemLabel,
+					children: o
+				}),
+				!h && _ != null && /* @__PURE__ */ r("span", {
+					className: t.itemSuffix,
+					children: typeof _ == "number" ? /* @__PURE__ */ r("span", {
+						className: t.count,
+						children: _ > 99 ? "99+" : _
+					}) : _
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { a as ViewSwitcherSidebarItem };
+
+//# sourceMappingURL=ViewSwitcherSidebarItem.js.map

package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSwitcherSidebarItem.js","names":[],"sources":["../../../src/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useViewSwitcherSidebar } from \"./ViewSwitcherSidebar\";\nimport styles from \"./ViewSwitcherSidebar.module.css\";\n\nexport interface ViewSwitcherSidebarItemProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — matched against the group's `value`. */\n  name: string;\n  /** View label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * Optional trailing count (unread messages, items…).\n   * Rendered as a small badge at the trailing edge.\n   */\n  count?: number;\n  /**\n   * Optional trailing widget. Takes precedence over `count`.\n   * Use for custom badges, buttons, or status indicators.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * Individual view item inside a `ViewSwitcherSidebar`.\n *\n * Renders as `role=\"radio\"`. Only the active item is in the natural Tab order;\n * all others use `tabIndex={-1}` and are reached via arrow-key navigation.\n */\nexport function ViewSwitcherSidebarItem({\n  name,\n  label,\n  icon,\n  count,\n  suffix,\n  disabled,\n  className,\n  ...props\n}: ViewSwitcherSidebarItemProps) {\n  const { value, onValueChange, collapsed } = useViewSwitcherSidebar();\n  const active = value === name;\n  const trailing = suffix ?? (count != null ? count : null);\n\n  return (\n    <li className={styles.item}>\n      <button\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={active}\n        tabIndex={active ? 0 : -1}\n        disabled={disabled}\n        onClick={() => onValueChange(name)}\n        className={[\n          styles.itemBtn,\n          active ? styles.active : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      >\n        {icon && (\n          <span className={styles.itemIcon}>\n            <Icon icon={icon} size=\"md\" aria-hidden />\n          </span>\n        )}\n        {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n        {!collapsed && trailing != null && (\n          <span className={styles.itemSuffix}>\n            {typeof trailing === \"number\" ? (\n              <span className={styles.count}>{trailing > 99 ? \"99+\" : trailing}</span>\n            ) : (\n              trailing\n            )}\n          </span>\n        )}\n      </button>\n    </li>\n  );\n}\n"],"mappings":";;;;;AAgCA,SAAgB,EAAwB,EACtC,SACA,UACA,SACA,UACA,WACA,aACA,cACA,GAAG,KAC4B;CAC/B,IAAM,EAAE,UAAO,kBAAe,iBAAc,GAAwB,EAC9D,IAAS,MAAU,GACnB,IAAW,KAAW,KAAwB;AAEpD,QACE,kBAAC,MAAD;EAAI,WAAW,EAAO;YACpB,kBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc;GACd,UAAU,IAAS,IAAI;GACb;GACV,eAAe,EAAc,EAAK;GAClC,WAAW;IACT,EAAO;IACP,IAAS,EAAO,SAAS;IACzB;IACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,GAAI;aAdN;IAgBG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAY;MAAM,MAAK;MAAK,eAAA;MAAc,CAAA;KACrC,CAAA;IAER,CAAC,KAAa,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAY;KAAa,CAAA;IAC/D,CAAC,KAAa,KAAY,QACzB,kBAAC,QAAD;KAAM,WAAW,EAAO;eACrB,OAAO,KAAa,WACnB,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAQ,IAAW,KAAK,QAAQ;MAAgB,CAAA,GAExE;KAEG,CAAA;IAEF;;EACN,CAAA"}

package/dist/components/ViewSwitcherSidebar.cjs

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

package/dist/components/ViewSwitcherSidebar.d.ts

@@ -0,0 +1,2 @@
+export * from './ViewSwitcherSidebar/index'
+export {}

package/dist/components/ViewSwitcherSidebar.js

@@ -0,0 +1,3 @@
+import { ViewSwitcherSidebar as e } from "./ViewSwitcherSidebar/ViewSwitcherSidebar.js";
+import { ViewSwitcherSidebarItem as t } from "./ViewSwitcherSidebar/ViewSwitcherSidebarItem.js";
+export { e as ViewSwitcherSidebar, t as ViewSwitcherSidebarItem };

package/dist/components/WindowTitle/WindowTitle.cjs

@@ -0,0 +1,2 @@
+const e=require(`./WindowTitle.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,subtitle:r,className:i,...a}){return(0,t.jsxs)(`div`,{className:[e.default.windowTitle,i].filter(Boolean).join(` `),...a,children:[(0,t.jsx)(`span`,{className:e.default.title,children:n}),r&&(0,t.jsx)(`span`,{className:e.default.subtitle,children:r})]})}exports.WindowTitle=n;
+//# sourceMappingURL=WindowTitle.cjs.map

package/dist/components/WindowTitle/WindowTitle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitle.cjs","names":[],"sources":["../../../src/components/WindowTitle/WindowTitle.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./WindowTitle.module.css\";\n\nexport interface WindowTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary title — rendered in bold. */\n  title: string;\n  /** Secondary subtitle — rendered smaller and dimmed below the title. */\n  subtitle?: string;\n}\n\n/**\n * Two-line title + subtitle widget for use inside a `HeaderBar`.\n *\n * Pass as the `title` prop of `HeaderBar` to get a centred two-line header\n * that shows an app name and current document/view name.\n *\n * Mirrors `AdwWindowTitle`.\n *\n * @example\n * ```tsx\n * <HeaderBar title={<WindowTitle title=\"Files\" subtitle=\"/home/user/Documents\" />} />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WindowTitle.html\n */\nexport function WindowTitle({ title, subtitle, className, ...props }: WindowTitleProps) {\n  return (\n    <div\n      className={[styles.windowTitle, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <span className={styles.title}>{title}</span>\n      {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n    </div>\n  );\n}\n"],"mappings":"mFAyBA,SAAgB,EAAY,CAAE,QAAO,WAAU,YAAW,GAAG,GAA2B,CACtF,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACpE,GAAI,WAFN,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}

package/dist/components/WindowTitle/WindowTitle.js

@@ -0,0 +1,20 @@
+import e from "./WindowTitle.module.css.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/WindowTitle/WindowTitle.tsx
+function r({ title: r, subtitle: i, className: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: [e.windowTitle, a].filter(Boolean).join(" "),
+		...o,
+		children: [/* @__PURE__ */ t("span", {
+			className: e.title,
+			children: r
+		}), i && /* @__PURE__ */ t("span", {
+			className: e.subtitle,
+			children: i
+		})]
+	});
+}
+//#endregion
+export { r as WindowTitle };
+
+//# sourceMappingURL=WindowTitle.js.map

package/dist/components/WindowTitle/WindowTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitle.js","names":[],"sources":["../../../src/components/WindowTitle/WindowTitle.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./WindowTitle.module.css\";\n\nexport interface WindowTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary title — rendered in bold. */\n  title: string;\n  /** Secondary subtitle — rendered smaller and dimmed below the title. */\n  subtitle?: string;\n}\n\n/**\n * Two-line title + subtitle widget for use inside a `HeaderBar`.\n *\n * Pass as the `title` prop of `HeaderBar` to get a centred two-line header\n * that shows an app name and current document/view name.\n *\n * Mirrors `AdwWindowTitle`.\n *\n * @example\n * ```tsx\n * <HeaderBar title={<WindowTitle title=\"Files\" subtitle=\"/home/user/Documents\" />} />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WindowTitle.html\n */\nexport function WindowTitle({ title, subtitle, className, ...props }: WindowTitleProps) {\n  return (\n    <div\n      className={[styles.windowTitle, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <span className={styles.title}>{title}</span>\n      {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;AAyBA,SAAgB,EAAY,EAAE,UAAO,aAAU,cAAW,GAAG,KAA2B;AACtF,QACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAO,aAAa,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACpE,GAAI;YAFN,CAIE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;GAAa,CAAA,EAC5C,KAAY,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAW;GAAgB,CAAA,CAC5D"}

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

@@ -0,0 +1,2 @@
+var e={windowTitle:`_windowTitle_zm877_3`,title:`_title_zm877_11`,subtitle:`_subtitle_zm877_24`};exports.default=e;
+//# sourceMappingURL=WindowTitle.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitle.module.css.cjs","names":[],"sources":["../../../src/components/WindowTitle/WindowTitle.module.css"],"sourcesContent":["/* ─── WindowTitle ────────────────────────────────────────────────────────────── */\n\n.windowTitle {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1px;\n  min-width: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1.2;\n  color: var(--gnome-headerbar-fg-color, var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8)));\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.2;\n  color: var(--gnome-headerbar-fg-color, var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8)));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+var e = {
+	windowTitle: "_windowTitle_zm877_3",
+	title: "_title_zm877_11",
+	subtitle: "_subtitle_zm877_24"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=WindowTitle.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitle.module.css.js","names":[],"sources":["../../../src/components/WindowTitle/WindowTitle.module.css"],"sourcesContent":["/* ─── WindowTitle ────────────────────────────────────────────────────────────── */\n\n.windowTitle {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1px;\n  min-width: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1.2;\n  color: var(--gnome-headerbar-fg-color, var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8)));\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.2;\n  color: var(--gnome-headerbar-fg-color, var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8)));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n"],"mappings":""}

package/dist/components/WindowTitle.cjs

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

package/dist/components/WindowTitle.d.ts

@@ -0,0 +1,2 @@
+export * from './WindowTitle/index'
+export {}

package/dist/components/WindowTitle.js

@@ -0,0 +1,2 @@
+import { WindowTitle as e } from "./WindowTitle/WindowTitle.js";
+export { e as WindowTitle };

package/dist/components/WrapBox/WrapBox.cjs

@@ -0,0 +1,2 @@
+const e=require(`./WrapBox.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({childSpacing:n=6,lineSpacing:r,justify:i=`start`,align:a=`center`,wrapReverse:o=!1,children:s,className:c,style:l,...u}){let d=typeof n==`number`?`${n}px`:n,f=r==null?d:typeof r==`number`?`${r}px`:r,p={"--wrapbox-gap":d,"--wrapbox-row-gap":f,"--wrapbox-justify":i,"--wrapbox-align":a,...l};return(0,t.jsx)(`div`,{className:[e.default.wrapBox,o?e.default.reverse:null,c].filter(Boolean).join(` `),style:p,...u,children:s})}exports.WrapBox=n;
+//# sourceMappingURL=WrapBox.cjs.map

package/dist/components/WrapBox/WrapBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapBox.cjs","names":[],"sources":["../../../src/components/WrapBox/WrapBox.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./WrapBox.module.css\";\n\nexport type WrapBoxJustify = \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\nexport type WrapBoxAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport interface WrapBoxProps extends HTMLAttributes<HTMLDivElement> {\n  /** Gap between children on the same line. Default: `6`. */\n  childSpacing?: number | string;\n  /** Gap between lines. Defaults to `childSpacing`. */\n  lineSpacing?: number | string;\n  /** Horizontal distribution of children within each line. Default: `\"start\"`. */\n  justify?: WrapBoxJustify;\n  /** Cross-axis alignment of children within each line. Default: `\"center\"`. */\n  align?: WrapBoxAlign;\n  /** When true children wrap in the reverse direction (bottom to top). */\n  wrapReverse?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Flexible wrapping layout container.\n *\n * Children flow horizontally and wrap to new lines when they don't fit,\n * like words in a paragraph — without locking them into a grid.\n *\n * Mirrors `AdwWrapBox` (libadwaita 1.7 / GNOME 48).\n *\n * Pair with `Chip` for tag lists and filter rows.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WrapBox.html\n */\nexport function WrapBox({\n  childSpacing = 6,\n  lineSpacing,\n  justify = \"start\",\n  align = \"center\",\n  wrapReverse = false,\n  children,\n  className,\n  style,\n  ...props\n}: WrapBoxProps) {\n  const gap = typeof childSpacing === \"number\" ? `${childSpacing}px` : childSpacing;\n  const rowGap = lineSpacing != null\n    ? (typeof lineSpacing === \"number\" ? `${lineSpacing}px` : lineSpacing)\n    : gap;\n\n  const cssVars: CSSProperties = {\n    \"--wrapbox-gap\": gap,\n    \"--wrapbox-row-gap\": rowGap,\n    \"--wrapbox-justify\": justify,\n    \"--wrapbox-align\": align,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      className={[\n        styles.wrapBox,\n        wrapReverse ? styles.reverse : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={cssVars}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"+EAgCA,SAAgB,EAAQ,CACtB,eAAe,EACf,cACA,UAAU,QACV,QAAQ,SACR,cAAc,GACd,WACA,YACA,QACA,GAAG,GACY,CACf,IAAM,EAAM,OAAO,GAAiB,SAAW,GAAG,EAAa,IAAM,EAC/D,EAAS,GAAe,KAE1B,EADC,OAAO,GAAgB,SAAW,GAAG,EAAY,IAAM,EAGtD,EAAyB,CAC7B,gBAAiB,EACjB,oBAAqB,EACrB,oBAAqB,EACrB,kBAAmB,EACnB,GAAG,EACJ,CAED,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAc,EAAA,QAAO,QAAU,KAC/B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,EACP,GAAI,EAEH,WACG,CAAA"}

package/dist/components/WrapBox/WrapBox.js

@@ -0,0 +1,26 @@
+import e from "./WrapBox.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/WrapBox/WrapBox.tsx
+function n({ childSpacing: n = 6, lineSpacing: r, justify: i = "start", align: a = "center", wrapReverse: o = !1, children: s, className: c, style: l, ...u }) {
+	let d = typeof n == "number" ? `${n}px` : n, f = r == null ? d : typeof r == "number" ? `${r}px` : r, p = {
+		"--wrapbox-gap": d,
+		"--wrapbox-row-gap": f,
+		"--wrapbox-justify": i,
+		"--wrapbox-align": a,
+		...l
+	};
+	return /* @__PURE__ */ t("div", {
+		className: [
+			e.wrapBox,
+			o ? e.reverse : null,
+			c
+		].filter(Boolean).join(" "),
+		style: p,
+		...u,
+		children: s
+	});
+}
+//#endregion
+export { n as WrapBox };
+
+//# sourceMappingURL=WrapBox.js.map

package/dist/components/WrapBox/WrapBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapBox.js","names":[],"sources":["../../../src/components/WrapBox/WrapBox.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./WrapBox.module.css\";\n\nexport type WrapBoxJustify = \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\nexport type WrapBoxAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport interface WrapBoxProps extends HTMLAttributes<HTMLDivElement> {\n  /** Gap between children on the same line. Default: `6`. */\n  childSpacing?: number | string;\n  /** Gap between lines. Defaults to `childSpacing`. */\n  lineSpacing?: number | string;\n  /** Horizontal distribution of children within each line. Default: `\"start\"`. */\n  justify?: WrapBoxJustify;\n  /** Cross-axis alignment of children within each line. Default: `\"center\"`. */\n  align?: WrapBoxAlign;\n  /** When true children wrap in the reverse direction (bottom to top). */\n  wrapReverse?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Flexible wrapping layout container.\n *\n * Children flow horizontally and wrap to new lines when they don't fit,\n * like words in a paragraph — without locking them into a grid.\n *\n * Mirrors `AdwWrapBox` (libadwaita 1.7 / GNOME 48).\n *\n * Pair with `Chip` for tag lists and filter rows.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WrapBox.html\n */\nexport function WrapBox({\n  childSpacing = 6,\n  lineSpacing,\n  justify = \"start\",\n  align = \"center\",\n  wrapReverse = false,\n  children,\n  className,\n  style,\n  ...props\n}: WrapBoxProps) {\n  const gap = typeof childSpacing === \"number\" ? `${childSpacing}px` : childSpacing;\n  const rowGap = lineSpacing != null\n    ? (typeof lineSpacing === \"number\" ? `${lineSpacing}px` : lineSpacing)\n    : gap;\n\n  const cssVars: CSSProperties = {\n    \"--wrapbox-gap\": gap,\n    \"--wrapbox-row-gap\": rowGap,\n    \"--wrapbox-justify\": justify,\n    \"--wrapbox-align\": align,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      className={[\n        styles.wrapBox,\n        wrapReverse ? styles.reverse : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={cssVars}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAgCA,SAAgB,EAAQ,EACtB,kBAAe,GACf,gBACA,aAAU,SACV,WAAQ,UACR,iBAAc,IACd,aACA,cACA,UACA,GAAG,KACY;CACf,IAAM,IAAM,OAAO,KAAiB,WAAW,GAAG,EAAa,MAAM,GAC/D,IAAS,KAAe,OAE1B,IADC,OAAO,KAAgB,WAAW,GAAG,EAAY,MAAM,GAGtD,IAAyB;EAC7B,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,mBAAmB;EACnB,GAAG;EACJ;AAED,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAc,EAAO,UAAU;GAC/B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;EACP,GAAI;EAEH;EACG,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={wrapBox:`_wrapBox_1ik0x_1`,reverse:`_reverse_1ik0x_10`};exports.default=e;
+//# sourceMappingURL=WrapBox.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WrapBox.module.css.cjs","names":[],"sources":["../../../src/components/WrapBox/WrapBox.module.css"],"sourcesContent":[".wrapBox {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  gap: var(--wrapbox-row-gap) var(--wrapbox-gap);\n  justify-content: var(--wrapbox-justify);\n  align-items: var(--wrapbox-align);\n}\n\n.reverse {\n  flex-wrap: wrap-reverse;\n}\n"],"mappings":""}

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

@@ -0,0 +1,8 @@
+var e = {
+	wrapBox: "_wrapBox_1ik0x_1",
+	reverse: "_reverse_1ik0x_10"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=WrapBox.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WrapBox.module.css.js","names":[],"sources":["../../../src/components/WrapBox/WrapBox.module.css"],"sourcesContent":[".wrapBox {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  gap: var(--wrapbox-row-gap) var(--wrapbox-gap);\n  justify-content: var(--wrapbox-justify);\n  align-items: var(--wrapbox-align);\n}\n\n.reverse {\n  flex-wrap: wrap-reverse;\n}\n"],"mappings":""}

package/dist/components/WrapBox.cjs

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

package/dist/components/WrapBox.d.ts

@@ -0,0 +1,2 @@
+export * from './WrapBox/index'
+export {}

package/dist/components/WrapBox.js

@@ -0,0 +1,2 @@
+import { WrapBox as e } from "./WrapBox/WrapBox.js";
+export { e as WrapBox };

package/dist/hooks/useBreakpoint.cjs

@@ -0,0 +1,2 @@
+let e=require(`react`);var t={narrow:400,medium:550,wide:860};function n(){let n=()=>{let e=typeof window<`u`?window.innerWidth:1280;return{isNarrow:e<=t.narrow,isMedium:e<=t.medium,isWide:e<=t.wide,width:e}},[r,i]=(0,e.useState)(n);return(0,e.useEffect)(()=>{let e=()=>i(n());return window.addEventListener(`resize`,e,{passive:!0}),()=>window.removeEventListener(`resize`,e)},[]),r}exports.GNOME_BREAKPOINTS=t,exports.useBreakpoint=n;
+//# sourceMappingURL=useBreakpoint.cjs.map

package/dist/hooks/useBreakpoint.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.cjs","names":[],"sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\n/**\n * GNOME / libadwaita canonical breakpoints (in CSS px, assuming 1 sp = 1 px at 1× density).\n *\n * | Name       | Max width | Pattern triggered |\n * |------------|-----------|-------------------|\n * | `narrow`   | ≤ 400 px  | Collapse split views; sidebar becomes overlay |\n * | `medium`   | ≤ 550 px  | Move ViewSwitcher to a bottom bar |\n * | `wide`     | ≤ 860 px  | Collapse outer pane in nested split views |\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Breakpoint.html\n */\nexport const GNOME_BREAKPOINTS = {\n  /** ≤ 400 px — split views collapse to single pane */\n  narrow: 400,\n  /** ≤ 550 px — ViewSwitcher moves to bottom bar */\n  medium: 550,\n  /** ≤ 860 px — outer pane of nested split views collapses */\n  wide: 860,\n} as const;\n\nexport type GnomeBreakpointName = keyof typeof GNOME_BREAKPOINTS;\n\nexport interface BreakpointState {\n  /** Width ≤ 400 px — split views are collapsed. */\n  isNarrow: boolean;\n  /** Width ≤ 550 px — medium or narrower. */\n  isMedium: boolean;\n  /** Width ≤ 860 px — wide or narrower. */\n  isWide: boolean;\n  /** Current viewport width in px. */\n  width: number;\n}\n\n/**\n * Tracks the viewport width against GNOME / libadwaita breakpoints.\n *\n * Returns a reactive state object that updates on every window resize.\n * Uses a passive `resize` event listener and cleans up automatically.\n *\n * @example\n * const { isNarrow, isMedium } = useBreakpoint();\n * // isNarrow → true when viewport ≤ 400 px (split views should collapse)\n * // isMedium → true when viewport ≤ 550 px (use ViewSwitcherBar instead)\n */\nexport function useBreakpoint(): BreakpointState {\n  const getState = (): BreakpointState => {\n    const width = typeof window !== \"undefined\" ? window.innerWidth : 1280;\n    return {\n      isNarrow: width <= GNOME_BREAKPOINTS.narrow,\n      isMedium: width <= GNOME_BREAKPOINTS.medium,\n      isWide:   width <= GNOME_BREAKPOINTS.wide,\n      width,\n    };\n  };\n\n  const [state, setState] = useState<BreakpointState>(getState);\n\n  useEffect(() => {\n    const handler = () => setState(getState());\n    window.addEventListener(\"resize\", handler, { passive: true });\n    return () => window.removeEventListener(\"resize\", handler);\n  }, []);\n\n  return state;\n}\n"],"mappings":"uBAaA,IAAa,EAAoB,CAE/B,OAAQ,IAER,OAAQ,IAER,KAAM,IACP,CA0BD,SAAgB,GAAiC,CAC/C,IAAM,MAAkC,CACtC,IAAM,EAAQ,OAAO,OAAW,IAAc,OAAO,WAAa,KAClE,MAAO,CACL,SAAU,GAAS,EAAkB,OACrC,SAAU,GAAS,EAAkB,OACrC,OAAU,GAAS,EAAkB,KACrC,QACD,EAGG,CAAC,EAAO,IAAA,EAAA,EAAA,UAAsC,EAAS,CAQ7D,OANA,EAAA,EAAA,eAAgB,CACd,IAAM,MAAgB,EAAS,GAAU,CAAC,CAE1C,OADA,OAAO,iBAAiB,SAAU,EAAS,CAAE,QAAS,GAAM,CAAC,KAChD,OAAO,oBAAoB,SAAU,EAAQ,EACzD,EAAE,CAAC,CAEC"}

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,26 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/useBreakpoint.ts
+var n = {
+	narrow: 400,
+	medium: 550,
+	wide: 860
+};
+function r() {
+	let r = () => {
+		let e = typeof window < "u" ? window.innerWidth : 1280;
+		return {
+			isNarrow: e <= n.narrow,
+			isMedium: e <= n.medium,
+			isWide: e <= n.wide,
+			width: e
+		};
+	}, [i, a] = t(r);
+	return e(() => {
+		let e = () => a(r());
+		return window.addEventListener("resize", e, { passive: !0 }), () => window.removeEventListener("resize", e);
+	}, []), i;
+}
+//#endregion
+export { n as GNOME_BREAKPOINTS, r as useBreakpoint };
+
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","names":[],"sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\n/**\n * GNOME / libadwaita canonical breakpoints (in CSS px, assuming 1 sp = 1 px at 1× density).\n *\n * | Name       | Max width | Pattern triggered |\n * |------------|-----------|-------------------|\n * | `narrow`   | ≤ 400 px  | Collapse split views; sidebar becomes overlay |\n * | `medium`   | ≤ 550 px  | Move ViewSwitcher to a bottom bar |\n * | `wide`     | ≤ 860 px  | Collapse outer pane in nested split views |\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Breakpoint.html\n */\nexport const GNOME_BREAKPOINTS = {\n  /** ≤ 400 px — split views collapse to single pane */\n  narrow: 400,\n  /** ≤ 550 px — ViewSwitcher moves to bottom bar */\n  medium: 550,\n  /** ≤ 860 px — outer pane of nested split views collapses */\n  wide: 860,\n} as const;\n\nexport type GnomeBreakpointName = keyof typeof GNOME_BREAKPOINTS;\n\nexport interface BreakpointState {\n  /** Width ≤ 400 px — split views are collapsed. */\n  isNarrow: boolean;\n  /** Width ≤ 550 px — medium or narrower. */\n  isMedium: boolean;\n  /** Width ≤ 860 px — wide or narrower. */\n  isWide: boolean;\n  /** Current viewport width in px. */\n  width: number;\n}\n\n/**\n * Tracks the viewport width against GNOME / libadwaita breakpoints.\n *\n * Returns a reactive state object that updates on every window resize.\n * Uses a passive `resize` event listener and cleans up automatically.\n *\n * @example\n * const { isNarrow, isMedium } = useBreakpoint();\n * // isNarrow → true when viewport ≤ 400 px (split views should collapse)\n * // isMedium → true when viewport ≤ 550 px (use ViewSwitcherBar instead)\n */\nexport function useBreakpoint(): BreakpointState {\n  const getState = (): BreakpointState => {\n    const width = typeof window !== \"undefined\" ? window.innerWidth : 1280;\n    return {\n      isNarrow: width <= GNOME_BREAKPOINTS.narrow,\n      isMedium: width <= GNOME_BREAKPOINTS.medium,\n      isWide:   width <= GNOME_BREAKPOINTS.wide,\n      width,\n    };\n  };\n\n  const [state, setState] = useState<BreakpointState>(getState);\n\n  useEffect(() => {\n    const handler = () => setState(getState());\n    window.addEventListener(\"resize\", handler, { passive: true });\n    return () => window.removeEventListener(\"resize\", handler);\n  }, []);\n\n  return state;\n}\n"],"mappings":";;AAaA,IAAa,IAAoB;CAE/B,QAAQ;CAER,QAAQ;CAER,MAAM;CACP;AA0BD,SAAgB,IAAiC;CAC/C,IAAM,UAAkC;EACtC,IAAM,IAAQ,OAAO,SAAW,MAAc,OAAO,aAAa;AAClE,SAAO;GACL,UAAU,KAAS,EAAkB;GACrC,UAAU,KAAS,EAAkB;GACrC,QAAU,KAAS,EAAkB;GACrC;GACD;IAGG,CAAC,GAAO,KAAY,EAA0B,EAAS;AAQ7D,QANA,QAAgB;EACd,IAAM,UAAgB,EAAS,GAAU,CAAC;AAE1C,SADA,OAAO,iBAAiB,UAAU,GAAS,EAAE,SAAS,IAAM,CAAC,QAChD,OAAO,oBAAoB,UAAU,EAAQ;IACzD,EAAE,CAAC,EAEC"}