@gnome-ui/react 1.36.1 → 1.36.3

package/README.md

@@ -27,8 +27,7 @@ import "@gnome-ui/react/styles";
 ## Quick example
 
 ```tsx
-import { Button, TextField, Dialog } from "@gnome-ui/react";
-import "@gnome-ui/react/styles";
+import { Button } from "@gnome-ui/react";
 
 export default function App() {
   return (
@@ -39,6 +38,21 @@ export default function App() {
 }
 ```
 
+## Tree-shaking
+
+The package ships per-component entry points, so bundlers (webpack, Rollup, esbuild, Vite) can eliminate unused components automatically. Named imports from the root entry work with any bundler that respects `"sideEffects"`:
+
+```tsx
+// Only Button is included in the bundle
+import { Button } from "@gnome-ui/react";
+```
+
+Per-component paths are also available for explicit control:
+
+```tsx
+import { Button } from "@gnome-ui/react/components/Button";
+```
+
 ## Components
 
 ### Controls

package/dist/components/AboutDialog/AboutDialog.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Dialog/dialogUtils.cjs`),t=require(`./AboutDialog.module.css.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);var a={details:`Details`,credits:`Credits`,legal:`Legal`};function o({open:o,onClose:s,applicationName:c,applicationIcon:l,version:u,comments:d,developerName:f,website:p,websiteLabel:m,developers:h,designers:g,artists:_,copyright:v,licenseType:y,licenseText:b,links:x}){let S=(0,n.useRef)(null),C=(0,n.useId)(),w=(0,n.useRef)(null),T=e.useVisualViewport(),[E,D]=(0,n.useState)(`details`);(0,n.useEffect)(()=>{o?(w.current=document.activeElement,(S.current?.querySelector(e.FOCUSABLE))?.focus()):(w.current?.focus(),D(`details`))},[o]);let O=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),s?.();return}e.trapFocus(t,S)},[s]);if(!o)return null;let k=[`details`,!!(h?.length||g?.length||_?.length)&&`credits`,!!(v||y||b)&&`legal`].filter(Boolean),A=(0,i.jsx)(`div`,{className:t.default.backdrop,style:T,onClick:s,"aria-hidden":`true`,children:(0,i.jsxs)(`div`,{ref:S,role:`dialog`,"aria-modal":`true`,"aria-labelledby":C,className:t.default.dialog,onKeyDown:O,onClick:e=>e.stopPropagation(),children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[l&&(0,i.jsx)(`div`,{className:t.default.icon,children:l}),(0,i.jsx)(`div`,{id:C,className:t.default.appName,children:c}),u&&(0,i.jsx)(`div`,{className:t.default.version,children:u})]}),k.length>1&&(0,i.jsx)(`div`,{className:t.default.tabBar,role:`tablist`,children:k.map(e=>(0,i.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":E===e,className:[t.default.tabBtn,E===e?t.default.tabBtnActive:null].filter(Boolean).join(` `),onClick:()=>D(e),children:a[e]},e))}),(0,i.jsxs)(`div`,{className:t.default.tabContent,children:[E===`details`&&(0,i.jsxs)(`div`,{className:t.default.section,children:[d&&(0,i.jsx)(`p`,{className:t.default.comments,children:d}),(f||p||x?.length)&&(0,i.jsxs)(`dl`,{className:t.default.infoList,children:[f&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:`Developer`}),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:f})]}),p&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:`Website`}),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:(0,i.jsx)(`a`,{href:p,target:`_blank`,rel:`noopener noreferrer`,className:t.default.link,children:m??p})})]}),x?.map(e=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:e.label},`${e.label}-dt`),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:(0,i.jsx)(`a`,{href:e.url,target:`_blank`,rel:`noopener noreferrer`,className:t.default.link,children:e.url})},`${e.label}-dd`)]}))]})]}),E===`credits`&&(0,i.jsx)(`div`,{className:t.default.section,children:[{heading:`Developers`,list:h},{heading:`Designers`,list:g},{heading:`Artists`,list:_}].filter(e=>e.list?.length).map(({heading:e,list:n})=>(0,i.jsxs)(`div`,{className:t.default.creditGroup,children:[(0,i.jsx)(`h4`,{className:t.default.creditTitle,children:e}),(0,i.jsx)(`ul`,{className:t.default.creditList,children:n.map(e=>(0,i.jsx)(`li`,{className:t.default.creditItem,children:e},e))})]},e))}),E===`legal`&&(0,i.jsxs)(`div`,{className:t.default.section,children:[v&&(0,i.jsx)(`p`,{className:t.default.copyright,children:v}),y&&(0,i.jsx)(`p`,{className:t.default.licenseType,children:y}),b&&(0,i.jsx)(`pre`,{className:t.default.licenseText,children:b})]})]}),(0,i.jsx)(`div`,{className:t.default.footer,children:(0,i.jsx)(`button`,{type:`button`,className:[t.default.btn,t.default.btnDefault].join(` `),onClick:s,children:`Close`})})]})});return typeof document>`u`?A:(0,r.createPortal)(A,document.body)}exports.AboutDialog=o;
+//# sourceMappingURL=AboutDialog.cjs.map

package/dist/components/AboutDialog/AboutDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutDialog.cjs","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FOCUSABLE, trapFocus, useVisualViewport } from \"../Dialog/dialogUtils\";\nimport styles from \"./AboutDialog.module.css\";\n\nexport interface AboutDialogLink {\n  label: string;\n  url: string;\n}\n\nexport interface AboutDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called on Escape or close button click. */\n  onClose?: () => void;\n  /** Application name. */\n  applicationName: string;\n  /** Icon rendered above the app name. */\n  applicationIcon?: ReactNode;\n  /** Version string (e.g. `\"1.0.0\"`). */\n  version?: string;\n  /** One-sentence description. */\n  comments?: string;\n  /** Developer or organisation name. */\n  developerName?: string;\n  /** Application website URL. */\n  website?: string;\n  /** Label for the website link. Defaults to the URL. */\n  websiteLabel?: string;\n  /** Developer names shown in the Credits tab. */\n  developers?: string[];\n  /** Designer names shown in the Credits tab. */\n  designers?: string[];\n  /** Artist names shown in the Credits tab. */\n  artists?: string[];\n  /** Copyright notice (e.g. `\"© 2024 Jane Smith\"`). */\n  copyright?: string;\n  /** SPDX identifier or short name (e.g. `\"GPL-3.0\"`). */\n  licenseType?: string;\n  /** Full license text shown in the Legal tab. */\n  licenseText?: string;\n  /** Extra links shown in the Details section. */\n  links?: AboutDialogLink[];\n}\n\ntype AboutTab = \"details\" | \"credits\" | \"legal\";\nconst ABOUT_TAB_LABEL: Record<AboutTab, string> = {\n  details: \"Details\",\n  credits: \"Credits\",\n  legal: \"Legal\",\n};\n\n/**\n * Standard app info dialog with details, credits, and legal tabs.\n * Mirrors `AdwAboutDialog`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html\n */\nexport function AboutDialog({\n  open,\n  onClose,\n  applicationName,\n  applicationIcon,\n  version,\n  comments,\n  developerName,\n  website,\n  websiteLabel,\n  developers,\n  designers,\n  artists,\n  copyright,\n  licenseType,\n  licenseText,\n  links,\n}: AboutDialogProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const [activeTab, setActiveTab] = useState<AboutTab>(\"details\");\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setActiveTab(\"details\");\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n        return;\n      }\n      trapFocus(e, dialogRef);\n    },\n    [onClose]\n  );\n\n  if (!open) return null;\n\n  const hasCredits = !!(developers?.length || designers?.length || artists?.length);\n  const hasLegal = !!(copyright || licenseType || licenseText);\n  const tabs = (\n    [\"details\", hasCredits && \"credits\", hasLegal && \"legal\"] as (AboutTab | false)[]\n  ).filter(Boolean) as AboutTab[];\n\n  const node = (\n    <div className={styles.backdrop} style={viewportStyle} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          {applicationIcon && <div className={styles.icon}>{applicationIcon}</div>}\n          <div id={titleId} className={styles.appName}>{applicationName}</div>\n          {version && <div className={styles.version}>{version}</div>}\n        </div>\n\n        {tabs.length > 1 && (\n          <div className={styles.tabBar} role=\"tablist\">\n            {tabs.map((t) => (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={activeTab === t}\n                className={[styles.tabBtn, activeTab === t ? styles.tabBtnActive : null]\n                  .filter(Boolean).join(\" \")}\n                onClick={() => setActiveTab(t)}\n              >\n                {ABOUT_TAB_LABEL[t]}\n              </button>\n            ))}\n          </div>\n        )}\n\n        <div className={styles.tabContent}>\n          {activeTab === \"details\" && (\n            <div className={styles.section}>\n              {comments && <p className={styles.comments}>{comments}</p>}\n              {(developerName || website || links?.length) && (\n                <dl className={styles.infoList}>\n                  {developerName && (\n                    <><dt className={styles.infoLabel}>Developer</dt><dd className={styles.infoValue}>{developerName}</dd></>\n                  )}\n                  {website && (\n                    <><dt className={styles.infoLabel}>Website</dt><dd className={styles.infoValue}>\n                      <a href={website} target=\"_blank\" rel=\"noopener noreferrer\" className={styles.link}>\n                        {websiteLabel ?? website}\n                      </a>\n                    </dd></>\n                  )}\n                  {links?.map((l) => (\n                    <><dt key={`${l.label}-dt`} className={styles.infoLabel}>{l.label}</dt>\n                      <dd key={`${l.label}-dd`} className={styles.infoValue}>\n                        <a href={l.url} target=\"_blank\" rel=\"noopener noreferrer\" className={styles.link}>{l.url}</a>\n                      </dd></>\n                  ))}\n                </dl>\n              )}\n            </div>\n          )}\n\n          {activeTab === \"credits\" && (\n            <div className={styles.section}>\n              {[\n                { heading: \"Developers\", list: developers },\n                { heading: \"Designers\", list: designers },\n                { heading: \"Artists\", list: artists },\n              ].filter((g) => g.list?.length).map(({ heading, list }) => (\n                <div key={heading} className={styles.creditGroup}>\n                  <h4 className={styles.creditTitle}>{heading}</h4>\n                  <ul className={styles.creditList}>\n                    {list!.map((name) => <li key={name} className={styles.creditItem}>{name}</li>)}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {activeTab === \"legal\" && (\n            <div className={styles.section}>\n              {copyright && <p className={styles.copyright}>{copyright}</p>}\n              {licenseType && <p className={styles.licenseType}>{licenseType}</p>}\n              {licenseText && <pre className={styles.licenseText}>{licenseText}</pre>}\n            </div>\n          )}\n        </div>\n\n        <div className={styles.footer}>\n          <button type=\"button\" className={[styles.btn, styles.btnDefault].join(\" \")} onClick={onClose}>\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"oKAsDA,IAAM,EAA4C,CAChD,QAAS,UACT,QAAS,UACT,MAAO,QACR,CAQD,SAAgB,EAAY,CAC1B,OACA,UACA,kBACA,kBACA,UACA,WACA,gBACA,UACA,eACA,aACA,YACA,UACA,YACA,cACA,cACA,SACmB,CACnB,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,EAAgB,EAAA,mBAAmB,CACnC,CAAC,EAAW,IAAA,EAAA,EAAA,UAAmC,UAAU,EAE/D,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAU,SAAS,cAA2B,EAAA,UAAU,GAC/D,OAAO,GAEV,EAAkB,SAAgC,OAAO,CAC1D,EAAa,UAAU,GAExB,CAAC,EAAK,CAAC,CAEV,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,gBAAgB,CAClB,KAAW,CACX,OAEF,EAAA,UAAU,EAAG,EAAU,EAEzB,CAAC,EAAQ,CACV,CAED,GAAI,CAAC,EAAM,OAAO,KAIlB,IAAM,EACJ,CAAC,UAHgB,CAAC,EAAE,GAAY,QAAU,GAAW,QAAU,GAAS,SAG9C,UAFX,CAAC,EAAE,GAAa,GAAe,IAEG,QAAQ,CACzD,OAAO,QAAQ,CAEX,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAU,MAAO,EAAe,QAAS,EAAS,cAAY,iBACnF,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EACjB,UAAW,EAAA,QAAO,OAClB,UAAW,EACX,QAAU,GAAM,EAAE,iBAAiB,UAPrC,EASE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,CACG,IAAmB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAO,EAAsB,CAAA,EACxE,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,iBAAU,EAAsB,CAAA,CACnE,IAAW,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAc,CAAA,CACvD,GAEL,EAAK,OAAS,IACb,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,KAAK,mBACjC,EAAK,IAAK,IACT,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,KAAK,MACL,gBAAe,IAAc,EAC7B,UAAW,CAAC,EAAA,QAAO,OAAQ,IAAc,EAAI,EAAA,QAAO,aAAe,KAAK,CACrE,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC5B,YAAe,EAAa,EAAE,UAE7B,EAAgB,GACV,CATF,EASE,CACT,CACE,CAAA,EAGR,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBAAvB,CACG,IAAc,YACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAvB,CACG,IAAY,EAAA,EAAA,KAAC,IAAD,CAAG,UAAW,EAAA,QAAO,kBAAW,EAAa,CAAA,EACxD,GAAiB,GAAW,GAAO,UACnC,EAAA,EAAA,MAAC,KAAD,CAAI,UAAW,EAAA,QAAO,kBAAtB,CACG,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EAAE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,mBAAW,YAAc,CAAA,EAAA,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,mBAAY,EAAmB,CAAA,CAAG,CAAA,CAAA,CAE1G,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EAAE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,mBAAW,UAAY,CAAA,EAAA,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,oBACnE,EAAA,EAAA,KAAC,IAAD,CAAG,KAAM,EAAS,OAAO,SAAS,IAAI,sBAAsB,UAAW,EAAA,QAAO,cAC3E,GAAgB,EACf,CAAA,CACD,CAAA,CAAG,CAAA,CAAA,CAET,GAAO,IAAK,IACX,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EAAE,EAAA,EAAA,KAAC,KAAD,CAA0B,UAAW,EAAA,QAAO,mBAAY,EAAE,MAAW,CAA5D,GAAG,EAAE,MAAM,KAAiD,EACrE,EAAA,EAAA,KAAC,KAAD,CAA0B,UAAW,EAAA,QAAO,oBAC1C,EAAA,EAAA,KAAC,IAAD,CAAG,KAAM,EAAE,IAAK,OAAO,SAAS,IAAI,sBAAsB,UAAW,EAAA,QAAO,cAAO,EAAE,IAAQ,CAAA,CAC1F,CAFI,GAAG,EAAE,MAAM,KAEf,CAAG,CAAA,CAAA,CACV,CACC,GAEH,GAGP,IAAc,YACb,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBACpB,CACC,CAAE,QAAS,aAAc,KAAM,EAAY,CAC3C,CAAE,QAAS,YAAa,KAAM,EAAW,CACzC,CAAE,QAAS,UAAW,KAAM,EAAS,CACtC,CAAC,OAAQ,GAAM,EAAE,MAAM,OAAO,CAAC,KAAK,CAAE,UAAS,WAC9C,EAAA,EAAA,MAAC,MAAD,CAAmB,UAAW,EAAA,QAAO,qBAArC,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,qBAAc,EAAa,CAAA,EACjD,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,oBACnB,EAAM,IAAK,IAAS,EAAA,EAAA,KAAC,KAAD,CAAe,UAAW,EAAA,QAAO,oBAAa,EAAU,CAA/C,EAA+C,CAAC,CAC3E,CAAA,CACD,EALI,EAKJ,CACN,CACE,CAAA,CAGP,IAAc,UACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAvB,CACG,IAAa,EAAA,EAAA,KAAC,IAAD,CAAG,UAAW,EAAA,QAAO,mBAAY,EAAc,CAAA,CAC5D,IAAe,EAAA,EAAA,KAAC,IAAD,CAAG,UAAW,EAAA,QAAO,qBAAc,EAAgB,CAAA,CAClE,IAAe,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBAAc,EAAkB,CAAA,CACnE,GAEJ,IAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBACrB,EAAA,EAAA,KAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,WAAW,CAAC,KAAK,IAAI,CAAE,QAAS,WAAS,QAErF,CAAA,CACL,CAAA,CACF,GACF,CAAA,CAIR,OADI,OAAO,SAAa,IAAoB,GAC5C,EAAA,EAAA,cAAoB,EAAM,SAAS,KAAK"}

package/dist/components/AboutDialog/AboutDialog.js

@@ -0,0 +1,185 @@
+import { FOCUSABLE as e, trapFocus as t, useVisualViewport as n } from "../Dialog/dialogUtils.js";
+import r from "./AboutDialog.module.css.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { createPortal as l } from "react-dom";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/AboutDialog/AboutDialog.tsx
+var p = {
+	details: "Details",
+	credits: "Credits",
+	legal: "Legal"
+};
+function m({ open: m, onClose: h, applicationName: g, applicationIcon: _, version: v, comments: y, developerName: b, website: x, websiteLabel: S, developers: C, designers: w, artists: T, copyright: E, licenseType: D, licenseText: O, links: k }) {
+	let A = s(null), j = o(), M = s(null), N = n(), [P, F] = c("details");
+	a(() => {
+		m ? (M.current = document.activeElement, (A.current?.querySelector(e))?.focus()) : (M.current?.focus(), F("details"));
+	}, [m]);
+	let I = i((e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), h?.();
+			return;
+		}
+		t(e, A);
+	}, [h]);
+	if (!m) return null;
+	let L = [
+		"details",
+		!!(C?.length || w?.length || T?.length) && "credits",
+		!!(E || D || O) && "legal"
+	].filter(Boolean), R = /* @__PURE__ */ d("div", {
+		className: r.backdrop,
+		style: N,
+		onClick: h,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ f("div", {
+			ref: A,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": j,
+			className: r.dialog,
+			onKeyDown: I,
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: r.header,
+					children: [
+						_ && /* @__PURE__ */ d("div", {
+							className: r.icon,
+							children: _
+						}),
+						/* @__PURE__ */ d("div", {
+							id: j,
+							className: r.appName,
+							children: g
+						}),
+						v && /* @__PURE__ */ d("div", {
+							className: r.version,
+							children: v
+						})
+					]
+				}),
+				L.length > 1 && /* @__PURE__ */ d("div", {
+					className: r.tabBar,
+					role: "tablist",
+					children: L.map((e) => /* @__PURE__ */ d("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": P === e,
+						className: [r.tabBtn, P === e ? r.tabBtnActive : null].filter(Boolean).join(" "),
+						onClick: () => F(e),
+						children: p[e]
+					}, e))
+				}),
+				/* @__PURE__ */ f("div", {
+					className: r.tabContent,
+					children: [
+						P === "details" && /* @__PURE__ */ f("div", {
+							className: r.section,
+							children: [y && /* @__PURE__ */ d("p", {
+								className: r.comments,
+								children: y
+							}), (b || x || k?.length) && /* @__PURE__ */ f("dl", {
+								className: r.infoList,
+								children: [
+									b && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", {
+										className: r.infoLabel,
+										children: "Developer"
+									}), /* @__PURE__ */ d("dd", {
+										className: r.infoValue,
+										children: b
+									})] }),
+									x && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", {
+										className: r.infoLabel,
+										children: "Website"
+									}), /* @__PURE__ */ d("dd", {
+										className: r.infoValue,
+										children: /* @__PURE__ */ d("a", {
+											href: x,
+											target: "_blank",
+											rel: "noopener noreferrer",
+											className: r.link,
+											children: S ?? x
+										})
+									})] }),
+									k?.map((e) => /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", {
+										className: r.infoLabel,
+										children: e.label
+									}, `${e.label}-dt`), /* @__PURE__ */ d("dd", {
+										className: r.infoValue,
+										children: /* @__PURE__ */ d("a", {
+											href: e.url,
+											target: "_blank",
+											rel: "noopener noreferrer",
+											className: r.link,
+											children: e.url
+										})
+									}, `${e.label}-dd`)] }))
+								]
+							})]
+						}),
+						P === "credits" && /* @__PURE__ */ d("div", {
+							className: r.section,
+							children: [
+								{
+									heading: "Developers",
+									list: C
+								},
+								{
+									heading: "Designers",
+									list: w
+								},
+								{
+									heading: "Artists",
+									list: T
+								}
+							].filter((e) => e.list?.length).map(({ heading: e, list: t }) => /* @__PURE__ */ f("div", {
+								className: r.creditGroup,
+								children: [/* @__PURE__ */ d("h4", {
+									className: r.creditTitle,
+									children: e
+								}), /* @__PURE__ */ d("ul", {
+									className: r.creditList,
+									children: t.map((e) => /* @__PURE__ */ d("li", {
+										className: r.creditItem,
+										children: e
+									}, e))
+								})]
+							}, e))
+						}),
+						P === "legal" && /* @__PURE__ */ f("div", {
+							className: r.section,
+							children: [
+								E && /* @__PURE__ */ d("p", {
+									className: r.copyright,
+									children: E
+								}),
+								D && /* @__PURE__ */ d("p", {
+									className: r.licenseType,
+									children: D
+								}),
+								O && /* @__PURE__ */ d("pre", {
+									className: r.licenseText,
+									children: O
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: r.footer,
+					children: /* @__PURE__ */ d("button", {
+						type: "button",
+						className: [r.btn, r.btnDefault].join(" "),
+						onClick: h,
+						children: "Close"
+					})
+				})
+			]
+		})
+	});
+	return typeof document > "u" ? R : l(R, document.body);
+}
+//#endregion
+export { m as AboutDialog };
+
+//# sourceMappingURL=AboutDialog.js.map

