@lovett/ui 0.0.1

package/src/styles.css

@@ -0,0 +1,562 @@
+/*
+ * @lovett/ui — component CSS utilities
+ *
+ * Ported from brand-ai-extension/webapp/src/index.css
+ *   tag : v-pre-workspace-intake-phase1
+ *   sha : 172dd010fee808bcd03795119ba888206da5bafd
+ *
+ * Phase 1 deviation (logged in completion report): ADR-008 Decision 2 talks
+ * about porting `:root { ... }` token blocks only. In practice the BRING_AS_IS
+ * primitives (Card, Button, Input, Textarea, Modal, ProfileSection) render
+ * through the CSS utility classes defined in source `index.css` below the
+ * token block. Those classes ARE the primitive's implementation — leaving them
+ * behind would ship non-functional primitives. They live here, separate from
+ * the token vocabulary, and are re-exported from the package as
+ * `@lovett/ui/styles.css` so apps import alongside `@lovett/ui/tokens.css`.
+ *
+ * Scope: only the utilities consumed by the in-scope primitives below:
+ *   .ds-card-surface (+ data-framed, data-interactive) — Card, Modal,
+ *                                                        ProfileSection
+ *   .ds-card-tray                                      — Card, Modal,
+ *                                                        ProfileSection
+ *   .btn, .btn-*, size-* modifiers, .is-loading,
+ *   .btn-group                                         — Button
+ *   .input-shell, .textarea-shell, .affix variants,
+ *   .has-leading/trailing, .is-error/disabled,
+ *   .size-sm/lg                                        — Input, Textarea
+ *   .scrollbar-hide                                    — ChipNav
+ *   prefers-reduced-motion block                       — accessibility
+ *
+ * Out of scope for Phase 1: .empty, .skel, .field*, .pg-header, .search-bar,
+ * .breadcrumbs, .topbar, .checkbox, .radio, .switch, .reasoning-pulse,
+ * .chat-md-list, .selection-reply-btn, ::selection. Those land when their
+ * consumers (Field, EmptyState, PageHeader, etc.) arrive in later phases.
+ */
+
+/* ---- CARD SURFACE ---- */
+.ds-card-surface {
+  background: rgb(var(--bg-card));
+  border: 1px solid rgb(var(--border-card));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--card-shadow-rest);
+}
+.ds-card-surface[data-framed="true"] {
+  background: rgb(var(--card-frame-bg));
+}
+.ds-card-surface[data-interactive="true"] {
+  cursor: pointer;
+  transition:
+    transform var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+.ds-card-surface[data-interactive="true"]:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--card-shadow-hover);
+}
+
+/* ---- CARD TRAY ---- */
+.ds-card-tray {
+  margin: var(--tray-inset);
+  background: rgb(var(--tray-bg));
+  /* Owner ask: visible 1px border on the inner tray so the tray surface
+   * reads as distinct from the surrounding card-frame. Uses the same
+   * --border-card the outer card uses for consistency. */
+  border: 1px solid rgb(var(--border-card));
+  border-radius: var(--radius-tray);
+  /* ADR-076 D7: recessed-tray shadow — formalizes the "bright inset
+   * panel" reading the tray already carries via the frame/tray
+   * brightness step. Subtle in both themes so every existing
+   * ProfileSection / Card.Tray gains depth without a visible regression. */
+  box-shadow: var(--tray-shadow);
+  overflow: hidden;
+}
+.ds-card-tray:not(:last-child) {
+  margin-bottom: 0;
+}
+
+/* ---- BUTTONS ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--ctrl-md);
+  padding: 0 16px;
+  /* ADR-026 D1 — bumped from --radius-sm (8px) to --radius-md (12px).
+   * Inspired by gray-ui-csm rounded-xl button treatment (recon §13 DQ-1). */
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out),
+    color var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out),
+    filter var(--dur-fast) var(--ease-out);
+  border: 1px solid transparent;
+  font-family: var(--font-sans);
+  white-space: nowrap;
+  user-select: none;
+}
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+}
+
+.btn-primary {
+  background: rgb(var(--accent));
+  color: white;
+  border-color: rgb(var(--accent));
+}
+.btn-primary:hover {
+  background: rgb(var(--accent-hover));
+  border-color: rgb(var(--accent-hover));
+  box-shadow: var(--shadow-glow);
+  transform: translateY(-1px);
+}
+.btn-primary:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 3px rgb(var(--accent-glow));
+}
+
+.btn-secondary {
+  background: rgb(var(--bg-card));
+  color: rgb(var(--foreground));
+  border-color: rgb(var(--border));
+}
+.btn-secondary:hover {
+  background: rgb(var(--bg-card-hover));
+  border-color: rgb(var(--border-strong));
+}
+
+.btn-outline {
+  background: transparent;
+  color: rgb(var(--foreground));
+  border-color: rgb(var(--border-strong));
+}
+.btn-outline:hover {
+  background: rgb(var(--surface-overlay-soft));
+  border-color: rgb(var(--foreground));
+}
+
+/* FilterBar (ADR-121) — match the filter pills' rest border to the search
+   field's input border (--border-input is a touch stronger than the generic
+   --border the secondary button uses), so the search box + filter chips read
+   as one bordered set. Hover already aligns on --border-strong; the active
+   (engaged) pill keeps its inline accent border. */
+.filter-bar .btn-secondary {
+  border-color: rgb(var(--border-input));
+}
+.filter-bar .btn-secondary:hover {
+  border-color: rgb(var(--border-strong));
+}
+
+.btn-ghost {
+  background: transparent;
+  color: rgb(var(--muted-foreground));
+}
+.btn-ghost:hover {
+  background: rgb(var(--surface-overlay-soft));
+  color: rgb(var(--foreground));
+}
+
+.btn-destructive {
+  background: rgb(var(--destructive));
+  color: white;
+  border-color: rgb(var(--destructive));
+}
+.btn-destructive:hover {
+  filter: brightness(0.94);
+}
+
+.btn-destructive-soft {
+  background: rgb(var(--destructive) / 0.10);
+  color: rgb(var(--destructive));
+  border-color: rgb(var(--destructive) / 0.25);
+}
+.btn-destructive-soft:hover {
+  background: rgb(var(--destructive) / 0.15);
+}
+
+.btn-icon {
+  width: var(--ctrl-md);
+  height: var(--ctrl-md);
+  padding: 0;
+  background: transparent;
+  color: rgb(var(--muted-foreground));
+  border: 1px solid rgb(var(--border));
+}
+.btn-icon:hover {
+  color: rgb(var(--foreground));
+  background: rgb(var(--surface-overlay-soft));
+  border-color: rgb(var(--border-strong));
+}
+/* ADR-026 D3 — circular IconButton variant (Button shape="circle"
+ * combined with variant="icon"). Used by AppHeader + future header
+ * surfaces per gray-ui-csm recon §13 DQ-3. Pill-radius wins over the
+ * .btn base radius when both classes are present. */
+.btn-icon.is-circle {
+  border-radius: 999px;
+}
+
+.btn-toolbar {
+  background: rgb(var(--bg-elevated));
+  color: rgb(var(--text-secondary));
+  border-color: rgb(var(--border));
+  border-radius: 999px;
+}
+.btn-toolbar:hover {
+  background: rgb(var(--bg-card-hover));
+  color: rgb(var(--foreground));
+  border-color: rgb(var(--border-strong));
+}
+
+/* Size modifiers */
+.btn.size-sm {
+  height: var(--ctrl-sm);
+  padding: 0 12px;
+  font-size: 12.5px;
+  gap: 5px;
+}
+.btn.size-sm.btn-icon {
+  width: var(--ctrl-sm);
+  padding: 0;
+}
+.btn.size-lg {
+  height: var(--ctrl-lg);
+  padding: 0 22px;
+  font-size: 14px;
+  gap: 8px;
+}
+.btn.size-lg.btn-icon {
+  width: var(--ctrl-lg);
+  padding: 0;
+}
+
+/* Loading + disabled */
+.btn.is-loading {
+  color: transparent;
+  position: relative;
+  pointer-events: none;
+}
+.btn.is-loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 999px;
+  color: white;
+  animation: btn-spin 720ms linear infinite;
+}
+.btn-secondary.is-loading::after,
+.btn-ghost.is-loading::after,
+.btn-outline.is-loading::after,
+.btn-destructive-soft.is-loading::after,
+.btn-toolbar.is-loading::after {
+  color: rgb(var(--foreground));
+}
+.btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Joined button group — typed React wrapper at packages/ui/src/button-group.tsx.
+ * ADR-026 D5 — corner rules bumped from --radius-sm to --radius-md to match
+ * the .btn base radius bump (D1). Inspired by gray-ui-csm view-switcher
+ * (recon §13 DQ-5). */
+.btn-group {
+  display: inline-flex;
+}
+.btn-group .btn {
+  border-radius: 0;
+  border-right-width: 0;
+}
+.btn-group .btn:first-child {
+  border-top-left-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
+.btn-group .btn:last-child {
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+  border-right-width: 1px;
+}
+
+/* ---- INPUT SHELL ---- */
+.input-shell {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  background: rgb(var(--bg-input));
+  border: 1px solid rgb(var(--border-input));
+  border-radius: var(--radius-md);
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
+  height: var(--ctrl-md);
+}
+.input-shell:hover {
+  border-color: rgb(var(--border-strong));
+  background: rgb(var(--bg-input-hover));
+}
+.input-shell:focus-within {
+  border-color: rgb(var(--accent));
+  box-shadow: var(--ring-focus);
+  background: rgb(var(--bg-input));
+}
+.input-shell.is-error {
+  border-color: rgb(var(--destructive));
+}
+.input-shell.is-error:focus-within {
+  box-shadow: var(--ring-error);
+}
+.input-shell.is-disabled {
+  opacity: 0.55;
+  pointer-events: none;
+  background: rgb(var(--surface-overlay-soft));
+}
+.input-shell input,
+.input-shell select,
+.input-shell textarea {
+  flex: 1;
+  min-width: 0;
+  appearance: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: rgb(var(--foreground));
+  font: 500 13.5px/1.4 var(--font-sans);
+  padding: 0 12px;
+}
+.input-shell.has-leading input,
+.input-shell.has-leading select {
+  padding-left: 0;
+}
+.input-shell.has-trailing input,
+.input-shell.has-trailing select {
+  padding-right: 0;
+}
+.input-shell input::placeholder,
+.input-shell textarea::placeholder {
+  color: rgb(var(--text-tertiary));
+}
+
+.input-shell .affix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  color: rgb(var(--text-tertiary));
+  font: 500 12.5px/1 var(--font-sans);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.input-shell .affix.action {
+  pointer-events: auto;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  transition: color 120ms;
+}
+.input-shell .affix.action:hover {
+  color: rgb(var(--foreground));
+}
+.input-shell .affix.divider {
+  border-left: 1px solid rgb(var(--border));
+  color: rgb(var(--muted-foreground));
+  font-size: 11.5px;
+}
+
+/* Numeric variant (ADR-076 D8) — monospace + tabular figures so digits
+ * align as values change. Orthogonal to the size modifiers. */
+.input-shell.is-numeric input {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.input-shell.size-sm {
+  height: var(--ctrl-sm);
+}
+.input-shell.size-sm input,
+.input-shell.size-sm select {
+  font-size: 12.5px;
+  padding: 0 10px;
+}
+.input-shell.size-lg {
+  height: var(--ctrl-lg);
+}
+.input-shell.size-lg input,
+.input-shell.size-lg select {
+  font-size: 14.5px;
+  padding: 0 14px;
+}
+
+/* Textarea variant — auto height */
+.input-shell.textarea-shell {
+  height: auto;
+  align-items: flex-start;
+  padding: 8px 0;
+}
+.input-shell.textarea-shell textarea {
+  min-height: 80px;
+  resize: vertical;
+  padding: 0 12px;
+  font-family: var(--font-sans);
+}
+
+/* ---- SCROLLBAR-HIDE UTILITY (ChipNav) ---- */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ---- PROGRESS BAR INDETERMINATE ---- */
+/* Used by `<ProgressBar>` primitive (no `percent` prop) — animated
+   sweep across the track. Added 2026-05-18 per ADR-020 D10 promotion. */
+.progress-indeterminate {
+  width: 40%;
+  animation: progress-indeterminate-sweep 1.4s ease-in-out infinite;
+}
+@keyframes progress-indeterminate-sweep {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+
+/* ---- RANGE SLIDER ----
+ * Dual-thumb range slider. Two native range inputs are stacked over a
+ * shared track + fill. The inputs themselves are transparent and
+ * pointer-events:none so they don't block each other — only the THUMB
+ * pseudo-elements re-enable pointer events. Thumb styling can only be
+ * done via ::-webkit-slider-thumb / ::-moz-range-thumb pseudo-elements,
+ * which is why this lives in CSS rather than inline styles. */
+.ds-range-input {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  height: 16px;
+  margin: 0;
+  background: transparent;
+  pointer-events: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.ds-range-input::-webkit-slider-runnable-track {
+  background: transparent;
+  height: 16px;
+}
+.ds-range-input::-moz-range-track {
+  background: transparent;
+  height: 16px;
+}
+.ds-range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: auto;
+  height: 16px;
+  width: 16px;
+  border-radius: var(--radius-full);
+  background: rgb(var(--bg-elevated));
+  border: 2px solid rgb(var(--accent));
+  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));
+  cursor: pointer;
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+.ds-range-input::-webkit-slider-thumb:hover {
+  transform: scale(1.12);
+}
+.ds-range-input::-moz-range-thumb {
+  pointer-events: auto;
+  height: 16px;
+  width: 16px;
+  border-radius: var(--radius-full);
+  background: rgb(var(--bg-elevated));
+  border: 2px solid rgb(var(--accent));
+  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));
+  cursor: pointer;
+}
+.ds-range-input:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid rgb(var(--accent));
+  outline-offset: 2px;
+}
+.ds-range-input:focus-visible::-moz-range-thumb {
+  outline: 2px solid rgb(var(--accent));
+  outline-offset: 2px;
+}
+.ds-range-input:disabled::-webkit-slider-thumb {
+  border-color: rgb(var(--border-strong));
+  cursor: not-allowed;
+}
+.ds-range-input:disabled::-moz-range-thumb {
+  border-color: rgb(var(--border-strong));
+  cursor: not-allowed;
+}
+
+/* ---- RESIZABLE HANDLE ----
+ * Hover/drag tint comes from inline styles + Tailwind utility (handled in
+ * resizable.tsx). The transition lives here so prefers-reduced-motion can
+ * suppress it without touching the JS — drag responsiveness is never
+ * gated on animation, only the colour fade.
+ *
+ * MAJ-1 (Sidebar-A hot-fix, ADR-049 D9 §212): on active drag the line
+ * grows from 4 px → 8 px so the user has a positive confirmation of the
+ * grab. Implemented with `transform: scale...` on the cross-axis so the
+ * line stays centred on its midpoint — no margin recalc, no layout
+ * thrash. `transform-origin: center` is the CSS default but stated for
+ * clarity. The orientation comes from the `data-orientation` attribute
+ * on the element (set by resizable.tsx alongside `data-dragging`).
+ */
+.resizable-handle {
+  transition: background-color var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out);
+  transform-origin: center center;
+}
+.resizable-handle[data-orientation='vertical'][data-dragging] {
+  transform: scaleX(2);
+}
+.resizable-handle[data-orientation='horizontal'][data-dragging] {
+  transform: scaleY(2);
+}
+
+/* ---- REDUCED MOTION ---- */
+@media (prefers-reduced-motion: reduce) {
+  .btn,
+  .btn-primary,
+  .input-shell {
+    transition: none !important;
+    animation: none !important;
+  }
+  .btn-primary:hover,
+  .btn:hover {
+    transform: none !important;
+  }
+  .progress-indeterminate {
+    animation: none !important;
+    width: 100% !important;
+  }
+  .ds-range-input::-webkit-slider-thumb {
+    transition: none !important;
+  }
+  .ds-range-input::-webkit-slider-thumb:hover {
+    transform: none !important;
+  }
+  .resizable-handle {
+    transition: none !important;
+  }
+}

