@bestagentkits/render 0.1.1-next.1 → 0.3.0

package/dist/blocks/data-table/data-table-columns.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Data table columns: the authored column schema and the resolved column
+ * model the cell renderers read.
+ *
+ * A column names one data field (`key`) and a semantic `type`; the type picks
+ * the default value format and alignment, so an author states meaning and the
+ * compiler decides presentation. When no columns are authored they are derived
+ * from the data's fields.
+ */
+import { type FormatSpec } from '../../data/format-value.js';
+import type { IrNode } from '../../ir.js';
+import { type JsonValue } from '../../json.js';
+import type { PropSchema } from '../../registry/prop-schema.js';
+export declare const COLUMN_TYPES: readonly ["text", "number", "percent", "currency", "date", "badge", "link", "progress", "sparkline"];
+export type ColumnType = (typeof COLUMN_TYPES)[number];
+export declare const BADGE_TONES: readonly ["success", "danger", "warning", "info", "neutral"];
+export declare const COLUMN_ALIGNS: readonly ["start", "end", "center"];
+export type ColumnAlign = (typeof COLUMN_ALIGNS)[number];
+/** Columns shown when none are authored. */
+export declare const DERIVED_COLUMN_LIMIT = 8;
+export declare const MAX_COLUMNS = 12;
+export declare const COLUMN_SCHEMA: PropSchema;
+export interface DataColumn {
+    key: string;
+    label: string;
+    type: ColumnType;
+    format: FormatSpec;
+    align: ColumnAlign;
+    /** link: the field that holds each row's URL. */
+    hrefField: string;
+    /** progress: the scale maximum. */
+    max: number;
+    /** sparkline: the series fields. */
+    fields: string[];
+    /** badge: exact value to tone. */
+    tones: Record<string, string>;
+}
+export declare function columnType(value: JsonValue | undefined): ColumnType;
+/** The authored columns, or columns derived from the first fields of the data. */
+export declare function resolveColumns(node: IrNode): DataColumn[];
+//# sourceMappingURL=data-table-columns.d.ts.map

package/dist/blocks/data-table/data-table-columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-columns.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table-columns.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhE,eAAO,MAAM,YAAY,sGAUf,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAKvD,eAAO,MAAM,WAAW,8DAA+D,CAAC;AAExF,eAAO,MAAM,aAAa,qCAAsC,CAAC;AACjE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,4CAA4C;AAC5C,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,WAAW,KAAK,CAAC;AAwB9B,eAAO,MAAM,aAAa,EAAE,UA8B1B,CAAC;AAEH,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAInE;AAyDD,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,EAAE,CAQzD"}

package/dist/blocks/data-table/data-table-columns.js

