@owlmeans/web-panel 0.1.18-rc.74 → 0.1.18-rc.76

package/README.md

@@ -11,14 +11,14 @@ but never started.
 ## Installation
 
 ```sh
-bun add @owlmeans/web-panel@^0.1.18-rc.74
+bun add @owlmeans/web-panel@^0.1.18-rc.76
 ```
 
 Peer requirements (the consuming app provides these): `react`, `react-dom`,
 `react-hook-form`, `ajv`, `tailwindcss@^4`, `lucide-react`, `clsx`,
 `tailwind-merge`, `class-variance-authority`, plus the radix primitives
-listed in `peerDependencies` (`alert-dialog`, `dialog`, `label`, `navigation-menu`, `progress`,
-`separator`, `slot`). Also declare `ajv-formats` next to `ajv`: the form model imports it, but no dependency
+listed in `peerDependencies` (`alert-dialog`, `dialog`, `label`, `navigation-menu`, `popover`,
+`progress`, `separator`, `slot` — keep `dialog` and `popover` on the same Radix generation). Also declare `ajv-formats` next to `ajv`: the form model imports it, but no dependency
 section of this manifest lists it.
 
 ## Concepts
@@ -38,8 +38,12 @@ section of this manifest lists it.
   with tailwind-merge, never substituted.
 - **Global overlays** — `PanelApp` renders its `children` and `SocketReloadDialog` beside the
   router, so a dialog survives navigation.
-- **`translate` props** — the navigation and login components take a
+- **`translate` props** — the navigation, login and picker components take a
   `(key, defaultValue) => string` resolver as a prop instead of reading an i18n provider implicitly.
+- **Icon + colour picker** — `@owlmeans/web-panel/picker` is the standard way a person chooses an
+  icon and/or a colour (24 palette keys, ~250 curated lucide icons, an opt-in custom colour) and the
+  way a chosen mark is rendered (`IconTile`, `ColorDot`). A popover on wide screens, a bottom sheet
+  on phones; its data and colour helper are React-free under `./picker/vocabulary`.
 
 ## Usage
 
@@ -60,8 +64,8 @@ The components paint with these CSS variables, defined inside `@theme` in the ap
 - `--animate-progress-indeterminate` + the `@keyframes progress-indeterminate`
   rule for the `Progress` component's indeterminate mode
 
-A working set is shipped at `src/@/globals.css` (for dev/test only). Toasts additionally read
-`--popover`, `--popover-foreground` and `--border`.
+A working set is shipped at `src/@/globals.css` (for dev/test only). Toasts and the picker's
+surfaces additionally read `--popover`, `--popover-foreground` and `--border`.
 
 Tailwind's scanner reads your CSS root plus its `@source` directives, and it excludes
 `node_modules`. Classes that exist only inside this package's components — the whole navigation
@@ -316,6 +320,36 @@ export const ConnectionBadge: FC = () => {
 The dialog's strings are the lib-tier `socket` namespace (`reload.title`, `reload.description`,
 `reload.action`), shipped in seven languages.
 
