sign-off-axi 0.6.7 → 0.6.8

package/dist/cli.js

@@ -3443,7 +3443,9 @@ async function route(req) {
         const frame = value?.startsWith('gallery.') && d?.guided ? galleryFrames(d)[Number(value.slice(8))] : undefined;
         const mock = diagram || frame ? (diagram ?? frame).src : value ? d?.mocks?.find((m) => m.value === value)?.path : value === '' && d?.view;
         try {
-            const path = rest.map(decodeURIComponent).join('/'), type = assetTypes[extname(path).toLowerCase()];
+            const path = rest.map(decodeURIComponent).join('/');
+            const download = frame && d?.sections?.some((s) => s.blocks?.some((b) => b.type === 'file' && b.src === frame.src));
+            const type = download ? 'application/octet-stream' : assetTypes[extname(path).toLowerCase()];
             if (!mock || !type)
                 return [404, { error: 'Mock is unavailable' }];
             const actual = under(dirname(under(dirname(file), mockFile(mock))), path);
@@ -3454,6 +3456,8 @@ async function route(req) {
             const pinned = diagram ?? frame;
             if (pinned?.sha256 && (actual !== under(dirname(file), mockFile(mock)) || bytes.length !== pinned.bytes || sha256(bytes) !== pinned.sha256))
                 return [404, { error: 'Diagram file changed since it was posted' }];
+            if (download)
+                return [200, { attachment: { path: actual, name: basename(path).replace(/[^a-z0-9._ -]/gi, '_'), bytes: bytes.length, type } }];
             if (frame && new URL(req.url, 'http://localhost').searchParams.get('v') === 'light' && type.startsWith('image/')) {
                 const light = galleryLight(pinned.sha256 ?? sha256(bytes), bytes, extname(path));
                 if (light)

package/dist/contract.js

@@ -51,14 +51,14 @@ const ACTIONS = {
 export const GALLERY_DEVICES = ['phone', 'desktop'];
 const GALLERY_FILE = /\.(png|jpe?g|webp|html?)$/i;
 /** The report kit's blocks, the files a block may name, and the words a status may take. */
-export const KIT_BLOCKS = ['callout', 'beats', 'video', 'table', 'compare', 'evidence'];
+export const KIT_BLOCKS = ['callout', 'beats', 'video', 'table', 'compare', 'evidence', 'image', 'file'];
 const KIT_IMAGE = /\.(png|jpe?g|webp)$/i, KIT_VIDEO = /\.(mp4|webm)$/i;
 export const KIT_STATUS = { fixed: 'Fixed', progress: 'In progress', waiting: 'Waiting on you' };
 const KIT_TONES = ['note', 'warn', 'ask'];
 export const MEDIA_BYTES = 50_000_000;
 /** The command that makes a report's page, named in every refusal of a report without one. */
 export const REPORT_INIT = 'sign-off-axi report init <folder>';
-const KIT_HELP = `Draw the report with the board's own blocks instead: run \`${REPORT_INIT} --purpose <kind>\` and add \`blocks\` to a section (callout, beats, video, table, compare, evidence). A page of your own may use the system colours (Canvas, CanvasText, GrayText) and no cards`;
+const KIT_HELP = `Draw the report with the board's own blocks instead: run \`${REPORT_INIT} --purpose <kind>\` and add \`blocks\` to a section (callout, beats, video, table, compare, evidence, image, file). A page of your own may use the system colours (Canvas, CanvasText, GrayText) and no cards`;
 const PAGE_HELP = `Run \`${REPORT_INIT} --page\` to make the page, fill it, then post it with "view" and "preview"`;
 const GUIDE_HELP = `Run \`${REPORT_INIT}\` to write report.json, fill every FILL: line, then post it with \`post --kind report --from <folder>/report.json\``;
 /** Parses one message; a field written twice in any object refuses it, since plain JSON.parse keeps the last one quietly. */
@@ -308,17 +308,57 @@ export function checkMessage(m, want, flags = false, fresh = false) {
                     text(`${at}.length`, o.length, 12, 'the film\'s length, such as "0:10", in 12 characters or fewer');
                 text(`${at}.caption`, o.caption, 280, 'what the film shows, in 280 characters or fewer');
             }
+            else if (o.type === 'image' || o.type === 'file') {
+                only(['src', 'caption', ...(o.type === 'image' ? ['alt'] : [])], '{"type":"image","src":"frame.png","caption":"The reference"}');
+                kitFile(`${at}.src`, o.src, o.type === 'image' ? KIT_IMAGE : /./, o.type === 'image' ? 'a .png, .jpg, .jpeg or .webp' : 'file', 'report.md');
+                text(`${at}.caption`, o.caption, 280, 'the original caption or link text, in 280 characters or fewer');
+                if (Object.hasOwn(o, 'alt'))
+                    text(`${at}.alt`, o.alt, 280, 'what the image shows, in 280 characters or fewer');
+            }
             else if (o.type === 'table') {
-                only(['columns', 'rows'], '{"type":"table","columns":["Measured","App promo","Cinematic"],"rows":[["AI calls","3","1"]]}');
-                if (!Array.isArray(o.columns) || o.columns.length < 2 || o.columns.length > 5)
-                    throw bad(`${at}.columns`, 'must list 2 to 5 column names', 'Set "columns" to 2-5 short names, such as ["Measured","App promo","Cinematic"]');
-                o.columns.forEach((c, k) => text(`${at}.columns[${k}]`, c, 40, 'the column\'s name, in 40 characters or fewer'));
+                only(['columns', 'rows'], '{"type":"table","columns":["Measured","App promo"],"rows":[["AI calls","3"]]}');
+                if (!Array.isArray(o.columns) || o.columns.length < 1 || o.columns.length > 20)
+                    throw bad(`${at}.columns`, 'must list 1 to 20 column names', 'Set "columns" to the original headings');
                 if (!Array.isArray(o.rows) || o.rows.length < 1 || o.rows.length > 30)
-                    throw bad(`${at}.rows`, 'must list 1 to 30 rows', 'Set "rows" to arrays of text, one per column');
+                    throw bad(`${at}.rows`, 'must list 1 to 30 rows', 'Set "rows" to arrays of cells, preserving ragged rows');
+                const occupied = o.rows.map(() => []);
+                const cell = (c, field, remaining) => {
+                    if (typeof c === 'string') {
+                        if (c !== '')
+                            text(field, c, 120, 'the original cell text');
+                        return [1, 1];
+                    }
+                    one(field, c, ['text', 'colspan', 'rowspan'], '{"text":"Calls","colspan":2}');
+                    if (c.text !== '')
+                        text(`${field}.text`, c.text, 120, 'the original cell text');
+                    for (const [f, max] of [['colspan', 20], ['rowspan', remaining]]) {
+                        if (Object.hasOwn(c, f) && (!Number.isInteger(c[f]) || c[f] < 1 || c[f] > max))
+                            throw bad(`${field}.${f}`, `must be an integer from 1 to ${max}`, 'Keep the span inside the table');
+                    }
+                    return [c.colspan ?? 1, c.rowspan ?? 1];
+                };
+                let headWidth = 0;
+                o.columns.forEach((c, k) => { headWidth += cell(c, `${at}.columns[${k}]`, 1)[0]; });
+                if (headWidth > 20)
+                    throw bad(`${at}.columns`, 'spans more than 20 columns', 'Keep the table within 20 columns');
                 o.rows.forEach((r, k) => {
-                    if (!Array.isArray(r) || r.length !== o.columns.length)
-                        throw bad(`${at}.rows[${k}]`, `must have ${o.columns.length} cells, one per column`, 'Write each row as an array of text with one cell for every column');
-                    r.forEach((c, j) => text(`${at}.rows[${k}][${j}]`, c, 120, 'the cell\'s words, in 120 characters or fewer'));
+                    if (!Array.isArray(r) || r.length > 20)
+                        throw bad(`${at}.rows[${k}]`, 'must be an array of at most 20 cells', 'Write the original cells without padding ragged rows');
+                    let col = 0;
+                    r.forEach((c, j) => {
+                        while (occupied[k][col])
+                            col++;
+                        const [w, h] = cell(c, `${at}.rows[${k}][${j}]`, o.rows.length - k);
+                        if (col + w > 20)
+                            throw bad(`${at}.rows[${k}][${j}]`, 'extends beyond 20 columns', 'Keep the table within 20 columns');
+                        for (let y = k; y < k + h; y++)
+                            for (let x = col; x < col + w; x++) {
+                                if (occupied[y][x])
+                                    throw bad(`${at}.rows[${k}][${j}]`, 'overlaps another span', 'Keep spans from overlapping');
+                                occupied[y][x] = true;
+                            }
+                        col += w;
+                    });
                 });
             }
             else if (o.type === 'compare') {
@@ -956,7 +996,7 @@ export const diagramViews = (m) => [m?.visual?.diagram, ...(m?.sections ?? []).f
 /** The gallery frames of a guided report or plan, in the order the board counts them for `gallery.<n>`: each section's options, each option's frames. */
 export const galleryFrames = (m) => [...(m?.sections ?? []).flatMap((s) => (s.gallery ?? []).flatMap((o) => o.frames)), ...(m?.sections ?? []).flatMap((s) => s.pins ?? [])];
 /** The files a section's blocks name, each once, in the order the blocks use them. */
-export const blockFiles = (s) => [...new Set((s?.blocks ?? []).flatMap((b) => b.type === 'beats' ? b.beats.map((x) => x.image) : b.type === 'video' ? [b.poster, b.src] : b.type === 'compare' ? [b.before.image, b.after.image] : b.type === 'evidence' ? b.rows.map((r) => r.image).filter(Boolean) : []))];
+export const blockFiles = (s) => [...new Set((s?.blocks ?? []).flatMap((b) => ['image', 'file'].includes(b.type) ? [b.src] : b.type === 'beats' ? b.beats.map((x) => x.image) : b.type === 'video' ? [b.poster, b.src] : b.type === 'compare' ? [b.before.image, b.after.image] : b.type === 'evidence' ? b.rows.map((r) => r.image).filter(Boolean) : []))];
 const SAME_WORDS = 0.75;
 /** What the kit warns about, never refuses: a lead whose first sentence says again (most of its words are in) what the report's summary already said, so the reader reads it twice. */
 export function kitWarnings(m) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sign-off-axi",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "One review board for evidence, quick yes/no decisions and retro changes.",
   "type": "module",
   "bin": { "sign-off-axi": "dist/cli.js" },

package/skills/sign-off-axi/SKILL.md

@@ -158,13 +158,16 @@ Pick the block by what the reader must see:
 | `callout` | one thing set apart: a caveat, a warning, a question | `tone` (`note`, `warn` or `ask`), `title` (60), `text` (280) |
 | `beats` | a sequence the reader steps through: a film's scenes, a flow | `beats`, 2 to 12, each `image`, `time`, `title` (80), `text` (280) |
 | `video` | a short film | `src` (.mp4 or .webm, 50 MB), `poster`, `length`, `caption` |
-| `table` | the same measures for 2 or more options | `columns` (2 to 5), `rows` (up to 30, one cell per column, 120 each) |
+| `image` | a neutral reference image, without a verdict | `src`, `caption` (280), optional `alt` (280); the whole image keeps its aspect ratio |
+| `file` | a local file to download | `src` (any file up to 5 MB), `caption` (280), pinned like media; downloaded as an attachment |
+| `table` | original measures, including irregular tables | `columns` (1 to 20), `rows` (up to 30); cells are text (120) or `{text, colspan, rowspan}`; keep empty cells and ragged rows as authored. Wide or irregular tables scroll inside the block on a phone |
 | `compare` | before and after | `before` and `after`, each `image` and `caption` (80) |
 | `evidence` | captures with a state for each | `rows`, each `image`, `title`, `note`, `status` (`fixed`, `progress` or `waiting`) |
 
 - One idea per block, one block per point; a table beats three paragraphs of numbers, and a stepper beats a numbered list of screens.
 - Say something new in each part. Post warns, and does not refuse, when a section's first paragraph repeats `about`.
 - Options a model made are a gallery, not a row of pictures: see the design-output rule above. `gallery` and `blocks` can share a section, the gallery first.
+- File paths stay inside the board folder, with no `..`, `?`, `#` or backslash. Posting pins their bytes; a changed file is unavailable until re-posted.
 - Images are .png, .jpg, .jpeg or .webp; a path has no `..`, `?`, `#` or backslash.
 - Sentence case in every heading and label; no capitals shouted, no colour words, no markup in any field.
 - A page of your own (`report init --page`) is held to the board's look at its first post: post refuses one that writes out three or more colours of its own or draws a card inside a card, and says to use blocks. The scaffold already draws neither; keep to the system colours (Canvas, CanvasText, GrayText). A report already on the board stays as it was filed.

package/web/index.html

@@ -790,17 +790,23 @@
   .kb-btn.go { border-color: transparent; background: var(--tk-go); color: var(--tk-on-go); box-shadow: var(--tk-elev-go); }
   .kb-btn:disabled { opacity: 0.6; box-shadow: none; }
   @media (min-width: 43.75rem) { .kb-stage { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; } .kb-nav { grid-template-columns: auto auto; justify-content: start; } }
+  .kt-image { margin: 0; display: grid; gap: 0.375rem; }
+  .kt-image img { display: block; width: 100%; height: auto; }
+  .kt-file { display: block; padding: 0.75rem 0; color: var(--tk-ink); text-decoration: underline; text-underline-offset: 0.2em; }
+  .kt-scroll { overflow-x: auto; min-width: 0; }
+  .kt-table.kt-wide { min-width: 48rem; }
+  .kt-wide :is(th, td) { min-width: 7rem; max-width: 20rem; overflow-wrap: anywhere; }
   .kt-table { width: 100%; border-collapse: collapse; font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); }
   .kt-table th { padding: 0 0.75rem 0.5rem 0; border-bottom: 1px solid var(--tk-line); color: var(--tk-text-tertiary); font-size: var(--tk-fs-meta); font-weight: 500; text-align: left; }
   .kt-table td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--tk-line); vertical-align: top; font-variant-numeric: tabular-nums; }
   .kt-table td:first-child { color: var(--tk-ink); font-weight: 600; }
   .kt-table :is(th, td):last-child { padding-right: 0; }
   @media (max-width: 30rem) {
-    .kt-table thead { display: none; }
-    .kt-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--tk-line); }
-    .kt-table td { padding: 0; border: 0; }
-    .kt-table td:first-child { grid-column: 1 / -1; margin-bottom: 0.125rem; }
-    .kt-table td[data-h]::before { content: attr(data-h); display: block; color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); line-height: var(--tk-lh-small); font-weight: 500; }
+    .kt-table:not(.kt-wide) thead { display: none; }
+    .kt-table:not(.kt-wide) tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--tk-line); }
+    .kt-table:not(.kt-wide) td { padding: 0; border: 0; }
+    .kt-table:not(.kt-wide) td:first-child { grid-column: 1 / -1; margin-bottom: 0.125rem; }
+    .kt-table:not(.kt-wide) td[data-h]::before { content: attr(data-h); display: block; color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); line-height: var(--tk-lh-small); font-weight: 500; }
   }
   .kt-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
   .kt-compare figure { display: grid; gap: 0.375rem; align-content: start; margin: 0; }
