@pathscale/ui 1.1.30 → 1.1.32

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

@@ -27,16 +27,23 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const [featureAvailable, setFeatureAvailable] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
     let containerRef;
-    const store = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(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 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) {
-            store().setThemeColor(null);
+            console.log("[tcp] handleColorChange -> center swatch, clearing");
+            store.setThemeColor(null);
             local.onColorChange?.(null, 100);
             return;
         }
-        store().setThemeColor(color.hex);
+        console.log("[tcp] handleColorChange -> setThemeColor", color.hex);
+        store.setThemeColor(color.hex);
         local.onColorChange?.(color.hsl.h, color.hsl.s);
     };
     const GRAYSCALE_SWATCHES = [
@@ -72,10 +79,13 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         }
     ];
     const handleGrayscale = (swatch)=>{
-        store().setThemeColor(null);
+        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"));
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;
@@ -141,7 +151,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                         width: 16,
                         height: 16,
                         get ["class"] () {
-                            return null !== store().themeColor() ? "text-primary" : void 0;
+                            return null !== store.themeColor() ? "text-primary" : void 0;
                         }
                     });
                 }

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

@@ -6,10 +6,6 @@ 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,4 +1,7 @@
 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;
@@ -6,13 +9,20 @@ 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;
+        }
         document.body.appendChild(testEl);
         const computed = getComputedStyle(testEl).getPropertyValue("--csp-test");
         document.body.removeChild(testEl);
         cspAllowsInlineStyles = "1" === computed;
-    } catch  {
+    } catch (err) {
+        log("csp check: threw, disabling", err);
         cspAllowsInlineStyles = false;
     }
+    log("csp check result:", cspAllowsInlineStyles);
     if (!cspAllowsInlineStyles) console.info("[themeColor] CSP blocks inline styles - theme color customization disabled");
     return cspAllowsInlineStyles;
 };
@@ -120,24 +130,50 @@ function pickContentColor(r, g, b) {
     return contrastWithWhite >= contrastWithDark ? "#ffffff" : "#111111";
 }
 function applyThemeColor(hex) {
-    if (!checkCspAllowsInlineStyles()) return;
+    log("applyThemeColor ENTER", hex);
+    if (!checkCspAllowsInlineStyles()) return void log("applyThemeColor BAILED: csp blocks");
     const rgb = parseHex(hex);
-    if (!rgb) return;
+    if (!rgb) return void log("applyThemeColor BAILED: parseHex returned null for", hex);
     const root = document.documentElement;
     const content = pickContentColor(rgb.r, rgb.g, rgb.b);
     const resolvedTheme = getResolvedTheme();
-    for (const varName of PRIMARY_VARS)root.style.setProperty(varName, hex);
-    for (const varName of CONTENT_VARS)root.style.setProperty(varName, content);
-    for (const { name, anchor, mix } of BACKGROUND_VARS[resolvedTheme])root.style.setProperty(name, `color-mix(in oklab, ${hex} ${mix}%, ${anchor})`);
+    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() {
-    if (!checkCspAllowsInlineStyles()) return;
+    log("resetHueShift ENTER");
+    if (!checkCspAllowsInlineStyles()) return void log("resetHueShift BAILED: csp blocks");
     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`,
@@ -151,9 +187,12 @@ function createHueShiftStore(storagePrefix) {
         if (saved && parseHex(saved)) return saved;
         return null;
     };
-    const [themeColor, setThemeColorInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitial());
+    const initial = getInitial();
+    log(`createHueShiftStore id=${storeId} initial localStorage value=`, initial);
+    const [themeColor, setThemeColorInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initial);
     (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);
@@ -165,10 +204,14 @@ 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) requestAnimationFrame(()=>{
-                const color = themeColor();
-                if (null !== color) applyThemeColor(color);
-            });
+            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);
+                });
+            }
         });
         observer.observe(document.documentElement, {
             attributes: true,
@@ -178,8 +221,9 @@ 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;
+        if (!parseHex(color)) return void log(`store id=${storeId} setThemeColor REJECTED (parseHex failed)`);
         setThemeColorInternal(color);
     };
     return {

package/package.json

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