@weasel-js/ui 1.7.3 → 1.8.0

package/dist/chunks/{Toast-C3ozq11V.js → Toast-CuHkT0x0.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./portalHost-CE70wLzo.js";
-import { t } from "./CloseButton-BmNmRVtb.js";
+import { t } from "./CloseButton-wb7Or5Eg.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useSyncExternalStore as c } from "react";
 import { Text as l, UNSTABLE_Toast as u, UNSTABLE_ToastContent as d, UNSTABLE_ToastList as f, UNSTABLE_ToastQueue as p, UNSTABLE_ToastRegion as m, UNSTABLE_ToastStateContext as h } from "react-aria-components";
@@ -167,4 +167,4 @@ function M({ queue: e, container: t, className: r, children: l }) {
 //#endregion
 export { D as a, T as i, S as n, C as r, j as t };
 
-//# sourceMappingURL=Toast-C3ozq11V.js.map
+//# sourceMappingURL=Toast-CuHkT0x0.js.map

package/dist/chunks/{Toast-C3ozq11V.js.map → Toast-CuHkT0x0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Toast-C3ozq11V.js","names":["toast","s","RACToast","RACToastContent","RACToastRegion","RACToastStateContext","RACToastList","useAssignedPortalContainer","DEFAULT_TTL_MS","activeToastTransitions","viewTransitionWrapUpdate","reduceMotion","root","vt","flushSync","fn","RAC_QUEUES","ToastQueue","UNSTABLE_ToastQueue","options","rac","id","existing","key","racOptions","ttlMs","createToastQueue","racQueueOf","queue","defaultToastQueue","tonedAdd","tone","title","toast$1","Toast_module_default","placementClass","toneClass","ToastRegion","props","assigned","portalContainer","classes","placement","className","renderToast","UNSTABLE_Toast","t","UNSTABLE_ToastContent","Text","CloseButton","doc","ContainedRegion","UNSTABLE_ToastRegion","subscribe","useCallback","snapshot","visibleToasts","useSyncExternalStore","state","useMemo","hovered","useRef","focused","lastFocused","updateTimers","setHovered","on","useEffect","createPortal","UNSTABLE_ToastStateContext","UNSTABLE_ToastList","children","container"],"sources":["../../src/components/Toast/queue.ts","../../src/components/Toast/Toast.module.css","../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { UNSTABLE_ToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\n\n/** Severity of a toast, driving its accent color and icon. */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\n/** Kit-owned payload rendered inside each toast. */\nexport interface ToastContent {\n  title: string;\n  description?: string;\n  tone: ToastTone;\n}\n\n/** Options for a single toast. */\nexport interface ToastOptions {\n  description?: string;\n  /**\n   * Auto-dismiss delay in ms. Default 8000. `null` — sticky until dismissed.\n   * Must be > 0; RAC treats 0 as no timer (sticky).\n   */\n  ttlMs?: number | null;\n  /** Stable identity: re-adding with the same id replaces the earlier toast. */\n  id?: string;\n}\n\nconst DEFAULT_TTL_MS = 8000;\n\n// Tracks overlapping toast-triggered view transitions so the `:root`\n// marker class survives until the *last* one settles.\nlet activeToastTransitions = 0;\n\n/**\n * RAC's sanctioned toast-animation hook: wrap every queue mutation in a\n * view transition so entry, exit, and the surviving stack's reflow all\n * animate (choreography lives in `toastViewTransitions.css`). Falls back\n * to a plain synchronous update when the browser lacks the API or the\n * user prefers reduced motion — i.e. exactly the pre-animation behavior.\n * The jsdom test environment always takes the fallback path.\n */\nfunction viewTransitionWrapUpdate(fn: () => void): void {\n  const reduceMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (typeof document === 'undefined' || !('startViewTransition' in document) || reduceMotion) {\n    fn();\n    return;\n  }\n  // The marker class scopes the CSS that un-names `:root` (keeps the rest\n  // of the page live and interactive during the transition) to\n  // toast-owned transitions only.\n  const root = document.documentElement;\n  activeToastTransitions++;\n  root.classList.add('wzl-toast-vt');\n  // flushSync: the DOM must reflect the queue change inside the\n  // transition callback, before the browser snapshots the new state.\n  const vt = document.startViewTransition(() => flushSync(fn));\n  // `ready` rejects when the browser skips the transition — routine under\n  // a rapid burst of toasts, where each new transition supersedes the\n  // in-flight one. The DOM update has still applied by then, but an\n  // untouched `ready` surfaces the rejection as a console error, so\n  // consume it.\n  vt.ready.catch(() => {});\n  void vt.finished.finally(() => {\n    if (--activeToastTransitions === 0) root.classList.remove('wzl-toast-vt');\n  });\n}\n\n// The wrapped RAC queue lives in a module-scoped WeakMap so the public\n// class surface carries no RAC (UNSTABLE_) types — see the design spec's\n// containment rule. `racQueueOf` below is the folder-internal accessor.\nconst RAC_QUEUES = new WeakMap<ToastQueue, UNSTABLE_ToastQueue<ToastContent>>();\n\n/**\n * Kit-owned toast queue. Create isolated instances with\n * `createToastQueue()` (tests, secondary roots); most apps use the\n * module-level `defaultToastQueue` via `toast()`.\n *\n * At most 5 toasts are visible at once; adding a 6th shows immediately\n * and hides the oldest (it returns when a slot frees, with its ttl\n * restarted).\n */\nexport class ToastQueue {\n  private keysById = new Map<string, string>();\n\n  constructor() {\n    RAC_QUEUES.set(\n      this,\n      new UNSTABLE_ToastQueue<ToastContent>({\n        maxVisibleToasts: 5,\n        wrapUpdate: viewTransitionWrapUpdate,\n      }),\n    );\n  }\n\n  add(tone: ToastTone, title: string, options: ToastOptions = {}): void {\n    const { description, ttlMs = DEFAULT_TTL_MS, id } = options;\n    const rac = RAC_QUEUES.get(this)!;\n    if (id !== undefined) {\n      const existing = this.keysById.get(id);\n      if (existing !== undefined) rac.close(existing);\n    }\n    let key: string;\n    const racOptions: { timeout?: number; onClose?: () => void } =\n      ttlMs === null ? {} : { timeout: ttlMs };\n    if (id !== undefined) {\n      racOptions.onClose = () => {\n        if (this.keysById.get(id) === key) this.keysById.delete(id);\n      };\n    }\n    key = rac.add({ title, description, tone }, racOptions);\n    if (id !== undefined) this.keysById.set(id, key);\n  }\n\n  /** Dismiss the toast previously added with this `id`. No-op if none is live. */\n  dismiss(id: string): void {\n    const key = this.keysById.get(id);\n    if (key !== undefined) RAC_QUEUES.get(this)!.close(key);\n  }\n\n  /** Dismiss every queued toast. */\n  clear(): void {\n    RAC_QUEUES.get(this)!.clear();\n    this.keysById.clear();\n  }\n}\n\n/**\n * Creates an independent toast queue. Most apps use the module-level\n * `defaultToastQueue` that `toast()` writes to; make your own when a surface\n * needs its own stack, and pass it to `ToastRegion`.\n */\nexport function createToastQueue(): ToastQueue {\n  return new ToastQueue();\n}\n\n/**\n * Folder-internal bridge to the wrapped RAC queue for `ToastRegion`.\n * Deliberately NOT exported from the Toast folder's `index.ts` — the\n * RAC toast surface is unstable and must not leak past this folder.\n */\nexport function racQueueOf(queue: ToastQueue): UNSTABLE_ToastQueue<ToastContent> {\n  return RAC_QUEUES.get(queue)!;\n}\n\n/** Module-level default queue used by `toast()` and `<ToastRegion>`. */\nexport const defaultToastQueue = createToastQueue();\n\ntype ToastFn = {\n  (title: string, options?: ToastOptions): void;\n  info(title: string, options?: ToastOptions): void;\n  success(title: string, options?: ToastOptions): void;\n  warning(title: string, options?: ToastOptions): void;\n  error(title: string, options?: ToastOptions): void;\n};\n\nfunction tonedAdd(tone: ToastTone) {\n  return (title: string, options?: ToastOptions) => defaultToastQueue.add(tone, title, options);\n}\n\n/** Imperative convenience over `defaultToastQueue`. Bare `toast(...)` is `info`. */\nexport const toast: ToastFn = Object.assign(tonedAdd('info'), {\n  info: tonedAdd('info'),\n  success: tonedAdd('success'),\n  warning: tonedAdd('warning'),\n  error: tonedAdd('error'),\n});\n",".region {\n  position: fixed;\n  z-index: 1100;\n  display: flex;\n  /* RAC unshifts new toasts to the front of the DOM (newest-first), and the\n   * ol/li wrappers are display:contents, so the flex direction alone\n   * decides which end of the stack the newest toast lands on. Base\n   * (bottom corners): column-reverse puts DOM-first (newest) at the\n   * bottom, hugging the corner. Top corners override back to column so\n   * DOM-first still hugs the top edge. */\n  flex-direction: column-reverse;\n  gap: var(--wzl-space-4);\n  max-width: 420px;\n  outline: none;\n}\n\n.bottomRight { bottom: 16px; right: 16px; }\n.bottomLeft { bottom: 16px; left: 16px; }\n.topRight { top: 16px; right: 16px; flex-direction: column; }\n.topLeft { top: 16px; left: 16px; flex-direction: column; }\n\n.toast {\n  --toast-accent: var(--wzl-accent-strong);\n  /* Groups every toast under one ident so toastViewTransitions.css can\n   * target `::view-transition-new/old(.wzl-toast)` without knowing the\n   * per-toast view-transition-name (set inline in Toast.tsx). */\n  view-transition-class: wzl-toast;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--wzl-space-4);\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-left: 3px solid var(--toast-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  padding: var(--wzl-space-7) var(--wzl-space-8);\n  outline: none;\n}\n\n.region[data-focus-visible],\n.toast[data-focus-visible] {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.toneInfo { /* default accent — uses --toast-accent fallback */ }\n.toneSuccess { --toast-accent: var(--wzl-success); }\n.toneWarning { --toast-accent: var(--wzl-warning); }\n.toneError { --toast-accent: var(--wzl-danger); }\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  display: block;\n  font-size: var(--wzl-font-size-lg);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.description {\n  display: block;\n  margin-top: var(--wzl-space-2);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg-muted);\n}\n\n/* Given a container, the stack sits in its corner rather than the viewport's. */\n.contained {\n  position: absolute;\n}\n\n.list {\n  display: contents;\n}\n","import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore, type FocusEvent, type ReactElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  UNSTABLE_ToastRegion as RACToastRegion,\n  UNSTABLE_ToastList as RACToastList,\n  UNSTABLE_ToastStateContext as RACToastStateContext,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n  Text,\n  type QueuedToast,\n} from 'react-aria-components';\nimport { useAssignedPortalContainer, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { CloseButton } from '../CloseButton';\nimport { defaultToastQueue, racQueueOf, type ToastContent, type ToastQueue, type ToastTone } from './queue';\nimport s from './Toast.module.css';\nimport './toastViewTransitions.css';\n\n/** Corner a toast stack anchors to. */\nexport type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\n/** Props for {@link ToastRegion}. */\nexport interface ToastRegionProps extends OverlayPortalProps {\n  /** Queue to render. Defaults to the module-level `defaultToastQueue`. */\n  queue?: ToastQueue;\n  /** Corner for the stack. Default `bottom-right`. */\n  placement?: ToastPlacement;\n  className?: string;\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'bottom-right': s.bottomRight,\n  'bottom-left': s.bottomLeft,\n  'top-right': s.topRight,\n  'top-left': s.topLeft,\n};\n\nconst toneClass: Record<ToastTone, string> = {\n  info: s.toneInfo,\n  success: s.toneSuccess,\n  warning: s.toneWarning,\n  error: s.toneError,\n};\n\n/**\n * Renders the toast stack for a queue. Mount once, near the app root.\n * From the underlying React Aria region: landmark semantics (keyboard /\n * F6 reachable), screen-reader announcements, and hover pausing the\n * auto-dismiss timers.\n *\n * Unlike the other overlays, a toast region does not follow the nearest\n * themed ancestor, which is usually a page-tall app root: it sits fixed in a\n * corner of the viewport unless it is given a container, by `portalContainer`\n * or an `OverlayPortalProvider`. Given one, the stack renders inside it,\n * absolutely positioned in the container's corner, so the container must be a\n * containing block. A contained region is not an F6 landmark; its toasts\n * announce, dismiss and pause the same way.\n */\nexport function ToastRegion(props: ToastRegionProps) {\n  const { queue = defaultToastQueue, placement = 'bottom-right', className, portalContainer } = props;\n  const assigned = useAssignedPortalContainer(portalContainer);\n  const classes = [s.region, placementClass[placement], className];\n\n  const renderToast = (t: QueuedToast<ToastContent>) => (\n    <RACToast\n      toast={t}\n      className={[s.toast, toneClass[t.content.tone]].filter(Boolean).join(' ')}\n      // Inline style is the one sanctioned exception here: each toast\n      // needs a *unique* view-transition-name (so enter/exit/reflow\n      // track per-toast), and a class can't mint unique idents. The\n      // prefix keeps the ident valid (RAC keys can start with digits).\n      style={{ viewTransitionName: `wzl-toast-${t.key.replace(/[^a-zA-Z0-9_-]/g, '_')}` }}\n    >\n      <RACToastContent className={s.content}>\n        <Text slot=\"title\" className={s.title}>{t.content.title}</Text>\n        {t.content.description !== undefined && (\n          <Text slot=\"description\" className={s.description}>{t.content.description}</Text>\n        )}\n      </RACToastContent>\n      <CloseButton ariaLabel=\"Dismiss notification\" onClick={() => racQueueOf(queue).close(t.key)} />\n    </RACToast>\n  );\n\n  const doc = assigned?.ownerDocument;\n  if (assigned && assigned !== doc?.body && assigned !== doc?.documentElement) {\n    return (\n      <ContainedRegion\n        queue={queue}\n        container={assigned}\n        className={[...classes, s.contained].filter(Boolean).join(' ')}\n      >\n        {renderToast}\n      </ContainedRegion>\n    );\n  }\n  return (\n    <RACToastRegion\n      queue={racQueueOf(queue)}\n      aria-label=\"Notifications\"\n      className={classes.filter(Boolean).join(' ')}\n    >\n      {({ toast: t }) => renderToast(t)}\n    </RACToastRegion>\n  );\n}\n\ninterface ContainedRegionProps {\n  queue: ToastQueue;\n  container: Element;\n  className: string;\n  children: (toast: QueuedToast<ToastContent>) => ReactElement;\n}\n\n/**\n * React Aria's region always portals to `document.body`: its one override is a\n * provider this package does not import (`overlays/portalHost.tsx` says why).\n * So a contained stack builds its own region around RAC's exported list and\n * state context, keeping every region behavior that does not need a landmark.\n */\nfunction ContainedRegion({ queue, container, className, children }: ContainedRegionProps) {\n  const rac = racQueueOf(queue);\n  const subscribe = useCallback((fn: () => void) => rac.subscribe(fn), [rac]);\n  const snapshot = useCallback(() => rac.visibleToasts, [rac]);\n  const visibleToasts = useSyncExternalStore(subscribe, snapshot, snapshot);\n  const state = useMemo(\n    () => ({\n      visibleToasts,\n      add: rac.add.bind(rac),\n      close: rac.close.bind(rac),\n      pauseAll: rac.pauseAll.bind(rac),\n      resumeAll: rac.resumeAll.bind(rac),\n    }),\n    [rac, visibleToasts],\n  );\n\n  const hovered = useRef(false);\n  const focused = useRef(false);\n  const lastFocused = useRef<HTMLElement | null>(null);\n  const updateTimers = () => (hovered.current || focused.current ? rac.pauseAll() : rac.resumeAll());\n  const setHovered = (on: boolean) => {\n    hovered.current = on;\n    updateTimers();\n  };\n  const onFocus = (e: FocusEvent<HTMLDivElement>) => {\n    if (focused.current) return;\n    focused.current = true;\n    lastFocused.current = e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null;\n    updateTimers();\n  };\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) return;\n    focused.current = false;\n    lastFocused.current = null;\n    updateTimers();\n  };\n\n  // Focus that moved into the stack goes back where it came from once the last toast closes.\n  useEffect(() => {\n    if (visibleToasts.length > 0) return;\n    focused.current = false;\n    if (lastFocused.current?.isConnected) lastFocused.current.focus();\n    lastFocused.current = null;\n  }, [visibleToasts.length]);\n\n  if (visibleToasts.length === 0) return null;\n  return createPortal(\n    <RACToastStateContext.Provider value={state}>\n      <div\n        role=\"region\"\n        aria-label=\"Notifications\"\n        tabIndex={-1}\n        // Keeps the stack reachable while a modal hides everything outside itself, as RAC's region does.\n        data-react-aria-top-layer=\"true\"\n        className={className}\n        onPointerEnter={() => setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      >\n        <RACToastList<ToastContent> className={s.list}>{({ toast: t }) => children(t)}</RACToastList>\n      </div>\n    </RACToastStateContext.Provider>,\n    container,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toast-CuHkT0x0.js","names":["toast","s","RACToast","RACToastContent","RACToastRegion","RACToastStateContext","RACToastList","useAssignedPortalContainer","DEFAULT_TTL_MS","activeToastTransitions","viewTransitionWrapUpdate","reduceMotion","root","vt","flushSync","fn","RAC_QUEUES","ToastQueue","UNSTABLE_ToastQueue","options","rac","id","existing","key","racOptions","ttlMs","createToastQueue","racQueueOf","queue","defaultToastQueue","tonedAdd","tone","title","toast$1","Toast_module_default","placementClass","toneClass","ToastRegion","props","assigned","portalContainer","classes","placement","className","renderToast","UNSTABLE_Toast","t","UNSTABLE_ToastContent","Text","CloseButton","doc","ContainedRegion","UNSTABLE_ToastRegion","subscribe","useCallback","snapshot","visibleToasts","useSyncExternalStore","state","useMemo","hovered","useRef","focused","lastFocused","updateTimers","setHovered","on","useEffect","createPortal","UNSTABLE_ToastStateContext","UNSTABLE_ToastList","children","container"],"sources":["../../src/components/Toast/queue.ts","../../src/components/Toast/Toast.module.css","../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { UNSTABLE_ToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\n\n/** Severity of a toast, driving its accent color and icon. */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\n/** Kit-owned payload rendered inside each toast. */\nexport interface ToastContent {\n  title: string;\n  description?: string;\n  tone: ToastTone;\n}\n\n/** Options for a single toast. */\nexport interface ToastOptions {\n  description?: string;\n  /**\n   * Auto-dismiss delay in ms. Default 8000. `null` — sticky until dismissed.\n   * Must be > 0; RAC treats 0 as no timer (sticky).\n   */\n  ttlMs?: number | null;\n  /** Stable identity: re-adding with the same id replaces the earlier toast. */\n  id?: string;\n}\n\nconst DEFAULT_TTL_MS = 8000;\n\n// Tracks overlapping toast-triggered view transitions so the `:root`\n// marker class survives until the *last* one settles.\nlet activeToastTransitions = 0;\n\n/**\n * RAC's sanctioned toast-animation hook: wrap every queue mutation in a\n * view transition so entry, exit, and the surviving stack's reflow all\n * animate (choreography lives in `toastViewTransitions.css`). Falls back\n * to a plain synchronous update when the browser lacks the API or the\n * user prefers reduced motion — i.e. exactly the pre-animation behavior.\n * The jsdom test environment always takes the fallback path.\n */\nfunction viewTransitionWrapUpdate(fn: () => void): void {\n  const reduceMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (typeof document === 'undefined' || !('startViewTransition' in document) || reduceMotion) {\n    fn();\n    return;\n  }\n  // The marker class scopes the CSS that un-names `:root` (keeps the rest\n  // of the page live and interactive during the transition) to\n  // toast-owned transitions only.\n  const root = document.documentElement;\n  activeToastTransitions++;\n  root.classList.add('wzl-toast-vt');\n  // flushSync: the DOM must reflect the queue change inside the\n  // transition callback, before the browser snapshots the new state.\n  const vt = document.startViewTransition(() => flushSync(fn));\n  // `ready` rejects when the browser skips the transition — routine under\n  // a rapid burst of toasts, where each new transition supersedes the\n  // in-flight one. The DOM update has still applied by then, but an\n  // untouched `ready` surfaces the rejection as a console error, so\n  // consume it.\n  vt.ready.catch(() => {});\n  void vt.finished.finally(() => {\n    if (--activeToastTransitions === 0) root.classList.remove('wzl-toast-vt');\n  });\n}\n\n// The wrapped RAC queue lives in a module-scoped WeakMap so the public\n// class surface carries no RAC (UNSTABLE_) types — see the design spec's\n// containment rule. `racQueueOf` below is the folder-internal accessor.\nconst RAC_QUEUES = new WeakMap<ToastQueue, UNSTABLE_ToastQueue<ToastContent>>();\n\n/**\n * Kit-owned toast queue. Create isolated instances with\n * `createToastQueue()` (tests, secondary roots); most apps use the\n * module-level `defaultToastQueue` via `toast()`.\n *\n * At most 5 toasts are visible at once; adding a 6th shows immediately\n * and hides the oldest (it returns when a slot frees, with its ttl\n * restarted).\n */\nexport class ToastQueue {\n  private keysById = new Map<string, string>();\n\n  constructor() {\n    RAC_QUEUES.set(\n      this,\n      new UNSTABLE_ToastQueue<ToastContent>({\n        maxVisibleToasts: 5,\n        wrapUpdate: viewTransitionWrapUpdate,\n      }),\n    );\n  }\n\n  add(tone: ToastTone, title: string, options: ToastOptions = {}): void {\n    const { description, ttlMs = DEFAULT_TTL_MS, id } = options;\n    const rac = RAC_QUEUES.get(this)!;\n    if (id !== undefined) {\n      const existing = this.keysById.get(id);\n      if (existing !== undefined) rac.close(existing);\n    }\n    let key: string;\n    const racOptions: { timeout?: number; onClose?: () => void } =\n      ttlMs === null ? {} : { timeout: ttlMs };\n    if (id !== undefined) {\n      racOptions.onClose = () => {\n        if (this.keysById.get(id) === key) this.keysById.delete(id);\n      };\n    }\n    key = rac.add({ title, description, tone }, racOptions);\n    if (id !== undefined) this.keysById.set(id, key);\n  }\n\n  /** Dismiss the toast previously added with this `id`. No-op if none is live. */\n  dismiss(id: string): void {\n    const key = this.keysById.get(id);\n    if (key !== undefined) RAC_QUEUES.get(this)!.close(key);\n  }\n\n  /** Dismiss every queued toast. */\n  clear(): void {\n    RAC_QUEUES.get(this)!.clear();\n    this.keysById.clear();\n  }\n}\n\n/**\n * Creates an independent toast queue. Most apps use the module-level\n * `defaultToastQueue` that `toast()` writes to; make your own when a surface\n * needs its own stack, and pass it to `ToastRegion`.\n */\nexport function createToastQueue(): ToastQueue {\n  return new ToastQueue();\n}\n\n/**\n * Folder-internal bridge to the wrapped RAC queue for `ToastRegion`.\n * Deliberately NOT exported from the Toast folder's `index.ts` — the\n * RAC toast surface is unstable and must not leak past this folder.\n */\nexport function racQueueOf(queue: ToastQueue): UNSTABLE_ToastQueue<ToastContent> {\n  return RAC_QUEUES.get(queue)!;\n}\n\n/** Module-level default queue used by `toast()` and `<ToastRegion>`. */\nexport const defaultToastQueue = createToastQueue();\n\ntype ToastFn = {\n  (title: string, options?: ToastOptions): void;\n  info(title: string, options?: ToastOptions): void;\n  success(title: string, options?: ToastOptions): void;\n  warning(title: string, options?: ToastOptions): void;\n  error(title: string, options?: ToastOptions): void;\n};\n\nfunction tonedAdd(tone: ToastTone) {\n  return (title: string, options?: ToastOptions) => defaultToastQueue.add(tone, title, options);\n}\n\n/** Imperative convenience over `defaultToastQueue`. Bare `toast(...)` is `info`. */\nexport const toast: ToastFn = Object.assign(tonedAdd('info'), {\n  info: tonedAdd('info'),\n  success: tonedAdd('success'),\n  warning: tonedAdd('warning'),\n  error: tonedAdd('error'),\n});\n",".region {\n  position: fixed;\n  z-index: 1100;\n  display: flex;\n  /* RAC unshifts new toasts to the front of the DOM (newest-first), and the\n   * ol/li wrappers are display:contents, so the flex direction alone\n   * decides which end of the stack the newest toast lands on. Base\n   * (bottom corners): column-reverse puts DOM-first (newest) at the\n   * bottom, hugging the corner. Top corners override back to column so\n   * DOM-first still hugs the top edge. */\n  flex-direction: column-reverse;\n  gap: var(--wzl-space-4);\n  max-width: 420px;\n  outline: none;\n}\n\n.bottomRight { bottom: 16px; right: 16px; }\n.bottomLeft { bottom: 16px; left: 16px; }\n.topRight { top: 16px; right: 16px; flex-direction: column; }\n.topLeft { top: 16px; left: 16px; flex-direction: column; }\n\n.toast {\n  --toast-accent: var(--wzl-accent-strong);\n  /* Groups every toast under one ident so toastViewTransitions.css can\n   * target `::view-transition-new/old(.wzl-toast)` without knowing the\n   * per-toast view-transition-name (set inline in Toast.tsx). */\n  view-transition-class: wzl-toast;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--wzl-space-4);\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-left: 3px solid var(--toast-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  padding: var(--wzl-space-7) var(--wzl-space-8);\n  outline: none;\n}\n\n.region[data-focus-visible],\n.toast[data-focus-visible] {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.toneInfo { /* default accent — uses --toast-accent fallback */ }\n.toneSuccess { --toast-accent: var(--wzl-success); }\n.toneWarning { --toast-accent: var(--wzl-warning); }\n.toneError { --toast-accent: var(--wzl-danger); }\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  display: block;\n  font-size: var(--wzl-font-size-lg);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.description {\n  display: block;\n  margin-top: var(--wzl-space-2);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg-muted);\n}\n\n/* Given a container, the stack sits in its corner rather than the viewport's. */\n.contained {\n  position: absolute;\n}\n\n.list {\n  display: contents;\n}\n","import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore, type FocusEvent, type ReactElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  UNSTABLE_ToastRegion as RACToastRegion,\n  UNSTABLE_ToastList as RACToastList,\n  UNSTABLE_ToastStateContext as RACToastStateContext,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n  Text,\n  type QueuedToast,\n} from 'react-aria-components';\nimport { useAssignedPortalContainer, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { CloseButton } from '../CloseButton';\nimport { defaultToastQueue, racQueueOf, type ToastContent, type ToastQueue, type ToastTone } from './queue';\nimport s from './Toast.module.css';\nimport './toastViewTransitions.css';\n\n/** Corner a toast stack anchors to. */\nexport type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\n/** Props for {@link ToastRegion}. */\nexport interface ToastRegionProps extends OverlayPortalProps {\n  /** Queue to render. Defaults to the module-level `defaultToastQueue`. */\n  queue?: ToastQueue;\n  /** Corner for the stack. Default `bottom-right`. */\n  placement?: ToastPlacement;\n  className?: string;\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'bottom-right': s.bottomRight,\n  'bottom-left': s.bottomLeft,\n  'top-right': s.topRight,\n  'top-left': s.topLeft,\n};\n\nconst toneClass: Record<ToastTone, string> = {\n  info: s.toneInfo,\n  success: s.toneSuccess,\n  warning: s.toneWarning,\n  error: s.toneError,\n};\n\n/**\n * Renders the toast stack for a queue. Mount once, near the app root.\n * From the underlying React Aria region: landmark semantics (keyboard /\n * F6 reachable), screen-reader announcements, and hover pausing the\n * auto-dismiss timers.\n *\n * Unlike the other overlays, a toast region does not follow the nearest\n * themed ancestor, which is usually a page-tall app root: it sits fixed in a\n * corner of the viewport unless it is given a container, by `portalContainer`\n * or an `OverlayPortalProvider`. Given one, the stack renders inside it,\n * absolutely positioned in the container's corner, so the container must be a\n * containing block. A contained region is not an F6 landmark; its toasts\n * announce, dismiss and pause the same way.\n */\nexport function ToastRegion(props: ToastRegionProps) {\n  const { queue = defaultToastQueue, placement = 'bottom-right', className, portalContainer } = props;\n  const assigned = useAssignedPortalContainer(portalContainer);\n  const classes = [s.region, placementClass[placement], className];\n\n  const renderToast = (t: QueuedToast<ToastContent>) => (\n    <RACToast\n      toast={t}\n      className={[s.toast, toneClass[t.content.tone]].filter(Boolean).join(' ')}\n      // Inline style is the one sanctioned exception here: each toast\n      // needs a *unique* view-transition-name (so enter/exit/reflow\n      // track per-toast), and a class can't mint unique idents. The\n      // prefix keeps the ident valid (RAC keys can start with digits).\n      style={{ viewTransitionName: `wzl-toast-${t.key.replace(/[^a-zA-Z0-9_-]/g, '_')}` }}\n    >\n      <RACToastContent className={s.content}>\n        <Text slot=\"title\" className={s.title}>{t.content.title}</Text>\n        {t.content.description !== undefined && (\n          <Text slot=\"description\" className={s.description}>{t.content.description}</Text>\n        )}\n      </RACToastContent>\n      <CloseButton ariaLabel=\"Dismiss notification\" onClick={() => racQueueOf(queue).close(t.key)} />\n    </RACToast>\n  );\n\n  const doc = assigned?.ownerDocument;\n  if (assigned && assigned !== doc?.body && assigned !== doc?.documentElement) {\n    return (\n      <ContainedRegion\n        queue={queue}\n        container={assigned}\n        className={[...classes, s.contained].filter(Boolean).join(' ')}\n      >\n        {renderToast}\n      </ContainedRegion>\n    );\n  }\n  return (\n    <RACToastRegion\n      queue={racQueueOf(queue)}\n      aria-label=\"Notifications\"\n      className={classes.filter(Boolean).join(' ')}\n    >\n      {({ toast: t }) => renderToast(t)}\n    </RACToastRegion>\n  );\n}\n\ninterface ContainedRegionProps {\n  queue: ToastQueue;\n  container: Element;\n  className: string;\n  children: (toast: QueuedToast<ToastContent>) => ReactElement;\n}\n\n/**\n * React Aria's region always portals to `document.body`: its one override is a\n * provider this package does not import (`overlays/portalHost.tsx` says why).\n * So a contained stack builds its own region around RAC's exported list and\n * state context, keeping every region behavior that does not need a landmark.\n */\nfunction ContainedRegion({ queue, container, className, children }: ContainedRegionProps) {\n  const rac = racQueueOf(queue);\n  const subscribe = useCallback((fn: () => void) => rac.subscribe(fn), [rac]);\n  const snapshot = useCallback(() => rac.visibleToasts, [rac]);\n  const visibleToasts = useSyncExternalStore(subscribe, snapshot, snapshot);\n  const state = useMemo(\n    () => ({\n      visibleToasts,\n      add: rac.add.bind(rac),\n      close: rac.close.bind(rac),\n      pauseAll: rac.pauseAll.bind(rac),\n      resumeAll: rac.resumeAll.bind(rac),\n    }),\n    [rac, visibleToasts],\n  );\n\n  const hovered = useRef(false);\n  const focused = useRef(false);\n  const lastFocused = useRef<HTMLElement | null>(null);\n  const updateTimers = () => (hovered.current || focused.current ? rac.pauseAll() : rac.resumeAll());\n  const setHovered = (on: boolean) => {\n    hovered.current = on;\n    updateTimers();\n  };\n  const onFocus = (e: FocusEvent<HTMLDivElement>) => {\n    if (focused.current) return;\n    focused.current = true;\n    lastFocused.current = e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null;\n    updateTimers();\n  };\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) return;\n    focused.current = false;\n    lastFocused.current = null;\n    updateTimers();\n  };\n\n  // Focus that moved into the stack goes back where it came from once the last toast closes.\n  useEffect(() => {\n    if (visibleToasts.length > 0) return;\n    focused.current = false;\n    if (lastFocused.current?.isConnected) lastFocused.current.focus();\n    lastFocused.current = null;\n  }, [visibleToasts.length]);\n\n  if (visibleToasts.length === 0) return null;\n  return createPortal(\n    <RACToastStateContext.Provider value={state}>\n      <div\n        role=\"region\"\n        aria-label=\"Notifications\"\n        tabIndex={-1}\n        // Keeps the stack reachable while a modal hides everything outside itself, as RAC's region does.\n        data-react-aria-top-layer=\"true\"\n        className={className}\n        onPointerEnter={() => setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      >\n        <RACToastList<ToastContent> className={s.list}>{({ toast: t }) => children(t)}</RACToastList>\n      </div>\n    </RACToastStateContext.Provider>,\n    container,\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/ToggleBar-BZ4Gk1IU.js

@@ -0,0 +1,84 @@
+import { r as e, t } from "./segmentTooltip-CGxCOWNz.js";
+import { t as n } from "./useRovingTabIndex-D7u22Ia_.js";
+import { i as r, n as i } from "./FitLabel-BzZGkWfL.js";
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+var o = {
+	root: "_root_15sd7_6",
+	segment: "_segment_15sd7_30",
+	segmentSelected: "_segmentSelected_15sd7_84",
+	segmentMixed: "_segmentMixed_15sd7_143",
+	variant_minimal: "_variant_minimal_15sd7_153",
+	size_sm: "_size_sm_15sd7_162",
+	variant_flat: "_variant_flat_15sd7_237"
+};
+//#endregion
+//#region src/components/ToggleBar/ToggleBar.tsx
+function s(s) {
+	let { items: c, ariaLabel: l, className: u, height: d, size: f, variant: p } = s, m = s.mode ?? "single", h = (e) => m === "multiple" ? s.value.includes(e) : s.value === e, g = (e) => {
+		if (m !== "multiple") return !1;
+		let t = s.mixedValues;
+		return t !== void 0 && t.includes(e) && !h(e);
+	}, _ = (e) => () => {
+		let t = c[e];
+		if (!t.disabled) {
+			if (m === "multiple") {
+				let e = s.value, n = e.includes(t.value) ? e.filter((e) => e !== t.value) : [...e, t.value];
+				s.onChange(n);
+			} else {
+				if (s.value === t.value) {
+					s.allowDeselect && s.onChange(null);
+					return;
+				}
+				s.onChange(t.value);
+			}
+		}
+	}, v = m === "single" ? c.findIndex((e) => e.value === s.value) : -1, y = n({
+		itemSelector: `.${o.segment}`,
+		tabStopIndex: v >= 0 ? v : void 0,
+		onNavigate: m === "single" ? (e) => s.onChange(c[e].value) : void 0,
+		onActivate: m === "multiple" ? (e) => _(e)() : void 0
+	}), b = r(y.rootRef), x = d === void 0 ? void 0 : { "--tb-h": `${d}px` }, S = [
+		o.root,
+		f && o[`size_${f}`],
+		p && o[`variant_${p}`],
+		u
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ a("div", {
+		ref: y.rootRef,
+		onKeyDown: y.onKeyDown,
+		className: S,
+		role: m === "multiple" ? "group" : "radiogroup",
+		"aria-label": l,
+		style: x,
+		children: /* @__PURE__ */ a(i, {
+			value: b,
+			children: c.map((n, r) => {
+				let i = h(n.value), s = g(n.value), c = [
+					o.segment,
+					i && o.segmentSelected,
+					s && o.segmentMixed
+				].filter(Boolean).join(" ");
+				return /* @__PURE__ */ a(t, {
+					content: e(n),
+					disabled: n.disabled,
+					children: /* @__PURE__ */ a("button", {
+						type: "button",
+						role: m === "multiple" ? void 0 : "radio",
+						"aria-checked": m === "multiple" ? void 0 : i,
+						"aria-pressed": m === "multiple" ? s ? "mixed" : i : void 0,
+						"aria-label": n.ariaLabel,
+						disabled: n.disabled,
+						className: c,
+						onClick: _(r),
+						children: n.label
+					})
+				}, n.value);
+			})
+		})
+	});
+}
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=ToggleBar-BZ4Gk1IU.js.map

package/dist/chunks/ToggleBar-BZ4Gk1IU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleBar-BZ4Gk1IU.js","names":["s","segmentTooltipContent","useRovingTabIndex","useFitScope","FitScope","ToggleBar_module_default","ToggleBar","props","mode","isSelected","value","isMixed","mixed","handleClick","item","items","index","current","next","v","selectedIndex","it","roving","fit","style","height","rootCls","size","variant","className","ariaLabel","selected","cls","SegmentTooltip","i"],"sources":["../../src/components/ToggleBar/ToggleBar.module.css","../../src/components/ToggleBar/ToggleBar.tsx"],"sourcesContent":["/* Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--tb-h, var(--wzl-control-h));\n  padding: var(--wzl-space-1);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: var(--wzl-radius-pill);\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n  /* The track clips, so without this a squeezing row shrinks it to nothing. */\n  min-width: max-content;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  /* Equal widths when there is room, never narrower than the label. The\n     segment clips its gloss, which otherwise drops its flex minimum to 0. */\n  min-width: max-content;\n  padding: 0 var(--wzl-space-6);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-normal);\n  font-size: var(--btn-fontsize, var(--wzl-font-size));\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n/* 8px around a 14px glyph is most of a segment. */\n.segment:has(> svg) {\n  padding: 0 5px;\n}\n\n.segment:first-of-type {\n  border-radius: var(--wzl-radius-pill) 0 0 var(--wzl-radius-pill);\n}\n\n.segment:last-of-type {\n  border-radius: 0 var(--wzl-radius-pill) var(--wzl-radius-pill) 0;\n}\n\n.segment:only-of-type {\n  border-radius: var(--wzl-radius-pill);\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Mixed segment (`aria-pressed=\"mixed\"`) — the sources disagree. Reads as a\n   deliberate third state rather than a dimmed \"on\": a flat accent wash with\n   none of the selected segment's gloss/cylinder treatment, so it can't be\n   mistaken for the glass lozenge at a glance. */\n.segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wzl-accent) 45%, transparent);\n}\n\n.segmentMixed:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-accent) 32%, transparent);\n}\n\n.variant_minimal .segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n  box-shadow: none;\n  color: var(--wzl-fg);\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `.size_sm .segment` outranks the glyph rule above on specificity, so a\n   small bar's glyph segments need the tight padding restated to stay\n   near-square rather than reading as wide plates. */\n.size_sm .segment:has(> svg) {\n  padding: 0 3px;\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  gap: 0;\n}\n\n.variant_minimal .segment {\n  padding: 0 var(--wzl-space-3);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  line-height: 1.4;\n  border-radius: 0;\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n/* Dividers between segments make the mutual-exclusion grouping visible\n   without a heavy track. Only the inner edges get a rule — the outer\n   border on `.variant_minimal` handles the perimeter. */\n.variant_minimal .segment ~ .segment {\n  border-left: 1px solid var(--wzl-border);\n}\n\n.variant_minimal .segment:first-of-type,\n.variant_minimal .segment:last-of-type,\n.variant_minimal .segment:only-of-type {\n  border-radius: 0;\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-hover);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg);\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n\n/* Flat variant — no track, no glass, no pill: each segment is its own\n   outlined cell. For property panels, where a bar sits in a row beside\n   inputs and the glass cylinder makes it the loudest thing on the surface. */\n.variant_flat {\n  padding: 0;\n  background: none;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  overflow: visible;\n}\n\n.variant_flat .segment {\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 0;\n  /* Sunken, so an unselected cell sits below the panel and the selected one\n     reads as raised without needing the glass treatment back. */\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg-muted);\n}\n\n/* Adjacent cells share one rule rather than stacking two. */\n.variant_flat .segment ~ .segment {\n  margin-inline-start: -1px;\n}\n\n.variant_flat .segment:first-of-type {\n  border-start-start-radius: var(--wzl-radius-sm);\n  border-end-start-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:last-of-type {\n  border-start-end-radius: var(--wzl-radius-sm);\n  border-end-end-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:hover:not(:disabled):not(.segmentSelected) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.variant_flat .segmentSelected {\n  /* Above its neighbors, or the next cell's left border covers its right one. */\n  z-index: 1;\n  background: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  text-shadow: none;\n  box-shadow: none;\n}\n\n.variant_flat .segmentSelected::before {\n  content: none;\n}\n","import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from './ToggleBar.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport { FitScope, useFitScope } from '../FitLabel/FitLabel';\nimport { SegmentTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\n\n/** One segment of a {@link ToggleBar}, identified by its `value`. */\nexport type ToggleBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n} & SegmentTooltipFields;\n\n/** Segment height and type scale for a {@link ToggleBar}. */\nexport type ToggleBarSize = 'sm' | 'md';\n/** Visual treatment of a {@link ToggleBar}. */\nexport type ToggleBarVariant = 'default' | 'minimal' | 'flat';\n\ntype CommonProps = {\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  /** Size variant. `sm` is ~60% of the default height with reduced padding\n   *  and font size — sized for dense surfaces like lab control panels. */\n  size?: ToggleBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: ToggleBarVariant;\n};\n\n/**\n * Props for {@link ToggleBar}, discriminated on `mode`. Single mode is\n * controlled by one value or `null`; multiple mode by an array, and only it\n * accepts `mixedValues`.\n */\nexport type ToggleBarProps<V extends string | number = string> =\n  | (CommonProps & {\n      mode?: 'single';\n      items: readonly ToggleBarItem<V>[];\n      value: V | null;\n      onChange: (next: V | null) => void;\n      allowDeselect?: boolean;\n    })\n  | (CommonProps & {\n      mode: 'multiple';\n      items: readonly ToggleBarItem<V>[];\n      value: readonly V[];\n      /**\n       * Values that are neither on nor off — the sources this bar\n       * aggregates disagree (a text range that is bold in part of it, a\n       * multi-selection whose nodes differ). Rendered `aria-pressed=\"mixed\"`,\n       * the ARIA tri-state a toggle button actually has, rather than\n       * `SelectionPanel`'s reduced-opacity-plus-`title` workaround for\n       * `Switch`, which has no indeterminate state to render.\n       *\n       * `value` wins where the two lists overlap, so a caller that can't\n       * cheaply keep them disjoint doesn't get an ambiguous segment.\n       *\n       * Clicking a mixed segment turns it fully **on**, matching the\n       * everywhere-else convention (and `toggleFlagInRange`'s rule for a\n       * partially-styled text range) that a mixed toggle resolves toward\n       * the affirmative rather than clearing.\n       */\n      mixedValues?: readonly V[];\n      onChange: (next: V[]) => void;\n    });\n\n/**\n * Segmented control for choosing among a fixed set of values — one of them\n * (`mode: 'single'`, the default) or any number (`mode: 'multiple'`).\n *\n * Single mode ignores a click on the already-selected segment unless\n * `allowDeselect` is set. Arrow keys move focus without changing the value;\n * Space and Enter commit.\n */\nexport function ToggleBar<V extends string | number = string>(props: ToggleBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n  const mode = props.mode ?? 'single';\n\n  const isSelected = (value: V): boolean => {\n    if (mode === 'multiple') return (props.value as readonly V[]).includes(value);\n    return (props.value as V | null) === value;\n  };\n\n  /** Mixed only in multiple mode, and only where `value` doesn't already\n   *  claim the segment. Single mode has nothing to be mixed about — its\n   *  aggregate is one value or none. */\n  const isMixed = (value: V): boolean => {\n    if (mode !== 'multiple') return false;\n    const mixed = (props as { mixedValues?: readonly V[] }).mixedValues;\n    return mixed !== undefined && mixed.includes(value) && !isSelected(value);\n  };\n\n  const handleClick = (index: number) => () => {\n    const item = items[index];\n    if (item.disabled) return;\n    if (mode === 'multiple') {\n      const current = props.value as readonly V[];\n      const next = current.includes(item.value)\n        ? current.filter(v => v !== item.value)\n        : [...current, item.value];\n      (props.onChange as (n: V[]) => void)(next);\n    } else {\n      const current = props.value as V | null;\n      if (current === item.value) {\n        if ((props as { allowDeselect?: boolean }).allowDeselect) {\n          (props.onChange as (n: V | null) => void)(null);\n        }\n        return;\n      }\n      (props.onChange as (n: V | null) => void)(item.value);\n    }\n  };\n\n  const selectedIndex = mode === 'single'\n    ? items.findIndex(it => it.value === (props.value as V | null))\n    : -1;\n\n  const roving = useRovingTabIndex({\n    itemSelector: `.${s.segment}`,\n    // Single mode is a radiogroup: the tab stop is the current value, and\n    // arrow keys move the selection with the focus. Multiple mode is a set of\n    // independent toggles — focus alone moves, and Space/Enter flips.\n    tabStopIndex: selectedIndex >= 0 ? selectedIndex : undefined,\n    onNavigate: mode === 'single'\n      ? (index) => (props.onChange as (n: V | null) => void)(items[index].value)\n      : undefined,\n    onActivate: mode === 'multiple' ? (index) => handleClick(index)() : undefined,\n  });\n\n  // Segment labels drawn as `FitLabel`s shorten together when the bar is\n  // squeezed or will not fit where it sits.\n  const fit = useFitScope(roving.rootRef);\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--tb-h' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      onKeyDown={roving.onKeyDown}\n      className={rootCls}\n      role={mode === 'multiple' ? 'group' : 'radiogroup'}\n      aria-label={ariaLabel}\n      style={style}\n    >\n      <FitScope value={fit}>\n        {items.map((item, i) => {\n          const selected = isSelected(item.value);\n          const mixed = isMixed(item.value);\n          const cls = [s.segment, selected && s.segmentSelected, mixed && s.segmentMixed]\n            .filter(Boolean)\n            .join(' ');\n          return (\n            <SegmentTooltip key={item.value} content={segmentTooltipContent(item)} disabled={item.disabled}>\n              <button\n                type=\"button\"\n                role={mode === 'multiple' ? undefined : 'radio'}\n                aria-checked={mode === 'multiple' ? undefined : selected}\n                aria-pressed={mode === 'multiple' ? (mixed ? 'mixed' : selected) : undefined}\n                aria-label={item.ariaLabel}\n                disabled={item.disabled}\n                className={cls}\n                onClick={handleClick(i)}\n              >\n                {item.label}\n              </button>\n            </SegmentTooltip>\n          );\n        })}\n      </FitScope>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AC4EA,SAAgBM,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAYC,GACzDC,IAAOD,EAAM,QAAQ,UAErBE,KAAc,MACdD,MAAS,aAAoBD,EAAM,MAAuB,SAASG,CAAK,IACpEH,EAAM,UAAuBG,GAMjCC,KAAW,MAAsB;EACrC,IAAIH,MAAS,YAAY,OAAO;EAChC,IAAMI,IAASL,EAAyC;EACxD,OAAOK,MAAU,KAAA,KAAaA,EAAM,SAASF,CAAK,KAAK,CAACD,EAAWC,CAAK;CAC1E,GAEMG,KAAe,YAAwB;EAC3C,IAAMC,IAAOC,EAAMC;EACnB,IAAI,GAAK,UACT;OAAIR,MAAS,YAAY;IACvB,IAAMS,IAAUV,EAAM,OAChBW,IAAOD,EAAQ,SAASH,EAAK,KAAK,IACpCG,EAAQ,QAAO,MAAKE,MAAML,EAAK,KAAK,IACpC,CAAC,GAAGG,GAASH,EAAK,KAAK;IAC3B,EAAO,SAA8BI,CAAI;GAC3C,OAAO;IAEL,IADgBX,EAAM,UACNO,EAAK,OAAO;KAC1B,AAAKP,EAAsC,iBACzCA,EAAO,SAAmC,IAAI;KAEhD;IACF;IACA,EAAO,SAAmCO,EAAK,KAAK;GACtD;;CACF,GAEMM,IAAgBZ,MAAS,WAC3BO,EAAM,WAAU,MAAMM,EAAG,UAAWd,EAAM,KAAkB,IAC5D,IAEEe,IAASpB,EAAkB;EAC/B,cAAc,IAAIF,EAAE;EAIpB,cAAcoB,KAAiB,IAAIA,IAAgB,KAAA;EACnD,YAAYZ,MAAS,YAChB,MAAWD,EAAM,SAAmCQ,EAAMC,EAAM,CAAC,KAAK,IACvE,KAAA;EACJ,YAAYR,MAAS,cAAc,MAAUK,EAAYG,CAAK,CAAC,CAAC,IAAI,KAAA;CACtE,CAAC,GAIKO,IAAMpB,EAAYmB,EAAO,OAAO,GAEhCE,IAAmCC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,UAAqB,GAAGA,EAAO,IAAI,GAGrCC,IAAU;EACd1B,EAAE;EACF2B,KAAQ3B,EAAE,QAAQ2B;EAClBC,KAAW5B,EAAE,WAAW4B;EACxBC;CACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1B,OACE,kBAAC,OAAD;EACE,KAAKP,EAAO;EACZ,WAAWA,EAAO;EAClB,WAAWI;EACX,MAAMlB,MAAS,aAAa,UAAU;EACtC,cAAYsB;EACL;EAEP,UAAA,kBAAC1B,GAAD;GAAU,OAAOmB;GACd,UAAAR,EAAM,KAAK,GAAM,MAAM;IACtB,IAAMgB,IAAWtB,EAAWK,EAAK,KAAK,GAChCF,IAAQD,EAAQG,EAAK,KAAK,GAC1BkB,IAAM;KAAChC,EAAE;KAAS+B,KAAY/B,EAAE;KAAiBY,KAASZ,EAAE;IAAY,CAAC,CAC5E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX,OACE,kBAACiC,GAAD;KAAiC,SAAShC,EAAsBa,CAAI;KAAG,UAAUA,EAAK;KACpF,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,MAAMN,MAAS,aAAa,KAAA,IAAY;MACxC,gBAAcA,MAAS,aAAa,KAAA,IAAYuB;MAChD,gBAAcvB,MAAS,aAAcI,IAAQ,UAAUmB,IAAY,KAAA;MACnE,cAAYjB,EAAK;MACjB,UAAUA,EAAK;MACf,WAAWkB;MACX,SAASnB,EAAYqB,CAAC;MAErB,UAAApB,EAAK;KACA,CAAA;IACM,GAbKA,EAAK,KAaV;GAEpB,CAAC;EACO,CAAA;CACP,CAAA;AAET"}

package/dist/chunks/{TokenPanel-WtKGY2Db.js → TokenPanel-DongdiZM.js}

@@ -1,10 +1,10 @@
 import { n as e, r as t } from "./Tooltip-C6eFCYxw.js";
 import { t as n } from "./Button-XB-T75YL.js";
-import { r } from "./Disclosure-Ch2KxYuB.js";
+import { r } from "./Disclosure-CpWt87nO.js";
 import { t as i } from "./Select-ouV8O6cp.js";
 import { t as a } from "./Input-D7SDKbST.js";
-import { r as o } from "./NumberField-DS0WSiin.js";
-import { t as s } from "./ToggleBar-Z2jZiguF.js";
+import { t as o } from "./ToggleBar-BZ4Gk1IU.js";
+import { r as s } from "./NumberField-BXFrOi5M.js";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 import { memo as d, useCallback as f, useMemo as p, useState as m } from "react";
 import { Focusable as h } from "react-aria-components";
@@ -257,10 +257,10 @@ function Z({ points: e, label: t }) {
 	});
 }
 function Q({ token: e, set: t }) {
-	let { name: n, type: r, value: s } = e, d = `${n} value`, f = p(() => r === "color" ? T(s) : null, [r, s]);
+	let { name: n, type: r, value: o } = e, d = `${n} value`, f = p(() => r === "color" ? T(o) : null, [r, o]);
 	if (r === "dimension" || r === "duration" || r === "number") {
-		let e = U(s);
-		if (e) return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o, {
+		let e = U(o);
+		if (e) return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(s, {
 			className: E.number,
 			"aria-label": d,
 			value: e.amount,
@@ -275,26 +275,26 @@ function Q({ token: e, set: t }) {
 		}) : null] });
 	}
 	if (r === "fontWeight") {
-		let e = (G.includes(s) ? G : [...G, s]).map((e) => ({
+		let e = (G.includes(o) ? G : [...G, o]).map((e) => ({
 			value: e,
 			label: e
 		}));
 		return /* @__PURE__ */ l(i, {
 			"aria-label": n,
 			width: "fit",
-			selectedKey: s,
+			selectedKey: o,
 			options: e,
 			onSelectionChange: t
 		});
 	}
-	let m = r === "cubicBezier" ? W(s) : null;
+	let m = r === "cubicBezier" ? W(o) : null;
 	return /* @__PURE__ */ u(c, { children: [m ? /* @__PURE__ */ l(Z, {
 		points: m,
 		label: `${n} curve`
 	}) : null, /* @__PURE__ */ l(a, {
 		className: E.field,
 		"aria-label": d,
-		value: s,
+		value: o,
 		onChange: t,
 		leadingAdornment: r === "color" ? f ? /* @__PURE__ */ l("input", {
 			type: "color",
@@ -304,7 +304,7 @@ function Q({ token: e, set: t }) {
 			onChange: (e) => t(e.target.value)
 		}) : /* @__PURE__ */ l("span", {
 			className: E.chip,
-			style: { "--token-color": s },
+			style: { "--token-color": o },
 			"aria-hidden": "true"
 		}) : void 0
 	})] });
@@ -368,8 +368,8 @@ function ee({ group: n, tokens: r, onChange: i }) {
 	});
 }
 function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorChange: a }) {
-	let s = U(e.value);
-	return s ? /* @__PURE__ */ u("div", {
+	let o = U(e.value);
+	return o ? /* @__PURE__ */ u("div", {
 		className: E.step,
 		title: e.description || e.name,
 		"data-overridden": e.overridden ? "" : void 0,
@@ -380,18 +380,18 @@ function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorC
 			}),
 			/* @__PURE__ */ u("span", {
 				className: E.stepEdit,
-				children: [/* @__PURE__ */ l(o, {
+				children: [/* @__PURE__ */ l(s, {
 					className: E.number,
 					"aria-label": `${e.name} value`,
-					value: s.amount,
+					value: o.amount,
 					hideSteppers: !0,
 					formatOptions: K,
 					onChange: (t) => {
-						Number.isFinite(t) && i(e.name, `${t}${s.unit}`);
+						Number.isFinite(t) && i(e.name, `${t}${o.unit}`);
 					}
-				}), n && s.unit ? /* @__PURE__ */ l("span", {
+				}), n && o.unit ? /* @__PURE__ */ l("span", {
 					className: E.unit,
-					children: s.unit
+					children: o.unit
 				}) : null]
 			}),
 			r !== void 0 && a ? /* @__PURE__ */ u("span", {
@@ -399,7 +399,7 @@ function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorC
 				children: [/* @__PURE__ */ l("span", {
 					className: E.unit,
 					children: "×"
-				}), /* @__PURE__ */ l(o, {
+				}), /* @__PURE__ */ l(s, {
 					className: E.number,
 					"aria-label": `${e.name} factor`,
 					value: r,
@@ -446,7 +446,7 @@ function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: i }) {
 						className: E.ruleLabel,
 						children: "base"
 					}),
-					/* @__PURE__ */ l(o, {
+					/* @__PURE__ */ l(s, {
 						className: E.number,
 						"aria-label": `${e} base`,
 						value: t.base,
@@ -465,7 +465,7 @@ function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: i }) {
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ l(o, {
 				ariaLabel: `${e} rule`,
 				size: "sm",
 				items: ne,
@@ -482,7 +482,7 @@ function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: i }) {
 				}) : /* @__PURE__ */ l("span", {
 					className: E.unit,
 					children: "+"
-				}), /* @__PURE__ */ l(o, {
+				}), /* @__PURE__ */ l(s, {
 					className: E.number,
 					"aria-label": `${e} ${c.key}`,
 					value: c.value,
@@ -634,4 +634,4 @@ function oe({ tokens: e, onChange: t, collapsed: n, onCollapsedChange: r, scales
 //#endregion
 export { j as a, O as i, k as n, H as r, oe as t };
 
-//# sourceMappingURL=TokenPanel-WtKGY2Db.js.map
+//# sourceMappingURL=TokenPanel-DongdiZM.js.map