@uniweb/kit 0.10.2 → 0.10.4

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
     "./xref": "./src/xref/index.js",
     "./theme-tokens.css": "./src/theme-tokens.css",
-    "./prose-tokens.css": "./src/prose-tokens.css"
+    "./prose-tokens.css": "./src/prose-tokens.css",
+    "./callout-tokens.css": "./src/callout-tokens.css"
   },
   "files": [
     "src",
@@ -41,9 +42,9 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
+    "@uniweb/semantic-parser": "1.2.0",
     "@uniweb/core": "0.8.0",
-    "@uniweb/scene": "0.1.2",
-    "@uniweb/semantic-parser": "1.2.0"
+    "@uniweb/scene": "0.1.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/callout-tokens.css

@@ -0,0 +1,89 @@
+/*
+ * Callout styling for the five standard concept tags, wired to the theme.
+ *
+ * Usage — one line, in the foundation's stylesheet, alongside the others:
+ *
+ *   @import "@uniweb/kit/callout-tokens.css";
+ *
+ * OPT-IN, and that is the point. kit's render engine emits a concept block as
+ * a plain bordered box carrying `data-concept="<tag>"` and decides nothing
+ * about how it looks, because what a callout looks like is a foundation's
+ * design. This file is the answer for the foundations that do not want to make
+ * that decision — the common look, themed, in one import.
+ *
+ * ── Why five names may live here when they may not live in a component ──
+ *
+ * kit answers for no NAME: it must never render its own accordion for `faq` or
+ * its own Alert for a `@Alert` reference, because that shadows a foundation
+ * shipping its own and cannot be overridden without forking. Two things make a
+ * stylesheet different:
+ *
+ *   1. CSS loses to specificity. A foundation that disagrees writes one rule
+ *      and wins, keeping kit's walk and its own look.
+ *   2. These five are not names we invented. `NOTE`, `TIP`, `IMPORTANT`,
+ *      `WARNING` and `CAUTION` are GitHub's alert kinds, which content-reader
+ *      accepts as a second spelling of a concept block. Implementing a
+ *      published convention is the same category as shipping icon-library
+ *      prefixes; inventing a list would be the concept registry the whole
+ *      design forbids.
+ *
+ * ── The colours are the site's ──
+ *
+ * Every value below is a semantic token the site sets in `theme.yml` —
+ * `--info`, `--warning`, `--error`, `--success` and their `-subtle` surfaces.
+ * kit supplies the MAPPING (which tag means which token); the site supplies
+ * what those tokens are, and they flip with the visitor's scheme on their own.
+ * No fixed palette appears here, for the reason `tests/no-fixed-palettes.test.js`
+ * exists.
+ *
+ * ── Tags with no rule ──
+ *
+ * A concept block whose tag is not one of the five keeps the engine's plain
+ * bordered box. That is deliberate: an unrecognized concept should look
+ * unremarkable rather than borrow a severity it was never given.
+ */
+
+[data-concept] {
+  border-radius: var(--radius, 0.5rem);
+}
+
+[data-concept="note"],
+[data-concept="info"] {
+  border-color: var(--info);
+  background-color: var(--info-subtle);
+}
+
+[data-concept="tip"],
+[data-concept="success"] {
+  border-color: var(--success);
+  background-color: var(--success-subtle);
+}
+
+[data-concept="important"] {
+  border-color: var(--primary);
+  background-color: var(--muted);
+}
+
+[data-concept="warning"] {
+  border-color: var(--warning);
+  background-color: var(--warning-subtle);
+}
+
+[data-concept="caution"],
+[data-concept="error"] {
+  border-color: var(--error);
+  background-color: var(--error-subtle);
+}
+
+/*
+ * A callout inside a `prose` container should not inherit the container's
+ * first-child/last-child margin collapsing on its own children, or the box
+ * gains dead space at top and bottom that its neighbours do not have.
+ */
+[data-concept] > :first-child {
+  margin-top: 0;
+}
+
+[data-concept] > :last-child {
+  margin-bottom: 0;
+}

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>