@designtools/docs 0.1.0 → 0.2.1

package/src/voice-terms.tsx

@@ -1,5 +1,6 @@
 import type { TermEntry } from "./lib/manifest-types";
-import { inline } from "./lib/text";
+import { TermHead, TermRow } from "./lib/terms";
+import { DocsSection } from "./shell";
 
 /** The words to use, beside the ones not to: the product's words first, then the system's names that have wrong forms. */
 export function VoiceTerms({ terms }: { terms: TermEntry[] }) {
@@ -7,40 +8,30 @@ export function VoiceTerms({ terms }: { terms: TermEntry[] }) {
   const system = terms.filter((t) => t.kind !== "product" && t.wrong?.length);
   if (product.length + system.length === 0) return <p className="text-sm text-muted-foreground">No terms yet. Add them to the taxonomy file.</p>;
   return (
-    <div data-slot="voice-terms" className="flex flex-col gap-12">
-      {product.length > 0 && <Group title="In the product" terms={product} />}
-      {system.length > 0 && <Group title="In the system" terms={system} />}
-    </div>
+    <>
+      {product.length > 0 && (
+        <DocsSection title="In the product" lead="The words the product uses with the people it serves, in copy, on screens and in emails.">
+          <Terms terms={product} />
+        </DocsSection>
+      )}
+      {system.length > 0 && (
+        <DocsSection title="In the system" lead="The names the design system gives its parts, and the ones people reach for instead.">
+          <Terms terms={system} />
+        </DocsSection>
+      )}
+    </>
   );
 }
 
-function Group({ title, terms }: { title: string; terms: TermEntry[] }) {
+function Terms({ terms }: { terms: TermEntry[] }) {
   return (
-    <section className="flex flex-col gap-2">
-      <h3 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h3>
-      <dl className="grid gap-x-12 sm:grid-cols-2">
+    <div data-slot="voice-terms">
+      <TermHead />
+      <dl>
         {terms.map((t) => (
-          <div key={`${t.kind}:${t.name}`} data-slot="term" className="flex flex-col gap-1.5 border-t border-border py-5">
-            <dt className="text-3xl tracking-tight">
-              {t.name}
-              <span className="sr-only">, say this</span>
-            </dt>
-            {(t.wrong ?? []).length > 0 && (
-              <dd className="flex flex-wrap gap-x-3 text-base text-muted-foreground">
-                <span className="sr-only">not </span>
-                {(t.wrong ?? []).map((w) => (
-                  <s key={w} className="decoration-destructive decoration-2">
-                    {w}
-                  </s>
-                ))}
-              </dd>
-            )}
-            {(t.note || t.kind !== "product") && (
-              <dd className="text-sm text-muted-foreground">{t.note ? inline(t.note) : `The ${t.kind}'s name in the code.`}</dd>
-            )}
-          </div>
+          <TermRow key={`${t.kind}:${t.name}`} term={t} />
         ))}
       </dl>
-    </section>
+    </div>
   );
 }

package/src/workbench.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Live } from "./lib/live";
 import { Tabs } from "@base-ui/react/tabs";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
@@ -267,9 +268,11 @@ export function Workbench({
   const dotted = view.bg === "canvas";
 
   const node = (
-    <Component {...base} {...logged} {...chosen}>
-      {content ?? (text || undefined)}
-    </Component>
+    <Live>
+      <Component {...base} {...logged} {...chosen}>
+        {content ?? (text || undefined)}
+      </Component>
+    </Live>
   );
   const scope = [
     entry.name,