@@ -0,0 +1,155 @@
+/**
+ * Data table columns: the authored column schema and the resolved column
+ * model the cell renderers read.
+ *
+ * A column names one data field (`key`) and a semantic `type`; the type picks
+ * the default value format and alignment, so an author states meaning and the
+ * compiler decides presentation. When no columns are authored they are derived
+ * from the data's fields.
+ */
+import { fieldValue } from '../../data/dataset-types.js';
+import { FORMAT_FIELDS, VALUE_FORMATS, } from '../../data/format-value.js';
+import { isPlainObject } from '../../json.js';
+import { enumStr, list, num, obj, str } from '../../registry/define-helpers.js';
+import { objectListProp } from '../../render/block-helpers.js';
+export const COLUMN_TYPES = [
+    'text',
+    'number',
+    'percent',
+    'currency',
+    'date',
+    'badge',
+    'link',
+    'progress',
+    'sparkline',
+];
+/** Accepted spellings that resolve to a canonical type. */
+const TYPE_ALIASES = { percentage: 'percent' };
+export const BADGE_TONES = ['success', 'danger', 'warning', 'info', 'neutral'];
+export const COLUMN_ALIGNS = ['start', 'end', 'center'];
+/** Columns shown when none are authored. */
+export const DERIVED_COLUMN_LIMIT = 8;
+export const MAX_COLUMNS = 12;
+const FIELD = str({ maxLength: 64 });
+const DEFAULT_FORMAT = {
+    text: 'text',
+    number: 'number',
+    percent: 'percent',
+    currency: 'currency',
+    date: 'date',
+    badge: 'text',
+    link: 'text',
+    progress: 'number',
+    sparkline: 'number',
+};
+const NUMERIC_TYPES = new Set([
+    'number',
+    'percent',
+    'currency',
+    'progress',
+    'sparkline',
+]);
+export const COLUMN_SCHEMA = obj({
+    key: str({ required: true, maxLength: 64, description: 'Data field shown in this column.' }),
+    label: str({ maxLength: 80, description: 'Header text; defaults to the key.' }),
+    type: enumStr([...COLUMN_TYPES, ...Object.keys(TYPE_ALIASES)], {
+        default: 'text',
+        description: 'Picks the default format and alignment. percentage = percent.',
+    }),
+    // No default: an omitted format means "the type's format".
+    format: {
+        kind: 'string',
+        enum: VALUE_FORMATS,
+        description: 'Overrides the type format. percent takes 87 for 87%.',
+    },
+    unit: FORMAT_FIELDS.unit,
+    currency: FORMAT_FIELDS.currency,
+    decimals: FORMAT_FIELDS.decimals,
+    align: enumStr(COLUMN_ALIGNS, { description: 'Default: end for numeric types.' }),
+    hrefField: str({ maxLength: 64, description: 'link: field holding the URL; default key.' }),
+    max: num({ min: 0, description: 'progress: scale maximum (default 100).' }),
+    fields: list(FIELD, {
+        minItems: 2,
+        maxItems: 24,
+        description: 'sparkline: numeric fields, oldest first.',
+    }),
+    tones: {
+        kind: 'record',
+        of: enumStr(BADGE_TONES),
+        maxKeys: 12,
+        description: 'badge: value to tone.',
+    },
+});
+export function columnType(value) {
+    if (typeof value !== 'string')
+        return 'text';
+    if (COLUMN_TYPES.includes(value))
+        return value;
+    return TYPE_ALIASES[value] ?? 'text';
+}
+function isNumberOrNull(value) {
+    return value === null || typeof value === 'number';
+}
+/** A derived column is numeric when every present value is a number. */
+function derivedType(data, key) {
+    const values = data.rows.map((row) => fieldValue(row, key));
+    const numeric = values.some((value) => value !== null) && values.every(isNumberOrNull);
+    return numeric ? 'number' : 'text';
+}
+function stringList(value) {
+    return Array.isArray(value)
+        ? value.filter((item) => typeof item === 'string')
+        : [];
+}
+function toneMap(value) {
+    if (!isPlainObject(value))
+        return {};
+    const tones = {};
+    for (const [key, tone] of Object.entries(value)) {
+        if (typeof tone === 'string')
+            tones[key] = tone;
+    }
+    return tones;
+}
+function formatSpec(column, type) {
+    const spec = {
+        format: typeof column.format === 'string' ? column.format : DEFAULT_FORMAT[type],
+    };
+    if (typeof column.unit === 'string')
+        spec.unit = column.unit;
+    if (typeof column.currency === 'string')
+        spec.currency = column.currency;
+    if (typeof column.decimals === 'number')
+        spec.decimals = column.decimals;
+    return spec;
+}
+function resolveColumn(column) {
+    const key = typeof column.key === 'string' ? column.key : '';
+    const type = columnType(column.type);
+    const align = typeof column.align === 'string' ? column.align : undefined;
+    const max = typeof column.max === 'number' && column.max > 0 ? column.max : 100;
+    return {
+        key,
+        label: typeof column.label === 'string' && column.label !== '' ? column.label : key,
+        type,
+        format: formatSpec(column, type),
+        align: align ?? (NUMERIC_TYPES.has(type) ? 'end' : 'start'),
+        hrefField: typeof column.hrefField === 'string' ? column.hrefField : key,
+        max,
+        fields: stringList(column.fields),
+        tones: toneMap(column.tones),
+    };
+}
+/** The authored columns, or columns derived from the first fields of the data. */
+export function resolveColumns(node) {
+    const authored = objectListProp(node, 'columns');
+    if (authored.length > 0)
+        return authored.map(resolveColumn);
+    const data = node.data;
+    if (data === undefined)
+        return [];
+    return data.fields
+        .slice(0, DERIVED_COLUMN_LIMIT)
+        .map((key) => resolveColumn({ key, type: derivedType(data, key) }));
+}
+//# sourceMappingURL=data-table-columns.js.map

package/dist/blocks/data-table/data-table-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-columns.js","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table-columns.ts"],"names":[],"mappings":"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"}

