my-you-eye 0.3.1 → 0.3.2

package/COMPONENTS.md

@@ -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), Line highlights, Line highlights (implicit gutter), Multi-color highlights, 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, Substring 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

@@ -257,6 +257,7 @@
         "Line highlights",
         "Line highlights (implicit gutter)",
         "Multi-color highlights",
+        "Substring highlights",
         "Syntax highlighting (CSS / HTML / SQL / YAML / Python)"
       ]
     },

package/dist/index.d.ts

@@ -476,6 +476,12 @@ interface CodeBlockHighlightGroup {
     lines: number[];
     color?: "primary" | "warning" | "success" | "danger";
 }
+interface HighlightRangeDef {
+    line: number;
+    start: number;
+    end: number;
+    color?: "primary" | "warning" | "success" | "danger";
+}
 interface CodeBlockProps extends HTMLAttributes<HTMLPreElement>, VariantProps<typeof codeBlockVariants> {
     code: string;
     language?: string;
@@ -490,6 +496,8 @@ interface CodeBlockProps extends HTMLAttributes<HTMLPreElement>, VariantProps<ty
     highlightColor?: CodeBlockHighlightGroup["color"];
     /** Multi-color highlight groups. When provided, takes precedence over highlightLines. */
     highlightGroups?: CodeBlockHighlightGroup[];
+    /** Substring-level highlight ranges (0-indexed char positions within each line). */
+    highlightRanges?: HighlightRangeDef[];
 }
 declare const CodeBlock: react.ForwardRefExoticComponent<CodeBlockProps & react.RefAttributes<HTMLPreElement>>;
 

package/dist/index.js

@@ -2385,7 +2385,7 @@ function renderHighlightedLine(tokens) {
 }
 
 // src/ui/code-block/CodeBlock.tsx
-import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
 var codeBlockVariants = cva25(
   "group relative overflow-clip rounded-ui border border-border bg-code-bg text-sm flex flex-col",
   {
@@ -2431,7 +2431,7 @@ function CopyButton({ copied, onCopy }) {
   );
 }
 var CodeBlock = forwardRef42(
-  ({ className, variant, code, language, header, wrap = true, showLineNumbers = false, highlight = false, highlightLines, highlightColor = "primary", highlightGroups, ...props }, ref) => {
+  ({ className, variant, code, language, header, wrap = true, showLineNumbers = false, highlight = false, highlightLines, highlightColor = "primary", highlightGroups, highlightRanges, ...props }, ref) => {
     const [copied, setCopied] = useState2(false);
     const copy = useCallback3(() => {
       navigator.clipboard.writeText(code).then(() => {
@@ -2441,7 +2441,7 @@ 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 showGutter = showLineNumbers || highlightLines != null && highlightLines.length > 0 || highlightGroups != null && highlightGroups.length > 0 || highlightRanges != null && highlightRanges.length > 0;
     const highlighted = useMemo(() => {
       if (!highlight) return null;
       return tokenize(code, language);
@@ -2469,6 +2469,44 @@ var CodeBlock = forwardRef42(
       if (!highlighted) return null;
       return splitTokensByLine(highlighted);
     }, [highlighted]);
+    const SUBSTR_BG = {
+      primary: "bg-primary/15",
+      warning: "bg-warning/20",
+      success: "bg-success/15",
+      danger: "bg-danger/15"
+    };
+    const lineRanges = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      if (!highlightRanges) return map;
+      for (const r of highlightRanges) {
+        const line = r.line;
+        if (!map.has(line)) map.set(line, []);
+        map.get(line).push({ start: r.start, end: r.end, color: r.color ?? "primary" });
+      }
+      return map;
+    }, [highlightRanges]);
+    function segmentedLine(line, ranges) {
+      const sorted = [...ranges].sort((a, b) => a.start - b.start);
+      const parts = [];
+      let pos = 0;
+      for (let i = 0; i < sorted.length; i++) {
+        const r = sorted[i];
+        const s = Math.max(r.start, 0);
+        const e = Math.min(r.end, line.length);
+        if (s > pos) parts.push(/* @__PURE__ */ jsx46("span", { children: line.slice(pos, s) }, `t${i}`));
+        if (e > s) {
+          const bg = SUBSTR_BG[r.color] ?? SUBSTR_BG.primary;
+          parts.push(
+            /* @__PURE__ */ jsx46("span", { className: cn(bg, "rounded-sm px-0.5 -mx-0.5"), children: line.slice(s, e) }, `h${i}`)
+          );
+          pos = e;
+        }
+        while (i + 1 < sorted.length && sorted[i + 1].start < pos) i++;
+      }
+      if (pos < line.length) parts.push(/* @__PURE__ */ jsx46("span", { children: line.slice(pos) }, "end"));
+      if (parts.length === 0) parts.push(/* @__PURE__ */ jsx46("span", { children: "\xA0" }, "e"));
+      return /* @__PURE__ */ jsx46(Fragment2, { children: parts });
+    }
     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: [
@@ -2500,7 +2538,10 @@ var CodeBlock = forwardRef42(
                 wrap && "whitespace-pre-wrap break-words"
               ),
               ...props,
-              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)) })
+              children: /* @__PURE__ */ jsx46("code", { children: perLineTokens.map((lineTokens, i) => {
+                const r = lineRanges.get(i + 1);
+                return /* @__PURE__ */ jsx46("div", { className: cn("px-panel", lineColor.get(i + 1)), children: r ? segmentedLine(lines[i], r) : lineTokens.length > 0 ? renderHighlightedLine(lineTokens) : " " }, i);
+              }) })
             }
           ) : /* @__PURE__ */ jsx46(
             "pre",
@@ -2511,7 +2552,10 @@ var CodeBlock = forwardRef42(
                 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)) })
