@bendyline/squisq-react 1.0.3 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-react",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "React component library for doc playback, block rendering, and media layers",
   "license": "MIT",
   "author": "Bendyline",
@@ -52,17 +52,17 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "1.1.1"
+    "@bendyline/squisq": "1.2.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "preact": "^10.25.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
-    "jsdom": "^25.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.0"
+    "@types/react": "18.3.28",
+    "preact": "10.29.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/jest-dom": "6.9.1",
+    "jsdom": "25.0.1",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3"
   }
 }

package/src/BlockRenderer.tsx

@@ -12,6 +12,7 @@ import { TextLayer } from './layers/TextLayer';
 import { ShapeLayer } from './layers/ShapeLayer';
 import { MapLayer } from './layers/MapLayer';
 import { VideoLayer } from './layers/VideoLayer';
+import { TableLayer } from './layers/TableLayer';
 import { getTransitionClass } from './utils/animationUtils';
 
 /** Default viewport dimensions (1080p landscape) - for backwards compatibility */
@@ -137,6 +138,8 @@ function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }: Laye
           isPlaying={isPlaying}
         />
       );
+    case 'table':
+      return <TableLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
     default:
       console.warn(`Unknown layer type: ${(layer as Layer).type}`);
       return null;

package/src/LinearDocView.tsx

@@ -25,7 +25,7 @@ import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
 import { getLayers, hasTemplate, DEFAULT_THEME } from '@bendyline/squisq/doc';
 import type { RenderContext } from '@bendyline/squisq/doc';
 import { extractPlainText } from '@bendyline/squisq/markdown';
-import type { MarkdownBlockNode, MarkdownList } from '@bendyline/squisq/markdown';
+import type { MarkdownBlockNode, MarkdownList, MarkdownTable } from '@bendyline/squisq/markdown';
 import { BlockRenderer } from './BlockRenderer';
 import { MarkdownRenderer } from './MarkdownRenderer';
 
@@ -216,6 +216,26 @@ function extractListItems(contents?: MarkdownBlockNode[]): string[] {
   return items;
 }
 
