@uniweb/kit 0.10.1 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,13 +36,14 @@
     "node": ">=20.19"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.20",
     "clsx": "^2.1.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
+    "@uniweb/semantic-parser": "1.2.0",
     "@uniweb/scene": "0.1.2",
-    "@uniweb/core": "0.8.0",
-    "@uniweb/semantic-parser": "1.2.0"
+    "@uniweb/core": "0.8.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/prose-tokens.css

@@ -1,11 +1,14 @@
 /*
  * Tailwind Typography, wired to the theme.
  *
- * Usage — after the plugin, so these win on equal specificity:
+ * Usage — one line, in the foundation's stylesheet:
  *
- *   @plugin "@tailwindcss/typography";
  *   @import "@uniweb/kit/prose-tokens.css";
  *
+ * That is the whole setup: this file brings the plugin with it (below) and then
+ * overrides its greys. It used to take two lines, and the foundation had to
+ * install the plugin itself and remember that the order mattered.
+ *
  * `prose` ships its own greys, which means long-form body copy is the one part
  * of a foundation that ignores the site's theme.yml unless someone bridges it
  * by hand. Everyone does bridge it by hand, identically, and the bridge is easy
@@ -29,6 +32,33 @@
  * other one only supplies column width and padding.
  */
 
+/*
+ * The plugin comes from kit, and the ORDER below is the reason.
+ *
+ * A `@plugin` inside a package's own CSS resolves from that package's
+ * dependencies, so a foundation importing this file needs nothing installed
+ * (verified 2026-07-30: a foundation with no typography dependency and no
+ * `@plugin` line of its own emitted `.prose :where(p){margin-top:1.25em}` in a
+ * production build).
+ *
+ * Why it moved here rather than staying the foundation's job. The overrides
+ * below have to come AFTER the plugin's own declarations or they lose on equal
+ * specificity — which made "install this, then import that, in this order" a
+ * three-part instruction a foundation could get subtly wrong, and the failure
+ * is silent: the variables are set, the rules they modify do not exist, and
+ * prose renders with no margins at all. Measured on a foundation missing only
+ * the plugin: `--tw-prose-body` present, every paragraph `margin-top: 0px`, no
+ * warning from anywhere. Owning both halves here makes the order unorderable.
+ *
+ * The precedent is `shiki` and `fuse.js` — kit takes DIRECT dependencies on
+ * what its own code needs at build time rather than asking a foundation to
+ * supply them (framework CLAUDE.md gotcha #10). This is that rule applied to
+ * the CSS layer. A foundation that never writes `prose` pays disk only:
+ * Tailwind emits utilities that are used, so an unused plugin generates
+ * nothing.
+ */
+@plugin "@tailwindcss/typography";
+
 .prose {
   --tw-prose-body: var(--body);
   --tw-prose-headings: var(--heading);

package/src/styled/Section/renderers/Table.jsx

@@ -1,7 +1,26 @@
 /**
- * Table Renderer
+ * Table Renderer — the styled table, opt-in.
  *
- * Renders HTML tables from structured content.
+ * The engine emits a plain semantic `<table>` and leaves the look to the
+ * typography layer, because what a table LOOKS like is a foundation's call.
+ * This is the other option: visible structure — header band, row separators,
+ * zebra striping — that a foundation opts into.
+ *
+ *   <Prose content={content} block={block} components={{ table: Table }} />
+ *
+ * ── What was wrong with it ──
+ *
+ * Until 2026-07-31 this read raw ProseMirror and got two things wrong, both
+ * silently. It tested `cell.type === 'tableHeader'`, a node type the reader
+ * never emits — cells are `tableCell` carrying `attrs.header` — so **no cell
+ * was ever a `<th>`** and every table rendered as an undifferentiated grid.
+ * And it read `cell.content[0].content[0].text`, the first text node of the
+ * first paragraph, so a cell was truncated to its first run with every mark
+ * discarded: `` `name` `` came out as bare `name`, and a cell holding a link
+ * lost it entirely.
+ *
+ * It now takes the sequence's table element, where a cell is a nested sequence
+ * — so a cell keeps its marks and may hold any block.
  *
  * @module @uniweb/kit/Section/renderers/Table
  */
@@ -9,43 +28,75 @@
 import React from 'react'
 import { cn } from '../../../utils/index.js'
 import { SafeHtml } from '../../../components/SafeHtml/index.js'
+import { SequenceElement } from '../../Render/index.jsx'
 
 /**
- * Table - Table renderer
+ * A cell's contents, with a lone paragraph unwrapped.
+ *
+ * `tableCell` is `paragraph+`, so a markdown cell is always exactly one
+ * paragraph — and emitting that `<p>` is what a typography layer then gives
+ * margins to, measured at 17.5px top and bottom, turning one-line rows into
+ * 75px. The engine makes the same allowance for the same reason.
+ */
+function cellContent(cell, block, components) {
+  const children = cell?.children || []
+  const [only] = children
+
+  if (children.length === 1 && only?.type === 'paragraph') {
+    return <SafeHtml value={only.text || ''} as="span" />
+  }
+  return children.map((el, i) => (
+    <SequenceElement key={i} element={el} block={block} components={components} />
+  ))
+}
+
+/**
+ * Table - styled table renderer
  *
  * @param {Object} props
- * @param {Array} props.content - Table content as rows/cells array
+ * @param {Array} [props.rows] - Rows from a sequence table element
+ * @param {Object} [props.element] - The table element itself, so this drops
+ *   straight into `components={{ table: Table }}` with no adapter
+ * @param {Object} [props.block] - Block instance, for insets inside a cell
+ * @param {Object} [props.components] - Renderer overrides, for nested content
  * @param {string} [props.className] - Additional CSS classes
  */
-export function Table({ content, className, ...props }) {
-  if (!content || !Array.isArray(content)) return null
+export function Table({ rows, element, block, components, className, ...props }) {
+  const data = rows ?? element?.rows
+  if (!Array.isArray(data) || data.length === 0) return null
+
+  const [first, ...rest] = data
+  const hasHeader = first.cells?.some((cell) => cell.header)
+  const bodyRows = hasHeader ? rest : data
+
+  const renderRow = (row, key, zebra) => (
+    <tr key={key} className={zebra ? 'bg-muted' : undefined}>
+      {row.cells?.map((cell, i) => {
+        const CellTag = cell.header ? 'th' : 'td'
+        return (
+          <CellTag
+            key={i}
+            style={cell.align ? { textAlign: cell.align } : undefined}
+            colSpan={cell.colspan > 1 ? cell.colspan : undefined}
+            rowSpan={cell.rowspan > 1 ? cell.rowspan : undefined}
+            className={cn(
+              'px-4 py-2 text-sm',
+              cell.header ? 'font-medium text-heading' : 'text-body'
+            )}
+          >
+            {cellContent(cell, block, components)}
+          </CellTag>
+        )
+      })}
+    </tr>
+  )
 
   return (
     <div className={cn('overflow-x-auto', className)} {...props}>
-      <table className="min-w-full divide-y divide-border border border-border rounded-lg">
-        <tbody className="divide-y divide-border bg-section">
-          {content.map((row, rowIndex) => (
-            <tr key={rowIndex} className={rowIndex % 2 === 0 ? 'bg-section' : 'bg-muted'}>
-              {row.content?.map((cell, cellIndex) => {
-                const CellTag = cell.type === 'tableHeader' ? 'th' : 'td'
-                const cellContent = cell.content?.[0]?.content?.[0]?.text || ''
-
-                return (
-                  <CellTag
-                    key={cellIndex}
-                    className={cn(
-                      'px-4 py-2 text-sm',
-                      cell.type === 'tableHeader'
-                        ? 'font-medium text-heading bg-muted'
-                        : 'text-body'
-                    )}
-                  >
-                    <SafeHtml value={cellContent} as="span" />
-                  </CellTag>
-                )
-              })}
-            </tr>
-          ))}
+      <table className="min-w-full border border-border rounded-lg">
+        {hasHeader && <thead className="bg-muted">{renderRow(first, 'h', false)}</thead>}
+        <tbody className="divide-y divide-border">
+          {bodyRows.map((row, i) => renderRow(row, i, i % 2 === 1))}
         </tbody>
       </table>
     </div>