my-you-eye 0.2.3 → 0.3.1

package/COMPONENTS.md

@@ -9,16 +9,16 @@ import { Button, Card } from "my-you-eye";
 import "my-you-eye/styles.css";
 ```
 
-**53 components** across 9 groups.
+**54 components** across 9 groups.
 
 ## canvas
 
 | Component | Variants | Demos |
 |---|---|---|
 | `Canvas` | — | Empty grid |
-| `Edge` | variant: bezier / stepped / straight<br>state: connected | Path variants, Edge states |
+| `ConnectionLine` | variant: bezier / stepped / straight<br>state: connected / highlighted / pending | Path variants, Edge states, Decorations (arrowheads + labels) |
 | `Graph` | type: button | Pipeline editor (drag nodes, connect ports, delete selected) |
-| `GraphNode` | variant: muted / selected | Variants |
+| `GraphNode` | variant: muted / selected / simple | Variants, Simple variant, Free-form body |
 | `Port` | state: connected / default / highlighted | States |
 
 ## data
@@ -26,8 +26,9 @@ import "my-you-eye/styles.css";
 | 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 |
+| `DataList` | variant: compact | Default & Compact, Striped, Scrolling |
+| `DataTable` | variant: striped<br>density: compact | Default, Striped, Scrolling + sticky header, Truncation |
+| `Table` | — |  |
 | `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
@@ -37,7 +38,7 @@ import "my-you-eye/styles.css";
 | `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) |
+| `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), Syntax highlighting (TS), Line highlights, Line highlights (implicit gutter), Multi-color highlights, Syntax highlighting (CSS / HTML / SQL / YAML / Python) |
 | `EmptyState` | variant: secondary | Default, With icon and action |
 | `Image` | — | Fit modes, Border radius, Aspect ratio, Styles, With caption |
 | `Kbd` | — | Default, Combinations |
@@ -52,9 +53,9 @@ import "my-you-eye/styles.css";
 |---|---|---|
 | `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 |
+| `Toast` | variant: danger / secondary | Trigger toasts |
 
 ## inputs
 

package/SKILL.md

@@ -11,18 +11,22 @@ 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.
+Read `COMPONENTS.md` (human-readable) or `components.json` (machine-readable) at the package
+root. Both are auto-generated from the library's showcases and list **every** component, its
+group, and its variant props. Pick the component whose name/group matches what you need.
+
+You can also run `npx my-you-eye list` for a quick terminal overview.
+
+## Component catalog
 
 ### 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
+Avatar, Badge, Card, CodeBlock, EmptyState, Image, Kbd, Markdown, ScrollArea, Separator, StatusDot
 
 ### feedback
-Alert, Progress, Spinner, Toast
+Alert, Progress, Skeleton, Spinner, Toast
 
 ### overlay
 CommandPalette, Dialog, Drawer, DropdownMenu, Popover, Tooltip
@@ -31,13 +35,16 @@ CommandPalette, Dialog, Drawer, DropdownMenu, Popover, Tooltip
 Breadcrumbs, Pagination, Tabs
 
 ### canvas
-Canvas, ConnectionLine, Edge, GraphNode, Orchestrator, Port
+Canvas, ConnectionLine, Graph, GraphNode, Port
 
 ### data
-CellValue, Table, TreeView
+CellType, DataList, DataTable, Table, TreeView
 
 ### patterns
-ConfirmDialog, DataTable, FormField, PageShell, StatCard, Toolbar
+ConfirmDialog, FormField, PageShell, StatCard, TexturedSurface, Toolbar
+
+### typography
+Typography
 
 ## Step 2 — use it
 
@@ -48,16 +55,58 @@ import "my-you-eye/styles.css"; // once, at the app root
 <Button variant="primary" size="md">Save</Button>
 ```
 
