@open-assets/open-assets 0.1.11 → 0.2.0

package/lib/init.mjs

@@ -29,34 +29,172 @@ function askConfirm(rl, question, defaultYes = true) {
 }
 
 function askCheckbox(rl, question, options) {
+  // Non-TTY fallback: numbered list, comma-separated input
+  if (!process.stdin.isTTY) {
+    return new Promise((resolve) => {
+      console.log(`\n  ${question}\n`);
+      options.forEach((opt, i) => {
+        console.log(`    ${i + 1}) ${opt.label}`);
+      });
+      console.log();
+      rl.question("  Enter numbers (comma-separated): ", (answer) => {
+        const indices = answer.trim().split(",").map((s) => parseInt(s.trim(), 10) - 1);
+        resolve(
+          options
+            .filter((_, i) => indices.includes(i))
+            .map((o) => o.value)
+        );
+      });
+    });
+  }
+
   return new Promise((resolve) => {
+    const selected = new Set();
+    let cursor = 0;
+
+    function render() {
+      // Move cursor up to overwrite previous render (if not first render)
+      if (render._rendered) {
+        process.stdout.write(`\x1b[${options.length + 1}A`);
+      }
+      render._rendered = true;
+
+      for (let i = 0; i < options.length; i++) {
+        const check = selected.has(i) ? "\x1b[36m●\x1b[0m" : "○";
+        const label = i === cursor ? `\x1b[36m${options[i].label}\x1b[0m` : options[i].label;
+        const pointer = i === cursor ? "\x1b[36m❯\x1b[0m" : " ";
+        process.stdout.write(`\x1b[2K    ${pointer} ${check} ${label}\n`);
+      }
+      process.stdout.write(`\x1b[2K  \x1b[2m(↑/↓ navigate, space select, enter confirm)\x1b[0m`);
+    }
+
     console.log(`\n  ${question}\n`);
-    options.forEach((opt, i) => {
-      console.log(`    ${i + 1}) ${opt.label}`);
-    });
-    console.log();
-    rl.question("  Enter numbers separated by commas (e.g. 1,2,3): ", (answer) => {
-      const indices = answer
-        .split(",")
-        .map((s) => parseInt(s.trim(), 10) - 1)
-        .filter((i) => i >= 0 && i < options.length);
-      resolve(indices.map((i) => options[i].value));
-    });
+    render();
+
+    const { stdin } = process;
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+
+    function onData(key) {
+      // Ctrl+C
+      if (key[0] === 3) {
+        stdin.setRawMode(wasRaw);
+        stdin.removeListener("data", onData);
+        process.stdout.write("\n");
+        process.exit(0);
+      }
+
+      // Enter
+      if (key[0] === 13) {
+        stdin.setRawMode(wasRaw);
+        stdin.removeListener("data", onData);
+        process.stdout.write("\n");
+        resolve(
+          options
+            .filter((_, i) => selected.has(i))
+            .map((o) => o.value)
+        );
+        return;
+      }
+
+      // Space – toggle
+      if (key[0] === 32) {
+        if (selected.has(cursor)) selected.delete(cursor);
+        else selected.add(cursor);
+        render();
+        return;
+      }
+
+      // Arrow keys (escape sequences: 27, 91, 65/66)
+      if (key[0] === 27 && key[1] === 91) {
+        if (key[2] === 65) {
+          // Up
+          cursor = (cursor - 1 + options.length) % options.length;
+          render();
+        } else if (key[2] === 66) {
+          // Down
+          cursor = (cursor + 1) % options.length;
+          render();
+        }
+      }
+    }
+
+    stdin.on("data", onData);
   });
 }
 
 function askSelect(rl, question, options) {
+  // Non-TTY fallback: numbered list
+  if (!process.stdin.isTTY) {
+    return new Promise((resolve) => {
+      console.log(`\n  ${question}\n`);
+      options.forEach((opt, i) => {
+        console.log(`    ${i + 1}) ${opt.label}`);
+      });
+      console.log();
+      rl.question("  Enter number: ", (answer) => {
+        const idx = parseInt(answer.trim(), 10) - 1;
+        if (idx >= 0 && idx < options.length) resolve(options[idx].value);
+        else resolve(options[0].value);
+      });
+    });
+  }
+
   return new Promise((resolve) => {
+    let cursor = 0;
+
+    function render() {
+      if (render._rendered) {
+        process.stdout.write(`\x1b[${options.length + 1}A`);
+      }
+      render._rendered = true;
+
+      for (let i = 0; i < options.length; i++) {
+        const dot = i === cursor ? "\x1b[36m●\x1b[0m" : "○";
+        const label = i === cursor ? `\x1b[36m${options[i].label}\x1b[0m` : options[i].label;
+        const pointer = i === cursor ? "\x1b[36m❯\x1b[0m" : " ";
+        process.stdout.write(`\x1b[2K    ${pointer} ${dot} ${label}\n`);
+      }
+      process.stdout.write(`\x1b[2K  \x1b[2m(↑/↓ navigate, enter confirm)\x1b[0m`);
+    }
+
     console.log(`\n  ${question}\n`);
-    options.forEach((opt, i) => {
-      console.log(`    ${i + 1}) ${opt.label}`);
-    });
-    console.log();
-    rl.question("  Enter number: ", (answer) => {
-      const idx = parseInt(answer.trim(), 10) - 1;
-      if (idx >= 0 && idx < options.length) resolve(options[idx].value);
-      else resolve(options[0].value);
-    });
+    render();
+
+    const { stdin } = process;
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+
+    function onData(key) {
+      if (key[0] === 3) {
+        stdin.setRawMode(wasRaw);
+        stdin.removeListener("data", onData);
+        process.stdout.write("\n");
+        process.exit(0);
+      }
+
+      if (key[0] === 13) {
+        stdin.setRawMode(wasRaw);
+        stdin.removeListener("data", onData);
+        process.stdout.write("\n");
+        resolve(options[cursor].value);
+        return;
+      }
+
+      if (key[0] === 27 && key[1] === 91) {
+        if (key[2] === 65) {
+          cursor = (cursor - 1 + options.length) % options.length;
+          render();
+        } else if (key[2] === 66) {
+          cursor = (cursor + 1) % options.length;
+          render();
+        }
+      }
+    }
+
+    stdin.on("data", onData);
   });
 }
 
