feat: ::cell primitive, grid spans, extended cols 6/12 and rows 4 (#4)

Author: developeranku

src/blocks/BlockRenderer.tsx

@@ -64,6 +64,10 @@ export function BlockRenderer({ block }: { block: Block }) {
       const Comp = resolveBlockComponent('grid', styleId);
       return <Comp block={block} />;
     }
+    case 'cell': {
+      const Comp = resolveBlockComponent('cell', styleId);
+      return <Comp block={block} />;
+    }
     default: {
       const _exhaustive: never = block;
       void _exhaustive;

src/blocks/default/Cell.tsx

@@ -0,0 +1,21 @@
+import type { Cell as CellBlock } from '@/ir/schema';
+
+import { BlockRenderer } from '../BlockRenderer';
+
+export function Cell({ block }: { block: CellBlock }) {
+  const style: React.CSSProperties = {};
+  if (block.span) style.gridColumn = `span ${block.span}`;
+  if (block.rowSpan) style.gridRow = `span ${block.rowSpan}`;
+  return (
+    <div
+      className="block block-cell"
+      data-span={block.span ?? undefined}
+      data-row-span={block.rowSpan ?? undefined}
+      style={style}
+    >
+      {block.children.map((child, idx) => (
+        <BlockRenderer key={idx} block={child} />
+      ))}
+    </div>
+  );
+}

src/blocks/registry.ts

@@ -3,6 +3,7 @@ import type { ComponentType } from 'react';
 import type { Block } from '@/ir/schema';
 
 import { Box } from './default/Box';
+import { Cell } from './default/Cell';
 import { Chart } from './default/Chart';
 import { Code } from './default/Code';
 import { Columns } from './default/Columns';
@@ -70,6 +71,7 @@ const blockRegistry: Registry = {
   box: { default: Box },
   columns: { default: Columns },
   grid: { default: Grid },
+  cell: { default: Cell },
 };
 
 export function resolveBlockComponent<T extends BlockType>(

src/ir/parse.ts

@@ -6,11 +6,13 @@ import {
   type Block,
   type Box,
   type Brand,
+  type Cell,
   type Chart,
   type ChartDatum,
   type ChartKind,
   type Code,
   type Deck,
+  type Grid,
   type Heading,
   type LayoutId,
   type List,
@@ -308,15 +310,27 @@ function expandBlockDirective(
 
   if (name === 'grid') {
     const cols = (
-      options.cols && [2, 3, 4].includes(Number(options.cols)) ? Number(options.cols) : 2
-    ) as 2 | 3 | 4;
+      options.cols && [2, 3, 4, 6, 12].includes(Number(options.cols)) ? Number(options.cols) : 2
+    ) as Grid['cols'];
     const rows = (
-      options.rows && [1, 2, 3].includes(Number(options.rows)) ? Number(options.rows) : 2
-    ) as 1 | 2 | 3;
+      options.rows && [1, 2, 3, 4].includes(Number(options.rows)) ? Number(options.rows) : 2
+    ) as Grid['rows'];
     const children = parseChildren(tokens, cursor, true);
     return [{ type: 'grid', cols, rows, children }];
   }
 
+  if (name === 'cell') {
+    const children = parseChildren(tokens, cursor, true);
+    const spanRaw = Number(options.span);
+    const rowRaw = Number(options.row ?? options.rowSpan);
+    const span = spanRaw && spanRaw >= 1 && spanRaw <= 12 ? (spanRaw as Cell['span']) : undefined;
+    const rowSpan = rowRaw && rowRaw >= 1 && rowRaw <= 4 ? (rowRaw as Cell['rowSpan']) : undefined;
+    const cell: Cell = { type: 'cell', children };
+    if (span !== undefined) cell.span = span;
+    if (rowSpan !== undefined) cell.rowSpan = rowSpan;
+    return [cell];
+  }
+
   if (name === 'lead' || name === 'caption') {
     const children = parseChildren(tokens, cursor, true);
     return children.map((b) =>

src/ir/schema.ts

@@ -86,8 +86,15 @@ export type Columns = {
 
 export type Grid = {
   type: 'grid';
-  cols: 2 | 3 | 4;
-  rows: 1 | 2 | 3;
+  cols: 2 | 3 | 4 | 6 | 12;
+  rows: 1 | 2 | 3 | 4;
+  children: Block[];
+};
+
+export type Cell = {
+  type: 'cell';
+  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  rowSpan?: 1 | 2 | 3 | 4;
   children: Block[];
 };
 
@@ -125,6 +132,7 @@ export type Block =
   | Box
   | Columns
   | Grid
+  | Cell
   | Chart
   | Table;
 
@@ -209,6 +217,7 @@ const BlockSchema: z.ZodType<Block> = z.lazy(() =>
     BoxSchema,
     ColumnsSchema,
     GridSchema,
+    CellSchema,
   ]),
 );
 
@@ -231,12 +240,36 @@ const ColumnsSchema: z.ZodType<Columns> = z.lazy(() =>
 const GridSchema: z.ZodType<Grid> = z.lazy(() =>
   z.object({
     type: z.literal('grid'),
-    cols: z.union([z.literal(2), z.literal(3), z.literal(4)]),
-    rows: z.union([z.literal(1), z.literal(2), z.literal(3)]),
+    cols: z.union([z.literal(2), z.literal(3), z.literal(4), z.literal(6), z.literal(12)]),
+    rows: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4)]),
     children: z.array(BlockSchema).min(1),
   }),
 );
 
+const CellSchema: z.ZodType<Cell> = z.lazy(() =>
+  z.object({
+    type: z.literal('cell'),
+    span: z
+      .union([
+        z.literal(1),
+        z.literal(2),
+        z.literal(3),
+        z.literal(4),
+        z.literal(5),
+        z.literal(6),
+        z.literal(7),
+        z.literal(8),
+        z.literal(9),
+        z.literal(10),
+        z.literal(11),
+        z.literal(12),
+      ])
+      .optional(),
+    rowSpan: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4)]).optional(),
+    children: z.array(BlockSchema),
+  }),
+);
+
 const LayoutIdSchema = z.enum(LAYOUT_IDS);
 
 export type Slide = {

src/styles/blocks.css

@@ -379,6 +379,14 @@
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.block-grid[data-cols='6'] {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.block-grid[data-cols='12'] {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
 .block-grid[data-rows='1'] {
   grid-template-rows: minmax(0, 1fr);
 }
@@ -391,6 +399,20 @@
   grid-template-rows: repeat(3, minmax(0, 1fr));
 }
 
+.block-grid[data-rows='4'] {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+/* ─── Cell ─────────────────────────────────────────────────────────────── */
+
+.block-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  min-width: 0;
+  min-height: 0;
+}
+
 /* ============================================================
    Brutalist-specific block treatments
    ============================================================ */

tests/ir/parse.test.ts

@@ -446,4 +446,44 @@ B
     };
     deck.slides.forEach((s) => s.blocks.forEach(walk));
   });
