fresnel-icon 0.1.0 → 0.1.1

package/dist/cli.js

@@ -23,6 +23,8 @@ function appearanceKeys(a) {
     case "tinted-light":
     case "tinted-dark":
       return ["tinted"];
+    case "default":
+      return ["light"];
     default:
       return [];
   }
@@ -275,9 +277,10 @@ var BlendModeSchema = z.enum(BLEND_MODES);
 var PositionSchema = z.object({ scale: z.number().positive(), "translation-in-points": z.tuple([z.number(), z.number()]) }).loose();
 var ShadowSchema = z.object({ kind: z.enum(["none", "neutral", "layer-color"]), opacity: z.number().min(0).max(1) }).loose();
 var TranslucencySchema = z.object({ enabled: z.boolean(), value: z.number().min(0).max(1) }).loose();
-var RefractivitySchema = z.object({ enabled: z.boolean(), strength: z.number().min(0).max(1), depth: z.number().min(0).max(1) }).loose();
+var RefractivitySchema = z.object({ enabled: z.boolean(), strength: z.number().min(-1).max(1), depth: z.number().min(-1).max(1) }).loose();
 var SupportedPlatformsSchema = z.object({
-  squares: z.union([z.literal("shared"), z.array(z.string())]).optional(),
+  // "shared", ["iOS"] or {"platforms": ["iOS"]} (both list forms appear in community tools)
+  squares: z.union([z.literal("shared"), z.array(z.string()), z.object({ platforms: z.array(z.string()) }).loose()]).optional(),
   circles: z.array(z.string()).optional()
 }).loose();
 var unit = z.number().min(0).max(1);
@@ -421,14 +424,29 @@ var DROP_ELEMENTS = /* @__PURE__ */ new Set([
   "animatecolor",
   "discard",
   "handler",
-  "listener",
-  "a"
+  "listener"
 ]);