@@ -66,29 +204,23 @@ const ASSET_TYPES = {
   screenshots: {
     label: "App Store Screenshots",
     collection: (platforms) => {
-      const exportSizes = [];
+      const exportList = [];
 
       if (platforms.includes("ios")) {
-        exportSizes.push({
-          platform: "App Store",
-          sizes: [
-            { name: "iphone-6.9", label: 'iPhone 6.9"', width: 1320, height: 2868 },
-            { name: "iphone-6.7", label: 'iPhone 6.7"', width: 1290, height: 2796 },
-            { name: "iphone-6.5", label: 'iPhone 6.5"', width: 1284, height: 2778 },
-            { name: "ipad-13", label: 'iPad 13"', width: 2064, height: 2752 },
-          ],
-        });
+        exportList.push(
+          { name: "iphone-6.9", label: 'iPhone 6.9"', size: { width: 1320, height: 2868 } },
+          { name: "iphone-6.7", label: 'iPhone 6.7"', size: { width: 1290, height: 2796 } },
+          { name: "iphone-6.5", label: 'iPhone 6.5"', size: { width: 1284, height: 2778 } },
+          { name: "ipad-13", label: 'iPad 13"', size: { width: 2064, height: 2752 } },
+        );
       }
 
       if (platforms.includes("android")) {
-        exportSizes.push({
-          platform: "Google Play",
-          sizes: [
-            { name: "phone", label: "Phone", width: 1080, height: 1920 },
-            { name: "tablet-7", label: '7" Tablet', width: 1200, height: 1920 },
-            { name: "tablet-10", label: '10" Tablet', width: 1600, height: 2560 },
-          ],
-        });
+        exportList.push(
+          { name: "phone", label: "Phone", size: { width: 1080, height: 1920 } },
+          { name: "tablet-7", label: '7" Tablet', size: { width: 1200, height: 1920 } },
+          { name: "tablet-10", label: '10" Tablet', size: { width: 1600, height: 2560 } },
+        );
       }
 
       return {
@@ -100,7 +232,7 @@ const ASSET_TYPES = {
         templates: [
           { src: "src/screenshots/01-hero.html", name: "01-hero", label: "Hero" },
         ],
-        exportSizes,
+        export: exportList,
         customExport: { defaultWidth: 1320, defaultHeight: 2868 },
       };
     },
@@ -146,48 +278,39 @@ const ASSET_TYPES = {
   icon: {
     label: "App Icon",
     collection: (platforms) => {
-      const exportSizes = [];
+      const exportList = [];
 
       if (platforms.includes("ios")) {
-        exportSizes.push({
-          platform: "Apple",
-          sizes: [
-            { name: "1024", label: "1024px", width: 1024, height: 1024 },
-            { name: "180", label: "180px", width: 180, height: 180 },
-            { name: "120", label: "120px", width: 120, height: 120 },
-            { name: "87", label: "87px", width: 87, height: 87 },
-            { name: "80", label: "80px", width: 80, height: 80 },
-            { name: "60", label: "60px", width: 60, height: 60 },
-            { name: "40", label: "40px", width: 40, height: 40 },
-          ],
-        });
+        exportList.push(
+          { name: "1024", label: "1024px", size: { width: 1024, height: 1024 } },
+          { name: "180", label: "180px", size: { width: 180, height: 180 } },
+          { name: "120", label: "120px", size: { width: 120, height: 120 } },
+          { name: "87", label: "87px", size: { width: 87, height: 87 } },
+          { name: "80", label: "80px", size: { width: 80, height: 80 } },
+          { name: "60", label: "60px", size: { width: 60, height: 60 } },
+          { name: "40", label: "40px", size: { width: 40, height: 40 } },
+        );
       }
 
       if (platforms.includes("android")) {
-        exportSizes.push({
-          platform: "Android",
-          sizes: [
-            { name: "512", label: "Play Store", width: 512, height: 512 },
-            { name: "192", label: "xxxhdpi", width: 192, height: 192 },
-            { name: "144", label: "xxhdpi", width: 144, height: 144 },
-            { name: "96", label: "xhdpi", width: 96, height: 96 },
-            { name: "72", label: "hdpi", width: 72, height: 72 },
-            { name: "48", label: "mdpi", width: 48, height: 48 },
-          ],
-        });
+        exportList.push(
+          { name: "512", label: "Play Store", size: { width: 512, height: 512 } },
+          { name: "192", label: "xxxhdpi", size: { width: 192, height: 192 } },
+          { name: "144", label: "xxhdpi", size: { width: 144, height: 144 } },
+          { name: "96", label: "xhdpi", size: { width: 96, height: 96 } },
+          { name: "72", label: "hdpi", size: { width: 72, height: 72 } },
+          { name: "48", label: "mdpi", size: { width: 48, height: 48 } },
+        );
       }
 
       if (platforms.includes("web")) {
-        exportSizes.push({
-          platform: "Web",
-          sizes: [
-            { name: "512", label: "512px", width: 512, height: 512 },
-            { name: "192", label: "192px", width: 192, height: 192 },
-            { name: "180", label: "Apple Touch", width: 180, height: 180 },
-            { name: "32", label: "Favicon 32", width: 32, height: 32 },
-            { name: "16", label: "Favicon 16", width: 16, height: 16 },
-          ],
-        });
+        exportList.push(
+          { name: "512", label: "512px", size: { width: 512, height: 512 } },
+          { name: "192", label: "192px", size: { width: 192, height: 192 } },
+          { name: "180", label: "Apple Touch", size: { width: 180, height: 180 } },
+          { name: "32", label: "Favicon 32", size: { width: 32, height: 32 } },
+          { name: "16", label: "Favicon 16", size: { width: 16, height: 16 } },
+        );
       }
 
       return {
@@ -199,7 +322,7 @@ const ASSET_TYPES = {
         templates: [
           { src: "src/icon.html", name: "icon", label: "App Icon" },
         ],
-        exportSizes,
+        export: exportList,
       };
     },
     dirs: [],
@@ -245,16 +368,11 @@ const ASSET_TYPES = {
       templates: [
         { src: "src/logo.html", name: "logo", label: "Logo" },
       ],
-      exportSizes: [
-        {
-          platform: "General",
-          sizes: [
-            { name: "800", label: "800px", width: 800, height: 800 },
-            { name: "400", label: "400px", width: 400, height: 400 },
-            { name: "200", label: "200px", width: 200, height: 200 },
-            { name: "64", label: "64px", width: 64, height: 64 },
-          ],
-        },
+      export: [
+        { name: "800", label: "800px", size: { width: 800, height: 800 } },
+        { name: "400", label: "400px", size: { width: 400, height: 400 } },
+        { name: "200", label: "200px", size: { width: 200, height: 200 } },
+        { name: "64", label: "64px", size: { width: 64, height: 64 } },
       ],
     }),
     dirs: [],
@@ -311,15 +429,10 @@ const ASSET_TYPES = {
       templates: [
         { src: "src/wordmark.html", name: "wordmark", label: "Wordmark" },
       ],
-      exportSizes: [
-        {
-          platform: "General",
-          sizes: [
-            { name: "1200x400", label: "Large", width: 1200, height: 400 },
-            { name: "600x200", label: "Medium", width: 600, height: 200 },
-            { name: "300x100", label: "Small", width: 300, height: 100 },
-          ],
-        },
+      export: [
+        { name: "1200x400", label: "Large", size: { width: 1200, height: 400 } },
+        { name: "600x200", label: "Medium", size: { width: 600, height: 200 } },
+        { name: "300x100", label: "Small", size: { width: 300, height: 100 } },
       ],
     }),
     dirs: [],
@@ -368,13 +481,8 @@ const ASSET_TYPES = {
       templates: [
         { src: "src/feature-graphic.html", name: "feature-graphic", label: "Feature Graphic" },
       ],
-      exportSizes: [
-        {
-          platform: "Google Play",
-          sizes: [
-            { name: "1024x500", label: "Feature Graphic", width: 1024, height: 500 },
-          ],
-        },
+      export: [
+        { name: "1024x500", label: "Feature Graphic", size: { width: 1024, height: 500 } },
       ],
     }),
     dirs: [],
@@ -415,17 +523,17 @@ const ASSET_TYPES = {
 // ── Main interactive flow ───────────────────────────────────────────────────
 
 export async function scaffoldProject(dir) {
-  const manifestPath = join(dir, "manifest.json");
+  const configPath = join(dir, "assets.json");
 
-  if (existsSync(manifestPath)) {
-    console.error("Error: manifest.json already exists in this directory.");
+  if (existsSync(configPath)) {
+    console.error("Error: assets.json already exists in this directory.");
     process.exit(1);
   }
 
   const rl = createRL();
 
   console.log("\n  Welcome to open-assets!\n");
-  console.log("  This will set up your asset project with a manifest.json");
+  console.log("  This will set up your asset project with an assets.json");
   console.log("  and starter HTML templates.\n");
 
   // 1. Project name
@@ -529,11 +637,11 @@ export async function scaffoldProject(dir) {
     collections,
   };
 
-  writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
-  console.log("  Created manifest.json");
+  writeFileSync(configPath, JSON.stringify(manifest, null, 2) + "\n");
+  console.log("  Created assets.json");
 
   // Write .gitignore
-  writeFileSync(join(dir, ".gitignore"), "dist/\nexports/\nmanifest.lock\nnode_modules/\n");
+  writeFileSync(join(dir, ".gitignore"), "dist/\nexports/\nnode_modules/\n");
   console.log("  Created .gitignore");
 
   console.log();

package/lib/list.mjs

@@ -0,0 +1,64 @@
+import { flatSizes, flatOutputs } from "./manifest.mjs";
+
+/**
+ * Filter collections by tag. Returns filtered array.
+ * @param {object} manifest
+ * @param {{ tag?: string }} [options]
+ * @returns {{ collections: object[], error?: string }}
+ */
+export function listCollections(manifest, options = {}) {
+  let cols = manifest.collections || [];
+  if (options.tag) {
+    cols = cols.filter((c) => (c.tags || []).includes(options.tag));
+    if (cols.length === 0) {
+      return { collections: [], error: `No collections found with tag "${options.tag}"` };
+    }
+  }
+  return { collections: cols };
+}
+
+/**
+ * Format a manifest's collections into a human-readable string.
+ * @param {object} manifest
+ * @param {object[]} collections
+ * @returns {string}
+ */
+export function formatCollectionList(manifest, collections) {
+  const lines = [];
+
+  if (manifest.tags && manifest.tags.length > 0) {
+    lines.push(`Tags: ${manifest.tags.map((t) => t.id).join(", ")}`);
+    lines.push("");
+  }
+
+  lines.push(manifest.name);
+  lines.push("");
+
+  for (const col of collections) {
+    const templateCount = col.templates.length;
+    const sizeCount = flatSizes(col).length;
+    const tagStr =
+      col.tags && col.tags.length > 0 ? ` [${col.tags.join(", ")}]` : "";
+    lines.push(
+      `${col.label} (${col.id})${tagStr} \u2014 ${templateCount} template(s), ${sizeCount} size(s)`
+    );
+
+    for (const template of col.templates) {
+      lines.push(`  \u2022 ${template.label || template.name} \u2192 ${template.src}`);
+    }
+
+    for (const entry of flatSizes(col)) {
+      lines.push(`  \u21b3 ${entry.label} (${entry.size.width}\u00d7${entry.size.height})`);
+    }
+
+    for (const output of flatOutputs(col)) {
+      if (output.type === "xcode") {
+        lines.push(`  \u21b3 Xcode: ${output.path}`);
+      } else if (output.type === "copy-source") {
+        lines.push(`  \u21b3 Copy source: ${output.format}`);
+      }
+    }
+  }
+
+  return lines.join("\n");
+}

package/lib/lockfile.mjs

@@ -1,8 +1,8 @@
 import { readFileSync, writeFileSync, existsSync } from "fs";
 import { createHash } from "crypto";
-import { resolve, join } from "path";
+import { resolve, join, dirname } from "path";
 
-const LOCK_FILENAME = "manifest.lock";
+const LOCK_FILENAME = "assets.lock";
 
 /**
  * Read the lockfile from disk, or return an empty structure.
@@ -27,13 +27,64 @@ export function writeLockfile(projectDir, lockData) {
   writeFileSync(lockPath, JSON.stringify(lockData, null, 2) + "\n");
 }
 
+/**
+ * Extract local file dependencies referenced by an HTML file.
+ * Parses src="...", href="...", and url(...) references, filtering out
+ * remote URLs and returning only paths that exist on disk.
+ * Returns a sorted, deduplicated array of absolute paths.
+ */
+export function extractLocalDeps(filePath) {
+  if (!existsSync(filePath)) return [];
+  const content = readFileSync(filePath, "utf-8");
+  const dir = dirname(filePath);
+
+  const refs = new Set();
+  const srcHrefPattern = /(?:src|href)=["']([^"']+)["']/gi;
+  const cssUrlPattern = /url\(["']?([^"')]+)["']?\)/gi;
+
+  for (const pattern of [srcHrefPattern, cssUrlPattern]) {
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+      refs.add(match[1]);
+    }
+  }
+
+  const localPaths = [];
+  for (const ref of refs) {
+    if (/^(https?:\/\/|data:|\/\/|#)/.test(ref)) continue;
+    if (!ref) continue;
+    const abs = resolve(dir, ref);
+    if (existsSync(abs)) {
+      localPaths.push(abs);
+    }
+  }
+
+  return [...new Set(localPaths)].sort();
+}
+
 /**
  * Compute SHA256 checksum of a file's contents.
+ * For .html files, includes the content of all local dependencies
+ * (images, SVGs, etc.) referenced via src/href/url() attributes.
  * Returns "sha256:<hex>" or null if file doesn't exist.
  */
 export function computeChecksum(filePath) {
   if (!existsSync(filePath)) return null;
   const content = readFileSync(filePath);
+
+  if (filePath.endsWith(".html")) {
+    const deps = extractLocalDeps(filePath);
+    if (deps.length > 0) {
+      const hash = createHash("sha256");
+      hash.update(content);
+      for (const dep of deps) {
+        hash.update("\0");
+        hash.update(readFileSync(dep));
+      }
+      return `sha256:${hash.digest("hex")}`;
+    }
+  }
+
   const hash = createHash("sha256").update(content).digest("hex");
   return `sha256:${hash}`;
 }