@trops/dash-core 0.1.569 → 0.1.571

package/dist/index.js

@@ -35957,6 +35957,20 @@ function getThemePresets() {
   return [buildRawTheme("Ocean Depth", "blue", "cyan", "teal", "slate"), buildRawTheme("Sunset Ember", "orange", "rose", "amber", "stone"), buildRawTheme("Forest Canopy", "green", "emerald", "lime", "gray"), buildRawTheme("Arctic Night", "slate", "sky", "indigo", "zinc"), buildRawTheme("Royal Amethyst", "purple", "violet", "fuchsia", "gray"), buildRawTheme("Warm Earth", "stone", "amber", "orange", "neutral"), buildRawTheme("Cyber Pulse", "cyan", "blue", "violet", "slate"), buildRawTheme("Rose Garden", "rose", "pink", "fuchsia", "gray"), buildRawTheme("Golden Hour", "amber", "yellow", "orange", "stone"), buildRawTheme("Midnight Sky", "indigo", "blue", "violet", "slate"), buildRawTheme("Spring Meadow", "emerald", "lime", "green", "gray"), buildRawTheme("Coral Reef", "red", "orange", "pink", "zinc"), buildRawTheme("Nordic Ice", "sky", "cyan", "blue", "slate"), buildRawTheme("Twilight Bloom", "violet", "purple", "pink", "gray"), buildRawTheme("Desert Sand", "amber", "orange", "stone", "neutral")];
 }
 
+/**
+ * Brand presets — curated hex palettes mirroring well-known
+ * products. Surfaced in the theme picker so users can pick
+ * familiar brand identities in one click. Hex values flow
+ * through the arbitrary-color-themes pipeline (PRD US-006).
+ *
+ * Each preset spans all four channels (primary, secondary,
+ * tertiary, neutral). When applied, every theme token resolves
+ * to a brand-equivalent shade via the cssVars map.
+ */
+function getBrandPresets() {
+  return [buildRawTheme("Slack Brand", "#4A154B", "#36C5F0", "#ECB22E", "#BCBEC0"), buildRawTheme("Notion Brand", "#2F3437", "#9B6A8C", "#D4845A", "#C1B5A7"), buildRawTheme("GitHub Brand", "#0D1117", "#58A6FF", "#F0883E", "#21262D"), buildRawTheme("Stripe Brand", "#635BFF", "#00D4FF", "#FFD600", "#525F7F"), buildRawTheme("Linear Brand", "#5E6AD2", "#B07FD0", "#E2A8F5", "#1F2026"), buildRawTheme("Discord Brand", "#5865F2", "#57F287", "#FEE75C", "#36393F"), buildRawTheme("Vercel Brand", "#000000", "#0070F3", "#FF0080", "#888888"), buildRawTheme("Figma Brand", "#F24E1E", "#A259FF", "#1ABCFE", "#2C2C2C")];
+}
+
 // ─── Random Generation ───────────────────────────────────────────────────
 
 function generateRandomTheme() {
@@ -36853,6 +36867,133 @@ var PreviewColorsPane = function PreviewColorsPane(_ref) {
   }) : null;
 };
 