+var UNWRAP_ELEMENTS = /* @__PURE__ */ new Set(["a"]);
+function decodeForCheck(v) {
+  return v.replace(/&#x([0-9a-f]+);?/gi, (_m, h) => String.fromCodePoint(parseInt(h, 16) % 1114112)).replace(/&#(\d+);?/g, (_m, d) => String.fromCodePoint(Number(d) % 1114112)).replace(/\\([0-9a-f]{1,6})\s?/gi, (_m, h) => String.fromCodePoint(parseInt(h, 16) % 1114112)).replace(/\\(.)/g, "$1").replace(/\s+/g, "").toLowerCase();
+}
+function expandInternalEntities(svg) {
+  const doctype = /<!DOCTYPE[^\[>]*\[([\s\S]*?)\]\s*>/i.exec(svg);
+  if (!doctype) return svg;
+  const ents = /* @__PURE__ */ new Map();
+  for (const m of doctype[1].matchAll(/<!ENTITY\s+([\w.-]+)\s+(?:"([^"]*)"|'([^']*)')\s*>/g)) {
+    const v = m[2] ?? m[3] ?? "";
+    if (v.length <= 2048 && !/[&<]/.test(v)) ents.set(m[1], v);
+  }
+  const body = svg.slice(0, doctype.index) + svg.slice(doctype.index + doctype[0].length);
+  return body.replace(/&([\w.-]+);/g, (m, name) => ents.get(name) ?? m);
+}
 function safeUrlRef(v) {
   const t = v.trim().replace(/^['"]|['"]$/g, "").trim();
   return t.startsWith("#") || /^data:image\/(png|jpe?g|gif|webp);base64,[a-z0-9+/=\s]*$/i.test(t);
 }
-function cleanCss(css) {
+function cleanCss(css0) {
+  const css = css0.replace(/\\([0-9a-f]{1,6})\s?/gi, (_m, h) => String.fromCodePoint(parseInt(h, 16) % 1114112)).replace(/\\(.)/g, "$1");
   return css.replace(/@import\b[^;]*;?/gi, "").replace(/url\s*\(([^)]*)\)/gi, (m, inner) => safeUrlRef(inner) ? m : "none").replace(/expression\s*\(/gi, "(").replace(/javascript\s*:/gi, "");
 }
 function cleanAttrs(raw) {
@@ -446,9 +464,13 @@ function cleanAttrs(raw) {
     if (lname === "href" || lname.endsWith(":href") || lname === "src") {
       if (!safeUrlRef(value)) continue;
     }
-    if (/javascript\s*:|vbscript\s*:/i.test(value)) continue;
+    const plain = decodeForCheck(value);
+    if (/javascript:|vbscript:/.test(plain) || lname === "xml:base") continue;
     let v = value;
-    if (lname === "style" || /url\s*\(/i.test(v)) v = cleanCss(v);
+    if (lname === "style" || /url\(/.test(plain)) {
+      v = cleanCss(v);
+      if (/url\((?!['"]?#)/.test(decodeForCheck(v).replace(/url\(['"]?data:image\/(png|jpe?g|gif|webp);base64,/g, "url(#"))) continue;
+    }
     out.push(`${name}="${v.replace(/"/g, "&quot;")}"`);
   }
   return out.length ? " " + out.join(" ") : "";
@@ -518,6 +540,7 @@ function sanitizeOnce(svg) {
     i = j + 1;
     const [, close, tag, attrs, selfClose] = m;
     const local = tag.toLowerCase().replace(/^.*:/, "");
+    if (UNWRAP_ELEMENTS.has(local) && !skip.length) continue;
     if (close) {
       if (skip.length) {
         if (skip[skip.length - 1] === local) skip.pop();
@@ -542,7 +565,7 @@ function sanitizeOnce(svg) {
   return out;
 }
 function sanitizeSvg(svg) {
-  let s = svg;
+  let s = expandInternalEntities(svg);
   for (let n2 = 0; n2 < 5; n2++) {
     const next = sanitizeOnce(s);
     if (next === s) break;
@@ -561,8 +584,9 @@ function svgFacts(svg) {
 function makeAsset(name, bytes) {
   const kind = sniffKind(name, bytes);
   if (kind === "svg") {
-    const text2 = sanitizeSvg(td.decode(bytes));
-    return { name, kind, bytes: te.encode(text2), ...svgSize(text2) };
+    const original = td.decode(bytes);
+    const text2 = sanitizeSvg(original);
+    return { name, kind, bytes, ...text2 !== original ? { display: te.encode(text2) } : {}, ...svgSize(text2) };
   }
   if (kind === "png") return { name, kind, bytes, ...pngSize(bytes) };
   if (kind === "jpg") return { name, kind, bytes, ...jpgSize(bytes) };
@@ -716,7 +740,28 @@ function encodePngRgb(width, height, rgba, bg = [0, 0, 0]) {
 }
 function flattenPng(png, bg = [0, 0, 0]) {
   const bmp = decodePng(png);
-  return bmp ? encodePngRgb(bmp.width, bmp.height, bmp.data, bg) : png;
+  if (!bmp) throw new Error("Could not flatten the PNG (unsupported encoding)");
+  return tagSrgb(encodePngRgb(bmp.width, bmp.height, bmp.data, bg));
+}
+function tagSrgb(png) {
+  const sig = [137, 80, 78, 71, 13, 10, 26, 10];
+  if (png.length < 33 || sig.some((b, i) => png[i] !== b)) return png;
+  let o = 8;
+  const dv = new DataView(png.buffer, png.byteOffset, png.byteLength);
+  while (o + 8 <= png.length) {
+    const len = dv.getUint32(o);
+    const type = String.fromCharCode(png[o + 4], png[o + 5], png[o + 6], png[o + 7]);
+    if (type === "sRGB" || type === "iCCP") return png;
+    if (type === "IDAT") break;
+    o += 12 + len;
+  }
+  const ihdrEnd = 8 + 12 + 13;
+  const srgb = chunk("sRGB", new Uint8Array([0]));
+  const out = new Uint8Array(png.length + srgb.length);
+  out.set(png.subarray(0, ihdrEnd), 0);
+  out.set(srgb, ihdrEnd);
+  out.set(png.subarray(ihdrEnd), ihdrEnd + srgb.length);
+  return out;
 }
 
 // ../core/src/bundle.ts
@@ -753,6 +798,10 @@ function serializeIconJson(doc) {
   const json = writeProps(doc.props, doc.order, { groups });
   return JSON.stringify(json, null, 2).replace(/^(\s*"[^"]*"):/gm, "$1 :") + "\n";
 }
+function isSafeBundlePath(rel) {
+  if (!rel || rel.length > 512 || rel.startsWith("/") || /[\\\u0000-\u001f:]/.test(rel)) return false;
+  return rel.split("/").every((p) => p !== "" && p !== "." && p !== ".." && !p.startsWith(".") && p.length <= 255);
+}
 function readBundle(files) {
   const jsonKey = Object.keys(files).find((k) => k === "icon.json" || k.endsWith("/icon.json"));
   if (!jsonKey) throw new IconFormatError("icon.json not found in the bundle");
@@ -763,10 +812,11 @@ function readBundle(files) {
   for (const [k, v] of Object.entries(files)) {
     if (!k.startsWith(prefix) || k === jsonKey || k.endsWith("/")) continue;
     const rel = k.slice(prefix.length);
+    if (!isSafeBundlePath(rel)) continue;
     if (rel.startsWith("Assets/") && rel.split("/").length === 2) {
       const name = rel.slice("Assets/".length);
-      if (name && !name.startsWith(".")) assets[name] = makeAsset(name, v);
-    } else if (!rel.split("/").some((p) => p === "__MACOSX" || p === ".DS_Store")) {
+      if (name) assets[name] = makeAsset(name, v);
+    } else if (!rel.split("/").some((p) => p === "__MACOSX")) {
       extra[rel] = v;
     }
   }
@@ -892,12 +942,7 @@ function uniqueName(existing, wanted0) {
   while (existing.includes(`${wanted} ${i}`)) i++;
   return `${wanted} ${i}`;
 }
-var MAX_GROUPS = 4;
-function assertGroupRoom(doc) {
-  if (doc.groups.length >= MAX_GROUPS) throw new OpError(`An icon can have up to ${MAX_GROUPS} groups. Add the layer to an existing group instead.`);
-}
 function addGroup(doc, opts = {}) {
-  assertGroupRoom(doc);
   const name = uniqueName(doc.groups.map(nameOf), opts.name ?? "Group");
   const g = { id: newId("g"), props: {}, order: [], layers: [] };
   setPropValue(g.props, "name", name);
@@ -935,7 +980,8 @@ function addLayer(doc, groupId, asset, opts = {}) {
   const l = { id: newId("l"), props: {}, order: [] };
   setPropValue(l.props, "image-name", imageName);
   setPropValue(l.props, "name", uniqueName(g.layers.map(nameOf), base));
-  l.order = ["image-name", "name"];
+  setPropValue(l.props, "glass", true);
+  l.order = ["glass", "image-name", "name"];
   for (const [k, v] of Object.entries(opts.props ?? {})) setProp(doc, { kind: "layer", id: l.id }, k, v, void 0, l);
   g.layers.splice(clampIndex(opts.index ?? 0, g.layers.length), 0, l);
   return l;
@@ -1022,9 +1068,20 @@ var RULES = {
   "V-06": { severity: "info", title: "Very thin strokes may disappear at small sizes" },
   "V-07": { severity: "info", title: "SVG contains text or custom effects" },
   "V-08": { severity: "warning", title: "Appearance is not customized" },
-  "V-09": { severity: "error", title: "More than 4 groups" },
+  "V-09": { severity: "warning", title: "More than 4 groups" },
   "V-10": { severity: "error", title: "Unsupported image format" }
 };
+function fillHasAlpha(fill) {
+  if (!fill || typeof fill !== "object") return false;
+  const f = fill;
+  const colors = [f.solid, f["automatic-gradient"], ...Array.isArray(f["linear-gradient"]) ? f["linear-gradient"] : []];
+  return colors.some((c) => {
+    const p = typeof c === "string" ? parseColor(c) : null;
+    if (!p) return false;
+    const a = p.space === "gray" || p.space === "extended-gray" ? p.c[1] : p.c[3];
+    return a !== void 0 && a < 1;
+  });
+}
 function validate(doc) {
   const out = [];
   const push = (id, message, target, ref) => out.push({ id, severity: RULES[id].severity, message, target, ...ref ? { ref } : {} });
@@ -1042,8 +1099,9 @@ function validate(doc) {
   checkProps("document", doc.props, "document", { kind: "document" });
   const fill = resolveProp(doc.props.fill, { appearance: "default" }, "automatic");
   if (fill === "none") push("V-05", 'The background fill is "none". Icons need an opaque, full-bleed background.', "document", { kind: "document" });
+  else if (fillHasAlpha(fill)) push("V-05", "The background color is partly transparent. App Store icons are flattened onto black.", "document", { kind: "document" });
   const visibleGroups = doc.groups.filter((g) => resolveProp(g.props.hidden, { appearance: "default" }, false) !== true).length;
-  if (visibleGroups > 4) push("V-09", `This icon has ${visibleGroups} visible groups. Icon Composer supports up to 4, and actool rejects icons with more.`, "document");
+  if (visibleGroups > 4) push("V-09", `This icon has ${visibleGroups} visible groups. Apple recommends at most 4, and Xcode's actool may reject icons with more.`, "document");
   let anyDark = false;
   let anyTinted = false;
   const scan = (props) => {
@@ -1147,7 +1205,27 @@ function summarizeIssues(issues) {
 
 // ../core/src/export.ts
 import { strToU8 as strToU82 } from "fflate";
+function targetsWatch(doc) {
+  const sp = baseValue(doc.props["supported-platforms"]);
+  return Array.isArray(sp?.circles) && sp.circles.includes("watchOS");
+}
+function unrenderableLayers(doc) {
+  const out = [];
+  for (const g of doc.groups) {
+    if (baseValue(g.props.hidden) === true) continue;
+    for (const l of g.layers) {
+      if (baseValue(l.props.hidden) === true) continue;
+      const name = baseValue(l.props["image-name"]);
+      const a = typeof name === "string" ? doc.assets[name] : void 0;
+      if (!a || a.kind === "pdf" || a.kind === "other") out.push(`${baseValue(g.props.name) ?? "Group"}/${baseValue(l.props.name) ?? name ?? "Layer"}`);
+    }
+  }
+  return out;
+}
+var MAC_INSET = 100;
 var ICNS_TYPES = [
+  ["icp4", 16],
+  ["icp5", 32],
   ["ic11", 32],
   // 16@2x
   ["ic12", 64],
@@ -1186,15 +1264,15 @@ function encodeIcns(pngBySize) {
 }
 async function buildIcns(rasterize, appearance = "default") {
   const pngs = {};
-  for (const s of ICNS_SIZES) pngs[s] = await rasterize(appearance, s);
+  for (const s of ICNS_SIZES) pngs[s] = tagSrgb(await rasterize(appearance, s, { mask: "squircle", idiom: "macOS", inset: MAC_INSET }));
   return encodeIcns(pngs);
 }
-async function buildAppIconSet(rasterize) {
+async function buildAppIconSet(rasterize, opts = {}) {
   const files = {};
   const images = [];
-  files["AppIcon.png"] = flattenPng(await rasterize("default", 1024, { mask: "none" }));
-  files["AppIcon-Dark.png"] = flattenPng(await rasterize("dark", 1024, { mask: "none" }));
-  files["AppIcon-Tinted.png"] = flattenPng(await rasterize("tinted-dark", 1024, { mask: "none", tint: "#FFFFFF" }));
+  files["AppIcon.png"] = flattenPng(await rasterize("default", 1024, { mask: "none", idiom: "iOS" }));
+  files["AppIcon-Dark.png"] = tagSrgb(await rasterize("dark", 1024, { mask: "none", idiom: "iOS", background: false }));
+  files["AppIcon-Tinted.png"] = flattenPng(await rasterize("tinted-dark", 1024, { mask: "none", idiom: "iOS", tint: "#FFFFFF" }));
   images.push({ filename: "AppIcon.png", idiom: "universal", platform: "ios", size: "1024x1024" });
   images.push({
     appearances: [{ appearance: "luminosity", value: "dark" }],
@@ -1214,16 +1292,20 @@ async function buildAppIconSet(rasterize) {
     for (const scale of [1, 2]) {
       const px = pt * scale;
       const name = `mac-${pt}@${scale}x.png`;
-      files[name] = await rasterize("default", px, { mask: "squircle" });
+      files[name] = tagSrgb(await rasterize("default", px, { mask: "squircle", idiom: "macOS", inset: MAC_INSET }));
       images.push({ filename: name, idiom: "mac", scale: `${scale}x`, size: `${pt}x${pt}` });
     }
   }
+  if (opts.watch) {
+    files["AppIcon-Watch.png"] = flattenPng(await rasterize("default", 1024, { mask: "none", idiom: "watchOS" }));
+    images.push({ filename: "AppIcon-Watch.png", idiom: "universal", platform: "watchos", size: "1024x1024" });
+  }
   files["Contents.json"] = strToU82(JSON.stringify({ images, info: { author: "fresnel", version: 1 } }, null, 2) + "\n");
   return files;
 }
 async function buildPngSet(rasterize, appearances, sizes) {
   const files = {};
-  for (const a of appearances) for (const s of sizes) files[`${a}/icon-${s}.png`] = await rasterize(a, s, { mask: "squircle" });
+  for (const a of appearances) for (const s of sizes) files[`${a}/icon-${s}.png`] = tagSrgb(await rasterize(a, s, { mask: "squircle" }));
   return files;
 }
 
@@ -1281,16 +1363,19 @@ async function saveIcon(path, doc) {
   const keep = new Set(Object.keys(doc.assets));
   await assertNoSymlink(root, assetsDir);
   for (const e of await readdir(assetsDir, { withFileTypes: true })) {
-    if (e.isFile() && !keep.has(e.name) && e.name !== ".DS_Store") await rm(join(assetsDir, e.name));
+    if (e.isFile() && !keep.has(e.name) && !e.name.startsWith(".")) await rm(join(assetsDir, e.name));
   }
 }
 async function writeFiles(dir, files) {
   const written = [];
+  const root = resolve(dir);
   for (const [rel, bytes] of Object.entries(files)) {
-    const target = resolve(dir, ...rel.split("/"));
-    const r = relative(resolve(dir), target);
+    const target = resolve(root, ...rel.split("/"));
+    const r = relative(root, target);
     if (r.startsWith("..") || isAbsolute(r)) throw new Error(`Refusing to write outside ${dir}: ${rel}`);
+    await assertNoSymlink(root, target);
     await mkdir(dirname(target), { recursive: true });
+    await assertNoSymlink(root, target);
     await writeFile(target, bytes);
     written.push(target);
   }
@@ -1314,12 +1399,25 @@ function squirclePath(size = CANVAS, exponent = 4.4, steps = 192) {
 var SQUIRCLE = squirclePath();
 var C = CANVAS;
 function maskPath(shape) {
-  if (shape === "circle") return `M${C / 2},0 A${C / 2},${C / 2} 0 1 1 ${C / 2},${C} A${C / 2},${C / 2} 0 1 1 ${C / 2},0Z`;
+  if (shape === "circle") {
+    const r = C / 2 + 32;
+    return `M${C / 2},${C / 2 - r} A${r},${r} 0 1 1 ${C / 2},${C / 2 + r} A${r},${r} 0 1 1 ${C / 2},${C / 2 - r}Z`;
+  }
   if (shape === "none") return `M0,0 H${C} V${C} H0Z`;
   return SQUIRCLE;
 }
 
 // ../render/src/compose.ts
+function rasterRenderOptions(ro) {
+  if (!ro) return {};
+  return {
+    ...ro.mask ? { mask: ro.mask, rim: ro.mask !== "none" } : {},
+    ...ro.tint ? { tint: ro.tint } : {},
+    ...ro.idiom ? { idiom: ro.idiom } : {},
+    ...ro.background === false ? { background: false } : {},
+    ...ro.inset ? { inset: ro.inset } : {}
+  };
+}
 var C2 = CANVAS;
 var H = C2 / 2;
 var b64Cache = /* @__PURE__ */ new WeakMap();
@@ -1417,7 +1515,8 @@ function renderSvg(doc, opts = {}) {
   let darken = 0;
   if (dark && !darkOverridden && bgFill !== "automatic" && bgFill !== "system-dark" && bgFill !== "none") darken = 0.62;
   let bgPaint;
-  const full = { x: 0, y: 0, w: C2, h: C2 };
+  const P = mask === "circle" ? 32 : 0;
+  const full = { x: -P, y: -P, w: C2 + 2 * P, h: C2 + 2 * P };
   const monoOverride = (isClear || isTinted) && !!fillProp?.specs?.some((s) => s.appearance === "tinted" || s.appearance === appearance);
   if (monoOverride) {
     bgPaint = paintFor(bgFill ?? "automatic", defs, full, dark);
@@ -1436,12 +1535,16 @@ function renderSvg(doc, opts = {}) {
     if (bgFill === void 0) bgFill = "automatic";
     bgPaint = paintFor(bgFill, defs, full, dark);
   }
+  if (opts.background === false) {
+    bgPaint = null;
+    darken = 0;
+  }
   const groups = FRONT_FIRST ? [...doc.groups].reverse() : [...doc.groups];
   let stackId = defs.id("s");
   const bgStackId = stackId;
   const contentIds = [];
   defs.add(
-    `<g id="${stackId}">${bgPaint ? `<rect width="${C2}" height="${C2}" fill="${bgPaint}"/>` : ""}` + (darken ? `<rect width="${C2}" height="${C2}" fill="#000" opacity="${darken}"/>` : "") + `</g>`
+    `<g id="${stackId}">${bgPaint ? `<rect x="${-P}" y="${-P}" width="${C2 + 2 * P}" height="${C2 + 2 * P}" fill="${bgPaint}"/>` : ""}` + (darken ? `<rect x="${-P}" y="${-P}" width="${C2 + 2 * P}" height="${C2 + 2 * P}" fill="#000" opacity="${darken}"/>` : "") + `</g>`
   );
   let plainId = bgStackId;
   for (const g of groups) {
@@ -1481,7 +1584,7 @@ function renderSvg(doc, opts = {}) {
         iid = defs.id("img");
         imgId.set(p.asset.name, iid);
         defs.add(
-          `<image id="${iid}" width="${n(p.asset.width)}" height="${n(p.asset.height)}" preserveAspectRatio="none" href="data:${mimeOf(p.asset)};base64,${b64(p.asset.bytes)}"/>`
+          `<image id="${iid}" width="${n(p.asset.width)}" height="${n(p.asset.height)}" preserveAspectRatio="none" href="data:${mimeOf(p.asset)};base64,${b64(p.asset.display ?? p.asset.bytes)}"/>`
         );
       }
       const s = p.w / p.asset.width;
@@ -1538,9 +1641,21 @@ function renderSvg(doc, opts = {}) {
         `<g mask="url(#${mid})"><use href="#${backdropId}" filter="url(#${fid})" transform="translate(${H} ${H}) scale(${n(zoom)}) translate(${-H} ${-H})"/></g>`
       );
     }
-    const gOpacity = resolveProp(g.props.opacity, ctx, 1) * (translucent ? 1 - tr.value * 0.55 : 1) * (refracts && !translucent ? 1 - (refr.strength ?? 0) * 0.3 : 1);
+    const gOpacity = resolveProp(g.props.opacity, ctx, 1) * (refracts && !translucent ? 1 - (refr.strength ?? 0) * 0.3 : 1);
+    let fadeMask = "";
+    if (translucent) {
+      const v = Math.min(1, Math.max(0, tr.value));
+      const gid = defs.id("tg");
+      const mid = defs.id("tm");
+      defs.add(
+        `<linearGradient id="${gid}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="${n(1 - v * 0.2)}"/><stop offset="1" stop-color="#fff" stop-opacity="${n(1 - v * 0.85)}"/></linearGradient><mask id="${mid}" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="1" height="1"><rect width="1" height="1" fill="url(#${gid})"/></mask>`
+      );
+      fadeMask = ` mask="url(#${mid})"`;
+    }
     const gBlend = cssBlend(resolveProp(g.props["blend-mode"], ctx, "normal"));
-    out.push(`<use href="#${contentId}"${gOpacity < 1 ? ` opacity="${n(gOpacity)}"` : ""}${gBlend ? ` style="mix-blend-mode:${gBlend}"` : ""}/>`);
+    out.push(
+      `<g${fadeMask}${gOpacity < 1 ? ` opacity="${n(gOpacity)}"` : ""}${gBlend ? ` style="mix-blend-mode:${gBlend}"` : ""}><use href="#${contentId}"/></g>`
+    );
     const specular = resolveProp(g.props.specular, ctx, true);
     if (effects && specular && glassEls.length) {
       const k = 7;
@@ -1587,7 +1702,14 @@ function renderSvg(doc, opts = {}) {
   const clipId = defs.id("clip");
   const shape = maskPath(mask);
   defs.add(`<clipPath id="${clipId}"><path d="${shape}"/></clipPath>`);
-  body.push(`<g clip-path="url(#${clipId})">${top}</g>`);
+  const M = Math.max(0, opts.inset ?? 0);
+  if (M > 0) {
+    const sid = defs.id("ish");
+    defs.add(
+      `<filter id="${sid}" x="-20%" y="-20%" width="140%" height="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="${n(C2 * 0.012)}"/><feOffset dy="${n(C2 * 0.012)}" result="b"/><feFlood flood-color="#000" flood-opacity="0.3"/><feComposite in2="b" operator="in" result="s"/><feMerge><feMergeNode in="s"/><feMergeNode in="SourceGraphic"/></feMerge></filter>`
+    );
+    body.push(`<g filter="url(#${sid})"><g clip-path="url(#${clipId})">${top}</g></g>`);
+  } else body.push(`<g clip-path="url(#${clipId})">${top}</g>`);
   if (effects && opts.rim !== false && mask !== "none") {
     const rid = defs.id("rim");
     const lx = H + toLight.x * H;
@@ -1597,7 +1719,7 @@ function renderSvg(doc, opts = {}) {
     );
     body.push(`<g clip-path="url(#${clipId})"><path d="${shape}" fill="none" stroke="url(#${rid})" stroke-width="10"/></g>`);
   }
-  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${size}" height="${size}" viewBox="0 0 ${C2} ${C2}"><title>${esc(appearance)}</title><defs>${defs.toString()}</defs>${body.join("")}</svg>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${size}" height="${size}" viewBox="${-(P + M)} ${-(P + M)} ${C2 + 2 * (P + M)} ${C2 + 2 * (P + M)}"><title>${esc(appearance)}</title><defs>${defs.toString()}</defs>${body.join("")}</svg>`;
 }
 function cssBlend(mode) {
   if (!mode || mode === "normal") return null;
@@ -1656,7 +1778,7 @@ async function renderSheetPng(doc, opts = {}) {
   return svgToPng(renderSheetSvg(doc, opts), cell * 3);
 }
 function nodeRasterizer(doc, opts = {}) {
-  return (appearance, size, ro) => renderPng(doc, { ...opts, appearance, size, ...ro?.mask ? { mask: ro.mask, rim: ro.mask !== "none" } : {}, ...ro?.tint ? { tint: ro.tint } : {} });
+  return (appearance, size, ro) => renderPng(doc, { ...opts, appearance, size, ...rasterRenderOptions(ro) });
 }
 
 // ../mcp/src/tools.ts
@@ -1675,7 +1797,7 @@ https://developer.apple.com/design/human-interface-guidelines/app-icons
 - An icon is a background plus one or more foreground layers. The system adds Liquid Glass effects (specular highlights, refraction, translucency) and adapts them to size and system version.
 - Canvas: 1024\xD71024 for iOS/iPadOS/macOS (masked to a rounded rectangle) and 1088\xD71088 for watchOS (masked to a circle).
 - Appearances: Default, Dark, Clear light, Clear dark, Tinted light, Tinted dark. If you don't provide a variant, the system generates one.
-- Groups: Liquid Glass effects (mode, specular Off/Automatic/Inside/Outside, blur, refraction, translucency, shadow) are configured per group. Use at most 4 groups \u2014 actool rejects icons with more.
+- Groups: Liquid Glass effects (mode, specular Off/Automatic/Inside/Outside, blur, refraction, translucency, shadow) are configured per group. Use at most 4 groups (Apple's recommendation; some actool versions reject more).
 - In Icon Composer the appearances are Default, Dark and Mono (Mono covers clear and tinted); icon.json stores Mono overrides under the "tinted" key.
 
 ## Layers
@@ -1735,7 +1857,7 @@ ${table("Layer", LAYER_ATTRS)}
 `;
 
 // ../mcp/src/tools.ts
-var VERSION = "0.1.0";
+var VERSION = "0.1.1";
 var appearanceEnum = z2.enum(APPEARANCES);
 var overrideEnum = z2.enum(["dark", "tinted"]);
 var maskEnum = z2.enum(["squircle", "circle", "none"]);
@@ -2074,10 +2196,14 @@ function createServer(ws) {
       const doc = await ws.read(full);
       const name = basename(full).replace(/\.icon(\.zip)?$/, "");
       const raster = nodeRasterizer(doc);
+      const missing = unrenderableLayers(doc);
+      if (missing.length && formats.some((f) => f !== "icon"))
+        throw new Error(`These visible layers can't be rendered and would be missing from the images: ${missing.join(", ")}. Fix them first (icon_validate).`);
       const written = [];
       if (formats.includes("icon")) {
-        const files = writeBundle(doc, doc.extra);
-        written.push(...await writeFiles(join2(outDir, `${name}.icon`), files));
+        const dest = join2(outDir, `${name}.icon`);
+        await saveIcon(dest, doc);
+        written.push(join2(dest, "icon.json"), ...Object.keys(doc.assets).map((a) => join2(dest, "Assets", a)));
       }
       if (formats.includes("icns")) {
         const p = join2(outDir, `${name}.icns`);
@@ -2085,7 +2211,7 @@ function createServer(ws) {
         await writeFile2(p, await buildIcns(raster));
         written.push(p);
       }
-      if (formats.includes("appiconset")) written.push(...await writeFiles(join2(outDir, "AppIcon.appiconset"), await buildAppIconSet(raster)));
+      if (formats.includes("appiconset")) written.push(...await writeFiles(join2(outDir, "AppIcon.appiconset"), await buildAppIconSet(raster, { watch: targetsWatch(doc) })));
       if (formats.includes("png"))
         written.push(
           ...await writeFiles(
@@ -2245,7 +2371,7 @@ Usage
                                                  Render an approximate preview PNG
   fresnel export <Name.icon> -o <dir> [--formats icon,icns,appiconset,png]
                  [--sizes 1024,512,...] [--appearances default,dark,...]
-                 [--tint #RRGGBB]
+                 [--tint #RRGGBB] [--force]
   fresnel mcp [--root <dir>]...                  Start the MCP server on stdio
 
 Render options: --mask squircle|circle|none, --tint #RRGGBB (tinted appearances)
@@ -2327,6 +2453,7 @@ async function main() {
       tint: { type: "string" },
       mask: { type: "string" },
       root: { type: "string", short: "r", multiple: true },
+      force: { type: "boolean" },
       help: { type: "boolean", short: "h" }
     }
   });
@@ -2381,14 +2508,19 @@ async function main() {
       const formats = (values.formats ?? "icon,icns,appiconset,png").split(",").map((s) => s.trim());
       const raster = nodeRasterizer(doc, values.tint ? { tint: values.tint } : {});
       const outDir = resolve3(values.out);
+      const missing = unrenderableLayers(doc);
+      if (missing.length && formats.some((f) => f !== "icon") && !values.force)
+        throw new Error(`These visible layers can't be rendered and would be missing from the images: ${missing.join(", ")}. Fix them, or pass --force.`);
       let n2 = 0;
       for (const f of formats) {
-        if (f === "icon") n2 += (await writeFiles(join3(outDir, `${name}.icon`), writeBundle(doc, doc.extra))).length;
-        else if (f === "icns") {
+        if (f === "icon") {
+          await saveIcon(join3(outDir, `${name}.icon`), doc);
+          n2 += 1 + Object.keys(doc.assets).length;
+        } else if (f === "icns") {
           await mkdir3(outDir, { recursive: true });
           await writeFile3(join3(outDir, `${name}.icns`), await buildIcns(raster));
           n2++;
-        } else if (f === "appiconset") n2 += (await writeFiles(join3(outDir, "AppIcon.appiconset"), await buildAppIconSet(raster))).length;
+        } else if (f === "appiconset") n2 += (await writeFiles(join3(outDir, "AppIcon.appiconset"), await buildAppIconSet(raster, { watch: targetsWatch(doc) }))).length;
         else if (f === "png") {
           const sizes = (values.sizes ?? "1024,512,256,128,64,32,16").split(",").map(Number);
           n2 += (await writeFiles(join3(outDir, `${name}-png`), await buildPngSet(raster, appearances(values.appearances), sizes))).length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fresnel-icon",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "fresnel CLI: build, validate, render and export Liquid Glass app icons (.icon bundles) from the command line or CI",
   "license": "MIT",
   "type": "module",
@@ -38,8 +38,8 @@
   "devDependencies": {
     "tsup": "9.0.0",
     "tsx": "4.23.15",
-    "@fresnel/core": "0.1.0",
-    "@fresnel/render": "0.1.0"
+    "@fresnel/core": "0.1.1",
+    "@fresnel/render": "0.1.1"
   },
   "scripts": {
     "build": "tsup",