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

package/src/components/picker/types.ts

@@ -0,0 +1,125 @@
+import type { CSSProperties } from 'react'
+import type { PickerColor } from '../../picker/vocabulary/types.js'
+
+/**
+ * Resolves a picker string: the key (`done`, `colors.indigo`, `categories.work` …) and the English
+ * text to show without a translation. `usePickerTranslate()` gives one reading the packaged
+ * eight-language bundle; without one the parts render English.
+ */
+export interface PickerTranslate { (key: string, fallback: string): string }
+
+/** Where a picker opens: `auto` — a popover from 768px up, a bottom sheet below (decided when it opens). */
+export type PickerSurfaceChoice = 'auto' | 'popover' | 'sheet'
+
+/** What the three pickers share. */
+export interface PickerBaseProps {
+  /** The trigger's accessible name and the surface's title. */
+  label?: string
+  /** The trigger's text while nothing is chosen. */
+  placeholder?: string
+  disabled?: boolean
+  surface?: PickerSurfaceChoice
+  /** Strings; English without it. Never an implicit i18n read — the parts render without a provider. */
+  translate?: PickerTranslate
+  /** Merged over the trigger's classes. */
+  className?: string
+  /** Lands on the trigger button, so a `<label htmlFor>` names it. */
+  id?: string
+}
+
+/** A stored mark: a palette key or `#rrggbb`, and a kebab-case lucide name. Either may be missing. */
+export interface IconColorValue {
+  icon?: string | null
+  color?: string | null
+}
+
+/** What `IconColorPicker` emits: both halves as they now stand; an unset half stays `undefined`, never `null`. */
+export interface IconColorChange {
+  icon?: string
+  color?: string
+}
+
+export interface IconColorPickerProps extends PickerBaseProps {
+  value?: IconColorValue | null
+  onChange: (next: IconColorChange) => void
+  /** The palette offered; default the 24 colours. */
+  colors?: readonly PickerColor[]
+  /** Narrows the icon catalogue (and orders it). */
+  icons?: readonly string[]
+  /** Adds the full colour wheel and a hex field; the value is then a palette key or `#rrggbb`. */
+  customColors?: boolean
+  /** `button` (default) — tile, names and a chevron; `tile` — the tile alone. */
+  trigger?: 'button' | 'tile'
+}
+
+export interface IconPickerProps extends PickerBaseProps {
+  value?: string | null
+  onChange: (icon: string) => void
+  /** The colour the icons are tinted in. */
+  color?: string | null
+  colors?: readonly PickerColor[]
+  icons?: readonly string[]
+  trigger?: 'button' | 'tile'
+}
+
+export interface ColorPickerProps extends PickerBaseProps {
+  value?: string | null
+  onChange: (color: string) => void
+  colors?: readonly PickerColor[]
+  customColors?: boolean
+  /** `button` (default) — dot, name and a chevron; `dot` — the dot alone. */
+  trigger?: 'button' | 'dot'
+}
+
+/** The swatch grid on its own, for a dialog or sheet the application already owns. */
+export interface ColorSwatchesProps {
+  value?: string | null
+  onChange: (color: string) => void
+  colors?: readonly PickerColor[]
+  customColors?: boolean
+  translate?: PickerTranslate
+  /** The group's accessible name; default "Colour". */
+  label?: string
+  className?: string
+}
+
+/** The searchable icon grid on its own, for a dialog or sheet the application already owns. */
+export interface IconGridProps {
+  value?: string | null
+  onChange: (icon: string) => void
+  /** The colour the icons are tinted in. */
+  color?: string | null
+  colors?: readonly PickerColor[]
+  icons?: readonly string[]
+  translate?: PickerTranslate
+  /** The grid's accessible name; default "Icon". */
+  label?: string
+  className?: string
+}
+
+export type PickerTileSize = 'xs' | 'sm' | 'md' | 'lg'
+
+/** A stored mark rendered: the icon in the colour's ink on its ground (`tile`), or the ink alone (`plain`). */
+export interface IconTileProps {
+  icon?: string | null
+  color?: string | null
+  colors?: readonly PickerColor[]
+  size?: PickerTileSize
+  variant?: 'tile' | 'plain'
+  /** Present — an image with this name; absent — decorative (`aria-hidden`). */
+  label?: string
+  className?: string
+  style?: CSSProperties
+}
+
+export type PickerDotSize = 'xs' | 'sm' | 'md'
+
+/** A stored colour rendered as a dot in its ink. */
+export interface ColorDotProps {
+  color?: string | null
+  colors?: readonly PickerColor[]
+  size?: PickerDotSize
+  /** Present — an image with this name; absent — decorative (`aria-hidden`). */
+  label?: string
+  className?: string
+}

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

