@thesage/ui 0.0.12 → 0.0.13

package/README.md

@@ -1,4 +1,4 @@
-# Sage UI (@thesage/ui)
+# Sage Design Engine (@thesage/ui)
 
 <div align="center">
 
@@ -14,7 +14,7 @@
 
 ---
 
-**Sage UI** is not just a component library—it's a systematic design engine built for speed, consistency, and beauty. Built on top of **Radix UI** for headless accessibility and **Tailwind CSS** for styling, it provides a comprehensive suite of 45+ polished components that work together seamlessly.
+**Sage Design Engine** is not just a component library—it's a systematic design engine built for speed, consistency, and beauty. Built on top of **Radix UI** for headless accessibility and **Tailwind CSS** for styling, it provides a comprehensive suite of 45+ polished components that work together seamlessly.
 
 ## ✨ Features
 
@@ -27,7 +27,7 @@
 ## 🚀 Installation
 
 ### 1. Install Dependencies
-Sage UI is built on Tailwind CSS. You need to install the package and its peer dependencies.
+Sage Design Engine is built on Tailwind CSS. You need to install the package and its peer dependencies.
 
 ```bash
 pnpm add @thesage/ui @thesage/tokens @thesage/hooks lucide-react clsx tailwind-merge
@@ -61,7 +61,7 @@ import '@thesage/ui/globals.css';
 
 ## 💻 Usage
 
-Sage UI components are designed to be dropped into any React application.
+Sage Design Engine components are designed to be dropped into any React application.
 
 ```tsx
 import { Button, Card, Text, Heading } from '@thesage/ui';