+/** Extract table data (headers, rows, alignment) from block contents. */
+function extractTableData(contents?: MarkdownBlockNode[]): {
+  headers: string[];
+  rows: string[][];
+  align?: (('left' | 'right' | 'center') | null)[];
+} | null {
+  if (!contents) return null;
+  for (const node of contents) {
+    if (node.type === 'table') {
+      const table = node as MarkdownTable;
+      const [headerRow, ...bodyRows] = table.children;
+      if (!headerRow) return null;
+      const headers = headerRow.children.map((cell) => extractPlainText(cell).trim());
+      const rows = bodyRows.map((row) => row.children.map((cell) => extractPlainText(cell).trim()));
+      return { headers, rows, align: table.align };
+    }
+  }
+  return null;
+}
+
 /**
  * Provide sensible default fields for templates that require more than
  * just a `title`. Prevents crashes from undefined required fields.
@@ -243,6 +263,10 @@ function getTemplateDefaults(
       return { term: headingText, definition: bodyText || headingText };
     case 'dateEvent':
       return { date: headingText, description: bodyText || headingText };
+    case 'dataTable': {
+      const tableData = extractTableData(contents);
+      return tableData ?? { headers: ['Column'], rows: [['Data']] };
+    }
     default:
       return {};
   }
@@ -281,7 +305,7 @@ export function LinearDocView({
     [activeViewport, totalBlocks, theme],
   );
 
-  const activeTheme = theme ?? DEFAULT_THEME;
+  const activeTheme = renderContext.theme!;
   const bgColor = activeTheme.colors.background;
   const textColor = activeTheme.colors.text;
   const mutedColor = activeTheme.colors.textMuted;
@@ -388,6 +412,27 @@ export function LinearDocView({
           .squisq-linear-content em {
             font-style: italic;
           }
+          .squisq-linear-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1em 0;
+            font-size: 0.95em;
+          }
+          .squisq-linear-content thead th {
+            background: var(--squisq-linear-primary);
+            color: var(--squisq-linear-bg);
+            font-family: var(--squisq-linear-title-font);
+            font-weight: 600;
+            padding: 10px 14px;
+            text-align: left;
+          }
+          .squisq-linear-content tbody td {
+            padding: 8px 14px;
+            border-bottom: 1px solid color-mix(in srgb, var(--squisq-linear-muted) 30%, transparent);
+          }
+          .squisq-linear-content tbody tr:hover {
+            background: color-mix(in srgb, var(--squisq-linear-primary) 8%, transparent);
+          }
         `}</style>
         {doc.blocks.map((block, i) => (
           <BlockSection

package/src/__tests__/TableLayer.test.tsx

@@ -0,0 +1,142 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { TableLayer } from '../layers/TableLayer';
+import type { TableLayer as TableLayerType } from '@bendyline/squisq/schemas';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeTableLayer(overrides: Partial<TableLayerType> = {}): TableLayerType {
+  return {
+    type: 'table',
+    id: 'test-table',
+    content: {
+      headers: ['Name', 'Age', 'City'],
+      rows: [
+        ['Alice', '30', 'Seattle'],
+        ['Bob', '25', 'Portland'],
+      ],
+      style: {
+        headerBackground: '#1e3a5f',
+        headerColor: '#ffffff',
+        cellBackground: 'rgba(255,255,255,0.05)',
+        cellColor: '#e0e0e0',
+        borderColor: 'rgba(255,255,255,0.12)',
+        fontSize: 28,
+        fontFamily: 'system-ui',
+        headerFontFamily: 'Georgia',
+        borderRadius: 8,
+      },
+    },
+    position: { x: '10%', y: '10%', width: '80%', height: '80%' },
+    ...overrides,
+  } as TableLayerType;
+}
+
+const viewport = { width: 1920, height: 1080 };
+
+function renderTableLayer(layer?: TableLayerType) {
+  return render(
+    <svg>
+      <TableLayer layer={layer ?? makeTableLayer()} viewport={viewport} blockTime={0} />
+    </svg>,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('TableLayer', () => {
+  it('renders a foreignObject element', () => {
+    const { container } = renderTableLayer();
+    const fo = container.querySelector('foreignObject');
+    expect(fo).toBeTruthy();
+  });
+
+  it('renders a table element', () => {
+    const { container } = renderTableLayer();
+    const table = container.querySelector('table');
+    expect(table).toBeTruthy();
+  });
+
+  it('renders the correct number of header cells', () => {
+    const { container } = renderTableLayer();
+    const headers = container.querySelectorAll('th');
+    expect(headers.length).toBe(3);
+  });
+
+  it('renders header text content', () => {
+    const { container } = renderTableLayer();
+    const headers = container.querySelectorAll('th');
+    expect(headers[0].textContent).toBe('Name');
+    expect(headers[1].textContent).toBe('Age');
+    expect(headers[2].textContent).toBe('City');
+  });
+
+  it('renders the correct number of data rows', () => {
+    const { container } = renderTableLayer();
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows.length).toBe(2);
+  });
+
+  it('renders cell text content', () => {
+    const { container } = renderTableLayer();
+    const cells = container.querySelectorAll('td');
+    expect(cells[0].textContent).toBe('Alice');
+    expect(cells[1].textContent).toBe('30');
+    expect(cells[2].textContent).toBe('Seattle');
+    expect(cells[3].textContent).toBe('Bob');
+  });
+
+  it('applies header background color', () => {
+    const { container } = renderTableLayer();
+    const th = container.querySelector('th');
+    expect(th?.style.background).toBe('rgb(30, 58, 95)');
+  });
+
+  it('applies font size from style', () => {
+    const { container } = renderTableLayer();
+    const table = container.querySelector('table');
+    expect(table?.style.fontSize).toBe('28px');
+  });
+
+  it('applies column alignment when provided', () => {
+    const layer = makeTableLayer();
+    layer.content.align = ['left', 'center', 'right'];
+    const { container } = renderTableLayer(layer);
+
+    const headers = container.querySelectorAll('th');
+    expect(headers[0].style.textAlign).toBe('left');
+    expect(headers[1].style.textAlign).toBe('center');
+    expect(headers[2].style.textAlign).toBe('right');
+  });
+
+  it('handles empty headers gracefully', () => {
+    const layer = makeTableLayer();
+    layer.content.headers = [];
+    const { container } = renderTableLayer(layer);
+    const thead = container.querySelector('thead');
+    // No thead or empty thead
+    expect(thead).toBeFalsy();
+  });
+
+  it('handles empty rows gracefully', () => {
+    const layer = makeTableLayer();
+    layer.content.rows = [];
+    const { container } = renderTableLayer(layer);
+    const tbody = container.querySelector('tbody');
+    // No tbody or empty tbody
+    expect(tbody).toBeFalsy();
+  });
+
+  it('sets foreignObject dimensions based on viewport percentage', () => {
+    const { container } = renderTableLayer();
+    const fo = container.querySelector('foreignObject');
+    // 80% of 1920 = 1536
+    expect(fo?.getAttribute('width')).toBe('1536');
+    // 80% of 1080 = 864
+    expect(fo?.getAttribute('height')).toBe('864');
+  });
+});

package/src/index.ts

@@ -17,6 +17,7 @@ export { ImageLayer } from './layers/ImageLayer.js';
 export { TextLayer } from './layers/TextLayer.js';
 export { ShapeLayer } from './layers/ShapeLayer.js';
 export { VideoLayer } from './layers/VideoLayer.js';
+export { TableLayer } from './layers/TableLayer.js';
 export { MapLayer } from './layers/MapLayer.js';
 
 // Hooks

package/src/layers/TableLayer.tsx

@@ -0,0 +1,129 @@
+/**
+ * TableLayer Component
+ *
+ * Renders a data table within an SVG block using a <foreignObject> to embed
+ * an HTML table. This gives us native table layout inside SVG viewports.
+ *
+ * The table is styled inline using the TableLayerStyle properties, which are
+ * typically derived from the active theme by the dataTable template.
+ */
+
+import type { TableLayer as TableLayerType } from '@bendyline/squisq/schemas';
+import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
+import { getAnimationStyle } from '../utils/animationUtils';
+
+interface TableLayerProps {
+  layer: TableLayerType;
+  /** Viewport dimensions for percentage calculations */
+  viewport: { width: number; height: number };
+  /** Current time relative to block start (for animation) */
+  blockTime: number;
+}
+
+export function TableLayer({ layer, viewport, blockTime }: TableLayerProps) {
+  const { content, position, animation } = layer;
+  const { headers, rows, align, style } = content;
+
+  // Resolve position values to pixels
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+
+  // Apply anchor offset
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+
+  // Build animation style
+  const animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
+
+  const cellAlign = (ci: number): React.CSSProperties | undefined => {
+    const a = align?.[ci];
+    return a ? { textAlign: a } : undefined;
+  };
+
+  const borderRadius = style.borderRadius ?? 8;
+
+  return (
+    <foreignObject x={finalX} y={finalY} width={width} height={height} style={animStyle}>
+      <div
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '16px',
+          boxSizing: 'border-box',
+        }}
+      >
+        <table
+          style={{
+            width: '100%',
+            borderCollapse: 'separate',
+            borderSpacing: 0,
+            fontSize: `${style.fontSize}px`,
+            fontFamily: style.fontFamily ?? 'system-ui, sans-serif',
+            overflow: 'hidden',
+            borderRadius: `${borderRadius}px`,
+            border: `1px solid ${style.borderColor}`,
+          }}
+        >
+          {headers.length > 0 && (
+            <thead>
+              <tr>
+                {headers.map((header, ci) => (
+                  <th
+                    key={ci}
+                    style={{
+                      background: style.headerBackground,
+                      color: style.headerColor,
+                      fontFamily:
+                        style.headerFontFamily ?? style.fontFamily ?? 'system-ui, sans-serif',
+                      fontWeight: 600,
+                      padding: '12px 16px',
+                      borderBottom: `2px solid ${style.borderColor}`,
+                      borderRight:
+                        ci < headers.length - 1 ? `1px solid ${style.borderColor}` : undefined,
+                      ...cellAlign(ci),
+                    }}
+                  >
+                    {header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          {rows.length > 0 && (
+            <tbody>
+              {rows.map((row, ri) => (
+                <tr key={ri}>
+                  {row.map((cell, ci) => (
+                    <td
+                      key={ci}
+                      style={{
+                        background: style.cellBackground,
+                        color: style.cellColor,
+                        padding: '10px 16px',
+                        borderBottom:
+                          ri < rows.length - 1 ? `1px solid ${style.borderColor}` : undefined,
+                        borderRight:
+                          ci < row.length - 1 ? `1px solid ${style.borderColor}` : undefined,
+                        ...cellAlign(ci),
+                      }}
+                    >
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          )}
+        </table>
+      </div>
+    </foreignObject>
+  );
+}