@wildo-ai/presets-components 1.0.1 → 1.1.0

package/dist/esm/themes/glass.theme.js

@@ -1,61 +1,225 @@
-import { InteractiveVariant, SurfaceVariant, FormControlVariant, IndicatorVariant, SelectableVariant, TypographyVariant, SpacingSemantic, } from '@wildo-ai/presets-components-models';
+import { GlassMaterialDepth, GlassMaterialNestedStrategy, GlassMaterialPriority, GlassMaterialPressFeedback, GlassMaterialVariant, GlassSurfaceShape, InteractiveVariant, MaterialCapabilityTier, MaterialKind, MaterialProfileRole, ShellAppearance, SurfaceVariant, FormControlVariant, IndicatorVariant, SelectableVariant, TypographyVariant, SpacingSemantic, } from '@wildo-ai/presets-components-models';
 function recipe(r) {
-    return { base: r.base, states: r.states ?? {}, sizes: r.sizes, motion: r.motion ?? {}, gesture: r.gesture };
+    return { base: r.base, states: r.states ?? {}, sizes: r.sizes, motion: r.motion ?? {}, gesture: r.gesture, material: r.material, policy: r.policy };
 }
 // ============================================================
 // Glass / Apple Liquid Glass inspired theme
 //
-// Based on Apple WWDC 2025 Liquid Glass + glassmorphism best practices.
+// Based on Apple WWDC 2025 Liquid Glass and Kube's constrained web refraction
+// model. Optical light belongs to the material runtime, never recipe shadows.
 //
 // Visual DNA:
-// - Backdrop: blur(16px) saturate(180%) brightness(1.1) — vibrancy, not just blur
-// - Background: rgba white 15-25% light, rgba black 20-35% dark
-// - Specular highlight: inset box-shadow 1px top-left white/30
-// - Border: 1px white/15-25 (creates glass edge)
+// - Backdrop: role/depth-scaled scatter, adaptive tone, and physical refraction
+// - Edge: environment pickup plus signed bright and opposing dark device-pixel rims
+// - Recipes: semantic typography/layout only; no painted material highlights
 // - Radius: generous (xl-2xl for containers, lg-xl for controls)
 // - Motion: 250-350ms ease-out, scale(0.98) on press
-// - Depth: blur intensity increases per surface level
-// - Dark mode: darker bg, lower border opacity, preserved vibrancy
+// - Depth: physical thickness and bezel width increase per surface level
 // ============================================================
 // -- Shared constants --
 const disabled = "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]";
 const invalid = "aria-invalid:ring-destructive/30 aria-invalid:border-destructive/40";
 const focus = "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none";
