@trops/dash-core 0.1.604 → 0.1.606

package/dist/index.esm.js

@@ -2549,6 +2549,27 @@ var ThemeWrapper = function ThemeWrapper(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chosenTheme, themeVariant, themeName, themesForApplication, rawThemes]);
 
+  // Broadcast the app-level theme to a SEPARATE global so
+  // components rendered OUTSIDE the React theme tree
+  // (WidgetBuilderModal, AppUpdatesModal — they live as siblings
+  // of DashboardStage in dash-electron's Dash.js render) can fall
+  // back to it when no dashboard-specific override is in play.
+  //
+  // We can't share the same global with DashboardThemeProvider's
+  // per-workspace broadcast because React commits child effects
+  // BEFORE parent effects — ThemeWrapper would always run last
+  // and silently overwrite the workspace theme. Two separate
+  // globals avoid the race: consumers read
+  // `__dashThemeContext` (workspace) first, fall back to
+  // `__dashAppThemeContext` (app-level) when no workspace is open.
+  useEffect(function () {
+    if (typeof window === "undefined") return undefined;
+    if (contextValue !== null && contextValue !== void 0 && contextValue.currentTheme) {
+      window.__dashAppThemeContext = contextValue;
+      window.dispatchEvent(new Event("dash:theme-changed"));
+    }
+  }, [contextValue]);
+
   // Write the active theme's CSS custom properties to :root so any
   // hex-channel tokens (`bg-[var(--primary-700)]` etc. emitted by
   // ThemeModel) resolve app-wide. Without this, saving a hex theme
@@ -2786,13 +2807,42 @@ var useInstalledWidgets = function useInstalledWidgets() {
     error = _useState6[0],
     setError = _useState6[1];
   var refresh = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _window$mainApi, cMap, builtinWidgets, registryByName, list, installedFromCM, cmSourcePackages, fallbackInstalled, _t;
+    var _window$mainApi, _window$mainApi2, classifyWidget, cMap, builtinWidgets, draftsByPackageDir, draftShortIdToId, allDrafts, _iterator4, _step4, d, shortId, registryByName, list, installedFromCM, cmSourcePackages, fallbackInstalled, _t, _t3;
     return _regeneratorRuntime.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           setIsLoading(true);
           setError(null);
           _context.prev = 1;
+          classifyWidget = function classifyWidget(reg, fallbackName) {
+            var name = (reg === null || reg === void 0 ? void 0 : reg.name) || fallbackName || "";
+            var path = (reg === null || reg === void 0 ? void 0 : reg.path) || "";
+            // 1. Match against drafts metadata by packageDir (canonical).
+            if (path && draftsByPackageDir.has(path)) {
+              return {
+                kind: "draft",
+                draftId: draftsByPackageDir.get(path).id
+              };
+            }
+            // 2. Fallback: the dir name follows `<base>-draft-<shortId>`;
+            //    pluck the shortId and look it up in the drafts list.
+            var m = String(name).match(/-draft-([A-Za-z0-9]+)$/);
+            if (m) {
+              var _shortId = m[1].slice(0, 8);
+              var draftId = draftShortIdToId.get(_shortId) || null;
+              return {
+                kind: "draft",
+                draftId: draftId
+              };
+            }
+            return {
+              kind: "installed",
+              draftId: null
+            };
+          }; // ── Installed widgets from ComponentManager + Registry ───
+          // CM entries with _sourcePackage are registry-installed widgets.
+          // Show each as an individual "installed" entry, enriched with
+          // registry-level metadata (version, path, packageId).
           // ── Built-in widgets from ComponentManager ──────────────
           cMap = ComponentManager.componentMap() || {};
           builtinWidgets = Object.keys(cMap).filter(function (key) {
@@ -2811,33 +2861,80 @@ var useInstalledWidgets = function useInstalledWidgets() {
               version: null,
               path: null,
               source: "builtin",
+              kind: "installed",
+              draftId: null,
               providers: config.providers || [],
               workspace: config.workspace || null,
               componentNames: [key],
               scopedId: key
             };
-          }); // ── Installed widgets from ComponentManager + Registry ───
-          // CM entries with _sourcePackage are registry-installed widgets.
-          // Show each as an individual "installed" entry, enriched with
-          // registry-level metadata (version, path, packageId).
+          }); // ── Drafts (in-progress widgets from the AI Builder) ─────
+          // Drafts on disk look like installed packages — their dirs
+          // sit under @ai-built/<name>-draft-<shortId>/ alongside real
+          // installs. We surface them as `kind: "draft"` so consumers
+          // (dashboard picker, Settings → Widgets) can render them
+          // distinctly (Resume/Delete affordances) or filter them out.
+          // The match is `packageDir`-based when available (canonical)
+          // and falls back to a `-draft-` name-pattern check so legacy
+          // drafts without the on-disk metadata still get classified.
+          draftsByPackageDir = new Map();
+          draftShortIdToId = new Map();
+          if (!((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.drafts) !== null && _window$mainApi !== void 0 && _window$mainApi.list)) {
+            _context.next = 6;
+            break;
+          }
+          _context.prev = 2;
+          _context.next = 3;
+          return window.mainApi.drafts.list();
+        case 3:
+          _t = _context.sent;
+          if (_t) {
+            _context.next = 4;
+            break;
+          }
+          _t = [];
+        case 4:
+          allDrafts = _t;
+          _iterator4 = _createForOfIteratorHelper$M(allDrafts);
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              d = _step4.value;
+              if (d !== null && d !== void 0 && d.packageDir) draftsByPackageDir.set(d.packageDir, d);
+              if (d !== null && d !== void 0 && d.id) {
+                shortId = String(d.id).replace(/^draft-/, "").slice(0, 8);
+                if (shortId) draftShortIdToId.set(shortId, d.id);
+              }
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+          _context.next = 6;
+          break;
+        case 5:
+          _context.prev = 5;
+          _context["catch"](2);
+        case 6:
           registryByName = {};
