@motir/design-system 0.1.3 → 0.2.0

package/dist/components/theme/StyleVignette.d.ts

@@ -49,8 +49,9 @@ import { TypeId } from '../../theme/typography.js';
  *     base entry too.
  *   • TYPE (`type`) — ISOLATED, same mechanism plus a base `[data-type='motir']`
  *     block. That axis ships no descendant rules, so the tokens are all of it.
- *   • SHAPE (`styleId`, the token block) — ISOLATED. A `[data-style]` block sets
- *     plain custom properties on the wrapper and they inherit down the subtree.
+ *   • SHAPE (`styleId`, the token block) — ISOLATED. Every style, including the
+ *     Tier-0 `warm-editorial` base, has a `[data-style]` block that sets plain
+ *     custom properties on the wrapper; they inherit down only that subtree.
  *   • MATERIAL (`styleId`, the descendant layer) — ISOLATED by the SCOPING
  *     LIMIT, since MOTIR-3997. The layer used to ship as descendant rules
  *     (`[data-style='X'] [data-surface=…]`, `[data-style='X'] body`, …), and a
@@ -64,11 +65,7 @@ import { TypeId } from '../../theme/typography.js';
  *     matrix measures 121 / 121. See
  *     `docs/decisions/scoped-preview-isolation.md` for the measurement, the two
  *     rejected candidates and what the mechanism costs.
- *     Two things that follow, and neither is a claim about who consumes this
- *     component today: do NOT add a `[data-style='warm-editorial']` base block
- *     as a remedy — the base ships no material layer, and such a block only
- *     makes a resolved-TOKEN assertion pass on a tile that still paints as the
- *     ancestor. And the mechanism is structural, not automatic: a material rule
+ *     The mechanism is structural, not automatic: a material rule
  *     authored as a plain descendant crosses the boundary exactly as these did,
  *     which is what `tests/theme/styleRegistry.test.ts`'s 69-rule ratchet
  *     exists to catch.

