@illuma-ai/icons 2.2.0 → 2.3.0

package/dist/brand/Terminal.d.ts

@@ -0,0 +1,25 @@
+import { SVGProps } from 'react';
+export interface TerminalIconProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    /** Pixel size for width and height. Defaults to 24. */
+    size?: number;
+}
+/**
+ * Static terminal glyph — a rounded window with a prompt chevron and a cursor
+ * line. `currentColor` for strokes so it inherits the surrounding text color
+ * (works on light and dark); the cursor is brand yellow.
+ */
+export declare const TerminalIcon: import('react').ForwardRefExoticComponent<Omit<TerminalIconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export interface AnimatedTerminalIconProps extends TerminalIconProps {
+    /** When false, renders the static icon (no animation). Defaults to true. */
+    running?: boolean;
+    /** Cursor/typing color. Defaults to brand yellow (#facc15). */
+    accent?: string;
+}
+/**
+ * Animated terminal logo for an in-progress terminal/code step: a prompt chevron
+ * with a blinking yellow cursor and a subtle "typing" line that grows and resets,
+ * evoking a command being typed. Subtle enough to suit light and dark themes;
+ * honors `prefers-reduced-motion` (framer-motion disables transform/opacity
+ * tweens automatically). When `running` is false it settles to the static icon.
+ */
+export declare const AnimatedTerminalIcon: import('react').ForwardRefExoticComponent<Omit<AnimatedTerminalIconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/brand/ThinkingOrb.d.ts

@@ -0,0 +1,16 @@
+export interface ThinkingOrbProps {
+    /** Pixel diameter. Defaults to 20 (inline with text). */
+    size?: number;
+    /** Animation speed multiplier. Defaults to 1. */
+    speed?: number;
+    className?: string;
+}
+/**
+ * A premium, AI-"thinking" fluid orb rendered with raw WebGL (no three.js). A
+ * simplex-noise–deformed sphere with a shifting cyan→violet→magenta→amber
+ * gradient and fresnel rim — the kind of organic, alive blob shown in modern
+ * assistant UIs. Self-contained (~3KB), 60fps on a tiny canvas, transparent
+ * background so it sits inline beside "Thinking" text on any theme. Falls back
+ * gracefully (renders nothing) where WebGL is unavailable.
+ */
+export declare function ThinkingOrb({ size, speed, className }: ThinkingOrbProps): import("react/jsx-runtime").JSX.Element;

package/dist/brand/index.d.ts

@@ -0,0 +1,4 @@
+export { TerminalIcon, AnimatedTerminalIcon } from './Terminal';
+export type { TerminalIconProps, AnimatedTerminalIconProps } from './Terminal';
+export { ThinkingOrb } from './ThinkingOrb';
+export type { ThinkingOrbProps } from './ThinkingOrb';

