@arraypress/covers 1.1.0 → 1.4.0

package/src/layers/marks.js

@@ -0,0 +1,102 @@
+/**
+ * The `marks` layer.
+ *
+ * @module layers/marks
+ */
+
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { toHex } from '@logomarks/image-effects/color';
+import { pos, wrap } from './util.js';
+import { shapesOnly } from './svg.js';
+import { markGeometry } from './mark-geometry.js';
+
+/** The smallest and largest sheet: 3 × 3 to 10 × 7. */
+const MIN = 3;
+const MAX_COLS = 10;
+const MAX_ROWS = 7;
+
+/**
+ * `marks` — a set of marks on an even grid of square cells, centred in its
+ * box so the margins match, each mark optically sized the same: scaled by
+ * its real bounds (not its 512 grid), to the same area, nudged up a little
+ * where it inks less of that area (an outline looks smaller than a solid
+ * of the same size), and never past its cell. The logofolio sheet.
+ *
+ * Options: `marks` (a list of markup strings, or `{ markup }`), `cols` and
+ * `rows` (default from the count and the box: 3 × 3 up to 10 × 7), `x`,
+ * `y`, `width`, `height` (the box; default the canvas), `size` (the share
+ * of a cell a mark's area takes, 0.5), `optical` (`false` fits each
+ * mark's bounds to the same box instead), `color` (default `text`).
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ *
+ * @example
+ * { type: 'marks', marks: ['<path d="…"/>', '<path d="…"/>'], x: 24, y: 120, width: 352, height: 340, color: '#f2efe8' }
+ */
+export function marks(layer, ctx) {
+  const list = (layer.marks ?? []).map((m) => (m && typeof m === 'object' ? m.markup : m)).filter(Boolean);
+  if (!list.length) return { defs: '', body: '' };
+  const bx = pos(layer.x ?? 0, 'x', ctx.canvas);
+  const by = pos(layer.y ?? 0, 'y', ctx.canvas);
+  const bw = pos(layer.width ?? '100%', 'x', ctx.canvas);
+  const bh = pos(layer.height ?? '100%', 'y', ctx.canvas);
+  const { cols, rows } = sheetGrid(list.length, bw / bh, layer.cols, layer.rows);
+  const cell = Math.min(bw / cols, bh / rows);
+  const ox = bx + (bw - cols * cell) / 2;
+  const oy = by + (bh - rows * cell) / 2;
+  const share = layer.size ?? 0.5;
+  const color = layer.color ? toHex(layer.color) : ctx.palette.text;
+
+  let body = '';
+  list.slice(0, cols * rows).forEach((markup, i) => {
+    const geo = markGeometry(markup);
+    if (!geo) return;
+    const { x, y, width, height } = geo.box;
+    // Optical: the same area (density-weighted, gently), capped at the cell; else the same longest side.
+    const fit = (cell * 0.86) / Math.max(width, height);
+    const k = layer.optical === false ? (cell * Math.sqrt(share)) / Math.max(width, height)
+      : Math.min(fit, (cell * Math.sqrt(share)) / (Math.sqrt(width * height) * (geo.density / 0.5) ** 0.15));
+    const cx = ox + (i % cols + 0.5) * cell;
+    const cy = oy + (Math.floor(i / cols) + 0.5) * cell;
+    body += `<svg${attrs({ x: cx - (width * k) / 2, y: cy - (height * k) / 2, width: width * k, height: height * k, viewBox: `${num(x)} ${num(y)} ${num(width)} ${num(height)}`, overflow: 'visible' })}>${shapesOnly(markup)}</svg>`;
+  });
+  return { defs: '', body: wrap(layer, `<g fill="${color}">${body}</g>`) };
+}
+
+/**
+ * Columns and rows for `n` marks in a box of `aspect` (width / height):
+ * the biggest cells the box allows, less a cost for empty cells (so 25
+ * is 5 × 5, not 6 × 5 with a ragged row), 3 × 3 at the least, 10 × 7 at
+ * the most (marks past 70 are left out). Given ones are kept.
+ *
+ * @param {number} n
+ * @param {number} aspect
+ * @param {number} [cols]
+ * @param {number} [rows]
+ * @returns {{ cols: number, rows: number }}
+ *
+ * @example
+ * sheetGrid(70, 0.8); // { cols: 10, rows: 7 }
+ * sheetGrid(25, 1.6); // { cols: 5, rows: 5 }
+ */
+export function sheetGrid(n, aspect, cols, rows) {
+  if (cols && rows) return { cols: Math.round(cols), rows: Math.round(rows) };
+  if (cols) return { cols: Math.round(cols), rows: Math.max(1, Math.ceil(n / cols)) };
+  if (rows) return { cols: Math.max(1, Math.ceil(n / rows)), rows: Math.round(rows) };
+  // The biggest cells, less a cost for empty ones (a ragged last row).
+  const count = Math.min(n, MAX_COLS * MAX_ROWS);
+  let best = { cols: MAX_COLS, rows: MAX_ROWS };
+  let score = -Infinity;
+  for (let c = MIN; c <= MAX_COLS; c++) {
+    const r = clamp(Math.ceil(count / c), MIN, MAX_ROWS);
+    if (c * r < count) continue;
+    const s = Math.min(aspect / c, 1 / r) * (1 - (1.5 * (c * r - count)) / (c * r));
+    if (s > score + 1e-9) [best, score] = [{ cols: c, rows: r }, s];
+  }
+  return best;
+}
+
+/** @param {number} v @param {number} lo @param {number} hi @returns {number} */
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));

