orbcafe-ui 1.4.6 → 2.0.1

package/dist/themes/nvidia.css

@@ -0,0 +1,36 @@
+/* nvidia.css — generated from the local Open Design preset "nvidia". Do not edit.
+   Regenerate with: npx orbcafe-theme apply nvidia
+   Import AFTER the base styles (import 'orbcafe-ui/styles.css').
+   Only base tokens are overridden; all derived tokens re-derive via color-mix. */
+
+:root {
+  --orb-primary: #76b900;
+  --orb-accent: #f2a900;
+  --orb-err: #d40000;
+  --orb-fg: #1a1a1a;
+  --orb-fg-strong: #1a1a1a;
+  --orb-muted: #666666;
+  --orb-canvas: #ffffff;
+  --orb-surface: #f2f2f2;
+  --orb-border: #e0e0e0;
+  --orb-link: #5c9100;
+  --orb-font-brand: "NVIDIA Sans";
+  --orb-r: 4px;
+}
+
+.orb-dark,
+[data-orb-mode="dark"] {
+  --orb-primary: #76b900;
+  --orb-accent: #f2a900;
+  --orb-err: #ff6b6b;
+  --orb-fg: #eeeeee;
+  --orb-fg-strong: #eeeeee;
+  --orb-muted: #aaaaaa;
+  --orb-canvas: #000000;
+  --orb-surface: #191919;
+  --orb-surface-2: #2a2a2a;
+  --orb-border: #3d3d3d;
+  --orb-link: #a4d24b;
+  --orb-font-brand: "NVIDIA Sans";
+  --orb-r: 4px;
+}

package/dist/themes/nvidia.tokens.mjs

@@ -0,0 +1,117 @@
+/**
+ * ORBCAFE × nvidia theme tokens (JS side) — generated. Do not edit.
+ * Mirrors nvidia.css for consumers that cannot read CSS variables
+ * (SVG charts, canvas, inline-style computations).
+ * Shape matches OrbTokens from 'orbcafe-ui'.
+ */
+export const ORB_LIGHT = {
+  canvas: '#ffffff',
+  surface: '#f2f2f2',
+  surface2: '#f2f2f2',
+  surface3: '#f2f2f2',
+  fg: '#1a1a1a',
+  muted: '#666666',
+  border: '#e0e0e0',
+  primary: '#76b900',
+  onPrimary: '#ffffff',
+  link: '#5c9100',
+  p50: '#f7fbf3',
+  p100: '#ebf6e3',
+  p200: '#d8edc7',
+  p300: '#c1e1a4',
+  p600: '#5e9400',
+  p700: '#477100',
+  accent: '#f2a900',
+  err: '#d40000',
+  errBg: '#fff9f2',
+  warnBg: '#fef8f0',
+  hover: 'rgba(118, 185, 0, 0.06)',
+  selected: 'rgba(118, 185, 0, 0.1)',
+  focusRing: 'rgba(118, 185, 0, 0.18)',
+  focusSolid: '#76b900',
+  disabledFg: '#8e8e8e',
+  disabledBg: '#eaeaea',
+  chartGrid: '#e0e0e0',
+  chartText: '#666666',
+  track: '#f2f2f2',
+  shadow1: '0 1px 2px rgba(1,9,26,.05),0 2px 6px rgba(1,9,26,.06)',
+  shadow2: '0 4px 14px rgba(1,9,26,.10)',
+  shadow3: '0 12px 32px rgba(1,9,26,.16)',
+  fontBrand: 'NVIDIA Sans',
+  inverseSurface: '#01091a',
+  inverseFg: '#ffffff',
+  inverseLink: '#c1e1a4',
+  aiAccent: '#21bcff',
+  statusFg: '#475569',
+  statusPrimary: '#1d4ed8',
+  statusSuccess: '#047857',
+  statusWarning: '#b45309',
+  statusError: '#b91c1c',
+  statusInfo: '#0369a1',
+  chart1: '#76b900',
+  chart2: '#c1e1a4',
+  chart3: '#666666',
+  chart4: '#477100',
+  chart5: '#f2a900',
+  chart6: '#d8edc7',
+  chartPositive: '#66bb6a',
+  chartNegative: '#ef5350',
+};
+
+export const ORB_DARK = {
+  canvas: '#000000',
+  surface: '#191919',
+  surface2: '#2a2a2a',
+  surface3: '#020202',
+  fg: '#eeeeee',
+  muted: '#aaaaaa',
+  border: '#3d3d3d',
+  primary: '#76b900',
+  onPrimary: '#ffffff',
+  link: '#a4d24b',
+  p50: '#061000',
+  p100: '#122200',
+  p200: '#d8edc7',
+  p300: '#c1e1a4',
+  p600: '#8ac449',
+  p700: '#acd685',
+  accent: '#f2a900',
+  err: '#ff6b6b',
+  errBg: '#0c0500',
+  warnBg: '#100800',
+  hover: 'rgba(255, 255, 255, 0.08)',
+  selected: 'rgba(118, 185, 0, 0.45)',
+  focusRing: 'rgba(193, 225, 164, 0.45)',
+  focusSolid: '#c1e1a4',
+  disabledFg: 'rgba(255, 255, 255, 0.38)',
+  disabledBg: 'rgba(255, 255, 255, 0.07)',
+  chartGrid: 'rgba(255, 255, 255, 0.12)',
+  chartText: 'rgba(255, 255, 255, 0.7)',
+  track: 'rgba(255, 255, 255, 0.1)',
+  shadow1: '0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.35)',
+  shadow2: '0 4px 16px rgba(0,0,0,.5)',
+  shadow3: '0 12px 32px rgba(0,0,0,.55)',
+  fontBrand: 'NVIDIA Sans',
+  inverseSurface: '#01091a',
+  inverseFg: '#ffffff',
+  inverseLink: '#c1e1a4',
+  aiAccent: '#21bcff',
+  statusFg: '#94a3b8',
+  statusPrimary: '#60a5fa',
+  statusSuccess: '#34d399',
+  statusWarning: '#fbbf24',
+  statusError: '#f87171',
+  statusInfo: '#38bdf8',
+  chart1: '#76b900',
+  chart2: '#c1e1a4',
+  chart3: '#aaaaaa',
+  chart4: '#acd685',
+  chart5: '#f2a900',
+  chart6: '#d8edc7',
+  chartPositive: '#66bb6a',
+  chartNegative: '#ef5350',
+};
+
+export const ORB_TOKENS = { light: ORB_LIGHT, dark: ORB_DARK };
+
+export default ORB_TOKENS;

