@proteos/ui 0.75.0 → 0.77.0

package/src/components/glow-frame/glow-frame.tsx

@@ -0,0 +1,182 @@
+import { type ReactNode, type RefObject, useEffect, useRef, useState } from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   GlowFrame — the light round a model's output. Wrap the box the output
+   appears in and drive `status`:
+
+   - `working`  beams travel the box's edge while the model works.
+   - leaving `working`, the beams fade out (FADE_MS) and stop painting.
+   - `working` → `ready` plays one flash: a short burst of colour inside the
+     edge, the "here it is". Mounting straight into `ready` (a remount, a tab
+     switch) plays nothing, nor does `working` → `idle` (error, cancel).
+
+   Give it the box's radius (`rounded-*`) via `className`; both layers
+   inherit it. The frame spills 4px of fading light round the box (the
+   `.glow-room` in styles.css) — leave that much room before any overflow
+   clip, or accept that the outer spill is cut. Styles: styles.css, GlowFrame.
+   ========================================================================= */
+
+/** `room` spans the 4px of fading light round the box; `frame` is the box's
+ *  own outline, the one the beams ride and the flash fills. The light itself
+ *  is the `.glow-*` CSS in styles.css. */
+export const glowFrameStyles = tv({
+  slots: {
+    room: 'glow-room flex min-h-0 flex-col',
+    frame: 'glow-frame flex min-h-0 flex-1 flex-col',
+  },
+})
+
+export type GlowFrameVariants = VariantProps<typeof glowFrameStyles>
+
+export type GlowFrameStatus = 'idle' | 'working' | 'ready'
+
+export type GlowFrameProps = {
+  status: GlowFrameStatus
+  className?: string
+  children?: ReactNode
+}
+
+/** How long the beams take to fade in / out, in ms. */
+const FADE_MS = 700
+/** One flash, in ms (matches `glow-flash` in styles.css). */
+const FLASH_MS = 900
+/** How often the flash's colours get new places round the edge, in ms. */
+const REROLL_MS = 250
+const HUES = [1, 2, 3, 4, 5, 6] as const
+
+export function GlowFrame({ status, className, children }: GlowFrameProps) {
+  const isWorking = status === 'working'
+  const { run, isResting } = useBeams(isWorking)
+  const flash = useFlash(status)
+  const strokesRef = useReroll(flash)
+  const styles = glowFrameStyles()
+
+  return (
+    <div className={cn(styles.room(), className)}>
+      <div
+        className={styles.frame()}
+        data-status={status}
+        data-working={isWorking ? 'true' : 'false'}
+        data-flashing={flash !== 0 ? 'true' : 'false'}
+      >
+        {children}
+        {isResting ? null : (
+          <div key={`beams-${run}`} className="glow-fx" aria-hidden="true" data-glow="beams">
+            <div className="glow-orb">
+              <div className="glow-dot glow-a" />
+            </div>
+            <div className="glow-orb">
+              <div className="glow-dot glow-b" />
+            </div>
+            <div className="glow-beams">
+              <div className="glow-blob glow-tail glow-a" />
+              <div className="glow-blob glow-lead glow-a" />
+              <div className="glow-blob glow-tail glow-b" />
+              <div className="glow-blob glow-lead glow-b" />
+            </div>
+          </div>
+        )}
+        {flash !== 0 ? (
+          <div
+            key={`flash-${flash}`}
+            ref={strokesRef}
+            className="glow-flash"
+            aria-hidden="true"
+            data-glow="flash"
+          >
+            <div className="glow-ring glow-ring-1" />
+            <div className="glow-stroke glow-stroke-2">
+              <div className="glow-ring glow-ring-2" />
+            </div>
+            <div className="glow-stroke glow-stroke-3">
+              <div className="glow-ring glow-ring-3" />
+            </div>
+            <div className="glow-stroke glow-stroke-4">
+              <div className="glow-ring glow-ring-4" />
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/** The beams' lifecycle: mounted while working; once off they fade for
+ *  FADE_MS, then `isResting` stops them painting. Each new start bumps `run`,
+ *  which keys the layer so the entrance plays again. */
+function useBeams(isWorking: boolean): { run: number; isResting: boolean } {
+  const [run, setRun] = useState(0)
+  const [isResting, setIsResting] = useState(!isWorking)
+  const wasWorking = useRef(isWorking)
+
+  useEffect(() => {
+    if (isWorking) {
+      if (!wasWorking.current) setRun((n) => n + 1)
+      wasWorking.current = true
+      setIsResting(false)
+      return
+    }
+    wasWorking.current = false
+    const timer = window.setTimeout(() => setIsResting(true), FADE_MS + 50)
+    return () => window.clearTimeout(timer)
+  }, [isWorking])
+
+  return { run, isResting }
+}
+
+/** The flash being played (a counter, so a second working → ready replays
+ *  it), 0 while dark. Only a working → ready seen by this instance lights it. */
+function useFlash(status: GlowFrameStatus): number {
+  const [flash, setFlash] = useState(0)
+  const previous = useRef(status)
+
+  useEffect(() => {
+    const was = previous.current
+    previous.current = status
+    if (!(was === 'working' && status === 'ready')) return
+    setFlash((n) => n + 1)
+  }, [status])
+
+  useEffect(() => {
+    if (flash === 0) return
+    const timer = window.setTimeout(() => setFlash(0), FLASH_MS)
+    return () => window.clearTimeout(timer)
+  }, [flash])
+
+  return flash
+}
+
+/** While a flash plays (and motion is allowed), gives the six hues new
+ *  random places round the edge every REROLL_MS by writing the targets onto
+ *  the rings; their CSS transitions carry each ring there at its own pace. */
+function useReroll(flash: number): RefObject<HTMLDivElement | null> {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (flash === 0) return
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return
+    const reroll = () => {
+      const rings = ref.current?.querySelectorAll<HTMLElement>('.glow-ring')
+      if (!rings) return
+      // Random places ARE the animation: each hue somewhere round the edge,
+      // sorted by place they become the gradient's six stops.
+      const stops = HUES.map((hue) => ({ hue, at: Math.random() * 100 })).sort(
+        (a, b) => a.at - b.at,
+      )
+      for (const ring of rings) {
+        stops.forEach((stop, i) => {
+          ring.style.setProperty(`--glow-p${i + 1}`, `${stop.at.toFixed(2)}%`)
+          ring.style.setProperty(`--glow-k${i + 1}`, `var(--color-glow-${stop.hue})`)
+        })
+      }
+    }
+    reroll()
+    const timer = window.setInterval(reroll, REROLL_MS)
+    return () => window.clearInterval(timer)
+  }, [flash])
+
+  return ref
+}

package/src/components/glow-frame/index.ts

@@ -0,0 +1,2 @@
+export type { GlowFrameProps, GlowFrameStatus, GlowFrameVariants } from './glow-frame'
+export { GlowFrame, glowFrameStyles } from './glow-frame'

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './components/error-animation'
 export * from './components/field'
 export * from './components/file-field'
 export * from './components/file-viewer'
+export * from './components/glow-frame'
 export * from './components/icon-picker'
 export * from './components/image-attachment'
 export * from './components/image-lightbox'

package/src/styles.css

@@ -96,6 +96,20 @@
   --color-tile-slate: #1a1d2b;
   --color-tile-fg: #f0efe8;
 
+  /* Glow — the "model at work / output ready" light (see GlowFrame). A
+     deliberate decorative surface: its colours have no semantic token and
+     read the same in every theme. Beam: the two-colour light travelling the
+     edge while the model works. 1–6: the hues of the flash when the
+     output lands. */
+  --color-glow-beam-from: #3b82f6;
+  --color-glow-beam-to: #8b5cf6;
+  --color-glow-1: #bc82f3;
+  --color-glow-2: #f5b9ea;
+  --color-glow-3: #8d9fff;
+  --color-glow-4: #ff6778;
+  --color-glow-5: #ffba71;
+  --color-glow-6: #c686ff;
+
   /* Type */
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
   --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
@@ -219,6 +233,208 @@
   }
 }
 