package/src/layers/mosaic.d.ts

@@ -0,0 +1,32 @@
+// The `mosaic` layer.
+import type { Color, Length, BaseLayer } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+import type { PixelGrid } from '@logomarks/core/edit';
+import type { MarkGeometry } from './mark-geometry.js';
+
+export interface MosaicLayer extends BaseLayer {
+  type: 'mosaic';
+  /** The mark's paths, on a 512 grid. */
+  markup: string;
+  /** The box the mosaic is fitted and centred in (default the canvas). */
+  x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;
+  /** Cells across the mark's longest side, 4–48. Default 10. */
+  cells?: number;
+  /** The gap between cells, a share of a cell. Default 0.12. */
+  gap?: number;
+  /** Cell corner radius, a share of a cell. Default 0. */
+  radius?: number;
+  /** The share of filled cells left out, by the layer's seed (0–0.9). Default 0.12. */
+  drop?: number;
+  /** Default the palette's accent. */
+  color?: Color;
+  /** A small asterisk or dot in one empty cell beside the mark. */
+  accent?: 'asterisk' | 'dot' | false;
+  /** Default `color`. */
+  accentColor?: Color;
+}
+
+/** Draw a mark as a mosaic of square cells. */
+export function mosaic(layer: MosaicLayer, ctx: RenderContext): Markup;
+/** The mosaic's grid over a mark: `cells` across its longest side, centred on its bounds. */
+export function mosaicGrid(geo: MarkGeometry, cells?: number): PixelGrid;

package/src/layers/mosaic.js

@@ -0,0 +1,155 @@
+/**
+ * The `mosaic` layer.
+ *
+ * @module layers/mosaic
+ */
+
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { toHex } from '@logomarks/image-effects/color';
+import { pixelGrid, pixelCoverage, pixelCells } from '@logomarks/core/edit';
+import { pos, wrap } from './util.js';
+import { markGeometry } from './mark-geometry.js';
+
+/**
+ * `mosaic` — a mark rastered into big square cells, each drawn on its own
+ * with a gap between, so whatever is under it shows through. The cells
+ * follow the mark's own shape (`@logomarks/core`'s pixelate: a cell is
+ * filled when the mark covers half of it, or a fifth where it would
+ * otherwise lose a thin line or a dot). `drop` leaves a share of the
+ * filled cells out, chosen by the layer's seed; `accent` puts a small
+ * asterisk or dot in one empty cell beside the mark.
+ *
+ * Options: `markup` (the mark's paths, 512 grid), `x`, `y`, `width`,
+ * `height` (the box it's fitted and centred in; default the canvas),
+ * `cells` (across the mark's longest side, 10), `gap` (a share of a cell,
+ * 0.12), `radius` (a share of a cell, 0), `drop` (0–1, 0.12), `color`
+ * (default the accent), `accent` (`'asterisk'` or `'dot'`), `accentColor`.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ *
+ * @example
+ * { type: 'mosaic', markup: mark, x: 40, y: 60, width: 320, height: 320, cells: 11, color: '#c8ff2e', drop: 0.15, accent: 'asterisk' }
+ */
+export function mosaic(layer, ctx) {
+  const geo = markGeometry(layer.markup);
+  if (!geo) return { defs: '', body: '' };
+  const g = mosaicGrid(geo, layer.cells);
+  const on = pixelCells(pixelCoverage(geo.paths, g), g);
+
+  // Fit the grid into the box, centred.
+  const bx = pos(layer.x ?? 0, 'x', ctx.canvas);
+  const by = pos(layer.y ?? 0, 'y', ctx.canvas);
+  const bw = pos(layer.width ?? '100%', 'x', ctx.canvas);
+  const bh = pos(layer.height ?? '100%', 'y', ctx.canvas);
+  const k = Math.min(bw / (g.cols * g.cell), bh / (g.rows * g.cell));
+  const cell = g.cell * k;
+  const ox = bx + (bw - g.cols * cell) / 2;
+  const oy = by + (bh - g.rows * cell) / 2;
+
+  const kept = dropCells(on, layer.drop ?? 0.12, ctx.rng);
+  const gap = cell * clamp(layer.gap ?? 0.12, 0, 0.9);
+  const r = cell * clamp(layer.radius ?? 0, 0, 0.5);
+  const side = cell - gap;
+  let rects = '';
+  kept.forEach((v, i) => {
+    if (!v) return;
+    const x = ox + (i % g.cols) * cell + gap / 2;
+    const y = oy + Math.floor(i / g.cols) * cell + gap / 2;
+    rects += r ? `<rect${attrs({ x, y, width: side, height: side, rx: r })}/>` : `M${num(x)} ${num(y)}h${num(side)}v${num(side)}h${num(-side)}Z`;
+  });
+  const color = layer.color ? toHex(layer.color) : ctx.palette.accent;
+  let body = r ? `<g fill="${color}">${rects}</g>` : `<path${attrs({ d: rects, fill: color })}/>`;
+
+  if (layer.accent) {
+    const at = accentCell(on, g, ctx.rng);
+    if (at >= 0) {
+      const cx = ox + (at % g.cols + 0.5) * cell;
+      const cy = oy + (Math.floor(at / g.cols) + 0.5) * cell;
+      body += accentGlyph(layer.accent, cx, cy, side, layer.accentColor ? toHex(layer.accentColor) : color);
+    }
+  }
+  return { defs: '', body: wrap(layer, body) };
+}
+
+/**
+ * The mosaic's grid over a mark: `cells` across its longest side (4–48),
+ * centred on its bounds (pixelate's grid, at that coarseness).
+ *
+ * @param {import('./mark-geometry.js').MarkGeometry} geo
+ * @param {number} [cells=10]
+ * @returns {import('@logomarks/core/edit').PixelGrid}
+ */
+export function mosaicGrid(geo, cells = 10) {
+  const n = clamp(Math.round(cells), 4, 48);
+  // pixelGrid sets 48 − 34 × amount cells across.
+  return pixelGrid((48 - n) / 34, geo.box);
+}
+
+/**
+ * The filled cells less a seeded share left out (at least one is kept).
+ *
+ * @param {Uint8Array} on
+ * @param {number} drop - 0–1.
+ * @param {import('../index.js').Rng} rng
+ * @returns {Uint8Array}
+ */
+function dropCells(on, drop, rng) {
+  const out = on.slice();
+  const share = clamp(drop, 0, 0.9);
+  let left = 0;
+  out.forEach((v, i) => {
+    if (!v) return;
+    // One draw a filled cell, always, so the choice is stable whatever `drop` is.
+    if (rng.next() < share) out[i] = 0;
+    else left++;
+  });
+  if (!left) return on.slice();
+  return out;
+}
+
+/**
+ * A seeded empty cell beside the mark (one with a filled neighbour), or -1.
+ *
+ * @param {Uint8Array} on
+ * @param {{ cols: number, rows: number }} g
+ * @param {import('../index.js').Rng} rng
+ * @returns {number}
+ */
+function accentCell(on, { cols, rows }, rng) {
+  const near = [];
+  for (let i = 0; i < on.length; i++) {
+    if (on[i]) continue;
+    const q = i % cols;
+    const r = Math.floor(i / cols);
+    const n = [[q - 1, r], [q + 1, r], [q, r - 1], [q, r + 1]].some(([a, b]) => a >= 0 && b >= 0 && a < cols && b < rows && on[b * cols + a]);
+    if (n) near.push(i);
+  }
+  if (!near.length) return -1;
+  return near[Math.floor(rng.next() * near.length)];
+}
+
+/**
+ * An asterisk (three bars) or a dot, centred in a cell of `side`.
+ *
+ * @param {'asterisk' | 'dot' | string} kind
+ * @param {number} cx @param {number} cy @param {number} side
+ * @param {string} color
+ * @returns {string}
+ */
+function accentGlyph(kind, cx, cy, side, color) {
+  if (kind === 'dot') return `<circle${attrs({ cx, cy, r: side * 0.24, fill: color })}/>`;
+  const L = side * 0.36;
+  const t = side * 0.085;
+  const d = [0, 60, 120].map((deg) => {
+    const a = (deg * Math.PI) / 180;
+    const [ux, uy, vx, vy] = [Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a)];
+    const pts = [[-L, -t], [L, -t], [L, t], [-L, t]].map(([u, v]) => `${num(cx + u * ux + v * vx)} ${num(cy + u * uy + v * vy)}`);
+    return `M${pts.join('L')}Z`;
+  }).join('');
+  return `<path${attrs({ d, fill: color })}/>`;
+}
+
+/** @param {number} v @param {number} lo @param {number} hi @returns {number} */
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));

