@preference-sl/pref-viewer 2.16.0 → 2.16.2-beta.0

package/src/styles.js

@@ -1,9 +1,71 @@
-export const PrefViewerStyleVariables = {
-    colorPrimary: "#ff6700", // Default accent color - can be overridden via attribute
+/**
+ * localStorage key used to persist supported PrefViewer runtime style overrides.
+ * @type {string}
+ */
+export const PREF_VIEWER_STYLES_STORAGE_KEY = "pref-viewer/styles";
+
+/**
+ * Default style variables used before host overrides or persisted values are applied.
+ * @type {{colorPrimary: string, fontFamily: string, fontSize: string}}
+ */
+const PrefViewerDefaultStyleVariables = {
+    colorPrimary: "#ff6700",
     fontFamily: "'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
+    fontSize: "15px",
+};
+
+/**
+ * Reads persisted runtime style overrides in browser contexts.
+ * Only `colorPrimary` is consumed by `PrefViewerStyleVariables`; other keys are ignored by the host component.
+ * @returns {object} Parsed persisted style overrides, or an empty object when unavailable or invalid.
+ */
+function readPersistedStyleVariables() {
+    if (typeof window === "undefined") {
+        return {};
+    }
+    try {
+        const serialized = window.localStorage?.getItem(PREF_VIEWER_STYLES_STORAGE_KEY);
+        return serialized ? JSON.parse(serialized) : {};
+    } catch (_error) {
+        return {};
+    }
+}
+
+/** @type {object} Persisted raw style overrides loaded during module initialization. */
+const persistedStyleVariables = readPersistedStyleVariables();
+
+/**
+ * Shared style variables consumed by PrefViewer CSS templates and Babylon defaults.
+ * `colorPrimary` can be overridden at runtime through `<pref-viewer styles>`, `viewer.styles`, `viewer.setStyles()`, or `loadConfig({ styles })`.
+ * @type {{colorPrimary: string, fontFamily: string, fontSize: string}}
+ */
+export const PrefViewerStyleVariables = {
+    ...PrefViewerDefaultStyleVariables,
+    colorPrimary: typeof persistedStyleVariables.colorPrimary === "string" && persistedStyleVariables.colorPrimary.trim().length > 0
+        ? persistedStyleVariables.colorPrimary.trim()
+        : PrefViewerDefaultStyleVariables.colorPrimary,
 };
 
+/** Root `<pref-viewer>` host styles. Uses `--pref-viewer-color-primary` so `setStyles({ colorPrimary })` can update mounted instances. */
 export const PrefViewerStyles = `
+    :host {
+        all: initial;
+        display: block;
+        font-family: ${PrefViewerStyleVariables.fontFamily};
+        font-size: ${PrefViewerStyleVariables.fontSize};
+        line-height: 1.2;
+        color: #000000;
+    }
+
+    :host *, :host *::before, :host *::after {
+        box-sizing: border-box;
+    }
+
+    :host ::selection {
+        background: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
+        color: #ffffff;
+    }
+
     :host .pref-viewer-wrapper {
         display: grid !important;
         position: relative;
@@ -50,7 +112,6 @@ export const PrefViewer2DStyles = `
         display: block;
         position: relative;
         outline: none;
-        box-sizing: border-box;
     }
 
     pref-viewer-2d>div>svg {
@@ -67,9 +128,6 @@ export const PrefViewer3DStyles = `
         display: none;
     }
 
-    pref-viewer-3d[show-animation-menu="false"] > div.animation-menu {
-        display: none;
-    }
 
     pref-viewer-3d {
         grid-column: 1;
@@ -89,7 +147,6 @@ export const PrefViewer3DStyles = `
         display: block;
         position: relative;
         outline: none;
-        box-sizing: border-box;
     }
 `;
 
@@ -98,12 +155,12 @@ export const PrefViewerMenu3DStyles = `
         --font-family: ${PrefViewerStyleVariables.fontFamily};
         --font-weight-bold: 600;
         --font-weight-medium: 500;
-        --font-size-large: 1.1rem;
-        --font-size-medium: 0.95rem;
-        --font-size-small: 0.75rem;
+        --font-size-large: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
+        --font-size-medium: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
+        --font-size-small: calc(0.75 * ${PrefViewerStyleVariables.fontSize});
         --text-color: #ffffff;
         --muted-color: #b2b2b2;
-        --accent-color: ${PrefViewerStyleVariables.colorPrimary};
+        --accent-color: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
 
         --separator-border: 1px solid rgba(255, 255, 255, 0.1);
         
@@ -121,7 +178,7 @@ export const PrefViewerMenu3DStyles = `
         --button-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
         --button-radius: 8px;
 
-        --panel-width: 280px;
+        --panel-width: 300px;
         --panel-spacing: 16px;
         --panel-spacing-large: calc(var(--panel-spacing) * 1.5);
         --panel-bg-color: rgba(19, 21, 28, 0.85);
@@ -149,6 +206,12 @@ export const PrefViewerMenu3DStyles = `
         top: var(--toggle-margin);
         right: var(--toggle-margin);
         z-index: 1200;
+        /* The closed panel keeps its place in the flex column (opacity:0, not display:none), so
+           this host spans the panel's full 300px x 70vh even when only the toggle is showing.
+           Left clickable, that empty space is an invisible catcher over the right edge of the
+           viewer: it swallowed the XR entry button and orbiting alike. The toggle and the panel
+           each flip back to auto when they become usable, so nothing else is needed. */
+        pointer-events: none;
 
         font-family: var(--font-family);
     }
