@nexart/ui-renderer 0.2.0 → 0.3.1

package/dist/presets/primitives.js

@@ -0,0 +1,282 @@
+/**
+ * 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 { AESTHETIC_DEFAULTS } from '../types';
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function resolveStrokeWeight(weight = 'auto') {
+    if (typeof weight === 'number') {
+        return clamp(weight, AESTHETIC_DEFAULTS.strokeWeight.min, AESTHETIC_DEFAULTS.strokeWeight.max);
+    }
+    switch (weight) {
+        case 'thin': return 0.5;
+        case 'thick': return 3;
+        case 'medium': return 1.5;
+        case 'auto':
+        default: return AESTHETIC_DEFAULTS.strokeWeight.default;
+    }
+}
+function resolveMotionSpeed(speed = 'slow') {
+    switch (speed) {
+        case 'fast': return 1.5;
+        case 'medium': return 1.0;
+        case 'slow':
+        default: return 0.5;
+    }
+}
+function resolveCount(count, defaultVal) {
+    if (count === undefined)
+        return defaultVal;
+    return clamp(count, AESTHETIC_DEFAULTS.density.min, AESTHETIC_DEFAULTS.density.max);
+}
+function resolveOpacity(opacity) {
+    if (opacity === undefined)
+        return 255;
+    return Math.round(clamp(opacity, 0.1, 1) * 255);
+}
+export function compilePrimitive(config, foreground = 'rgb(45, 45, 45)') {
+    const sw = resolveStrokeWeight(config.strokeWeight);
+    const speed = resolveMotionSpeed(config.motion);
+    const count = resolveCount(config.count, AESTHETIC_DEFAULTS.density.default);
+    const color = config.color || foreground;
+    const alpha = resolveOpacity(config.opacity);
+    switch (config.name) {
+        case 'waves':
+            return generateWavesPrimitive(count, sw, speed, color, alpha);
+        case 'dots':
+            return generateDotsPrimitive(count, color, alpha);
+        case 'lines':
+            return generateLinesPrimitive(count, sw, speed, color, alpha);
+        case 'grid':
+            return generateGridPrimitive(count, sw, color, alpha);
+        case 'flow':
+            return generateFlowPrimitive(count, sw, speed, color, alpha);
+        case 'orbits':
+            return generateOrbitsPrimitive(count, sw, speed, color, alpha);
+        case 'circles':
+            return generateCirclesPrimitive(count, sw, speed, color, alpha);
+        case 'stripes':
+            return generateStripesPrimitive(count, sw, speed, color, alpha);
+        default:
+            return generateWavesPrimitive(count, sw, speed, color, alpha);
+    }
+}
+function generateWavesPrimitive(count, sw, speed, color, alpha) {
+    return `
+push();
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const margin = width * 0.08;
+const spacing = (height - margin * 2) / ${count};
+
+for (let i = 0; i < ${count}; i++) {
+  const y = margin + i * spacing;
+  const phase = i * 0.3 + t * TWO_PI * ${speed};
+  const amp = 12 + i * 4;
+  
+  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();
+}
+pop();
+`;
+}
+function generateDotsPrimitive(count, color, alpha) {
+    return `
+push();
+noStroke();
+fill(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const margin = width * 0.1;
+const cols = ${Math.ceil(Math.sqrt(count * 1.5))};
+const rows = ${Math.ceil(count / Math.ceil(Math.sqrt(count * 1.5)))};
+const spacing = min((width - margin * 2) / cols, (height - margin * 2) / rows);
+
+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.2, j * 0.2, t * 2);
+    const offsetX = (n - 0.5) * spacing * 0.4;
+    const offsetY = (noise(i * 0.2 + 50, j * 0.2, t * 2) - 0.5) * spacing * 0.4;
+    const size = 3 + n * 5;
+    
+    ellipse(x + offsetX, y + offsetY, size);
+  }
+}
+pop();
+`;
+}
+function generateLinesPrimitive(count, sw, speed, color, alpha) {
+    return `
+push();
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const margin = width * 0.1;
+const spacing = (width - margin * 2) / ${count};
+
+for (let i = 0; i < ${count}; i++) {
+  const x = margin + i * spacing;
+  const phase = i * 0.15 + t * TWO_PI * ${speed};
+  
+  beginShape();
+  for (let y = margin; y <= height - margin; y += 4) {
+    const ny = (y - margin) / (height - margin * 2);
+    const wave = sin(ny * PI * 2 + phase) * 12;
+    const ease = sin(ny * PI);
+    vertex(x + wave * ease, y);
+  }
+  endShape();
+}
+pop();
+`;
+}
+function generateGridPrimitive(count, sw, color, alpha) {
+    const gridSize = Math.ceil(Math.sqrt(count));
+    return `
+push();
+rectMode(CENTER);
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const margin = width * 0.12;
+const cols = ${gridSize};
+const rows = ${gridSize};
+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.4 + n * 0.6);
+    const rotation = n * PI * 0.2;
+    
+    push();
+    translate(x, y);
+    rotate(rotation);
+    rect(0, 0, size, size);
+    pop();
+  }
+}
+pop();
+`;
+}
+function generateFlowPrimitive(count, sw, speed, color, alpha) {
+    return `
+push();
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const margin = width * 0.1;
+const particleCount = ${count * 8};
+const lineLength = 50;
+
+for (let i = 0; i < particleCount; i++) {
+  const startX = margin + random() * (width - margin * 2);
+  const startY = margin + random() * (height - margin * 2);
+  
+  beginShape();
+  let px = startX;
+  let py = startY;
+  
+  for (let s = 0; s < lineLength; s++) {
+    const angle = noise(px * 0.005, py * 0.005, t * ${speed}) * TWO_PI * 2;
+    vertex(px, py);
+    px += cos(angle) * 2;
+    py += sin(angle) * 2;
+    
+    if (px < margin || px > width - margin || py < margin || py > height - margin) break;
+  }
+  endShape();
+}
+pop();
+`;
+}
+function generateOrbitsPrimitive(count, sw, speed, color, alpha) {
+    return `
+push();
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const cx = width / 2;
+const cy = height / 2;
+const maxRadius = min(width, height) * 0.4;
+
+for (let i = 0; i < ${count}; i++) {
+  const radius = maxRadius * (0.25 + i * ${0.75 / count});
+  const rotation = t * TWO_PI * ${speed} * (i % 2 === 0 ? 1 : -1);
+  
+  beginShape();
+  for (let a = 0; a <= TWO_PI; a += 0.05) {
+    const wobble = sin(a * 4 + t * TWO_PI + i) * 6;
+    const r = radius + wobble;
+    const x = cx + cos(a + rotation) * r;
+    const y = cy + sin(a + rotation) * r;
+    vertex(x, y);
+  }
+  endShape(CLOSE);
+}
+pop();
+`;
+}
+function generateCirclesPrimitive(count, sw, speed, color, alpha) {
+    return `
+push();
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const cx = width / 2;
+const cy = height / 2;
+const maxRadius = min(width, height) * 0.4;
+
+for (let i = 0; i < ${count}; i++) {
+  const baseRadius = maxRadius * (0.2 + i * ${0.8 / count});
+  const pulseOffset = i * 0.3;
+  const pulse = sin(t * TWO_PI * ${speed} + pulseOffset) * 10;
+  
+  ellipse(cx, cy, (baseRadius + pulse) * 2);
+}
+pop();
+`;
+}
+function generateStripesPrimitive(count, sw, speed, color, alpha) {
+    return `
+push();
+noFill();
+strokeWeight(${sw});
+stroke(red('${color}'), green('${color}'), blue('${color}'), ${alpha});
+
+const margin = width * 0.08;
+const spacing = (height - margin * 2) / ${count};
+
+for (let i = 0; i < ${count}; i++) {
+  const y = margin + i * spacing;
+  const wavePhase = i * 0.2 + t * TWO_PI * ${speed};
+  const wave = sin(wavePhase) * 8;
+  
+  line(margin, y + wave, width - margin, y + wave);
+}
+pop();
+`;
+}

package/dist/presets/sketch-wrapper.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Sketch Wrapper - Safety normalization for raw Code Mode sketches
+ * Wraps user-provided code with aesthetic defaults and safety measures
+ */
+export interface SketchWrapperConfig {
+    code: string;
+    normalize?: boolean;
+}
+export declare function wrapSketch(config: SketchWrapperConfig): string;
+export declare function validateSketchSafety(code: string): {
+    safe: boolean;
+    warnings: string[];
+};
+//# sourceMappingURL=sketch-wrapper.d.ts.map