+**Setup requirements:**
+- Your project must use Tailwind CSS v4 (the library's CSS imports `@import "tailwindcss"`).
+- Wrap your app root in `<TooltipProvider>` if you use Tooltip.
+- Render `<Toaster />` somewhere in your app if you use toasts.
+
 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.
 
+## Multi-part components
+
+Some components export sub-parts. Import them by name:
+
+**Dialog:** `Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter`
+**Drawer:** `Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter`
+**DropdownMenu:** `DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel`
+**Popover:** `Popover, PopoverTrigger, PopoverContent, PopoverClose`
+**Tooltip:** `TooltipProvider, Tooltip, TooltipContent`
+**Select:** `Select, SelectTrigger, SelectContent, SelectItem, SelectValue`
+**Tabs:** `Tabs, TabsList, TabsTrigger, TabsContent`
+**Card:** `Card, CardHeader, CardTitle, CardContent, CardFooter`
+**Table:** `Table, TableHeader, TableBody, TableRow, TableHead, TableCell`
+**RadioGroup:** `RadioGroup, RadioGroupItem`
+**Toast:** `Toaster, useToast` (hook — `const { toast } = useToast()`)
+
 ## 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.
 
+Available themes: `default`, `dark`, `neon`, `contrast`, `glass`, `comic`, `brutal`, `stark`, `frosted`, `metallic`.
+
+```tsx
+// Switch theme
+document.documentElement.dataset.theme = "glass";
+// Toggle dark mode
+document.documentElement.classList.toggle("dark");
+```
+
+## CLI tool
+
+```
+npx my-you-eye init [--force]   Copy SKILL.md + components.json to skills/
+npx my-you-eye list             List all components with groups and variants
+npx my-you-eye sync             Re-copy SKILL.md + components.json (overwrite)
+npx my-you-eye --help           Show usage
+```
+
+`init` places `SKILL.md` and `components.json` in a local `skills/` directory so your AI
+agent can discover them automatically.
+
 ## If a component genuinely does not exist
 
 It belongs in the library, not in the consuming app. Add it upstream in `src/ui/` following

package/bin/my-you-eye.mjs

@@ -54,14 +54,14 @@ function cmdList() {
     (groups[c.group] ??= []).push(c);
   }
 
-  const groupOrder = ["inputs", "display", "feedback", "overlay", "navigation", "canvas", "data", "patterns"];
+  const groupOrder = ["inputs", "display", "feedback", "overlay", "navigation", "canvas", "data", "patterns", "typography"];
 
   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)
+      const variants = Object.entries(c.props)
         .map(([k, v]) => `${k}: ${v.join(" | ")}`)
         .join(", ");
       console.log(`    ${c.name}${variants ? `  (${variants})` : ""}`);

package/components.json

@@ -1,7 +1,7 @@
 {
   "package": "my-you-eye",
   "generated": "auto — do not edit by hand; run `npm run manifest`",
-  "count": 53,
+  "count": 54,
   "components": [
     {
       "name": "Canvas",
@@ -13,7 +13,7 @@
       ]
     },
     {
-      "name": "Edge",
+      "name": "ConnectionLine",
       "group": "canvas",
       "folder": "ui/connection-line",
       "props": {
@@ -23,12 +23,15 @@
           "straight"
         ],
         "state": [
-          "connected"
+          "connected",
+          "highlighted",
+          "pending"
         ]
       },
       "demos": [
         "Path variants",
-        "Edge states"
+        "Edge states",
+        "Decorations (arrowheads + labels)"
       ]
     },
     {
@@ -51,11 +54,14 @@
       "props": {
         "variant": [
           "muted",
-          "selected"
+          "selected",
+          "simple"
         ]
       },
       "demos": [
-        "Variants"
+        "Variants",
+        "Simple variant",
+        "Free-form body"
       ]
     },
     {
@@ -110,49 +116,46 @@
       ]
     },
     {
-      "name": "DataTable",
+      "name": "DataList",
       "group": "data",
-      "folder": "ui/patterns/data-table",
+      "folder": "ui/data-list",
       "props": {
         "variant": [
-          "striped"
-        ],
-        "density": [
           "compact"
         ]
       },
       "demos": [
-        "Alice",
-        "Bob",
-        "Charlie",
-        "Diana",
-        "Eve",
-        "Frank",
-        "Grace",
-        "Ivy",
-        "Leo",
-        "Olivia",
-        "Default",
+        "Default & Compact",
         "Striped",
-        "Scrolling + sticky header",
-        "Truncation"
+        "Scrolling"
       ]
     },
     {
-      "name": "List",
+      "name": "DataTable",
       "group": "data",
-      "folder": "ui/data-list",
+      "folder": "ui/patterns/data-table",
       "props": {
         "variant": [
+          "striped"
+        ],
+        "density": [
           "compact"
         ]
       },
       "demos": [
-        "Default & Compact",
+        "Default",
         "Striped",
-        "Scrolling"
+        "Scrolling + sticky header",
+        "Truncation"
       ]
     },
+    {
+      "name": "Table",
+      "group": "data",
+      "folder": "ui/table",
+      "props": {},
+      "demos": []
+    },
     {
       "name": "TreeView",
       "group": "data",
@@ -249,7 +252,12 @@
         "With header + language",
         "Elevated",
         "Line numbers",
-        "No wrap (horizontal scroll)"
+        "No wrap (horizontal scroll)",
+        "Syntax highlighting (TS)",
+        "Line highlights",
+        "Line highlights (implicit gutter)",
+        "Multi-color highlights",
+        "Syntax highlighting (CSS / HTML / SQL / YAML / Python)"
       ]
     },
     {
@@ -380,20 +388,6 @@
         "No label"
       ]
     },
-    {
-      "name": "Saved",
-      "group": "feedback",
-      "folder": "ui/toast",
-      "props": {
-        "variant": [
-          "danger",
-          "secondary"
-        ]
-      },
-      "demos": [
-        "Trigger toasts"
-      ]
-    },
     {
       "name": "Skeleton",
       "group": "feedback",
@@ -424,6 +418,20 @@
         "Sizes"
       ]
     },