+### 6. Icon and colour picker
+
+A person choosing a type's mark — an icon and a colour — gets one control; the stored values are a
+palette key (or `#rrggbb` with `customColors`) and a kebab-case lucide name:
+
+```tsx
+import { useState, type FC } from 'react'
+import { IconColorPicker, IconTile, usePickerTranslate } from '@owlmeans/web-panel/picker'
+import type { IconColorChange } from '@owlmeans/web-panel/picker'
+
+export const TypeMarkField: FC<{ initial: IconColorChange, onSave: (mark: IconColorChange) => void }> =
+  ({ initial, onSave }) => {
+    const translate = usePickerTranslate()          // only under PanelApp / render()
+    const [mark, setMark] = useState(initial)
+
+    return <div className="flex items-center gap-3">
+      <IconColorPicker label="Mark" value={mark} onChange={setMark} translate={translate} />
+      <button type="button" onClick={() => onSave(mark)}>Save</button>
+      <IconTile icon={mark.icon} color={mark.color} size="sm" />   {/* how a list shows it */}
+    </div>
+  }
+```
+
+`ColorPicker` and `IconPicker` edit one half; `ColorSwatches` and `IconGrid` are the same grids
+inline, for a dialog the app already owns. Stored marks render with `IconTile` / `ColorDot`, or with
+`pickerColorHelper.styleOf(color)` in custom markup. From 768px up the picker opens as a popover
+(modal, so it works inside an app's own Dialog or Sheet), below that as a bottom sheet with 44px
+targets and a Done button. Without `translate` every string is English; the packaged bundle covers
+eight languages.
+
 ## API
 
 ### Context and mounting
@@ -423,6 +457,37 @@ consumer's CSS puts dark tokens under `.dark` AND under
 | `ConsentWidgetPresenceRecord`, `ConsentWidgetService`, `ConsentWidgetServiceAppend` | type | Service types |
 | `useConsent`, `useConsentCategory`, `consentStore`, `openConsent`, `isConsented`, `readConsent`, `writeConsent`, `clearConsent`, `consentBootstrapScript`, `DEFAULT_CONSENT_CATEGORIES`, `CONSENT_KEY`, `CONSENT_ESSENTIAL`, `CONSENT_ANALYTICS`, `CONSENT_MARKETING` and the consent types | re-export | `@owlmeans/web-consent` |
 
+### `@owlmeans/web-panel/picker`
+
+Not re-exported by the root. Re-exports everything of `./picker/vocabulary` too.
+
+| Symbol | Kind | Purpose |
+|---|---|---|
+| `IconColorPicker`, `IconColorPickerProps` | component, type | Icon + colour: `value?: { icon?, color? }`, `onChange({ icon?, color? })`, `colors?`, `icons?`, `customColors?`, `trigger?: 'button' \| 'tile'` |
+| `ColorPicker`, `ColorPickerProps` | component, type | A colour: `value?`, `onChange(color)`, `colors?`, `customColors?`, `trigger?: 'button' \| 'dot'` |
+| `IconPicker`, `IconPickerProps` | component, type | An icon: `value?`, `onChange(icon)`, `color?` (tint), `icons?`, `trigger?: 'button' \| 'tile'` |
+| `PickerBaseProps` | type | Shared: `label?`, `placeholder?`, `disabled?`, `surface?: 'auto' \| 'popover' \| 'sheet'`, `translate?`, `className?`, `id?` |
+| `ColorSwatches`, `IconGrid` (+ `…Props`) | component, type | The grids inline, for an app's own dialog or sheet |
+| `IconTile`, `IconTileProps` | component, type | A stored mark: `icon?`, `color?`, `colors?`, `size?: 'xs' \| 'sm' \| 'md' \| 'lg'`, `variant?: 'tile' \| 'plain'`, `label?` |
+| `ColorDot`, `ColorDotProps` | component, type | A stored colour as a dot in its ink: `color?`, `colors?`, `size?`, `label?` |
+| `usePickerTranslate()`, `PickerTranslate` | hook, type | `(key, fallback) => string` over the lib-tier `picker` bundle — only under `PanelApp` / `render()` |
+| `IconColorValue`, `IconColorChange` | type | The composite's value and its change (`undefined`, never `null`, for an unset half) |
+| `PICKER_ICONS` | const | Catalogue name → statically imported lucide component |
+| `pickerIconHelper` (`iconOf`, `has`, `search`, `byCategory`), `createPickerIconHelper`, `PickerIconHelper` | helper, type | Icon lookup with the `circle` fallback and catalogue search |
+
+### `@owlmeans/web-panel/picker/vocabulary`
+
+React-free and icon-free — safe on a server or in a seed.
+
+| Symbol | Kind | Purpose |
+|---|---|---|
+| `PICKER_COLOR_KEYS`, `PickerColorKey` | const, type | The 24 keys in hue order: red … rose, maroon, brown, olive, navy, slate, stone, graphite |
+| `PICKER_COLORS`, `PickerColor` | const, type | `{ key, swatch, ink, soft, inkDark?, softDark?, label? }` — every ink 4.5:1 on its ground and the page in both modes |
+| `PICKER_FALLBACK_COLOR`, `PICKER_FALLBACK_ICON` | const | `'slate'`, `'circle'` |
+| `PICKER_ICON_ENTRIES`, `PICKER_ICON_NAMES`, `PICKER_ICON_CATEGORIES` | const | The catalogue: `{ name, category, keywords }`, its names, its ten categories |
+| `PickerIconEntry`, `PickerIconCategory`, `ResolvedPickerColor` | type | |
+| `pickerColorHelper` (`isHex`, `normalizeHex`, `resolve`, `styleOf`, `hashKey`), `createPickerColorHelper`, `PickerColorHelper` | helper, type | Validate, normalize and resolve a stored colour (a hex gets contrast-safe inks); `styleOf` → the `--pick-*` custom properties the parts read |
+
 ### Differences from `@owlmeans/mui-panel`
 
 The public names match the MUI implementation; these props and types differ:
@@ -478,6 +543,14 @@ The public names match the MUI implementation; these props and types differ:
 - **Never import `@/…` from package code or vendor its primitives in the app.** The `@` alias
   belongs to the consumer.
 - **Every override of a packaged string covers all seven languages** (`SUPPORTED_LNGS`).
+- **A person-chosen colour or icon goes through `./picker`.** Never a `Select` or radio group of
+  colour names, a hand-made swatch row, or a class built from the stored value
+  (`` `text-${color}-600` ``); store the key and the icon name, never the label.
+- **Keep `@radix-ui/react-popover` and `@radix-ui/react-dialog` on one Radix generation.** They
+  share the dismissable-layer and focus-scope stacks; mixed, a picker inside a Dialog loses focus
+  to the dialog and its clicks count as outside.
+- **`usePickerTranslate()` needs `PanelApp` / `render()`.** Without an i18n instance it throws;
+  the picker parts themselves render English with no `translate`.
 
 ## Related packages
 
@@ -490,6 +563,15 @@ The public names match the MUI implementation; these props and types differ:
 - [`@owlmeans/web-router`](../web-router) — default OwlMeans routing plugin
 - [`@owlmeans/mui-panel`](../mui-panel) — legacy Material UI implementation of the same surface
 
+## Notes for coding agents
+
+- Read the embedded `web-panel` skill first: its *Choosing a component* table maps every job to the
+  export, the import path and a correct one-liner, and lists the mistakes that recur in generated
+  code (private primitives, a missing `@source`, two `Toaster`s, `Form decorate` with an own submit).
+- An icon or a colour a person chooses is edited with `@owlmeans/web-panel/picker`
+  (`IconColorPicker`, `ColorPicker`, `IconPicker`) and shown with `IconTile` / `ColorDot`; pass
+  `translate={usePickerTranslate()}` in an app rendered by `PanelApp`.
+
 <!-- owlmeans:agent-guidance:start -->
 ## Agent guidance
 
@@ -498,7 +580,7 @@ This package ships embedded agent skills under `agent-meta/`. After installing y
 your project's skill store (`.agents/skills/`):
 
 ```sh
-npx @owlmeans/agent-skills@^0.1.18-rc.53
+npx @owlmeans/agent-skills@^0.1.18-rc.54
 ```
 
 The embedded files are version-matched to this package release. Do not edit them

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.74",
-  "generatedAt": "2026-10-09T11:30:42.761Z",
+  "version": "0.1.18-rc.76",
+  "generatedAt": "2026-10-16T18:05:19.013Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-panel/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: web-panel
-description: How to use @owlmeans/web-panel — base browser context factory (makeContext) with shadcn/Radix + Tailwind and the default OwlMeans router wired in, plus the two-layer navigation shell (NavLayout/TopNav/SideNav/Footer) and form/panel components. Auto-invoked when building a web app's makeContext, wiring its navigation or layout, or importing web panel components.
+description: How to use @owlmeans/web-panel — base browser context factory (makeContext) with shadcn/Radix + Tailwind and the default OwlMeans router wired in, the two-layer navigation shell (NavLayout/TopNav/SideNav/Footer), form/panel components, and the standard icon + colour picker (`./picker`: IconColorPicker, ColorPicker, IconPicker, IconTile, ColorDot). Auto-invoked when building a web app's makeContext, wiring its navigation or layout, importing web panel components, or letting a person choose (or showing) an icon or a colour.
 user-invocable: false
 ---
 <!-- AUTO-GENERATED — do not edit. Regenerate via sync-agent-meta. -->
@@ -8,7 +8,54 @@ user-invocable: false
 # @owlmeans/web-panel
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.74"` in `dependencies`
+**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.76"` in `dependencies`
+
+## Choosing a component
+
+Pick the row for the job; the one-liner is the correct shape. Everything comes from the package
+root unless the import column names a subpath.
+
+| Job | Use | Import | Correct one-liner |
+|---|---|---|---|
+| The app's context | `makeContext` | root | `const context = makeContext<C, T>(cfg)` in `context.ts`, then `append*(context)` mixins |
+| Mount the app | `render` (or `PanelApp` for a host that mounts itself) | root | `render(context)` |
+| The application shell | `NavLayout` | root | `<NavLayout nav={navConfig} title="App" mobileMenu themeToggle>{children}</NavLayout>` |
+| One piece of the shell | `TopNav` / `SideNav` / `MobileNav` / `Footer` / `ShellCredit` | root | `<Footer links={footerLinks} />` |
+| Toasts | `Toaster` + `toast` from `sonner` | root | `<Toaster />` once, in the layout; `toast.success('Saved')` where the action ends |
+| Light / dark switch | `ThemeToggle` / `useColorScheme`; head script from `./scheme` | root, `./scheme` | `<NavLayout themeToggle … />` |
+| A link to a screen | `Link` | root | `<Link module={web.about} />` |
+| A form | `Form`, `TextInput`, `SubmitButton`, `Button`, `ButtonSelector` | root | `<Form decorate validation={schema} onSubmit={save}><TextInput name="email" label /></Form>` |
+| A panel, a heading, an error | `Block`, `Text`, `Status` | root | `<Status error={error} />` |
+| An image upload | `ImageUploader` (react-dropzone options) | root | `<ImageUploader accept={{ 'image/*': [] }} onDrop={files => upload(files[0])} previewUrl={url} />` |
+| "Connection lost" prompt | `SocketReloadDialog` (mounted by `PanelApp`) | root | `cfg.socket = { reloadDialog: true }` |
+| The sign-in screen | `LoginScreen` / `LocalizedLoginScreen` / `appendLoginScreen` | root | `appendLoginScreen(context, { Logo })` |
+| Cookie consent | `PanelCookieConsent`, `PanelConsentMenuWidget` | `./consent` | `<PanelCookieConsent />` as a `PanelApp` child |
+| A person picks an icon AND a colour (a type's, a flow's, a label's mark) | `IconColorPicker` | `./picker` | `<IconColorPicker label="Mark" value={{ icon, color }} onChange={next => …} translate={usePickerTranslate()} />` |
+| A person picks a colour only | `ColorPicker` | `./picker` | `<ColorPicker label="Colour" value={color} onChange={setColor} />` |
+| A person picks an icon only | `IconPicker` | `./picker` | `<IconPicker label="Icon" value={icon} onChange={setIcon} color={color} />` |
+| The same, inline in a dialog the app already owns | `ColorSwatches`, `IconGrid` | `./picker` | `<IconGrid value={icon} onChange={setIcon} color={color} />` |
+| Show a chosen mark or colour (list, chip, header) | `IconTile`, `ColorDot` | `./picker` | `<IconTile icon={type.icon} color={type.tone} size="sm" />` |
+| Palette, icon names, colour maths — no React | `PICKER_*`, `pickerColorHelper`, `pickerIconHelper` | `./picker/vocabulary` (`pickerIconHelper`, `PICKER_ICONS`: `./picker`) | `pickerColorHelper.styleOf(color)` |
+| The current breakpoint | `useBreakPoint` / `useMapBreakpoint` | root | `useMapBreakpoint({ xs: 1, md: 2 }, 3)` |
+
+**Common mistakes:**
+
+- **Importing the package's private primitives.** `src/@/components/ui/*` (button, sheet, popover …)
+  and its `cn` are not exports; an app keeps its own shadcn components and never imports
+  `@owlmeans/web-panel/build/@/…` or expects `@/components/ui` to resolve to this package's copy.
+- **A missing `@source`.** The app's Tailwind entry must scan this package's `src`
+  (`@source "../../../node_modules/@owlmeans/web-panel/src";`) or every class used only here — the
+  shell, the footer, the picker — silently never reaches the stylesheet.
+- **Two `Toaster`s.** Mount it once, in the layout: two render every toast twice.
+- **`Form decorate` plus an own submit button.** `decorate` already renders the `Card`, the root
+  error and a `SubmitButton` whenever `onSubmit` is given; without `decorate` there is no submit
+  button at all and the caller renders one.
+- **A `Select`, radio group or hand-made swatch row for a colour or an icon a person chooses, or
+  `` `text-${color}-600` `` / `` `text-tone-${…}` `` built from a stored value.** A person-chosen colour
+  or icon is always edited with the `./picker` parts and rendered with `IconTile` / `ColorDot` (or
+  `pickerColorHelper.styleOf`); code-chosen tones (a status's meaning) stay the app's own classes.
+- **`usePickerTranslate()` outside `PanelApp` / `render()`.** It needs the i18n instance and throws
+  without one; the picker parts themselves never read i18n (pass `translate`, or get English).
 
 ## Key Exports
 
@@ -47,6 +94,15 @@ user-invocable: false
 - `./scheme` — the React-free colour-scheme half: `COLOR_SCHEME_KEY`, `COLOR_SCHEME_EVENT`,
   `ColorSchemeChoice`, `colorSchemeHelper` (`readColorScheme`, `applyColorScheme`, `colorSchemeBootstrapScript`) — safe
   to import from a Node build script
+- `./picker` — the standard icon + colour picker and its parts (`IconColorPicker`, `ColorPicker`,
+  `IconPicker`, `ColorSwatches`, `IconGrid`, `IconTile`, `ColorDot`, `usePickerTranslate`), the icon
+  components (`PICKER_ICONS`, `pickerIconHelper`) and everything of `./picker/vocabulary` — see
+  *Subpath: `./picker`* below. Not re-exported by the root, so only a bundle importing it carries
+  the icon catalogue
+- `./picker/vocabulary` — the React-free half: the 24-colour palette (`PICKER_COLORS`,
+  `PICKER_COLOR_KEYS`), the icon catalogue's names, categories and search words
+  (`PICKER_ICON_ENTRIES`, `PICKER_ICON_NAMES`, `PICKER_ICON_CATEGORIES`), the fallbacks and
+  `pickerColorHelper` — safe on a server, in a seed or a Node build script
 
 ## Usage
 
@@ -582,6 +638,148 @@ unregistered state resource threw inside render ("Resource consent-widget-presen
 blanked the whole application. Pinned by `tests/consent.spec.ts` (`?consent=bare` / `?consent=menu`;
 the configuration by `?consentCfg=window|bar`, `?modeProp=` and `?consentGeo=<CC>|fail`).
 
+## Subpath: `./picker`
+
+The standard editor and renderer of an icon and a colour **a person chooses** — a workcard type's
+or a status flow's mark, a label, a category. One component family, so every application offers
+the same 24 colours, the same curated icons and the same behaviour on a desktop and a phone.
+
+```ts
+import {
+  IconColorPicker, ColorPicker, IconPicker, ColorSwatches, IconGrid, IconTile, ColorDot, usePickerTranslate,
+  pickerColorHelper, pickerIconHelper, PICKER_COLORS, PICKER_COLOR_KEYS,
+} from '@owlmeans/web-panel/picker'
+// Server, seed, build script — the data and the colour helper without React or icons:
+// import { pickerColorHelper, PICKER_COLOR_KEYS } from '@owlmeans/web-panel/picker/vocabulary'
+```
+
+### Which part
+
+| Part | When |
+|---|---|
+| `IconColorPicker` | Both halves of a mark. One trigger (the tile, "Rocket · Indigo", a chevron — or `trigger="tile"` for the tile alone) opens swatches above a searchable, categorized icon grid tinted in the chosen colour. Stays open for the other half; Esc, a click outside or (sheet) Done closes it |
+| `ColorPicker` | A colour alone (`trigger="button"` or `"dot"`). Closes on a swatch. `colors` takes an application palette — e.g. status tones |
+| `IconPicker` | An icon alone, tinted in `color`. Closes on a pick |
+| `ColorSwatches`, `IconGrid` | Inline, for a dialog or sheet the application already owns — no trigger, no surface of their own |
+| `IconTile` | A stored mark shown: the icon in the colour's ink on its ground (`variant="tile"`), or the ink alone (`"plain"`); `size` `xs`/`sm`/`md`/`lg`; `label` makes it an image, else decorative |
+| `ColorDot` | A stored colour as a dot in its ink (`size` `xs`/`sm`/`md`) |
+| `usePickerTranslate()` | The `translate` for an app rendered by `PanelApp` / `render()` — the packaged bundle in the current language |
+
+### Values
+
+- **Colour**: a palette key — `red orange amber yellow lime green emerald teal cyan sky blue indigo
+  violet purple fuchsia pink rose maroon brown olive navy slate stone graphite` (`PICKER_COLOR_KEYS`,
+  hue order) — or, only with `customColors`, a lowercase `#rrggbb`. Never a label ("Indigo").
+- **Icon**: a kebab-case lucide name from the catalogue (`PICKER_ICON_NAMES`, ~250 in ten categories,
+  a superset of the planning kits' icons). Never a component, never a label.
+- `IconColorPicker` emits `onChange({ icon, color })` — both halves as they now stand; a half
+  never chosen stays `undefined`, never `null`. `value` tolerates `null`s and absent halves.
+- An unknown stored value renders the fallback (`slate`, `circle`) and never throws, so a value
+  from an older palette or a typo never breaks a page.
+- `customColors` (default `false`) adds a colour wheel (react-colorful) and a hex field: a full
+  `#rrggbb` commits while typing, `#rgb` / `abc` on Enter or blur, always normalized to lowercase six
+  digits; anything else marks the field `aria-invalid` and changes nothing. A custom colour's ink
+  and grounds are derived to keep 4.5:1 in both modes.
+
+### Surfaces
+
+`surface="auto"` (default) opens a popover from 768px up and a bottom sheet below — decided when
+it OPENS, kept until it closes. `surface="popover" | "sheet"` forces one. The popover is modal, so
+inside an application's own Dialog or Sheet the wheel scrolls it and focus stays in it; it keeps
+12px off the edges and scrolls inside rather than growing past the viewport. The sheet has a grab
+handle, a sticky header with the preview and a 44px Done button, `88dvh` at most and safe-area
+padding. Below 768px and on coarse pointers every cell, chip, field and button is at least 44px;
+the search field takes focus on open only for a fine pointer (no keyboard pops up on a phone).
+Keyboard: arrows move in two dimensions through swatches and icons (one tab stop each), Home/End,
+ArrowDown from the search into the grid and ArrowUp back, Enter/Space picks, Esc closes and focus
+returns to the trigger. Every control is a `<button type="button">` with an `aria-label`, so a
+pick never submits an enclosing form.
+
+### Strings
+
+The parts never read i18n implicitly — rendered without an i18n instance they show English. Pass
+`translate={usePickerTranslate()}` in an app rendered by `PanelApp` / `render()`: chrome, colour
+names and category names come from the lib-tier `picker` bundle in eight languages (en, pl, ru, be,
+uk, es, de, fr); icon names stay English. An app overrides a string at the App tier in the `lib`
+namespace (`i18nHelper.addI18nApp('de', 'picker', { colors: { teal: 'Türkis' } }, { ns: LIB_NAMESPACE })`).
+Keys: `label`, `icon`, `color`, `placeholder.{both,icon,color}`, `nothing`, `done`, `search`,
+`searchPlaceholder`, `categoriesLabel`, `all`, `results` (`{count}`), `empty` (`{query}`), `clear`,
+`custom`, `hex`, `invalidHex`, `colors.<key>`, `categories.<category>`. `label` and `placeholder`
+props override per instance. Only the 24 palette names translate: an application palette passed as
+`colors` shows its `label`s as given, so translate them before passing them in.
+
+### RIGHT and WRONG
+
+```tsx
+import type { IconColorChange } from '@owlmeans/web-panel/picker'
+
+// RIGHT — local state
+const translate = usePickerTranslate()
+const [mark, setMark] = useState<IconColorChange>({ icon: type.icon, color: type.tone })
+<IconColorPicker label="Mark" value={mark} onChange={setMark} translate={translate} />
+
+// RIGHT — react-hook-form: the field holds { icon, color }; the picker is the whole control
+<Controller
+  name="mark" control={form.control}
+  render={({ field }) => <IconColorPicker
+    id="mark" label="Mark" value={field.value} onChange={field.onChange} disabled={field.disabled} translate={translate}
+  />}
+/>
+// …and on save: { tone: values.mark.color, icon: values.mark.icon }
+
+// WRONG — a Select of colour names, a hand-made swatch row, or a label stored instead of the key
+<Select value={tone} onValueChange={setTone}>{PICKER_COLOR_KEYS.map(k => <SelectItem value={k}>{k}</SelectItem>)}</Select>
+{['red', 'blue'].map(c => <button className={`bg-${c}-500`} onClick={() => setTone(c)} />)}
+onChange={next => save({ tone: 'Indigo' })}
+// WRONG — the picker hands over a value, not an event
+<ColorPicker value={field.value} onChange={event => field.onChange(event.target.value)} />
+```
+
+### Rendering a stored mark
+
+```tsx
+<IconTile icon={type.icon} color={type.tone} size="sm" />                 // list row, chip, header
+<IconTile icon={flow.icon} color={flow.tone} variant="plain" />           // the ink alone, inline with text
+<ColorDot color={label.color} />                                          // a dot
+<span style={pickerColorHelper.styleOf(card.color)} className="text-(--pick-ink)">…</span>   // custom markup
+```
+
+`pickerColorHelper.styleOf(value, colors?)` returns the custom properties `--pick-swatch`,
+`--pick-ink`, `--pick-soft`, `--pick-ink-dark`, `--pick-soft-dark` (a plain string record — it goes
+straight into `style`). The parts switch to the dark values themselves, through explicit
+arbitrary variants on web-panel's scheme contract (`.dark` on `<html>`, or the system's dark
+unless `.light`) — never through the app's `dark:` variant. A hand-written element using
+`styleOf` reads `--pick-ink` / `--pick-ink-dark` itself. `pickerColorHelper.resolve(value)` gives
+every field (and `custom: true` for a hex); `hashKey(seed)` gives a stable palette key for a record
+that has none. Code-chosen tones (a status's meaning) stay the app's own classes; a colour a PERSON
+chose always renders through these parts.
+
+**DOM hooks** (stable, used by end-to-end suites): the trigger `data-picker-trigger`, the open
+surface `data-picker-surface="popover|sheet"`, a swatch `data-picker-color="<key>"` (the custom
+row `"custom"`, `data-selected` while a custom value is chosen), an icon cell
+`data-picker-icon="<name>"`, a chip `data-picker-category`, the search field `data-picker-search`,
+the hex field `data-picker-hex`, the sheet's Done `data-picker-done`; `IconTile` carries
+`data-icon-tile`, `data-icon`, `data-color`, `ColorDot` `data-color-dot`. Picker parts never carry
+`data-tone` or `data-slot="button"` — an application's own rules on those never reach them.
+
+### Consumer setup
+
+- `@radix-ui/react-popover` is a peer, like the other Radix primitives: keep it on the SAME Radix
+  generation as `@radix-ui/react-dialog` (update them together). The two share the dismissable-layer
+  and focus-scope stacks; a popover from another generation inside a Dialog is treated as an outside
+  click and loses focus to the dialog. `react-colorful` is a dependency of this package.
+- The `@source` line for this package's `src` (see *Consumer setup* below) is what brings the
+  picker's classes — including its `[.dark_&]:` and `pointer-coarse:` variants — into the stylesheet.
+- Tokens read: `--popover`, `--popover-foreground`, `--border`, `--input`, `--ring`, `--accent`,
+  `--accent-foreground`, `--primary`, `--primary-foreground`, `--muted-foreground`, `--foreground`,
+  `--destructive`.
+
+Pinned by `tests/picker.spec.ts` (harness `/picker`: `?custom=1`, `?inSheet=1`, `?bare=1`,
+`?surface=…`, `?compact=1`, `?empty=1`, `?inline=1`, `?dark=1`) and
+`tests/picker-vocabulary.spec.ts` (palette contrast and OKLab distance, hex handling, catalogue ↔
+components). `PICKER_SHOTS_DIR=<dir> bun test tests/picker-shots.spec.ts` writes every scenario's
+screenshot at 1280 and 375, light and dark.
+
 ## Consumer setup — package boundary and Tailwind
 
 `web-panel` ships its shadcn primitives and `cn` helper as private implementation files under its
@@ -591,8 +789,9 @@ fresh installation depend on unrelated files. `cn` is not exported: a consumer k
 class-name helper and never vendors or imports this package's UI primitives.
 
 Consumers still supply the package's peer dependencies: the Radix primitives (`alert-dialog`,
-`dialog`, `label`, `navigation-menu`, `progress`, `separator`, `slot`) plus React, Tailwind and the
-usual utility libraries. A consumer may have its own shadcn `@` alias, but it is unrelated to this package.
+`dialog`, `label`, `navigation-menu`, `popover`, `progress`, `separator`, `slot` — `dialog` and
+`popover` on the same Radix generation) plus React, Tailwind and the usual utility libraries. A
+consumer may have its own shadcn `@` alias, but it is unrelated to this package.
 
 Then point Tailwind at the installed package's **`src`** directory. Its oxide scanner reads the CSS root
 plus `@source` directives only, and excludes `node_modules` — so classes that exist **only** inside
@@ -612,10 +811,11 @@ in a linked workspace, so it is the reliable scan target in both modes.
 
 - `@owlmeans/web-client`, `@owlmeans/client-panel`, `@owlmeans/client-i18n`, `@owlmeans/web-router`
 - `@owlmeans/client-socket` — `appendSocketStatus`, `useSocketStatus`, `useSocketRetry`, behind `SocketReloadDialog`
+- `react-colorful` — the custom-colour wheel of `./picker` (`customColors`); `sonner` — toasts
 - Peers (app-provided): `react`, `react-dom`, `react-hook-form`, `tailwindcss`, `tailwind-merge`,
-  `clsx`, `class-variance-authority`, `lucide-react`, `ajv`, and the `@radix-ui/react-*` primitives
-  (`alert-dialog`, `dialog`, `label`, `navigation-menu`, `progress`, `separator`, `slot`). No MUI,
-  no react-router.
+  `clsx`, `class-variance-authority`, `lucide-react` (`./picker` imports its ~250 catalogue icons
+  statically), `ajv`, and the `@radix-ui/react-*` primitives (`alert-dialog`, `dialog`, `label`,
+  `navigation-menu`, `popover`, `progress`, `separator`, `slot`). No MUI, no react-router.
 - `ajv-formats` is imported at module scope by the form model but is declared in no dependency
   section of the manifest, which lists `ajv` alone. An install that does not otherwise pull it in
   fails at import time, so declare `ajv-formats` next to `ajv` in the consuming application.

package/build/@/components/ui/popover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+//# sourceMappingURL=popover.d.ts.map

package/build/@/components/ui/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/@/components/ui/popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAEpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAevD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,qBAEtD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA"}

package/build/@/components/ui/popover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../lib/utils.js';
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+//# sourceMappingURL=popover.js.map

package/build/@/components/ui/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/@/components/ui/popover.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAE3D,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,OAAO,CAAC,EACf,GAAG,KAAK,EAC2C;IACnD,OAAO,KAAC,gBAAgB,CAAC,IAAI,iBAAW,SAAS,KAAK,KAAK,GAAI,CAAA;AACjE,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EAC8C;IACtD,OAAO,KAAC,gBAAgB,CAAC,OAAO,iBAAW,iBAAiB,KAAK,KAAK,GAAI,CAAA;AAC5E,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,CAAC,EACd,GAAG,KAAK,EAC8C;IACtD,OAAO,CACL,KAAC,gBAAgB,CAAC,MAAM,cACtB,KAAC,gBAAgB,CAAC,OAAO,iBACb,iBAAiB,EAC3B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CACX,geAAge,EAChe,SAAS,CACV,KACG,KAAK,GACT,GACsB,CAC3B,CAAA;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EAC6C;IACrD,OAAO,KAAC,gBAAgB,CAAC,MAAM,iBAAW,gBAAgB,KAAK,KAAK,GAAI,CAAA;AAC1E,CAAC;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,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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"}