+              children: /* @__PURE__ */ jsx46("code", { children: lines.map((line, i) => {
+                const r = lineRanges.get(i + 1);
+                return /* @__PURE__ */ jsx46("div", { className: cn("px-panel", lineColor.get(i + 1)), children: r ? segmentedLine(line, r) : line || " " }, i);
+              }) })
             }
           )
         ] })
@@ -2790,7 +2834,7 @@ function TreeView({
 }
 
 // src/ui/cell-type/CellType.complex-displays.tsx
-import { Fragment as Fragment2, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
 function safeStringify(value) {
   const seen = /* @__PURE__ */ new WeakSet();
   return JSON.stringify(value, (_, val) => {
@@ -2863,7 +2907,7 @@ function JsonDisplay({ value }) {
   const preview = jsonPreview(value);
   if (!preview) return /* @__PURE__ */ jsx50("span", { className: "text-muted", children: "\u2014" });
   return /* @__PURE__ */ jsxs21(Root9, { children: [
-    /* @__PURE__ */ jsx50(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors flex w-full max-w-full min-w-0 items-center gap-1.5", children: count === 0 ? /* @__PURE__ */ jsx50("span", { className: "text-muted italic", children: "empty" }) : /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsx50(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors flex w-full max-w-full min-w-0 items-center gap-1.5", children: count === 0 ? /* @__PURE__ */ jsx50("span", { className: "text-muted italic", children: "empty" }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
       /* @__PURE__ */ jsxs21(Badge, { variant: "neutral", style: "soft", className: "text-xs px-1 py-0 leading-none shrink-0", children: [
         count,
         " ",
@@ -2928,7 +2972,7 @@ function TreeDisplay({ value, replacements }) {
     return () => ro.disconnect();
   }, [value]);
   return /* @__PURE__ */ jsxs21(Root9, { children: [
-    /* @__PURE__ */ jsx50(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors flex w-full max-w-full min-w-0 items-center gap-1.5", children: count === 0 ? /* @__PURE__ */ jsx50("span", { className: "text-muted italic", children: "empty" }) : /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsx50(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors flex w-full max-w-full min-w-0 items-center gap-1.5", children: count === 0 ? /* @__PURE__ */ jsx50("span", { className: "text-muted italic", children: "empty" }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
       /* @__PURE__ */ jsxs21(Badge, { variant: "neutral", style: "soft", className: "text-xs px-1 py-0 leading-none shrink-0", children: [
         count,
         " ",
@@ -2968,7 +3012,7 @@ function ArrayDisplay({ value }) {
     return () => ro.disconnect();
   }, [value]);
   return /* @__PURE__ */ jsxs21(Root9, { children: [
-    /* @__PURE__ */ jsx50(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors flex w-full max-w-full min-w-0 items-center gap-1.5", children: count === 0 ? /* @__PURE__ */ jsx50("span", { className: "text-muted italic", children: "empty" }) : /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsx50(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors flex w-full max-w-full min-w-0 items-center gap-1.5", children: count === 0 ? /* @__PURE__ */ jsx50("span", { className: "text-muted italic", children: "empty" }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
       /* @__PURE__ */ jsxs21(Badge, { variant: "neutral", style: "soft", className: "text-xs px-1 py-0 leading-none shrink-0", children: [
         count,
         " items"
@@ -2998,7 +3042,7 @@ function ArrayDisplay({ value }) {
 }
 
 // src/ui/cell-type/CellType.tsx
-import { Fragment as Fragment3, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
 function BooleanDisplay({ value }) {
   const t = Boolean(value);
   return /* @__PURE__ */ jsx51("span", { className: cn("inline-flex items-center", t ? "text-success" : "text-muted"), children: /* @__PURE__ */ jsx51("svg", { viewBox: "0 0 12 12", className: "size-icon fill-current", children: t ? /* @__PURE__ */ jsx51("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) : /* @__PURE__ */ jsx51("path", { d: "M2 2l8 8M10 2L2 10", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) });
@@ -3012,7 +3056,7 @@ function applyReplacements(str, replacements) {
 function ImageDisplay({ value }) {
   const src = String(value);
   const [open, setOpen] = useState5(false);
-  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment4, { children: [
     /* @__PURE__ */ jsx51("img", { src, alt: "", className: "size-8 rounded-ui-sm object-cover border border-border cursor-pointer hover:opacity-80 transition-opacity", onClick: () => setOpen(true) }),
     /* @__PURE__ */ jsx51(Root6, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs22(DialogContent, { className: "p-0 overflow-hidden max-w-[90vw] w-auto", children: [
       /* @__PURE__ */ jsx51(DialogTitle, { className: "sr-only", children: "Image preview" }),
@@ -3204,7 +3248,7 @@ function snap(v) {
 }
 
 // src/ui/canvas/Canvas.tsx
-import { Fragment as Fragment4, jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
 var btn = "inline-flex items-center justify-center size-7 rounded-ui-sm border border-border bg-bg text-xs text-fg hover:bg-secondary cursor-pointer";
 var Canvas = forwardRef45(
   ({ className, gridSize = GRID, initialZoom = 1, minZoom = 0.25, maxZoom = 3, zoomStep = 0.1, controls, children, style, onBackgroundClick, offset: controlledOffset, zoom: controlledZoom, onOffsetChange, onZoomChange, ...props }, ref) => {
@@ -3357,7 +3401,7 @@ var Canvas = forwardRef45(
               "%"
             ] }),
             /* @__PURE__ */ jsx52("button", { type: "button", className: btn, onClick: zoomIn, title: "Zoom in", children: "+" }),
-            controls && /* @__PURE__ */ jsxs23(Fragment4, { children: [
+            controls && /* @__PURE__ */ jsxs23(Fragment5, { children: [
               /* @__PURE__ */ jsx52("div", { className: "w-px h-4 bg-border mx-0.5" }),
               controls
             ] })
@@ -3760,7 +3804,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 jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment6, 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);
@@ -3792,7 +3836,7 @@ 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__ */ jsxs29(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(Fragment6, { children: [
             selectedLabels.slice(0, 2).map((opt) => /* @__PURE__ */ jsx59(Badge, { variant: "neutral", style: "soft", children: opt.label }, opt.value)),
             /* @__PURE__ */ jsxs29(Badge, { variant: "neutral", style: "soft", children: [
               "+",
@@ -4165,7 +4209,7 @@ Slider.displayName = "Slider";
 
 // src/ui/markdown/Markdown.tsx
 import { useMemo as useMemo8 } from "react";
-import { Fragment as Fragment6, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -4192,7 +4236,7 @@ function renderInline(text) {
   if (lastIndex < text.length) {
     parts.push(escapeHtml(text.slice(lastIndex)));
   }
-  return parts.length === 1 ? parts[0] : parts.length > 1 ? /* @__PURE__ */ jsx65(Fragment6, { children: parts }) : "";
+  return parts.length === 1 ? parts[0] : parts.length > 1 ? /* @__PURE__ */ jsx65(Fragment7, { children: parts }) : "";
 }
 function parseBlocks(content) {
   const lines = content.split("\n");
@@ -4290,7 +4334,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 jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment8, 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",
   {
@@ -4374,10 +4418,10 @@ var FileDrop = forwardRef57(
         ...props,
         children: [
           /* @__PURE__ */ jsx66("input", { ref: inputRef, type: "file", accept, multiple, className: "hidden", onChange: handleFileChange }),
-          dragOver ? /* @__PURE__ */ jsxs36(Fragment7, { children: [
+          dragOver ? /* @__PURE__ */ jsxs36(Fragment8, { 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__ */ jsxs36(Fragment7, { children: [
+          ] }) : /* @__PURE__ */ jsxs36(Fragment8, { 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 }),
@@ -5056,7 +5100,7 @@ var TexturedSurface = forwardRef59(
 TexturedSurface.displayName = "TexturedSurface";
 
 // src/ui/patterns/textured-surface/ParamTable.tsx
-import { Fragment as Fragment8 } from "react";
+import { Fragment as Fragment9 } from "react";
 import { jsx as jsx72, jsxs as jsxs41 } from "react/jsx-runtime";
 var LAYERS = ["page", "surface", "foreground"];
 var STRENGTHS = ["subtle", "medium", "strong"];
@@ -5069,7 +5113,7 @@ function ParamTable({ texture = "paper-grain" }) {
   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__ */ jsxs41(Fragment8, { children: [
+    LAYERS.map((layer) => /* @__PURE__ */ jsxs41(Fragment9, { 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.1",
+  "version": "0.3.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/sadigaxund/my-you-eye"