@kolkrabbi/kol-workshop 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "private": false,
   "description": "KOL workshop/docs system — a handrolled markdown engine, search, tag system (incl. a d3 tag graph), docs viewer, and docs shell. Sits above @kolkrabbi/kol-{theme,icons,component,framework}; content is consumer-injected (the package never globs docs).",
   "license": "MIT",
@@ -14,10 +14,10 @@
   "dependencies": {
     "d3": "^7.9.0",
     "@kolkrabbi/kol-brand": "^0.1.2",
-    "@kolkrabbi/kol-icons": "0.7.0",
-    "@kolkrabbi/kol-component": "0.12.0",
-    "@kolkrabbi/kol-framework": "0.5.0",
-    "@kolkrabbi/kol-theme": "0.11.1"
+    "@kolkrabbi/kol-component": "0.12.3",
+    "@kolkrabbi/kol-framework": "0.5.6",
+    "@kolkrabbi/kol-theme": "0.11.11",
+    "@kolkrabbi/kol-icons": "0.8.3"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/docs/DocKit.jsx

@@ -0,0 +1,70 @@
+/**
+ * DocKit — the Doc* composer family over the kol-theme `.kol-doc-*` role set
+ * (theme ≥ 0.11.9). The packaged successors of the showcase-local doc kit
+ * (2026-07-28 doc+card sets epic): thin composers, zero styling of their own —
+ * every text rule lives in kol-type-roles.css.
+ *
+ *   DocHeader  — eyebrow → h1 → lede page header
+ *   DocSection — anchored section: rule + h2 + optional lede + content
+ *   DocTable   — the props table (Prop / Type / Default / Description)
+ *   DocFigure  — framed content container + optional caption
+ */
+
+import { Table } from '@kolkrabbi/kol-component'
+
+export function DocHeader({ eyebrow, title, lede, children }) {
+  return (
+    <header className="flex flex-col gap-3">
+      {eyebrow && <p className="kol-doc-eyebrow">{eyebrow}</p>}
+      <h1 className="kol-doc-heading">{title}</h1>
+      {lede && <p className="kol-doc-lede">{lede}</p>}
+      {children}
+    </header>
+  )
+}
+
+export function DocSection({ id, title, lede, children }) {
+  return (
+    <section id={id} className="flex flex-col gap-4 border-t border-fg-08 pt-8 scroll-mt-20">
+      {title && <h2 className="kol-doc-section-title">{title}</h2>}
+      {lede && <p className="kol-doc-body max-w-[65ch]">{lede}</p>}
+      {children}
+    </section>
+  )
+}
+
+/* DocTable — a PRESET over the kol-component Table (the one table; 2026-07-28
+ * user ruling: no parallel table markup). Fixed props-table columns, doc cell
+ * classes through Table's per-column seams, doc chrome via the .kol-doc-table
+ * class on Table's wrapper (the descendant rules out-specify Table's cell
+ * defaults). The .kol-doc-figure frame supplies the border. */
+const PROPS_COLUMNS = [
+  { accessor: 'prop', header: 'Prop', className: 'kol-doc-table-value text-emphasis' },
+  { accessor: 'type', header: 'Type', className: 'kol-doc-table-value kol-doc-table-value--wrap text-meta' },
+  { accessor: 'def', header: 'Default', className: 'kol-doc-table-value text-meta' },
+  { accessor: 'desc', header: 'Description' },
+]
+
+export function DocTable({ rows }) {
+  if (!rows?.length) return null
+  return (
+    <div className="kol-doc-figure overflow-x-auto">
+      <Table
+        variant="simple"
+        caption="Props"
+        columns={PROPS_COLUMNS}
+        rows={rows.map((r) => ({ id: r.prop, ...r }))}
+        className="kol-doc-table"
+      />
+    </div>
+  )
+}
+
+export function DocFigure({ caption, className = '', children }) {
+  return (
+    <figure className={`kol-doc-figure ${className}`}>
+      {children}
+      {caption && <figcaption className="kol-doc-caption border-t border-fg-08 px-4 py-2.5">{caption}</figcaption>}
+    </figure>
+  )
+}

package/src/docs/index.js

@@ -12,3 +12,4 @@ export { default as DocsArticle } from './DocsArticle.jsx'
 export { default as DocsHeader } from './DocsHeader.jsx'
 export { default as DocsFrontmatter } from './DocsFrontmatter.jsx'
 export { renderInlineTokens } from './render-tokens.jsx'
+export { DocHeader, DocSection, DocTable, DocFigure } from './DocKit.jsx'