my-you-eye 0.2.0 → 0.2.3

package/COMPONENTS.md

@@ -0,0 +1,111 @@
+# Components
+
+> Auto-generated from `*.showcase.tsx` by `scripts/gen-manifest.mjs`. Do not edit by hand.
+
+All components import from the package root:
+
+```tsx
+import { Button, Card } from "my-you-eye";
+import "my-you-eye/styles.css";
+```
+
+**53 components** across 9 groups.
+
+## canvas
+
+| Component | Variants | Demos |
+|---|---|---|
+| `Canvas` | — | Empty grid |
+| `Edge` | variant: bezier / stepped / straight<br>state: connected | Path variants, Edge states |
+| `Graph` | type: button | Pipeline editor (drag nodes, connect ports, delete selected) |
+| `GraphNode` | variant: muted / selected | Variants |
+| `Port` | state: connected / default / highlighted | States |
+
+## data
+
+| Component | Variants | Demos |
+|---|---|---|
+| `CellType` | type: array / audio / badge / boolean / bytes / currency / date-human / date-system / datetime-tz / duration / email / image / json / null / number / percentage / signed / status / text / tree / url | Data Types, Project X, Project X, Numeric types |
+| `DataTable` | variant: striped<br>density: compact | Alice, Bob, Charlie, Diana, Eve, Frank, Grace, Ivy, Leo, Olivia, Default, Striped, Scrolling + sticky header, Truncation |
+| `List` | variant: compact | Default & Compact, Striped, Scrolling |
+| `TreeView` | type: button<br>variant: condensed | Default vs Condensed, Depth-based expand, Controlled expand state, Leading icons (click a row, then use arrow keys), Messy nested payload (hover to trace depth guides) |
+
+## display
+
+| Component | Variants | Demos |
+|---|---|---|
+| `Avatar` | size: lg / md / sm | Sizes, Fallback variants, With image, With ring, With status dot |
+| `Badge` | variant: danger / neutral / primary / success / warning<br>style: soft | Variants (solid), Variants (soft) |
+| `Card` | variant: danger / default / elevated / ghost / outlined<br>size: sm | Variants, With footer actions |
+| `CodeBlock` | variant: elevated | Bare (no header, no language), Language-only (badge overlay, no header bar), With header + language, Elevated, Line numbers, No wrap (horizontal scroll) |
+| `EmptyState` | variant: secondary | Default, With icon and action |
+| `Image` | — | Fit modes, Border radius, Aspect ratio, Styles, With caption |
+| `Kbd` | — | Default, Combinations |
+| `Markdown` | — | Rendered markdown |
+| `ScrollArea` | — | Vertical scroll, Horizontal scroll |
+| `Separator` | orientation: vertical | Horizontal, Vertical |
+| `StatusDot` | variant: danger / info / neutral / success / warning<br>size: md / sm | Variants, Sizes, Pulsing |
+
+## feedback
+
+| Component | Variants | Demos |
+|---|---|---|
+| `Alert` | variant: danger / info / success / warning | Variants, With title, With icon |
+| `Progress` | variant: danger / default / success / warning | Variants, No label |
+| `Saved` | variant: danger / secondary | Trigger toasts |
+| `Skeleton` | shape: circle / rect / text | Shapes |
+| `Spinner` | size: lg / md / sm | Sizes |
+
+## inputs
+
+| Component | Variants | Demos |
+|---|---|---|
+| `Button` | variant: danger / ghost / primary / secondary<br>size: lg / md / sm | Variants, Sizes, Disabled & loading |
+| `Checkbox` | size: md / sm | Sizes, States |
+| `Combobox` | — | Basic, Disabled |
+| `FileDrop` | — | Default, Single image only |
+| `Input` | variant: filled<br>size: md / sm | Variants, Sizes, States |
+| `Label` | — | Default |
+| `MultiSelect` | — | Basic, Empty, Disabled |
+| `RadioGroup` | — | Default |
+| `Select` | size: md / sm | Sizes, States, No indicator |
+| `Slider` | — | Basic slider |
+| `Switch` | size: md / sm | Sizes, States |
+| `Textarea` | variant: filled | Variants, States |
+
+## navigation
+
+| Component | Variants | Demos |
+|---|---|---|
+| `Breadcrumbs` | — | Default, Custom separator |
+| `Pagination` | — | Default (10 pages), Few pages |
+| `Tabs` | variant: filing / pills / underline | Underline, Pills, Filing |
+
+## overlay
+
+| Component | Variants | Demos |
+|---|---|---|
+| `CommandPalette` | variant: secondary | Basic, With groups |
+| `Dialog` | size: lg / md / sm<br>variant: ghost | Sizes, Form example |
+| `Drawer` | side: left / right<br>size: md / sm<br>variant: secondary | Left & Right |
+| `DropdownMenu` | variant: secondary | Default |
+| `Popover` | variant: secondary<br>size: sm | Default |
+| `Tooltip` | side: bottom / left / right / top<br>variant: secondary | Directions |
+
+## patterns
+
+| Component | Variants | Demos |
+|---|---|---|
+| `ConfirmDialog` | variant: danger / secondary | Variants |
+| `FormField` | type: password | Default, With hint, Required with error |
+| `PageShell` | variant: secondary | Default, With actions |
+| `StatCard` | — | Default |
+| `TexturedSurface` | variant: elevated / ghost / primary / surface<br>size: sm | Tuner, Paper grain, Frosted glass, Brushed aluminium, Paper grain — full matrix, Frosted glass — full matrix, Brushed aluminium — full matrix, Theme-driven, Composed |
+| `Toolbar` | size: sm<br>variant: primary / secondary<br>style: soft | All slots filled, With leading label, Result count + removable filter chips, Narrow / responsive collapse |
+
+## typography
+
+| Component | Variants | Demos |
+|---|---|---|
+| `Typography & Tokens` | — | Font families, Text sizes, Colors, Radius & spacing |
+

