@loykin/designkit 0.0.1-dev.2 → 0.0.1-dev.3

package/README.md

@@ -2,6 +2,9 @@
 
 React page template library. Provides ready-to-use page layouts for admin and dashboard applications.
 
+For AI-assisted implementation in consuming applications, see the
+[DesignKit Consumer Agent Guide](docs/consumer-guide.md).
+
 ## Installation
 
 ```bash
@@ -17,14 +20,7 @@ Import the styles in your global CSS:
 @import "@loykin/designkit/styles";
 ```
 
-If your app builds Tailwind utilities from package source, include designkit in
-your Tailwind scan sources:
-
-```css
-@source "@loykin/designkit";
-```
-
-You can also import the stylesheet from your app entry, as shown below.
+The styles file includes pre-built Tailwind utility classes — no `@source` configuration required. You can also import the stylesheet from your app entry, as shown below.
 
 ## Quick Start
 
@@ -138,6 +134,16 @@ Groups content within a tab or section. The `layout` prop controls the visual st
 | `inline` | Table-style rows (detail view) |
 | `split` | Left list + right detail |
 
+| Prop | Type | Description |
+|---|---|---|
+| `layout` | `GroupLayout` | Visual structure — see table above |
+| `variant` | `'card' \| 'plain' \| 'bordered'` | Wrapper style (defaults per layout) |
+| `title` | `ReactNode` | Group heading |
+| `description` | `ReactNode` | Subtitle below the heading |
+| `actions` | `ReactNode` | Action slot next to the heading |
+| `danger` | `boolean` | Renders title in destructive color |
+| `className` | `string` | Class applied to the group root element |
+
 ```tsx
 <DataBodyTemplate.Tab id="settings" label="Settings">
   <DataBodyTemplate.Group layout="horizontal" title="Identity" description="Basic information">
@@ -300,6 +306,44 @@ Panel card component. Wrap your panel viewer in `DashboardPanel` for consistent
 
 ---
 
+### WorkbenchBodyTemplate
+
+Resizable editor/workbench shell for products like panel editors, SQL editors, log explorers, and data workspaces. The template owns the pane chrome and resize handles; the app owns editor, preview, inspector, schema, and result content.
+
+```tsx
+import { WorkbenchBodyTemplate, PageTopBar, Button } from '@loykin/designkit'
+
+export function SqlEditorPage() {
+  return (
+    <WorkbenchBodyTemplate
+      topBar={<PageTopBar left="Data / Query editor" />}
+      title="SQL editor"
+      headerRight={<Button variant="outline" size="sm">Run</Button>}
+      leftPane={<SchemaBrowser />}
+      mainPane={<SqlEditor />}
+      bottomPane={<ResultsGrid />}
+      resizable
+    />
+  )
+}
+```
+
+**WorkbenchBodyTemplate props:**
+
+| Prop | Type | Description |
+|---|---|---|
+| `topBar` | `ReactNode` | Top bar above the workbench |
+| `title` / `description` | `ReactNode` | Header copy above the panes |
+| `headerRight` / `actions` | `ReactNode` | Header action slots |
+| `leftPane` / `rightPane` | `ReactNode` | Optional side panes |
+| `mainPane` | `ReactNode` | Primary editor or preview area |
+| `bottomPane` | `ReactNode` | Optional result, query, or logs pane |
+| `resizable` | `boolean` | Enables pane drag handles |
+| `leftPaneCollapsed` / `rightPaneCollapsed` / `bottomPaneCollapsed` | `boolean` | Hides optional panes while preserving the template layout model |
+| `leftPaneWidth` / `rightPaneWidth` / `bottomPaneHeight` | `number` | Initial pane sizes in pixels |
+
+---
+
 ### FormWizardBodyTemplate
 
 Multi-step input wizard. Wraps each step's `content` in a `<form>` element automatically.
@@ -467,6 +511,20 @@ Or via `theme` prop:
 
 ---
 
+## Using with gridkit
+
+If your app also uses `@loykin/gridkit`, import its styles **after** designkit:
+
+```css
+@import "tailwindcss";
+@import "@loykin/designkit/styles";
+@import "@loykin/gridkit/styles";  /* must come last — uses @layer gridkit */
+```
+
+gridkit registers a named `@layer gridkit`. Importing it before `tailwindcss` or `designkit/styles` causes layer ordering conflicts where utility overrides resolve incorrectly.
+
+---
+
 ## Playground
 
 Interactive development tool to preview templates and generate code.

package/dist/index.cjs

@@ -133,7 +133,11 @@ function AvatarGroupCount({ className, ...props }) {
   );
 }
 var badgeVariants = classVarianceAuthority.cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  // transition-all is replaced with an explicit list to prevent width animation
+  // on font swap (e.g. font-display:swap triggering a layout recalc). Inside
+  // overflow:clip containers like DataGrid cells, an animated width change makes
+  // the pill appear to grow from a clipped state. Color transitions are preserved.
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -2216,6 +2220,194 @@ function DashboardBodyTemplate({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-h-0 overflow-auto px-[calc(var(--dk-page-padding-x)-0.5rem)] pt-0 pb-(--dk-page-padding-y)", contentClassName), children })
   ] });
 }
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function ResizeHandle({
+  axis,
+  onPointerDown,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": axis === "x" ? "vertical" : "horizontal",
+      className: cn(
+        "group/resize relative z-10 shrink-0 touch-none bg-transparent",
+        axis === "x" ? "-mx-1 w-2 cursor-col-resize" : "-my-1 h-2 cursor-row-resize",
+        className
+      ),
+      onPointerDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute bg-border transition-colors group-hover/resize:bg-muted-foreground/40",
+              axis === "x" ? "left-1/2 top-0 h-full w-px -translate-x-1/2" : "left-0 top-1/2 h-px w-full -translate-y-1/2"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute rounded-full bg-muted-foreground/35 opacity-0 transition-opacity group-hover/resize:opacity-100",
+              axis === "x" ? "left-1/2 top-1/2 h-10 w-1 -translate-x-1/2 -translate-y-1/2" : "left-1/2 top-1/2 h-1 w-10 -translate-x-1/2 -translate-y-1/2"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkbenchBodyTemplate({
+  theme,
+  className,
+  contentClassName,
+  title,
+  description,
+  topBar,
+  headerRight,
+  toolbar,
+  actions,
+  leftPane,
+  mainPane,
+  rightPane,
+  bottomPane,
+  children,
+  resizable = true,
+  leftPaneCollapsed,
+  rightPaneCollapsed,
+  bottomPaneCollapsed,
+  leftPaneWidth = 260,
+  rightPaneWidth = 320,
+  bottomPaneHeight = 240,
+  minLeftPaneWidth = 180,
+  maxLeftPaneWidth = 440,
+  minRightPaneWidth = 240,
+  maxRightPaneWidth = 520,
+  minBottomPaneHeight = 120,
+  maxBottomPaneHeight = 420,
+  leftPaneClassName,
+  mainPaneClassName,
+  rightPaneClassName,
+  bottomPaneClassName
+}) {
+  const [leftWidth, setLeftWidth] = React2.useState(leftPaneWidth);
+  const [rightWidth, setRightWidth] = React2.useState(rightPaneWidth);
+  const [bottomHeight, setBottomHeight] = React2.useState(bottomPaneHeight);
+  const startResize = React2.useCallback((event, axis, applyDelta) => {
+    if (!resizable) return;
+    const start = axis === "x" ? event.clientX : event.clientY;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = axis === "x" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+    const onPointerMove = (moveEvent) => {
+      applyDelta((axis === "x" ? moveEvent.clientX : moveEvent.clientY) - start);
+    };
+    const onPointerUp = () => {
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  }, [resizable]);
+  const headerRightContent = headerRight ?? toolbar;
+  const showHeader = title || description || headerRightContent || actions;
+  const showLeftPane = leftPane && !leftPaneCollapsed;
+  const showRightPane = rightPane && !rightPaneCollapsed;
+  const showBottomPane = bottomPane && !bottomPaneCollapsed;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-workbench", className), style: theme, children: [
+    topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
+    showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-[calc(var(--dk-page-padding-y)*0.75)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[var(--dk-toolbar-height)] items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-sm font-semibold", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: description })
+      ] }),
+      (headerRightContent || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+        headerRightContent,
+        actions
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-0 flex-1 overflow-hidden", contentClassName), children: [
+      showLeftPane && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            className: cn("min-h-0 shrink-0 overflow-hidden border-r bg-card/45", leftPaneClassName),
+            style: { width: leftWidth },
+            children: leftPane
+          }
+        ),
+        resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          ResizeHandle,
+          {
+            axis: "x",
+            onPointerDown: (event) => {
+              const start = leftWidth;
+              startResize(event, "x", (delta) => {
+                setLeftWidth(clamp(start + delta, minLeftPaneWidth, maxLeftPaneWidth));
+              });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("main", { className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", mainPaneClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: mainPane ?? children }),
+        showBottomPane && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          resizable && /* @__PURE__ */ jsxRuntime.jsx(
+            ResizeHandle,
+            {
+              axis: "y",
+              onPointerDown: (event) => {
+                const start = bottomHeight;
+                startResize(event, "y", (delta) => {
+                  setBottomHeight(clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight));
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "section",
+            {
+              className: cn("min-h-0 shrink-0 overflow-hidden border-t bg-card/40", bottomPaneClassName),
+              style: { height: bottomHeight },
+              children: bottomPane
+            }
+          )
+        ] })
+      ] }),
+      showRightPane && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          ResizeHandle,
+          {
+            axis: "x",
+            onPointerDown: (event) => {
+              const start = rightWidth;
+              startResize(event, "x", (delta) => {
+                setRightWidth(clamp(start - delta, minRightPaneWidth, maxRightPaneWidth));
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            className: cn("min-h-0 shrink-0 overflow-hidden border-l bg-card/45", rightPaneClassName),
+            style: { width: rightWidth },
+            children: rightPane
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function DataBodyTab(_props) {
   return null;
 }
@@ -2288,12 +2480,13 @@ function renderGroupProps(props) {
     description,
     actions,
     danger,
+    className,
     children
   } = props;
   const variant = variantProp ?? layoutDefaultVariant[layout];
   if (layout === "split") {
     const panes = React2.Children.toArray(children);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-(--dk-panel-gap)", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
       (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-start justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2305,7 +2498,7 @@ function renderGroupProps(props) {
     ] });
   }
   if (layout === "horizontal") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-[calc(var(--dk-panel-gap)*2)] py-(--dk-panel-gap)", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-3 gap-[calc(var(--dk-panel-gap)*2)] py-(--dk-panel-gap)", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium", danger && "text-destructive"), children: title }),
         description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }),
@@ -2315,7 +2508,7 @@ function renderGroupProps(props) {
     ] });
   }
   if (layout === "inline") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-(--dk-panel-gap)", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-start justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2326,7 +2519,7 @@ function renderGroupProps(props) {
       /* @__PURE__ */ jsxRuntime.jsx(GroupWrapper, { layout, variant, children })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-(--dk-panel-gap)", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2562,8 +2755,8 @@ function BrowseBodyTemplate({
           {
             className: cn(
               "min-w-0 flex-1 overflow-hidden px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
-              "[&_.dg-shell]:h-full [&_.dg-table-stack]:flex-1 [&_.dg-table-stack]:min-h-0",
-              "[&_.dg-card-container]:flex-1 [&_.dg-card-container]:min-h-0 [&_.dg-card-container]:overflow-auto",
+              "[&_.gridkit-shell]:h-full [&_.gridkit-table-stack]:flex-1 [&_.gridkit-table-stack]:min-h-0",
+              "[&_.gridkit-frame]:flex-1 [&_.gridkit-frame]:min-h-0 [&_.gridkit-frame]:overflow-auto",
               contentClassName
             ),
             children
@@ -2772,6 +2965,52 @@ var DetailBodyTemplate = Object.assign(DetailBodyTemplateRoot, {
   Tab: DetailBodyTab,
   Section: DetailBodySection
 });
+function ListDetailBodyTemplate({
+  theme,
+  className,
+  topBar,
+  list,
+  detail,
+  emptyDetail,
+  listWidth = 320,
+  listClassName,
+  detailClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DataPage,
+    {
+      className: cn("layout-list-detail", className),
+      style: { "--ld-list-width": `${listWidth}px`, ...theme },
+      children: [
+        topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "aside",
+            {
+              className: cn(
+                "min-h-0 shrink-0 overflow-hidden border-r",
+                detail ? "hidden lg:flex lg:w-[var(--ld-list-width)] lg:flex-col" : "flex w-full flex-col lg:w-[var(--ld-list-width)]",
+                listClassName
+              ),
+              children: list
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "main",
+            {
+              className: cn(
+                "min-h-0 min-w-0 flex-1 overflow-auto",
+                !detail && "hidden lg:block",
+                detailClassName
+              ),
+              children: detail ?? emptyDetail
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function FormWizardBodyTemplate({
   theme,
   title,
@@ -3423,7 +3662,7 @@ function buildTokenMap({
   const c = (factor) => (primaryChroma * factor).toFixed(4);
   return {
     "--dk-radius": `${radius}rem`,
-    "--dg-radius": `${radius}rem`,
+    "--gridkit-radius": `${radius}rem`,
     "--radius": `${radius}rem`,
     "--radius-sm": `${(radius * 0.6).toFixed(4)}rem`,
     "--radius-md": `${(radius * 0.8).toFixed(4)}rem`,
@@ -3434,9 +3673,9 @@ function buildTokenMap({
     "--dk-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
     "--dk-primary-foreground": "oklch(0.985 0 0)",
     "--dk-ring": `oklch(0.50 ${primaryChroma} ${primaryHue})`,
-    "--dg-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
-    "--dg-primary-foreground": "oklch(0.985 0 0)",
-    "--dg-ring": `oklch(0.50 ${primaryChroma} ${primaryHue})`,
+    "--gridkit-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
+    "--gridkit-primary-foreground": "oklch(0.985 0 0)",
+    "--gridkit-ring": `oklch(0.50 ${primaryChroma} ${primaryHue})`,
     "--primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
     "--primary-foreground": "oklch(0.985 0 0)",
     "--color-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
@@ -3459,8 +3698,8 @@ function buildTokenMap({
     "--dk-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
     "--dk-input": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
     "--dk-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
-    "--dg-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
-    "--dg-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
+    "--gridkit-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
+    "--gridkit-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
     "--dk-font-scale": fontScale,
     "--dk-line-height": lineHeight,
     "--dk-density": densityValues.density,
@@ -3505,8 +3744,8 @@ function buildDarkTonalTokens(primaryHue, primaryChroma) {
     "--dk-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
     "--dk-input": `oklch(0.35  ${c(0.06)} ${primaryHue})`,
     "--dk-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`,