+/* ==========================================================
+   GlowFrame — the light round a model's output (glow-frame.tsx).
+
+   Two layers over the wrapped box, both clipped to its radius:
+
+   Beams (status "working"). Two light pairs travel the box's edge, half a
+   lap apart, one lap per 4s, each a blurred lead + tail blob riding the
+   border-box path (offset-path) inside a 1px ring mask, plus a blurred dot
+   whose glow spills past the box. `screen` blending: nothing on .glow-fx
+   may create a stacking context (no z-index / opacity on it), or the blend
+   stops reaching the box. The fade in / out goes on its children instead.
+
+   Flash (working → ready). Four strokes of ONE conic gradient laid inside
+   the edge, each wider and blurrier than the last. Every 250ms GlowFrame
+   gives the six hues new random places round the edge; the places and
+   hues are registered properties, so each stroke eases there at its own
+   pace and the four chase each other. One 900ms burst: quick rise to a
+   soft peak, long fade.
+
+   .glow-room spans 4px round the box and fades everything in it to nothing
+   at its outer edge, so spilled light never meets an overflow clip as a
+   hard line.
+   ========================================================== */
+
+@property --glow-p1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p5 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p6 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-k1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k3 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k4 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k5 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k6 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+
+.glow-room {
+  --glow-room: 4px;
+  margin: calc(var(--glow-room) * -1);
+  padding: var(--glow-room);
+  -webkit-mask:
+    linear-gradient(to right, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent),
+    linear-gradient(to bottom, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent);
+  -webkit-mask-composite: source-in;
+  mask:
+    linear-gradient(to right, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent) intersect,
+    linear-gradient(to bottom, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent);
+}
+.glow-frame {
+  position: relative;
+  isolation: isolate;
+  border-radius: inherit;
+}
+
+/* --- Beams --------------------------------------------------- */
+
+.glow-fx {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.glow-fx > div {
+  transition: opacity 700ms var(--ease-out-soft);
+  animation: glow-in 700ms var(--ease-out-soft) backwards;
+}
+.glow-frame[data-working="false"] > .glow-fx > div {
+  opacity: 0;
+}
+.glow-orb {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.glow-beams {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+  overflow: hidden;
+  padding: 1px;
+  -webkit-mask: linear-gradient(#fff 0, #fff 0) content-box exclude, linear-gradient(#fff 0, #fff 0);
+  mask: linear-gradient(#fff 0, #fff 0) content-box exclude, linear-gradient(#fff 0, #fff 0);
+}
+.glow-dot,
+.glow-blob {
+  position: absolute;
+  border-radius: 50%;
+  offset-path: border-box;
+  offset-anchor: 50% 50%;
+  offset-rotate: 0deg;
+  mix-blend-mode: screen;
+  pointer-events: none;
+  animation-duration: 4s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.glow-dot {
+  width: 30px;
+  height: 30px;
+  background: radial-gradient(circle, var(--color-glow-beam-from) 0%, var(--color-glow-beam-from) 30%, transparent 100%);
+  filter: blur(30px);
+  opacity: 0.7;
+}
+.glow-lead {
+  width: 83px;
+  height: 83px;
+  background: radial-gradient(circle, var(--color-glow-beam-from) 0%, var(--color-glow-beam-from) 20%, transparent 70%);
+  filter: blur(12px);
+}
+.glow-tail {
+  width: 83px;
+  height: 83px;
+  background: radial-gradient(circle, var(--color-glow-beam-to) 0%, var(--color-glow-beam-to) 20%, transparent 70%);
+  filter: blur(14.4px);
+}
+.glow-dot.glow-a { animation-name: glow-dot; }
+.glow-dot.glow-b { animation-name: glow-dot-offset; }
+.glow-lead.glow-a { animation-name: glow-trail; }
+.glow-lead.glow-b { animation-name: glow-trail-offset; }
+.glow-tail.glow-a { animation-name: glow-trail-tail; }
+.glow-tail.glow-b { animation-name: glow-trail-offset-tail; }
+
+@keyframes glow-in { from { opacity: 0; } }
+@keyframes glow-trail { from { offset-distance: 0%; } to { offset-distance: 100%; } }
+@keyframes glow-trail-offset { from { offset-distance: 50%; } to { offset-distance: 150%; } }
+@keyframes glow-trail-tail { from { offset-distance: -4%; } to { offset-distance: 96%; } }
+@keyframes glow-trail-offset-tail { from { offset-distance: 46%; } to { offset-distance: 146%; } }
+@keyframes glow-dot { from { offset-distance: 4%; } to { offset-distance: 104%; } }
+@keyframes glow-dot-offset { from { offset-distance: 54%; } to { offset-distance: 154%; } }
+
+/* --- Flash --------------------------------------------------- */
+
+.glow-flash {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  overflow: clip;
+  border-radius: inherit;
+  pointer-events: none;
+  animation: glow-flash 900ms linear both;
+}
+.glow-stroke {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.glow-ring {
+  /* Evenly spaced until the first re-roll (and for good under reduced
+     motion). */
+  --glow-p1: 0%;      --glow-k1: var(--color-glow-1);
+  --glow-p2: 16.667%; --glow-k2: var(--color-glow-2);
+  --glow-p3: 33.333%; --glow-k3: var(--color-glow-3);
+  --glow-p4: 50%;     --glow-k4: var(--color-glow-4);
+  --glow-p5: 66.667%; --glow-k5: var(--color-glow-5);
+  --glow-p6: 83.333%; --glow-k6: var(--color-glow-6);
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--glow-w);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  /* Angular from 3 o'clock; first and last stops repeat one turn away so
+     the loop closes without a seam. */
+  background: conic-gradient(from 90deg,
+    var(--glow-k6) calc(var(--glow-p6) - 100%),
+    var(--glow-k1) var(--glow-p1), var(--glow-k2) var(--glow-p2), var(--glow-k3) var(--glow-p3),
+    var(--glow-k4) var(--glow-p4), var(--glow-k5) var(--glow-p5), var(--glow-k6) var(--glow-p6),
+    var(--glow-k1) calc(var(--glow-p1) + 100%));
+  transition-property: --glow-p1, --glow-k1, --glow-p2, --glow-k2, --glow-p3, --glow-k3,
+    --glow-p4, --glow-k4, --glow-p5, --glow-k5, --glow-p6, --glow-k6;
+  transition-duration: var(--glow-dur);
+  transition-timing-function: ease-in-out;
+}
+.glow-ring-1 { --glow-w: 3.5px; --glow-dur: 500ms; }
+.glow-ring-2 { --glow-w: 5.5px; --glow-dur: 600ms; }
+.glow-ring-3 { --glow-w: 6.5px; --glow-dur: 800ms; }
+.glow-ring-4 { --glow-w: 9px; --glow-dur: 1000ms; }
+.glow-stroke-2 { filter: blur(2.5px); }
+.glow-stroke-3 { filter: blur(7px); }
+.glow-stroke-4 { filter: blur(9px); }
+
+/* Up fast to a soft peak — a hint, not a second working light — then a
+   long fall. */
+@keyframes glow-flash {
+  0% { opacity: 0; animation-timing-function: var(--ease-out-soft); }
+  18% { opacity: 0.6; animation-timing-function: ease-in-out; }
+  100% { opacity: 0; }
+}
+
+/* Reduced motion: the beams hold still where they start, the flash keeps
+   its fade but its colours stay put. */
+@media (prefers-reduced-motion: reduce) {
+  .glow-fx > div { animation: none; }
+  .glow-fx * { animation-play-state: paused; }
+  .glow-ring { transition: none; }
+}
+
 /* Raw variables (non-color) for direct component consumption.
    Tailwind v4 mirrors @theme into :root for colors/radii/shadows, but we
    also expose spacing tokens here for components that need raw var() access. */

package/dist/chunk-NSE4VW3Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["AriaButton","tv","jsx"],"mappings":"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","file":"chunk-NSE4VW3Z.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Button — emphasis ladder, top to bottom:\n\n     cta        ink fill. The one strong action per view (never two visible).\n     primary    raised white: `surface` fill, `rule-strong` hairline, rest\n                shadow. The everyday button; the default variant.\n     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.\n     ghost      secondary's chrome, only on hover. Invisible at rest.\n     subtle     borderless text button (toolbars, icon buttons).\n     link       inline underline.\n     danger     solid terracotta for destructive confirms.\n\n   `accent` is a frozen alias of `cta` — variant names are part of the runtime\n   contract for module component bundles, so nothing is ever removed.\n\n   Interaction state comes from React Aria's data attributes (`hovered:`,\n   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`\n   and `disabled:` stay on the native pseudo-classes because the RAC root IS\n   the focusable <button>. Hover is always a colour step on the surface ramp,\n   never opacity; press is translateY(1px) plus one more ramp step.\n   ========================================================================= */\n\n// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.\nconst ctaClasses = [\n  'bg-ink text-surface border-ink',\n  'hovered:bg-accent-ink hovered:border-accent-ink',\n]\n\n// Raised white: a lighter inner on the darker page ground. On a white card the\n// hairline + rest shadow carry it. Press sinks one step and drops the shadow.\nconst raisedClasses = [\n  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',\n  'hovered:bg-surface-2 hovered:border-rule-strong',\n  'pressed:bg-surface-3 pressed:shadow-none',\n  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',\n]\n\n// Muted gray fill, no border. One step quieter than primary.\nconst mutedClasses = [\n  'bg-surface-3 text-ink-2 border-transparent',\n  'hovered:bg-surface-4 hovered:text-ink',\n  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',\n]\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md\n    // typography.body), not the mono reserved for ids, timestamps and badges.\n    'font-sans font-medium tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      cta: ctaClasses,\n      accent: ctaClasses,\n      primary: raisedClasses,\n      secondary: mutedClasses,\n      ghost: [\n        'bg-transparent text-ink-2 border-transparent',\n        'hovered:bg-surface-3 hovered:text-ink',\n        'pressed:bg-surface-4',\n      ],\n      subtle: [\n        'bg-transparent text-ink-3 border-transparent',\n        'hovered:bg-surface-2 hovered:text-ink',\n        'pressed:bg-surface-3',\n      ],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hovered:text-ink hovered:border-b-ink',\n      ],\n      // `text-surface`, not white: dark's --color-danger is a light salmon, and\n      // the surface token flips dark with it while white would fail contrast.\n      danger: [\n        'bg-danger text-surface border-danger',\n        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded treatment for a small set\n    // of prominent CTAs. The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n    // Destructive confirms get the terracotta halo instead of the indigo one.\n    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}

package/dist/chunk-NWGG5WFL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["twMerge","clsx","tv","jsx","AriaButton"],"mappings":"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","file":"chunk-NWGG5WFL.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Button — emphasis ladder, top to bottom:\n\n     cta        ink fill. The one strong action per view (never two visible).\n     primary    raised white: `surface` fill, `rule-strong` hairline, rest\n                shadow. The everyday button; the default variant.\n     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.\n     ghost      secondary's chrome, only on hover. Invisible at rest.\n     subtle     borderless text button (toolbars, icon buttons).\n     link       inline underline.\n     danger     solid terracotta for destructive confirms.\n\n   `accent` is a frozen alias of `cta` — variant names are part of the runtime\n   contract for module component bundles, so nothing is ever removed.\n\n   Interaction state comes from React Aria's data attributes (`hovered:`,\n   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`\n   and `disabled:` stay on the native pseudo-classes because the RAC root IS\n   the focusable <button>. Hover is always a colour step on the surface ramp,\n   never opacity; press is translateY(1px) plus one more ramp step.\n   ========================================================================= */\n\n// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.\nconst ctaClasses = [\n  'bg-ink text-surface border-ink',\n  'hovered:bg-accent-ink hovered:border-accent-ink',\n]\n\n// Raised white: a lighter inner on the darker page ground. On a white card the\n// hairline + rest shadow carry it. Press sinks one step and drops the shadow.\nconst raisedClasses = [\n  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',\n  'hovered:bg-surface-2 hovered:border-rule-strong',\n  'pressed:bg-surface-3 pressed:shadow-none',\n  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',\n]\n\n// Muted gray fill, no border. One step quieter than primary.\nconst mutedClasses = [\n  'bg-surface-3 text-ink-2 border-transparent',\n  'hovered:bg-surface-4 hovered:text-ink',\n  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',\n]\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md\n    // typography.body), not the mono reserved for ids, timestamps and badges.\n    'font-sans font-medium tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      cta: ctaClasses,\n      accent: ctaClasses,\n      primary: raisedClasses,\n      secondary: mutedClasses,\n      ghost: [\n        'bg-transparent text-ink-2 border-transparent',\n        'hovered:bg-surface-3 hovered:text-ink',\n        'pressed:bg-surface-4',\n      ],\n      subtle: [\n        'bg-transparent text-ink-3 border-transparent',\n        'hovered:bg-surface-2 hovered:text-ink',\n        'pressed:bg-surface-3',\n      ],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hovered:text-ink hovered:border-b-ink',\n      ],\n      // `text-surface`, not white: dark's --color-danger is a light salmon, and\n      // the surface token flips dark with it while white would fail contrast.\n      danger: [\n        'bg-danger text-surface border-danger',\n        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded treatment for a small set\n    // of prominent CTAs. The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n    // Destructive confirms get the terracotta halo instead of the indigo one.\n    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}