@nexart/ui-renderer 0.2.1 → 0.3.1

package/README.md

@@ -1,8 +1,8 @@
 # @nexart/ui-renderer
 
-Version: 0.2.1
+Version: 0.3.0
 
-**Declarative System Authoring SDK for NexArt Protocol**
+**Declarative and Code Mode System Authoring SDK for NexArt Protocol**
 
 ---
 
@@ -51,6 +51,66 @@ Or use directly in HTML:
 
 ## Quick Start
 
+### Code Mode Systems (v0.3+)
+
+Create and preview Code Mode sketches with deterministic rendering:
+
+```typescript
+import { createSystem, previewSystem } from '@nexart/ui-renderer';
+
+const system = createSystem({
+  type: 'code',
+  mode: 'loop',
+  width: 1950,
+  height: 2400,
+  totalFrames: 120,
+  seed: 12345,
+  source: `
+    function setup() {
+      noFill();
+      stroke(0);
+    }
+    function draw() {
+      background(246, 245, 242);
+      for (var i = 0; i < 10; i++) {
+        var x = width / 2 + cos(t * TWO_PI + i * 0.5) * 200;
+        var y = height / 2 + sin(t * TWO_PI + i * 0.3) * 200;
+        ellipse(x, y, 50);
+      }
+    }
+  `
+});
+
+const canvas = document.getElementById('canvas');
+const renderer = previewSystem(system, canvas);
+renderer.start();
+```
+
+**Static Mode** (single-frame, setup only):
+
+```typescript
+const staticSystem = createSystem({
+  type: 'code',
+  mode: 'static',
+  width: 1950,
+  height: 2400,
+  seed: 12345,
+  source: `
+    function setup() {
+      background(246, 245, 242);
+      fill(0);
+      for (var i = 0; i < 100; i++) {
+        ellipse(random(width), random(height), random(10, 50));
+      }
+    }
+  `
+});
+
+previewSystem(staticSystem, canvas).render();
+```
+
+### Declarative Systems
+
 ### 1. Create a System
 
 ```typescript
@@ -111,9 +171,23 @@ console.log(JSON.stringify(compiled, null, 2));
 
 Create a validated NexArt system.
 
+**Code Mode Input:**
+```typescript
+const system = createSystem({
+  type: 'code',
+  mode: 'static' | 'loop',
+  width: number,
+  height: number,
+  source: string,           // Raw p5-like sketch code
+  seed?: number,            // Optional: PRNG seed
+  totalFrames?: number      // Required for loop mode
+});
+```
+
+**Declarative Input:**
 ```typescript
 const system = createSystem({
-  version?: string,        // Protocol version (default: '0.2')
+  version?: string,        // Protocol version (default: '0.3')
   seed: number,            // Required: PRNG seed
   background: {
     color: string,         // Required: background color
@@ -205,7 +279,7 @@ Use this to:
 
 ---
 
-## Primitive Vocabulary (v0.2)
+## Primitive Vocabulary (v0.3)
 
 ### Elements
 

package/dist/compiler.d.ts

@@ -1,11 +1,12 @@
 /**
- * @nexart/ui-renderer v0.2.0 - System Compiler
+ * @nexart/ui-renderer v0.3.0 - System Compiler
  *
  * Compiles validated systems into canonical protocol-compatible JSON.
  */
 import type { NexArtSystem } from './types';
-export interface CompiledSystem {
+export interface CompiledDeclarativeSystem {
     protocol: 'nexart';
+    systemType: 'declarative';
     systemVersion: string;
     seed: number;
     background: {
@@ -29,6 +30,21 @@ export interface CompiledSystem {
     compiledAt: string;
     compilerVersion: string;
 }
+export interface CompiledCodeSystem {
+    protocol: 'nexart';
+    systemType: 'code';
+    systemVersion: string;
+    source: string;
+    mode: 'static' | 'loop';
+    width: number;
+    height: number;
+    seed: number;
+    totalFrames?: number;
+    deterministic: boolean;
+    compiledAt: string;
+    compilerVersion: string;
+}
+export type CompiledSystem = CompiledDeclarativeSystem | CompiledCodeSystem;
 export declare function compileSystem(system: NexArtSystem): CompiledSystem;
 export declare function serializeSystem(system: NexArtSystem): string;
 //# sourceMappingURL=compiler.d.ts.map

package/dist/compiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAiB,MAAM,SAAS,CAAC;AAG3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE;YACT,IAAI,EAAE,MAAM,CAAC;YACb,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,QAAQ,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB;AAID,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,cAAc,CAyClE;AAuCD,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAG5D"}
+{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAsD,MAAM,SAAS,CAAC;AAGhG,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE;YACT,IAAI,EAAE,MAAM,CAAC;YACb,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,QAAQ,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,cAAc,GAAG,yBAAyB,GAAG,kBAAkB,CAAC;AAI5E,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,cAAc,CAMlE;AAyFD,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAG5D"}

package/dist/compiler.js

@@ -1,22 +1,36 @@
 /**
- * @nexart/ui-renderer v0.2.0 - System Compiler
+ * @nexart/ui-renderer v0.3.0 - System Compiler
  *
  * Compiles validated systems into canonical protocol-compatible JSON.
  */
-import { validateSystem } from './system';
-const COMPILER_VERSION = '0.2.0';
+import { isCodeModeSystem } from './system';
+const COMPILER_VERSION = '0.3.0';
 export function compileSystem(system) {
-    const validation = validateSystem({
-        seed: system.seed,
-        background: system.background,
-        elements: system.elements,
-        motion: system.motion,
-    });
-    if (!validation.valid) {
-        throw new Error(`Cannot compile invalid system: ${validation.errors.join('; ')}`);
+    if (isCodeModeSystem(system)) {
+        return compileCodeSystem(system);
     }
+    return compileDeclarativeSystem(system);
+}
+function compileCodeSystem(system) {
+    return {
+        protocol: 'nexart',
+        systemType: 'code',
+        systemVersion: system.systemVersion,
+        source: system.source,
+        mode: system.mode,
+        width: system.width,
+        height: system.height,
+        seed: system.seed,
+        ...(system.totalFrames !== undefined && { totalFrames: system.totalFrames }),
+        deterministic: true,
+        compiledAt: new Date().toISOString(),
+        compilerVersion: COMPILER_VERSION,
+    };
+}
+function compileDeclarativeSystem(system) {
     const compiled = {
         protocol: 'nexart',
+        systemType: 'declarative',
         systemVersion: system.systemVersion,
         seed: system.seed,
         background: {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * @nexart/ui-renderer
- * Version: 0.2.0
+ * Version: 0.4.0
  *
- * Declarative System Authoring SDK for NexArt Protocol
+ * Opinionated Generative Design System SDK for NexArt Protocol
  *
  * ⚠️ IMPORTANT DISCLAIMER
  *
@@ -15,19 +15,30 @@
  * - NOT protocol-authoritative
  *
  * Use it for:
- * - Creating NexArt systems declaratively
+ * - Creating NexArt systems with background/primitive/sketch elements
  * - Previewing systems in the browser
- * - Compiling systems to protocol-compatible JSON
+ * - Building AI-friendly generative backgrounds
  * - Building platforms, tools, and integrations
+ *
+ * Design Philosophy:
+ * - Beauty by default > unlimited freedom
+ * - Aesthetic guardrails ensure pleasing output automatically
+ * - All elements compile to Code Mode for deterministic rendering
  */
-export { createSystem, validateSystem } from './system';
+export { createSystem, validateSystem, isCodeModeSystem, isDeclarativeSystem, isUnifiedModeSystem } from './system';
 export { compileSystem, serializeSystem } from './compiler';
 export { previewSystem } from './preview/renderer';
+export { renderCodeModeSystem } from './preview/code-renderer';
+export { renderUnifiedSystem } from './preview/unified-renderer';
+export { compileBackgroundPreset, getPaletteColors } from './presets/backgrounds';
+export { compilePrimitive } from './presets/primitives';
+export { wrapSketch, validateSketchSafety } from './presets/sketch-wrapper';
 export { getCapabilities, getPrimitiveTypes, getMotionSources, getBackgroundTextures, } from './capabilities';
-export type { NexArtSystemInput, NexArtSystem, SystemElement, DotsElement, LinesElement, WavesElement, GridElement, FlowFieldElement, OrbitsElement, BackgroundConfig, MotionConfig, PreviewOptions, ValidationResult, } from './types';
+export type { NexArtSystemInput, NexArtSystem, DeclarativeSystemInput, DeclarativeSystem, CodeSystem, NexArtCodeSystem, UnifiedSystemInput, UnifiedSystem, UnifiedElement, BackgroundElement, PrimitiveElement, SketchElement, BackgroundPreset, PrimitiveName, ColorPalette, MotionSpeed, StrokeWeightAuto, LoopConfig, DeclarativeElement, SystemElement, DotsElement, LinesElement, WavesElement, GridElement, FlowFieldElement, OrbitsElement, BackgroundConfig, MotionConfig, PreviewOptions, ValidationResult, } from './types';
+export { AESTHETIC_DEFAULTS, SDK_VERSION as TYPE_SDK_VERSION } from './types';
 export type { Capabilities, PrimitiveCapability, ParameterSpec, } from './capabilities';
-export declare const SDK_VERSION = "0.2.1";
-export declare const PROTOCOL_VERSION = "0.2";
+export declare const SDK_VERSION = "0.4.0";
+export declare const PROTOCOL_VERSION = "0.4";
 export declare const IS_CANONICAL = false;
 export declare const IS_ARCHIVAL = false;
 export declare const RENDERER = "@nexart/ui-renderer";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,aAAa,GACd,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAClC,eAAO,MAAM,WAAW,QAAQ,CAAC;AACjC,eAAO,MAAM,QAAQ,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,kBAAkB,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE9E,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,aAAa,GACd,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAClC,eAAO,MAAM,WAAW,QAAQ,CAAC;AACjC,eAAO,MAAM,QAAQ,wBAAwB,CAAC"}

package/dist/index.js

@@ -1,8 +1,8 @@
 /**
  * @nexart/ui-renderer
- * Version: 0.2.0
+ * Version: 0.4.0
  *
- * Declarative System Authoring SDK for NexArt Protocol
+ * Opinionated Generative Design System SDK for NexArt Protocol
  *
  * ⚠️ IMPORTANT DISCLAIMER
  *
@@ -15,17 +15,28 @@
  * - NOT protocol-authoritative
  *
  * Use it for:
- * - Creating NexArt systems declaratively
+ * - Creating NexArt systems with background/primitive/sketch elements
  * - Previewing systems in the browser
- * - Compiling systems to protocol-compatible JSON
+ * - Building AI-friendly generative backgrounds
  * - Building platforms, tools, and integrations
+ *
+ * Design Philosophy:
+ * - Beauty by default > unlimited freedom
+ * - Aesthetic guardrails ensure pleasing output automatically
+ * - All elements compile to Code Mode for deterministic rendering
  */
-export { createSystem, validateSystem } from './system';
+export { createSystem, validateSystem, isCodeModeSystem, isDeclarativeSystem, isUnifiedModeSystem } from './system';
 export { compileSystem, serializeSystem } from './compiler';
 export { previewSystem } from './preview/renderer';
+export { renderCodeModeSystem } from './preview/code-renderer';
+export { renderUnifiedSystem } from './preview/unified-renderer';
+export { compileBackgroundPreset, getPaletteColors } from './presets/backgrounds';
+export { compilePrimitive } from './presets/primitives';
+export { wrapSketch, validateSketchSafety } from './presets/sketch-wrapper';
 export { getCapabilities, getPrimitiveTypes, getMotionSources, getBackgroundTextures, } from './capabilities';
-export const SDK_VERSION = '0.2.1';
-export const PROTOCOL_VERSION = '0.2';
+export { AESTHETIC_DEFAULTS, SDK_VERSION as TYPE_SDK_VERSION } from './types';
+export const SDK_VERSION = '0.4.0';
+export const PROTOCOL_VERSION = '0.4';
 export const IS_CANONICAL = false;
 export const IS_ARCHIVAL = false;
 export const RENDERER = '@nexart/ui-renderer';

package/dist/presets/backgrounds.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Background Presets - Compile to Code Mode sketches
+ * These are aesthetic-first presets that always look good
+ * All code uses p5-compatible APIs only
+ */
+import { BackgroundPreset, ColorPalette, LoopConfig } from '../types';
+export interface PresetColors {
+    background: string;
+    foreground: string;
+    accent?: string;
+}
+export declare function getPaletteColors(palette?: ColorPalette): PresetColors;
+export declare function compileBackgroundPreset(preset: BackgroundPreset, palette?: ColorPalette, loop?: LoopConfig): string;
+//# sourceMappingURL=backgrounds.d.ts.map

package/dist/presets/backgrounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backgrounds.d.ts","sourceRoot":"","sources":["../../src/presets/backgrounds.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,EAAsB,MAAM,UAAU,CAAC;AAE1F,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,YAA8B,GAAG,YAAY,CA+BtF;AAED,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,gBAAgB,EACxB,OAAO,GAAE,YAA8B,EACvC,IAAI,GAAE,UAAgE,GACrE,MAAM,CAkBR"}

package/dist/presets/backgrounds.js

@@ -0,0 +1,222 @@
+/**
+ * Background Presets - Compile to Code Mode sketches
+ * These are aesthetic-first presets that always look good
+ * All code uses p5-compatible APIs only
+ */
+import { AESTHETIC_DEFAULTS } from '../types';
+export function getPaletteColors(palette = 'offwhite-dark') {
+    const palettes = {
+        'offwhite-dark': {
+            background: 'rgb(246, 245, 242)',
+            foreground: 'rgb(45, 45, 45)',
+        },
+        'midnight': {
+            background: 'rgb(18, 18, 24)',
+            foreground: 'rgb(200, 200, 210)',
+        },
+        'warm-neutral': {
+            background: 'rgb(245, 240, 235)',
+            foreground: 'rgb(80, 60, 50)',
+        },
+        'ocean': {
+            background: 'rgb(230, 240, 245)',
+            foreground: 'rgb(30, 60, 90)',
+            accent: 'rgb(60, 120, 180)',
+        },
+        'sunset': {
+            background: 'rgb(255, 245, 235)',
+            foreground: 'rgb(120, 60, 40)',
+            accent: 'rgb(255, 140, 80)',
+        },
+        'forest': {
+            background: 'rgb(235, 242, 235)',
+            foreground: 'rgb(40, 70, 50)',
+            accent: 'rgb(80, 140, 90)',
+        },
+    };
+    return palettes[palette];
+}
+export function compileBackgroundPreset(preset, palette = 'offwhite-dark', loop = { duration: AESTHETIC_DEFAULTS.loop.defaultFrames }) {
+    const colors = getPaletteColors(palette);
+    const totalFrames = loop.duration;
+    switch (preset) {
+        case 'layered-waves':
+            return generateLayeredWaves(colors, totalFrames);
+        case 'soft-noise-field':
+            return generateSoftNoiseField(colors, totalFrames);
+        case 'orbital-lines':
+            return generateOrbitalLines(colors, totalFrames);
+        case 'flowing-stripes':
+            return generateFlowingStripes(colors, totalFrames);
+        case 'minimal-grid':
+            return generateMinimalGrid(colors, totalFrames);
+        default:
+            return generateLayeredWaves(colors, totalFrames);
+    }
+}
+function generateLayeredWaves(colors, totalFrames) {
+    return `
+function setup() {
+  noFill();
+  strokeWeight(1.5);
+}
+
+function draw() {
+  background('${colors.background}');
+  stroke('${colors.foreground}');
+  
+  const margin = width * 0.08;
+  const waveCount = 8;
+  const waveSpacing = (height - margin * 2) / waveCount;
+  
+  for (let i = 0; i < waveCount; i++) {
+    const y = margin + i * waveSpacing;
+    const phase = i * 0.3 + t * TWO_PI;
+    const amp = 15 + i * 5;
+    
+    beginShape();
+    for (let x = margin; x <= width - margin; x += 3) {
+      const nx = (x - margin) / (width - margin * 2);
+      const wave = sin(nx * PI * 3 + phase) * amp;
+      const easeEdge = sin(nx * PI);
+      vertex(x, y + wave * easeEdge);
+    }
+    endShape();
+  }
+}
+`;
+}
+function generateSoftNoiseField(colors, totalFrames) {
+    return `
+function setup() {
+  noStroke();
+}
+
+function draw() {
+  background('${colors.background}');
+  
+  const margin = width * 0.08;
+  const dotSize = 3;
+  const spacing = 20;
+  const cols = floor((width - margin * 2) / spacing);
+  const rows = floor((height - margin * 2) / spacing);
+  
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      const x = margin + i * spacing + spacing / 2;
+      const y = margin + j * spacing + spacing / 2;
+      
+      const n = noise(i * 0.1, j * 0.1, t * 2);
+      const offsetX = (n - 0.5) * spacing * 0.6;
+      const offsetY = (noise(i * 0.1 + 100, j * 0.1, t * 2) - 0.5) * spacing * 0.6;
+      
+      const alpha = map(n, 0, 1, 80, 200);
+      fill(red('${colors.foreground}'), green('${colors.foreground}'), blue('${colors.foreground}'), alpha);
+      ellipse(x + offsetX, y + offsetY, dotSize + n * 3);
+    }
+  }
+}
+`;
+}
+function generateOrbitalLines(colors, totalFrames) {
+    return `
+function setup() {
+  noFill();
+  strokeWeight(1);
+}
+
+function draw() {
+  background('${colors.background}');
+  stroke('${colors.foreground}');
+  
+  const cx = width / 2;
+  const cy = height / 2;
+  const maxRadius = min(width, height) * 0.4;
+  const orbitCount = 6;
+  
+  for (let i = 0; i < orbitCount; i++) {
+    const radius = maxRadius * (0.3 + i * 0.12);
+    const rotation = t * TWO_PI * (0.5 + i * 0.1) * (i % 2 === 0 ? 1 : -1);
+    
+    beginShape();
+    for (let a = 0; a <= TWO_PI; a += 0.05) {
+      const wobble = sin(a * 3 + t * TWO_PI + i) * 8;
+      const r = radius + wobble;
+      const x = cx + cos(a + rotation) * r;
+      const y = cy + sin(a + rotation) * r;
+      vertex(x, y);
+    }
+    endShape(CLOSE);
+  }
+}
+`;
+}
+function generateFlowingStripes(colors, totalFrames) {
+    return `
+function setup() {
+  noFill();
+  strokeWeight(2);
+}
+
+function draw() {
+  background('${colors.background}');
+  stroke('${colors.foreground}');
+  
+  const margin = width * 0.1;
+  const stripeCount = 12;
+  const stripeSpacing = (width - margin * 2) / stripeCount;
+  
+  for (let i = 0; i < stripeCount; i++) {
+    const x = margin + i * stripeSpacing;
+    const phase = i * 0.2 + t * TWO_PI;
+    
+    beginShape();
+    for (let y = margin; y <= height - margin; y += 4) {
+      const ny = (y - margin) / (height - margin * 2);
+      const wave = sin(ny * PI * 2 + phase) * 15;
+      const easeEdge = sin(ny * PI);
+      vertex(x + wave * easeEdge, y);
+    }
+    endShape();
+  }
+}
+`;
+}
+function generateMinimalGrid(colors, totalFrames) {
+    return `
+function setup() {
+  rectMode(CENTER);
+  noFill();
+  strokeWeight(1);
+}
+
+function draw() {
+  background('${colors.background}');
+  stroke('${colors.foreground}');
+  
+  const margin = width * 0.12;
+  const cols = 6;
+  const rows = 6;
+  const cellW = (width - margin * 2) / cols;
+  const cellH = (height - margin * 2) / rows;
+  const baseSize = min(cellW, cellH) * 0.5;
+  
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      const x = margin + i * cellW + cellW / 2;
+      const y = margin + j * cellH + cellH / 2;
+      
+      const n = noise(i * 0.3, j * 0.3, t * 1.5);
+      const size = baseSize * (0.5 + n * 0.5);
+      const rotation = n * PI * 0.25;
+      
+      push();
+      translate(x, y);
+      rotate(rotation);
+      rect(0, 0, size, size);
+      pop();
+    }
+  }
+}
+`;
+}

package/dist/presets/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Presets Index - Export all preset utilities
+ */
+export { compileBackgroundPreset, getPaletteColors } from './backgrounds';
+export { compilePrimitive } from './primitives';
+export { wrapSketch, validateSketchSafety } from './sketch-wrapper';
+//# sourceMappingURL=index.d.ts.map

package/dist/presets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/presets/index.js

@@ -0,0 +1,6 @@
+/**
+ * Presets Index - Export all preset utilities
+ */
+export { compileBackgroundPreset, getPaletteColors } from './backgrounds';
+export { compilePrimitive } from './primitives';
+export { wrapSketch, validateSketchSafety } from './sketch-wrapper';

package/dist/presets/primitives.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Primitive Elements - Safe ranges with aesthetic clamping
+ * Declarative blocks that compose well and always look tasteful
+ * All code uses p5-compatible APIs only (no globalAlpha, etc.)
+ */
+import { PrimitiveName, MotionSpeed, StrokeWeightAuto } from '../types';
+export interface PrimitiveConfig {
+    name: PrimitiveName;
+    count?: number;
+    strokeWeight?: StrokeWeightAuto;
+    motion?: MotionSpeed;
+    color?: string;
+    opacity?: number;
+}
+export declare function compilePrimitive(config: PrimitiveConfig, foreground?: string): string;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/presets/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/presets/primitives.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAE5F,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsCD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,GAAE,MAA0B,GAAG,MAAM,CA2BxG"}