package/dist/themes/orbis.css

@@ -0,0 +1,62 @@
+/* orbis.css — generated from the local Open Design preset "orbis". Do not edit.
+   Regenerate with: npx orbcafe-theme apply orbis
+   Import AFTER the base styles (import 'orbcafe-ui/styles.css').
+   Only base tokens are overridden; all derived tokens re-derive via color-mix. */
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("./orbis/fonts/montserrat-300.otf") format("opentype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./orbis/fonts/montserrat-500.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./orbis/fonts/montserrat-600.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Montserrat";
+  src: url("./orbis/fonts/montserrat-700.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --orb-primary: #154194;
+  --orb-accent: #fc4c02;
+  --orb-fg: #696969;
+  --orb-fg-strong: #696969;
+  --orb-muted: #919191;
+  --orb-canvas: #ffffff;
+  --orb-surface: #f5f5f5;
+  --orb-border: #e6e6e6;
+  --orb-font-brand: "Montserrat";
+  --orb-r: 10px;
+}
+
+.orb-dark,
+[data-orb-mode="dark"] {
+  --orb-primary: #2c508c;
+  --orb-accent: #dc6328;
+  --orb-fg: #dcdcdc;
+  --orb-fg-strong: #dcdcdc;
+  --orb-muted: #adadad;
+  --orb-canvas: #1d1d1d;
+  --orb-surface: #141414;
+  --orb-surface-2: #272727;
+  --orb-border: #3e3e3e;
+  --orb-link: #97abc2;
+  --orb-font-brand: "Montserrat";
+  --orb-r: 10px;
+}

package/dist/themes/orbis.tokens.mjs

@@ -0,0 +1,117 @@
+/**
+ * ORBCAFE × orbis theme tokens (JS side) — generated. Do not edit.
+ * Mirrors orbis.css for consumers that cannot read CSS variables
+ * (SVG charts, canvas, inline-style computations).
+ * Shape matches OrbTokens from 'orbcafe-ui'.
+ */
+export const ORB_LIGHT = {
+  canvas: '#ffffff',
+  surface: '#f5f5f5',
+  surface2: '#f5f5f5',
+  surface3: '#f5f5f5',
+  fg: '#696969',
+  muted: '#919191',
+  border: '#e6e6e6',
+  primary: '#154194',
+  onPrimary: '#ffffff',
+  link: '#154194',
+  p50: '#f0f3f9',
+  p100: '#dce4f1',
+  p200: '#bac9e3',
+  p300: '#91a8d1',
+  p600: '#0f3276',
+  p700: '#08255a',
+  accent: '#fc4c02',
+  err: '#ac3101',
+  errBg: '#fff4f0',
+  warnBg: '#fff2ee',
+  hover: 'rgba(21, 65, 148, 0.06)',
+  selected: 'rgba(21, 65, 148, 0.1)',
+  focusRing: 'rgba(21, 65, 148, 0.18)',
+  focusSolid: '#154194',
+  disabledFg: '#b9b9b9',
+  disabledBg: '#f2f2f2',
+  chartGrid: '#e6e6e6',
+  chartText: '#919191',
+  track: '#f5f5f5',
+  shadow1: '0 1px 2px rgba(1,9,26,.05),0 2px 6px rgba(1,9,26,.06)',
+  shadow2: '0 4px 14px rgba(1,9,26,.10)',
+  shadow3: '0 12px 32px rgba(1,9,26,.16)',
+  fontBrand: 'Montserrat',
+  inverseSurface: '#01091a',
+  inverseFg: '#ffffff',
+  inverseLink: '#91a8d1',
+  aiAccent: '#21bcff',
+  statusFg: '#475569',
+  statusPrimary: '#1d4ed8',
+  statusSuccess: '#047857',
+  statusWarning: '#b45309',
+  statusError: '#b91c1c',
+  statusInfo: '#0369a1',
+  chart1: '#154194',
+  chart2: '#91a8d1',
+  chart3: '#919191',
+  chart4: '#08255a',
+  chart5: '#fc4c02',
+  chart6: '#bac9e3',
+  chartPositive: '#66bb6a',
+  chartNegative: '#ef5350',
+};
+
+export const ORB_DARK = {
+  canvas: '#1d1d1d',
+  surface: '#141414',
+  surface2: '#272727',
+  surface3: '#2e2e2e',
+  fg: '#dcdcdc',
+  muted: '#adadad',
+  border: '#3e3e3e',
+  primary: '#2c508c',
+  onPrimary: '#ffffff',
+  link: '#97abc2',
+  p50: '#212834',
+  p100: '#232d3e',
+  p200: '#c0ccdf',
+  p300: '#9baecc',
+  p600: '#49699e',
+  p700: '#7c94bb',
+  accent: '#dc6328',
+  err: '#b95220',
+  errBg: '#392922',
+  warnBg: '#3c2a23',
+  hover: 'rgba(255, 255, 255, 0.08)',
+  selected: 'rgba(44, 80, 140, 0.45)',
+  focusRing: 'rgba(155, 174, 204, 0.45)',
+  focusSolid: '#9baecc',
+  disabledFg: 'rgba(255, 255, 255, 0.38)',
+  disabledBg: 'rgba(255, 255, 255, 0.07)',
+  chartGrid: 'rgba(255, 255, 255, 0.12)',
+  chartText: 'rgba(255, 255, 255, 0.7)',
+  track: 'rgba(255, 255, 255, 0.1)',
+  shadow1: '0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.35)',
+  shadow2: '0 4px 16px rgba(0,0,0,.5)',
+  shadow3: '0 12px 32px rgba(0,0,0,.55)',
+  fontBrand: 'Montserrat',
+  inverseSurface: '#01091a',
+  inverseFg: '#ffffff',
+  inverseLink: '#9baecc',
+  aiAccent: '#21bcff',
+  statusFg: '#94a3b8',
+  statusPrimary: '#60a5fa',
+  statusSuccess: '#34d399',
+  statusWarning: '#fbbf24',
+  statusError: '#f87171',
+  statusInfo: '#38bdf8',
+  chart1: '#2c508c',
+  chart2: '#9baecc',
+  chart3: '#adadad',
+  chart4: '#7c94bb',
+  chart5: '#dc6328',
+  chart6: '#c0ccdf',
+  chartPositive: '#66bb6a',
+  chartNegative: '#ef5350',
+};
+
+export const ORB_TOKENS = { light: ORB_LIGHT, dark: ORB_DARK };
+
+export default ORB_TOKENS;

package/package.json

@@ -1,19 +1,36 @@
 {
   "name": "orbcafe-ui",
-  "version": "1.4.6",
-  "description": "Awesome UI components with Glassmorphism",
+  "version": "2.0.1",
+  "description": "ORBCAFE UI components — ORBIS brand system, MUI-free",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "style": "./dist/orbis.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/orbis.css",
+    "./dist/orbis.css": "./dist/orbis.css",
+    "./dist/index.css": "./dist/index.css",
+    "./fonts/*": "./dist/fonts/*",
+    "./package.json": "./package.json",
+    "./themes/*": "./dist/themes/*"
+  },
   "scripts": {
     "check:ai-contracts": "node scripts/check-ai-contracts.js",
+    "check:types": "tsc --noEmit && cd examples && ./node_modules/.bin/tsc --noEmit",
+    "check:examples": "npm --prefix examples run lint",
     "docs:build": "node scripts/build-docs-pages.js",
     "build": "tsup",
     "prepublishOnly": "npm run build",
     "pack:check": "npm_config_cache=/tmp/.npm-cache npm pack --dry-run",
-    "release:check": "npm run check:ai-contracts && npm run docs:build && npm run build && npm run pack:check",
+    "release:check": "npm run check:ai-contracts && npm run check:types && npm run check:examples && npm run docs:build && npm run build && npm run pack:check",
     "publish:npm": "npm publish --access public",
-    "publish:npm:token": "./scripts/publish-npm.sh"
+    "publish:npm:token": "./scripts/publish-npm.sh",
+    "build:theme": "node scripts/build-theme.mjs"
   },
   "keywords": [
     "react",
@@ -22,29 +39,36 @@
   ],
   "author": "ORBAI Team",
   "license": "MIT",
-  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SHENRUIYANG/orbcafe-ui.git"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
-    "dist"
+    "dist",
+    "bin",
+    "MIGRATION_V2.md",
+    "BRAND_THEMING.md"
   ],
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.8",
-    "@mui/material": "^7.3.8",
-    "@mui/x-date-pickers": "^8.27.2",
     "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "next": "^16.2.0",
