image-to-pixel 3.0.0 → 3.0.1

package/lib/video.js

@@ -1,92 +1,92 @@
-// image-to-pixel/video: encode processed frames to MP4 (H.264) or WebM (VP9/VP8) with WebCodecs.
-// The muxers are this project's own (lib/core/video/mux-*.js): MIT, no dependencies.
-
-import { createMp4Muxer } from './core/video/mux-mp4.js';
-import { createWebmMuxer } from './core/video/mux-webm.js';
-import { upscale } from './core/export/scale.js';
-
-export { forEachFrame, estimateFps, seekTo, frameTimes, videoReady } from './core/video/frames.js';
-export { createMp4Muxer, createWebmMuxer };
-
-const AVC = ['avc1.640033', 'avc1.4d0033', 'avc1.42003e', 'avc1.640028', 'avc1.42001f'];
-const VP = [['vp09.00.10.08', 'vp9'], ['vp8', 'vp8']];
-
-/** Which formats this browser can encode. */
-export async function videoSupport(width = 640, height = 480) {
-  const out = { mp4: false, webm: false, webcodecs: typeof VideoEncoder !== 'undefined' };
-  if (out.webcodecs) {
-    for (const codec of AVC) if ((await VideoEncoder.isConfigSupported({ codec, width, height }).catch(() => ({}))).supported) { out.mp4 = true; break; }
-    for (const [codec] of VP) if ((await VideoEncoder.isConfigSupported({ codec, width, height }).catch(() => ({}))).supported) { out.webm = true; break; }
-  }
-  return out;
-}
-
-const even = n => n + (n & 1);
-
-/**
- * Start an encoder; add frames one at a time (so a long clip never sits in memory), then finish().
- * @param {{ format: 'mp4' | 'webm', fps: number, width: number, height: number, scale?: number, bitrate?: number }} opts
- *   width/height: size of the frames you will add (before scaling)
- */
-export async function createVideoEncoder(opts) {
-  const scale = Math.max(1, Math.round(opts.scale || 1));
-  const W = even(opts.width * scale), H = even(opts.height * scale);
-  const fps = opts.fps || 30;
-  const bitrate = opts.bitrate || Math.min(20e6, Math.max(2e6, W * H * fps * 0.15));
-  if (typeof VideoEncoder === 'undefined') throw new Error('This browser has no WebCodecs VideoEncoder. Export a GIF or PNG sequence instead.');
-
-  let codec = null, muxCodec = null;
-  const list = opts.format === 'mp4' ? AVC.map(c => [c, 'avc']) : VP;
-  for (const [c, m] of list) {
-    const ok = await VideoEncoder.isConfigSupported({ codec: c, width: W, height: H, bitrate, framerate: fps }).catch(() => ({}));
-    if (ok.supported) { codec = c; muxCodec = m; break; }
-  }
-  if (!codec) throw new Error(`No ${opts.format.toUpperCase()} encoder available in this browser at ${W}×${H}.`);
-
-  const muxer = opts.format === 'mp4'
-    ? createMp4Muxer({ width: W, height: H })
-    : createWebmMuxer({ width: W, height: H, codec: muxCodec, fps });
-
-  let error = null;
-  const encoder = new VideoEncoder({
-    output: (chunk, meta) => muxer.addChunk(chunk, meta),
-    error: e => { error = e; },
-  });
-  // avc.format 'avc': length-prefixed NAL units plus a decoder config record, which MP4 needs
-  encoder.configure({ codec, width: W, height: H, bitrate, framerate: fps, latencyMode: 'quality', ...(opts.format === 'mp4' ? { avc: { format: 'avc' } } : {}) });
-
-  const canvas = new OffscreenCanvas(W, H);
-  const ctx = canvas.getContext('2d');
-  let i = 0;
-  const frameUs = 1e6 / fps;
-
-  return {
-    width: W, height: H, codec,
-    /** @param {{ width, height, data }} img */
-    async add(img) {
-      if (error) throw error;
-      const up = scale > 1 ? upscale(img, scale) : img;
-      ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, H);
-      ctx.putImageData(new ImageData(new Uint8ClampedArray(up.data), up.width, up.height), 0, 0);
-      const frame = new VideoFrame(canvas, { timestamp: Math.round(i * frameUs), duration: Math.round(frameUs) });
-      encoder.encode(frame, { keyFrame: i % Math.max(1, Math.round(fps * 2)) === 0 });
-      frame.close();
-      i++;
-      if (encoder.encodeQueueSize > 8) await new Promise(r => setTimeout(r, 0));
-    },
-    /** @returns {Promise<Blob>} */
-    async finish() {
-      await encoder.flush();
-      if (error) throw error;
-      encoder.close();
-      return new Blob([muxer.finish()], { type: opts.format === 'mp4' ? 'video/mp4' : 'video/webm' });
-    },
-  };
-}
-
-/** Convenience: encode an array of frames in one go. */
-export async function encodeVideo(frames, opts) {
-  const enc = await createVideoEncoder({ ...opts, width: frames[0].width, height: frames[0].height });
-  for (const f of frames) await enc.add(f);
-  return enc.finish();
-}
+// image-to-pixel/video: encode processed frames to MP4 (H.264) or WebM (VP9/VP8) with WebCodecs.
+// The muxers are this project's own (lib/core/video/mux-*.js): MIT, no dependencies.
+
+import { createMp4Muxer } from './core/video/mux-mp4.js';
+import { createWebmMuxer } from './core/video/mux-webm.js';
+import { upscale } from './core/export/scale.js';
+
+export { forEachFrame, estimateFps, seekTo, frameTimes, videoReady } from './core/video/frames.js';
+export { createMp4Muxer, createWebmMuxer };
+
+const AVC = ['avc1.640033', 'avc1.4d0033', 'avc1.42003e', 'avc1.640028', 'avc1.42001f'];
+const VP = [['vp09.00.10.08', 'vp9'], ['vp8', 'vp8']];
+
+/** Which formats this browser can encode. */
+export async function videoSupport(width = 640, height = 480) {
+  const out = { mp4: false, webm: false, webcodecs: typeof VideoEncoder !== 'undefined' };
+  if (out.webcodecs) {
+    for (const codec of AVC) if ((await VideoEncoder.isConfigSupported({ codec, width, height }).catch(() => ({}))).supported) { out.mp4 = true; break; }
+    for (const [codec] of VP) if ((await VideoEncoder.isConfigSupported({ codec, width, height }).catch(() => ({}))).supported) { out.webm = true; break; }
+  }
+  return out;
+}
+
+const even = n => n + (n & 1);
+
+/**
+ * Start an encoder; add frames one at a time (so a long clip never sits in memory), then finish().
+ * @param {{ format: 'mp4' | 'webm', fps: number, width: number, height: number, scale?: number, bitrate?: number }} opts
+ *   width/height: size of the frames you will add (before scaling)
+ */
+export async function createVideoEncoder(opts) {
+  const scale = Math.max(1, Math.round(opts.scale || 1));
+  const W = even(opts.width * scale), H = even(opts.height * scale);
+  const fps = opts.fps || 30;
+  const bitrate = opts.bitrate || Math.min(20e6, Math.max(2e6, W * H * fps * 0.15));
+  if (typeof VideoEncoder === 'undefined') throw new Error('This browser has no WebCodecs VideoEncoder. Export a GIF or PNG sequence instead.');
+
+  let codec = null, muxCodec = null;
+  const list = opts.format === 'mp4' ? AVC.map(c => [c, 'avc']) : VP;
+  for (const [c, m] of list) {
+    const ok = await VideoEncoder.isConfigSupported({ codec: c, width: W, height: H, bitrate, framerate: fps }).catch(() => ({}));
+    if (ok.supported) { codec = c; muxCodec = m; break; }
+  }
+  if (!codec) throw new Error(`No ${opts.format.toUpperCase()} encoder available in this browser at ${W}×${H}.`);
+
+  const muxer = opts.format === 'mp4'
+    ? createMp4Muxer({ width: W, height: H })
+    : createWebmMuxer({ width: W, height: H, codec: muxCodec, fps });
+
+  let error = null;
+  const encoder = new VideoEncoder({
+    output: (chunk, meta) => muxer.addChunk(chunk, meta),
+    error: e => { error = e; },
+  });
+  // avc.format 'avc': length-prefixed NAL units plus a decoder config record, which MP4 needs
+  encoder.configure({ codec, width: W, height: H, bitrate, framerate: fps, latencyMode: 'quality', ...(opts.format === 'mp4' ? { avc: { format: 'avc' } } : {}) });
+
+  const canvas = new OffscreenCanvas(W, H);
+  const ctx = canvas.getContext('2d');
+  let i = 0;
+  const frameUs = 1e6 / fps;
+
+  return {
+    width: W, height: H, codec,
+    /** @param {{ width, height, data }} img */
+    async add(img) {
+      if (error) throw error;
+      const up = scale > 1 ? upscale(img, scale) : img;
+      ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, H);
+      ctx.putImageData(new ImageData(new Uint8ClampedArray(up.data), up.width, up.height), 0, 0);
+      const frame = new VideoFrame(canvas, { timestamp: Math.round(i * frameUs), duration: Math.round(frameUs) });
+      encoder.encode(frame, { keyFrame: i % Math.max(1, Math.round(fps * 2)) === 0 });
+      frame.close();
+      i++;
+      if (encoder.encodeQueueSize > 8) await new Promise(r => setTimeout(r, 0));
+    },
+    /** @returns {Promise<Blob>} */
+    async finish() {
+      await encoder.flush();
+      if (error) throw error;
+      encoder.close();
+      return new Blob([muxer.finish()], { type: opts.format === 'mp4' ? 'video/mp4' : 'video/webm' });
+    },
+  };
+}
+
+/** Convenience: encode an array of frames in one go. */
+export async function encodeVideo(frames, opts) {
+  const enc = await createVideoEncoder({ ...opts, width: frames[0].width, height: frames[0].height });
+  for (const f of frames) await enc.add(f);
+  return enc.finish();
+}