package/dist/blocks/data-table/data-table-runtime.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Runtime for the data table: column sorting, row search and the sticky
+ * header's fit check. ES5-style, like `runtime.ts`, and emitted only on pages
+ * that use the feature.
+ *
+ * The markup reads completely without it: rows keep their authored order and
+ * the search bar stays hidden until `data-ak-table-ready` is set. Sort buttons
+ * are created here, inside each `<th>`, so a page without scripts never shows a
+ * control that does nothing.
+ *
+ * Search hides a row with `data-ak-dt-miss`, not `hidden`, so a filter that
+ * toggles `hidden` on the same rows composes with it instead of fighting it.
+ */
+export declare const DATA_TABLE_RUNTIME = "\nvar DT_NUMBER = /^-?\\d+(?:\\.\\d+)?(?:e[+-]?\\d+)?$/i;\nfunction dtRows(table) { return table.tBodies.length ? Array.prototype.slice.call(table.tBodies[0].rows) : []; }\nfunction dtHeads(table) { return table.tHead && table.tHead.rows.length ? Array.prototype.slice.call(table.tHead.rows[0].cells) : []; }\nfunction sortDataTable(table, index) {\n  var heads = dtHeads(table);\n  var head = heads[index];\n  if (!head) return;\n  var direction = head.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';\n  var rows = dtRows(table);\n  var values = rows.map(function (row) {\n    var cell = row.cells[index];\n    return cell && cell.hasAttribute('data-sort') ? cell.getAttribute('data-sort') : null;\n  });\n  var numeric = values.every(function (value) { return value === null || DT_NUMBER.test(value); });\n  var order = rows.map(function (row, position) { return position; });\n  order.sort(function (a, b) {\n    var x = values[a];\n    var y = values[b];\n    // Empty cells sort last in both directions; ties keep their current order.\n    if (x === null || y === null) return x === y ? a - b : (x === null ? 1 : -1);\n    var result = numeric ? Number(x) - Number(y) : (x < y ? -1 : (x > y ? 1 : 0));\n    if (direction === 'descending') result = -result;\n    return result || a - b;\n  });\n  var body = table.tBodies[0];\n  order.forEach(function (position) { body.appendChild(rows[position]); });\n  heads.forEach(function (cell) { cell.removeAttribute('aria-sort'); });\n  head.setAttribute('aria-sort', direction);\n  announce('Sorted by ' + (head.textContent || '').trim() + ', ' + direction);\n}\nfunction searchDataTable(block, table, query, speak) {\n  var needle = String(query || '').trim().toLowerCase();\n  var rows = dtRows(table);\n  var shown = 0;\n  rows.forEach(function (row) {\n    var hit = needle === '' || (row.textContent || '').toLowerCase().indexOf(needle) !== -1;\n    if (hit) row.removeAttribute('data-ak-dt-miss');\n    else row.setAttribute('data-ak-dt-miss', '');\n    if (hit && !row.hidden) shown += 1;\n  });\n  var total = rows.length;\n  var noun = total === 1 ? ' row' : ' rows';\n  var count = q('[data-ak-dt-count]', block);\n  if (count) count.textContent = shown === total ? total + noun : shown + ' of ' + total + noun;\n  var empty = q('[data-ak-dt-empty]', block);\n  if (empty) empty.hidden = shown !== 0;\n  if (speak) announce(shown + ' of ' + total + noun + ' shown');\n}\nfunction fitDataTables() {\n  qa('[data-ak-data-table][data-ak-sticky]').forEach(function (block) {\n    var wrap = q('.ak-table-wrap', block);\n    if (!wrap) return;\n    // Measure as a scroller; a table that fits needs no sideways scroll, so its\n    // frame stops being a scroll container and the header can stick to the page.\n    block.removeAttribute('data-ak-dt-fits');\n    if (wrap.scrollWidth <= wrap.clientWidth + 1) block.setAttribute('data-ak-dt-fits', '');\n  });\n}\nfunction wireDataTables() {\n  var blocks = qa('[data-ak-data-table]');\n  blocks.forEach(function (block) {\n    var table = q('table', block);\n    if (!table) return;\n    dtHeads(table).forEach(function (head, index) {\n      var button = doc.createElement('button');\n      button.type = 'button';\n      button.className = 'ak-dt-sort';\n      while (head.firstChild) button.appendChild(head.firstChild);\n      var icon = doc.createElement('span');\n      icon.className = 'ak-dt-sort-icon';\n      icon.setAttribute('aria-hidden', 'true');\n      button.appendChild(icon);\n      head.appendChild(button);\n      button.addEventListener('click', function () { sortDataTable(table, index); }, false);\n    });\n    var input = q('[data-ak-dt-search]', block);\n    if (input) {\n      input.addEventListener('input', function () { searchDataTable(block, table, input.value, true); }, false);\n      if (input.value) searchDataTable(block, table, input.value, false);\n    }\n    block.setAttribute('data-ak-table-ready', '');\n  });\n  if (!blocks.length) return;\n  fitDataTables();\n  var pending = false;\n  window.addEventListener('resize', function () {\n    if (pending) return;\n    pending = true;\n    window.requestAnimationFrame(function () { pending = false; fitDataTables(); });\n  }, false);\n}";
+//# sourceMappingURL=data-table-runtime.d.ts.map

package/dist/blocks/data-table/data-table-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-runtime.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,kBAAkB,kqIA2F7B,CAAC"}

package/dist/blocks/data-table/data-table-runtime.js

