my-you-eye 0.3.0 → 0.3.1

package/COMPONENTS.md

@@ -16,9 +16,9 @@ import "my-you-eye/styles.css";
 | Component | Variants | Demos |
 |---|---|---|
 | `Canvas` | — | Empty grid |
-| `ConnectionLine` | 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
@@ -38,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), Syntax highlighting (TS), Syntax highlighting (CSS / HTML / SQL / YAML / Python) |
+| `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 |

package/components.json

@@ -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"
       ]
     },
     {
@@ -248,6 +254,9 @@
         "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)"
       ]
     },

package/dist/index.d.ts

@@ -404,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";
@@ -472,6 +472,10 @@ 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;
@@ -480,6 +484,12 @@ interface CodeBlockProps extends HTMLAttributes<HTMLPreElement>, VariantProps<ty
     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>>;
 
@@ -624,6 +634,8 @@ interface ConnectionLineProps extends VariantProps<typeof lineVariants> {
         x: number;
         y: number;
     };
+    arrowhead?: boolean;
+    label?: string;
     className?: string;
 }
 declare const ConnectionLine: react.ForwardRefExoticComponent<ConnectionLineProps & react.RefAttributes<SVGSVGElement>>;

package/dist/index.js

@@ -2355,7 +2355,32 @@ function tokenize(code, language) {
   if (!lang || !TOKENIZERS[lang]) return null;
   return TOKENIZERS[lang](code);
 }
-function renderHighlighted(tokens) {
+function splitTokensByLine(tokens) {
+  const result = [];
+  let current = [];
+  for (const t of tokens) {
+    if (t.text === "\n") {
+      result.push(current);
+      current = [];
+      continue;
+    }
+    if (t.text.includes("\n")) {
+      const parts = t.text.split("\n");
+      for (let i = 0; i < parts.length; i++) {
+        if (i > 0) {
+          result.push(current);
+          current = [];
+        }
+        if (parts[i]) current.push({ text: parts[i], className: t.className });
+      }
+    } else {
+      current.push(t);
+    }
+  }
+  if (current.length > 0) result.push(current);
+  return result;
+}
+function renderHighlightedLine(tokens) {
   return /* @__PURE__ */ jsx45(Fragment, { children: tokens.map((t, i) => /* @__PURE__ */ jsx45("span", { className: t.className === "whitespace" ? void 0 : `hl-${t.className}`, children: t.text }, i)) });
 }
 
@@ -2406,7 +2431,7 @@ function CopyButton({ copied, onCopy }) {
   );
 }
 var CodeBlock = forwardRef42(
-  ({ className, variant, code, language, header, wrap = true, showLineNumbers = false, highlight = false, ...props }, ref) => {
+  ({ className, variant, code, language, header, wrap = true, showLineNumbers = false, highlight = false, highlightLines, highlightColor = "primary", highlightGroups, ...props }, ref) => {
     const [copied, setCopied] = useState2(false);
     const copy = useCallback3(() => {
       navigator.clipboard.writeText(code).then(() => {
@@ -2416,14 +2441,34 @@ var CodeBlock = forwardRef42(
     }, [code]);
     const lines = useMemo(() => code.split("\n"), [code]);
     const hasHeader = Boolean(header || language);
+    const showGutter = showLineNumbers || highlightLines != null && highlightLines.length > 0 || highlightGroups != null && highlightGroups.length > 0;
     const highlighted = useMemo(() => {
       if (!highlight) return null;
       return tokenize(code, language);
     }, [code, language, highlight]);
-    const renderCode = () => {
-      if (highlighted) return renderHighlighted(highlighted);
-      return code;
+    const HIGHLIGHT_BG = {
+      primary: "bg-primary/10",
+      warning: "bg-warning/15",
+      success: "bg-success/10",
+      danger: "bg-danger/10"
     };
+    const lineColor = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      if (highlightGroups) {
+        for (const g of highlightGroups) {
+          const cls = HIGHLIGHT_BG[g.color ?? "primary"] ?? HIGHLIGHT_BG.primary;
+          for (const ln of g.lines) map.set(ln, cls);
+        }
+      } else if (highlightLines) {
+        const cls = HIGHLIGHT_BG[highlightColor ?? "primary"] ?? HIGHLIGHT_BG.primary;
+        for (const ln of highlightLines) map.set(ln, cls);
+      }
+      return map;
+    }, [highlightLines, highlightColor, highlightGroups]);
+    const perLineTokens = useMemo(() => {
+      if (!highlighted) return null;
+      return splitTokensByLine(highlighted);
+    }, [highlighted]);
     return /* @__PURE__ */ jsxs19("div", { className: cn(codeBlockVariants({ variant }), className), children: [
       hasHeader && /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-2 h-9 pl-panel pr-1.5 border-b border-border", children: [
         /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -2437,25 +2482,36 @@ var CodeBlock = forwardRef42(
           language && /* @__PURE__ */ jsx46("span", { className: "rounded-ui-sm bg-code-bg/80 px-1.5 py-0.5 font-mono text-xs uppercase tracking-wide text-code-muted border border-border/50 pointer-events-none", children: language }),
           /* @__PURE__ */ jsx46(CopyButton, { copied, onCopy: copy })
         ] }) }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 min-h-0", children: [
-          showLineNumbers && /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 min-h-0 overflow-x-auto", children: [
+          showGutter && /* @__PURE__ */ jsx46(
             "div",
             {
               "aria-hidden": true,
-              className: "select-none shrink-0 py-panel pl-compact-x pr-compact-x text-right font-mono text-xs leading-relaxed text-code-muted border-r border-border",
-              children: lines.map((_, i) => /* @__PURE__ */ jsx46("div", { children: i + 1 }, i))
+              className: "select-none shrink-0 py-panel text-right font-mono text-xs leading-relaxed text-code-muted border-r border-border",
+              children: lines.map((_, i) => /* @__PURE__ */ jsx46("div", { className: cn("pl-compact-x pr-compact-x", lineColor.get(i + 1)), children: i + 1 }, i))
             }
           ),
-          /* @__PURE__ */ jsx46(
+          perLineTokens ? /* @__PURE__ */ jsx46(
             "pre",
             {
               ref,
               className: cn(
-                "flex-1 min-w-0 p-panel font-mono text-xs leading-relaxed overflow-x-auto text-code-fg",
+                "flex-1 min-w-0 py-panel font-mono text-xs leading-relaxed text-code-fg",
                 wrap && "whitespace-pre-wrap break-words"
               ),
               ...props,
-              children: /* @__PURE__ */ jsx46("code", { children: renderCode() })
+              children: /* @__PURE__ */ jsx46("code", { children: perLineTokens.map((lineTokens, i) => /* @__PURE__ */ jsx46("div", { className: cn("px-panel", lineColor.get(i + 1)), children: lineTokens.length > 0 ? renderHighlightedLine(lineTokens) : " " }, i)) })
+            }
+          ) : /* @__PURE__ */ jsx46(
+            "pre",
+            {
+              ref,
+              className: cn(
+                "flex-1 min-w-0 py-panel font-mono text-xs leading-relaxed text-code-fg",
+                wrap && "whitespace-pre-wrap break-words"
+              ),
+              ...props,
+              children: /* @__PURE__ */ jsx46("code", { children: lines.map((line, i) => /* @__PURE__ */ jsx46("div", { className: cn("px-panel", lineColor.get(i + 1)), children: line || " " }, i)) })
             }
           )
         ] })
@@ -3320,7 +3376,7 @@ import { cva as cva28 } from "class-variance-authority";
 // src/ui/connection-line/ConnectionLine.tsx
 import { forwardRef as forwardRef46, useMemo as useMemo3 } from "react";
 import { cva as cva27 } from "class-variance-authority";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
 var lineVariants = cva27("fill-none", {
   variants: {
     variant: {
@@ -3355,10 +3411,31 @@ function generatePath(from, to, variant) {
     }
   }
 }
+function getArrowAngle(from, to, variant) {
+  switch (variant) {
+    case "stepped": {
+      const midX = (from.x + to.x) / 2;
+      return to.x >= midX ? 0 : 180;
+    }
+    case "straight":
+      return Math.atan2(to.y - from.y, to.x - from.x) * (180 / Math.PI);
+    default:
+      return 0;
+  }
+}
+var ARROWHEAD_COLOR = {
+  connected: "text-primary",
+  highlighted: "text-primary",
+  default: "text-muted",
+  pending: "text-muted"
+};
 var ConnectionLine = forwardRef46(
-  function ConnectionLine2({ className, variant = "bezier", state = "connected", from, to }, ref) {
+  function ConnectionLine2({ className, variant = "bezier", state = "connected", from, to, arrowhead, label }, ref) {
     const d = useMemo3(() => generatePath(from, to, variant ?? "bezier"), [from, to, variant]);
-    return /* @__PURE__ */ jsx53(
+    const arrowAngle = useMemo3(() => getArrowAngle(from, to, variant ?? "bezier"), [from, to, variant]);
+    const midX = (from.x + to.x) / 2;
+    const midY = (from.y + to.y) / 2;
+    return /* @__PURE__ */ jsxs24(
       "svg",
       {
         ref,
@@ -3367,7 +3444,36 @@ var ConnectionLine = forwardRef46(
           "absolute inset-0 w-full h-full pointer-events-none overflow-visible",
           className
         ),
-        children: /* @__PURE__ */ jsx53("path", { d })
+        children: [
+          /* @__PURE__ */ jsx53("path", { d }),
+          arrowhead && /* @__PURE__ */ jsx53(
+            "polygon",
+            {
+              points: "0,-4 8,0 0,4",
+              fill: "currentColor",
+              className: ARROWHEAD_COLOR[state ?? "connected"],
+              transform: `translate(${to.x},${to.y}) rotate(${arrowAngle})`
+            }
+          ),
+          label && /* @__PURE__ */ jsx53(
+            "foreignObject",
+            {
+              x: midX - label.length * 3.5 - 6,
+              y: midY - 10,
+              width: label.length * 7 + 12,
+              height: 20,
+              className: "overflow-visible pointer-events-none",
+              children: /* @__PURE__ */ jsx53(
+                "span",
+                {
+                  className: "inline-flex items-center rounded-sm px-1.5 py-0.5 text-xs text-fg font-mono bg-canvas-surface border border-border/60 shadow-sm whitespace-nowrap leading-none",
+                  style: { backdropFilter: "blur(2px)" },
+                  children: label
+                }
+              )
+            }
+          )
+        ]
       }
     );
   }
@@ -3375,7 +3481,7 @@ var ConnectionLine = forwardRef46(
 ConnectionLine.displayName = "ConnectionLine";
 
 // src/ui/canvas/Edge.tsx
-import { jsx as jsx54, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs25 } from "react/jsx-runtime";
 var edgeVariants = cva28("fill-none", {
   variants: {
     state: {
@@ -3392,7 +3498,7 @@ var edgeVariants = cva28("fill-none", {
 var HIT_STROKE = 12;
 function Edge({ from, to, state, className, hitStrokeWidth = HIT_STROKE, onClick, onContextMenu, ...props }) {
   const d = useMemo4(() => generatePath(from, to, "bezier"), [from, to]);
-  return /* @__PURE__ */ jsxs24("g", { onMouseDown: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxs25("g", { onMouseDown: (e) => e.stopPropagation(), children: [
     onClick || onContextMenu ? /* @__PURE__ */ jsx54(
       "path",
       {
@@ -3416,7 +3522,7 @@ import { cva as cva30 } from "class-variance-authority";
 // src/ui/port/Port.tsx
 import { forwardRef as forwardRef47 } from "react";
 import { cva as cva29 } from "class-variance-authority";
-import { jsx as jsx55, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
 var portVariants = cva29(
   "size-3 rounded-full border-2 bg-bg transition-colors",
   {
@@ -3438,7 +3544,7 @@ var portVariants = cva29(
   }
 );
 var Port = forwardRef47(
-  ({ className, side, state, label, ...props }, ref) => /* @__PURE__ */ jsxs25("div", { ref, className: cn("relative flex items-center gap-2", side === "in" ? "flex-row" : "flex-row-reverse"), children: [
+  ({ className, side, state, label, ...props }, ref) => /* @__PURE__ */ jsxs26("div", { ref, className: cn("relative flex items-center gap-2", side === "in" ? "flex-row" : "flex-row-reverse"), children: [
     /* @__PURE__ */ jsx55("div", { className: cn(portVariants({ side, state }), className), ...props }),
     label && /* @__PURE__ */ jsx55("span", { className: "text-xs text-muted", children: label })
   ] })
@@ -3446,7 +3552,7 @@ var Port = forwardRef47(
 Port.displayName = "Port";
 
 // src/ui/graph-node/GraphNode.tsx
-import { jsx as jsx56, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 var ROW_PORT_Y_OFFSET = HEADER * GRID;
 var graphNodeVariants = cva30(
   // `bg-canvas-surface` (never `bg-surface`): nodes render an opaque,
@@ -3460,7 +3566,8 @@ var graphNodeVariants = cva30(
       variant: {
         default: "border-border",
         selected: "border-primary ring-2 ring-primary/20",
-        muted: "border-border opacity-dim"
+        muted: "border-border opacity-dim",
+        simple: "border-border"
       }
     },
     defaultVariants: {
@@ -3470,9 +3577,10 @@ var graphNodeVariants = cva30(
 );
 var GraphNode = forwardRef48(
   ({ className, variant, x, y, header, accent, ports, footer, rows, children, style, ...props }, ref) => {
+    const isSimple = variant === "simple";
     const hasRows = rows && rows.length > 0;
-    const height = hasRows ? nodeHeightPx(rows.length, !!footer) : void 0;
-    return /* @__PURE__ */ jsxs26(
+    const height = hasRows ? nodeHeightPx(rows.length, !!footer && !isSimple) : void 0;
+    return /* @__PURE__ */ jsxs27(
       "div",
       {
         ref,
@@ -3480,16 +3588,16 @@ var GraphNode = forwardRef48(
         style: { left: x, top: y, height, ...style },
         ...props,
         children: [
-          header && /* @__PURE__ */ jsx56("div", { className: cn("flex flex-col shrink-0", accent && "border-t-2 border-primary"), style: { height: HEADER * GRID }, children: /* @__PURE__ */ jsx56("div", { className: "flex items-center px-3 border-b border-border flex-1 min-h-0", children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-inline flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs26("div", { className: "flex gap-0.5", children: [
+          header && /* @__PURE__ */ jsx56("div", { className: cn("flex flex-col shrink-0", accent && !isSimple && "border-t-2 border-primary"), style: { height: HEADER * GRID }, children: /* @__PURE__ */ jsx56("div", { className: "flex items-center px-3 border-b border-border flex-1 min-h-0", children: /* @__PURE__ */ jsxs27("div", { className: cn("flex items-center gap-inline flex-1 min-w-0", isSimple && "justify-center"), children: [
+            !isSimple && /* @__PURE__ */ jsxs27("div", { className: "flex gap-0.5", children: [
               /* @__PURE__ */ jsx56("span", { className: "size-1.5 rounded-full bg-danger" }),
               /* @__PURE__ */ jsx56("span", { className: "size-1.5 rounded-full bg-warning" }),
               /* @__PURE__ */ jsx56("span", { className: "size-1.5 rounded-full bg-success" })
             ] }),
             /* @__PURE__ */ jsx56("span", { className: "text-xs font-semibold truncate", children: header })
           ] }) }) }),
-          hasRows ? /* @__PURE__ */ jsxs26("div", { className: "flex-1 overflow-hidden relative", children: [
-            rows.map((row, i) => /* @__PURE__ */ jsxs26(
+          hasRows ? /* @__PURE__ */ jsxs27("div", { className: "flex-1 overflow-hidden relative", children: [
+            rows.map((row, i) => /* @__PURE__ */ jsxs27(
               "div",
               {
                 className: "grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 px-3 text-xs items-center border-b border-border/50 last:border-b-0 hover:bg-muted/10 transition-colors",
@@ -3501,7 +3609,7 @@ var GraphNode = forwardRef48(
               },
               i
             )),
-            /* @__PURE__ */ jsx56("div", { className: "absolute inset-0 pointer-events-none", children: rows.map((row, i) => /* @__PURE__ */ jsxs26("div", { children: [
+            !isSimple && /* @__PURE__ */ jsx56("div", { className: "absolute inset-0 pointer-events-none", children: rows.map((row, i) => /* @__PURE__ */ jsxs27("div", { children: [
               row.portLeft && /* @__PURE__ */ jsx56(
                 "div",
                 {
@@ -3520,14 +3628,14 @@ var GraphNode = forwardRef48(
               )
             ] }, `ports-${i}`)) })
           ] }) : children && /* @__PURE__ */ jsx56("div", { className: "px-3 py-2 text-xs flex-1", children }),
-          ports && ports.length > 0 && !hasRows && /* @__PURE__ */ jsx56("div", { className: "absolute inset-0 pointer-events-none", children: ports.map((p, i) => {
+          ports && ports.length > 0 && !hasRows && !isSimple && /* @__PURE__ */ jsx56("div", { className: "absolute inset-0 pointer-events-none", children: ports.map((p, i) => {
             const leftPorts = ports.filter((x2) => x2.side === "left");
             const rightPorts = ports.filter((x2) => x2.side === "right");
             const isLeft = p.side === "left";
             const idx = isLeft ? leftPorts.indexOf(p) : rightPorts.indexOf(p);
             const total = isLeft ? leftPorts.length : rightPorts.length;
             const yPos = (HEADER * GRID + GRID) / (total + 1) * (idx + 1);
-            return /* @__PURE__ */ jsxs26(
+            return /* @__PURE__ */ jsxs27(
               "div",
               {
                 className: cn(
@@ -3543,7 +3651,7 @@ var GraphNode = forwardRef48(
               i
             );
           }) }),
-          footer && /* @__PURE__ */ jsx56(
+          footer && !isSimple && /* @__PURE__ */ jsx56(
             "div",
             {
               className: "px-3 border-t border-border text-xs text-muted flex items-center gap-1.5 shrink-0 bg-muted/5",
@@ -3568,7 +3676,7 @@ Typography.displayName = "Typography";
 
 // src/ui/combobox/Combobox.tsx
 import { forwardRef as forwardRef50, useState as useState7, useMemo as useMemo5, useRef as useRef6 } from "react";
-import { jsx as jsx58, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
 var Combobox = forwardRef50(
   function Combobox2({ options, value, onChange, placeholder = "Search...", emptyText = "No results found", className, disabled }, ref) {
     const [open, setOpen] = useState7(false);
@@ -3579,11 +3687,11 @@ var Combobox = forwardRef50(
       [options, query]
     );
     const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
-    return /* @__PURE__ */ jsxs27(Root9, { open, onOpenChange: (v) => {
+    return /* @__PURE__ */ jsxs28(Root9, { open, onOpenChange: (v) => {
       setOpen(v);
       if (!v) setQuery("");
     }, children: [
-      /* @__PURE__ */ jsx58(Trigger5, { asChild: true, children: /* @__PURE__ */ jsxs27(
+      /* @__PURE__ */ jsx58(Trigger5, { asChild: true, children: /* @__PURE__ */ jsxs28(
         "button",
         {
           ref,
@@ -3607,7 +3715,7 @@ var Combobox = forwardRef50(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs27(
+      /* @__PURE__ */ jsxs28(
         PopoverContent,
         {
           side: "bottom",
@@ -3652,7 +3760,7 @@ Combobox.displayName = "Combobox";
 
 // src/ui/multi-select/MultiSelect.tsx
 import { forwardRef as forwardRef51, useState as useState8, useMemo as useMemo6, useRef as useRef7 } from "react";
-import { Fragment as Fragment5, jsx as jsx59, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
 var MultiSelect = forwardRef51(
   function MultiSelect2({ options, value = [], onChange, placeholder = "Select...", emptyText = "No results found", className, disabled }, ref) {
     const [open, setOpen] = useState8(false);
@@ -3667,7 +3775,7 @@ var MultiSelect = forwardRef51(
       onChange?.(next);
     };
     const selectedLabels = options.filter((o) => value.includes(o.value));
-    return /* @__PURE__ */ jsxs28(Root9, { open, onOpenChange: (v) => {
+    return /* @__PURE__ */ jsxs29(Root9, { open, onOpenChange: (v) => {
       setOpen(v);
       if (!v) setQuery("");
     }, children: [
@@ -3684,16 +3792,16 @@ var MultiSelect = forwardRef51(
             selectedLabels.length === 0 && "text-muted",
             className
           ),
-          children: selectedLabels.length === 0 ? placeholder : selectedLabels.length <= 3 ? selectedLabels.map((opt) => /* @__PURE__ */ jsx59(Badge, { variant: "neutral", style: "soft", children: opt.label }, opt.value)) : /* @__PURE__ */ jsxs28(Fragment5, { children: [
+          children: selectedLabels.length === 0 ? placeholder : selectedLabels.length <= 3 ? selectedLabels.map((opt) => /* @__PURE__ */ jsx59(Badge, { variant: "neutral", style: "soft", children: opt.label }, opt.value)) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
             selectedLabels.slice(0, 2).map((opt) => /* @__PURE__ */ jsx59(Badge, { variant: "neutral", style: "soft", children: opt.label }, opt.value)),
-            /* @__PURE__ */ jsxs28(Badge, { variant: "neutral", style: "soft", children: [
+            /* @__PURE__ */ jsxs29(Badge, { variant: "neutral", style: "soft", children: [
               "+",
               selectedLabels.length - 2
             ] })
           ] })
         }
       ) }),
-      /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsxs29(
         PopoverContent,
         {
           side: "bottom",
@@ -3711,7 +3819,7 @@ var MultiSelect = forwardRef51(
                 className: "border-0 rounded-none ring-0 focus-visible:ring-0"
               }
             ) }),
-            /* @__PURE__ */ jsx59(ScrollArea, { className: "max-h-60", children: /* @__PURE__ */ jsx59("div", { className: "p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx59("p", { className: "px-2 py-4 text-sm text-muted text-center", children: emptyText }) : filtered.map((option) => /* @__PURE__ */ jsxs28(
+            /* @__PURE__ */ jsx59(ScrollArea, { className: "max-h-60", children: /* @__PURE__ */ jsx59("div", { className: "p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx59("p", { className: "px-2 py-4 text-sm text-muted text-center", children: emptyText }) : filtered.map((option) => /* @__PURE__ */ jsxs29(
               "label",
               {
                 className: cn(
@@ -3740,7 +3848,7 @@ MultiSelect.displayName = "MultiSelect";
 
 // src/ui/command-palette/CommandPalette.tsx
 import { forwardRef as forwardRef52, useState as useState9, useMemo as useMemo7, useRef as useRef8, useEffect as useEffect3, useCallback as useCallback8 } from "react";
-import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 var CommandPalette = forwardRef52(
   function CommandPalette2({ open, onOpenChange, actions, onSelect, placeholder = "Search commands...", emptyText = "No results found", groups }, ref) {
     const [query, setQuery] = useState9("");
@@ -3787,7 +3895,7 @@ var CommandPalette = forwardRef52(
       [filtered, activeIdx, onSelect, onOpenChange]
     );
     const flatItems = groupedFiltered ? groupedFiltered.flatMap((g) => g.actions) : filtered;
-    return /* @__PURE__ */ jsx60(Root6, { open, onOpenChange, children: /* @__PURE__ */ jsx60("div", { ref, children: /* @__PURE__ */ jsxs29(DialogContent, { size: "lg", className: "p-0 overflow-hidden gap-0", children: [
+    return /* @__PURE__ */ jsx60(Root6, { open, onOpenChange, children: /* @__PURE__ */ jsx60("div", { ref, children: /* @__PURE__ */ jsxs30(DialogContent, { size: "lg", className: "p-0 overflow-hidden gap-0", children: [
       /* @__PURE__ */ jsx60("div", { className: "border-b border-border", children: /* @__PURE__ */ jsx60(
         "input",
         {
@@ -3802,7 +3910,7 @@ var CommandPalette = forwardRef52(
           className: "w-full bg-transparent px-4 py-3 text-sm outline-none placeholder:text-muted"
         }
       ) }),
-      /* @__PURE__ */ jsx60(ScrollArea, { className: "max-h-80", children: /* @__PURE__ */ jsx60("div", { className: "p-2", onKeyDown: handleKeyDown, children: flatItems.length === 0 ? /* @__PURE__ */ jsx60("p", { className: "px-2 py-8 text-sm text-muted text-center", children: emptyText }) : groupedFiltered ? groupedFiltered.map((group) => /* @__PURE__ */ jsxs29("div", { children: [
+      /* @__PURE__ */ jsx60(ScrollArea, { className: "max-h-80", children: /* @__PURE__ */ jsx60("div", { className: "p-2", onKeyDown: handleKeyDown, children: flatItems.length === 0 ? /* @__PURE__ */ jsx60("p", { className: "px-2 py-8 text-sm text-muted text-center", children: emptyText }) : groupedFiltered ? groupedFiltered.map((group) => /* @__PURE__ */ jsxs30("div", { children: [
         /* @__PURE__ */ jsx60("p", { className: "px-2 py-1 text-xs font-semibold text-muted uppercase tracking-wider", children: group.label }),
         group.actions.map((action) => {
           const idx = flatItems.indexOf(action);
@@ -3843,7 +3951,7 @@ function CommandItem({
   onSelect,
   onMouseEnter
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "button",
     {
       type: "button",
@@ -3866,7 +3974,7 @@ function CommandItem({
 import { forwardRef as forwardRef53 } from "react";
 import { Root as Root13, Trigger as Trigger7, Portal as Portal6, Overlay as Overlay2, Content as Content7, Title as Title3, Description as Description3, Close as Close4 } from "@radix-ui/react-dialog";
 import { cva as cva31 } from "class-variance-authority";
-import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
 var drawerOverlay = "fixed inset-0 z-[var(--z-overlay)] bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out";
 var drawerContentVariants = cva31(
   "fixed z-[var(--z-overlay)] flex flex-col bg-surface-elevated shadow-lg transition-transform duration-[var(--duration-slow)] ease-[var(--ease-standard)]",
@@ -3889,9 +3997,9 @@ var drawerContentVariants = cva31(
   }
 );
 var DrawerContent = forwardRef53(
-  ({ className, side, size, children, ...props }, ref) => /* @__PURE__ */ jsxs30(Portal6, { children: [
+  ({ className, side, size, children, ...props }, ref) => /* @__PURE__ */ jsxs31(Portal6, { children: [
     /* @__PURE__ */ jsx61(Overlay2, { className: drawerOverlay }),
-    /* @__PURE__ */ jsxs30(Content7, { ref, className: cn(drawerContentVariants({ side, size }), className), style: { backdropFilter: "blur(var(--backdrop-blur))" }, ...props, children: [
+    /* @__PURE__ */ jsxs31(Content7, { ref, className: cn(drawerContentVariants({ side, size }), className), style: { backdropFilter: "blur(var(--backdrop-blur))" }, ...props, children: [
       children,
       /* @__PURE__ */ jsx61(Close4, { className: "absolute right-panel top-panel rounded-ui-sm opacity-70 hover:opacity-100", children: /* @__PURE__ */ jsx61("svg", { viewBox: "0 0 15 15", className: "size-4 fill-current", children: /* @__PURE__ */ jsx61("path", { d: "M2 2l11 11M13 2L2 13", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) })
     ] })
@@ -3922,7 +4030,7 @@ DrawerFooter.displayName = "DrawerFooter";
 // src/ui/data-list/DataList.tsx
 import { forwardRef as forwardRef54 } from "react";
 import { cva as cva32 } from "class-variance-authority";
-import { jsx as jsx62, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
 var dataListVariants = cva32("overflow-hidden divide-y divide-border", {
   variants: {
     variant: {
@@ -3941,7 +4049,7 @@ var DataList = forwardRef54(
       ref,
       className: cn(dataListVariants({ variant }), className),
       ...props,
-      children: items.map((item, i) => /* @__PURE__ */ jsxs31(
+      children: items.map((item, i) => /* @__PURE__ */ jsxs32(
         "div",
         {
           className: cn(
@@ -3949,7 +4057,7 @@ var DataList = forwardRef54(
             variant === "compact" ? "py-1 px-2" : "py-2 px-3"
           ),
           children: [
-            /* @__PURE__ */ jsxs31("dt", { className: "flex w-36 shrink-0 items-center gap-2 text-sm text-muted", children: [
+            /* @__PURE__ */ jsxs32("dt", { className: "flex w-36 shrink-0 items-center gap-2 text-sm text-muted", children: [
               item.icon && /* @__PURE__ */ jsx62("span", { className: "shrink-0", children: item.icon }),
               item.label
             ] }),
@@ -3977,7 +4085,7 @@ DataList.displayName = "DataList";
 // src/ui/patterns/data-table/DataTable.tsx
 import { forwardRef as forwardRef55 } from "react";
 import { cva as cva33 } from "class-variance-authority";
-import { jsx as jsx63, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs33 } from "react/jsx-runtime";
 var COLUMN_WIDTH_SCALE = {
   xs: "8%",
   sm: "12%",
@@ -4002,7 +4110,7 @@ var dataTableVariants = cva33("", {
   }
 });
 var DataTable = forwardRef55(
-  ({ className, columns, rows, variant, density, stickyHeader, replacements, layout = "fixed", ...props }, ref) => /* @__PURE__ */ jsx63(ScrollArea, { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs32(
+  ({ className, columns, rows, variant, density, stickyHeader, replacements, layout = "fixed", ...props }, ref) => /* @__PURE__ */ jsx63(ScrollArea, { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs33(
     Table,
     {
       variant,
@@ -4031,10 +4139,10 @@ DataTable.displayName = "DataTable";
 
 // src/ui/slider/Slider.tsx
 import { forwardRef as forwardRef56 } from "react";
-import { jsx as jsx64, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs34 } from "react/jsx-runtime";
 var Slider = forwardRef56(
-  ({ className, label, showValue, value, min = 0, max = 100, step = 1, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { className: cn("flex flex-col gap-1", className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between", children: [
+  ({ className, label, showValue, value, min = 0, max = 100, step = 1, ...props }, ref) => /* @__PURE__ */ jsxs34("div", { className: cn("flex flex-col gap-1", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
       label && /* @__PURE__ */ jsx64("span", { className: "text-sm text-fg", children: label }),
       showValue && /* @__PURE__ */ jsx64("span", { className: "text-sm text-muted font-mono", children: String(value ?? 0) })
     ] }),
@@ -4057,7 +4165,7 @@ Slider.displayName = "Slider";
 
 // src/ui/markdown/Markdown.tsx
 import { useMemo as useMemo8 } from "react";
-import { Fragment as Fragment6, jsx as jsx65, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -4169,7 +4277,7 @@ function Markdown({ content, className, ...props }) {
       case "code":
         return /* @__PURE__ */ jsx65(CodeBlock, { code: block.code, language: block.language }, i);
       case "table":
-        return /* @__PURE__ */ jsx65("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs34("table", { className: "w-full text-sm border-collapse", children: [
+        return /* @__PURE__ */ jsx65("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs35("table", { className: "w-full text-sm border-collapse", children: [
           block.headers.length > 0 && /* @__PURE__ */ jsx65("thead", { children: /* @__PURE__ */ jsx65("tr", { children: block.headers.map((h, j) => /* @__PURE__ */ jsx65("th", { className: "border border-border px-3 py-2 text-left font-semibold text-fg text-xs uppercase tracking-wider", children: renderInline(h) }, j)) }) }),
           /* @__PURE__ */ jsx65("tbody", { children: block.rows.map((row, j) => /* @__PURE__ */ jsx65("tr", { children: row.map((c, k) => /* @__PURE__ */ jsx65("td", { className: "border border-border px-3 py-1.5 text-fg", children: renderInline(c) }, k)) }, j)) })
         ] }) }, i);
@@ -4182,7 +4290,7 @@ function Markdown({ content, className, ...props }) {
 // src/ui/file-drop/FileDrop.tsx
 import { forwardRef as forwardRef57, useState as useState10, useRef as useRef9, useCallback as useCallback9 } from "react";
 import { cva as cva34 } from "class-variance-authority";
-import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
 var fileDropVariants = cva34(
   "relative flex flex-col items-center justify-center gap-2 rounded-ui border-2 border-dashed p-8 text-center transition-colors cursor-pointer",
   {
@@ -4254,7 +4362,7 @@ var FileDrop = forwardRef57(
       if (e.target.files) validateAndDrop(e.target.files);
     }, [validateAndDrop]);
     const state = disabled ? "default" : error ? "error" : success ? "success" : dragOver ? "dragging" : "default";
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       "div",
       {
         ref,
@@ -4266,15 +4374,15 @@ var FileDrop = forwardRef57(
         ...props,
         children: [
           /* @__PURE__ */ jsx66("input", { ref: inputRef, type: "file", accept, multiple, className: "hidden", onChange: handleFileChange }),
-          dragOver ? /* @__PURE__ */ jsxs35(Fragment7, { children: [
+          dragOver ? /* @__PURE__ */ jsxs36(Fragment7, { children: [
             /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 24 24", className: "size-8 text-primary fill-none stroke-current stroke-[1.5]", children: /* @__PURE__ */ jsx66("path", { d: "M12 4v12m0 0l-3-3m3 3l3-3M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" }) }),
             /* @__PURE__ */ jsx66("p", { className: "font-medium text-primary", children: "Drop files here" })
-          ] }) : /* @__PURE__ */ jsxs35(Fragment7, { children: [
+          ] }) : /* @__PURE__ */ jsxs36(Fragment7, { children: [
             /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 24 24", className: "size-8 text-muted fill-none stroke-current stroke-[1.5]", children: /* @__PURE__ */ jsx66("path", { d: "M7 16a4 4 0 010-8 5 5 0 0110 0 4 4 0 010 8h-1M12 4v12m0 0l-3-3m3 3l3-3" }) }),
             /* @__PURE__ */ jsx66("p", { className: "font-medium text-fg", children: error || success ? "" : "Drop files here or click to browse" }),
             error && /* @__PURE__ */ jsx66("p", { className: "text-xs text-danger", children: error }),
             success && /* @__PURE__ */ jsx66("p", { className: "text-xs text-success", children: "Files added" }),
-            !error && !success && /* @__PURE__ */ jsxs35("p", { className: "text-xs text-muted", children: [
+            !error && !success && /* @__PURE__ */ jsxs36("p", { className: "text-xs text-muted", children: [
               accept ? `Accepts: ${accept}` : "Any file type",
               maxSize ? ` \xB7 Max ${(maxSize / 1024 / 1024).toFixed(0)}MB` : "",
               multiple ? " \xB7 Multiple" : ""
@@ -4290,7 +4398,7 @@ FileDrop.displayName = "FileDrop";
 // src/ui/image/Image.tsx
 import { forwardRef as forwardRef58 } from "react";
 import { cva as cva35 } from "class-variance-authority";
-import { jsx as jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs37 } from "react/jsx-runtime";
 var imageVariants = cva35("inline-block object-cover bg-secondary", {
   variants: {
     fit: {
@@ -4339,7 +4447,7 @@ var Image2 = forwardRef58(
       }
     );
     if (caption) {
-      return /* @__PURE__ */ jsxs36("figure", { className: "inline-flex flex-col gap-1.5", children: [
+      return /* @__PURE__ */ jsxs37("figure", { className: "inline-flex flex-col gap-1.5", children: [
         img,
         /* @__PURE__ */ jsx67("figcaption", { className: "text-xs text-muted text-center", children: caption })
       ] });
@@ -4409,7 +4517,7 @@ function PortHitZone({
 }
 
 // src/ui/patterns/graph/GraphNode.tsx
-import { jsx as jsx69, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs38 } from "react/jsx-runtime";
 function GraphNodeRenderer({
   node,
   isSelected,
@@ -4422,7 +4530,7 @@ function GraphNodeRenderer({
     onSelect(node.id);
     onDragStart(node.id, e.clientX, e.clientY, node.x, node.y);
   }, [node.id, node.x, node.y, onSelect, onDragStart]);
-  return /* @__PURE__ */ jsxs37("div", { className: "absolute", style: { left: node.x, top: node.y, width: NODE_WIDTH }, onMouseDown: onDown, children: [
+  return /* @__PURE__ */ jsxs38("div", { className: "absolute", style: { left: node.x, top: node.y, width: NODE_WIDTH }, onMouseDown: onDown, children: [
     /* @__PURE__ */ jsx69(
       GraphNode,
       {
@@ -4443,7 +4551,7 @@ function GraphNodeRenderer({
 }
 
 // src/ui/patterns/graph/Graph.tsx
-import { jsx as jsx70, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs39 } from "react/jsx-runtime";
 function graphReducer(state, action) {
   switch (action.type) {
     case "MOVE_NODE":
@@ -4582,7 +4690,7 @@ var Graph = ({
     dispatch({ type: "SELECT_EDGE", id: edgeId });
   }, []);
   const { nodes, edges, selectedNodeIds, selectedEdgeIds, connecting, offset: offset2, zoom } = state;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     Canvas,
     {
       ref: containerRef,
@@ -4594,7 +4702,7 @@ var Graph = ({
       onBackgroundClick: () => dispatch({ type: "DESELECT_ALL" }),
       controls,
       children: [
-        /* @__PURE__ */ jsxs38("svg", { className: "absolute inset-0 overflow-visible w-full h-full pointer-events-none", children: [
+        /* @__PURE__ */ jsxs39("svg", { className: "absolute inset-0 overflow-visible w-full h-full pointer-events-none", children: [
           edges.map((edge) => {
             const fn = nodes.find((n) => n.id === edge.from.nodeId);
             const tn = nodes.find((n) => n.id === edge.to.nodeId);
@@ -4789,7 +4897,7 @@ var LAYER_SVGS = {
 };
 
 // src/ui/patterns/textured-surface/TexturedSurface.tsx
-import { jsx as jsx71, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs40 } from "react/jsx-runtime";
 var TEXTURE_STRENGTHS = {
   "paper-grain": { subtle: 0.3, medium: 0.5, strong: 0.75 },
   "frosted-glass": { subtle: 0.22, medium: 0.35, strong: 0.55 },
@@ -4882,7 +4990,7 @@ var TexturedSurface = forwardRef59(
     if (conf) {
       const tileLayers = conf.layers.filter((l) => l.tileSize);
       const coverLayers = conf.layers.filter((l) => !l.tileSize);
-      return /* @__PURE__ */ jsxs39(
+      return /* @__PURE__ */ jsxs40(
         "div",
         {
           ref,
@@ -4949,7 +5057,7 @@ TexturedSurface.displayName = "TexturedSurface";
 
 // src/ui/patterns/textured-surface/ParamTable.tsx
 import { Fragment as Fragment8 } from "react";
-import { jsx as jsx72, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs41 } from "react/jsx-runtime";
 var LAYERS = ["page", "surface", "foreground"];
 var STRENGTHS = ["subtle", "medium", "strong"];
 var LAYER_LABELS = {
@@ -4958,10 +5066,10 @@ var LAYER_LABELS = {
   foreground: "Foreground"
 };
 function ParamTable({ texture = "paper-grain" }) {
-  return /* @__PURE__ */ jsxs40("div", { className: "w-full grid grid-cols-[4rem_repeat(3,1fr)] gap-1 items-center", children: [
+  return /* @__PURE__ */ jsxs41("div", { className: "w-full grid grid-cols-[4rem_repeat(3,1fr)] gap-1 items-center", children: [
     /* @__PURE__ */ jsx72("div", {}),
     STRENGTHS.map((s) => /* @__PURE__ */ jsx72("div", { className: "text-center text-xs font-medium text-muted", children: s }, s)),
-    LAYERS.map((layer) => /* @__PURE__ */ jsxs40(Fragment8, { children: [
+    LAYERS.map((layer) => /* @__PURE__ */ jsxs41(Fragment8, { children: [
       /* @__PURE__ */ jsx72("div", { className: "text-xs font-medium text-muted self-center", children: LAYER_LABELS[layer] }),
       STRENGTHS.map((strength) => /* @__PURE__ */ jsx72(
         TexturedSurface,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-you-eye",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/sadigaxund/my-you-eye"