@gnome-ui/react 1.36.1 → 1.36.3

package/dist/components/NavigationView/NavigationView.js

@@ -0,0 +1,60 @@
+import e from "./NavigationView.module.css.js";
+import { createContext as t, useContext as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/NavigationView/NavigationView.tsx
+var o = t({
+	navigate: () => {},
+	pop: () => {},
+	canGoBack: !1,
+	currentTag: "",
+	direction: "forward"
+});
+function s() {
+	return n(o);
+}
+function c({ tag: t, title: r, children: s, className: c, ...l }) {
+	let { currentTag: u, direction: d } = n(o);
+	return u === t ? /* @__PURE__ */ a("div", {
+		className: [
+			e.page,
+			d === "forward" ? e.enterForward : e.enterBack,
+			c
+		].filter(Boolean).join(" "),
+		...l,
+		children: [/* @__PURE__ */ i("div", {
+			className: e.pageHeader,
+			children: /* @__PURE__ */ i("span", {
+				className: e.pageTitle,
+				children: r
+			})
+		}), /* @__PURE__ */ i("div", {
+			className: e.pageContent,
+			children: s
+		})]
+	}) : null;
+}
+function l({ initialPage: t, children: n, className: a, ...s }) {
+	let [c, l] = r([t]), u = c[c.length - 1], d = c.length > 1, [f, p] = r("forward");
+	return /* @__PURE__ */ i(o.Provider, {
+		value: {
+			navigate: (e) => {
+				p("forward"), l((t) => [...t, e]);
+			},
+			pop: () => {
+				c.length <= 1 || (p("back"), l((e) => e.slice(0, -1)));
+			},
+			canGoBack: d,
+			currentTag: u,
+			direction: f
+		},
+		children: /* @__PURE__ */ i("div", {
+			className: [e.view, a].filter(Boolean).join(" "),
+			...s,
+			children: n
+		})
+	});
+}
+//#endregion
+export { c as NavigationPage, l as NavigationView, s as useNavigation };
+
+//# sourceMappingURL=NavigationView.js.map

package/dist/components/NavigationView/NavigationView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationView.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./NavigationView.module.css\";\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: \"forward\" | \"back\";\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => { },\n  pop: () => { },\n  canGoBack: false,\n  currentTag: \"\",\n  direction: \"forward\",\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n  if (currentTag !== tag) return null;\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === \"forward\" ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<\"forward\" | \"back\">(\"forward\");\n\n  const navigate = (tag: string) => {\n    setDirection(\"forward\");\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) return;\n    setDirection(\"back\");\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div\n        className={[styles.view, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":";;;;AAwBA,IAAM,IAAoB,EAAsC;CAC9D,gBAAgB;CAChB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ,CAAC;AAGF,SAAgB,IAAgB;AAC9B,QAAO,EAAW,EAAkB;;AAiBtC,SAAgB,EAAe,EAC7B,QACA,UACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,EAAE,eAAY,iBAAc,EAAW,EAAkB;AAG/D,QAFI,MAAe,IAGjB,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,MAAc,YAAY,EAAO,eAAe,EAAO;GACvD;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YARN,CAUE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAY;IAAa,CAAA;GAC7C,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAc;GAAe,CAAA,CAChD;MAjBuB;;AAkDjC,SAAgB,EAAe,EAC7B,gBACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,CAAC,GAAO,KAAY,EAAmB,CAAC,EAAY,CAAC,EAErD,IAAa,EAAM,EAAM,SAAS,IAClC,IAAY,EAAM,SAAS,GAC3B,CAAC,GAAW,KAAgB,EAA6B,UAAU;AAazE,QACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAE,WAZrB,MAAgB;AAEhC,IADA,EAAa,UAAU,EACvB,GAAU,MAAM,CAAC,GAAG,GAAG,EAAI,CAAC;;GAUmB,WAP/B;AACZ,MAAM,UAAU,MACpB,EAAa,OAAO,EACpB,GAAU,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC;;GAIqB;GAAW;GAAY;GAAW;YACpF,kBAAC,OAAD;GACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC7D,GAAI;GAEH;GACG,CAAA;EACqB,CAAA"}

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

