@pathscale/ui 1.1.32 → 1.1.33

package/dist/components/theme-color-picker/ThemeColorPicker.js

@@ -30,19 +30,12 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const store = (0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore)(local.storagePrefix ?? "theme");
     const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hexToColorValue(store.themeColor()));
     const handleColorChange = (color)=>{
-        console.log("[tcp] handleColorChange ENTER", {
-            hex: color.hex,
-            hsl: color.hsl,
-            rgb: color.rgb
-        });
         const { s, l } = color.hsl;
         if (s < 10 && l > 90) {
-            console.log("[tcp] handleColorChange -> center swatch, clearing");
             store.setThemeColor(null);
             local.onColorChange?.(null, 100);
             return;
         }
-        console.log("[tcp] handleColorChange -> setThemeColor", color.hex);
         store.setThemeColor(color.hex);
         local.onColorChange?.(color.hsl.h, color.hsl.s);
     };
@@ -79,13 +72,9 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         }
     ];
     const handleGrayscale = (swatch)=>{
-        console.log("[tcp] handleGrayscale ENTER", swatch);
-        store.setThemeColor(null);
-        (0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.resetHueShift)();
-        local.onColorChange?.(null, 0);
-        console.log("[tcp] handleGrayscale -> onThemeSwitch", swatch.theme);
         local.onThemeSwitch?.(swatch.theme);
-        console.log("[tcp] handleGrayscale AFTER onThemeSwitch, data-theme=", document.documentElement.getAttribute("data-theme"));
+        store.setThemeColor(swatch.hex);
+        local.onColorChange?.(null, 0);
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;

package/dist/components/theme-color-picker/hueShift.d.ts

@@ -6,6 +6,10 @@ export interface HueShiftStore {
     setThemeColor: (color: string | null) => void;
     isAvailable: () => boolean;
 }
+/**
+ * Creates a theme color store with configurable storage prefix.
+ * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
+ */
 export declare function createHueShiftStore(storagePrefix: string): HueShiftStore;
 export declare function getDefaultHueShiftStore(): HueShiftStore;
 export { resetHueShift };

package/dist/components/theme-color-picker/hueShift.js

@@ -1,7 +1,4 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-const log = (...args)=>{
-    console.log("[tcp]", ...args);
-};
 let cspAllowsInlineStyles = null;
 const checkCspAllowsInlineStyles = ()=>{
     if (null !== cspAllowsInlineStyles) return cspAllowsInlineStyles;
@@ -9,22 +6,16 @@ const checkCspAllowsInlineStyles = ()=>{
     try {
         const testEl = document.createElement("div");
         testEl.style.setProperty("--csp-test", "1");
-        if (!document.body) {
-            log("csp check: document.body missing, assuming allowed");
-            cspAllowsInlineStyles = true;
-            return true;
-        }
+        if (!document.body) return true;
         document.body.appendChild(testEl);
         const computed = getComputedStyle(testEl).getPropertyValue("--csp-test");
         document.body.removeChild(testEl);
         cspAllowsInlineStyles = "1" === computed;
-    } catch (err) {
-        log("csp check: threw, disabling", err);
+    } catch  {
         cspAllowsInlineStyles = false;
     }
-    log("csp check result:", cspAllowsInlineStyles);
-    if (!cspAllowsInlineStyles) console.info("[themeColor] CSP blocks inline styles - theme color customization disabled");
-    return cspAllowsInlineStyles;
+    if (false === cspAllowsInlineStyles) console.info("[themeColor] CSP blocks inline styles - theme color customization disabled");
+    return cspAllowsInlineStyles ?? true;
 };
 const PRIMARY_VARS = [
     "--color-primary",
@@ -130,50 +121,24 @@ function pickContentColor(r, g, b) {
     return contrastWithWhite >= contrastWithDark ? "#ffffff" : "#111111";
 }
 function applyThemeColor(hex) {
-    log("applyThemeColor ENTER", hex);
-    if (!checkCspAllowsInlineStyles()) return void log("applyThemeColor BAILED: csp blocks");
+    if (!checkCspAllowsInlineStyles()) return;
     const rgb = parseHex(hex);
-    if (!rgb) return void log("applyThemeColor BAILED: parseHex returned null for", hex);
+    if (!rgb) return;
     const root = document.documentElement;
     const content = pickContentColor(rgb.r, rgb.g, rgb.b);
     const resolvedTheme = getResolvedTheme();
-    log("applyThemeColor resolvedTheme=", resolvedTheme, "content=", content);
-    log("applyThemeColor data-theme attr=", root.getAttribute("data-theme"));
     for (const varName of PRIMARY_VARS)root.style.setProperty(varName, hex, "important");
     for (const varName of CONTENT_VARS)root.style.setProperty(varName, content, "important");
     for (const { name, anchor, mix } of BACKGROUND_VARS[resolvedTheme])root.style.setProperty(name, `color-mix(in oklab, ${hex} ${mix}%, ${anchor})`, "important");
-    const inlineStyle = root.getAttribute("style") ?? "";
-    log("applyThemeColor inline style attr length=", inlineStyle.length);
-    log("applyThemeColor inline snippet:", inlineStyle.slice(0, 400) + (inlineStyle.length > 400 ? "\u2026" : ""));
-    const cs = getComputedStyle(root);
-    log("applyThemeColor computed --color-primary=", cs.getPropertyValue("--color-primary").trim());
-    log("applyThemeColor computed --nf-accent=", cs.getPropertyValue("--nf-accent").trim());
-    log("applyThemeColor computed --color-nf-accent=", cs.getPropertyValue("--color-nf-accent").trim());
-    log("applyThemeColor computed --color-primary-content=", cs.getPropertyValue("--color-primary-content").trim());
-    log("applyThemeColor computed --nf-on-accent=", cs.getPropertyValue("--nf-on-accent").trim());
-    log("applyThemeColor computed --gradient-start=", cs.getPropertyValue("--gradient-start").trim());
-    log("applyThemeColor computed --gradient-end=", cs.getPropertyValue("--gradient-end").trim());
-    log("applyThemeColor computed --color-base-100=", cs.getPropertyValue("--color-base-100").trim());
-    log("applyThemeColor EXIT");
 }
 function resetHueShift() {
-    log("resetHueShift ENTER");
-    if (!checkCspAllowsInlineStyles()) return void log("resetHueShift BAILED: csp blocks");
+    if (!checkCspAllowsInlineStyles()) return;
     const root = document.documentElement;
     for (const varName of PRIMARY_VARS)root.style.removeProperty(varName);
     for (const varName of CONTENT_VARS)root.style.removeProperty(varName);
     for (const { name } of BACKGROUND_VARS.light)root.style.removeProperty(name);
-    const inlineStyle = root.getAttribute("style") ?? "";
-    log("resetHueShift inline style attr length after=", inlineStyle.length);
-    const cs = getComputedStyle(root);
-    log("resetHueShift computed --nf-accent=", cs.getPropertyValue("--nf-accent").trim());
-    log("resetHueShift computed --color-nf-accent=", cs.getPropertyValue("--color-nf-accent").trim());
-    log("resetHueShift EXIT");
 }
-let storeInstanceCounter = 0;
 function createHueShiftStore(storagePrefix) {
-    const storeId = ++storeInstanceCounter;
-    log(`createHueShiftStore INIT id=${storeId} prefix=${storagePrefix}`);
     const STORAGE_KEY = `${storagePrefix}_theme_color`;
     const LEGACY_KEYS = [
         `${storagePrefix}_hue_shift`,
@@ -187,12 +152,9 @@ function createHueShiftStore(storagePrefix) {
         if (saved && parseHex(saved)) return saved;
         return null;
     };
-    const initial = getInitial();
-    log(`createHueShiftStore id=${storeId} initial localStorage value=`, initial);
-    const [themeColor, setThemeColorInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initial);
+    const [themeColor, setThemeColorInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitial());
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         const color = themeColor();
-        log(`store id=${storeId} effect fired, themeColor=`, color);
         if ("undefined" == typeof window) return;
         if (null === color) {
             localStorage.removeItem(STORAGE_KEY);
@@ -204,14 +166,10 @@ function createHueShiftStore(storagePrefix) {
     });
     if ("undefined" != typeof window) {
         const observer = new MutationObserver((mutations)=>{
-            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
-                log(`store id=${storeId} observer saw data-theme change to=`, document.documentElement.getAttribute("data-theme"));
-                requestAnimationFrame(()=>{
-                    const color = themeColor();
-                    log(`store id=${storeId} observer rAF fired, themeColor=`, color);
-                    if (null !== color) applyThemeColor(color);
-                });
-            }
+            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(()=>{
+                const color = themeColor();
+                if (null !== color) applyThemeColor(color);
+            });
         });
         observer.observe(document.documentElement, {
             attributes: true,
@@ -221,9 +179,8 @@ function createHueShiftStore(storagePrefix) {
         });
     }
     const setThemeColor = (color)=>{
-        log(`store id=${storeId} setThemeColor called with=`, color);
         if (null === color) return void setThemeColorInternal(null);
-        if (!parseHex(color)) return void log(`store id=${storeId} setThemeColor REJECTED (parseHex failed)`);
+        if (!parseHex(color)) return;
         setThemeColorInternal(color);
     };
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "author": "pathscale",
   "repository": {
     "type": "git",