my-you-eye 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -610,7 +610,7 @@ declare const FileDrop: react.ForwardRefExoticComponent<FileDropProps & react.Re
 declare const imageVariants: (props?: ({
     fit?: "fill" | "none" | "contain" | "cover" | "scaleDown" | null | undefined;
     radius?: "sm" | "md" | "lg" | "none" | "full" | null | undefined;
-    aspect?: "auto" | "video" | "square" | "wide" | "tall" | null | undefined;
+    aspect?: "auto" | "square" | "video" | "wide" | "tall" | null | undefined;
     bordered?: boolean | null | undefined;
     shadowed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/index.js

@@ -68,6 +68,7 @@ var Button = forwardRef2(
     {
       ref,
       className: cn(buttonVariants({ variant, size }), className),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       disabled: disabled || loading,
       ...props,
       children: [
@@ -111,6 +112,7 @@ var Input = forwardRef3(
     {
       ref,
       className: cn(inputVariants({ variant, size, invalid }), className),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       ...props
     }
   )
@@ -134,7 +136,7 @@ Label.displayName = "Label";
 import { forwardRef as forwardRef5 } from "react";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var cardVariants = cva5("rounded-ui bg-bg text-fg", {
+var cardVariants = cva5("rounded-ui bg-surface text-fg", {
   variants: {
     variant: {
       default: "border border-border",
@@ -152,7 +154,7 @@ var Card = forwardRef5(
     {
       ref,
       className: cn(cardVariants({ variant }), className),
-      style: { borderWidth: "var(--border-width)", ...style },
+      style: { backdropFilter: "blur(var(--backdrop-blur))", borderWidth: "var(--border-width)", ...style },
       ...props
     }
   )
@@ -404,6 +406,7 @@ var Textarea = forwardRef15(
       {
         ref: setRef,
         className: cn(textareaVariants({ variant, invalid }), "min-h-[80px]", className),
+        style: { backdropFilter: "blur(var(--backdrop-blur))" },
         onChange: handleChange,
         ...props
       }
@@ -445,7 +448,7 @@ var triggerVariants = cva12(
   }
 );
 var SelectTrigger = forwardRef16(
-  ({ className, size, invalid, children, ...props }, ref) => /* @__PURE__ */ jsxs3(Trigger, { ref, className: cn(triggerVariants({ size, invalid }), className), ...props, children: [
+  ({ className, size, invalid, children, ...props }, ref) => /* @__PURE__ */ jsxs3(Trigger, { ref, className: cn(triggerVariants({ size, invalid }), className), style: { backdropFilter: "blur(var(--backdrop-blur))" }, ...props, children: [
     children,
     /* @__PURE__ */ jsx16(Icon, { className: "ml-2 shrink-0 opacity-50", children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 8 8", className: "size-3 fill-current", children: /* @__PURE__ */ jsx16("path", { d: "M0 2l4 4 4-4" }) }) })
   ] })
@@ -461,6 +464,7 @@ var SelectContent = forwardRef16(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-ui border border-border bg-bg text-fg shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out",
         className
       ),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       ...props,
       children: /* @__PURE__ */ jsx16(Viewport, { className: "p-1", children })
     }
@@ -513,7 +517,7 @@ import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 var dialogOverlay = "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out";
 var dialogContentVariants = cva13(
-  "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-ui bg-bg p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-ui bg-surface-elevated p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       size: {
@@ -527,11 +531,11 @@ var dialogContentVariants = cva13(
     }
   }
 );
-var dialogOverlayWithBlur = `${dialogOverlay} [backdrop-filter:var(--backdrop-blur)]`;
+var dialogOverlayWithBlur = `${dialogOverlay} [backdrop-filter:blur(var(--backdrop-blur))]`;
 var DialogContent = forwardRef18(
   ({ className, size, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Portal, { children: [
     /* @__PURE__ */ jsx18(Overlay, { className: dialogOverlayWithBlur }),
-    /* @__PURE__ */ jsxs5(Content2, { ref, className: cn(dialogContentVariants({ size }), className), style: { borderWidth: "var(--border-width)" }, ...props, children: [
+    /* @__PURE__ */ jsxs5(Content2, { ref, className: cn(dialogContentVariants({ size }), className), style: { backdropFilter: "blur(var(--backdrop-blur))", borderWidth: "var(--border-width)" }, ...props, children: [
       children,
       /* @__PURE__ */ jsx18(Close, { className: "absolute right-panel top-panel rounded-ui-sm opacity-70 hover:opacity-100", children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 15 15", className: "size-4 fill-current", children: /* @__PURE__ */ jsx18("path", { d: "M2 2l11 11M13 2L2 13", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) })
     ] })
@@ -571,6 +575,7 @@ var Tooltip = ({ content, side = "top", children }) => /* @__PURE__ */ jsxs6(Roo
         "z-50 overflow-hidden rounded-ui-sm bg-bg text-fg border border-border px-2.5 py-1 text-xs shadow-lg",
         "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out"
       ),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       children: content
     }
   ) })
@@ -586,6 +591,7 @@ var TooltipContent = forwardRef19(
         "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out",
         className
       ),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       ...props
     }
   )
@@ -615,6 +621,7 @@ var DropdownMenuContent = forwardRef20(
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         className
       ),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       ...props
     }
   ) })
@@ -656,10 +663,11 @@ var PopoverContent = forwardRef21(
       sideOffset: 4,
       updatePositionStrategy: "always",
       className: cn(
-        "z-50 w-72 rounded-ui border border-border bg-bg p-panel shadow-lg outline-none",
+        "z-50 w-72 rounded-ui border border-border bg-surface-elevated p-panel shadow-lg outline-none",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         className
       ),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       ...props
     }
   ) })
@@ -683,9 +691,9 @@ var toastVariants = cva14(
   {
     variants: {
       variant: {
-        default: "border-border bg-bg text-fg",
-        success: "border-success bg-success text-bg",
-        danger: "border-danger bg-danger text-bg"
+        default: "border-border bg-surface-elevated text-fg",
+        success: "border-success bg-success text-primary-fg",
+        danger: "border-danger bg-danger text-primary-fg"
       }
     },
     defaultVariants: {
@@ -705,6 +713,7 @@ var ToastItem = forwardRef22(
     {
       ref,
       className: cn(toastVariants({ variant })),
+      style: { backdropFilter: "blur(var(--backdrop-blur))" },
       ...props,
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
@@ -1440,15 +1449,15 @@ function TreeItem({
           "div",
           {
             className: cn(
-              "flex items-center gap-1 rounded-ui-sm px-1 py-0.5 hover:bg-secondary cursor-pointer relative"
+              "flex items-center gap-1 rounded-ui-sm px-1 py-0.5 hover:bg-secondary cursor-pointer relative min-w-0"
             ),
             style: { paddingLeft: `${depth * indent + 4}px` },
             onClick: toggle,
             children: [
               hasChildren ? /* @__PURE__ */ jsx45(Chevron, { expanded: actuallyExpanded }) : /* @__PURE__ */ jsx45("span", { className: "size-3 shrink-0" }),
               node.icon && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: node.icon }),
-              /* @__PURE__ */ jsx45("span", { className: "text-xs truncate flex-1", children: node.label }),
-              node.value && /* @__PURE__ */ jsx45("span", { children: /* @__PURE__ */ jsx45(CellValue, { ...node.value, replacements }) })
+              /* @__PURE__ */ jsx45("span", { className: "text-xs truncate flex-1 min-w-0", children: node.label }),
+              node.value && /* @__PURE__ */ jsx45("span", { className: "truncate overflow-hidden shrink min-w-0", children: /* @__PURE__ */ jsx45(CellValue, { ...node.value, replacements }) })
             ]
           }
         ),
@@ -1571,12 +1580,12 @@ function applyReplacements(str, replacements) {
 function NumberDisplay({ value }) {
   const n = Number(value);
   if (isNaN(n)) return /* @__PURE__ */ jsx46("span", { className: "text-muted", children: "\u2014" });
-  return /* @__PURE__ */ jsx46("span", { className: "font-mono tabular-nums text-right block", children: Intl.NumberFormat().format(n) });
+  return /* @__PURE__ */ jsx46("span", { className: "font-mono tabular-nums text-right block truncate", children: Intl.NumberFormat().format(n) });
 }
 function PercentageDisplay({ value }) {
   const n = Number(value);
   if (isNaN(n)) return /* @__PURE__ */ jsx46("span", { className: "text-muted", children: "\u2014" });
-  return /* @__PURE__ */ jsxs19("span", { className: "font-mono tabular-nums text-right block", children: [
+  return /* @__PURE__ */ jsxs19("span", { className: "font-mono tabular-nums text-right block truncate", children: [
     (n * 100).toFixed(1),
     "%"
   ] });
@@ -1587,7 +1596,7 @@ function DateDisplay({ value, showTime }) {
   const abs = showTime ? d.toLocaleString() : d.toLocaleDateString();
   const diff = Date.now() - d.getTime();
   const rel = diff < 6e4 ? "just now" : diff < 36e5 ? `${Math.round(diff / 6e4)}m ago` : diff < 864e5 ? `${Math.round(diff / 36e5)}h ago` : `${Math.round(diff / 864e5)}d ago`;
-  return /* @__PURE__ */ jsx46("span", { title: abs, className: "cursor-help", children: rel });
+  return /* @__PURE__ */ jsx46("span", { title: abs, className: "cursor-help truncate inline-block max-w-full align-middle", children: rel });
 }
 function BytesDisplay({ value }) {
   const n = Number(value);
@@ -1598,7 +1607,7 @@ function BytesDisplay({ value }) {
     s /= 1024;
     i++;
   }
-  return /* @__PURE__ */ jsxs19("span", { className: "font-mono tabular-nums", children: [
+  return /* @__PURE__ */ jsxs19("span", { className: "font-mono tabular-nums truncate inline-block max-w-full align-middle", children: [
     s.toFixed(1),
     " ",
     units[i]
@@ -1612,7 +1621,7 @@ function DurationDisplay({ value }) {
   if (h > 0) parts.push(`${h}h`);
   if (m > 0) parts.push(`${m}m`);
   if (s > 0 || parts.length === 0) parts.push(`${s}s`);
-  return /* @__PURE__ */ jsx46("span", { className: "font-mono tabular-nums", children: parts.join(" ") });
+  return /* @__PURE__ */ jsx46("span", { className: "font-mono tabular-nums truncate inline-block max-w-full align-middle", children: parts.join(" ") });
 }
 function ImageDisplay({ value }) {
   const src = String(value);
@@ -1650,7 +1659,7 @@ function AudioDisplay({ value }) {
     setT(a.currentTime);
   }, []);
   const fmt = (s) => `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, "0")}`;
-  return /* @__PURE__ */ jsxs19("span", { className: "inline-flex items-center gap-2 text-xs min-w-[200px]", onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxs19("span", { className: "inline-flex items-center gap-2 text-xs min-w-48", onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsx46("audio", { ref: r, src, onTimeUpdate: () => setT(r.current?.currentTime ?? 0), onLoadedMetadata: () => setD(r.current?.duration ?? 0), onEnded: () => setP(false) }),
     /* @__PURE__ */ jsx46(
       "button",
@@ -1676,7 +1685,7 @@ function AudioDisplay({ value }) {
         className: "flex-1 h-1 accent-primary cursor-pointer"
       }
     ),
-    /* @__PURE__ */ jsx46("span", { className: "font-mono tabular-nums text-muted shrink-0 w-[100px] text-right whitespace-nowrap", children: d ? `${fmt(t)} / ${fmt(d)}` : "--:-- / --:--" })
+    /* @__PURE__ */ jsx46("span", { className: "font-mono tabular-nums text-muted shrink-0 w-24 text-right whitespace-nowrap", children: d ? `${fmt(t)} / ${fmt(d)}` : "--:-- / --:--" })
   ] });
 }
 function ArrayDisplay({ value }) {
@@ -1716,7 +1725,7 @@ function objToTreeNodes(obj, path = "") {
   return [{ id: `${path}_val`, label: String(obj), value: { type: detectType(obj), value: obj } }];
 }
 function TreeDisplay({ value, replacements }) {
-  if (typeof value !== "object" || value === null) return /* @__PURE__ */ jsx46("span", { children: String(value) });
+  if (typeof value !== "object" || value === null) return /* @__PURE__ */ jsx46("span", { className: "truncate inline-block max-w-full align-middle", children: String(value) });
   const nodes = objToTreeNodes(value);
   const isArray = Array.isArray(value);
   const count = isArray ? value.length : Object.keys(value).length;
@@ -1743,10 +1752,10 @@ function CellValue({
     case "boolean":
       return /* @__PURE__ */ jsx46(BooleanDisplay, { value });
     case "email":
-      return /* @__PURE__ */ jsx46("a", { href: `mailto:${String(value)}`, className: "text-primary hover:underline", children: String(value) });
+      return /* @__PURE__ */ jsx46("a", { href: `mailto:${String(value)}`, className: "text-primary hover:underline inline-flex min-w-0", children: /* @__PURE__ */ jsx46("span", { className: "truncate", children: String(value) }) });
     case "url":
-      return /* @__PURE__ */ jsxs19("a", { href: String(value), target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-tight text-primary hover:underline", children: [
-        applyReplacements(String(value), replacements),
+      return /* @__PURE__ */ jsxs19("a", { href: String(value), target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-tight text-primary hover:underline min-w-0", children: [
+        /* @__PURE__ */ jsx46("span", { className: "truncate", children: applyReplacements(String(value), replacements) }),
         /* @__PURE__ */ jsx46("svg", { viewBox: "0 0 12 12", className: "size-icon-sm shrink-0 fill-current opacity-dim", children: /* @__PURE__ */ jsx46("path", { d: "M2 2h3v1H3v6h6V7h1v3H2V2zm4 0h4v4H9V4.5L6.5 7 6 6.5 8.5 4H6V2z" }) })
       ] });
     case "json":
@@ -1754,9 +1763,9 @@ function CellValue({
     case "badge":
       return /* @__PURE__ */ jsx46(Badge, { variant: badgeVariant ?? "neutral", style: badgeStyle ?? "solid", children: String(value) });
     case "status":
-      return /* @__PURE__ */ jsxs19("span", { className: "inline-flex items-center gap-1.5", children: [
+      return /* @__PURE__ */ jsxs19("span", { className: "inline-flex items-center gap-1.5 min-w-0", children: [
         /* @__PURE__ */ jsx46(StatusDot, { variant: statusVariant ?? "neutral", size: "sm", pulse: statusPulse }),
-        /* @__PURE__ */ jsx46("span", { children: String(value) })
+        /* @__PURE__ */ jsx46("span", { className: "truncate", children: String(value) })
       ] });
     case "number":
       return /* @__PURE__ */ jsx46(NumberDisplay, { value });
@@ -1779,7 +1788,7 @@ function CellValue({
     case "tree":
       return /* @__PURE__ */ jsx46(TreeDisplay, { value, replacements });
     default:
-      return /* @__PURE__ */ jsx46("span", { children: String(value) });
+      return /* @__PURE__ */ jsx46("span", { className: "truncate inline-block max-w-full align-middle", children: String(value) });
   }
 }
 
@@ -2073,7 +2082,7 @@ Port.displayName = "Port";
 import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
 var ROW_PORT_Y_OFFSET = HEADER * GRID;
 var graphNodeVariants = cva30(
-  "absolute flex flex-col rounded-ui border bg-bg shadow-card min-w-[160px] overflow-hidden",
+  "absolute flex flex-col rounded-ui border bg-surface shadow-card min-w-[160px] overflow-hidden",
   {
     variants: {
       variant: {
@@ -2096,7 +2105,7 @@ var GraphNode = forwardRef46(
       {
         ref,
         className: cn(graphNodeVariants({ variant }), className),
-        style: { left: x, top: y, height, ...style },
+        style: { backdropFilter: "blur(var(--backdrop-blur))", left: x, top: y, height, ...style },
         ...props,
         children: [
           header && /* @__PURE__ */ jsx51("div", { className: cn("flex flex-col shrink-0", accent && "border-t-2 border-primary"), style: { height: HEADER * GRID }, children: /* @__PURE__ */ jsx51("div", { className: "flex items-center px-3 border-b border-border flex-1 min-h-0", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-inline flex-1 min-w-0", children: [
@@ -2222,6 +2231,7 @@ function Combobox({
           !selectedLabel && "text-muted",
           className
         ),
+        style: { backdropFilter: "blur(var(--backdrop-blur))" },
         onClick: () => {
           setOpen(true);
           setTimeout(() => inputRef.current?.focus(), 0);
@@ -2313,6 +2323,7 @@ function MultiSelect({
           selectedLabels.length === 0 && "text-muted",
           className
         ),
+        style: { backdropFilter: "blur(var(--backdrop-blur))" },
         children: selectedLabels.length === 0 ? placeholder : selectedLabels.length <= 3 ? selectedLabels.map((opt) => /* @__PURE__ */ jsx54(Badge, { variant: "neutral", style: "soft", children: opt.label }, opt.value)) : /* @__PURE__ */ jsxs25(Fragment3, { children: [
           selectedLabels.slice(0, 2).map((opt) => /* @__PURE__ */ jsx54(Badge, { variant: "neutral", style: "soft", children: opt.label }, opt.value)),
           /* @__PURE__ */ jsxs25(Badge, { variant: "neutral", style: "soft", children: [
@@ -2501,7 +2512,7 @@ import { cva as cva31 } from "class-variance-authority";
 import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 var drawerOverlay = "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out";
 var drawerContentVariants = cva31(
-  "fixed z-50 flex flex-col bg-bg shadow-lg transition-transform duration-200",
+  "fixed z-50 flex flex-col bg-surface-elevated shadow-lg transition-transform duration-200",
   {
     variants: {
       side: {
@@ -2523,7 +2534,7 @@ var drawerContentVariants = cva31(
 var DrawerContent = forwardRef48(
   ({ className, side, size, children, ...props }, ref) => /* @__PURE__ */ jsxs27(Portal5, { children: [
     /* @__PURE__ */ jsx56(Overlay2, { className: drawerOverlay }),
-    /* @__PURE__ */ jsxs27(Content7, { ref, className: cn(drawerContentVariants({ side, size }), className), ...props, children: [
+    /* @__PURE__ */ jsxs27(Content7, { ref, className: cn(drawerContentVariants({ side, size }), className), style: { backdropFilter: "blur(var(--backdrop-blur))" }, ...props, children: [
       children,
       /* @__PURE__ */ jsx56(Close4, { className: "absolute right-panel top-panel rounded-ui-sm opacity-70 hover:opacity-100", children: /* @__PURE__ */ jsx56("svg", { viewBox: "0 0 15 15", className: "size-4 fill-current", children: /* @__PURE__ */ jsx56("path", { d: "M2 2l11 11M13 2L2 13", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) })
     ] })
@@ -3018,7 +3029,7 @@ function OrchestratorNode({
     onSelect(node.id);
     onDragStart(node.id, e.clientX, e.clientY, node.x, node.y);
   }, [node.id, node.x, node.y, onSelect, onDragStart]);
-  return /* @__PURE__ */ jsxs33("div", { className: "absolute", style: { left: node.x, top: node.y }, onMouseDown: onDown, children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "absolute", style: { left: node.x, top: node.y, width: NODE_WIDTH }, onMouseDown: onDown, children: [
     /* @__PURE__ */ jsx64(
       GraphNode,
       {
@@ -3117,7 +3128,7 @@ var Orchestrator = ({
   onChangeRef.current = onChange;
   useEffect4(() => {
     onChangeRef.current?.({ nodes: state.nodes, edges: state.edges });
-  });
+  }, [state.nodes, state.edges]);
   const screenToWorld = useCallback11((clientX, clientY) => {
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return { x: 0, y: 0 };

package/package.json

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