@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sources":["../../src/components/AppShell.tsx"],"sourcesContent":["import type { CSSProperties, MouseEvent, ReactNode } from \"react\";\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../lib/cn\";\nimport { usePersistedState } from \"../lib/persist\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { overlayBackdropClassName } from \"./overlay-shell\";\nimport { NavSections } from \"./nav-sections\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { HeaderWidthContext } from \"../lib/header-fold\";\n\n/* ============================================================================\n   APP SHELL\n\n   The most-copied composed primitive in the ecosystem — 16 of shadcn's 27\n   blocks — and it ships in only half the major design systems, usually under a\n   different name each time. Worth owning.\n\n   THE MOBILE SIDEBAR IS A DIALOG, NOT A HIDDEN DIV. Sliding a `position: fixed`\n   panel in with a transform looks identical and is wrong: focus stays behind\n   it, so a keyboard user tabs into invisible links; the page keeps scrolling\n   under it; and Escape does nothing. Rendering it as a dialog gets the focus\n   trap, the scroll lock, the backdrop and the dismissal for free — the same\n   four things people re-implement badly every time.\n\n   COLLAPSED IS ICON-ONLY, NOT HIDDEN. A sidebar that vanishes takes its\n   navigation with it, so people collapse it once and expand it forever. At\n   56px the icons stay, tooltips supply the labels, and the width is genuinely\n   returned to the content. AND IT IS REMEMBERED — see `persistId`, and the\n   note there on why this component names a default key while `PanelGroup`\n   cannot.\n\n   FULL-BLEED BY DEFAULT, per the system's page rule: the content area fills\n   whatever is left rather than centring in a max-width column.\n\n   AN APPLICATION SHELL BOUNDS THE VIEWPORT, and this one did not until 3.4.0.\n\n   THE SHAPE, and it is the whole of the fix:\n\n       root     h-dvh, flex row          <- the ONLY viewport unit in the system\n         aside  a flex item, stretched   <- its nav list scrolls itself\n         column flex-1 min-w-0 min-h-0, flex col\n           header   shrink-0             <- whatever height it happens to be\n           content  flex-1 min-h-0 overflow-y-auto   <- THE scroller\n\n   NOTHING SUBTRACTS ANYTHING, and that is the point rather than a tidiness\n   preference. The consuming app was writing\n\n       h-[calc(100dvh-var(--control-xl))]\n\n   on a screen that needed to fill the viewport — a hard-coded copy of a fact\n   the DOM already knows, cached in the wrong place. It is silently wrong the\n   moment the header wraps at a narrow width, the size control moves\n   `--control-xl`, a banner appears above the header, or the token is retuned.\n   Nothing fails; the screen is just the wrong height, and eventually somebody\n   reports a scrollbar. The layout engine computes this correctly and for free:\n   the header is `auto`, the row below takes what remains, and no number is\n   copied anywhere.\n\n   If a consumer is doing viewport arithmetic against one of our tokens, this\n   component has not finished its job.\n\n   `min-h-0` IS LOAD-BEARING AT EVERY LEVEL. A flex item's automatic minimum\n   size is its content, so without it a full row refuses to be shorter than\n   what is inside it and pushes the page taller instead of letting the\n   descendant scroll. Same reason `QueueBoard` needed the chain, one layer up.\n\n   AND THE CONTENT COLUMN IS ITSELF A FLEX COLUMN, which is what makes\n   `flex-1 min-h-0` mean anything to a screen inside it. It was a block first\n   and the difference was measured, not guessed: a board screen carrying\n   `flex min-h-0 flex-1 flex-col` came out 1260px tall inside a 740px column,\n   the column scrolled, and the board's own lanes reported 876/876 — no\n   internal scrolling at all, which is the very defect the height existed to\n   fix. `flex-1` against a block parent is inert.\n\n   WHAT 2.9.1 DID AND WHY IT IS GONE. It put `h-dvh sticky top-0` on the ASIDE\n   alone and said so outright: bounding the root \"would bound the content column\n   and take document scrolling from every consumer\". That was the compromise,\n   and it is the wrong branch — an app shell that does not bound the viewport is\n   not an app shell, it is a page with a sidebar. The aside now needs neither:\n   as a flex item in a bounded row it is stretched to the row's height by\n   `align-items`, so its nav list's `min-h-0 flex-1 overflow-y-auto` engages\n   with no viewport unit and no stickiness anywhere.\n\n   THE HEADER IS FIXED BY STRUCTURE, NOT BY `sticky`. It sits OUTSIDE the\n   scroller now, so there is nothing for it to stick to and nothing it could\n   scroll away from. `sticky top-0` on it would be a declaration that does\n   nothing — the kind that reads as intent and is inert.\n\n   AND DOCUMENT SCROLLING IS A NAMED PROP WITH THE BOUNDED BEHAVIOUR AS THE\n   DEFAULT, which is the way round it has to be. `scroll=\"document\"` restores\n   the unbounded column for a shell embedded in a longer page — and it is the\n   one arrangement that legitimately needs a second viewport unit, because an\n   aside in an unbounded parent has no other way to say \"as tall as the\n   screen\". `scripts/probe-shell.mjs` measures both modes and the arithmetic\n   ban.\n   ========================================================================= */\n\nexport type NavItem = {\n  id: string;\n  label: string;\n  icon: IconName;\n  /** A count or status shown at the trailing edge. */\n  badge?: ReactNode;\n  href?: string;\n  /**\n   * Receives the click event, which a client-side router NEEDS in order to\n   * suppress the browser's own navigation.\n   *\n   * IT USED TO RECEIVE NOTHING, and that made this component quietly\n   * unusable with a history router. The anchor only calls `preventDefault()`\n   * when `href` is absent, so an item with BOTH `href` and `onClick` did the\n   * client-side navigation AND a full page load — tearing down the app tree\n   * and every live connection it held, on every nav click. The design system's\n   * own demo could not surface it: a hash router's `href=\"#/x\"` never reloads\n   * either way. It showed up the moment a real consumer wired history routing.\n   *\n   * Dropping `href` to force the `preventDefault` branch works and costs too\n   * much — a nav item without an `href` is not a link, so it loses the hover\n   * URL, ctrl/cmd-click-to-new-tab and copy-link-address. Keep the `href`,\n   * take the event:\n   *\n   * ```tsx\n   * onClick: (e) => {\n   *   // Let the browser have the clicks that mean \"not here\" — a modified\n   *   // click or a middle click is an explicit request for a new tab, and\n   *   // swallowing it is the most-reported bug in hand-rolled SPA links.\n   *   if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n   *   e.preventDefault();\n   *   navigate(item.href);\n   * }\n   * ```\n   *\n   * Still router-agnostic: the shell hands over the event and decides nothing.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n};\n\nexport type NavSection = {\n  label?: string;\n  items: NavItem[];\n};\n\nexport interface AppShellProps {\n  /** Brand mark, top of the sidebar. */\n  brand?: ReactNode;\n  /**\n   * DX-3412 — an alternate, narrower brand mark shown in place of `brand`\n   * when the sidebar is COLLAPSED (`data-collapsed`) — a logo-only mark that\n   * fits the 56px collapsed rail (`w-14`), where the full `brand` (typically\n   * a logo + team name) would overflow. Omit to render nothing in the\n   * collapsed rail's brand row, the pre-DX-3412 behavior.\n   */\n  brandCollapsed?: ReactNode;\n  sections: NavSection[];\n  activeId?: string;\n  /** Pinned to the bottom of the sidebar — account, version, help. */\n  sidebarFooter?: ReactNode;\n  /** The top bar's content: search, actions, avatar. */\n  header?: ReactNode;\n  /**\n   * The landmark the content region is exposed as. `\"main\"` is right for the\n   * shell that IS the page.\n   *\n   * Set `\"none\"` when this shell is EMBEDDED in a page that already has a\n   * `<main>` — a preview of the shell inside documentation, or a sub-shell\n   * within a settings area. A document may only have one main landmark, and a\n   * second one is not a cosmetic problem: assistive technology offers \"skip to\n   * main content\" as a single destination, so two of them makes that command\n   * ambiguous and the shortcut stops being reliable.\n   *\n   * @default \"main\"\n   */\n  contentLandmark?: \"main\" | \"none\";\n  /**\n   * The accessible name of the sidebar's navigation landmark.\n   *\n   * A `<nav>` is a landmark, and assistive technology lists landmarks as\n   * navigation destinations. An UNNAMED one is announced as just \"navigation\",\n   * so two of them on a page — a shell previewed inside a page that is itself a\n   * shell, a sub-shell in a settings area — produce two identical entries and\n   * the list stops being useful. Same failure `contentLandmark` exists for,\n   * one landmark over.\n   *\n   * The default names it rather than leaving it bare; give an EMBEDDED shell a\n   * distinct one.\n   *\n   * @default the provider's `appShell.mainNavigation`\n   */\n  navLabel?: string;\n  /**\n   * Which box scrolls when the content is taller than the screen.\n   *\n   * `\"content\"` — the default, and what an application shell IS. The shell is\n   * exactly the viewport, the header and sidebar are fixed by structure, and\n   * the content column scrolls itself. A screen that wants to fill the height\n   * it has been given writes `flex-1 min-h-0` and never names a viewport unit\n   * or one of this library's tokens.\n   *\n   * `\"document\"` — the shell grows with its content and the PAGE scrolls, with\n   * the header and sidebar stuck to the top. For a shell embedded in a longer\n   * document, or a page whose content genuinely wants the browser's own\n   * scrollbar. It is the opt-out rather than the default, deliberately: the\n   * bounded arrangement is the one nobody has to compute anything for, and a\n   * default that made consumers subtract a header height from `100dvh` is what\n   * this prop exists to have stopped.\n   *\n   * @default \"content\"\n   */\n  scroll?: \"content\" | \"document\";\n  /**\n   * Change this to send the content back to the top — a route path, a record\n   * id, whatever identifies \"a different screen is showing now\".\n   *\n   * IT EXISTS BECAUSE BOUNDING THE SHELL MOVED THE SCROLLER. Every routed\n   * application resets the scroll on navigation, and while the DOCUMENT was\n   * the scroller they all wrote `window.scrollTo({ top: 0 })`. That line is\n   * inert here: the window no longer scrolls, so a route change would leave\n   * the new screen opened halfway down with nothing to indicate why.\n   *\n   * The alternative was to hand out a ref and let each consumer scroll it,\n   * which is the same work in every application plus a piece of this\n   * component's internals in all of them. The scroller stays private; the\n   * element also carries `data-app-shell-content` for the rarer jobs — scroll\n   * restoration on a back navigation, an intersection observer — that need the\n   * box itself.\n   */\n  scrollResetKey?: string | number;\n  /**\n   * Remembers whether the sidebar is collapsed, under `danxbot-<persistId>`.\n   * `false` stops it being remembered at all.\n   *\n   * COLLAPSING IS THE ONE GESTURE ON THIS SHELL THAT ONLY MAKES SENSE KEPT.\n   * Its entire purpose is to give the content the sidebar's width back, and it\n   * was plain `useState` — so every refresh handed the width straight back to\n   * the navigation. Somebody who wants a narrow sidebar wants it on every load;\n   * re-collapsing it on each one is the app forgetting a decision that was\n   * never provisional.\n   *\n   * NOTE THE DIFFERENCE FROM `PanelGroup`'s `persistId`, which is undefined by\n   * default and persists nothing until a caller names it. That is right there\n   * and wrong here: a page can hold any number of panel groups, so none of them\n   * can claim a default key without colliding with the next one, whereas an\n   * application has exactly ONE shell and can safely name itself. Two shells on\n   * one origin — a shell previewed inside a shell — give the inner one its own\n   * id, which is what the test for that case pins.\n   *\n   * It is the ONLY thing this component stores, and it is the only KIND of\n   * thing it should: a per-viewer arrangement that can come back empty with no\n   * consequence. Every read and write goes through `lib/persist`, which\n   * swallows the throw `localStorage` raises in a private window or wherever\n   * storage is blocked by policy — the read happens in a `useState`\n   * initializer, where an unhandled throw unmounts the whole tree. A blocked\n   * browser gets an expanded sidebar and a working app, never a blank page.\n   *\n   * @default \"app-shell-sidebar\"\n   */\n  persistId?: string | false;\n  children: ReactNode;\n  className?: string;\n}\n\nconst isCollapsed = (value: unknown): value is boolean => typeof value === \"boolean\";\n\nexport function AppShell({\n  brand,\n  brandCollapsed,\n  sections,\n  activeId,\n  sidebarFooter,\n  header,\n  contentLandmark = \"main\",\n  navLabel,\n  scroll = \"content\",\n  scrollResetKey,\n  persistId = \"app-shell-sidebar\",\n  children,\n  className,\n}: AppShellProps) {\n  const strings = useUiStrings().appShell;\n  const navName = navLabel ?? strings.mainNavigation;\n  const Content = contentLandmark === \"main\" ? \"main\" : \"div\";\n  const bounded = scroll === \"content\";\n  /* Read in the initializer rather than an effect — see `usePersistedState`.\n     An effect would paint the expanded sidebar first and snap it narrow one\n     frame later, on every single load. */\n  const [collapsed, setCollapsed] = usePersistedState<boolean>(\n    persistId === false ? undefined : persistId,\n    false,\n    { isValid: isCollapsed },\n  );\n  /* `HTMLDivElement`, not `HTMLElement`: `Content` is `\"main\"` or `\"div\"` and\n     TypeScript resolves the union's ref to the narrower of the two. Both are\n     plain block elements and `scrollTo` is on `Element`, so nothing here\n     depends on which one it is. */\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  /* NO GUARD ON THE FIRST RUN, and that is not an oversight. A shell mounting\n     at scroll zero is already at the top, so the reset is a no-op there; a\n     shell mounted by a route that restored a position wants that position\n     honoured, and this fires with the key it mounted with, once, before\n     anything has restored anything. `behavior: \"instant\"` because a jump\n     between screens is not a movement anybody is following. */\n  useEffect(() => {\n    if (scrollResetKey === undefined) return;\n    contentRef.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [scrollResetKey]);\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  /* DX-5319 - the header's own width, for `useHeaderFold`. Read in a layout effect so the first paint already\n     has it, and followed by a ResizeObserver. The header's width is set by the viewport and the sidebar and never by\n     its contents (see `lib/header-fold.ts`), so what a fold changes cannot feed back into it. */\n  const headerRef = useRef<HTMLElement>(null);\n  const [headerWidth, setHeaderWidth] = useState(0);\n  useLayoutEffect(() => {\n    const header = headerRef.current;\n    if (!header) return;\n    const measure = () => setHeaderWidth(Math.round(header.getBoundingClientRect().width));\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(header);\n    return () => observer.disconnect();\n  }, []);\n\n  const nav = (\n    <SidebarNav\n      sections={sections}\n      activeId={activeId}\n      collapsed={collapsed}\n      label={navName}\n      onNavigate={() => setMobileOpen(false)}\n    />\n  );\n\n  return (\n    /* THE ONE VIEWPORT UNIT. Everything below it is `flex-1` and `min-h-0`,\n       so no descendant — here or in a consumer's screen — ever has a reason to\n       name `dvh` or subtract a token from it. */\n    <HeaderWidthContext.Provider value={headerWidth}>\n    <div className={cn(\"flex bg-canvas\", bounded ? \"h-dvh\" : \"min-h-dvh\", className)}>\n      {/* Desktop sidebar. `hidden lg:flex`, so it is not merely invisible on\n          small screens — it is not in the tree at all, and cannot be tabbed\n          into behind the mobile drawer.\n\n          `h-dvh sticky top-0` IS WHAT MAKES THE NAV'S OWN SCROLLER REAL. The\n          list below already declares `min-h-0 flex-1 overflow-y-auto`, and it\n          had never once engaged: the shell root is `min-h-dvh`, so the row's\n          height came from its content, the aside stretched to whatever the nav\n          needed, and `flex-1` handed the list exactly the height it had asked\n          for. Measured in a consuming app at a 600px viewport, on a screen with\n          no long content of its own: a twenty-two item sidebar made the aside\n          1344px tall and the DOCUMENT 1344px tall with it, so every screen\n          scrolled vertically because of the navigation rather than because of\n          anything on the page.\n\n          The height is the fix and the stickiness is what keeps it usable: a\n          600px sidebar in a page that still scrolls would otherwise leave the\n          navigation behind at the top. Both are on the ASIDE rather than on the\n          root, deliberately — making the root `h-dvh` would bound the CONTENT\n          column too, which would take document scrolling away from every\n          consuming page and unstick the header that currently rides it. */}\n      <aside\n        /* `group/sidebar` + `data-collapsed`, the same pattern every stateful\n           overlay in this library already uses (see Popover's `data-[side=]`,\n           Choice's `data-checked` group) — so content passed into `sidebarFooter`\n           can react to the collapsed width with a plain\n           `group-data-collapsed/sidebar:hidden` class, with no prop or context\n           this component would otherwise have to thread through a plain\n           `ReactNode` slot. */\n        data-collapsed={collapsed || undefined}\n        className={cn(\n          \"group/sidebar hidden shrink-0 flex-col border-r border-border-subtle bg-surface lg:flex\",\n          /* Bounded: nothing. A flex item in a row of a fixed height is\n             stretched to it by `align-items`, so the nav list's own\n             `min-h-0 flex-1 overflow-y-auto` engages with no viewport unit and\n             no stickiness. Unbounded: the row's height comes from its content,\n             so the aside has to state the viewport itself and stay put while\n             the page scrolls past it — the ONE place a second viewport unit is\n             unavoidable, and the reason it lives behind an opt-out. */\n          !bounded && \"sticky top-0 h-dvh\",\n          \"transition-[var(--tx-colors),width] duration-(--dur-slow) ease-emphasis\",\n          collapsed ? \"w-14\" : \"w-60\",\n        )}\n      >\n        <div className={cn(\"flex h-control-xl shrink-0 items-center gap-2 px-3\", collapsed && \"justify-center\")}>\n          {!collapsed && <div className=\"min-w-0 flex-1\">{brand}</div>}\n          {/* `IconButton` carries its own tooltip from `label`, so the\n              explicit `Tooltip` wrapper that used to be here would have\n              produced two — and named the control twice. */}\n          <IconButton\n            label={collapsed ? strings.expandSidebar : strings.collapseSidebar}\n            tooltipSide=\"right\"\n            onClick={() => setCollapsed((v) => !v)}\n            icon={\n              <Icon\n                name=\"panel-left\"\n                size=\"sm\"\n                className={cn(\"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base)\", collapsed && \"rotate-180\")}\n              />\n            }\n          />\n        </div>\n\n        {/* DX-3412 — the collapsed rail's own brand mark, in ITS OWN row\n            below the toggle rather than sharing the toggle's row: the rail\n            is `w-14` (56px), and an icon-sized brand mark plus the toggle\n            button plus `gap-2 px-3` does not fit one row at that width. */}\n        {collapsed && brandCollapsed && (\n          <div className=\"flex shrink-0 items-center justify-center px-3 pb-2\">{brandCollapsed}</div>\n        )}\n\n        {/* `relative` for the same reason as the content column: a scroller\n            that is not in its descendants' containing-block chain does not\n            clip them. */}\n        <div className=\"relative min-h-0 flex-1 overflow-y-auto px-2 py-2\">{nav}</div>\n        {sidebarFooter && (\n          <div className=\"shrink-0 border-t border-border-subtle p-2\">{sidebarFooter}</div>\n        )}\n      </aside>\n\n      <div className={cn(\"flex min-w-0 flex-1 flex-col\", bounded && \"min-h-0\")}>\n        <header\n          ref={headerRef}\n          className={cn(\n            \"z-(--z-sticky) flex h-control-xl shrink-0 items-center gap-3\",\n            \"border-b border-border-subtle bg-canvas/85 px-4 backdrop-blur-md\",\n            /* FIXED BY STRUCTURE when the shell is bounded: the header sits\n               OUTSIDE the scroller, so there is nothing for it to stick to.\n               `sticky top-0` there would be a declaration that reads as intent\n               and does nothing. */\n            !bounded && \"sticky top-0\",\n          )}\n        >\n          <BaseDialog.Root open={mobileOpen} onOpenChange={setMobileOpen}>\n            <BaseDialog.Trigger\n              render={\n                /* `hideTooltip` on every Base UI `render` slot in this file:\n                   the slot expects ONE element it can merge props and a ref\n                   into, and a tooltip wrapper would swallow both. The name\n                   still comes from `label` — that part is never optional. */\n                <IconButton\n                  label={strings.openNavigation}\n                  hideTooltip\n                  className=\"lg:hidden\"\n                  /* A REAL 44px FLOOR, NOT THE COARSE-POINTER ONE.\n                     `dx-tap` (IconButton's own base) already floors this\n                     control's tap target, but only under `--tap-target`,\n                     which `scale.css` leaves at `auto` outside\n                     `@media (pointer: coarse)` — correct for a mouse with\n                     room to be precise, wrong for THIS control specifically:\n                     it is the only way into navigation on a narrow layout,\n                     and a narrow layout that reports a fine pointer (a\n                     resized desktop window, this library's own review\n                     tooling) is exactly the case the coarse-pointer query\n                     does not catch. `--tap-target` is a plain CSS custom\n                     property, so overriding it here — the same local-override\n                     idiom `Icon`/`Spinner` already use for `--dx-icon-size` —\n                     pins `dx-tap`'s existing min-width/min-height to 44px for\n                     this one control on every pointer type, without touching\n                     the shared coarse-pointer floor every other control in\n                     the system still reads. */\n                  style={{ \"--tap-target\": \"44px\" } as CSSProperties}\n                  icon={<Icon name=\"menu\" size=\"sm\" />}\n                />\n              }\n            />\n            <BaseDialog.Portal>\n              <BaseDialog.Backdrop className={overlayBackdropClassName(\"lg:hidden\")} />\n              <BaseDialog.Popup\n                className={cn(\n                  \"fixed inset-y-0 left-0 z-(--z-drawer) flex w-72 flex-col\",\n                  \"border-r border-border bg-surface shadow-xl outline-none lg:hidden\",\n                  /* Slides from the edge it lives on, so it reads as coming\n                     from off-screen rather than materialising in place. */\n                  \"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-slower) ease-emphasis\",\n                  \"data-starting-style:-translate-x-full data-ending-style:-translate-x-full\",\n                )}\n              >\n                <BaseDialog.Title className=\"sr-only\">{strings.navigationTitle}</BaseDialog.Title>\n                <div className=\"flex h-control-xl shrink-0 items-center justify-between gap-2 px-3\">\n                  <div className=\"min-w-0 flex-1\">{brand}</div>\n                  <BaseDialog.Close\n                    render={\n                      <IconButton\n                        label={strings.closeNavigation}\n                        hideTooltip\n                        icon={<Icon name=\"x\" size=\"sm\" />}\n                      />\n                    }\n                  />\n                </div>\n                <div className=\"relative min-h-0 flex-1 overflow-y-auto px-2 py-2\">\n                  <SidebarNav\n                    sections={sections}\n                    activeId={activeId}\n                    collapsed={false}\n                    label={navName}\n                    onNavigate={() => setMobileOpen(false)}\n                  />\n                </div>\n                {sidebarFooter && (\n                  <div className=\"shrink-0 border-t border-border-subtle p-2\">{sidebarFooter}</div>\n                )}\n              </BaseDialog.Popup>\n            </BaseDialog.Portal>\n          </BaseDialog.Root>\n\n          {header}\n        </header>\n\n        {/* THE SCROLLER, when the shell is bounded. `min-h-0` is what lets it\n            be shorter than its content — without it the automatic minimum size\n            of a flex item is its content, and the column pushes the shell\n            taller instead of scrolling inside it. */}\n        <Content\n          ref={contentRef}\n          data-app-shell-content=\"\"\n          /* `relative` PAIRS WITH THE OVERFLOW, and it is not decoration. An\n             absolutely positioned descendant is clipped against its containing\n             block, so a STATIC scroller is not in that chain and does not\n             contain it. Measured the moment this column became a scroller: the\n             demo reported `documentElement.scrollHeight` 1980 against a 700px\n             viewport while `body.scrollHeight` was exactly 700 — content\n             escaping past the box that was supposed to bound it, which is the\n             same defect `scripts/probe-containment.mjs` exists for, arriving\n             vertically. */\n          /* FOCUSABLE BECAUSE IT SCROLLS, and only because it scrolls.\n             `scrollable-region-focusable` — a scrolling box with nothing\n             focusable inside it cannot be scrolled by keyboard at all, so its\n             content is simply unreachable without a pointer. It did not apply\n             while the DOCUMENT scrolled (the window is always keyboard\n             scrollable) and it applies the moment this column takes over;\n             `a11y-scan` reported it on the two demo routes whose content has no\n             link or button in it, which is exactly the case that strands\n             somebody.\n\n             `-1` in the unbounded mode rather than nothing: `<main>` is what a\n             skip link points at, and a target that cannot take focus sends the\n             skip nowhere. */\n          tabIndex={bounded ? 0 : -1}\n          /* A FLEX COLUMN, so that `flex-1 min-h-0` on a screen inside it means\n             something. It was a block first and that made the documented shape\n             a lie: measured in the consuming app, a board screen carrying\n             `flex min-h-0 flex-1 flex-col` came out 1260px tall inside a 740px\n             column, the column scrolled, and the board's own lanes reported\n             876/876 — no internal scrolling at all, which is the exact defect\n             the height was supposed to fix. `flex-1` against a block parent is\n             inert.\n\n             It costs nothing for a screen that does not ask: a flex item's\n             automatic minimum is its content, so an ordinary tall page still\n             takes its natural height and scrolls here. */\n          className={cn(\n            \"flex min-w-0 flex-1 flex-col outline-none\",\n            bounded &&\n              \"relative min-h-0 overflow-y-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-border\",\n          )}\n        >\n          {children}\n        </Content>\n      </div>\n    </div>\n    </HeaderWidthContext.Provider>\n  );\n}\n\nfunction SidebarNav({\n  sections,\n  activeId,\n  collapsed,\n  label,\n  onNavigate,\n}: {\n  sections: NavSection[];\n  activeId?: string;\n  collapsed: boolean;\n  label: string;\n  onNavigate: () => void;\n}) {\n  return (\n    <nav aria-label={label} className=\"flex flex-col gap-4\">\n      <NavSections\n        sections={sections}\n        activeId={activeId}\n        collapsed={collapsed}\n        onNavigate={onNavigate}\n      />\n    </nav>\n  );\n}\n"],"names":["isCollapsed","value","AppShell","brand","brandCollapsed","sections","activeId","sidebarFooter","header","contentLandmark","navLabel","scroll","scrollResetKey","persistId","children","className","strings","useUiStrings","navName","Content","bounded","collapsed","setCollapsed","usePersistedState","contentRef","useRef","useEffect","mobileOpen","setMobileOpen","useState","headerRef","headerWidth","setHeaderWidth","useLayoutEffect","measure","observer","nav","jsx","SidebarNav","HeaderWidthContext","jsxs","cn","IconButton","v","Icon","BaseDialog","overlayBackdropClassName","label","onNavigate","NavSections"],"mappings":"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"}