+var AA_RATIO = 4.5;
+var CustomHexColorPane = function CustomHexColorPane(_ref) {
+  var onApply = _ref.onApply,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "Custom hex color" : _ref$label;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    input = _useState2[0],
+    setInput = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var normalized = React.useMemo(function () {
+    return DashReact.normalizeHex(input);
+  }, [input]);
+  var isValid = !!normalized;
+
+  // Contrast vs. white — the most common "text on a colored fill"
+  // case for primary buttons / active channels. Low contrast means
+  // light text on the picked color will be hard to read.
+  var contrastVsWhite = React.useMemo(function () {
+    return isValid ? DashReact.contrastRatio(normalized, "#ffffff") : null;
+  }, [normalized, isValid]);
+  var contrastVsBlack = React.useMemo(function () {
+    return isValid ? DashReact.contrastRatio(normalized, "#000000") : null;
+  }, [normalized, isValid]);
+  var bestContrast = contrastVsWhite ? Math.max(contrastVsWhite, contrastVsBlack) : null;
+  var warning = bestContrast !== null && bestContrast < AA_RATIO ? "Best contrast ".concat(bestContrast.toFixed(1), ":1 \u2014 below WCAG AA target (4.5:1). Text overlaid on this color may be hard to read.") : null;
+  function handleApply() {
+    if (!normalized) {
+      setError("Invalid hex (try #4A154B)");
+      return;
+    }
+    setError(null);
+    onApply(normalized);
+    setInput("");
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && isValid) {
+      e.preventDefault();
+      handleApply();
+    }
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-2 p-3 border-t border-gray-700",
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-xs uppercase font-bold tracking-wider text-gray-400",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row items-center gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+        value: input,
+        onChange: function onChange(value) {
+          var _value$target;
+          // dispatchInputChange unwraps the event to a string
+          setInput(typeof value === "string" ? value : (value === null || value === void 0 || (_value$target = value.target) === null || _value$target === void 0 ? void 0 : _value$target.value) || "");
+          setError(null);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder: "#4A154B"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "w-10 h-10 rounded flex-shrink-0",
+        style: {
+          backgroundColor: normalized || "transparent",
+          border: "1px solid rgba(255,255,255,0.15)"
+        },
+        "aria-label": "Color preview"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Apply",
+        onClick: handleApply,
+        disabled: !isValid
+      })]
+    }), error && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption2, {
+      text: error
+    }), warning && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption, {
+      text: warning
+    })]
+  });
+};
+
+var CategorizedColorGrid = function CategorizedColorGrid(_ref) {
+  var onSelect = _ref.onSelect,
+    _ref$selectedHex = _ref.selectedHex,
+    selectedHex = _ref$selectedHex === void 0 ? null : _ref$selectedHex;
+  var families = DashReact.getColorFamilies();
+  var _useState = React.useState(families[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeFamily = _useState2[0],
+    setActiveFamily = _useState2[1];
+  var colors = DashReact.getCuratedColorGrid(activeFamily);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-3 p-3",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-row gap-2 flex-wrap",
+      children: families.map(function (family) {
+        var isActive = activeFamily === family;
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setActiveFamily(family);
+          },
+          className: "px-3 py-1 rounded-full text-xs font-medium transition-colors ".concat(isActive ? "bg-blue-600 text-white" : "bg-gray-700 text-gray-300 hover:bg-gray-600"),
+          children: family
+        }, family);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grid grid-cols-6 gap-1",
+      children: colors.map(function (hex) {
+        var isSelected = selectedHex && hex.toLowerCase() === selectedHex.toLowerCase();
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return onSelect(hex);
+          },
+          title: hex,
+          className: "aspect-square rounded transition-transform hover:scale-110 focus:scale-110 focus:outline-none ".concat(isSelected ? "ring-2 ring-white scale-110" : ""),
+          style: {
+            backgroundColor: hex
+          },
+          "aria-label": "Select color ".concat(hex)
+        }, hex);
+      })
+    })]
+  });
+};
+
 var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
   var _ref$currentColor = _ref.currentColor,
     currentColor = _ref$currentColor === void 0 ? null : _ref$currentColor,