@@ -84,7 +84,7 @@ export default function WelcomeCard() {
 
 ## 🖌️ Theming
 
-Sage UI uses a 4-layer token system. Changing a single primary color automatically updates buttons, focus rings, and chart colors across your entire application.
+Sage Design Engine uses a 4-layer token system. Changing a single primary color automatically updates buttons, focus rings, and chart colors across your entire application.
 
 ```tsx
 // Example: Customizing the theme

package/dist/index.d.mts

@@ -2207,9 +2207,28 @@ interface OrbBackgroundProps {
     hoverIntensity?: number;
     rotateOnHover?: boolean;
     forceHoverState?: boolean;
+    /**
+     * Background color (hex). If not provided, uses CSS variable --color-background.
+     * @default undefined (reads from theme)
+     */
     backgroundColor?: string;
+    /**
+     * Primary orb color (hex). Creates the main vibrant tone.
+     * @default '#9c43fe' (purple)
+     */
+    orbColor1?: string;
+    /**
+     * Secondary orb color (hex). Adds cool cyan tones.
+     * @default '#4cc2e9' (cyan)
+     */
+    orbColor2?: string;
+    /**
+     * Tertiary orb color (hex). Provides deep blue accent tones.
+     * @default '#101499' (deep blue)
+     */
+    orbColor3?: string;
 }
-declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
+declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor, orbColor1, orbColor2, orbColor3, }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
 
 interface HeroBlockProps {
     className?: string;

package/dist/index.d.ts

@@ -2207,9 +2207,28 @@ interface OrbBackgroundProps {
     hoverIntensity?: number;
     rotateOnHover?: boolean;
     forceHoverState?: boolean;
+    /**
+     * Background color (hex). If not provided, uses CSS variable --color-background.
+     * @default undefined (reads from theme)
+     */
     backgroundColor?: string;
+    /**
+     * Primary orb color (hex). Creates the main vibrant tone.
+     * @default '#9c43fe' (purple)
+     */
+    orbColor1?: string;
+    /**
+     * Secondary orb color (hex). Adds cool cyan tones.
+     * @default '#4cc2e9' (cyan)
+     */
+    orbColor2?: string;
+    /**
+     * Tertiary orb color (hex). Provides deep blue accent tones.
+     * @default '#101499' (deep blue)
+     */
+    orbColor3?: string;
 }
-declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
+declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor, orbColor1, orbColor2, orbColor3, }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
 
 interface HeroBlockProps {
     className?: string;

package/dist/index.js

@@ -9880,13 +9880,30 @@ var AnimatedBeam = ({
 var import_ogl3 = require("ogl");
 var import_react36 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
+function hexToRgb4(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return [0, 0, 0];
+  return [
+    parseInt(result[1], 16) / 255,
+    parseInt(result[2], 16) / 255,
+    parseInt(result[3], 16) / 255
+  ];
+}
+function getCSSVariable2(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
 function OrbBackground({
   className,
   hue = 0,
   hoverIntensity = 0.2,
   rotateOnHover = true,
   forceHoverState = false,
-  backgroundColor = "#000000"
+  backgroundColor,
+  orbColor1,
+  orbColor2,
+  orbColor3
 }) {
   const ctnDom = (0, import_react36.useRef)(null);
   const vert = (
@@ -9914,6 +9931,10 @@ function OrbBackground({
     uniform float rot;
     uniform float hoverIntensity;
     uniform vec3 backgroundColor;
+    // THEME-AWARE: Orb colors from theme (to revert: change back to const)
+    uniform vec3 orbColor1;
+    uniform vec3 orbColor2;
+    uniform vec3 orbColor3;
     varying vec2 vUv;
 
     vec3 rgb2yiq(vec3 c) {
@@ -9982,10 +10003,12 @@ function OrbBackground({
       float a = max(max(colorIn.r, colorIn.g), colorIn.b);
       return vec4(colorIn.rgb / (a + 1e-5), a);
     }
-    
-    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
-    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
-    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+
+    // THEME-AWARE: Colors now come from uniforms (orbColor1, orbColor2, orbColor3)
+    // To revert to hardcoded: uncomment these and remove uniforms above
+    // const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    // const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    // const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
     const float innerRadius = 0.6;
     const float noiseScale = 0.65;
     
@@ -9998,9 +10021,10 @@ function OrbBackground({
     }
     
     vec4 draw(vec2 uv) {
-      vec3 color1 = adjustHue(baseColor1, hue);
-      vec3 color2 = adjustHue(baseColor2, hue);
-      vec3 color3 = adjustHue(baseColor3, hue);
+      // THEME-AWARE: Use uniform colors instead of hardcoded consts
+      vec3 color1 = adjustHue(orbColor1, hue);
+      vec3 color2 = adjustHue(orbColor2, hue);
+      vec3 color3 = adjustHue(orbColor3, hue);
       
       float ang = atan(uv.y, uv.x);
       float len = length(uv);
@@ -10069,6 +10093,14 @@ function OrbBackground({
   (0, import_react36.useEffect)(() => {
     const container = ctnDom.current;
     if (!container) return;
+    const bgColor = backgroundColor || getCSSVariable2("--color-background", "#000000");
+    const color1 = orbColor1 || "#9c43fe";
+    const color2 = orbColor2 || "#4cc2e9";
+    const color3 = orbColor3 || "#101499";
+    const bgRgb = hexToRgb4(bgColor);
+    const color1Rgb = hexToRgb4(color1);
+    const color2Rgb = hexToRgb4(color2);
+    const color3Rgb = hexToRgb4(color3);
     const renderer = new import_ogl3.Renderer({ alpha: true, premultipliedAlpha: false });
     const gl = renderer.gl;
     gl.clearColor(0, 0, 0, 0);
@@ -10086,7 +10118,11 @@ function OrbBackground({
         hover: { value: 0 },
         rot: { value: 0 },
         hoverIntensity: { value: hoverIntensity },
-        backgroundColor: { value: hexToVec3(backgroundColor) }
+        // THEME-AWARE: Pass theme colors to shader
+        backgroundColor: { value: new import_ogl3.Vec3(...bgRgb) },
+        orbColor1: { value: new import_ogl3.Vec3(...color1Rgb) },
+        orbColor2: { value: new import_ogl3.Vec3(...color2Rgb) },
+        orbColor3: { value: new import_ogl3.Vec3(...color3Rgb) }
       }
     });
     const mesh = new import_ogl3.Mesh(gl, { geometry, program });
@@ -10143,7 +10179,6 @@ function OrbBackground({
         currentRot += dt * rotationSpeed;
       }
       program.uniforms.rot.value = currentRot;
-      program.uniforms.backgroundColor.value = hexToVec3(backgroundColor);
       renderer.render({ scene: mesh });
     };
     rafId = requestAnimationFrame(update);
@@ -10160,47 +10195,6 @@ function OrbBackground({
   }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { ref: ctnDom, className: cn("w-full h-full pointer-events-auto", className) });
 }
-function hslToRgb(h, s, l) {
-  let r, g, b;
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    const hue2rgb = (p2, q2, t) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-      if (t < 1 / 2) return q2;
-      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-      return p2;
-    };
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
-  return new import_ogl3.Vec3(r, g, b);
-}
-function hexToVec3(color) {
-  if (color.startsWith("#")) {
-    const r = parseInt(color.slice(1, 3), 16) / 255;
-    const g = parseInt(color.slice(3, 5), 16) / 255;
-    const b = parseInt(color.slice(5, 7), 16) / 255;
-    return new import_ogl3.Vec3(r, g, b);
-  }
-  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-  if (rgbMatch) {
-    return new import_ogl3.Vec3(parseInt(rgbMatch[1]) / 255, parseInt(rgbMatch[2]) / 255, parseInt(rgbMatch[3]) / 255);
-  }
-  const hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);
-  if (hslMatch) {
-    const h = parseInt(hslMatch[1]) / 360;
-    const s = parseInt(hslMatch[2]) / 100;
-    const l = parseInt(hslMatch[3]) / 100;
-    return hslToRgb(h, s, l);
-  }
-  return new import_ogl3.Vec3(0, 0, 0);
-}
 
 // src/components/blocks/Hero.tsx
 var import_lucide_react22 = require("lucide-react");
@@ -11679,6 +11673,49 @@ function mergeCustomColorTokens(baseTokens2, customPalette) {
     ...customPalette.derivedTokens
   };
 }
+function validateThemeTokens(theme, mode) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const requiredTokens = [
+    "--color-background",
+    "--color-foreground",
+    "--color-primary",
+    "--color-primary-foreground",
+    "--color-border",
+    "--color-ring",
+    "--font-heading",
+    "--font-body",
+    "--font-mono"
+  ];
+  const missingTokens = [];
+  const invalidTokens = [];
+  requiredTokens.forEach((token) => {
+    const value = style.getPropertyValue(token).trim();
+    if (!value) {
+      missingTokens.push(token);
+    } else if (token.startsWith("--color-") && !value.match(/^(#|rgb|hsl|var\()/)) {
+      invalidTokens.push(`${token} = "${value}"`);
+    } else if (token.startsWith("--font-") && value === "") {
+      invalidTokens.push(`${token} = empty`);
+    }
+  });
+  if (missingTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Missing CSS variables for theme "${theme}" (${mode} mode):`,
+      missingTokens
+    );
+  }
+  if (invalidTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Invalid CSS variable values for theme "${theme}" (${mode} mode):`,
+      invalidTokens
+    );
+  }
+  if (missingTokens.length === 0 && invalidTokens.length === 0) {
+    console.log(`[ThemeProvider] \u2713 Theme validation passed for "${theme}" (${mode} mode)`);
+  }
+}
 function ThemeProvider({ children }) {
   const { theme, mode } = useThemeStore();
   const customPalette = useCustomizer((state) => state.customColors?.[theme]?.[mode]);
@@ -11712,6 +11749,7 @@ function ThemeProvider({ children }) {
     } else {
       root.classList.remove("dark");
     }
+    validateThemeTokens(theme, mode);
     const timeout = setTimeout(() => {
       root.classList.remove("theme-transitioning");
       setIsTransitioning(false);