@@ -0,0 +1,13 @@
+export const DARK_QUERY = '(prefers-color-scheme: dark)'
+
+/**
+ * A 44px round target in the page's own tokens — muted at rest, the foreground on hover — with
+ * the 3px ring every interactive element shows on keyboard focus. No fill, border, gradient or
+ * shadow: it sits in a footer's bottom row beside the credit and must read as part of it.
+ */
+export const TOGGLE = [
+  'inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full',
+  'bg-transparent text-muted-foreground transition-colors hover:text-foreground',
+  'outline-none focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-offset-2',
+  'focus-visible:ring-offset-background',
+].join(' ')

package/src/components/scheme/hook.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react'
+import { colorSchemeHelper } from '../../scheme/scheme.js'
+import { COLOR_SCHEME_EVENT, COLOR_SCHEME_KEY } from '../../scheme/consts.js'
+import type { ColorSchemeChoice } from '../../scheme/types.js'
+import type { ColorSchemeModel } from './types.js'
+import { DARK_QUERY } from './consts.local.js'
+
+const systemDark = (): boolean =>
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    && window.matchMedia(DARK_QUERY).matches
+
+/**
+ * The page's colour scheme, and the way to choose one.
+ *
+ * Both halves are read synchronously on the first render — the stored choice from storage, the
+ * system preference from `matchMedia` — so a toggle never renders the wrong icon for a frame.
+ * Afterwards it follows three sources: `applyColorScheme` anywhere in this document (its event),
+ * another tab changing the stored key (`storage`), and the operating system switching while no
+ * choice is stored.
+ *
+ * Mounting also re-applies a stored choice's class. The head bootstrap has normally done that
+ * before the first paint; an application without it still ends up on the right scheme, one frame
+ * late rather than never.
+ */
+export const useColorScheme = (): ColorSchemeModel => {
+  const [choice, setState] = useState<ColorSchemeChoice | null>(colorSchemeHelper.readColorScheme)
+  const [dark, setDark] = useState<boolean>(systemDark)
+
+  useEffect(() => {
+    const stored = colorSchemeHelper.readColorScheme()
+    if (stored != null) {
+      colorSchemeHelper.setColorSchemeClass(stored)
+    }
+    setState(stored)
+
+    const onChoice = () => setState(colorSchemeHelper.readColorScheme())
+    const onStorage = (event: StorageEvent) => {
+      if (event.key === COLOR_SCHEME_KEY || event.key == null) {
+        const next = colorSchemeHelper.readColorScheme()
+        colorSchemeHelper.setColorSchemeClass(next)
+        setState(next)
+      }
+    }
+    window.addEventListener(COLOR_SCHEME_EVENT, onChoice)
+    window.addEventListener('storage', onStorage)
+
+    const media = typeof window.matchMedia === 'function' ? window.matchMedia(DARK_QUERY) : null
+    const onSystem = () => setDark(media?.matches === true)
+    media?.addEventListener('change', onSystem)
+    onSystem()
+
+    return () => {
+      window.removeEventListener(COLOR_SCHEME_EVENT, onChoice)
+      window.removeEventListener('storage', onStorage)
+      media?.removeEventListener('change', onSystem)
+    }
+  }, [])
+
+  const setChoice = useCallback((next: ColorSchemeChoice | null) => colorSchemeHelper.applyColorScheme(next), [])
+
+  return { scheme: choice ?? (dark ? 'dark' : 'light'), choice, setChoice }
+}