@@ -0,0 +1,106 @@
+/**
+ * Runtime for the data table: column sorting, row search and the sticky
+ * header's fit check. ES5-style, like `runtime.ts`, and emitted only on pages
+ * that use the feature.
+ *
+ * The markup reads completely without it: rows keep their authored order and
+ * the search bar stays hidden until `data-ak-table-ready` is set. Sort buttons
+ * are created here, inside each `<th>`, so a page without scripts never shows a
+ * control that does nothing.
+ *
+ * Search hides a row with `data-ak-dt-miss`, not `hidden`, so a filter that
+ * toggles `hidden` on the same rows composes with it instead of fighting it.
+ */
+export const DATA_TABLE_RUNTIME = `
+var DT_NUMBER = /^-?\\d+(?:\\.\\d+)?(?:e[+-]?\\d+)?$/i;
+function dtRows(table) { return table.tBodies.length ? Array.prototype.slice.call(table.tBodies[0].rows) : []; }
+function dtHeads(table) { return table.tHead && table.tHead.rows.length ? Array.prototype.slice.call(table.tHead.rows[0].cells) : []; }
+function sortDataTable(table, index) {
+  var heads = dtHeads(table);
+  var head = heads[index];
+  if (!head) return;
+  var direction = head.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
+  var rows = dtRows(table);
+  var values = rows.map(function (row) {
+    var cell = row.cells[index];
+    return cell && cell.hasAttribute('data-sort') ? cell.getAttribute('data-sort') : null;
+  });
+  var numeric = values.every(function (value) { return value === null || DT_NUMBER.test(value); });
+  var order = rows.map(function (row, position) { return position; });
+  order.sort(function (a, b) {
+    var x = values[a];
+    var y = values[b];
+    // Empty cells sort last in both directions; ties keep their current order.
+    if (x === null || y === null) return x === y ? a - b : (x === null ? 1 : -1);
+    var result = numeric ? Number(x) - Number(y) : (x < y ? -1 : (x > y ? 1 : 0));
+    if (direction === 'descending') result = -result;
+    return result || a - b;
+  });
+  var body = table.tBodies[0];
+  order.forEach(function (position) { body.appendChild(rows[position]); });
+  heads.forEach(function (cell) { cell.removeAttribute('aria-sort'); });
+  head.setAttribute('aria-sort', direction);
+  announce('Sorted by ' + (head.textContent || '').trim() + ', ' + direction);
+}
+function searchDataTable(block, table, query, speak) {
+  var needle = String(query || '').trim().toLowerCase();
+  var rows = dtRows(table);
+  var shown = 0;
+  rows.forEach(function (row) {
+    var hit = needle === '' || (row.textContent || '').toLowerCase().indexOf(needle) !== -1;
+    if (hit) row.removeAttribute('data-ak-dt-miss');
+    else row.setAttribute('data-ak-dt-miss', '');
+    if (hit && !row.hidden) shown += 1;
+  });
+  var total = rows.length;
+  var noun = total === 1 ? ' row' : ' rows';
+  var count = q('[data-ak-dt-count]', block);
+  if (count) count.textContent = shown === total ? total + noun : shown + ' of ' + total + noun;
+  var empty = q('[data-ak-dt-empty]', block);
+  if (empty) empty.hidden = shown !== 0;
+  if (speak) announce(shown + ' of ' + total + noun + ' shown');
+}
+function fitDataTables() {
+  qa('[data-ak-data-table][data-ak-sticky]').forEach(function (block) {
+    var wrap = q('.ak-table-wrap', block);
+    if (!wrap) return;
+    // Measure as a scroller; a table that fits needs no sideways scroll, so its
+    // frame stops being a scroll container and the header can stick to the page.
+    block.removeAttribute('data-ak-dt-fits');
+    if (wrap.scrollWidth <= wrap.clientWidth + 1) block.setAttribute('data-ak-dt-fits', '');
+  });
+}
+function wireDataTables() {
+  var blocks = qa('[data-ak-data-table]');
+  blocks.forEach(function (block) {
+    var table = q('table', block);
+    if (!table) return;
+    dtHeads(table).forEach(function (head, index) {
+      var button = doc.createElement('button');
+      button.type = 'button';
+      button.className = 'ak-dt-sort';
+      while (head.firstChild) button.appendChild(head.firstChild);
+      var icon = doc.createElement('span');
+      icon.className = 'ak-dt-sort-icon';
+      icon.setAttribute('aria-hidden', 'true');
+      button.appendChild(icon);
+      head.appendChild(button);
+      button.addEventListener('click', function () { sortDataTable(table, index); }, false);
+    });
+    var input = q('[data-ak-dt-search]', block);
+    if (input) {
+      input.addEventListener('input', function () { searchDataTable(block, table, input.value, true); }, false);
+      if (input.value) searchDataTable(block, table, input.value, false);
+    }
+    block.setAttribute('data-ak-table-ready', '');
+  });
+  if (!blocks.length) return;
+  fitDataTables();
+  var pending = false;
+  window.addEventListener('resize', function () {
+    if (pending) return;
+    pending = true;
+    window.requestAnimationFrame(function () { pending = false; fitDataTables(); });
+  }, false);
+}`;
+//# sourceMappingURL=data-table-runtime.js.map

package/dist/blocks/data-table/data-table-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-runtime.js","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2FhC,CAAC"}

package/dist/blocks/data-table/data-table-styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Feature sheet for the data table. It builds on the base table frame
+ * (`.ak-table-wrap`, `th`, `td`, `.ak-num`), adding the search bar, sort
+ * buttons, typed cells, the sticky header and the card layout on phones.
+ *
+ * Every control is hidden until the runtime marks the block ready, and print
+ * hides them again and shows every row, so the table reads completely without
+ * scripts and on paper.
+ */
+export declare const DATA_TABLE_CSS: string;
+//# sourceMappingURL=data-table-styles.d.ts.map

