@loykin/designkit 0.0.3 → 0.0.5

package/README.md

@@ -8,11 +8,19 @@ Do not generate an application workflow from a template name alone. DesignKit
 ships versioned implementation guides that connect routes, query boundaries,
 loading behavior, action placement, and the correct page templates.
 
-| Product workflow    | Guide ID              | Connected destinations                 |
-| ------------------- | --------------------- | -------------------------------------- |
-| Administrative CRUD | `managed-table`       | table → detail Sheet; create/edit page |
-| Publishing          | `publishing-workflow` | blog collection → article route        |
-| Commerce            | `commerce-workflow`   | filtered catalog → product route       |
+| Product workflow    | Guide ID               | Connected destinations                 |
+| ------------------- | ---------------------- | -------------------------------------- |
+| Administrative CRUD | `managed-table`        | table → detail Sheet; create/edit page |
+| Operations          | `kubernetes-workspace` | Pod table → detail panel → tool dock   |
+| Forms               | `form-workflow`        | create, edit, and settings pages       |
+| Publishing          | `publishing-workflow`  | blog collection → article route        |
+| Commerce            | `commerce-workflow`    | filtered catalog → product route       |
+
+The executable **Forms / Stacked Form** Playground guide uses React Hook Form
+to demonstrate shared state, controlled DesignKit inputs, validation, and
+modular section components. React Hook Form is installed in the Playground
+only; it is not a dependency or peer dependency of `@loykin/designkit` and is
+not required to preserve the form design contract.
 
 List the guides included with the installed package:
 
@@ -24,6 +32,8 @@ Print a complete contract for a developer or coding agent:
 
 ```bash
 npx @loykin/designkit guide managed-table
+npx @loykin/designkit guide kubernetes-workspace --prompt
+npx @loykin/designkit guide form-workflow --prompt
 npx @loykin/designkit guide publishing-workflow --prompt
 npx @loykin/designkit guide commerce-workflow
 ```

package/cli/designkit.mjs

@@ -70,9 +70,17 @@ if (!command || command === 'help' || command === '--help' || command === '-h')
     )
   } else {
     const contract = await readFile(join(guideRoot, guide.contract), 'utf8')
-    const prompt = wantsPrompt
-      ? `Implement this workflow with @loykin/designkit ${packageJson.version}. Follow the complete contract below. Preserve route, query, action-placement, loading, and page-template boundaries. Do not nest page-level templates.\n\n`
-      : ''
-    process.stdout.write(`${prompt}${contract.trim()}\n`)
+    if (!wantsPrompt) {
+      process.stdout.write(`${contract.trim()}\n`)
+    } else {
+      const uiContract = await readFile(
+        join(guideRoot, 'ai-ui-implementation-contract.md'),
+        'utf8',
+      )
+      const prompt = `Implement this workflow with @loykin/designkit ${packageJson.version}. Follow the complete contract below. Preserve route, query, action-placement, loading, and page-template boundaries. Do not nest page-level templates.\n\n`
+      process.stdout.write(
+        `${prompt}${uiContract.trim()}\n\n---\n\n${contract.trim()}\n`,
+      )
+    }
   }
 }

package/dist/index.cjs

@@ -2495,7 +2495,7 @@ function ResizeHandle({
     }
   );
 }
-function WorkbenchBodyTemplate({
+function WorkbenchBodyTemplateRoot({
   theme,
   className,
   contentClassName,
@@ -2786,6 +2786,21 @@ function WorkbenchBodyTemplate({
     ] })
   ] });
 }