package/src/layers/perforation.js

@@ -4,9 +4,9 @@
  * @module layers/perforation
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { pos, wrap } from './util.js';
 
 

package/src/layers/repeat.js

@@ -19,8 +19,8 @@
  * @module layers/repeat
  */
 
-import { num } from '../svg.js';
-import { len } from '../geometry.js';
+import { num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
 import { pos } from './util.js';
 import { fill, evaluate } from './expr.js';
 

package/src/layers/shape.d.ts

@@ -1,9 +1,9 @@
 // The `shape` layer.
 import type { Color, Length, BaseLayer, Anchor } from '../index.js';
 import type { RenderContext, Markup } from '../render/context.js';
-import type { Paint } from '../effects/paint.js';
+import type { Paint } from '../paint/index.js';
 
-/** One exact shape (see the README's `shape` table). */
+/** One exact shape (see the `shape` row in docs/layers.md). */
 export interface ShapeSpec {
   kind?: 'rect' | 'circle' | 'ellipse' | 'line' | 'polygon' | 'polyline' | 'star' | 'burst' | 'scallop' | 'rays' | 'ring' | 'sector' | 'arch' | 'wave' | 'path' | 'cut';
   x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;

package/src/layers/shape.js

@@ -4,11 +4,11 @@
  * @module layers/shape
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
-import { paint } from '../effects/paint.js';
-import { presetStrokes } from '../effects/paint-presets.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
+import { paint } from '../paint/index.js';
+import { presetStrokes } from '../paint/presets.js';
 import { wrap, pos } from './util.js';
 import { geometry } from './geometry.js';
 import { soften } from './soft.js';

package/src/layers/soft.js

@@ -6,8 +6,8 @@
  * @module layers/soft
  */
 
-import { attrs, num } from '../svg.js';
-import { toBase64 } from '../platform/bytes.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { toBase64 } from '../platform/index.js';
 
 /**
  * Blur markup by `sigma` (px in the layer's units). In `renderImage`, the markup

package/src/layers/svg.js

@@ -4,11 +4,10 @@
  * @module layers/svg
  */
 
-import { attrs, esc, num } from '../svg.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
 import { unit } from '../geometry.js';
 import { pos, wrap } from './util.js';
-import { expandDropShadows } from '../effects/drop-shadow.js';
-import { filterReach } from '../effects/region.js';
+import { expandDropShadows, filterReach } from '@logomarks/image-effects';
 
 
 /**

package/src/layers/table.js

@@ -4,9 +4,9 @@
  * @module layers/table
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { faceFor, setLine } from '../type/line.js';
 import { pos, wrap, contentOf } from './util.js';
 

package/src/layers/tear.d.ts

@@ -1,7 +1,7 @@
 // The `tear` layer.
 import type { Color, Length, BaseLayer, Anchor } from '../index.js';
 import type { RenderContext, Markup } from '../render/context.js';
-import type { Paint } from '../effects/paint.js';
+import type { Paint } from '../paint/index.js';
 
 export interface TearLayer extends BaseLayer {
   type: 'tear';

package/src/layers/tear.js

@@ -4,10 +4,10 @@
  * @module layers/tear
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
-import { paint } from '../effects/paint.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
+import { paint } from '../paint/index.js';
 import { pos, wrap } from './util.js';
 
 

package/src/layers/texture.js

@@ -4,9 +4,9 @@
  * @module layers/texture
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { pos, wrap } from './util.js';
 
 

package/src/layers/util.js

@@ -5,8 +5,8 @@
  * @module layers/util
  */
 
-import { attrs, esc } from '../svg.js';
-import { len } from '../geometry.js';
+import { attrs, esc } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
 
 /**
  * A coordinate: px as a number, `'50%'` of the canvas along `axis`, or a
@@ -22,6 +22,19 @@ export function pos(v, axis, canvas) {
   return len(/** @type {any} */ (v), canvas, 0);
 }
 
