@designtools/docs 0.2.2 → 0.3.0

package/src/logo-usage.tsx

@@ -24,8 +24,7 @@ export function LogoUsage({ assets, rules = [], rulesHref }: { assets: AssetEntr
   const brand = rules.filter((r) => r.kind === "brand");
   const general = brand.filter((r) => (r.appliesTo ?? []).some((x) => ["logo", "logos"].includes(x.toLowerCase())));
   return (
-    <div data-slot="logo-usage" className="flex flex-col gap-16">
-      {general.length > 0 && <RuleList rules={general} rulesHref={rulesHref} />}
+    <div data-slot="logo-usage" className="flex flex-col gap-16 lg:gap-24">
       {logos.map((logo) => {
         const src = lookup.assetUrl(logo);
         const names = new Set([logo.name.toLowerCase(), logo.file.toLowerCase()]);
@@ -111,27 +110,36 @@ export function LogoUsage({ assets, rules = [], rulesHref }: { assets: AssetEntr
           </section>
         );
       })}
+      {general.length > 0 && (
+        <section data-slot="logo-rules" aria-labelledby="logo-rules" className="flex flex-col gap-5">
+          <header className="flex flex-col gap-1.5">
+            <h3 id="logo-rules" className="text-3xl tracking-tight">
+              Rules for the logo
+            </h3>
+            <p className="max-w-2xl text-base text-muted-foreground">What holds for every logo above, each with how it is checked.</p>
+          </header>
+          <RuleList rules={general} rulesHref={rulesHref} />
+        </section>
+      )}
     </div>
   );
 }
 
 function RuleList({ rules, rulesHref }: { rules: RuleEntry[]; rulesHref?: string }) {
   return (
-    <ul data-slot="logo-rules" className="grid gap-x-12 sm:grid-cols-2">
+    <ul data-slot="logo-rules" className="flex flex-col divide-y divide-border border-y border-border">
       {rules.map((r) => (
-        <li key={r.id} className="border-t border-border">
+        <li key={r.id}>
           <a
             href={rulesHref ? `${rulesHref}#${r.id}` : `#${r.id}`}
-            className="group flex h-full flex-col gap-1.5 py-4 text-sm focus-visible:outline-2 focus-visible:outline-ring"
+            className="group grid items-baseline gap-x-8 gap-y-1.5 py-5 focus-visible:outline-2 focus-visible:outline-ring md:grid-cols-[14rem_minmax(0,1fr)_auto]"
           >
-            <span className="flex items-center justify-between gap-2">
-              <span className="flex items-center gap-2 text-base font-medium group-hover:underline group-hover:underline-offset-4">
-                <Scale aria-hidden className="size-(--dt-size-xs) text-muted-foreground" />
-                {r.title}
-              </span>
-              <StatusBadge status={r.status} />
+            <span className="flex items-center gap-2 text-base font-medium underline-offset-4 group-hover:underline">
+              <Scale aria-hidden className="size-(--dt-size-xs) shrink-0 text-muted-foreground" />
+              {r.title}
             </span>
-            <span className="text-muted-foreground">{inline(r.statement)}</span>
+            <span className="text-sm leading-relaxed text-muted-foreground">{inline(r.statement)}</span>
+            <StatusBadge status={r.status} />
           </a>
         </li>
       ))}

package/src/next/config.ts

@@ -85,6 +85,13 @@ export interface DocsConfig {
   provenance?: string;
   /** `designtools-adherence --json`, for the standards page. */
   adherence?: AdherenceReport;
+  /**
+   * design.md, served at `<base>/design.md`: the brand in one file for anything made outside the repo's
+   * components (a page built elsewhere, a slide, a document). `body` is its hand-written half, in markdown
+   * `##` sections: what comes first when guidance conflicts, how to work, the reflexes to avoid, a review
+   * list. The values after it are generated. Without a body the file still serves, with the values alone.
+   */
+  designMd?: { body: string };
   /** Pages people write, in the order they appear. */
   editorial?: EditorialPage[];
   /** Built-in pages to leave out. */

package/src/next/markdown.ts

@@ -15,12 +15,13 @@ import {
   systemMarkdown,
   typeMarkdown,
 } from "../lib/markdown";
+import { designMarkdown } from "../lib/design-md";
 import { navOf, resolve, type Site } from "./site";
 
 /**
  * The markdown form of a docs page, generated from the manifest rather than
  * converted from HTML, or nothing when there is no such page. `context` is the
- * whole system in one file.
+ * whole system in one file; `design` is design.md, the brand for work outside the repo.
  */
 export function markdownFor(site: Site, path: string): string | undefined {
   const { base, title, components, tokens, rules, patterns, taxonomy, assets, config } = site;
@@ -28,6 +29,19 @@ export function markdownFor(site: Site, path: string): string | undefined {
   if (path === "context")
     return systemMarkdown({ components, tokens, rules: rules.rules, patterns: patterns.patterns, terms: taxonomy.terms }, title, config.provenance ?? "");
 
+  if (path === "design")
+    return designMarkdown({
+      title,
+      base,
+      provenance: config.provenance,
+      components,
+      tokens,
+      rules: rules.rules,
+      assets: assets.assets,
+      terms: taxonomy.terms,
+      body: config.designMd?.body,
+    });
+
   const page = resolve(site, path ? path.split("/") : []);
   if (!page) return undefined;
   switch (page.kind) {
@@ -51,6 +65,7 @@ export function markdownFor(site: Site, path: string): string | undefined {
           ),
           ...(nav.standards.length ? [`- Standards: ${links(nav.standards)}`] : []),
           `- Everything in [one file](${base}/context.md)`,
+          `- The brand for work outside the repo, a page, a slide or a document: [design.md](${base}/design.md)`,
           "",
           manifestLinks(`${base}/manifest`),
         ].join("\n"),

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";
@@ -269,7 +270,7 @@ function ComponentPage({ site, blocks: B, entry }: { site: Site; blocks: Blocks;
       </B.Workbench>
 
       <DocsSection title="Anatomy">
-        <B.Anatomy entry={entry} />
+        <B.Anatomy entry={entry} wrap={setup.wrap} />
       </DocsSection>
 
       <DocsSection title="Examples" lead="The usual use first, then each do beside its don't. Every one is the real component.">
@@ -281,7 +282,7 @@ function ComponentPage({ site, blocks: B, entry }: { site: Site; blocks: Blocks;
           title="Variants"
           lead={`Every combination, from the ${entry.variants.from === "props" ? "props' types" : `${entry.variants.from}() config`}, then each state.`}
         >
-          <B.VariantMatrix entry={entry} props={setup.props}>
+          <B.VariantMatrix entry={entry} props={setup.props} wrap={setup.wrap}>
             {setup.children === "" ? undefined : (setup.content ?? entry.name)}
           </B.VariantMatrix>
         </DocsSection>
@@ -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>
           ))}
@@ -412,9 +409,13 @@ function Overview({ site }: { site: Site }) {
           </ol>
           <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground">
             See it the way an agent does:
-            <a href={`${base}.md`} className="inline-flex items-center gap-1 font-medium text-canvas-foreground underline underline-offset-4 hover:decoration-2">
+            <a href={base ? `${base}.md` : "/.md"} className="inline-flex items-center gap-1 font-medium text-canvas-foreground underline underline-offset-4 hover:decoration-2">
               this page as markdown <ArrowUpRight aria-hidden className="size-3.5" />
             </a>
+            or, for a page, slide or document made outside the repo,
+            <a href={`${base}/design.md`} className="inline-flex items-center gap-1 font-medium text-canvas-foreground underline underline-offset-4 hover:decoration-2">
+              design.md <ArrowUpRight aria-hidden className="size-3.5" />
+            </a>
           </p>
         </DocsSection>
       )}

package/src/next/proxy.ts

@@ -27,7 +27,7 @@ export function docsProxy({ basePath = "/design/system", production }: { basePat
     // the markdown responses keep theirs.
     const res = NextResponse.next();
     res.headers.set("vary", "Accept");
-    res.headers.set("link", `<${page}.md>; rel="alternate"; type="text/markdown"`);
+    res.headers.set("link", `<${page ? `${page}.md` : "/.md"}>; rel="alternate"; type="text/markdown"`);
     res.headers.set("x-robots-tag", "noindex");
     return res;
   };
@@ -36,7 +36,8 @@ export function docsProxy({ basePath = "/design/system", production }: { basePat
 /** The proxy's matcher for a base path. Next reads `config.matcher` statically, so write the result out where it must be a literal. */
 export function docsMatcher(basePath = "/design/system"): string[] {
   const base = basePath.replace(/\/$/, "");
-  return [base, `${base}.md`, `${base}/:path*`];
+  // served at the site root, every path is a docs path
+  return base ? [base, `${base}.md`, `${base}/:path*`] : ["/", "/:path*"];
 }
 
 /** text/markdown ranked above text/html in the Accept header. */

package/src/page-actions.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { Menu } from "@base-ui/react/menu";
-import { Braces, Check, ChevronDown, Copy, FileText, Files } from "lucide-react";
+import { Braces, Check, ChevronDown, Copy, FileText, Files, Palette } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 /**
  * What a reader can take from a page, as one split button: copy the page as
  * markdown, the same markdown any agent gets at `.md`, with a menu beside it to
- * view that markdown, copy the whole system as one file, or open the manifest.
+ * view that markdown, copy the whole system as one file, copy design.md (the
+ * brand for work outside the repo), or open the manifest.
  * Put it in a `DocsHeader`.
  */
 export function PageActions({ basePath = "/design/system" }: { basePath?: string }) {
@@ -73,6 +74,13 @@ export function PageActions({ basePath = "/design/system" }: { basePath?: string
                   <span className="text-xs text-muted-foreground">Every page in one markdown file</span>
                 </span>
               </Menu.Item>
+              <Menu.Item className={item} onClick={() => copyFrom(`${basePath}/design.md`, "design.md copied")}>
+                <Palette aria-hidden className={icon} />
+                <span className="flex flex-col">
+                  Copy design.md
+                  <span className="text-xs text-muted-foreground">The brand for a page, slide or document made elsewhere</span>
+                </span>
+              </Menu.Item>
               <Menu.LinkItem className={item} href={`${basePath}/manifest/components.json`} target="_blank" rel="noreferrer">
                 <Braces aria-hidden className={icon} />
                 <span className="flex flex-col">

package/src/playground.tsx

@@ -250,9 +250,9 @@ export function FlagControl({ name, checked, onChange }: { name: string; checked
         checked={checked}
         onCheckedChange={onChange}
         // drawn small, pressed large: the hit area reaches the docs' target without the switch growing
-        className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-input p-0.5 transition-colors duration-(--dt-duration-fast) after:absolute after:-inset-2.5 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:bg-primary"
+        className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-input p-0.5 transition-colors duration-(--dt-duration-fast) after:absolute after:-inset-2.5 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:bg-[var(--docs-accent,var(--primary))]"
       >
-        <Switch.Thumb className="block size-5 rounded-full bg-primary-foreground shadow-xs transition-transform duration-(--dt-duration-fast) data-[checked]:translate-x-4" />
+        <Switch.Thumb className="block size-5 rounded-full bg-canvas shadow-xs ring-1 ring-border transition-transform duration-(--dt-duration-fast) data-[checked]:translate-x-4" />
       </Switch.Root>
     </div>
   );

package/src/shell.tsx

@@ -93,6 +93,8 @@ export function DocsShell({
   children: ReactNode;
 }) {
   const current = usePathname();
+  // the overview's own address: the base path, or the site root when the docs are served there (basePath "")
+  const home = basePath || "/";
   const searchItems = useMemo(
     () =>
       searchIndex({
@@ -109,7 +111,7 @@ export function DocsShell({
   const sections = useMemo<Section[]>(() => {
     const families = groupFamilies(manifest);
     const all: Section[] = [
-      { id: "overview", label: "Overview", icon: House, href: basePath, groups: [] },
+      { id: "overview", label: "Overview", icon: House, href: home, groups: [] },
       { id: "brand", label: "Brand", icon: BookOpen, groups: [{ links: brand }] },
       { id: "foundations", label: "Foundations", icon: Palette, groups: [{ links: foundations }] },
       ...(rules?.rules.length ? [{ id: "rules", label: "Rules", icon: Scale, href: `${basePath}/rules`, groups: [] }] : []),
@@ -135,7 +137,7 @@ export function DocsShell({
       { id: "standards", label: "Standards", icon: Gauge, groups: [{ links: standards }] },
     ];
     return all.filter((s) => s.href || s.groups.some((g) => g.links.length));
-  }, [manifest, rules, patterns, brand, foundations, standards, basePath]);
+  }, [manifest, rules, patterns, brand, foundations, standards, basePath, home]);
 
   // every page in navigation order, for the section a page sits in and its neighbours
   const page = useMemo(() => {
@@ -156,7 +158,7 @@ export function DocsShell({
   useEffect(() => setMenu(false), [current]);
 
   const brandLink = (
-    <Link href={basePath} data-slot="docs-title" className={cx(target, "flex min-w-0 items-center gap-3 rounded-md focus-visible:outline-2 focus-visible:outline-ring")}>
+    <Link href={home} data-slot="docs-title" className={cx(target, "flex min-w-0 items-center gap-3 rounded-md focus-visible:outline-2 focus-visible:outline-ring")}>
       {logo && (
         <span data-slot="docs-logo" className="shrink-0">
           <Live>{logo}</Live>
@@ -224,7 +226,7 @@ export function DocsShell({
             {search && <DocsSearch items={searchItems} shortcuts={false} variant="icon" />}
           </header>
 
-          {hero && current === basePath && (
+          {hero && current === home && (
             <div data-slot="docs-hero" className="w-full">
               <Live>{hero}</Live>
             </div>

package/src/standards.tsx

@@ -26,13 +26,13 @@ export function Standards({ baselines, children }: { baselines: Record<string, u
                 {section.title}
               </h3>
               {single ? (
-                <p className="text-5xl font-light tracking-tight">{section.rows[0].value}</p>
+                <p className="text-xl leading-snug tracking-tight text-pretty">{section.rows[0].value}</p>
               ) : section.rows.length ? (
                 <dl className="flex flex-col gap-3">
                   {section.rows.map((row) => (
                     <div key={row.label} className="flex flex-col gap-0.5">
                       <dt className="text-xs text-muted-foreground">{row.label}</dt>
-                      <dd className="text-2xl font-light tracking-tight tabular-nums">{row.value}</dd>
+                      <dd className="text-lg leading-snug tracking-tight tabular-nums">{row.value}</dd>
                     </div>
                   ))}
                 </dl>

package/src/styles.css

@@ -9,8 +9,9 @@
  * semantic names (--canvas, --surface, --primary, …), so a project on our tokens
  * needs nothing; any other project sets those names on the docs. Fonts take
  * --docs-font-sans / --docs-font-mono, else the project's --font-sans and
- * --font-mono; headings --docs-display, else --font-display. Sizes, radii,
- * shadows, leading and tracking follow the project's scale where it has one.
+ * --font-mono; headings --docs-display, else --font-display. Sizes, shadows,
+ * leading and tracking follow the project's scale where it has one; corners
+ * are the docs' own (--docs-radius-*), never the project's.
  * Every value has a fallback, so the docs render on a project with none of it.
  */
 @layer theme, base, components, utilities;
@@ -109,12 +110,12 @@
   --tracking-wide: var(--tracking-wide, 0.04em);
   --tracking-widest: var(--tracking-widest, 0.16em);
 
-  --radius-xs: var(--docs-radius-xs, var(--radius-xs, 0.125rem));
-  --radius-sm: var(--docs-radius-sm, var(--radius-sm, 0.25rem));
-  --radius-md: var(--docs-radius-md, var(--radius-md, 0.375rem));
-  --radius-lg: var(--docs-radius-lg, var(--radius-lg, 0.5rem));
-  --radius-xl: var(--docs-radius-xl, var(--radius-xl, 0.75rem));
-  --radius-2xl: var(--docs-radius-2xl, var(--radius-2xl, 1rem));
+  --radius-xs: var(--docs-radius-xs, 0.125rem);
+  --radius-sm: var(--docs-radius-sm, 0.25rem);
+  --radius-md: var(--docs-radius-md, 0.375rem);
+  --radius-lg: var(--docs-radius-lg, 0.5rem);
+  --radius-xl: var(--docs-radius-xl, 0.75rem);
+  --radius-2xl: var(--docs-radius-2xl, 1rem);
 
   --shadow-xs: var(--shadow-xs, 0 1px 2px 0 color-mix(in oklch, var(--shadow, #0b0d12) 6%, transparent));
   --shadow-sm: var(--shadow-sm, 0 1px 3px 0 color-mix(in oklch, var(--shadow, #0b0d12) 10%, transparent));

package/src/type-ramp.tsx

@@ -34,12 +34,9 @@ export function TypeRamp({
         <div className="grid gap-x-12 gap-y-10 md:grid-cols-2">
           {families.map((f) => (
             <figure key={f.name} data-slot="type-family" className="flex flex-col gap-5 border-t border-border pt-6">
-              <div className="flex flex-col gap-6" style={{ fontFamily: `var(${f.name})` }}>
-                <span className="text-8xl leading-none font-light tracking-tighter">Aa</span>
-                <span className="text-sm leading-relaxed break-all text-muted-foreground">
-                  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &amp;?!
-                </span>
-              </div>
+              <span className="text-8xl leading-none font-light tracking-tighter" style={{ fontFamily: `var(${f.name})` }}>
+                Aa
+              </span>
               <figcaption className="flex flex-col gap-0.5">
                 <code className="font-mono text-xs font-medium">{shortName(f, "font")}</code>
                 <span className="truncate font-mono text-xs text-muted-foreground" title={f.values.default}>

package/src/variant-matrix.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { Live } from "./lib/live";
+import { wrapIn } from "./lib/wrap";
 import { Grid3x3, Moon, Sun } from "lucide-react";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactElement, type ReactNode, useEffect, useState } from "react";
 import { cx } from "./lib/cx";
 import { coerce, Missing, useLookup } from "./lib/lookup";
 import type { ComponentEntry, VariantAxis } from "./lib/manifest-types";
@@ -19,9 +20,12 @@ export function VariantMatrix({
   props = {},
   children,
   axes: only,
+  wrap,
 }: {
   entry: ComponentEntry;
   props?: Record<string, unknown>;
+  /** What each instance must sit in to work: a provider, its root. */
+  wrap?: ReactElement<{ children?: ReactNode }>;
   /** What to render inside each instance. Defaults to the component's name. */
   children?: ReactNode;
   /** Limit and order the axes shown. */
@@ -38,9 +42,12 @@ export function VariantMatrix({
   const content = children ?? entry.name;
   const render = (extra: Record<string, string>) => (
     <Live>
-      <Component {...props} {...coerce(extra)}>
-        {content}
-      </Component>
+      {wrapIn(
+        wrap,
+        <Component {...props} {...coerce(extra)}>
+          {content}
+        </Component>,
+      )}
     </Live>
   );
   const [rows, cols, ...rest] = axes;

package/src/workbench.tsx

@@ -2,6 +2,7 @@
 
 import { handlerNames } from "./lib/handlers";
 import { Live } from "./lib/live";
+import { wrapIn } from "./lib/wrap";
 import { Tabs } from "@base-ui/react/tabs";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
@@ -381,7 +382,7 @@ export function Workbench({
                 }}
               >
                 <div ref={target} data-slot="workbench-target" className="flex max-w-full items-center justify-center">
-                  <Boundary label={entry.name}>{wrap && isValidElement(wrap) ? cloneElement(wrap, undefined, node) : node}</Boundary>
+                  <Boundary label={entry.name}>{wrapIn(wrap, node)}</Boundary>
                 </div>
               </div>
             </div>