@basementstudio/shader-lab 0.1.0 → 1.0.2

package/dist/src/timeline.js

@@ -0,0 +1,179 @@
+import { easings } from "./easings.js";
+function cloneParameterValue(value) {
+    if (Array.isArray(value)) {
+        return [...value];
+    }
+    return value;
+}
+function isNumericTuple(value) {
+    return (Array.isArray(value) &&
+        (value.length === 2 || value.length === 3) &&
+        value.every((entry) => typeof entry === "number"));
+}
+function parseHexColor(value) {
+    const normalized = value.trim().toLowerCase();
+    if (!normalized.startsWith("#")) {
+        return null;
+    }
+    const hex = normalized.slice(1);
+    if (hex.length === 6 || hex.length === 8) {
+        const r = Number.parseInt(hex.slice(0, 2), 16);
+        const g = Number.parseInt(hex.slice(2, 4), 16);
+        const b = Number.parseInt(hex.slice(4, 6), 16);
+        if ([r, g, b].some(Number.isNaN)) {
+            return null;
+        }
+        return [r, g, b];
+    }
+    return null;
+}
+function toHex(channel) {
+    return Math.round(Math.min(255, Math.max(0, channel)))
+        .toString(16)
+        .padStart(2, "0");
+}
+function rgbToHex(r, g, b) {
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lerp(a, b, progress) {
+    return a + (b - a) * progress;
+}
+function resolveProgress(progress, interpolation) {
+    if (interpolation === "step") {
+        return 0;
+    }
+    if (interpolation === "smooth") {
+        return easings.easeInOutCubic(progress);
+    }
+    return progress;
+}
+function interpolateValue(from, to, progress, interpolation) {
+    if (interpolation === "step") {
+        return cloneParameterValue(from);
+    }
+    const eased = resolveProgress(progress, interpolation);
+    if (typeof from === "number" && typeof to === "number") {
+        return lerp(from, to, eased);
+    }
+    if (typeof from === "boolean" && typeof to === "boolean") {
+        return eased < 0.5 ? from : to;
+    }
+    if (typeof from === "string" && typeof to === "string") {
+        const leftColor = parseHexColor(from);
+        const rightColor = parseHexColor(to);
+        if (!(leftColor && rightColor)) {
+            return eased < 0.5 ? from : to;
+        }
+        return rgbToHex(lerp(leftColor[0], rightColor[0], eased), lerp(leftColor[1], rightColor[1], eased), lerp(leftColor[2], rightColor[2], eased));
+    }
+    if (isNumericTuple(from) && isNumericTuple(to) && from.length === to.length) {
+        return from.map((entry, index) => lerp(entry, to[index] ?? entry, eased));
+    }
+    return eased < 0.5 ? cloneParameterValue(from) : cloneParameterValue(to);
+}
+function evaluateTrackAtTime(track, time) {
+    if (!track.enabled || track.keyframes.length === 0) {
+        return null;
+    }
+    if (track.keyframes.length === 1) {
+        const onlyKeyframe = track.keyframes[0];
+        return onlyKeyframe ? cloneParameterValue(onlyKeyframe.value) : null;
+    }
+    const firstKeyframe = track.keyframes[0];
+    const lastKeyframe = track.keyframes[track.keyframes.length - 1];
+    if (!(firstKeyframe && lastKeyframe)) {
+        return null;
+    }
+    if (time <= firstKeyframe.time) {
+        return cloneParameterValue(firstKeyframe.value);
+    }
+    if (time >= lastKeyframe.time) {
+        return cloneParameterValue(lastKeyframe.value);
+    }
+    for (let index = 1; index < track.keyframes.length; index += 1) {
+        const nextKeyframe = track.keyframes[index];
+        const previousKeyframe = track.keyframes[index - 1];
+        if (!(nextKeyframe && previousKeyframe) || time > nextKeyframe.time) {
+            continue;
+        }
+        const span = Math.max(nextKeyframe.time - previousKeyframe.time, 1e-6);
+        const progress = Math.max(0, Math.min(1, (time - previousKeyframe.time) / span));
+        return interpolateValue(previousKeyframe.value, nextKeyframe.value, progress, track.interpolation);
+    }
+    return cloneParameterValue(lastKeyframe.value);
+}
+function applyBindingOverride(state, binding, value) {
+    if (binding.kind === "param") {
+        state.params[binding.key] = cloneParameterValue(value);
+        return;
+    }
+    if (binding.property === "visible" && typeof value === "boolean") {
+        state.properties.visible = value;
+        return;
+    }
+    if ((binding.property === "opacity" ||
+        binding.property === "hue" ||
+        binding.property === "saturation") &&
+        typeof value === "number") {
+        state.properties[binding.property] = value;
+    }
+}
+export function evaluateTimelineForLayers(layers, tracks, time) {
+    if (tracks.length === 0) {
+        return [];
+    }
+    const layerStates = new Map();
+    const layerIds = new Set(layers.map((layer) => layer.id));
+    for (const track of tracks) {
+        if (!layerIds.has(track.layerId)) {
+            continue;
+        }
+        const value = evaluateTrackAtTime(track, time);
+        if (value === null) {
+            continue;
+        }
+        let state = layerStates.get(track.layerId);
+        if (!state) {
+            state = {
+                layerId: track.layerId,
+                params: {},
+                properties: {},
+            };
+            layerStates.set(track.layerId, state);
+        }
+        applyBindingOverride(state, track.binding, value);
+    }
+    return [...layerStates.values()];
+}
+export function resolveEvaluatedLayers(layers, tracks, time) {
+    const evaluatedStates = evaluateTimelineForLayers(layers, tracks, time);
+    const evaluatedById = new Map(evaluatedStates.map((state) => [state.layerId, state]));
+    return layers.map((layer) => {
+        const evaluated = evaluatedById.get(layer.id);
+        if (!evaluated) {
+            return {
+                ...layer,
+                params: { ...layer.params },
+            };
+        }
+        return {
+            ...layer,
+            hue: typeof evaluated.properties.hue === "number"
+                ? evaluated.properties.hue
+                : layer.hue,
+            opacity: typeof evaluated.properties.opacity === "number"
+                ? evaluated.properties.opacity
+                : layer.opacity,
+            params: {
+                ...layer.params,
+                ...evaluated.params,
+            },
+            saturation: typeof evaluated.properties.saturation === "number"
+                ? evaluated.properties.saturation
+                : layer.saturation,
+            visible: typeof evaluated.properties.visible === "boolean"
+                ? evaluated.properties.visible
+                : layer.visible,
+        };
+    });
+}

package/dist/src/types/editor.d.ts

@@ -0,0 +1,3 @@
+import type { ShaderLabParameterValue } from "../types";
+export type LayerParameterValues = Record<string, ShaderLabParameterValue>;
+export type LayerCompositeMode = "filter" | "mask";

package/dist/src/types/editor.js

@@ -0,0 +1 @@
+export {};

package/dist/src/types.d.ts

@@ -0,0 +1,81 @@
+export type ShaderLabParameterValue = number | string | boolean | [number, number] | [number, number, number];
+export type ShaderLabLayerKind = "effect" | "source";
+export type ShaderLabSourceLayerType = "custom-shader" | "gradient" | "image" | "live" | "text" | "video";
+export type ShaderLabEffectLayerType = "ascii" | "crt" | "dithering" | "halftone" | "ink" | "particle-grid" | "pattern" | "pixel-sorting";
+export type ShaderLabLayerType = ShaderLabEffectLayerType | ShaderLabSourceLayerType;
+export type ShaderLabBlendMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity";
+export type ShaderLabCompositeMode = "filter" | "mask";
+export type ShaderLabAssetSource = {
+    fileName?: string;
+    kind: "image";
+    src: string;
+} | {
+    fileName?: string;
+    kind: "video";
+    src: string;
+};
+export type ShaderLabInlineSketchSource = {
+    code: string;
+    entryExport: string;
+    fileName?: string;
+    mode: "inline";
+};
+export type ShaderLabModuleSketchSource = {
+    entryExport?: string;
+    mode: "module";
+    sketch: unknown;
+};
+export type ShaderLabSketchSource = ShaderLabInlineSketchSource | ShaderLabModuleSketchSource;
+export type ShaderLabTimelineInterpolation = "linear" | "smooth" | "step";
+export type ShaderLabAnimatedPropertyBinding = {
+    kind: "layer";
+    label: string;
+    property: "hue" | "opacity" | "saturation" | "visible";
+    valueType: "boolean" | "number";
+} | {
+    key: string;
+    kind: "param";
+    label: string;
+    valueType: "boolean" | "color" | "number" | "select" | "vec2" | "vec3";
+};
+export interface ShaderLabTimelineKeyframe {
+    id: string;
+    time: number;
+    value: ShaderLabParameterValue;
+}
+export interface ShaderLabTimelineTrack {
+    binding: ShaderLabAnimatedPropertyBinding;
+    enabled: boolean;
+    id: string;
+    interpolation: ShaderLabTimelineInterpolation;
+    keyframes: ShaderLabTimelineKeyframe[];
+    layerId: string;
+}
+export interface ShaderLabTimelineConfig {
+    duration: number;
+    loop: boolean;
+    tracks: ShaderLabTimelineTrack[];
+}
+export interface ShaderLabLayerConfig {
+    asset?: ShaderLabAssetSource;
+    blendMode: ShaderLabBlendMode;
+    compositeMode: ShaderLabCompositeMode;
+    hue: number;
+    id: string;
+    kind: ShaderLabLayerKind;
+    name: string;
+    opacity: number;
+    params: Record<string, ShaderLabParameterValue>;
+    saturation: number;
+    sketch?: ShaderLabSketchSource;
+    type: ShaderLabLayerType;
+    visible: boolean;
+}
+export interface ShaderLabConfig {
+    composition: {
+        height: number;
+        width: number;
+    };
+    layers: ShaderLabLayerConfig[];
+    timeline: ShaderLabTimelineConfig;
+}

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,73 +1,36 @@
 {
   "name": "@basementstudio/shader-lab",
-  "description": "Shader Lab starter template",
-  "version": "0.1.0",
-  "packageManager": "bun@1.3.5",
-  "workspaces": [
-    "packages/*"
+  "version": "1.0.2",
+  "description": "Portable React runtime for Shader Lab exports.",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "dist",
+    "assets"
   ],
-  "scripts": {
-    "analyze": "cross-env ANALYZE=true bun run build",
-    "analyze:experimental": "next experimental-analyze",
-    "build": "bun run build:runtime && next build",
-    "build:runtime": "bun run --cwd packages/shader-lab-react build",
-    "changeset": "changeset",
-    "check": "bun run build:runtime && bun run lint && bun run typecheck:compare",
-    "dev": "next dev",
-    "dev:https": "next dev --experimental-https",
-    "format": "biome format --write .",
-    "lighthouse": "bunx @unlighthouse/cli --site http://localhost:3000",
-    "lint": "biome lint --max-diagnostics=200",
-    "lint:fix": "biome lint --write --unsafe --max-diagnostics=200",
-    "release": "changeset publish",
-    "release-canary": "changeset publish --tag canary --no-git-tag",
-    "version-canary": "changeset version --snapshot canary",
-    "version-packages": "changeset version",
-    "start": "next start",
-    "test": "bun test",
-    "typecheck": "tsgo --noEmit",
-    "typecheck:runtime": "bun run --cwd packages/shader-lab-react typecheck",
-    "typecheck:compare": "bun run typecheck:tsc && bun run typecheck",
-    "typecheck:tsc": "tsc --noEmit --incremental false"
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    }
   },
-  "dependencies": {
-    "@basementstudio/shader-lab": "workspace:*",
-    "@base-ui/react": "^1.3.0",
-    "@phosphor-icons/react": "^2.1.10",
-    "class-variance-authority": "^0.7.1",
-    "motion": "^12.38.0",
-    "next": "16.1.4",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-use": "^17.6.0",
-    "tailwind-merge": "^3.4.0",
-    "three": "^0.183.2",
-    "zod": "^4.3.6",
-    "zustand": "^5.0.10"
+  "publishConfig": {
+    "access": "public"
   },
-  "devDependencies": {
-    "@biomejs/biome": "2.3.11",
-    "@changesets/changelog-github": "^0.6.0",
-    "@changesets/cli": "^2.30.0",
-    "@next/bundle-analyzer": "16.1.1",
-    "@svgr/webpack": "^8.1.0",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/bun": "^1.3.6",
-    "@types/node": "^20.19.30",
-    "@types/react": "^19.2.9",
-    "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.183.1",
-    "@typescript/native-preview": "^7.0.0-dev.20260122.3",
-    "babel-plugin-react-compiler": "1.0.0",
-    "cross-env": "^10.1.0",
-    "postcss-preset-env": "^10.6.1",
-    "tailwindcss": "^4.1.18",
+  "dependencies": {
     "typescript": "^5.9.3"
   },
-  "trustedDependencies": [
-    "@biomejs/biome",
-    "@tailwindcss/oxide",
-    "esbuild",
-    "sharp"
-  ]
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.183.0"
+  },
+  "scripts": {
+    "build": "node ./scripts/prepare-dist.mjs && bun x tsc -p tsconfig.build.json && node ./scripts/fix-esm-specifiers.mjs",
+    "lint": "biome lint src --max-diagnostics=200",
+    "prepack": "bun run build",
+    "typecheck": "bun x tsc -p tsconfig.json --noEmit"
+  }
 }

package/.biome/plugins/README.md

@@ -1,21 +0,0 @@
-## Plugins
-
-### 1. `no-anchor-element.grit`
-Enforces using Next.js `<Link>` component instead of HTML `<a>` elements.
-
-### 2. `no-unnecessary-forwardref.grit`
-Checks for unnecessary `forwardRef` usage in React 19 with the compiler.
-
-### 3. `no-relative-parent-imports.grit`
-Forbids relative parent imports (`../`) and encourages alias imports (`@/`).
-
-## Plugin Configuration
-
-The plugins are configured in `biome.json`:
-```json
-"plugins": [
-  "./biome-plugins/no-anchor-element.grit",
-  "./biome-plugins/no-unnecessary-forwardref.grit",
-  "./biome-plugins/no-relative-parent-imports.grit"
-]
-``` 

package/.biome/plugins/no-anchor-element.grit

@@ -1,12 +0,0 @@
-language js;
-
-`<a $attrs>$content</a>` as $anchor where {
-    !$anchor <: within `if ($condition) { return ($jsx) }` where {
-        $condition <: contains or { `isExternal`, `isExternalSSR` }
-    },
-    register_diagnostic(
-        span = $anchor,
-        message = "Use custom Link component instead of <a> element. The Link component handles both internal and external links automatically.",
-        severity = "error"
-    )
-} 

package/.biome/plugins/no-relative-parent-imports.grit

@@ -1,10 +0,0 @@
-language js;
-
-`import $imports from $source` as $import where {
-    $source <: r"['\"]\.\.\/\.\.\/.*['\"]",
-    register_diagnostic(
-        span = $import,
-        message = "Use alias imports (~/dir/) instead of deep relative imports (../../). Single level imports (../) are allowed for colocated files.",
-        severity = "error"
-    )
-} 

package/.biome/plugins/no-unnecessary-forwardref.grit

@@ -1,9 +0,0 @@
-language js;
-
-`forwardRef($func)` as $ref where {
-    register_diagnostic(
-        span = $ref,
-        message = "forwardRef is unnecessary in React 19 with the compiler",
-        severity = "warning"
-    )
-} 

package/.changeset/README.md

@@ -1,17 +0,0 @@
-# Changesets
-
-Run `bun run changeset` in a feature branch when a package change should ship.
-
-This creates a markdown file in `.changeset` where you choose:
-
-- `patch` for fixes
-- `minor` for backward-compatible features
-- `major` for breaking changes
-
-Release flow:
-
-1. Add a changeset in the PR
-2. Merge the PR to `main`
-3. `release.yml` creates or updates the automated version PR
-4. Merge that generated PR
-5. The package is published to npm

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

package/.editorconfig

@@ -1,40 +0,0 @@
-# EditorConfig helps maintain consistent coding styles across different editors
-# https://editorconfig.org
-
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.{yml,yaml}]
-indent_size = 2
-
-[Makefile]
-indent_style = tab
-
-[*.{json,jsonc}]
-indent_size = 2
-
-[*.{css,scss}]
-indent_size = 2
-
-[*.{ts,tsx,js,jsx,mjs}]
-indent_size = 2
-
-[*.svg]
-insert_final_newline = false
-
-[{package.json,package-lock.json,bun.lockb}]
-indent_size = 2
-
-[.env*]
-insert_final_newline = true
-