@@ -36929,7 +37070,28 @@ var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx(DashReact.DashPanel.Body, {
         scrollable: true,
         space: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: shade !== null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(CategorizedColorGrid, {
+            onSelect: function onSelect(hex) {
+              return handleChooseColor({
+                colorName: hex,
+                colorType: colorType,
+                shade: shade || 500,
+                panelType: "main"
+              });
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(CustomHexColorPane, {
+            onApply: function onApply(hex) {
+              return handleChooseColor({
+                colorName: hex,
+                colorType: colorType,
+                shade: shade || 500,
+                panelType: "main"
+              });
+            },
+            label: "Custom hex for ".concat(colorType || "channel")
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-col space-y-1",
           children: renderAvailableColors()
         })
@@ -38398,23 +38560,41 @@ var ThemePickerGridPane = function ThemePickerGridPane(_ref) {
     themeVariant = _useContext.themeVariant;
   function renderMenuItem(tk) {
     var displayTheme = themes[tk][themeVariant];
-    var colors = [{
-      colorName: displayTheme["secondary"],
+    // Read inline CSS color values from `cssValue` (v0.1.569+) so
+    // preview swatches render correctly for BOTH named-color and
+    // hex (brand-preset) themes. For hex themes, the className path
+    // resolves to `bg-[var(--secondary-700)]` which depends on the
+    // active theme's CSS variables — those aren't injected for
+    // OTHER themes shown in the picker grid. Inline cssValue
+    // sidesteps that limitation.
+    var cssValue = displayTheme.cssValue || {};
+    var swatches = [{
       type: "secondary",
-      color: displayTheme["bg-secondary-medium"]
+      value: cssValue["bg-secondary-medium"],
+      className: displayTheme["bg-secondary-medium"]
     }, {
-      colorName: displayTheme["tertiary"],
       type: "tertiary",
-      color: displayTheme["bg-tertiary-medium"]
+      value: cssValue["bg-tertiary-medium"],
+      className: displayTheme["bg-tertiary-medium"]
     }, {
-      colorName: displayTheme["neutral"],
       type: "neutral",
-      color: displayTheme["bg-neutral-light"]
+      value: cssValue["bg-neutral-light"],
+      className: displayTheme["bg-neutral-light"]
     }];
-    return colors.map(function (color) {
+    return swatches.map(function (swatch) {
+      // Prefer cssValue (works for any theme). Fall back to className
+      // for pre-v0.1.569 themes without a cssValue map.
+      if (swatch.value) {
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "rounded h-20 w-full",
+          style: {
+            backgroundColor: swatch.value
+          }
+        }, "theme-grid-".concat(swatch.type));
+      }
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "rounded ".concat(color["color"], " h-20 w-full")
-      }, "theme-grid-".concat(color.type));
+        className: "rounded ".concat(swatch.className, " h-20 w-full")
+      }, "theme-grid-".concat(swatch.type));
     });
   }
   function renderCurrentThemes() {
@@ -38574,15 +38754,30 @@ var GENERATE_MODES = {
 
 // ─── Preset Gallery ──────────────────────────────────────────────────────
 
-var PresetCard = function PresetCard(_ref) {
-  var preset = _ref.preset,
-    onSelect = _ref.onSelect,
-    _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? false : _ref$selected;
-  var colors = [preset.primary, preset.secondary, preset.tertiary];
-  var swatchClasses = colors.map(function (c) {
-    return "bg-".concat(c, "-500");
+// Render a swatch for a preset's channel value. Handles both Tailwind
+// named colors (`"blue"` → `bg-blue-500`) and arbitrary-color-themes
+// hex values (`"#4A154B"` → inline style). Used by brand presets which
+// carry hex palettes.
+var PresetSwatch = function PresetSwatch(_ref) {
+  var color = _ref.color;
+  if (DashReact.isHexColor(color)) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "h-6 flex-1 rounded",
+      style: {
+        backgroundColor: DashReact.normalizeHex(color) || color
+      }
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "h-6 flex-1 rounded bg-".concat(color, "-500")
   });
+};
+var PresetCard = function PresetCard(_ref2) {
+  var preset = _ref2.preset,
+    onSelect = _ref2.onSelect,
+    _ref2$selected = _ref2.selected,
+    selected = _ref2$selected === void 0 ? false : _ref2$selected;
+  var colors = [preset.primary, preset.secondary, preset.tertiary];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-2 p-3 rounded-lg cursor-pointer transition-all bg-white/5 hover:bg-white/10 ".concat(selected ? "ring-2 ring-blue-500" : "hover:ring-2 hover:ring-blue-500"),
     onClick: function onClick() {
@@ -38590,9 +38785,9 @@ var PresetCard = function PresetCard(_ref) {
     },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-row gap-1",
-      children: swatchClasses.map(function (cls, i) {
-        return /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-6 flex-1 rounded ".concat(cls)
+      children: colors.map(function (c, i) {
+        return /*#__PURE__*/jsxRuntime.jsx(PresetSwatch, {
+          color: c
         }, i);
       })
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -38601,13 +38796,14 @@ var PresetCard = function PresetCard(_ref) {
     })]
   });
 };
-var PresetGallery = function PresetGallery(_ref2) {
-  var onSelect = _ref2.onSelect,
-    _ref2$selectedPresetI = _ref2.selectedPresetId,
-    selectedPresetId = _ref2$selectedPresetI === void 0 ? null : _ref2$selectedPresetI,
-    _ref2$inline = _ref2.inline,
-    inline = _ref2$inline === void 0 ? false : _ref2$inline;
+var PresetGallery = function PresetGallery(_ref3) {
+  var onSelect = _ref3.onSelect,
+    _ref3$selectedPresetI = _ref3.selectedPresetId,
+    selectedPresetId = _ref3$selectedPresetI === void 0 ? null : _ref3$selectedPresetI,
+    _ref3$inline = _ref3.inline,
+    inline = _ref3$inline === void 0 ? false : _ref3$inline;
   var presets = getThemePresets();
+  var brandPresets = getBrandPresets();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: inline ? "flex flex-col gap-4" : "flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -38622,16 +38818,28 @@ var PresetGallery = function PresetGallery(_ref2) {
           selected: selectedPresetId != null && preset.name === selectedPresetId
         }, i);
       })
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-sm font-semibold opacity-50 mt-4",
+      children: "Brand Presets"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grid grid-cols-3 gap-3",
+      children: brandPresets.map(function (preset, i) {
+        return /*#__PURE__*/jsxRuntime.jsx(PresetCard, {
+          preset: preset,
+          onSelect: onSelect,
+          selected: selectedPresetId != null && preset.name === selectedPresetId
+        }, "brand-".concat(i));
+      })
     })]
   });
 };
 
 // ─── Color Harmony Picker ────────────────────────────────────────────────
 