package/README.md

@@ -1,109 +1,154 @@
-# Frontend-AI — UI Template Repository
+# my-you-eye
 
-A single source of truth for UI components, consumed by all frontend apps as a package.
-Built so that **AI agents (including cheaper LLMs) can safely reuse, extend, and add components
-without hand-rolling native HTML or drifting from the house style.**
+A themeable, AI-maintainable UI component library — primitives, rich data components, and a
+full **node-based canvas editor** — built so that agents (even cheap ones) can reuse and extend
+it without drifting from the house style.
 
-> **If you are an AI agent working in this repo, STOP and read [AGENTS.md](./AGENTS.md) first.
-> It is the binding ruleset. Nothing in this README overrides it.**
+<sub>Radix · Tailwind v4 · CVA · shadcn-style owned components · 50+ components · light/dark + swappable themes</sub>
 
-## What this repo is
-
-- A curated set of UI primitives (`src/ui/`) and composed patterns (`src/ui/patterns/`),
-  each with a small fixed set of approved design variants.
-- A **showcase app** (`src/showcase/`) that renders every component and every variant,
-  auto-discovered from `*.showcase.tsx` files — nothing is registered by hand.
-- A **validation pipeline** (`npm run validate`) that makes rule violations a red build
-  instead of something a human has to discover later.
-
-## What this repo is NOT
-
-- Not a general component library for the world. It is *our* house standard.
-- Not a place for app business logic. Components here are presentation + interaction only.
-- Not a parts bin of one-off styles. Every visual decision flows from tokens and variants.
-
-## Stack
+```tsx
+import { Button, Card, Table } from "my-you-eye";
+import "my-you-eye/styles.css";
 
-| Concern | Choice | Why |
-|---|---|---|
-| Build/dev | Vite + React 18 + TypeScript (strict) | Simple SPA, no SSR footguns, fast |
-| Styling | Tailwind CSS v4 (local build, no CDN) | Compiled at build time, zero runtime remote deps |
-| Behavior primitives | Radix UI (per-component packages) | Mature accessibility (focus, keyboard, ARIA) |
-| Variants | `class-variance-authority` (CVA) | Declarative, enforceable variant sets |
-| Class merging | `clsx` + `tailwind-merge` via `cn()` | Predictable `className` overrides |
-| Library build | `tsup` (runs on `prepare`) | Consumable via `npm install` from a git URL |
+<Button variant="primary">Save</Button>
+```
 
-Component implementations follow the **shadcn/ui pattern**: the code is copied into this repo
-and owned here. There is no upstream component dependency that can break or restyle us.
+---
 
-## Repository layout
+## Highlights
 
