@kolkrabbi/kol-workshop 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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",
@@ -13,11 +13,11 @@
   },
   "dependencies": {
     "d3": "^7.9.0",
+    "@kolkrabbi/kol-component": "0.12.3",
+    "@kolkrabbi/kol-theme": "0.11.9",
+    "@kolkrabbi/kol-framework": "0.5.5",
     "@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-icons": "0.8.3"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/docs/DocKit.jsx

@@ -0,0 +1,68 @@
+/**
+ * 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
+ */
+
+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>
+  )
+}
+
+export function DocTable({ rows }) {
+  if (!rows?.length) return null
+  return (
+    <div className="kol-doc-figure overflow-x-auto">
+      <table className="kol-doc-table">
+        <thead>
+          <tr>
+            {['Prop', 'Type', 'Default', 'Description'].map((h) => (
+              <th key={h}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.prop}>
+              <td className="kol-doc-table-value text-emphasis">{r.prop}</td>
+              <td className="kol-doc-table-value !whitespace-normal text-meta">{r.type}</td>
+              <td className="kol-doc-table-value text-meta">{r.def}</td>
+              <td>{r.desc}</td>
+            </tr>
+          ))}
+        </tbody>
+      </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'