package/src/components/scheme/index.ts

@@ -0,0 +1,4 @@
+export type * from './types.js'
+
+export * from './hook.js'
+export * from './toggle.js'

package/src/components/scheme/toggle.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { cn } from '../../@/lib/utils.js'
+import { useColorScheme } from './hook.js'
+import type { ThemeToggleProps } from './types.js'
+import { TOGGLE } from './consts.local.js'
+
+/**
+ * The light/dark switcher.
+ *
+ * It flips the RESOLVED scheme, not the stored choice: on a system that prefers dark and with no
+ * choice stored, the page is dark, so the first press means "light" — a toggle keyed on the
+ * choice alone would answer that press with "dark", which changes nothing the visitor can see.
+ * The icon is the scheme the page is in (a sun while light, a moon while dark), chosen in script
+ * from the same state rather than by a `dark:` variant, so it is right whatever the app's CSS
+ * calls dark. The accessible name says what pressing does, from `labels` or the English default.
+ */
+export const ThemeToggle: FC<ThemeToggleProps> = ({ labels, className, style }) => {
+  const { scheme, setChoice } = useColorScheme()
+  const dark = scheme === 'dark'
+  const label = dark
+    ? labels?.toLight ?? 'Switch to light mode'
+    : labels?.toDark ?? 'Switch to dark mode'
+
+  return <button
+    type="button" data-theme-toggle data-scheme={scheme} aria-label={label} title={label}
+    onClick={() => setChoice(dark ? 'light' : 'dark')}
+    className={cn(TOGGLE, className)} style={style}
+  >
+    {dark ? <Moon className="size-5" aria-hidden="true" /> : <Sun className="size-5" aria-hidden="true" />}
+  </button>
+}

package/src/components/scheme/types.ts

@@ -0,0 +1,23 @@
+import type { ColorSchemeChoice } from '../../scheme/types.js'
+import type { StyledProps } from '../types.js'
+
+export interface ColorSchemeModel {
+  /** What the page is showing: the stored choice, or the operating system's preference. */
+  scheme: 'light' | 'dark'
+  /** The visitor's explicit choice, or `null` while the page follows the operating system. */
+  choice: ColorSchemeChoice | null
+  /** Choose — `null` clears the choice and hands the page back to the operating system. */
+  setChoice: (choice: ColorSchemeChoice | null) => void
+}
+
+/** The toggle's accessible names — what pressing it DOES. English defaults when absent. */
+export interface ThemeToggleLabels {
+  /** Shown while the page is dark. Default "Switch to light mode". */
+  toLight?: string
+  /** Shown while the page is light. Default "Switch to dark mode". */
+  toDark?: string
+}
+
+export interface ThemeToggleProps extends StyledProps {
+  labels?: ThemeToggleLabels
+}

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

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Злучэнне страчана",
+    "description": "Не ўдалося аднавіць злучэнне пасля некалькіх спробаў. Паспрабуйце яшчэ раз або перазагрузіце старонку, каб працягнуць.",
+    "action": "Перазагрузіць старонку",
+    "retry": "Паспрабаваць яшчэ раз",
+    "retrying": "Паўторнае падключэнне…"
+  }
+}

package/src/components/socket/i18n/de.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Verbindung verloren",
+    "description": "Die Verbindung konnte nach mehreren Versuchen nicht wiederhergestellt werden. Versuche es erneut oder lade die Seite neu, um fortzufahren.",
+    "action": "Seite neu laden",
+    "retry": "Erneut versuchen",
+    "retrying": "Verbindung wird wiederhergestellt…"
+  }
+}

package/src/components/socket/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Connection lost",
+    "description": "We couldn't restore the connection after several attempts. Try again, or reload the page to continue.",
+    "action": "Reload page",
+    "retry": "Try again",
+    "retrying": "Reconnecting…"
+  }
+}

