@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/build/components/nav/side.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { defaultNavTranslate, resolveNavLabel, usePanelNav } from '@owlmeans/client-panel';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+import { usePanelNav, navLabelHelper } from '@owlmeans/client-panel';
+import { cn } from '../../@/lib/utils.js';
+import { Button } from '../../@/components/ui/button.js';
+import { useWideNav } from './viewport.js';
 /**
  * The second navigation level — the screens of the active section.
  *
@@ -9,17 +10,16 @@ import { Button } from '@/components/ui/button';
  * are already on is noise. The component still exists in the tree, so a section that grows
  * a second screen gains its side menu with no layout change.
  */
-export const SideNav = ({ config, translate = defaultNavTranslate, variant = 'side', ariaLabel, className, style }) => {
+export const SideNav = ({ config, translate = navLabelHelper.defaultNavTranslate, variant = 'side', ariaLabel, className, style }) => {
     const model = usePanelNav(config);
+    const wide = useWideNav();
     if (!model.showSide || model.active == null) {
         return null;
     }
-    const items = model.active.items.map(item => {
-        const label = resolveNavLabel(translate, item.label, `modules.${item.alias}`, item.alias);
-        return _jsxs(Button, { variant: "ghost", size: variant === 'bar' ? 'sm' : 'default', onClick: model.goItem(item), "aria-current": model.isItemActive(item) ? 'page' : undefined, className: cn(variant === 'bar' ? 'shrink-0' : 'w-full justify-start', model.isItemActive(item) && 'bg-accent text-accent-foreground'), children: [item.Icon != null ? _jsx(item.Icon, { className: "size-4" }) : null, label] }, item.alias);
+    const items = model.active.items.map((item) => {
+        const label = navLabelHelper.resolveNavLabel(translate, item.label, `modules.${item.alias}`, item.alias);
+        return (_jsxs(Button, { "data-testid": (variant === 'side' ? wide : !wide) ? item.testId : undefined, variant: "ghost", size: variant === 'bar' ? 'sm' : 'default', onClick: model.goItem(item), "aria-current": model.isItemActive(item) ? 'page' : undefined, className: cn(variant === 'bar' ? 'shrink-0' : 'w-full justify-start', model.isItemActive(item) && 'bg-accent text-accent-foreground'), children: [item.Icon != null ? _jsx(item.Icon, { className: "size-4" }) : null, label] }, item.alias));
     });
-    return variant === 'bar'
-        ? _jsx("nav", { "aria-label": ariaLabel, className: cn('flex gap-1 overflow-x-auto border-b px-2 py-1', className), style: style, children: items })
-        : _jsx("aside", { className: cn('w-56 shrink-0 border-r', className), style: style, children: _jsx("nav", { "aria-label": ariaLabel, className: "flex flex-col gap-1 p-3", children: items }) });
+    return variant === 'bar' ? (_jsx("nav", { "aria-label": ariaLabel, className: cn('flex gap-1 overflow-x-auto border-b px-2 py-1', className), style: style, children: items })) : (_jsx("aside", { className: cn('w-56 shrink-0 border-r', className), style: style, children: _jsx("nav", { "aria-label": ariaLabel, className: "flex flex-col gap-1 p-3", children: items }) }));
 };
 //# sourceMappingURL=side.js.map

package/build/components/nav/side.js.map

@@ -1 +1 @@
-{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/components/nav/side.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC1F,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAI/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,CACvC,EAAE,MAAM,EAAE,SAAS,GAAG,mBAAmB,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAC1F,EAAE;IACF,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAEjC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAC1C,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAEzF,OAAO,MAAC,MAAM,IAEZ,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,kBACb,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3D,SAAS,EAAE,EAAE,CACX,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,sBAAsB,EACvD,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,kCAAkC,CAC/D,aAEA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,CAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,EAC3D,KAAK,KAXD,IAAI,CAAC,KAAK,CAYR,CAAA;IACX,CAAC,CAAC,CAAA;IAEF,OAAO,OAAO,KAAK,KAAK;QACtB,CAAC,CAAC,4BACY,SAAS,EACrB,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,EACzE,KAAK,EAAE,KAAK,YACZ,KAAK,GAAO;QACd,CAAC,CAAC,gBAAO,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACvE,4BAAiB,SAAS,EAAE,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAO,GACvE,CAAA;AACZ,CAAC,CAAA"}
+{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/components/nav/side.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EACxC,MAAM,EACN,SAAS,GAAG,cAAc,CAAC,mBAAmB,EAC9C,OAAO,GAAG,MAAM,EAChB,SAAS,EACT,SAAS,EACT,KAAK,EACN,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,MAAM,IAAI,GAAG,UAAU,EAAE,CAAA;IAEzB,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAExG,OAAO,CACL,MAAC,MAAM,mBAEQ,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1E,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,kBACb,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3D,SAAS,EAAE,EAAE,CACX,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,sBAAsB,EACvD,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,kCAAkC,CAC/D,aAEA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,CAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,EAC3D,KAAK,KAZD,IAAI,CAAC,KAAK,CAaR,CACV,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CACzB,4BACc,SAAS,EACrB,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,EACzE,KAAK,EAAE,KAAK,YAEX,KAAK,GACF,CACP,CAAC,CAAC,CAAC,CACF,gBAAO,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACrE,4BAAiB,SAAS,EAAE,SAAS,EAAC,yBAAyB,YAC5D,KAAK,GACF,GACA,CACT,CAAA;AACH,CAAC,CAAA"}

package/build/components/nav/top.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top.d.ts","sourceRoot":"","sources":["../../../src/components/nav/top.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAyBlC,CAAA"}
+{"version":3,"file":"top.d.ts","sourceRoot":"","sources":["../../../src/components/nav/top.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAU/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG7C;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA2ClC,CAAA"}

package/build/components/nav/top.js

@@ -1,24 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { defaultNavTranslate, resolveNavLabel, usePanelNav } from '@owlmeans/client-panel';
-import { cn } from '@/lib/utils';
-import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
+import { usePanelNav, navLabelHelper } from '@owlmeans/client-panel';
+import { cn } from '../../@/lib/utils.js';
+import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from '../../@/components/ui/navigation-menu.js';
+import { SECTION_LINK } from './consts.local.js';
 /**
  * The first navigation level — one entry per section.
  *
  * Pressing a section goes to its first screen; the side menu then offers the rest. The
  * viewport is off because no section opens a panel: these are links, not dropdowns.
  */
-export const TopNav = ({ config, translate = defaultNavTranslate, ariaLabel, className, style }) => {
+export const TopNav = ({ config, translate = navLabelHelper.defaultNavTranslate, ariaLabel, testId, className, style }) => {
     const model = usePanelNav(config);
     if (model.sections.length < 1) {
         return null;
     }
-    return _jsx(NavigationMenu, { viewport: false, "aria-label": ariaLabel, className: className, style: style, children: _jsx(NavigationMenuList, { className: "flex-wrap", children: model.sections.map(section => {
+    return (_jsx(NavigationMenu, { viewport: false, "aria-label": ariaLabel, "data-testid": testId, className: className, style: style, children: _jsx(NavigationMenuList, { className: "flex-wrap gap-4", children: model.sections.map((section) => {
                 const go = model.goSection(section);
-                return _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { active: model.isSectionActive(section), 
+                return (_jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { active: model.isSectionActive(section), "aria-current": model.isSectionActive(section) ? 'page' : undefined, "data-testid": section.testId, 
                         // A real `href` keeps the entry focusable and openable in a new tab; the click is
                         // still handled in-app, so the browser never reloads the whole application.
-                        href: model.hrefOf(section), onClick: event => { event.preventDefault(); go(); }, className: cn(navigationMenuTriggerStyle(), 'cursor-pointer'), children: resolveNavLabel(translate, section.label, `nav.${section.name}`, section.name) }) }, section.name);
-            }) }) });
+                        href: model.hrefOf(section), onClick: (event) => {
+                            event.preventDefault();
+                            go();
+                        }, className: cn(SECTION_LINK), children: navLabelHelper.resolveNavLabel(translate, section.label, `nav.${section.name}`, section.name) }) }, section.name));
+            }) }) }));
 };
 //# sourceMappingURL=top.js.map

package/build/components/nav/top.js.map

@@ -1 +1 @@
-{"version":3,"file":"top.js","sourceRoot":"","sources":["../../../src/components/nav/top.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC1F,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EACL,cAAc,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,0BAA0B,EACvG,MAAM,iCAAiC,CAAA;AAIxC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAAE,MAAM,EAAE,SAAS,GAAG,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAClH,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAEjC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAC,cAAc,IAAC,QAAQ,EAAE,KAAK,gBAAc,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAC/F,KAAC,kBAAkB,IAAC,SAAS,EAAC,WAAW,YACtC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBAC5B,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;gBAEnC,OAAO,KAAC,kBAAkB,cACxB,KAAC,kBAAkB,IACjB,MAAM,EAAE,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC;wBACtC,kFAAkF;wBAClF,4EAA4E;wBAC5E,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAC3B,OAAO,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAA,CAAC,CAAC,EAClD,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,EAAE,gBAAgB,CAAC,YAC7D,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,OAAO,CAAC,IAAI,EAAE,EAAE,OAAO,CAAC,IAAI,CAAC,GAAsB,IARxE,OAAO,CAAC,IAAI,CASvB,CAAA;YACvB,CAAC,CAAC,GACiB,GACN,CAAA;AACnB,CAAC,CAAA"}
+{"version":3,"file":"top.js","sourceRoot":"","sources":["../../../src/components/nav/top.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,0CAA0C,CAAA;AAGjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,MAAM,EACN,SAAS,GAAG,cAAc,CAAC,mBAAmB,EAC9C,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACN,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAEjC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,cAAc,IAAC,QAAQ,EAAE,KAAK,gBAAc,SAAS,iBAAe,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAC7G,KAAC,kBAAkB,IAAC,SAAS,EAAC,iBAAiB,YAC5C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC9B,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;gBAEnC,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,MAAM,EAAE,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,kBACxB,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,iBACpD,OAAO,CAAC,MAAM;wBAC3B,kFAAkF;wBAClF,4EAA4E;wBAC5E,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;4BACjB,KAAK,CAAC,cAAc,EAAE,CAAA;4BACtB,EAAE,EAAE,CAAA;wBACN,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,YAE1B,cAAc,CAAC,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,OAAO,CAAC,IAAI,EAAE,EAAE,OAAO,CAAC,IAAI,CAAC,GAC3E,IAfE,OAAO,CAAC,IAAI,CAgBhB,CACtB,CAAA;YACH,CAAC,CAAC,GACiB,GACN,CAClB,CAAA;AACH,CAAC,CAAA"}

package/build/components/nav/types.d.ts

@@ -1,11 +1,13 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import type { NavTranslate, PanelNavConfig, PanelNavLink } from '@owlmeans/client-panel';
+import type { FooterThemeToggle } from '../footer/types.js';
 import type { StyledProps } from '../types.js';
 interface NavCommonProps extends StyledProps {
     config: PanelNavConfig;
     /** See {@link NavTranslate} — omitted, literal labels and humanized aliases are used. */
     translate?: NavTranslate;
     ariaLabel?: string;
+    testId?: string;
 }
 export interface TopNavProps extends NavCommonProps {
 }
@@ -16,8 +18,17 @@ export interface SideNavProps extends NavCommonProps {
      */
     variant?: 'side' | 'bar';
 }
+/**
+ * `ariaLabel` names the navigation landmark INSIDE the sheet; `translate` also resolves the menu
+ * button's accessible name and the sheet's title (`shell.menu`, default "Menu") and its close
+ * button's (`shell.close`, default "Close"). `className` and `style` land on the trigger button.
+ */
+export interface MobileNavProps extends NavCommonProps {
+}
 export interface NavLayoutProps extends PropsWithChildren<StyledProps> {
     nav: PanelNavConfig;
+    /** Stable selector on the desktop navigation landmark. */
+    navTestId?: string;
     translate?: NavTranslate;
     /** Brand slot — rendered at the far left of the header. */
     title?: ReactNode;
@@ -25,9 +36,61 @@ export interface NavLayoutProps extends PropsWithChildren<StyledProps> {
     home?: string;
     /** Header right side — sign-in controls, a theme toggle, whatever the app puts there. */
     actions?: ReactNode;
-    /** Links array renders the standard footer; a node replaces it entirely. */
+    /**
+     * Opt-in narrow-viewport menu. Below `md` (768px) the section menu is hidden and a menu button
+     * at the end of the header opens a sheet listing every section and its screens ({@link
+     * MobileNavProps}); `actions` stay in the header at every width. The screen strip the narrow
+     * viewport otherwise gets under the header is NOT rendered then — the sheet already lists the
+     * same screens, and two menus for one level is one too many. Off, the shell is exactly what it
+     * has always been.
+     */
+    mobileMenu?: boolean;
+    /**
+     * The skip link rendered first in the page, ahead of the header, moving focus to the content
+     * (`<main id="main">`). Invisible until focused, then a pill in the top-left corner. Defaults to
+     * `translate('shell.skip', 'Skip to content')`; `false` renders no link AND leaves `main`
+     * without the `main` id, for an application that renders its own skip link and target.
+     */
+    skipLinkLabel?: string | false;
+    /**
+     * The light/dark switcher in the footer's bottom row, beside the credit — forwarded to
+     * `Footer`, whether `footer` is links, a node or absent. The accessible names resolve
+     * `shell.toLight` / `shell.toDark` through `translate` unless `labels` gives them. Absent or
+     * `false`, the footer renders exactly as it does without one.
+     */
+    themeToggle?: FooterThemeToggle;
+    /**
+     * An array renders the standard footer: a centred row of links above the credit line.
+     *
+     * A node is the application's OWN footer layout — brand, description, link columns — and is
+     * rendered as a full-width block (`w-full self-stretch`, start-aligned text) inside the footer's
+     * container, on the shell's rhythm, above the platform/owner credit line. It never replaces the
+     * credit: `ShellCredit` stays last in every footer, and nothing a caller passes here removes it.
+     */
     footer?: PanelNavLink[] | ReactNode;
+    /**
+     * Styles the HEADER — the sticky bar carrying the brand, the section menu and `actions`.
+     *
+     * The header is its own SURFACE: it paints an opaque background because content scrolls
+     * under it. Give it a background here and you must give it the paired foreground too
+     * (`bg-secondary text-secondary-foreground`), exactly as on any other surface — this is the
+     * supported way to give an application a dark top bar, and it is why colouring the root
+     * instead is not.
+     */
+    headerClassName?: string;
+    /** Styles the content area. NOT its width — see `containerClassName`. */
     contentClassName?: string;
+    /**
+     * The page's horizontal rhythm — width and side padding — applied identically to the header
+     * row, the content and the footer row. Give the content a width of its own and it sits inset
+     * from a full-width header, which reads as a bug rather than as a layout.
+     *
+     * MERGED over the shell's default (`mx-auto w-full max-w-6xl px-4`), not substituted for it:
+     * pass `max-w-[1280px]` and only the width changes, while the centring and the side padding
+     * stay. Name the utility you actually want to move — `px-8` widens the gutters — because
+     * anything you do not name keeps its default.
+     */
+    containerClassName?: string;
 }
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build/components/nav/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,cAAe,SAAQ,WAAW;IAC1C,MAAM,EAAE,cAAc,CAAA;IACtB,yFAAyF;IACzF,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;CAAI;AAEvD,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACzB;AAED,MAAM,WAAW,cAAe,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACpE,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAA;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,cAAe,SAAQ,WAAW;IAC1C,MAAM,EAAE,cAAc,CAAA;IACtB,yFAAyF;IACzF,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;CAAG;AAEtD,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc;CAAG;AAEzD,MAAM,WAAW,cAAe,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACpE,GAAG,EAAE,cAAc,CAAA;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAA;IACnC;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B"}

package/build/components/nav/viewport.d.ts

@@ -0,0 +1,3 @@
+/** The same md boundary as the shell's Tailwind layout, including resize after mount. */
+export declare const useWideNav: () => boolean;
+//# sourceMappingURL=viewport.d.ts.map

package/build/components/nav/viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../../../src/components/nav/viewport.ts"],"names":[],"mappings":"AAEA,yFAAyF;AACzF,eAAO,MAAM,UAAU,QAAO,OAY7B,CAAA"}

package/build/components/nav/viewport.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+/** The same md boundary as the shell's Tailwind layout, including resize after mount. */
+export const useWideNav = () => {
+    const [wide, setWide] = useState(() => typeof window === 'undefined' || window.matchMedia('(min-width: 768px)').matches);
+    useEffect(() => {
+        const media = window.matchMedia('(min-width: 768px)');
+        const change = () => setWide(media.matches);
+        change();
+        media.addEventListener('change', change);
+        return () => media.removeEventListener('change', change);
+    }, []);
+    return wide;
+};
+//# sourceMappingURL=viewport.js.map

package/build/components/nav/viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../../src/components/nav/viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,yFAAyF;AACzF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAY,EAAE;IACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,GAAG,EAAE,CAAC,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,CACvF,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAA;QACrD,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC3C,MAAM,EAAE,CAAA;QACR,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QACxC,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/build/components/panel-app/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/panel-app/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAM/C,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAQtC,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/panel-app/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAO/C,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAetC,CAAA"}

package/build/components/panel-app/component.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { App } from '@owlmeans/client';
 import { I18nContext } from '@owlmeans/client-i18n';
-import { cn } from '@/lib/utils';
+import { cn } from '../../@/lib/utils.js';
+import { SocketReloadDialog } from '../socket/reload-dialog.js';
 export const PanelApp = ({ context, provide, children, rootClassName }) => {
-    return _jsx("div", { className: cn('min-h-screen bg-background text-foreground', rootClassName), children: _jsx(I18nContext, { config: context.cfg, children: _jsx(App, { context: context, provide: provide, children: children }) }) });
+    return _jsx("div", { className: cn('min-h-screen bg-background text-foreground', rootClassName), children: _jsx(I18nContext, { config: context.cfg, children: _jsxs(App, { context: context, provide: provide, children: [children, context.cfg.socket?.reloadDialog === true && _jsx(SocketReloadDialog, {})] }) }) });
 };
 //# sourceMappingURL=component.js.map

package/build/components/panel-app/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/panel-app/component.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAEhC,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IAC3F,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,4CAA4C,EAAE,aAAa,CAAC,YACpF,KAAC,WAAW,IAAC,MAAM,EAAE,OAAO,CAAC,GAAG,YAC9B,KAAC,GAAG,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YACpC,QAAQ,GACL,GACM,GACV,CAAA;AACR,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/panel-app/component.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IAC3F,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,4CAA4C,EAAE,aAAa,CAAC,YACpF,KAAC,WAAW,IAAC,MAAM,EAAE,OAAO,CAAC,GAAG,YAC9B,MAAC,GAAG,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,aACpC,QAAQ,EAOR,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,IAAI,KAAC,kBAAkB,KAAG,IAChE,GACM,GACV,CAAA;AACR,CAAC,CAAA"}

package/build/components/picker/color-picker.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { ColorPickerProps } from './types.js';
+/**
+ * The colour half alone: a trigger opening the swatches (plus a colour wheel and a hex field with
+ * `customColors`). A swatch commits its key and closes; the wheel and the field commit as they
+ * change and keep it open. Pass `colors` for an application palette — a status palette, say.
+ */
+export declare const ColorPicker: FC<ColorPickerProps>;
+//# sourceMappingURL=color-picker.d.ts.map

package/build/components/picker/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/color-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAGlD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAK3C,CAAA"}

package/build/components/picker/color-picker.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PickerRoot } from './root.js';
+/**
+ * The colour half alone: a trigger opening the swatches (plus a colour wheel and a hex field with
+ * `customColors`). A swatch commits its key and closes; the wheel and the field commit as they
+ * change and keep it open. Pass `colors` for an application palette — a status palette, say.
+ */
+export const ColorPicker = ({ value, onChange, trigger = 'button', customColors = false, ...base }) => _jsx(PickerRoot, { ...base, mode: "color", trigger: trigger, customColors: customColors, closeOnPick: true, color: value, onColor: onChange, onIcon: () => undefined });
+//# sourceMappingURL=color-picker.js.map

package/build/components/picker/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/picker/color-picker.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAyB,CAC/C,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EACtE,EAAE,CAAC,KAAC,UAAU,OACV,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,QAAC,KAAK,EAAE,KAAK,EAC7F,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,GAC1C,CAAA"}

package/build/components/picker/consts.local.d.ts

@@ -0,0 +1,76 @@
+import type { CSSProperties } from 'react';
+import type { PickerDotSize, PickerTileSize } from './types.js';
+import type { PickerLayout } from './types.local.js';
+/** From this width up `surface="auto"` opens a popover; below it, a bottom sheet. */
+export declare const POPOVER_QUERY = "(min-width: 768px)";
+/** A mouse or trackpad — the search field may take focus on open without raising a keyboard. */
+export declare const FINE_POINTER_QUERY = "(pointer: fine)";
+/**
+ * The current mode's ink and ground, read from the five custom properties `styleOf` sets.
+ *
+ * Dark follows web-panel's colour-scheme contract — `.dark` on the document element, or the
+ * operating system's dark unless `.light` is there — through explicit arbitrary variants. Never the
+ * consumer's `dark:`: an application may define it any way it likes, or not at all. Every part that
+ * carries a colour's style puts this on the same element; children read `--pick-fg` / `--pick-bg`.
+ */
+export declare const PICK_SCOPE: string;
+/** A hairline inside a swatch, so a dark swatch keeps an edge on a dark surface and a pale one on a light. */
+export declare const HAIRLINE: string;
+export declare const TILE = "inline-flex shrink-0 items-center justify-center bg-(--pick-bg) text-(--pick-fg)";
+export declare const TILE_SIZE: Record<PickerTileSize, string>;
+export declare const PLAIN = "inline-flex shrink-0 items-center justify-center text-(--pick-fg)";
+export declare const PLAIN_SIZE: Record<PickerTileSize, string>;
+export declare const DOT = "inline-block shrink-0 rounded-full bg-(--pick-fg)";
+export declare const DOT_SIZE: Record<PickerDotSize, string>;
+export declare const TRIGGER_BUTTON: string;
+export declare const TRIGGER_COMPACT: string;
+export declare const TRIGGER_DOT = "rounded-full border border-input bg-transparent hover:bg-accent/60";
+/** The empty tile of a trigger while nothing is chosen. */
+export declare const TRIGGER_EMPTY: string;
+export declare const CHEVRON: string;
+export declare const POPOVER: string;
+export declare const SHEET: string;
+/** With an icon grid the surface keeps one height, so filtering never makes it jump. */
+export declare const TALL: Record<'popover' | 'sheet', string>;
+/** The trigger's swatch disc for a colour-only picker — the colour as it was picked. */
+export declare const TRIGGER_DISC = "block size-4 shrink-0 rounded-full bg-(--pick-swatch)";
+export declare const GRAB = "mx-auto mt-2 mb-1 h-1.5 w-10 shrink-0 rounded-full bg-muted-foreground/30";
+export declare const HEADER: Record<'popover' | 'sheet', string>;
+export declare const HEADER_TITLE = "truncate text-sm font-semibold leading-5";
+export declare const HEADER_SUMMARY = "truncate text-xs leading-4 text-muted-foreground";
+export declare const DONE: string;
+export declare const BODY = "min-h-0 flex-1 overflow-y-auto overscroll-contain";
+export declare const SECTION: Record<'popover' | 'sheet', string>;
+export declare const SECTION_TITLE = "mb-2 text-xs font-medium text-muted-foreground";
+export declare const SWATCHES: Record<PickerLayout, string>;
+export declare const SWATCH: string;
+export declare const SWATCH_DISC: string;
+export declare const SWATCH_SELECTED = "ring-2 ring-foreground ring-offset-2 ring-offset-popover";
+export declare const CUSTOM_ROW: string;
+export declare const CUSTOM_DISC = "block size-5 shrink-0 rounded-full";
+/** The colour wheel's mark while no custom colour is chosen. */
+export declare const RAINBOW = "bg-[conic-gradient(from_180deg,#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444)]";
+export declare const CUSTOM_PANEL = "mt-2 flex flex-col gap-2";
+/** A full six-digit value — committed while typing; a three-digit one waits for Enter or blur. */
+export declare const FULL_HEX: RegExp;
+/** The wheel's colour while nothing custom is chosen yet — also the hex field's placeholder. */
+export declare const CUSTOM_START = "#3b82f6";
+/** react-colorful sizes itself with a stylesheet it injects; an inline size is the one that always wins. */
+export declare const WHEEL_STYLE: CSSProperties;
+export declare const FIELD: string;
+export declare const HEX_FIELD = "font-mono";
+export declare const FIELD_ERROR = "text-xs text-destructive";
+/** The search field and the chips stay in view while the grid scrolls under them. */
+export declare const ICON_TOOLS: Record<PickerLayout, string>;
+export declare const SEARCH_WRAP = "relative";
+export declare const SEARCH_ICON = "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground";
+export declare const SEARCH = "pl-8 [&::-webkit-search-cancel-button]:cursor-pointer";
+/** One scrolling row of category chips, running to the surface's edges rather than its padding. */
+export declare const CHIPS: Record<PickerLayout, string>;
+export declare const CHIP: string;
+export declare const ICONS: Record<PickerLayout, string>;
+export declare const ICON_CELL: string;
+export declare const ICON_GRID_PAD: Record<PickerLayout, string>;
+export declare const EMPTY = "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-muted-foreground";
+export declare const LINK_BUTTON: string;
+//# sourceMappingURL=consts.local.d.ts.map

package/build/components/picker/consts.local.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.local.d.ts","sourceRoot":"","sources":["../../../src/components/picker/consts.local.ts"],"names":[],"mappings":"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"}

package/build/components/picker/consts.local.js

@@ -0,0 +1,214 @@
+/** From this width up `surface="auto"` opens a popover; below it, a bottom sheet. */
+export const POPOVER_QUERY = '(min-width: 768px)';
+/** A mouse or trackpad — the search field may take focus on open without raising a keyboard. */
+export const FINE_POINTER_QUERY = '(pointer: fine)';
+/**
+ * The current mode's ink and ground, read from the five custom properties `styleOf` sets.
+ *
+ * Dark follows web-panel's colour-scheme contract — `.dark` on the document element, or the
+ * operating system's dark unless `.light` is there — through explicit arbitrary variants. Never the
+ * consumer's `dark:`: an application may define it any way it likes, or not at all. Every part that
+ * carries a colour's style puts this on the same element; children read `--pick-fg` / `--pick-bg`.
+ */
+export const PICK_SCOPE = [
+    '[--pick-fg:var(--pick-ink)] [--pick-bg:var(--pick-soft)]',
+    '[.dark_&]:[--pick-fg:var(--pick-ink-dark)] [.dark_&]:[--pick-bg:var(--pick-soft-dark)]',
+    '[@media(prefers-color-scheme:dark)]:[:root:not(.light)_&]:[--pick-fg:var(--pick-ink-dark)]',
+    '[@media(prefers-color-scheme:dark)]:[:root:not(.light)_&]:[--pick-bg:var(--pick-soft-dark)]',
+].join(' ');
+/** A hairline inside a swatch, so a dark swatch keeps an edge on a dark surface and a pale one on a light. */
+export const HAIRLINE = [
+    'shadow-[inset_0_0_0_1px_rgb(0_0_0/0.14)]',
+    '[.dark_&]:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.24)]',
+    '[@media(prefers-color-scheme:dark)]:[:root:not(.light)_&]:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.24)]',
+].join(' ');
+export const TILE = 'inline-flex shrink-0 items-center justify-center bg-(--pick-bg) text-(--pick-fg)';
+export const TILE_SIZE = {
+    xs: 'size-5 rounded-[5px] [&>svg]:size-3',
+    sm: 'size-7 rounded-md [&>svg]:size-4',
+    md: 'size-9 rounded-lg [&>svg]:size-5',
+    lg: 'size-12 rounded-xl [&>svg]:size-6',
+};
+export const PLAIN = 'inline-flex shrink-0 items-center justify-center text-(--pick-fg)';
+export const PLAIN_SIZE = {
+    xs: '[&>svg]:size-3',
+    sm: '[&>svg]:size-4',
+    md: '[&>svg]:size-5',
+    lg: '[&>svg]:size-6',
+};
+export const DOT = 'inline-block shrink-0 rounded-full bg-(--pick-fg)';
+export const DOT_SIZE = {
+    xs: 'size-2',
+    sm: 'size-2.5',
+    md: 'size-3.5',
+};
+/**
+ * Focus on a cell is an outline, so it never fights the ring that marks the selected one. Tailwind
+ * v4's `outline-none` would pin the style to `none` under the focus width — `outline-hidden` plus an
+ * explicit `outline-solid` is what shows it.
+ */
+const CELL_FOCUS = [
+    'outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1',
+    'focus-visible:outline-ring',
+].join(' ');
+/** Below 768px and on a coarse pointer every control is at least 44px. */
+const TOUCH_HEIGHT = 'max-md:h-11 pointer-coarse:h-11';
+export const TRIGGER_BUTTON = [
+    'group/picker inline-flex h-9 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md border border-input',
+    'bg-transparent py-1 pr-2.5 pl-1 text-left text-sm shadow-xs outline-none',
+    'transition-[color,box-shadow,background-color] hover:bg-accent/60 motion-reduce:transition-none',
+    'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+    'aria-expanded:border-ring aria-expanded:ring-[3px] aria-expanded:ring-ring/30',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    'max-md:h-11 max-md:pl-2 pointer-coarse:h-11 pointer-coarse:pl-2',
+].join(' ');
+export const TRIGGER_COMPACT = [
+    'inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg outline-none',
+    'transition-shadow motion-reduce:transition-none',
+    'focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-expanded:ring-[3px] aria-expanded:ring-ring/30',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    'max-md:size-11 pointer-coarse:size-11',
+].join(' ');
+export const TRIGGER_DOT = 'rounded-full border border-input bg-transparent hover:bg-accent/60';
+/** The empty tile of a trigger while nothing is chosen. */
+export const TRIGGER_EMPTY = [
+    'inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-dashed',
+    'border-muted-foreground/40 text-muted-foreground [&>svg]:size-4',
+].join(' ');
+export const CHEVRON = [
+    'ml-auto size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none',
+    'group-aria-expanded/picker:rotate-180',
+].join(' ');
+export const POPOVER = [
+    'flex w-[23rem] max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden rounded-xl border border-border p-0 shadow-lg',
+    'bg-popover text-popover-foreground',
+    'max-h-[min(34rem,var(--radix-popover-content-available-height))]',
+    // `!`: the primitive's `data-[state=open]:animate-in` outranks a plain variant class.
+    'pointer-coarse:w-[26rem] motion-reduce:animate-none! motion-reduce:transition-none!',
+].join(' ');
+export const SHEET = [
+    'mx-auto max-h-[88dvh] w-full gap-0 overflow-hidden rounded-t-2xl border-t border-border p-0',
+    'bg-popover text-popover-foreground pb-[env(safe-area-inset-bottom)]',
+    'sm:max-w-xl sm:border-x motion-reduce:animate-none! motion-reduce:transition-none!',
+].join(' ');
+/** With an icon grid the surface keeps one height, so filtering never makes it jump. */
+export const TALL = {
+    popover: 'h-[min(34rem,var(--radix-popover-content-available-height))]',
+    sheet: 'h-[88dvh]',
+};
+/** The trigger's swatch disc for a colour-only picker — the colour as it was picked. */
+export const TRIGGER_DISC = 'block size-4 shrink-0 rounded-full bg-(--pick-swatch)';
+export const GRAB = 'mx-auto mt-2 mb-1 h-1.5 w-10 shrink-0 rounded-full bg-muted-foreground/30';
+export const HEADER = {
+    popover: 'flex shrink-0 items-center gap-3 border-b border-border px-3 py-2.5',
+    sheet: 'flex shrink-0 items-center gap-3 border-b border-border px-4 pt-1 pb-3',
+};
+export const HEADER_TITLE = 'truncate text-sm font-semibold leading-5';
+export const HEADER_SUMMARY = 'truncate text-xs leading-4 text-muted-foreground';
+export const DONE = [
+    'inline-flex h-11 min-w-16 shrink-0 cursor-pointer items-center justify-center rounded-lg px-4',
+    'bg-primary text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90',
+    'focus-visible:ring-[3px] focus-visible:ring-ring/50',
+].join(' ');
+export const BODY = 'min-h-0 flex-1 overflow-y-auto overscroll-contain';
+export const SECTION = {
+    popover: 'px-3 pt-3',
+    sheet: 'px-4 pt-4',
+};
+export const SECTION_TITLE = 'mb-2 text-xs font-medium text-muted-foreground';
+export const SWATCHES = {
+    popover: [
+        'grid grid-cols-12 gap-1',
+        'max-md:grid-cols-[repeat(auto-fill,minmax(44px,1fr))] pointer-coarse:grid-cols-[repeat(auto-fill,minmax(44px,1fr))]',
+    ].join(' '),
+    sheet: 'grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1.5',
+    inline: [
+        'grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1.5',
+        'md:pointer-fine:grid-cols-[repeat(12,minmax(0,2rem))] md:pointer-fine:gap-1',
+    ].join(' '),
+};
+export const SWATCH = [
+    'group/swatch inline-flex aspect-square w-full min-w-0 cursor-pointer items-center justify-center rounded-full',
+    CELL_FOCUS,
+].join(' ');
+export const SWATCH_DISC = [
+    'pointer-events-none block size-[76%] max-h-9 max-w-9 rounded-full bg-(--pick-swatch)',
+    'transition-transform group-hover/swatch:scale-110 motion-reduce:transition-none motion-reduce:group-hover/swatch:scale-100',
+    HAIRLINE,
+].join(' ');
+export const SWATCH_SELECTED = 'ring-2 ring-foreground ring-offset-2 ring-offset-popover';
+export const CUSTOM_ROW = [
+    'mt-2 flex h-8 w-full cursor-pointer items-center gap-2 rounded-md px-1.5 text-left text-sm',
+    'hover:bg-accent hover:text-accent-foreground',
+    'outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
+    TOUCH_HEIGHT,
+].join(' ');
+export const CUSTOM_DISC = 'block size-5 shrink-0 rounded-full';
+/** The colour wheel's mark while no custom colour is chosen. */
+export const RAINBOW = 'bg-[conic-gradient(from_180deg,#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444)]';
+export const CUSTOM_PANEL = 'mt-2 flex flex-col gap-2';
+/** A full six-digit value — committed while typing; a three-digit one waits for Enter or blur. */
+export const FULL_HEX = /^#?[0-9a-f]{6}$/i;
+/** The wheel's colour while nothing custom is chosen yet — also the hex field's placeholder. */
+export const CUSTOM_START = '#3b82f6';
+/** react-colorful sizes itself with a stylesheet it injects; an inline size is the one that always wins. */
+export const WHEEL_STYLE = { width: '100%', height: 148 };
+export const FIELD = [
+    'h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 text-sm shadow-xs outline-none',
+    'placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+    'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+    TOUCH_HEIGHT,
+].join(' ');
+export const HEX_FIELD = 'font-mono';
+export const FIELD_ERROR = 'text-xs text-destructive';
+/** The search field and the chips stay in view while the grid scrolls under them. */
+export const ICON_TOOLS = {
+    popover: 'sticky top-0 z-10 -mx-3 bg-popover px-3 pb-2',
+    sheet: 'sticky top-0 z-10 -mx-4 bg-popover px-4 pb-2',
+    inline: 'pb-2',
+};
+export const SEARCH_WRAP = 'relative';
+export const SEARCH_ICON = 'pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground';
+export const SEARCH = 'pl-8 [&::-webkit-search-cancel-button]:cursor-pointer';
+/** One scrolling row of category chips, running to the surface's edges rather than its padding. */
+export const CHIPS = {
+    popover: 'mt-2 -mx-3 flex gap-1.5 overflow-x-auto px-3 pb-0.5 scroll-px-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+    sheet: 'mt-2 -mx-4 flex gap-1.5 overflow-x-auto px-4 pb-0.5 scroll-px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+    inline: 'mt-2 flex gap-1.5 overflow-x-auto pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+};
+export const CHIP = [
+    'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-full border border-input px-2.5',
+    'text-xs font-medium text-muted-foreground transition-colors motion-reduce:transition-none',
+    'hover:bg-accent hover:text-accent-foreground',
+    'aria-pressed:border-transparent aria-pressed:bg-primary aria-pressed:text-primary-foreground',
+    CELL_FOCUS,
+    'max-md:h-11 max-md:px-4 max-md:text-sm pointer-coarse:h-11 pointer-coarse:px-4 pointer-coarse:text-sm',
+].join(' ');
+export const ICONS = {
+    popover: [
+        'grid grid-cols-9 gap-0.5',
+        'max-md:grid-cols-[repeat(auto-fill,minmax(44px,1fr))] pointer-coarse:grid-cols-[repeat(auto-fill,minmax(44px,1fr))]',
+    ].join(' '),
+    sheet: 'grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1',
+    inline: [
+        'grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1',
+        'md:pointer-fine:grid-cols-[repeat(auto-fill,minmax(36px,1fr))] md:pointer-fine:gap-0.5',
+    ].join(' '),
+};
+export const ICON_CELL = [
+    'inline-flex aspect-square w-full min-w-0 cursor-pointer items-center justify-center rounded-md text-(--pick-fg)',
+    'transition-colors hover:bg-accent motion-reduce:transition-none [&>svg]:size-5',
+    'aria-pressed:bg-(--pick-bg) aria-pressed:ring-2 aria-pressed:ring-(--pick-fg) aria-pressed:ring-inset',
+    CELL_FOCUS,
+].join(' ');
+export const ICON_GRID_PAD = {
+    popover: 'pb-3',
+    sheet: 'pb-4',
+    inline: '',
+};
+export const EMPTY = 'flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-muted-foreground';
+export const LINK_BUTTON = [
+    'cursor-pointer rounded-sm text-sm font-medium text-foreground underline underline-offset-4',
+    'outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
+].join(' ');
+//# sourceMappingURL=consts.local.js.map

package/build/components/picker/consts.local.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.local.js","sourceRoot":"","sources":["../../../src/components/picker/consts.local.ts"],"names":[],"mappings":"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"}

package/build/components/picker/dot.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { ColorDotProps } from './types.js';
+/**
+ * A stored colour as a dot, in the colour's ink — the ink keeps 3:1 on the page in both schemes,
+ * which a dot (a graphic) needs; the brighter swatch does not. Unknown → slate.
+ */
+export declare const ColorDot: FC<ColorDotProps>;
+//# sourceMappingURL=dot.d.ts.map