+/**
+ * Opacity and blend-mode attributes shared by every layer.
+ *
+ * @param {{ opacity?: number, blend?: string }} layer - The layer.
+ * @returns {Record<string, string | number | undefined>} Attributes for the layer's group.
+ */
+export function layerAttrs(layer) {
+  return {
+    opacity: layer.opacity != null && layer.opacity < 1 ? Math.max(0, layer.opacity) : undefined,
+    style: layer.blend && layer.blend !== 'normal' ? `mix-blend-mode:${layer.blend}` : undefined,
+  };
+}
+
 /**
  * Wrap markup in a group with the layer's `opacity` and `blend` (only when
  * it has them).

package/src/layers.js

@@ -14,11 +14,12 @@
  * @module layers
  */
 
-import { loadBytes } from './platform/index.js';
-import { toBase64, latin1, utf8 } from './platform/bytes.js';
-import { attrs, esc, layerAttrs, num } from './svg.js';
-import { len, place, anchorAlign, unit, regionPx } from './geometry.js';
-import { toHex, mixOklab, toOklch, fromOklch } from './color.js';
+import { loadBytes, toBase64 } from './platform/index.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
+import { imageMime } from '@logomarks/image-effects';
+import { len } from '@logomarks/image-effects/length';
+import { place, anchorAlign, unit, regionPx } from './geometry.js';
+import { toHex, mixOklab, toOklch, fromOklch } from '@logomarks/image-effects/color';
 import { harfbuzz, loadFont, pickFont } from './fonts.js';
 import { layout, runPath, caseText } from './text.js';
 import { resolveIcon, parseSvgIcon } from './icons.js';
@@ -28,9 +29,9 @@ import { paper, scribble } from './handmade.js';
 import { ink, dither, contour, waveform, tiles, rule } from './print.js';
 import { typeset, wantsType } from './type/index.js';
 import { recordLayout } from './type/layout-ref.js';
