@arraypress/covers 1.3.1 → 1.4.0

package/src/index.d.ts

@@ -14,12 +14,12 @@ import type { RepeatLayer } from './layers/repeat.js';
 import type { TextSpan } from './type/spans.js';
 import type { GlyphControl } from './type/glyphs.js';
 import type { Cut } from './formats/cut.js';
-import type { ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer } from './layers/index.js';
+import type { ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer, MosaicLayer, MarksLayer } from './layers/index.js';
 import type { Zones, PrintInfo, FormatName } from './formats/index.js';
 import type { Motion, MotionPreset, Easing } from './animate/index.js';
 
 export type { RepeatLayer, DefsLayer, UseLayer, TextSpan, GlyphControl, Cut, Motion, MotionPreset, Easing };
-export type { Color, Length, Rng, LayerTransform, EffectKind, Paint, TextPath, GroupLayer, ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer, Zones, PrintInfo, FormatName };
+export type { Color, Length, Rng, LayerTransform, EffectKind, Paint, TextPath, GroupLayer, ShapeLayer, SvgLayer, TableLayer, BarcodeLayer, PerforationLayer, TearLayer, TextureLayer, MosaicLayer, MarksLayer, Zones, PrintInfo, FormatName };
 export type { ShapeSpec, TableCell } from './layers/index.js';
 export type { Format } from './formats/index.js';
 export type { LintIssue } from './lint/index.js';