+
+  it('parses ::grid with extended cols=12 and rows=4', () => {
+    const md = '::grid{cols=12 rows=4}\nHello\n::';
+    const deck = parseDeck(md);
+    const grid = deck.slides[0].blocks[0] as Grid;
+    expect(grid.type).toBe('grid');
+    expect(grid.cols).toBe(12);
+    expect(grid.rows).toBe(4);
+  });
+
+  it('parses ::cell with span inside a grid', () => {
+    const md = `::grid{cols=12}
+::cell{span=8}
+Main content.
+::
+::cell{span=4}
+Side note.
+::
+::`;
+    const deck = parseDeck(md);
+    const grid = deck.slides[0].blocks[0] as Grid;
+    expect(grid.children).toHaveLength(2);
+    const c1 = grid.children[0] as import('@/ir/schema').Cell;
+    expect(c1.type).toBe('cell');
+    expect(c1.span).toBe(8);
+    expect((grid.children[1] as import('@/ir/schema').Cell).span).toBe(4);
+  });
+
+  it('parses ::cell rowSpan via row option', () => {
+    const md = `::grid{cols=4 rows=2}
+::cell{span=2 row=2}
+Tall.
+::
+::`;
+    const deck = parseDeck(md);
+    const grid = deck.slides[0].blocks[0] as Grid;
+    const cell = grid.children[0] as import('@/ir/schema').Cell;
+    expect(cell.rowSpan).toBe(2);
+    expect(cell.span).toBe(2);
+  });
 });