@yuva-devlab/ui 2.2.0 → 2.2.1

package/dist/index.cjs

@@ -1337,7 +1337,7 @@ var Checkpoint = React14.forwardRef(
     ...props
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("dl-checkpoint", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "dl-checkpoint__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.History, { className: "size-3 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.History, { className: "dl-checkpoint__icon" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: label }),
       onRestore && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
@@ -1621,11 +1621,11 @@ var CodeBlockCopyButton = React20.forwardRef(({ className, code = "", onClick, .
 });
 CodeBlockCopyButton.displayName = "CodeBlockCopyButton";
 var CodeBlockHeader = React20.forwardRef(({ className, filename, language, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref, className: cn("dl-code-block__header", className), ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "dl-code-block__header-meta", children: [
     filename && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "dl-code-block__filename", children: filename }),
     language && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "dl-code-block__language", children: language })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center gap-1.5", children })
+  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "dl-code-block__header-actions", children })
 ] }));
 CodeBlockHeader.displayName = "CodeBlockHeader";
 var CodeBlockContent = React20.forwardRef(
@@ -3080,16 +3080,10 @@ var SearchInput = React42.forwardRef(
         onClick: onClear,
         "aria-label": "Clear search query",
         tabIndex: -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react21.X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react21.X, { className: "dl-search-icon", "aria-hidden": "true" })
       }
     ) : null;
-    const trailingIcon = loading ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_lucide_react21.Loader2,
-      {
-        className: "size-4 animate-spin text-muted-foreground",
-        "aria-hidden": "true"
-      }
-    ) : clearButton ?? endIcon;
+    const trailingIcon = loading ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react21.Loader2, { className: "dl-search-spinner", "aria-hidden": "true" }) : clearButton ?? endIcon;
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Input,
       {
@@ -3423,7 +3417,7 @@ function MultiSelect({
                   onClick: (e) => handleRemove(e, opt.value),
                   "aria-label": `Remove ${opt.label}`,
                   className: "dl-multi-select-chip__remove",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.X, { className: "size-3" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.X, { className: "dl-multi-select-chip__icon" })
                 }
               )
             ] }, opt.value)),
@@ -3433,7 +3427,7 @@ function MultiSelect({
               " more"
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.ChevronDown, { className: "dl-multi-select-chevron" })
         ]
       }
     ) }),
@@ -5255,7 +5249,7 @@ var PromptInput = React74.forwardRef(
         ...props,
         children: [
           files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "dl-prompt-input__attachments", children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "dl-prompt-input__chip", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react34.FileText, { className: "size-3 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react34.FileText, { className: "dl-prompt-input__chip-icon" }),
             /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "dl-prompt-input__chip-name", children: file.name }),
             /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "button",
@@ -5264,7 +5258,7 @@ var PromptInput = React74.forwardRef(
                 onClick: () => handleRemoveFile(file.id),
                 "aria-label": `Remove ${file.name}`,
                 className: "dl-prompt-input__chip-remove",
-                children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react34.X, { className: "size-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react34.X, { className: "dl-prompt-input__chip-icon" })
               }
             )
           ] }, file.id)) }),