package/dist/blocks/data-table/data-table-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-styles.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA4EH,eAAO,MAAM,cAAc,QAAgE,CAAC"}

package/dist/blocks/data-table/data-table-styles.js

@@ -0,0 +1,74 @@
+/**
+ * Feature sheet for the data table. It builds on the base table frame
+ * (`.ak-table-wrap`, `th`, `td`, `.ak-num`), adding the search bar, sort
+ * buttons, typed cells, the sticky header and the card layout on phones.
+ *
+ * Every control is hidden until the runtime marks the block ready, and print
+ * hides them again and shows every row, so the table reads completely without
+ * scripts and on paper.
+ */
+import { TRANSITION, UNIT } from '../../render/style-units.js';
+const ROOT = '.ak-data-table';
+const SR_ONLY = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0';
+const TOOLS = `${ROOT}{display:flex;flex-direction:column;gap:${UNIT(1.5)}}
+${ROOT} .ak-table-wrap{position:relative}
+${ROOT}:not([data-ak-table-ready]) .ak-dt-tools{display:none}
+${ROOT} .ak-dt-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:${UNIT(1)} ${UNIT(2)}}
+${ROOT} .ak-dt-search{display:flex;align-items:center;gap:.6em;flex:1 1 240px;max-width:360px}
+${ROOT} .ak-dt-search input{flex:1 1 auto;min-width:0;font:inherit;font-size:.94rem;min-height:40px;padding:.45em .9em;border:var(--ak-border-width) solid var(--ak-color-border);border-radius:var(--ak-radius-medium);background:var(--ak-color-surface);color:var(--ak-color-text);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ak-color-text) 6%,transparent);${TRANSITION}}
+${ROOT} .ak-dt-search input::placeholder{color:var(--ak-color-text-muted);opacity:.85}
+${ROOT} .ak-dt-search input:hover{border-color:color-mix(in srgb,var(--ak-color-text) 30%,var(--ak-color-border))}
+${ROOT} .ak-dt-search input:focus-visible{outline:0;border-color:var(--ak-color-accent);box-shadow:var(--ak-ring)}
+${ROOT} .ak-dt-count{margin:0;font-family:var(--ak-font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ak-color-text-muted);font-variant-numeric:tabular-nums}
+${ROOT} .ak-dt-empty{margin:0;padding:${UNIT(2)};text-align:center;color:var(--ak-color-text-muted);border:var(--ak-border-width) dashed var(--ak-color-border);border-radius:var(--ak-radius-medium)}
+${ROOT} .ak-dt-empty[hidden]{display:none}
+${ROOT} tbody tr[data-ak-dt-miss]{display:none}`;
+const SORT = `${ROOT} .ak-dt-sort{display:inline-flex;align-items:center;gap:.45em;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;white-space:nowrap;${TRANSITION}}
+${ROOT} th.ak-num .ak-dt-sort{flex-direction:row-reverse}
+${ROOT} .ak-dt-sort:hover,${ROOT} th[aria-sort] .ak-dt-sort{color:var(--ak-color-text)}
+${ROOT} .ak-dt-sort-icon{display:inline-block;width:1em;text-align:center;color:var(--ak-color-text-muted);opacity:.55}
+${ROOT} .ak-dt-sort-icon::before{content:"\\2195"}
+${ROOT} th[aria-sort] .ak-dt-sort-icon{color:var(--ak-color-accent);opacity:1}
+${ROOT} th[aria-sort="ascending"] .ak-dt-sort-icon::before{content:"\\2191"}
+${ROOT} th[aria-sort="descending"] .ak-dt-sort-icon::before{content:"\\2193"}`;
+const CELLS = `${ROOT} .ak-dt-center{text-align:center}
+${ROOT} .ak-dt-nowrap{white-space:nowrap}
+${ROOT} tbody th[scope="row"]{font-weight:600;white-space:nowrap}
+${ROOT} td a{overflow-wrap:anywhere}
+${ROOT} .ak-dt-progress{display:inline-flex;align-items:center;gap:.65em;white-space:nowrap}
+${ROOT} meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:5.5em;height:.5em;border:0;border-radius:999px;background:color-mix(in srgb,var(--ak-color-text) 9%,var(--ak-color-surface));overflow:hidden;vertical-align:middle}
+${ROOT} meter::-webkit-meter-bar{height:.5em;border:0;border-radius:999px;background:color-mix(in srgb,var(--ak-color-text) 9%,var(--ak-color-surface))}
+${ROOT} meter::-webkit-meter-optimum-value,${ROOT} meter::-webkit-meter-suboptimum-value,${ROOT} meter::-webkit-meter-even-less-good-value{border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--ak-color-accent) 62%,transparent),var(--ak-color-accent))}
+${ROOT} meter::-moz-meter-bar{border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--ak-color-accent) 62%,transparent),var(--ak-color-accent))}
+${ROOT} .ak-dt-spark{display:inline-block;width:6.5em;height:1.6em;vertical-align:middle;overflow:visible}
+${ROOT} .ak-dt-spark-area{fill:color-mix(in srgb,var(--ak-color-accent) 14%,transparent)}
+${ROOT} .ak-dt-spark-line{fill:none;stroke:var(--ak-color-accent);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}`;
+/**
+ * Sticky header, above the card breakpoint only. A frame that has to scroll
+ * sideways is the header's scroll container, so the header sticks to the page
+ * only once the runtime finds the table fits and clips the frame instead.
+ */
+const STICKY = `@media (min-width:561px){${ROOT}[data-ak-sticky] thead th{position:sticky;top:0;z-index:1;box-shadow:inset 0 calc(var(--ak-border-width) * -1) 0 var(--ak-color-border)}${ROOT}[data-ak-sticky][data-ak-dt-fits] .ak-table-wrap{overflow:clip}}`;
+/** At 560px and below every row becomes a card of labelled values. */
+const CARDS = `@media (max-width:560px){${ROOT} .ak-table-wrap{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
+${ROOT} table,${ROOT} tbody,${ROOT} tbody tr,${ROOT} tbody td,${ROOT} tbody th{display:block;width:auto;min-width:0}
+${ROOT} tbody tr[hidden]{display:none}
+${ROOT} thead{${SR_ONLY}}
+${ROOT}[data-ak-table-ready] thead{position:static;width:auto;height:auto;margin:0 0 ${UNIT(1)};overflow:visible;clip:auto;white-space:normal;display:block}
+${ROOT}[data-ak-table-ready] thead tr{display:flex;flex-wrap:wrap;gap:${UNIT(0.75)}}
+${ROOT}[data-ak-table-ready] thead th{padding:0;border:0;background:none;box-shadow:none}
+${ROOT}[data-ak-table-ready] .ak-dt-sort{min-height:44px;padding:0 .9em;border:var(--ak-border-width) solid var(--ak-color-border);border-radius:999px;background:var(--ak-color-surface)}
+${ROOT}[data-ak-table-ready] th[aria-sort] .ak-dt-sort{border-color:color-mix(in srgb,var(--ak-color-accent) 45%,var(--ak-color-border))}
+${ROOT} tbody tr{margin:0 0 ${UNIT(1.5)};padding:${UNIT(0.5)} ${UNIT(2)};border:var(--ak-border-width) solid var(--ak-color-border);border-radius:var(--ak-radius-medium);background:var(--ak-fill);box-shadow:var(--ak-elevation-card)}
+${ROOT} tbody tr:hover{background:var(--ak-fill)}
+${ROOT} tbody tr > *{display:flex;align-items:center;justify-content:space-between;gap:${UNIT(2)};padding:.6em 0;text-align:right;min-width:0;overflow-wrap:anywhere}
+${ROOT} tbody tr > *:not(:last-child){border-bottom:var(--ak-border-width) solid var(--ak-color-border)}
+${ROOT} tbody tr > *::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-family:var(--ak-font-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ak-color-text-muted)}
+${ROOT} tbody th[scope="row"]{justify-content:flex-start;text-align:left;font-family:var(--ak-font-heading);font-size:1.02rem}
+${ROOT} tbody th[scope="row"]::before{display:none}
+${ROOT} .ak-dt-search{max-width:none}
+${ROOT} .ak-dt-search input{min-height:44px}}`;
+const NARROW = `@media (max-width:768px) and (min-width:561px){${ROOT}[data-ak-table-ready] thead th{padding-top:0;padding-bottom:0}${ROOT} .ak-dt-sort{min-height:44px}${ROOT} .ak-dt-search input{min-height:44px}}`;
+const PRINT = `@media print{${ROOT} .ak-dt-tools,${ROOT} .ak-dt-empty,${ROOT} .ak-dt-sort-icon{display:none!important}${ROOT} tbody tr[data-ak-dt-miss]{display:table-row!important}${ROOT} thead th{position:static!important}${ROOT} tbody tr{break-inside:avoid}}`;
+export const DATA_TABLE_CSS = [TOOLS, SORT, CELLS, STICKY, NARROW, CARDS, PRINT].join('\n');
+//# sourceMappingURL=data-table-styles.js.map

