@trops/dash-core 0.1.575 → 0.1.576

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, isHexColor, deriveShades, colorTypes, TAILWIND_PALETTE, Toggle, normalizeHex, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, themeVariants, SubHeading, Heading2, Paragraph2, Paragraph3, ButtonIcon3, Tag2, Alert, Alert2, Alert3, Toast, Toast2, Toast3, ProgressBar, ProgressBar2, ProgressBar3, MenuItem, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Caption3, Code, Code2, Code3, Divider, Divider2, Divider3, DashPanel2, DashPanel3, Tabs, Tabs2, Tabs3, Accordion, Accordion2, Accordion3, Toggle2, Toggle3, TextArea, Checkbox, Slider, RadioGroup, AlertBanner, StatusBadge, Skeleton, StatCard, DataList, EmptyState, Card, Panel2, hexToRgb, rgbToHsl, rgbToHex, hslToRgb, ThemeFromUrlPane, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, isHexColor as isHexColor$1, deriveShades, colorTypes, TAILWIND_PALETTE, Toggle, normalizeHex as normalizeHex$1, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, themeVariants, SubHeading, Heading2, Paragraph2, Paragraph3, ButtonIcon3, Tag2, Alert, Alert2, Alert3, Toast, Toast2, Toast3, ProgressBar, ProgressBar2, ProgressBar3, MenuItem, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Caption3, Code, Code2, Code3, Divider, Divider2, Divider3, DashPanel2, DashPanel3, Tabs, Tabs2, Tabs3, Accordion, Accordion2, Accordion3, Toggle2, Toggle3, TextArea, Checkbox, Slider, RadioGroup, AlertBanner, StatusBadge, Skeleton, StatCard, DataList, EmptyState, Card, Panel2, ThemeFromUrlPane, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { FontAwesomeIcon, ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -28902,7 +28902,7 @@ 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(channelValue)) {
+  if (isHexColor$1(channelValue)) {
     return "".concat(h).concat(prefix, "-[var(--").concat(type, "-").concat(shade, ")]");
   }
   return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
@@ -28922,7 +28922,7 @@ function classFor(prefix, type, shade, channelValue) {
  * falls back to className-only reactivity for that token.
  */
 function cssValueFor(type, shade, channelValue) {
-  if (isHexColor(channelValue)) {
+  if (isHexColor$1(channelValue)) {
     // Resolve to a real hex so non-active themes (e.g. tiles in the
     // theme picker) can render inline without depending on :root
     // cssVars, which are only written for the currently-active
@@ -28940,7 +28940,7 @@ function cssValueFor(type, shade, channelValue) {
   return hex || null;
 }
 function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
-  if (isHexColor(channelValue)) {
+  if (isHexColor$1(channelValue)) {
     return "bg-gradient-to-".concat(direction, " from-[var(--").concat(type, "-").concat(fromShade, ")] via-[var(--").concat(type, "-").concat(viaShade, ")] to-[var(--").concat(type, "-").concat(toShade, ")]");
   }
   return "bg-gradient-to-".concat(direction, " from-").concat(channelValue, "-").concat(fromShade, " via-").concat(channelValue, "-").concat(viaShade, " to-").concat(channelValue, "-").concat(toShade);
@@ -28950,7 +28950,7 @@ var ThemeModel = function ThemeModel() {
   try {
     var applyOverride = function applyOverride(variantKey, key, value) {
       var m = key.match(OVR_TOKEN_RE);
-      if (m && typeof value === "string" && isHexColor(value)) {
+      if (m && typeof value === "string" && isHexColor$1(value)) {
         var prefix = m[1];
         var overrideChannel = m[2];
         var level = m[3];
@@ -29087,7 +29087,7 @@ var ThemeModel = function ThemeModel() {
     // PRD: arbitrary-color-themes.md.
     var hexChannels = new Set();
     colorTypes.forEach(function (type) {
-      if (isHexColor(theme[type])) hexChannels.add(type);
+      if (isHexColor$1(theme[type])) hexChannels.add(type);
     });
     var overrideTargetsHexChannel = function overrideTargetsHexChannel(key) {
       var m = key.match(/^(?:hover-)?(?:bg|text|border|from|via|to)-([a-z]+)-/);
@@ -29149,7 +29149,7 @@ var ThemeModel = function ThemeModel() {
     var cssVarsAll = {};
     colorTypes.forEach(function (type) {
       var channelValue = theme[type];
-      if (isHexColor(channelValue)) {
+      if (isHexColor$1(channelValue)) {
         var shades = deriveShades(channelValue);
         if (shades) {
           for (var _i = 0, _Object$entries = Object.entries(shades); _i < _Object$entries.length; _i++) {
@@ -34780,7 +34780,7 @@ var CHANNELS$1 = [{
   label: "Neutral"
 }];
 function swatchDisplay(channelValue) {
-  if (isHexColor(channelValue)) {
+  if (isHexColor$1(channelValue)) {
     return {
       style: {
         backgroundColor: channelValue
@@ -34850,7 +34850,7 @@ var CustomHexColorPane = function CustomHexColorPane(_ref) {
     error = _useState4[0],
     setError = _useState4[1];
   var normalized = useMemo(function () {
-    return normalizeHex(input);
+    return normalizeHex$1(input);
   }, [input]);
   var isValid = !!normalized;
 
@@ -34949,7 +34949,7 @@ var SHADE_LEVELS = [{
 function channelSwatchProps(theme, themeVariant, channelKey) {
   var _theme$themeVariant;
   var baseValue = theme === null || theme === void 0 || (_theme$themeVariant = theme[themeVariant]) === null || _theme$themeVariant === void 0 ? void 0 : _theme$themeVariant[channelKey];
-  if (isHexColor(baseValue)) {
+  if (isHexColor$1(baseValue)) {
     return {
       style: {
         backgroundColor: baseValue
@@ -34997,7 +34997,7 @@ var ChannelEditorModal = function ChannelEditorModal(_ref) {
     setActiveSlot = _useState6[1];
   var themeData = theme === null || theme === void 0 ? void 0 : theme[themeVariant];
   var baseValue = themeData === null || themeData === void 0 ? void 0 : themeData[activeChannel];
-  var baseHex = isHexColor(baseValue) ? baseValue : null;
+  var baseHex = isHexColor$1(baseValue) ? baseValue : null;
   function expandChannel(channelKey) {
     setActiveChannel(channelKey);
     setActiveSlot("base");
@@ -36903,11 +36903,137 @@ var PanelThemeStudio = function PanelThemeStudio(_ref) {
   });
 };
 
-// Color harmony helpers — inlined so dash-core can ship the new
-// "From Colors" generator without first publishing matching
-// exports from @trops/dash-react. Same math as the planned dash-react
-// counterparts; can be replaced with a re-export once both ship in
-// the same cycle.
+/**
+ * themeGenerator.js
+ *
+ * Utility for generating themes via presets, random generation,
+ * and color-harmony-based generation from a user-selected base color.
+ */
+// All color math is inlined here (no @trops/dash-react import). This
+// file is reachable from Electron's main process via
+// `electron/controller/paletteToThemeMapper.js`. Importing dash-react
+// from a main-process reachable file pulls dash-react's renderer
+// bundle into the main bundle — that bundle has top-level browser
+// API access (`window.ResizeObserver` in CodeEditorVS) which throws
+// when required under Node. Keeping this module pure-JS / no-deps
+// breaks the chain.
+
+var HEX_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function isHexColor(value) {
+  return typeof value === "string" && HEX_RE.test(value.trim());
+}
+function normalizeHex(input) {
+  if (typeof input !== "string") return null;
+  var s = input.trim().toLowerCase();
+  if (!s.startsWith("#")) s = "#".concat(s);
+  if (!HEX_RE.test(s)) return null;
+  if (s.length === 4) s = "#".concat(s[1]).concat(s[1]).concat(s[2]).concat(s[2]).concat(s[3]).concat(s[3]);else if (s.length === 5) s = "#".concat(s[1]).concat(s[1]).concat(s[2]).concat(s[2]).concat(s[3]).concat(s[3]);else if (s.length === 9) s = s.slice(0, 7);
+  return s;
+}
+function hexToRgb(hex) {
+  var n = normalizeHex(hex);
+  if (!n) return null;
+  var v = parseInt(n.slice(1), 16);
+  return {
+    r: v >> 16 & 0xff,
+    g: v >> 8 & 0xff,
+    b: v & 0xff
+  };
+}
+function rgbToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  var c = function c(x) {
+    return Math.max(0, Math.min(255, Math.round(x)));
+  };
+  var h = function h(x) {
+    return c(x).toString(16).padStart(2, "0");
+  };
+  return "#".concat(h(r)).concat(h(g)).concat(h(b));
+}
+function rgbToHsl(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b;
+  var R = r / 255,
+    G = g / 255,
+    B = b / 255;
+  var max = Math.max(R, G, B),
+    min = Math.min(R, G, B);
+  var l = (max + min) / 2;
+  var h = 0,
+    s = 0;
+  if (max !== min) {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case R:
+        h = (G - B) / d + (G < B ? 6 : 0);
+        break;
+      case G:
+        h = (B - R) / d + 2;
+        break;
+      default:
+        h = (R - G) / d + 4;
+    }
+    h *= 60;
+  }
+  return {
+    h: h,
+    s: s,
+    l: l
+  };
+}
+function hslToRgb(_ref3) {
+  var h = _ref3.h,
+    s = _ref3.s,
+    l = _ref3.l;
+  if (s === 0) {
+    var v = l * 255;
+    return {
+      r: v,
+      g: v,
+      b: v
+    };
+  }
+  var c = (1 - Math.abs(2 * l - 1)) * s;
+  var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  var m = l - c / 2;
+  var rp, gp, bp;
+  if (h < 60) {
+    rp = c;
+    gp = x;
+    bp = 0;
+  } else if (h < 120) {
+    rp = x;
+    gp = c;
+    bp = 0;
+  } else if (h < 180) {
+    rp = 0;
+    gp = c;
+    bp = x;
+  } else if (h < 240) {
+    rp = 0;
+    gp = x;
+    bp = c;
+  } else if (h < 300) {
+    rp = x;
+    gp = 0;
+    bp = c;
+  } else {
+    rp = c;
+    gp = 0;
+    bp = x;
+  }
+  return {
+    r: (rp + m) * 255,
+    g: (gp + m) * 255,
+    b: (bp + m) * 255
+  };
+}
+
+// Color harmony helpers — pure JS, no DOM/window access.
 function rotateHex(hex, deltaH) {
   var rgb = hexToRgb(hex);
   if (!rgb) return null;
@@ -37356,11 +37482,11 @@ var GENERATE_MODES = {
 // carry hex palettes.
 var PresetSwatch = function PresetSwatch(_ref) {
   var color = _ref.color;
-  if (isHexColor(color)) {
+  if (isHexColor$1(color)) {
     return /*#__PURE__*/jsx("div", {
       className: "h-6 flex-1 rounded",
       style: {
-        backgroundColor: normalizeHex(color) || color
+        backgroundColor: normalizeHex$1(color) || color
       }
     });
   }
@@ -37440,7 +37566,7 @@ var PresetGallery = function PresetGallery(_ref3) {
 var PaletteSwatch = function PaletteSwatch(_ref4) {
   var value = _ref4.value,
     label = _ref4.label;
-  var isHex = isHexColor(value);
+  var isHex = isHexColor$1(value);
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-col items-center gap-1 flex-1",
     children: [/*#__PURE__*/jsx("div", {
@@ -37622,7 +37748,7 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref7) {
         className: "text-xs opacity-50",
         children: "Base Color"
       }), /*#__PURE__*/jsx(InlineHexPicker, {
-        selectedHex: isHexColor(selectedColor) ? selectedColor : null,
+        selectedHex: isHexColor$1(selectedColor) ? selectedColor : null,
         onPick: function onPick(hex) {
           return setSelectedColor(hex);
         }