@designtools/docs 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @designtools/docs
 
+## 0.2.3
+
+### Patch Changes
+
+- 62af842: The workbench no longer freezes on a component with a function prop it calls while rendering (Base UI's Meter and Progress, through `getAriaValueText`): only event handlers (`on…`) are logged to Actions, so logging can never re-render the component into calling it again. The overview's parts of the system are a typographic list: the name, why it exists and an arrow, with no glimpses or counts.
+
 ## 0.2.2
 
 ### Patch Changes

package/dist/next/pages.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import Link from "next/link";
+import { cx, display } from "../lib/cx.js";
 import { AdherenceSummary } from "../adherence-summary.js";
 import { Anatomy } from "../anatomy.js";
 import { Examples } from "../examples.js";
@@ -110,56 +111,48 @@ function Overview({ site }) {
     const count = families.reduce((n, g) => n + g.families.length, 0);
     const brandPages = site.editorial.filter((p) => (p.section ?? "brand") === "brand");
     const brandFirst = brandPages[0];
-    const share = config.adherence?.summary.share;
-    // each section of the system, why it exists and how much is in it
+    // each section of the system, and why it exists
     const sections = [];
     if (brandFirst || site.shows("logo"))
         sections.push({
             title: "Brand",
             href: `${base}/${brandFirst?.slug ?? "brand/logo"}`,
             why: "What the brand believes, how it sounds and how it looks, so every screen and sentence comes from the same place.",
-            count: `${brandPages.length + (site.assets.assets.some((a) => a.kind === "logo") ? 1 : 0)} pages`
         });
     sections.push({
         title: "Foundations",
         href: `${base}/colour`,
         why: "Colour, type and the scale, generated from the tokens and measured in both modes, so nothing is a guess.",
-        count: `${site.tokens.tokens.length} tokens`,
     });
     if (site.rules.rules.length)
         sections.push({
             title: "Rules",
             href: `${base}/rules`,
             why: "The lines the brand and the interface hold, each written for people, with the check that proves it.",
-            count: `${site.rules.rules.length} rules, ${site.rules.rules.filter((r) => r.status === "confirmed").length} confirmed`
         });
     if (site.shows("components") && count)
         sections.push({
             title: "Components",
             href: `${base}/components/${slugOf(families[0].families[0].head)}`,
             why: "The real components the product is built from, each with when to use it, a live workbench and an accessibility report.",
-            count: `${count} components`
         });
     if (site.patterns.patterns.length)
         sections.push({
             title: "Patterns",
             href: `${base}/patterns/${site.patterns.patterns[0].id}`,
             why: "The screens the product keeps making, composed of the components, so a recurring problem is solved once.",
-            count: `${site.patterns.patterns.length} patterns`
         });
     if (site.shows("standards") && (config.baselines || config.adherence))
         sections.push({
             title: "Standards",
             href: `${base}/standards`,
             why: "The bar the product is held to, and how closely it follows the system today, reported on every change.",
-            count: share == null ? "Baselines agreed" : `${Math.round(share * 100)}% of the product on the system`
         });
     if (site.shows("vocabulary") && site.taxonomy.terms.length)
         sections.push({
             title: "Vocabulary",
             href: `${base}/vocabulary`,
             why: "One name for each thing, and the names people reach for instead, so people and agents mean the same thing.",
-            count: `${site.taxonomy.terms.length} terms`
         });
     const loop = [
         ["Written once", "The components, tokens and rules live in the product's own code. Nobody keeps a second copy in a slide deck or a wiki."],
@@ -168,6 +161,6 @@ function Overview({ site }) {
         ["Checked", "Each rule names the check that proves it. Stale docs stop a commit; everything else is reported."],
         ["Measured", "A report on every change shows how closely the product follows the system. It informs the conversation; it never blocks the work."],
     ];
-    return (_jsxs(_Fragment, { children: [!config.hero && (_jsx(DocsHeader, { title: site.title, lead: config.lead ?? "The brand and the design system in one place, for the people who make the product and the agents that build it with them.", children: _jsx(PageActions, { basePath: base }) })), _jsx(DocsSection, { title: "What's here, and why", lead: "Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.", children: _jsx("ul", { "data-slot": "overview-sections", className: "grid gap-x-12 md:grid-cols-2", children: sections.map((sec) => (_jsx("li", { className: "border-t border-border", children: _jsxs(Link, { href: sec.href, className: "group flex h-full flex-col gap-4 py-7 focus-visible:outline-2 focus-visible:outline-ring", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-4", children: [_jsx("span", { className: "text-2xl leading-tight tracking-tight underline-offset-[6px] group-hover:underline", children: sec.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: sec.count })] }), _jsx("span", { className: "max-w-md text-base leading-relaxed text-muted-foreground", children: sec.why })] }) }, sec.title))) }) }), config.overview?.agentic !== false && (_jsxs(DocsSection, { title: "Why this is agentic", lead: config.overview?.agenticLead ??
+    return (_jsxs(_Fragment, { children: [!config.hero && (_jsx(DocsHeader, { title: site.title, lead: config.lead ?? "The brand and the design system in one place, for the people who make the product and the agents that build it with them.", children: _jsx(PageActions, { basePath: base }) })), _jsx(DocsSection, { title: "What's here, and why", lead: "Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.", children: _jsx("ul", { "data-slot": "overview-sections", className: "flex flex-col border-b border-border", children: sections.map((sec) => (_jsx("li", { className: "border-t border-border", children: _jsxs(Link, { href: sec.href, className: "group grid items-baseline gap-x-10 gap-y-2 py-6 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring md:grid-cols-[13rem_minmax(0,1fr)_auto]", children: [_jsx("span", { className: cx(display, "text-2xl leading-snug tracking-tight underline-offset-4 group-hover:underline"), children: sec.title }), _jsx("span", { className: "max-w-2xl text-base leading-relaxed text-muted-foreground", children: sec.why }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "hidden size-(--dt-size-sm) translate-y-0.5 self-start text-muted-foreground transition duration-(--dt-duration-base) ease-(--dt-ease-out) group-hover:translate-x-1 group-hover:-translate-y-0.5 group-hover:text-canvas-foreground md:mt-1.5 md:block" })] }) }, sec.title))) }) }), config.overview?.agentic !== false && (_jsxs(DocsSection, { title: "Why this is agentic", lead: config.overview?.agenticLead ??
                     "A design system used to be a document people were asked to follow. This one is the source the product, its people and its AI agents all work from, and it checks itself.", children: [_jsx("ol", { "data-slot": "overview-loop", className: "grid gap-x-6 gap-y-8 sm:grid-cols-2 xl:grid-cols-5", children: loop.map(([title, body], i) => (_jsxs("li", { className: "relative flex flex-col gap-3 xl:pr-2", children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-full bg-canvas-foreground text-sm font-medium text-canvas tabular-nums", children: i + 1 }), i < loop.length - 1 && _jsx("span", { "aria-hidden": true, className: "hidden h-px flex-1 bg-border xl:block" })] }), _jsx("span", { className: "text-lg leading-snug tracking-tight", children: title }), _jsx("span", { className: "text-sm leading-relaxed text-muted-foreground", children: body })] }, title))) }), _jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground", children: ["See it the way an agent does:", _jsxs("a", { href: `${base}.md`, className: "inline-flex items-center gap-1 font-medium text-canvas-foreground underline underline-offset-4 hover:decoration-2", children: ["this page as markdown ", _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5" })] })] })] })), _jsx(DocsFooter, { provenance: config.provenance })] }));
 }

package/dist/styles.css

@@ -1100,6 +1100,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  :where([data-designtools]) .translate-y-0\.5:not([data-docs-content] *), .translate-y-0\.5:where([data-designtools]):not([data-docs-content] *) {
+    --tw-translate-y: calc(.25rem * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   :where([data-designtools]) .transform:not([data-docs-content] *), .transform:where([data-designtools]):not([data-docs-content] *) {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
@@ -1380,6 +1385,10 @@
     align-self: flex-end;
   }
 
+  :where([data-designtools]) .self-start:not([data-docs-content] *), .self-start:where([data-designtools]):not([data-docs-content] *) {
+    align-self: flex-start;
+  }
+
   :where([data-designtools]) .justify-self-end:not([data-docs-content] *), .justify-self-end:where([data-designtools]):not([data-docs-content] *) {
     justify-self: flex-end;
   }
@@ -1842,10 +1851,6 @@
     padding-block: 1.5rem;
   }
 
-  :where([data-designtools]) .py-7:not([data-docs-content] *), .py-7:where([data-designtools]):not([data-docs-content] *) {
-    padding-block: 1.75rem;
-  }
-
   :where([data-designtools]) .py-8:not([data-docs-content] *), .py-8:where([data-designtools]):not([data-docs-content] *) {
     padding-block: 2rem;
   }
@@ -2300,10 +2305,6 @@
     text-underline-offset: 4px;
   }
 
-  :where([data-designtools]) .underline-offset-\[6px\]:not([data-docs-content] *), .underline-offset-\[6px\]:where([data-designtools]):not([data-docs-content] *) {
-    text-underline-offset: 6px;
-  }
-
   :where([data-designtools]) .opacity-0:not([data-docs-content] *), .opacity-0:where([data-designtools]):not([data-docs-content] *) {
     opacity: 0;
   }
@@ -2458,6 +2459,12 @@
     backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
+  :where([data-designtools]) .transition:not([data-docs-content] *), .transition:where([data-designtools]):not([data-docs-content] *) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
+    transition-duration: var(--tw-duration, .15s);
+  }
+
   :where([data-designtools]) .transition-\[height\]:not([data-docs-content] *), .transition-\[height\]:where([data-designtools]):not([data-docs-content] *) {
     transition-property: height;
     transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
@@ -2564,11 +2571,21 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
+    :where([data-designtools]) .group-hover\:translate-x-1:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:translate-x-1:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
+      --tw-translate-x: .25rem;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
     :where([data-designtools]) .group-hover\:translate-x-full:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:translate-x-full:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       --tw-translate-x: 100%;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
+    :where([data-designtools]) .group-hover\:-translate-y-0\.5:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:-translate-y-0\.5:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
+      --tw-translate-y: calc(.25rem * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
     :where([data-designtools]) .group-hover\:text-canvas-foreground:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:text-canvas-foreground:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       color: var(--canvas-foreground, #1c1f26);
     }
@@ -2791,6 +2808,10 @@
     outline-offset: 2px;
   }
 
+  :where([data-designtools]) .focus-visible\:outline-offset-4:focus-visible:not([data-docs-content] *), .focus-visible\:outline-offset-4:focus-visible:where([data-designtools]):not([data-docs-content] *) {
+    outline-offset: 4px;
+  }
+
   :where([data-designtools]) .focus-visible\:outline-offset-\[-2px\]:focus-visible:not([data-docs-content] *), .focus-visible\:outline-offset-\[-2px\]:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     outline-offset: -2px;
   }
@@ -3010,6 +3031,10 @@
       grid-column-start: 4;
     }
 
+    :where([data-designtools]) .md\:mt-1\.5:not([data-docs-content] *), .md\:mt-1\.5:where([data-designtools]):not([data-docs-content] *) {
+      margin-top: .375rem;
+    }
+
     :where([data-designtools]) .md\:block:not([data-docs-content] *), .md\:block:where([data-designtools]):not([data-docs-content] *) {
       display: block;
     }
@@ -3038,6 +3063,10 @@
       grid-template-columns: 12rem minmax(0, 1fr);
     }
 
+    :where([data-designtools]) .md\:grid-cols-\[13rem_minmax\(0\,1fr\)_auto\]:not([data-docs-content] *), .md\:grid-cols-\[13rem_minmax\(0\,1fr\)_auto\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: 13rem minmax(0, 1fr) auto;
+    }
+
     :where([data-designtools]) .md\:grid-cols-\[minmax\(9rem\,0\.9fr\)_minmax\(0\,1\.6fr\)_minmax\(5rem\,0\.6fr\)_1\.25rem\]:not([data-docs-content] *), .md\:grid-cols-\[minmax\(9rem\,0\.9fr\)_minmax\(0\,1\.6fr\)_minmax\(5rem\,0\.6fr\)_1\.25rem\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: minmax(9rem, .9fr) minmax(0, 1.6fr) minmax(5rem, .6fr) 1.25rem;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/docs",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Design system docs as a package: pages, navigation, search, a workbench per component, rules, patterns, brand pages and markdown for agents, generated from the @designtools/manifest and themed by your tokens. One Next adapter serves them inside your app or as a standalone site.",
   "type": "module",
   "license": "MIT",

package/src/next/pages.tsx

@@ -1,5 +1,6 @@
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import Link from "next/link";
+import { cx, display } from "../lib/cx";
 import { AdherenceSummary } from "../adherence-summary";
 import { Anatomy } from "../anatomy";
 import { Examples } from "../examples";
@@ -305,57 +306,49 @@ function Overview({ site }: { site: Site }) {
   const count = families.reduce((n, g) => n + g.families.length, 0);
   const brandPages = site.editorial.filter((p) => (p.section ?? "brand") === "brand");
   const brandFirst = brandPages[0];
-  const share = config.adherence?.summary.share;
 
-  // each section of the system, why it exists and how much is in it
-  const sections: { title: string; href: string; why: string; count: string }[] = [];
+  // each section of the system, and why it exists
+  const sections: { title: string; href: string; why: string }[] = [];
   if (brandFirst || site.shows("logo"))
     sections.push({
       title: "Brand",
       href: `${base}/${brandFirst?.slug ?? "brand/logo"}`,
       why: "What the brand believes, how it sounds and how it looks, so every screen and sentence comes from the same place.",
-      count: `${brandPages.length + (site.assets.assets.some((a) => a.kind === "logo") ? 1 : 0)} pages`
     });
   sections.push({
     title: "Foundations",
     href: `${base}/colour`,
     why: "Colour, type and the scale, generated from the tokens and measured in both modes, so nothing is a guess.",
-    count: `${site.tokens.tokens.length} tokens`,
   });
   if (site.rules.rules.length)
     sections.push({
       title: "Rules",
       href: `${base}/rules`,
       why: "The lines the brand and the interface hold, each written for people, with the check that proves it.",
-      count: `${site.rules.rules.length} rules, ${site.rules.rules.filter((r) => r.status === "confirmed").length} confirmed`
     });
   if (site.shows("components") && count)
     sections.push({
       title: "Components",
       href: `${base}/components/${slugOf(families[0].families[0].head)}`,
       why: "The real components the product is built from, each with when to use it, a live workbench and an accessibility report.",
-      count: `${count} components`
     });
   if (site.patterns.patterns.length)
     sections.push({
       title: "Patterns",
       href: `${base}/patterns/${site.patterns.patterns[0].id}`,
       why: "The screens the product keeps making, composed of the components, so a recurring problem is solved once.",
-      count: `${site.patterns.patterns.length} patterns`
     });
   if (site.shows("standards") && (config.baselines || config.adherence))
     sections.push({
       title: "Standards",
       href: `${base}/standards`,
       why: "The bar the product is held to, and how closely it follows the system today, reported on every change.",
-      count: share == null ? "Baselines agreed" : `${Math.round(share * 100)}% of the product on the system`
     });
   if (site.shows("vocabulary") && site.taxonomy.terms.length)
     sections.push({
       title: "Vocabulary",
       href: `${base}/vocabulary`,
       why: "One name for each thing, and the names people reach for instead, so people and agents mean the same thing.",
-      count: `${site.taxonomy.terms.length} terms`
     });
 
   const loop = [
@@ -375,15 +368,19 @@ function Overview({ site }: { site: Site }) {
       )}
 
       <DocsSection title="What's here, and why" lead="Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.">
-        <ul data-slot="overview-sections" className="grid gap-x-12 md:grid-cols-2">
+        <ul data-slot="overview-sections" className="flex flex-col border-b border-border">
           {sections.map((sec) => (
             <li key={sec.title} className="border-t border-border">
-              <Link href={sec.href} className="group flex h-full flex-col gap-4 py-7 focus-visible:outline-2 focus-visible:outline-ring">
-                <span className="flex items-baseline justify-between gap-4">
-                  <span className="text-2xl leading-tight tracking-tight underline-offset-[6px] group-hover:underline">{sec.title}</span>
-                  <span className="shrink-0 text-xs text-muted-foreground tabular-nums">{sec.count}</span>
-                </span>
-                <span className="max-w-md text-base leading-relaxed text-muted-foreground">{sec.why}</span>
+              <Link
+                href={sec.href}
+                className="group grid items-baseline gap-x-10 gap-y-2 py-6 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring md:grid-cols-[13rem_minmax(0,1fr)_auto]"
+              >
+                <span className={cx(display, "text-2xl leading-snug tracking-tight underline-offset-4 group-hover:underline")}>{sec.title}</span>
+                <span className="max-w-2xl text-base leading-relaxed text-muted-foreground">{sec.why}</span>
+                <ArrowUpRight
+                  aria-hidden
+                  className="hidden size-(--dt-size-sm) translate-y-0.5 self-start text-muted-foreground transition duration-(--dt-duration-base) ease-(--dt-ease-out) group-hover:translate-x-1 group-hover:-translate-y-0.5 group-hover:text-canvas-foreground md:mt-1.5 md:block"
+                />
               </Link>
             </li>
           ))}