@nadicodeai/ui 12.1.113 → 12.1.115

package/dist/components/company-card/scene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/scene.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,GAAG,EAAE,KAAK,MAAM,EAAE,MAAM,MAAM,CAAC;AAGrD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,GAAG,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,kFAAkF;IAClF,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;CACtD,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,yBAsBvE"}
+{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/scene.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,GAAG,EAAE,KAAK,MAAM,EAAE,MAAM,MAAM,CAAC;AAMrD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,GAAG,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,kFAAkF;IAClF,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;CACtD,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,yBAsBvE"}

package/dist/components/company-card/scene.js

@@ -1,8 +1,11 @@
+import { prepareShader } from "@vgpu/wgsl/prepare";
 import { effect } from "vgpu";
 import { CARD_FOIL_SHADER } from "./shader.js";
+// Prepared once and reused: vgpu revalidates a shader artifact only the first time it sees it.
+const FOIL_SHADER = prepareShader(CARD_FOIL_SHADER, "company-card/shader.wgsl");
 export function createScene(gpu, output, colors) {
     const [hue0, hue1, hue2, hue3, hue4, hue5] = colors.hues;
-    const shader = effect(gpu, CARD_FOIL_SHADER, {
+    const shader = effect(gpu, FOIL_SHADER, {
         label: "holographic-card",
         set: {
             params: {

package/dist/components/company-card/shader.d.ts

@@ -2,9 +2,10 @@
  * The holographic foil's fragment shader, as a string.
  *
  * This package builds with tsc alone, so a `.wgsl` file would neither be
- * emitted into `dist` nor compiled by a consumer's bundler. vgpu's `effect`
- * takes WGSL source, so the shader travels as the module below and needs no
- * loader in any host.
+ * emitted into `dist` nor compiled by a consumer's bundler. The shader travels
+ * as the module below, and the scene prepares it with `@vgpu/wgsl`'s
+ * `prepareShader`, the runtime form of what vgpu's bundler loaders do, so it
+ * needs no loader in any host.
  */
 export declare const CARD_FOIL_SHADER = "\n// nadicode: vgpu's holographic card (MIT, https://github.com/vercel-labs/vgpu,\n// examples/holographic-card, revision 6fa27bb4). Its light model is unchanged.\n// The surface is the company card itself, 85.6 x 54 mm, which the page tilts;\n// vgpu's triangle, fractal and lettering give way to the card's own marks; and\n// every colour is a design-system token: the spectrum and the pearl fall in\n// pure bands of the identity hues, never a colour between two of them.\nstruct Params {\n  resolution: vec2f,\n  tilt: vec2f,\n  pointer: vec2f,\n  hover: f32,\n  graphite: vec3f,\n  ink: vec3f,\n  hue0: vec3f,\n  hue1: vec3f,\n  hue2: vec3f,\n  hue3: vec3f,\n  hue4: vec3f,\n  hue5: vec3f,\n}\n@group(0) @binding(0) var<uniform> params: Params;\n\nconst HALF = vec2f(0.856, 0.54);\nconst ROSETTE = vec2f(0.448, -0.016);\n\nfn stroke(distance: f32, width: f32, aa: f32) -> f32 {\n  return 1.0 - smoothstep(width, width + aa, abs(distance));\n}\n\n// The identity hues in spectral order, each a band of its own: a blend of two\n// neighbours is a colour the palette does not have.\nfn palette(t: f32) -> vec3f {\n  let hues = array<vec3f, 6>(params.hue0, params.hue1, params.hue2, params.hue3, params.hue4, params.hue5);\n  return hues[min(u32(clamp(t, 0.0, 1.0) * 6.0), 5u)];\n}\n\n// vgpu's visible-light window, drawn with the identity band instead of display RGB.\nfn wavelengthColor(wavelength: f32) -> vec3f {\n  let visible = smoothstep(0.380, 0.410, wavelength) * (1.0 - smoothstep(0.700, 0.780, wavelength));\n  return palette((wavelength - 0.44) / 0.22) * visible * 0.8;\n}\n\n// Reflection grating approximation: m * wavelength = d * dot(L + V, across).\n// L and V point away from the surface; across is perpendicular to the grooves.\n// Based on the diffraction-order model in GPU Gems, chapter 8 (Jos Stam).\nfn diffraction(across: vec2f, lightAndView: vec2f, spacing: f32) -> vec3f {\n  let pathDifference = spacing * abs(dot(lightAndView, across));\n  let along = dot(lightAndView, vec2f(-across.y, across.x));\n  // Finite, imperfect groove patches broaden the directional reflection.\n  let envelope = exp(-along * along / 0.36);\n  var reflected = vec3f(0);\n  for (var order = 1; order <= 3; order++) {\n    let m = f32(order);\n    reflected += wavelengthColor(pathDifference / m) / (m * m);\n  }\n  return reflected * envelope;\n}\n\n// Broad pearlescence underneath the finer diffraction detail, in the same hues.\nfn pearlColor(phase: f32) -> vec3f {\n  let cycle = abs(fract(phase * 0.5) * 2.0 - 1.0);\n  return mix(palette(cycle), vec3f(0.82), 0.35);\n}\n\nfn grain(point: vec2f) -> f32 {\n  let p = vec2u(abs(point) * 2400.0);\n  var n = (p.x * 1597334677u) ^ (p.y * 3812015801u);\n  n = (n ^ (n >> 16u)) * 2246822519u;\n  return f32(n & 1023u) / 1023.0 - 0.5;\n}\n\nfn etchedPhase(p: vec2f) -> f32 {\n  // Warp the surface before tracing contours, so their spacing flows in soft waves.\n  let warp = vec2f(\n    sin(p.y * 7.0 + sin(p.x * 4.0)) * 0.085,\n    sin(p.x * 6.0 - p.y * 3.0) * 0.07\n  );\n  let q = p + warp - ROSETTE;\n  let radius = length(q * vec2f(1.0, 0.86));\n  return radius * 142.0 + sin(atan2(q.y, q.x) * 3.0 + radius * 8.0) * 1.7;\n}\n\n@fragment\nfn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n  let p = (uv - 0.5) * 2.0 * HALF;\n  let sx = sin(params.tilt.y);\n  let cx = cos(params.tilt.y);\n  let sy = sin(params.tilt.x);\n  let cy = cos(params.tilt.x);\n  let right = vec3f(cy, 0, -sy);\n  let down = vec3f(sy * sx, cx, cy * sx);\n  let normal = cross(right, down);\n  let eye = vec3f(0, 0, 4.5);\n  let hit = right * p.x + down * p.y;\n  let aa = max(length(fwidth(p)), 0.0006);\n\n  // Matte graphite remains dark; only the cursor's grazing light reveals the foil.\n  let hover = clamp(params.hover, 0.0, 1.0);\n  let lightCenter = params.pointer * HALF;\n  let delta = p - lightCenter;\n  let sweepDistance = delta.x * 0.72 + delta.y * 0.52 + sin(p.y * 4.0 + p.x * 3.0) * 0.08;\n  let bandDistance = sweepDistance / 0.36;\n  let lightBand = exp(-bandDistance * bandDistance);\n  let glintDistance = sweepDistance / 0.085;\n  let glint = exp(-glintDistance * glintDistance);\n  let spotlight = exp(-dot(delta * vec2f(0.9, 1.1), delta * vec2f(0.9, 1.1)) * 2.6);\n  let light = lightBand * spotlight * hover;\n  let lightDirection = normalize(vec3f(lightCenter, 1.2) - hit);\n  let viewDirection = normalize(eye - hit);\n  let lightAndView = vec2f(dot(lightDirection + viewDirection, right), dot(lightDirection + viewDirection, down));\n  let illumination = max(dot(normal, lightDirection), 0.0) * max(dot(normal, viewDirection), 0.0);\n  let tint = params.ink * 0.78;\n  let noise = grain(p + vec2f(2));\n  var color = params.graphite + 0.008 * (0.9 - p.y);\n  // Fine, surface-locked grain catches the grazing reflection without animated static.\n  color += noise * (0.022 + light * 0.085);\n  color += light * (vec3f(0.045) + tint * 0.065);\n\n  // One engraving over the whole card, where vgpu keeps a triangle and a fractal.\n  let contour = etchedPhase(p);\n  // Transform screen derivatives back into the card plane: microscopic grooves\n  // follow the visible contours, but their 1.65um spacing is independent of zoom.\n  let dx = dpdx(p);\n  let dy = dpdy(p);\n  let gradient = vec2f(dpdx(contour) * dy.y - dpdy(contour) * dx.y, dpdy(contour) * dx.x - dpdx(contour) * dy.x);\n  let across = gradient / max(length(gradient), 0.00000001);\n  let foilDiffraction = diffraction(across, lightAndView, 1.65) * illumination;\n  let contours = stroke(sin(contour), 0.06, min(fwidth(contour), 1.0));\n  let reveal = hover * (0.06 + 0.24 * spotlight + light * 1.15);\n  let pearlPhase = dot(lightAndView, vec2f(0.48, -0.32)) + p.y * 0.32 + contour * 0.003;\n  let pearl = pearlColor(pearlPhase);\n  color += pearl * light * 0.24;\n  color += (pearl * 0.5 + vec3f(0.5)) * glint * spotlight * hover * 0.12;\n  let sparkle = pow(max(noise + 0.5, 0.0), 24.0) * glint * spotlight * hover;\n  color += pearl * sparkle * 0.22;\n  let foil = vec3f(0.12, 0.14, 0.18) + pearl * 0.65 + foilDiffraction * 0.12;\n  color += contours * 0.65 * foil * reveal;\n\n  // A delicate spectral echo stays clipped to the same engraving.\n  let foilPoint = p - (vec2f(0.007, -0.004) + params.tilt * 0.012);\n  let foilPhase = etchedPhase(foilPoint);\n  let foilLines = stroke(sin(foilPhase), 0.025, min(fwidth(foilPhase), 1.0));\n  color += foilLines * 0.65 * (pearl + foilDiffraction * 0.2) * reveal * 0.22;\n\n  // Sparse microdots and registration ticks emerge in the foil.\n  let grid = (fract((p + 1.0) * 20.0) - 0.5) / 20.0;\n  let dots = stroke(length(grid), 0.0008, aa * 0.4);\n  color += dots * reveal * 0.17;\n  let guide = abs(p) - (HALF - vec2f(0.07, 0.07));\n  let horizontal = stroke(guide.y, 0.0006, aa * 0.5) * (1.0 - smoothstep(0.012, 0.017, abs(guide.x)));\n  let vertical = stroke(guide.x, 0.0006, aa * 0.5) * (1.0 - smoothstep(0.012, 0.017, abs(guide.y)));\n  color += max(horizontal, vertical) * hover * (0.12 + light * 0.22);\n\n  return vec4f(color, 1);\n}\n";
 //# sourceMappingURL=shader.d.ts.map

package/dist/components/company-card/shader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/shader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,u3NA4J5B,CAAC"}
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/shader.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,u3NA4J5B,CAAC"}

package/dist/components/company-card/shader.js

@@ -2,9 +2,10 @@
  * The holographic foil's fragment shader, as a string.
  *
  * This package builds with tsc alone, so a `.wgsl` file would neither be
- * emitted into `dist` nor compiled by a consumer's bundler. vgpu's `effect`
- * takes WGSL source, so the shader travels as the module below and needs no
- * loader in any host.
+ * emitted into `dist` nor compiled by a consumer's bundler. The shader travels
+ * as the module below, and the scene prepares it with `@vgpu/wgsl`'s
+ * `prepareShader`, the runtime form of what vgpu's bundler loaders do, so it
+ * needs no loader in any host.
  */
 export const CARD_FOIL_SHADER = /* wgsl */ `
 // nadicode: vgpu's holographic card (MIT, https://github.com/vercel-labs/vgpu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.113",
+  "version": "12.1.115",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -82,8 +82,9 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.2",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.113",
+    "@nadicodeai/design-system": "12.1.115",
     "@tanstack/react-table": "^9.2.8",
+    "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -102,7 +103,7 @@
     "tailwind-merge": "^3.7.0",
     "thinking-orbs": "0.3.2",
     "tw-animate-css": "^1.4.0",
-    "vgpu": "0.5.0",
+    "vgpu": "0.6.0",
     "zustand": "^5.0.14"
   },
   "peerDependencies": {