package/dist/components/theme/StyleVignette.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Spinner.tsx","../../../src/components/ui/Button.tsx","../../../src/components/ui/Card.tsx","../../../src/components/ui/Pill.tsx","../../../src/components/theme/StyleVignette.tsx"],"names":["Spinner","cva","forwardRef","Button","jsx","Card","jsxs","Pill"],"mappings":"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","file":"StyleVignette.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Spinner — pure CSS rotation indicator.\n *\n * Three sizes; works standalone or inside a Button's loading state.\n *\n * @example\n * <Spinner size=\"md\" />\n * <Spinner size=\"sm\" aria-label=\"Loading\" />\n */\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-current border-t-transparent',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border-[1.5px]',\n        md: 'h-5 w-5 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'>, VariantProps<typeof spinnerVariants> {}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { className, size, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={rest['aria-label'] ?? 'Loading'}\n      className={cn(spinnerVariants({ size }), className)}\n      {...rest}\n    />\n  );\n});\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Spinner } from './Spinner';\nimport { cn } from '../../utils/cn';\n\n/**\n * Button — primary interactive primitive.\n *\n * Variants × sizes × states. The `loading` state shows an inline Spinner\n * and disables the button. Use semantic Tailwind token classes; never\n * hardcode colors. Shape responds to `data-style` via\n * `--radius-btn` (rectangles in default, pills in `soft`).\n *\n * @example\n * <Button variant=\"primary\" size=\"md\">Save</Button>\n * <Button variant=\"ghost\" leftIcon={<Plus />} loading>Saving…</Button>\n */\n// Exported so a Next `<Link>` can render AS a styled button (an anchor styled\n// with the button variants — keeps real-link semantics for navigation) without\n// nesting a <button> inside an <a>. Used by the /ready empty state's \"View all\n// issues\" link (Subtask 7.0.6).\nexport const buttonVariants = cva(\n  cn(\n    // Base layout\n    'inline-flex items-center justify-center gap-2',\n    // Typography\n    'font-sans text-sm font-medium leading-none',\n    // Shape — semantic tokens that flip with the active style\n    'rounded-(--radius-btn)',\n    // Interaction\n    'transition-[transform,background-color,border-color,color] duration-(--transition-duration)',\n    'active:scale-(--active-scale)',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ),\n  {\n    variants: {\n      variant: {\n        primary: 'bg-(--el-accent) text-(--el-accent-text) hover:opacity-90',\n        secondary:\n          'bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)',\n        ghost: 'bg-transparent text-(--el-text) hover:bg-(--el-surface)',\n        danger: 'bg-(--el-danger) text-(--el-danger-text) hover:opacity-90',\n      },\n      size: {\n        sm: 'h-(--height-btn-sm) px-3 text-xs',\n        md: 'h-(--height-btn-md) px-(--spacing-btn-x)',\n        lg: 'h-(--height-btn-lg) px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Shows inline Spinner + disables interaction. */\n  loading?: boolean;\n  /** Icon rendered before the label. */\n  leftIcon?: ReactNode;\n  /** Icon rendered after the label. */\n  rightIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      // `data-variant` is the hook the 3D / Immersive style uses to give FILLED\n      // buttons physical thickness (a solid palette-derived base edge) + a\n      // press-DOWN (7.3.39). Inert under every other style.\n      data-variant={variant ?? 'primary'}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...rest}\n    >\n      {loading ? (\n        <Spinner size={size === 'lg' ? 'md' : 'sm'} aria-hidden />\n      ) : leftIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {leftIcon}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {!loading && rightIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {rightIcon}\n        </span>\n      ) : null}\n    </button>\n  );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Card — content container with optional header/footer slots and tint variants.\n *\n * Compose with `header` / `footer` props for the common pattern, or just\n * pass children for a bare card. `clickable` makes the whole card a button\n * (use `onClick` + Enter/Space; pass `href` to render as `<a>` instead).\n *\n * Tint variants use the pastel feature tints from the palette\n * (peach/rose/mint/lavender/sky/yellow) — apply sparingly, never to\n * page-level surfaces.\n *\n * @example\n * <Card header={<h3>Title</h3>}>Body content</Card>\n * <Card tint=\"lavender\" clickable onClick={open}>Pastel card</Card>\n * <Card tint=\"mint\"><a href=\"/x\">Link wrapper</a></Card>\n */\nconst cardVariants = cva(\n  cn(\n    'rounded-(--radius-card) border border-(--el-border)',\n    'p-(--spacing-card-padding)',\n    'transition-shadow duration-(--transition-duration)',\n  ),\n  {\n    variants: {\n      tint: {\n        none: 'bg-(--el-card)',\n        peach: 'bg-(--el-tint-peach) border-transparent',\n        rose: 'bg-(--el-tint-rose) border-transparent',\n        mint: 'bg-(--el-tint-mint) border-transparent',\n        lavender: 'bg-(--el-tint-lavender) border-transparent',\n        sky: 'bg-(--el-tint-sky) border-transparent',\n        yellow: 'bg-(--el-tint-yellow) border-transparent',\n      },\n      clickable: {\n        true: 'cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        false: '',\n      },\n    },\n    defaultVariants: { tint: 'none', clickable: false },\n  },\n);\n\nexport interface CardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof cardVariants> {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { tint, clickable, header, footer, className, children, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ tint, clickable }), className)}\n      // `data-tilt` is the hook the 3D / Immersive style's pointer-parallax\n      // engine (ImmersiveTilt, 7.3.39) uses to tip this tile toward the cursor.\n      // Inert for every other style + under reduced motion; harmless otherwise.\n      data-tilt=\"\"\n      // `data-surface` is the hook a surface-MATERIAL style (e.g. glassmorphism)\n      // uses to frost this panel — see globals.css's material layer. Only the\n      // default (untinted) card opts in; a pastel-tint feature card keeps its\n      // opaque tint, never a frosted overlay that would wash the hue out.\n      {...(tint && tint !== 'none' ? {} : { 'data-surface': 'card' })}\n      {...(clickable ? { tabIndex: 0, role: 'button' } : {})}\n      {...rest}\n    >\n      {/* `data-tilt-layer` lifts the slot onto a translateZ plane under the 3D /\n          Immersive style (7.3.39) so it PARALLAXES above the card face as the\n          card tilts — `front` (the header/title pops most), `back` (the footer\n          sits nearer the face). Inert under every other style + reduced motion.\n          The body stays on the face so arbitrary content never renders on a\n          skewed Z-plane. */}\n      {header ? (\n        <div data-tilt-layer=\"front\" className=\"mb-(--spacing-md)\">\n          {header}\n        </div>\n      ) : null}\n      <div>{children}</div>\n      {footer ? (\n        <div\n          data-tilt-layer=\"back\"\n          className=\"border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)\"\n        >\n          {footer}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Pill — compact status or severity label. Pure span, no interaction.\n *\n * Variant axes (use exactly one):\n *  - `status`: planned | in-progress | implemented | done — Motir's Subtask\n *    lifecycle states. The first three are per-CATEGORY tones; `implemented` is\n *    the one PER-STATUS tone (MOTIR-3103), because it shares a category with\n *    In Progress / Planning / In Review and must not share their chip.\n *  - `severity`: info | success | warning | danger — semantic UI states.\n *  - `priority`: highest | high | medium | low | lowest — work-item priority, a\n *    5-step diverging ramp (`--el-priority-*` hue tinted over the surface, plus a\n *    redundant direction icon). The single source of truth is `PRIORITY_META`.\n *  - `memberRole`: admin | member | viewer | custom — a project membership role\n *    (Story 6.4), one hued tint per role. (Named `memberRole`, not `role`, so\n *    it can't collide with the DOM `role` ARIA attribute on the span.)\n *  - `orgRole`: owner | admin | member — an ORGANIZATION role (Story 6.10),\n *    sitting above the workspace `memberRole`. owner → lavender (the highest,\n *    brand-purple tier), admin → sky, member → mint — per the org-admin design.\n *  - `tone`: neutral — a non-semantic chip (counts, metadata). Dark text on a\n *    neutral surface. `private` — the epic-level-privacy \"Not public\" badge\n *    (Story 6.14 · design epic-privacy panels 1/2/6b): lavender tint + charcoal\n *    text, the same AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"`.\n *\n * All tones use adaptive dark/light text (`--color-charcoal`) on a hued tint,\n * so every variant clears WCAG AA contrast in both light and dark modes\n * (the hue lives in the background, not the text — PRODECT_FINDINGS #35).\n *\n * Always uses `--radius-badge` for fully rounded ends regardless of display style.\n *\n * @example\n * <Pill status=\"in-progress\">In progress</Pill>\n * <Pill severity=\"danger\">Validation failed</Pill>\n * <Pill tone=\"neutral\">3 members</Pill>\n */\nconst pillVariants = cva(\n  cn(\n    'inline-flex items-center gap-1',\n    'rounded-(--radius-badge)',\n    'px-(--spacing-chip-x) py-(--spacing-chip-y)',\n    'font-sans text-xs font-medium',\n    'border',\n  ),\n  {\n    variants: {\n      // All colored tones carry the semantic hue in the TINT BACKGROUND and use\n      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5\n      // dark) — the same pattern `planned` always used. The previous saturated\n      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);\n      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).\n      status: {\n        planned: 'bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent',\n        'in-progress': 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        // BUILT, waiting on checks (MOTIR-3103). The first PER-STATUS tone on\n        // this axis — the other three are per-CATEGORY, and `implemented` sits in\n        // the same `in_progress` category as In Progress, Planning and In Review,\n        // so without its own tone four statuses render one chip.\n        //\n        // It uses the recipe theme.css's own `--el-status-*` header prescribes —\n        // \"a status CHIP bg = color-mix(var(--el-status-X) 14%, var(--el-surface))\n        // with --el-text-strong\" — which is the same dilution the `priority`\n        // variant below already renders. The hue is not spent by any other\n        // status in any palette (measured at ΔE2000 >= 10 across all ten by\n        // tests/theme/statusHueSeparation.test.ts), and the chip additionally\n        // carries a GLYPH, because a 14% tint is a subtle mark by construction\n        // and finding #35 forbids resting a state on colour alone.\n        implemented:\n          'bg-[color-mix(in_srgb,var(--el-status-implemented)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        done: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n      },\n      severity: {\n        info: 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        success: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n        warning: 'bg-(--el-tint-peach) text-(--el-text-strong) border-transparent',\n        danger: 'bg-(--el-tint-rose) text-(--el-text-strong) border-transparent',\n      },\n      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off\n      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both\n      // were `tone=\"neutral\"` grey). Each hue is diluted to a 14% tint over\n      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes\n      // (the hue lives in the background — finding #35); the redundant direction\n      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and\n      // `lowest` (stone) resolve to two distinct greys in every palette.\n      priority: {\n        highest:\n          'bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        high: 'bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        medium:\n          'bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        low: 'bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        lowest:\n          'bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n      },\n      // Project membership roles (Story 6.4 · design/projects access-members):\n      // admin → lavender, member → sky, viewer → mint — the hue in the tint,\n      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed\n      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a\n      // palette can tune roles apart from the other --el-tint-* meanings; each\n      // defaults to its prior tint (zero visual change).\n      // `custom` (MOTIR-2257 · MOTIR-2485) is a project's OWN role, which has no\n      // enum value — it takes the next free tint slot (peach) because this\n      // surface had already spent lavender / sky / mint on the built-ins, so a\n      // custom chip in any of those would read as one of them. The KIND is\n      // carried in WORDS by the chip's accessible name; nothing rests on the hue.\n      memberRole: {\n        admin: 'bg-(--el-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-role-member) text-(--el-text-strong) border-transparent',\n        viewer: 'bg-(--el-role-viewer) text-(--el-text-strong) border-transparent',\n        custom: 'bg-(--el-role-custom) text-(--el-text-strong) border-transparent',\n      },\n      // Organization roles (Story 6.10 · design/org-admin): owner → lavender\n      // (the highest, brand-purple tier), admin → sky, member → mint — the hue\n      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.\n      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.\n      orgRole: {\n        owner: 'bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent',\n        admin: 'bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-org-role-member) text-(--el-text-strong) border-transparent',\n      },\n      tone: {\n        neutral: 'bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)',\n        // Epic-level privacy \"Not public\" badge (Story 6.14 · design\n        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same\n        // AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"` (≈9.7:1).\n        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the\n        // matching `--el-privacy-public` is defined ahead of a \"public\" badge.\n        private: 'bg-(--el-privacy-private) text-(--el-text-strong) border-transparent',\n        // Inactive \"Archived\" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill\n        // with slate ink, not a hued tint: archived is an inactive state, not a\n        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune\n        // the inactive badge apart from the neutral chip; AA-safe (slate on muted\n        // clears AA both themes).\n        archived: 'bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent',\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\nexport interface PillProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {}\n\nexport const Pill = forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { status, severity, priority, memberRole, orgRole, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n","import type { ReactNode } from 'react';\nimport { BookOpen, Search, SlidersHorizontal } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonVariants } from '../ui/Button';\nimport { Card } from '../ui/Card';\nimport { Pill } from '../ui/Pill';\nimport type { StyleId } from '../../theme/styles';\nimport type { PaletteId } from '../../theme/palettes';\nimport type { TypeId } from '../../theme/typography';\n\n/**\n * StyleVignette — the LIVE preview specimen that makes a design axis's FEEL\n * legible (Subtask 7.3.37 / MOTIR-1050).\n *\n * The fix for \"I only see typography change\": instead of a token-swatch table,\n * this is a composed, realistic MINI-SURFACE — a nav rail, a work-item card, a\n * search input, a button row, and a floating modal — rendered LIVE under a\n * style's shape/feel tokens + component overrides (and, independently, a palette\n * and a type pairing). Switching any axis re-shapes / re-skins / re-types the\n * whole vignette, so the user sees the product's feel, not a colour chip.\n *\n * ── Two modes ────────────────────────────────────────────────────────────\n *   • LIVE (no axis props) — the wrapper sets NO `data-*` axis attribute, so it\n *     INHERITS the active theme from `<html>` (driven by `theme-context`). Use\n *     this for the appearance-settings preview and the design-step showcase: the\n *     vignette re-renders automatically as the global selection changes.\n *   • SCOPED (any of `styleId` / `palette` / `type`) — the wrapper carries that\n *     axis attribute, so the globals.css axis block recomputes the tokens for\n *     this subtree ONLY. Use this for the onboarding Style gallery (one vignette\n *     per style) and the Palette step (one style re-rendered under each palette).\n *\n * Built on the `app/tokens/page.tsx` specimen pattern: real `--el-*` colour\n * tokens + element-semantic shape tokens + the `data-surface` material hooks, so\n * surface-material styles (glassmorphism's frosted glass, cybercore's glow grid)\n * apply exactly as they do in the shipped app. NEVER a Tier-0 `--color-*` or a\n * raw `rounded-*`/`p-*`/`h-*` (the colour + shape token rules in CLAUDE.md).\n *\n * ⚠️ WHAT A SCOPED VIGNETTE IS AND IS NOT ISOLATED FROM (rewritten, MOTIR-3933).\n * This paragraph used to describe the nested-base leak and then discharge it\n * with \"in the real consumers this never bites\". That was a claim about the\n * consumer set at the time of writing, recorded as though it were a property of\n * the component — and it is what let a public page ship ten identical palette\n * previews. The consumer set grew. Measured, not assumed:\n *\n *   • COLOUR (`palette`) — ISOLATED. The wrapper carries `data-appearance-scope`\n *     alongside the axis attribute, which re-emits the Tier-3 `--el-*` layer\n *     onto this element so it reads the `--color-*` this subtree overrides\n *     rather than the ones `:root` declared. theme.css states that requirement\n *     at the declaration site; this component did not honour it, and without it\n *     a scoped palette changed nothing the vignette paints with. The base\n *     `motir` entry now has its own block, and every per-palette dark block has\n *     a descendant arm, so a scoped tile is correct in BOTH themes and for the\n *     base entry too.\n *   • TYPE (`type`) — ISOLATED, same mechanism plus a base `[data-type='motir']`\n *     block. That axis ships no descendant rules, so the tokens are all of it.\n *   • SHAPE (`styleId`, the token block) — ISOLATED. A `[data-style]` block sets\n *     plain custom properties on the wrapper and they inherit down the subtree.\n *   • MATERIAL (`styleId`, the descendant layer) — ISOLATED by the SCOPING\n *     LIMIT, since MOTIR-3997. The layer used to ship as descendant rules\n *     (`[data-style='X'] [data-surface=…]`, `[data-style='X'] body`, …), and a\n *     descendant combinator does not stop at a nested `data-style`: under an\n *     active `glassmorphism` only 1 of 11 scoped tiles wore its own material,\n *     under `aurora` 2 of 11, 64 of 121 over the full matrix. All 69 rules now\n *     ship as `@scope ([data-style='X']) to ([data-style]) { … }`, where\n *     `to (…)` is a scoping LIMIT — THIS component's `data-style` wrapper is\n *     what an ancestor style's scope stops at, so \"the nearest `[data-style]`\n *     ancestor wins\" is structural rather than a per-rule opt-out. The full\n *     matrix measures 121 / 121. See\n *     `docs/decisions/scoped-preview-isolation.md` for the measurement, the two\n *     rejected candidates and what the mechanism costs.\n *     Two things that follow, and neither is a claim about who consumes this\n *     component today: do NOT add a `[data-style='warm-editorial']` base block\n *     as a remedy — the base ships no material layer, and such a block only\n *     makes a resolved-TOKEN assertion pass on a tile that still paints as the\n *     ancestor. And the mechanism is structural, not automatic: a material rule\n *     authored as a plain descendant crosses the boundary exactly as these did,\n *     which is what `tests/theme/styleRegistry.test.ts`'s 69-rule ratchet\n *     exists to catch.\n */\n\nexport interface StyleVignetteProps {\n  /** Scope the vignette to a specific style; omit to inherit the active style. */\n  styleId?: StyleId;\n  /** Scope the vignette to a specific palette; omit to inherit the active palette. */\n  palette?: PaletteId;\n  /** Scope the vignette to a specific type pairing; omit to inherit the active type. */\n  type?: TypeId;\n  /**\n   * Accessible name for the preview region. The vignette is decorative chrome,\n   * so it is announced as a single labelled image rather than a pile of\n   * read-out controls.\n   */\n  label?: string;\n  className?: string;\n}\n\n/** A muted progress bar; `accent` tints it with the active accent. */\nfunction Bar({ accent, widthPct }: { accent?: boolean; widthPct: number }) {\n  return (\n    <div className=\"h-[6px] w-full overflow-hidden rounded-(--radius-badge) bg-(--el-muted)\">\n      <div\n        className={cn(\n          'h-full rounded-(--radius-badge)',\n          accent ? 'bg-(--el-accent)' : 'bg-(--el-border-strong)',\n        )}\n        style={{ width: `${widthPct}%` }}\n      />\n    </div>\n  );\n}\n\n/** One row of the work-item card's mini list — a status dot + label + chip. */\nfunction ListRow({ dotVar, label, chip }: { dotVar: string; label: string; chip: string }) {\n  return (\n    <div className=\"flex items-center gap-2 text-[11px] text-(--el-text-secondary)\">\n      <span\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{ background: `var(${dotVar})` }}\n        aria-hidden\n      />\n      <span className=\"truncate\">{label}</span>\n      <span className=\"ml-auto shrink-0 rounded-(--radius-badge) bg-(--el-surface) px-(--spacing-chip-x) py-(--spacing-chip-y) text-[9px] font-medium text-(--el-text-secondary)\">\n        {chip}\n      </span>\n    </div>\n  );\n}\n\nexport function StyleVignette({ styleId, palette, type, label, className }: StyleVignetteProps) {\n  // Only emit an axis attribute when the caller pins it; an omitted axis stays\n  // inherited (LIVE mode), which is how the appearance preview follows the\n  // global selection without re-implementing the theme context.\n  const axisAttrs: Record<string, string> = {};\n  if (styleId) axisAttrs['data-style'] = styleId;\n  if (palette) axisAttrs['data-palette'] = palette;\n  if (type) axisAttrs['data-type'] = type;\n  // SCOPED mode only. `data-appearance-scope` re-emits the Tier-3 `--el-*`\n  // layer onto this element, which is what makes the axis attributes above\n  // actually change what the subtree paints with: `--el-*` reference\n  // `--color-*` and `var()` resolves at the DECLARING element, so without it a\n  // nested `data-palette` overrides Tier-0 that nothing here reads.\n  //\n  // ⚠️ NOT in LIVE mode. With no axis prop the vignette is meant to FOLLOW the\n  // global selection, and re-emitting the layer locally would pin the subtree\n  // to whatever `--color-*` resolved at mount — the exact opposite of what the\n  // appearance preview mounts it for.\n  if (Object.keys(axisAttrs).length > 0) axisAttrs['data-appearance-scope'] = '';\n\n  return (\n    <div\n      {...axisAttrs}\n      role=\"img\"\n      aria-label={label ?? 'Design style preview'}\n      className={cn(\n        'style-vignette relative isolate overflow-hidden',\n        'rounded-(--radius-card) border border-(--el-border) bg-(--el-surface)',\n        'shadow-(--shadow-subtle)',\n        className,\n      )}\n    >\n      {/* Material canvas: transparent for flat styles; the glassmorphism gradient\n          / cybercore grid is painted here via the descendant rules in\n          globals.css (a preview can't lean on the body-scoped canvas). */}\n      <span className=\"sv-canvas pointer-events-none absolute inset-0 -z-10\" aria-hidden />\n\n      <div className=\"flex flex-col gap-3 p-3\">\n        {/* NAV — a compact rail; data-surface lets a material style frost it. */}\n        <div\n          data-surface=\"sidebar\"\n          className=\"flex items-center gap-2 rounded-(--radius-control) bg-(--el-sidebar-bg) px-3 py-2\"\n        >\n          <span className=\"size-2.5 rounded-full bg-(--el-accent)\" aria-hidden />\n          <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">Acme</span>\n          <span className=\"ml-2 rounded-(--radius-control) bg-(--el-accent) px-2 py-[3px] text-[10px] font-medium text-(--el-accent-text)\">\n            Board\n          </span>\n          <span className=\"text-[10px] text-(--el-text-secondary)\">Backlog</span>\n          <span className=\"text-[10px] text-(--el-text-secondary)\">Reports</span>\n          <span className=\"ml-auto size-5 rounded-full bg-(--el-muted)\" aria-hidden />\n        </div>\n\n        <div className=\"grid grid-cols-[1.4fr_1fr] gap-3\">\n          {/* WORK-ITEM CARD — the centrepiece: type hue + serif title + status. */}\n          <Card className=\"flex flex-col gap-2 !p-3\">\n            <div className=\"flex items-center gap-2\">\n              {/* A decorative story-type icon in its `--el-type-story` hue. The\n                  package can't depend on motir-core's domain `IssueTypeIcon`\n                  (which maps work-item kinds → glyphs), so the vignette inlines\n                  the same glyph + hue directly — pixel-identical, boundary-clean. */}\n              <BookOpen className=\"size-4 text-(--el-type-story)\" aria-hidden />\n              <span className=\"truncate font-serif text-[13px] font-semibold text-(--el-text)\">\n                Ship the billing flow\n              </span>\n              <Pill status=\"in-progress\" className=\"ml-auto !text-[9px]\">\n                In progress\n              </Pill>\n            </div>\n            <div className=\"flex flex-col gap-1.5\">\n              <ListRow dotVar=\"--el-success\" label=\"Invoice schema\" chip=\"Done\" />\n              <ListRow dotVar=\"--el-warning\" label=\"Dunning emails\" chip=\"Review\" />\n              <ListRow dotVar=\"--el-info\" label=\"Stripe webhook\" chip=\"To do\" />\n            </div>\n            <div className=\"mt-0.5 flex flex-col gap-1.5\">\n              <Bar accent widthPct={66} />\n              <Bar widthPct={38} />\n            </div>\n          </Card>\n\n          {/* MODAL — a floating dialog panel; modal radius + elevation + scrim. */}\n          <div className=\"relative\">\n            <span\n              className=\"pointer-events-none absolute -inset-1 rounded-(--radius-card) bg-black/10\"\n              aria-hidden\n            />\n            <div\n              data-surface=\"modal\"\n              className=\"relative flex flex-col gap-2 rounded-(--radius-modal) border border-(--el-border) bg-(--el-page-bg) p-3 shadow-(--shadow-modal)\"\n            >\n              <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">\n                New invoice\n              </span>\n              <Bar widthPct={100} />\n              <Bar widthPct={72} />\n              <div className=\"mt-1 flex gap-2\">\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'primary', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Create\n                </span>\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'ghost', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Cancel\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* INPUT — a search field; data-surface lets a material style fill it. */}\n        <div\n          data-surface=\"input\"\n          className=\"flex h-(--height-input) items-center gap-2 rounded-(--radius-input) border border-(--el-border-strong) bg-(--el-page-bg) px-(--spacing-input-x) text-[11px] text-(--el-text-secondary)\"\n        >\n          <Search className=\"size-3.5\" aria-hidden />\n          <span>Search work items…</span>\n        </div>\n\n        {/* BUTTON ROW — primary + ghost, exact Button silhouettes (non-interactive). */}\n        <div className=\"flex gap-2\">\n          <span className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), '!text-[11px]')}>\n            New work item\n          </span>\n          <span className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }), '!text-[11px]')}>\n            <SlidersHorizontal className=\"size-3.5\" aria-hidden />\n            Filter\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default StyleVignette as (props: StyleVignetteProps) => ReactNode;\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Spinner.tsx","../../../src/components/ui/Button.tsx","../../../src/components/ui/Card.tsx","../../../src/components/ui/Pill.tsx","../../../src/components/theme/StyleVignette.tsx"],"names":["Spinner","cva","forwardRef","Button","jsx","Card","jsxs","Pill"],"mappings":"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","file":"StyleVignette.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Spinner — pure CSS rotation indicator.\n *\n * Three sizes; works standalone or inside a Button's loading state.\n *\n * @example\n * <Spinner size=\"md\" />\n * <Spinner size=\"sm\" aria-label=\"Loading\" />\n */\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-current border-t-transparent',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border-[1.5px]',\n        md: 'h-5 w-5 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'>, VariantProps<typeof spinnerVariants> {}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { className, size, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={rest['aria-label'] ?? 'Loading'}\n      className={cn(spinnerVariants({ size }), className)}\n      {...rest}\n    />\n  );\n});\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Spinner } from './Spinner';\nimport { cn } from '../../utils/cn';\n\n/**\n * Button — primary interactive primitive.\n *\n * Variants × sizes × states. The `loading` state shows an inline Spinner\n * and disables the button. Use semantic Tailwind token classes; never\n * hardcode colors. Shape responds to `data-style` via\n * `--radius-btn` (rectangles in default, pills in `soft`).\n *\n * @example\n * <Button variant=\"primary\" size=\"md\">Save</Button>\n * <Button variant=\"ghost\" leftIcon={<Plus />} loading>Saving…</Button>\n */\n// Exported so a Next `<Link>` can render AS a styled button (an anchor styled\n// with the button variants — keeps real-link semantics for navigation) without\n// nesting a <button> inside an <a>. Used by the /ready empty state's \"View all\n// issues\" link (Subtask 7.0.6).\nexport const buttonVariants = cva(\n  cn(\n    // Base layout\n    'inline-flex items-center justify-center gap-2',\n    // Typography\n    'font-sans text-sm font-medium leading-none',\n    // Shape — semantic tokens that flip with the active style\n    'rounded-(--radius-btn)',\n    // Interaction\n    'transition-[transform,background-color,border-color,color] duration-(--transition-duration)',\n    'active:scale-(--active-scale)',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ),\n  {\n    variants: {\n      variant: {\n        primary: 'bg-(--el-accent) text-(--el-accent-text) hover:opacity-90',\n        secondary:\n          'bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)',\n        ghost: 'bg-transparent text-(--el-text) hover:bg-(--el-surface)',\n        danger: 'bg-(--el-danger) text-(--el-danger-text) hover:opacity-90',\n      },\n      size: {\n        sm: 'h-(--height-btn-sm) px-3 text-xs',\n        md: 'h-(--height-btn-md) px-(--spacing-btn-x)',\n        lg: 'h-(--height-btn-lg) px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Shows inline Spinner + disables interaction. */\n  loading?: boolean;\n  /** Icon rendered before the label. */\n  leftIcon?: ReactNode;\n  /** Icon rendered after the label. */\n  rightIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      // `data-variant` is the hook the 3D / Immersive style uses to give FILLED\n      // buttons physical thickness (a solid palette-derived base edge) + a\n      // press-DOWN (7.3.39). Inert under every other style.\n      data-variant={variant ?? 'primary'}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...rest}\n    >\n      {loading ? (\n        <Spinner size={size === 'lg' ? 'md' : 'sm'} aria-hidden />\n      ) : leftIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {leftIcon}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {!loading && rightIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {rightIcon}\n        </span>\n      ) : null}\n    </button>\n  );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Card — content container with optional header/footer slots and tint variants.\n *\n * Compose with `header` / `footer` props for the common pattern, or just\n * pass children for a bare card. `clickable` makes the whole card a button\n * (use `onClick` + Enter/Space; pass `href` to render as `<a>` instead).\n *\n * Tint variants use the pastel feature tints from the palette\n * (peach/rose/mint/lavender/sky/yellow) — apply sparingly, never to\n * page-level surfaces.\n *\n * @example\n * <Card header={<h3>Title</h3>}>Body content</Card>\n * <Card tint=\"lavender\" clickable onClick={open}>Pastel card</Card>\n * <Card tint=\"mint\"><a href=\"/x\">Link wrapper</a></Card>\n */\nconst cardVariants = cva(\n  cn(\n    'rounded-(--radius-card) border border-(--el-border)',\n    'p-(--spacing-card-padding)',\n    'transition-shadow duration-(--transition-duration)',\n  ),\n  {\n    variants: {\n      tint: {\n        none: 'bg-(--el-card)',\n        peach: 'bg-(--el-tint-peach) border-transparent',\n        rose: 'bg-(--el-tint-rose) border-transparent',\n        mint: 'bg-(--el-tint-mint) border-transparent',\n        lavender: 'bg-(--el-tint-lavender) border-transparent',\n        sky: 'bg-(--el-tint-sky) border-transparent',\n        yellow: 'bg-(--el-tint-yellow) border-transparent',\n      },\n      clickable: {\n        true: 'cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        false: '',\n      },\n    },\n    defaultVariants: { tint: 'none', clickable: false },\n  },\n);\n\nexport interface CardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof cardVariants> {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { tint, clickable, header, footer, className, children, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ tint, clickable }), className)}\n      // `data-tilt` is the hook the 3D / Immersive style's pointer-parallax\n      // engine (ImmersiveTilt, 7.3.39) uses to tip this tile toward the cursor.\n      // Inert for every other style + under reduced motion; harmless otherwise.\n      data-tilt=\"\"\n      // `data-surface` is the hook a surface-MATERIAL style (e.g. glassmorphism)\n      // uses to frost this panel — see globals.css's material layer. Only the\n      // default (untinted) card opts in; a pastel-tint feature card keeps its\n      // opaque tint, never a frosted overlay that would wash the hue out.\n      {...(tint && tint !== 'none' ? {} : { 'data-surface': 'card' })}\n      {...(clickable ? { tabIndex: 0, role: 'button' } : {})}\n      {...rest}\n    >\n      {/* `data-tilt-layer` lifts the slot onto a translateZ plane under the 3D /\n          Immersive style (7.3.39) so it PARALLAXES above the card face as the\n          card tilts — `front` (the header/title pops most), `back` (the footer\n          sits nearer the face). Inert under every other style + reduced motion.\n          The body stays on the face so arbitrary content never renders on a\n          skewed Z-plane. */}\n      {header ? (\n        <div data-tilt-layer=\"front\" className=\"mb-(--spacing-md)\">\n          {header}\n        </div>\n      ) : null}\n      <div>{children}</div>\n      {footer ? (\n        <div\n          data-tilt-layer=\"back\"\n          className=\"border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)\"\n        >\n          {footer}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Pill — compact status or severity label. Pure span, no interaction.\n *\n * Variant axes (use exactly one):\n *  - `status`: planned | in-progress | implemented | done — Motir's Subtask\n *    lifecycle states. The first three are per-CATEGORY tones; `implemented` is\n *    the one PER-STATUS tone (MOTIR-3103), because it shares a category with\n *    In Progress / Planning / In Review and must not share their chip.\n *  - `severity`: info | success | warning | danger — semantic UI states.\n *  - `priority`: highest | high | medium | low | lowest — work-item priority, a\n *    5-step diverging ramp (`--el-priority-*` hue tinted over the surface, plus a\n *    redundant direction icon). The single source of truth is `PRIORITY_META`.\n *  - `memberRole`: admin | member | viewer | custom — a project membership role\n *    (Story 6.4), one hued tint per role. (Named `memberRole`, not `role`, so\n *    it can't collide with the DOM `role` ARIA attribute on the span.)\n *  - `orgRole`: owner | admin | member — an ORGANIZATION role (Story 6.10),\n *    sitting above the workspace `memberRole`. owner → lavender (the highest,\n *    brand-purple tier), admin → sky, member → mint — per the org-admin design.\n *  - `tone`: neutral — a non-semantic chip (counts, metadata). Dark text on a\n *    neutral surface. `private` — the epic-level-privacy \"Not public\" badge\n *    (Story 6.14 · design epic-privacy panels 1/2/6b): lavender tint + charcoal\n *    text, the same AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"`.\n *\n * All tones use adaptive dark/light text (`--color-charcoal`) on a hued tint,\n * so every variant clears WCAG AA contrast in both light and dark modes\n * (the hue lives in the background, not the text — PRODECT_FINDINGS #35).\n *\n * Always uses `--radius-badge` for fully rounded ends regardless of display style.\n *\n * @example\n * <Pill status=\"in-progress\">In progress</Pill>\n * <Pill severity=\"danger\">Validation failed</Pill>\n * <Pill tone=\"neutral\">3 members</Pill>\n */\nconst pillVariants = cva(\n  cn(\n    'inline-flex items-center gap-1',\n    'rounded-(--radius-badge)',\n    'px-(--spacing-chip-x) py-(--spacing-chip-y)',\n    'font-sans text-xs font-medium',\n    'border',\n  ),\n  {\n    variants: {\n      // All colored tones carry the semantic hue in the TINT BACKGROUND and use\n      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5\n      // dark) — the same pattern `planned` always used. The previous saturated\n      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);\n      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).\n      status: {\n        planned: 'bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent',\n        'in-progress': 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        // BUILT, waiting on checks (MOTIR-3103). The first PER-STATUS tone on\n        // this axis — the other three are per-CATEGORY, and `implemented` sits in\n        // the same `in_progress` category as In Progress, Planning and In Review,\n        // so without its own tone four statuses render one chip.\n        //\n        // It uses the recipe theme.css's own `--el-status-*` header prescribes —\n        // \"a status CHIP bg = color-mix(var(--el-status-X) 14%, var(--el-surface))\n        // with --el-text-strong\" — which is the same dilution the `priority`\n        // variant below already renders. The hue is not spent by any other\n        // status in any palette (measured at ΔE2000 >= 10 across all ten by\n        // tests/theme/statusHueSeparation.test.ts), and the chip additionally\n        // carries a GLYPH, because a 14% tint is a subtle mark by construction\n        // and finding #35 forbids resting a state on colour alone.\n        implemented:\n          'bg-[color-mix(in_srgb,var(--el-status-implemented)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        done: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n      },\n      severity: {\n        info: 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        success: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n        warning: 'bg-(--el-tint-peach) text-(--el-text-strong) border-transparent',\n        danger: 'bg-(--el-tint-rose) text-(--el-text-strong) border-transparent',\n      },\n      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off\n      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both\n      // were `tone=\"neutral\"` grey). Each hue is diluted to a 14% tint over\n      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes\n      // (the hue lives in the background — finding #35); the redundant direction\n      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and\n      // `lowest` (stone) resolve to two distinct greys in every palette.\n      priority: {\n        highest:\n          'bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        high: 'bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        medium:\n          'bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        low: 'bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        lowest:\n          'bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n      },\n      // Project membership roles (Story 6.4 · design/projects access-members):\n      // admin → lavender, member → sky, viewer → mint — the hue in the tint,\n      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed\n      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a\n      // palette can tune roles apart from the other --el-tint-* meanings; each\n      // defaults to its prior tint (zero visual change).\n      // `custom` (MOTIR-2257 · MOTIR-2485) is a project's OWN role, which has no\n      // enum value — it takes the next free tint slot (peach) because this\n      // surface had already spent lavender / sky / mint on the built-ins, so a\n      // custom chip in any of those would read as one of them. The KIND is\n      // carried in WORDS by the chip's accessible name; nothing rests on the hue.\n      memberRole: {\n        admin: 'bg-(--el-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-role-member) text-(--el-text-strong) border-transparent',\n        viewer: 'bg-(--el-role-viewer) text-(--el-text-strong) border-transparent',\n        custom: 'bg-(--el-role-custom) text-(--el-text-strong) border-transparent',\n      },\n      // Organization roles (Story 6.10 · design/org-admin): owner → lavender\n      // (the highest, brand-purple tier), admin → sky, member → mint — the hue\n      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.\n      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.\n      orgRole: {\n        owner: 'bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent',\n        admin: 'bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-org-role-member) text-(--el-text-strong) border-transparent',\n      },\n      tone: {\n        neutral: 'bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)',\n        // Epic-level privacy \"Not public\" badge (Story 6.14 · design\n        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same\n        // AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"` (≈9.7:1).\n        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the\n        // matching `--el-privacy-public` is defined ahead of a \"public\" badge.\n        private: 'bg-(--el-privacy-private) text-(--el-text-strong) border-transparent',\n        // Inactive \"Archived\" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill\n        // with slate ink, not a hued tint: archived is an inactive state, not a\n        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune\n        // the inactive badge apart from the neutral chip; AA-safe (slate on muted\n        // clears AA both themes).\n        archived: 'bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent',\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\nexport interface PillProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {}\n\nexport const Pill = forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { status, severity, priority, memberRole, orgRole, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n","import type { ReactNode } from 'react';\nimport { BookOpen, Search, SlidersHorizontal } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonVariants } from '../ui/Button';\nimport { Card } from '../ui/Card';\nimport { Pill } from '../ui/Pill';\nimport type { StyleId } from '../../theme/styles';\nimport type { PaletteId } from '../../theme/palettes';\nimport type { TypeId } from '../../theme/typography';\n\n/**\n * StyleVignette — the LIVE preview specimen that makes a design axis's FEEL\n * legible (Subtask 7.3.37 / MOTIR-1050).\n *\n * The fix for \"I only see typography change\": instead of a token-swatch table,\n * this is a composed, realistic MINI-SURFACE — a nav rail, a work-item card, a\n * search input, a button row, and a floating modal — rendered LIVE under a\n * style's shape/feel tokens + component overrides (and, independently, a palette\n * and a type pairing). Switching any axis re-shapes / re-skins / re-types the\n * whole vignette, so the user sees the product's feel, not a colour chip.\n *\n * ── Two modes ────────────────────────────────────────────────────────────\n *   • LIVE (no axis props) — the wrapper sets NO `data-*` axis attribute, so it\n *     INHERITS the active theme from `<html>` (driven by `theme-context`). Use\n *     this for the appearance-settings preview and the design-step showcase: the\n *     vignette re-renders automatically as the global selection changes.\n *   • SCOPED (any of `styleId` / `palette` / `type`) — the wrapper carries that\n *     axis attribute, so the globals.css axis block recomputes the tokens for\n *     this subtree ONLY. Use this for the onboarding Style gallery (one vignette\n *     per style) and the Palette step (one style re-rendered under each palette).\n *\n * Built on the `app/tokens/page.tsx` specimen pattern: real `--el-*` colour\n * tokens + element-semantic shape tokens + the `data-surface` material hooks, so\n * surface-material styles (glassmorphism's frosted glass, cybercore's glow grid)\n * apply exactly as they do in the shipped app. NEVER a Tier-0 `--color-*` or a\n * raw `rounded-*`/`p-*`/`h-*` (the colour + shape token rules in CLAUDE.md).\n *\n * ⚠️ WHAT A SCOPED VIGNETTE IS AND IS NOT ISOLATED FROM (rewritten, MOTIR-3933).\n * This paragraph used to describe the nested-base leak and then discharge it\n * with \"in the real consumers this never bites\". That was a claim about the\n * consumer set at the time of writing, recorded as though it were a property of\n * the component — and it is what let a public page ship ten identical palette\n * previews. The consumer set grew. Measured, not assumed:\n *\n *   • COLOUR (`palette`) — ISOLATED. The wrapper carries `data-appearance-scope`\n *     alongside the axis attribute, which re-emits the Tier-3 `--el-*` layer\n *     onto this element so it reads the `--color-*` this subtree overrides\n *     rather than the ones `:root` declared. theme.css states that requirement\n *     at the declaration site; this component did not honour it, and without it\n *     a scoped palette changed nothing the vignette paints with. The base\n *     `motir` entry now has its own block, and every per-palette dark block has\n *     a descendant arm, so a scoped tile is correct in BOTH themes and for the\n *     base entry too.\n *   • TYPE (`type`) — ISOLATED, same mechanism plus a base `[data-type='motir']`\n *     block. That axis ships no descendant rules, so the tokens are all of it.\n *   • SHAPE (`styleId`, the token block) — ISOLATED. Every style, including the\n *     Tier-0 `warm-editorial` base, has a `[data-style]` block that sets plain\n *     custom properties on the wrapper; they inherit down only that subtree.\n *   • MATERIAL (`styleId`, the descendant layer) — ISOLATED by the SCOPING\n *     LIMIT, since MOTIR-3997. The layer used to ship as descendant rules\n *     (`[data-style='X'] [data-surface=…]`, `[data-style='X'] body`, …), and a\n *     descendant combinator does not stop at a nested `data-style`: under an\n *     active `glassmorphism` only 1 of 11 scoped tiles wore its own material,\n *     under `aurora` 2 of 11, 64 of 121 over the full matrix. All 69 rules now\n *     ship as `@scope ([data-style='X']) to ([data-style]) { … }`, where\n *     `to (…)` is a scoping LIMIT — THIS component's `data-style` wrapper is\n *     what an ancestor style's scope stops at, so \"the nearest `[data-style]`\n *     ancestor wins\" is structural rather than a per-rule opt-out. The full\n *     matrix measures 121 / 121. See\n *     `docs/decisions/scoped-preview-isolation.md` for the measurement, the two\n *     rejected candidates and what the mechanism costs.\n *     The mechanism is structural, not automatic: a material rule\n *     authored as a plain descendant crosses the boundary exactly as these did,\n *     which is what `tests/theme/styleRegistry.test.ts`'s 69-rule ratchet\n *     exists to catch.\n */\n\nexport interface StyleVignetteProps {\n  /** Scope the vignette to a specific style; omit to inherit the active style. */\n  styleId?: StyleId;\n  /** Scope the vignette to a specific palette; omit to inherit the active palette. */\n  palette?: PaletteId;\n  /** Scope the vignette to a specific type pairing; omit to inherit the active type. */\n  type?: TypeId;\n  /**\n   * Accessible name for the preview region. The vignette is decorative chrome,\n   * so it is announced as a single labelled image rather than a pile of\n   * read-out controls.\n   */\n  label?: string;\n  className?: string;\n}\n\n/** A muted progress bar; `accent` tints it with the active accent. */\nfunction Bar({ accent, widthPct }: { accent?: boolean; widthPct: number }) {\n  return (\n    <div className=\"h-[6px] w-full overflow-hidden rounded-(--radius-badge) bg-(--el-muted)\">\n      <div\n        className={cn(\n          'h-full rounded-(--radius-badge)',\n          accent ? 'bg-(--el-accent)' : 'bg-(--el-border-strong)',\n        )}\n        style={{ width: `${widthPct}%` }}\n      />\n    </div>\n  );\n}\n\n/** One row of the work-item card's mini list — a status dot + label + chip. */\nfunction ListRow({ dotVar, label, chip }: { dotVar: string; label: string; chip: string }) {\n  return (\n    <div className=\"flex items-center gap-2 text-[11px] text-(--el-text-secondary)\">\n      <span\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{ background: `var(${dotVar})` }}\n        aria-hidden\n      />\n      <span className=\"truncate\">{label}</span>\n      <span className=\"ml-auto shrink-0 rounded-(--radius-badge) bg-(--el-surface) px-(--spacing-chip-x) py-(--spacing-chip-y) text-[9px] font-medium text-(--el-text-secondary)\">\n        {chip}\n      </span>\n    </div>\n  );\n}\n\nexport function StyleVignette({ styleId, palette, type, label, className }: StyleVignetteProps) {\n  // Only emit an axis attribute when the caller pins it; an omitted axis stays\n  // inherited (LIVE mode), which is how the appearance preview follows the\n  // global selection without re-implementing the theme context.\n  const axisAttrs: Record<string, string> = {};\n  if (styleId) axisAttrs['data-style'] = styleId;\n  if (palette) axisAttrs['data-palette'] = palette;\n  if (type) axisAttrs['data-type'] = type;\n  // SCOPED mode only. `data-appearance-scope` re-emits the Tier-3 `--el-*`\n  // layer onto this element, which is what makes the axis attributes above\n  // actually change what the subtree paints with: `--el-*` reference\n  // `--color-*` and `var()` resolves at the DECLARING element, so without it a\n  // nested `data-palette` overrides Tier-0 that nothing here reads.\n  //\n  // ⚠️ NOT in LIVE mode. With no axis prop the vignette is meant to FOLLOW the\n  // global selection, and re-emitting the layer locally would pin the subtree\n  // to whatever `--color-*` resolved at mount — the exact opposite of what the\n  // appearance preview mounts it for.\n  if (Object.keys(axisAttrs).length > 0) axisAttrs['data-appearance-scope'] = '';\n\n  return (\n    <div\n      {...axisAttrs}\n      role=\"img\"\n      aria-label={label ?? 'Design style preview'}\n      className={cn(\n        'style-vignette relative isolate overflow-hidden',\n        'rounded-(--radius-card) border border-(--el-border) bg-(--el-surface)',\n        'shadow-(--shadow-subtle)',\n        className,\n      )}\n    >\n      {/* Material canvas: transparent for flat styles; the glassmorphism gradient\n          / cybercore grid is painted here via the descendant rules in\n          globals.css (a preview can't lean on the body-scoped canvas). */}\n      <span className=\"sv-canvas pointer-events-none absolute inset-0 -z-10\" aria-hidden />\n\n      <div className=\"flex flex-col gap-3 p-3\">\n        {/* NAV — a compact rail; data-surface lets a material style frost it. */}\n        <div\n          data-surface=\"sidebar\"\n          className=\"flex items-center gap-2 rounded-(--radius-control) bg-(--el-sidebar-bg) px-3 py-2\"\n        >\n          <span className=\"size-2.5 rounded-full bg-(--el-accent)\" aria-hidden />\n          <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">Acme</span>\n          <span className=\"ml-2 rounded-(--radius-control) bg-(--el-accent) px-2 py-[3px] text-[10px] font-medium text-(--el-accent-text)\">\n            Board\n          </span>\n          <span className=\"text-[10px] text-(--el-text-secondary)\">Backlog</span>\n          <span className=\"text-[10px] text-(--el-text-secondary)\">Reports</span>\n          <span className=\"ml-auto size-5 rounded-full bg-(--el-muted)\" aria-hidden />\n        </div>\n\n        <div className=\"grid grid-cols-[1.4fr_1fr] gap-3\">\n          {/* WORK-ITEM CARD — the centrepiece: type hue + serif title + status. */}\n          <Card className=\"flex flex-col gap-2 !p-3\">\n            <div className=\"flex items-center gap-2\">\n              {/* A decorative story-type icon in its `--el-type-story` hue. The\n                  package can't depend on motir-core's domain `IssueTypeIcon`\n                  (which maps work-item kinds → glyphs), so the vignette inlines\n                  the same glyph + hue directly — pixel-identical, boundary-clean. */}\n              <BookOpen className=\"size-4 text-(--el-type-story)\" aria-hidden />\n              <span className=\"truncate font-serif text-[13px] font-semibold text-(--el-text)\">\n                Ship the billing flow\n              </span>\n              <Pill status=\"in-progress\" className=\"ml-auto !text-[9px]\">\n                In progress\n              </Pill>\n            </div>\n            <div className=\"flex flex-col gap-1.5\">\n              <ListRow dotVar=\"--el-success\" label=\"Invoice schema\" chip=\"Done\" />\n              <ListRow dotVar=\"--el-warning\" label=\"Dunning emails\" chip=\"Review\" />\n              <ListRow dotVar=\"--el-info\" label=\"Stripe webhook\" chip=\"To do\" />\n            </div>\n            <div className=\"mt-0.5 flex flex-col gap-1.5\">\n              <Bar accent widthPct={66} />\n              <Bar widthPct={38} />\n            </div>\n          </Card>\n\n          {/* MODAL — a floating dialog panel; modal radius + elevation + scrim. */}\n          <div className=\"relative\">\n            <span\n              className=\"pointer-events-none absolute -inset-1 rounded-(--radius-card) bg-black/10\"\n              aria-hidden\n            />\n            <div\n              data-surface=\"modal\"\n              className=\"relative flex flex-col gap-2 rounded-(--radius-modal) border border-(--el-border) bg-(--el-page-bg) p-3 shadow-(--shadow-modal)\"\n            >\n              <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">\n                New invoice\n              </span>\n              <Bar widthPct={100} />\n              <Bar widthPct={72} />\n              <div className=\"mt-1 flex gap-2\">\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'primary', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Create\n                </span>\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'ghost', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Cancel\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* INPUT — a search field; data-surface lets a material style fill it. */}\n        <div\n          data-surface=\"input\"\n          className=\"flex h-(--height-input) items-center gap-2 rounded-(--radius-input) border border-(--el-border-strong) bg-(--el-page-bg) px-(--spacing-input-x) text-[11px] text-(--el-text-secondary)\"\n        >\n          <Search className=\"size-3.5\" aria-hidden />\n          <span>Search work items…</span>\n        </div>\n\n        {/* BUTTON ROW — primary + ghost, exact Button silhouettes (non-interactive). */}\n        <div className=\"flex gap-2\">\n          <span className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), '!text-[11px]')}>\n            New work item\n          </span>\n          <span className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }), '!text-[11px]')}>\n            <SlidersHorizontal className=\"size-3.5\" aria-hidden />\n            Filter\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default StyleVignette as (props: StyleVignetteProps) => ReactNode;\n"]}

package/dist/components/ui/Popover.js

@@ -33,7 +33,14 @@ var PopoverContent = forwardRef(function PopoverContent2({
         overflowVisible ? "overflow-visible" : "overflow-hidden",
         "shadow-(--shadow-elevated) border border-(--el-border)",
         "focus:outline-none",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out fade-in-0 fade-out-0",
+        // NO entry/exit animation utilities here. Overlay motion is the
+        // THEME's, declared per style in `theme.css` against the
+        // `data-surface="popover"` hook above and gated behind
+        // `prefers-reduced-motion` — see the `immersive-menu-open` block.
+        // `animate-in` / `fade-in-0` are a Tailwind PLUGIN's vocabulary this
+        // repository has never installed, so they generated nothing
+        // (MOTIR-4889); `tests/theme/no-inert-animation-utilities.test.ts`
+        // keeps them out.
         className
       ),
       style: { width: typeof width === "number" ? `${width}px` : width, ...style },

package/dist/components/ui/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Popover.tsx"],"names":["PopoverContent"],"mappings":";;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACmBA,SAAS,YAAY,EAAE,IAAA,EAAM,YAAA,EAAc,KAAA,EAAO,UAAS,EAAiB;AAC1E,EAAA,2BACgB,YAAA,CAAA,IAAA,EAAb,EAAkB,IAAA,EAAY,YAAA,EAA4B,OACxD,QAAA,EACH,CAAA;AAEJ;AA0BA,IAAM,cAAA,GAAiB,UAAA,CAGrB,SAASA,eAAAA,CACT;AAAA,EACE,SAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,KAAA,GAAQ,GAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,KAAA;AAAA,EAClB,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,uBACE,GAAA,CAAc,qBAAb,EACC,QAAA,kBAAA,GAAA;AAAA,IAAc,YAAA,CAAA,OAAA;AAAA,IAAb;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MAGA,cAAA,EAAa,SAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,kBAAkB,kBAAA,GAAqB,iBAAA;AAAA,QACvC,wDAAA;AAAA,QACA,oBAAA;AAAA,QACA,mFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA,EAAO,GAAG,KAAA,EAAM;AAAA,MAC1E,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC,CAAA;AAED,IAAM,cAAA,GAA8B,YAAA,CAAA,OAAA;AACpC,IAAM,YAAA,GAA4B,YAAA,CAAA,KAAA;AAClC,IAAM,aAAA,GAA6B,YAAA,CAAA,MAAA;AAE5B,IAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,WAAA,EAAa;AAAA,EAChD,OAAA,EAAS,cAAA;AAAA,EACT,OAAA,EAAS,cAAA;AAAA,EACT,KAAA,EAAO,YAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAC","file":"Popover.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { cn } from '../../utils/cn';\n\n/**\n * Popover — anchored, click-outside-dismissable, focus-managed floating\n * panel wrapping @radix-ui/react-popover.\n *\n * Same shape as Modal.tsx (Radix-wrapped, controlled open state). Unlike\n * Modal, the content is anchored to a trigger rather than centered, and\n * there is no overlay — clicking outside dismisses. Use it for menus and\n * dropdowns where the panel holds free-form content (the workspace\n * switcher's section header + membership rows, the user menu).\n *\n * Portal + border + shadow match Modal so the two primitives feel\n * consistent. No new tokens — reuses --radius-card, --shadow-elevated,\n * --color-hairline.\n *\n * @example\n * <Popover open={open} onOpenChange={setOpen}>\n *   <Popover.Trigger asChild>\n *     <Button variant=\"ghost\" rightIcon={<ChevronDown />}>Menu</Button>\n *   </Popover.Trigger>\n *   <Popover.Content align=\"start\">{items}</Popover.Content>\n * </Popover>\n */\nexport interface PopoverProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  children: ReactNode;\n}\n\nfunction PopoverRoot({ open, onOpenChange, modal, children }: PopoverProps) {\n  return (\n    <RadixPopover.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n      {children}\n    </RadixPopover.Root>\n  );\n}\n\nexport interface PopoverContentProps extends ComponentPropsWithoutRef<typeof RadixPopover.Content> {\n  /** Panel width; defaults to the 320px the switcher mockup pins. */\n  width?: number | string;\n  /**\n   * Drop the panel's `overflow-hidden` so a child anchored dropdown — e.g. a\n   * `Combobox` listbox — can render past the panel's edge instead of being\n   * clipped by it. Set this whenever the popover hosts a `Combobox` (or any\n   * other absolutely-positioned floating child) whose menu can grow taller\n   * than the popover's content-sized height — a real-product Jira-style\n   * dropdown-inside-popover (mark-duplicate target, promote sprint picker)\n   * always escapes its anchor (`bug-combobox-menu-clipped-inside-popover`).\n   *\n   * Safe because the popover's own padding (`p-2`, `p-3`) keeps children off\n   * the rounded corners, so the corners stay clean without overflow clipping;\n   * and the Combobox menu stays in the popover's DOM subtree so non-modal\n   * Radix Popover does not treat its clicks as outside-dismissals.\n   *\n   * Leave unset for popovers that hold only static rows (the workspace\n   * switcher, the user menu) — the default `overflow-hidden` is fine and\n   * cheaper to reason about.\n   */\n  overflowVisible?: boolean;\n}\n\nconst PopoverContent = forwardRef<\n  React.ElementRef<typeof RadixPopover.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  {\n    className,\n    align = 'start',\n    sideOffset = 8,\n    width = 320,\n    style,\n    children,\n    overflowVisible = false,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <RadixPopover.Portal>\n      <RadixPopover.Content\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        // `data-surface` lets a surface-material style (glassmorphism) frost\n        // the floating panel — see globals.css's material layer.\n        data-surface=\"popover\"\n        className={cn(\n          'z-50 rounded-(--radius-card) bg-(--el-page-bg)',\n          overflowVisible ? 'overflow-visible' : 'overflow-hidden',\n          'shadow-(--shadow-elevated) border border-(--el-border)',\n          'focus:outline-none',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out fade-in-0 fade-out-0',\n          className,\n        )}\n        style={{ width: typeof width === 'number' ? `${width}px` : width, ...style }}\n        {...rest}\n      >\n        {children}\n      </RadixPopover.Content>\n    </RadixPopover.Portal>\n  );\n});\n\nconst PopoverTrigger = RadixPopover.Trigger;\nconst PopoverClose = RadixPopover.Close;\nconst PopoverAnchor = RadixPopover.Anchor;\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Close: PopoverClose,\n  Anchor: PopoverAnchor,\n});\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Popover.tsx"],"names":["PopoverContent"],"mappings":";;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACmBA,SAAS,YAAY,EAAE,IAAA,EAAM,YAAA,EAAc,KAAA,EAAO,UAAS,EAAiB;AAC1E,EAAA,2BACgB,YAAA,CAAA,IAAA,EAAb,EAAkB,IAAA,EAAY,YAAA,EAA4B,OACxD,QAAA,EACH,CAAA;AAEJ;AA0BA,IAAM,cAAA,GAAiB,UAAA,CAGrB,SAASA,eAAAA,CACT;AAAA,EACE,SAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,KAAA,GAAQ,GAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,KAAA;AAAA,EAClB,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,uBACE,GAAA,CAAc,qBAAb,EACC,QAAA,kBAAA,GAAA;AAAA,IAAc,YAAA,CAAA,OAAA;AAAA,IAAb;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MAGA,cAAA,EAAa,SAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,kBAAkB,kBAAA,GAAqB,iBAAA;AAAA,QACvC,wDAAA;AAAA,QACA,oBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA,EAAO,GAAG,KAAA,EAAM;AAAA,MAC1E,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC,CAAA;AAED,IAAM,cAAA,GAA8B,YAAA,CAAA,OAAA;AACpC,IAAM,YAAA,GAA4B,YAAA,CAAA,KAAA;AAClC,IAAM,aAAA,GAA6B,YAAA,CAAA,MAAA;AAE5B,IAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,WAAA,EAAa;AAAA,EAChD,OAAA,EAAS,cAAA;AAAA,EACT,OAAA,EAAS,cAAA;AAAA,EACT,KAAA,EAAO,YAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAC","file":"Popover.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { cn } from '../../utils/cn';\n\n/**\n * Popover — anchored, click-outside-dismissable, focus-managed floating\n * panel wrapping @radix-ui/react-popover.\n *\n * Same shape as Modal.tsx (Radix-wrapped, controlled open state). Unlike\n * Modal, the content is anchored to a trigger rather than centered, and\n * there is no overlay — clicking outside dismisses. Use it for menus and\n * dropdowns where the panel holds free-form content (the workspace\n * switcher's section header + membership rows, the user menu).\n *\n * Portal + border + shadow match Modal so the two primitives feel\n * consistent. No new tokens — reuses --radius-card, --shadow-elevated,\n * --color-hairline.\n *\n * @example\n * <Popover open={open} onOpenChange={setOpen}>\n *   <Popover.Trigger asChild>\n *     <Button variant=\"ghost\" rightIcon={<ChevronDown />}>Menu</Button>\n *   </Popover.Trigger>\n *   <Popover.Content align=\"start\">{items}</Popover.Content>\n * </Popover>\n */\nexport interface PopoverProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  children: ReactNode;\n}\n\nfunction PopoverRoot({ open, onOpenChange, modal, children }: PopoverProps) {\n  return (\n    <RadixPopover.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n      {children}\n    </RadixPopover.Root>\n  );\n}\n\nexport interface PopoverContentProps extends ComponentPropsWithoutRef<typeof RadixPopover.Content> {\n  /** Panel width; defaults to the 320px the switcher mockup pins. */\n  width?: number | string;\n  /**\n   * Drop the panel's `overflow-hidden` so a child anchored dropdown — e.g. a\n   * `Combobox` listbox — can render past the panel's edge instead of being\n   * clipped by it. Set this whenever the popover hosts a `Combobox` (or any\n   * other absolutely-positioned floating child) whose menu can grow taller\n   * than the popover's content-sized height — a real-product Jira-style\n   * dropdown-inside-popover (mark-duplicate target, promote sprint picker)\n   * always escapes its anchor (`bug-combobox-menu-clipped-inside-popover`).\n   *\n   * Safe because the popover's own padding (`p-2`, `p-3`) keeps children off\n   * the rounded corners, so the corners stay clean without overflow clipping;\n   * and the Combobox menu stays in the popover's DOM subtree so non-modal\n   * Radix Popover does not treat its clicks as outside-dismissals.\n   *\n   * Leave unset for popovers that hold only static rows (the workspace\n   * switcher, the user menu) — the default `overflow-hidden` is fine and\n   * cheaper to reason about.\n   */\n  overflowVisible?: boolean;\n}\n\nconst PopoverContent = forwardRef<\n  React.ElementRef<typeof RadixPopover.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  {\n    className,\n    align = 'start',\n    sideOffset = 8,\n    width = 320,\n    style,\n    children,\n    overflowVisible = false,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <RadixPopover.Portal>\n      <RadixPopover.Content\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        // `data-surface` lets a surface-material style (glassmorphism) frost\n        // the floating panel — see globals.css's material layer.\n        data-surface=\"popover\"\n        className={cn(\n          'z-50 rounded-(--radius-card) bg-(--el-page-bg)',\n          overflowVisible ? 'overflow-visible' : 'overflow-hidden',\n          'shadow-(--shadow-elevated) border border-(--el-border)',\n          'focus:outline-none',\n          // NO entry/exit animation utilities here. Overlay motion is the\n          // THEME's, declared per style in `theme.css` against the\n          // `data-surface=\"popover\"` hook above and gated behind\n          // `prefers-reduced-motion` — see the `immersive-menu-open` block.\n          // `animate-in` / `fade-in-0` are a Tailwind PLUGIN's vocabulary this\n          // repository has never installed, so they generated nothing\n          // (MOTIR-4889); `tests/theme/no-inert-animation-utilities.test.ts`\n          // keeps them out.\n          className,\n        )}\n        style={{ width: typeof width === 'number' ? `${width}px` : width, ...style }}\n        {...rest}\n      >\n        {children}\n      </RadixPopover.Content>\n    </RadixPopover.Portal>\n  );\n});\n\nconst PopoverTrigger = RadixPopover.Trigger;\nconst PopoverClose = RadixPopover.Close;\nconst PopoverAnchor = RadixPopover.Anchor;\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Close: PopoverClose,\n  Anchor: PopoverAnchor,\n});\n"]}

package/dist/components/ui/Toast.js

@@ -16,8 +16,6 @@ var toastVariants = cva(
     "rounded-(--radius-card) border bg-(--el-page-bg)",
     "px-(--spacing-md) py-(--spacing-sm)",
     "shadow-(--shadow-elevated)",
-    "data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-80",
     "data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)",
     "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
     "data-[swipe=cancel]:transition-transform data-[swipe=end]:transition-transform"

package/dist/components/ui/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Toast.tsx"],"names":[],"mappings":"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","file":"Toast.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Toast — transient notification with stacking, auto-dismiss, hover-to-pause.\n *\n * Wrap the app in `<ToastProvider>` once. Use `useToast()` from any client\n * component to dispatch:\n *\n * @example\n * const { toast } = useToast();\n * toast({ variant: 'success', title: 'Saved', description: 'Changes synced.' });\n */\nconst toastVariants = cva(\n  cn(\n    'pointer-events-auto flex items-start gap-3',\n    'rounded-(--radius-card) border bg-(--el-page-bg)',\n    'px-(--spacing-md) py-(--spacing-sm)',\n    'shadow-(--shadow-elevated)',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-80',\n    'data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)',\n    'data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)',\n    'data-[swipe=cancel]:transition-transform data-[swipe=end]:transition-transform',\n  ),\n  {\n    variants: {\n      variant: {\n        info: 'border-(--el-info)',\n        success: 'border-(--el-success)',\n        warning: 'border-(--el-warning)',\n        error: 'border-(--el-danger)',\n      },\n    },\n    defaultVariants: { variant: 'info' },\n  },\n);\n\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;\n\n/** An optional inline action button (e.g. \"Undo\" after an archive). */\ninterface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\ninterface ToastItem {\n  id: string;\n  variant: ToastVariant;\n  title: string;\n  description?: string;\n  action?: ToastAction;\n}\n\ninterface ToastContextValue {\n  toast: (opts: {\n    variant?: ToastVariant;\n    title: string;\n    description?: string;\n    action?: ToastAction;\n  }) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nconst ICONS: Record<ToastVariant, typeof Info> = {\n  info: Info,\n  success: CheckCircle2,\n  warning: AlertCircle,\n  error: XCircle,\n};\n\nconst ICON_COLOR_VAR: Record<ToastVariant, string> = {\n  info: 'var(--el-info)',\n  success: 'var(--el-success)',\n  warning: 'var(--el-warning)',\n  error: 'var(--el-danger)',\n};\n\nexport function ToastProvider({\n  children,\n  closeLabel = 'Close',\n}: {\n  children: ReactNode;\n  /**\n   * Accessible label for each toast's close (×) button. Defaults to `'Close'`.\n   * i18n is the consuming app's concern (the package carries no `next-intl`\n   * dependency), so a localized app passes the translated string — motir-core\n   * wires it from its `common.close`.\n   */\n  closeLabel?: string;\n}) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const toast = useCallback<ToastContextValue['toast']>(\n    ({ variant = 'info', title, description, action }) => {\n      const id = crypto.randomUUID();\n      setToasts((prev) => [...prev, { id, variant, title, description, action }]);\n    },\n    [],\n  );\n\n  const remove = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const value = useMemo(() => ({ toast }), [toast]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      <RadixToast.Provider swipeDirection=\"right\" duration={5000}>\n        {children}\n        {toasts.map((t) => {\n          const Icon = ICONS[t.variant];\n          return (\n            <RadixToast.Root\n              key={t.id}\n              className={toastVariants({ variant: t.variant })}\n              onOpenChange={(open) => {\n                if (!open) remove(t.id);\n              }}\n            >\n              <span aria-hidden className=\"mt-0.5 inline-flex\">\n                <Icon className=\"h-4 w-4\" style={{ color: ICON_COLOR_VAR[t.variant] }} />\n              </span>\n              <div className=\"flex-1\">\n                <RadixToast.Title className=\"font-sans text-sm font-medium text-(--el-text)\">\n                  {t.title}\n                </RadixToast.Title>\n                {t.description ? (\n                  <RadixToast.Description className=\"text-(--el-text-muted) mt-0.5 font-sans text-xs\">\n                    {t.description}\n                  </RadixToast.Description>\n                ) : null}\n              </div>\n              {t.action ? (\n                <RadixToast.Action\n                  altText={t.action.label}\n                  onClick={t.action.onClick}\n                  className=\"shrink-0 self-center rounded-(--radius-control) px-(--spacing-control-x) py-(--spacing-control-y) font-sans text-xs font-semibold text-(--el-link) hover:bg-(--el-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n                >\n                  {t.action.label}\n                </RadixToast.Action>\n              ) : null}\n              <RadixToast.Close\n                aria-label={closeLabel}\n                className=\"text-(--el-text-muted) hover:text-(--el-text) rounded-(--radius-control) p-(--spacing-icon-btn) transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n              >\n                <X className=\"h-3.5 w-3.5\" />\n              </RadixToast.Close>\n            </RadixToast.Root>\n          );\n        })}\n        <RadixToast.Viewport className=\"fixed bottom-0 right-0 z-50 m-4 flex w-96 max-w-[100vw] flex-col gap-2 outline-none\" />\n      </RadixToast.Provider>\n    </ToastContext.Provider>\n  );\n}\n\n// A no-op fallback for components rendered outside a ToastProvider — a unit test\n// or a surface mounted without the shell. The production root layout always\n// mounts the provider, so this only ever spares a deeply-embedded control (the\n// 2.8.4 ⋯ menu inside a board card / list row) from a hard provider dependency;\n// a stray toast outside the shell silently no-ops rather than crashing render.\nconst NO_OP_TOAST: ToastContextValue = { toast: () => {} };\n\nexport function useToast(): ToastContextValue {\n  return useContext(ToastContext) ?? NO_OP_TOAST;\n}\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Toast.tsx"],"names":[],"mappings":"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","file":"Toast.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Toast — transient notification with stacking, auto-dismiss, hover-to-pause.\n *\n * Wrap the app in `<ToastProvider>` once. Use `useToast()` from any client\n * component to dispatch:\n *\n * @example\n * const { toast } = useToast();\n * toast({ variant: 'success', title: 'Saved', description: 'Changes synced.' });\n */\nconst toastVariants = cva(\n  cn(\n    'pointer-events-auto flex items-start gap-3',\n    'rounded-(--radius-card) border bg-(--el-page-bg)',\n    'px-(--spacing-md) py-(--spacing-sm)',\n    'shadow-(--shadow-elevated)',\n    'data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)',\n    'data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)',\n    'data-[swipe=cancel]:transition-transform data-[swipe=end]:transition-transform',\n  ),\n  {\n    variants: {\n      variant: {\n        info: 'border-(--el-info)',\n        success: 'border-(--el-success)',\n        warning: 'border-(--el-warning)',\n        error: 'border-(--el-danger)',\n      },\n    },\n    defaultVariants: { variant: 'info' },\n  },\n);\n\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;\n\n/** An optional inline action button (e.g. \"Undo\" after an archive). */\ninterface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\ninterface ToastItem {\n  id: string;\n  variant: ToastVariant;\n  title: string;\n  description?: string;\n  action?: ToastAction;\n}\n\ninterface ToastContextValue {\n  toast: (opts: {\n    variant?: ToastVariant;\n    title: string;\n    description?: string;\n    action?: ToastAction;\n  }) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nconst ICONS: Record<ToastVariant, typeof Info> = {\n  info: Info,\n  success: CheckCircle2,\n  warning: AlertCircle,\n  error: XCircle,\n};\n\nconst ICON_COLOR_VAR: Record<ToastVariant, string> = {\n  info: 'var(--el-info)',\n  success: 'var(--el-success)',\n  warning: 'var(--el-warning)',\n  error: 'var(--el-danger)',\n};\n\nexport function ToastProvider({\n  children,\n  closeLabel = 'Close',\n}: {\n  children: ReactNode;\n  /**\n   * Accessible label for each toast's close (×) button. Defaults to `'Close'`.\n   * i18n is the consuming app's concern (the package carries no `next-intl`\n   * dependency), so a localized app passes the translated string — motir-core\n   * wires it from its `common.close`.\n   */\n  closeLabel?: string;\n}) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const toast = useCallback<ToastContextValue['toast']>(\n    ({ variant = 'info', title, description, action }) => {\n      const id = crypto.randomUUID();\n      setToasts((prev) => [...prev, { id, variant, title, description, action }]);\n    },\n    [],\n  );\n\n  const remove = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const value = useMemo(() => ({ toast }), [toast]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      <RadixToast.Provider swipeDirection=\"right\" duration={5000}>\n        {children}\n        {toasts.map((t) => {\n          const Icon = ICONS[t.variant];\n          return (\n            <RadixToast.Root\n              key={t.id}\n              className={toastVariants({ variant: t.variant })}\n              onOpenChange={(open) => {\n                if (!open) remove(t.id);\n              }}\n            >\n              <span aria-hidden className=\"mt-0.5 inline-flex\">\n                <Icon className=\"h-4 w-4\" style={{ color: ICON_COLOR_VAR[t.variant] }} />\n              </span>\n              <div className=\"flex-1\">\n                <RadixToast.Title className=\"font-sans text-sm font-medium text-(--el-text)\">\n                  {t.title}\n                </RadixToast.Title>\n                {t.description ? (\n                  <RadixToast.Description className=\"text-(--el-text-muted) mt-0.5 font-sans text-xs\">\n                    {t.description}\n                  </RadixToast.Description>\n                ) : null}\n              </div>\n              {t.action ? (\n                <RadixToast.Action\n                  altText={t.action.label}\n                  onClick={t.action.onClick}\n                  className=\"shrink-0 self-center rounded-(--radius-control) px-(--spacing-control-x) py-(--spacing-control-y) font-sans text-xs font-semibold text-(--el-link) hover:bg-(--el-surface) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n                >\n                  {t.action.label}\n                </RadixToast.Action>\n              ) : null}\n              <RadixToast.Close\n                aria-label={closeLabel}\n                className=\"text-(--el-text-muted) hover:text-(--el-text) rounded-(--radius-control) p-(--spacing-icon-btn) transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n              >\n                <X className=\"h-3.5 w-3.5\" />\n              </RadixToast.Close>\n            </RadixToast.Root>\n          );\n        })}\n        <RadixToast.Viewport className=\"fixed bottom-0 right-0 z-50 m-4 flex w-96 max-w-[100vw] flex-col gap-2 outline-none\" />\n      </RadixToast.Provider>\n    </ToastContext.Provider>\n  );\n}\n\n// A no-op fallback for components rendered outside a ToastProvider — a unit test\n// or a surface mounted without the shell. The production root layout always\n// mounts the provider, so this only ever spares a deeply-embedded control (the\n// 2.8.4 ⋯ menu inside a board card / list row) from a hard provider dependency;\n// a stray toast outside the shell silently no-ops rather than crashing render.\nconst NO_OP_TOAST: ToastContextValue = { toast: () => {} };\n\nexport function useToast(): ToastContextValue {\n  return useContext(ToastContext) ?? NO_OP_TOAST;\n}\n"]}

package/dist/components/ui/Tooltip.js

@@ -26,7 +26,6 @@ function Tooltip({
           "bg-(--el-tooltip-bg) text-(--el-tooltip-text)",
           "px-(--spacing-tooltip-x) py-(--spacing-tooltip-y) font-sans text-xs",
           "shadow-(--shadow-elevated)",
-          "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out fade-in-0 fade-out-0",
           className
         ),
         children: [

package/dist/components/ui/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Tooltip.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,GAAA;AAAA,EACV;AACF,CAAA,EAAiB;AACf,EAAA,2BACgB,YAAA,CAAA,QAAA,EAAb,EAAsB,eAAe,OAAA,EACpC,QAAA,kBAAA,IAAA,CAAc,mBAAb,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAc,YAAA,CAAA,OAAA,EAAb,EAAqB,OAAA,EAAO,IAAA,EAAE,QAAA,EAAS,CAAA;AAAA,oBACxC,GAAA,CAAc,qBAAb,EACC,QAAA,kBAAA,IAAA;AAAA,MAAc,YAAA,CAAA,OAAA;AAAA,MAAb;AAAA,QACC,IAAA;AAAA,QACA,UAAA,EAAY,CAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,6CAAA;AAAA,UACA,+CAAA;AAAA,UACA,qEAAA;AAAA,UACA,4BAAA;AAAA,UACA,2FAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACD,GAAA,CAAc,YAAA,CAAA,KAAA,EAAb,EAAmB,SAAA,EAAU,wBAAA,EAAyB;AAAA;AAAA;AAAA,KACzD,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"Tooltip.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type ReactNode } from 'react';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { cn } from '../../utils/cn';\n\n/**\n * Tooltip — Radix-wrapped popover that appears on hover + focus.\n *\n * Requires a single TooltipProvider near the app root for delay coordination.\n * For simple use, the default delay (700ms) is fine.\n *\n * @example\n * <Tooltip content=\"Send message\">\n *   <Button variant=\"ghost\"><Send /></Button>\n * </Tooltip>\n */\nexport interface TooltipProps {\n  content: ReactNode;\n  children: ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Delay before opening, in ms. Default 700 (Radix default). */\n  delayMs?: number;\n  className?: string;\n}\n\nexport function Tooltip({\n  content,\n  children,\n  side = 'top',\n  delayMs = 700,\n  className,\n}: TooltipProps) {\n  return (\n    <RadixTooltip.Provider delayDuration={delayMs}>\n      <RadixTooltip.Root>\n        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <RadixTooltip.Content\n            side={side}\n            sideOffset={6}\n            className={cn(\n              'z-50 select-none rounded-(--radius-control)',\n              'bg-(--el-tooltip-bg) text-(--el-tooltip-text)',\n              'px-(--spacing-tooltip-x) py-(--spacing-tooltip-y) font-sans text-xs',\n              'shadow-(--shadow-elevated)',\n              'data-[state=delayed-open]:animate-in data-[state=closed]:animate-out fade-in-0 fade-out-0',\n              className,\n            )}\n          >\n            {content}\n            <RadixTooltip.Arrow className=\"fill-(--el-tooltip-bg)\" />\n          </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Tooltip.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,GAAA;AAAA,EACV;AACF,CAAA,EAAiB;AACf,EAAA,2BACgB,YAAA,CAAA,QAAA,EAAb,EAAsB,eAAe,OAAA,EACpC,QAAA,kBAAA,IAAA,CAAc,mBAAb,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAc,YAAA,CAAA,OAAA,EAAb,EAAqB,OAAA,EAAO,IAAA,EAAE,QAAA,EAAS,CAAA;AAAA,oBACxC,GAAA,CAAc,qBAAb,EACC,QAAA,kBAAA,IAAA;AAAA,MAAc,YAAA,CAAA,OAAA;AAAA,MAAb;AAAA,QACC,IAAA;AAAA,QACA,UAAA,EAAY,CAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,6CAAA;AAAA,UACA,+CAAA;AAAA,UACA,qEAAA;AAAA,UACA,4BAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACD,GAAA,CAAc,YAAA,CAAA,KAAA,EAAb,EAAmB,SAAA,EAAU,wBAAA,EAAyB;AAAA;AAAA;AAAA,KACzD,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"Tooltip.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type ReactNode } from 'react';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { cn } from '../../utils/cn';\n\n/**\n * Tooltip — Radix-wrapped popover that appears on hover + focus.\n *\n * Requires a single TooltipProvider near the app root for delay coordination.\n * For simple use, the default delay (700ms) is fine.\n *\n * @example\n * <Tooltip content=\"Send message\">\n *   <Button variant=\"ghost\"><Send /></Button>\n * </Tooltip>\n */\nexport interface TooltipProps {\n  content: ReactNode;\n  children: ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Delay before opening, in ms. Default 700 (Radix default). */\n  delayMs?: number;\n  className?: string;\n}\n\nexport function Tooltip({\n  content,\n  children,\n  side = 'top',\n  delayMs = 700,\n  className,\n}: TooltipProps) {\n  return (\n    <RadixTooltip.Provider delayDuration={delayMs}>\n      <RadixTooltip.Root>\n        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <RadixTooltip.Content\n            side={side}\n            sideOffset={6}\n            className={cn(\n              'z-50 select-none rounded-(--radius-control)',\n              'bg-(--el-tooltip-bg) text-(--el-tooltip-text)',\n              'px-(--spacing-tooltip-x) py-(--spacing-tooltip-y) font-sans text-xs',\n              'shadow-(--shadow-elevated)',\n              className,\n            )}\n          >\n            {content}\n            <RadixTooltip.Arrow className=\"fill-(--el-tooltip-bg)\" />\n          </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"]}