@scattered-light/loomiere 0.5.3 → 0.7.0

package/figma/library/pages/18-custom/10-splitter.js

@@ -0,0 +1,100 @@
+// Custom: Splitter handle and the list-detail header. Run after the Badge scripts.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var V = C.V, COL = C.COL, v = C.v, fill = C.fill, stroke = C.stroke, bind = C.bind, radius = C.radius, add = C.add, T = C.T, mode = C.mode, page = C.page;
+var icon = C.icon, comp = C.comp, textProp = C.textProp, boolProp = C.boolProp, place = C.place, removeOld = C.removeOld, AL = C.AL;
+await page('Custom');
+var ES = {}; (await figma.getLocalEffectStylesAsync()).forEach(function (s) { ES[s.name] = s; });
+var XP = 'M 4 4 L 12 12 M 12 4 L 4 12';
+function num(k) { var x = v(k); var m = COL[k.split(':')[0]].modes[0].modeId, val = x.valuesByMode[m]; while (val && val.type === 'VARIABLE_ALIAS') { var t = Object.values(V).find(function (y) { return y.id === val.id; }); val = t.valuesByMode[Object.keys(t.valuesByMode)[0]]; } return val; }
+function frameSet(set) { fill(set, 'Theme:surface/canvas'); set.strokes = [{ type: 'SOLID', color: { r: 0.592, g: 0.278, b: 1 } }]; set.dashPattern = [6, 4]; set.strokeWeight = 1; set.cornerRadius = 8; set.clipsContent = false; }
+function grid(set, cols, colW, rowH) {
+  set.layoutMode = 'NONE';
+  set.children.forEach(function (c, i) { c.x = 24 + (i % cols) * colW; c.y = 24 + Math.floor(i / cols) * rowH; });
+  frameSet(set);
+  set.resize(24 + cols * colW, 24 + Math.ceil(set.children.length / cols) * rowH);
+}
+function setP(i, props) { var p = {}; Object.keys(i.componentProperties).forEach(function (k) { var b = k.split('#')[0]; if (props[b] !== undefined) p[k] = props[b]; }); i.setProperties(p); return i; }
+
+var ORIENT = ['Horizontal', 'Vertical'];
+var STATES = ['Default', 'Hover', 'Dragging', 'Focus', 'Disabled'];
+var GRIPS = ['Off', 'On'];
+var hit = num('Size:splitter/handle-hit-size');
+var lineW = num('Size:splitter/handle-size');
+var grip = num('Size:splitter/grip-size');
+removeOld('Splitter handle');
+var handles = [];
+for (var o = 0; o < ORIENT.length; o++) for (var s = 0; s < STATES.length; s++) for (var g = 0; g < GRIPS.length; g++) {
+  var orient = ORIENT[o], st = STATES[s], gripOn = GRIPS[g] === 'On';
+  var horizontal = orient === 'Horizontal';
+  var w = horizontal ? hit : 200, h = horizontal ? 160 : hit;
+  var c = comp('Orientation=' + orient + ', State=' + st + ', Grip=' + GRIPS[g]);
+  c.layoutMode = 'NONE';
+  c.resize(w, h);
+  if (horizontal) bind(c, 'width', 'Size:splitter/handle-hit-size');
+  else bind(c, 'height', 'Size:splitter/handle-hit-size');
+  var strong = st === 'Hover' || st === 'Dragging';
+  var line = figma.createRectangle(); line.name = 'Line';
+  fill(line, strong ? 'Theme:border/strong' : 'Theme:border/default');
+  if (horizontal) { line.resize(lineW, h); line.x = Math.round((w - lineW) / 2); line.y = 0; bind(line, 'width', 'Size:splitter/handle-size'); }
+  else { line.resize(w, lineW); line.x = 0; line.y = Math.round((h - lineW) / 2); bind(line, 'height', 'Size:splitter/handle-size'); }
+  c.appendChild(line);
+  if (gripOn) {
+    var dots = figma.createFrame(); dots.name = 'Grip'; dots.fills = []; dots.layoutMode = horizontal ? 'VERTICAL' : 'HORIZONTAL'; dots.itemSpacing = grip; dots.primaryAxisAlignItems = 'CENTER';
+    for (var d = 0; d < 3; d++) {
+      var dot = figma.createEllipse(); dot.resize(grip, grip); bind(dot, ['width', 'height'], 'Size:splitter/grip-size'); fill(dot, 'Theme:border/strong'); dots.appendChild(dot);
+    }
+    c.appendChild(dots);
+    dots.x = Math.round((w - dots.width) / 2); dots.y = Math.round((h - dots.height) / 2);
+  }
+  if (st === 'Focus') await c.setEffectStyleIdAsync(ES['focus/ring'].id);
+  handles.push(c);
+}
+var handleSet = figma.combineAsVariants(handles, figma.currentPage); handleSet.name = 'Splitter handle';
+grid(handleSet, GRIPS.length, 240, 200);
+handleSet.description = 'The separator between splitter panels. Orientation is the splitter\'s: Horizontal is a vertical bar. The line is stroke/default (border/strong on hover and while dragging). The component is the touch target, handle-hit-size across. Grip adds three dots. Focus uses the shared focus ring. Disabled does not move.';
+place(handleSet);
+
+var BTN = await C.setOn('Buttons', 'Button');
+function button(variant, props) {
+  var child = BTN.children.find(function (n) { return n.name === variant; });
+  if (!child) throw new Error('Button ' + variant);
+  return setP(child.createInstance(), props || {});
+}
+function closeX() {
+  var iconSize = num('Size:icon-button/size');
+  var b = AL('HORIZONTAL', { name: 'Close', primaryAxisAlignItems: 'CENTER', counterAxisAlignItems: 'CENTER' });
+  b.resize(iconSize, iconSize); b.primaryAxisSizingMode = 'FIXED'; b.counterAxisSizingMode = 'FIXED';
+  bind(b, ['width', 'height'], 'Size:icon-button/size'); radius(b, 'Size:icon-button/radius');
+  add(b, [icon('X', XP, 16, 'Theme:text/tertiary')]);
+  return b;
+}
+removeOld('Detail header');
+var headers = [];
+for (var lead of ['Close', 'Back']) {
+  var head = comp('Leading=' + lead);
+  head.counterAxisAlignItems = 'CENTER';
+  // 420 is the row width. There is no width token: the detail's share is a percent.
+  // resize() flips the axis modes. Height then hugs the padding and the title.
+  head.resize(420, num('Size:list-detail/header-padding'));
+  head.primaryAxisSizingMode = 'FIXED';
+  head.counterAxisSizingMode = 'AUTO';
+  fill(head, 'Theme:surface/raised');
+  bind(head, 'itemSpacing', 'Size:list-detail/header-gap');
+  bind(head, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'], 'Size:list-detail/header-padding');
+  if (lead === 'Back') add(head, [button('Emphasis=Quiet, Size=md, State=Default, Content=Label', { Label: 'Back' })]);
+  var title = await T('Transaction 1042', 'title-condense', 'Theme:text/primary'); title.name = 'Title';
+  add(head, [title]); title.layoutSizingHorizontal = 'FILL';
+  var actions = AL('HORIZONTAL', { name: 'Actions', counterAxisAlignItems: 'CENTER' });
+  bind(actions, 'itemSpacing', 'Size:space/2');
+  add(actions, [button('Emphasis=Quiet, Size=md, State=Default, Content=Label', { Label: 'Edit' })]);
+  add(head, [actions]);
+  if (lead === 'Close') add(head, [closeX()]);
+  headers.push(head);
+}
+var headerSet = figma.combineAsVariants(headers, figma.currentPage); headerSet.name = 'Detail header';
+grid(headerSet, 1, 520, 96);
+textProp(headerSet, 'Title', 'Transaction 1042', 'Title');
+boolProp(headerSet, 'Actions', true, 'Actions');
+headerSet.description = 'The header of a list detail pane. Title is title-condense, because this pane shares the view with the list. Actions is an optional slot (a quiet Button). Close is the quiet X; Back replaces it on the narrow page. Drawer mode uses the Drawer title and close instead of this header.';
+place(headerSet);

package/figma/library/pages/18-custom/11-splitter-labels.js

@@ -0,0 +1,8 @@
+// Custom: headers for the Splitter handle and Detail header sets. Run after 10.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+await C.page('Custom');
+return await C.labelSets({
+  'Splitter handle': 'Drag or use the arrow keys to resize the panel beside it. The line is one stroke. The component is the touch target. Grip is off unless the handle asks for it.',
+  'Detail header': 'The title of an open item, optional actions, and Close. Back replaces Close when the detail takes the whole page. A drawer uses the Drawer title instead.',
+});

package/figma/library/pages/18-custom/12-splitter-doc.js

@@ -0,0 +1,92 @@
+// Splitter and list detail doc. Run after 10 and 11. Sits clear of the Badge doc.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var K = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+await K.page('Custom');
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docKit'))(figma);
+var AL = L.AL, add = L.add, T = L.T, fill = L.fill, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+var inst = L.inst, notes = L.notes, captioned = L.captioned, usage = L.usage, stage = L.stage;
+function setP(i, props) { var p = {}; Object.keys(i.componentProperties).forEach(function (k) { var b = k.split('#')[0]; if (props[b] !== undefined) p[k] = props[b]; }); i.setProperties(p); return i; }
+async function fromPage(pageName, setName, variant, props) {
+  var set = await L.setOn(pageName, setName);
+  await K.page('Custom');
+  var child = set.children.find(function (n) { return n.name === variant; });
+  if (!child) throw new Error(setName + ' ' + variant);
+  return setP(child.createInstance(), props || {});
+}
+
+var doc = await docFrame('Splitter', 'COMPONENTS', 'Splitter and list detail', 'Splitter resizes regions that sit side by side or stacked. List detail shows one item next to its list, and becomes a drawer or a page when the container is narrow. Use Dialog when the detail has to block the list.');
+doc.x = 1600; doc.y = 400;
+
+var pick = await section(doc, 'Choosing', 'Start from whether the person is resizing regions, or reading one item.');
+var picks = [
+  ['Resize two or more regions', 'Splitter', 'A sidebar, a documents column, a stacked editor.'],
+  ['Read one item from a list', 'List detail', 'Beside the list when there is room. A drawer or a page when there is not.'],
+  ['Block the page for a task', 'Dialog', 'The detail has to be finished before the list can be used.'],
+];
+var pt = AL('VERTICAL', { name: 'Picker' }); add(pick, [pt]); pt.layoutSizingHorizontal = 'FILL';
+for (var i = 0; i < picks.length; i++) { var r = hrow(pt); divider(r); add(r, [await T(picks[i][0], 'body-base', 'Theme:text/primary', 380), await T(picks[i][1], 'subtitle-base', 'Theme:text/accent', 200), await T(picks[i][2], 'body-condense', 'Theme:text/secondary', 520)]); }
+
+var look = await section(doc, 'Splitter handle', 'One stroke, with a touch target around it. Horizontal is a vertical bar. Grip is off unless the handle asks for it.');
+var s1 = stage(look, 'States');
+add(s1, [await captioned(inst('Splitter handle', 'Orientation=Horizontal, State=Default, Grip=Off'), 'Default')]);
+add(s1, [await captioned(inst('Splitter handle', 'Orientation=Horizontal, State=Hover, Grip=Off'), 'Hover')]);
+add(s1, [await captioned(inst('Splitter handle', 'Orientation=Horizontal, State=Dragging, Grip=On'), 'Dragging, grip')]);
+add(s1, [await captioned(inst('Splitter handle', 'Orientation=Vertical, State=Focus, Grip=Off'), 'Focus')]);
+add(s1, [await captioned(inst('Splitter handle', 'Orientation=Vertical, State=Disabled, Grip=Off'), 'Disabled')]);
+await usage(look, ['A sidebar and the page, or a list and its detail.', 'A documents column that can collapse.', 'A stacked editor and preview.'], ['A divider nobody can drag. Use Separator.', 'Resizing text or a single control. Use the control.', 'More than one filler panel. One region takes the leftover space.']);
+await notes(look, [
+  ['Line', 'splitter/handle-size · border/default', 'One stroke, the same hairline as Separator.'],
+  ['Hit area', 'a11y/min-target · splitter/handle-hit-size', '24px for a pointer, on the next panel. 44px when the pointer is coarse.'],
+  ['Hover', 'border/strong', 'Also while dragging, and when the panel is collapsed.'],
+  ['Grip', 'splitter/grip-size · border/strong', 'Three dots. Off unless the handle asks for it.'],
+  ['Keys', 'splitter/key-step · key-step-large', 'Arrows move 5%. Shift moves 10%.'],
+  ['Focus', 'focus/ring', 'The shared ring. Home and End jump to min and max.'],
+]);
+
+var layouts = await section(doc, 'List detail', 'The list stays on the page. The detail sits on surface/raised, with the handle as the only divider. Narrow, it is a drawer or it replaces the list.');
+async function layoutFrame(name, wide) {
+  var frame = AL(wide ? 'HORIZONTAL' : 'VERTICAL', { name: name, itemSpacing: 0 });
+  frame.resize(wide ? 880 : 420, 360);
+  frame.primaryAxisSizingMode = 'FIXED';
+  frame.counterAxisSizingMode = 'FIXED';
+  frame.clipsContent = true;
+  fill(frame, 'Theme:surface/canvas');
+  return frame;
+}
+var split = await layoutFrame('Split', true);
+var table = await fromPage('Display', 'Table', 'Content=Data');
+add(split, [table]); table.layoutSizingHorizontal = 'FILL'; table.layoutSizingVertical = 'FILL';
+var bar = inst('Splitter handle', 'Orientation=Horizontal, State=Default, Grip=Off');
+add(split, [bar]); bar.layoutSizingVertical = 'FILL';
+var detail = AL('VERTICAL', { name: 'Detail', itemSpacing: 0 });
+fill(detail, 'Theme:surface/raised');
+detail.resize(360, 360); detail.layoutSizingVertical = 'FILL';
+var header = setP(inst('Detail header', 'Leading=Close'), { Title: 'Transaction 1042' });
+add(detail, [header]); header.layoutSizingHorizontal = 'FILL';
+var body = await T('A note about this transaction. The list stays visible beside it.', 'body-base', 'Theme:text/secondary', 320);
+add(detail, [body]); body.layoutSizingHorizontal = 'FILL';
+add(split, [detail]);
+
+var drawerFrame = await layoutFrame('Drawer', false);
+var table2 = await fromPage('Display', 'Table', 'Content=Data');
+add(drawerFrame, [table2]); table2.layoutSizingHorizontal = 'FILL';
+var drawer = await fromPage('Overlays', 'Drawer', 'Side=Right');
+add(drawerFrame, [drawer]);
+
+var pageFrame = await layoutFrame('Page', false);
+var back = setP(inst('Detail header', 'Leading=Back'), { Title: 'Transaction 1042', Actions: false });
+add(pageFrame, [back]); back.layoutSizingHorizontal = 'FILL';
+var pageBody = await T('The list stays mounted underneath, so Back returns to the same scroll position.', 'body-base', 'Theme:text/secondary', 360);
+add(pageFrame, [pageBody]); pageBody.layoutSizingHorizontal = 'FILL';
+
+var s2 = stage(layouts, 'Layouts');
+add(s2, [await captioned(split, 'Split'), await captioned(drawerFrame, 'Drawer'), await captioned(pageFrame, 'Page')]);
+await notes(layouts, [
+  ['Switch', 'list-detail/split-min-width', '720px of this container, not the window.'],
+  ['Detail', 'list-detail/detail-default-size', '45%, so the list keeps about 55%.'],
+  ['Limits', 'detail-min-size · detail-max-size', '35% to 65%, so neither side disappears.'],
+  ['Header', 'header-gap · header-padding · title-condense', 'A pane title, not a dialog title.'],
+  ['Surface', 'surface/raised', 'One step off the page. The drawer keeps surface/modal.'],
+  ['List', 'page surface', 'The selected row uses the item selected state.'],
+]);
+return { id: doc.id, h: Math.round(doc.height), overflow: L.overflow(doc) };

package/figma/library/pages/18-custom/13-empty-state.js

@@ -0,0 +1,114 @@
+// Custom: Empty state. Kind × Size. Description and Actions are booleans. Media is an instance swap.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+var V = C.V, COL = C.COL, v = C.v, fill = C.fill, bind = C.bind, radius = C.radius, add = C.add, T = C.T, mode = C.mode, page = C.page;
+var icon = C.icon, comp = C.comp, textProp = C.textProp, boolProp = C.boolProp, place = C.place, removeOld = C.removeOld;
+await page('Custom');
+var buttons = await C.setOn('Buttons', 'Button');
+function num(k) { var x = v(k); var m = COL[k.split(':')[0]].modes[0].modeId, val = x.valuesByMode[m]; while (val && val.type === 'VARIABLE_ALIAS') { var t = Object.values(V).find(function (y) { return y.id === val.id; }); val = t.valuesByMode[Object.keys(t.valuesByMode)[0]]; } return val; }
+function frameSet(set, cols, colW, rowH) {
+  set.layoutMode = 'NONE';
+  set.children.forEach(function (c, i) { c.x = 24 + (i % cols) * colW; c.y = 24 + Math.floor(i / cols) * rowH; });
+  fill(set, 'Theme:surface/canvas'); set.strokes = [{ type: 'SOLID', color: { r: 0.592, g: 0.278, b: 1 } }]; set.dashPattern = [6, 4]; set.strokeWeight = 1; set.cornerRadius = 8; set.clipsContent = false;
+  set.resize(24 + cols * colW, 24 + Math.ceil(set.children.length / cols) * rowH);
+}
+function button(emphasis, label) {
+  var variant = buttons.children.filter(function (n) { return n.name === 'Emphasis=' + emphasis + ', Size=md, State=Default, Content=Label'; })[0];
+  var i = variant.createInstance();
+  var key = Object.keys(i.componentProperties).filter(function (k) { return k.split('#')[0] === 'Label'; })[0];
+  if (key) { var next = {}; next[key] = label; i.setProperties(next); }
+  return i;
+}
+
+// Glyphs the Media slot swaps. Unselected is text/tertiary; the others follow Emphasis, so Status tints them.
+var PATHS = {
+  Start: 'M 2 7 L 8 11 L 14 7 M 2 7 L 2 14 L 14 14 L 14 7',
+  'No results': 'M 4 4 L 9 4 L 11 7 L 9 10 L 4 10 L 2 7 Z M 10 9 L 14 13 M 3 13 L 12 4',
+  Error: 'M 8 2 L 14 13 L 2 13 Z M 8 6 L 8 9 M 8 11 L 8 12',
+  Done: 'M 3 8 L 7 12 L 13 4',
+  'No access': 'M 5 7 L 5 4 L 11 4 L 11 7 M 3 7 L 13 7 L 13 14 L 3 14 Z',
+  Unselected: 'M 5 2 L 5 9 L 7 7 L 10 12 L 12 11 L 9 6 L 12 6 Z',
+};
+var KINDS = ['Start', 'No results', 'Error', 'Done', 'No access', 'Unselected'];
+var SIZES = [['Compact', 'compact', 'condense'], ['Standard', 'standard', 'magnify'], ['Spacious', 'spacious', 'maximize']];
+var STATUS = { Error: 'Error', Done: 'Success' };
+
+removeOld('Empty state glyph');
+var glyphComps = [];
+for (var g = 0; g < KINDS.length; g++) {
+  var gk = KINDS[g];
+  var gc = comp('Kind=' + gk);
+  gc.primaryAxisAlignItems = 'CENTER'; gc.counterAxisAlignItems = 'CENTER';
+  add(gc, [icon('Icon', PATHS[gk], 16, gk === 'Unselected' ? 'Theme:text/tertiary' : 'Emphasis:emphasis/fg')]);
+  glyphComps.push(gc);
+}
+var glyphSet = figma.combineAsVariants(glyphComps, figma.currentPage);
+glyphSet.name = 'Empty state glyph';
+frameSet(glyphSet, KINDS.length, 80, 64);
+glyphSet.description = 'The mark inside an empty state. Swap it when the app brings its own picture. Unselected stays text/tertiary. The others follow Emphasis and Status.';
+place(glyphSet);
+
+function glyphFor(kind) {
+  var node = glyphSet.children.filter(function (n) { return n.name === 'Kind=' + kind; })[0].createInstance();
+  node.name = 'Glyph';
+  return node;
+}
+
+removeOld('Empty state');
+var comps = [];
+for (var k = 0; k < KINDS.length; k++) for (var s = 0; s < SIZES.length; s++) {
+  var kind = KINDS[k], sizeName = SIZES[s][0], sizeKey = SIZES[s][1], tier = SIZES[s][2];
+  var circle = sizeName !== 'Compact' && kind !== 'Unselected';
+  var c = comp('Kind=' + kind + ', Size=' + sizeName, sizeName === 'Compact' ? 'HORIZONTAL' : 'VERTICAL');
+  c.primaryAxisAlignItems = 'CENTER'; c.counterAxisAlignItems = 'CENTER';
+  bind(c, ['paddingTop', 'paddingBottom'], 'Size:empty/padding-block/' + sizeKey);
+  bind(c, ['paddingLeft', 'paddingRight'], 'Size:empty/padding-inline/' + sizeKey);
+  bind(c, 'itemSpacing', 'Size:empty/gap/' + sizeKey);
+  var media = figma.createFrame(); media.name = 'Media'; media.layoutMode = 'HORIZONTAL';
+  media.primaryAxisAlignItems = 'CENTER'; media.counterAxisAlignItems = 'CENTER'; media.fills = [];
+  if (circle) {
+    mode(media, 'Emphasis', 'Subtle');
+    if (STATUS[kind]) mode(media, 'Status', STATUS[kind]);
+    fill(media, 'Emphasis:emphasis/bg');
+    radius(media, 'Size:radius/pill');
+    var d = num('Size:empty/media-size/' + sizeKey);
+    media.resize(d, d);
+    bind(media, ['width', 'height'], 'Size:empty/media-size/' + sizeKey);
+    media.primaryAxisSizingMode = 'FIXED'; media.counterAxisSizingMode = 'FIXED';
+  }
+  var glyph = glyphFor(kind);
+  mode(glyph, 'Emphasis', 'Subtle');
+  if (STATUS[kind]) mode(glyph, 'Status', STATUS[kind]);
+  var mark = num('Size:icon-size/' + tier);
+  glyph.resize(mark, mark);
+  add(media, [glyph]);
+  add(c, [media]);
+  var text = figma.createFrame(); text.name = 'Text'; text.layoutMode = 'VERTICAL'; text.itemSpacing = num('Size:empty/text-gap/' + sizeKey);
+  bind(text, 'itemSpacing', 'Size:empty/text-gap/' + sizeKey);
+  text.primaryAxisAlignItems = 'CENTER'; text.counterAxisAlignItems = 'CENTER'; text.fills = [];
+  var titleStyle = sizeName === 'Spacious' ? 'title-magnify' : sizeName === 'Compact' ? 'subtitle-condense' : 'title-condense';
+  if (kind === 'Unselected') titleStyle = sizeName === 'Spacious' ? 'title-condense' : 'subtitle-minimize';
+  var title = await T('Nothing here yet', titleStyle, 'Theme:text/primary', 220); title.name = 'Title';
+  var descStyle = sizeName === 'Compact' ? 'body-condense' : 'body-base';
+  var desc = await T('Add the first one to get started.', descStyle, 'Theme:text/secondary', 220); desc.name = 'Description';
+  add(text, [title, desc]);
+  add(c, [text]);
+  var actions = figma.createFrame(); actions.name = 'Actions'; actions.layoutMode = 'HORIZONTAL'; actions.itemSpacing = num('Size:empty/actions-gap');
+  bind(actions, 'itemSpacing', 'Size:empty/actions-gap');
+  actions.primaryAxisAlignItems = 'CENTER'; actions.fills = [];
+  add(actions, [button(kind === 'Start' ? 'Bold' : 'Standard', kind === 'Start' ? 'Create' : 'Retry')]);
+  add(c, [actions]);
+  comps.push(c);
+}
+var set = figma.combineAsVariants(comps, figma.currentPage); set.name = 'Empty state';
+frameSet(set, SIZES.length, 300, 220);
+textProp(set, 'Title', 'Nothing here yet', 'Title');
+textProp(set, 'Description', 'Add the first one to get started.', 'Description');
+boolProp(set, 'Description', true, 'Description');
+boolProp(set, 'Actions', true, 'Actions');
+var swap = set.addComponentProperty('Media', 'INSTANCE_SWAP', glyphSet.children[0].id);
+set.findAll(function (n) { return n.type === 'INSTANCE' && n.name === 'Glyph'; }).forEach(function (n) {
+  n.componentPropertyReferences = Object.assign({}, n.componentPropertyReferences, { mainComponent: swap });
+});
+set.description = 'Nothing to show yet. Kind sets the icon and, for Error and Done, the Status mode on the media. Size is compact, standard or spacious. Description and Actions can be hidden. Media swaps for a picture the app owns. Title and description are one text value across the set; set them on the instance.';
+place(set);

package/figma/library/pages/18-custom/14-empty-state-labels.js

@@ -0,0 +1,8 @@
+// Custom: headers for the empty state sets. Run after 13.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var C = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'compHelpers'))(figma);
+await C.page('Custom');
+return await C.labelSets({
+  'Empty state': 'Nothing to show. Kind sets the icon and the media tone. Size is where it sits. Description and Actions can be turned off. Media swaps for a picture.',
+  'Empty state glyph': 'The mark the Media slot swaps. Unselected stays tertiary. The others follow Emphasis and Status.',
+});

package/figma/library/pages/18-custom/15-empty-state-doc.js

@@ -0,0 +1,58 @@
+// Custom: Empty state doc. Run after 13 and 14. Not named Custom, so it does not replace the Badge doc.
+var AF = Object.getPrototypeOf(async function () {}).constructor;
+var K = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docHelpers'))(figma);
+await K.page('Custom');
+var L = await new AF('figma', figma.root.getSharedPluginData('loomiere', 'docKit'))(figma);
+var AL = L.AL, add = L.add, T = L.T, docFrame = L.docFrame, section = L.section, hrow = L.hrow, divider = L.divider;
+var inst = L.inst, notes = L.notes, captioned = L.captioned, usage = L.usage, stage = L.stage;
+function ES(kind, size) { return inst('Empty state', 'Kind=' + kind + ', Size=' + (size || 'Standard')); }
+
+var doc = await docFrame('Empty state', 'COMPONENTS', 'Empty state', 'One block for every time there is nothing to show. The kind changes the icon and the tone of the circle, not the layout. Write the words yourself. Components sit to the right.');
+doc.x = 1600; doc.y = 400;
+
+var pick = await section(doc, 'Choosing', 'Start from what happened, then pick the kind. The words are yours.');
+var picks = [
+  ['Nothing has been created yet', 'Start', 'A bold action that creates the first one.'],
+  ['A search or filter matched nothing', 'No results', 'Clear the filters. Announced when it appears.'],
+  ['The data could not load', 'Error', 'Retry. Quiet on arrival unless you ask it to shout.'],
+  ['The list was cleared on purpose', 'Done', 'Usually no action. Announced.'],
+  ['This person cannot see it', 'No access', 'Request access. No jokes.'],
+  ['A detail pane before a choice', 'Unselected', 'No action. Quieter than the list beside it.'],
+];
+var pt = AL('VERTICAL', { name: 'Picker' }); add(pick, [pt]); pt.layoutSizingHorizontal = 'FILL';
+for (var i = 0; i < picks.length; i++) {
+  var r = hrow(pt); divider(r);
+  add(r, [await T(picks[i][0], 'body-base', 'Theme:text/primary', 380), await T(picks[i][1], 'subtitle-base', 'Theme:text/accent', 160), await T(picks[i][2], 'body-condense', 'Theme:text/secondary', 480)]);
+}
+
+var look = await section(doc, 'Kinds', 'Standard size. Error and Done tint the circle through the Status mode. The title stays the normal text color.');
+var s1 = stage(look, 'Kinds');
+for (var k = 0; k < picks.length; k++) add(s1, [await captioned(ES(picks[k][1], 'Standard'), picks[k][1])]);
+var s2 = stage(look, 'Sizes');
+for (var z of ['Compact', 'Standard', 'Spacious']) add(s2, [await captioned(ES('No results', z), z)]);
+await usage(look,
+  ['A table body that kept its header, with a compact empty state in the spanning cell.', 'A popup list, compact, inside Combobox.Empty, Autocomplete.Empty or Menu.Empty.', 'A page or a pane at standard or spacious.', 'The detail side of a split view, kind unselected, before a row is picked.'],
+  ['A toast. That is news about something that just happened.', 'A warning above content that is still there. Use a notice.', 'A joke on an error or on no access.', 'A title that only says "Oops". Say what is empty.']);
+await notes(look, [
+  ['Compact', 'empty/padding-block/compact · gap/compact', 'A row: icon, text, actions. No circle.'],
+  ['Standard', 'empty/media-size/standard · title-condense', 'A pane. Circle around a magnify icon.'],
+  ['Spacious', 'empty/media-size/spacious · title-magnify', 'A page. More space above.'],
+  ['Description', 'measure narrow, 45ch', 'One sentence. The cap is a text measure, not a Size variable.'],
+  ['Circle', 'emphasis/bg · emphasis/fg · radius/pill', 'Subtle. Status or a parent color recolors it.'],
+  ['Title', 'text/primary', 'Never the error color. The words have to stay readable.'],
+  ['Description text', 'text/secondary', 'The second line.'],
+  ['Actions', 'empty/actions-gap', 'First is the main one. Bold for Start, standard otherwise, quiet for a second action.'],
+]);
+
+var write = await section(doc, 'Writing', 'The title says what is empty. The description says what to do next. The action is a verb.');
+var lines = [
+  ['Title', 'No invoices yet', 'Not "Oops" and not a joke.'],
+  ['Description', 'Create the first one and it will show up here.', 'One sentence.'],
+  ['Action', 'Create invoice', 'A verb. Clear filters, Retry, Request access.'],
+];
+var wt = AL('VERTICAL', { name: 'Writing rows' }); add(write, [wt]); wt.layoutSizingHorizontal = 'FILL';
+for (var w = 0; w < lines.length; w++) {
+  var wr = hrow(wt); divider(wr);
+  add(wr, [await T(lines[w][0], 'subtitle-base', 'Theme:text/primary', 180), await T(lines[w][1], 'body-base', 'Theme:text/primary', 420), await T(lines[w][2], 'body-condense', 'Theme:text/secondary', 420)]);
+}
+return { id: doc.id, h: Math.round(doc.height), overflow: L.overflow(doc) };