package/dist/components/AboutDialog/AboutDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutDialog.js","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FOCUSABLE, trapFocus, useVisualViewport } from \"../Dialog/dialogUtils\";\nimport styles from \"./AboutDialog.module.css\";\n\nexport interface AboutDialogLink {\n  label: string;\n  url: string;\n}\n\nexport interface AboutDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called on Escape or close button click. */\n  onClose?: () => void;\n  /** Application name. */\n  applicationName: string;\n  /** Icon rendered above the app name. */\n  applicationIcon?: ReactNode;\n  /** Version string (e.g. `\"1.0.0\"`). */\n  version?: string;\n  /** One-sentence description. */\n  comments?: string;\n  /** Developer or organisation name. */\n  developerName?: string;\n  /** Application website URL. */\n  website?: string;\n  /** Label for the website link. Defaults to the URL. */\n  websiteLabel?: string;\n  /** Developer names shown in the Credits tab. */\n  developers?: string[];\n  /** Designer names shown in the Credits tab. */\n  designers?: string[];\n  /** Artist names shown in the Credits tab. */\n  artists?: string[];\n  /** Copyright notice (e.g. `\"© 2024 Jane Smith\"`). */\n  copyright?: string;\n  /** SPDX identifier or short name (e.g. `\"GPL-3.0\"`). */\n  licenseType?: string;\n  /** Full license text shown in the Legal tab. */\n  licenseText?: string;\n  /** Extra links shown in the Details section. */\n  links?: AboutDialogLink[];\n}\n\ntype AboutTab = \"details\" | \"credits\" | \"legal\";\nconst ABOUT_TAB_LABEL: Record<AboutTab, string> = {\n  details: \"Details\",\n  credits: \"Credits\",\n  legal: \"Legal\",\n};\n\n/**\n * Standard app info dialog with details, credits, and legal tabs.\n * Mirrors `AdwAboutDialog`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html\n */\nexport function AboutDialog({\n  open,\n  onClose,\n  applicationName,\n  applicationIcon,\n  version,\n  comments,\n  developerName,\n  website,\n  websiteLabel,\n  developers,\n  designers,\n  artists,\n  copyright,\n  licenseType,\n  licenseText,\n  links,\n}: AboutDialogProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const [activeTab, setActiveTab] = useState<AboutTab>(\"details\");\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setActiveTab(\"details\");\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n        return;\n      }\n      trapFocus(e, dialogRef);\n    },\n    [onClose]\n  );\n\n  if (!open) return null;\n\n  const hasCredits = !!(developers?.length || designers?.length || artists?.length);\n  const hasLegal = !!(copyright || licenseType || licenseText);\n  const tabs = (\n    [\"details\", hasCredits && \"credits\", hasLegal && \"legal\"] as (AboutTab | false)[]\n  ).filter(Boolean) as AboutTab[];\n\n  const node = (\n    <div className={styles.backdrop} style={viewportStyle} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          {applicationIcon && <div className={styles.icon}>{applicationIcon}</div>}\n          <div id={titleId} className={styles.appName}>{applicationName}</div>\n          {version && <div className={styles.version}>{version}</div>}\n        </div>\n\n        {tabs.length > 1 && (\n          <div className={styles.tabBar} role=\"tablist\">\n            {tabs.map((t) => (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={activeTab === t}\n                className={[styles.tabBtn, activeTab === t ? styles.tabBtnActive : null]\n                  .filter(Boolean).join(\" \")}\n                onClick={() => setActiveTab(t)}\n              >\n                {ABOUT_TAB_LABEL[t]}\n              </button>\n            ))}\n          </div>\n        )}\n\n        <div className={styles.tabContent}>\n          {activeTab === \"details\" && (\n            <div className={styles.section}>\n              {comments && <p className={styles.comments}>{comments}</p>}\n              {(developerName || website || links?.length) && (\n                <dl className={styles.infoList}>\n                  {developerName && (\n                    <><dt className={styles.infoLabel}>Developer</dt><dd className={styles.infoValue}>{developerName}</dd></>\n                  )}\n                  {website && (\n                    <><dt className={styles.infoLabel}>Website</dt><dd className={styles.infoValue}>\n                      <a href={website} target=\"_blank\" rel=\"noopener noreferrer\" className={styles.link}>\n                        {websiteLabel ?? website}\n                      </a>\n                    </dd></>\n                  )}\n                  {links?.map((l) => (\n                    <><dt key={`${l.label}-dt`} className={styles.infoLabel}>{l.label}</dt>\n                      <dd key={`${l.label}-dd`} className={styles.infoValue}>\n                        <a href={l.url} target=\"_blank\" rel=\"noopener noreferrer\" className={styles.link}>{l.url}</a>\n                      </dd></>\n                  ))}\n                </dl>\n              )}\n            </div>\n          )}\n\n          {activeTab === \"credits\" && (\n            <div className={styles.section}>\n              {[\n                { heading: \"Developers\", list: developers },\n                { heading: \"Designers\", list: designers },\n                { heading: \"Artists\", list: artists },\n              ].filter((g) => g.list?.length).map(({ heading, list }) => (\n                <div key={heading} className={styles.creditGroup}>\n                  <h4 className={styles.creditTitle}>{heading}</h4>\n                  <ul className={styles.creditList}>\n                    {list!.map((name) => <li key={name} className={styles.creditItem}>{name}</li>)}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {activeTab === \"legal\" && (\n            <div className={styles.section}>\n              {copyright && <p className={styles.copyright}>{copyright}</p>}\n              {licenseType && <p className={styles.licenseType}>{licenseType}</p>}\n              {licenseText && <pre className={styles.licenseText}>{licenseText}</pre>}\n            </div>\n          )}\n        </div>\n\n        <div className={styles.footer}>\n          <button type=\"button\" className={[styles.btn, styles.btnDefault].join(\" \")} onClick={onClose}>\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e=`_backdrop_1iswz_3`,t=`_dialog_1iswz_26`,n=`_header_1iswz_59`,r=`_icon_1iswz_68`,i=`_appName_1iswz_77`,a=`_version_1iswz_84`,o=`_tabBar_1iswz_92`,s=`_tabBtn_1iswz_99`,c=`_tabBtnActive_1iswz_118`,l=`_tabContent_1iswz_132`,u=`_section_1iswz_137`,d=`_comments_1iswz_142`,f=`_infoList_1iswz_151`,p=`_infoLabel_1iswz_158`,m=`_infoValue_1iswz_166`,h=`_link_1iswz_174`,g=`_creditGroup_1iswz_182`,_=`_creditTitle_1iswz_186`,v=`_creditList_1iswz_196`,y=`_creditItem_1iswz_205`,b=`_copyright_1iswz_211`,x=`_licenseType_1iswz_218`,S=`_licenseText_1iswz_225`,C=`_footer_1iswz_239`,w=`_btn_1iswz_245`,T=`_btnDefault_1iswz_281`,E={backdrop:e,"backdrop-in":`_backdrop-in_1iswz_1`,dialog:t,"dialog-in":`_dialog-in_1iswz_1`,header:n,icon:r,appName:i,version:a,tabBar:o,tabBtn:s,tabBtnActive:c,tabContent:l,section:u,comments:d,infoList:f,infoLabel:p,infoValue:m,link:h,creditGroup:g,creditTitle:_,creditList:v,creditItem:y,copyright:b,licenseType:x,licenseText:S,footer:C,btn:w,btnDefault:T};exports.default=E;
+//# sourceMappingURL=AboutDialog.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AboutDialog.module.css.cjs","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  position: relative;\n  width: min(480px, calc(100vw - 48px));\n  max-height: min(640px, 90dvh);\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.92) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\n  text-align: center;\n}\n\n.icon {\n  width: 64px;\n  height: 64px;\n  margin-bottom: var(--gnome-space-2, 12px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.appName {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-3, 1.25rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.version {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Tab bar ───────────────────────────────────────────────────────────────── */\n\n.tabBar {\n  display: flex;\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  padding: 0 var(--gnome-space-3, 16px);\n  gap: 4px;\n}\n\n.tabBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n              border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tabBtn:hover { opacity: 1; }\n\n.tabBtnActive {\n  opacity: 1;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  border-bottom-color: var(--gnome-accent-color, #3584e4);\n}\n\n.tabBtn:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* ─── Tab content ───────────────────────────────────────────────────────────── */\n\n.tabContent {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.section {\n  padding: var(--gnome-space-3, 16px) var(--gnome-space-4, 24px);\n}\n\n/* Details */\n.comments {\n  margin: 0 0 var(--gnome-space-3, 16px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: 1.5;\n  text-align: center;\n  opacity: var(--gnome-opacity-dim, 0.7);\n}\n\n.infoList {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 6px var(--gnome-space-3, 16px);\n  margin: 0;\n}\n\n.infoLabel {\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  opacity: 0.55;\n  white-space: nowrap;\n}\n\n.infoValue {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  margin: 0;\n  min-width: 0;\n  overflow-wrap: break-word;\n}\n\n.link {\n  color: var(--gnome-accent-color, #3584e4);\n  text-decoration: none;\n}\n\n.link:hover { text-decoration: underline; }\n\n/* Credits */\n.creditGroup + .creditGroup {\n  margin-top: var(--gnome-space-3, 16px);\n}\n\n.creditTitle {\n  margin: 0 0 6px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n}\n\n.creditList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.creditItem {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n/* Legal */\n.copyright {\n  margin: 0 0 var(--gnome-space-2, 12px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: var(--gnome-opacity-dim, 0.7);\n}\n\n.licenseType {\n  margin: 0 0 var(--gnome-space-2, 12px);\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}\n\n.licenseText {\n  margin: 0;\n  padding: var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  background: var(--gnome-card-bg-color, rgba(0, 0, 0, 0.04));\n  font-family: monospace;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n\n/* ─── Footer (close button) ─────────────────────────────────────────────────── */\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n}\n\n.btn {\n  appearance: none;\n  border: none;\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  background: transparent;\n  width: 100%;\n  padding: 14px var(--gnome-space-4, 24px);\n\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  line-height: var(--gnome-line-height-body, 1.5);\n\n  cursor: pointer;\n  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:last-child { border-bottom: none; }\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.btn:focus { outline: none; }\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: -3px;\n}\n\n.btnDefault {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .footer {\n    border-top-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .btn {\n    border-bottom-color: rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,35 @@
+//#region src/components/AboutDialog/AboutDialog.module.css
+var e = "_backdrop_1iswz_3", t = "_dialog_1iswz_26", n = "_header_1iswz_59", r = "_icon_1iswz_68", i = "_appName_1iswz_77", a = "_version_1iswz_84", o = "_tabBar_1iswz_92", s = "_tabBtn_1iswz_99", c = "_tabBtnActive_1iswz_118", l = "_tabContent_1iswz_132", u = "_section_1iswz_137", d = "_comments_1iswz_142", f = "_infoList_1iswz_151", p = "_infoLabel_1iswz_158", m = "_infoValue_1iswz_166", h = "_link_1iswz_174", g = "_creditGroup_1iswz_182", _ = "_creditTitle_1iswz_186", v = "_creditList_1iswz_196", y = "_creditItem_1iswz_205", b = "_copyright_1iswz_211", x = "_licenseType_1iswz_218", S = "_licenseText_1iswz_225", C = "_footer_1iswz_239", w = "_btn_1iswz_245", T = "_btnDefault_1iswz_281", E = {
+	backdrop: e,
+	"backdrop-in": "_backdrop-in_1iswz_1",
+	dialog: t,
+	"dialog-in": "_dialog-in_1iswz_1",
+	header: n,
+	icon: r,
+	appName: i,
+	version: a,
+	tabBar: o,
+	tabBtn: s,
+	tabBtnActive: c,
+	tabContent: l,
+	section: u,
+	comments: d,
+	infoList: f,
+	infoLabel: p,
+	infoValue: m,
+	link: h,
+	creditGroup: g,
+	creditTitle: _,
+	creditList: v,
+	creditItem: y,
+	copyright: b,
+	licenseType: x,
+	licenseText: S,
+	footer: C,
+	btn: w,
+	btnDefault: T
+};
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=AboutDialog.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AboutDialog.module.css.js","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  position: relative;\n  width: min(480px, calc(100vw - 48px));\n  max-height: min(640px, 90dvh);\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.92) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\n  text-align: center;\n}\n\n.icon {\n  width: 64px;\n  height: 64px;\n  margin-bottom: var(--gnome-space-2, 12px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.appName {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-3, 1.25rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.version {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Tab bar ───────────────────────────────────────────────────────────────── */\n\n.tabBar {\n  display: flex;\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  padding: 0 var(--gnome-space-3, 16px);\n  gap: 4px;\n}\n\n.tabBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n              border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.tabBtn:hover { opacity: 1; }\n\n.tabBtnActive {\n  opacity: 1;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  border-bottom-color: var(--gnome-accent-color, #3584e4);\n}\n\n.tabBtn:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* ─── Tab content ───────────────────────────────────────────────────────────── */\n\n.tabContent {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.section {\n  padding: var(--gnome-space-3, 16px) var(--gnome-space-4, 24px);\n}\n\n/* Details */\n.comments {\n  margin: 0 0 var(--gnome-space-3, 16px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: 1.5;\n  text-align: center;\n  opacity: var(--gnome-opacity-dim, 0.7);\n}\n\n.infoList {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 6px var(--gnome-space-3, 16px);\n  margin: 0;\n}\n\n.infoLabel {\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  opacity: 0.55;\n  white-space: nowrap;\n}\n\n.infoValue {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  margin: 0;\n  min-width: 0;\n  overflow-wrap: break-word;\n}\n\n.link {\n  color: var(--gnome-accent-color, #3584e4);\n  text-decoration: none;\n}\n\n.link:hover { text-decoration: underline; }\n\n/* Credits */\n.creditGroup + .creditGroup {\n  margin-top: var(--gnome-space-3, 16px);\n}\n\n.creditTitle {\n  margin: 0 0 6px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n}\n\n.creditList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.creditItem {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n/* Legal */\n.copyright {\n  margin: 0 0 var(--gnome-space-2, 12px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: var(--gnome-opacity-dim, 0.7);\n}\n\n.licenseType {\n  margin: 0 0 var(--gnome-space-2, 12px);\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}\n\n.licenseText {\n  margin: 0;\n  padding: var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  background: var(--gnome-card-bg-color, rgba(0, 0, 0, 0.04));\n  font-family: monospace;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n\n/* ─── Footer (close button) ─────────────────────────────────────────────────── */\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n}\n\n.btn {\n  appearance: none;\n  border: none;\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  background: transparent;\n  width: 100%;\n  padding: 14px var(--gnome-space-4, 24px);\n\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  line-height: var(--gnome-line-height-body, 1.5);\n\n  cursor: pointer;\n  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:last-child { border-bottom: none; }\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.btn:focus { outline: none; }\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: -3px;\n}\n\n.btnDefault {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .footer {\n    border-top-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .btn {\n    border-bottom-color: rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/AboutDialog.cjs

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

package/dist/components/AboutDialog.d.ts

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

package/dist/components/AboutDialog.js

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

package/dist/components/ActionRow/ActionRow.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ActionRow.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,subtitle:r,leading:i,trailing:a,interactive:o=!1,variant:s=`default`,className:c,...l}){let u=o?`button`:`div`,d=s===`property`;return(0,t.jsxs)(u,{className:[e.default.row,o?e.default.interactive:null,d?e.default.property:null,c].filter(Boolean).join(` `),...l,children:[i&&(0,t.jsx)(`span`,{className:e.default.leading,children:i}),(0,t.jsxs)(`span`,{className:e.default.content,children:[(0,t.jsx)(`span`,{className:d?e.default.propertyLabel:e.default.title,children:n}),r&&(0,t.jsx)(`span`,{className:d?e.default.propertyValue:e.default.subtitle,children:r})]}),a&&(0,t.jsx)(`span`,{className:e.default.trailing,children:a})]})}exports.ActionRow=n;
+//# sourceMappingURL=ActionRow.cjs.map

package/dist/components/ActionRow/ActionRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.cjs","names":[],"sources":["../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./ActionRow.module.css\";\n\nexport interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge (Switch, Button, Text…).\n   * For interactive end widgets prefer a controlled component and stop\n   * event propagation inside it so the row's own onClick isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * When true the entire row becomes clickable (renders as `<button>`).\n   * Use for rows that navigate or trigger an action.\n   */\n  interactive?: boolean;\n  /**\n   * `\"property\"` flips the visual hierarchy: the subtitle becomes the\n   * prominent value and the title shrinks to a dim label above it.\n   * Use for read-only property display (e.g. \"OS Version / Ubuntu 24.04\").\n   * Mirrors the `.property` style class.\n   */\n  variant?: \"default\" | \"property\";\n}\n\n/**\n * Standard settings row with title, optional subtitle, and end widget.\n *\n * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block\n * inside a `BoxedList`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function ActionRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  interactive = false,\n  variant = \"default\",\n  className,\n  ...props\n}: ActionRowProps) {\n  const Tag = interactive ? \"button\" : \"div\";\n  const property = variant === \"property\";\n\n  const classes = [\n    styles.row,\n    interactive ? styles.interactive : null,\n    property ? styles.property : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Tag className={classes} {...(props as HTMLAttributes<HTMLElement>)}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={property ? styles.propertyLabel : styles.title}>{title}</span>\n        {subtitle && <span className={property ? styles.propertyValue : styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </Tag>\n  );\n}\n"],"mappings":"iFAuCA,SAAgB,EAAU,CACxB,QACA,WACA,UACA,WACA,cAAc,GACd,UAAU,UACV,YACA,GAAG,GACc,CACjB,IAAM,EAAM,EAAc,SAAW,MAC/B,EAAW,IAAY,WAW7B,OACE,EAAA,EAAA,MAAC,EAAD,CAAK,UAVS,CACd,EAAA,QAAO,IACP,EAAc,EAAA,QAAO,YAAc,KACnC,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAK,WAA9B,CACG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAW,EAAA,QAAO,cAAgB,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC9E,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAW,EAAA,QAAO,cAAgB,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC7F,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}

package/dist/components/ActionRow/ActionRow.js

@@ -0,0 +1,39 @@
+import e from "./ActionRow.module.css.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/ActionRow/ActionRow.tsx
+function r({ title: r, subtitle: i, leading: a, trailing: o, interactive: s = !1, variant: c = "default", className: l, ...u }) {
+	let d = s ? "button" : "div", f = c === "property";
+	return /* @__PURE__ */ n(d, {
+		className: [
+			e.row,
+			s ? e.interactive : null,
+			f ? e.property : null,
+			l
+		].filter(Boolean).join(" "),
+		...u,
+		children: [
+			a && /* @__PURE__ */ t("span", {
+				className: e.leading,
+				children: a
+			}),
+			/* @__PURE__ */ n("span", {
+				className: e.content,
+				children: [/* @__PURE__ */ t("span", {
+					className: f ? e.propertyLabel : e.title,
+					children: r
+				}), i && /* @__PURE__ */ t("span", {
+					className: f ? e.propertyValue : e.subtitle,
+					children: i
+				})]
+			}),
+			o && /* @__PURE__ */ t("span", {
+				className: e.trailing,
+				children: o
+			})
+		]
+	});
+}
+//#endregion
+export { r as ActionRow };
+
+//# sourceMappingURL=ActionRow.js.map

package/dist/components/ActionRow/ActionRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.js","names":[],"sources":["../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./ActionRow.module.css\";\n\nexport interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge (Switch, Button, Text…).\n   * For interactive end widgets prefer a controlled component and stop\n   * event propagation inside it so the row's own onClick isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * When true the entire row becomes clickable (renders as `<button>`).\n   * Use for rows that navigate or trigger an action.\n   */\n  interactive?: boolean;\n  /**\n   * `\"property\"` flips the visual hierarchy: the subtitle becomes the\n   * prominent value and the title shrinks to a dim label above it.\n   * Use for read-only property display (e.g. \"OS Version / Ubuntu 24.04\").\n   * Mirrors the `.property` style class.\n   */\n  variant?: \"default\" | \"property\";\n}\n\n/**\n * Standard settings row with title, optional subtitle, and end widget.\n *\n * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block\n * inside a `BoxedList`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function ActionRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  interactive = false,\n  variant = \"default\",\n  className,\n  ...props\n}: ActionRowProps) {\n  const Tag = interactive ? \"button\" : \"div\";\n  const property = variant === \"property\";\n\n  const classes = [\n    styles.row,\n    interactive ? styles.interactive : null,\n    property ? styles.property : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Tag className={classes} {...(props as HTMLAttributes<HTMLElement>)}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={property ? styles.propertyLabel : styles.title}>{title}</span>\n        {subtitle && <span className={property ? styles.propertyValue : styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </Tag>\n  );\n}\n"],"mappings":";;;AAuCA,SAAgB,EAAU,EACxB,UACA,aACA,YACA,aACA,iBAAc,IACd,aAAU,WACV,cACA,GAAG,KACc;CACjB,IAAM,IAAM,IAAc,WAAW,OAC/B,IAAW,MAAY;AAW7B,QACE,kBAAC,GAAD;EAAK,WAVS;GACd,EAAO;GACP,IAAc,EAAO,cAAc;GACnC,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAK;YAA9B;GACG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,QAAD;KAAM,WAAW,IAAW,EAAO,gBAAgB,EAAO;eAAQ;KAAa,CAAA,EAC9E,KAAY,kBAAC,QAAD;KAAM,WAAW,IAAW,EAAO,gBAAgB,EAAO;eAAW;KAAgB,CAAA,CAC7F;;GAEN,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GAC5D"}

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

@@ -0,0 +1,2 @@
+var e={row:`_row_17clq_3`,leading:`_leading_17clq_16`,content:`_content_17clq_25`,title:`_title_17clq_33`,subtitle:`_subtitle_17clq_44`,trailing:`_trailing_17clq_58`,propertyLabel:`_propertyLabel_17clq_68`,propertyValue:`_propertyValue_17clq_81`,interactive:`_interactive_17clq_94`};exports.default=e;
+//# sourceMappingURL=ActionRow.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.module.css.cjs","names":[],"sources":["../../../src/components/ActionRow/ActionRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Leading icon/avatar ──────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ─────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\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-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Trailing widget ──────────────────────────────────────────────────────── */\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Property variant ─────────────────────────────────────────────────────── */\n\n/* The label (title) is rendered small and dim above the value (subtitle) */\n.propertyLabel {\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: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* The value (subtitle) is rendered at body size and full opacity */\n.propertyValue {\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Interactive (activatable row) ────────────────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.interactive:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,15 @@
+var e = {
+	row: "_row_17clq_3",
+	leading: "_leading_17clq_16",
+	content: "_content_17clq_25",
+	title: "_title_17clq_33",
+	subtitle: "_subtitle_17clq_44",
+	trailing: "_trailing_17clq_58",
+	propertyLabel: "_propertyLabel_17clq_68",
+	propertyValue: "_propertyValue_17clq_81",
+	interactive: "_interactive_17clq_94"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ActionRow.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.module.css.js","names":[],"sources":["../../../src/components/ActionRow/ActionRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Leading icon/avatar ──────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ─────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\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-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Trailing widget ──────────────────────────────────────────────────────── */\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Property variant ─────────────────────────────────────────────────────── */\n\n/* The label (title) is rendered small and dim above the value (subtitle) */\n.propertyLabel {\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: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* The value (subtitle) is rendered at body size and full opacity */\n.propertyValue {\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Interactive (activatable row) ────────────────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.interactive:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n"],"mappings":""}

package/dist/components/ActionRow.cjs

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

package/dist/components/ActionRow.d.ts

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

package/dist/components/ActionRow.js

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

package/dist/components/Avatar/Avatar.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Avatar.module.css.cjs`);let t=require(`react/jsx-runtime`);var n=[`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`,`teal`,`slate`];function r(e){let t=0;for(let n=0;n<e.length;n++)t=t*31+e.charCodeAt(n)>>>0;return n[t%n.length]}function i(e){let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?``:t.length===1?t[0].charAt(0).toUpperCase():t[0].charAt(0).toUpperCase()+t[t.length-1].charAt(0).toUpperCase()}function a({name:n=``,src:a,alt:o,size:s=`md`,color:c,className:l,...u}){let d=c??(n?r(n):`blue`),f=i(n),p=[e.default.avatar,e.default[s],a?null:e.default[`color-${d}`],l].filter(Boolean).join(` `);return(0,t.jsx)(`span`,{role:`img`,"aria-label":o??n??`Avatar`,className:p,...u,children:a?(0,t.jsx)(`img`,{src:a,alt:o??n,className:e.default.image}):(0,t.jsx)(`span`,{"aria-hidden":`true`,className:e.default.initials,children:f})})}exports.Avatar=a;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./Avatar.module.css\";\n\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Named color palette for the initials fallback.\n * Mirrors libadwaita's avatar color set.\n */\nexport type AvatarColor =\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"brown\"\n  | \"teal\"\n  | \"slate\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Full name used to generate initials and — when `color` is omitted —\n   * to deterministically pick a background color.\n   */\n  name?: string;\n  /** Image URL. When provided the initials fallback is hidden. */\n  src?: string;\n  /** Alt text for the image. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /**\n   * Override the auto-derived background color for the initials fallback.\n   * When omitted a color is derived from `name` via a stable hash.\n   */\n  color?: AvatarColor;\n}\n\nconst COLOR_LIST: AvatarColor[] = [\n  \"blue\",\n  \"green\",\n  \"yellow\",\n  \"orange\",\n  \"red\",\n  \"purple\",\n  \"brown\",\n  \"teal\",\n  \"slate\",\n];\n\n/** Stable, non-cryptographic hash → index into COLOR_LIST. */\nfunction nameToColor(name: string): AvatarColor {\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;\n  }\n  return COLOR_LIST[hash % COLOR_LIST.length];\n}\n\n/** Extract up to 2 initials from a name string. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"\";\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();\n  return (\n    parts[0].charAt(0).toUpperCase() +\n    parts[parts.length - 1].charAt(0).toUpperCase()\n  );\n}\n\n/**\n * Circular avatar with image or initials fallback.\n *\n * Follows the Adwaita `AdwAvatar` pattern — deterministic color from name,\n * up to two initials when no image is supplied.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html\n */\nexport function Avatar({\n  name = \"\",\n  src,\n  alt,\n  size = \"md\",\n  color,\n  className,\n  ...props\n}: AvatarProps) {\n  const resolvedColor = color ?? (name ? nameToColor(name) : \"blue\");\n  const initials = getInitials(name);\n\n  const classes = [\n    styles.avatar,\n    styles[size],\n    !src ? styles[`color-${resolvedColor}`] : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={alt ?? name ?? \"Avatar\"}\n      className={classes}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt ?? name} className={styles.image} />\n      ) : (\n        <span aria-hidden=\"true\" className={styles.initials}>\n          {initials}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":"8EAuCA,IAAM,EAA4B,CAChC,OACA,QACA,SACA,SACA,MACA,SACA,QACA,OACA,QACD,CAGD,SAAS,EAAY,EAA2B,CAC9C,IAAI,EAAO,EACX,IAAK,IAAI,EAAI,EAAG,EAAI,EAAK,OAAQ,IAC/B,EAAQ,EAAO,GAAK,EAAK,WAAW,EAAE,GAAM,EAE9C,OAAO,EAAW,EAAO,EAAW,QAItC,SAAS,EAAY,EAAsB,CACzC,IAAM,EAAQ,EAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ,CAGtD,OAFI,EAAM,SAAW,EAAU,GAC3B,EAAM,SAAW,EAAU,EAAM,GAAG,OAAO,EAAE,CAAC,aAAa,CAE7D,EAAM,GAAG,OAAO,EAAE,CAAC,aAAa,CAChC,EAAM,EAAM,OAAS,GAAG,OAAO,EAAE,CAAC,aAAa,CAYnD,SAAgB,EAAO,CACrB,OAAO,GACP,MACA,MACA,OAAO,KACP,QACA,YACA,GAAG,GACW,CACd,IAAM,EAAgB,IAAU,EAAO,EAAY,EAAK,CAAG,QACrD,EAAW,EAAY,EAAK,CAE5B,EAAU,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACN,EAAyC,KAAnC,EAAA,QAAO,SAAS,KACvB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEZ,OACE,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,MACL,aAAY,GAAO,GAAQ,SAC3B,UAAW,EACX,GAAI,WAEH,GACC,EAAA,EAAA,KAAC,MAAD,CAAU,MAAK,IAAK,GAAO,EAAM,UAAW,EAAA,QAAO,MAAS,CAAA,EAE5D,EAAA,EAAA,KAAC,OAAD,CAAM,cAAY,OAAO,UAAW,EAAA,QAAO,kBACxC,EACI,CAAA,CAEJ,CAAA"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,50 @@
+import e from "./Avatar.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+var n = [
+	"blue",
+	"green",
+	"yellow",
+	"orange",
+	"red",
+	"purple",
+	"brown",
+	"teal",
+	"slate"
+];
+function r(e) {
+	let t = 0;
+	for (let n = 0; n < e.length; n++) t = t * 31 + e.charCodeAt(n) >>> 0;
+	return n[t % n.length];
+}
+function i(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "" : t.length === 1 ? t[0].charAt(0).toUpperCase() : t[0].charAt(0).toUpperCase() + t[t.length - 1].charAt(0).toUpperCase();
+}
+function a({ name: n = "", src: a, alt: o, size: s = "md", color: c, className: l, ...u }) {
+	let d = c ?? (n ? r(n) : "blue"), f = i(n), p = [
+		e.avatar,
+		e[s],
+		a ? null : e[`color-${d}`],
+		l
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t("span", {
+		role: "img",
+		"aria-label": o ?? n ?? "Avatar",
+		className: p,
+		...u,
+		children: a ? /* @__PURE__ */ t("img", {
+			src: a,
+			alt: o ?? n,
+			className: e.image
+		}) : /* @__PURE__ */ t("span", {
+			"aria-hidden": "true",
+			className: e.initials,
+			children: f
+		})
+	});
+}
+//#endregion
+export { a as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./Avatar.module.css\";\n\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Named color palette for the initials fallback.\n * Mirrors libadwaita's avatar color set.\n */\nexport type AvatarColor =\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"brown\"\n  | \"teal\"\n  | \"slate\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Full name used to generate initials and — when `color` is omitted —\n   * to deterministically pick a background color.\n   */\n  name?: string;\n  /** Image URL. When provided the initials fallback is hidden. */\n  src?: string;\n  /** Alt text for the image. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /**\n   * Override the auto-derived background color for the initials fallback.\n   * When omitted a color is derived from `name` via a stable hash.\n   */\n  color?: AvatarColor;\n}\n\nconst COLOR_LIST: AvatarColor[] = [\n  \"blue\",\n  \"green\",\n  \"yellow\",\n  \"orange\",\n  \"red\",\n  \"purple\",\n  \"brown\",\n  \"teal\",\n  \"slate\",\n];\n\n/** Stable, non-cryptographic hash → index into COLOR_LIST. */\nfunction nameToColor(name: string): AvatarColor {\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;\n  }\n  return COLOR_LIST[hash % COLOR_LIST.length];\n}\n\n/** Extract up to 2 initials from a name string. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"\";\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();\n  return (\n    parts[0].charAt(0).toUpperCase() +\n    parts[parts.length - 1].charAt(0).toUpperCase()\n  );\n}\n\n/**\n * Circular avatar with image or initials fallback.\n *\n * Follows the Adwaita `AdwAvatar` pattern — deterministic color from name,\n * up to two initials when no image is supplied.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html\n */\nexport function Avatar({\n  name = \"\",\n  src,\n  alt,\n  size = \"md\",\n  color,\n  className,\n  ...props\n}: AvatarProps) {\n  const resolvedColor = color ?? (name ? nameToColor(name) : \"blue\");\n  const initials = getInitials(name);\n\n  const classes = [\n    styles.avatar,\n    styles[size],\n    !src ? styles[`color-${resolvedColor}`] : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={alt ?? name ?? \"Avatar\"}\n      className={classes}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt ?? name} className={styles.image} />\n      ) : (\n        <span aria-hidden=\"true\" className={styles.initials}>\n          {initials}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;AAuCA,IAAM,IAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAGD,SAAS,EAAY,GAA2B;CAC9C,IAAI,IAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,IAC/B,KAAQ,IAAO,KAAK,EAAK,WAAW,EAAE,KAAM;AAE9C,QAAO,EAAW,IAAO,EAAW;;AAItC,SAAS,EAAY,GAAsB;CACzC,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;AAGtD,QAFI,EAAM,WAAW,IAAU,KAC3B,EAAM,WAAW,IAAU,EAAM,GAAG,OAAO,EAAE,CAAC,aAAa,GAE7D,EAAM,GAAG,OAAO,EAAE,CAAC,aAAa,GAChC,EAAM,EAAM,SAAS,GAAG,OAAO,EAAE,CAAC,aAAa;;AAYnD,SAAgB,EAAO,EACrB,UAAO,IACP,QACA,QACA,UAAO,MACP,UACA,cACA,GAAG,KACW;CACd,IAAM,IAAgB,MAAU,IAAO,EAAY,EAAK,GAAG,SACrD,IAAW,EAAY,EAAK,EAE5B,IAAU;EACd,EAAO;EACP,EAAO;EACN,IAAyC,OAAnC,EAAO,SAAS;EACvB;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,QACE,kBAAC,QAAD;EACE,MAAK;EACL,cAAY,KAAO,KAAQ;EAC3B,WAAW;EACX,GAAI;YAEH,IACC,kBAAC,OAAD;GAAU;GAAK,KAAK,KAAO;GAAM,WAAW,EAAO;GAAS,CAAA,GAE5D,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,EAAO;aACxC;GACI,CAAA;EAEJ,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={avatar:`_avatar_1f2cd_3`,sm:`_sm_1f2cd_17`,md:`_md_1f2cd_22`,lg:`_lg_1f2cd_27`,xl:`_xl_1f2cd_32`,image:`_image_1f2cd_39`,initials:`_initials_1f2cd_48`,"color-blue":`_color-blue_1f2cd_64`,"color-green":`_color-green_1f2cd_65`,"color-yellow":`_color-yellow_1f2cd_66`,"color-orange":`_color-orange_1f2cd_72`,"color-red":`_color-red_1f2cd_73`,"color-purple":`_color-purple_1f2cd_74`,"color-brown":`_color-brown_1f2cd_75`,"color-teal":`_color-teal_1f2cd_76`,"color-slate":`_color-slate_1f2cd_77`};exports.default=e;
+//# sourceMappingURL=Avatar.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.css.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  flex-shrink: 0;\n  user-select: none;\n  /* Subtle ring so the avatar reads on any background */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n/* ─── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sm {\n  width: 24px;\n  height: 24px;\n}\n\n.md {\n  width: 32px;\n  height: 32px;\n}\n\n.lg {\n  width: 48px;\n  height: 48px;\n}\n\n.xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ─── Image ────────────────────────────────────────────────────────────────── */\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* ─── Initials ─────────────────────────────────────────────────────────────── */\n\n.initials {\n  font-family: var(--gnome-font-family);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  color: #ffffff;\n  /* Scale initials font relative to the avatar size */\n  font-size: 0.42em;\n}\n\n.sm .initials  { font-size: 0.5em; }\n.md .initials  { font-size: 0.60em; }\n.lg .initials  { font-size: 1.0em; }\n.xl .initials  { font-size: 1.40em; }\n\n/* ─── Color variants (initials fallback) ───────────────────────────────────── */\n\n.color-blue   { background-color: var(--gnome-blue-3,   #3584e4); }\n.color-green  { background-color: var(--gnome-green-4,  #2ec27e); }\n.color-yellow {\n  background-color: var(--gnome-yellow-4, #f5c211);\n  /* yellow needs dark initials for contrast */\n}\n.color-yellow .initials { color: rgba(0, 0, 0, 0.8); }\n\n.color-orange { background-color: var(--gnome-orange-4, #e66100); }\n.color-red    { background-color: var(--gnome-red-3,    #e01b24); }\n.color-purple { background-color: var(--gnome-purple-3, #9141ac); }\n.color-brown  { background-color: var(--gnome-brown-3,  #986a44); }\n.color-teal   { background-color: #2190a4; }\n.color-slate  { background-color: var(--gnome-dark-2,   #5e5c64); }\n\n/* ─── Dark mode ring ───────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .avatar {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n"],"mappings":""}