+function WorkbenchSection({ title, description, actions, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("space-y-2.5 p-3", className), children: [
+    (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions })
+    ] }),
+    children
+  ] });
+}
+var WorkbenchBodyTemplate = Object.assign(WorkbenchBodyTemplateRoot, {
+  Section: WorkbenchSection
+});
 var DataBodyTemplateContext = React2__namespace.default.createContext(false);
 function useDataBodyTemplateParent(component) {
   if (!React2__namespace.default.useContext(DataBodyTemplateContext)) {
@@ -3524,52 +3539,6 @@ function ListDetailBodyTemplate({
     }
   );
 }
-function PanelTemplateSection({
-  title,
-  description,
-  actions,
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("space-y-2.5", className), children: [
-    (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
-      ] }),
-      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions })
-    ] }),
-    children
-  ] });
-}
-function PanelTemplateRoot({
-  title,
-  eyebrow,
-  status,
-  actions,
-  footer,
-  children,
-  className,
-  bodyClassName
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col overflow-hidden", className), children: [
-    (title || eyebrow || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-3", children: [
-      eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "min-w-0 truncate text-sm font-semibold", children: title }),
-          status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: status })
-        ] }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 py-4", bodyClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-5", children }) }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: footer })
-  ] });
-}
-var PanelTemplate = Object.assign(PanelTemplateRoot, {
-  Section: PanelTemplateSection
-});
 function FormWizardBodyTemplate({
   theme,
   title,
@@ -4120,6 +4089,196 @@ function PageTopBar({
     }
   );
 }
+function PanelTemplateSection({
+  title,
+  description,
+  actions,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("space-y-2.5", className), children: [
+    (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions })
+    ] }),
+    children
+  ] });
+}
+function PanelTemplateRow({ label, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-[6rem_minmax(0,1fr)] gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "min-w-0 break-words font-mono text-xs", children })
+  ] });
+}
+function PanelTemplateRoot({
+  title,
+  eyebrow,
+  status,
+  actions,
+  footer,
+  children,
+  className,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col overflow-hidden", className), children: [
+    (title || eyebrow || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-3", children: [
+      eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "min-w-0 truncate text-sm font-semibold", children: title }),
+          status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: status })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 py-4", bodyClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-5", children }) }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: footer })
+  ] });
+}
+var PanelTemplate = Object.assign(PanelTemplateRoot, {
+  Section: PanelTemplateSection,
+  Row: PanelTemplateRow
+});
+function InteractiveCard({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Card,
+    {
+      className: cn(
+        "group h-full cursor-pointer gap-0 overflow-hidden py-0 transition-all hover:-translate-y-0.5 hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var articleToneGradients = {
+  violet: "from-violet-500/80 via-indigo-500/70 to-sky-500/70",
+  emerald: "from-emerald-500/80 via-teal-500/70 to-cyan-500/70",
+  amber: "from-amber-500/80 via-orange-500/70 to-rose-500/70",
+  rose: "from-rose-500/80 via-pink-500/70 to-fuchsia-500/70",
+  sky: "from-sky-500/80 via-blue-500/70 to-indigo-500/70",
+  slate: "from-slate-500/80 via-slate-600/70 to-slate-700/70"
+};
+function ArticleCover({ tone, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative bg-gradient-to-br", articleToneGradients[tone], className), children });
+}
+function ArticleByline({
+  author,
+  initials,
+  meta,
+  size = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", size === "sm" ? "gap-2" : "gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: size === "sm" ? "sm" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("truncate font-medium", size === "sm" ? "text-xs" : "text-sm"), children: author }),
+      meta && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: meta })
+    ] })
+  ] });
+}
+function ArticleToc({ title = "On this page", items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+    items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: item.href,
+        className: cn(
+          "block text-sm",
+          item.emphasis ? "font-medium" : "text-muted-foreground"
+        ),
+        children: item.label
+      },
+      item.href
+    ))
+  ] });
+}
+function ArticleBody({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl space-y-6 text-[15px] leading-7", className), children });
+}
+function ArticleBodySkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl animate-pulse space-y-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-2/3 rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-56 rounded-xl bg-muted" })
+  ] });
+}
+function ArticleCardPreview({
+  tone,
+  category,
+  title,
+  excerpt,
+  author,
+  initials,
+  readTime,
+  coverContent,
+  coverClassName,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(InteractiveCard, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ArticleCover, { tone, className: cn("h-32", coverClassName), children: coverContent }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex flex-1 flex-col p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "mb-3", children: category }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold leading-snug", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 line-clamp-2 text-sm text-muted-foreground", children: excerpt }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto flex items-center justify-between gap-3 pt-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ArticleByline, { author, initials, size: "sm", className: "min-w-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "size-3" }),
+          readTime
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function FormField({ label, htmlFor, error, helperText, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor, className: "text-xs", children: label }),
+    children,
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: helperText }) : null
+  ] });
+}
+function FormActions({
+  status,
+  cancelLabel = "Cancel",
+  onCancel,
+  cancelDisabled,
+  submitLabel,
+  submitDisabled,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border-t border-border pt-(--designkit-panel-gap)",
+        status ? "justify-between" : "justify-end",
+        className
+      ),
+      children: [
+        status && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", role: "status", children: status }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              className: "h-8 text-xs",
+              onClick: onCancel,
+              disabled: cancelDisabled,
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", disabled: submitDisabled, children: submitLabel })
+        ] })
+      ]
+    }
+  );
+}
 var STYLE_ID = "designkit-vars";
 function buildTokenMap({
   radius,
@@ -4329,6 +4488,12 @@ exports.AlertDialogOverlay = AlertDialogOverlay;
 exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
+exports.ArticleBody = ArticleBody;
+exports.ArticleBodySkeleton = ArticleBodySkeleton;
+exports.ArticleByline = ArticleByline;
+exports.ArticleCardPreview = ArticleCardPreview;
+exports.ArticleCover = ArticleCover;
+exports.ArticleToc = ArticleToc;
 exports.Avatar = Avatar;
 exports.AvatarBadge = AvatarBadge;
 exports.AvatarFallback = AvatarFallback;
@@ -4375,8 +4540,11 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
+exports.FormActions = FormActions;
+exports.FormField = FormField;
 exports.FormWizardBodyTemplate = FormWizardBodyTemplate;
 exports.Input = Input;
+exports.InteractiveCard = InteractiveCard;
 exports.Label = Label;
 exports.ListDetailBodyTemplate = ListDetailBodyTemplate;
 exports.LoginBodyTemplate = LoginBodyTemplate;