package/dist/presets/sketch-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sketch-wrapper.d.ts","sourceRoot":"","sources":["../../src/presets/sketch-wrapper.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAqB9D;AAoCD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CA8BxF"}

package/dist/presets/sketch-wrapper.js

@@ -0,0 +1,70 @@
+/**
+ * Sketch Wrapper - Safety normalization for raw Code Mode sketches
+ * Wraps user-provided code with aesthetic defaults and safety measures
+ */
+import { AESTHETIC_DEFAULTS } from '../types';
+export function wrapSketch(config) {
+    const { code, normalize = true } = config;
+    if (!normalize) {
+        return code;
+    }
+    const bgColor = `rgb(${AESTHETIC_DEFAULTS.background.r}, ${AESTHETIC_DEFAULTS.background.g}, ${AESTHETIC_DEFAULTS.background.b})`;
+    const hasSetup = /function\s+setup\s*\(/.test(code);
+    const hasDraw = /function\s+draw\s*\(/.test(code);
+    if (hasSetup && hasDraw) {
+        return injectNormalizationIntoExistingCode(code, bgColor);
+    }
+    if (!hasSetup && !hasDraw) {
+        return wrapBareCode(code, bgColor);
+    }
+    return code;
+}
+function injectNormalizationIntoExistingCode(code, bgColor) {
+    let modified = code;
+    if (!/strokeWeight\s*\(/.test(code)) {
+        modified = modified.replace(/function\s+setup\s*\(\s*\)\s*\{/, `function setup() {\n  strokeWeight(${AESTHETIC_DEFAULTS.strokeWeight.default});`);
+    }
+    if (!/background\s*\(/.test(code)) {
+        modified = modified.replace(/function\s+draw\s*\(\s*\)\s*\{/, `function draw() {\n  background('${bgColor}');`);
+    }
+    return modified;
+}
+function wrapBareCode(code, bgColor) {
+    return `
+function setup() {
+  strokeWeight(${AESTHETIC_DEFAULTS.strokeWeight.default});
+}
+
+function draw() {
+  background('${bgColor}');
+  
+  ${code}
+}
+`;
+}
+export function validateSketchSafety(code) {
+    const warnings = [];
+    const dangerousPatterns = [
+        { pattern: /eval\s*\(/, message: 'eval() is not allowed' },
+        { pattern: /Function\s*\(/, message: 'Function constructor is not allowed' },
+        { pattern: /document\s*\./, message: 'Direct DOM access is not allowed' },
+        { pattern: /window\s*\./, message: 'Window access is not allowed' },
+        { pattern: /import\s*\(/, message: 'Dynamic imports are not allowed' },
+        { pattern: /require\s*\(/, message: 'require() is not allowed' },
+    ];
+    for (const { pattern, message } of dangerousPatterns) {
+        if (pattern.test(code)) {
+            warnings.push(message);
+        }
+    }
+    if (/Math\.random\s*\(/.test(code)) {
+        warnings.push('Math.random() may break determinism - use random() instead');
+    }
+    if (/Date\s*\(/.test(code) || /Date\.now\s*\(/.test(code)) {
+        warnings.push('Date functions may break determinism - use t or frameCount instead');
+    }
+    return {
+        safe: warnings.filter(w => !w.includes('may break')).length === 0,
+        warnings,
+    };
+}

package/dist/preview/code-renderer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @nexart/ui-renderer v0.3.0 - Code Mode Renderer
+ *
+ * Renders Code Mode systems using the canonical NexArt p5-like runtime.
+ * This uses the exact same execution logic as nexart.xyz for determinism.
+ */
+import type { NexArtCodeSystem, PreviewOptions } from '../types';
+interface P5Runtime {
+    [key: string]: any;
+    width: number;
+    height: number;
+    frameCount: number;
+}
+export declare function createP5Runtime(canvas: HTMLCanvasElement, width: number, height: number, seed: number): P5Runtime;
+export interface CodeRenderer {
+    render: () => void;
+    start: () => void;
+    stop: () => void;
+    destroy: () => void;
+    isCanonical: false;
+    isArchival: false;
+}
+export declare function renderCodeModeSystem(system: NexArtCodeSystem, canvas: HTMLCanvasElement, options?: PreviewOptions): CodeRenderer;
+export {};
+//# sourceMappingURL=code-renderer.d.ts.map

package/dist/preview/code-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/code-renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAWjE,UAAU,SAAS;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AA4DD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,GACX,SAAS,CAueX;AASD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC;CACnB;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,YAAY,CAoMd"}