package/src/components/socket/i18n/es.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Conexión perdida",
+    "description": "No se pudo restablecer la conexión tras varios intentos. Vuelve a intentarlo o recarga la página para continuar.",
+    "action": "Recargar página",
+    "retry": "Reintentar",
+    "retrying": "Reconectando…"
+  }
+}

package/src/components/socket/i18n/fr.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Connexion perdue",
+    "description": "Nous n’avons pas pu rétablir la connexion après plusieurs tentatives. Réessayez ou actualisez la page pour continuer.",
+    "action": "Actualiser la page",
+    "retry": "Réessayer",
+    "retrying": "Reconnexion…"
+  }
+}

package/src/components/socket/i18n/pl.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Utracono połączenie",
+    "description": "Nie udało się przywrócić połączenia mimo kilku prób. Spróbuj ponownie lub odśwież stronę, aby kontynuować.",
+    "action": "Odśwież stronę",
+    "retry": "Spróbuj ponownie",
+    "retrying": "Ponowne łączenie…"
+  }
+}

package/src/components/socket/i18n/ru.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "Соединение потеряно",
+    "description": "Не удалось восстановить соединение после нескольких попыток. Попробуйте снова или перезагрузите страницу, чтобы продолжить.",
+    "action": "Перезагрузить страницу",
+    "retry": "Попробовать снова",
+    "retrying": "Переподключение…"
+  }
+}

package/src/components/socket/i18n/uk.json

@@ -0,0 +1,9 @@
+{
+  "reload": {
+    "title": "З'єднання втрачено",
+    "description": "Не вдалося відновити з'єднання після кількох спроб. Спробуйте ще раз або перезавантажте сторінку, щоб продовжити.",
+    "action": "Перезавантажити сторінку",
+    "retry": "Спробувати ще раз",
+    "retrying": "Перепідключення…"
+  }
+}

package/src/components/socket/i18n.ts

@@ -0,0 +1,19 @@
+import { i18nHelper } from '@owlmeans/i18n'
+
+import en from './i18n/en.json' with { type: 'json' }
+import pl from './i18n/pl.json' with { type: 'json' }
+import ru from './i18n/ru.json' with { type: 'json' }
+import be from './i18n/be.json' with { type: 'json' }
+import uk from './i18n/uk.json' with { type: 'json' }
+import es from './i18n/es.json' with { type: 'json' }
+import de from './i18n/de.json' with { type: 'json' }
+import fr from './i18n/fr.json' with { type: 'json' }
+
+i18nHelper.addI18nLib('en', 'socket', en)
+i18nHelper.addI18nLib('pl', 'socket', pl)
+i18nHelper.addI18nLib('ru', 'socket', ru)
+i18nHelper.addI18nLib('be', 'socket', be)
+i18nHelper.addI18nLib('uk', 'socket', uk)
+i18nHelper.addI18nLib('es', 'socket', es)
+i18nHelper.addI18nLib('de', 'socket', de)
+i18nHelper.addI18nLib('fr', 'socket', fr)

package/src/components/socket/index.ts

@@ -0,0 +1,2 @@
+export * from './reload-dialog.js'
+export * from './i18n.js'