package/dist/blocks/data-table/data-table-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-styles.js","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,IAAI,GAAG,gBAAgB,CAAC;AAE9B,MAAM,OAAO,GACX,6HAA6H,CAAC;AAEhI,MAAM,KAAK,GAAG,GAAG,IAAI,2CAA2C,IAAI,CAAC,GAAG,CAAC;EACvE,IAAI;EACJ,IAAI;EACJ,IAAI,kGAAkG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;EACxH,IAAI;EACJ,IAAI,oWAAoW,UAAU;EAClX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,kCAAkC,IAAI,CAAC,CAAC,CAAC;EAC7C,IAAI;EACJ,IAAI,0CAA0C,CAAC;AAEjD,MAAM,IAAI,GAAG,GAAG,IAAI,wNAAwN,UAAU;EACpP,IAAI;EACJ,IAAI,sBAAsB,IAAI;EAC9B,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,wEAAwE,CAAC;AAE/E,MAAM,KAAK,GAAG,GAAG,IAAI;EACnB,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,uCAAuC,IAAI,0CAA0C,IAAI;EAC7F,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,0HAA0H,CAAC;AAEjI;;;;GAIG;AACH,MAAM,MAAM,GAAG,4BAA4B,IAAI,2IAA2I,IAAI,kEAAkE,CAAC;AAEjQ,sEAAsE;AACtE,MAAM,KAAK,GAAG,4BAA4B,IAAI;EAC5C,IAAI,UAAU,IAAI,UAAU,IAAI,aAAa,IAAI,aAAa,IAAI;EAClE,IAAI;EACJ,IAAI,UAAU,OAAO;EACrB,IAAI,iFAAiF,IAAI,CAAC,CAAC,CAAC;EAC5F,IAAI,kEAAkE,IAAI,CAAC,IAAI,CAAC;EAChF,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,wBAAwB,IAAI,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;EACrE,IAAI;EACJ,IAAI,mFAAmF,IAAI,CAAC,CAAC,CAAC;EAC9F,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,wCAAwC,CAAC;AAE/C,MAAM,MAAM,GAAG,kDAAkD,IAAI,iEAAiE,IAAI,gCAAgC,IAAI,wCAAwC,CAAC;AAEvN,MAAM,KAAK,GAAG,gBAAgB,IAAI,iBAAiB,IAAI,iBAAiB,IAAI,4CAA4C,IAAI,0DAA0D,IAAI,uCAAuC,IAAI,gCAAgC,CAAC;AAEtQ,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC"}

