@owlmeans/web-panel 0.1.18-rc.2 → 0.1.18-rc.21

package/src/components/login/screen.tsx

@@ -0,0 +1,110 @@
+import { isValidElement } from 'react'
+import type { FC } from 'react'
+import { Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import { useLoginMethods } from '@owlmeans/client-panel/auth'
+import type { LoginMethod, LoginScreenProps } from '@owlmeans/client-auth/login'
+import { LoginMethodIcon } from './icons.js'
+import { LoginTerms } from './terms.js'
+import { LoginCredit } from './credit.js'
+
+const VARIANT: Record<string, 'default' | 'outline' | 'link'> = {
+  primary: 'default',
+  secondary: 'outline',
+  link: 'link',
+}
+
+/**
+ * The sign-in screen: which identity provider, confirmed against which documents.
+ *
+ * It never starts anything by itself. Every flow leaves from a click — which is the requirement,
+ * and also what makes framed sign-in work at all, because the window a framed application has to
+ * open can only be opened inside a user gesture.
+ *
+ * Pure with respect to i18n: `translate` is a prop. {@link LocalizedLoginScreen} is the wrapper
+ * that binds it to the app's own resources, so an application mounted without an i18n provider can
+ * still render this one with a resolver of its own.
+ */
+export const LoginScreen: FC<LoginScreenProps> = props => {
+  const t = props.translate ?? ((_key: string, defaultValue: string) => defaultValue)
+  const model = useLoginMethods({
+    ...(props.config != null ? { config: props.config } : {}),
+    ...(props.terms !== undefined ? { terms: props.terms } : {}),
+    ...(props.methods != null ? { methods: props.methods } : {}),
+  })
+
+  const Logo = props.Logo
+
+  return <div className={cn('flex min-h-full w-full items-center justify-center p-4', props.className)}>
+    <Card className={cn('w-full max-w-sm', props.containerClassName)}>
+      <CardHeader className="items-center gap-2 text-center">
+        {Logo != null && <div className="flex justify-center pb-2">
+          {isValidElement(Logo) ? Logo : typeof Logo === 'function'
+            ? <Logo className="h-10 w-auto" /> : Logo}
+        </div>}
+        <CardTitle className="text-xl">{props.title ?? t('login.title', 'Sign in')}</CardTitle>
+        <CardDescription>
+          {props.subtitle ?? t('login.subtitle', 'Choose how you would like to continue.')}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-4">
+        {model.methods.length < 1
+          ? <p role="status" className="text-sm text-muted-foreground text-center">
+            {t('login.empty', 'No sign-in method is configured for this application.')}
+          </p>
+          : <div className="flex flex-col gap-2">
+            {model.methods.map((method: LoginMethod) => <Button
+              key={method.id}
+              type="button"
+              data-login-method={method.id}
+              variant={VARIANT[method.emphasis ?? 'secondary'] ?? 'outline'}
+              // `aria-disabled`, never `disabled`. A disabled button swallows the click, so a user
+              // who has not confirmed the terms would press it and be told nothing at all — the
+              // screen would simply seem broken. Blocking happens in the handler, which then says
+              // why.
+              aria-disabled={model.blocked}
+              data-blocked={model.blocked ? 'true' : undefined}
+              className={cn('w-full justify-center gap-2', model.blocked && 'opacity-60')}
+              autoFocus={method.id === model.primary?.id}
+              onClick={() => model.select(method)}
+            >
+              {model.busy === method.id
+                ? <Loader2 className="size-4 animate-spin" />
+                : <LoginMethodIcon name={method.icon} className="size-4" />}
+              {method.label ?? t(`login.method.${method.i18nKey ?? method.id}`, method.id)}
+            </Button>)}
+          </div>}
+
+        {model.terms.required && <LoginTerms model={model.terms} translate={t} />}
+
+        {model.error != null && <p role="alert" className="text-sm text-destructive">
+          {model.error}
+        </p>}
+      </CardContent>
+
+      <div className="px-6">
+        {props.footer ?? <LoginCredit model={model.credit} translate={t} />}
+      </div>
+    </Card>
+  </div>
+}
+
+/**
+ * {@link LoginScreen} bound to the application's own translations.
+ *
+ * The split exists because the house rule is that a reusable component takes `translate` as a prop
+ * and never reaches for a context — but the ordinary case is an app that has one, and making every
+ * app write the resolver would guarantee some of them ship English.
+ */
+export const LocalizedLoginScreen: FC<LoginScreenProps> = props => {
+  const t = useI18nLib('auth')
+
+  return <LoginScreen
+    {...props}
+    translate={props.translate ?? ((key, defaultValue) => t(key, { defaultValue }))}
+  />
+}

package/src/components/login/terms.tsx

@@ -0,0 +1,71 @@
+import type { FC, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import type { LoginTermsModel } from '@owlmeans/client-panel/auth'
+
+export interface LoginTermsProps {
+  model: LoginTermsModel
+  translate: (key: string, defaultValue: string) => string
+  className?: string
+}
+
+/**
+ * Split a translated sentence around its two link placeholders.
+ *
+ * The sentence is translated as ONE string with `{{terms}}` and `{{privacy}}` in it, rather than
+ * assembled from fragments, because word order differs between languages and an assembled sentence
+ * forces every translator into English's. Splitting the already-translated string keeps that
+ * freedom while keeping the i18n contract at `(key, defaultValue) => string` — no ReactNode ever
+ * comes out of a translation, so an app with no i18n provider still renders a correct sentence.
+ */
+const interpolate = (
+  sentence: string, slots: Record<string, ReactNode>
+): ReactNode[] => sentence
+  .split(/(\{\{[a-z]+\}\})/i)
+  .map((part, index) => {
+    const match = /^\{\{([a-z]+)\}\}$/i.exec(part)
+
+    return match != null
+      ? <span key={index}>{slots[match[1]] ?? part}</span>
+      : <span key={index}>{part}</span>
+  })
+
+export const LoginTerms: FC<LoginTermsProps> = ({ model, translate, className }) => {
+  const link = (href: string, label: string): ReactNode =>
+    <a href={href} target="_blank" rel="noreferrer noopener"
+      className="underline underline-offset-2 hover:text-foreground">{label}</a>
+
+  return <div className={cn('flex flex-col gap-1.5', className)}>
+    <label className="flex items-start gap-2 text-sm text-muted-foreground cursor-pointer">
+      {/*
+        A NATIVE checkbox, deliberately. `web-panel` ships no `checkbox` primitive, and requiring
+        every consumer to vendor one plus its Radix peer to render a sign-in screen would be a
+        breaking change for every application already on this package. A native control is also the
+        most accessible thing available here.
+      */}
+      <input
+        type="checkbox" data-login-terms
+        className="mt-0.5 size-4 shrink-0 accent-primary"
+        checked={model.accepted}
+        aria-invalid={model.attempted && !model.accepted}
+        onChange={event => model.accept(event.target.checked)}
+      />
+      <span>
+        {interpolate(
+          translate('login.terms.agreement',
+            'I have read and agree to the {{terms}} and the {{privacy}}.'),
+          {
+            terms: link(model.urls.terms, translate('login.terms.terms', 'Terms & Conditions')),
+            privacy: link(model.urls.privacy, translate('login.terms.privacy', 'Privacy Policy')),
+            cookies: model.urls.cookies != null
+              ? link(model.urls.cookies, translate('login.terms.cookies', 'Cookie Policy'))
+              : null,
+          }
+        )}
+      </span>
+    </label>
+    {model.attempted && !model.accepted && <p role="alert" className="text-sm text-destructive">
+      {translate('login.terms.required',
+        'Please confirm the Terms & Conditions and the Privacy Policy to continue.')}
+    </p>}
+  </div>
+}

package/src/components/nav/index.ts

@@ -0,0 +1,5 @@
+export type * from './types.js'
+
+export * from './layout.js'
+export * from './side.js'
+export * from './top.js'

package/src/components/nav/layout.tsx

@@ -0,0 +1,85 @@
+import type { FC } from 'react'
+import { useNavigate } from '@owlmeans/client'
+import { cn } from '@/lib/utils'
+import { Footer } from '../footer/component.js'
+
+import { SideNav } from './side.js'
+import { TopNav } from './top.js'
+import type { NavLayoutProps } from './types.js'
+
+/**
+ * The horizontal rhythm of the whole page, applied identically to the header row, the content
+ * and the footer row.
+ *
+ * It lives in ONE constant because the three regions have to agree: a content area with its own
+ * width sits visibly inset from a full-width header, which reads as a mistake rather than as a
+ * design. Adjust it through `containerClassName`, which is MERGED over this — never by giving
+ * the content a width of its own.
+ */
+const CONTAINER = 'mx-auto w-full max-w-6xl px-4'
+
+/**
+ * The standard two-layer application shell.
+ *
+ * A layout entrypoint elevates a component that renders this and nothing else — the screen
+ * arrives as `children`. The side menu is mounted twice on purpose: one column for wide
+ * viewports and one strip for narrow ones. Both render only when the active section has
+ * more than one screen, so the single-screen case costs nothing but the elements' absence.
+ */
+export const NavLayout: FC<NavLayoutProps> = ({
+  nav, translate, title, home, actions, footer, children, className, style,
+  headerClassName, contentClassName, containerClassName
+}) => {
+  const navigator = useNavigate()
+  const brandAlias = home ?? nav.sections.find(section => section.items.length > 0)?.items[0]?.alias
+  // MERGED over the default, never substituted for it. `containerClassName` is how a design
+  // adjusts ONE aspect of the rhythm — almost always the width — and a caller passing
+  // `max-w-[1280px]` means "wider", not "no padding and no centring". Substituting dropped
+  // `px-4` and `mx-auto` along with the width it replaced, which is a page whose header,
+  // content and footer all run flush to the window edge. tailwind-merge keeps the override
+  // winning on the utility it names and leaves the rest of the rhythm standing, so a width-only
+  // value stays a width-only change; `px-8` still overrides the padding when that is the intent.
+  const container = cn(CONTAINER, containerClassName)
+
+  return <div
+    className={cn('flex min-h-screen flex-col bg-background text-foreground', className)}
+    style={style}
+  >
+    {/*
+      * The header is a SURFACE, and it states both halves of one.
+      *
+      * It has to paint an opaque background — it is sticky, and content scrolls underneath —
+      * which makes it a different surface from the root behind it. A colour set on the root
+      * (`className="bg-secondary text-secondary-foreground"`, a dark application shell) then
+      * inherits INTO this bar while its own `bg-background` stays put, and every child that
+      * states no colour of its own — the brand, a ghost-variant action button — is painted in
+      * the foreground of a surface it is not on. That is light-on-light, it raises nothing at
+      * build or run time, and it is invisible only to whoever opens the page.
+      *
+      * `text-foreground` is what stops the inheritance at the boundary. It is not decoration
+      * and it is not redundant with the root: pairing has to be restated by every element that
+      * repaints its own background. `headerClassName` lands after it, so an app that wants a
+      * dark bar overrides BOTH halves through tailwind-merge.
+      */}
+    <header className={cn('sticky top-0 z-40 border-b bg-background text-foreground', headerClassName)}>
+      <div className={cn('flex h-14 items-center gap-6', container)}>
+        {title != null ? <a
+          onClick={brandAlias != null ? navigator.press(brandAlias) : undefined}
+          className={cn('brand flex items-center gap-2 text-lg font-semibold', brandAlias != null && 'cursor-pointer')}
+        >{title}</a> : null}
+        <TopNav config={nav} translate={translate} ariaLabel="Sections" />
+        <div className="ml-auto flex items-center gap-2">{actions}</div>
+      </div>
+      <SideNav config={nav} translate={translate} variant="bar" ariaLabel="Screens" className="md:hidden" />
+    </header>
+    <div className="flex flex-1">
+      <SideNav config={nav} translate={translate} variant="side" ariaLabel="Screens" className="hidden md:block" />
+      <main className={cn('flex-1 py-8', contentClassName)}>
+        <div className={cn(container)}>{children}</div>
+      </main>
+    </div>
+    {Array.isArray(footer)
+      ? <Footer links={footer} translate={translate} containerClassName={container} />
+      : footer != null ? <Footer containerClassName={container}>{footer}</Footer> : null}
+  </div>
+}

package/src/components/nav/side.tsx

@@ -0,0 +1,52 @@
+import type { FC } from 'react'
+import { defaultNavTranslate, resolveNavLabel, usePanelNav } from '@owlmeans/client-panel'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+import type { SideNavProps } from './types.js'
+
+/**
+ * The second navigation level — the screens of the active section.
+ *
+ * It renders NOTHING when the section holds a single screen: a menu offering the page you
+ * are already on is noise. The component still exists in the tree, so a section that grows
+ * a second screen gains its side menu with no layout change.
+ */
+export const SideNav: FC<SideNavProps> = (
+  { config, translate = defaultNavTranslate, variant = 'side', ariaLabel, className, style }
+) => {
+  const model = usePanelNav(config)
+
+  if (!model.showSide || model.active == null) {
+    return null
+  }
+
+  const items = model.active.items.map(item => {
+    const label = resolveNavLabel(translate, item.label, `modules.${item.alias}`, item.alias)
+
+    return <Button
+      key={item.alias}
+      variant="ghost"
+      size={variant === 'bar' ? 'sm' : 'default'}
+      onClick={model.goItem(item)}
+      aria-current={model.isItemActive(item) ? 'page' : undefined}
+      className={cn(
+        variant === 'bar' ? 'shrink-0' : 'w-full justify-start',
+        model.isItemActive(item) && 'bg-accent text-accent-foreground'
+      )}
+    >
+      {item.Icon != null ? <item.Icon className="size-4" /> : null}
+      {label}
+    </Button>
+  })
+
+  return variant === 'bar'
+    ? <nav
+      aria-label={ariaLabel}
+      className={cn('flex gap-1 overflow-x-auto border-b px-2 py-1', className)}
+      style={style}
+    >{items}</nav>
+    : <aside className={cn('w-56 shrink-0 border-r', className)} style={style}>
+      <nav aria-label={ariaLabel} className="flex flex-col gap-1 p-3">{items}</nav>
+    </aside>
+}

package/src/components/nav/top.tsx

@@ -0,0 +1,62 @@
+import type { FC } from 'react'
+import { defaultNavTranslate, resolveNavLabel, usePanelNav } from '@owlmeans/client-panel'
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList
+} from '@/components/ui/navigation-menu'
+
+import type { TopNavProps } from './types.js'
+
+/**
+ * Section entries are LINKS, not buttons.
+ *
+ * The shadcn primitive styles its links as menu tiles — a filled hover/active background, a
+ * radius and tile padding — which reads as a row of buttons across the top of an application.
+ * These classes land after the primitive's, so `cn`'s tailwind-merge drops the conflicting
+ * ones; every neutralised utility here has a counterpart in the primitive, and removing one
+ * brings the tile back.
+ */
+const SECTION_LINK = [
+  'bg-transparent hover:bg-transparent focus:bg-transparent',
+  'rounded-none px-0 py-1',
+  'text-sm font-medium text-muted-foreground',
+  'hover:text-foreground hover:underline underline-offset-4',
+  // Radix marks the active link with a VALUELESS `data-active`, so the state has to be matched
+  // on the attribute's presence. `data-[active=true]` — which the shadcn primitive itself uses —
+  // matches nothing here, which is why its own active styling never showed either.
+  'data-[active]:text-foreground data-[active]:underline data-[active]:bg-transparent',
+  'cursor-pointer',
+].join(' ')
+
+/**
+ * The first navigation level — one entry per section.
+ *
+ * Pressing a section goes to its first screen; the side menu then offers the rest. The
+ * viewport is off because no section opens a panel: these are links, not dropdowns.
+ */
+export const TopNav: FC<TopNavProps> = ({ config, translate = defaultNavTranslate, ariaLabel, className, style }) => {
+  const model = usePanelNav(config)
+
+  if (model.sections.length < 1) {
+    return null
+  }
+
+  return <NavigationMenu viewport={false} aria-label={ariaLabel} className={className} style={style}>
+    <NavigationMenuList className="flex-wrap gap-4">
+      {model.sections.map(section => {
+        const go = model.goSection(section)
+
+        return <NavigationMenuItem key={section.name}>
+          <NavigationMenuLink
+            active={model.isSectionActive(section)}
+            // A real `href` keeps the entry focusable and openable in a new tab; the click is
+            // still handled in-app, so the browser never reloads the whole application.
+            href={model.hrefOf(section)}
+            onClick={event => { event.preventDefault(); go() }}
+            className={cn(SECTION_LINK)}
+          >{resolveNavLabel(translate, section.label, `nav.${section.name}`, section.name)}</NavigationMenuLink>
+        </NavigationMenuItem>
+      })}
+    </NavigationMenuList>
+  </NavigationMenu>
+}

package/src/components/nav/types.ts

@@ -0,0 +1,56 @@
+import type { PropsWithChildren, ReactNode } from 'react'
+import type { NavTranslate, PanelNavConfig, PanelNavLink } from '@owlmeans/client-panel'
+import type { StyledProps } from '../types.js'
+
+interface NavCommonProps extends StyledProps {
+  config: PanelNavConfig
+  /** See {@link NavTranslate} — omitted, literal labels and humanized aliases are used. */
+  translate?: NavTranslate
+  ariaLabel?: string
+}
+
+export interface TopNavProps extends NavCommonProps { }
+
+export interface SideNavProps extends NavCommonProps {
+  /**
+   * `side` is the column beside the content; `bar` is the horizontal strip the narrow
+   * viewport gets instead. Both render the same items — only one is visible at a time.
+   */
+  variant?: 'side' | 'bar'
+}
+
+export interface NavLayoutProps extends PropsWithChildren<StyledProps> {
+  nav: PanelNavConfig
+  translate?: NavTranslate
+  /** Brand slot — rendered at the far left of the header. */
+  title?: ReactNode
+  /** Alias the brand navigates to. Defaults to the first section's first item. */
+  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. */
+  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/toaster.tsx

@@ -0,0 +1,68 @@
+import type { CSSProperties, FC } from 'react'
+import { useEffect, useState } from 'react'
+import { Toaster as Sonner } from 'sonner'
+import type { ToasterProps } from 'sonner'
+import { cn } from '@/lib/utils'
+
+const DARK_CLASS = 'dark'
+
+/**
+ * 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/consent/component.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react'
+import type { FC } from 'react'
+import { CookieConsent, CookiePolicy, defaultConsentTranslate } from '@owlmeans/web-consent'
+import type { CookieConsentProps, CookiePolicyProps, ConsentLocale } from '@owlmeans/web-consent'
+import { useI18nLib, useLanguage } from '@owlmeans/client-i18n'
+import { SUPPORTED_LNGS } from '@owlmeans/i18n'
+
+/**
+ * Resolve consent copy through the application first, and the packaged bundle second.
+ *
+ * The chain matters. `@owlmeans/web-consent` takes `translate` as a prop and, once given one,
+ * stops consulting its own translations — so a wrapper that forwarded the framework resolver
+ * alone would render the ENGLISH default for every key the application had not overridden, in
+ * every language. Falling through to the packaged bundle for the current locale means an
+ * application overrides what it wants to and inherits seven languages for the rest.
+ */
+const useConsentTranslate = (
+  locale: string, override?: (key: string, defaultValue: string) => string
+): ((key: string, defaultValue: string) => string) => {
+  const t = useI18nLib('consent')
+
+  return useCallback((key: string, defaultValue: string) => {
+    if (override != null) {
+      return override(key, defaultValue)
+    }
+    const packaged = defaultConsentTranslate(locale)(key, defaultValue)
+    // `t` answers with whatever it is given when the key is unknown, so the packaged string is
+    // what it is given — an application's override wins, and everything else stays translated.
+    return t(key, { defaultValue: packaged })
+  }, [t, locale, override])
+}
+
+/**
+ * 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.
+ */
+export const PanelCookieConsent: FC<CookieConsentProps> = props => {
+  const [lng] = useLanguage()
+  const locale = props.locale ?? lng
+  const translate = useConsentTranslate(locale, props.translate)
+
+  return <CookieConsent {...props} locale={locale} translate={translate} />
+}
+
+export const PanelCookiePolicy: FC<CookiePolicyProps> = props => {
+  const [lng] = useLanguage()
+  const locale = props.locale ?? lng
+  const translate = useConsentTranslate(locale, props.translate)
+
+  return <CookiePolicy {...props} locale={locale} translate={translate} />
+}
+
+/**
+ * The consent package carries its own locale list because it must build with no dependency on the
+ * i18n package at all. This assertion is what keeps the two from drifting: a language added to the
+ * framework and not to the bundle fails here, at build time, rather than as a dialog rendering
+ * English to the one reader who cannot report it.
+ */
+const _localeParity: readonly ConsentLocale[] = SUPPORTED_LNGS as readonly ConsentLocale[]
+void _localeParity

package/src/consent/index.ts

@@ -0,0 +1,11 @@
+export * from './component.js'
+export {
+  useConsent, useConsentCategory, consentStore, openConsent, isConsented,
+  readConsent, writeConsent, clearConsent, DEFAULT_CONSENT_CATEGORIES,
+  CONSENT_KEY, CONSENT_ESSENTIAL, CONSENT_ANALYTICS, CONSENT_MARKETING,
+  consentBootstrapScript,
+} from '@owlmeans/web-consent'
+export type {
+  ConsentCategory, ConsentOptions, ConsentRecord, ConsentSignal, ConsentState,
+  CookieConsentProps, CookiePolicyProps,
+} from '@owlmeans/web-consent'

package/src/context.ts

@@ -2,6 +2,7 @@ import { appendFlowService } from '@owlmeans/web-flow'
 import type { AppConfig , AppContext } from './types.js'
 import { makeContext as makeClientContext, useContext as useCtx } from '@owlmeans/web-client'
 import { apiConfigMiddleware } from '@owlmeans/api-config-client'
+import { appendLoginScreen } from './components/login/append.js'
 
 export const makeContext = <C extends AppConfig, T extends AppContext<C>>(cfg: C): T => {
   const context = makeClientContext(cfg) as T
@@ -11,6 +12,10 @@ export const makeContext = <C extends AppConfig, T extends AppContext<C>>(cfg: C
   appendFlowService<C, T>(context)
   context.flow = () => context.service('flow')
 
+  // Every app on this package gets the shadcn sign-in screen with no wiring of its own; one that
+  // wants its logo on it calls `appendLoginScreen` again, which is idempotent.
+  appendLoginScreen<C, T>(context)
+
   return context
 }
 

package/tests/context.ts

@@ -0,0 +1,43 @@
+import { createServer } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+
+const here = dirname(fileURLToPath(import.meta.url))
+
+let url: string | null = null
+
+/**
+ * Boot a Vite dev server over `tests/harness/` — a real HTTP origin, because the OwlMeans
+ * router drives the History API and a `data:` URL has no history to drive.
+ *
+ * `@` resolves to the package's own dev-only primitive copy, exactly as a consuming app's
+ * bundler resolves it to theirs. React is deduped so hooks cross the workspace links.
+ */
+export const getHarnessUrl = async (): Promise<string> => {
+  if (url != null) return url
+  const server = await createServer({
+    configFile: false,
+    root: resolve(here, './harness'),
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: { '@': resolve(here, '../src/@') },
+      dedupe: ['react', 'react-dom'],
+    },
+    // Pre-bundled at server start rather than discovered while the first request is being
+    // served: a dependency found mid-transform re-optimizes and reloads the page underneath
+    // the navigation, which the first `goto` of a cold run pays for as a timeout.
+    optimizeDeps: { include: ['sonner'] },
+    server: { port: 0 },
+    logLevel: 'warn'
+  })
+  await server.listen()
+  const local = server.resolvedUrls?.local?.[0]
+  if (local == null) throw new Error('vite did not expose a local URL')
+  url = local
+
+  return url
+}
+
+export const HARNESS_URL = await getHarnessUrl()

package/tests/harness/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>@owlmeans/web-panel navigation</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/mount.tsx"></script>
+  </body>
+</html>