package/dist/components/Attention.js

@@ -0,0 +1,130 @@
+import { jsxs as j, jsx as e } from "react/jsx-runtime";
+import { useRef as E, useState as C, useEffect as W, useLayoutEffect as L } from "react";
+import { cn as X } from "../lib/cn.js";
+import { devWarn as Y } from "../lib/dev-warn.js";
+import { resolveEffects as K, isPeriodic as U, clampRings as V, resolveReach as q, resolveTiming as B, WAVE_REACH as D } from "../lib/attention.js";
+const F = 520;
+function G({ count: o, style: r }) {
+  return /* @__PURE__ */ e("span", { className: "dx-attn-ripples", style: r, children: Array.from({ length: o }, (i, s) => {
+    const [d, u, p] = D[s];
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        className: "dx-attn-ripple",
+        style: {
+          "--k": s,
+          "--m1": d,
+          "--m2": u,
+          "--m3": p
+        }
+      },
+      s
+    );
+  }) });
+}
+function I({ effect: o, rings: r, cycleMs: i }) {
+  const s = { "--attn-dur": `${i}ms` };
+  switch (o) {
+    case "ripple":
+      return /* @__PURE__ */ e(G, { count: r, style: { ...s, "--attn-n": r } });
+    case "beacon":
+      return /* @__PURE__ */ e("span", { className: "dx-attn-ping", style: s });
+    case "pulse":
+      return /* @__PURE__ */ e("span", { className: "dx-attn-breath", style: s });
+    case "glow":
+      return /* @__PURE__ */ e("span", { className: "dx-attn-halo", style: s });
+    case "ring":
+      return /* @__PURE__ */ e("span", { className: "dx-attn-orbit", style: s });
+    case "shimmer":
+    case "bounce":
+    case "wiggle":
+      return null;
+  }
+}
+function rt({
+  children: o,
+  shape: r = "inherit",
+  effect: i,
+  fill: s = !1,
+  contain: d = !0,
+  tone: u = "accent",
+  speed: p = "normal",
+  intensity: x = "medium",
+  rings: H = 3,
+  active: c = !0,
+  interval: b,
+  block: P = !1,
+  className: M,
+  style: O,
+  ref: l,
+  ...T
+}) {
+  const v = E(null), [z, m] = C(!1), y = E(c);
+  W(() => {
+    if (c) {
+      y.current = !0, m(!1);
+      return;
+    }
+    if (!y.current) return;
+    y.current = !1, m(!0);
+    const t = setTimeout(() => m(!1), F);
+    return () => clearTimeout(t);
+  }, [c]);
+  const h = c ? "on" : z ? "stopping" : "off", { effects: a, conflict: N } = K(i ?? "ripple"), f = N?.join("+") ?? "";
+  W(() => {
+    f && console.error(
+      `Attention: effect ${f.split("+").join(" and ")} both move the control itself and cannot be combined, so neither is drawn. Pick one.`
+    );
+  }, [f]), b !== void 0 && !a.some(U) && Y(
+    "Attention",
+    `\`interval\` does nothing for effect="${a.join(" ")}" — it only sizes the rest between bursts of beacon, shimmer, bounce and wiggle. Use \`speed\` for the others.`
+  );
+  const g = (t) => B(t, p, b).cycleMs, w = a.find((t) => t === "bounce" || t === "wiggle"), _ = V(H);
+  return L(() => {
+    const t = v.current;
+    if (!t) return;
+    const S = () => {
+      const n = q(t.offsetWidth, t.offsetHeight, x);
+      if (n && (t.style.setProperty("--attn-bw", String(t.offsetWidth)), t.style.setProperty("--attn-bh", String(t.offsetHeight)), t.style.setProperty("--attn-reach", String(n.reachPx)), t.style.setProperty("--attn-diag", `${n.diagonal}px`), t.style.setProperty("--attn-rx", String(n.reachX)), t.style.setProperty("--attn-ry", String(n.reachY)), t.style.setProperty("--attn-sx", String(n.swellX)), t.style.setProperty("--attn-sy", String(n.swellY)), t.style.setProperty("--attn-tilt", `${n.tilt}deg`), t.style.setProperty("--attn-span", `${Math.max(t.offsetWidth, t.offsetHeight)}px`)), r === "inherit") {
+        const A = Array.from(t.children).find((k) => !k.hasAttribute("data-attn-layer")), $ = A ? getComputedStyle(A).borderRadius : "";
+        $ ? t.style.setProperty("--attn-radius", $) : t.style.removeProperty("--attn-radius");
+      } else
+        t.style.removeProperty("--attn-radius");
+    };
+    if (S(), typeof ResizeObserver > "u") return;
+    const R = new ResizeObserver(S);
+    return R.observe(t), () => R.disconnect();
+  }), /* @__PURE__ */ j(
+    P ? "div" : "span",
+    {
+      ref: (t) => {
+        v.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+      },
+      className: X("dx-attn", P && "dx-attn-block", M),
+      "data-attn": "",
+      "data-shape": r,
+      "data-effect": a.join(" "),
+      "data-attn-conflict": N ? f : void 0,
+      "data-tone": u,
+      "data-intensity": x,
+      "data-state": h,
+      "data-fill": s ? "" : void 0,
+      "data-contain": d ? "" : void 0,
+      style: { ...w ? { "--attn-dur": `${g(w)}ms` } : {}, ...O },
+      ...T,
+      children: [
+        h !== "off" && /* @__PURE__ */ j("span", { className: "dx-attn-layers", "aria-hidden": "true", "data-attn-layer": "", children: [
+          s && /* @__PURE__ */ e("span", { className: "dx-attn-fill" }),
+          /* @__PURE__ */ e("span", { className: "dx-attn-static" }),
+          /* @__PURE__ */ e("span", { className: "dx-attn-fx", children: a.map((t) => /* @__PURE__ */ e(I, { effect: t, rings: _, cycleMs: g(t) }, t)) })
+        ] }),
+        o,
+        h !== "off" && a.includes("shimmer") && /* @__PURE__ */ e("span", { className: "dx-attn-over dx-attn-layers", "aria-hidden": "true", "data-attn-layer": "", children: /* @__PURE__ */ e("span", { className: "dx-attn-fx dx-attn-glint", style: { "--attn-dur": `${g("shimmer")}ms` } }) })
+      ]
+    }
+  );
+}
+export {
+  rt as Attention
+};
+//# sourceMappingURL=Attention.js.map