@@ -279,6 +342,10 @@ export const PrefViewerMenu3DStyles = `
         cursor: pointer;
     }
 
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-hidden] {
+        display: none;
+    }
+
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-disabled]>.menu-switch-copy {
         opacity: 0.6;
     }
@@ -325,11 +392,20 @@ export const PrefViewerMenu3DStyles = `
         transform: translateX(var(--switch-control-thumb-size));
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer {
-        margin-top: calc(var(--panel-spacing) / 2);
-        display: flex;
-        flex-direction: column;
-        gap: calc(var(--panel-spacing) / 2);
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-hidden] {
+        display: none;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-disabled] .menu-slider-label {
+        opacity: 0.6;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-disabled] input[type="range"] {
+        opacity: 0.4;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-disabled] input[type="range"]:disabled {
+        cursor: not-allowed;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker {
@@ -366,7 +442,6 @@ export const PrefViewerMenu3DStyles = `
         appearance: none;
         width: 100%;
         height: var(--slider-bar-height);
-        box-sizing: border-box;
         border-radius: calc(var(--slider-bar-height) / 2);
         background: linear-gradient(to right,
             hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
@@ -437,7 +512,6 @@ export const PrefViewerMenu3DStyles = `
         -webkit-appearance: none;
         appearance: none;
         width: 100%;
-        box-sizing: border-box;
         height: var(--slider-bar-height);
         border-radius: calc(var(--slider-bar-height) / 2);
         background: linear-gradient(to right,
@@ -508,17 +582,23 @@ export const PrefViewerMenu3DStyles = `
         outline: none;
         box-shadow: var(--button-shadow);
     }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer {
+        margin-top: calc(var(--panel-spacing) / 2);
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--panel-spacing) / 2);
+    }
 `;
 
 export const PrefViewer3DAnimationMenuStyles = `
     div.pref-viewer-3d.animation-menu, div.pref-viewer-3d.animation-menu * {
-        box-sizing: border-box;
         padding: 0;
         margin: 0;
     }
 
     div.pref-viewer-3d.animation-menu {
-        --color-primary: ${PrefViewerStyleVariables.colorPrimary};
+        --color-primary: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
         --color-active: var(--color-primary);
         --color-active-hover: color-mix(in oklab, var(--color-active), black 10%);
         --color-enabled: #7a7a7a;
@@ -536,7 +616,7 @@ export const PrefViewer3DAnimationMenuStyles = `
         --selector-button-radius: 6px;
         --selector-button-padding-horizontal: 8px;
         --selector-button-padding-vertical: 4px;
-        --selector-button-font-size: 14px;
+        --selector-button-font-size:  ${PrefViewerStyleVariables.fontSize};
         --selector-button-font-weight: 500;
         --width: calc(var(--button-size) * 6 + var(--button-spacing) * 5 + var(--button-loop-margin-left));
 
@@ -577,6 +657,7 @@ export const PrefViewer3DAnimationMenuStyles = `
         font-size: var(--selector-button-font-size);
         font-weight: var(--selector-button-font-weight);
         line-height: 1;
+        letter-spacing: 0.05em;
         flex: 1;
     }
 
@@ -592,7 +673,7 @@ export const PrefViewer3DAnimationMenuStyles = `
         cursor: pointer;
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button:not(.active):hover {
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button:not(.active):hover {
         background: var(--color-enabled-hover);
     }
 
@@ -609,7 +690,6 @@ export const PrefViewer3DAnimationMenuStyles = `
         justify-content: center;
         padding: 0;
         margin: 0;
-        cursor: pointer;
         border: 1px solid var(--color-border);
         width: var(--button-size);
         height: var(--button-size);
@@ -632,13 +712,15 @@ export const PrefViewer3DAnimationMenuStyles = `
 
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.enabled {
         background: var(--color-enabled);
+        cursor: pointer;
     }
 
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.enabled:hover {
         background: var(--color-enabled-hover);
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled {
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled,
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled:hover {
         background: var(--color-disabled);
     }
 
@@ -704,7 +786,7 @@ export const PrefViewer3DAnimationMenuStyles = `
 
 export const PrefViewerDialogStyles = `
     pref-viewer-dialog {
-        --color-primary: ${PrefViewerStyleVariables.colorPrimary};
+        --color-primary: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
         --dialog-general-space: 16px;
         --dialog-bg-color: #ffffff;
         --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
@@ -764,7 +846,7 @@ export const PrefViewerDialogStyles = `
     pref-viewer-dialog .dialog-header h3 {
         margin: 0;
         font-weight: 500;
-        font-size: 1.1em;
+        font-size: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
     }
 
     pref-viewer-dialog .dialog-content {
@@ -774,7 +856,7 @@ export const PrefViewerDialogStyles = `
     pref-viewer-dialog .dialog-content h4 {
         margin: 0;
         font-weight: 500;
-        font-size: 1.05em;
+        font-size: calc(1.05 * ${PrefViewerStyleVariables.fontSize});
     }
 
     pref-viewer-dialog .dialog-footer {
@@ -787,7 +869,7 @@ export const PrefViewerDialogStyles = `
 
     pref-viewer-dialog .dialog-footer button {
         width: 100%;
-        font-size: 0.95rem;
+        font-size: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
         font-weight: 600;
         padding: var(--button-padding-vertical) var(--button-padding-horizontal);
         border-radius: var(--button-border-radius);