-    "--dg-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
-    "--dg-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`
+    "--gridkit-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
+    "--gridkit-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`
   };
 }
 function tokenMapToCss(tokens) {
@@ -3559,7 +3798,7 @@ ${tokenMapToCss(tokens)}
   }, [g.density]);
 }
 function buildTemplateTheme(g, ov = {}) {
-  return buildTokenMap({
+  const tokens = buildTokenMap({
     radius: ov.radius ?? g.radius,
     primaryHue: g.primaryHue,
     primaryChroma: ov.primaryChroma ?? g.primaryChroma,
@@ -3570,6 +3809,10 @@ function buildTemplateTheme(g, ov = {}) {
     fontScale: g.fontScale ?? 1,
     lineHeight: g.lineHeight ?? 1
   });
+  if (g.darkMode) {
+    Object.assign(tokens, buildDarkTonalTokens(g.primaryHue, ov.primaryChroma ?? g.primaryChroma));
+  }
+  return tokens;
 }
 
 exports.Avatar = Avatar;
@@ -3614,6 +3857,7 @@ exports.EmptyState = EmptyState;
 exports.FormWizardBodyTemplate = FormWizardBodyTemplate;
 exports.Input = Input;
 exports.Label = Label;
+exports.ListDetailBodyTemplate = ListDetailBodyTemplate;
 exports.LoginBodyTemplate = LoginBodyTemplate;
 exports.NavigationMenu = NavigationMenu;
 exports.NavigationMenuContent = NavigationMenuContent;
@@ -3695,6 +3939,7 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TypographyBodyTemplate = TypographyBodyTemplate;
+exports.WorkbenchBodyTemplate = WorkbenchBodyTemplate;
 exports.badgeVariants = badgeVariants;
 exports.buildTemplateTheme = buildTemplateTheme;
 exports.buildTopBar = buildTopBar;