@prenta/admin 2.6.1 → 2.7.0

package/src/components/ui/UnderlineTabs.tsx

@@ -0,0 +1,373 @@
+'use client'
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+export interface UnderlineTab {
+  id: string
+  label: string
+  /** Leading icon, 15px (Settings and Form Settings tabs). */
+  icon?: ReactNode
+  count?: number
+  /** Trailing badge, e.g. a "Live" pill. Rendered after the count. */
+  badge?: ReactNode
+}
+
+export interface UnderlineTabsProps {
+  tabs: UnderlineTab[]
+  value: string
+  onChange: (id: string) => void
+  /** Accessible name for the tab list. */
+  label: string
+  /**
+   * Prefix for the tab and panel ids. Pass the same value to `UnderlineTabPanel`
+   * so each tab's `aria-controls` points at its panel. Defaults to a generated id.
+   */
+  idBase?: string
+  /**
+   * `page` is a page-level strip (Settings.html `.pg-tabs`): 13px / 500 tabs
+   * in `--muted`, 10px 16px, no gap. `drawer` is the Jobs drawer's `.jd-tabs`:
+   * 9px 11px with a 6px gap and no divider of its own, because the drawer
+   * header draws the line under it (its edges still fade when tabs are
+   * hidden, as every strip's do). The default is SHELL.md §6: 13px / 600
+   * in `--sub`, 10px 12px.
+   */
+  variant?: 'default' | 'page' | 'drawer'
+  /** Classes for the scrolling strip (e.g. the page gutter as padding). */
+  className?: string
+}
+
+function underlineTabId(idBase: string, tabId: string) {
+  return `${idBase}-tab-${tabId}`
+}
+
+function underlineTabPanelId(idBase: string, tabId: string) {
+  return `${idBase}-panel-${tabId}`
+}
+
+/** Width of each edge fade (SHELL.md §6), and the room a revealed tab keeps from it. */
+const FADE = 48
+
+// Each edge with hidden tabs fades out over 48px. Written out in full so
+// Tailwind sees the classes.
+const MASKS = {
+  end: '[mask-image:linear-gradient(90deg,black_calc(100%-48px),transparent)]',
+  start: '[mask-image:linear-gradient(90deg,transparent,black_48px)]',
+  both: '[mask-image:linear-gradient(90deg,transparent,black_48px,black_calc(100%-48px),transparent)]',
+} as const
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
+interface Overflow {
+  /** Tabs are hidden to the left. */
+  start: boolean
+  /** Tabs are hidden to the right. */
+  end: boolean
+}
+
+/**
+ * Underline tabs (SHELL.md §6). The active mark is `box-shadow: inset 0 -2px 0`,
+ * never a border with a negative margin, so the strip can scroll without a
+ * vertical scrollbar. Arrow keys, Home and End move between tabs.
+ *
+ * When the tabs don't fit, the strip scrolls with its scrollbar hidden, and
+ * each edge that hides tabs fades out over 48px. The kit fades the right edge
+ * at ≤1280px unless the last tab is active; here the fade follows what is
+ * actually hidden, so it also shows on wide screens with more tabs and goes
+ * once the strip is scrolled to its end. Over each fade sits a chevron button
+ * that scrolls the strip for mouse users without a horizontal wheel; keyboard
+ * and screen-reader users reach every tab through the tab list itself, so the
+ * buttons are `aria-hidden` and out of the Tab order.
+ */
+export function UnderlineTabs({
+  tabs,
+  value,
+  onChange,
+  label,
+  idBase,
+  variant = 'default',
+  className = '',
+}: UnderlineTabsProps) {
+  const generatedId = useId()
+  const base = idBase ?? generatedId
+  const listRef = useRef<HTMLDivElement | null>(null)
+  const refs = useRef<Array<HTMLButtonElement | null>>([])
+  const [overflow, setOverflow] = useState<Overflow>({ start: false, end: false })
+  const matchIndex = tabs.findIndex((tab) => tab.id === value)
+  // Roving tab stop only: with no matching value no tab is selected, but the
+  // first one still takes focus.
+  const selectedIndex = Math.max(0, matchIndex)
+
+  const measure = useCallback(() => {
+    const list = listRef.current
+    if (!list) return
+    // 1px of slack for fractional widths at a zoom level.
+    const start = list.scrollLeft > 1
+    const end = list.scrollLeft + list.clientWidth < list.scrollWidth - 1
+    setOverflow((current) =>
+      current.start === start && current.end === end ? current : { start, end },
+    )
+  }, [])
+
+  /** Scroll the strip sideways (never the page) until `index` clears the fades. */
+  const reveal = useCallback(
+    (index: number) => {
+      const list = listRef.current
+      const tab = refs.current[index]
+      if (!list || !tab) return
+      const left = tab.offsetLeft - FADE
+      const right = tab.offsetLeft + tab.offsetWidth + FADE - list.clientWidth
+      if (list.scrollLeft > left) list.scrollLeft = Math.max(0, left)
+      else if (list.scrollLeft < right) list.scrollLeft = right
+      measure()
+    },
+    [measure],
+  )
+
+  /** `reveal` without the glide: on first paint and after the strip resizes. */
+  const revealNow = useCallback(
+    (index: number) => {
+      const list = listRef.current
+      if (!list) return
+      list.style.scrollBehavior = 'auto'
+      reveal(index)
+      list.style.scrollBehavior = ''
+    },
+    [reveal],
+  )
+
+  // The selected tab is in view on first paint (a deep link to the last
+  // Settings tab) and after every change, however it was chosen. The first
+  // reveal jumps; later ones follow the strip's scroll-behavior.
+  const revealed = useRef(false)
+  const selectedRef = useRef(matchIndex)
+  selectedRef.current = matchIndex
+  useIsomorphicLayoutEffect(() => {
+    if (matchIndex < 0) {
+      measure()
+      return
+    }
+    if (revealed.current) reveal(matchIndex)
+    else revealNow(matchIndex)
+    revealed.current = true
+  }, [matchIndex, reveal, revealNow, measure])
+
+  // Labels, counts and the window all change what fits. When the strip itself
+  // changes width (a rotated tablet, a resized window, a late web font), the
+  // selected tab is brought back clear of the fades. Keyed on the tab ids, not
+  // the array, so callers that build `tabs` inline don't re-observe on every
+  // render.
+  const tabKey = tabs.map((tab) => tab.id).join('\n')
+  useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    let width = list.clientWidth
+    const observer = new ResizeObserver(() => {
+      measure()
+      if (list.clientWidth === width) return
+      width = list.clientWidth
+      if (selectedRef.current >= 0) revealNow(selectedRef.current)
+    })
+    observer.observe(list)
+    for (const tab of refs.current) if (tab) observer.observe(tab)
+    return () => observer.disconnect()
+  }, [tabKey, measure, revealNow])
+
+  // A scroll button stays under the pointer after its edge runs out (inert
+  // and invisible) until the pointer leaves, so the second click of a quick
+  // double click can't land on the tab beneath it.
+  const [hovered, setHovered] = useState<'start' | 'end' | null>(null)
+
+  function scrollByPage(direction: -1 | 1) {
+    const list = listRef.current
+    if (!list) return
+    // `scrollBy` without a behaviour follows the strip's CSS scroll-behavior,
+    // so reduced motion (system or the Appearance setting) skips the glide.
+    list.scrollBy({ left: direction * Math.max(list.clientWidth - 2 * FADE, FADE) })
+  }
+
+  /** Selecting the open tab again is not a change (no extra history entry). */
+  function select(id: string) {
+    if (id !== value) onChange(id)
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    // Alt+Left and Alt+Right are the browser's Back and Forward.
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+    const last = tabs.length - 1
+    let next: number
+    if (event.key === 'ArrowRight') next = selectedIndex === last ? 0 : selectedIndex + 1
+    else if (event.key === 'ArrowLeft') 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 tab = tabs[next]
+    if (!tab) return
+    select(tab.id)
+    refs.current[next]?.focus({ preventScroll: true })
+    reveal(next)
+  }
+
+  const mask =
+    overflow.start && overflow.end
+      ? MASKS.both
+      : overflow.start
+        ? MASKS.start
+        : overflow.end
+          ? MASKS.end
+          : ''
+  const page = variant === 'page'
+  const drawer = variant === 'drawer'
+
+  return (
+    <div className="relative min-w-0">
+      <div
+        ref={listRef}
+        role="tablist"
+        aria-label={label}
+        onKeyDown={onKeyDown}
+        onScroll={measure}
+        data-overflow-start={overflow.start || undefined}
+        data-overflow-end={overflow.end || undefined}
+        // Forced colors drop box-shadows: there the divider is a border.
+        className={`relative flex scroll-px-12 overflow-x-auto overflow-y-hidden [scrollbar-width:none] motion-safe:scroll-smooth [&::-webkit-scrollbar]:hidden ${
+          drawer ? '' : 'shadow-[inset_0_-1px_0_var(--bdr)] forced-colors:border-b'
+        } ${page ? '' : 'gap-0.5'} ${mask} ${className}`}
+      >
+        {tabs.map((tab, index) => {
+          const selected = tab.id === value
+          return (
+            <button
+              key={tab.id}
+              ref={(el) => {
+                refs.current[index] = el
+              }}
+              id={underlineTabId(base, tab.id)}
+              type="button"
+              role="tab"
+              aria-selected={selected}
+              // Only when the caller renders panels (it passed `idBase`); a
+              // dangling aria-controls is an a11y error.
+              aria-controls={idBase ? underlineTabPanelId(idBase, tab.id) : undefined}
+              tabIndex={index === selectedIndex ? 0 : -1}
+              onClick={() => select(tab.id)}
+              // 40px on phones and 44px on touch screens (cms-layouts.css).
+              // Forced colors drop the inset mark, so the selected tab gets an
+              // outline there, as the current nav row does.
+              className={`text-body prenta-touch-target mobile:min-h-10 flex shrink-0 cursor-pointer items-center border-0 bg-transparent leading-[normal] whitespace-nowrap ${
+                page
+                  ? 'gap-[7px] px-4 py-2.5 font-medium'
+                  : drawer
+                    ? 'gap-1.5 px-[11px] py-[9px] font-semibold'
+                    : 'gap-[7px] px-3 py-2.5 font-semibold'
+              } ${
+                selected
+                  ? 'text-acc shadow-[inset_0_-2px_0_var(--acc)] forced-colors:outline-2 forced-colors:-outline-offset-2 forced-colors:outline-solid'
+                  : `${page ? 'text-faint' : 'text-sub'} hover:text-txt`
+              }`}
+            >
+              {tab.icon ? (
+                <span aria-hidden="true" className="flex [&>svg]:h-[15px] [&>svg]:w-[15px]">
+                  {tab.icon}
+                </span>
+              ) : null}
+              {tab.label}
+              {typeof tab.count === 'number' ? (
+                <span
+                  className={`rounded-pill text-count px-1.5 py-px font-semibold tabular-nums ${
+                    selected ? 'bg-acc-l text-acc' : 'bg-bg text-sub'
+                  }`}
+                >
+                  {tab.count}
+                </span>
+              ) : null}
+              {tab.badge}
+            </button>
+          )
+        })}
+      </div>
+      {(['start', 'end'] as const).map((side) =>
+        overflow[side] || hovered === side ? (
+          <ScrollButton
+            key={side}
+            side={side}
+            active={overflow[side]}
+            onClick={() => scrollByPage(side === 'start' ? -1 : 1)}
+            onHover={(over) => setHovered(over ? side : null)}
+          />
+        ) : null,
+      )}
+    </div>
+  )
+}
+
+/**
+ * A chevron over one edge's fade that scrolls the strip for mouse users.
+ * Inactive, it is invisible and swallows clicks until the pointer leaves.
+ */
+function ScrollButton({
+  side,
+  active,
+  onClick,
+  onHover,
+}: {
+  side: 'start' | 'end'
+  active: boolean
+  onClick: () => void
+  onHover: (over: boolean) => void
+}) {
+  const Icon = side === 'start' ? ChevronLeft : ChevronRight
+  return (
+    <button
+      type="button"
+      aria-hidden="true"
+      tabIndex={-1}
+      data-tabs-scroll={side}
+      data-inactive={active ? undefined : ''}
+      // Keep focus where it is: a hidden control must not take it.
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={active ? onClick : undefined}
+      onPointerEnter={() => onHover(true)}
+      onPointerLeave={() => onHover(false)}
+      className={`text-sub hover:text-acc absolute inset-y-0 flex w-6 items-center justify-center border-0 bg-transparent p-0 ${
+        active ? 'cursor-pointer' : 'cursor-default opacity-0'
+      } ${side === 'start' ? 'left-0' : 'right-0'}`}
+    >
+      <Icon size={16} strokeWidth={1.8} />
+    </button>
+  )
+}
+
+export interface UnderlineTabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  /** Same `idBase` as the `UnderlineTabs` it belongs to. */
+  idBase: string
+  tabId: string
+}
+
+/** The panel for one underline tab: `role="tabpanel"`, labelled by its tab. */
+export function UnderlineTabPanel({ idBase, tabId, children, ...rest }: UnderlineTabPanelProps) {
+  return (
+    <div
+      role="tabpanel"
+      id={underlineTabPanelId(idBase, tabId)}
+      aria-labelledby={underlineTabId(idBase, tabId)}
+      tabIndex={0}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/ui/UnsavedBar.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+export interface UnsavedBarProps {
+  dirty: boolean
+  onDiscard: () => void
+  onSave: () => void
+  /** Message on the left. Defaults to "Unsaved changes". */
+  label?: string
+  saving?: boolean
+  /** Blocks Save while the form is invalid or the user can't edit. */
+  saveDisabled?: boolean
+  saveLabel?: string
+  discardLabel?: string
+  /**
+   * `floating` (default): the dark pill (SHELL.md §7, `.ap-bar`).
+   * `card`: the Settings bar (Settings.html `.ap-save`), a full-width card
+   * pinned to the bottom with a warning dot beside the note.
+   */
+  variant?: 'floating' | 'card'
+}
+
+// Bar buttons (`.ap-bar .ap-btn`): 32px, 0 12px, radius 8, 13px / 550.
+const BAR_BUTTON =
+  'rounded-8 text-body inline-flex h-8 cursor-pointer items-center gap-[7px] border border-transparent px-3 leading-[normal] font-[550] whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-45'
+
+/**
+ * Unsaved-changes bar. Renders only while the form is dirty, plus an always
+ * mounted, visually hidden live region: a region inserted together with its
+ * text is usually not announced, so the text changes inside one that exists.
+ */
+export function UnsavedBar({
+  dirty,
+  onDiscard,
+  onSave,
+  label = 'Unsaved changes',
+  saving = false,
+  saveDisabled = false,
+  saveLabel = 'Save',
+  discardLabel = 'Discard',
+  variant = 'floating',
+}: UnsavedBarProps) {
+  // `fixed`, not sr-only's `absolute`: an absolute box with no positioned
+  // ancestor sits at its static position in the admin root, and at the end of
+  // a long tab it stretched the root's scroll area (the whole shell scrolled).
+  const live = (
+    <span className="sr-only fixed! top-0 left-0" role="status" aria-live="polite">
+      {dirty ? label : ''}
+    </span>
+  )
+  if (!dirty) return live
+
+  if (variant === 'card') {
+    return (
+      <>
+        {live}
+        <div
+          role="region"
+          aria-label="Unsaved changes"
+          className="rounded-12 border-bdr bg-card shadow-save sticky bottom-0 z-[5] mt-[22px] flex items-center justify-between gap-3 border px-4 py-[13px]"
+        >
+          <span className="text-meta text-sub flex items-center gap-2 leading-[normal]">
+            <span className="bg-warn h-[7px] w-[7px] shrink-0 rounded-full" aria-hidden />
+            {label}
+          </span>
+          <span className="flex items-center gap-2.5">
+            {/* Settings.html `.btn-ghost` and `.btn-p`. */}
+            <button
+              type="button"
+              onClick={onDiscard}
+              disabled={saving}
+              className="prenta-touch-target rounded-7 text-sm2 text-sub hover:bg-acc-l hover:text-acc inline-flex cursor-pointer items-center gap-[5px] border-0 bg-transparent px-2.5 py-1.5 leading-[normal] whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              {discardLabel}
+            </button>
+            <button
+              type="button"
+              onClick={onSave}
+              disabled={saving || saveDisabled}
+              aria-busy={saving || undefined}
+              className="prenta-touch-target rounded-8 text-body bg-acc text-acc-on inline-flex cursor-pointer items-center gap-1.5 border-0 px-4 py-2 leading-[normal] font-medium whitespace-nowrap hover:opacity-88 disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              {saving ? 'Saving…' : saveLabel}
+            </button>
+          </span>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {live}
+      <div
+        role="region"
+        aria-label="Unsaved changes"
+        className="prenta-inverse rounded-12 bg-txt text-body text-bg shadow-bar sticky bottom-4 z-[var(--z-bar)] ml-auto flex w-[min(520px,100%)] items-center gap-2.5 py-2.5 pr-2.5 pl-4 leading-[normal] font-[550]"
+      >
+        <span className="min-w-0 flex-1">{label}</span>
+        <button
+          type="button"
+          onClick={onDiscard}
+          disabled={saving}
+          className={`${BAR_BUTTON} text-bg bg-transparent opacity-85 hover:bg-[color-mix(in_srgb,var(--bg)_8%,transparent)] hover:opacity-100 focus-visible:opacity-100`}
+        >
+          {discardLabel}
+        </button>
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={saving || saveDisabled}
+          aria-busy={saving || undefined}
+          className={`${BAR_BUTTON} bg-acc text-acc-on hover:brightness-[1.06]`}
+        >
+          {saving ? 'Saving…' : saveLabel}
+        </button>
+      </div>
+    </>
+  )
+}

package/src/components/ui/admin-links.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+export interface AdminLinks {
+  /** Absolute URL for an admin path (adds the admin base path). */
+  href: (path: string) => string
+  /** In-app navigation; plain clicks on admin links go through it. */
+  navigate?: (path: string) => void
+}
+
+const AdminLinksContext = createContext<AdminLinks>({ href: (path) => path })
+
+/** Provided by `AdminRoot` from its router. */
+export const AdminLinksProvider = AdminLinksContext.Provider
+
+/** Build real hrefs for admin paths, so links can open in a new tab. */
+export function useAdminLinks(): AdminLinks {
+  return useContext(AdminLinksContext)
+}

package/src/components/ui/card-table.ts

@@ -0,0 +1,34 @@
+/**
+ * Attributes for a list table that renders as cards on mobile
+ * (`table[data-cards]` in responsive.css, cms-layouts.css in the kit).
+ *
+ * Spread them on the table's own elements:
+ *
+ *   <table {...cardTable}>
+ *     <thead {...cardRowGroup}><tr {...cardRow}><th {...cardColumnHeader}>…
+ *     <tbody {...cardRowGroup}>
+ *       <tr {...cardRow}>
+ *         <td {...cardCell({ role: 'check' })}>…</td>
+ *         <td {...cardCell({ role: 'title' })}>…</td>
+ *         <td {...cardCell({ label: 'Status' })}>…</td>
+ *         <td {...cardCell({ role: 'actions' })}>…</td>
+ *
+ * The explicit table roles keep the semantics when the card layout changes
+ * the elements' `display` (some engines drop them otherwise). A cell's
+ * `label` is its column's visible header, shown before the value on a card.
+ */
+export const cardTable = { 'data-cards': '', role: 'table' } as const
+export const cardRowGroup = { role: 'rowgroup' } as const
+export const cardRow = { role: 'row' } as const
+export const cardColumnHeader = { role: 'columnheader' } as const
+
+/** How a cell sits on its card: see `table[data-cards]` in responsive.css. */
+export type CardCellRole = 'title' | 'check' | 'actions' | 'media'
+
+export function cardCell({ label, role }: { label?: string; role?: CardCellRole } = {}) {
+  return {
+    role: 'cell',
+    'data-label': label || undefined,
+    'data-role': role,
+  } as const
+}

package/src/components/virtual-window.tsx

@@ -29,18 +29,29 @@ export function useVirtualWindow(options: {
   scrollRef: RefObject<HTMLElement | null>
   estimateSize: number
   overscan?: number
+  /**
+   * `false` mounts every row with no padding. For layouts whose rows aren't
+   * `estimateSize` tall, such as list tables drawn as cards on mobile
+   * (`table[data-cards]`): rows are placed by the estimate, so taller rows
+   * would scroll past rows that were never mounted.
+   */
+  enabled?: boolean
 }): { rows: VirtualWindowRow[]; paddingTop: number; paddingBottom: number } {
-  const { count, scrollRef, estimateSize, overscan = 8 } = options
+  const { count, scrollRef, estimateSize, overscan = 8, enabled = true } = options
   const getScrollElement = useCallback(() => scrollRef.current, [scrollRef])
   const estimate = useCallback(() => estimateSize, [estimateSize])
   const virtualizer = useVirtualizer({
-    count,
+    count: enabled ? count : 0,
     getScrollElement,
     estimateSize: estimate,
     overscan,
     initialRect: { width: 1024, height: 640 },
   })
 
+  if (!enabled) {
+    return { rows: rowsInRange(0, count, estimateSize), paddingTop: 0, paddingBottom: 0 }
+  }
+
   const items = virtualizer.getVirtualItems()
   // Zero-height shells (happy-dom) report an empty range. Short lists stay
   // fully mounted. A 1k-row list still windows against the initial viewport

package/src/fields/RelationshipField.tsx

@@ -27,7 +27,7 @@ interface RelatedDoc {
 
 const STATUS_STYLES: Record<string, string> = {
   PUBLISHED: 'bg-success/10 text-success',
-  DRAFT: 'bg-warning/10 text-warning',
+  DRAFT: 'bg-warn-l text-warning',
   ARCHIVED: 'bg-muted text-muted-foreground',
   SCHEDULED: 'bg-info/10 text-info',
 }

package/src/hooks/useAppearanceBootstrap.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { useTheme } from '../components/ThemeProvider.js'
 import { appearanceApiToSnapshot, type AppearanceApiResponse } from '../lib/appearance-api.js'
@@ -15,6 +15,12 @@ import { cmsApi } from '../lib/api.js'
 export function useAppearanceBootstrap(session: unknown) {
   const { applyAppearance } = useTheme()
   const active = Boolean(session)
+  // Fetch once per sign-in. A new `applyAppearance` identity must not refetch
+  // and overwrite a change the user just made.
+  const applyRef = useRef(applyAppearance)
+  useEffect(() => {
+    applyRef.current = applyAppearance
+  }, [applyAppearance])
 
   useEffect(() => {
     if (!active) return
@@ -25,7 +31,7 @@ export function useAppearanceBootstrap(session: unknown) {
       try {
         const res = await cmsApi<AppearanceApiResponse>('/appearance')
         if (cancelled || res.error || !res.data) return
-        applyAppearance(appearanceApiToSnapshot(res.data))
+        applyRef.current(appearanceApiToSnapshot(res.data))
       } catch {
         /* keep localStorage / config fallbacks */
       }
@@ -36,5 +42,5 @@ export function useAppearanceBootstrap(session: unknown) {
     return () => {
       cancelled = true
     }
-  }, [active, applyAppearance])
+  }, [active])
 }

package/src/index.ts

@@ -118,6 +118,25 @@ export type { SharePreviewLinkDialogProps } from './components/SharePreviewLinkD
 export { MediaPickerModal } from './components/MediaPickerModal.js'
 export type { MediaPickerModalProps } from './components/MediaPickerModal.js'
 export { ThemeProvider, useTheme } from './components/ThemeProvider.js'
+export { PageHeader } from './components/ui/PageHeader.js'
+export type { PageHeaderProps } from './components/ui/PageHeader.js'
+export { Breadcrumb } from './components/ui/Breadcrumb.js'
+export type { BreadcrumbProps, BreadcrumbItem } from './components/ui/Breadcrumb.js'
+/** Gives `Breadcrumb` path items real hrefs (admin base path) outside `AdminRoot`. */
+export { AdminLinksProvider } from './components/ui/admin-links.js'
+export type { AdminLinks } from './components/ui/admin-links.js'
+export { CountChip } from './components/ui/CountChip.js'
+export type { CountChipProps } from './components/ui/CountChip.js'
+export { UnderlineTabs, UnderlineTabPanel } from './components/ui/UnderlineTabs.js'
+export type {
+  UnderlineTabsProps,
+  UnderlineTab,
+  UnderlineTabPanelProps,
+} from './components/ui/UnderlineTabs.js'
+export { Segmented } from './components/ui/Segmented.js'
+export type { SegmentedProps, SegmentedOption } from './components/ui/Segmented.js'
+export { UnsavedBar } from './components/ui/UnsavedBar.js'
+export type { UnsavedBarProps } from './components/ui/UnsavedBar.js'
 export { FocalPointPicker } from './components/FocalPointPicker.js'
 export { PresenceIndicator } from './components/PresenceIndicator.js'
 export { NotificationBell } from './components/NotificationBell.js'