@scattered-light/loomiere 0.4.0 → 0.5.0

package/figma/library/kit/docs.js

@@ -0,0 +1,37 @@
+// The kit for doc pages: everything in base.js, plus instances of the page's component sets,
+// spec tables, example stages, captions and do/don't columns. Stored as ('loomiere', 'docKit').
+var L = await new (Object.getPrototypeOf(async function () {}).constructor)('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var fill = L.fill, paint = L.paint, AL = L.AL, add = L.add, T = L.T, hrow = L.hrow, divider = L.divider;
+var sets = {}; figma.currentPage.findAllWithCriteria({ types: ['COMPONENT_SET'] }).forEach(function (s) { sets[s.name] = s; });
+function inst(set, name, props) {
+  var c = sets[set].children.filter(function (x) { return x.name === name; })[0]; if (!c) throw new Error(set + ' ' + name);
+  var i = c.createInstance();
+  if (props) { var p = {}; Object.keys(i.componentProperties).forEach(function (k) { var base = k.split('#')[0]; if (props[base] !== undefined) p[k] = props[base]; }); i.setProperties(p); }
+  return i;
+}
+async function notes(parent, rows) {
+  var tbl = AL('VERTICAL', { name: 'Spec' }); add(parent, [tbl]); tbl.layoutSizingHorizontal = 'FILL';
+  var hd = hrow(tbl); hd.paddingTop = 0; divider(hd);
+  add(hd, [await T('Part', 'eyebrow-condense', 'Theme:text/tertiary', 180), await T('Token', 'eyebrow-condense', 'Theme:text/tertiary', 340), await T('Why', 'eyebrow-condense', 'Theme:text/tertiary', 640)]);
+  for (var i = 0; i < rows.length; i++) {
+    var r = hrow(tbl); r.counterAxisAlignItems = 'MIN'; r.paddingTop = r.paddingBottom = 10; divider(r);
+    add(r, [await T(rows[i][0], 'subtitle-base', 'Theme:text/primary', 180), await T(rows[i][1], 'code-condense', 'Theme:text/accent', 340), await T(rows[i][2] || ' ', 'body-condense', 'Theme:text/secondary', 640)]);
+  }
+}
+function stage(parent, name) {
+  var s = AL('HORIZONTAL', { name: name || 'Examples', itemSpacing: 32, counterAxisAlignItems: 'MIN', paddingTop: 32, paddingBottom: 32, paddingLeft: 32, paddingRight: 32, layoutWrap: 'WRAP', counterAxisSpacing: 24 });
+  fill(s, 'Theme:fill/subtle'); s.cornerRadius = 12; add(parent, [s]); s.layoutSizingHorizontal = 'FILL'; return s;
+}
+async function captioned(node, cap) { var c = AL('VERTICAL', { name: cap, itemSpacing: 10 }); add(c, [node, await T(cap, 'body-condense', 'Theme:text/tertiary')]); return c; }
+async function usage(parent, dos, donts) {
+  var r = AL('HORIZONTAL', { name: 'Usage', itemSpacing: 24 }); add(parent, [r]); r.layoutSizingHorizontal = 'FILL';
+  var pairs = [['Use it for', dos, 'Theme:status/success'], ['Avoid', donts, 'Theme:status/error']];
+  for (var i = 0; i < 2; i++) {
+    var col = AL('VERTICAL', { name: pairs[i][0], itemSpacing: 8, paddingLeft: 16 }); add(r, [col]); col.layoutSizingHorizontal = 'FILL';
+    col.strokes = [paint(pairs[i][2])]; col.strokeLeftWeight = 3; col.strokeTopWeight = col.strokeRightWeight = col.strokeBottomWeight = 0;
+    add(col, [await T(pairs[i][0], 'subtitle-base')]);
+    for (var j = 0; j < pairs[i][1].length; j++) { var t = await T(pairs[i][1][j], 'body-base', 'Theme:text/secondary'); add(col, [t]); t.layoutSizingHorizontal = 'FILL'; t.textAutoResize = 'HEIGHT'; }
+  }
+}
+function overflow(doc) { var over = []; doc.findAll(function (n) { return n.type === 'TEXT'; }).forEach(function (t) { var b = t.absoluteBoundingBox, p = doc.absoluteBoundingBox; if (b.x + b.width > p.x + p.width + 1) over.push(t.characters.slice(0, 30)); }); return over; }
+return Object.assign({}, L, { sets: sets, inst: inst, notes: notes, stage: stage, captioned: captioned, usage: usage, overflow: overflow });

package/figma/library/kit/fingerprint.js

@@ -0,0 +1,143 @@
+// Fingerprints for the library: a short hash for each top-level frame, component set and doc
+// section on a page, built from what the layer looks like (sizes, layout, paints by variable
+// name, text by style name, instances by the component they show), never from node IDs. Two
+// files built the same way give the same hashes, so a rebuild can be checked against Mojave
+// without reading the layers out. Stored as ('loomiere', 'fingerprint'). lines(node) gives the
+// flat "path | prop=value" records behind a hash, for finding what differs.
+var cols = await figma.variables.getLocalVariableCollectionsAsync();
+var CN = {}; cols.forEach(function (c) { CN[c.id] = c; });
+var VK = {}; (await figma.variables.getLocalVariablesAsync()).forEach(function (x) { VK[x.id] = CN[x.variableCollectionId].name + ':' + x.name; });
+var SN = {};
+(await figma.getLocalTextStylesAsync()).concat(await figma.getLocalEffectStylesAsync(), await figma.getLocalPaintStylesAsync()).forEach(function (s) { SN[s.id] = s.name; });
+function r(x) { return Math.round(x * 2) / 2; }
+function hex(c) { var p = function (x) { return ('0' + Math.round(x * 255).toString(16)).slice(-2); }; return p(c.r) + p(c.g) + p(c.b) + (c.a === undefined || c.a === 1 ? '' : p(c.a)); }
+function vk(a) { return a ? (VK[a.id] || 'remote') : ''; }
+function paints(list) {
+  if (!Array.isArray(list)) return 'mixed';
+  return list.map(function (p) {
+    var b = p.boundVariables && p.boundVariables.color;
+    return p.type + (p.visible === false ? '!hidden' : '') + (b ? '@' + vk(b) : p.color ? '#' + hex(p.color) : '') + (p.opacity !== undefined && p.opacity !== 1 ? '*' + r(p.opacity * 100) : '');
+  }).join(',');
+}
+function effects(n) {
+  if (n.effectStyleId) return 'style:' + (SN[n.effectStyleId] || '?');
+  return n.effects.map(function (e) {
+    var b = e.boundVariables && e.boundVariables.color;
+    return e.type + (e.visible === false ? '!hidden' : '') + (e.offset ? ' ' + e.offset.x + ',' + e.offset.y : '') + ' ' + e.radius + (e.spread ? ' s' + e.spread : '') + (b ? '@' + vk(b) : e.color ? '#' + hex(e.color) : '');
+  }).join(',');
+}
+var LAYOUT = ['layoutMode', 'primaryAxisSizingMode', 'counterAxisSizingMode', 'primaryAxisAlignItems', 'counterAxisAlignItems', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'itemSpacing', 'counterAxisSpacing', 'layoutWrap', 'strokesIncludedInLayout', 'itemReverseZIndex', 'clipsContent'];
+var CHILD = ['layoutSizingHorizontal', 'layoutSizingVertical', 'layoutGrow', 'layoutAlign', 'layoutPositioning', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight'];
+var TEXT = ['characters', 'textAutoResize', 'textAlignHorizontal', 'textAlignVertical', 'textTruncation', 'maxLines'];
+function props(n) {
+  var o = {};
+  o.t = n.type;
+  if (n.visible === false) o.visible = false;
+  if ('opacity' in n && n.opacity !== 1) o.opacity = r(n.opacity * 100);
+  if ('rotation' in n && n.rotation) o.rotation = r(n.rotation);
+  if (n.isMask) o.mask = true;
+  if ('width' in n) o.size = r(n.width) + 'x' + r(n.height);
+  var p = n.parent;
+  if (p && (p.type === 'PAGE' || !('layoutMode' in p) || p.layoutMode === 'NONE' || n.layoutPositioning === 'ABSOLUTE')) o.xy = r(n.x) + ',' + r(n.y);
+  if ('layoutMode' in n && n.type !== 'TEXT') LAYOUT.forEach(function (k) { if (k in n && n[k] !== undefined) o[k] = n[k]; });
+  if (n.layoutMode === 'NONE') LAYOUT.slice(1, 15).forEach(function (k) { if (k !== 'clipsContent') delete o[k]; });
+  if (p && 'layoutMode' in p && p.layoutMode !== 'NONE') CHILD.forEach(function (k) { if (k in n && n[k] !== null && n[k] !== undefined && n[k] !== 0 && n[k] !== 'INHERIT' && n[k] !== 'AUTO') o[k] = n[k]; });
+  if ('fills' in n) { var f = paints(n.fills); if (f) o.fills = f; }
+  if ('strokes' in n && n.strokes.length) {
+    o.strokes = paints(n.strokes); o.strokeAlign = n.strokeAlign;
+    o.strokeWeight = n.strokeWeight === figma.mixed ? [n.strokeTopWeight, n.strokeRightWeight, n.strokeBottomWeight, n.strokeLeftWeight].join(' ') : n.strokeWeight;
+    if (n.dashPattern && n.dashPattern.length) o.dash = n.dashPattern.join(' ');
+    if (n.type === 'VECTOR') { o.cap = n.strokeCap; o.join = n.strokeJoin; }
+  }
+  if ('topLeftRadius' in n) { var rr = [n.topLeftRadius, n.topRightRadius, n.bottomRightRadius, n.bottomLeftRadius]; if (rr.some(function (x) { return x; })) o.radius = rr.join(' '); }
+  if ('effects' in n && (n.effects.length || n.effectStyleId)) o.effects = effects(n);
+  if (n.explicitVariableModes) { var m = []; Object.keys(n.explicitVariableModes).forEach(function (cid) { var c = CN[cid]; if (!c) return m.push('remote'); var md = c.modes.filter(function (x) { return x.modeId === n.explicitVariableModes[cid]; })[0]; m.push(c.name + '=' + (md ? md.name : '?')); }); if (m.length) o.modes = m.sort().join(','); }
+  if (n.boundVariables) { var b = []; Object.keys(n.boundVariables).forEach(function (k) { if (k === 'fills' || k === 'strokes' || k === 'effects' || k === 'textRangeFills') return; var a = n.boundVariables[k]; b.push(k + '@' + (Array.isArray(a) ? a.map(vk).join('+') : vk(a))); }); if (b.length) o.bound = b.sort().join(','); }
+  if (n.type === 'TEXT') {
+    TEXT.forEach(function (k) { if (n[k] !== undefined && n[k] !== null && n[k] !== 'DISABLED') o[k] = n[k]; });
+    o.style = n.textStyleId === figma.mixed ? 'mixed' : SN[n.textStyleId] || 'none';
+    if (o.style === 'none' || o.style === 'mixed') { o.font = n.fontName === figma.mixed ? 'mixed' : n.fontName.family + ' ' + n.fontName.style; o.fontSize = n.fontSize; }
+  }
+  if (n.type === 'VECTOR') o.paths = n.vectorPaths.map(function (v) { return v.data; }).join(';');
+  if (n.componentPropertyReferences) { var cr = []; Object.keys(n.componentPropertyReferences).forEach(function (k) { cr.push(k + '>' + n.componentPropertyReferences[k].split('#')[0]); }); if (cr.length) o.refs = cr.sort().join(','); }
+  if (n.type === 'COMPONENT_SET' || (n.type === 'COMPONENT' && (!p || p.type !== 'COMPONENT_SET'))) {
+    var d = n.componentPropertyDefinitions;
+    o.props = Object.keys(d).map(function (k) { var x = d[k]; return k.split('#')[0] + ':' + x.type + '=' + x.defaultValue + (x.variantOptions ? '[' + x.variantOptions.join('|') + ']' : ''); }).sort().join(';');
+  }
+  if ((n.type === 'COMPONENT' || n.type === 'COMPONENT_SET') && n.description) o.desc = n.description;
+  return o;
+}
+async function mainOf(n) {
+  var m = await n.getMainComponentAsync();
+  if (!m) return 'missing';
+  return (m.parent && m.parent.type === 'COMPONENT_SET' ? m.parent.name + '/' : '') + m.name;
+}
+function h32(s) { var h = 0x811c9dc5; for (var i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 0x01000193) >>> 0; } return ('0000000' + h.toString(16)).slice(-8); }
+async function rec(n) {
+  var o = props(n);
+  if (n.type === 'INSTANCE') {
+    o.main = await mainOf(n);
+    var cp = n.componentProperties; o.inst = Object.keys(cp).map(function (k) { return k.split('#')[0] + '=' + cp[k].value; }).sort().join(';');
+  }
+  return o;
+}
+function line(o) { return Object.keys(o).map(function (k) { return k + '=' + (typeof o[k] === 'string' ? o[k].replace(/\n/g, '\\n') : o[k]); }).join(' '); }
+async function hash(n, skipSets) {
+  var s = line(await rec(n));
+  if (skipSets && n.type === 'COMPONENT_SET') return h32(s);
+  if ('children' in n) for (var i = 0; i < n.children.length; i++) s += '|' + (await hash(n.children[i], skipSets));
+  return h32(s);
+}
+async function lines(n, path, out, depth) {
+  out = out || []; path = path || n.name;
+  out.push(path + ' | ' + line(await rec(n)));
+  if ('children' in n && (depth === undefined || depth > 0)) {
+    var seen = {};
+    for (var i = 0; i < n.children.length; i++) { var c = n.children[i]; seen[c.name] = (seen[c.name] || 0) + 1; await lines(c, path + ' > ' + c.name + (seen[c.name] > 1 ? '#' + seen[c.name] : ''), out, depth === undefined ? undefined : depth - 1); }
+  }
+  return out;
+}
+// One 16-character entry per layer (hash of its path, hash of its record), joined, so two files
+// can be compared line by line and only the lines that differ read out.
+async function lineHashes(n) { var ls = await lines(n); return ls.map(function (l) { var i = l.indexOf(' | '); return h32(l.slice(0, i)) + h32(l.slice(i + 3)); }).join(''); }
+// What differs between two layers: the properties that differ, matched by layer path, at most
+// `max` entries. The two can be on different pages of one file (a check page and the real one).
+async function recs(n, path, out) {
+  out[path] = await rec(n);
+  if ('children' in n) { var seen = {}; for (var i = 0; i < n.children.length; i++) { var c = n.children[i]; seen[c.name] = (seen[c.name] || 0) + 1; await recs(c, path + ' > ' + c.name + (seen[c.name] > 1 ? '#' + seen[c.name] : ''), out); } }
+  return out;
+}
+async function diff(a, b, max) {
+  var ra = await recs(a, '', {}), rb = await recs(b, '', {}), out = [];
+  Object.keys(ra).forEach(function (k) {
+    if (!rb[k]) return out.push(k + ': missing in check');
+    var d = [];
+    Object.keys(ra[k]).concat(Object.keys(rb[k])).forEach(function (p) { if (d.some(function (x) { return x.indexOf(p + ':') === 0; })) return; if (String(ra[k][p]) !== String(rb[k][p])) d.push(p + ': ' + ra[k][p] + ' → ' + rb[k][p]); });
+    if (d.length) out.push(k + ' | ' + d.join(' ; '));
+  });
+  Object.keys(rb).forEach(function (k) { if (!ra[k]) out.push(k + ': only in check'); });
+  return { count: out.length, layers: Object.keys(ra).length + '/' + Object.keys(rb).length, first: out.slice(0, max || 12) };
+}
+// The checked units on the current page: top-level frames, each component set (and lone
+// component), and each section of a doc frame.
+async function units() {
+  var out = {};
+  var put = async function (key, n, skipSets) { var k = key, i = 2; while (out[k]) k = key + '#' + i++; out[k] = await hash(n, skipSets); };
+  var pg = figma.currentPage;
+  for (var i = 0; i < pg.children.length; i++) {
+    var top = pg.children[i];
+    if (top.name === 'Components' && 'children' in top) {
+      var sets = top.findAll(function (x) { return x.type === 'COMPONENT_SET' || (x.type === 'COMPONENT' && x.parent.type !== 'COMPONENT_SET'); });
+      for (var j = 0; j < sets.length; j++) await put('set:' + sets[j].name, sets[j]);
+      var shell = line(props(top)) + '|' + top.children.map(function (c) { return c.name + ':' + line(props(c)); }).join('|');
+      out['frame:Components(shell)'] = h32(shell);
+      // Each set's wrapper (header, row and column labels), without the set itself.
+      for (var w = 0; w < top.children.length; w++) if (top.children[w].type === 'FRAME') await put('wrap:' + top.children[w].name, top.children[w], true);
+    } else if (top.type === 'FRAME' && 'children' in top && top.children.length > 1 && top.children[0].name === 'Header') {
+      out['doc:' + top.name + '(frame)'] = h32(line(props(top)));
+      for (var k = 0; k < top.children.length; k++) await put('doc:' + top.name + '/' + top.children[k].name, top.children[k]);
+    } else await put(top.type.toLowerCase() + ':' + top.name, top);
+  }
+  return out;
+}
+return { hash: hash, lines: lines, lineHashes: lineHashes, diff: diff, units: units, rec: rec };

package/figma/library/pages/02-palettes.js

@@ -0,0 +1,40 @@
+// Palettes page: every Brand ramp, one column per color vision group.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var V = L.V, v = L.v, fill = L.fill, stroke = L.stroke, AL = L.AL, add = L.add, T = L.T, page = L.page, docFrame = L.docFrame, section = L.section, hex = L.hex;
+var p = await page('Palettes');
+var doc = await docFrame('Palettes', 'FOUNDATIONS', 'Palettes', 'The raw ramps the brand file makes, in the hidden Brand collection. Designs never use these directly: Theme points its jobs at them. Each column is one Brand group. Default is what most people see; the four vision groups are the same ramps retargeted so each color stays distinct for that kind of color vision. A hex marked • differs from Default.');
+doc.x = 0; doc.y = 400;
+var G = [['default', 'Default'], ['deuteranopia', 'Deuteranopia'], ['protanopia', 'Protanopia'], ['tritanopia', 'Tritanopia'], ['achromatopsia', 'Achromatopsia']];
+var PALS = [
+  ['neutral', 'Neutral', 'Grays toned by the brand. Surfaces, text and borders come from here.'],
+  ['primary', 'Primary', 'The main brand color. Usually the accent.'],
+  ['secondary', 'Secondary', ''], ['tertiary', 'Tertiary', ''], ['quaternary', 'Quaternary', ''],
+  ['info', 'Info', 'Status palettes. 500 is always at least 4.5:1 on paper.'], ['success', 'Success', ''], ['warning', 'Warning', ''], ['error', 'Error', ''],
+  ['data', 'Data colors', 'Named categorical colors for charts. Theme data/1 to data/20 point at these in an order each theme can change.']
+];
+function steps(pal) { return Object.keys(V).filter(function (k) { return k.indexOf('Brand:default/color/' + pal + '/') === 0 && k.split('/').length === 4; }).map(function (k) { return k.split('/')[3]; }); }
+function val(k) { return V[k] ? V[k].resolveForConsumer(doc).value : null; }
+for (var i = 0; i < PALS.length; i++) {
+  var pal = PALS[i][0];
+  var sec = await section(doc, PALS[i][1], PALS[i][2] || null);
+  var grid = AL('HORIZONTAL', { name: 'Columns', itemSpacing: 16 });
+  add(sec, [grid]); grid.layoutSizingHorizontal = 'FILL';
+  var st = steps(pal);
+  for (var g = 0; g < G.length; g++) {
+    var col = AL('VERTICAL', { name: G[g][1], itemSpacing: 4 });
+    add(grid, [col]); col.layoutSizingHorizontal = 'FILL';
+    add(col, [await T(G[g][1].toUpperCase(), 'eyebrow-condense', 'Theme:text/tertiary')]);
+    for (var s = 0; s < st.length; s++) {
+      var key = 'Brand:' + G[g][0] + '/color/' + pal + '/' + st[s];
+      var base = 'Brand:default/color/' + pal + '/' + st[s];
+      if (!V[key]) key = base;
+      var row = AL('HORIZONTAL', { name: st[s], itemSpacing: 10, counterAxisAlignItems: 'CENTER' });
+      add(col, [row]); row.layoutSizingHorizontal = 'FILL';
+      var sw = figma.createRectangle(); sw.name = 'Swatch'; sw.resize(56, 28); sw.cornerRadius = 4; fill(sw, key); stroke(sw, 'Theme:border/subtle', 1, 'OUTSIDE');
+      var h = hex(val(key)), diff = g > 0 && h !== hex(val(base));
+      add(row, [sw, await T(st[s], 'subtitle-condense', 'Theme:text/primary', 70), await T((diff ? '• ' : '') + h, 'code-condense', diff ? 'Theme:text/accent' : 'Theme:text/secondary')]);
+    }
+  }
+}
+return doc.id;

package/figma/library/pages/03-color.js

@@ -0,0 +1,126 @@
+// Color page: how the collections stack, every Theme job in light and dark, and the
+// Status × Emphasis grid.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var V = L.V, v = L.v, fill = L.fill, stroke = L.stroke, bind = L.bind, radius = L.radius, AL = L.AL, add = L.add, T = L.T, mode = L.mode, page = L.page, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider, unescape = L.unescape, ratio = L.ratio, resolved = L.resolved;
+await page('Color');
+var doc = await docFrame('Color', 'FOUNDATIONS', 'Color', 'Every color comes from a few brand inputs: seed colors, paper and ink. They are worked into ramps (see the Palettes page), and Theme names them by job. Pick a color by what it does, never by how it looks, and light, dark, high contrast and the vision themes follow on their own.');
+doc.x = 0; doc.y = 400;
+var groups = [
+  ['surface', 'Surfaces', 'Backgrounds, from the page up. Each one lifts content one level, and dark mode lifts by getting lighter.'],
+  ['text', 'Text', 'Body text is the darkest neutral. Secondary and tertiary step back but still pass AA on every surface. The ratio shown is against the page.'],
+  ['border', 'Borders', 'Control borders are 3:1 against the page so a field can be found before it is filled. Subtle lines are for inside a surface only.'],
+  ['fill', 'Fills', 'Neutral fills for tracks, chips, hovered rows and scrollbar thumbs.'],
+  ['interactive', 'Interactive', 'The accent that says "you can act on this". Tints are the quiet washes behind ghost controls and selected items.'],
+  ['status', 'Status', 'Error, warning, success and info, each with a darker step for text and a light step for backgrounds.'],
+  ['focus', 'Focus and overlay', 'The focus ring and the scrims behind modals.'],
+  ['content', 'Long-form content', 'Colors for prose: articles, help pages and rich text. Links, quotes, inline code, highlights, selection and scrollbars. Most point at a job above, so content follows the theme with the rest of the UI.']
+];
+var extra = { focus: ['overlay', 'modal'] };
+var created = [doc.id];
+for (var g = 0; g < groups.length; g++) {
+  var sec = await section(doc, groups[g][1], groups[g][2]);
+  var prefixes = [groups[g][0]].concat(extra[groups[g][0]] || []);
+  var head = hrow(sec); head.paddingTop = 0; head.paddingBottom = 8; divider(head);
+  add(head, [await T('LIGHT', 'eyebrow-condense', 'Theme:text/tertiary', 120), await T('DARK', 'eyebrow-condense', 'Theme:text/tertiary', 120), await T('TOKEN', 'eyebrow-condense', 'Theme:text/tertiary', 320), await T('USE IT FOR', 'eyebrow-condense', 'Theme:text/tertiary', 400)]);
+  head.children[3].layoutSizingHorizontal = 'FILL';
+  var keys = Object.keys(V).filter(function (k) { return prefixes.some(function (p) { return k.indexOf('Theme:' + p + '/') === 0; }); });
+  for (var r = 0; r < keys.length; r++) {
+    var k = keys[r], name = k.slice(6), kind = groups[g][0];
+    var row = hrow(sec); divider(row); row.name = name;
+    var notes = [];
+    for (var s = 0; s < 2; s++) {
+      var cell = AL('HORIZONTAL', { name: s ? 'Dark' : 'Light', primaryAxisAlignItems: 'CENTER', counterAxisAlignItems: 'CENTER', cornerRadius: 8, paddingTop: 12, paddingBottom: 12 });
+      fill(cell, 'Theme:surface/canvas'); stroke(cell, 'Theme:border/subtle', 1);
+      mode(cell, 'Theme', s ? 'Dark' : 'Light');
+      add(row, [cell]); cell.resize(120, 64); cell.counterAxisSizingMode = 'FIXED'; cell.primaryAxisSizingMode = 'FIXED';
+      var sw, bgKey = 'Theme:surface/canvas';
+      if (name.indexOf('text/') === 0 || name === 'content/prose-color' || name === 'content/link-color' || name === 'content/code-text' || name === 'content/blockquote-cite') {
+        sw = await T('Aa', 'title-amplify', k);
+        if (name.indexOf('text/on-') === 0) {
+          var bg = { 'text/on-primary': 'Theme:interactive/default', 'text/on-tint': 'Theme:interactive/tint', 'text/on-tint-strong': 'Theme:interactive/tint-active', 'text/on-inverse': 'Theme:fill/inverse', 'text/on-inverse-surface': 'Theme:surface/inverse' }[name];
+          fill(cell, bg); bgKey = bg;
+        }
+      } else if (kind === 'border' || /border|ring/.test(name)) {
+        sw = figma.createRectangle(); sw.resize(64, 36); sw.cornerRadius = 6; sw.fills = []; stroke(sw, k, 2);
+      } else {
+        sw = figma.createRectangle(); sw.resize(64, 36); sw.cornerRadius = 6; fill(sw, k); stroke(sw, 'Theme:border/subtle', 1, 'OUTSIDE');
+      }
+      sw.name = 'Swatch';
+      add(cell, [sw]);
+      if (sw.type === 'TEXT') notes.push((s ? 'Dark ' : 'Light ') + ratio(resolved(k, sw), resolved(bgKey, cell)).toFixed(1) + ':1');
+    }
+    var tok = AL('VERTICAL', { name: 'Token', itemSpacing: 4 });
+    add(tok, [await T(name, 'subtitle-base'), await T('var(--sl-' + name.replace(/\//g, '-') + ')', 'code-condense', 'Theme:text/tertiary')]);
+    if (notes.length) add(tok, [await T(notes.join('   '), 'body-condense', 'Theme:text/secondary')]);
+    add(row, [tok]); tok.resize(320, tok.height); tok.counterAxisSizingMode = 'FIXED';
+    var use = await T(unescape(v(k).description), 'body-base', 'Theme:text/secondary', 400);
+    add(row, [use]); use.layoutSizingHorizontal = 'FILL';
+  }
+  created.push(sec.id);
+}
+
+
+// How the layers fit, as a diagram
+var how = await section(doc, 'How the layers fit', 'Each collection aliases the one before it, so switching a mode on a frame flows down to everything inside. Hidden collections hold raw values; published ones are what you pick and switch.');
+doc.insertChild(1, how);
+async function box(name, state, modes, job) {
+  var b = AL('VERTICAL', { name: name, itemSpacing: 6, paddingTop: 16, paddingBottom: 16, paddingLeft: 16, paddingRight: 16, cornerRadius: 8 });
+  fill(b, state === 'Hidden' ? 'Theme:surface/tray' : 'Theme:surface/raised');
+  stroke(b, state === 'Hidden' ? 'Theme:border/subtle' : 'Theme:border/accent', state === 'Hidden' ? 1 : 2);
+  if (state === 'Hidden') b.dashPattern = [4, 4];
+  var top = AL('HORIZONTAL', { itemSpacing: 8, counterAxisAlignItems: 'CENTER' });
+  add(top, [await T(name, 'subtitle-base'), await T(state.toUpperCase(), 'eyebrow-minimize', state === 'Hidden' ? 'Theme:text/tertiary' : 'Theme:text/accent')]);
+  add(b, [top, await T(modes, 'selected-condense', 'Theme:text/primary', 196), await T(job, 'body-condense', 'Theme:text/secondary', 196)]);
+  b.resize(228, b.height);
+  return b;
+}
+async function arrow() { return await T('→', 'title-amplify', 'Theme:text/tertiary'); }
+async function lane(label, items, note) {
+  var l = AL('VERTICAL', { name: label + ' lane', itemSpacing: 12 });
+  var row = AL('HORIZONTAL', { name: 'Flow', itemSpacing: 12, counterAxisAlignItems: 'CENTER' });
+  for (var i = 0; i < items.length; i++) { if (i) add(row, [await arrow()]); add(row, [await box.apply(null, items[i])]); }
+  add(l, [await T(label.toUpperCase(), 'eyebrow-condense', 'Theme:text/tertiary'), row, await T(note, 'body-condense', 'Theme:text/secondary', 1000)]);
+  add(how, [l]);
+}
+await lane('Color', [
+  ['Brand', 'Hidden', 'One mode per look. Groups: default, deuteranopia, protanopia, tritanopia, achromatopsia, look', 'The ramps and 20 named data colors, a full set per group. look/ holds what changes between looks.'],
+  ['Theme', 'Published', 'Light, Dark, Light/Dark high contrast, 4 vision themes', 'The jobs: surface, text, border, fill, interactive, status, pairs, data/1-20.'],
+  ['Status', 'Published', 'Default, Info, Success, Warning, Error', 'What a control is about. Default is the brand accent; the rest are status palettes.'],
+  ['Emphasis', 'Published', 'Bold, Standard, Subtle, Quiet', 'How loud a control is. Components bind emphasis/bg, fg and border.']
+], 'Set Theme on the page frame. Set Status and Emphasis on a component. A bold warning button stays bold and warning when the page switches to dark or tritanopia, because both read through Theme.');
+await lane('Size', [
+  ['Scale', 'Hidden', 'One mode. Font sizes in desktop, tablet and mobile groups', 'The raw steps: space, radius, stroke, font size. Named by size, not by use.'],
+  ['Size', 'Published', 'Desktop, Tablet (768px), Mobile', 'Named uses (radius/control, gap/stack-md) and component sizes, each picking a Scale step.']
+], 'Set Size on the page frame. Type and spacing follow the screen width, like the fluid sizes in code.');
+
+// Status and emphasis grid, light and dark
+var se = await section(doc, 'Status and emphasis', 'Rows are Status modes, columns are Emphasis modes. Every cell is the same layer with two modes set. In code: data-status and data-emphasis. Default status uses the brand accent for bold and standard, and the neutral chrome for subtle and quiet. Brand files can swap any cell for a brand pair.');
+var ST = ['Default', 'Info', 'Success', 'Warning', 'Error'], EM = ['Bold', 'Standard', 'Subtle', 'Quiet'];
+var pair = AL('HORIZONTAL', { name: 'Light and dark', itemSpacing: 24 });
+add(se, [pair]); pair.layoutSizingHorizontal = 'FILL';
+for (var t = 0; t < 2; t++) {
+  var g = AL('VERTICAL', { name: t ? 'Dark' : 'Light', itemSpacing: 12, paddingTop: 24, paddingBottom: 24, paddingLeft: 24, paddingRight: 24, cornerRadius: 12 });
+  fill(g, 'Theme:surface/canvas'); stroke(g, 'Theme:border/subtle', 1);
+  mode(g, 'Theme', t ? 'Dark' : 'Light');
+  add(pair, [g]); g.layoutSizingHorizontal = 'FILL';
+  var hr = AL('HORIZONTAL', { name: 'Header', itemSpacing: 8 });
+  add(g, [hr]); hr.layoutSizingHorizontal = 'FILL';
+  add(hr, [await T(t ? 'DARK' : 'LIGHT', 'eyebrow-condense', 'Theme:text/accent', 80)]);
+  for (var e = 0; e < EM.length; e++) { var h = await T(EM[e].toUpperCase(), 'eyebrow-condense', 'Theme:text/tertiary'); add(hr, [h]); h.layoutSizingHorizontal = 'FILL'; }
+  for (var s = 0; s < ST.length; s++) {
+    var r = AL('HORIZONTAL', { name: ST[s], itemSpacing: 8, counterAxisAlignItems: 'CENTER' });
+    add(g, [r]); r.layoutSizingHorizontal = 'FILL';
+    add(r, [await T(ST[s], 'subtitle-condense', 'Theme:text/secondary', 80)]);
+    for (var e2 = 0; e2 < EM.length; e2++) {
+      var c = AL('HORIZONTAL', { name: ST[s] + ' / ' + EM[e2], primaryAxisAlignItems: 'CENTER', counterAxisAlignItems: 'CENTER', paddingTop: 8, paddingBottom: 8, paddingLeft: 12, paddingRight: 12 });
+      fill(c, 'Emphasis:emphasis/bg'); stroke(c, 'Emphasis:emphasis/border', 'Size:stroke/default'); radius(c, 'Size:button/radius');
+      mode(c, 'Status', ST[s]); mode(c, 'Emphasis', EM[e2]);
+      add(c, [await T(ST[s] === 'Default' ? 'Save' : ST[s], 'trigger-base', 'Emphasis:emphasis/fg')]);
+      add(r, [c]); c.layoutSizingHorizontal = 'FILL';
+    }
+  }
+}
+var parts = await T('Each level has six parts: bg, bg-hover, bg-active, fg, border, border-hover. Hover and pressed states bind the -hover and -active parts.', 'body-condense', 'Theme:text/secondary', 820);
+add(se, [parts]);
+return { how: how.id, grid: se.id };

package/figma/library/pages/04-type.js

@@ -0,0 +1,56 @@
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var V = L.V, COL = L.COL, TS = L.TS, v = L.v, fill = L.fill, AL = L.AL, add = L.add, T = L.T, unescape = L.unescape, mode = L.mode, page = L.page, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+await page('Type');
+var doc = await docFrame('Type', 'FOUNDATIONS', 'Type', 'Every style is named role first, then tier. The role is the job (title, body, label, trigger…); the tier sets the size, named for what it does to the text: minimize, condense, base, magnify, amplify, maximize. Every text layer uses a whole shared style. Each row shows one style at Mobile, Tablet and Desktop, the three Size modes; the samples follow the mode set on their column.');
+doc.x = 0; doc.y = 400;
+var byId = {}; Object.keys(V).forEach(function (k) { byId[V[k].id] = V[k]; });
+var MODES = ['Mobile', 'Tablet', 'Desktop'];
+function sizeIn(style, modeName) {
+  var b = style.boundVariables && style.boundVariables.fontSize; if (!b) return style.fontSize;
+  var m = COL['Size'].modes.filter(function (x) { return x.name === modeName; })[0].modeId, x = byId[b.id], val = x.valuesByMode[m];
+  while (val && val.type === 'VARIABLE_ALIAS') { var t = byId[val.id]; val = t.valuesByMode[m] !== undefined ? t.valuesByMode[m] : t.valuesByMode[Object.keys(t.valuesByMode)[0]]; }
+  return Math.round(val * 10) / 10;
+}
+function spec(s) {
+  var lh = s.lineHeight.unit === 'PERCENT' ? Math.round(s.lineHeight.value) + '%' : s.lineHeight.unit === 'PIXELS' ? s.lineHeight.value + 'px' : 'auto';
+  var sz = MODES.map(function (m) { return sizeIn(s, m); }), same = sz[0] === sz[2];
+  return s.fontName.family + ' ' + s.fontName.style + '  ·  ' + (same ? sz[0] + 'px' : sz.join(' / ') + 'px') + '  ·  ' + lh;
+}
+var ROLES = [
+  ['title', 'Title', 'Names something: a page, a section, a dialog, a card, a toast. Display family. Tiers: maximize for the page head, amplify for dialogs, drawers and sections, magnify for popovers and cards, base for toasts and accordion rows, condense for group headers.', 'Title'],
+  ['body', 'Body', 'Running text and UI copy. The default is body-base.', 'Body text and UI copy'],
+  ['label', 'Label', 'Form labels.', 'Field label'],
+  ['trigger', 'Trigger', 'Buttons, tabs and other things you press.', 'Button label'],
+  ['selected', 'Selected', 'The current tab, toggle or nav item: the same size as body, a heavier weight.', 'Selected tab'],
+  ['link', 'Link', 'Links in text. The same type as body: a link stands out by color and underline.', 'A link in text'],
+  ['subtitle', 'Subtitle', 'Subheads inside running text.', 'Subtitle'],
+  ['eyebrow', 'Eyebrow', 'Small uppercase labels above a group.', 'Eyebrow'],
+  ['code', 'Code', 'The mono family, so characters line up.', 'const size = 16;']
+];
+var ORDER = ['maximize', 'amplify', 'magnify', 'base', 'condense', 'minimize'];
+for (var i = 0; i < ROLES.length; i++) {
+  var role = ROLES[i][0];
+  var names = Object.keys(TS).filter(function (n) { return n.indexOf(role + '-') === 0; });
+  names.sort(function (a, b) { return ORDER.indexOf(a.split('-').pop()) - ORDER.indexOf(b.split('-').pop()); });
+  var sec = await section(doc, ROLES[i][1], ROLES[i][2]);
+  var head = hrow(sec); head.paddingTop = 0; head.paddingBottom = 8; divider(head);
+  add(head, [await T('STYLE', 'eyebrow-condense', 'Theme:text/tertiary', 260)]);
+  for (var m = 0; m < 3; m++) { var h = await T(MODES[m].toUpperCase(), 'eyebrow-condense', 'Theme:text/tertiary'); add(head, [h]); h.layoutSizingHorizontal = 'FILL'; }
+  for (var j = 0; j < names.length; j++) {
+    var s = TS[names[j]];
+    var row = hrow(sec); divider(row); row.name = names[j]; row.counterAxisAlignItems = 'MIN';
+    var lab = AL('VERTICAL', { name: 'Label', itemSpacing: 2 });
+    add(lab, [await T(names[j], 'subtitle-base'), await T(spec(s), 'body-condense', 'Theme:text/secondary', 260)]);
+    lab.resize(260, lab.height); lab.counterAxisSizingMode = 'FIXED';
+    add(row, [lab]);
+    var sample = role === 'title' ? { maximize: 'Page head', amplify: 'Dialog title', magnify: 'Card title', base: 'Toast title', condense: 'Group header' }[names[j].split('-').pop()] : ROLES[i][3];
+    for (var m = 0; m < 3; m++) {
+      var cell = AL('VERTICAL', { name: MODES[m] }); mode(cell, 'Size', MODES[m]);
+      add(row, [cell]); cell.layoutSizingHorizontal = 'FILL';
+      var t = await T(sample, names[j], role === 'link' ? 'Theme:content/link-color' : 'Theme:text/primary');
+      add(cell, [t]); t.layoutSizingHorizontal = 'FILL'; t.textAutoResize = 'HEIGHT';
+    }
+  }
+}
+return { doc: doc.id, h: Math.round(doc.height) };

package/figma/library/pages/05-scale.js

@@ -0,0 +1,58 @@
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var V = L.V, COL = L.COL, v = L.v, fill = L.fill, stroke = L.stroke, bind = L.bind, radius = L.radius, AL = L.AL, add = L.add, T = L.T, page = L.page, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+var p = await page('Scale');
+function raw(k) { var x = v(k); return Math.round(x.valuesByMode[Object.keys(x.valuesByMode)[0]] * 100) / 100; }
+var unit = raw('Scale:space/1');
+var doc = await docFrame('Scale', 'FOUNDATIONS', 'Scale', 'The raw steps, in the hidden Scale collection. They are named by size, not by use: space/4 is four base units, radius/md is a middle roundness. Designs pick from the Size page instead, where each use names the step it takes. Change the brand\'s base unit (' + unit + 'px) and every step moves together.');
+doc.x = 0; doc.y = 400;
+function keysOf(prefix) { return Object.keys(V).filter(function (k) { return k.indexOf('Scale:' + prefix + '/') === 0; }); }
+async function label(name, value, w) {
+  var box = AL('VERTICAL', { name: 'Label', itemSpacing: 2 });
+  add(box, [await T(name, 'subtitle-base'), await T(value, 'body-condense', 'Theme:text/secondary')]);
+  box.resize(w || 200, box.height); box.counterAxisSizingMode = 'FIXED';
+  return box;
+}
+var sp = await section(doc, 'Space', 'Multiples of the base unit. The name is the multiple, so space/4 is always 4 × ' + unit + 'px, whatever the brand.');
+var sk = keysOf('space').sort(function (a, b) { return parseFloat(a.split('/')[1].replace('-', '.')) - parseFloat(b.split('/')[1].replace('-', '.')); });
+for (var i = 0; i < sk.length; i++) {
+  var n = sk[i].split('/')[1].replace('-', '.');
+  var row = hrow(sp); row.paddingTop = 3; row.paddingBottom = 3; row.name = sk[i];
+  add(row, [await label(sk[i].slice(6), raw(sk[i]) + 'px  ·  ' + n + ' × unit')]);
+  var bar = figma.createRectangle(); bar.name = 'Bar'; bar.cornerRadius = 2; fill(bar, 'Theme:interactive/tint-active'); bar.resize(10, 14);
+  add(row, [bar]); bind(bar, 'width', sk[i]);
+}
+var rad = await section(doc, 'Radius', 'Roundness from square to the brand\'s largest. The Size page picks one for each job: controls, surfaces, modals.');
+var rg = AL('HORIZONTAL', { name: 'Radii', itemSpacing: 24, layoutWrap: 'WRAP', counterAxisSpacing: 32 }); add(rad, [rg]); rg.layoutSizingHorizontal = 'FILL';
+var rk = keysOf('radius');
+for (var i = 0; i < rk.length; i++) {
+  var cell = AL('VERTICAL', { name: rk[i], itemSpacing: 12 });
+  var sq = figma.createRectangle(); sq.name = 'Shape'; sq.resize(96, 72); fill(sq, 'Theme:interactive/tint'); stroke(sq, 'Theme:border/accent', 1.5);
+  radius(sq, rk[i]); add(cell, [sq, await label(rk[i].slice(6), raw(rk[i]) + 'px', 120)]);
+  add(rg, [cell]);
+}
+var st = await section(doc, 'Stroke', 'Line weights from thin to thick.');
+var stk = keysOf('stroke');
+for (var i = 0; i < stk.length; i++) {
+  var row = hrow(st); row.name = stk[i];
+  add(row, [await label(stk[i].slice(6), raw(stk[i]) + 'px')]);
+  var ln = figma.createRectangle(); ln.name = 'Line'; ln.resize(320, 40); ln.fills = []; ln.cornerRadius = 4; stroke(ln, 'Theme:border/strong', stk[i]);
+  add(row, [ln]);
+}
+var fs = await section(doc, 'Font size', 'A type scale from the brand\'s base size and ratio. Below the base, sizes are fixed so small text never shrinks further. From the base up they are fluid in code; Figma keeps three snapshots: desktop (1280px wide), tablet (768px) and mobile (320px). Each sample is bound to its step.');
+var head = hrow(fs); head.paddingTop = 0; divider(head);
+var W = ['desktop', 'tablet', 'mobile'];
+add(head, [await T('STEP', 'eyebrow-condense', 'Theme:text/tertiary', 120)]);
+for (var w = 0; w < 3; w++) { var h = await T(W[w].toUpperCase(), 'eyebrow-condense', 'Theme:text/tertiary'); add(head, [h]); h.layoutSizingHorizontal = 'FILL'; }
+var steps = keysOf('desktop/font-size').map(function (k) { return k.split('/').pop(); });
+for (var i = 0; i < steps.length; i++) {
+  var row = hrow(fs); divider(row); row.name = steps[i]; row.counterAxisAlignItems = 'MAX';
+  add(row, [await T(steps[i], 'subtitle-base', 'Theme:text/primary', 120)]);
+  for (var w = 0; w < 3; w++) {
+    var k = 'Scale:' + W[w] + '/font-size/' + steps[i];
+    var cell = AL('VERTICAL', { name: W[w], itemSpacing: 4 }); add(row, [cell]); cell.layoutSizingHorizontal = 'FILL';
+    var s = await T('Ag', 'title-base'); bind(s, 'fontSize', k);
+    add(cell, [s, await T(raw(k) + 'px', 'body-condense', 'Theme:text/secondary')]);
+  }
+}
+return { doc: doc.id, h: Math.round(doc.height) };

package/figma/library/pages/06-size.js

@@ -0,0 +1,111 @@
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+var V = L.V, COL = L.COL, v = L.v, fill = L.fill, stroke = L.stroke, bind = L.bind, radius = L.radius, AL = L.AL, add = L.add, T = L.T, unescape = L.unescape, page = L.page, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+var p = await page('Size');
+var doc = await docFrame('Size', 'FOUNDATIONS', 'Size', 'What designs use: each size named by its job. Every job picks a step from the Scale page, shown in the tag beside it, so a brand change moves everything in step. The Size collection has Desktop, Tablet and Mobile modes: set it on a frame and type and spacing follow. Figures are Desktop / Tablet / Mobile when they differ.');
+doc.name = 'Size'; doc.x = 0; doc.y = 400;
+var byId = {}, keyOf = {}; Object.keys(V).forEach(function (k) { byId[V[k].id] = V[k]; keyOf[V[k].id] = k; });
+var MODES = ['Desktop', 'Tablet', 'Mobile'];
+function num(k, modeName) {
+  var m = COL['Size'].modes.filter(function (x) { return x.name === modeName; })[0].modeId;
+  var x = v(k), val = x.valuesByMode[m];
+  while (val && val.type === 'VARIABLE_ALIAS') { var t = byId[val.id]; val = t.valuesByMode[m] !== undefined ? t.valuesByMode[m] : t.valuesByMode[Object.keys(t.valuesByMode)[0]]; }
+  return Math.round(val * 100) / 100;
+}
+function fig(k) { var a = MODES.map(function (m) { return num(k, m); }); return a[0] === a[1] && a[1] === a[2] ? a[0] + '' : a.join(' / '); }
+// The Scale step a use lands on, following aliases through other uses.
+function step(k) {
+  var m = COL['Size'].modes[0].modeId, val = v(k).valuesByMode[m], via = [];
+  while (val && val.type === 'VARIABLE_ALIAS') {
+    var key = keyOf[val.id];
+    if (key.indexOf('Scale:') === 0) return { step: key.slice(6).replace(/^desktop\//, ''), via: via };
+    via.push(key.slice(5)); var t = byId[val.id]; val = t.valuesByMode[m];
+  }
+  return { step: null, via: via };
+}
+async function tag(k) {
+  var s = step(k), box = AL('HORIZONTAL', { name: 'Tags', itemSpacing: 6, counterAxisAlignItems: 'CENTER' });
+  if (s.via.length) add(box, [await T('via ' + s.via.join(' → '), 'body-condense', 'Theme:text/tertiary')]);
+  var chip = AL('HORIZONTAL', { name: 'Scale step', paddingTop: 2, paddingBottom: 2, paddingLeft: 8, paddingRight: 8, cornerRadius: 999 });
+  fill(chip, s.step ? 'Theme:interactive/tint' : 'Theme:surface/tray');
+  add(chip, [await T(s.step ? 'Scale: ' + s.step : 'fixed', 'selected-condense', s.step ? 'Theme:text/on-tint' : 'Theme:text/secondary')]);
+  add(box, [chip]);
+  return box;
+}
+function keysOf(prefix) { return Object.keys(V).filter(function (k) { return k.indexOf('Size:' + prefix + '/') === 0; }); }
+async function label(k, w) {
+  var box = AL('VERTICAL', { name: 'Label', itemSpacing: 4 });
+  add(box, [await T(k.slice(5), 'subtitle-base'), await T(fig(k) + ' px', 'body-condense', 'Theme:text/secondary'), await tag(k)]);
+  box.resize(w || 260, box.height); box.counterAxisSizingMode = 'FIXED';
+  return box;
+}
+async function desc(k, w) { var d = unescape(v(k).description); return d ? await T(d, 'body-condense', 'Theme:text/tertiary', w || 480) : null; }
+var sp = await section(doc, 'Space', 'Spacing jobs for stacks and rows. Component padding and gaps are in the reference at the end.');
+var spk = keysOf('space');
+for (var i = 0; i < spk.length; i++) {
+  var row = hrow(sp); row.paddingTop = 6; row.paddingBottom = 6; row.name = spk[i];
+  add(row, [await label(spk[i])]);
+  var bar = figma.createRectangle(); bar.name = 'Bar'; bar.cornerRadius = 2; fill(bar, 'Theme:interactive/tint-active'); bar.resize(10, 16);
+  add(row, [bar]); bind(bar, 'width', spk[i]);
+  add(row, [await desc(spk[i])]);
+}
+var rad = await section(doc, 'Radius', 'Corners by job. A control, a surface and a modal each have their own radius, so changing the brand\'s roundness never makes a nested corner look wrong.');
+var rg = AL('HORIZONTAL', { name: 'Radii', itemSpacing: 24, layoutWrap: 'WRAP', counterAxisSpacing: 32 }); add(rad, [rg]); rg.layoutSizingHorizontal = 'FILL';
+var rk = keysOf('radius');
+for (var i = 0; i < rk.length; i++) {
+  var cell = AL('VERTICAL', { name: rk[i], itemSpacing: 12 });
+  var sq = figma.createRectangle(); sq.name = 'Shape'; sq.resize(96, 72); fill(sq, 'Theme:interactive/tint'); stroke(sq, 'Theme:border/accent', 1.5);
+  radius(sq, rk[i]); add(cell, [sq, await label(rk[i], 220), await desc(rk[i], 220)]);
+  add(rg, [cell]);
+}
+var st = await section(doc, 'Stroke', 'Line weights by job. Default is for control borders, emphasis for selected and focus states.');
+var sk = keysOf('stroke');
+for (var i = 0; i < sk.length; i++) {
+  var row = hrow(st); row.name = sk[i];
+  add(row, [await label(sk[i])]);
+  var ln = figma.createRectangle(); ln.name = 'Line'; ln.resize(240, 40); ln.fills = []; ln.cornerRadius = 4; stroke(ln, 'Theme:border/strong', sk[i]);
+  add(row, [ln, await desc(sk[i])]);
+}
+var ct = await section(doc, 'Controls and icons', 'Four control heights, each paired with its text tier and icon size: xs with minimize, sm with condense, md with base, lg with magnify. Every control in a row shares one height.');
+var hs = ['xs', 'sm', 'md', 'lg'], tiers = { xs: 'trigger-minimize', sm: 'trigger-condense', md: 'trigger-base', lg: 'trigger-magnify' };
+var crow = AL('HORIZONTAL', { name: 'Heights', itemSpacing: 24, counterAxisAlignItems: 'MAX' }); add(ct, [crow]);
+for (var i = 0; i < hs.length; i++) {
+  var col = AL('VERTICAL', { name: hs[i], itemSpacing: 12 });
+  var c = AL('HORIZONTAL', { name: 'Control', counterAxisAlignItems: 'CENTER' });
+  fill(c, 'Theme:surface/canvas'); stroke(c, 'Theme:border/control', 'Size:stroke/default'); radius(c, 'Size:radius/control');
+  bind(c, ['paddingLeft', 'paddingRight'], 'Size:control/padding-inline' + (hs[i] === 'md' ? '' : '-' + hs[i]));
+  add(c, [await T('Control ' + hs[i], tiers[hs[i]])]);
+  add(col, [c]); c.counterAxisSizingMode = 'FIXED'; bind(c, 'height', 'Size:control/height-' + hs[i]);
+  add(col, [await label('Size:control/height-' + hs[i], 200)]);
+  add(crow, [col]);
+}
+var irow = AL('HORIZONTAL', { name: 'Icons', itemSpacing: 24, counterAxisAlignItems: 'MAX' }); add(ct, [irow]);
+var ik = keysOf('icon-size');
+for (var i = 0; i < ik.length; i++) {
+  var col = AL('VERTICAL', { name: ik[i], itemSpacing: 12 });
+  var sq = figma.createRectangle(); sq.name = 'Icon box'; sq.cornerRadius = 2; fill(sq, 'Theme:text/primary'); sq.resize(16, 16);
+  add(col, [sq]); bind(sq, 'width', ik[i]); bind(sq, 'height', ik[i]);
+  add(col, [await label(ik[i], 200)]);
+  add(irow, [col]);
+}
+var ref = await section(doc, 'Spec reference', 'Every size job, grouped by the concept that uses it, with the Scale step it lands on. Components share these, so a field, a select and a number field are the same height and padding by construction.');
+var groups = {};
+Object.keys(V).forEach(function (k) { if (k.indexOf('Size:') !== 0) return; var g = k.slice(5).split('/')[0]; if (['space', 'radius', 'stroke', 'font-size', 'icon-size'].indexOf(g) !== -1) return; (groups[g] = groups[g] || []).push(k); });
+var gnames = Object.keys(groups);
+var cols3 = AL('HORIZONTAL', { name: 'Columns', itemSpacing: 40 }); add(ref, [cols3]); cols3.layoutSizingHorizontal = 'FILL';
+var colsN = [AL('VERTICAL', { itemSpacing: 32 }), AL('VERTICAL', { itemSpacing: 32 }), AL('VERTICAL', { itemSpacing: 32 })];
+colsN.forEach(function (c, i) { c.name = 'Column ' + (i + 1); add(cols3, [c]); c.layoutSizingHorizontal = 'FILL'; });
+var heights = [0, 0, 0];
+for (var g = 0; g < gnames.length; g++) {
+  var target = heights.indexOf(Math.min.apply(null, heights));
+  var box = AL('VERTICAL', { name: gnames[g], itemSpacing: 4 }); add(colsN[target], [box]); box.layoutSizingHorizontal = 'FILL';
+  add(box, [await T(gnames[g].toUpperCase(), 'eyebrow-condense', 'Theme:text/accent')]);
+  for (var j = 0; j < groups[gnames[g]].length; j++) {
+    var k = groups[gnames[g]][j], s = step(k);
+    var r = AL('HORIZONTAL', { name: k, itemSpacing: 8, paddingTop: 4, paddingBottom: 4 }); divider(r); add(box, [r]); r.layoutSizingHorizontal = 'FILL';
+    var nm = await T(k.slice(5 + gnames[g].length + 1), 'body-condense', 'Theme:text/primary'); add(r, [nm]); nm.layoutSizingHorizontal = 'FILL';
+    add(r, [await T(fig(k), 'body-condense', 'Theme:text/secondary'), await T(s.step || 'fixed', 'selected-condense', s.step ? 'Theme:text/accent' : 'Theme:text/tertiary')]);
+  }
+  heights[target] += groups[gnames[g]].length + 2;
+}
+return { doc: doc.id, h: Math.round(doc.height), groups: gnames.length };