@@ -5510,18 +5504,18 @@ var TerminalHeader = React77.forwardRef(
         className: cn("dl-terminal__header", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "dl-terminal__header-left", children: [
             windowControls && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "dl-terminal__dots", "aria-hidden": "true", children: [
               /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "dl-terminal__dot" }),
               /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "dl-terminal__dot" }),
               /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "dl-terminal__dot" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "dl-terminal__title", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react37.Terminal, { className: "size-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react37.Terminal, { className: "dl-terminal__icon" }),
               /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { children: command ?? "Terminal" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "dl-terminal__header-actions", children: [
             /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
               "button",
               {
@@ -5529,7 +5523,13 @@ var TerminalHeader = React77.forwardRef(
                 onClick: handleCopy,
                 "aria-label": copied ? "Copied" : "Copy output",
                 className: "dl-code-block__copy-btn",
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react37.Check, { className: "size-3.5 text-success" }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react37.Copy, { className: "size-3.5" })
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                  import_lucide_react37.Check,
+                  {
+                    className: "dl-terminal__icon",
+                    style: { color: "var(--success, #22c55e)" }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react37.Copy, { className: "dl-terminal__icon" })
               }
             ),
             children
@@ -5685,16 +5685,25 @@ var ModelSelector = React78.forwardRef(
               "aria-haspopup": "listbox",
               "aria-expanded": isOpen,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                  currentModel?.icon ?? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react38.Bot, { className: "size-3.5 text-primary" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "font-semibold text-foreground", children: currentModel ? currentModel.name : placeholder })
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "dl-model-selector__trigger-label", children: [
+                  currentModel?.icon ?? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                    import_lucide_react38.Bot,
+                    {
+                      style: {
+                        width: "0.875rem",
+                        height: "0.875rem",
+                        color: "var(--primary)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { style: { fontWeight: 600, color: "var(--foreground)" }, children: currentModel ? currentModel.name : placeholder })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   import_lucide_react38.ChevronDown,
                   {
                     className: cn(
-                      "size-3 text-muted-foreground transition-transform duration-200",
-                      isOpen && "rotate-180"
+                      "dl-model-selector__chevron",
+                      isOpen && "dl-model-selector__chevron--open"
                     )
                   }
                 )
@@ -5702,8 +5711,8 @@ var ModelSelector = React78.forwardRef(
             }
           ),
           isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "dl-model-selector__content", role: "listbox", children: [
-            models.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react38.Search, { className: "absolute left-2 top-2.5 size-3 text-muted-foreground" }),
+            models.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "dl-model-selector__search-wrapper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react38.Search, { className: "dl-model-selector__search-icon" }),
               /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "input",
                 {
@@ -5711,12 +5720,13 @@ var ModelSelector = React78.forwardRef(
                   placeholder: "Filter models...",
                   value: query,
                   onChange: (e) => setQuery(e.target.value),
-                  className: "dl-model-selector__search w-full pl-7",
+                  className: "dl-model-selector__search",
+                  style: { width: "100%", paddingLeft: "1.75rem" },
                   autoFocus: true
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex flex-col gap-0.5", children: filteredModels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "p-3 text-center text-xs text-muted-foreground", children: "No matching models found" }) : filteredModels.map((model) => {
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "dl-model-selector__list", children: filteredModels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "dl-model-selector__empty", children: "No matching models found" }) : filteredModels.map((model) => {
               const isSelected = model.id === activeId;
               return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
                 "div",
@@ -5728,14 +5738,24 @@ var ModelSelector = React78.forwardRef(
                   className: cn(
                     "dl-model-selector__item",
                     isSelected && "dl-model-selector__item--active",
-                    model.disabled && "opacity-50 cursor-not-allowed"
+                    model.disabled && "dl-cursor-not-allowed"
                   ),
+                  style: model.disabled ? { opacity: 0.5 } : void 0,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "dl-model-selector__item-info", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "dl-model-selector__item-title", children: [
-                        model.icon ?? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react38.Sparkles, { className: "size-3 text-primary" }),
+                        model.icon ?? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                          import_lucide_react38.Sparkles,
+                          {
+                            style: {
+                              width: "0.75rem",
+                              height: "0.75rem",
+                              color: "var(--primary)"
+                            }
+                          }
+                        ),
                         /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: model.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { className: "text-xs text-muted-foreground font-normal", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { className: "dl-model-selector__provider", children: [
                           "(",
                           model.provider,
                           ")"
@@ -5788,11 +5808,11 @@ var PlanHeader = React79.forwardRef(
         "span",
         {
           className: cn(
-            "px-2 py-0.5 rounded-full text-xs font-semibold uppercase tracking-wider",
-            status === "completed" && "bg-success/15 text-success",
-            status === "in-progress" && "bg-primary/15 text-primary",
-            status === "failed" && "bg-destructive/15 text-destructive",
-            status === "pending" && "bg-muted text-muted-foreground"
+            "dl-plan__status-chip",
+            status === "completed" && "dl-plan__status-chip--completed",
+            status === "in-progress" && "dl-plan__status-chip--in-progress",
+            status === "failed" && "dl-plan__status-chip--failed",
+            status === "pending" && "dl-plan__status-chip--pending"
           ),
           children: status
         }
@@ -5817,14 +5837,47 @@ var PlanTask = React79.forwardRef(
     const renderIcon = () => {
       switch (status) {
         case "completed":
-          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react39.CheckCircle2, { className: "size-4 text-success" });
+          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            import_lucide_react39.CheckCircle2,
+            {
+              style: { width: "1rem", height: "1rem", color: "var(--success)" }
+            }
+          );
         case "running":
-          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react39.Loader2, { className: "size-4 text-primary animate-spin" });
+          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            import_lucide_react39.Loader2,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--primary)",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          );
         case "failed":
-          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react39.XCircle, { className: "size-4 text-destructive" });
+          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            import_lucide_react39.XCircle,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--destructive)"
+              }
+            }
+          );
         case "pending":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react39.Circle, { className: "size-4 text-muted-foreground" });
+          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            import_lucide_react39.Circle,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--muted-foreground)"
+              }
+            }
+          );
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
@@ -5847,14 +5900,14 @@ var PlanTask = React79.forwardRef(
                 /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "dl-plan__task-icon", children: renderIcon() }),
                 /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "dl-plan__task-body", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "dl-plan__task-title", children: title }),