package/dist/components/Attention.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attention.js","sources":["../../src/components/Attention.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { devWarn } from \"../lib/dev-warn\";\nimport {\n  WAVE_REACH,\n  clampRings,\n  isPeriodic,\n  resolveEffects,\n  resolveReach,\n  resolveTiming,\n  type AttentionEffect,\n  type AttentionEffects,\n  type AttentionIntensity,\n  type AttentionSpeed,\n  type ValidAttentionEffects,\n} from \"../lib/attention\";\n\nexport type { AttentionEffect, AttentionEffects, AttentionIntensity, AttentionSpeed };\n\n/* ============================================================================\n   ATTENTION — draws the eye to any control, without touching the control.\n   ----------------------------------------------------------------------------\n   \"Look here\", as a wrapper: slow click-ripple circles growing out of a\n   button and fading away, a breathing halo, a rotating border, a glint. It wraps ANYTHING, so the effect is not a\n   prop every control has to grow (`Button attention` was the first of those and\n   is the reason this exists).\n\n   THE SHAPE IS THE CONTROL'S SHAPE (DX-4504). `shape` other than `inherit`\n   re-cuts the wrapped control itself (its border-radius, so its own background,\n   border and focus ring follow), because an effect drawn as a circle round a\n   rounded-square button reads as two shapes, not one circular button. Only the\n   corners change: the box, hit area and layout are the control's own. `circle`\n   is 50%, so it is a circle on a square control (an icon button) and an\n   ellipse on anything else; use `pill` there.\n\n   WHY A WRAPPER, AND WHY IT CANNOT MOVE THE CHILD.\n   The effect needs a box to hug and somewhere to draw outside the child's own\n   paint. The wrapper is `position: relative; isolation: isolate` and sized by\n   the child alone — it has no padding, border or gap — and every effect layer\n   is `position: absolute` and `pointer-events: none`, so:\n\n     - the child's box is the same box with the wrapper or without it, active or\n       not (nothing is inserted into the flow, nothing is animated that changes\n       size: waves SCALE, they do not resize);\n     - the child's hit area and focus are untouched, and the child element is\n       never re-mounted when a prop changes, so a focused control stays focused;\n     - the effect paints BEHIND the child (a negative z-index inside the\n       isolated wrapper), so a transparent child shows the `fill` and a solid\n       one hides it and shows only what spreads past its edge. The one exception\n       is `shimmer`, a glint that has to cross the child to be seen.\n\n   DECORATIVE, AND NEVER THE ONLY SIGNAL. Every layer is `aria-hidden` and there\n   is no live region: the effect says \"look here\" to people who can see it and\n   nothing at all to everyone else. What it points at must say what is going on\n   in its own label or tooltip.\n\n   TURN IT ON ONLY WHILE SOMETHING IS WAITING FOR THIS VIEWER. Same rule as\n   `Button attention` and `Badge pulse`: an effect running on something nobody\n   needs to act on captures attention permanently, and so stops meaning\n   anything. `active` exists for exactly this: switching it off fades the\n   effect out over a moment instead of cutting it, and unmounts the layers so a\n   finished prompt costs nothing.\n\n   REDUCED MOTION IS A STATIC HIGHLIGHT, NOT NOTHING. Under the OS preference,\n   `data-motion=\"reduced\"`, and the frame a theme change suspends motion, the\n   animated layers are not shown at all and a static outline (and the `fill`, if\n   asked for) takes their place — \"reduce, don't remove\", the same shape as\n   `.dx-attention`. The choice is a single pair of selectors in attention.css,\n   not one media query per effect.\n\n   A RIPPLE IS A CLICK RIPPLE, SLOWED DOWN (DX-4504). Each wave is a FILLED\n   circle that starts as a point at the centre at full strength, grows, and\n   fades linearly so its opacity is exactly 0 the moment it reaches its\n   radius. Two or three are staggered so one is always growing, and each\n   reaches a different radius. With `contain` (the default) the circles are\n   clipped to the control's shape, like a real click ripple; they paint behind\n   the control's content, so they show on a transparent control (a ghost or\n   outline button) and are hidden by a solid background — use `contain={false}`\n   there, and the circles grow out past the edge instead.\n\n   WAVES THAT SPILL NEED ROOM. With `contain={false}` (and for `beacon`) a wave\n   is drawn OUTSIDE the child's box (up to ~42px past it at `medium`, a quarter\n   more at `strong`), so two things follow. An ancestor with\n   `overflow: hidden` clips it. And a transformed box counts toward the scrollable\n   overflow of the nearest scroll container, so a wave that reaches past the right\n   or bottom edge of one makes its scrollbar come and go with the animation.\n   Keep the control that distance from a scroll edge, give that container\n   `overflow-x: clip`, or pick `glow`/`ring`, which stay within a few pixels.\n   ========================================================================= */\n\nexport type AttentionShape = \"circle\" | \"pill\" | \"rounded\" | \"square\" | \"inherit\";\n\nexport type AttentionTone = \"accent\" | \"brand\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\";\n\nexport interface AttentionProps<E extends AttentionEffects = AttentionEffects>\n  extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  /** What to draw the eye to. Rendered untouched; its box is the box the effect hugs. */\n  children: ReactNode;\n  /**\n   * The shape of the control AND of its effect (DX-4504): `circle` (a circular\n   * icon button), `pill`, `rounded` (the library's large radius) or `square`\n   * re-cut the wrapped control's own corners (its border-radius, with an\n   * `!important` that beats a `rounded-md` utility), so there is never a square\n   * button inside a circular effect. Only the corners change: the box, hit area\n   * and layout stay the control's own. `circle` is 50%, so it is a circle on a\n   * square control and an ellipse on any other: use `pill` there. `inherit`\n   * leaves the control alone and MEASURES its own border-radius for the effect.\n   *\n   * @default \"inherit\"\n   */\n  shape?: AttentionShape;\n  /**\n   * `ripple` slow click-ripple circles: each grows from the centre and fades to nothing as it reaches its radius, staggered so one is always growing, each to a different radius.\n   * `pulse` a tinted shape behind the child breathing in scale and opacity.\n   * `glow` a soft halo that breathes.\n   * `ring` a bright arc travelling round the border.\n   * `beacon` one radar ping every `interval`.\n   * `shimmer` a glint sweeping across the child every `interval`.\n   * `bounce` / `wiggle` a nudge of the child itself every `interval`.\n   *\n   * Or a list to combine them (DX-4504), e.g. `[\"wiggle\", \"shimmer\"]`: each draws its own layer, stacked in one\n   * fixed order (glow, pulse, ripple, beacon, ring behind the control; shimmer over it) whatever order they are\n   * listed in, each at its own speed. `bounce` and `wiggle` both move the control itself, so they cannot be\n   * combined with each other: a literal list naming both is a type error, and at runtime neither is drawn and a\n   * console error names the conflict.\n   *\n   * @default \"ripple\"\n   */\n  effect?: E & ValidAttentionEffects<E>;\n  /** Highlight the whole background behind the child. This is the static tint, and it stays under reduced motion. @default false */\n  fill?: boolean;\n  /**\n   * Clip the `ripple` circles to the control's shape, like a click ripple\n   * (`true`), or let them grow out past its edge (`false`). Only `ripple` has\n   * circles to clip; every other effect ignores it.\n   *\n   * The circles paint BEHIND the control's content, so a contained ripple\n   * shows on a transparent control (a ghost or outline button, a card with no\n   * background) and is hidden by a solid background. On a solid control use\n   * `contain={false}`: the circles then grow out past its edge, where they show.\n   *\n   * @default true\n   */\n  contain?: boolean;\n  /** The colour, as one of the library's semantic tones. @default \"accent\" */\n  tone?: AttentionTone;\n  /**\n   * `slow`, `normal` or `fast`, or a number of milliseconds for one cycle of\n   * the effect. For the periodic effects (`beacon`, `shimmer`, `bounce`,\n   * `wiggle`) the cycle is the gap between two bursts, and `interval` wins over\n   * a numeric `speed`.\n   *\n   * @default \"normal\"\n   */\n  speed?: AttentionSpeed;\n  /** How strong: the opacity of the waves and tint, and how far a wave reaches. @default \"medium\" */\n  intensity?: AttentionIntensity;\n  /** How many waves `ripple` keeps in flight, 1 to 5 (anything else is clamped). Ignored by every other effect. @default 3 */\n  rings?: number;\n  /**\n   * Draw the effect. Switching it off fades the effect out and removes the\n   * layers; switching it back on fades it in.\n   *\n   * @default true\n   */\n  active?: boolean;\n  /**\n   * Milliseconds between two bursts of a periodic effect (`beacon`, `shimmer`,\n   * `bounce`, `wiggle`). Ignored, with a development warning, by the continuous\n   * effects, which have no rest to size.\n   */\n  interval?: number;\n  /** Render a block `div` (for a card or a row) instead of an inline `span` hugging an inline control. A layout choice made once: changing it swaps the element, which re-mounts the child. @default false */\n  block?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\n/* How long a fade-out takes before the layers are unmounted. A little longer\n   than the CSS fade (`--dur-slowest`, 450ms) so the unmount never cuts it. */\nconst STOP_MS = 520;\n\n/** The circles of a `ripple`, in the box that clips them when `contain` is on. */\nfunction Waves({ count, style }: { count: number; style: CSSProperties }) {\n  return (\n    <span className=\"dx-attn-ripples\" style={style}>\n      {Array.from({ length: count }, (_, index) => {\n        const [first, second, third] = WAVE_REACH[index];\n        return (\n          <span\n            key={index}\n            className=\"dx-attn-ripple\"\n            style={\n              {\n                \"--k\": index,\n                \"--m1\": first,\n                \"--m2\": second,\n                \"--m3\": third,\n              } as CSSProperties\n            }\n          />\n        );\n      })}\n    </span>\n  );\n}\n\n/** The layer one effect draws behind the child, at that effect's own cycle (`--attn-dur` on the layer itself). */\nfunction EffectLayer({ effect, rings, cycleMs }: { effect: AttentionEffect; rings: number; cycleMs: number }) {\n  const style = { \"--attn-dur\": `${cycleMs}ms` } as CSSProperties;\n  switch (effect) {\n    case \"ripple\":\n      return <Waves count={rings} style={{ ...style, \"--attn-n\": rings } as CSSProperties} />;\n    case \"beacon\":\n      return <span className=\"dx-attn-ping\" style={style} />;\n    case \"pulse\":\n      return <span className=\"dx-attn-breath\" style={style} />;\n    case \"glow\":\n      return <span className=\"dx-attn-halo\" style={style} />;\n    case \"ring\":\n      return <span className=\"dx-attn-orbit\" style={style} />;\n    case \"shimmer\":\n    case \"bounce\":\n    case \"wiggle\":\n      /* These draw no layer behind the child: shimmer's glint is the `over`\n         layer, and bounce/wiggle move the wrapper itself. */\n      return null;\n  }\n}\n\nexport function Attention<const E extends AttentionEffects = \"ripple\">({\n  children,\n  shape = \"inherit\",\n  effect,\n  fill = false,\n  contain = true,\n  tone = \"accent\",\n  speed = \"normal\",\n  intensity = \"medium\",\n  rings = 3,\n  active = true,\n  interval,\n  block = false,\n  className,\n  style,\n  ref,\n  ...props\n}: AttentionProps<E>) {\n  const root = useRef<HTMLElement | null>(null);\n\n  /* Fading out, then gone. `stopping` is only ever true for the 520ms after an\n     active -> inactive change; `wasActive` stops a wrapper that STARTS inactive\n     from \"stopping\" something that never ran. */\n  const [stopping, setStopping] = useState(false);\n  const wasActive = useRef(active);\n  useEffect(() => {\n    if (active) {\n      wasActive.current = true;\n      setStopping(false);\n      return;\n    }\n    if (!wasActive.current) return;\n    wasActive.current = false;\n    setStopping(true);\n    const timer = setTimeout(() => setStopping(false), STOP_MS);\n    return () => clearTimeout(timer);\n  }, [active]);\n  // I18N-ALLOW: state-machine token written to a data-state attribute\n  const state = active ? \"on\" : stopping ? \"stopping\" : \"off\";\n\n  const { effects, conflict } = resolveEffects(effect ?? \"ripple\");\n  const conflictKey = conflict?.join(\"+\") ?? \"\";\n  /* DX-4504 - refused loudly, once per mount or change of the list, not on every render. */\n  useEffect(() => {\n    if (!conflictKey) return;\n    console.error(\n      `Attention: effect ${conflictKey.split(\"+\").join(\" and \")} both move the control itself and cannot be ` +\n        \"combined, so neither is drawn. Pick one.\",\n    );\n  }, [conflictKey]);\n\n  if (interval !== undefined && !effects.some(isPeriodic)) {\n    devWarn(\n      \"Attention\",\n      `\\`interval\\` does nothing for effect=\"${effects.join(\" \")}\" — it only sizes the rest between bursts of ` +\n        \"beacon, shimmer, bounce and wiggle. Use `speed` for the others.\",\n    );\n  }\n\n  const cycleOf = (one: AttentionEffect) => resolveTiming(one, speed, interval).cycleMs;\n  /* The one effect that moves the wrapper, if any: its cycle is the wrapper's own `--attn-dur`. */\n  const motion = effects.find((one) => one === \"bounce\" || one === \"wiggle\");\n  const count = clampRings(rings);\n\n  /* Everything the stylesheet cannot work out itself. Measured, not guessed:\n     a wave's reach depends on the box it surrounds, and a CSS `calc()` cannot\n     divide one length by another. Written straight to the element, so a resize\n     re-measures without re-rendering and the numbers can never cause a layout\n     shift of their own (they only feed `scale()`). */\n  useLayoutEffect(() => {\n    const el = root.current;\n    if (!el) return;\n    const measure = () => {\n      const reach = resolveReach(el.offsetWidth, el.offsetHeight, intensity);\n      if (reach) {\n        el.style.setProperty(\"--attn-bw\", String(el.offsetWidth));\n        el.style.setProperty(\"--attn-bh\", String(el.offsetHeight));\n        el.style.setProperty(\"--attn-reach\", String(reach.reachPx));\n        el.style.setProperty(\"--attn-diag\", `${reach.diagonal}px`);\n        el.style.setProperty(\"--attn-rx\", String(reach.reachX));\n        el.style.setProperty(\"--attn-ry\", String(reach.reachY));\n        el.style.setProperty(\"--attn-sx\", String(reach.swellX));\n        el.style.setProperty(\"--attn-sy\", String(reach.swellY));\n        el.style.setProperty(\"--attn-tilt\", `${reach.tilt}deg`);\n        el.style.setProperty(\"--attn-span\", `${Math.max(el.offsetWidth, el.offsetHeight)}px`);\n      }\n      if (shape === \"inherit\") {\n        const child = Array.from(el.children).find((node) => !node.hasAttribute(\"data-attn-layer\"));\n        const radius = child ? getComputedStyle(child).borderRadius : \"\";\n        if (radius) el.style.setProperty(\"--attn-radius\", radius);\n        else el.style.removeProperty(\"--attn-radius\");\n      } else {\n        el.style.removeProperty(\"--attn-radius\");\n      }\n    };\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  });\n\n  const setRef = (node: HTMLElement | null) => {\n    root.current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  };\n\n  const Root = block ? \"div\" : \"span\";\n\n  return (\n    <Root\n      ref={setRef}\n      className={cn(\"dx-attn\", block && \"dx-attn-block\", className)}\n      data-attn=\"\"\n      data-shape={shape}\n      data-effect={effects.join(\" \")}\n      data-attn-conflict={conflict ? conflictKey : undefined}\n      data-tone={tone}\n      data-intensity={intensity}\n      data-state={state}\n      data-fill={fill ? \"\" : undefined}\n      data-contain={contain ? \"\" : undefined}\n      style={{ ...(motion ? { \"--attn-dur\": `${cycleOf(motion)}ms` } : {}), ...style } as CSSProperties}\n      {...props}\n    >\n      {state !== \"off\" && (\n        <span className=\"dx-attn-layers\" aria-hidden=\"true\" data-attn-layer=\"\">\n          {fill && <span className=\"dx-attn-fill\" />}\n          <span className=\"dx-attn-static\" />\n          <span className=\"dx-attn-fx\">\n            {effects.map((one) => (\n              <EffectLayer key={one} effect={one} rings={count} cycleMs={cycleOf(one)} />\n            ))}\n          </span>\n        </span>\n      )}\n      {children}\n      {state !== \"off\" && effects.includes(\"shimmer\") && (\n        <span className=\"dx-attn-over dx-attn-layers\" aria-hidden=\"true\" data-attn-layer=\"\">\n          <span className=\"dx-attn-fx dx-attn-glint\" style={{ \"--attn-dur\": `${cycleOf(\"shimmer\")}ms` } as CSSProperties} />\n        </span>\n      )}\n    </Root>\n  );\n}\n"],"names":["STOP_MS","Waves","count","style","jsx","_","index","first","second","third","WAVE_REACH","EffectLayer","effect","rings","cycleMs","Attention","children","shape","fill","contain","tone","speed","intensity","active","interval","block","className","ref","props","root","useRef","stopping","setStopping","useState","wasActive","useEffect","timer","state","effects","conflict","resolveEffects","conflictKey","isPeriodic","devWarn","cycleOf","one","resolveTiming","motion","clampRings","useLayoutEffect","el","measure","reach","resolveReach","child","node","radius","observer","jsxs","cn"],"mappings":"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"}

