@prenta/admin 2.6.0 → 2.7.0

package/src/components/ui/CountChip.tsx

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react'
+
+export interface CountChipProps {
+  /** The count. A string for formatted values ("2.4 GB"). */
+  n: number | string
+  label: string
+  /** `ok` colours the number `--suc`; `bad` the chip `--err`; `muted` the number `--muted`. */
+  tone?: 'ok' | 'bad' | 'muted'
+  /** Leading 12px icon (Script Tags' "Consent-gated" shield). */
+  icon?: ReactNode
+  href?: string
+  onClick?: () => void
+  selected?: boolean
+}
+
+/**
+ * Page-header count chip (SHELL.md §4 "Count chip", `.stat-pill` in
+ * cms-layouts.css), one look on Forms, Inbox, Media and Script Tags.
+ * Renders a link or button when it navigates; otherwise a static span.
+ */
+export function CountChip({ n, label, tone, icon, href, onClick, selected }: CountChipProps) {
+  const interactive = Boolean(href || onClick)
+  const className = [
+    // Explicit leading: the admin base layer styles `button` at 1.5 / 500.
+    'inline-flex items-center gap-[5px] rounded-pill border px-2.5 py-[3px] text-sm2 leading-[1.5] font-[450] whitespace-nowrap no-underline',
+    // Forced colors flatten the selected fill and border, so a selected chip
+    // gets an outline there (as the current nav row does).
+    selected
+      ? 'border-acc bg-acc-l text-acc forced-colors:outline-2 forced-colors:outline-offset-1 forced-colors:outline-solid'
+      : tone === 'bad'
+        ? 'border-[color-mix(in_srgb,var(--err)_35%,var(--bdr))] bg-card text-err'
+        : 'border-bdr bg-card text-sub',
+    interactive ? 'cursor-pointer hover:border-acc-m hover:text-acc' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const numberClass = `font-bold tabular-nums ${
+    tone === 'ok'
+      ? 'text-suc'
+      : tone === 'bad'
+        ? 'text-err'
+        : tone === 'muted'
+          ? 'text-faint'
+          : selected
+            ? 'text-acc'
+            : 'text-txt'
+  }`
+
+  const inner: ReactNode = (
+    <>
+      {icon ? (
+        <span aria-hidden="true" className="flex [&>svg]:h-3 [&>svg]:w-3">
+          {icon}
+        </span>
+      ) : null}
+      <b className={numberClass}>{n}</b>
+      {label}
+    </>
+  )
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={className}
+        aria-current={selected ? 'true' : undefined}
+        onClick={
+          onClick
+            ? (event) => {
+                if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return
+                event.preventDefault()
+                onClick()
+              }
+            : undefined
+        }
+      >
+        {inner}
+      </a>
+    )
+  }
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} className={className} aria-pressed={selected}>
+        {inner}
+      </button>
+    )
+  }
+  return <span className={className}>{inner}</span>
+}

package/src/components/ui/FilterPill.tsx

@@ -5,7 +5,8 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react'
 /**
  * Design-system filter pill (`.pill` / `.pill.act`): bordered card-surface
  * chip that fills with the accent color when active. Used for status / role /
- * category filter rows above list views.
+ * category filter rows above list views. Never wraps its label ("Body start"
+ * stays on one line; ScriptTags.html `.filter-pill { white-space: nowrap }`).
  */
 export interface FilterPillProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
   active?: boolean