package/package.json

@@ -1,92 +1,92 @@
-{
-  "name": "image-to-pixel",
-  "version": "3.0.0",
-  "description": "Turn images and video into pixel art: dithering, palettes, batch and video. A WebGL engine (via ShaderMate) with a CPU fallback, plus a full editor.",
-  "type": "module",
-  "license": "MIT",
-  "author": "Tezumie",
-  "homepage": "https://tezumie.github.io/Image-to-Pixel/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Tezumie/Image-to-Pixel.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Tezumie/Image-to-Pixel/issues"
-  },
-  "keywords": [
-    "pixel-art",
-    "dithering",
-    "palette",
-    "quantization",
-    "floyd-steinberg",
-    "bayer",
-    "webgl",
-    "glsl",
-    "shader",
-    "gif",
-    "sprite-sheet",
-    "lospec"
-  ],
-  "main": "./dist/image-to-pixel.cjs",
-  "module": "./dist/image-to-pixel.esm.js",
-  "types": "./types/index.d.ts",
-  "unpkg": "./dist/image-to-pixel.min.js",
-  "jsdelivr": "./dist/image-to-pixel.min.js",
-  "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/image-to-pixel.esm.js",
-      "require": "./dist/image-to-pixel.cjs",
-      "default": "./dist/image-to-pixel.esm.js"
-    },
-    "./video": {
-      "types": "./types/video.d.ts",
-      "import": "./dist/video.esm.js",
-      "default": "./dist/video.esm.js"
-    },
-    "./editor": {
-      "types": "./types/editor.d.ts",
-      "import": "./dist/editor.esm.js",
-      "default": "./dist/editor.esm.js"
-    },
-    "./editor.css": "./dist/editor.css",
-    "./dist/*": "./dist/*",
-    "./package.json": "./package.json"
-  },
-  "sideEffects": [
-    "./dist/editor.css",
-    "./dist/image-to-pixel.js",
-    "./dist/image-to-pixel.min.js"
-  ],
-  "files": [
-    "dist",
-    "lib",
-    "types",
-    "LICENSE",
-    "README.md"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "build": "node esbuild.config.mjs",
-    "build:site": "npm run build && node scripts/build-site.mjs",
-    "watch": "node esbuild.config.mjs --watch",
-    "dev": "node scripts/serve.mjs --dev",
-    "preview": "node scripts/serve.mjs",
-    "bluenoise": "node scripts/gen-bluenoise.mjs",
-    "screenshots": "node scripts/screenshots.mjs",
-    "clean": "node scripts/clean.mjs",
-    "test": "npm run build:site && node --test",
-    "prepublishOnly": "npm test",
-    "check:runtime": "node scripts/nodepod-check.mjs"
-  },
-  "dependencies": {
-    "shadermate": "^2.0.0"
-  },
-  "devDependencies": {
-    "esbuild": "^0.25.12",
-    "highlight.js": "^11.12.0",
-    "marked": "^15.0.12"
-  }
-}
+{
+  "name": "image-to-pixel",
+  "version": "3.0.1",
+  "description": "Turn images and video into pixel art: dithering, palettes, batch and video. A WebGL engine (via ShaderMate) with a CPU fallback, plus a full editor.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Tezumie",
+  "homepage": "https://tezumie.github.io/Image-to-Pixel/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tezumie/Image-to-Pixel.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Tezumie/Image-to-Pixel/issues"
+  },
+  "keywords": [
+    "pixel-art",
+    "dithering",
+    "palette",
+    "quantization",
+    "floyd-steinberg",
+    "bayer",
+    "webgl",
+    "glsl",
+    "shader",
+    "gif",
+    "sprite-sheet",
+    "lospec"
+  ],
+  "main": "./dist/image-to-pixel.cjs",
+  "module": "./dist/image-to-pixel.esm.js",
+  "types": "./types/index.d.ts",
+  "unpkg": "./dist/image-to-pixel.min.js",
+  "jsdelivr": "./dist/image-to-pixel.min.js",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/image-to-pixel.esm.js",
+      "require": "./dist/image-to-pixel.cjs",
+      "default": "./dist/image-to-pixel.esm.js"
+    },
+    "./video": {
+      "types": "./types/video.d.ts",
+      "import": "./dist/video.esm.js",
+      "default": "./dist/video.esm.js"
+    },
+    "./editor": {
+      "types": "./types/editor.d.ts",
+      "import": "./dist/editor.esm.js",
+      "default": "./dist/editor.esm.js"
+    },
+    "./editor.css": "./dist/editor.css",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/editor.css",
+    "./dist/image-to-pixel.js",
+    "./dist/image-to-pixel.min.js"
+  ],
+  "files": [
+    "dist",
+    "lib",
+    "types",
+    "LICENSE",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "node esbuild.config.mjs",
+    "build:site": "npm run build && node scripts/build-site.mjs",
+    "watch": "node esbuild.config.mjs --watch",
+    "dev": "node scripts/serve.mjs --dev",
+    "preview": "node scripts/serve.mjs",
+    "bluenoise": "node scripts/gen-bluenoise.mjs",
+    "screenshots": "node scripts/screenshots.mjs",
+    "clean": "node scripts/clean.mjs",
+    "test": "npm run build:site && node --test",
+    "prepublishOnly": "npm test",
+    "check:runtime": "node scripts/nodepod-check.mjs"
+  },
+  "dependencies": {
+    "shadermate": "^2.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.12",
+    "highlight.js": "^11.12.0",
+    "marked": "^15.0.12"
+  }
+}