package/dist/brand.cjs

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=require("react"),u=require("framer-motion"),p=l.forwardRef(function({size:o=24,className:a,...r},n){return i.jsxs("svg",{ref:n,width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:a,role:"img","aria-label":"Terminal",...r,children:[i.jsx("rect",{x:"2.5",y:"4",width:"19",height:"16",rx:"2.5"}),i.jsx("path",{d:"m6.5 9 3 3-3 3"}),i.jsx("path",{d:"M12.5 15h4",stroke:"#facc15"})]})}),b=l.forwardRef(function({size:o=24,running:a=!0,accent:r="#facc15",className:n,...s},e){return a?i.jsxs("svg",{ref:e,width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:n,role:"img","aria-label":"Terminal running",...s,children:[i.jsx("rect",{x:"2.5",y:"4",width:"19",height:"16",rx:"2.5"}),i.jsx("path",{d:"m6.5 9 3 3-3 3"}),i.jsx(u.motion.path,{d:"M12.5 15h5",stroke:r,initial:{pathLength:0,opacity:.9},animate:{pathLength:[0,1,1,0]},transition:{duration:1.6,times:[0,.5,.8,1],repeat:1/0,ease:"easeInOut"}}),i.jsx(u.motion.rect,{x:"18.5",y:"13.4",width:"1.6",height:"3.2",rx:"0.3",fill:r,stroke:"none",animate:{opacity:[1,1,0,0,1]},transition:{duration:1.1,times:[0,.4,.5,.9,1],repeat:1/0}})]}):i.jsx(p,{ref:e,size:o,className:n,...s})}),R=`
+attribute vec2 p;
+varying vec2 uv;
+void main() { uv = p; gl_Position = vec4(p, 0.0, 1.0); }
+`,T=`
+precision highp float;
+varying vec2 uv;
+uniform float t;
+
+// Classic 2D simplex noise (Ashima Arts, MIT) — compact.
+vec3 permute(vec3 x){return mod(((x*34.0)+1.0)*x,289.0);}
+float snoise(vec2 v){
+  const vec4 C=vec4(0.211324865,0.366025404,-0.577350269,0.024390244);
+  vec2 i=floor(v+dot(v,C.yy));vec2 x0=v-i+dot(i,C.xx);
+  vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
+  vec4 x12=x0.xyxy+C.xxzz;x12.xy-=i1;
+  i=mod(i,289.0);
+  vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
+  vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
+  m=m*m;m=m*m;
+  vec3 x=2.0*fract(p*C.www)-1.0;vec3 h=abs(x)-0.5;vec3 ox=floor(x+0.5);vec3 a0=x-ox;
+  m*=1.79284291-0.85373472*(a0*a0+h*h);
+  vec3 g;g.x=a0.x*x0.x+h.x*x0.y;g.yz=a0.yz*x12.xz+h.yz*x12.yw;
+  return 130.0*dot(m,g);
+}
+
+void main(){
+  vec2 p=uv;
+  float r=length(p);
+  // Noise-deform the radius so the silhouette wobbles organically.
+  float n=snoise(p*2.2+vec2(t*0.25,t*0.18))*0.5+snoise(p*4.0-vec2(t*0.2))*0.25;
+  float edge=0.78+n*0.16;
+  float orb=smoothstep(edge,edge-0.18,r);
+  if(orb<0.01){ gl_FragColor=vec4(0.0); return; }
+  // Shifting gradient palette.
+  float a=atan(p.y,p.x);
+  float f=0.5+0.5*sin(a*1.0+t*0.6+n*2.0);
+  vec3 cyan=vec3(0.20,0.85,0.95);
+  vec3 violet=vec3(0.55,0.35,0.95);
+  vec3 magenta=vec3(0.95,0.30,0.70);
+  vec3 amber=vec3(1.0,0.75,0.30);
+  vec3 col=mix(cyan,violet,smoothstep(0.0,0.4,f));
+  col=mix(col,magenta,smoothstep(0.35,0.7,f));
+  col=mix(col,amber,smoothstep(0.7,1.0,f));
+  // Inner glow + fresnel rim.
+  float glow=smoothstep(0.0,0.6,1.0-r);
+  col+=glow*0.25;
+  float rim=smoothstep(edge-0.02,edge-0.16,r);
+  col=mix(col,vec3(1.0),(1.0-rim)*0.35*orb);
+  gl_FragColor=vec4(col,orb);
+}
+`;function g(t,o,a){const r=t.createShader(o);return t.shaderSource(r,a),t.compileShader(r),r}function k({size:t=20,speed:o=1,className:a}){const r=l.useRef(null);return l.useEffect(()=>{const n=r.current;if(!n)return;const s=Math.min(window.devicePixelRatio||1,2);n.width=t*s,n.height=t*s;const e=n.getContext("webgl",{premultipliedAlpha:!1,alpha:!0});if(!e)return;const c=e.createProgram();e.attachShader(c,g(e,e.VERTEX_SHADER,R)),e.attachShader(c,g(e,e.FRAGMENT_SHADER,T)),e.linkProgram(c),e.useProgram(c);const y=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,y),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),e.STATIC_DRAW);const d=e.getAttribLocation(c,"p");e.enableVertexAttribArray(d),e.vertexAttribPointer(d,2,e.FLOAT,!1,0,0);const w=e.getUniformLocation(c,"t");e.viewport(0,0,n.width,n.height),e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);const f=typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;let m=0,x=0;const v=h=>{x||(x=h);const A=(h-x)/1e3*o;e.uniform1f(w,f?.4:A),e.drawArrays(e.TRIANGLES,0,3),f||(m=requestAnimationFrame(v))};return m=requestAnimationFrame(v),()=>{cancelAnimationFrame(m),e.getExtension("WEBGL_lose_context")?.loseContext()}},[t,o]),i.jsx("canvas",{ref:r,className:a,style:{width:t,height:t,display:"inline-block"},role:"img","aria-label":"Thinking"})}exports.AnimatedTerminalIcon=b;exports.TerminalIcon=p;exports.ThinkingOrb=k;
+//# sourceMappingURL=brand.cjs.map