-```
-src/
-  index.ts                  # public API — the ONLY entry consuming apps import from
-  lib/
-    cn.ts                   # clsx + tailwind-merge helper
-  styles/
-    tokens.css              # ALL design tokens (colors, radius, spacing, typography)
-    globals.css             # tailwind entry + base styles
-  ui/                       # one folder per primitive component
-    button/
-      Button.tsx            # component + CVA variants
-      Button.showcase.tsx   # demo entries for the showcase app
-      index.ts              # re-exports
-    ...
-    patterns/               # composed components (built FROM primitives)
-      form-field/
-      ...
-  showcase/                 # showcase app shell (dev-only, not exported)
-    App.tsx                 # glob-discovers *.showcase.tsx, renders group tabs
-    types.ts                # ShowcaseEntry contract
-scripts/
-  check-showcase.mjs        # fails if any component folder lacks a showcase file
-AGENTS.md                   # binding rules for AI agents
-TODO.md                     # bootstrap plan + component backlog
-```
+- **50+ components** — inputs, overlays, feedback, navigation, and rich data (`Table`,
+  `TreeView`, `CellValue`, `DataList`, `CodeBlock`, `Markdown`). Full list:
+  **[COMPONENTS.md](./COMPONENTS.md)**.
+- **Canvas / data-orchestration editor** — `Canvas`, `GraphNode`, `Port`, `Edge`, plus an
+  `Orchestrator` pattern with node drag, grid snapping, port-to-port connections, pan/zoom,
+  selection, and delete.
+- **Themes without forks** — every color, radius, spacing, font, and border value is a CSS
+  token. A theme is a token-override block; `data-theme` + `.dark` swap the entire look. No
+  component is restyled per theme.
+- **Guardrails, not vibes** — `npm run validate` turns rule violations into a red build: no
+  styled native elements outside `src/ui/`, no hardcoded colors, every component has a showcase,
+  every theme defines the full token set.
 
-## Consuming this package from an app
+## Install
 
 ```bash
-npm install github:<your-username>/Frontend-AI
+npm install github:sadigaxund/my-you-eye
 ```
 
 ```tsx
-import { Button, Card, Dialog } from "my-you-eye";
+// once, at your app root
 import "my-you-eye/styles.css";
+// anywhere
+import { Dialog, TreeView } from "my-you-eye";
 ```
 
-To pick up changes made here in all apps: bump the git tag here, `npm update` in each app.
+To pick up changes: bump the tag here, then `npm update` in each app.
 
-## The three customization channels (in order of preference)
+## Customize — three channels, in order of preference
 
-1. **Theme tokens** — global restyle with zero code changes. Override CSS variables in the
-   consuming app's root stylesheet:
+1. **Theme tokens** — global restyle, zero code. Override the CSS variables at your root, or
+   set `data-theme="neon"` / `class="dark"` on `<html>`.
    ```css
    :root {
-     --ui-primary: oklch(0.6 0.2 25);
-     --ui-radius: 4px;
+     --color-primary: oklch(0.6 0.2 25);
+     --radius-ui: 4px;
    }
    ```
-2. **Variant props** — per-usage choice from the approved set:
+2. **Variant props** — per-use choice from the approved set (see [COMPONENTS.md](./COMPONENTS.md)):
    ```tsx
    <Button variant="danger" size="sm">Delete</Button>
    ```
-3. **`className`** — one-off *layout* tweaks only (width, margin). Never a redesign:
+3. **`className`** — one-off *layout* only (width, margin), never a redesign:
    ```tsx
    <Button className="w-full">Submit</Button>
    ```
 
-If a `className` tweak keeps recurring, it must become a variant in this repo (see AGENTS.md).
+If a `className` tweak keeps recurring, it should become a variant in this repo — see
+[AGENTS.md](./AGENTS.md).
+
+## Discovering components (humans and agents)
+
+`components.json` and [COMPONENTS.md](./COMPONENTS.md) are **auto-generated** from the showcase
+files on every commit and every library build, so they never drift. An agent working in a
+consuming app should read `components.json` and follow [SKILL.md](./SKILL.md) before building
+any UI.
+
+## CLI
+
+The package ships a tiny Node CLI (`my-you-eye`) for project setup:
+
+```
+my-you-eye init          Copy SKILL.md + components.json to skills/
+my-you-eye list          Print table of all components with groups and variants
+my-you-eye sync          Re-copy SKILL.md + components.json (overwrite)
+my-you-eye --help        Show usage
+```
+
+All file paths resolve from the package location, not the caller's cwd. The CLI has zero external dependencies.
+
+## The showcase
 