-import { shape, svg, table, barcode, perforation, tear, texture } from './layers/index.js';
-import { pos } from './layers/util.js';
-import { paint } from './effects/paint.js';
+import { shape, svg, table, barcode, perforation, tear, texture, mosaic, marks } from './layers/index.js';
+import { pos, layerAttrs } from './layers/util.js';
+import { paint } from './paint/index.js';
 import { imageSize } from './lint/image-size.js';
 
 /**
@@ -41,7 +42,7 @@ import { imageSize } from './lint/image-size.js';
  * @property {number} height - Canvas height in px.
  * @property {{ width: number, height: number }} canvas - The same, as an object.
  * @property {import('./index.js').Palette} palette - The resolved palette.
- * @property {import('./rng.js').Rng} rng - This layer's own random stream.
+ * @property {import('@logomarks/image-effects/rng').Rng} rng - This layer's own random stream.
  * @property {string} id - A unique id prefix for this layer's defs.
  * @property {import('./index.js').FontSource[]} fonts - Available fonts (Inter last).
  * @property {any} [sharp] - The `sharp` module, when available.
@@ -421,7 +422,7 @@ export async function image(layer, ctx) {
   const fit = layer.fit ?? 'cover';
   const focus = layer.focus ?? 'center';
   let bytes = typeof layer.src === 'string' || layer.src instanceof URL ? await readSource(layer.src) : await loadBytes(layer.src, 'image');
-  let mime = sniff(bytes);
+  let mime = imageMime(bytes);
   let preserve = fit === 'stretch' ? 'none' : `${alignFor(focus)} ${fit === 'contain' ? 'meet' : 'slice'}`;
   let sharpBlurred = false;
 
@@ -548,23 +549,6 @@ async function readSource(src) {
   return loadBytes(src, 'image');
 }
 
-/**
- * Sniff an image's MIME type from its first bytes.
- *
- * @param {Uint8Array} b - Image bytes.
- * @returns {string | undefined} The MIME type.
- */
-export function sniff(b) {
-  if (b[0] === 0x89 && b[1] === 0x50) return 'image/png';
-  if (b[0] === 0xff && b[1] === 0xd8) return 'image/jpeg';
-  if (b[0] === 0x47 && b[1] === 0x49) return 'image/gif';
-  const head = latin1(b.subarray(0, 32));
-  if (head.startsWith('RIFF') && head.slice(8, 12) === 'WEBP') return 'image/webp';
-  if (head.slice(4, 12) === 'ftypavif' || head.slice(4, 12) === 'ftypavis') return 'image/avif';
-  if (/^\s*(<\?xml|<svg)/i.test(utf8(b.subarray(0, 256)))) return 'image/svg+xml';
-  return undefined;
-}
-
 // ---------------------------------------------------------------------------
 // Texture
 // ---------------------------------------------------------------------------