package/dist/brand.es.js

@@ -0,0 +1,178 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { forwardRef as g, useRef as b, useEffect as R } from "react";
+import { motion as v } from "framer-motion";
+const T = g(function({ size: o = 24, className: a, ...r }, i) {
+  return /* @__PURE__ */ p(
+    "svg",
+    {
+      ref: i,
+      width: o,
+      height: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: a,
+      role: "img",
+      "aria-label": "Terminal",
+      ...r,
+      children: [
+        /* @__PURE__ */ n("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "2.5" }),
+        /* @__PURE__ */ n("path", { d: "m6.5 9 3 3-3 3" }),
+        /* @__PURE__ */ n("path", { d: "M12.5 15h4", stroke: "#facc15" })
+      ]
+    }
+  );
+}), _ = g(
+  function({ size: o = 24, running: a = !0, accent: r = "#facc15", className: i, ...l }, e) {
+    return a ? /* @__PURE__ */ p(
+      "svg",
+      {
+        ref: e,
+        width: o,
+        height: o,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: i,
+        role: "img",
+        "aria-label": "Terminal running",
+        ...l,
+        children: [
+          /* @__PURE__ */ n("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "2.5" }),
+          /* @__PURE__ */ n("path", { d: "m6.5 9 3 3-3 3" }),
+          /* @__PURE__ */ n(
+            v.path,
+            {
+              d: "M12.5 15h5",
+              stroke: r,
+              initial: { pathLength: 0, opacity: 0.9 },
+              animate: { pathLength: [0, 1, 1, 0] },
+              transition: { duration: 1.6, times: [0, 0.5, 0.8, 1], repeat: 1 / 0, ease: "easeInOut" }
+            }
+          ),
+          /* @__PURE__ */ n(
+            v.rect,
+            {
+              x: "18.5",
+              y: "13.4",
+              width: "1.6",
+              height: "3.2",
+              rx: "0.3",
+              fill: r,
+              stroke: "none",
+              animate: { opacity: [1, 1, 0, 0, 1] },
+              transition: { duration: 1.1, times: [0, 0.4, 0.5, 0.9, 1], repeat: 1 / 0 }
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ n(T, { ref: e, size: o, className: i, ...l });
+  }
+), k = `
+attribute vec2 p;
+varying vec2 uv;
+void main() { uv = p; gl_Position = vec4(p, 0.0, 1.0); }
+`, C = `
+precision highp float;
+varying vec2 uv;
+uniform float t;
+
+// Classic 2D simplex noise (Ashima Arts, MIT) — compact.
+vec3 permute(vec3 x){return mod(((x*34.0)+1.0)*x,289.0);}
+float snoise(vec2 v){
+  const vec4 C=vec4(0.211324865,0.366025404,-0.577350269,0.024390244);
+  vec2 i=floor(v+dot(v,C.yy));vec2 x0=v-i+dot(i,C.xx);
+  vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
+  vec4 x12=x0.xyxy+C.xxzz;x12.xy-=i1;
+  i=mod(i,289.0);
+  vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
+  vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
+  m=m*m;m=m*m;
+  vec3 x=2.0*fract(p*C.www)-1.0;vec3 h=abs(x)-0.5;vec3 ox=floor(x+0.5);vec3 a0=x-ox;
+  m*=1.79284291-0.85373472*(a0*a0+h*h);
+  vec3 g;g.x=a0.x*x0.x+h.x*x0.y;g.yz=a0.yz*x12.xz+h.yz*x12.yw;
+  return 130.0*dot(m,g);
+}
+
+void main(){
+  vec2 p=uv;
+  float r=length(p);
+  // Noise-deform the radius so the silhouette wobbles organically.
+  float n=snoise(p*2.2+vec2(t*0.25,t*0.18))*0.5+snoise(p*4.0-vec2(t*0.2))*0.25;
+  float edge=0.78+n*0.16;
+  float orb=smoothstep(edge,edge-0.18,r);
+  if(orb<0.01){ gl_FragColor=vec4(0.0); return; }
+  // Shifting gradient palette.
+  float a=atan(p.y,p.x);
+  float f=0.5+0.5*sin(a*1.0+t*0.6+n*2.0);
+  vec3 cyan=vec3(0.20,0.85,0.95);
+  vec3 violet=vec3(0.55,0.35,0.95);
+  vec3 magenta=vec3(0.95,0.30,0.70);
+  vec3 amber=vec3(1.0,0.75,0.30);
+  vec3 col=mix(cyan,violet,smoothstep(0.0,0.4,f));
+  col=mix(col,magenta,smoothstep(0.35,0.7,f));
+  col=mix(col,amber,smoothstep(0.7,1.0,f));
+  // Inner glow + fresnel rim.
+  float glow=smoothstep(0.0,0.6,1.0-r);
+  col+=glow*0.25;
+  float rim=smoothstep(edge-0.02,edge-0.16,r);
+  col=mix(col,vec3(1.0),(1.0-rim)*0.35*orb);
+  gl_FragColor=vec4(col,orb);
+}
+`;
+function u(t, o, a) {
+  const r = t.createShader(o);
+  return t.shaderSource(r, a), t.compileShader(r), r;
+}
+function S({ size: t = 20, speed: o = 1, className: a }) {
+  const r = b(null);
+  return R(() => {
+    const i = r.current;
+    if (!i)
+      return;
+    const l = Math.min(window.devicePixelRatio || 1, 2);
+    i.width = t * l, i.height = t * l;
+    const e = i.getContext("webgl", { premultipliedAlpha: !1, alpha: !0 });
+    if (!e)
+      return;
+    const c = e.createProgram();
+    e.attachShader(c, u(e, e.VERTEX_SHADER, k)), e.attachShader(c, u(e, e.FRAGMENT_SHADER, C)), e.linkProgram(c), e.useProgram(c);
+    const y = e.createBuffer();
+    e.bindBuffer(e.ARRAY_BUFFER, y), e.bufferData(e.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), e.STATIC_DRAW);
+    const x = e.getAttribLocation(c, "p");
+    e.enableVertexAttribArray(x), e.vertexAttribPointer(x, 2, e.FLOAT, !1, 0, 0);
+    const w = e.getUniformLocation(c, "t");
+    e.viewport(0, 0, i.width, i.height), e.enable(e.BLEND), e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA);
+    const d = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let s = 0, m = 0;
+    const f = (h) => {
+      m || (m = h);
+      const A = (h - m) / 1e3 * o;
+      e.uniform1f(w, d ? 0.4 : A), e.drawArrays(e.TRIANGLES, 0, 3), d || (s = requestAnimationFrame(f));
+    };
+    return s = requestAnimationFrame(f), () => {
+      cancelAnimationFrame(s), e.getExtension("WEBGL_lose_context")?.loseContext();
+    };
+  }, [t, o]), /* @__PURE__ */ n(
+    "canvas",
+    {
+      ref: r,
+      className: a,
+      style: { width: t, height: t, display: "inline-block" },
+      role: "img",
+      "aria-label": "Thinking"
+    }
+  );
+}
+export {
+  _ as AnimatedTerminalIcon,
+  T as TerminalIcon,
+  S as ThinkingOrb
+};
+//# sourceMappingURL=brand.es.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@illuma-ai/icons",
-  "version": "2.2.0",
-  "description": "Illuma icon system: icons8 2025-color Office/Fluent file-type icons (static + animated coding-state GIFs) + hover-animated nav icons.",
+  "version": "2.3.0",
+  "description": "Illuma icon system: file-type icons (static + animated GIF), hover-animated nav icons, terminal logo, and a WebGL thinking orb.",
   "type": "module",
   "license": "MIT",
   "author": "Illuma AI",
@@ -24,6 +24,11 @@
       "types": "./dist/animated/index.d.ts",
       "import": "./dist/animated.es.js",
       "require": "./dist/animated.cjs"
+    },
+    "./brand": {
+      "types": "./dist/brand/index.d.ts",
+      "import": "./dist/brand.es.js",
+      "require": "./dist/brand.cjs"
     }
   },
   "files": [