-## Development
+Every component and every variant renders in a live showcase with light/dark, font, and theme
+switches — the source of truth for how things actually look.
+
+```bash
+npm run dev        # http://localhost:5173
+```
+
+## What this is / is not
+
+- **Is** a curated house standard: primitives in `src/ui/`, compositions in `src/ui/patterns/`,
+  each with a small fixed set of approved variants.
+- **Is not** a general-purpose library for the world, a home for business logic or data
+  fetching, or a parts bin of one-off styles.
+
+## For contributors and agents
+
+> **If you are an AI agent working in this repo, read [AGENTS.md](./AGENTS.md) first.** It is
+> the binding ruleset; nothing here overrides it.
 
 ```bash
 npm install
-npm run dev        # showcase app at localhost:5173
-npm run validate   # typecheck + lint + showcase coverage + build — must be green
+npm run dev        # showcase
+npm run validate   # typecheck + lint + coverage + themes + build — the definition of done
+npm run audit      # non-blocking drift report
+npm run manifest   # regenerate components.json + COMPONENTS.md
+```
+
+| Concern | Choice | Why |
+|---|---|---|
+| Build/dev | Vite + React + TypeScript (strict) | Simple SPA, no SSR footguns |
+| Styling | Tailwind CSS v4 (local build, no CDN) | Compiled at build time, no remote deps |
+| Behavior | Radix UI (per-component packages) | Mature accessibility: focus, keyboard, ARIA |
+| Variants | `class-variance-authority` | Declarative, enforceable variant sets |
+| Class merging | `clsx` + `tailwind-merge` via `cn()` | Predictable `className` overrides |
+| Library build | `tsup` | Consumable via `npm install` from a git URL |
+
+Components follow the **shadcn/ui pattern**: code is copied in and owned here, so no upstream
+dependency can break or restyle us.
+
+### Layout
+
 ```
+src/
+  index.ts             # public API — the ONLY entry consuming apps import from
+  lib/cn.ts            # clsx + tailwind-merge helper
+  styles/
+    tokens.css         # ALL base design tokens
+    themes/*.css       # per-theme token overrides (dark, neon, contrast, …)
+    globals.css        # tailwind entry, global scrollbar, base styles
+  ui/<component>/      # Component.tsx + Component.showcase.tsx + index.ts
+  ui/patterns/         # compositions built FROM primitives (FormField, Orchestrator, …)
+  showcase/            # dev-only showcase app (glob-discovers *.showcase.tsx)
+scripts/
+  check-showcase.mjs   # every component folder has a showcase + export
+  check-themes.mjs     # every theme defines the full token set
+  gen-manifest.mjs     # regenerates components.json + COMPONENTS.md
+  audit.mjs            # non-blocking drift report
+AGENTS.md · SKILL.md · TODO.md · CHANGELOG.md
+```
+
+## License
 
-`npm run validate` is the definition of done for every change. See [AGENTS.md](./AGENTS.md).
+See [LICENSE](./LICENSE).