-                  description && !expanded && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "dl-plan__task-desc line-clamp-1", children: description })
+                  description && !expanded && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "dl-plan__task-desc dl-line-clamp-1", children: description })
                 ] }),
                 hasChildren && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                   import_lucide_react39.ChevronRight,
                   {
                     className: cn(
-                      "size-3.5 text-muted-foreground transition-transform shrink-0 mt-0.5",
-                      expanded && "rotate-90"
+                      "dl-plan__chevron",
+                      expanded && "dl-plan__chevron--expanded"
                     )
                   }
                 )
@@ -5862,7 +5915,7 @@ var PlanTask = React79.forwardRef(
             }
           ),
           expanded && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "dl-plan__task-details", children: [
-            description && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "mb-2 leading-relaxed", children: description }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "dl-plan__desc-block", children: description }),
             children
           ] })
         ]
@@ -5940,9 +5993,9 @@ var SourceCard = React80.forwardRef(
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "dl-source-card__meta", children: [
             /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "dl-source-card__index", children: source.index }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react40.Globe, { className: "size-3 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react40.Globe, { className: "dl-source-card__icon" }),
             /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "dl-source-card__domain", children: domain }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react40.ExternalLink, { className: "size-2.5 ml-auto text-muted-foreground shrink-0 opacity-70" })
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react40.ExternalLink, { className: "dl-source-card__external" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "dl-source-card__title", title: source.title, children: source.title })
         ]
