@loykin/designkit 0.0.1-dev.7 → 0.0.2

package/README.md

@@ -2,8 +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).
+For AI-assisted implementation in consuming applications, follow the published
+compound-component contract below. The same rules are included in the package's
+TypeScript declarations so editors and coding agents can discover them.
 
 ## Installation
 
@@ -59,6 +60,12 @@ export function UsersPage() {
 
 General-purpose page shell. Accepts `.Body`, `.Tab`, and `.Section` child slots which determine the layout mode automatically.
 
+> **Compound-component contract:** `DataBodyTemplate` is the required root.
+> Never render `.Group`, `.Tab`, `.Section`, `.Body`, `.Summary`, `.Row`, or
+> `.Field` without it. Choose one primary mode—direct content/groups, `Tab`,
+> `Section`, or `Body`—and do not mix those modes in one root. Invalid standalone
+> usage throws at render time.
+
 ```tsx
 <DataBodyTemplate
   topBar={<PageTopBar left="Admin / Users" />}
@@ -142,6 +149,8 @@ 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 |
 
+`layout` defaults to `stacked`; omit it when the stacked arrangement is intended.
+
 | Prop | Type | Description |
 |---|---|---|
 | `layout` | `GroupLayout` | Visual structure — see table above |
@@ -153,16 +162,18 @@ Groups content within a tab or section. The `layout` prop controls the visual st
 | `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">
-    <DataBodyTemplate.Row label="Name" required>
-      <Input defaultValue="Sarah Kim" />
-    </DataBodyTemplate.Row>
-    <DataBodyTemplate.Row label="Email">
-      <Input type="email" defaultValue="sarah@acme.com" />
-    </DataBodyTemplate.Row>
-  </DataBodyTemplate.Group>
-</DataBodyTemplate.Tab>
+<DataBodyTemplate title="Settings">
+  <DataBodyTemplate.Tab id="settings" label="Settings">
+    <DataBodyTemplate.Group layout="horizontal" title="Identity" description="Basic information">
+      <DataBodyTemplate.Row label="Name" required>
+        <Input defaultValue="Sarah Kim" />
+      </DataBodyTemplate.Row>
+      <DataBodyTemplate.Row label="Email">
+        <Input type="email" defaultValue="sarah@acme.com" />
+      </DataBodyTemplate.Row>
+    </DataBodyTemplate.Group>
+  </DataBodyTemplate.Tab>
+</DataBodyTemplate>
 ```
 
 #### DataBodyTemplate.Field
@@ -170,10 +181,12 @@ Groups content within a tab or section. The `layout` prop controls the visual st
 Read-only key-value display.
 
 ```tsx
-<DataBodyTemplate.Group layout="inline" title="Identity">
-  <DataBodyTemplate.Field label="Email">sarah@acme.com</DataBodyTemplate.Field>
-  <DataBodyTemplate.Field label="Role"><Badge>Admin</Badge></DataBodyTemplate.Field>
-</DataBodyTemplate.Group>
+<DataBodyTemplate title="Profile">
+  <DataBodyTemplate.Group layout="inline" title="Identity">
+    <DataBodyTemplate.Field label="Email">sarah@acme.com</DataBodyTemplate.Field>
+    <DataBodyTemplate.Field label="Role"><Badge>Admin</Badge></DataBodyTemplate.Field>
+  </DataBodyTemplate.Group>
+</DataBodyTemplate>
 ```
 
 #### DataBodyTemplate.Summary

package/dist/index.cjs

@@ -1479,7 +1479,7 @@ function Sidebar({
             /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Sidebar" }),
             /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-0 w-full flex-col", children })
         ]
       }
     ) });
@@ -2705,7 +2705,7 @@ function WorkbenchBodyTemplate({
         )
       ] }),
       /* @__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 }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: mainPane ?? children }),
         showBottomPane && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           resizable && /* @__PURE__ */ jsxRuntime.jsx(
             ResizeHandle,
@@ -2786,19 +2786,30 @@ function WorkbenchBodyTemplate({
     ] })
   ] });
 }
+var DataBodyTemplateContext = React2__namespace.default.createContext(false);
+function useDataBodyTemplateParent(component) {
+  if (!React2__namespace.default.useContext(DataBodyTemplateContext)) {
+    throw new Error(
+      `[DesignKit] <DataBodyTemplate.${component}> must be rendered inside <DataBodyTemplate>. Wrap it like: <DataBodyTemplate><DataBodyTemplate.${component}>...</DataBodyTemplate.${component}></DataBodyTemplate>.`
+    );
+  }
+}
 function DataBodyTab(_props) {
+  useDataBodyTemplateParent("Tab");
   return null;
 }
 function isDataBodyTab(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyTab);
 }
 function DataBodyBody(_props) {
+  useDataBodyTemplateParent("Body");
   return null;
 }
 function isDataBodyBody(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyBody);
 }
 function DataBodySection(_props) {
+  useDataBodyTemplateParent("Section");
   return null;
 }
 function isDataBodySection(node) {
@@ -2807,6 +2818,7 @@ function isDataBodySection(node) {
   );
 }
 function DataBodySummary(_props) {
+  useDataBodyTemplateParent("Summary");
   return null;
 }
 function isDataBodySummary(node) {
@@ -2821,6 +2833,7 @@ var layoutDefaultVariant = {
   split: "bordered"
 };
 function DataBodyGroup(props) {
+  useDataBodyTemplateParent("Group");
   return renderGroupProps(props);
 }
 function isDataBodyGroup(node) {
@@ -2918,6 +2931,7 @@ function renderGroupProps(props) {
   ] });
 }
 function DataBodyField({ label, description, children }) {
+  useDataBodyTemplateParent("Field");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2934,6 +2948,7 @@ function DataBodyField({ label, description, children }) {
   );
 }
 function DataBodyRow({ label, description, required, children }) {
+  useDataBodyTemplateParent("Row");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2956,7 +2971,7 @@ function TopBarSlot({ topBar }) {
   if (!topBar) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar });
 }
-function Root2({
+function RootContent({
   theme,
   className,
   topBar,
@@ -3066,6 +3081,9 @@ function Root2({
     ] })
   ] });
 }
+function Root2(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplateContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(RootContent, { ...props }) });
+}
 var DataBodyTemplate = Object.assign(Root2, {
   Body: DataBodyBody,
   Tab: DataBodyTab,
@@ -3143,7 +3161,7 @@ function BrowseBodyTemplate({
           "div",
           {
             className: cn(
-              "min-w-0 flex-1 overflow-hidden px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
+              "min-w-0 flex-1 overflow-auto px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
               "[&_.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
@@ -3232,6 +3250,7 @@ function DetailBodyTemplateRoot({
   aside,
   summary,
   stickyAside = true,
+  layoutClassName,
   contentClassName,
   mediaClassName,
   asideClassName,
@@ -3345,7 +3364,8 @@ function DetailBodyTemplateRoot({
           {
             className: cn(
               "grid h-full min-h-0 grid-cols-1 overflow-hidden",
-              outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
+              outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]",
+              layoutClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(