-// Glass motion: smooth, emphasized easing (ease-out), normal duration
-// References Level 1 tokens for duration/easing
+// ============================================================
+// MOTION PERSONALITY — Glass (Apple Liquid Glass)
+// ============================================================
+//   Hover/focus  : NORMAL (250ms) + SPRING  → smooth refraction settle.
+//                                             SPRING easing here is the
+//                                             cubic-bezier ease-out token
+//                                             (cubic-bezier(0.22, 1, 0.36, 1)
+//                                             ≈ easeOutExpo) — monotonic,
+//                                             slow tail, NO overshoot.
+//                                             It matches Apple UIKit's
+//                                             "material settling" feel,
+//                                             not Material Design bounce.
+//   Overlay enter: SLOW   (350ms) + ENTER   → pure decelerate.
+//   Overlay exit : NORMAL (250ms) + EXIT    → pure accelerate (out faster
+//                                             than in — UX rule of thumb).
+//   Backdrop     : SLOW/NORMAL    + ENTER/EXIT  → matches overlays.
+//   Gestures     : SPRING physics on motion.dev (stiffness 300-400,
+//                  damping 26-30) — touch-first; whileTap scale-only,
+//                  whileHover scale + horizontal nudge for selectable.
+//                  Tuned to feel like UIKit, not React-Spring defaults.
+//
+// TR-14 motion-coherence: switched interactive/formControl/selectable
+// from EMPHASIZED (cubic-bezier(0.2, 0, 0, 1.2) — has 20% Y overshoot,
+// reads as "Material bounce") to SPRING (no overshoot, slow soft tail —
+// "Liquid Glass settle"). Backdrop animations now have explicit easing.
+// ============================================================
 const GL_MOTION = {
-    interactive: "transition-[background-color,color,border-color,box-shadow,transform,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none",
-    formControl: "transition-[color,border-color,box-shadow,background-color,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none",
-    selectable: "transition-[background-color,color,border-color,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none",
+    interactive: "transition-[background-color,color,border-color,box-shadow,transform,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none",
+    formControl: "transition-[color,border-color,box-shadow,background-color,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none",
+    selectable: "transition-[background-color,color,border-color,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none",
     enterFadeZoom: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-slow)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none",
     exitFadeZoom: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-[var(--motion-duration-normal)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none",
     enterDirectional: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-slow)] data-[state=open]:ease-[var(--motion-easing-enter)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:data-[state=open]:animate-none",
-    backdropEnter: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-[var(--motion-duration-slow)] motion-reduce:data-[state=open]:animate-none",
-    backdropExit: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-[var(--motion-duration-normal)] motion-reduce:data-[state=closed]:animate-none",
+    backdropEnter: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-[var(--motion-duration-slow)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none",
+    backdropExit: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-[var(--motion-duration-normal)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none",
+};
+const GLASS_CAPABILITIES = [
+    MaterialCapabilityTier.FALLBACK,
+    MaterialCapabilityTier.BACKDROP,
+    MaterialCapabilityTier.REFRACTIVE,
+];
+function glassMaterialProfile(depth, priority, overrides, maxRefractiveAreaPx, fallbackOverrides = {}, boxShadow = '0 10px 30px color-mix(in oklch, black 12%, transparent)', pressFeedback = GlassMaterialPressFeedback.NONE) {
+    return {
+        kind: MaterialKind.GLASS,
+        variant: GlassMaterialVariant.REGULAR,
+        depth,
+        capabilities: GLASS_CAPABILITIES,
+        optics: {
+            shape: GlassSurfaceShape.CONVEX_SQUIRCLE,
+            bezelWidthPx: 18,
+            glassThicknessPx: 18,
+            refractiveIndex: 1.5,
+            backdropBlurPx: 5,
+            backdropSaturation: 1.15,
+            dynamicRangeCompression: 0.16,
+            adaptiveToneOpacity: 0.16,
+            tint: 'var(--surface-overlay)',
+            tintOpacity: 0.16,
+            rimWidthDevicePx: 2,
+            edgeHighlightOpacity: 0.52,
+            edgeShadowOpacity: 0.38,
+            edgeEnvironmentSaturation: 4,
+            lightAngleDeg: -60,
+            ...overrides,
+        },
+        fallback: {
+            background: 'color-mix(in oklch, var(--surface-overlay) 90%, transparent)',
+            borderColor: 'color-mix(in oklch, var(--foreground) 12%, transparent)',
+            ...fallbackOverrides,
+        },
+        elevation: { boxShadow },
+        accessibility: {
+            reducedTransparencyTier: MaterialCapabilityTier.FALLBACK,
+            increasedContrastTier: MaterialCapabilityTier.FALLBACK,
+            forcedColorsTier: MaterialCapabilityTier.FALLBACK,
+        },
+        interaction: pressFeedback === GlassMaterialPressFeedback.SCALE
+            ? { pressFeedback, pressedScale: 0.985 }
+            : { pressFeedback },
+        composition: {
+            nestedStrategy: GlassMaterialNestedStrategy.FLATTEN,
+        },
+        performance: {
+            priority,
+            maxRefractiveAreaPx,
+            maxOpticalMapPixels: Math.max(maxRefractiveAreaPx, 420_000),
+            pauseWhenDocumentHidden: true,
+        },
+    };
+}
+const materials = {
+    [MaterialProfileRole.STANDARD_CONTENT]: { kind: MaterialKind.STANDARD },
+    [MaterialProfileRole.GLASS_CONTROL]: glassMaterialProfile(GlassMaterialDepth.THIN, GlassMaterialPriority.CONTROL, {
+        bezelWidthPx: 9,
+        glassThicknessPx: 7,
+        backdropBlurPx: 2.5,
+        dynamicRangeCompression: 0.05,
+        adaptiveToneOpacity: 0.07,
+        tintOpacity: 0.09,
+        rimWidthDevicePx: 1.75,
+        edgeHighlightOpacity: 0.48,
+        edgeShadowOpacity: 0.28,
+        edgeEnvironmentSaturation: 3.5,
+    }, 180_000, {}, '0 4px 14px color-mix(in oklch, black 16%, transparent)', GlassMaterialPressFeedback.SCALE),
+    [MaterialProfileRole.GLASS_CONTROL_EMPHASIS]: glassMaterialProfile(GlassMaterialDepth.THIN, GlassMaterialPriority.CONTROL, {
+        bezelWidthPx: 10,
+        glassThicknessPx: 9,
+        backdropBlurPx: 2.5,
+        dynamicRangeCompression: 0.04,
+        adaptiveToneOpacity: 0.06,
+        tint: 'var(--primary)',
+        tintOpacity: 0.28,
+        rimWidthDevicePx: 1.75,
+        edgeHighlightOpacity: 0.56,
+        edgeShadowOpacity: 0.32,
+        edgeEnvironmentSaturation: 4.5,
+    }, 180_000, { background: 'color-mix(in oklch, var(--primary) 92%, transparent)' }, '0 5px 16px color-mix(in oklch, black 18%, transparent)', GlassMaterialPressFeedback.SCALE),
+    [MaterialProfileRole.GLASS_CONTROL_DESTRUCTIVE]: glassMaterialProfile(GlassMaterialDepth.THIN, GlassMaterialPriority.CONTROL, {
+        bezelWidthPx: 10,
+        glassThicknessPx: 9,
+        backdropBlurPx: 2.5,
+        dynamicRangeCompression: 0.04,
+        adaptiveToneOpacity: 0.06,
+        tint: 'var(--destructive)',
+        tintOpacity: 0.3,
+        rimWidthDevicePx: 1.75,
+        edgeHighlightOpacity: 0.54,
+        edgeShadowOpacity: 0.34,
+        edgeEnvironmentSaturation: 4.5,
+    }, 180_000, { background: 'color-mix(in oklch, var(--destructive) 92%, transparent)' }, '0 5px 16px color-mix(in oklch, black 18%, transparent)', GlassMaterialPressFeedback.SCALE),
+    [MaterialProfileRole.GLASS_NAVIGATION]: glassMaterialProfile(GlassMaterialDepth.REGULAR, GlassMaterialPriority.NAVIGATION, {
+        bezelWidthPx: 14,
+        glassThicknessPx: 14,
+        backdropBlurPx: 7,
+        dynamicRangeCompression: 0.16,
+        adaptiveToneOpacity: 0.16,
+        tintOpacity: 0.15,
+        rimWidthDevicePx: 2,
+        edgeHighlightOpacity: 0.55,
+        edgeShadowOpacity: 0.4,
+        edgeEnvironmentSaturation: 4.5,
+    }, 420_000, {}, '0 10px 28px color-mix(in oklch, black 20%, transparent)'),
+    [MaterialProfileRole.GLASS_OVERLAY]: glassMaterialProfile(GlassMaterialDepth.THICK, GlassMaterialPriority.OVERLAY, {
+        bezelWidthPx: 24,
+        glassThicknessPx: 28,
+        backdropBlurPx: 16,
+        dynamicRangeCompression: 0.26,
+        adaptiveToneOpacity: 0.2,
+        tintOpacity: 0.24,
+        rimWidthDevicePx: 2.25,
+        edgeHighlightOpacity: 0.6,
+        edgeShadowOpacity: 0.45,
+        edgeEnvironmentSaturation: 5,
+    }, 520_000, {}, '0 18px 50px color-mix(in oklch, black 26%, transparent)'),
+    [MaterialProfileRole.GLASS_TRANSIENT]: glassMaterialProfile(GlassMaterialDepth.REGULAR, GlassMaterialPriority.NAVIGATION, {
+        bezelWidthPx: 16,
+        glassThicknessPx: 17,
+        backdropBlurPx: 9,
+        dynamicRangeCompression: 0.2,
+        adaptiveToneOpacity: 0.18,
+        tintOpacity: 0.18,
+        rimWidthDevicePx: 2,
+        edgeHighlightOpacity: 0.55,
+        edgeShadowOpacity: 0.4,
+        edgeEnvironmentSaturation: 4.5,
+    }, 260_000, {}, '0 12px 34px color-mix(in oklch, black 22%, transparent)'),
+    [MaterialProfileRole.GLASS_CLEAR]: {
+        ...glassMaterialProfile(GlassMaterialDepth.THIN, GlassMaterialPriority.PASSIVE, {
+            bezelWidthPx: 12,
+            glassThicknessPx: 10,
+            backdropBlurPx: 0,
+            dynamicRangeCompression: 0,
+            adaptiveToneOpacity: 0.035,
+            tintOpacity: 0.04,
+            rimWidthDevicePx: 1.75,
+            edgeHighlightOpacity: 0.48,
+            edgeShadowOpacity: 0.28,
+            edgeEnvironmentSaturation: 4,
+        }, 180_000, {}, '0 5px 16px color-mix(in oklch, black 16%, transparent)'),
+        variant: GlassMaterialVariant.CLEAR,
+    },
 };
-/** Glass material: blur + saturate + brightness (Apple Liquid Glass recipe) */
-const GLASS_SM = "backdrop-blur-[8px] backdrop-saturate-[140%] backdrop-brightness-[1.05]";
-const GLASS_MD = "backdrop-blur-[16px] backdrop-saturate-[180%] backdrop-brightness-[1.1]";
-const GLASS_LG = "backdrop-blur-[24px] backdrop-saturate-[180%] backdrop-brightness-[1.1]";
-const GLASS_XL = "backdrop-blur-[32px] backdrop-saturate-[200%] backdrop-brightness-[1.15]";
-/** Specular highlight: simulates light reflection on glass edge */
-const HIGHLIGHT = "shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.2)]";
-const HIGHLIGHT_STRONG = "shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.3),0_4px_16px_rgba(0,0,0,0.08)]";
 // -- Gesture configs (motion.dev) --
 // Apple-inspired spring physics: smooth, slightly bouncy, elegant
 const GL_GESTURE = {
-    /** Buttons, interactive elements: subtle lift + scale on hover, press-in on tap */
+    /**
+     * Buttons, interactive elements: scale-only press feedback.
+     *
+     * Apple Liquid Glass is a touch-first design language; on touch devices a
+     * `whileHover` lift never fires (no real hover) and on desktop a -1px Y
+     * translate would move a control away from the geometry sampled by its
+     * backdrop. Press-in scale is the shared feedback until material-geometry
+     * interpolation lands.
+     */
     interactive: {
-        whileHover: { y: -1, scale: 1.01 },
+        whileHover: { scale: 1.01 },
         whileTap: { scale: 0.98 },
         transition: { type: "spring", stiffness: 400, damping: 28 },
     },
-    /** Cards, surfaces: gentle lift on hover */
-    surface: {
-        whileHover: { y: -2, scale: 1.005 },
-        transition: { type: "spring", stiffness: 300, damping: 26 },
-    },
-    /** Selectable items: subtle horizontal nudge */
+    /** Selectable items: subtle horizontal nudge (intentional for list affordance). */
     selectable: {
         whileHover: { x: 2 },
         whileTap: { scale: 0.99 },
@@ -63,6 +227,7 @@ const GL_GESTURE = {
     },
 };
 const sizes = {
+    xs: "h-7 px-3 text-xs gap-1 pointer-coarse:min-h-9",
     sm: "h-8 px-3.5 gap-1.5 pointer-coarse:min-h-11",
     md: "h-9 px-5 py-2 pointer-coarse:min-h-11",
     lg: "h-11 px-7 pointer-coarse:min-h-11",
@@ -74,53 +239,60 @@ const sizes = {
 // ============================================================
 const interactive = {
     [InteractiveVariant.PRIMARY]: recipe({
-        base: `bg-primary/85 text-primary-foreground rounded-xl border border-white/20 ${HIGHLIGHT} font-medium text-sm cursor-pointer`,
+        base: 'text-primary-foreground rounded-xl border border-transparent font-medium text-sm cursor-pointer',
         states: {
-            hover: "hover:bg-primary/90 hover:shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.3),0_4px_16px_rgba(0,0,0,0.1)]",
-            active: "active:bg-primary active:shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.15)]",
+            hover: 'hover:opacity-95',
+            active: 'active:opacity-90',
             focus, disabled, invalid,
         },
         sizes,
         motion: { transition: GL_MOTION.interactive },
         gesture: GL_GESTURE.interactive,
+        material: MaterialProfileRole.GLASS_CONTROL_EMPHASIS,
     }),
     [InteractiveVariant.DESTRUCTIVE]: recipe({
-        base: `bg-destructive/85 text-destructive-foreground rounded-xl border border-white/20 ${HIGHLIGHT} font-medium text-sm cursor-pointer`,
+        base: 'text-destructive-foreground rounded-xl border border-transparent font-medium text-sm cursor-pointer',
         states: {
-            hover: "hover:bg-destructive/90 hover:shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.3),0_4px_16px_rgba(0,0,0,0.1)]",
-            active: "active:bg-destructive",
+            hover: 'hover:opacity-95',
+            active: 'active:opacity-90',
             focus, disabled, invalid,
             highlighted: "focus:bg-destructive/15 focus:text-destructive",
         },
         sizes,
         motion: { transition: GL_MOTION.interactive },
         gesture: GL_GESTURE.interactive,
+        material: MaterialProfileRole.GLASS_CONTROL_DESTRUCTIVE,
     }),
     [InteractiveVariant.OUTLINE]: recipe({
-        base: `bg-white/25 dark:bg-black/30 text-foreground rounded-xl border border-white/15 dark:border-white/10 ${HIGHLIGHT} font-medium text-sm cursor-pointer`,
+        base: 'text-foreground rounded-xl border border-transparent font-medium text-sm cursor-pointer',
         states: {
-            hover: "hover:bg-white/18 dark:hover:bg-white/10 hover:border-white/25 dark:hover:border-white/15 hover:shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.25),0_2px_8px_rgba(0,0,0,0.06)]",
-            active: "",
+            hover: 'hover:opacity-90',
+            active: 'active:opacity-80',
             focus, disabled, invalid,
             selected: `data-[state=on]:bg-white/15 dark:data-[state=on]:bg-white/10 data-[state=on]:text-foreground data-[state=on]:border-white/25`,
         },
         sizes,
         motion: { transition: GL_MOTION.interactive },
         gesture: GL_GESTURE.interactive,
+        material: MaterialProfileRole.GLASS_CONTROL,
     }),
     [InteractiveVariant.SECONDARY]: recipe({
-        base: `bg-secondary/60 text-secondary-foreground rounded-xl border border-white/10 ${HIGHLIGHT} font-medium text-sm cursor-pointer`,
+        base: 'text-secondary-foreground rounded-xl border border-transparent font-medium text-sm cursor-pointer',
         states: {
-            hover: "hover:bg-secondary/70 hover:border-white/20",
-            active: "",
+            hover: 'hover:opacity-90',
+            active: 'active:opacity-80',
             focus, disabled, invalid,
         },
         sizes,
         motion: { transition: GL_MOTION.interactive },
         gesture: GL_GESTURE.interactive,
+        material: MaterialProfileRole.GLASS_CONTROL,
     }),
     [InteractiveVariant.GHOST]: recipe({
-        base: "text-foreground/80 rounded-xl font-medium text-sm cursor-pointer",
+        // `text-foreground` (not `/80`) so ghost buttons stay legible on the
+        // strongest blur surfaces — alpha-mixed text fades against the bright
+        // overlay background. Hover states already supply a subtle bg.
+        base: "text-foreground rounded-xl font-medium text-sm cursor-pointer",
         states: {
             hover: "hover:bg-white/12 dark:hover:bg-white/8",
             active: "active:bg-white/18 dark:active:bg-white/12",
@@ -132,51 +304,64 @@ const interactive = {
         sizes,
         motion: { transition: GL_MOTION.interactive },
         gesture: GL_GESTURE.interactive,
+        // Ghost controls are tint-only children of their surrounding material.
+        // Giving every sidebar/menu row its own refractive filter creates a stack
+        // of metallic lenses and violates the no-glass-on-glass hierarchy.
+        material: MaterialProfileRole.STANDARD_CONTENT,
     }),
     [InteractiveVariant.LINK]: recipe({
         base: "text-primary underline-offset-4 font-medium text-sm cursor-pointer",
         states: {
             hover: "hover:underline hover:text-primary/80",
+            active: "active:text-primary/60",
             focus, disabled, invalid,
         },
-        sizes: { sm: "h-8 px-3.5 gap-1.5 pointer-coarse:min-h-11", md: "h-9 px-5 py-2 pointer-coarse:min-h-11", lg: "h-11 px-7 pointer-coarse:min-h-11", icon: "size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11", "icon-sm": "size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9" },
+        sizes: { xs: "h-7 px-3 text-xs gap-1 pointer-coarse:min-h-9", sm: "h-8 px-3.5 gap-1.5 pointer-coarse:min-h-11", md: "h-9 px-5 py-2 pointer-coarse:min-h-11", lg: "h-11 px-7 pointer-coarse:min-h-11", icon: "size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11", "icon-sm": "size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9" },
         motion: { transition: GL_MOTION.interactive },
     }),
     [InteractiveVariant.ACCENT]: recipe({
-        base: 'relative bg-white/15 dark:bg-white/10 text-foreground font-semibold backdrop-blur-[16px] border border-white/30 dark:border-white/20 before:absolute before:inset-0 before:rounded-[inherit] before:bg-[length:200%_100%] before:bg-gradient-to-r before:from-transparent before:via-white/40 before:to-transparent before:animate-[gradient-rotate_2s_ease_infinite] before:-z-10 shadow-[0_0_20px_color-mix(in_oklch,var(--primary)_25%,transparent),inset_0_1px_0_rgba(255,255,255,0.3)] rounded-xl text-sm cursor-pointer',
+        base: 'relative text-primary-foreground font-semibold border border-transparent rounded-xl text-sm cursor-pointer',
         states: {
-            hover: 'hover:shadow-[0_0_30px_color-mix(in_oklch,var(--primary)_40%,transparent),inset_0_1px_0_rgba(255,255,255,0.4)]',
+            hover: 'hover:opacity-95',
             active: 'active:scale-[0.98]',
             focus,
             disabled: 'disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none disabled:backdrop-blur-none',
         },
         sizes: sizes,
         motion: {
-            transition: 'transition-[shadow,transform,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none',
+            transition: 'transition-[shadow,transform,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none',
         },
         gesture: GL_GESTURE.interactive,
+        material: MaterialProfileRole.GLASS_CONTROL_EMPHASIS,
     }),
 };
 // ============================================================
 // SURFACE
+// SURFACE PERSONALITY — semantic content surfaces stay standard. Glass is
+// selected independently for navigation and transient interaction layers.
 // ============================================================
 const surface = {
     [SurfaceVariant.BASE]: recipe({
-        // Card: moderate blur, subtle highlight, soft shadow
-        base: `bg-white/15 dark:bg-white/8 text-foreground ${GLASS_MD} rounded-2xl border border-white/20 dark:border-white/10 ${HIGHLIGHT_STRONG}`,
-        gesture: GL_GESTURE.surface,
+        // General content container: deliberately standard, never a glass lens.
+        base: 'bg-surface-raised text-surface-raised-foreground rounded-3xl border border-border shadow-sm',
+        material: MaterialProfileRole.STANDARD_CONTENT,
+    }),
+    [SurfaceVariant.CARD]: recipe({
+        // Authored content grouping: standard raised material, even in Glass.
+        base: 'bg-surface-raised text-surface-raised-foreground rounded-3xl border border-border shadow-sm',
+        material: MaterialProfileRole.STANDARD_CONTENT,
     }),
     [SurfaceVariant.RAISED]: recipe({
-        // Popover/dropdown: stronger blur, more prominent
-        base: `bg-white/20 dark:bg-white/12 text-foreground ${GLASS_LG} rounded-xl border border-white/25 dark:border-white/12 shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.25),0_8px_32px_rgba(0,0,0,0.12)]`,
+        base: 'fill-surface-overlay text-foreground rounded-2xl border border-transparent',
+        material: MaterialProfileRole.GLASS_OVERLAY,
         motion: {
             enter: GL_MOTION.enterDirectional,
             exit: GL_MOTION.exitFadeZoom,
         },
     }),
     [SurfaceVariant.OVERLAY]: recipe({
-        // Dialog: maximum blur, strongest glass effect
-        base: `bg-white/25 dark:bg-black/40 text-foreground ${GLASS_XL} rounded-2xl border border-white/30 dark:border-white/15 shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.3),0_16px_48px_rgba(0,0,0,0.2)]`,
+        base: 'text-foreground rounded-3xl border border-transparent',
+        material: MaterialProfileRole.GLASS_OVERLAY,
         motion: {
             enter: GL_MOTION.enterFadeZoom,
             exit: GL_MOTION.exitFadeZoom,
@@ -184,11 +369,30 @@ const surface = {
     }),
     [SurfaceVariant.INSET]: recipe({
         // Recessed: inverted glass — darker, less blur
-        base: `bg-black/5 dark:bg-white/3 text-foreground ${GLASS_SM} rounded-xl`,
+        base: 'bg-surface-inset text-surface-inset-foreground rounded-xl',
+        material: MaterialProfileRole.STANDARD_CONTENT,
     }),
     [SurfaceVariant.SUNKEN]: recipe({
-        // Sidebar: subtle glass, thin edge border
-        base: `bg-black/3 dark:bg-white/3 text-foreground ${GLASS_MD} border-r border-white/10 dark:border-white/5`,
+        base: 'text-foreground border-r border-transparent',
+        material: MaterialProfileRole.GLASS_NAVIGATION,
+    }),
+    [SurfaceVariant.TAB_PANEL]: recipe({
+        // The content panel stays standard; only the selection capsule may be glass.
+        base: 'bg-surface-raised text-surface-raised-foreground rounded-b-3xl border-x border-b border-border',
+        material: MaterialProfileRole.STANDARD_CONTENT,
+    }),
+    [SurfaceVariant.SHELL]: recipe({
+        // Transparent continuous scene under independently materialized chrome.
+        base: 'bg-transparent text-foreground',
+        material: MaterialProfileRole.STANDARD_CONTENT,
+    }),
+    [SurfaceVariant.TRANSIENT]: recipe({
+        base: 'text-foreground rounded-2xl border border-transparent',
+        material: MaterialProfileRole.GLASS_TRANSIENT,
+        motion: {
+            enter: GL_MOTION.enterDirectional,
+            exit: GL_MOTION.exitFadeZoom,
+        },
     }),
 };
 // ============================================================
@@ -196,7 +400,7 @@ const surface = {
 // ============================================================
 const formControl = {
     [FormControlVariant.DEFAULT]: recipe({
-        base: `bg-white/25 dark:bg-black/30 border border-white/15 dark:border-white/10 rounded-xl text-base md:text-sm ${HIGHLIGHT} placeholder:text-foreground/40 selection:bg-primary/30 selection:text-foreground`,
+        base: 'bg-surface-inset/80 border border-border/60 rounded-xl text-base md:text-sm placeholder:text-foreground/40 selection:bg-primary/30 selection:text-foreground',
         states: {
             focus: `focus-visible:bg-white/15 dark:focus-visible:bg-white/10 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none`,
             disabled: "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)] disabled:backdrop-blur-none",
@@ -223,17 +427,17 @@ const formControl = {
             invalid: "aria-invalid:border-destructive/50",
         },
         sizes: { md: "h-9 px-0 py-1 pointer-coarse:min-h-11", sm: "h-8 px-0 py-1 text-sm pointer-coarse:min-h-11", lg: "h-11 px-0 py-2 pointer-coarse:min-h-11" },
-        motion: { transition: "transition-[border-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none" },
+        motion: { transition: "transition-[border-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none" },
     }),
     [FormControlVariant.CHECKBOX]: recipe({
-        base: `bg-white/25 dark:bg-black/30 border border-white/15 dark:border-white/10 ${HIGHLIGHT}`,
+        base: 'bg-surface-inset/80 border border-border/60',
         states: {
             focus: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
             selected: "data-[state=checked]:bg-primary/80 data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary/40",
             disabled: "disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
             invalid,
         },
-        motion: { transition: "transition-[color,box-shadow,background-color,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none" },
+        motion: { transition: "transition-[color,box-shadow,background-color,backdrop-filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none" },
     }),
     [FormControlVariant.SWITCH]: recipe({
         base: `data-[state=unchecked]:bg-white/30 dark:data-[state=unchecked]:bg-black/35 border border-white/10 dark:border-white/5`,
@@ -243,7 +447,7 @@ const formControl = {
             disabled: "disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
             invalid,
         },
-        motion: { transition: "transition-all duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-emphasized)] motion-reduce:transition-none" },
+        motion: { transition: "transition-all duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none" },
     }),
 };
 // ============================================================
@@ -254,11 +458,11 @@ const glIndicatorShared = {
     motion: { transition: GL_MOTION.interactive },
 };
 const indicator = {
-    [IndicatorVariant.NEUTRAL]: recipe({ base: `bg-foreground/10 text-foreground ${GLASS_SM} border border-white/10 rounded-full px-2.5 py-0.5 text-xs font-medium ${HIGHLIGHT}`, ...glIndicatorShared }),
-    [IndicatorVariant.INFO]: recipe({ base: `bg-info/15 text-info ${GLASS_SM} border border-info/15 rounded-full px-2.5 py-0.5 text-xs font-medium`, ...glIndicatorShared }),
-    [IndicatorVariant.SUCCESS]: recipe({ base: `bg-success/15 text-success ${GLASS_SM} border border-success/15 rounded-full px-2.5 py-0.5 text-xs font-medium`, ...glIndicatorShared }),
-    [IndicatorVariant.WARNING]: recipe({ base: `bg-warning/15 text-warning ${GLASS_SM} border border-warning/15 rounded-full px-2.5 py-0.5 text-xs font-medium`, ...glIndicatorShared }),
-    [IndicatorVariant.ERROR]: recipe({ base: `bg-destructive/15 text-destructive ${GLASS_SM} border border-destructive/15 rounded-full px-2.5 py-0.5 text-xs font-medium`, ...glIndicatorShared }),
+    [IndicatorVariant.NEUTRAL]: recipe({ base: 'bg-foreground/10 text-foreground border border-border/50 rounded-full px-2.5 py-0.5 text-xs font-medium', ...glIndicatorShared }),
+    [IndicatorVariant.INFO]: recipe({ base: 'bg-info/15 text-info border border-info/15 rounded-full px-2.5 py-0.5 text-xs font-medium', ...glIndicatorShared }),
+    [IndicatorVariant.SUCCESS]: recipe({ base: 'bg-success/15 text-success border border-success/15 rounded-full px-2.5 py-0.5 text-xs font-medium', ...glIndicatorShared }),
+    [IndicatorVariant.WARNING]: recipe({ base: 'bg-warning/15 text-warning border border-warning/15 rounded-full px-2.5 py-0.5 text-xs font-medium', ...glIndicatorShared }),
+    [IndicatorVariant.ERROR]: recipe({ base: 'bg-destructive/15 text-destructive border border-destructive/15 rounded-full px-2.5 py-0.5 text-xs font-medium', ...glIndicatorShared }),
 };
 // ============================================================
 // SELECTABLE
@@ -270,7 +474,7 @@ const selectable = {
             hover: "hover:bg-white/10 dark:hover:bg-white/8",
             focus: "focus-visible:ring-2 focus-visible:ring-ring",
             active: "active:bg-white/15",
-            selected: `data-[active=true]:bg-primary/12 data-[active=true]:text-primary data-[active=true]:${GLASS_SM} data-[active=true]:shadow-[inset_1px_1px_0px_0px_rgba(255,255,255,0.15)] data-[state=active]:bg-primary/12 data-[state=active]:text-primary`,
+            selected: 'data-[active=true]:bg-primary/12 data-[active=true]:text-primary data-[state=active]:bg-primary/12 data-[state=active]:text-primary',
             disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]",
         },
         sizes: { sm: "h-7 text-xs", md: "h-8 text-sm", lg: "h-12 text-sm" },
@@ -278,9 +482,11 @@ const selectable = {
         gesture: GL_GESTURE.selectable,
     }),
     [SelectableVariant.UNDERLINE]: recipe({
-        base: "rounded-none border-b-2 border-transparent text-sm text-foreground/60 outline-hidden",
+        // Use `text-muted-foreground` for the inactive state and `text-foreground`
+        // on hover — alpha-mixed text on translucent surfaces was unreliable.
+        base: "rounded-none border-b-2 border-transparent text-sm text-muted-foreground outline-hidden",
         states: {
-            hover: "hover:text-foreground/80",
+            hover: "hover:text-foreground",
             focus: "focus-visible:ring-2 focus-visible:ring-ring",
             selected: "data-[state=active]:border-primary data-[state=active]:text-primary",
             disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]",
@@ -291,9 +497,9 @@ const selectable = {
     [SelectableVariant.PILL]: recipe({
         base: "rounded-full text-sm outline-hidden",
         states: {
-            hover: `hover:bg-white/10 hover:${GLASS_SM}`,
+            hover: 'hover:bg-white/10',
             focus: "focus-visible:ring-2 focus-visible:ring-ring",
-            selected: `data-[state=active]:bg-primary/12 data-[state=active]:text-primary data-[state=active]:border data-[state=active]:border-primary/15 data-[state=active]:${GLASS_SM}`,
+            selected: 'data-[state=active]:bg-primary/12 data-[state=active]:text-primary data-[state=active]:border data-[state=active]:border-primary/15',
             disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]",
         },
         sizes: { sm: "h-7 px-3 text-xs", md: "h-8 px-4 text-sm", lg: "h-10 px-5 text-sm" },
@@ -317,45 +523,58 @@ const selectable = {
 // OVERLAY, DIVIDER, SKELETON
 // ============================================================
 const overlayBackdrop = recipe({
-    // Subtle frosted scrim — lets content show through
-    base: `bg-black/25 dark:bg-black/45 ${GLASS_SM}`,
+    base: 'bg-black/25 dark:bg-black/45 backdrop-blur-[2px]',
     motion: {
         enter: GL_MOTION.backdropEnter,
         exit: GL_MOTION.backdropExit,
     },
 });
 const divider = recipe({ base: "bg-white/10 dark:bg-white/5 shrink-0" });
-const skeleton = recipe({ base: `bg-white/8 dark:bg-white/5 ${GLASS_SM} animate-pulse rounded-xl ${HIGHLIGHT} motion-reduce:animate-none` });
+const skeleton = recipe({ base: 'bg-white/8 dark:bg-white/5 animate-pulse rounded-xl motion-reduce:animate-none' });
 const loadingSpinner = recipe({
     base: "text-muted-foreground animate-spin motion-reduce:animate-none",
-    motion: { transition: "transition-opacity duration-200 ease-out" },
+    motion: { transition: "transition-opacity duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none" },
 });
 const loadingOverlay = recipe({
-    base: `bg-background/60 ${GLASS_SM} backdrop-saturate-150`,
-    motion: { enter: "animate-in fade-in-0 duration-200", exit: "animate-out fade-out-0 duration-150" },
+    base: 'bg-background/80 backdrop-blur-[2px]',
+    motion: {
+        enter: "animate-in fade-in-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-enter)] motion-reduce:animate-none",
+        exit: "animate-out fade-out-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-exit)] motion-reduce:animate-none",
+    },
 });
 // ============================================================
 // TYPOGRAPHY
 // ============================================================
 const typography = {
     [TypographyVariant.HEADING]: recipe({
+        // Glass keeps a slightly bolder h1 (`text-4xl`) than the default theme's
+        // rebalanced `text-3xl` (TR-8). The rationale is theme-specific: glass
+        // surfaces are translucent — large headings act as a visual anchor that
+        // the eye can lock onto against shifting backdrops. Default's tighter
+        // ladder makes sense on opaque cards; glass needs the extra tier of
+        // visual weight. Intentional divergence — do NOT homogenise to default.
         base: "font-semibold leading-none tracking-tight text-foreground",
         sizes: { h1: "text-4xl", h2: "text-2xl", h3: "text-xl", h4: "text-lg", md: "text-lg" },
     }),
+    // Body / Label / Description: use semantic foreground tokens — `/90`, `/80`, `/50`
+    // alpha-mixes blow out on translucent glass surfaces (compositing on top of
+    // the page background means the text loses contrast unpredictably). The
+    // `text-muted-foreground` token is designed to remain legible against any
+    // surface in the system and respects user-customised palettes.
     [TypographyVariant.BODY]: recipe({
-        base: "text-foreground/90 text-sm",
+        base: "text-foreground text-sm",
         sizes: { sm: "text-xs", md: "text-sm", lg: "text-base" },
     }),
     [TypographyVariant.LABEL]: recipe({
-        base: "font-medium text-sm leading-none text-foreground/80",
+        base: "font-medium text-sm leading-none text-foreground",
         sizes: { sm: "text-xs", md: "text-sm", lg: "text-base" },
     }),
     [TypographyVariant.DESCRIPTION]: recipe({
-        base: "text-foreground/50 text-sm",
+        base: "text-muted-foreground text-sm",
         sizes: { sm: "text-xs", md: "text-sm" },
     }),
     [TypographyVariant.CODE]: recipe({
-        base: `font-mono text-sm bg-white/8 dark:bg-white/5 ${GLASS_SM} rounded-lg px-1.5 py-0.5 border border-white/10 ${HIGHLIGHT}`,
+        base: 'font-mono text-sm bg-white/8 dark:bg-white/5 rounded-lg px-1.5 py-0.5 border border-white/10',
         sizes: { sm: "text-xs", md: "text-sm", lg: "text-base" },
     }),
 };
@@ -385,8 +604,13 @@ const spacing = {
 export const glassTheme = {
     id: 'glass',
     name: 'Glass',
-    description: 'Apple Liquid Glass inspired. Frosted surfaces with backdrop-blur + saturate + brightness vibrancy. Specular inset highlights. Depth hierarchy through blur intensity (8px → 16px → 24px → 32px). Smooth 250ms ease-out transitions with scale-on-press feedback.',
+    description: 'A progressive Liquid Glass material: role-scaled depth, adaptive transmitted-background blur and tone, Snell-law bezel refraction, and signed environment-aware edge lighting in Chromium, with standard content surfaces beneath the functional navigation/control layer.',
     spacing,
+    materials,
+    materialRuntimePolicy: {
+        maxRefractiveSurfaces: 8,
+        maxTotalRefractiveAreaPx: 760_000,
+    },
     interactive,
     surface,
     formControl,
@@ -399,16 +623,25 @@ export const glassTheme = {
     loadingOverlay,
     typography,
     radius: '0.75rem',
+    shellAppearance: ShellAppearance.CONTINUOUS,
     backgroundLayer: {
-        background: 'radial-gradient(at 20% 30%, oklch(0.75 0.15 280) 0px, transparent 50%), radial-gradient(at 80% 60%, oklch(0.70 0.12 200) 0px, transparent 50%), radial-gradient(at 50% 80%, oklch(0.72 0.10 320) 0px, transparent 50%)',
-        classes: 'opacity-40 animate-[mesh-shift_20s_ease_infinite] dark:opacity-30',
+        background: 'var(--background)',
+        classes: 'opacity-100',
     },
     chartStyle: {
         colorShadeLight: 400,
         colorShadeDark: 300,
         gridPadding: { top: 30, right: 20, bottom: 30, left: 60 },
         axis: { showAxisLine: false, showTicks: false, splitLineType: 'none', hideOverlap: true, yAxisNameLocation: 'middle', yAxisNameGap: 50 },
-        tooltip: { extraCss: 'backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,0.6) !important; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.08);', borderWidth: 0 },
+        // TT-3: Use surface tokens instead of hardcoded `rgba(255,255,255,...)`
+        // so the chart tooltip darkens correctly under `.dark` and tracks tenant
+        // surface re-colorings. Dropping `!important` lets recipe-level overrides
+        // win when needed; ECharts injects this into a portal where there's no
+        // competing background to override anymore.
+        tooltip: {
+            extraCss: 'backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in oklch, var(--surface-overlay) 60%, transparent); border: 1px solid color-mix(in oklch, var(--border) 30%, transparent); box-shadow: 0 8px 32px color-mix(in oklch, var(--foreground) 8%, transparent);',
+            borderWidth: 0,
+        },
         animation: { enabled: true, durationMs: 300, easing: 'cubicInOut' },
         series: { lineWidth: 1.5, pointSize: 5, areaOpacity: 0.15, barBorderRadius: 4, pieBorderWidth: 1 },
         typography: { titleFontSize: 16, titleFontWeight: 500, subtitleFontSize: 13, legendFontSize: 12, tooltipFontSize: 12, axisLabelFontSize: 11, axisNameFontSize: 12 },
@@ -417,4 +650,4 @@ export const glassTheme = {
         multiSeriesLegendBottomPadding: 50,
     },
 };
-//# sourceMappingURL=glass.theme.js.map
+//# sourceMappingURL=glass.theme.js.map