@@ -310,8 +310,8 @@ export interface PatternLayer extends BaseLayer {
   fade?: 'none' | 'radial' | 'edges' | 'top' | 'bottom' | 'left' | 'right';
   /** Dashed or dotted lines (or `[on, off]` lengths). */
   dash?: 'dashed' | 'dotted' | true | [Length, Length];
-  /** Grid / lines: N equal cells (inner lines only) instead of `size`. */
-  divisions?: number;
+  /** Grid / lines: N equal cells (inner lines only) instead of `size`; `[cols, rows]` for a design grid. */
+  divisions?: number | [number, number];
   /** Regions (fractions) the lines break around. */
   gaps?: Region[];
   region?: Region;
@@ -415,8 +415,8 @@ export interface TextLabel {
 
 export interface TextLayer extends Omit<BaseLayer, 'transform'> {
   type: 'text';
-  /** The text; an array is one line per item. (Optional with `spans`.) */
-  content?: string | string[];
+  /** The text; an array is one line per item, and an item may be a span (`{ content, bold }`: a headline whose lines change weight). (Optional with `spans`.) */
+  content?: string | (string | TextSpan)[];
   /** First baseline x (px or `'%'`): places the text like SVG `<text x y>`, `align` acting as the anchor. */
   x?: Length | `${number}%`;
   y?: Length | `${number}%`;
@@ -470,6 +470,8 @@ export interface TextLayer extends Omit<BaseLayer, 'transform'> {
   font?: string;
   /** Default 600. */
   weight?: number;
+  /** The weight of spans and lines marked `bold: true`. Default 700. */
+  boldWeight?: number;
   style?: 'normal' | 'italic';
   /** Default 6% of the design unit (`sqrt(width × height)`). */
   size?: Length;
@@ -718,7 +720,7 @@ export interface RuleLayer extends BaseLayer {
 }
 
 export type Layer =
-  | GroupLayer | ShapeLayer | SvgLayer | TableLayer | BarcodeLayer | PerforationLayer | TearLayer | TextureLayer
+  | GroupLayer | ShapeLayer | SvgLayer | TableLayer | BarcodeLayer | PerforationLayer | TearLayer | TextureLayer | MosaicLayer | MarksLayer
   | InkLayer | DitherLayer | ContourLayer | WaveformLayer | TilesLayer | RuleLayer
   | DiagramLayer | PaperLayer | ScribbleLayer
   | SolidLayer | LinearLayer | RadialLayer | MeshLayer | StripesLayer | ImageLayer

package/src/json-recipe.js

@@ -31,6 +31,7 @@
  * | `{ "gradientUnder": [colors, angle, size] }` | the colours a centred square of `size` covers in a linear gradient |
  * | `{ "pick": [...] }`, `{ "range": [min, max] }`, `{ "int": [min, max] }` | seeded choices |
  * | `{ "add" \| "sub" \| "mul" \| "div" \| "min" \| "max": [a, b, …] }` | arithmetic; lengths like `"54vw"` become pixels |
+ * | `{ "round" \| "floor" \| "ceil": x }` | to a whole number (a grid's row count from the canvas) |
  * | `{ "ramp": [from, to, steps, amount?] }` | `steps` colours from `from` toward `to` |
  * | `{ "taper": [ratio, steps] }` | `[1, ratio, ratio², …]` |
  * | `{ "length": value }` | characters in a string (or a number's digits), items in an array |
@@ -77,6 +78,7 @@ const CANVAS = ['width', 'height', 'u', 'bleed', 'safe', 'mm', 'dpi', 'trimWidth
 const OPS = /** @type {Record<string, [number, number]>} */ ({
   mix: [3, 4], readable: [1, 3], gradientUnder: [3, 3], tone: [2, 2], length: [1, 1], pick: [1, Infinity], range: [2, 2], int: [2, 2],
   add: [1, Infinity], sub: [2, Infinity], mul: [1, Infinity], div: [2, 2], min: [1, Infinity], max: [1, Infinity],
+  round: [1, 1], floor: [1, 1], ceil: [1, 1],
   ramp: [3, 4], taper: [2, 2], reverse: [1, 1],
   join: [1, 2], upper: [1, 1], lower: [1, 1], slice: [2, 3],
 });
@@ -390,6 +392,9 @@ function op(s, name, raw) {
     case 'div': { const [a, b] = nums(); return a / b; }
     case 'min': return Math.min(...nums());
     case 'max': return Math.max(...nums());
+    case 'round': return Math.round(nums()[0]);
+    case 'floor': return Math.floor(nums()[0]);
+    case 'ceil': return Math.ceil(nums()[0]);
     case 'ramp': {
       const [from, to, steps, amount = 1] = args;
       return Array.from({ length: steps }, (_, i) => mixOklab(toHex(from), toHex(to), (i / steps) * amount));

package/src/layer-options.js

@@ -16,12 +16,12 @@ export const LAYER_OPTIONS = {
   stripes: { direction: 'vertical | horizontal | diagonal', angle: 'For diagonal.', count: 'Stripes. Default 8.', widths: 'even | random | taper | [weights]', taper: 'Ratio for widths: taper.', colors: 'Cycled.', gap: 'Length.', radius: 'Length.', region: '{ x, y, width, height } fractions.', regionRadius: 'Length.' },
   image: { x: 'Box left, px or "%" (with y, width, height: an explicit box instead of region).', y: 'Box top.', width: 'Box width.', height: 'Box height.', src: 'A local path, data: URI, URL (where allowed) or bytes ("{image}").', fit: 'cover | contain | stretch', focus: 'An anchor, attention or entropy.', region: 'Fractions.', duotone: 'true or [shadow, highlight].', grayscale: 'boolean', normalize: 'Stretch tones first.', tint: 'A colour or { color, amount, blend }.', blur: 'Length.' },
   grain: { amount: '0–1. Default 0.08.', size: 'Grain px. Default 1.', monochrome: 'Default true.', vary: '"edges": heavier toward the edges (spray paint).' },
-  pattern: { kind: 'grid | dots | lines | rings | waves', size: 'Cell. Length.', stroke: 'Length.', color: 'Default @text.', angle: 'For lines.', center: '{ x, y } fractions.', wavelength: 'Length.', amplitude: 'Length.', fade: 'none | radial | edges | top | bottom | left | right', dash: 'dotted | dashed | [on, off] lengths.', divisions: 'Grid/lines: N equal cells (inner lines only) instead of size.', gaps: '[{ x, y, width, height }] fractions the lines break around.', region: 'Fractions.' },
+  pattern: { kind: 'grid | dots | lines | rings | waves', size: 'Cell. Length.', stroke: 'Length.', color: 'Default @text.', angle: 'For lines.', center: '{ x, y } fractions.', wavelength: 'Length.', amplitude: 'Length.', fade: 'none | radial | edges | top | bottom | left | right', dash: 'dotted | dashed | [on, off] lengths.', divisions: 'Grid/lines: N equal cells (inner lines only) instead of size; [cols, rows] for a design grid.', gaps: '[{ x, y, width, height }] fractions the lines break around.', region: 'Fractions.' },
   shapes: { kind: 'circle | square | pill | mixed', count: 'Default 6.', size: '[min, max] lengths.', colors: 'Cycled.', placement: 'scatter | row | column', items: '[{ kind, x, y, size, color, rotate, opacity }]', region: 'Fractions.', rotate: 'Tilt squares and pills.', radius: 'Square corner, fraction of size.', outline: 'true or a width.' },
   icon: { fill: 'A gradient, tile or preset paint for the icon (instead of color).', markup: 'Inner SVG markup on a 512 grid (a mark\'s paths); viewBox overrides the grid.', x: 'Left, px (with y: placed by its top-left corner).', y: 'Top, px.', name: 'Iconify name ("lucide:feather") or raw SVG ("{icon}").', svg: 'Raw SVG.', path: 'A path d.', viewBox: '[x, y, w, h] for path.', size: 'Length. Default "24vmin".', color: 'Default the accent on a tile, else @text.', strokeWidth: 'Stroke icons.', anchor: 'One of nine anchors.', position: '{ x, y } fractions.', offset: '{ x, y } lengths.', margin: 'Length.', tile: 'true or { size, radius, color, shadow, border }.' },
-  text: { content: 'The text ("{title}").', font: 'Family. Default Inter.', weight: 'Default 600.', style: 'normal | italic', size: 'Length.', minSize: 'Shrink toward this before truncating.', lineHeight: 'Default 1.12.', letterSpacing: 'Em. Default -0.02.', color: 'Default @text.', align: 'left | center | right', anchor: 'Default bottom-left.', position: '{ x, y } fractions.', offset: '{ x, y } lengths.', margin: 'Length.', maxWidth: 'Length.', maxLines: 'Default 3.', ellipsis: "Default '…'.", balance: 'Default true.', transform: 'none | uppercase | lowercase', label: 'A string or { content, size, weight, color, letterSpacing, transform, gap }.', background: 'A colour or { color, radius, padding, opacity }.',
+  text: { content: 'The text ("{title}"); an array is a line per item, an item may be a span ({ content, bold }).', font: 'Family. Default Inter.', weight: 'Default 600.', boldWeight: 'The weight of spans and lines marked bold: true. Default 700.', style: 'normal | italic', size: 'Length.', minSize: 'Shrink toward this before truncating.', lineHeight: 'Default 1.12.', letterSpacing: 'Em. Default -0.02.', color: 'Default @text.', align: 'left | center | right', anchor: 'Default bottom-left.', position: '{ x, y } fractions.', offset: '{ x, y } lengths.', margin: 'Length.', maxWidth: 'Length.', maxLines: 'Default 3.', ellipsis: "Default '…'.", balance: 'Default true.', transform: 'none | uppercase | lowercase', label: 'A string or { content, size, weight, color, letterSpacing, transform, gap }.', background: 'A colour or { color, radius, padding, opacity }.',
     x: 'First baseline x, px or "%" (like SVG <text>; align is the text-anchor).', y: 'First baseline y.', width: 'Justify every line to this width (like textLength).', justify: 'Justify every line to maxWidth.', lengthAdjust: 'spacingAndGlyphs (default: scale) | spacing', fit: 'width (the block fills width) | lines (each line fills width) | words (a word a line, the widest filling width) | wrap (wrap at width, then fill it) | shrink', stretch: '[sx, sy] or sy: stretch about the first baseline.', axes: 'Variable-font axes: { wdth: 50, SOFT: 100, WONK: 1, opsz: 144 }.', stroke: 'Outline colour.', strokeWidth: 'Outline width.', strokes: '[{ color, width }]: keylines, widest first, under the fill.', fill: 'A colour, a gradient, or "none" (outline type).', path: 'Text on a path: { kind: circle | arc | ellipse | wave, cx, cy, r, start, end, direction } or { d }.', startOffset: 'Along the path: 0–1 or px. Default 0.5 (centred).', fitPath: 'Space the text to fill the path (a ring); a number leaves that gap.', dy: 'Shift off the path.', render: 'outline (default) | live (<text> with @font-face)', autoColors: '[light, dark] for color: "auto". Default ["#ffffff", "#0b0b0b"].', autoThreshold: 'color: "auto" takes the dark colour above this backdrop luma (0–1). Default 0.72.', lines: 'Reserved.',
-    spans: '[{ content, font, weight, style, axes, scale, size, color, letterSpacing, dy }]: mixed runs on the same lines.', glyphs: '{ scale, scaleX, scaleY, dx, dy, rotate, color, origin, advance }: per-glyph arrays (cycled; spaces skipped).', fallback: 'A family (or list) for characters the font lacks; then fonts registered with fallback: true, then the built-in symbols.', split: 'words: a word a line.', dash: 'Dashes on the stroke: [on, off] lengths, dashed or dotted.', extrude: 'A depth, or { depth, angle, color, to, steps }: block extrusion.', maxHeight: 'Shrink the block to this height.' },
+    spans: '[{ content, font, weight, bold, style, axes, scale, size, color, letterSpacing, dy }]: mixed runs on the same lines.', glyphs: '{ scale, scaleX, scaleY, dx, dy, rotate, color, origin, advance }: per-glyph arrays (cycled; spaces skipped).', fallback: 'A family (or list) for characters the font lacks; then fonts registered with fallback: true, then the built-in symbols.', split: 'words: a word a line.', dash: 'Dashes on the stroke: [on, off] lengths, dashed or dotted.', extrude: 'A depth, or { depth, angle, color, to, steps }: block extrusion.', maxHeight: 'Shrink the block to this height.' },
   diagram: { icon: 'One icon (Iconify name or raw SVG), drawn as white line-art.', nodes: '[{ icon, shape: square | circle | none, size, brackets }]', layout: 'single | row | triangle | square | stack | hub', arrows: 'true | false | loop | both | cycle', shape: 'For a single icon: none (default) | square | circle.', size: 'Node size. Length.', gap: 'Space between nodes. Length.', stroke: 'Line width. Default "0.3vmin".', color: 'Line colour. Default white.', radius: 'Tile corner radius.', iconScale: 'Icon size inside a tile, 0–1. Default 0.44.', position: '{ x, y } centre, fractions.', grid: 'true or { divisions, opacity, stroke, color, pad }: a dotted grid that breaks around the drawing.' },
   paper: { count: 'Shapes in the collage. Default 4.', kind: 'mixed | rect | square | circle | blob | arch | pill', color: 'Default #faf9f5 (paper).', region: 'Where the collage sits, fractions.', items: '[{ kind, x, y, width, height, size, rotate, color }] placed in the region.', wobble: 'How rough the cut edges are, 0–1. Default 0.5.' },
   scribble: { icon: 'An icon to re-draw by hand (Iconify name or raw SVG).', graph: 'true or { nodes, dot }: a hand-drawn node graph instead.', color: 'Default #faf9f5.', stroke: 'Line width. Default "1.3vmin".', size: 'Length. Default "46vmin".', position: '{ x, y } centre, fractions.', wobble: '0–1. Default 0.5.' },
@@ -43,6 +43,8 @@ export const LAYER_OPTIONS = {
   perforation: { kind: 'holes (default) | dashes | notches', x: 'A vertical line at x.', x1: 'Start x.', y1: 'Start y.', x2: 'End x.', y2: 'End y.', size: 'Hole or notch radius.', gap: 'Spacing.', inset: 'Space before the first hole.', color: 'Default @text (or punch it with knockout).', strokeWidth: 'Dashes width.' },
   tear: { from: '[x, y] where the tear starts (edge to edge).', to: '[x, y] where it ends.', side: 'Which side keeps the sheet: above (default) | below | left | right', color: 'The sheet (a colour, a gradient, or "none" for just the edge).', sheetOpacity: 'The sheet\'s opacity.', step: 'Spacing of the jagged points.', jitter: 'How jagged.', rip: 'false, or { color, width, opacity }: the torn white edge.', fibres: 'false, or { color, width, opacity, length: [min, max], spread }.', ripColor: 'Colour of the rip and fibres. Default #fff6fb.' },
   texture: { kind: 'paper | creases | concrete | speck | wood | folds | dust', color: 'Fibre, aggregate or dust colour.', amount: 'Paper: fibre density.', frequency: 'Noise frequency (number or [x, y]).', octaves: 'Noise octaves.', depth: 'Creases: relief.', azimuth: 'Creases: light direction.', elevation: 'Creases: light height.', x: 'Folds: vertical fold positions, fractions.', y: 'Folds: horizontal fold positions, fractions.', width: 'Folds: band width.', strength: 'Folds: shading.', count: 'Dust: specks.', size: 'Dust: [min, max] radius.', region: 'Clip to { x, y, width, height } (px or "%").' },
+  mosaic: { markup: 'The mark\'s paths (512 grid).', x: 'Box x, px or %.', y: 'Box y.', width: 'Box width (default the canvas).', height: 'Box height.', cells: 'Cells across the mark\'s longest side, 4–48. Default 10.', gap: 'Gap between cells, a share of a cell. Default 0.12.', radius: 'Cell corner radius, a share of a cell. Default 0.', drop: 'Share of filled cells left out (seeded), 0–0.9. Default 0.12.', color: 'Default @accent.', accent: 'asterisk | dot: a small glyph in one empty cell beside the mark.', accentColor: 'Default color.' },
+  marks: { marks: 'The marks: paths on a 512 grid (or { markup }).', cols: 'Default from the count: 3 × 3 up to 10 × 7.', rows: 'Default from the count.', x: 'Box x, px or %.', y: 'Box y.', width: 'Box width (default the canvas).', height: 'Box height.', size: 'Share of a cell a mark\'s area takes. Default 0.5.', optical: 'false: fit each mark\'s bounds to the same box instead. Default true.', color: 'Default @text.' },
 };
 
 /** @type {Record<string, string>} Options every layer takes (besides type, id and when). */

package/src/layers/index.d.ts

@@ -14,5 +14,11 @@ export { tear } from './tear.js';
 export type { TearLayer } from './tear.js';
 export { texture } from './texture.js';
 export type { TextureLayer } from './texture.js';
+export { mosaic, mosaicGrid } from './mosaic.js';
+export type { MosaicLayer } from './mosaic.js';
+export { marks, sheetGrid } from './marks.js';
+export type { MarksLayer } from './marks.js';
+export { markGeometry } from './mark-geometry.js';
+export type { MarkGeometry } from './mark-geometry.js';
 export { expandRepeat } from './repeat.js';
 export type { RepeatLayer } from './repeat.js';

package/src/layers/index.js

@@ -12,4 +12,7 @@ export { code128 } from './code128.js';
 export { perforation } from './perforation.js';
 export { tear } from './tear.js';
 export { texture } from './texture.js';
+export { mosaic, mosaicGrid } from './mosaic.js';
+export { marks, sheetGrid } from './marks.js';
+export { markGeometry } from './mark-geometry.js';
 export { expandRepeat } from './repeat.js';

package/src/layers/mark-geometry.d.ts

@@ -0,0 +1,15 @@
+// A mark's geometry from its markup, read with @logomarks/core.
+import type { FillPath } from '@logomarks/core/raster';
+
+/** A mark read from its paths. */
+export interface MarkGeometry {
+  /** Its filled paths as rings, with their fill rules. */
+  paths: FillPath[];
+  /** Its real bounds, grid units. */
+  box: { x: number; y: number; width: number; height: number };
+  /** The share of its box it inks, 0–1. */
+  density: number;
+}
+
+/** Read a mark (paths on a 512 grid); null when it draws nothing. */
+export function markGeometry(markup: string): MarkGeometry | null;

package/src/layers/mark-geometry.js

@@ -0,0 +1,46 @@
+/**
+ * A mark's geometry from its markup (paths on a 512 grid), read with
+ * `@logomarks/core`: its filled paths as rings, its real bounds, and how
+ * much of that box it inks. Shared by the `mosaic` and `marks` layers.
+ *
+ * @module layers/mark-geometry
+ */
+
+import { shapes, rings, bounds } from '@logomarks/core/svg';
+import { pixelGrid, pixelCoverage } from '@logomarks/core/edit';
+
+/** Read marks, by markup (a sheet of seventy reads each once). @type {Map<string, MarkGeometry>} */
+const cache = new Map();
+
+/**
+ * @typedef {object} MarkGeometry
+ * @property {import('@logomarks/core/raster').FillPath[]} paths - Its filled paths as rings, with their fill rules.
+ * @property {{ x: number, y: number, width: number, height: number }} box - Its real bounds, grid units.
+ * @property {number} density - The share of its box it inks, 0–1.
+ */
+
+/**
+ * Read a mark.
+ *
+ * @param {string} markup - The mark's paths (`<path d="…"/>`, on a 512 grid).
+ * @returns {MarkGeometry | null} Null when it draws nothing.
+ *
+ * @example
+ * markGeometry('<path d="M96 96h320v320H96z"/>').box; // { x: 96, y: 96, width: 320, height: 320 }
+ */
+export function markGeometry(markup) {
+  if (cache.has(markup)) return /** @type {MarkGeometry} */ (cache.get(markup));
+  const filled = shapes(String(markup ?? ''));
+  const paths = filled.map((s) => ({ rings: rings(s.segs), evenodd: s.evenodd })).filter((p) => p.rings.length);
+  if (!paths.length) return null;
+  const b = bounds(filled);
+  const box = { x: b.x, y: b.y, width: Math.max(b.w, 1e-6), height: Math.max(b.h, 1e-6) };
+  // Ink measured on a 48-cell grid over the box: plenty for a density.
+  const grid = pixelGrid(0, box);
+  const cov = pixelCoverage(paths, grid);
+  const density = cov.reduce((a, v) => a + v, 0) / Math.max(1, cov.length);
+  const geo = { paths, box, density };
+  if (cache.size > 500) cache.clear();
+  cache.set(markup, geo);
+  return geo;
+}

package/src/layers/marks.d.ts

@@ -0,0 +1,25 @@
+// The `marks` layer.
+import type { Color, Length, BaseLayer } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+export interface MarksLayer extends BaseLayer {
+  type: 'marks';
+  /** The marks: their paths on a 512 grid (or `{ markup }`). */
+  marks: (string | { markup: string })[];
+  /** Default from the count and the box: 3 × 3 up to 10 × 7. */
+  cols?: number;
+  rows?: number;
+  /** The box the grid is centred in (default the canvas). */
+  x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%`;
+  /** The share of a cell a mark's area takes. Default 0.5. */
+  size?: number;
+  /** `false`: each mark's bounds fitted to the same box, not optically sized. Default true. */
+  optical?: boolean;
+  /** Default the palette's text. */
+  color?: Color;
+}
+
+/** Draw a set of marks on an even grid, optically sized the same. */
+export function marks(layer: MarksLayer, ctx: RenderContext): Markup;
+/** Columns and rows for `n` marks in a box of `aspect` (3 × 3 to 10 × 7; given ones kept). */
+export function sheetGrid(n: number, aspect: number, cols?: number, rows?: number): { cols: number; rows: number };

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.js

@@ -29,7 +29,7 @@ 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 { 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';
@@ -620,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 })}/>`;
@@ -1037,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/type/fallback.js

@@ -2,7 +2,7 @@
  * Glyph fallback: characters the chosen font lacks are shaped in a
  * fallback font (the layer's `fallback`, then any font registered with
  * `fallback: true`), and failing those drawn from the built-in symbols
- * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪). Text the font covers shapes exactly as
+ * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪ ≠). Text the font covers shapes exactly as
  * before (one HarfBuzz run).
  *
  * @module type/fallback

package/src/type/spans.d.ts

@@ -8,6 +8,8 @@ import type { Length, Color } from '../index.js';
 export interface TextSpan {
   content: string;
   font?: string; weight?: number; style?: 'normal' | 'italic'; axes?: Record<string, number>;
+  /** Set at the layer's `boldWeight` (default 700) when `weight` isn't given. */
+  bold?: boolean;
   /** Size relative to the layer's (default 1). */
   scale?: number;
   /** Size outright. */
@@ -24,7 +26,9 @@ export interface TextSpan {
 export interface Span { text: string; face: LoadedFont; scale: number; tracking: number; paint: string | undefined; dy: number }
 
 /** Resolve a layer's spans (faces loaded, sizes relative to `size`). */
-export function loadSpans(layer: { spans: (TextSpan | string)[]; font?: string; weight?: number; style?: string; axes?: Record<string, number>; letterSpacing?: number; transform?: string }, ctx: RenderContext, size: number): Promise<Span[]>;
+export function loadSpans(layer: { spans: (TextSpan | string)[]; font?: string; weight?: number; boldWeight?: number; style?: string; axes?: Record<string, number>; letterSpacing?: number; transform?: string }, ctx: RenderContext, size: number): Promise<Span[]>;
+/** A `content` array as spans, one a line, when any item is a span object; else `undefined`. */
+export function lineSpans(content: unknown): TextSpan[] | undefined;
 /** Spans as lines (split at `\n`, wrapped at `maxWidth`). */
 export function spanLines(spans: Span[], size: number, maxWidth: number, fallbacks: LoadedFont[]): Span[][];
 /** Shape a line of spans as one run. */

package/src/type/spans.js

@@ -3,9 +3,11 @@
  * style, axes, size, colour, tracking and baseline shift, set one after
  * another on the same lines (a `\n` in a span starts a new line).
  *
- * `spans: [{ content, font, weight, style, axes, scale, size, color, letterSpacing, dy }]`;
+ * `spans: [{ content, font, weight, bold, style, axes, scale, size, color, letterSpacing, dy }]`;
  * anything a span leaves out comes from the layer. `scale` sizes a span
- * relative to the layer (`size` gives it outright).
+ * relative to the layer (`size` gives it outright); `bold: true` sets it at
+ * the layer's `boldWeight` (700). A `content` array with span objects in it
+ * is one span a line (`lineSpans`): a headline whose lines change weight.
  *
  * @module type/spans
  */
@@ -37,7 +39,8 @@ export async function loadSpans(layer, ctx, size) {
   const out = [];
   for (const given of layer.spans) {
     const s = typeof given === 'string' ? { content: given } : given;
-    const face = await faceFor(ctx, { font: s.font ?? layer.font, weight: s.weight ?? layer.weight, style: s.style ?? layer.style, axes: { ...layer.axes, ...s.axes } });
+    const weight = s.weight ?? (s.bold ? layer.boldWeight ?? 700 : layer.weight);
+    const face = await faceFor(ctx, { font: s.font ?? layer.font, weight, style: s.style ?? layer.style, axes: { ...layer.axes, ...s.axes } });
     const kase = s.transform ?? layer.transform;
     const raw = String(s.content ?? '').replace(/[\t\r ]+/g, ' ');
     out.push({
@@ -52,6 +55,26 @@ export async function loadSpans(layer, ctx, size) {
   return out;
 }
 
+/**
+ * A `content` array as spans, one a line, when any item is a span object
+ * (`{ content, bold, weight, … }`); otherwise `undefined` (plain lines stay
+ * content).
+ *
+ * @param {unknown} content - A text layer's `content`.
+ * @returns {import('./spans.js').TextSpan[] | undefined}
+ *
+ * @example
+ * lineSpans([{ content: 'Signal', bold: true }, 'over the']);
+ * // [{ content: 'Signal\n', bold: true }, { content: 'over the' }]
+ */
+export function lineSpans(content) {
+  if (!Array.isArray(content) || !content.some((x) => x && typeof x === 'object')) return undefined;
+  return content.map((item, i) => {
+    const s = item && typeof item === 'object' ? item : { content: item };
+    return { ...s, content: `${s.content ?? ''}${i < content.length - 1 ? '\n' : ''}` };
+  });
+}
+
 /**
  * Spans as lines: split at `\n`, then (with a finite `maxWidth`) wrapped at
  * spaces, greedily, at `size`.