-          if (!((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && _window$mainApi.widgets)) {
-            _context.next = 3;
+          if (!((_window$mainApi2 = window.mainApi) !== null && _window$mainApi2 !== void 0 && _window$mainApi2.widgets)) {
+            _context.next = 8;
             break;
           }
-          _context.next = 2;
+          _context.next = 7;
           return window.mainApi.widgets.list();
-        case 2:
+        case 7:
           list = _context.sent;
           (list || []).forEach(function (w) {
             registryByName[w.packageId || w.name] = w;
           });
-        case 3:
+        case 8:
           installedFromCM = Object.keys(cMap).filter(function (key) {
             return cMap[key].type === "widget" && !!cMap[key]._sourcePackage;
           }).map(function (key) {
             var config = cMap[key];
             var reg = registryByName[config._sourcePackage] || {};
+            var classification = classifyWidget(reg, config._sourcePackage);
             return {
               name: key,
               displayName: config.name || key,
@@ -2848,6 +2945,8 @@ var useInstalledWidgets = function useInstalledWidgets() {
               version: reg.version || null,
               path: reg.path || null,
               source: "installed",
+              kind: classification.kind,
+              draftId: classification.draftId,
               providers: config.providers || [],
               workspace: config.workspace || null,
               componentNames: [key],
@@ -2864,6 +2963,7 @@ var useInstalledWidgets = function useInstalledWidgets() {
           fallbackInstalled = Object.values(registryByName).filter(function (w) {
             return !cmSourcePackages.has(w.name);
           }).map(function (w) {
+            var classification = classifyWidget(w, w.name);
             return {
               name: w.name,
               displayName: w.displayName || w.name,
@@ -2874,6 +2974,8 @@ var useInstalledWidgets = function useInstalledWidgets() {
               version: w.version || null,
               path: w.path || null,
               source: "installed",
+              kind: classification.kind,
+              draftId: classification.draftId,
               providers: w.providers || [],
               workspace: w.workspace || null,
               componentNames: w.componentNames || [],
@@ -2882,31 +2984,31 @@ var useInstalledWidgets = function useInstalledWidgets() {
             };
           });
           setWidgets([].concat(_toConsumableArray(builtinWidgets), _toConsumableArray(installedFromCM), _toConsumableArray(fallbackInstalled)));
-          _context.next = 5;
+          _context.next = 10;
           break;
-        case 4:
-          _context.prev = 4;
-          _t = _context["catch"](1);
-          setError(_t.message || "Failed to load widgets");
+        case 9:
+          _context.prev = 9;
+          _t3 = _context["catch"](1);
+          setError(_t3.message || "Failed to load widgets");
           setWidgets([]);
-        case 5:
-          _context.prev = 5;
+        case 10:
+          _context.prev = 10;
           setIsLoading(false);
-          return _context.finish(5);
-        case 6:
+          return _context.finish(10);
+        case 11:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[1, 4, 5, 6]]);
+    }, _callee, null, [[1, 9, 10, 11], [2, 5]]);
   })), []);
   var uninstallWidget = useCallback(/*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(widgetName) {
-      var _window$mainApi2;
-      var widget, packageId, cMap, keysToRemove, _t2;
+      var _window$mainApi3;
+      var widget, packageId, cMap, keysToRemove, _t4;
       return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            if ((_window$mainApi2 = window.mainApi) !== null && _window$mainApi2 !== void 0 && _window$mainApi2.widgets) {
+            if ((_window$mainApi3 = window.mainApi) !== null && _window$mainApi3 !== void 0 && _window$mainApi3.widgets) {
               _context2.next = 1;
               break;
             }
@@ -2937,8 +3039,8 @@ var useInstalledWidgets = function useInstalledWidgets() {
             break;
           case 4:
             _context2.prev = 4;
-            _t2 = _context2["catch"](1);
-            throw _t2;
+            _t4 = _context2["catch"](1);
+            throw _t4;
           case 5:
           case "end":
             return _context2.stop();
@@ -5725,6 +5827,45 @@ function ThemeBroadcast(_ref) {
   return null;
 }
 
+/**
+ * Writes the dashboard theme's cssVars to `:root` while mounted, and
+ * restores the previous values on unmount / theme switch.
+ *
+ * ThemeWrapper writes the APP theme's cssVars at the top of the tree.
+ * Without this helper, a dashboard that overrides the app theme with a
+ * hex-channel theme (like "Slack Generic") would carry the right class
+ * names (`bg-[var(--primary-900)]`) but the `--primary-900` variable
+ * on :root would still be the APP theme's value — or undefined if the
+ * app theme is named-family. Hex-themed surfaces then render with no
+ * background. This effect closes that gap by promoting the dashboard
+ * theme's cssVars to :root for the duration of its mount.
+ */
+function DashboardCssVarsBridge(_ref2) {
+  var cssVars = _ref2.cssVars;
+  useEffect(function () {
+    if (!cssVars || typeof document === "undefined") return undefined;
+    var root = document.documentElement;
+    var previous = {};
+    var keys = Object.keys(cssVars);
+    for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+      var key = _keys[_i];
+      previous[key] = root.style.getPropertyValue(key);
+      root.style.setProperty(key, cssVars[key]);
+    }
+    return function () {
+      for (var _i2 = 0, _keys2 = keys; _i2 < _keys2.length; _i2++) {
+        var _key = _keys2[_i2];
+        if (previous[_key]) {
+          root.style.setProperty(_key, previous[_key]);
+        } else {
+          root.style.removeProperty(_key);
+        }
+      }
+    };
+  }, [cssVars]);
+  return null;
+}
+
 /**
  * DashboardThemeProvider
  *
@@ -5735,9 +5876,10 @@ function ThemeBroadcast(_ref) {
  * App chrome (navbar, tab bar, sidebar) stays OUTSIDE this wrapper
  * and keeps the app theme.
  */
-var DashboardThemeProvider = function DashboardThemeProvider(_ref2) {
-  var themeKey = _ref2.themeKey,
-    children = _ref2.children;
+var DashboardThemeProvider = function DashboardThemeProvider(_ref3) {
+  var _contextValue$current;
+  var themeKey = _ref3.themeKey,
+    children = _ref3.children;
   var parentContext = useContext(ThemeContext);
   var themes = parentContext.themes,
     themeVariant = parentContext.themeVariant;
@@ -5769,6 +5911,8 @@ var DashboardThemeProvider = function DashboardThemeProvider(_ref2) {
     value: contextValue,
     children: [/*#__PURE__*/jsx(ThemeBroadcast, {
       ctx: contextValue
+    }), /*#__PURE__*/jsx(DashboardCssVarsBridge, {
+      cssVars: contextValue === null || contextValue === void 0 || (_contextValue$current = contextValue.currentTheme) === null || _contextValue$current === void 0 ? void 0 : _contextValue$current.cssVars
     }), children]
   });
 };
@@ -17604,6 +17748,12 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
   // Filter widgets based on search, author, and provider
   var getFilteredWidgets = function getFilteredWidgets() {
     var filtered = widgets.filter(function (widget) {
+      // Drafts are in-progress widgets — they appear in
+      // Settings → Widgets (as a Draft chip with Resume/Delete
+      // affordances) but never in the dashboard placement picker
+      // since they're not finished products.
+      if (widget.kind === "draft") return false;
+
       // Search filter
       var searchLower = searchQuery.toLowerCase();
       var matchesSearch = !searchQuery || (widget.name || "").toLowerCase().includes(searchLower) || (widget.description || "").toLowerCase().includes(searchLower) || (widget.key || "").toLowerCase().includes(searchLower) || (widget.packageName || "").toLowerCase().includes(searchLower) || (widget.packageTags || []).some(function (t) {
@@ -28958,6 +29108,36 @@ var WorkspaceModel = function WorkspaceModel(workspaceItem) {
 function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
+/**
+ * Last-resort family for ANY channel whose value can't be resolved
+ * (unknown name, missing palette entry, missing shade, …). Picked
+ * because it's universally safelist-covered, has every shade from
+ * 50..950, and is visually neutral — so a misconfigured theme
+ * renders "muted" rather than blank/transparent.
+ *
+ * Slack Generic etc. exposed this: when a channel value was missing
+ * or unrecognized, ThemeModel silently emitted `bg-undefined-700`
+ * (not in any safelist) → Tailwind dropped the class → the
+ * dropdown popover rendered transparent. Falling back here means
+ * no token can be "missing" by the time `getStylesForItem` reads it.
+ */
+var FALLBACK_FAMILY = "gray";
+
+/**
+ * Resolve a channel value to a safelist-covered Tailwind family
+ * name. Returns the original value when it's a hex (the caller
+ * handles those via CSS variables) or a recognized palette family;
+ * otherwise returns FALLBACK_FAMILY so the resulting class always
+ * renders.
+ */
+function resolveChannelFamily(channelValue) {
+  if (isHexColor$1(channelValue)) return channelValue;
+  if (typeof channelValue === "string" && channelValue.length > 0 && TAILWIND_PALETTE && TAILWIND_PALETTE[channelValue]) {
+    return channelValue;
+  }
+  return FALLBACK_FAMILY;
+}
+
 /**
  * getNextLevel
  * Need to generate the levels for tailwind
@@ -28976,6 +29156,11 @@ function invert(shade) {
  * shade. Routes to the arbitrary-value syntax (`bg-[var(--type-shade)]`)
  * when the channel's value is a hex.
  *
+ * Layer 1 fallback (audit follow-up to the Slack Generic bug): if
+ * `channelValue` isn't a hex AND isn't a recognized Tailwind palette
+ * family, fall back to FALLBACK_FAMILY so the emitted class is
+ * always safelist-covered and never resolves to `bg-undefined-700`.
+ *
  * @param {"bg"|"text"|"border"} prefix
  * @param {string} type             channel name (primary | secondary | …)
  * @param {number} shade            tailwind shade (100..950)
@@ -28985,10 +29170,11 @@ function invert(shade) {
 function classFor(prefix, type, shade, channelValue) {
   var hover = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var h = hover ? "hover:" : "";
-  if (isHexColor$1(channelValue)) {
+  var resolved = resolveChannelFamily(channelValue);
+  if (isHexColor$1(resolved)) {
     return "".concat(h).concat(prefix, "-[var(--").concat(type, "-").concat(shade, ")]");
   }
-  return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
+  return "".concat(h).concat(prefix, "-").concat(resolved, "-").concat(shade);
 }
 
 /**
@@ -29001,8 +29187,10 @@ function classFor(prefix, type, shade, channelValue) {
  * produce a `var(--{type}-{shade})` reference that resolves against
  * the CSS custom properties ThemePreviewProvider writes to :root.
  *
- * Returns null for unknown named-color families or shades — caller
- * falls back to className-only reactivity for that token.
+ * Layer 1 fallback: when the channel value or shade can't be
+ * resolved, fall back to FALLBACK_FAMILY's shade so cssValue is
+ * never null. Pairs with classFor's same fallback to guarantee
+ * every (type, shade) tuple yields a renderable token.
  */
 function cssValueFor(type, shade, channelValue) {
   if (isHexColor$1(channelValue)) {
@@ -29015,12 +29203,17 @@ function cssValueFor(type, shade, channelValue) {
       var _hex = shades[shade] || shades[String(shade)];
       if (_hex) return _hex;
     }
-    return null;
+    return fallbackCssValue(shade);
   }
   var family = TAILWIND_PALETTE && TAILWIND_PALETTE[channelValue];
-  if (!family) return null;
+  if (!family) return fallbackCssValue(shade);
   var hex = family[shade] || family[String(shade)];
-  return hex || null;
+  return hex || fallbackCssValue(shade);
+}
+function fallbackCssValue(shade) {
+  var fallback = TAILWIND_PALETTE && TAILWIND_PALETTE[FALLBACK_FAMILY];
+  if (!fallback) return null;
+  return fallback[shade] || fallback[String(shade)] || null;
 }
 function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
   if (isHexColor$1(channelValue)) {
@@ -35205,11 +35398,25 @@ var ChannelEditorModal = function ChannelEditorModal(_ref) {
   var nearest = useMemo(function () {
     return nearestSwatch(selectedHex, families);
   }, [selectedHex, families]);
+
+  // Auto-switch the family tab when the underlying selected color
+  // changes (user picked a different channel/shade or the theme
+  // mutated). Track the last hex we synced for so we don't fight
+  // the user's manual tab clicks — without this guard, every
+  // re-render rebuilds `nearest` as a new object reference and the
+  // effect snaps activeFamily back to the family containing the
+  // current color, making it impossible to browse other families.
+  var lastSyncedHexRef = useRef(null);
   useEffect(function () {
-    if (!isOpen) return;
+    if (!isOpen) {
+      lastSyncedHexRef.current = null;
+      return;
+    }
+    if (lastSyncedHexRef.current === selectedHex) return;
+    lastSyncedHexRef.current = selectedHex;
     if (nearest) setActiveFamily(nearest.family);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, nearest]);
+  }, [isOpen, selectedHex, nearest]);
   function expandChannel(channelKey) {
     setActiveChannel(channelKey);
     setActiveSlot("base");
@@ -48540,7 +48747,27 @@ var InstalledWidgetDetail = function InstalledWidgetDetail(_ref) {
         className: "p-2 rounded bg-red-900/30 border border-red-700 text-xs text-red-400",
         children: updateError
       })
-    }), widget.source !== "builtin" && /*#__PURE__*/jsxs("div", {
+    }), widget.source !== "builtin" && widget.kind === "draft" && /*#__PURE__*/jsxs("div", {
+      className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t ".concat(currentTheme["border-primary-medium"] || "border-white/10"),
+      children: [/*#__PURE__*/jsx(Button, {
+        title: "Resume",
+        onClick: function onClick() {
+          window.dispatchEvent(new CustomEvent("dash:open-widget-builder", {
+            detail: {
+              resumeDraftId: widget.draftId || null
+            }
+          }));
+        },
+        disabled: !widget.draftId,
+        size: "sm"
+      }), /*#__PURE__*/jsx(Button, {
+        title: "Delete",
+        onClick: function onClick() {
+          return onDelete(widget);
+        },
+        size: "sm"
+      })]
+    }), widget.source !== "builtin" && widget.kind !== "draft" && /*#__PURE__*/jsxs("div", {
       className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t ".concat(currentTheme["border-primary-medium"] || "border-white/10"),
       children: [updateInfo && /*#__PURE__*/jsx(Button, {
         title: isUpdating ? "Updating..." : "Update Package to v".concat(updateInfo.latestVersion),
@@ -50007,7 +50234,12 @@ var WidgetsSection = function WidgetsSection(_ref) {
               className: "flex items-center gap-2",
               children: [widget.displayName || widget.name, widget.source === "builtin" && /*#__PURE__*/jsx(Tag3, {
                 text: "Built-in"
-              }), updates.has(widget.name) && /*#__PURE__*/jsx("span", {
+              }), widget.kind === "draft" && /*#__PURE__*/jsx("span", {
+                className: "px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-amber-900/40 text-amber-200 border border-amber-700/30",
+                "data-testid": "widget-draft-chip-".concat(widget.name),
+                title: "In-progress widget \u2014 open to Resume or Delete from the action menu",
+                children: "Draft"
+              }), widget.kind !== "draft" && updates.has(widget.name) && /*#__PURE__*/jsx("span", {
                 className: "text-[10px] text-blue-400 font-medium",
                 "data-testid": "widget-update-badge-".concat(widget.name),
                 children: "Update"