@@ -4578,7 +4584,14 @@
       if (b.type === 'callout') return E('div', `kt kt-callout ${b.tone ?? 'note'}`, E('span', 'tile', gic(b.tone === 'warn' ? 'warn' : b.tone === 'ask' ? 'deeper' : 'info')), E('div', '', mdSpan('b', '', b.title, NOLINK), mdSpan('span', '', b.text)));
       if (b.type === 'beats') return beatsFig(s, b);
       if (b.type === 'video') return videoFig(s, b);
-      if (b.type === 'table') return E('div', 'kt', el('table', { class: 'kt-table' }, el('thead', {}, el('tr', {}, ...b.columns.map((c) => el('th', { scope: 'col' }, c)))), el('tbody', {}, ...b.rows.map((r) => el('tr', {}, ...r.map((c, i) => el('td', i ? { 'data-h': b.columns[i] } : {}, c)))))));
+      if (b.type === 'image') return E('figure', 'kt kt-image', el('img', { src: kitUrl(s, b.src, true), alt: b.alt ?? b.caption, loading: 'lazy', decoding: 'async' }), E('figcaption', 'kt-cap', b.caption));
+      if (b.type === 'file') return el('a', { class: 'kt kt-file', href: kitUrl(s, b.src), download: '' }, b.caption);
+      if (b.type === 'table') {
+        const wide = b.columns.length > 5 || [...b.columns, ...b.rows.flat()].some((c) => typeof c === 'object') || b.rows.some((r) => r.length !== b.columns.length);
+        const cell = (c, tag, i) => el(tag, { ...(tag === 'th' ? { scope: 'col' } : !wide && i ? { 'data-h': b.columns[i] } : {}), ...(typeof c === 'object' ? { colspan: c.colspan ?? 1, rowspan: c.rowspan ?? 1 } : {}) }, typeof c === 'object' ? c.text : c);
+        const table = el('table', { class: `kt-table${wide ? ' kt-wide' : ''}` }, el('thead', {}, el('tr', {}, ...b.columns.map((c, i) => cell(c, 'th', i)))), el('tbody', {}, ...b.rows.map((r) => el('tr', {}, ...r.map((c, i) => cell(c, 'td', i))))));
+        return el('div', { class: `kt${wide ? ' kt-scroll' : ''}`, ...(wide ? { tabindex: '0', role: 'region', 'aria-label': 'Table' } : {}) }, table);
+      }
       if (b.type === 'compare') return E('div', 'kt kt-compare', ...[['Before', b.before], ['After', b.after]].map(([w, x]) => E('figure', '', el('img', { src: kitUrl(s, x.image, true), alt: `${w}: ${x.caption}`, loading: 'lazy', decoding: 'async' }), E('figcaption', '', E('b', '', w), x.caption))));
       return el('ul', { class: 'kt kt-evid' }, ...b.rows.map((r) => E('li', '', ...(r.image ? [el('img', { src: kitUrl(s, r.image, true), alt: '', loading: 'lazy', decoding: 'async' })] : []), E('div', '', E('b', '', r.title), ...(r.note ? [E('small', '', r.note)] : [])), E('span', `kt-status ${r.status}`, KT_STATUS[r.status]))));
     }