@@ -25,9 +26,10 @@ export function FilterPill({
     <button
       type="button"
       aria-pressed={active}
-      className={`inline-flex items-center gap-1.5 rounded-[7px] border px-3 py-1.5 text-[12.5px] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+      className={`inline-flex items-center gap-1.5 rounded-[7px] border px-3 py-1.5 text-[12.5px] font-medium whitespace-nowrap transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
         active
-          ? 'border-[var(--acc)] bg-[var(--acc)] text-white'
+          ? // Forced colors drop the fill: the active pill keeps an outline.
+            'border-[var(--acc)] bg-[var(--acc)] text-white forced-colors:outline-2 forced-colors:outline-offset-1 forced-colors:outline-solid'
           : 'border-[var(--bdr)] bg-[var(--card)] text-[var(--sub)] hover:border-[var(--acc-m)] hover:text-[var(--acc)]'
       } ${className ?? ''}`}
       {...rest}

package/src/components/ui/InspectorPane.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { useRef, type ReactNode } from 'react'
 import { X } from 'lucide-react'
+import { useSheetFocus } from '../../lib/sheet-focus.js'
 
 /**
  * Design-system inline split-pane pattern: a list that shrinks while a
@@ -53,21 +54,33 @@ export function InspectorPane({
   children,
   'aria-label': ariaLabel,
 }: InspectorPaneProps) {
+  const regionRef = useRef<HTMLDivElement>(null)
+
+  // Below 769px the open pane is a sheet over the content column (kit
+  // `.sp.open`; `[data-inspector-open]` in responsive.css hides the list and
+  // the page header around it), so the row that opened it is no longer on
+  // screen: focus moves into the pane, and back to that row when it closes.
+  useSheetFocus(open, regionRef)
+
   // Cap at the split row's width (100% of the flex container) so the pane
-  // never overflows phones/tablets. Below the cap the pane fills the row
+  // never overflows tablets. Below the cap the pane fills the row
   // master–detail style: the list yields, and the close button returns to
   // it. On desktop the min() resolves to the design's fixed px width, so
-  // nothing changes there.
+  // nothing changes there. Below 769px it is a sheet: the whole content
+  // column, no gutter, border or radius.
   return (
     <div
-      className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
+      data-inspector-open={open ? '' : undefined}
+      className="mobile:motion-safe:transition-none shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
       style={{ width: open ? `min(${width}px, 100%)` : 0 }}
       aria-hidden={!open}
     >
       <div
+        ref={regionRef}
         role="region"
         aria-label={ariaLabel}
-        className="my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
+        tabIndex={-1}
+        className="mobile:m-0 mobile:h-full mobile:w-full! mobile:rounded-none mobile:border-0 mobile:shadow-none my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
         style={{ width: `min(${width - 28}px, calc(100% - 28px))` }}
       >
         {open ? children : null}
@@ -92,9 +105,10 @@ export function InspectorPaneHeader({
         type="button"
         onClick={onClose}
         aria-label={closeLabel}
-        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+        // The only way out of the mobile sheet: 44px there, and on touch.
+        className="prenta-touch-target mobile:-my-2 mobile:-mr-2 mobile:h-11 mobile:w-11 flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
       >
-        <X size={16} />
+        <X size={16} aria-hidden />
       </button>
     </div>
   )

package/src/components/ui/Modal.tsx

@@ -12,6 +12,16 @@ const MODAL_SIZE_CLASS = {
   xl: 'flex max-h-[min(92vh,880px)] max-w-5xl flex-col',
 } as const
 
+/**
+ * Below 769px every size is a bottom sheet (cms-layouts.css `.modal`): full
+ * width, at most 92dvh (the visible height, so a mobile browser's toolbar
+ * doesn't push it off screen), 16px top corners, the body scrolling between a fixed
+ * title row and footer, clear of the home indicator. Footer buttons share the
+ * row at 44px.
+ */
+const SHEET_CLASS =
+  'mobile:top-auto mobile:bottom-0 mobile:left-0 mobile:flex mobile:max-h-[92dvh] mobile:w-full mobile:max-w-none mobile:translate-x-0 mobile:translate-y-0 mobile:flex-col mobile:rounded-t-[16px] mobile:rounded-b-none mobile:border-x-0 mobile:border-b-0 mobile:pb-[env(safe-area-inset-bottom,0px)]'
+
 type ModalSize = keyof typeof MODAL_SIZE_CLASS
 
 export interface ModalProps {
@@ -98,7 +108,7 @@ export function Modal({
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
         <Dialog.Content
           ref={contentRef}
-          className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`}
+          className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]} ${SHEET_CLASS}`}
           onInteractOutside={(event) => {
             // Radix dispatches this custom event on the outside target, so
             // `event.currentTarget` is not the parent Dialog.Content.
@@ -126,28 +136,32 @@ export function Modal({
               : undefined
           }
         >
-          <div className="border-border flex items-center justify-between border-b px-6 py-4">
+          <div className="border-border mobile:px-4 flex shrink-0 items-center justify-between border-b px-6 py-4">
             <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
             <Dialog.Close asChild>
               <button
                 type="button"
                 aria-label="Close dialog"
-                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring prenta-touch-target mobile:h-11 mobile:w-11 flex items-center justify-center rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
               >
                 <X className="h-4 w-4" aria-hidden />
               </button>
             </Dialog.Close>
           </div>
           {description && (
-            <Dialog.Description className="text-muted-foreground px-6 pt-4 text-sm">
+            <Dialog.Description className="text-muted-foreground mobile:px-4 shrink-0 px-6 pt-4 text-sm">
               {description}
             </Dialog.Description>
           )}
-          <div className={scrollBody ? 'min-h-0 flex-1 overflow-y-auto px-6 py-4' : 'px-6 py-4'}>
+          <div
+            className={`${scrollBody ? 'min-h-0 flex-1 overflow-y-auto' : ''} mobile:min-h-0 mobile:flex-1 mobile:overflow-y-auto mobile:px-4 px-6 py-4`}
+          >
             {children}
           </div>
           {actions && (
-            <div className="border-border flex justify-end gap-2 border-t px-6 py-4">{actions}</div>
+            <div className="border-border mobile:px-4 mobile:py-3 mobile:[&>*]:min-h-11 mobile:[&>*]:flex-[1_1_0] flex shrink-0 justify-end gap-2 border-t px-6 py-4">
+              {actions}
+            </div>
           )}
         </Dialog.Content>
       </Dialog.Portal>

package/src/components/ui/PageHeader.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+
+export interface PageHeaderProps {
+  /** Page title. It equals the screen's sidebar label. */
+  title: string
+  subtitle?: ReactNode
+  /** Right-aligned header actions (buttons, AI button, live toggle). */
+  actions?: ReactNode
+  /** A `<Breadcrumb>`, on second-level screens only. */
+  breadcrumb?: ReactNode
+  /**
+   * Drop the page gutter padding, for screens whose wrapper already pads the
+   * content (the kit's Jobs and Appearance layouts, `padding: 22px 28px`).
+   */
+  flush?: boolean
+}
+
+/**
+ * Page title row (SHELL.md §4): padding 14px var(--gut) 0; title 21 / 700 /
+ * -0.5px; subtitle 13px --sub, max 640px; actions right-aligned, gap 8.
+ *
+ * Tiers (cms-layouts.css): the title is 19px at tablet, 18px on mobile and
+ * 26px at 4K; the subtitle 12.5px on mobile, 14.5px at 4K, and a plain-text
+ * subtitle hides below 461px. On mobile the actions wrap under the title
+ * (row gap 10px). The actions cluster is `data-header-actions`, so its
+ * buttons collapse to icons at tablet and mobile and its `data-fab` action
+ * floats on mobile (responsive.css).
+ */
+export function PageHeader({
+  title,
+  subtitle,
+  actions,
+  breadcrumb,
+  flush = false,
+}: PageHeaderProps) {
+  return (
+    <header
+      className={`mobile:gap-y-2.5 flex flex-wrap items-start gap-4 ${flush ? '' : 'px-[var(--gut)] pt-3.5'}`}
+    >
+      <div className="min-w-0 flex-[1_1_360px]">
+        {breadcrumb ? <div className="mb-1">{breadcrumb}</div> : null}
+        <h1 className="text-page text-txt tablet:text-[19px] mobile:text-[18px] 4k:text-[26px] m-0 leading-[normal]">
+          {title}
+        </h1>
+        {typeof subtitle === 'string' ? (
+          <p className="text-body text-sub mobile:text-[12.5px] 4k:text-[14.5px] m-0 mt-[3px] max-w-[640px] leading-[normal] text-pretty [@media(width<461px)]:hidden">
+            {subtitle}
+          </p>
+        ) : subtitle ? (
+          // Rich subtitles (status pills, presence) may hold block elements.
+          <div className="text-body text-sub mobile:text-[12.5px] 4k:text-[14.5px] mt-[3px] flex flex-wrap items-center gap-3 leading-[normal]">
+            {subtitle}
+          </div>
+        ) : null}
+      </div>
+      {actions ? (
+        <div data-header-actions="" className="ml-auto flex flex-wrap items-center gap-2">
+          {actions}
+        </div>
+      ) : null}
+    </header>
+  )
+}

package/src/components/ui/RowActions.tsx

@@ -6,11 +6,16 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react'
  * Design-system table row actions (`.row-actions` / `.ra-icon-btn`): a
  * right-aligned cluster of 27px bordered icon buttons that fades in on row
  * hover (the row must have the `group` class) and on keyboard focus.
+ *
+ * At 1024px and below, and on screens that can't hover, the actions are
+ * always shown (cms-layouts.css): there is no hover to reveal them. On a
+ * mobile card they line up at the start of its actions row, 44px each
+ * (responsive.css); on touch screens they are 44px everywhere.
  */
 export function RowActions({ children, className }: { children: ReactNode; className?: string }) {
   return (
     <div
-      className={`flex items-center justify-end gap-1 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100 focus-within:opacity-100 ${className ?? ''}`}
+      className={`narrow:opacity-100 mobile:justify-start flex items-center justify-end gap-1 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100 ${className ?? ''}`}
     >
       {children}
     </div>
@@ -37,7 +42,7 @@ export function RowActionButton({
   return (
     <button
       type="button"
-      className={`flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+      className={`prenta-touch-target flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
         danger
           ? 'hover:border-[var(--err)] hover:bg-[var(--err-l)] hover:text-[var(--err)]'
           : 'hover:border-[var(--acc-m)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)]'

package/src/components/ui/Segmented.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useRef, type KeyboardEvent } from 'react'
+
+export interface SegmentedOption {
+  id: string
+  label: string
+  count?: number
+}
+
+export interface SegmentedProps {
+  options: SegmentedOption[]
+  value: string
+  onChange: (id: string) => void
+  /** Accessible name for the control. */
+  label: string
+  /** Optional counts by option id; an option's own `count` wins. */
+  counts?: Record<string, number | undefined>
+  className?: string
+}
+
+/**
+ * Segmented control (SHELL.md §6, `.jb-seg`). The active segment is a raised
+ * card, not a filled accent. Arrow keys, Home and End move between segments.
+ */
+export function Segmented({
+  options,
+  value,
+  onChange,
+  label,
+  counts,
+  className = '',
+}: SegmentedProps) {
+  const refs = useRef<Array<HTMLButtonElement | null>>([])
+  // Roving tab stop only: with no matching value no option is selected, but
+  // the first one still takes focus.
+  const selectedIndex = Math.max(
+    0,
+    options.findIndex((option) => option.id === value),
+  )
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const last = options.length - 1
+    let next: number
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+      next = selectedIndex === last ? 0 : selectedIndex + 1
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+      next = selectedIndex === 0 ? last : selectedIndex - 1
+    else if (event.key === 'Home') next = 0
+    else if (event.key === 'End') next = last
+    else return
+    event.preventDefault()
+    const option = options[next]
+    if (!option) return
+    onChange(option.id)
+    refs.current[next]?.focus()
+  }
+
+  return (
+    <div
+      role="tablist"
+      aria-label={label}
+      onKeyDown={onKeyDown}
+      className={`rounded-9 border-bdr bg-bg inline-flex w-fit max-w-full gap-0.5 overflow-x-auto border p-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${className}`}
+    >
+      {options.map((option, index) => {
+        const selected = option.id === value
+        const count = option.count ?? counts?.[option.id]
+        return (
+          <button
+            key={option.id}
+            ref={(el) => {
+              refs.current[index] = el
+            }}
+            type="button"
+            role="tab"
+            aria-selected={selected}
+            tabIndex={index === selectedIndex ? 0 : -1}
+            onClick={() => onChange(option.id)}
+            className={`rounded-7 text-sm2 flex cursor-pointer items-center gap-1.5 border-0 px-[11px] py-[5px] leading-[normal] font-semibold whitespace-nowrap ${
+              selected ? 'bg-card text-txt shadow-shd' : 'text-sub hover:text-txt bg-transparent'
+            }`}
+          >
+            {option.label}
+            {typeof count === 'number' ? (
+              <b
+                className={`text-micro font-bold tabular-nums ${selected ? 'text-acc' : 'text-faint'}`}
+              >
+                {count}
+              </b>
+            ) : null}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/ui/Toaster.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { isValidElement, useEffect } from 'react'
+import { Toaster as SonnerToaster, toast } from 'sonner'
+
+/** Kit toast lifetime (SHELL.md §7: auto-hides after 2–2.6s). */
+const TOAST_DURATION_MS = 2400
+/**
+ * Errors and warnings (the kit shows none) often carry a server message;
+ * 2.4s is too short to read one.
+ */
+const ALERT_TOAST_DURATION_MS = 6000
+
+type ToastFn = typeof toast.error
+type PromiseFn = typeof toast.promise
+type PromiseData = NonNullable<Parameters<PromiseFn>[1]>
+
+/**
+ * `toast.promise`'s `error` option, resolved to settings with the longer
+ * lifetime. A `duration` the caller set, on the error result or for the whole
+ * promise toast, still wins.
+ */
+function longerError(
+  error: PromiseData['error'],
+  callerDuration: number | undefined,
+): PromiseData['error'] {
+  const duration = callerDuration ?? ALERT_TOAST_DURATION_MS
+  const withDuration = (result: unknown) =>
+    typeof result === 'object' && result !== null && !isValidElement(result)
+      ? { duration, ...result }
+      : { message: result, duration }
+  if (error === undefined) return undefined
+  return (async (reason: unknown) =>
+    withDuration(
+      typeof error === 'function' ? await (error as (reason: unknown) => unknown)(reason) : error,
+    )) as PromiseData['error']
+}
+
+let installs = 0
+let installed: {
+  originals: { error: ToastFn; warning: ToastFn; promise: PromiseFn }
+  wrappers: { error: ToastFn; warning: ToastFn; promise: PromiseFn }
+} | null = null
+
+/**
+ * Sonner has no per-type default duration, so while an admin toaster is
+ * mounted, `toast.error`, `toast.warning` and the error state of
+ * `toast.promise` default to the longer lifetime. A duration passed by the
+ * caller still wins. Installed once however many toasters mount, and on the
+ * last unmount each function is restored only if ours is still in place.
+ */
+function useAlertDurations() {
+  useEffect(() => {
+    if (installs++ === 0) {
+      const originals = { error: toast.error, warning: toast.warning, promise: toast.promise }
+      const longer =
+        (fn: ToastFn): ToastFn =>
+        (message, data) =>
+          fn(message, { duration: ALERT_TOAST_DURATION_MS, ...data })
+      const promise = ((p, data) =>
+        originals.promise(
+          p,
+          data && { ...data, error: longerError(data.error, data.duration) },
+        )) as PromiseFn
+      const wrappers = {
+        error: longer(originals.error),
+        warning: longer(originals.warning),
+        promise,
+      }
+      Object.assign(toast, wrappers)
+      installed = { originals, wrappers }
+    }
+    return () => {
+      if (--installs > 0 || !installed) return
+      const { originals, wrappers } = installed
+      for (const key of ['error', 'warning', 'promise'] as const) {
+        if (toast[key] === wrappers[key]) Object.assign(toast, { [key]: originals[key] })
+      }
+      installed = null
+    }
+  }, [])
+}
+
+// Above the mobile tab bar and the home indicator. sonner switches to
+// `mobileOffset` at 600px and below, where its own gap is 16px and a toast
+// is as wide as the screen, so it also clears a floating action button
+// (`--fab-clear`, set in responsive.css while a page has one). Wider than
+// that, a centred 356px toast doesn't reach the FAB's corner.
+const ABOVE_TAB_BAR = 'var(--tabbar-h) + env(safe-area-inset-bottom)'
+
+/**
+ * The admin's toast host: sonner, unstyled, painted as the kit toast
+ * (SHELL.md §7, `.jb-toast`): fixed 24px above the bottom, centred, --txt
+ * background with --bg text, padding 10px 16px, radius 9, 13px / 500.
+ * Call sites keep using `toast()` from `sonner`.
+ *
+ * `aboveTabBar`: lift the toasts clear of the mobile tab bar.
+ */
+export function Toaster({ aboveTabBar = false }: { aboveTabBar?: boolean } = {}) {
+  useAlertDurations()
+  return (
+    <SonnerToaster
+      position="bottom-center"
+      offset={aboveTabBar ? { bottom: `calc(${ABOVE_TAB_BAR} + 24px)` } : 24}
+      mobileOffset={
+        aboveTabBar
+          ? { bottom: `calc(${ABOVE_TAB_BAR} + 16px + var(--fab-clear, 0px))` }
+          : undefined
+      }
+      duration={TOAST_DURATION_MS}
+      // Inline, because sonner's injected stylesheet is unlayered and would beat
+      // utilities: the admin font (it sets a system stack) and the kit toast layer.
+      style={{ fontFamily: 'inherit', zIndex: 'var(--z-toast)' }}
+      toastOptions={{
+        unstyled: true,
+        classNames: {
+          // `prenta-inverse`: focus rings on the dark toast use --bg. Toasts
+          // stacked behind the front one hide their content, as sonner's own
+          // styles do for styled toasts.
+          toast:
+            'prenta-inverse right-0 left-0 mx-auto flex w-fit max-w-[calc(100vw-32px)] items-center gap-2 rounded-9 bg-txt px-4 py-2.5 text-body leading-[normal] font-medium text-bg shadow-shd2 [&[data-expanded=false][data-front=false]>*]:opacity-0',
+          content: 'flex min-w-0 flex-col gap-0.5',
+          description: 'text-meta opacity-80',
+          // Unstyled sonner drops the icon slot's box; loading spinners need it.
+          icon: 'relative flex size-4 shrink-0 items-center justify-center text-bg',
+          // The kit toast is text only. Success and info drop sonner's icon;
+          // error and warning (which the kit doesn't show) keep theirs.
+          success: '[&_[data-icon]]:hidden!',
+          info: '[&_[data-icon]]:hidden!',
+          actionButton:
+            'ml-1 inline-flex h-7 shrink-0 cursor-pointer items-center rounded-7 border-0 bg-acc px-2.5 text-meta font-semibold text-acc-on hover:brightness-[1.07]',
+          cancelButton:
+            'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-7 border-0 bg-transparent px-2.5 text-meta font-semibold text-bg opacity-85 hover:opacity-100 focus-visible:opacity-100',
+          closeButton: 'text-bg',
+        },
+      }}
+    />
+  )
+}

package/src/components/ui/Toggle.tsx

@@ -1,21 +1,23 @@
 'use client'
 
-import * as Switch from '@radix-ui/react-switch'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
 import { cv, type VariantProps } from '../../lib/cv.js'
 
+// Kit switch (SHELL.md §7, `.ap-sw`): 34×19 track, 15px knob at left 2px
+// (17px when on), .15s. Radix renders role="switch" with aria-checked.
 const toggleTrack = cv(
-  'relative inline-block shrink-0 cursor-pointer rounded-[var(--r-pill)] border-0 p-0 transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  // `prenta-touch-hit` grows the hit area to 44px on touch without stretching the track.
+  'prenta-touch-hit rounded-pill relative inline-block shrink-0 cursor-pointer border-0 p-0 transition-[background-color] duration-[var(--mo-base)] disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
         /** Design system default — accent when on. */
-        accent: 'bg-[var(--bdr)] data-[state=checked]:bg-[var(--acc)]',
+        accent: 'bg-bdr data-[state=checked]:bg-acc',
         /** Semantic enable/disable — success green when on (tables, script tags). */
-        enabled: 'bg-[var(--bdr)] data-[state=checked]:bg-[var(--suc)]',
+        enabled: 'bg-bdr data-[state=checked]:bg-suc',
       },
       size: {
-        /** Matches `.tog-track` in the design system handoff (38×21). */
-        md: 'h-[21px] w-[38px]',
+        md: 'h-[19px] w-[34px]',
       },
     },
     defaultVariants: {
@@ -26,12 +28,11 @@ const toggleTrack = cv(
 )
 
 const toggleThumb = cv(
-  'pointer-events-none absolute top-[2.5px] left-[2.5px] block rounded-full bg-[var(--toggle-thumb)] shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-[left] duration-[var(--motion-base)] data-[state=checked]:left-[19.5px]',
+  'shadow-knob pointer-events-none absolute top-0.5 left-0.5 block rounded-full bg-[var(--toggle-thumb)] transition-[left] duration-[var(--mo-base)]',
   {
     variants: {
       size: {
-        /** Matches `.tog-thumb` in the design system handoff (16×16). */
-        md: 'h-4 w-4',
+        md: 'h-[15px] w-[15px] data-[state=checked]:left-[17px]',
       },
     },
     defaultVariants: {
@@ -53,8 +54,8 @@ export interface ToggleProps extends ToggleVariants {
 }
 
 /**
- * Design-system toggle (`.tog-track` / `.tog-thumb`). Use `variant="enabled"`
- * for on/off tables where green communicates active state.
+ * Design-system switch (`role="switch"`). Use `variant="enabled"` for on/off
+ * tables where green communicates active state. Also exported as `Switch`.
  */
 export function Toggle({
   checked,
@@ -68,7 +69,7 @@ export function Toggle({
   'aria-describedby': ariaDescribedBy,
 }: ToggleProps) {
   return (
-    <Switch.Root
+    <SwitchPrimitive.Root
       id={id}
       checked={checked}
       onCheckedChange={onCheckedChange}
@@ -78,7 +79,10 @@ export function Toggle({
       aria-describedby={ariaDescribedBy}
       className={toggleTrack({ variant, size })}
     >
-      <Switch.Thumb className={toggleThumb({ size })} />
-    </Switch.Root>
+      <SwitchPrimitive.Thumb className={toggleThumb({ size })} />
+    </SwitchPrimitive.Root>
   )
 }
+
+/** The kit's name for {@link Toggle}. */
+export { Toggle as Switch }