+    {
+      "name": "Toast",
+      "group": "feedback",
+      "folder": "ui/toast",
+      "props": {
+        "variant": [
+          "danger",
+          "secondary"
+        ]
+      },
+      "demos": [
+        "Trigger toasts"
+      ]
+    },
     {
       "name": "Button",
       "group": "inputs",

package/dist/index.d.ts

@@ -373,8 +373,14 @@ interface CellTypeProps {
     replacements?: UrlReplacement[];
     dateFormat?: Intl.DateTimeFormatOptions;
     compact?: boolean;
+    /** Fraction digits (0-20). Controls minimumFractionDigits and maximumFractionDigits. */
+    fractionDigits?: number;
+    /** ISO 4217 currency code for "currency" type (default "USD"). */
+    currency?: string;
+    /** Force a byte unit (e.g. "GB"). Overrides auto-scaling for "bytes" type. */
+    displayUnit?: string;
 }
-declare function CellType({ type, value, badgeVariant, badgeStyle, statusVariant, statusPulse, replacements, dateFormat, compact, }: CellTypeProps): react.JSX.Element;
+declare function CellType({ type, value, badgeVariant, badgeStyle, statusVariant, statusPulse, replacements, dateFormat, compact, fractionDigits, currency, displayUnit, }: CellTypeProps): react.JSX.Element;
 
 interface CanvasProps extends HTMLAttributes<HTMLDivElement> {
     gridSize?: number;
@@ -398,7 +404,7 @@ interface CanvasProps extends HTMLAttributes<HTMLDivElement> {
 declare const Canvas: react.ForwardRefExoticComponent<CanvasProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const graphNodeVariants: (props?: ({
-    variant?: "default" | "selected" | "muted" | null | undefined;
+    variant?: "default" | "selected" | "muted" | "simple" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PortDef {
     side: "left" | "right";
@@ -466,12 +472,24 @@ declare function TreeView({ data, variant, indent, defaultExpandedDepth, expande
 declare const codeBlockVariants: (props?: ({
     variant?: "default" | "elevated" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CodeBlockHighlightGroup {
+    lines: number[];
+    color?: "primary" | "warning" | "success" | "danger";
+}
 interface CodeBlockProps extends HTMLAttributes<HTMLPreElement>, VariantProps<typeof codeBlockVariants> {
     code: string;
     language?: string;
     header?: string;
     wrap?: boolean;
     showLineNumbers?: boolean;
+    /** Enable syntax highlighting for supported languages (js, ts, tsx, json, bash). */
+    highlight?: boolean;
+    /** 1-indexed line numbers to highlight. Implicitly enables line numbers. */
+    highlightLines?: number[];
+    /** Color for highlightLines (default "primary"). */
+    highlightColor?: CodeBlockHighlightGroup["color"];
+    /** Multi-color highlight groups. When provided, takes precedence over highlightLines. */
+    highlightGroups?: CodeBlockHighlightGroup[];
 }
 declare const CodeBlock: react.ForwardRefExoticComponent<CodeBlockProps & react.RefAttributes<HTMLPreElement>>;
 
@@ -488,7 +506,7 @@ interface ComboboxProps {
     className?: string;
     disabled?: boolean;
 }
-declare function Combobox({ options, value, onChange, placeholder, emptyText, className, disabled, }: ComboboxProps): react.JSX.Element;
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface MultiSelectOption {
     value: string;
@@ -503,7 +521,7 @@ interface MultiSelectProps {
     className?: string;
     disabled?: boolean;
 }
-declare function MultiSelect({ options, value, onChange, placeholder, emptyText, className, disabled, }: MultiSelectProps): react.JSX.Element;
+declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface CommandAction {
     id: string;
@@ -524,7 +542,7 @@ interface CommandPaletteProps {
         actionIds: string[];
     }[];
 }
-declare function CommandPalette({ open, onOpenChange, actions, onSelect, placeholder, emptyText, groups, }: CommandPaletteProps): react.JSX.Element;
+declare const CommandPalette: react.ForwardRefExoticComponent<CommandPaletteProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const drawerContentVariants: (props?: ({
     side?: "left" | "right" | null | undefined;
@@ -616,9 +634,11 @@ interface ConnectionLineProps extends VariantProps<typeof lineVariants> {
         x: number;
         y: number;
     };
+    arrowhead?: boolean;
+    label?: string;
     className?: string;
 }
-declare function ConnectionLine({ className, variant, state, from, to, }: ConnectionLineProps): react.JSX.Element;
+declare const ConnectionLine: react.ForwardRefExoticComponent<ConnectionLineProps & react.RefAttributes<SVGSVGElement>>;
 
 interface FileDropProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop"> {
     onDrop?: (files: File[]) => void;