@@ -5982,15 +6035,15 @@ var import_lucide_react41 = require("lucide-react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var getFileIcon = (name) => {
   if (name.endsWith(".ts") || name.endsWith(".tsx") || name.endsWith(".js") || name.endsWith(".jsx")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FileCode, { className: "size-3.5 text-primary" });
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FileCode, { className: "dl-file-tree__glyph dl-file-tree__glyph--primary" });
   }
   if (name.endsWith(".json")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FileJson, { className: "size-3.5 text-warning" });
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FileJson, { className: "dl-file-tree__glyph dl-file-tree__glyph--warning" });
   }
   if (name.endsWith(".md") || name.endsWith(".mdx")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FileText, { className: "size-3.5 text-info" });
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FileText, { className: "dl-file-tree__glyph dl-file-tree__glyph--info" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.File, { className: "size-3.5 text-muted-foreground" });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.File, { className: "dl-file-tree__glyph dl-file-tree__glyph--muted" });
 };
 var FileTreeNode = React81.forwardRef(
   ({ className, item, level = 0, selectedId, onSelect, ...props }, ref) => {
@@ -6004,7 +6057,7 @@ var FileTreeNode = React81.forwardRef(
       }
       onSelect?.(item);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ref, className: cn("flex flex-col", className), ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ref, className: cn("dl-file-tree__item", className), ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         "div",
         {
@@ -6018,12 +6071,12 @@ var FileTreeNode = React81.forwardRef(
               import_lucide_react41.ChevronRight,
               {
                 className: cn(
-                  "size-3 text-muted-foreground transition-transform shrink-0",
-                  isOpen && "rotate-90"
+                  "dl-file-tree__chevron",
+                  isOpen && "dl-file-tree__chevron--open"
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "dl-file-tree__icon", children: isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FolderOpen, { className: "size-3.5 text-warning shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.Folder, { className: "size-3.5 text-warning shrink-0" }) : getFileIcon(item.name) }),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "dl-file-tree__icon", children: isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.FolderOpen, { className: "dl-file-tree__glyph dl-file-tree__glyph--warning" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react41.Folder, { className: "dl-file-tree__glyph dl-file-tree__glyph--warning" }) : getFileIcon(item.name) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "dl-file-tree__name", children: item.name })
           ]
         }
@@ -6098,13 +6151,13 @@ var StackFrame = React82.forwardRef(
               className: "dl-stack-frame__header",
               onClick: () => hasSnippet && setExpanded((prev) => !prev),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "dl-stack-frame__fn-wrapper", children: [
                   hasSnippet && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                     import_lucide_react42.ChevronRight,
                     {
                       className: cn(
-                        "size-3 text-muted-foreground transition-transform shrink-0",
-                        expanded && "rotate-90"
+                        "dl-stack-frame__chevron",
+                        expanded && "dl-stack-frame__chevron--expanded"
                       )
                     }
                   ),
@@ -6182,24 +6235,33 @@ var import_jsx_runtime87 = require("react/jsx-runtime");
 var getStatusBadge = (status) => {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-1 text-xs text-primary font-medium", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.Loader2, { className: "size-3 animate-spin" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "dl-subagent__status dl-subagent__status--running", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          import_lucide_react43.Loader2,
+          {
+            style: {
+              width: "0.75rem",
+              height: "0.75rem",
+              animation: "spin 1s linear infinite"
+            }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: "Running" })
       ] });
     case "completed":
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-1 text-xs text-success font-medium", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.CheckCircle2, { className: "size-3" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "dl-subagent__status dl-subagent__status--completed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.CheckCircle2, { style: { width: "0.75rem", height: "0.75rem" } }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: "Done" })
       ] });
     case "failed":
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-1 text-xs text-destructive font-medium", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.XCircle, { className: "size-3" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "dl-subagent__status dl-subagent__status--failed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.XCircle, { style: { width: "0.75rem", height: "0.75rem" } }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: "Failed" })
       ] });
     case "idle":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.Circle, { className: "size-3" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "dl-subagent__status dl-subagent__status--idle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react43.Circle, { style: { width: "0.75rem", height: "0.75rem" } }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: "Idle" })
       ] });
   }
@@ -6233,8 +6295,8 @@ var Subagent = React83.forwardRef(
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "dl-subagent__badges", children: [
-              model && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-mono bg-muted text-muted-foreground border border-border", children: model }),
-              conversationId && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-mono bg-muted text-muted-foreground", children: [
+              model && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "dl-subagent__chip", children: model }),
+              conversationId && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "dl-subagent__chip", children: [
                 "#",
                 conversationId.slice(0, 6)
               ] }),
@@ -6243,8 +6305,8 @@ var Subagent = React83.forwardRef(
                 import_lucide_react43.ChevronRight,
                 {
                   className: cn(
-                    "size-3.5 text-muted-foreground transition-transform shrink-0 ml-1",
-                    open && "rotate-90"
+                    "dl-subagent__chevron",
+                    open && "dl-subagent__chevron--open"
                   )
                 }
               )
@@ -6354,10 +6416,30 @@ var QueueItem = React85.forwardRef(
         case "active":
           return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react45.Loader2, { className: "size-3 text-primary animate-spin shrink-0" });
         case "paused":
-          return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react45.Pause, { className: "size-3 text-warning shrink-0" });
+          return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            import_lucide_react45.Pause,
+            {
+              style: {
+                width: "0.75rem",
+                height: "0.75rem",
+                color: "var(--warning, #eab308)",
+                flexShrink: 0
+              }
+            }
+          );
         case "waiting":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react45.Clock, { className: "size-3 text-muted-foreground shrink-0" });
