@astralform/ui 0.0.0-stage → 0.3.6

package/DESIGN.md

@@ -0,0 +1,243 @@
+---
+version: alpha
+name: Astralform Dashboard
+description: Dark-first, focused control-surface design language — warm orange accent on near-black, built for dense developer tooling.
+
+colors:
+  # ---- Brand accent (orange) — the single system tint ----
+  primary: "#fb923c"
+  accent-hover: "#fdba74"
+  accent: "#fb923c"
+  accent-muted: "#f97316"
+  accent-bold: "#ea580c"
+  accent-dim: "#c2410c"
+  accent-subtle: "#7c2d12"
+  accent-surface: "#431407"
+
+  # ---- Surfaces (darkest → lightest) ----
+  surface-base: "#000000"
+  surface-primary: "#09090b"
+  surface-secondary: "#18181b"
+  surface-tertiary: "#27272a"
+  surface-inset: "#3f3f46"
+
+  # ---- Borders ----
+  border-primary: "#27272a"
+  border-secondary: "#3f3f46"
+  border-focus: "#52525b"
+
+  # ---- Text (brightest → dimmest) ----
+  text-primary: "#ffffff"
+  text-secondary: "#d4d4d8"
+  text-tertiary: "#a1a1aa"
+  text-muted: "#71717a"
+  text-disabled: "#52525b"
+  text-inverse: "#000000"
+
+  # ---- Buttons ----
+  btn-primary-bg: "#ffffff"
+  btn-primary-hover: "#f4f4f5"
+  btn-danger-bg: "#dc2626"
+  btn-danger-hover: "#b91c1c"
+
+  # ---- Status (semantic — NOT the accent) ----
+  success: "#34d399"
+  success-subtle: "#064e3b"
+  success-dim: "#047857"
+  warning: "#fbbf24"
+  warning-subtle: "#78350f"
+  warning-dim: "#b45309"
+  danger: "#f87171"
+  danger-subtle: "#7f1d1d"
+  danger-dim: "#b91c1c"
+  info: "#60a5fa"
+  info-subtle: "#1e3a5f"
+  info-dim: "#1d4ed8"
+
+typography:
+  page-title:
+    fontFamily: Outfit
+    fontSize: 24px
+    fontWeight: 700
+    lineHeight: 1.25
+  section-heading:
+    fontFamily: Outfit
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1.25
+  card-title:
+    fontFamily: Outfit
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1
+    letterSpacing: -0.025em
+  body:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+  label:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.5
+  caption:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.5
+  overline:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 12px
+    fontWeight: 600
+    letterSpacing: 0.05em
+
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+
+rounded:
+  input: 8px
+  button: 8px
+  alert: 8px
+  modal: 12px
+  card: 20px
+  badge: 9999px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.btn-primary-bg}"
+    textColor: "{colors.text-inverse}"
+    rounded: "{rounded.button}"
+  button-danger:
+    backgroundColor: "{colors.btn-danger-bg}"
+    textColor: "{colors.text-primary}"
+    rounded: "{rounded.button}"
+  card:
+    backgroundColor: "{colors.surface-primary}"
+    rounded: "{rounded.card}"
+  badge-accent:
+    backgroundColor: "{colors.accent-subtle}"
+    textColor: "{colors.accent-hover}"
+    rounded: "{rounded.badge}"
+  input:
+    backgroundColor: "{colors.surface-secondary}"
+    textColor: "{colors.text-primary}"
+    rounded: "{rounded.input}"
+---
+
+## Overview
+
+Astralform's dashboard is a **control surface for developers** — dense, dark, and
+calm. It should feel like a precision instrument, not a marketing site: information
+sits close together, chrome recedes, and a single warm accent draws the eye only to
+the thing you can act on right now.
+
+The personality is **quiet confidence**. Near-black surfaces let syntax, data, and
+status colors carry meaning without competing. Motion is purposeful and short. The
+target user is a developer configuring agents, skills, and billing — they value
+legibility and predictability over delight-for-its-own-sake.
+
+This file is the **token contract** for the brand. Components live in `@astralform/ui`
+and read only the semantic tokens below; swapping this file (see `themes/chat.DESIGN.md`)
+re-skins every product without touching component code.
+
+## Colors
+
+The palette is a **neutral zinc greyscale** (surfaces, borders, text) plus **one brand
+tint (orange)** and **four semantic status hues** (emerald / amber / red / blue).
+
+- **Accent = system tint.** Orange is reserved for *interactive or active chrome*:
+  links, toggles, focus rings, selected tabs, active states. It is the iOS-style
+  "this is the live thing." Every accent token comes in a 7-tier scale
+  (`hover → default → muted → bold → dim → subtle → surface`) so the same hue serves
+  hover text, filled controls, borders, and deep backgrounds at the right contrast.
+- **Status colors are not the accent.** Emerald/amber/red/blue carry *meaning*
+  (success, warning, danger, info). A category badge keeps its own semantic color —
+  it never adopts the accent just because it is interactive.
+- **Surfaces stack darkest-first.** `surface-base` (#000) is the page; `surface-primary`
+  (#09090b) is the default panel; each step up the scale lifts a layer (cards, inputs,
+  insets) without a single shadow doing the work.
+
+## Typography
+
+Two families, one job each. **Outfit** (geometric, confident) sets every heading and
+title; **Plus Jakarta Sans** (humanist, legible at small sizes) carries body, labels,
+captions, and overlines. Type is expressed as **roles, not sizes** — `page-title`,
+`section-heading`, `card-title`, `body`, `label`, `caption`, `overline` — so a screen
+reads in a consistent hierarchy regardless of which component renders it.
+
+Sizes stay compact (14px body, 12px caption) because the surface is dense. Card titles
+tighten letter-spacing (`-0.025em`) to feel engineered; overlines widen it (`0.05em`)
+and uppercase to act as quiet section markers.
+
+## Layout
+
+A **column-and-panel** model: a fixed sidebar (`12rem`, `3.25rem` collapsed), a 4rem
+header, and a content column that breathes via the `page-content` utility
+(`clamp(1rem, 4%, 4rem)` horizontal padding) instead of hardcoded gutters. Secondary
+surfaces (workspace, conversation sidebar, battle-test panel) have named widths so the
+shell composes predictably across screens.
+
+Spacing follows a **4px rhythm** (`xs 4 · sm 8 · md 16 · lg 24 · xl 32 · 2xl 48`).
+Containment is structural: related controls share a card; a card is the unit of
+grouping, not a decorative box.
+
+## Elevation & Depth
+
+**Flat-first.** Depth comes primarily from the surface scale (stacking darker-to-lighter
+panels), not heavy drop shadows. Shadows are reserved, role-named, and subtle:
+`shadow-card` (rest) → `shadow-button-hover` → `shadow-dropdown` → `shadow-modal`. A card
+sits a hair above the page; a modal floats clearly above everything. Glows
+(`pulse-glow`, white-tinted lifts) are used sparingly for celebratory or live states,
+never as default chrome.
+
+## Shapes
+
+Rounding signals **scale of container**. Small interactive atoms (inputs, buttons,
+alerts) use an 8px radius — crisp, tappable. Modals step up to 12px. **Cards use a
+generous 20px** (`rounded-card`) — the softest corner in the system, marking the primary
+unit of grouping. Badges are fully pill-shaped (`9999px`). The progression
+small→medium→large radius reinforces the visual hierarchy of nesting.
+
+## Components
+
+Atoms in `@astralform/ui` are **token-only** — they never hardcode a hex value.
+
+- **Button** — `primary` is a high-contrast white fill on dark (`btn-primary-bg` /
+  `text-inverse`); `secondary` is a bordered surface; `danger` is red; `ghost` is
+  chromeless. All share `rounded-button`, `btn-press` (scale-on-active), and the unified
+  `focus-ring`.
+- **Card** — `surface-primary` fill, hairline `border-primary`, `rounded-card`,
+  `shadow-card`. The default grouping container. Sub-parts (`CardHeader/Title/...`) use
+  the `card-title` type role.
+- **Badge** — category-driven: a semantic `variant` (success/warning/danger/info/accent)
+  resolves background+text+border from the matching status scale at ~50% subtle bg.
+  Pill radius. Carries an optional Phosphor icon.
+- **Input / Select / Textarea / Toggle** — `surface-secondary` fill, `border-secondary`,
+  `rounded-input`, `focus-ring`. Toggles use the accent for the "on" track.
+
+## Do's and Don'ts
+
+**Do**
+- Use the **accent only** for interactive/active chrome (links, toggles, focus rings,
+  selected tabs). Treat it as the single system tint.
+- Keep category/status colors semantic — a Capsule/Shell/Refs badge keeps its own hue.
+- Reach for a **type role** (`type-page-title`, `type-card-title`, `type-label`) before
+  ad-hoc `text-*` sizes.
+- Build depth from the **surface scale** first; add a shadow only when a layer must
+  clearly float (dropdown, modal).
+- Use **monochrome / Phosphor icons** — professional, not colorful emoji.
+
+**Don't**
+- Don't paint static decoration with the accent — it dilutes the "this is live" signal.
+- Don't add `hover:bg-*` backgrounds to clickable **list rows**; use `cursor-pointer`
+  and let the row stay flat.
+- Don't hardcode hex values in components — every color flows from a token here.
+- Don't duplicate a token's value inline; reference the scale so a re-skin stays a
+  one-file change.
+- Don't mix font families across roles — Outfit for headings, Plus Jakarta Sans for text.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Astralform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,129 @@
-# Temporary Holding Version
+# @astralform/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Astralform's shared, **theme-swappable** React component system — one set of ~35
+token-only components driven by a [DESIGN.md](./DESIGN.md) token contract.
+
+Every component reads only **semantic tokens** (`bg-accent`, `text-text-primary`,
+`rounded-card`, `type-card-title`). The brand — colors, fonts — lives entirely in a
+theme CSS file generated from a `DESIGN.md`. Swap the theme, re-skin the product; the
+component code never changes. The dashboard ships orange-on-black; AstralChat ships
+indigo-on-warm-dark — from the same package.
+
+```
+DESIGN.md  ──(values)──►  theme-*.css ─┐
+                                        ├─►  your app
+base.css   ──(structure)──────────────►─┘     same components, your brand
+@astralform/ui components (token-only) ─┘
+```
+
+## Install
+
+This package is published **privately to GitHub Packages** under the `astralform-ai`
+org. Point the `@astralform-ai` scope at the GitHub registry once per consuming repo
+(commit this `.npmrc`):
+
+```ini
+# .npmrc
+@astralform-ai:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+Then set `GITHUB_TOKEN` to a token with `read:packages` (local dev: a classic PAT;
+CI: the built-in `secrets.GITHUB_TOKEN`), and install:
+
+```bash
+npm install @astralform/ui
+```
+
+Peer deps you likely already have (React 19, Tailwind v4). Component-specific peers are
+optional and only needed if you use the component that imports them (`@tanstack/react-table`
+→ `DataTable`, `react-easy-crop` → `ImageCropModal`, `sonner` → toasts).
+
+## Wire it up (Tailwind v4)
+
+In your app's main CSS:
+
+```css
+/* Self-hosted brand fonts (no third-party CDN, no render-blocking round-trip) */
+@import "@astralform/ui/styles/fonts.css";
+@import "tailwindcss";
+
+/* brand-agnostic structure: radius, layout, utilities, keyframes */
+@import "@astralform/ui/styles/base.css";
+
+/* ONE brand theme — the default (dashboard/orange), or your own (below) */
+@import "@astralform/ui/styles/theme-default.css";
+
+/* REQUIRED: Tailwind v4 must scan the package so its utility classes are generated */
+@source "../node_modules/@astralform/ui/dist";
+```
+
+Then use components anywhere:
+
+```tsx
+import { Button, Card, Badge, Toggle } from "@astralform/ui";
+
+<Card>
+  <Button variant="primary">Deploy</Button>
+  <Badge variant="success">Ready</Badge>
+</Card>
+```
+
+## Theme your own product
+
+The brand is **just a token file**. To create a new skin (e.g. AstralChat's indigo):
+
+1. Copy [`themes/chat.DESIGN.md`](./themes/chat.DESIGN.md) into your app, edit the
+   `colors` / `typography` front-matter to taste.
+2. Generate a Tailwind v4 `@theme` block from it:
+   ```bash
+   npx @google/design.md export --format css-tailwind chat.DESIGN.md > src/styles/theme.css
+   ```
+3. Import `base.css` + **your** `theme.css` (instead of `theme-default.css`).
+
+That's the whole re-skin. No component is forked.
+
+> The shipped `theme-default.css` keeps a richer structure than a raw export (a `--_*`
+> source-var layer for runtime theming, toast colors, overlay). For a new brand you can
+> start from the raw export and layer those on if you need them.
+
+## The DESIGN.md contract
+
+[`DESIGN.md`](./DESIGN.md) is the source of truth for the dashboard brand: YAML
+front-matter tokens (machine-readable) + prose rationale (the *why* and the rules — accent
+is the single system tint, status colors stay semantic, flat-first depth, etc.). It is
+validated and kept honest by the [`@google/design.md`](https://github.com/google-labs-code/design.md)
+CLI.
+
+```bash
+npm run design:lint   # validate DESIGN.md (token refs, contrast, section order)
+npm run design:gen    # drift guard: assert DESIGN.md values == theme-default.css
+```
+
+`design:gen` exports the spec's colors and fails if the committed CSS has drifted from
+the spec — so the spec and the styles can never silently disagree.
+
+## Develop
+
+```bash
+npm install
+npm run build       # tsup → dist/ (ESM + .d.ts)
+npm run typecheck   # tsc --noEmit
+npm run dev         # tsup --watch
+```
+
+## Components
+
+Buttons & inputs: `Button` · `Input` · `Textarea` · `Select` · `Toggle`
+Containers: `Card` (+ `CardHeader/Title/Description/Content`) · `Modal` · `Alert` ·
+`InlineBanner` · `EmptyState` · `PageHeader` · `TabNav` · `Toolbar`
+Data: `DataTable` · `TableShell` · `StatCard` · `UsageCard` · `InventoryCard` ·
+`CompactResourceRow` · `ProgressBar` · `SegmentedProgressBar`
+Status & identity: `Badge` · `StatusBadge` · `Avatar` · `ProviderIcon` · `LoadingSpinner`
+Dialogs: `ConfirmDialog` · `TypeToConfirmModal` · `UnsavedChangesModal` · `PreviewModal` ·
+`ImageCropModal`
+Misc: `SpotlightButton` · `GlowingEffect` · `CookieConsent` · `DevTools` · `ResizeHandle`
+
+## License
+
+MIT

package/dist/components/Alert.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "success" | "warning" | "error" | "info";
+    title?: string;
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Alert.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+import { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon } from "@phosphor-icons/react";
+export const Alert = forwardRef(({ className, variant = "info", title, children, ...props }, ref) => {
+    const variants = {
+        success: {
+            container: "bg-success-surface/50 border-success-dim/50",
+            icon: "text-success",
+            title: "text-success-hover",
+            text: "text-success",
+            Icon: CheckCircleIcon,
+        },
+        warning: {
+            container: "bg-warning-surface/50 border-warning-dim/50",
+            icon: "text-warning",
+            title: "text-warning-hover",
+            text: "text-warning",
+            Icon: WarningIcon,
+        },
+        error: {
+            container: "bg-danger-surface/50 border-danger-dim/50",
+            icon: "text-danger",
+            title: "text-danger-hover",
+            text: "text-danger",
+            Icon: XCircleIcon,
+        },
+        info: {
+            container: "bg-info-surface/50 border-info-dim/50",
+            icon: "text-info",
+            title: "text-info-hover",
+            text: "text-info",
+            Icon: InfoIcon,
+        },
+    };
+    const { container, icon, title: titleClass, text, Icon, } = variants[variant];
+    return (_jsx("div", { ref: ref, className: cn("rounded-alert border p-4", container, className), ...props, children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "shrink-0", children: _jsx(Icon, { size: 20, className: icon, "aria-hidden": "true" }) }), _jsxs("div", { className: "ml-3", children: [title && (_jsx("h3", { className: cn("text-sm font-medium", titleClass), children: title })), _jsx("div", { className: cn("text-sm", text, title && "mt-2"), children: children })] })] }) }));
+});
+Alert.displayName = "Alert";
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAO5F,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,QAAQ,GAAG;QACf,OAAO,EAAE;YACP,SAAS,EAAE,6CAA6C;YACxD,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,eAAe;SACtB;QACD,OAAO,EAAE;YACP,SAAS,EAAE,6CAA6C;YACxD,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,WAAW;SAClB;QACD,KAAK,EAAE;YACL,SAAS,EAAE,2CAA2C;YACtD,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,WAAW;SAClB;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,uCAAuC;YAClD,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,iBAAiB;YACxB,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,QAAQ;SACf;KACF,CAAC;IAEF,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,EACJ,IAAI,GACL,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtB,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,EAAE,SAAS,CAAC,KAC3D,KAAK,YAET,eAAK,SAAS,EAAC,MAAM,aACnB,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,iBAAc,MAAM,GAAG,GAClD,EACN,eAAK,SAAS,EAAC,MAAM,aAClB,KAAK,IAAI,CACR,aAAI,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,UAAU,CAAC,YAAG,KAAK,GAAM,CACnE,EACD,cAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,IAAI,MAAM,CAAC,YACjD,QAAQ,GACL,IACF,IACF,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/AvatarEditor.d.ts

@@ -0,0 +1,13 @@
+import { type AvatarProps } from "./avatar";
+export { ImageCropModal } from "./ImageCropModal";
+export interface AvatarEditorProps extends AvatarProps {
+    /** Receives the cropped image blob when the user finishes cropping. */
+    onCropComplete?: (blob: Blob) => void;
+    cropTitle?: string;
+}
+/**
+ * Editable Avatar — display Avatar + hover-to-upload overlay + crop modal.
+ * Lives on the "@astralform/ui/avatar-editor" sub-path so display-only
+ * consumers of `Avatar` don't pull react-easy-crop + sonner.
+ */
+export declare function AvatarEditor({ onCropComplete, cropTitle, size, rounded, disabled, className, ...avatarProps }: AvatarEditorProps): import("react").JSX.Element;

package/dist/components/AvatarEditor.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { CameraIcon } from "@phosphor-icons/react";
+import { cn } from "../lib/utils";
+import { ImageCropModal } from "./ImageCropModal";
+import { Avatar, SIZE_CONFIG } from "./avatar";
+// Re-exported so the crop modal is reachable without the core barrel pulling
+// react-easy-crop. Editor-path consumers get both from one import.
+export { ImageCropModal } from "./ImageCropModal";
+const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/webp"];
+const MAX_FILE_SIZE = 256 * 1024; // 256 KB
+/**
+ * Editable Avatar — display Avatar + hover-to-upload overlay + crop modal.
+ * Lives on the "@astralform/ui/avatar-editor" sub-path so display-only
+ * consumers of `Avatar` don't pull react-easy-crop + sonner.
+ */
+export function AvatarEditor({ onCropComplete, cropTitle = "Crop Image", size = "md", rounded = "rounded-full", disabled, className, ...avatarProps }) {
+    const fileInputRef = useRef(null);
+    const [cropFile, setCropFile] = useState(null);
+    const editable = !!onCropComplete && !disabled;
+    const cropShape = rounded === "rounded-full" ? "round" : "rect";
+    const handleFileSelect = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        e.target.value = "";
+        if (!ALLOWED_TYPES.includes(file.type)) {
+            toast.error("Please select a PNG, JPEG, or WebP image");
+            return;
+        }
+        if (file.size > MAX_FILE_SIZE) {
+            toast.error("Image must be under 256 KB");
+            return;
+        }
+        setCropFile(file);
+    };
+    const handleCrop = (blob) => {
+        setCropFile(null);
+        onCropComplete?.(blob);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn("relative group shrink-0", SIZE_CONFIG[size].container, disabled && "opacity-50", className), children: [_jsx(Avatar, { size: size, rounded: rounded, disabled: disabled, ...avatarProps }), editable && (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center gap-2", "bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity", rounded), children: _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), className: "p-1.5 rounded-full hover:bg-white/20 transition-colors cursor-pointer", title: "Upload image", children: _jsx(CameraIcon, { size: 16, className: "text-white" }) }) })), editable && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/png,image/jpeg,image/webp", className: "hidden", onChange: handleFileSelect }))] }), editable && (_jsx(ImageCropModal, { file: cropFile, onCrop: handleCrop, onCancel: () => setCropFile(null), cropShape: cropShape, title: cropTitle }))] }));
+}
+//# sourceMappingURL=AvatarEditor.js.map

package/dist/components/AvatarEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarEditor.js","sourceRoot":"","sources":["../../src/components/AvatarEditor.tsx"],"names":[],"mappings":"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"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type BadgeCategoryType } from "./badge-config";
+declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "danger" | "accent" | "warning" | "default" | "success" | "info" | "outline" | null | undefined;
+    size?: "sm" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /** Semantic category — auto-resolves icon and variant color */
+    category?: BadgeCategoryType;
+    /** Manual icon — overrides category icon when both are set */
+    icon?: PhosphorIcon;
+}
+declare function Badge({ className, variant, size, category, icon: iconProp, children, ...props }: BadgeProps): React.JSX.Element;
+export { Badge };

package/dist/components/Badge.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { BADGE_CATEGORY_CONFIG } from "./badge-config";
+/* ------------------------------------------------------------------ */
+/*  Variant styles                                                     */
+/* ------------------------------------------------------------------ */
+const badgeVariants = cva("inline-flex items-center rounded-badge border font-semibold transition-colors", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-btn-primary-bg text-text-inverse",
+            secondary: "border-transparent bg-surface-tertiary text-text-secondary",
+            success: "bg-success-subtle/50 text-success border-success-dim",
+            warning: "bg-warning-subtle/50 text-warning border-warning-dim",
+            danger: "bg-danger-subtle/50 text-danger border-danger-dim",
+            info: "bg-info-subtle/50 text-info border-info-dim",
+            outline: "border-border-secondary text-text-secondary",
+            accent: "bg-accent-subtle/50 text-accent-hover border-accent-dim",
+        },
+        size: {
+            default: "px-2.5 py-0.5 text-xs",
+            sm: "px-1.5 py-0.5 text-[11px] gap-1",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Badge({ className, variant, size, category, icon: iconProp, children, ...props }) {
+    const cat = category ? BADGE_CATEGORY_CONFIG[category] : null;
+    const resolvedVariant = variant ?? cat?.variant ?? undefined;
+    const IconComp = iconProp ?? cat?.icon ?? null;
+    return (_jsxs("div", { className: cn(badgeVariants({ variant: resolvedVariant, size }), className), ...props, children: [IconComp && _jsx(IconComp, { size: size === "sm" ? 12 : 14 }), children] }));
+}
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAA0B,MAAM,gBAAgB,CAAC;AAE/E,wEAAwE;AACxE,yEAAyE;AACzE,wEAAwE;AAExE,MAAM,aAAa,GAAG,GAAG,CACvB,+EAA+E,EAC/E;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;YACjE,SAAS,EAAE,4DAA4D;YACvE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,sDAAsD;YAC/D,MAAM,EAAE,mDAAmD;YAC3D,IAAI,EAAE,6CAA6C;YACnD,OAAO,EAAE,6CAA6C;YACtD,MAAM,EAAE,yDAAyD;SAClE;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,uBAAuB;YAChC,EAAE,EAAE,iCAAiC;SACtC;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAgBF,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,MAAM,eAAe,GAAG,OAAO,IAAI,GAAG,EAAE,OAAO,IAAI,SAAS,CAAC;IAC7D,MAAM,QAAQ,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,IAAI,IAAI,CAAC;IAE/C,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,aAAa,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,EACjD,SAAS,CACV,KACG,KAAK,aAER,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,EACvD,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes } from "react";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "danger" | "ghost" | "gradient";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+export const Button = forwardRef(({ className, variant = "primary", size = "md", isLoading, disabled, children, ...props }, ref) => {
+    const baseStyles = "btn-press inline-flex items-center justify-center font-medium rounded-button transition-all duration-[var(--duration-hover)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface-base disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none";
+    const variants = {
+        primary: "bg-btn-primary-bg text-text-inverse hover:bg-btn-primary-hover hover:shadow-lg hover:shadow-white/10 focus:ring-text-primary",
+        secondary: "bg-surface-secondary text-text-primary border border-border-secondary hover:bg-surface-tertiary hover:border-border-focus hover:shadow-md focus:ring-text-muted",
+        danger: "bg-btn-danger-bg text-text-primary hover:bg-btn-danger-hover hover:shadow-lg hover:shadow-danger-muted/25 focus:ring-danger-muted",
+        ghost: "text-text-secondary hover:bg-surface-tertiary hover:text-text-primary focus:ring-text-muted",
+        gradient: "bg-btn-primary-bg text-text-inverse shadow-lg shadow-white/10 hover:bg-btn-primary-hover focus:ring-text-primary",
+    };
+    const sizes = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-sm",
+        lg: "px-6 py-3 text-base",
+    };
+    return (_jsxs("button", { ref: ref, className: cn(baseStyles, variants[variant], sizes[size], className), disabled: disabled || isLoading, ...props, children: [isLoading && (_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), children] }));
+});
+Button.displayName = "Button";
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GACd,yRAAyR,CAAC;IAE5R,MAAM,QAAQ,GAAG;QACf,OAAO,EACL,8HAA8H;QAChI,SAAS,EACP,iKAAiK;QACnK,MAAM,EACJ,mIAAmI;QACrI,KAAK,EACH,6FAA6F;QAC/F,QAAQ,EACN,kHAAkH;KACrH,CAAC;IAEF,MAAM,KAAK,GAAG;QACZ,EAAE,EAAE,qBAAqB;QACzB,EAAE,EAAE,mBAAmB;QACvB,EAAE,EAAE,qBAAqB;KAC1B,CAAC;IAEF,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACpE,QAAQ,EAAE,QAAQ,IAAI,SAAS,KAC3B,KAAK,aAER,SAAS,IAAI,CACZ,eACE,SAAS,EAAC,iCAAiC,EAC3C,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,aAEnB,iBACE,SAAS,EAAC,YAAY,EACtB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,GACf,EACF,eACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACnH,IACE,CACP,EACA,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/Card.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: "none" | "sm" | "md" | "lg";
+}
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+export const Card = forwardRef(({ className, padding = "md", children, ...props }, ref) => {
+    const paddings = {
+        none: "",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8",
+    };
+    return (_jsx("div", { ref: ref, className: cn("bg-surface-primary rounded-card shadow-[var(--shadow-card)] border-[0.75px] border-border-primary", paddings[padding], className), ...props, children: children }));
+});
+Card.displayName = "Card";
+export const CardHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5", className), ...props })));
+CardHeader.displayName = "CardHeader";
+export const CardTitle = forwardRef(({ className, children, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("type-card-title", className), ...props, children: children })));
+CardTitle.displayName = "CardTitle";
+export const CardDescription = forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-text-tertiary", className), ...props })));
+CardDescription.displayName = "CardDescription";
+export const CardContent = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("pt-0", className), ...props })));
+CardContent.displayName = "CardContent";
+//# sourceMappingURL=Card.js.map