package/dist/components/Avatar.js

@@ -0,0 +1,99 @@
+import { jsxs as d, jsx as g } from "react/jsx-runtime";
+import { Avatar as f } from "@base-ui/react/avatar";
+import { tv as x } from "tailwind-variants";
+import { cn as n } from "../lib/cn.js";
+import { useUiStrings as h } from "../lib/i18n/provider.js";
+const b = x({
+  slots: {
+    root: [
+      "relative inline-flex shrink-0 items-center justify-center overflow-hidden",
+      "rounded-full bg-surface-inset align-middle select-none"
+    ],
+    image: "size-full object-cover",
+    fallback: "font-display font-semibold uppercase",
+    status: [
+      "absolute right-0 bottom-0 rounded-full",
+      /* The ring is the CANVAS colour, not a border, so the dot reads as
+         punched through the avatar rather than stuck on top of it. */
+      "ring-2 ring-canvas"
+    ]
+  },
+  variants: {
+    size: {
+      xs: { root: "size-6", fallback: "text-2xs", status: "size-1.5" },
+      sm: { root: "size-8", fallback: "text-xs", status: "size-2" },
+      md: { root: "size-10", fallback: "text-sm", status: "size-2.5" },
+      lg: { root: "size-12", fallback: "text-md", status: "size-3" },
+      xl: { root: "size-16", fallback: "text-xl", status: "size-3.5" }
+    },
+    shape: {
+      circle: { root: "rounded-full" },
+      /* Squircle, for entities rather than people — a repo, a board, a bot. */
+      rounded: { root: "rounded-lg" }
+    }
+  },
+  defaultVariants: { size: "md", shape: "circle" }
+}), m = [
+  "bg-accent-subtle text-accent-text",
+  "bg-brand-subtle text-brand-text",
+  "bg-success-subtle text-success-text",
+  "bg-warning-subtle text-warning-text",
+  "bg-danger-subtle text-danger-text",
+  "bg-info-subtle text-info-text"
+];
+function p(e) {
+  let t = 0;
+  for (let s = 0; s < e.length; s++) t = t * 31 + e.charCodeAt(s) >>> 0;
+  return m[t % m.length];
+}
+function v(e) {
+  const t = e.trim().split(/\s+/).filter(Boolean);
+  return t.length ? t.length === 1 ? t[0][0] : t[0][0] + t[t.length - 1][0] : "?";
+}
+const z = {
+  online: "bg-success",
+  busy: "bg-danger",
+  away: "bg-warning",
+  offline: "bg-border-strong"
+};
+function T({ src: e, name: t, fallback: s, status: r, size: i, shape: l, className: o, ref: c }) {
+  const a = b({ size: i, shape: l }), u = h().avatar;
+  return /* @__PURE__ */ d(f.Root, { ref: c, className: n(a.root(), o), children: [
+    e && /* @__PURE__ */ g(f.Image, { src: e, alt: t, className: a.image() }),
+    /* @__PURE__ */ g(f.Fallback, { className: n(a.fallback(), "grid size-full place-items-center", p(t)), children: s ?? v(t) }),
+    r && /* @__PURE__ */ g("span", { className: n(a.status(), z[r]), "aria-label": u.status[r], role: "img" })
+  ] });
+}
+function j({ children: e, max: t = 4, size: s = "md", className: r }) {
+  const i = Array.isArray(e) ? e : [e], l = i.slice(0, t), o = i.length - l.length, c = b({ size: s });
+  return /* @__PURE__ */ d("div", { className: n("flex items-center", r), children: [
+    l.map((a, u) => /* @__PURE__ */ g(
+      "span",
+      {
+        className: "relative -ml-2 rounded-full ring-2 ring-canvas first:ml-0",
+        style: { zIndex: l.length - u },
+        children: a
+      },
+      u
+    )),
+    o > 0 && /* @__PURE__ */ d(
+      "span",
+      {
+        className: n(
+          c.root(),
+          c.fallback(),
+          "relative -ml-2 bg-surface-raised text-tertiary ring-2 ring-canvas"
+        ),
+        children: [
+          "+",
+          o
+        ]
+      }
+    )
+  ] });
+}
+export {
+  T as Avatar,
+  j as AvatarGroup
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\n\n/* ----------------------------------------------------------------------------\n   AVATAR\n\n   The fallback is the whole component. Images fail — slow networks, dead CDNs,\n   users who never uploaded one — and an avatar that collapses to a broken-image\n   glyph or an empty circle wrecks the alignment of every row it sits in.\n\n   INITIALS ARE DERIVED, AND THE COLOUR IS DETERMINISTIC. Hashing the name to a\n   hue means the same person is the same colour everywhere in the app, every\n   session, with nothing stored. Random colours would make the fallback change\n   identity on every reload, which is worse than grey.\n\n   Hues are drawn from the system's own accent ramps rather than free-running\n   HSL, so a wall of fallbacks still looks like this product.\n   -------------------------------------------------------------------------- */\n\nconst avatar = tv({\n  slots: {\n    root: [\n      \"relative inline-flex shrink-0 items-center justify-center overflow-hidden\",\n      \"rounded-full bg-surface-inset align-middle select-none\",\n    ],\n    image: \"size-full object-cover\",\n    fallback: \"font-display font-semibold uppercase\",\n    status: [\n      \"absolute right-0 bottom-0 rounded-full\",\n      /* The ring is the CANVAS colour, not a border, so the dot reads as\n         punched through the avatar rather than stuck on top of it. */\n      \"ring-2 ring-canvas\",\n    ],\n  },\n  variants: {\n    size: {\n      xs: { root: \"size-6\", fallback: \"text-2xs\", status: \"size-1.5\" },\n      sm: { root: \"size-8\", fallback: \"text-xs\", status: \"size-2\" },\n      md: { root: \"size-10\", fallback: \"text-sm\", status: \"size-2.5\" },\n      lg: { root: \"size-12\", fallback: \"text-md\", status: \"size-3\" },\n      xl: { root: \"size-16\", fallback: \"text-xl\", status: \"size-3.5\" },\n    },\n    shape: {\n      circle: { root: \"rounded-full\" },\n      /* Squircle, for entities rather than people — a repo, a board, a bot. */\n      rounded: { root: \"rounded-lg\" },\n    },\n  },\n  defaultVariants: { size: \"md\", shape: \"circle\" },\n});\n\n/** Fallback palettes, drawn from the system ramps so a wall of them coheres. */\nconst TINTS = [\n  \"bg-accent-subtle text-accent-text\",\n  \"bg-brand-subtle text-brand-text\",\n  \"bg-success-subtle text-success-text\",\n  \"bg-warning-subtle text-warning-text\",\n  \"bg-danger-subtle text-danger-text\",\n  \"bg-info-subtle text-info-text\",\n];\n\n/** Stable hash — the same name always lands on the same tint. */\nfunction tintFor(seed: string): string {\n  let hash = 0;\n  for (let i = 0; i < seed.length; i++) hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;\n  return TINTS[hash % TINTS.length];\n}\n\n/**\n * First letters of the first and last words.\n *\n * Deliberately not \"first two characters\": \"Dan Newman\" should be DN, not DA.\n * Single words give one letter rather than two, because the second letter of a\n * word carries no identity — \"kestrel\" reads better as K than as KE.\n */\nfunction initialsFor(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (!words.length) return \"?\";\n  if (words.length === 1) return words[0][0];\n  return words[0][0] + words[words.length - 1][0];\n}\n\nexport type AvatarStatus = \"online\" | \"busy\" | \"away\" | \"offline\";\n\nconst STATUS_TONE: Record<AvatarStatus, string> = {\n  online: \"bg-success\",\n  busy: \"bg-danger\",\n  away: \"bg-warning\",\n  offline: \"bg-border-strong\",\n};\n\nexport interface AvatarProps extends VariantProps<typeof avatar> {\n  src?: string;\n  /** Drives the initials, the fallback tint, and the accessible name. */\n  name: string;\n  /** Overrides the derived initials — for an icon, or a custom mark. */\n  fallback?: ReactNode;\n  status?: AvatarStatus;\n  className?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Avatar({ src, name, fallback, status, size, shape, className, ref }: AvatarProps) {\n  const s = avatar({ size, shape });\n  const strings = useUiStrings().avatar;\n\n  return (\n    <BaseAvatar.Root ref={ref} className={cn(s.root(), className)}>\n      {src && <BaseAvatar.Image src={src} alt={name} className={s.image()} />}\n      <BaseAvatar.Fallback className={cn(s.fallback(), \"grid size-full place-items-center\", tintFor(name))}>\n        {fallback ?? initialsFor(name)}\n      </BaseAvatar.Fallback>\n      {status && (\n        <span className={cn(s.status(), STATUS_TONE[status])} aria-label={strings.status[status]} role=\"img\" />\n      )}\n    </BaseAvatar.Root>\n  );\n}\n\nexport interface AvatarGroupProps {\n  children: ReactNode;\n  /** Show at most this many, then a +N chip. */\n  max?: number;\n  size?: VariantProps<typeof avatar>[\"size\"];\n  className?: string;\n}\n\n/**\n * Overlapping avatars with an overflow count.\n *\n * The stack order is REVERSED so earlier avatars sit on top of later ones.\n * Left-to-right overlap with natural order puts each avatar's face under its\n * neighbour, which is exactly the half you need to see.\n */\nexport function AvatarGroup({ children, max = 4, size = \"md\", className }: AvatarGroupProps) {\n  const items = Array.isArray(children) ? children : [children];\n  const shown = items.slice(0, max);\n  const overflow = items.length - shown.length;\n  const s = avatar({ size });\n\n  return (\n    <div className={cn(\"flex items-center\", className)}>\n      {shown.map((child, i) => (\n        <span\n          key={i}\n          className=\"relative -ml-2 rounded-full ring-2 ring-canvas first:ml-0\"\n          style={{ zIndex: shown.length - i }}\n        >\n          {child}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className={cn(\n            s.root(),\n            s.fallback(),\n            \"relative -ml-2 bg-surface-raised text-tertiary ring-2 ring-canvas\",\n          )}\n        >\n          +{overflow}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["avatar","tv","TINTS","tintFor","seed","hash","i","initialsFor","name","words","STATUS_TONE","Avatar","src","fallback","status","size","shape","className","ref","s","strings","useUiStrings","jsxs","BaseAvatar","cn","jsx","AvatarGroup","children","max","items","shown","overflow","child"],"mappings":"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"}

package/dist/components/Badge.js

@@ -0,0 +1,143 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { tv as _ } from "tailwind-variants";
+import { cn as o } from "../lib/cn.js";
+import { Icon as h } from "./Icon.js";
+const e = {
+  neutral: "text-secondary",
+  accent: "text-accent-text",
+  brand: "text-brand-text",
+  success: "text-success-text",
+  warning: "text-warning-text",
+  danger: "text-danger-text",
+  orange: "text-orange-text",
+  info: "text-info-text",
+  muted: "text-muted-text"
+}, w = `border-border bg-surface-raised ${e.neutral}`, N = _({
+  base: [
+    "inline-flex max-w-full items-center gap-1.5 whitespace-nowrap font-semibold",
+    "border transition-colors duration-(--dur-fast)"
+  ],
+  variants: {
+    tone: {
+      neutral: w,
+      accent: ["border-accent-border bg-accent-subtle", e.accent],
+      brand: ["border-transparent bg-brand-subtle", e.brand],
+      success: ["border-success-border bg-success-subtle", e.success],
+      warning: ["border-warning-border bg-warning-subtle", e.warning],
+      danger: ["border-danger-border bg-danger-subtle", e.danger],
+      // DX-4657 - between `warning` (amber) and `danger` (red): a "hold" that is worse than a caution and not yet a stop.
+      orange: ["border-orange-border bg-orange-subtle", e.orange],
+      info: ["border-info-border bg-info-subtle", e.info],
+      // DX-3662 — the 8th tone, a quieter grey for a closed/inert fact.
+      // See `authored.css`'s own `--color-muted` comment for why this is a
+      // second grey rather than reusing `neutral`.
+      muted: ["border-muted-border bg-muted-subtle", e.muted]
+    },
+    size: {
+      sm: "h-5 rounded-sm px-1.5 text-2xs",
+      md: "h-6 rounded-md px-2 text-xs",
+      lg: "h-7 rounded-md px-2.5 text-sm"
+    },
+    /* A filled dot carries status without relying on hue alone, which is what
+       keeps "success" and "danger" distinguishable for a red-green colour
+       deficiency — the most common one. */
+    dot: { true: "", false: "" }
+  },
+  defaultVariants: { tone: "neutral", size: "md", dot: !1 }
+}), y = [
+  "border-[color:color-mix(in_oklab,var(--badge-color)_45%,transparent)]",
+  "bg-[color:color-mix(in_oklab,var(--badge-color)_16%,transparent)]",
+  "text-[color:color-mix(in_oklab,var(--badge-color)_72%,var(--color-primary))]"
+], l = {
+  neutral: "bg-tertiary",
+  accent: "bg-accent",
+  brand: "bg-brand",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  orange: "bg-orange",
+  info: "bg-info",
+  muted: "bg-muted"
+};
+function k({
+  className: b,
+  tone: t = "neutral",
+  size: s,
+  dot: i,
+  icon: u,
+  pulse: g,
+  dismiss: a,
+  color: r,
+  style: d,
+  children: x,
+  ref: m,
+  ...p
+}) {
+  if (r !== void 0 && t !== "neutral")
+    throw new Error(`Badge: tone "${t}" and a custom color were both given. A custom color replaces the tone; pass one.`);
+  function f(v) {
+    v.stopPropagation(), a?.onDismiss();
+  }
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      ref: m,
+      className: o(N({ tone: t, size: s, dot: i }), r !== void 0 && y, a && "pr-1", b),
+      style: r === void 0 ? d : { "--badge-color": r, ...d },
+      ...p,
+      children: [
+        i && /* @__PURE__ */ c("span", { className: "relative flex size-1.5", "aria-hidden": !0, children: [
+          g && /* The halo expands and fades UNDER a solid core that never moves.
+          Animating the dot itself would make the badge's baseline shift;
+          a separate expanding layer keeps the text perfectly still while
+          the status still reads as alive from across a room. */
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: o(
+                "absolute inline-flex size-full rounded-full opacity-70",
+                "[animation:dx-ping_1.6s_var(--ease-out-strong)_infinite]",
+                r === void 0 ? l[t ?? "neutral"] : "bg-(--badge-color)"
+              )
+            }
+          ),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: o("relative inline-flex size-1.5 rounded-full", r === void 0 ? l[t ?? "neutral"] : "bg-(--badge-color)")
+            }
+          )
+        ] }),
+        u,
+        /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: x }),
+        a && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: f,
+            "aria-label": a.label,
+            className: o(
+              /* `-mr-0.5` pulls it back into the padding the pill already has, so
+                 a chip is not visibly wider than the same badge without one — a
+                 filter row where the removable chips are taller or fatter than
+                 the static ones reads as two different components. */
+              "dx-tap -mr-0.5 grid shrink-0 cursor-pointer place-items-center rounded-full",
+              "text-current opacity-60 outline-none",
+              "transition-[var(--tx-colors),opacity] duration-(--dur-fast)",
+              "hover:bg-current/15 hover:opacity-100",
+              "focus-visible:opacity-100 focus-visible:shadow-[0_0_0_2px_var(--focus-halo)]",
+              s === "lg" ? "size-5" : s === "sm" ? "size-3.5" : "size-4"
+            ),
+            children: /* @__PURE__ */ n(h, { name: "x", size: "xs" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  w as BADGE_NEUTRAL_TONE,
+  e as BADGE_TONE_TEXT,
+  k as Badge
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\n\n/**\n * The text colour of each tone, by itself: the badge's own, and the tint of an icon that wears a badge's tone without being a badge\n * (`FilterMenu`'s option icons, DX-5374). One map so a tone is the same colour wherever it is drawn.\n */\nexport const BADGE_TONE_TEXT = {\n  neutral: \"text-secondary\",\n  accent: \"text-accent-text\",\n  brand: \"text-brand-text\",\n  success: \"text-success-text\",\n  warning: \"text-warning-text\",\n  danger: \"text-danger-text\",\n  orange: \"text-orange-text\",\n  info: \"text-info-text\",\n  muted: \"text-muted-text\",\n} as const;\n\n/** The neutral tone's border, wash and text as one class string (DX-6445), for a component that draws a neutral-badge look without being a `Badge` (`IconButton`'s gray comment count). Pair it with a `border` width. */\nexport const BADGE_NEUTRAL_TONE = `border-border bg-surface-raised ${BADGE_TONE_TEXT.neutral}`;\n\nconst badge = tv({\n  base: [\n    \"inline-flex max-w-full items-center gap-1.5 whitespace-nowrap font-semibold\",\n    \"border transition-colors duration-(--dur-fast)\",\n  ],\n  variants: {\n    tone: {\n      neutral: BADGE_NEUTRAL_TONE,\n      accent: [\"border-accent-border bg-accent-subtle\", BADGE_TONE_TEXT.accent],\n      brand: [\"border-transparent bg-brand-subtle\", BADGE_TONE_TEXT.brand],\n      success: [\"border-success-border bg-success-subtle\", BADGE_TONE_TEXT.success],\n      warning: [\"border-warning-border bg-warning-subtle\", BADGE_TONE_TEXT.warning],\n      danger: [\"border-danger-border bg-danger-subtle\", BADGE_TONE_TEXT.danger],\n      // DX-4657 - between `warning` (amber) and `danger` (red): a \"hold\" that is worse than a caution and not yet a stop.\n      orange: [\"border-orange-border bg-orange-subtle\", BADGE_TONE_TEXT.orange],\n      info: [\"border-info-border bg-info-subtle\", BADGE_TONE_TEXT.info],\n      // DX-3662 — the 8th tone, a quieter grey for a closed/inert fact.\n      // See `authored.css`'s own `--color-muted` comment for why this is a\n      // second grey rather than reusing `neutral`.\n      muted: [\"border-muted-border bg-muted-subtle\", BADGE_TONE_TEXT.muted],\n    },\n    size: {\n      sm: \"h-5 rounded-sm px-1.5 text-2xs\",\n      md: \"h-6 rounded-md px-2 text-xs\",\n      lg: \"h-7 rounded-md px-2.5 text-sm\",\n    },\n    /* A filled dot carries status without relying on hue alone, which is what\n       keeps \"success\" and \"danger\" distinguishable for a red-green colour\n       deficiency — the most common one. */\n    dot: { true: \"\", false: \"\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"md\", dot: false },\n});\n\n/* DX-5143: the three colours of a `color` badge, all derived from `--badge-color`. `color:` hints tell tailwind-merge these are colours (not border widths), so they replace the neutral tone's. */\nconst CUSTOM_COLOR = [\n  \"border-[color:color-mix(in_oklab,var(--badge-color)_45%,transparent)]\",\n  \"bg-[color:color-mix(in_oklab,var(--badge-color)_16%,transparent)]\",\n  \"text-[color:color-mix(in_oklab,var(--badge-color)_72%,var(--color-primary))]\",\n];\n\nconst DOT_TONE: Record<string, string> = {\n  neutral: \"bg-tertiary\",\n  accent: \"bg-accent\",\n  brand: \"bg-brand\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  danger: \"bg-danger\",\n  orange: \"bg-orange\",\n  info: \"bg-info\",\n  muted: \"bg-muted\",\n};\n\n/**\n * What a badge needs in order to be removable, in one object.\n *\n * ONE PROP RATHER THAN TWO, and the label being a required FIELD is the point:\n * a dismiss control with no accessible name is not expressible. An icon carries\n * no text, and a row of filter chips is exactly where \"Remove\" spoken five\n * times distinguishes nothing — the same argument that makes `IconButton.label`\n * required. `SettingRow`'s `readOnly: { reason }` uses the same shape for the\n * same reason: an explanation that is part of the type cannot be forgotten.\n *\n * Name what it removes (\"Remove the infra filter\"), not the picture (\"Close\").\n */\nexport interface BadgeDismiss {\n  label: string;\n  onDismiss: () => void;\n}\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badge> {\n  icon?: ReactNode;\n  /**\n   * DX-5143 - a CSS colour (hex, `rgb()`, `oklch()`, a `var()`) the badge is drawn in, for a colour the consuming app lets a person\n   * choose (a board list's colour) and so cannot be one of the fixed `tone`s. The border, wash and text are all derived from it,\n   * the text pulled toward the primary text colour so a pale colour stays legible on a light theme. It replaces `tone`'s colours;\n   * pass one or the other, never both.\n   */\n  color?: string;\n  /**\n   * Makes the badge a chip you can take off — a trailing × after the label.\n   *\n   * Absent means a plain label, which is what every existing badge is: an ×\n   * nobody asked for is a destructive control appearing inside a caption.\n   *\n   * NOT FOR A BADGE INSIDE A BUTTON. `StatusSelect` renders its Badge as the\n   * body of a trigger, and a `<button>` inside a `<button>` is invalid and\n   * unreachable by keyboard. A dismissible badge belongs on a surface, not in\n   * a control.\n   */\n  dismiss?: BadgeDismiss;\n  /**\n   * Ping the dot outward — for genuinely LIVE states only (running, connected,\n   * streaming). A pulse on a static label is the badge equivalent of a blinking\n   * tag: it captures attention permanently and therefore stops meaning\n   * anything.\n   */\n  pulse?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge({\n  className,\n  tone = \"neutral\",\n  size,\n  dot,\n  icon,\n  pulse,\n  dismiss,\n  color,\n  style,\n  children,\n  ref,\n  ...props\n}: BadgeProps) {\n  if (color !== undefined && tone !== \"neutral\") {\n    throw new Error(`Badge: tone \"${tone}\" and a custom color were both given. A custom color replaces the tone; pass one.`);\n  }\n  function handleDismiss(event: MouseEvent<HTMLButtonElement>) {\n    /* A chip usually sits on something clickable — a table row, a card. Taking\n       the chip off must not also open the record it was describing. Safe here\n       in a way it would not be on a full-card trigger: this really is a nested\n       button and there is no keyboard path that reaches the surface without\n       going through it. */\n    event.stopPropagation();\n    dismiss?.onDismiss();\n  }\n\n  return (\n    <span\n      ref={ref}\n      className={cn(badge({ tone, size, dot }), color !== undefined && CUSTOM_COLOR, dismiss && \"pr-1\", className)}\n      style={color === undefined ? style : ({ \"--badge-color\": color, ...style } as CSSProperties)}\n      {...props}\n    >\n      {dot && (\n        <span className=\"relative flex size-1.5\" aria-hidden>\n          {pulse && (\n            /* The halo expands and fades UNDER a solid core that never moves.\n               Animating the dot itself would make the badge's baseline shift;\n               a separate expanding layer keeps the text perfectly still while\n               the status still reads as alive from across a room. */\n            <span\n              className={cn(\n                \"absolute inline-flex size-full rounded-full opacity-70\",\n                \"[animation:dx-ping_1.6s_var(--ease-out-strong)_infinite]\",\n                color === undefined ? DOT_TONE[tone ?? \"neutral\"] : \"bg-(--badge-color)\",\n              )}\n            />\n          )}\n          <span\n            className={cn(\"relative inline-flex size-1.5 rounded-full\", color === undefined ? DOT_TONE[tone ?? \"neutral\"] : \"bg-(--badge-color)\")}\n          />\n        </span>\n      )}\n      {icon}\n      {/* DX-4449: a badge never wraps, so a label longer than its container is ellipsised (the wrapper is the flex item that can shrink) instead of running past the card. */}\n      <span className=\"min-w-0 truncate\">{children}</span>\n      {dismiss && (\n        <button\n          type=\"button\"\n          onClick={handleDismiss}\n          aria-label={dismiss.label}\n          className={cn(\n            /* `-mr-0.5` pulls it back into the padding the pill already has, so\n               a chip is not visibly wider than the same badge without one — a\n               filter row where the removable chips are taller or fatter than\n               the static ones reads as two different components. */\n            \"dx-tap -mr-0.5 grid shrink-0 cursor-pointer place-items-center rounded-full\",\n            \"text-current opacity-60 outline-none\",\n            \"transition-[var(--tx-colors),opacity] duration-(--dur-fast)\",\n            \"hover:bg-current/15 hover:opacity-100\",\n            \"focus-visible:opacity-100 focus-visible:shadow-[0_0_0_2px_var(--focus-halo)]\",\n            size === \"lg\" ? \"size-5\" : size === \"sm\" ? \"size-3.5\" : \"size-4\",\n          )}\n        >\n          {/* `aria-hidden` via `Icon`'s own default — the name is on the\n              button, and an icon that also announced would say it twice. */}\n          <Icon name=\"x\" size=\"xs\" />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"names":["BADGE_TONE_TEXT","BADGE_NEUTRAL_TONE","badge","tv","CUSTOM_COLOR","DOT_TONE","Badge","className","tone","size","dot","icon","pulse","dismiss","color","style","children","ref","props","handleDismiss","event","jsxs","cn","jsx","Icon"],"mappings":";;;;AASO,MAAMA,IAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT,GAGaC,IAAqB,mCAAmCD,EAAgB,OAAO,IAEtFE,IAAQC,EAAG;AAAA,EACf,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAASF;AAAA,MACT,QAAQ,CAAC,yCAAyCD,EAAgB,MAAM;AAAA,MACxE,OAAO,CAAC,sCAAsCA,EAAgB,KAAK;AAAA,MACnE,SAAS,CAAC,2CAA2CA,EAAgB,OAAO;AAAA,MAC5E,SAAS,CAAC,2CAA2CA,EAAgB,OAAO;AAAA,MAC5E,QAAQ,CAAC,yCAAyCA,EAAgB,MAAM;AAAA;AAAA,MAExE,QAAQ,CAAC,yCAAyCA,EAAgB,MAAM;AAAA,MACxE,MAAM,CAAC,qCAAqCA,EAAgB,IAAI;AAAA;AAAA;AAAA;AAAA,MAIhE,OAAO,CAAC,uCAAuCA,EAAgB,KAAK;AAAA,IAAA;AAAA,IAEtE,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKN,KAAK,EAAE,MAAM,IAAI,OAAO,GAAA;AAAA,EAAG;AAAA,EAE7B,iBAAiB,EAAE,MAAM,WAAW,MAAM,MAAM,KAAK,GAAA;AACvD,CAAC,GAGKI,IAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAmC;AAAA,EACvC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;AAoDO,SAASC,EAAM;AAAA,EACpB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,MAAIJ,MAAU,UAAaN,MAAS;AAClC,UAAM,IAAI,MAAM,gBAAgBA,CAAI,mFAAmF;AAEzH,WAASW,EAAcC,GAAsC;AAM3D,IAAAA,EAAM,gBAAA,GACNP,GAAS,UAAA;AAAA,EACX;AAEA,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAGpB,EAAM,EAAE,MAAAM,GAAM,MAAAC,GAAM,KAAAC,EAAA,CAAK,GAAGI,MAAU,UAAaV,GAAcS,KAAW,QAAQN,CAAS;AAAA,MAC3G,OAAOO,MAAU,SAAYC,IAAS,EAAE,iBAAiBD,GAAO,GAAGC,EAAA;AAAA,MAClE,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAR,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAU,0BAAyB,eAAW,IACjD,UAAA;AAAA,UAAAT;AAAA;AAAA;AAAA;AAAA,UAKC,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACA;AAAA,gBACAR,MAAU,SAAYT,EAASG,KAAQ,SAAS,IAAI;AAAA,cAAA;AAAA,YACtD;AAAA,UAAA;AAAA,UAGJ,gBAAAe;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,EAAG,8CAA8CR,MAAU,SAAYT,EAASG,KAAQ,SAAS,IAAI,oBAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QACtI,GACF;AAAA,QAEDG;AAAA,QAED,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAP,EAAA,CAAS;AAAA,QAC5CH,KACC,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASJ;AAAA,YACT,cAAYN,EAAQ;AAAA,YACpB,WAAWS;AAAA;AAAA;AAAA;AAAA;AAAA,cAKT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAb,MAAS,OAAO,WAAWA,MAAS,OAAO,aAAa;AAAA,YAAA;AAAA,YAK1D,UAAA,gBAAAc,EAACC,GAAA,EAAK,MAAK,KAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA;AAAA,EAAA;AAIR;"}