-var ColorSwatchGrid$1 = function ColorSwatchGrid(_ref3) {
-  var value = _ref3.value,
-    onChange = _ref3.onChange,
-    label = _ref3.label;
+var ColorSwatchGrid$1 = function ColorSwatchGrid(_ref4) {
+  var value = _ref4.value,
+    onChange = _ref4.onChange,
+    label = _ref4.label;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-2",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -38651,10 +38859,10 @@ var ColorSwatchGrid$1 = function ColorSwatchGrid(_ref3) {
     })]
   });
 };
-var PreviewSwatch = function PreviewSwatch(_ref4) {
-  var color = _ref4.color,
-    strategy = _ref4.strategy,
-    customColors = _ref4.customColors;
+var PreviewSwatch = function PreviewSwatch(_ref5) {
+  var color = _ref5.color,
+    strategy = _ref5.strategy,
+    customColors = _ref5.customColors;
   var colors;
   if (strategy === "custom" && customColors) {
     colors = [customColors.primary, customColors.secondary, customColors.tertiary];
@@ -38677,10 +38885,10 @@ var PreviewSwatch = function PreviewSwatch(_ref4) {
     })
   });
 };
-var ColorHarmonyPicker = function ColorHarmonyPicker(_ref5) {
-  var onGenerate = _ref5.onGenerate,
-    _ref5$inline = _ref5.inline,
-    inline = _ref5$inline === void 0 ? false : _ref5$inline;
+var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
+  var onGenerate = _ref6.onGenerate,
+    _ref6$inline = _ref6.inline,
+    inline = _ref6$inline === void 0 ? false : _ref6$inline;
   var _useState = React.useState("blue"),
     _useState2 = _slicedToArray(_useState, 2),
     selectedColor = _useState2[0],
@@ -38774,12 +38982,12 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref5) {
 
 // ─── Wizard Components ──────────────────────────────────────────────────
 
-var MethodCard = function MethodCard(_ref6) {
-  var icon = _ref6.icon,
-    title = _ref6.title,
-    subtitle = _ref6.subtitle,
-    selected = _ref6.selected,
-    onClick = _ref6.onClick;
+var MethodCard = function MethodCard(_ref7) {
+  var icon = _ref7.icon,
+    title = _ref7.title,
+    subtitle = _ref7.subtitle,
+    selected = _ref7.selected,
+    onClick = _ref7.onClick;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-1.5 p-3 rounded-lg cursor-pointer transition-all bg-white/5 hover:bg-white/10 ".concat(selected ? "ring-2 ring-blue-500 bg-white/10" : "hover:ring-1 hover:ring-white/20"),
     onClick: onClick,
@@ -38798,9 +39006,9 @@ var MethodCard = function MethodCard(_ref6) {
     })]
   });
 };