package/types/editor.d.ts

@@ -1,34 +1,34 @@
-// image-to-pixel/editor
-import type { Settings, SettingsInput, PixelResult, Source } from './index';
-
-export interface EditorOptions {
-  settings?: SettingsInput;
-  /** Remember settings, theme and palettes in localStorage (default true). */
-  persist?: boolean;
-  /** Show sample images in the empty state (default true). */
-  samples?: boolean;
-  /** Turn the logo into a link. */
-  homeHref?: string;
-}
-export interface EditorStore {
-  readonly settings: Settings;
-  update(patch: SettingsInput, opts?: { key?: string; history?: boolean }): void;
-  replace(settings: SettingsInput): void;
-  subscribe(fn: (settings: Settings, why: string) => void): () => void;
-  undo(): boolean;
-  redo(): boolean;
-  readonly canUndo: boolean;
-  readonly canRedo: boolean;
-}
-export interface Editor {
-  store: EditorStore;
-  addFiles(files: File[]): Promise<void>;
-  addImage(source: Source, name?: string): Promise<unknown>;
-  openSample(id: 'dusk' | 'still-life' | 'potion'): Promise<void>;
-  applyPreset(id: string): void;
-  setTheme(theme: 'dark' | 'light'): void;
-  readonly result: PixelResult | null;
-  idle(): Promise<void>;
-}
-export function mountEditor(root: HTMLElement, options?: EditorOptions): Promise<Editor>;
-export const SAMPLES: { id: string; name: string; svg: string }[];
+// image-to-pixel/editor
+import type { Settings, SettingsInput, PixelResult, Source } from './index';
+
+export interface EditorOptions {
+  settings?: SettingsInput;
+  /** Remember settings, theme and palettes in localStorage (default true). */
+  persist?: boolean;
+  /** Show sample images in the empty state (default true). */
+  samples?: boolean;
+  /** Turn the logo into a link. */
+  homeHref?: string;
+}
+export interface EditorStore {
+  readonly settings: Settings;
+  update(patch: SettingsInput, opts?: { key?: string; history?: boolean }): void;
+  replace(settings: SettingsInput): void;
+  subscribe(fn: (settings: Settings, why: string) => void): () => void;
+  undo(): boolean;
+  redo(): boolean;
+  readonly canUndo: boolean;
+  readonly canRedo: boolean;
+}
+export interface Editor {
+  store: EditorStore;
+  addFiles(files: File[]): Promise<void>;
+  addImage(source: Source, name?: string): Promise<unknown>;
+  openSample(id: 'dusk' | 'still-life' | 'potion'): Promise<void>;
+  applyPreset(id: string): void;
+  setTheme(theme: 'dark' | 'light'): void;
+  readonly result: PixelResult | null;
+  idle(): Promise<void>;
+}
+export function mountEditor(root: HTMLElement, options?: EditorOptions): Promise<Editor>;
+export const SAMPLES: { id: string; name: string; svg: string }[];