@@ -0,0 +1,2 @@
+var e=`_view_1r1om_3`,t=`_page_1r1om_12`,n=`_pageHeader_1r1om_23`,r=`_pageTitle_1r1om_34`,i=`_pageContent_1r1om_43`,a=`_enterForward_1r1om_52`,o=`_enterBack_1r1om_56`,s={view:e,page:t,pageHeader:n,pageTitle:r,pageContent:i,enterForward:a,"slide-in-right":`_slide-in-right_1r1om_1`,enterBack:o,"slide-in-left":`_slide-in-left_1r1om_1`};exports.default=s;
+//# sourceMappingURL=NavigationView.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\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  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes slide-in-right {\n  from { transform: translateX(40px); opacity: 0; }\n  to   { transform: translateX(0);    opacity: 1; }\n}\n\n@keyframes slide-in-left {\n  from { transform: translateX(-40px); opacity: 0; }\n  to   { transform: translateX(0);     opacity: 1; }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+//#region src/components/NavigationView/NavigationView.module.css
+var e = "_view_1r1om_3", t = "_page_1r1om_12", n = "_pageHeader_1r1om_23", r = "_pageTitle_1r1om_34", i = "_pageContent_1r1om_43", a = "_enterForward_1r1om_52", o = "_enterBack_1r1om_56", s = {
+	view: e,
+	page: t,
+	pageHeader: n,
+	pageTitle: r,
+	pageContent: i,
+	enterForward: a,
+	"slide-in-right": "_slide-in-right_1r1om_1",
+	enterBack: o,
+	"slide-in-left": "_slide-in-left_1r1om_1"
+};
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=NavigationView.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationView.module.css.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\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  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes slide-in-right {\n  from { transform: translateX(40px); opacity: 0; }\n  to   { transform: translateX(0);    opacity: 1; }\n}\n\n@keyframes slide-in-left {\n  from { transform: translateX(-40px); opacity: 0; }\n  to   { transform: translateX(0);     opacity: 1; }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/NavigationView.cjs

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

package/dist/components/NavigationView.d.ts

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

package/dist/components/NavigationView.js

@@ -0,0 +1,2 @@
+import { NavigationPage as e, NavigationView as t, useNavigation as n } from "./NavigationView/NavigationView.js";
+export { e as NavigationPage, t as NavigationView, n as useNavigation };

package/dist/components/OverlaySplitView/OverlaySplitView.cjs

@@ -0,0 +1,2 @@
+const e=require(`../../hooks/useBreakpoint.cjs`),t=require(`./OverlaySplitView.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({sidebar:i,content:a,showSidebar:o=!1,onClose:s,collapsed:c=!1,sidebarPosition:l=`start`,minSidebarWidth:u=180,maxSidebarWidth:d=280,sidebarWidthFraction:f=.25,className:p,style:m,...h}){let{isNarrow:g}=e.useBreakpoint(),_=(0,n.useRef)(null),v=`clamp(${u}px, ${f*100}%, ${d}px)`;(0,n.useEffect)(()=>{if(!g||!o)return;let e=e=>{e.key===`Escape`&&s?.()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[g,o,s]),(0,n.useEffect)(()=>{!g||!o||(_.current?.querySelector(`button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])`))?.focus()},[g,o]);let y=l===`end`;return(0,n.useEffect)(()=>{if(!g||!o)return;let e=_.current;if(!e)return;let t=0,n=e=>{t=e.touches[0].clientX},r=e=>{let n=e.changedTouches[0].clientX-t;(y?n>80:n<-80)&&s?.()};return e.addEventListener(`touchstart`,n,{passive:!0}),e.addEventListener(`touchend`,r,{passive:!0}),()=>{e.removeEventListener(`touchstart`,n),e.removeEventListener(`touchend`,r)}},[g,o,y,s]),(0,r.jsxs)(`div`,{className:[t.default.root,g?t.default.narrow:t.default.wide,!g&&c?t.default.collapsed:null,y?t.default.end:t.default.start,p].filter(Boolean).join(` `),style:{"--sidebar-width":v,...m},...h,children:[g&&(0,r.jsx)(`div`,{className:[t.default.backdrop,o?t.default.backdropVisible:null].filter(Boolean).join(` `),"aria-hidden":`true`,onClick:s}),(0,r.jsx)(`div`,{ref:_,className:[t.default.sidebar,g?o?t.default.sidebarOpen:t.default.sidebarClosed:null].filter(Boolean).join(` `),"aria-hidden":g&&!o,children:i}),(0,r.jsx)(`div`,{className:t.default.content,children:a})]})}exports.OverlaySplitView=i;
+//# sourceMappingURL=OverlaySplitView.cjs.map

package/dist/components/OverlaySplitView/OverlaySplitView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySplitView.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./OverlaySplitView.module.css\";\n\nexport interface OverlaySplitViewProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The sidebar pane.\n   * On wide screens it sits beside the content.\n   * On narrow screens it slides over the content as an overlay.\n   */\n  sidebar: ReactNode;\n  /** The main content pane — always visible. */\n  content: ReactNode;\n  /**\n   * Whether the sidebar is shown.\n   * - Wide screens: always both visible; this prop is ignored.\n   * - Narrow screens (≤ 400 px): controls whether the overlay is open.\n   */\n  showSidebar?: boolean;\n  /**\n   * Called when the user clicks the backdrop (narrow screens only).\n   * Use this to set `showSidebar` to false.\n   */\n  onClose?: () => void;\n  /**\n   * When `true`, collapses the sidebar to icon-only width on wide screens.\n   * Has no effect in narrow (overlay) mode.\n   * Pair with `collapsed` on the inner `<Sidebar>` component to hide labels.\n   */\n  collapsed?: boolean;\n  /**\n   * Which side the sidebar appears on. Defaults to `\"start\"` (left in LTR).\n   */\n  sidebarPosition?: \"start\" | \"end\";\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar. Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Sidebar + content layout where the sidebar becomes a slide-over overlay\n * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.\n *\n * On **wide** screens (> 400 px) sidebar and content are side-by-side.\n * On **narrow** screens (≤ 400 px) the content fills the full width and\n * the sidebar slides in as an overlay when `showSidebar` is true,\n * with a translucent backdrop behind it.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <OverlaySplitView\n *   showSidebar={open}\n *   onClose={() => setOpen(false)}\n *   sidebar={<Nav />}\n *   content={<MainContent onMenuClick={() => setOpen(true)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html\n */\nexport function OverlaySplitView({\n  sidebar,\n  content,\n  showSidebar = false,\n  onClose,\n  collapsed = false,\n  sidebarPosition = \"start\",\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: OverlaySplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const sidebarWidth =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [isNarrow, showSidebar, onClose]);\n\n  // Trap focus inside sidebar when open in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    );\n    first?.focus();\n  }, [isNarrow, showSidebar]);\n\n  const isEnd = sidebarPosition === \"end\";\n\n  // Swipe-to-dismiss: drag the sidebar in the close direction to trigger onClose\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const el = sidebarRef.current;\n    if (!el) return;\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => { startX = e.touches[0].clientX; };\n    const onTouchEnd   = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n      if (closeSwipe) onClose?.();\n    };\n\n    el.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n    el.addEventListener(\"touchend\",   onTouchEnd,   { passive: true });\n    return () => {\n      el.removeEventListener(\"touchstart\", onTouchStart);\n      el.removeEventListener(\"touchend\",   onTouchEnd);\n    };\n  }, [isNarrow, showSidebar, isEnd, onClose]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.narrow : styles.wide,\n        !isNarrow && collapsed ? styles.collapsed : null,\n        isEnd ? styles.end : styles.start,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--sidebar-width\": sidebarWidth, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {/* Backdrop — narrow mode only */}\n      {isNarrow && (\n        <div\n          className={[styles.backdrop, showSidebar ? styles.backdropVisible : null]\n            .filter(Boolean)\n            .join(\" \")}\n          aria-hidden=\"true\"\n          onClick={onClose}\n        />\n      )}\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={[\n          styles.sidebar,\n          isNarrow\n            ? showSidebar ? styles.sidebarOpen : styles.sidebarClosed\n            : null,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={isNarrow && !showSidebar}\n      >\n        {sidebar}\n      </div>\n\n      {/* Content */}\n      <div className={styles.content}>\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"sJAqEA,SAAgB,EAAiB,CAC/B,UACA,UACA,cAAc,GACd,UACA,YAAY,GACZ,kBAAkB,QAClB,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,GACqB,CACxB,GAAM,CAAE,YAAa,EAAA,eAAe,CAC9B,GAAA,EAAA,EAAA,QAAoC,KAAK,CAEzC,EACJ,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,MAGjF,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAAa,OAC/B,IAAM,EAAW,GAAqB,CAChC,EAAE,MAAQ,UAAU,KAAW,EAGrC,OADA,SAAS,iBAAiB,UAAW,EAAQ,KAChC,SAAS,oBAAoB,UAAW,EAAQ,EAC5D,CAAC,EAAU,EAAa,EAAQ,CAAC,EAGpC,EAAA,EAAA,eAAgB,CACV,CAAC,GAAY,CAAC,IACJ,EAAW,SAAS,cAChC,2EACD,GACM,OAAO,EACb,CAAC,EAAU,EAAY,CAAC,CAE3B,IAAM,EAAQ,IAAoB,MA0BlC,OAvBA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAAa,OAC/B,IAAM,EAAK,EAAW,QACtB,GAAI,CAAC,EAAI,OAET,IAAI,EAAS,EAGP,EAAgB,GAAkB,CAAE,EAAS,EAAE,QAAQ,GAAG,SAC1D,EAAgB,GAAkB,CACtC,IAAM,EAAK,EAAE,eAAe,GAAG,QAAU,GACtB,EAAQ,EAAK,GAAY,EAAK,MACjC,KAAW,EAK7B,OAFA,EAAG,iBAAiB,aAAc,EAAc,CAAE,QAAS,GAAM,CAAC,CAClE,EAAG,iBAAiB,WAAc,EAAc,CAAE,QAAS,GAAM,CAAC,KACrD,CACX,EAAG,oBAAoB,aAAc,EAAa,CAClD,EAAG,oBAAoB,WAAc,EAAW,GAEjD,CAAC,EAAU,EAAa,EAAO,EAAQ,CAAC,EAGzC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,OAAS,EAAA,QAAO,KAClC,CAAC,GAAY,EAAY,EAAA,QAAO,UAAY,KAC5C,EAAQ,EAAA,QAAO,IAAM,EAAA,QAAO,MAC5B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,kBAAmB,EAAc,GAAG,EAAO,CACpD,GAAI,WAXN,CAcG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,SAAU,EAAc,EAAA,QAAO,gBAAkB,KAAK,CACtE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAY,OACZ,QAAS,EACT,CAAA,EAIJ,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,CACT,EAAA,QAAO,QACP,EACI,EAAc,EAAA,QAAO,YAAc,EAAA,QAAO,cAC1C,KACL,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,CAAC,WAEzB,EACG,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBACpB,EACG,CAAA,CACF"}

