@milktop/react-ui 0.1.2 → 0.2.1

package/README.md

@@ -52,7 +52,8 @@ So far:
 - Pickers: TimeInput · NativeSelect · SwatchPicker · Select (one component: searchable, server `load`, `onCreate`,
   multiple, tags; Combobox's parts for building one by hand) · DatePicker
 - Choices: Checkbox · CheckboxGroup · Switch · RadioGroup · Segmented ·
-  ThemeToggle (`colorScheme`, `useColorScheme`)
+  ThemeToggle (`colorScheme`, `useColorScheme`) · Appearance (light and dark, the accent and the
+  sidebar style behind one button; `appearance`, `useAppearance`)
 - Forms: Field · Fields
 - Overlays: Tooltip · Popover · HoverCard · Dialog · Sheet (both: props or
   composed from Header/Body/Footer) · ActionBar · Menu · ContextMenu (Menu.Item,
@@ -65,7 +66,8 @@ So far:
   events, a date jump) · SortableList (drag or keyboard, on dnd-kit)
 - Disclosure: Tabs/Tab (with counts and dots, inline or in the corner) · Accordion · Collapsible
 - Navigation: AppShell (flat or inset; the sidebar collapses to a rail with ⌘B
-  and is a drawer on phones) · Topbar · Sidebar (NavSection, NavGroup, NavItem,
+  and is a drawer on phones; inset, or `scroll="page"`, scrolls only the page
+  on wide screens) · Topbar · Sidebar (NavSection, NavGroup, NavItem,
   SidebarUser; also Sidebar.Section…) · Page · Breadcrumbs · Command (⌘K)
 
 That's all of svelte-ui's components.
@@ -104,7 +106,8 @@ the words of the app's provider.
   (`classes={{ itemText: 'font-mono' }}`).
 - Slots replace a part's content: a node, or a function given its state
   (`indicator={({ indeterminate }) => …}`, `renderItem={(item) => …}`).
-- `style={{ '--ui-accent': … }}`: tokens for one instance; on `:root` for the whole app.
+- Tokens for one instance or a section: a class (`className="[--ui-accent:#16a34a]"` with
+  Tailwind) or `style={{ '--ui-accent': … }}`; on `:root` for the whole app.
 - Typed: written in TypeScript, shipped as JS with `.d.ts` types, so TSX apps
   get checked props (Select's value is the type of your items' `valueKey`)
   and JSX apps get autocomplete, with no errors either way.
@@ -133,6 +136,53 @@ dark values apply under `html.dark`:
 :root { --ui-accent: #e11d48; --ui-radius: 10px; }
 ```
 
+### Accent and sidebar style
+
+`appearance` holds the accent colour and the sidebar style, saved like
+`colorScheme`. `<Appearance>` lets people choose them, with light and dark,
+behind one button:
+
+```tsx
+<Appearance accents={['teal', 'blue', 'violet']} sidebars={['neutral', 'tint', 'dark']} />
+```
+
+`accents` and `sidebars` are what users may choose (every one if left out),
+the default first: a saved choice outside them moves to it. While building
+the app, add `dev`: it offers every accent and sidebar style, any colour, a
+reset, and the props to paste for the current choice. Take it off before
+shipping.
+
+The accents are Tailwind's scales (`slate`, `blue`, `indigo`, `violet`,
+`teal`, `emerald`, `rose`); a custom hex colour gets its scale worked out in
+the browser. It sets the `--ui-accent-50` … `-950` scale on `<html>`, which
+the accent and ring tokens are steps of, so setting that scale in your own
+CSS recolours them too. The sidebar styles (`default`, `neutral`, `soft`,
+`tint`, `accent`, `dark`, `deep`) are light-mode only. From code:
+
+```ts
+import { appearance } from '@milktop/react-ui'
+
+appearance.defaults = { accent: 'teal', sidebar: 'neutral' }  // before anything is saved, and for reset
+appearance.update({ accent: 'violet', sidebar: 'dark' })
+appearance.load(user.appearance)                              // apply a saved one
+appearance.onChange = (value) => save(value)                  // { accent, custom, sidebar }
+```
+
+It saves under `ui-appearance` (`appearance.storageKey` changes it), scale
+included, so the `<head>` can paint it before your bundle loads:
+
+```html
+<script>
+  try {
+    var a = JSON.parse(localStorage.getItem('ui-appearance') || '{}'), r = document.documentElement
+    if (a.sidebar && a.sidebar !== 'default') r.dataset.uiSidebarStyle = a.sidebar
+    var steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+    if (a.scale) steps.forEach(function (s, i) { r.style.setProperty('--ui-accent-' + s, a.scale[i]) })
+    if (a.scaleText) r.style.setProperty('--ui-accent-500-text', a.scaleText)
+  } catch (e) {}
+</script>
+```
+
 ### React Server Components
 
 Not supported yet, and not needed in Vite apps. A server component can't
@@ -150,9 +200,10 @@ npm run build      # the playground as a static site, in playground/dist
 npm run build:lib  # the package: src/ to dist/ (JS, .d.ts, CSS); runs before npm publish
 ```
 
-Releasing (logged in with `npm login`, on a clean main): each runs the checks
-and the build, bumps the version, commits and tags it, pushes with the tag,
-then publishes.
+Releasing (on a clean main): each runs the checks and the build, bumps the
+version, commits and tags it, and pushes with the tag. The tag starts the
+Publish workflow (`.github/workflows/publish.yml`), which publishes to npm
+through Trusted publishing: no npm login or token needed.
 
 ```sh
 npm run release:patch   # 0.1.0 → 0.1.1

package/dist/accordion/Accordion.d.ts

@@ -24,7 +24,7 @@
  */
 import { type ReactNode } from 'react';
 import { Accordion as Ark } from '@ark-ui/react/accordion';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './accordion.css';

package/dist/accordion/Accordion.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { createContext, useContext, useRef } from 'react';
 import { Accordion as Ark } from '@ark-ui/react/accordion';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable, withParts } from '../utils.js';
 import '../theme.css';
 import './accordion.css';

package/dist/action-bar/ActionBar.d.ts

@@ -18,7 +18,7 @@
  * - `label`: the toolbar's accessible name
  */
 import { type ComponentProps, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './action-bar.css';

package/dist/action-bar/ActionBar.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useEffect, useState } from 'react';
 import { Portal } from '@ark-ui/react/portal';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/alert/Alert.d.ts

@@ -13,7 +13,7 @@
  * when they appear; the others are role=status.
  */
 import type { ComponentProps, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './alert.css';

package/dist/alert/Alert.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/app-shell/AppShell.d.ts

@@ -10,6 +10,13 @@
  *
  * - `inset`: the page as a rounded panel on a frame, with a grey sidebar
  *   whose hovered and current items go white (the `--ui-sidebar-inset-*` tokens)
+ * - `scroll`: what scrolls on wide screens: 'window' (default) or 'page',
+ *   where the shell fills the viewport and only the page scrolls. `inset`
+ *   always scrolls the page there. Phones scroll the window either way, so
+ *   the browser can hide its toolbars. The page then takes focus, so Space
+ *   and the arrow keys scroll it straight away, prints in full, and is marked
+ *   `scroll-region` for Inertia's scroll resets. Listen for scrolling on the
+ *   page (`useShell().scroller()` in the shell's parts), not the window.
  * - `collapsed`, `defaultCollapsed`; `onCollapsedChange`: the sidebar as an
  *   icon rail
  * - `persist`: a localStorage key to remember `collapsed`
@@ -26,6 +33,7 @@ import '../theme.css';
 import './app-shell.css';
 export type AppShellProps = HTMLAttributes<HTMLDivElement> & {
     inset?: boolean;
+    scroll?: 'window' | 'page';
     collapsed?: boolean;
     defaultCollapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
@@ -34,5 +42,5 @@ export type AppShellProps = HTMLAttributes<HTMLDivElement> & {
     shortcut?: boolean;
     classes?: Classes<'root' | 'backdrop'>;
 };
-export declare function AppShell({ inset, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, persist, breakpoint, shortcut, className, classes, children, ...rest }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ inset, scroll, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, persist, breakpoint, shortcut, className, classes, children, ...rest }: AppShellProps): import("react").JSX.Element;
 export { useShell } from './shell.js';

package/dist/app-shell/AppShell.js

@@ -11,6 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - `inset`: the page as a rounded panel on a frame, with a grey sidebar
  *   whose hovered and current items go white (the `--ui-sidebar-inset-*` tokens)
+ * - `scroll`: what scrolls on wide screens: 'window' (default) or 'page',
+ *   where the shell fills the viewport and only the page scrolls. `inset`
+ *   always scrolls the page there. Phones scroll the window either way, so
+ *   the browser can hide its toolbars. The page then takes focus, so Space
+ *   and the arrow keys scroll it straight away, prints in full, and is marked
+ *   `scroll-region` for Inertia's scroll resets. Listen for scrolling on the
+ *   page (`useShell().scroller()` in the shell's parts), not the window.
  * - `collapsed`, `defaultCollapsed`; `onCollapsedChange`: the sidebar as an
  *   icon rail
  * - `persist`: a localStorage key to remember `collapsed`
@@ -21,7 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ⌘B (Ctrl+B) collapses the sidebar, or opens the drawer on phones; Escape
  * closes the drawer. Parts inside read the shell with `useShell()`.
  */
-import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { cx, partsOf, useControllable } from '../utils.js';
 import { ShellContext } from './shell.js';
 import '../theme.css';
@@ -45,7 +52,29 @@ function useNarrow(breakpoint) {
     }, [query]);
     return useSyncExternalStore(subscribe, () => matchMedia(query).matches, () => false);
 }
-export function AppShell({ inset = false, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, persist = null, breakpoint = 768, shortcut = true, className, classes, children, ...rest }) {
+// The keys that scroll the window do nothing for the page while nothing is
+// focused, and Chrome ignores them on the page itself (focusable, see Page):
+// they scroll it here, and focus it. Focus inside the page leaves them to
+// the browser (fields, nested scrollers).
+function scrollKey(e, page) {
+    if (![null, document.body, document.documentElement, page].includes(document.activeElement))
+        return;
+    if (e.altKey || e.ctrlKey || e.metaKey)
+        return;
+    const step = page.clientHeight * 0.875;
+    const top = {
+        ArrowDown: 40, ArrowUp: -40, PageDown: step, PageUp: -step,
+        ' ': e.shiftKey ? -step : step,
+        Home: -page.scrollTop, End: page.scrollHeight,
+    }[e.key];
+    if (top === undefined)
+        return;
+    e.preventDefault();
+    page.focus({ preventScroll: true });
+    const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+    page.scrollBy({ top, behavior: still ? 'auto' : 'smooth' });
+}
+export function AppShell({ inset = false, scroll = 'window', collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, persist = null, breakpoint = 768, shortcut = true, className, classes, children, ...rest }) {
     const part = partsOf('app-shell', classes);
     const [initial] = useState(() => saved(persist) ?? defaultCollapsed);
     const [collapsed, setCollapsed] = useControllable(collapsedProp, initial, onCollapsedChange);
@@ -54,6 +83,10 @@ export function AppShell({ inset = false, collapsed: collapsedProp, defaultColla
     // Widening the window past the breakpoint closes the drawer.
     const drawerOpen = drawer && mobile;
     const rail = collapsed && !mobile;
+    // Only the page scrolls (see `scroll`).
+    const pageScroll = !mobile && (inset || scroll === 'page');
+    const root = useRef(null);
+    const page = useCallback(() => root.current?.querySelector(':scope > [data-scope=page]') ?? null, []);
     const toggle = useCallback(() => {
         if (mobile)
             return setDrawer(!drawerOpen);
@@ -64,7 +97,10 @@ export function AppShell({ inset = false, collapsed: collapsedProp, defaultColla
         }
         catch { /* private mode */ }
     }, [mobile, drawerOpen, collapsed, setCollapsed, persist]);
-    const shell = useMemo(() => ({ rail, mobile, drawerOpen, toggle, close: () => setDrawer(false) }), [rail, mobile, drawerOpen, toggle]);
+    const shell = useMemo(() => ({
+        rail, mobile, drawerOpen, pageScroll, toggle, close: () => setDrawer(false),
+        scroller: () => (pageScroll && page()) || document.scrollingElement,
+    }), [rail, mobile, drawerOpen, pageScroll, toggle, page]);
     // Where the main area starts, for things fixed to the viewport that centre
     // over it (ActionBar).
     useEffect(() => {
@@ -83,10 +119,15 @@ export function AppShell({ inset = false, collapsed: collapsedProp, defaultColla
             }
             else if (e.key === 'Escape' && drawerOpen)
                 setDrawer(false);
+            else if (pageScroll && !e.defaultPrevented) {
+                const el = page();
+                if (el)
+                    scrollKey(e, el);
+            }
         }
         addEventListener('keydown', keydown);
         return () => removeEventListener('keydown', keydown);
-    }, [shortcut, toggle, drawerOpen]);
-    return (_jsx(ShellContext, { value: shell, children: _jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-inset": inset || undefined, "data-rail": rail || undefined, "data-mobile": mobile || undefined, children: [children, drawerOpen && _jsx("div", { ...part('backdrop'), role: "presentation", onClick: () => setDrawer(false) })] }) }));
+    }, [shortcut, toggle, drawerOpen, pageScroll, page]);
+    return (_jsx(ShellContext, { value: shell, children: _jsxs("div", { ref: root, ...rest, ...part('root'), className: cx(className, classes?.root), "data-inset": inset || undefined, "data-page-scroll": pageScroll || undefined, "data-rail": rail || undefined, "data-mobile": mobile || undefined, children: [children, drawerOpen && _jsx("div", { ...part('backdrop'), role: "presentation", onClick: () => setDrawer(false) })] }) }));
 }
 export { useShell } from './shell.js';

package/dist/app-shell/Topbar.d.ts

@@ -9,7 +9,7 @@
  * - `end`: actions on the right
  */
 import type { HTMLAttributes, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './app-shell.css';

package/dist/app-shell/Topbar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import { useShell } from './shell.js';

package/dist/app-shell/app-shell.css

@@ -12,6 +12,11 @@
     &[data-inset][data-mobile] > [data-scope=page] { margin: 0 0.5rem 0.5rem; }
     > [data-scope=topbar] { grid-area: topbar; }
     > [data-scope=page] { grid-area: main; }
+    /* Only the page scrolls; printing lets it run on. */
+    &[data-page-scroll] { height: 100dvh; overflow: hidden;
+      > [data-scope=page] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }
+      @media print { height: auto; overflow: visible;
+        > [data-scope=page] { overflow-y: visible; } } }
 
     /* Inset: the page is a rounded panel on the frame, and the sidebar and top
        bar sit flat around it. The grey sidebar's items go white. */

package/dist/app-shell/shell.d.ts

@@ -2,6 +2,8 @@ export type Shell = {
     rail: boolean;
     mobile: boolean;
     drawerOpen: boolean;
+    pageScroll: boolean;
+    scroller: () => HTMLElement;
     toggle: () => void;
     close: () => void;
 };

package/dist/appearance-panel/Appearance.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Light or dark (`colorScheme`), the accent colour and the sidebar style
+ * (`appearance`), behind one button. The choices are saved.
+ *
+ *   <Appearance accents={['teal', 'blue', 'violet']} sidebars={['neutral', 'tint', 'dark']} />
+ *   <Appearance dev />
+ *
+ * - `accents`, `sidebars`: what users may choose, by name (every one if left
+ *   out; see `accents` and `sidebarStyles`). A saved choice outside them moves
+ *   to their first item, so put the default first.
+ * - `dev`: for trying themes out while building the app; take it off before
+ *   shipping. Offers every accent and sidebar style whatever the lists say,
+ *   any colour, a reset, and the `accents` and `sidebars` to paste for the
+ *   current choice. Its switch turns dev mode off to preview what users get.
+ * - `schemes`: false leaves out light and dark (e.g. with a ThemeToggle
+ *   elsewhere)
+ * - `placement`: where the panel opens ('bottom-end')
+ * - `labels`: words over the locale's `appearance` ones
+ * - `onChange`: called with appearance's value ({ accent, custom, sidebar })
+ *   when the user changes it
+ */
+import { type HTMLAttributes } from 'react';
+import { type PopoverProps } from '../popover/Popover.js';
+import { type AppearanceValue } from '../appearance.js';
+import { type Classes } from '../utils.js';
+import type { Messages } from '../format/messages.js';
+import '../theme.css';
+import './appearance.css';
+export type AppearanceProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    accents?: string[] | null;
+    sidebars?: string[] | null;
+    dev?: boolean;
+    schemes?: boolean;
+    placement?: PopoverProps['placement'];
+    labels?: Partial<Messages['appearance']> | null;
+    onChange?: (value: AppearanceValue) => void;
+    classes?: Classes<'root' | 'trigger' | 'panel' | 'setting' | 'label' | 'hint' | 'custom' | 'dev' | 'config'>;
+};
+export declare function Appearance({ accents, sidebars, dev, schemes, placement, labels, onChange, className, classes, ...rest }: AppearanceProps): import("react").JSX.Element;

package/dist/appearance-panel/Appearance.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Light or dark (`colorScheme`), the accent colour and the sidebar style
+ * (`appearance`), behind one button. The choices are saved.
+ *
+ *   <Appearance accents={['teal', 'blue', 'violet']} sidebars={['neutral', 'tint', 'dark']} />
+ *   <Appearance dev />
+ *
+ * - `accents`, `sidebars`: what users may choose, by name (every one if left
+ *   out; see `accents` and `sidebarStyles`). A saved choice outside them moves
+ *   to their first item, so put the default first.
+ * - `dev`: for trying themes out while building the app; take it off before
+ *   shipping. Offers every accent and sidebar style whatever the lists say,
+ *   any colour, a reset, and the `accents` and `sidebars` to paste for the
+ *   current choice. Its switch turns dev mode off to preview what users get.
+ * - `schemes`: false leaves out light and dark (e.g. with a ThemeToggle
+ *   elsewhere)
+ * - `placement`: where the panel opens ('bottom-end')
+ * - `labels`: words over the locale's `appearance` ones
+ * - `onChange`: called with appearance's value ({ accent, custom, sidebar })
+ *   when the user changes it
+ */
+import { useEffect, useState } from 'react';
+import { Popover } from '../popover/Popover.js';
+import { Button } from '../button/Button.js';
+import { Segmented } from '../segment-group/Segmented.js';
+import { SwatchPicker } from '../swatch-picker/SwatchPicker.js';
+import { NativeSelect } from '../native-select/NativeSelect.js';
+import { Switch } from '../switch/Switch.js';
+import { useColorScheme } from '../color-scheme.js';
+import { appearance, accents as allAccents, sidebarStyles as allSidebars, useAppearance, } from '../appearance.js';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './appearance.css';
+const schemeIcons = { system: 'lucide:monitor', light: 'lucide:sun', dark: 'lucide:moon' };
+export function Appearance({ accents = null, sidebars = null, dev = false, schemes = true, placement = 'bottom-end', labels = null, onChange, className, classes, ...rest }) {
+    const t = useMessages();
+    const words = { ...t.appearance, ...labels };
+    const part = partsOf('appearance', classes);
+    const { scheme, dark, setScheme } = useColorScheme();
+    const value = useAppearance();
+    const [devMode, setDevMode] = useState(true);
+    const exploring = dev && devMode;
+    // In the lists' own order (the first is the fallback), or every one
+    const accentNames = exploring || !accents ? Object.keys(allAccents) : accents.filter((name) => name in allAccents);
+    const sidebarNames = exploring || !sidebars ? [...allSidebars] : sidebars.filter((name) => allSidebars.includes(name));
+    const schemeItems = ['system', 'light', 'dark'].map((s) => ({ value: s, label: t.themeToggle[s], icon: schemeIcons[s] }));
+    const accentItems = accentNames.map((name) => ({ value: name, label: words.accents[name] ?? name, color: allAccents[name][0][6] }));
+    const sidebarItems = sidebarNames.map((name) => ({ value: name, label: words.sidebars[name] ?? name }));
+    // A saved choice outside the lists moves to their first item.
+    const allowedAccents = accentNames.join();
+    const allowedSidebars = sidebarNames.join();
+    useEffect(() => {
+        if (!exploring)
+            appearance.restrict(allowedAccents.split(','), allowedSidebars.split(','));
+    }, [exploring, allowedAccents, allowedSidebars]);
+    // The current choice as code to paste into the app: the props that offer
+    // it, or for a custom colour, the default that sets it.
+    const config = value.custom
+        ? `appearance.defaults = ${JSON.stringify({ custom: value.custom, sidebar: value.sidebar })}`
+        : `accents={['${value.accent}']} sidebars={['${value.sidebar}']}`;
+    function pick(changes) {
+        appearance.update(changes);
+        onChange?.(appearance.value);
+    }
+    function reset() {
+        appearance.reset();
+        onChange?.(appearance.value);
+    }
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), children: _jsx(Popover, { heading: words.label, placement: placement, trigger: _jsx(Button, { className: classes?.trigger, variant: "ghost", icon: "lucide:palette", "aria-label": words.label }), children: _jsxs("div", { ...part('panel'), children: [schemes && (_jsxs("div", { ...part('setting'), children: [_jsx("div", { ...part('label'), children: words.mode }), _jsx(Segmented, { size: "sm", items: schemeItems, value: scheme, "aria-label": words.mode, onValueChange: (next) => next && setScheme(next) })] })), _jsxs("div", { ...part('setting'), children: [_jsx("div", { ...part('label'), children: words.accent }), _jsx(SwatchPicker, { size: "sm", items: accentItems, value: value.custom ? null : value.accent, "aria-label": words.accent, onValueChange: (next) => next && pick({ accent: next, custom: null }) })] }), exploring && (_jsxs("label", { ...part('custom'), children: [_jsx("input", { type: "color", value: value.custom ?? appearance.scale[6], onChange: (e) => pick({ custom: e.target.value }) }), _jsx("span", { children: words.custom }), value.custom && _jsx("code", { children: value.custom })] })), _jsxs("div", { ...part('setting'), children: [_jsxs("div", { ...part('label'), children: [_jsx("span", { children: words.sidebar }), dark && _jsx("span", { ...part('hint'), children: words.lightOnly })] }), sidebarItems.length <= 4
+                                ? _jsx(Segmented, { size: "sm", items: sidebarItems, value: value.sidebar, "aria-label": words.sidebar, onValueChange: (next) => next && pick({ sidebar: next }) })
+                                : _jsx(NativeSelect, { size: "sm", items: sidebarItems, value: value.sidebar, "aria-label": words.sidebar, onValueChange: (next) => next && pick({ sidebar: next }) })] }), dev && (_jsxs("div", { ...part('dev'), children: [_jsx(Switch, { label: words.dev, checked: devMode, onCheckedChange: setDevMode }), exploring && _jsxs(_Fragment, { children: [_jsx("code", { ...part('config'), children: config }), _jsx(Button, { size: "sm", onClick: reset, children: words.reset })] })] }))] }) }) }));
+}

package/dist/appearance-panel/appearance.css

@@ -0,0 +1,17 @@
+@layer ui {
+  [data-scope=appearance][data-part=root] { display: inline-block;
+    /* A little wider than a popover's default, for four sidebar styles. */
+    & [data-scope=popover][data-part=content] { width: 20rem; } }
+  [data-scope=appearance][data-part=panel] { display: flex; flex-direction: column; gap: 1rem; }
+  [data-scope=appearance][data-part=label] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
+    margin-bottom: 0.5rem; font-size: 12px; font-weight: 600; color: var(--ui-muted); }
+  [data-scope=appearance][data-part=hint] { font-weight: 400; }
+  [data-scope=appearance][data-part=custom] { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; cursor: pointer;
+    & input { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+      background: transparent; cursor: pointer; }
+    & code { font-size: 12px; color: var(--ui-muted); } }
+  [data-scope=appearance][data-part=dev] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
+    padding-top: 0.75rem; border-top: 1px solid var(--ui-border); }
+  [data-scope=appearance][data-part=config] { display: block; align-self: stretch; padding: 0.5rem; background: var(--ui-hover);
+    border-radius: var(--ui-radius); font-size: 12px; color: var(--ui-muted); white-space: pre-wrap; user-select: all; }
+}

package/dist/appearance.d.ts

@@ -0,0 +1,42 @@
+export declare const accentSteps: number[];
+export declare const accents: {
+    slate: [string[], string];
+    blue: [string[], string];
+    indigo: [string[], string];
+    violet: [string[], string];
+    teal: [string[], string];
+    emerald: [string[], string];
+    rose: [string[], string];
+};
+export type AccentName = keyof typeof accents;
+export declare const sidebarStyles: readonly ["default", "neutral", "soft", "tint", "accent", "dark", "deep"];
+export type SidebarStyle = typeof sidebarStyles[number];
+export type AppearanceValue = {
+    accent: AccentName;
+    custom: string | null;
+    sidebar: SidebarStyle;
+};
+export declare const accentScale: (hex: string) => string[];
+declare class Appearance {
+    #private;
+    onChange: ((value: AppearanceValue) => void) | null;
+    constructor();
+    get storageKey(): string;
+    set storageKey(key: string);
+    get defaults(): AppearanceValue;
+    set defaults(value: Partial<AppearanceValue>);
+    get value(): AppearanceValue;
+    get accent(): "slate" | "blue" | "indigo" | "violet" | "teal" | "emerald" | "rose";
+    get custom(): string | null;
+    get sidebar(): "default" | "neutral" | "soft" | "tint" | "accent" | "dark" | "deep";
+    get scale(): string[];
+    get scaleText(): string;
+    update(changes: Partial<AppearanceValue>): void;
+    load(value: unknown): void;
+    reset(): void;
+    restrict(allowedAccents?: readonly string[] | null, allowedSidebars?: readonly string[] | null): void;
+    subscribe: (listener: () => void) => () => void;
+}
+export declare const appearance: Appearance;
+export declare function useAppearance(): AppearanceValue;
+export {};