package/src/components/socket/reload-dialog.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+import { useSocketRetry, useSocketStatus } from '@owlmeans/client-socket'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import {
+  AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription,
+  AlertDialogFooter, AlertDialogHeader, AlertDialogTitle
+} from '../../@/components/ui/alert-dialog.js'
+import { Button } from '../../@/components/ui/button.js'
+
+/**
+ * A global, blocking "connection lost" prompt — opt in per app with `cfg.socket.reloadDialog`.
+ *
+ * Mount it once, above the router (`PanelApp` does), exactly like `PanelCookieConsent`: a dialog
+ * mounted inside a route is torn down on every navigation, and this one is meant to survive them
+ * all. It opens the moment `useSocketStatus()` reports `'lost'` — every `ws()`/`useWs()`
+ * connection in the app has exhausted its own retry budget (10 minutes by default).
+ *
+ * Two exits: "Try again" revives every lost connection (`useSocketRetry()`), and the dialog stays
+ * up showing progress until they are back online — or offers both buttons again if they are lost
+ * again. "Reload page" is the fallback that always works. The status service also retries by
+ * itself when the tab or window becomes active, so a socket that died in a background tab is
+ * usually back before anyone has to press anything.
+ *
+ * Non-dismissible on two levels: Radix's `AlertDialogContent` (unlike its plain `Dialog` sibling)
+ * never treats an outside click as a request to close, so there is no `onPointerDownOutside` to
+ * override in the first place — and `open` is passed with no `onOpenChange` at all, so even the
+ * Escape key it does listen for (blocked below anyway) has no handler to call.
+ */
+export const SocketReloadDialog: FC = () => {
+  const status = useSocketStatus()
+  const { retry, retrying } = useSocketRetry()
+  const t = useI18nLib('socket', 'reload')
+  const open = status === 'lost' || (retrying && status === 'reconnecting')
+  // Closing still animates the content out — keep the retry in its busy state until it is gone.
+  const busy = retrying || !open
+
+  return <AlertDialog open={open}>
+    <AlertDialogContent
+      data-socket-reload-dialog
+      onEscapeKeyDown={event => event.preventDefault()}
+    >
+      <AlertDialogHeader>
+        <AlertDialogTitle>{t('title')}</AlertDialogTitle>
+        <AlertDialogDescription>{t('description')}</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <Button variant="outline" data-socket-reload-action onClick={() => window.location.reload()}>
+          {t('action')}
+        </Button>
+        <AlertDialogAction
+          data-socket-retry-action
+          disabled={busy}
+          aria-busy={busy}
+          onClick={retry}
+        >
+          {busy ? t('retrying') : t('retry')}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+}

package/src/components/status.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 import type { StatusProps } from './types.js'
 import { usePanelI18n } from '@owlmeans/client-panel'
 import { ResilientError } from '@owlmeans/error'
-import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Alert, AlertDescription } from '../@/components/ui/alert.js'
 
 const prepareMessage = (msg: string) => msg.replace(/:/g, '.')
 

package/src/components/text.tsx

@@ -1,20 +1,8 @@
 import { usePanelI18n } from '@owlmeans/client-panel'
 import type { FC, JSX } from 'react'
 import type { TextProps, TextVariant } from './types.js'