package/dist/blocks/data-table/data-table.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Data table block: a typed, sortable and searchable table bound to a dataset.
+ *
+ * The compiler owns the behaviors: sorting is on every column, search appears
+ * past 10 rows (unless a filter-bar targets the table), the header sticks past
+ * 12, and phones get labelled cards. The
+ * emitted table is complete without scripts, in the authored (and
+ * transformed) row order.
+ */
+import type { BlockModule } from '../../registry/block-module.js';
+/** Search appears when a table has more rows than this. */
+export declare const SEARCH_THRESHOLD = 10;
+/** The header sticks when a table has more rows than this. */
+export declare const STICKY_THRESHOLD = 12;
+export declare const DATA_TABLE_FEATURE = "data-table";
+export declare const dataTableBlock: BlockModule;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/blocks/data-table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table/data-table.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAqBlE,2DAA2D;AAC3D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,eAAO,MAAM,kBAAkB,eAAe,CAAC;AA0H/C,eAAO,MAAM,cAAc,EAAE,WA+B5B,CAAC"}

package/dist/blocks/data-table/data-table.js

@@ -0,0 +1,159 @@
+/**
+ * Data table block: a typed, sortable and searchable table bound to a dataset.
+ *
+ * The compiler owns the behaviors: sorting is on every column, search appears
+ * past 10 rows (unless a filter-bar targets the table), the header sticks past
+ * 12, and phones get labelled cards. The
+ * emitted table is complete without scripts, in the authored (and
+ * transformed) row order.
+ */
+import { fieldValue } from '../../data/dataset-types.js';
+import { anchorProps, define, list, OPTIONAL_TITLE, str } from '../../registry/define-helpers.js';
+import { element, filterRowAttributes, nodeAttributes, stringProp, titleHeader, } from '../../render/block-helpers.js';
+import { escapeText, renderAttributes } from '../../render/escape.js';
+import { FILTER_BAR_TYPE } from '../controls/control-shared.js';
+import { alignClass, renderCell, sortValue } from './data-table-cells.js';
+import { checkDataTable } from './data-table-check.js';
+import { COLUMN_SCHEMA, MAX_COLUMNS, resolveColumns, } from './data-table-columns.js';
+/** Search appears when a table has more rows than this. */
+export const SEARCH_THRESHOLD = 10;
+/** The header sticks when a table has more rows than this. */
+export const STICKY_THRESHOLD = 12;
+export const DATA_TABLE_FEATURE = 'data-table';
+const NUMERIC_TEXT = /^-?\d+(?:\.\d+)?(?:e[+-]?\d+)?$/i;
+/** Compare two raw cell values the way the sort runtime does. */
+function compareRaw(a, b, numeric) {
+    if (numeric)
+        return Number(a) - Number(b);
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+/**
+ * The column the rows already arrive sorted by, so the header can say so. The
+ * transform itself does not reach the IR, so this reads the order from the
+ * rows: the first column whose values (at least 3 rows, no empty cell, two or
+ * more distinct values) run in one direction. Whatever it reports is true of
+ * the emitted rows.
+ */
+function initialSort(rows, columns) {
+    const marks = new Map();
+    if (rows.length < 3)
+        return marks;
+    for (const [index, column] of columns.entries()) {
+        const values = rows.map((row) => sortValue(fieldValue(row, column.key)));
+        if (values.some((value) => value === undefined))
+            continue;
+        const raw = values;
+        const numeric = raw.every((value) => NUMERIC_TEXT.test(value));
+        let ascending = true;
+        let descending = true;
+        for (let position = 1; position < raw.length; position += 1) {
+            const order = compareRaw(raw[position - 1], raw[position], numeric);
+            if (order > 0)
+                ascending = false;
+            if (order < 0)
+                descending = false;
+        }
+        if (ascending === descending)
+            continue;
+        marks.set(index, ascending ? 'ascending' : 'descending');
+        return marks;
+    }
+    return marks;
+}
+function caption(node) {
+    const title = stringProp(node, 'title');
+    const text = stringProp(node, 'caption');
+    // A visible heading already names the table: the caption then only speaks,
+    // unless it says something the heading does not.
+    if (text === '' && title === '')
+        return '';
+    if (text === '' || text === title)
+        return `<caption class="ak-sr">${escapeText(title)}</caption>`;
+    return `<caption>${escapeText(text)}</caption>`;
+}
+function tools(node, rows) {
+    const label = stringProp(node, 'title', 'table');
+    // Node ids are unique on the page, so the input id is too.
+    const id = `${node.id}-search`;
+    return [
+        '<div class="ak-dt-tools">',
+        `<label${renderAttributes({ class: 'ak-dt-search', for: id })}><span class="ak-sr">Search ${escapeText(label)}</span>`,
+        `<input${renderAttributes({ id, type: 'search', placeholder: 'Search rows', autocomplete: 'off', 'data-ak-dt-search': true })} /></label>`,
+        `<p class="ak-dt-count" data-ak-dt-count>${rows} rows</p>`,
+        '</div>',
+    ].join('');
+}
+/**
+ * True when a filter-bar on the page targets this table. The bar then owns row
+ * filtering (it offers its own search child), so the table emits no search box
+ * of its own: two independent filters over the same rows would fight, the
+ * last one to run winning. Decided at compile time from the IR.
+ */
+function filteredByBar(node, context) {
+    return context.ir.nodes.some((other) => other.type === FILTER_BAR_TYPE && other.props.target === node.id);
+}
+function render(node, context) {
+    const columns = resolveColumns(node);
+    const rows = node.data?.rows ?? [];
+    const sorted = initialSort(rows, columns);
+    const head = columns
+        .map((column, index) => `<th${renderAttributes({
+        scope: 'col',
+        class: alignClass(column),
+        'aria-sort': sorted.get(index),
+    })}>${escapeText(column.label)}</th>`)
+        .join('');
+    const body = rows
+        .map((row) => `<tr${renderAttributes(filterRowAttributes(row))}>${columns
+        .map((column, index) => renderCell(column, row, index === 0))
+        .join('')}</tr>`)
+        .join('');
+    const searchable = rows.length > SEARCH_THRESHOLD && !filteredByBar(node, context);
+    const empty = rows.length === 0
+        ? '<p class="ak-dt-empty">No rows.</p>'
+        : searchable
+            ? '<p class="ak-dt-empty" data-ak-dt-empty hidden>No rows match the search.</p>'
+            : '';
+    return element('section', nodeAttributes(node, {
+        class: 'ak-block ak-data-table',
+        'data-ak-data-table': true,
+        'data-ak-sticky': rows.length > STICKY_THRESHOLD,
+    }), [
+        titleHeader(node),
+        searchable ? tools(node, rows.length) : '',
+        `<div class="ak-table-wrap"><table>${caption(node)}<thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>`,
+        empty,
+    ].join(''));
+}
+export const dataTableBlock = {
+    definition: define({
+        type: 'data-table',
+        kind: 'semantic',
+        category: 'data',
+        tags: ['table', 'dataset', 'sort', 'filter', 'metrics'],
+        useCases: ['benchmark results', 'run history', 'ranked metrics', 'status inventory'],
+        purpose: 'Typed, sortable, searchable table of dataset rows.',
+        summary: 'Data table: typed columns (number, percent, badge, link, progress, sparkline), sort, search.',
+        data: { required: true, description: 'Rows to list; each column reads one field.' },
+        filterable: true,
+        props: {
+            title: OPTIONAL_TITLE,
+            caption: str({
+                maxLength: 200,
+                description: 'Table caption; spoken only when it repeats the title.',
+            }),
+            columns: list(COLUMN_SCHEMA, {
+                minItems: 1,
+                maxItems: MAX_COLUMNS,
+                description: 'Omitted: the first 8 data fields.',
+            }),
+            ...anchorProps,
+        },
+        runtimeFeatures: [DATA_TABLE_FEATURE],
+        a11y: 'A real <table> with column and row headers and a caption; sort buttons set aria-sort and announce the order; search announces the row count.',
+        serializer: 'Serializes to its columns and data binding, never to rendered rows.',
+    }),
+    render,
+    check: checkDataTable,
+};
+//# sourceMappingURL=data-table.js.map