+          return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            import_lucide_react45.Clock,
+            {
+              style: {
+                width: "0.75rem",
+                height: "0.75rem",
+                color: "var(--muted-foreground)",
+                flexShrink: 0
+              }
+            }
+          );
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { ref, className: cn("dl-queue-item", className), ...props, children: [
@@ -6371,23 +6453,23 @@ var QueueItem = React85.forwardRef(
           "span",
           {
             className: cn(
-              "px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wider",
-              task.priority === "high" && "bg-destructive/15 text-destructive",
-              task.priority === "normal" && "bg-primary/15 text-primary",
-              task.priority === "low" && "bg-muted text-muted-foreground"
+              "dl-queue-item__priority",
+              task.priority === "high" && "dl-queue-item__priority--high",
+              task.priority === "normal" && "dl-queue-item__priority--normal",
+              task.priority === "low" && "dl-queue-item__priority--low"
             ),
             children: task.priority
           }
         ),
-        task.estimatedDuration && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "text-xs text-muted-foreground font-mono", children: task.estimatedDuration }),
+        task.estimatedDuration && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "dl-queue-item__duration", children: task.estimatedDuration }),
         onRemove && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           "button",
           {
             type: "button",
             onClick: onRemove,
             "aria-label": "Remove task",
-            className: "text-muted-foreground hover:text-foreground p-0.5 rounded",
-            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react45.X, { className: "size-3.5" })
+            className: "dl-queue-item__remove-btn",
+            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react45.X, { style: { width: "0.875rem", height: "0.875rem" } })
           }
         )
       ] })
@@ -6406,11 +6488,16 @@ var Queue = React85.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { ref, className: cn("dl-queue", className), ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "dl-queue__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react45.ListOrdered, { className: "size-4 text-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "dl-queue__header-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            import_lucide_react45.ListOrdered,
+            {
+              style: { width: "1rem", height: "1rem", color: "var(--primary)" }
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "text-xs text-muted-foreground font-normal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "dl-queue__header-count", children: [
           tasks.length,
           " item",
           tasks.length === 1 ? "" : "s"
@@ -6447,21 +6534,31 @@ var TestCase = React86.forwardRef(
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react46.XCircle, { className: "size-4 text-destructive shrink-0" });
         case "skipped":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react46.MinusCircle, { className: "size-4 text-muted-foreground shrink-0" });
+          return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            import_lucide_react46.MinusCircle,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--muted-foreground)",
+                flexShrink: 0
+              }
+            }
+          );
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { ref, className: cn("dl-test-case", className), ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "div",
         {
-          className: cn("dl-test-case__row", hasError && "cursor-pointer"),
+          className: cn("dl-test-case__row", hasError && "dl-cursor-pointer"),
           onClick: () => hasError && setExpanded((prev) => !prev),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "dl-test-case__info", children: [
               renderIcon(),
               /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "dl-test-case__name", children: test.name })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "dl-test-case__meta", children: [
               test.durationMs !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "dl-test-case__duration", children: [
                 test.durationMs,
                 "ms"
@@ -6470,8 +6567,8 @@ var TestCase = React86.forwardRef(
                 import_lucide_react46.ChevronRight,
                 {
                   className: cn(
-                    "size-3 text-muted-foreground transition-transform",
-                    expanded && "rotate-90"
+                    "dl-test-case__chevron",
+                    expanded && "dl-test-case__chevron--expanded"
                   )
                 }
               )
@@ -6498,10 +6595,15 @@ var TestResults = React86.forwardRef(
     const skipped = tests.filter((t) => t.status === "skipped").length;
     return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { ref, className: cn("dl-test-results", className), ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "dl-test-results__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react46.FlaskConical, { className: "size-4 text-primary" }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "font-semibold text-foreground", children: title }),
-          duration && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "text-xs text-muted-foreground font-mono", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "dl-test-results__header-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            import_lucide_react46.FlaskConical,
+            {
+              style: { width: "1rem", height: "1rem", color: "var(--primary)" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "dl-test-results__title", children: title }),
+          duration && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "dl-test-results__duration", children: [
             "in ",
             duration
           ] })