+    "tailwindcss": "^4.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
@@ -52,15 +76,17 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.19",
     "framer-motion": "^12.35.1",
     "i18next": "^25.8.18",
-    "lucide-react": "^0.475.0",
     "mermaid": "^10.9.0",
-    "next-themes": "^0.3.0",
     "ogl": "^1.0.11",
     "react-i18next": "^16.5.8",
     "react-markdown": "^9.0.0",
@@ -72,6 +98,11 @@
     "tailwind-merge": "^2.0.0"
   },
   "overrides": {
+    "esbuild": "^0.28.1",
+    "postcss": "^8.5.10",
     "rollup": "^4.59.0"
+  },
+  "bin": {
+    "orbcafe-theme": "./bin/orbcafe-theme.mjs"
   }
 }

package/dist/COrbCanvas-EGX5NO3Y.mjs

@@ -1 +0,0 @@
-export{b as COrbCanvas}from'./chunk-74Z76O3S.mjs';

package/dist/chunk-74Z76O3S.mjs

@@ -1,183 +0,0 @@
-import {Renderer,Triangle,Program,Vec3,Mesh}from'ogl';import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var U=Object.defineProperty;var B=(t,o,n)=>o in t?U(t,o,{enumerable:true,configurable:true,writable:true,value:n}):t[o]=n;var X=(t,o,n)=>B(t,typeof o!="symbol"?o+"":o,n);function J({hue:t=0,hoverIntensity:o=.2,rotateOnHover:n=true,forceHoverState:s=false,backgroundColor:a="transparent"}){let c=useRef(null),g=`
-    precision highp float;
-    attribute vec2 position;
-    attribute vec2 uv;
-    varying vec2 vUv;
-    void main() {
-      vUv = uv;
-      gl_Position = vec4(position, 0.0, 1.0);
-    }
-  `,h=`
-    precision highp float;
-
-    uniform float iTime;
-    uniform vec3 iResolution;
-    uniform float hue;
-    uniform float hover;
-    uniform float rot;
-    uniform float hoverIntensity;
-    uniform vec3 backgroundColor;
-    varying vec2 vUv;
-
-    vec3 rgb2yiq(vec3 c) {
-      float y = dot(c, vec3(0.299, 0.587, 0.114));
-      float i = dot(c, vec3(0.596, -0.274, -0.322));
-      float q = dot(c, vec3(0.211, -0.523, 0.312));
-      return vec3(y, i, q);
-    }
-    
-    vec3 yiq2rgb(vec3 c) {
-      float r = c.x + 0.956 * c.y + 0.621 * c.z;
-      float g = c.x - 0.272 * c.y - 0.647 * c.z;
-      float b = c.x - 1.106 * c.y + 1.703 * c.z;
-      return vec3(r, g, b);
-    }
-    
-    vec3 adjustHue(vec3 color, float hueDeg) {
-      float hueRad = hueDeg * 3.14159265 / 180.0;
-      vec3 yiq = rgb2yiq(color);
-      float cosA = cos(hueRad);
-      float sinA = sin(hueRad);
-      float i = yiq.y * cosA - yiq.z * sinA;
-      float q = yiq.y * sinA + yiq.z * cosA;
-      yiq.y = i;
-      yiq.z = q;
-      return yiq2rgb(yiq);
-    }
-
-    vec3 hash33(vec3 p3) {
-      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
-      p3 += dot(p3, p3.yxz + 19.19);
-      return -1.0 + 2.0 * fract(vec3(
-        p3.x + p3.y,
-        p3.x + p3.z,
-        p3.y + p3.z
-      ) * p3.zyx);
-    }
-
-    float snoise3(vec3 p) {
-      const float K1 = 0.333333333;
-      const float K2 = 0.166666667;
-      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
-      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
-      vec3 e = step(vec3(0.0), d0 - d0.yzx);
-      vec3 i1 = e * (1.0 - e.zxy);
-      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
-      vec3 d1 = d0 - (i1 - K2);
-      vec3 d2 = d0 - (i2 - K1);
-      vec3 d3 = d0 - 0.5;
-      vec4 h = max(0.6 - vec4(
-        dot(d0, d0),
-        dot(d1, d1),
-        dot(d2, d2),
-        dot(d3, d3)
-      ), 0.0);
-      vec4 n = h * h * h * h * vec4(
-        dot(d0, hash33(i)),
-        dot(d1, hash33(i + i1)),
-        dot(d2, hash33(i + i2)),
-        dot(d3, hash33(i + 1.0))
-      );
-      return dot(vec4(31.316), n);
-    }
-
-    vec4 extractAlpha(vec3 colorIn) {
-      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);
-    // Make it solid by reducing inner radius to near zero
-    const float innerRadius = 0.0;
-    const float noiseScale = 1.0;
-
-    float light1(float intensity, float attenuation, float dist) {
-      return intensity / (1.0 + dist * attenuation);
-    }
-    float light2(float intensity, float attenuation, float dist) {
-      return intensity / (1.0 + dist * dist * attenuation);
-    }
-
-    vec4 draw(vec2 uv) {
-      vec3 color1 = adjustHue(baseColor1, hue);
-      vec3 color2 = adjustHue(baseColor2, hue);
-      vec3 color3 = adjustHue(baseColor3, hue);
-      
-      float ang = atan(uv.y, uv.x);
-      float len = length(uv);
-      float invLen = len > 0.0 ? 1.0 / len : 0.0;
-
-      float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));
-      
-      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
-      
-      // Increased outer radius factor from 1.0 to 1.8 to make the orb larger
-      float r0 = mix(mix(innerRadius, 1.2, 0.4), mix(innerRadius, 1.8, 0.6), n0);
-      
-      float d0 = distance(uv, (r0 * invLen) * uv);
-      float v0 = light1(1.0, 10.0, d0);
-      v0 *= smoothstep(r0 * 1.05, r0, len);
-      
-      // Remove inner fade to keep the center solid
-      float innerFade = 1.0; 
-      
-      v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);
-      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
-      
-      float a = iTime * -1.0;
-      vec2 pos = vec2(cos(a), sin(a)) * r0;
-      float d = distance(uv, pos);
-      float v1 = light2(1.5, 5.0, d);
-      v1 *= light1(1.0, 50.0, d0);
-      
-      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
-      
-      // Keep center solid instead of fading out
-      float v3 = 1.0; 
-      
-      vec3 colBase = mix(color1, color2, cl);
-      float fadeAmount = mix(1.0, 0.1, bgLuminance);
-      
-      vec3 darkCol = mix(color3, colBase, v0);
-      darkCol = (darkCol + v1) * v2 * v3;
-      darkCol = clamp(darkCol, 0.0, 1.0);
-      
-      vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);
-      lightCol = mix(backgroundColor, lightCol, v0);
-      lightCol = clamp(lightCol, 0.0, 1.0);
-      
-      vec3 finalCol = mix(darkCol, lightCol, bgLuminance);
-      
-      return extractAlpha(finalCol);
-    }
-
-    vec4 mainImage(vec2 fragCoord) {
-      vec2 center = iResolution.xy * 0.5;
-      // Use max dimension to ensure the orb covers the area (creating an ambient effect)
-      // rather than fitting inside (which would be tiny in a header)
-      float size = max(iResolution.x, iResolution.y);
-      vec2 uv = (fragCoord - center) / size * 2.0;
-
-      // Add randomness/waviness to UV coordinates
-      uv.x += sin(uv.y * 3.0 + iTime * 0.5) * 0.1;
-      uv.y += cos(uv.x * 3.0 + iTime * 0.5) * 0.1;
-      
-      float angle = rot;
-      float s = sin(angle);
-      float c = cos(angle);
-      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
-      
-      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
-      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
-      
-      return draw(uv);
-    }
-
-    void main() {
-      vec2 fragCoord = vUv * iResolution.xy;
-      vec4 col = mainImage(fragCoord);
-      gl_FragColor = vec4(col.rgb * col.a, col.a);
-    }
-  `;return useEffect(()=>{let i=c.current;if(!i)return;let l=new Renderer({alpha:true,premultipliedAlpha:false}),e=l.gl;e.clearColor(0,0,0,0),i.appendChild(e.canvas);let r=new Triangle(e),v=new Program(e,{vertex:g,fragment:h,uniforms:{iTime:{value:0},iResolution:{value:new Vec3(e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height)},hue:{value:t},hover:{value:0},rot:{value:0},hoverIntensity:{value:o},backgroundColor:{value:k(a)}}}),E=new Mesh(e,{geometry:r,program:v});function y(){if(!i)return;let u=window.devicePixelRatio||1,d=i.clientWidth,f=i.clientHeight;l.setSize(d*u,f*u),e.canvas.style.width=d+"px",e.canvas.style.height=f+"px",v.uniforms.iResolution.value.set(e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height);}window.addEventListener("resize",y),y();let p=0,x=0,C=0,M=.3,w=u=>{let d=i.getBoundingClientRect(),f=u.clientX-d.left,H=u.clientY-d.top,R=d.width,q=d.height,A=Math.min(R,q),K=R/2,F=q/2,L=(f-K)/A*2,T=(H-F)/A*2;Math.sqrt(L*L+T*T)<.8?p=1:p=0;},z=()=>{p=0;};i.addEventListener("mousemove",w),i.addEventListener("mouseleave",z);let b,I=u=>{b=requestAnimationFrame(I);let d=(u-x)*.001;x=u,v.uniforms.iTime.value=u*.001,v.uniforms.hue.value=t,v.uniforms.hoverIntensity.value=o,v.uniforms.backgroundColor.value=k(a);let f=s?1:p;v.uniforms.hover.value+=(f-v.uniforms.hover.value)*.1,n&&f>.5&&(C+=d*M),v.uniforms.rot.value=C,l.render({scene:E});};return b=requestAnimationFrame(I),()=>{cancelAnimationFrame(b),window.removeEventListener("resize",y),i.removeEventListener("mousemove",w),i.removeEventListener("mouseleave",z),e.canvas.parentNode===i&&i.removeChild(e.canvas),e.getExtension("WEBGL_lose_context")?.loseContext();}},[t,o,n,s,a]),jsx("div",{ref:c,className:"w-full h-full"})}function V(t,o,n){let s,a,c;if(o===0)s=a=c=n;else {let g=(l,e,r)=>(r<0&&(r+=1),r>1&&(r-=1),r<.16666666666666666?l+(e-l)*6*r:r<.5?e:r<.6666666666666666?l+(e-l)*(.6666666666666666-r)*6:l),h=n<.5?n*(1+o):n+o-n*o,i=2*n-h;s=g(i,h,t+1/3),a=g(i,h,t),c=g(i,h,t-1/3);}return new Vec3(s,a,c)}function k(t){if(t==="transparent")return new Vec3(0,0,0);if(t.startsWith("#")){let s=parseInt(t.slice(1,3),16)/255,a=parseInt(t.slice(3,5),16)/255,c=parseInt(t.slice(5,7),16)/255;return new Vec3(s,a,c)}let o=t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(o)return new Vec3(parseInt(o[1])/255,parseInt(o[2])/255,parseInt(o[3])/255);let n=t.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);if(n){let s=parseInt(n[1])/360,a=parseInt(n[2])/100,c=parseInt(n[3])/100;return V(s,a,c)}return new Vec3(0,0,0)}export{X as a,J as b};