package/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: my-you-eye
+description: Use the my-you-eye UI component library. Invoke before building ANY UI — buttons, inputs, cards, dialogs, tables, tree views, canvas/graph/pipeline editors — in a project that depends on this package, so you reuse an existing component instead of hand-rolling native HTML. Read the manifest first.
+---
+
+# my-you-eye — UI component library
+
+This project ships a fixed set of themeable, accessible UI components. **Never hand-roll a
+styled `<button>`, `<input>`, `<select>`, `<table>`, `<a>`, or a bespoke card/dialog/menu.**
+There is almost certainly already a component for it.
+
+## Step 1 — find the component (always do this first)
+
+Read `components.json` (or the human-readable `COMPONENTS.md`) at the package root. It is
+auto-generated from the library's showcases and lists **every** component, its group, and its
+variant props. Pick the component whose name/group matches what you need.
+
+### inputs
+Button, Checkbox, Combobox, FileDrop, Input, Label, MultiSelect, RadioGroup, Select, Slider, Switch, Textarea
+
+### display
+Avatar, Badge, Card, CodeBlock, DataList, EmptyState, Image, Kbd, Markdown, ScrollArea, Separator, Skeleton, StatusDot, Typography
+
+### feedback
+Alert, Progress, Spinner, Toast
+
+### overlay
+CommandPalette, Dialog, Drawer, DropdownMenu, Popover, Tooltip
+
+### navigation
+Breadcrumbs, Pagination, Tabs
+
+### canvas
+Canvas, ConnectionLine, Edge, GraphNode, Orchestrator, Port
+
+### data
+CellValue, Table, TreeView
+
+### patterns
+ConfirmDialog, DataTable, FormField, PageShell, StatCard, Toolbar
+
+## Step 2 — use it
+
+```tsx
+import { Button, Card, Table } from "my-you-eye";
+import "my-you-eye/styles.css"; // once, at the app root
+
+<Button variant="primary" size="md">Save</Button>
+```
+
+Pick behavior with **variant props** from the manifest's allowed set. Use `className` only for
+one-off **layout** (width, margin) — never to restyle. If you keep re-adding the same
+`className`, the right fix is a new variant in the library, not a local override.
+
+## Step 3 — customize by theme, not by fork
+
+All color, radius, spacing, typography, border, and surface values come from CSS variables.
+To restyle globally, override the tokens at your app root or set `data-theme="<name>"` /
+`.dark` on `<html>` — do not copy component code or wrap components in style overrides.
+
+## If a component genuinely does not exist
+
+It belongs in the library, not in the consuming app. Add it upstream in `src/ui/` following
+that repo's `AGENTS.md`, then consume it here. Do not inline a new primitive locally.

package/bin/my-you-eye.mjs

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const ROOT = dirname(dirname(fileURLToPath(import.meta.url)));
+const SKILL = join(ROOT, "SKILL.md");
+const COMPONENTS_JSON = join(ROOT, "components.json");
+
+function usage(exitCode = 0) {
+  console.log(`my-you-eye v0.2.0 — UI Component Toolkit
+
+Usage:
+  my-you-eye init [--force]    Copy SKILL.md + components.json to skills/
+  my-you-eye list              List all components with groups and variants
+  my-you-eye sync              Re-copy SKILL.md + components.json (overwrite)
+
+Options:
+  --help                       Show this help
+  --force                      Overwrite existing files (init only)`);
+  process.exit(exitCode);
+}
+
+async function cmdInit(force) {
+  const sourceFiles = [
+    { src: SKILL, name: "SKILL.md" },
+    { src: COMPONENTS_JSON, name: "components.json" },
+  ];
+
+  const targetDir = join(process.cwd(), "skills");
+  if (!existsSync(targetDir)) {
+    mkdirSync(targetDir, { recursive: true });
+  }
+
+  for (const file of sourceFiles) {
+    const target = join(targetDir, file.name);
+    if (existsSync(target) && !force) {
+      console.log(`  skipped  ${file.name} (already exists, use --force to overwrite)`);
+      continue;
+    }
+    const content = readFileSync(file.src, "utf-8");
+    writeFileSync(target, content, "utf-8");
+    console.log(`  written  ${target}`);
+  }
+}
+
+function cmdList() {
+  const raw = readFileSync(COMPONENTS_JSON, "utf-8");
+  const { components } = JSON.parse(raw);
+
+  const groups = {};
+  for (const c of components) {
+    (groups[c.group] ??= []).push(c);
+  }
+
+  const groupOrder = ["inputs", "display", "feedback", "overlay", "navigation", "canvas", "data", "patterns"];
+
+  for (const group of groupOrder) {
+    if (!groups[group]) continue;
+    console.log(`\n  ${group}`);
+    console.log(`  ${"-".repeat(group.length)}`);
+    for (const c of groups[group]) {
+      const variants = Object.entries(c.variants)
+        .map(([k, v]) => `${k}: ${v.join(" | ")}`)
+        .join(", ");
+      console.log(`    ${c.name}${variants ? `  (${variants})` : ""}`);
+    }
+  }
+}
+
+function cmdSync() {
+  cmdInit(true);
+}
+
+const args = process.argv.slice(2);
+const force = args.includes("--force");
+const cmd = args.find((a) => a !== "--force");
+
+if (!cmd || cmd === "--help") {
+  usage(cmd === "--help" ? 0 : 1);
+}
+
+switch (cmd) {
+  case "init":
+    await cmdInit(force);
+    break;
+  case "list":
+    cmdList();
+    break;
+  case "sync":
+    cmdSync();
+    break;
+  default:
+    console.error(`Unknown command: ${cmd}`);
+    usage(1);
+}