-import { cn } from '@/lib/utils'
-
-const variantClasses: Record<TextVariant, string> = {
-  h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight',
-  h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
-  h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
-  h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
-  p: 'leading-7',
-  lead: 'text-xl text-muted-foreground',
-  large: 'text-lg font-semibold',
-  small: 'text-sm font-medium leading-none',
-  muted: 'text-sm text-muted-foreground',
-  blockquote: 'mt-6 border-l-2 pl-6 italic',
-}
+import { cn } from '../@/lib/utils.js'
+import { variantClasses } from './consts.local.js'
 
 const variantTag = (variant: TextVariant, nested: boolean): keyof JSX.IntrinsicElements => {
   if (nested) return 'span'

package/src/components/toaster.tsx

@@ -0,0 +1,65 @@
+import { type CSSProperties, type FC, useEffect, useState } from 'react'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+import { cn } from '../@/lib/utils.js'
+import { DARK_CLASS } from './consts.local.js'
+
+/**
+ * Follow whatever puts `.dark` on the document element.
+ *
+ * The panel's Tailwind theme switches on that class (`@custom-variant dark (&:is(.dark *))`),
+ * and every OwlMeans app drives it from something different — `next-themes` with
+ * `attribute="class"`, the owl theme provider, or nothing at all. Reading the class rather than a
+ * provider's hook means this component follows all three and depends on none of them: a package
+ * that imported `next-themes` would force it on every consumer of `@owlmeans/web-panel`, and a
+ * second copy of a theme provider is its own class of bug.
+ *
+ * `'system'` is the answer before the first paint and whenever nothing sets the class — sonner
+ * resolves it from `prefers-color-scheme`, which is what an app with no toggle means by it.
+ */
+const useDocumentTheme = (): ToasterProps['theme'] => {
+  const [theme, setTheme] = useState<ToasterProps['theme']>('system')
+
+  useEffect(() => {
+    const root = document.documentElement
+    const read = () => setTheme(root.classList.contains(DARK_CLASS) ? 'dark' : 'system')
+    read()
+    const observer = new MutationObserver(read)
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return theme
+}
+
+/**
+ * The application's toast surface — mount it ONCE, in the layout.
+ *
+ * `toast()` from `sonner` is a module-global store, so a second mounted `Toaster` renders every
+ * message twice and no mounted `Toaster` renders none of them at all with nothing reported. The
+ * layout is therefore the only place this belongs.
+ *
+ * Colours come from the app's own theme tokens rather than sonner's palette: the CSS variables
+ * below are what its stylesheet paints with, so a toast follows `--popover` the way every other
+ * floating surface in the app does. A caller's `style` is merged OVER them, so an app that has to
+ * shift or recolour the stack keeps the rest.
+ */
+export const Toaster: FC<ToasterProps> = ({ style, theme, className, ...props }) => {
+  const detected = useDocumentTheme()
+
+  return <Sonner
+    theme={theme ?? detected}
+    className={cn('toaster group', className)}
+    richColors
+    closeButton
+    duration={5000}
+    position="top-right"
+    style={{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      ...(style ?? {})
+    } as CSSProperties}
+    {...props}
+  />
+}

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

@@ -0,0 +1,7 @@
+// Tailwind responsive sizes — mirrors the previous MUI breakpoint object.
+//   xs:  60/65px   md: 120/125px   lg: 200/205px
+export const wrapperClasses = 'w-[65px] h-[65px] md:w-[125px] md:h-[125px] lg:w-[205px] lg:h-[205px]'
+
+export const previewClasses = 'max-w-[60px] max-h-[60px] md:max-w-[120px] md:max-h-[120px] lg:max-w-[200px] lg:max-h-[200px]'
+
+export const iconClasses    = 'size-[60px] md:size-[120px] lg:size-[200px] text-primary'

package/src/components/uploader/image.tsx

@@ -2,13 +2,9 @@ import type { FC } from 'react'
 import { ImageUploader as Uploader } from '@owlmeans/web-client'
 import { ImagePlus } from 'lucide-react'
 import type { ImageUploaderProps } from './types.js'
-import { cn } from '@/lib/utils'
+import { cn } from '../../@/lib/utils.js'
+import { iconClasses, previewClasses, wrapperClasses } from './consts.local.js'
 
-// Tailwind responsive sizes — mirrors the previous MUI breakpoint object.
-//   xs:  60/65px   md: 120/125px   lg: 200/205px
-const wrapperClasses = 'w-[65px] h-[65px] md:w-[125px] md:h-[125px] lg:w-[205px] lg:h-[205px]'
-const previewClasses = 'max-w-[60px] max-h-[60px] md:max-w-[120px] md:max-h-[120px] lg:max-w-[200px] lg:max-h-[200px]'
-const iconClasses    = 'size-[60px] md:size-[120px] lg:size-[200px] text-primary'
 
 export const ImageUploader: FC<ImageUploaderProps> = ({ Root, rootProps, previewUrl, ...others }) => {
   const DefaultRoot: FC<any> = ({ children, className, ...rest }) => (

package/src/consent/component.tsx

@@ -0,0 +1,84 @@
+import type { FC } from 'react'
+import {
+  CookieConsent, CookiePolicy, type ConsentGeoOptions, type CookieConsentProps, type CookiePolicyProps,
+} from '@owlmeans/web-consent'
+import { useLanguage } from '@owlmeans/client-i18n'
+import { useContext } from '../context.js'
+import type { AppConfig, AppContext } from '../types.js'
+import { useConsentTranslate } from './translate.js'
+import { useConsentWidgetPresent } from './presence.js'
+import type { ConsentGeoPluginAppend, ConsentWidgetServiceAppend } from './types.js'
+import { _localeParity } from './consts.local.js'
+import type { BoundCookieConsentProps } from './types.local.js'
+
+const BoundCookieConsent: FC<BoundCookieConsentProps> = ({ menuPresent, ...props }) => {
+  const [lng] = useLanguage()
+  const locale = props.locale ?? lng
+  const translate = useConsentTranslate(locale, props.translate)
+
+  return <CookieConsent
+    {...props}
+    locale={locale}
+    translate={translate}
+    noReopenButton={props.noReopenButton ?? menuPresent}
+  />
+}
+
+const MenuAwareCookieConsent: FC<CookieConsentProps> = props =>
+  <BoundCookieConsent {...props} menuPresent={useConsentWidgetPresent()} />
+
+/**
+ * The geo gate in force: the prop, else `cfg.cookieConsent.geo`, else — when the application
+ * appended a locator of its own — the gate with nothing but that locator.
+ */
+const geoOf = (
+  prop: ConsentGeoOptions | undefined, context: AppContext<AppConfig> & Partial<ConsentGeoPluginAppend>
+): ConsentGeoOptions | undefined =>
+  prop ?? context.cfg.cookieConsent?.geo ?? (typeof context.consentGeo === 'function' ? {} : undefined)
+
+void _localeParity
+
+/**
+ * The consent dialog, bound to this application's language and translations.
+ *
+ * `@owlmeans/web-consent` deliberately knows nothing about OwlMeans i18n — one of its consumers is
+ * an Astro site with none — so this is where the two meet.
+ *
+ * Also hides the floating re-open button whenever a host menu declares, through
+ * `useConsentMenuPresence()`, that it offers a `PanelConsentMenuWidget` row (a collapsed dropdown,
+ * a footer "Cookie settings" control) — an explicit `noReopenButton` from the caller always wins;
+ * only the default `undefined` falls through to this computed presence.
+ *
+ * The presence read needs `appendConsentWidgetService(context)`, and an application mounting the
+ * dialog on its own has no reason to call it. Without the service the dialog is exactly the plain
+ * bound dialog, floating button included — never a presence read against a state resource that
+ * was never registered, which throws inside render and blanks the whole application. The choice is
+ * made by component TYPE, because it is fixed for the context's lifetime: a service is appended
+ * while the context is built, before anything renders.
+ */
+export const PanelCookieConsent: FC<CookieConsentProps> = props => {
+  const context = useContext<
+    AppConfig, AppContext<AppConfig> & Partial<ConsentWidgetServiceAppend & ConsentGeoPluginAppend>
+  >()
+  const mode = props.mode ?? context.cfg.cookieConsent?.mode
+  const geo = geoOf(props.geo, context)
+  const bound = { ...props, ...(mode != null ? { mode } : {}), ...(geo != null ? { geo } : {}) }
+
+  return typeof context.consentWidget === 'function'
+    ? <MenuAwareCookieConsent {...bound} />
+    : <BoundCookieConsent {...bound} />
+}
+
+/**
+ * The cookie-policy page, bound like the dialog — and told about the geo gate the same way, so it
+ * states the regional rule exactly when the dialog applies it.
+ */
+export const PanelCookiePolicy: FC<CookiePolicyProps> = props => {
+  const context = useContext<AppConfig, AppContext<AppConfig> & Partial<ConsentGeoPluginAppend>>()
+  const [lng] = useLanguage()
+  const locale = props.locale ?? lng
+  const translate = useConsentTranslate(locale, props.translate)
+  const geo = geoOf(props.geo, context)
+
+  return <CookiePolicy {...props} {...(geo != null ? { geo } : {})} locale={locale} translate={translate} />
+}