@@ -636,10 +620,11 @@ export function pattern(layer, ctx) {
     const d = [];
     if (angle === 0) {
       // Rows and columns: every `size` from the centre, or `divisions` equal
-      // cells (inner lines only); broken wherever they cross a `gaps` region.
-      const n = layer.divisions;
-      const ys = n ? Array.from({ length: n - 1 }, (_, k) => ((k + 1) * h) / n) : range(cy % size, h, size);
-      const xs = kind !== 'grid' ? [] : n ? Array.from({ length: n - 1 }, (_, k) => ((k + 1) * w) / n) : range(cx % size, w, size);
+      // cells (inner lines only; `[cols, rows]` for a design grid); broken
+      // wherever they cross a `gaps` region.
+      const [nx, ny] = Array.isArray(layer.divisions) ? layer.divisions.map((d) => Math.max(1, Math.round(d))) : [layer.divisions, layer.divisions];
+      const ys = ny ? Array.from({ length: ny - 1 }, (_, k) => ((k + 1) * h) / ny) : range(cy % size, h, size);
+      const xs = kind !== 'grid' ? [] : nx ? Array.from({ length: nx - 1 }, (_, k) => ((k + 1) * w) / nx) : range(cx % size, w, size);
       const gaps = (layer.gaps ?? []).map((g) => regionPx(g, ctx.canvas));
       d.push(gridPath(xs, ys, w, h, gaps));
       shapes = `<path${attrs({ d: d.join(''), fill: 'none', stroke: col, 'stroke-width': stroke, ...dashAttrs })}/>`;
@@ -1053,4 +1038,4 @@ function group() {
   throw new TypeError('A group layer is drawn by renderSvg()/renderImage(), not on its own');
 }
 
-export const LAYERS = Object.freeze({ solid, linear, radial, mesh, stripes, image, grain, pattern, shapes, icon, text, frame, diagram, paper, scribble, ink, dither, contour, waveform, tiles, rule, group, shape, svg, table, barcode, perforation, tear, texture, repeat: group, defs: group, use: group });
+export const LAYERS = Object.freeze({ solid, linear, radial, mesh, stripes, image, grain, pattern, shapes, icon, text, frame, diagram, paper, scribble, ink, dither, contour, waveform, tiles, rule, group, shape, svg, table, barcode, perforation, tear, texture, mosaic, marks, repeat: group, defs: group, use: group });

package/src/{effects/paint.js → paint/index.js}

@@ -4,13 +4,13 @@
  * radial fields with `rx`/`ry`), a `tile` pattern (checker, stripes, dots,
  * grid or a custom tile), or a named preset (`'chrome'`).
  *
- * @module effects/paint
+ * @module paint
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
-import { PRESETS } from './paint-presets.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
+import { PRESETS } from './presets.js';
 import { tile } from './tile.js';
 
 /**

package/src/{effects/paint-presets.d.ts → paint/presets.d.ts}

@@ -1,5 +1,5 @@
 // Named paints: chrome, steel and gold, painted as a reflected horizon.
-import type { GradientPaint } from './paint.js';
+import type { GradientPaint } from './index.js';
 import type { Color, Length } from '../index.js';
 
 /** Paint presets, by name. */

package/src/{effects/paint-presets.js → paint/presets.js}

@@ -4,7 +4,7 @@
  * horizon a little past the middle, warm ground below it, and a light
  * bounce at the very bottom. Pair it with a light keyline (`strokes`).
  *
- * @module effects/paint-presets
+ * @module paint/presets
  */
 
 /** Paint presets, by name. A paint `{ preset, …fields }` overrides any of them. */

package/src/{effects → paint}/tile.d.ts

@@ -1,5 +1,5 @@
 // Tile paints.
-import type { TilePaint } from './paint.js';
+import type { TilePaint } from './index.js';
 
 /** Tile kinds. */
 export const TILES: readonly ('checker' | 'stripes' | 'dots' | 'grid' | 'custom')[];

package/src/{effects → paint}/tile.js

@@ -2,12 +2,12 @@
  * Tile paints: a pattern repeated over a shape (checker, stripes, dots,
  * grid), or a custom tile of markup.
  *
- * @module effects/tile
+ * @module paint/tile
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { sanitize } from '../layers/svg.js';
 
 /** Tile kinds. */

package/src/palette.js

@@ -20,7 +20,7 @@
  */
 
 import { relativeLuminance, contrastRatio, readableOn, readableText } from '@arraypress/color-utils';
-import { toHex, toOklch, fromOklch, mixOklab } from './color.js';
+import { toHex, toOklch, fromOklch, mixOklab } from '@logomarks/image-effects/color';
 
 /**
  * Curated presets. Each is a full palette; the light ones pair with the

package/src/platform/files.d.ts

@@ -0,0 +1,6 @@
+// Files read from disk in Node.
+
+/** Read a text file synchronously (Node). */
+export function readTextSync(path: string | URL): string;
+/** A file shipped with the package, from disk (Node), or undefined. */
+export function packageFileSync(rel: string): Uint8Array | undefined;