-var RandomPreview = function RandomPreview(_ref7) {
-  var theme = _ref7.theme,
-    onRegenerate = _ref7.onRegenerate;
+var RandomPreview = function RandomPreview(_ref8) {
+  var theme = _ref8.theme,
+    onRegenerate = _ref8.onRegenerate;
   var colors = theme ? [theme.primary, theme.secondary, theme.tertiary] : [];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-4",
@@ -38827,20 +39035,20 @@ var RandomPreview = function RandomPreview(_ref7) {
     })]
   });
 };
-var ThemeQuickCreate = function ThemeQuickCreate(_ref8) {
-  var wizardName = _ref8.wizardName,
-    setWizardName = _ref8.setWizardName,
-    wizardMethod = _ref8.wizardMethod,
-    setWizardMethod = _ref8.setWizardMethod,
-    wizardTheme = _ref8.wizardTheme,
-    setWizardTheme = _ref8.setWizardTheme,
-    onComplete = _ref8.onComplete,
-    _ref8$onExtract = _ref8.onExtract,
-    onExtract = _ref8$onExtract === void 0 ? null : _ref8$onExtract,
-    _ref8$onMapToTheme = _ref8.onMapToTheme,
-    onMapToTheme = _ref8$onMapToTheme === void 0 ? null : _ref8$onMapToTheme,
-    _ref8$initialMethod = _ref8.initialMethod,
-    initialMethod = _ref8$initialMethod === void 0 ? null : _ref8$initialMethod;
+var ThemeQuickCreate = function ThemeQuickCreate(_ref9) {
+  var wizardName = _ref9.wizardName,
+    setWizardName = _ref9.setWizardName,
+    wizardMethod = _ref9.wizardMethod,
+    setWizardMethod = _ref9.setWizardMethod,
+    wizardTheme = _ref9.wizardTheme,
+    setWizardTheme = _ref9.setWizardTheme,
+    onComplete = _ref9.onComplete,
+    _ref9$onExtract = _ref9.onExtract,
+    onExtract = _ref9$onExtract === void 0 ? null : _ref9$onExtract,
+    _ref9$onMapToTheme = _ref9.onMapToTheme,
+    onMapToTheme = _ref9$onMapToTheme === void 0 ? null : _ref9$onMapToTheme,
+    _ref9$initialMethod = _ref9.initialMethod,
+    initialMethod = _ref9$initialMethod === void 0 ? null : _ref9$initialMethod;
   var canCreate = wizardName.trim().length > 0 && wizardTheme !== null;
   var showMethodPicker = initialMethod === null;
   React.useEffect(function () {
@@ -66661,6 +66869,7 @@ exports.generateHarmonyTheme = generateHarmonyTheme;
 exports.generateRandomTheme = generateRandomTheme;
 exports.generateThemeName = generateThemeName;
 exports.getBorderStyle = getBorderStyle;
+exports.getBrandPresets = getBrandPresets;
 exports.getChildrenForLayoutItem = getChildrenForLayoutItem;
 exports.getComponentInLayout = getComponentInLayout;
 exports.getContainerBorderColor = getContainerBorderColor;