@yuva-devlab/ui 2.2.0 → 2.2.1

package/dist/index.d.cts

@@ -2680,7 +2680,7 @@ type SwitchProps = React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root
  * @example
  * ```tsx
  * // Basic toggle switch
- * <div className="flex items-center justify-between">
+ * <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
  *   <Label htmlFor="airplane-mode">Airplane Mode</Label>
  *   <Switch id="airplane-mode" checked={enabled} onCheckedChange={setEnabled} />
  * </div>

package/dist/index.d.ts

@@ -2680,7 +2680,7 @@ type SwitchProps = React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root
  * @example
  * ```tsx
  * // Basic toggle switch
- * <div className="flex items-center justify-between">
+ * <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
  *   <Label htmlFor="airplane-mode">Airplane Mode</Label>
  *   <Switch id="airplane-mode" checked={enabled} onCheckedChange={setEnabled} />
  * </div>

package/dist/index.js

@@ -959,7 +959,7 @@ var Checkpoint = React14.forwardRef(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx14("div", { ref, className: cn("dl-checkpoint", className), ...props, children: /* @__PURE__ */ jsxs7("div", { className: "dl-checkpoint__content", children: [
-      /* @__PURE__ */ jsx14(History, { className: "size-3 text-muted-foreground" }),
+      /* @__PURE__ */ jsx14(History, { className: "dl-checkpoint__icon" }),
       /* @__PURE__ */ jsx14("span", { children: label }),
       onRestore && /* @__PURE__ */ jsx14(
         "button",
@@ -1243,11 +1243,11 @@ var CodeBlockCopyButton = React20.forwardRef(({ className, code = "", onClick, .
 });
 CodeBlockCopyButton.displayName = "CodeBlockCopyButton";
 var CodeBlockHeader = React20.forwardRef(({ className, filename, language, children, ...props }, ref) => /* @__PURE__ */ jsxs11("div", { ref, className: cn("dl-code-block__header", className), ...props, children: [
-  /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ jsxs11("div", { className: "dl-code-block__header-meta", children: [
     filename && /* @__PURE__ */ jsx19("span", { className: "dl-code-block__filename", children: filename }),
     language && /* @__PURE__ */ jsx19("span", { className: "dl-code-block__language", children: language })
   ] }),
-  /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1.5", children })
+  /* @__PURE__ */ jsx19("div", { className: "dl-code-block__header-actions", children })
 ] }));
 CodeBlockHeader.displayName = "CodeBlockHeader";
 var CodeBlockContent = React20.forwardRef(
@@ -2706,16 +2706,10 @@ var SearchInput = React42.forwardRef(
         onClick: onClear,
         "aria-label": "Clear search query",
         tabIndex: -1,
-        children: /* @__PURE__ */ jsx44(X2, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx44(X2, { className: "dl-search-icon", "aria-hidden": "true" })
       }
     ) : null;
-    const trailingIcon = loading ? /* @__PURE__ */ jsx44(
-      Loader22,
-      {
-        className: "size-4 animate-spin text-muted-foreground",
-        "aria-hidden": "true"
-      }
-    ) : clearButton ?? endIcon;
+    const trailingIcon = loading ? /* @__PURE__ */ jsx44(Loader22, { className: "dl-search-spinner", "aria-hidden": "true" }) : clearButton ?? endIcon;
     return /* @__PURE__ */ jsx44(
       Input,
       {
@@ -3049,7 +3043,7 @@ function MultiSelect({
                   onClick: (e) => handleRemove(e, opt.value),
                   "aria-label": `Remove ${opt.label}`,
                   className: "dl-multi-select-chip__remove",
-                  children: /* @__PURE__ */ jsx49(X3, { className: "size-3" })
+                  children: /* @__PURE__ */ jsx49(X3, { className: "dl-multi-select-chip__icon" })
                 }
               )
             ] }, opt.value)),
@@ -3059,7 +3053,7 @@ function MultiSelect({
               " more"
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx49(ChevronDown4, { className: "size-4 shrink-0 text-muted-foreground" })
+          /* @__PURE__ */ jsx49(ChevronDown4, { className: "dl-multi-select-chevron" })
         ]
       }
     ) }),
@@ -4887,7 +4881,7 @@ var PromptInput = React74.forwardRef(
         ...props,
         children: [
           files.length > 0 && /* @__PURE__ */ jsx78("div", { className: "dl-prompt-input__attachments", children: files.map((file) => /* @__PURE__ */ jsxs48("span", { className: "dl-prompt-input__chip", children: [
-            /* @__PURE__ */ jsx78(FileText, { className: "size-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsx78(FileText, { className: "dl-prompt-input__chip-icon" }),
             /* @__PURE__ */ jsx78("span", { className: "dl-prompt-input__chip-name", children: file.name }),
             /* @__PURE__ */ jsx78(
               "button",
@@ -4896,7 +4890,7 @@ var PromptInput = React74.forwardRef(
                 onClick: () => handleRemoveFile(file.id),
                 "aria-label": `Remove ${file.name}`,
                 className: "dl-prompt-input__chip-remove",
-                children: /* @__PURE__ */ jsx78(X5, { className: "size-3" })
+                children: /* @__PURE__ */ jsx78(X5, { className: "dl-prompt-input__chip-icon" })
               }
             )
           ] }, file.id)) }),
@@ -5149,18 +5143,18 @@ var TerminalHeader = React77.forwardRef(
         className: cn("dl-terminal__header", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "dl-terminal__header-left", children: [
             windowControls && /* @__PURE__ */ jsxs51("div", { className: "dl-terminal__dots", "aria-hidden": "true", children: [
               /* @__PURE__ */ jsx81("span", { className: "dl-terminal__dot" }),
               /* @__PURE__ */ jsx81("span", { className: "dl-terminal__dot" }),
               /* @__PURE__ */ jsx81("span", { className: "dl-terminal__dot" })
             ] }),
             /* @__PURE__ */ jsxs51("div", { className: "dl-terminal__title", children: [
-              /* @__PURE__ */ jsx81(TerminalIcon, { className: "size-3.5" }),
+              /* @__PURE__ */ jsx81(TerminalIcon, { className: "dl-terminal__icon" }),
               /* @__PURE__ */ jsx81("span", { children: command ?? "Terminal" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "dl-terminal__header-actions", children: [
             /* @__PURE__ */ jsx81(
               "button",
               {
@@ -5168,7 +5162,13 @@ var TerminalHeader = React77.forwardRef(
                 onClick: handleCopy,
                 "aria-label": copied ? "Copied" : "Copy output",
                 className: "dl-code-block__copy-btn",
-                children: copied ? /* @__PURE__ */ jsx81(Check10, { className: "size-3.5 text-success" }) : /* @__PURE__ */ jsx81(Copy3, { className: "size-3.5" })
+                children: copied ? /* @__PURE__ */ jsx81(
+                  Check10,
+                  {
+                    className: "dl-terminal__icon",
+                    style: { color: "var(--success, #22c55e)" }
+                  }
+                ) : /* @__PURE__ */ jsx81(Copy3, { className: "dl-terminal__icon" })
               }
             ),
             children
@@ -5324,16 +5324,25 @@ var ModelSelector = React78.forwardRef(
               "aria-haspopup": "listbox",
               "aria-expanded": isOpen,
               children: [
-                /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-1.5", children: [
-                  currentModel?.icon ?? /* @__PURE__ */ jsx82(Bot, { className: "size-3.5 text-primary" }),
-                  /* @__PURE__ */ jsx82("span", { className: "font-semibold text-foreground", children: currentModel ? currentModel.name : placeholder })
+                /* @__PURE__ */ jsxs52("div", { className: "dl-model-selector__trigger-label", children: [
+                  currentModel?.icon ?? /* @__PURE__ */ jsx82(
+                    Bot,
+                    {
+                      style: {
+                        width: "0.875rem",
+                        height: "0.875rem",
+                        color: "var(--primary)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx82("span", { style: { fontWeight: 600, color: "var(--foreground)" }, children: currentModel ? currentModel.name : placeholder })
                 ] }),
                 /* @__PURE__ */ jsx82(
                   ChevronDown9,
                   {
                     className: cn(
-                      "size-3 text-muted-foreground transition-transform duration-200",
-                      isOpen && "rotate-180"
+                      "dl-model-selector__chevron",
+                      isOpen && "dl-model-selector__chevron--open"
                     )
                   }
                 )
@@ -5341,8 +5350,8 @@ var ModelSelector = React78.forwardRef(
             }
           ),
           isOpen && /* @__PURE__ */ jsxs52("div", { className: "dl-model-selector__content", role: "listbox", children: [
-            models.length > 3 && /* @__PURE__ */ jsxs52("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx82(Search5, { className: "absolute left-2 top-2.5 size-3 text-muted-foreground" }),
+            models.length > 3 && /* @__PURE__ */ jsxs52("div", { className: "dl-model-selector__search-wrapper", children: [
+              /* @__PURE__ */ jsx82(Search5, { className: "dl-model-selector__search-icon" }),
               /* @__PURE__ */ jsx82(
                 "input",
                 {
@@ -5350,12 +5359,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__ */ jsx82("div", { className: "flex flex-col gap-0.5", children: filteredModels.length === 0 ? /* @__PURE__ */ jsx82("div", { className: "p-3 text-center text-xs text-muted-foreground", children: "No matching models found" }) : filteredModels.map((model) => {
+            /* @__PURE__ */ jsx82("div", { className: "dl-model-selector__list", children: filteredModels.length === 0 ? /* @__PURE__ */ jsx82("div", { className: "dl-model-selector__empty", children: "No matching models found" }) : filteredModels.map((model) => {
               const isSelected = model.id === activeId;
               return /* @__PURE__ */ jsxs52(
                 "div",
@@ -5367,14 +5377,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__ */ jsxs52("div", { className: "dl-model-selector__item-info", children: [
                       /* @__PURE__ */ jsxs52("div", { className: "dl-model-selector__item-title", children: [
-                        model.icon ?? /* @__PURE__ */ jsx82(Sparkles4, { className: "size-3 text-primary" }),
+                        model.icon ?? /* @__PURE__ */ jsx82(
+                          Sparkles4,
+                          {
+                            style: {
+                              width: "0.75rem",
+                              height: "0.75rem",
+                              color: "var(--primary)"
+                            }
+                          }
+                        ),
                         /* @__PURE__ */ jsx82("span", { children: model.name }),
-                        /* @__PURE__ */ jsxs52("span", { className: "text-xs text-muted-foreground font-normal", children: [
+                        /* @__PURE__ */ jsxs52("span", { className: "dl-model-selector__provider", children: [
                           "(",
                           model.provider,
                           ")"
@@ -5434,11 +5454,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
         }
@@ -5463,14 +5483,47 @@ var PlanTask = React79.forwardRef(
     const renderIcon = () => {
       switch (status) {
         case "completed":
-          return /* @__PURE__ */ jsx83(CheckCircle24, { className: "size-4 text-success" });
+          return /* @__PURE__ */ jsx83(
+            CheckCircle24,
+            {
+              style: { width: "1rem", height: "1rem", color: "var(--success)" }
+            }
+          );
         case "running":
-          return /* @__PURE__ */ jsx83(Loader25, { className: "size-4 text-primary animate-spin" });
+          return /* @__PURE__ */ jsx83(
+            Loader25,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--primary)",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          );
         case "failed":
-          return /* @__PURE__ */ jsx83(XCircle, { className: "size-4 text-destructive" });
+          return /* @__PURE__ */ jsx83(
+            XCircle,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--destructive)"
+              }
+            }
+          );
         case "pending":
         default:
-          return /* @__PURE__ */ jsx83(Circle6, { className: "size-4 text-muted-foreground" });
+          return /* @__PURE__ */ jsx83(
+            Circle6,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--muted-foreground)"
+              }
+            }
+          );
       }
     };
     return /* @__PURE__ */ jsxs53(
@@ -5493,14 +5546,14 @@ var PlanTask = React79.forwardRef(
                 /* @__PURE__ */ jsx83("div", { className: "dl-plan__task-icon", children: renderIcon() }),
                 /* @__PURE__ */ jsxs53("div", { className: "dl-plan__task-body", children: [
                   /* @__PURE__ */ jsx83("span", { className: "dl-plan__task-title", children: title }),
-                  description && !expanded && /* @__PURE__ */ jsx83("span", { className: "dl-plan__task-desc line-clamp-1", children: description })
+                  description && !expanded && /* @__PURE__ */ jsx83("span", { className: "dl-plan__task-desc dl-line-clamp-1", children: description })
                 ] }),
                 hasChildren && /* @__PURE__ */ jsx83(
                   ChevronRight6,
                   {
                     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"
                     )
                   }
                 )
@@ -5508,7 +5561,7 @@ var PlanTask = React79.forwardRef(
             }
           ),
           expanded && hasChildren && /* @__PURE__ */ jsxs53("div", { className: "dl-plan__task-details", children: [
-            description && /* @__PURE__ */ jsx83("div", { className: "mb-2 leading-relaxed", children: description }),
+            description && /* @__PURE__ */ jsx83("div", { className: "dl-plan__desc-block", children: description }),
             children
           ] })
         ]
@@ -5586,9 +5639,9 @@ var SourceCard = React80.forwardRef(
         children: [
           /* @__PURE__ */ jsxs54("div", { className: "dl-source-card__meta", children: [
             /* @__PURE__ */ jsx84("span", { className: "dl-source-card__index", children: source.index }),
-            /* @__PURE__ */ jsx84(Globe, { className: "size-3 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsx84(Globe, { className: "dl-source-card__icon" }),
             /* @__PURE__ */ jsx84("span", { className: "dl-source-card__domain", children: domain }),
-            /* @__PURE__ */ jsx84(ExternalLink, { className: "size-2.5 ml-auto text-muted-foreground shrink-0 opacity-70" })
+            /* @__PURE__ */ jsx84(ExternalLink, { className: "dl-source-card__external" })
           ] }),
           /* @__PURE__ */ jsx84("div", { className: "dl-source-card__title", title: source.title, children: source.title })
         ]
@@ -5636,15 +5689,15 @@ import {
 import { jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var getFileIcon = (name) => {
   if (name.endsWith(".ts") || name.endsWith(".tsx") || name.endsWith(".js") || name.endsWith(".jsx")) {
-    return /* @__PURE__ */ jsx85(FileCode, { className: "size-3.5 text-primary" });
+    return /* @__PURE__ */ jsx85(FileCode, { className: "dl-file-tree__glyph dl-file-tree__glyph--primary" });
   }
   if (name.endsWith(".json")) {
-    return /* @__PURE__ */ jsx85(FileJson, { className: "size-3.5 text-warning" });
+    return /* @__PURE__ */ jsx85(FileJson, { className: "dl-file-tree__glyph dl-file-tree__glyph--warning" });
   }
   if (name.endsWith(".md") || name.endsWith(".mdx")) {
-    return /* @__PURE__ */ jsx85(FileText2, { className: "size-3.5 text-info" });
+    return /* @__PURE__ */ jsx85(FileText2, { className: "dl-file-tree__glyph dl-file-tree__glyph--info" });
   }
-  return /* @__PURE__ */ jsx85(File, { className: "size-3.5 text-muted-foreground" });
+  return /* @__PURE__ */ jsx85(File, { className: "dl-file-tree__glyph dl-file-tree__glyph--muted" });
 };
 var FileTreeNode = React81.forwardRef(
   ({ className, item, level = 0, selectedId, onSelect, ...props }, ref) => {
@@ -5658,7 +5711,7 @@ var FileTreeNode = React81.forwardRef(
       }
       onSelect?.(item);
     };
-    return /* @__PURE__ */ jsxs55("div", { ref, className: cn("flex flex-col", className), ...props, children: [
+    return /* @__PURE__ */ jsxs55("div", { ref, className: cn("dl-file-tree__item", className), ...props, children: [
       /* @__PURE__ */ jsxs55(
         "div",
         {
@@ -5672,12 +5725,12 @@ var FileTreeNode = React81.forwardRef(
               ChevronRight7,
               {
                 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__ */ jsx85("span", { className: "dl-file-tree__icon", children: isFolder ? isOpen ? /* @__PURE__ */ jsx85(FolderOpen, { className: "size-3.5 text-warning shrink-0" }) : /* @__PURE__ */ jsx85(Folder, { className: "size-3.5 text-warning shrink-0" }) : getFileIcon(item.name) }),
+            /* @__PURE__ */ jsx85("span", { className: "dl-file-tree__icon", children: isFolder ? isOpen ? /* @__PURE__ */ jsx85(FolderOpen, { className: "dl-file-tree__glyph dl-file-tree__glyph--warning" }) : /* @__PURE__ */ jsx85(Folder, { className: "dl-file-tree__glyph dl-file-tree__glyph--warning" }) : getFileIcon(item.name) }),
             /* @__PURE__ */ jsx85("span", { className: "dl-file-tree__name", children: item.name })
           ]
         }
@@ -5752,13 +5805,13 @@ var StackFrame = React82.forwardRef(
               className: "dl-stack-frame__header",
               onClick: () => hasSnippet && setExpanded((prev) => !prev),
               children: [
-                /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+                /* @__PURE__ */ jsxs56("div", { className: "dl-stack-frame__fn-wrapper", children: [
                   hasSnippet && /* @__PURE__ */ jsx86(
                     ChevronRight8,
                     {
                       className: cn(
-                        "size-3 text-muted-foreground transition-transform shrink-0",
-                        expanded && "rotate-90"
+                        "dl-stack-frame__chevron",
+                        expanded && "dl-stack-frame__chevron--expanded"
                       )
                     }
                   ),
@@ -5843,24 +5896,33 @@ import { jsx as jsx87, jsxs as jsxs57 } from "react/jsx-runtime";
 var getStatusBadge = (status) => {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ jsxs57("span", { className: "flex items-center gap-1 text-xs text-primary font-medium", children: [
-        /* @__PURE__ */ jsx87(Loader26, { className: "size-3 animate-spin" }),
+      return /* @__PURE__ */ jsxs57("span", { className: "dl-subagent__status dl-subagent__status--running", children: [
+        /* @__PURE__ */ jsx87(
+          Loader26,
+          {
+            style: {
+              width: "0.75rem",
+              height: "0.75rem",
+              animation: "spin 1s linear infinite"
+            }
+          }
+        ),
         /* @__PURE__ */ jsx87("span", { children: "Running" })
       ] });
     case "completed":
-      return /* @__PURE__ */ jsxs57("span", { className: "flex items-center gap-1 text-xs text-success font-medium", children: [
-        /* @__PURE__ */ jsx87(CheckCircle25, { className: "size-3" }),
+      return /* @__PURE__ */ jsxs57("span", { className: "dl-subagent__status dl-subagent__status--completed", children: [
+        /* @__PURE__ */ jsx87(CheckCircle25, { style: { width: "0.75rem", height: "0.75rem" } }),
         /* @__PURE__ */ jsx87("span", { children: "Done" })
       ] });
     case "failed":
-      return /* @__PURE__ */ jsxs57("span", { className: "flex items-center gap-1 text-xs text-destructive font-medium", children: [
-        /* @__PURE__ */ jsx87(XCircle2, { className: "size-3" }),
+      return /* @__PURE__ */ jsxs57("span", { className: "dl-subagent__status dl-subagent__status--failed", children: [
+        /* @__PURE__ */ jsx87(XCircle2, { style: { width: "0.75rem", height: "0.75rem" } }),
         /* @__PURE__ */ jsx87("span", { children: "Failed" })
       ] });
     case "idle":
     default:
-      return /* @__PURE__ */ jsxs57("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx87(Circle7, { className: "size-3" }),
+      return /* @__PURE__ */ jsxs57("span", { className: "dl-subagent__status dl-subagent__status--idle", children: [
+        /* @__PURE__ */ jsx87(Circle7, { style: { width: "0.75rem", height: "0.75rem" } }),
         /* @__PURE__ */ jsx87("span", { children: "Idle" })
       ] });
   }
@@ -5894,8 +5956,8 @@ var Subagent = React83.forwardRef(
               ] })
             ] }),
             /* @__PURE__ */ jsxs57("div", { className: "dl-subagent__badges", children: [
-              model && /* @__PURE__ */ jsx87("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__ */ jsxs57("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-mono bg-muted text-muted-foreground", children: [
+              model && /* @__PURE__ */ jsx87("span", { className: "dl-subagent__chip", children: model }),
+              conversationId && /* @__PURE__ */ jsxs57("span", { className: "dl-subagent__chip", children: [
                 "#",
                 conversationId.slice(0, 6)
               ] }),
@@ -5904,8 +5966,8 @@ var Subagent = React83.forwardRef(
                 ChevronRight9,
                 {
                   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"
                   )
                 }
               )
@@ -6015,10 +6077,30 @@ var QueueItem = React85.forwardRef(
         case "active":
           return /* @__PURE__ */ jsx89(Loader27, { className: "size-3 text-primary animate-spin shrink-0" });
         case "paused":
-          return /* @__PURE__ */ jsx89(Pause, { className: "size-3 text-warning shrink-0" });
+          return /* @__PURE__ */ jsx89(
+            Pause,
+            {
+              style: {
+                width: "0.75rem",
+                height: "0.75rem",
+                color: "var(--warning, #eab308)",
+                flexShrink: 0
+              }
+            }
+          );
         case "waiting":
         default:
-          return /* @__PURE__ */ jsx89(Clock, { className: "size-3 text-muted-foreground shrink-0" });
+          return /* @__PURE__ */ jsx89(
+            Clock,
+            {
+              style: {
+                width: "0.75rem",
+                height: "0.75rem",
+                color: "var(--muted-foreground)",
+                flexShrink: 0
+              }
+            }
+          );
       }
     };
     return /* @__PURE__ */ jsxs59("div", { ref, className: cn("dl-queue-item", className), ...props, children: [
@@ -6032,23 +6114,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__ */ jsx89("span", { className: "text-xs text-muted-foreground font-mono", children: task.estimatedDuration }),
+        task.estimatedDuration && /* @__PURE__ */ jsx89("span", { className: "dl-queue-item__duration", children: task.estimatedDuration }),
         onRemove && /* @__PURE__ */ jsx89(
           "button",
           {
             type: "button",
             onClick: onRemove,
             "aria-label": "Remove task",
-            className: "text-muted-foreground hover:text-foreground p-0.5 rounded",
-            children: /* @__PURE__ */ jsx89(X6, { className: "size-3.5" })
+            className: "dl-queue-item__remove-btn",
+            children: /* @__PURE__ */ jsx89(X6, { style: { width: "0.875rem", height: "0.875rem" } })
           }
         )
       ] })
@@ -6067,11 +6149,16 @@ var Queue = React85.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ jsxs59("div", { ref, className: cn("dl-queue", className), ...props, children: [
       /* @__PURE__ */ jsxs59("div", { className: "dl-queue__header", children: [
-        /* @__PURE__ */ jsxs59("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx89(ListOrdered, { className: "size-4 text-primary" }),
+        /* @__PURE__ */ jsxs59("div", { className: "dl-queue__header-left", children: [
+          /* @__PURE__ */ jsx89(
+            ListOrdered,
+            {
+              style: { width: "1rem", height: "1rem", color: "var(--primary)" }
+            }
+          ),
           /* @__PURE__ */ jsx89("span", { children: title })
         ] }),
-        /* @__PURE__ */ jsxs59("span", { className: "text-xs text-muted-foreground font-normal", children: [
+        /* @__PURE__ */ jsxs59("span", { className: "dl-queue__header-count", children: [
           tasks.length,
           " item",
           tasks.length === 1 ? "" : "s"
@@ -6114,21 +6201,31 @@ var TestCase = React86.forwardRef(
           return /* @__PURE__ */ jsx90(XCircle3, { className: "size-4 text-destructive shrink-0" });
         case "skipped":
         default:
-          return /* @__PURE__ */ jsx90(MinusCircle, { className: "size-4 text-muted-foreground shrink-0" });
+          return /* @__PURE__ */ jsx90(
+            MinusCircle,
+            {
+              style: {
+                width: "1rem",
+                height: "1rem",
+                color: "var(--muted-foreground)",
+                flexShrink: 0
+              }
+            }
+          );
       }
     };
     return /* @__PURE__ */ jsxs60("div", { ref, className: cn("dl-test-case", className), ...props, children: [
       /* @__PURE__ */ jsxs60(
         "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__ */ jsxs60("div", { className: "dl-test-case__info", children: [
               renderIcon(),
               /* @__PURE__ */ jsx90("span", { className: "dl-test-case__name", children: test.name })
             ] }),
-            /* @__PURE__ */ jsxs60("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs60("div", { className: "dl-test-case__meta", children: [
               test.durationMs !== void 0 && /* @__PURE__ */ jsxs60("span", { className: "dl-test-case__duration", children: [
                 test.durationMs,
                 "ms"
@@ -6137,8 +6234,8 @@ var TestCase = React86.forwardRef(
                 ChevronRight10,
                 {
                   className: cn(
-                    "size-3 text-muted-foreground transition-transform",
-                    expanded && "rotate-90"
+                    "dl-test-case__chevron",
+                    expanded && "dl-test-case__chevron--expanded"
                   )
                 }
               )
@@ -6165,10 +6262,15 @@ var TestResults = React86.forwardRef(
     const skipped = tests.filter((t) => t.status === "skipped").length;
     return /* @__PURE__ */ jsxs60("div", { ref, className: cn("dl-test-results", className), ...props, children: [
       /* @__PURE__ */ jsxs60("div", { className: "dl-test-results__header", children: [
-        /* @__PURE__ */ jsxs60("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx90(FlaskConical, { className: "size-4 text-primary" }),
-          /* @__PURE__ */ jsx90("span", { className: "font-semibold text-foreground", children: title }),
-          duration && /* @__PURE__ */ jsxs60("span", { className: "text-xs text-muted-foreground font-mono", children: [
+        /* @__PURE__ */ jsxs60("div", { className: "dl-test-results__header-left", children: [
+          /* @__PURE__ */ jsx90(
+            FlaskConical,
+            {
+              style: { width: "1rem", height: "1rem", color: "var(--primary)" }
+            }
+          ),
+          /* @__PURE__ */ jsx90("span", { className: "dl-test-results__title", children: title }),
+          duration && /* @__PURE__ */ jsxs60("span", { className: "dl-test-results__duration", children: [
             "in ",
             duration
           ] })