package/.env.example

@@ -1,81 +0,0 @@
-# ============================================
-# Basement Next Starter - Environment Variables
-# ============================================
-# Copy this file to .env.local and fill in the values
-# Run: cp .env.example .env.local
-#
-# Only configure the integrations you need.
-# Remove unused sections to keep your env file clean.
-# ============================================
-
-
-# ============================================
-# CORE (Recommended)
-# ============================================
-
-# Base URL for your site (used for SEO, canonical URLs, etc.)
-# Development: http://localhost:3000
-# Production: https://your-domain.com
-NEXT_PUBLIC_BASE_URL="http://localhost:3000"
-
-# Draft mode secret for preview functionality
-# Generate a random string: openssl rand -base64 32
-DRAFT_MODE_TOKEN=""
-
-
-# ============================================
-# SANITY CMS (Optional)
-# Headless CMS with visual editing
-# Get credentials: https://sanity.io/manage
-# Docs: https://www.sanity.io/docs
-# ============================================
-
-# Required for Sanity
-NEXT_PUBLIC_SANITY_PROJECT_ID=""
-NEXT_PUBLIC_SANITY_DATASET="production"
-NEXT_PUBLIC_SANITY_API_READ_TOKEN=""
-
-# Optional - for server-side mutations and visual editing
-# SANITY_PRIVATE_TOKEN=""
-
-# Optional - API version (defaults to 2024-03-15)
-# NEXT_PUBLIC_SANITY_API_VERSION="2024-03-15"
-
-
-# ============================================
-# SHOPIFY (Optional)
-# E-commerce platform with cart and checkout
-# Get credentials: https://shopify.dev/docs/storefronts/headless
-# ============================================
-
-# Required for Shopify
-# SHOPIFY_STORE_DOMAIN="your-store.myshopify.com"
-# SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
-
-# Optional - for revalidation webhooks
-# SHOPIFY_REVALIDATION_SECRET=""
-
-# Optional - for customer accounts
-# SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID=""
-# SHOPIFY_CUSTOMER_ACCOUNT_API_URL=""
-
-# ============================================
-# ANALYTICS (Optional)
-# ============================================
-
-# Google Analytics
-# NEXT_PUBLIC_GOOGLE_ANALYTICS=""
-
-# Google Tag Manager
-# NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=""
-
-# Facebook
-# NEXT_PUBLIC_FACEBOOK_APP_ID=""
-
-
-# ============================================
-# VERCEL (Auto-populated by Vercel CLI)
-# ============================================
-
-# These are automatically set by Vercel
-# VERCEL_OIDC_TOKEN=""

