@trops/dash-core 0.1.635 → 0.1.637

package/dist/index.js

@@ -2651,11 +2651,22 @@ var ThemeWrapper = function ThemeWrapper(_ref) {
         written.push(name);
       }
     }
+    // Expose the active light/dark variant as a data attribute so the
+    // design system (dash-electron's design.css `[data-mode="light"]`
+    // block) can flip its surface/text tokens to match. Nothing else
+    // keys off this today, so it's purely additive.
+    var prevMode = root.getAttribute("data-mode");
+    root.setAttribute("data-mode", themeVariant);
     return function () {
       for (var _i2 = 0, _written = written; _i2 < _written.length; _i2++) {
         var _name = _written[_i2];
         root.style.removeProperty(_name);
       }
+      if (prevMode === null) {
+        root.removeAttribute("data-mode");
+      } else {
+        root.setAttribute("data-mode", prevMode);
+      }
     };
   }, [chosenTheme, themeVariant]);
 
@@ -26947,7 +26958,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     })
   }) : useGridLayout ? scrollable ? /*#__PURE__*/jsxRuntime.jsx("div", {
     id: "grid-container-".concat(id),
-    className: "grid w-full min-h-24 p-3 ".concat(item.grid.gap || "gap-2"),
+    className: "dr-grid ".concat(!item.grid.gap || item.grid.gap === "gap-2" ? "dr-grid-gap" : "", " grid w-full min-h-24 p-3 ").concat(item.grid.gap || "gap-2"),
     style: {
       gridTemplateRows: getRowTemplate(item.grid),
       gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(item.grid.cols, ", 1fr)"),
@@ -26958,7 +26969,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     className: "relative w-full ".concat(height, " min-h-24"),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       id: "grid-container-".concat(id),
-      className: "absolute inset-0 grid p-3 ".concat(item.grid.gap || "gap-2"),
+      className: "dr-grid ".concat(!item.grid.gap || item.grid.gap === "gap-2" ? "dr-grid-gap" : "", " absolute inset-0 grid p-3 ").concat(item.grid.gap || "gap-2"),
       style: {
         gridTemplateRows: hasExplicitRowModes() ? getRowTemplate(item.grid) : "repeat(".concat(item.grid.rows, ", minmax(0, 1fr))"),
         gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(item.grid.cols, ", 1fr)"),
@@ -29629,6 +29640,21 @@ var ThemeModel = function ThemeModel() {
             cssVarsAll["--".concat(type, "-").concat(shade)] = hex;
           }
         }
+      } else {
+        // Named channel (e.g. "blue"): emit the shade-500 (brand) hex so
+        // the design system's accent tokens — `var(--primary-500)` /
+        // `var(--secondary-500)` in dash-electron's design.css — bind to
+        // named themes too. Previously only hex themes produced cssVars,
+        // so the Aurora accent fell back to a hardcoded default under any
+        // named theme. cssValueFor resolves named colors via
+        // TAILWIND_PALETTE and is variant-independent, so the accent stays
+        // the same brand color in both light and dark (only surfaces flip).
+        // Components still render via Tailwind class strings (bg-blue-700),
+        // so this is purely additive — no named-theme rendering changes.
+        var hex500 = cssValueFor(type, 500, channelValue);
+        if (hex500) {
+          cssVarsAll["--".concat(type, "-500")] = hex500;
+        }
       }
     });
     // Merge base channel vars with per-token override vars (collected