package/src/tabs.tsx

@@ -0,0 +1,143 @@
+/**
+ * Tabs — horizontal tab nav with optional leading icons.
+ *
+ * Promoted in ADR-023 (Phase 8 Keywords, first committed consumer).
+ * Cross-batch consumers: Phase 12 SEMSpec (5-tab review dashboard),
+ * Phase 3b Discovery (sub-tabs).
+ *
+ * Distinct from <ChipNav> (Phase 1 / Phase 7a) — ChipNav serves
+ * section scroll-spy + section-nav-as-tabs on profile pages. <Tabs>
+ * is the simpler horizontal-button-row for top-of-content tab navigation.
+ *
+ * Token discipline: all colors via public tokens. Active tab uses the
+ * accent token; inactive uses text-tertiary.
+ */
+
+import type { ReactNode } from 'react'
+
+export interface Tab {
+  id: string
+  label: string
+  /** Optional Lucide icon (h-3.5 w-3.5 to h-4 w-4 expected). */
+  icon?: ReactNode
+  /** Optional count badge rendered after the label. */
+  count?: number
+  disabled?: boolean
+}
+
+export interface TabsProps {
+  tabs: Tab[]
+  activeTabId: string
+  onTabChange: (id: string) => void
+  /** Compact (12px label) or default (13px). */
+  size?: 'sm' | 'md'
+  /** Underline (default) or pill active-state. */
+  variant?: 'underline' | 'pill'
+  /** Stretch the tablist to full width with equal-width, centred tabs. */
+  stretch?: boolean
+  className?: string
+}
+
+export function Tabs({
+  tabs,
+  activeTabId,
+  onTabChange,
+  size = 'md',
+  variant = 'underline',
+  stretch = false,
+  className,
+}: TabsProps) {
+  const textSize = size === 'sm' ? 'text-[12px]' : 'text-[13px]'
+  return (
+    <div
+      role="tablist"
+      className={
+        className ??
+        (variant === 'underline'
+          ? `${stretch ? 'flex w-full' : 'inline-flex'} items-center gap-1 border-b`
+          : `${stretch ? 'flex w-full' : 'inline-flex'} items-center gap-1 p-1`)
+      }
+      style={
+        variant === 'underline'
+          ? { borderColor: 'rgb(var(--border))' }
+          : {
+              background: 'rgb(var(--surface-overlay-soft))',
+              border: '1px solid rgb(var(--border))',
+              borderRadius: 'var(--radius-full)',
+            }
+      }
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId
+        const base = `inline-flex items-center gap-1.5 px-3 h-9 ${textSize} font-medium transition-colors${stretch ? ' flex-1 justify-center' : ''}`
+        const underlineClass = `${base} border-b-2 -mb-px`
+        const pillClass = `${base}`
+        const className = variant === 'underline' ? underlineClass : pillClass
+
+        const activeStyle =
+          variant === 'underline'
+            ? {
+                color: 'rgb(var(--accent))',
+                borderColor: 'rgb(var(--accent))',
+              }
+            : {
+                // Pill variant — filled-accent active state.
+                color: 'rgb(var(--primary-foreground))',
+                background: 'rgb(var(--accent))',
+                border: '1px solid rgb(var(--accent))',
+                borderRadius: 'var(--radius-full)',
+              }
+        const inactiveStyle =
+          variant === 'underline'
+            ? {
+                color: 'rgb(var(--text-tertiary))',
+                borderColor: 'transparent',
+              }
+            : {
+                color: 'rgb(var(--text-secondary))',
+                background: 'transparent',
+                border: '1px solid transparent',
+                borderRadius: 'var(--radius-full)',
+              }
+
+        return (
+          <button
+            key={tab.id}
+            role="tab"
+            type="button"
+            aria-selected={isActive}
+            disabled={tab.disabled}
+            onClick={() => onTabChange(tab.id)}
+            className={`${className} ${tab.disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}`}
+            style={isActive ? activeStyle : inactiveStyle}
+          >
+            {tab.icon && (
+              <span className="flex-shrink-0" aria-hidden>
+                {tab.icon}
+              </span>
+            )}
+            {tab.label}
+            {tab.count !== undefined && (
+              <span
+                className="ml-0.5 inline-flex min-w-[1.1rem] items-center justify-center rounded-full px-1 text-[10.5px] font-semibold tabular-nums"
+                style={
+                  isActive && variant === 'pill'
+                    ? {
+                        background: 'rgb(var(--primary-foreground) / 0.22)',
+                        color: 'rgb(var(--primary-foreground))',
+                      }
+                    : {
+                        background: 'rgb(var(--surface-overlay))',
+                        color: 'rgb(var(--text-tertiary))',
+                      }
+                }
+              >
+                {tab.count}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}