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

package/src/components/nav/types.ts

@@ -1,5 +1,6 @@
 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 {
@@ -7,9 +8,10 @@ interface NavCommonProps extends StyledProps {
   /** See {@link NavTranslate} — omitted, literal labels and humanized aliases are used. */
   translate?: NavTranslate
   ariaLabel?: string
+  testId?: string
 }
 
-export interface TopNavProps extends NavCommonProps { }
+export interface TopNavProps extends NavCommonProps {}
 
 export interface SideNavProps extends NavCommonProps {
   /**
@@ -19,8 +21,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
@@ -28,7 +39,59 @@ 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
 }

package/src/components/nav/viewport.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+/** The same md boundary as the shell's Tailwind layout, including resize after mount. */
+export const useWideNav = (): boolean => {
+  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
+}

package/src/components/panel-app/component.tsx

@@ -3,13 +3,21 @@ import type { PanelAppProps } from './types.js'
 
 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: FC<PanelAppProps> = ({ context, provide, children, rootClassName }) => {
   return <div className={cn('min-h-screen bg-background text-foreground', rootClassName)}>
     <I18nContext config={context.cfg}>
       <App context={context} provide={provide}>
         {children}
+        {/*
+          A sibling of the Router, exactly like `PanelCookieConsent` — a dialog mounted inside a
+          route is torn down on every navigation, which for a modal means it closes itself the
+          first time anything moves. Opt-in per app via `cfg.socket.reloadDialog`; the component
+          itself stays inert (renders nothing) whenever the flag is off or nothing is `'lost'`.
+        */}
+        {context.cfg.socket?.reloadDialog === true && <SocketReloadDialog />}
       </App>
     </I18nContext>
   </div>

package/src/components/picker/color-picker.tsx

@@ -0,0 +1,15 @@
+import type { FC } from 'react'
+import type { ColorPickerProps } from './types.js'
+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: FC<ColorPickerProps> = (
+  { value, onChange, trigger = 'button', customColors = false, ...base }
+) => <PickerRoot
+  {...base} mode="color" trigger={trigger} customColors={customColors} closeOnPick color={value}
+  onColor={onChange} onIcon={() => undefined}
+/>

package/src/components/picker/consts.local.ts

@@ -0,0 +1,267 @@
+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 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: Record<PickerTileSize, string> = {
+  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: Record<PickerTileSize, string> = {
+  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: Record<PickerDotSize, string> = {
+  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: Record<'popover' | 'sheet', string> = {
+  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: Record<'popover' | 'sheet', string> = {
+  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: Record<'popover' | 'sheet', string> = {
+  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: Record<PickerLayout, string> = {
+  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: CSSProperties = { 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: Record<PickerLayout, string> = {
+  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: Record<PickerLayout, string> = {
+  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: Record<PickerLayout, string> = {
+  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: Record<PickerLayout, string> = {
+  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(' ')

package/src/components/picker/dot.tsx

@@ -0,0 +1,21 @@
+import type { FC } from 'react'
+import { cn } from '../../@/lib/utils.js'
+import { pickerColorHelper } from '../../picker/vocabulary.js'
+import type { ColorDotProps } from './types.js'
+import { DOT, DOT_SIZE, PICK_SCOPE } from './consts.local.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 const ColorDot: FC<ColorDotProps> = ({ color, colors, size = 'sm', label, className }) =>
+  <span
+    data-color-dot
+    data-color={pickerColorHelper.resolve(color, colors)?.key}
+    role={label != null ? 'img' : undefined}
+    aria-label={label}
+    aria-hidden={label != null ? undefined : true}
+    title={label}
+    style={pickerColorHelper.styleOf(color, colors)}
+    className={cn(PICK_SCOPE, DOT, DOT_SIZE[size], className)}
+  />

package/src/components/picker/grid.tsx

@@ -0,0 +1,138 @@
+import { useMemo, useRef, useState } from 'react'
+import type { FC, KeyboardEvent } from 'react'
+import { SearchIcon, SearchXIcon } from 'lucide-react'
+import { cn } from '../../@/lib/utils.js'
+import { pickerIconHelper } from '../../picker/icons.js'
+import { pickerColorHelper } from '../../picker/vocabulary.js'
+import { PICKER_COLORS, PICKER_ICON_CATEGORIES } from '../../picker/vocabulary/consts.js'
+import type { PickerIconCategory } from '../../picker/vocabulary/types.js'
+import type { IconGridProps } from './types.js'
+import type { IconBrowserProps } from './types.local.js'
+import { useRovingGrid } from './roving.js'
+import { makePickerText } from './text.js'
+import {
+  CHIP, CHIPS, EMPTY, FIELD, ICON_CELL, ICON_TOOLS, ICONS, LINK_BUTTON, PICK_SCOPE, SEARCH, SEARCH_ICON, SEARCH_WRAP,
+} from './consts.local.js'
+
+/**
+ * The searchable icon grid every picker shares: a search field, category chips and the icons,
+ * tinted in the chosen colour. The search field and the chips stay put while the grid scrolls;
+ * ArrowDown (or Enter) moves from the field into the grid, ArrowUp from the grid's first row back.
+ * An empty result says so and offers to clear; the result count is announced politely.
+ */
+export const IconBrowser: FC<IconBrowserProps> = (
+  { value, onChange, color, colors, icons, text, layout, label, searchRef, className }
+) => {
+  const [query, setQuery] = useState('')
+  const [category, setCategory] = useState<PickerIconCategory | null>(null)
+  const search = useRef<HTMLInputElement | null>(null)
+
+  const categories = useMemo(() => {
+    const scope = pickerIconHelper.search('', icons)
+
+    return PICKER_ICON_CATEGORIES.filter(candidate => scope.some(entry => entry.category === candidate))
+  }, [icons])
+  const results = useMemo(
+    () => pickerIconHelper.search(query, icons).filter(entry => category == null || entry.category === category),
+    [query, icons, category]
+  )
+
+  const grid = useRovingGrid({
+    count: results.length,
+    selected: results.findIndex(entry => entry.name === value),
+    onExitUp: () => search.current?.focus(),
+  })
+  const chips = useRovingGrid({
+    count: categories.length + 1,
+    selected: category == null ? 0 : categories.indexOf(category) + 1,
+    grid: false,
+  })
+
+  const bindSearch = (node: HTMLInputElement | null): void => {
+    search.current = node
+    if (typeof searchRef === 'function') {
+      searchRef(node)
+    } else if (searchRef != null) {
+      searchRef.current = node
+    }
+  }
+
+  const onSearchKey = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'ArrowDown' || event.key === 'Enter') {
+      // Enter must never submit the form the grid sits in.
+      event.preventDefault()
+      grid.focusCurrent()
+    }
+  }
+
+  const filtered = query.trim() !== '' || category != null
+
+  return <div
+    data-picker-icons style={pickerColorHelper.styleOf(color, colors)} className={cn(PICK_SCOPE, className)}
+  >
+    <div className={ICON_TOOLS[layout]}>
+      <div className={SEARCH_WRAP}>
+        <SearchIcon aria-hidden="true" className={SEARCH_ICON} />
+        <input
+          ref={bindSearch} type="search" data-picker-search autoComplete="off" spellCheck={false} enterKeyHint="search"
+          aria-label={text.text('search', 'Search icons')} placeholder={text.text('searchPlaceholder', 'Search icons…')}
+          value={query} onChange={event => setQuery(event.target.value)} onKeyDown={onSearchKey}
+          className={cn(FIELD, SEARCH)}
+        />
+      </div>
+      {categories.length > 1 && <div
+        ref={chips.ref} role="group" aria-label={text.text('categoriesLabel', 'Categories')} onKeyDown={chips.onKeyDown}
+        className={CHIPS[layout]}
+      >
+        {[null, ...categories].map((candidate, index) => {
+          const name = candidate == null ? text.text('all', 'All') : text.category(candidate)
+
+          return <button
+            key={candidate ?? 'all'} type="button" data-roving-item data-picker-category={candidate ?? 'all'}
+            aria-label={name} aria-pressed={category === candidate} tabIndex={chips.tabIndexOf(index)}
+            onFocus={() => chips.setCurrent(index)} onClick={() => setCategory(candidate)} className={CHIP}
+          >{name}</button>
+        })}
+      </div>}
+    </div>
+    <p className="sr-only" aria-live="polite">{filtered ? text.count(results.length) : ''}</p>
+    {results.length > 0
+      ? <div ref={grid.ref} role="group" aria-label={label} onKeyDown={grid.onKeyDown} className={ICONS[layout]}>
+        {results.map((entry, index) => {
+          const Icon = pickerIconHelper.iconOf(entry.name)
+          const name = text.icon(entry.name)
+
+          return <button
+            key={entry.name} type="button" data-roving-item data-picker-icon={entry.name}
+            aria-label={name} aria-pressed={entry.name === value} title={name}
+            tabIndex={grid.tabIndexOf(index)} onFocus={() => grid.setCurrent(index)}
+            onClick={() => onChange(entry.name)} className={ICON_CELL}
+          ><Icon aria-hidden="true" /></button>
+        })}
+      </div>
+      : <div data-picker-empty className={EMPTY}>
+        <SearchXIcon aria-hidden="true" className="size-6" />
+        <p>{text.empty(query.trim())}</p>
+        <button
+          type="button" aria-label={text.text('clear', 'Clear search')} className={LINK_BUTTON}
+          onClick={() => { setQuery(''); setCategory(null); search.current?.focus() }}
+        >{text.text('clear', 'Clear search')}</button>
+      </div>}
+  </div>
+}
+
+/**
+ * The searchable icon grid inline — for a dialog or sheet the application already owns. Commits
+ * on click; `color` tints it, `icons` narrows (and orders) the catalogue. Strings through
+ * `translate` (English without it — never an implicit i18n read).
+ */
+export const IconGrid: FC<IconGridProps> = (
+  { value, onChange, color, colors = PICKER_COLORS, icons, translate, label, className }
+) => {
+  const text = useMemo(() => makePickerText(translate), [translate])
+
+  return <IconBrowser
+    value={value} onChange={onChange} color={color} colors={colors} icons={icons} text={text} layout="inline"
+    label={label ?? text.text('icon', 'Icon')} className={className}
+  />
+}

package/src/components/picker/i18n/be.json

@@ -0,0 +1,60 @@
+{
+  "label": "Значок і колер",
+  "icon": "Значок",
+  "color": "Колер",
+  "placeholder": {
+    "both": "Выберыце значок і колер",
+    "icon": "Выберыце значок",
+    "color": "Выберыце колер"
+  },
+  "nothing": "Нічога не выбрана",
+  "done": "Гатова",
+  "search": "Пошук значкоў",
+  "searchPlaceholder": "Пошук значкоў…",
+  "categoriesLabel": "Катэгорыі",
+  "all": "Усе",
+  "results": "Знойдзена значкоў: {count}",
+  "empty": "Няма значкоў па запыце «{query}»",
+  "clear": "Ачысціць пошук",
+  "custom": "Свой колер",
+  "hex": "Колер у фармаце HEX",
+  "invalidHex": "Увядзіце колер, напрыклад #3b82f6",
+  "colors": {
+    "red": "Чырвоны",
+    "orange": "Аранжавы",
+    "amber": "Бурштынавы",
+    "yellow": "Жоўты",
+    "lime": "Лаймавы",
+    "green": "Зялёны",
+    "emerald": "Смарагдавы",
+    "teal": "Бірузовы",
+    "cyan": "Цыян",
+    "sky": "Нябесны",
+    "blue": "Сіні",
+    "indigo": "Індыга",
+    "violet": "Фіялетавы",
+    "purple": "Пурпурны",
+    "fuchsia": "Фуксія",
+    "pink": "Ружовы",
+    "rose": "Малінавы",
+    "maroon": "Бардовы",
+    "brown": "Карычневы",
+    "olive": "Аліўкавы",
+    "navy": "Цёмна-сіні",
+    "slate": "Сланцавы",
+    "stone": "Каменны",
+    "graphite": "Графітавы"
+  },
+  "categories": {
+    "work": "Праца",
+    "people": "Людзі",
+    "communication": "Зносіны",
+    "commerce": "Гандаль",
+    "operations": "Аперацыі",
+    "places": "Месцы",
+    "tech": "Тэхналогіі",
+    "status": "Статусы",
+    "objects": "Прадметы",
+    "nature": "Прырода"
+  }
+}