package/.gitattributes

@@ -1,19 +0,0 @@
-# Git Attributes Configuration
-# This file ensures consistent line endings across all platforms
-#
-# Configuration:
-#   *           - Applies to all files in the repository
-#   text=auto   - Git automatically detects text vs binary files
-#   eol=lf      - Normalizes line endings to LF (Unix-style) for text files
-#
-# Why this matters:
-#   - Windows uses CRLF (\r\n) line endings
-#   - Unix/Linux/macOS use LF (\n) line endings
-#   - This prevents line-ending conflicts and ensures consistent diffs
-#
-# What it does:
-#   - On commit: Normalizes all text files to LF line endings
-#   - On checkout: Converts to platform-native format if needed
-#   - Prevents merge conflicts caused by line ending differences
-
-* text=auto eol=lf

package/.github/workflows/canary.yml

@@ -1,80 +0,0 @@
-name: Canary Release
-
-on:
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  id-token: write
-
-concurrency:
-  group: canary-main
-  cancel-in-progress: true
-
-jobs:
-  canary:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
-
-      - name: Setup Node for npm publishing
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Use npm 11.6.2
-        run: npm i -g npm@11.6.2
-
-      - name: Install dependencies
-        run: bun install --frozen-lockfile
-
-      - name: Type check
-        run: bun run check
-
-      - name: Build
-        run: bun run build
-
-      - name: Configure npm for publishing
-        run: |
-          cat > ~/.npmrc <<'EOF'
-          registry=https://registry.npmjs.org/
-          access=public
-          EOF
-
-      - name: Check pending changesets
-        id: changesets
-        run: |
-          bunx changeset status --output=changeset-status.json
-          node <<'NODE'
-          const fs = require('node:fs');
-          const status = JSON.parse(fs.readFileSync('changeset-status.json', 'utf8'));
-          const releaseCount = Array.isArray(status.releases) ? status.releases.length : 0;
-          const hasReleases = releaseCount > 0;
-
-          fs.appendFileSync(process.env.GITHUB_OUTPUT, `has_releases=${hasReleases}\n`);
-          console.log(`Found ${releaseCount} package(s) eligible for canary release.`);
-          NODE
-
-      - name: Version canary packages
-        if: steps.changesets.outputs.has_releases == 'true'
-        run: bun run version-canary
-
-      - name: Publish canary packages
-        if: steps.changesets.outputs.has_releases == 'true'
-        run: bun run release-canary
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Skip publish (no pending changesets)
-        if: steps.changesets.outputs.has_releases != 'true'
-        run: echo "No pending changesets. Skipping canary publish."