@@ -58035,7 +58061,7 @@ var DashTabBar = function DashTabBar(_ref) {
     currentTheme = _useContext.currentTheme;
   if (tabs.length === 0) return null;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex flex-row items-center shrink-0 overflow-x-auto gap-1 px-2 py-2.5 border-t ".concat(currentTheme["border-primary-dark"] || "border-gray-700", " ").concat(currentTheme["bg-primary-dark"] || "bg-gray-900", " scrollbar-none"),
+    className: "dr-tabstrip flex flex-row items-center shrink-0 overflow-x-auto gap-1 px-2 py-2.5 border-t ".concat(currentTheme["border-primary-dark"] || "border-gray-700", " ").concat(currentTheme["bg-primary-dark"] || "bg-gray-900", " scrollbar-none"),
     children: tabs.map(function (tab) {
       var isActive = tab.id === activeTabId;
       return /*#__PURE__*/jsxRuntime.jsxs("button", {
@@ -58043,7 +58069,7 @@ var DashTabBar = function DashTabBar(_ref) {
         onClick: function onClick() {
           return onSwitchTab && onSwitchTab(tab.id);
         },
-        className: "group flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md whitespace-nowrap transition-all duration-100 cursor-pointer ".concat(isActive ? "bg-white/15 text-white" : "text-gray-400 hover:bg-white/10 hover:text-gray-200"),
+        className: "dr-pill ".concat(isActive ? "dr-pill-active" : "", " group flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md whitespace-nowrap transition-all duration-100 cursor-pointer ").concat(isActive ? "bg-white/15 text-white" : "text-gray-400 hover:bg-white/10 hover:text-gray-200"),
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           className: "truncate max-w-[140px]",
           children: (tab.name || "Untitled").replace(/^./, function (c) {
@@ -58175,7 +58201,7 @@ var PageTabBar = function PageTabBar(_ref) {
     setDragOverId(null);
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-row items-center shrink-0 overflow-x-auto gap-1 px-2 py-1.5 border-b ".concat(currentTheme["border-primary-dark"] || "border-gray-700", " ").concat(currentTheme["bg-primary-medium"] || "bg-gray-800/50", " scrollbar-none"),
+    className: "dr-tabs flex flex-row items-center shrink-0 overflow-x-auto gap-1 px-2 py-1.5 border-b ".concat(currentTheme["border-neutral-dark"] || "border-neutral-800", " ").concat(currentTheme["bg-none"] || "bg-transparent", " scrollbar-none"),
     children: [pages.length > 1 && sortedPages.map(function (page) {
       var isActive = page.id === activePageId;
       var isDragOver = page.id === dragOverId;
@@ -58198,7 +58224,7 @@ var PageTabBar = function PageTabBar(_ref) {
           return handleDrop(e, page.id);
         },
         onDragEnd: handleDragEnd,
-        className: "group flex items-center gap-1.5 px-3 py-1 text-xs rounded-md whitespace-nowrap transition-all duration-100 cursor-pointer ".concat(isActive ? "bg-white/15 text-white" : "text-gray-400 hover:bg-white/10 hover:text-gray-200", " ").concat(isDragOver ? "ring-1 ring-blue-400" : "", " ").concat(editMode ? "cursor-grab active:cursor-grabbing" : ""),
+        className: "dr-tab ".concat(isActive ? "dr-tab-active" : "", " group flex items-center gap-1.5 px-3 py-1 text-xs rounded-md whitespace-nowrap transition-all duration-100 cursor-pointer ").concat(isActive ? "bg-white/15 text-white" : "text-gray-400 hover:bg-white/10 hover:text-gray-200", " ").concat(isDragOver ? "ring-1 ring-blue-400" : "", " ").concat(editMode ? "cursor-grab active:cursor-grabbing" : ""),
         children: [editingId === page.id ? /*#__PURE__*/jsxRuntime.jsx("input", {
           ref: inputRef,
           type: "text",
@@ -58241,7 +58267,7 @@ var PageTabBar = function PageTabBar(_ref) {
     }), editMode && onAddPage && /*#__PURE__*/jsxRuntime.jsxs("button", {
       type: "button",
       onClick: onAddPage,
-      className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-gray-500 hover:bg-white/10 hover:text-gray-300 transition-colors",
+      className: "dr-tab flex items-center gap-1 px-2 py-1 text-xs rounded-md text-gray-500 hover:bg-white/10 hover:text-gray-300 transition-colors",
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
         icon: "plus",
         className: "h-2.5 w-2.5"
@@ -65828,7 +65854,7 @@ var DashboardHeader = function DashboardHeader(_ref) {
     }
   }, [workspace, workspaceSelected]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex flex-row p-1 justify-between shrink items-center px-4 ".concat(currentTheme["bg-primary-dark"], " py-2"),
+    className: "dr-header flex flex-row p-1 justify-between shrink items-center px-4 ".concat(currentTheme["bg-none"], " py-2"),
     children: preview === true ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
         title: (workspaceSelected.name || "Untitled").replace(/^./, function (c) {
@@ -65841,11 +65867,11 @@ var DashboardHeader = function DashboardHeader(_ref) {
         children: [onPopout !== null && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
           icon: "arrow-up-right-from-square",
           onClick: onPopout,
-          hoverBackgroundColor: "hover:bg-indigo-700"
+          hoverBackgroundColor: "hover:bg-neutral-700"
         }), onClickEdit !== null && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
           icon: "pencil",
           onClick: onClickEdit,
-          hoverBackgroundColor: "hover:bg-indigo-700"
+          hoverBackgroundColor: "hover:bg-neutral-700"
         })]
       })]
     }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -65857,7 +65883,7 @@ var DashboardHeader = function DashboardHeader(_ref) {
           onChange: onNameChange,
           textSize: "text-lg",
           placeholder: "My Workspace",
-          bgColor: currentTheme["bg-primary-very-dark"],
+          bgColor: currentTheme["bg-neutral-very-dark"],
           textColor: currentTheme["text-primary-medium"],
           hasBorder: false,
           autoFocus: true
@@ -65881,7 +65907,7 @@ var DashboardHeader = function DashboardHeader(_ref) {
             onFolderChange(menuId);
           },
           placeholder: "Folder",
-          backgroundColor: currentTheme["bg-primary-very-dark"],
+          backgroundColor: currentTheme["bg-neutral-very-dark"],
           textColor: currentTheme["text-primary-medium"],
           borderColor: currentTheme["border-primary-dark"],
           inputClassName: "py-1 text-sm",
@@ -65916,7 +65942,7 @@ var DashboardHeader = function DashboardHeader(_ref) {
             onThemeChange(themeKey);
           },
           placeholder: "Select a theme",
-          backgroundColor: currentTheme["bg-primary-very-dark"],
+          backgroundColor: currentTheme["bg-neutral-very-dark"],
           textColor: currentTheme["text-primary-medium"],
           borderColor: currentTheme["border-primary-dark"],
           inputClassName: "py-1 text-sm",
@@ -65939,7 +65965,7 @@ var DashboardHeader = function DashboardHeader(_ref) {
           icon: "xmark",
           text: "Cancel",
           onClick: onClickEdit,
-          hoverBackgroundColor: "hover:bg-indigo-700"
+          hoverBackgroundColor: "hover:bg-neutral-700"
         }), onSaveChanges !== null && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon2, {
           icon: "check",
           text: "Save",
@@ -65967,7 +65993,7 @@ function DashboardConfigButton(_ref8) {
     children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
       icon: "sliders",
       onClick: onClick,
-      hoverBackgroundColor: "hover:bg-indigo-700"
+      hoverBackgroundColor: "hover:bg-neutral-700"
     }), unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "absolute top-1 right-1 h-2 w-2 rounded-full bg-amber-400 border border-black/40 pointer-events-none",
       title: "".concat(unresolvedCount, " unresolved provider").concat(unresolvedCount === 1 ? "" : "s")
@@ -67733,6 +67759,15 @@ var ChatMessages = function ChatMessages(_ref) {
   });
 };
 
+var autoResize = function autoResize(el) {
+  if (!el) return;
+  el.style.height = "auto";
+  if (el.scrollHeight === 0) {
+    el.style.height = "";
+    return;
+  }
+  el.style.height = Math.min(el.scrollHeight, 120) + "px";
+};
 var ChatInput = function ChatInput(_ref) {
   var onSend = _ref.onSend,
     onStop = _ref.onStop,
@@ -67743,13 +67778,24 @@ var ChatInput = function ChatInput(_ref) {
     input = _useState2[0],
     setInput = _useState2[1];
   var textareaRef = React.useRef(null);
+
+  // Auto-resize; re-measure once the input's container actually gets laid
+  // out (e.g. the panel is expanded).
   React.useEffect(function () {
-    var el = textareaRef.current;
-    if (el) {
-      el.style.height = "auto";
-      el.style.height = Math.min(el.scrollHeight, 120) + "px";
-    }
+    autoResize(textareaRef.current);
   }, [input]);
+  React.useEffect(function () {
+    var el = textareaRef.current;
+    var parent = el === null || el === void 0 ? void 0 : el.parentElement;
+    if (!parent || typeof ResizeObserver === "undefined") return;
+    var observer = new ResizeObserver(function () {
+      return autoResize(el);
+    });
+    observer.observe(parent);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
   var handleSend = function handleSend() {
     var trimmed = input.trim();
     if (!trimmed || isLoading) return;