package/dist/components/OverlaySplitView/OverlaySplitView.js

@@ -0,0 +1,75 @@
+import { useBreakpoint as e } from "../../hooks/useBreakpoint.js";
+import t from "./OverlaySplitView.module.css.js";
+import { useEffect as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/OverlaySplitView/OverlaySplitView.tsx
+function o({ sidebar: o, content: s, showSidebar: c = !1, onClose: l, collapsed: u = !1, sidebarPosition: d = "start", minSidebarWidth: f = 180, maxSidebarWidth: p = 280, sidebarWidthFraction: m = .25, className: h, style: g, ..._ }) {
+	let { isNarrow: v } = e(), y = r(null), b = `clamp(${f}px, ${m * 100}%, ${p}px)`;
+	n(() => {
+		if (!v || !c) return;
+		let e = (e) => {
+			e.key === "Escape" && l?.();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		v,
+		c,
+		l
+	]), n(() => {
+		!v || !c || (y.current?.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+	}, [v, c]);
+	let x = d === "end";
+	return n(() => {
+		if (!v || !c) return;
+		let e = y.current;
+		if (!e) return;
+		let t = 0, n = (e) => {
+			t = e.touches[0].clientX;
+		}, r = (e) => {
+			let n = e.changedTouches[0].clientX - t;
+			(x ? n > 80 : n < -80) && l?.();
+		};
+		return e.addEventListener("touchstart", n, { passive: !0 }), e.addEventListener("touchend", r, { passive: !0 }), () => {
+			e.removeEventListener("touchstart", n), e.removeEventListener("touchend", r);
+		};
+	}, [
+		v,
+		c,
+		x,
+		l
+	]), /* @__PURE__ */ a("div", {
+		className: [
+			t.root,
+			v ? t.narrow : t.wide,
+			!v && u ? t.collapsed : null,
+			x ? t.end : t.start,
+			h
+		].filter(Boolean).join(" "),
+		style: {
+			"--sidebar-width": b,
+			...g
+		},
+		..._,
+		children: [
+			v && /* @__PURE__ */ i("div", {
+				className: [t.backdrop, c ? t.backdropVisible : null].filter(Boolean).join(" "),
+				"aria-hidden": "true",
+				onClick: l
+			}),
+			/* @__PURE__ */ i("div", {
+				ref: y,
+				className: [t.sidebar, v ? c ? t.sidebarOpen : t.sidebarClosed : null].filter(Boolean).join(" "),
+				"aria-hidden": v && !c,
+				children: o
+			}),
+			/* @__PURE__ */ i("div", {
+				className: t.content,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { o as OverlaySplitView };
+
+//# sourceMappingURL=OverlaySplitView.js.map

package/dist/components/OverlaySplitView/OverlaySplitView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySplitView.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./OverlaySplitView.module.css\";\n\nexport interface OverlaySplitViewProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The sidebar pane.\n   * On wide screens it sits beside the content.\n   * On narrow screens it slides over the content as an overlay.\n   */\n  sidebar: ReactNode;\n  /** The main content pane — always visible. */\n  content: ReactNode;\n  /**\n   * Whether the sidebar is shown.\n   * - Wide screens: always both visible; this prop is ignored.\n   * - Narrow screens (≤ 400 px): controls whether the overlay is open.\n   */\n  showSidebar?: boolean;\n  /**\n   * Called when the user clicks the backdrop (narrow screens only).\n   * Use this to set `showSidebar` to false.\n   */\n  onClose?: () => void;\n  /**\n   * When `true`, collapses the sidebar to icon-only width on wide screens.\n   * Has no effect in narrow (overlay) mode.\n   * Pair with `collapsed` on the inner `<Sidebar>` component to hide labels.\n   */\n  collapsed?: boolean;\n  /**\n   * Which side the sidebar appears on. Defaults to `\"start\"` (left in LTR).\n   */\n  sidebarPosition?: \"start\" | \"end\";\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar. Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Sidebar + content layout where the sidebar becomes a slide-over overlay\n * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.\n *\n * On **wide** screens (> 400 px) sidebar and content are side-by-side.\n * On **narrow** screens (≤ 400 px) the content fills the full width and\n * the sidebar slides in as an overlay when `showSidebar` is true,\n * with a translucent backdrop behind it.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <OverlaySplitView\n *   showSidebar={open}\n *   onClose={() => setOpen(false)}\n *   sidebar={<Nav />}\n *   content={<MainContent onMenuClick={() => setOpen(true)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html\n */\nexport function OverlaySplitView({\n  sidebar,\n  content,\n  showSidebar = false,\n  onClose,\n  collapsed = false,\n  sidebarPosition = \"start\",\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: OverlaySplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const sidebarWidth =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [isNarrow, showSidebar, onClose]);\n\n  // Trap focus inside sidebar when open in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    );\n    first?.focus();\n  }, [isNarrow, showSidebar]);\n\n  const isEnd = sidebarPosition === \"end\";\n\n  // Swipe-to-dismiss: drag the sidebar in the close direction to trigger onClose\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const el = sidebarRef.current;\n    if (!el) return;\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => { startX = e.touches[0].clientX; };\n    const onTouchEnd   = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n      if (closeSwipe) onClose?.();\n    };\n\n    el.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n    el.addEventListener(\"touchend\",   onTouchEnd,   { passive: true });\n    return () => {\n      el.removeEventListener(\"touchstart\", onTouchStart);\n      el.removeEventListener(\"touchend\",   onTouchEnd);\n    };\n  }, [isNarrow, showSidebar, isEnd, onClose]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.narrow : styles.wide,\n        !isNarrow && collapsed ? styles.collapsed : null,\n        isEnd ? styles.end : styles.start,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--sidebar-width\": sidebarWidth, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {/* Backdrop — narrow mode only */}\n      {isNarrow && (\n        <div\n          className={[styles.backdrop, showSidebar ? styles.backdropVisible : null]\n            .filter(Boolean)\n            .join(\" \")}\n          aria-hidden=\"true\"\n          onClick={onClose}\n        />\n      )}\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={[\n          styles.sidebar,\n          isNarrow\n            ? showSidebar ? styles.sidebarOpen : styles.sidebarClosed\n            : null,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={isNarrow && !showSidebar}\n      >\n        {sidebar}\n      </div>\n\n      {/* Content */}\n      <div className={styles.content}>\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAqEA,SAAgB,EAAiB,EAC/B,YACA,YACA,iBAAc,IACd,YACA,eAAY,IACZ,qBAAkB,SAClB,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,KACqB;CACxB,IAAM,EAAE,gBAAa,GAAe,EAC9B,IAAa,EAAuB,KAAK,EAEzC,IACJ,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAajF,CAVA,QAAgB;AACd,MAAI,CAAC,KAAY,CAAC,EAAa;EAC/B,IAAM,KAAW,MAAqB;AACpC,GAAI,EAAE,QAAQ,YAAU,KAAW;;AAGrC,SADA,SAAS,iBAAiB,WAAW,EAAQ,QAChC,SAAS,oBAAoB,WAAW,EAAQ;IAC5D;EAAC;EAAU;EAAa;EAAQ,CAAC,EAGpC,QAAgB;AACV,GAAC,KAAY,CAAC,MACJ,EAAW,SAAS,cAChC,6EACD,GACM,OAAO;IACb,CAAC,GAAU,EAAY,CAAC;CAE3B,IAAM,IAAQ,MAAoB;AA0BlC,QAvBA,QAAgB;AACd,MAAI,CAAC,KAAY,CAAC,EAAa;EAC/B,IAAM,IAAK,EAAW;AACtB,MAAI,CAAC,EAAI;EAET,IAAI,IAAS,GAGP,KAAgB,MAAkB;AAAE,OAAS,EAAE,QAAQ,GAAG;KAC1D,KAAgB,MAAkB;GACtC,IAAM,IAAK,EAAE,eAAe,GAAG,UAAU;AAEzC,IADmB,IAAQ,IAAK,KAAY,IAAK,QACjC,KAAW;;AAK7B,SAFA,EAAG,iBAAiB,cAAc,GAAc,EAAE,SAAS,IAAM,CAAC,EAClE,EAAG,iBAAiB,YAAc,GAAc,EAAE,SAAS,IAAM,CAAC,QACrD;AAEX,GADA,EAAG,oBAAoB,cAAc,EAAa,EAClD,EAAG,oBAAoB,YAAc,EAAW;;IAEjD;EAAC;EAAU;EAAa;EAAO;EAAQ,CAAC,EAGzC,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAW,EAAO,SAAS,EAAO;GAClC,CAAC,KAAY,IAAY,EAAO,YAAY;GAC5C,IAAQ,EAAO,MAAM,EAAO;GAC5B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,mBAAmB;GAAc,GAAG;GAAO;EACpD,GAAI;YAXN;GAcG,KACC,kBAAC,OAAD;IACE,WAAW,CAAC,EAAO,UAAU,IAAc,EAAO,kBAAkB,KAAK,CACtE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAY;IACZ,SAAS;IACT,CAAA;GAIJ,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,CACT,EAAO,SACP,IACI,IAAc,EAAO,cAAc,EAAO,gBAC1C,KACL,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY,CAAC;cAEzB;IACG,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB;IACG,CAAA;GACF"}

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

@@ -0,0 +1,2 @@
+var e={root:`_root_1g9mq_3`,wide:`_wide_1g9mq_13`,end:`_end_1g9mq_17`,sidebar:`_sidebar_1g9mq_21`,collapsed:`_collapsed_1g9mq_28`,content:`_content_1g9mq_32`,narrow:`_narrow_1g9mq_40`,start:`_start_1g9mq_60`,sidebarOpen:`_sidebarOpen_1g9mq_64`,sidebarClosed:`_sidebarClosed_1g9mq_65`,backdrop:`_backdrop_1g9mq_77`,backdropVisible:`_backdropVisible_1g9mq_88`};exports.default=e;
+//# sourceMappingURL=OverlaySplitView.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySplitView.module.css.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, clamp(180px, 25%, 280px));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: 56px;\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, clamp(180px, 75%, 280px));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen  { transform: translateX(0); }\n.narrow.start .sidebarClosed { transform: translateX(-100%); }\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen  { transform: translateX(0); }\n.narrow.end .sidebarClosed { transform: translateX(100%); }\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,18 @@
+var e = {
+	root: "_root_1g9mq_3",
+	wide: "_wide_1g9mq_13",
+	end: "_end_1g9mq_17",
+	sidebar: "_sidebar_1g9mq_21",
+	collapsed: "_collapsed_1g9mq_28",
+	content: "_content_1g9mq_32",
+	narrow: "_narrow_1g9mq_40",
+	start: "_start_1g9mq_60",
+	sidebarOpen: "_sidebarOpen_1g9mq_64",
+	sidebarClosed: "_sidebarClosed_1g9mq_65",
+	backdrop: "_backdrop_1g9mq_77",
+	backdropVisible: "_backdropVisible_1g9mq_88"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=OverlaySplitView.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySplitView.module.css.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, clamp(180px, 25%, 280px));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: 56px;\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, clamp(180px, 75%, 280px));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen  { transform: translateX(0); }\n.narrow.start .sidebarClosed { transform: translateX(-100%); }\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen  { transform: translateX(0); }\n.narrow.end .sidebarClosed { transform: translateX(100%); }\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/OverlaySplitView.cjs

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

package/dist/components/OverlaySplitView.d.ts

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

package/dist/components/OverlaySplitView.js

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

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Icon/Icon.cjs`),t=require(`../../icons/dist/icons/ViewReveal.cjs`),n=require(`../../icons/dist/icons/ViewConceal.cjs`),r=require(`../EntryRow/EntryRow.cjs`),i=require(`./PasswordEntryRow.module.css.cjs`);let a=require(`react`),o=require(`react/jsx-runtime`);function s({trailing:s,disabled:c,...l}){let[u,d]=(0,a.useState)(!1),f=(0,o.jsx)(`button`,{type:`button`,className:i.default.revealButton,onClick:e=>{e.stopPropagation(),d(e=>!e)},"aria-label":u?`Conceal password`:`Reveal password`,"aria-pressed":u,disabled:c,children:(0,o.jsx)(e.Icon,{icon:u?n.e:t.e,size:`md`,"aria-hidden":!0})});return(0,o.jsx)(r.EntryRow,{...l,type:u?`text`:`password`,disabled:c,trailing:(0,o.jsxs)(o.Fragment,{children:[s,f]})})}exports.PasswordEntryRow=s;
+//# sourceMappingURL=PasswordEntryRow.cjs.map

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":"sRAoBA,SAAgB,EAAiB,CAAE,WAAU,WAAU,GAAG,GAAgC,CACxF,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,GAAM,CAEzC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAa,GAAM,CAAC,EAAE,EAExB,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,KAAM,EAAW,EAAA,EAAc,EAAA,EAC/B,KAAK,KACL,cAAA,GACA,CAAA,CACK,CAAA,CAGX,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,EACA,CAAA,CAAA,CAEL,CAAA"}

package/dist/components/PasswordEntryRow/PasswordEntryRow.js

@@ -0,0 +1,35 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { e as t } from "../../icons/dist/icons/ViewReveal.js";
+import { e as n } from "../../icons/dist/icons/ViewConceal.js";
+import { EntryRow as r } from "../EntryRow/EntryRow.js";
+import i from "./PasswordEntryRow.module.css.js";
+import { useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/PasswordEntryRow/PasswordEntryRow.tsx
+function l({ trailing: l, disabled: u, ...d }) {
+	let [f, p] = a(!1), m = /* @__PURE__ */ s("button", {
+		type: "button",
+		className: i.revealButton,
+		onClick: (e) => {
+			e.stopPropagation(), p((e) => !e);
+		},
+		"aria-label": f ? "Conceal password" : "Reveal password",
+		"aria-pressed": f,
+		disabled: u,
+		children: /* @__PURE__ */ s(e, {
+			icon: f ? n : t,
+			size: "md",
+			"aria-hidden": !0
+		})
+	});
+	return /* @__PURE__ */ s(r, {
+		...d,
+		type: f ? "text" : "password",
+		disabled: u,
+		trailing: /* @__PURE__ */ c(o, { children: [l, m] })
+	});
+}
+//#endregion
+export { l as PasswordEntryRow };
+
+//# sourceMappingURL=PasswordEntryRow.js.map

package/dist/components/PasswordEntryRow/PasswordEntryRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAiB,EAAE,aAAU,aAAU,GAAG,KAAgC;CACxF,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;AAEd,GADA,EAAE,iBAAiB,EACnB,GAAa,MAAM,CAAC,EAAE;;EAExB,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GACE,MAAM,IAAW,IAAc;GAC/B,MAAK;GACL,eAAA;GACA,CAAA;EACK,CAAA;AAGX,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordEntryRow.module.css.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.module.css"],"sourcesContent":["/* ─── Reveal button ─────────────────────────────────────────────────────────── */\n\n.revealButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--gnome-radius-small, 6px);\n  background: transparent;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  flex-shrink: 0;\n\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.revealButton:hover {\n  opacity: 1;\n  background: var(--gnome-button-bg-color, rgba(0, 0, 0, 0.07));\n}\n\n.revealButton:active {\n  background: var(--gnome-button-active-bg-color, rgba(0, 0, 0, 0.14));\n}\n\n.revealButton:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n  opacity: 1;\n}\n\n.revealButton:disabled {\n  pointer-events: none;\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .revealButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordEntryRow.module.css.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.module.css"],"sourcesContent":["/* ─── Reveal button ─────────────────────────────────────────────────────────── */\n\n.revealButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--gnome-radius-small, 6px);\n  background: transparent;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  flex-shrink: 0;\n\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.revealButton:hover {\n  opacity: 1;\n  background: var(--gnome-button-bg-color, rgba(0, 0, 0, 0.07));\n}\n\n.revealButton:active {\n  background: var(--gnome-button-active-bg-color, rgba(0, 0, 0, 0.14));\n}\n\n.revealButton:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n  opacity: 1;\n}\n\n.revealButton:disabled {\n  pointer-events: none;\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .revealButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/PasswordEntryRow.cjs

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

package/dist/components/PasswordEntryRow.d.ts

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

package/dist/components/PasswordEntryRow.js

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

package/dist/components/PathBar/PathBar.cjs

@@ -0,0 +1,2 @@
+const e=require(`./PathBar.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({segments:n,onNavigate:r,className:i,...a}){return(0,t.jsx)(`nav`,{"aria-label":`Breadcrumb`,className:[e.default.pathBar,i].filter(Boolean).join(` `),...a,children:(0,t.jsx)(`ol`,{className:e.default.list,"aria-label":`Path segments`,children:n.map((i,a)=>{let o=a===n.length-1;return(0,t.jsxs)(`li`,{className:e.default.item,children:[a>0&&(0,t.jsx)(`span`,{className:e.default.separator,"aria-hidden":`true`,children:(0,t.jsx)(`svg`,{width:`12`,height:`12`,viewBox:`0 0 12 12`,focusable:`false`,children:(0,t.jsx)(`path`,{d:`M4 2l4 4-4 4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),o?(0,t.jsxs)(`span`,{className:e.default.current,"aria-current":`page`,children:[i.icon&&(0,t.jsx)(`span`,{className:e.default.icon,"aria-hidden":`true`,children:i.icon}),i.label]}):(0,t.jsxs)(`button`,{type:`button`,className:e.default.segment,onClick:()=>r?.(i.path,a),children:[i.icon&&(0,t.jsx)(`span`,{className:e.default.icon,"aria-hidden":`true`,children:i.icon}),i.label]})]},i.path)})})})}exports.PathBar=n;
+//# sourceMappingURL=PathBar.cjs.map

package/dist/components/PathBar/PathBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathBar.cjs","names":[],"sources":["../../../src/components/PathBar/PathBar.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./PathBar.module.css\";\n\nexport interface PathBarSegment {\n  /** Display label for this path segment. */\n  label: string;\n  /** Opaque path value passed to `onNavigate` when the segment is clicked. */\n  path: string;\n  /** Optional icon placed before the label (e.g. a folder icon). */\n  icon?: ReactNode;\n}\n\nexport interface PathBarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Ordered path segments from root to current location.\n   * The last segment is the current folder and is rendered non-interactive.\n   */\n  segments: PathBarSegment[];\n  /**\n   * Called when the user clicks on a non-current segment.\n   * Receives the `path` and zero-based `index` of the clicked segment.\n   */\n  onNavigate?: (path: string, index: number) => void;\n}\n\n/**\n * Breadcrumb path bar for navigating a hierarchical location.\n *\n * Mirrors the location bar in GNOME Files (Nautilus). Segments are separated\n * by chevron dividers. All segments except the last are interactive — clicking\n * them calls `onNavigate`. The last segment represents the current location and\n * is rendered as a static label.\n *\n * @see https://developer.gnome.org/hig/patterns/nav/search.html\n */\nexport function PathBar({ segments, onNavigate, className, ...props }: PathBarProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={[styles.pathBar, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <ol className={styles.list} aria-label=\"Path segments\">\n        {segments.map((segment, index) => {\n          const isCurrent = index === segments.length - 1;\n          return (\n            <li key={segment.path} className={styles.item}>\n              {/* Separator chevron (not before the first segment) */}\n              {index > 0 && (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" focusable=\"false\">\n                    <path\n                      d=\"M4 2l4 4-4 4\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              )}\n\n              {isCurrent ? (\n                /* Current folder — non-interactive */\n                <span\n                  className={styles.current}\n                  aria-current=\"page\"\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </span>\n              ) : (\n                /* Ancestor folder — clickable */\n                <button\n                  type=\"button\"\n                  className={styles.segment}\n                  onClick={() => onNavigate?.(segment.path, index)}\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"+EAmCA,SAAgB,EAAQ,CAAE,WAAU,aAAY,YAAW,GAAG,GAAuB,CACnF,OACE,EAAA,EAAA,KAAC,MAAD,CACE,aAAW,aACX,UAAW,CAAC,EAAA,QAAO,QAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAChE,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,KAAM,aAAW,yBACpC,EAAS,KAAK,EAAS,IAAU,CAChC,IAAM,EAAY,IAAU,EAAS,OAAS,EAC9C,OACE,EAAA,EAAA,MAAC,KAAD,CAAuB,UAAW,EAAA,QAAO,cAAzC,CAEG,EAAQ,IACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAW,cAAY,iBAC7C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,UAAU,kBACxD,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CAGR,GAEC,EAAA,EAAA,MAAC,OAAD,CACE,UAAW,EAAA,QAAO,QAClB,eAAa,gBAFf,CAIG,EAAQ,OACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBAAQ,EAAQ,KAAY,CAAA,CAEvE,EAAQ,MACJ,IAGP,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,IAAa,EAAQ,KAAM,EAAM,UAHlD,CAKG,EAAQ,OACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBAAQ,EAAQ,KAAY,CAAA,CAEvE,EAAQ,MACF,GAER,EAzCI,EAAQ,KAyCZ,EAEP,CACC,CAAA,CACD,CAAA"}

package/dist/components/PathBar/PathBar.js

@@ -0,0 +1,59 @@
+import e from "./PathBar.module.css.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/PathBar/PathBar.tsx
+function r({ segments: r, onNavigate: i, className: a, ...o }) {
+	return /* @__PURE__ */ t("nav", {
+		"aria-label": "Breadcrumb",
+		className: [e.pathBar, a].filter(Boolean).join(" "),
+		...o,
+		children: /* @__PURE__ */ t("ol", {
+			className: e.list,
+			"aria-label": "Path segments",
+			children: r.map((a, o) => {
+				let s = o === r.length - 1;
+				return /* @__PURE__ */ n("li", {
+					className: e.item,
+					children: [o > 0 && /* @__PURE__ */ t("span", {
+						className: e.separator,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ t("svg", {
+							width: "12",
+							height: "12",
+							viewBox: "0 0 12 12",
+							focusable: "false",
+							children: /* @__PURE__ */ t("path", {
+								d: "M4 2l4 4-4 4",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					}), s ? /* @__PURE__ */ n("span", {
+						className: e.current,
+						"aria-current": "page",
+						children: [a.icon && /* @__PURE__ */ t("span", {
+							className: e.icon,
+							"aria-hidden": "true",
+							children: a.icon
+						}), a.label]
+					}) : /* @__PURE__ */ n("button", {
+						type: "button",
+						className: e.segment,
+						onClick: () => i?.(a.path, o),
+						children: [a.icon && /* @__PURE__ */ t("span", {
+							className: e.icon,
+							"aria-hidden": "true",
+							children: a.icon
+						}), a.label]
+					})]
+				}, a.path);
+			})
+		})
+	});
+}
+//#endregion
+export { r as PathBar };
+
+//# sourceMappingURL=PathBar.js.map

package/dist/components/PathBar/PathBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathBar.js","names":[],"sources":["../../../src/components/PathBar/PathBar.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./PathBar.module.css\";\n\nexport interface PathBarSegment {\n  /** Display label for this path segment. */\n  label: string;\n  /** Opaque path value passed to `onNavigate` when the segment is clicked. */\n  path: string;\n  /** Optional icon placed before the label (e.g. a folder icon). */\n  icon?: ReactNode;\n}\n\nexport interface PathBarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Ordered path segments from root to current location.\n   * The last segment is the current folder and is rendered non-interactive.\n   */\n  segments: PathBarSegment[];\n  /**\n   * Called when the user clicks on a non-current segment.\n   * Receives the `path` and zero-based `index` of the clicked segment.\n   */\n  onNavigate?: (path: string, index: number) => void;\n}\n\n/**\n * Breadcrumb path bar for navigating a hierarchical location.\n *\n * Mirrors the location bar in GNOME Files (Nautilus). Segments are separated\n * by chevron dividers. All segments except the last are interactive — clicking\n * them calls `onNavigate`. The last segment represents the current location and\n * is rendered as a static label.\n *\n * @see https://developer.gnome.org/hig/patterns/nav/search.html\n */\nexport function PathBar({ segments, onNavigate, className, ...props }: PathBarProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={[styles.pathBar, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <ol className={styles.list} aria-label=\"Path segments\">\n        {segments.map((segment, index) => {\n          const isCurrent = index === segments.length - 1;\n          return (\n            <li key={segment.path} className={styles.item}>\n              {/* Separator chevron (not before the first segment) */}\n              {index > 0 && (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" focusable=\"false\">\n                    <path\n                      d=\"M4 2l4 4-4 4\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              )}\n\n              {isCurrent ? (\n                /* Current folder — non-interactive */\n                <span\n                  className={styles.current}\n                  aria-current=\"page\"\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </span>\n              ) : (\n                /* Ancestor folder — clickable */\n                <button\n                  type=\"button\"\n                  className={styles.segment}\n                  onClick={() => onNavigate?.(segment.path, index)}\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;AAmCA,SAAgB,EAAQ,EAAE,aAAU,eAAY,cAAW,GAAG,KAAuB;AACnF,QACE,kBAAC,OAAD;EACE,cAAW;EACX,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAChE,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAM,cAAW;aACpC,EAAS,KAAK,GAAS,MAAU;IAChC,IAAM,IAAY,MAAU,EAAS,SAAS;AAC9C,WACE,kBAAC,MAAD;KAAuB,WAAW,EAAO;eAAzC,CAEG,IAAQ,KACP,kBAAC,QAAD;MAAM,WAAW,EAAO;MAAW,eAAY;gBAC7C,kBAAC,OAAD;OAAK,OAAM;OAAK,QAAO;OAAK,SAAQ;OAAY,WAAU;iBACxD,kBAAC,QAAD;QACE,GAAE;QACF,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QACd,gBAAe;QACf,CAAA;OACE,CAAA;MACD,CAAA,EAGR,IAEC,kBAAC,QAAD;MACE,WAAW,EAAO;MAClB,gBAAa;gBAFf,CAIG,EAAQ,QACP,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBAAQ,EAAQ;OAAY,CAAA,EAEvE,EAAQ,MACJ;UAGP,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,IAAa,EAAQ,MAAM,EAAM;gBAHlD,CAKG,EAAQ,QACP,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBAAQ,EAAQ;OAAY,CAAA,EAEvE,EAAQ,MACF;QAER;OAzCI,EAAQ,KAyCZ;KAEP;GACC,CAAA;EACD,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={pathBar:`_pathBar_1n4ev_3`,list:`_list_1n4ev_12`,item:`_item_1n4ev_25`,separator:`_separator_1n4ev_33`,segment:`_segment_1n4ev_44`,current:`_current_1n4ev_81`,icon:`_icon_1n4ev_98`};exports.default=e;
+//# sourceMappingURL=PathBar.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PathBar.module.css.cjs","names":[],"sources":["../../../src/components/PathBar/PathBar.module.css"],"sourcesContent":["/* ─── Root ────────────────────────────────────────────────────────────────── */\n\n.pathBar {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  font-family: var(--gnome-font-family, sans-serif);\n}\n\n/* ─── List ────────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n}\n\n/* ─── Item ────────────────────────────────────────────────────────────────── */\n\n.item {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* ─── Separator ───────────────────────────────────────────────────────────── */\n\n.separator {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.35));\n  opacity: 0.5;\n  margin: 0 1px;\n}\n\n/* ─── Ancestor segment (button) ───────────────────────────────────────────── */\n\n.segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.segment:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n}\n\n.segment:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.segment:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\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/* ─── Current segment (non-interactive) ──────────────────────────────────── */\n\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n/* ─── Icon ────────────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .segment:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .segment:active {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+var e = {
+	pathBar: "_pathBar_1n4ev_3",
+	list: "_list_1n4ev_12",
+	item: "_item_1n4ev_25",
+	separator: "_separator_1n4ev_33",
+	segment: "_segment_1n4ev_44",
+	current: "_current_1n4ev_81",
+	icon: "_icon_1n4ev_98"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=PathBar.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PathBar.module.css.js","names":[],"sources":["../../../src/components/PathBar/PathBar.module.css"],"sourcesContent":["/* ─── Root ────────────────────────────────────────────────────────────────── */\n\n.pathBar {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  font-family: var(--gnome-font-family, sans-serif);\n}\n\n/* ─── List ────────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n}\n\n/* ─── Item ────────────────────────────────────────────────────────────────── */\n\n.item {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* ─── Separator ───────────────────────────────────────────────────────────── */\n\n.separator {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.35));\n  opacity: 0.5;\n  margin: 0 1px;\n}\n\n/* ─── Ancestor segment (button) ───────────────────────────────────────────── */\n\n.segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.segment:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n}\n\n.segment:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.segment:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\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/* ─── Current segment (non-interactive) ──────────────────────────────────── */\n\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n/* ─── Icon ────────────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .segment:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .segment:active {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n}\n"],"mappings":""}

package/dist/components/PathBar.cjs

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

package/dist/components/PathBar.d.ts

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

package/dist/components/PathBar.js

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

package/dist/components/Popover/Popover.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Popover.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=8,a=10,o=6;function s(e,t,n){let r=window.innerWidth,s=window.innerHeight,c=[...new Set([n,n===`top`?`bottom`:n===`bottom`?`top`:n===`left`?`right`:`left`,`bottom`,`top`,`left`,`right`])];function l(n){return n===`bottom`?{top:e.bottom+i,left:e.left+e.width/2-t.width/2}:n===`top`?{top:e.top-t.height-i,left:e.left+e.width/2-t.width/2}:n===`left`?{top:e.top+e.height/2-t.height/2,left:e.left-t.width-i}:{top:e.top+e.height/2-t.height/2,left:e.right+i}}for(let n of c){let{top:i,left:o}=l(n),c=o>=a&&o+t.width<=r-a,u=i>=a&&i+t.height<=s-a;if(c&&u)return{top:i,left:o,placement:n,arrowOffset:n===`top`||n===`bottom`?e.left+e.width/2-o:e.top+e.height/2-i}}for(let n of c){let{top:i,left:c}=l(n),u=i>=a&&i+t.height<=s-a,d=c>=a&&c+t.width<=r-a;if((n===`top`||n===`bottom`)&&u){let s=Math.max(a,Math.min(c,r-t.width-a)),l=e.left+e.width/2-s;return{top:i,left:s,placement:n,arrowOffset:Math.max(o+4,Math.min(l,t.width-o-4))}}if((n===`left`||n===`right`)&&d){let r=Math.max(a,Math.min(i,s-t.height-a)),l=e.top+e.height/2-r;return{top:r,left:c,placement:n,arrowOffset:Math.max(o+4,Math.min(l,t.height-o-4))}}}let u=e.bottom+i,d=e.left+e.width/2-t.width/2,f=Math.max(a,Math.min(u,s-t.height-a)),p=Math.max(a,Math.min(d,r-t.width-a)),m=e.left+e.width/2-p;return{top:f,left:p,placement:`bottom`,arrowOffset:Math.max(o+4,Math.min(m,t.width-o-4))}}function c({content:i,placement:a=`bottom`,open:c,onClose:l,onOpenChange:u,children:d}){let f=c!==void 0,[p,m]=(0,t.useState)(!1),h=f?c:p,[g,_]=(0,t.useState)(null),v=(0,t.useId)(),y=(0,t.useId)(),b=(0,t.useRef)(null),x=(0,t.useRef)(null),S=(0,t.useRef)(null),C=(0,t.useCallback)(()=>{f?l?.():m(!1),u?.(!1)},[f,l,u]),w=(0,t.useCallback)(()=>{h?C():(f||m(!0),u?.(!0))},[h,C,f,u]),T=(0,t.useCallback)(()=>{!b.current||!x.current||_(s(b.current.getBoundingClientRect(),x.current.getBoundingClientRect(),a))},[a]);(0,t.useEffect)(()=>{if(!h)return;let e=requestAnimationFrame(()=>{T(),window.addEventListener(`scroll`,T,{passive:!0,capture:!0}),window.addEventListener(`resize`,T,{passive:!0})});return()=>{cancelAnimationFrame(e),window.removeEventListener(`scroll`,T,{capture:!0}),window.removeEventListener(`resize`,T)}},[h,T]),(0,t.useEffect)(()=>{h?(S.current=document.activeElement,requestAnimationFrame(()=>{(x.current?.querySelector(`button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])`)??x.current)?.focus()})):(S.current?.focus(),_(null))},[h]),(0,t.useEffect)(()=>{if(!h)return;let e=e=>{!b.current?.contains(e.target)&&!x.current?.contains(e.target)&&C()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[h,C]);let E=(0,t.useCallback)(e=>{e.key===`Escape`&&(e.stopPropagation(),C())},[C]),D=(0,t.cloneElement)(d,{ref:b,id:v,"aria-haspopup":`dialog`,"aria-expanded":h,"aria-controls":h?y:void 0,onClick:e=>{w(),d.props.onClick?.(e)}}),O=(0,r.jsxs)(`div`,{ref:x,id:y,role:`dialog`,"aria-labelledby":v,tabIndex:-1,className:[e.default.panel,g?e.default[g.placement]:null,h&&g?e.default.visible:null].filter(Boolean).join(` `),style:g?{top:g.top,left:g.left}:{visibility:`hidden`,pointerEvents:`none`,top:-9999,left:-9999},onKeyDown:E,children:[(0,r.jsx)(`div`,{className:e.default.arrow,"aria-hidden":`true`,style:g?.arrowOffset===void 0?void 0:g.placement===`top`||g.placement===`bottom`?{left:g.arrowOffset-o,marginLeft:0}:{top:g.arrowOffset-o,marginTop:0}}),i]});return(0,r.jsxs)(r.Fragment,{children:[D,h&&(typeof document<`u`?(0,n.createPortal)(O,document.body):O)]})}exports.Popover=c;
+//# sourceMappingURL=Popover.cjs.map