anentrypoint-design 0.0.356 → 0.0.357

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.356",
+  "version": "0.0.357",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/spreadsheet-preview.js

@@ -0,0 +1,78 @@
+// SpreadsheetPreview — tabbed inline spreadsheet/CSV viewer, ported from
+// docstudio's documents/xls-preview.js. The kit does no parsing (no SheetJS
+// dependency): the host hands over an already-parsed `workbook` shape and
+// this component only renders tabs + a table + loading/error/truncation
+// states, reusing the existing Skeleton/Alert primitives rather than
+// inventing new visual language.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Skeleton, Alert } from './content.js';
+const h = webjsx.createElement;
+
+const DEFAULT_MAX_ROWS = 500;
+const DEFAULT_MAX_COLS = 80;
+
+// workbook: { sheetNames: string[], sheets: { [name]: string[][] } }
+export function SpreadsheetPreview({
+    workbook, activeSheet, onSheetChange,
+    maxRows = DEFAULT_MAX_ROWS, maxCols = DEFAULT_MAX_COLS,
+    truncated, loading, error, errorActionLabel = 'retry', onErrorAction,
+    key,
+} = {}) {
+    if (loading) {
+        return h('div', { key, class: 'ds-sheet-preview is-loading' },
+            Skeleton({ height: '1.8em', width: '40%', label: 'loading spreadsheet' }),
+            Skeleton({ height: '14em', width: '100%' }));
+    }
+
+    if (error) {
+        return h('div', { key, class: 'ds-sheet-preview is-error' },
+            Alert({
+                kind: 'error',
+                title: 'could not preview this file',
+                children: [String(error)],
+            }),
+            onErrorAction ? h('button', {
+                type: 'button', class: 'ds-sheet-preview-error-action', onclick: onErrorAction,
+            }, errorActionLabel) : null);
+    }
+
+    const sheetNames = (workbook && workbook.sheetNames) || [];
+    if (!sheetNames.length) {
+        return h('div', { key, class: 'ds-sheet-preview is-empty' }, 'no sheets found');
+    }
+
+    const active = activeSheet && sheetNames.includes(activeSheet) ? activeSheet : sheetNames[0];
+    const rowsRaw = (workbook.sheets && workbook.sheets[active]) || [];
+
+    const rowOverflow = rowsRaw.length > maxRows;
+    const rows = rowsRaw.slice(0, maxRows);
+    const colOverflow = rows.some((r) => Array.isArray(r) && r.length > maxCols);
+    const clampedRows = rows.map((r) => (Array.isArray(r) ? r.slice(0, maxCols) : r));
+    const isTruncated = truncated || rowOverflow || colOverflow;
+
+    const isNumeric = (v) => v !== '' && v != null && !isNaN(Number(v));
+
+    return h('div', { key, class: 'ds-sheet-preview' },
+        sheetNames.length > 1 ? h('div', {
+            class: 'ds-sheet-preview-tabbar', role: 'tablist', 'aria-label': 'sheets',
+        }, ...sheetNames.map((name) => h('button', {
+            key: name, type: 'button', role: 'tab',
+            'aria-selected': name === active ? 'true' : 'false',
+            tabindex: name === active ? '0' : '-1',
+            class: 'ds-sheet-preview-tab' + (name === active ? ' is-active' : ''),
+            onclick: () => onSheetChange && onSheetChange(name),
+        }, name))) : null,
+        isTruncated ? h('div', { class: 'ds-sheet-preview-truncated', role: 'status' },
+            'showing first ' + clampedRows.length + ' rows' + (colOverflow ? ' (columns truncated)' : '') + ' — full file has more data') : null,
+        h('div', { class: 'ds-sheet-preview-body' },
+            clampedRows.length === 0
+                ? h('div', { class: 'ds-sheet-preview-empty' }, 'empty sheet')
+                : h('table', { class: 'ds-sheet-preview-table' },
+                    h('thead', {}, h('tr', {},
+                        ...(clampedRows[0] || []).map((cell, i) => h('th', { key: i, scope: 'col' }, cell == null ? '' : String(cell))))),
+                    h('tbody', {}, ...clampedRows.slice(1).map((row, ri) => h('tr', { key: ri },
+                        ...row.map((cell, ci) => h('td', {
+                            key: ci, class: isNumeric(cell) ? 'num' : null,
+                        }, cell == null ? '' : String(cell)))))))));
+}

package/src/components.js

@@ -33,6 +33,8 @@ export {
 
 export { ContextPane } from './components/context-pane.js';
 
+export { SpreadsheetPreview } from './components/spreadsheet-preview.js';
+
 export {
     fileGlyph, fmtFileSize,
     FileIcon, FileRow, FileGrid, FileSkeleton, sortFiles, FileToolbar, RootsPicker,

package/src/css/app-shell/kits-appended.css

@@ -385,3 +385,46 @@
 .ds-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
 .ds-avatar-md { width: 36px; height: 36px; font-size: 12px; }
 .ds-avatar-lg { width: 48px; height: 48px; font-size: 15px; }
+
+/* SpreadsheetPreview — tabbed inline spreadsheet/CSV viewer (docstudio
+   xls-preview.js port). Tabs reuse the same neutral-at-rest pattern as
+   Table's sortable headers; the truncation banner is persistent and never
+   hides the table underneath. */
+.ds-sheet-preview { display: flex; flex-direction: column; gap: var(--space-2, 8px); min-width: 0; }
+.ds-sheet-preview-tabbar {
+  display: flex; gap: var(--space-1, 4px); overflow-x: auto; -webkit-overflow-scrolling: touch;
+  border-bottom: 1px solid var(--border, var(--bg-3));
+}
+.ds-sheet-preview-tab {
+  flex-shrink: 0; background: none; border: none; cursor: pointer;
+  padding: var(--space-1-5, 5px) var(--space-2-5, 10px);
+  font: inherit; color: var(--fg-3); border-bottom: 2px solid transparent;
+}
+.ds-sheet-preview-tab:hover { color: var(--fg); }
+.ds-sheet-preview-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
+.ds-sheet-preview-tab.is-active { color: var(--fg); border-bottom-color: var(--accent-ink, var(--accent)); }
+.ds-sheet-preview-truncated {
+  font-size: var(--fs-tiny, 12px); color: var(--fg-3);
+  padding: var(--space-1, 4px) var(--space-2, 8px);
+  background: var(--bg-2); border-radius: var(--r-1, 6px);
+}
+.ds-sheet-preview-body { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
+.ds-sheet-preview-table { min-width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 13px); }
+.ds-sheet-preview-table th, .ds-sheet-preview-table td {
+  padding: var(--space-1-5, 5px) var(--space-2, 8px);
+  border-bottom: 1px solid var(--border, var(--bg-3));
+  text-align: left; white-space: nowrap;
+}
+.ds-sheet-preview-table thead th {
+  position: sticky; top: 0; background: var(--bg-2); color: var(--fg-3);
+  font-weight: 600; z-index: 1;
+}
+.ds-sheet-preview-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.ds-sheet-preview-empty { padding: var(--space-3, 16px); color: var(--fg-3); }
+.ds-sheet-preview-error-action {
+  align-self: flex-start; background: none; border: 1px solid var(--border, var(--bg-3));
+  border-radius: var(--r-1, 6px); padding: var(--space-1, 4px) var(--space-2-5, 10px);
+  font: inherit; color: var(--fg); cursor: pointer;
+}
+.ds-sheet-preview-error-action:hover { background: var(--bg-2); }
+.ds-sheet-preview-error-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }