@contractspec/example.saas-boilerplate 3.7.5 → 3.7.7

package/dist/ui/modals/CreateProjectModal.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/modals/CreateProjectModal.tsx
-import { useState } from "react";
 import { Button, Input } from "@contractspec/lib.design-system";
+import { useState } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var TIERS = [
@@ -46,7 +46,7 @@ function CreateProjectModal({
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
       /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: onClose,
         role: "button",
         tabIndex: 0,
@@ -57,10 +57,10 @@ function CreateProjectModal({
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
           /* @__PURE__ */ jsxDEV("h2", {
-            className: "mb-4 text-xl font-semibold",
+            className: "mb-4 font-semibold text-xl",
             children: "Create New Project"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("form", {
@@ -71,7 +71,7 @@ function CreateProjectModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "project-name",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Project Name *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV(Input, {
@@ -87,7 +87,7 @@ function CreateProjectModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "project-description",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Description"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("textarea", {
@@ -97,7 +97,7 @@ function CreateProjectModal({
                     placeholder: "Describe what this project is about...",
                     rows: 3,
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
@@ -105,7 +105,7 @@ function CreateProjectModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "project-tier",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Tier"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("select", {
@@ -113,7 +113,7 @@ function CreateProjectModal({
                     value: tier,
                     onChange: (e) => setTier(e.target.value),
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                    className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50",
                     children: TIERS.map((t) => /* @__PURE__ */ jsxDEV("option", {
                       value: t.value,
                       children: t.label
@@ -122,7 +122,7 @@ function CreateProjectModal({
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {

package/dist/ui/modals/ProjectActionsModal.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/modals/ProjectActionsModal.tsx
-import { useEffect, useState } from "react";
 import { Button, Input } from "@contractspec/lib.design-system";
+import { useEffect, useState } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function ProjectActionsModal({
@@ -94,7 +94,7 @@ function ProjectActionsModal({
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
       /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: handleClose,
         role: "button",
         tabIndex: 0,
@@ -105,13 +105,13 @@ function ProjectActionsModal({
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
           /* @__PURE__ */ jsxDEV("div", {
-            className: "border-border mb-4 border-b pb-4",
+            className: "mb-4 border-border border-b pb-4",
             children: [
               /* @__PURE__ */ jsxDEV("h2", {
-                className: "text-xl font-semibold",
+                className: "font-semibold text-xl",
                 children: project.name
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
@@ -193,7 +193,7 @@ function ProjectActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "edit-name",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Project Name *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV(Input, {
@@ -208,7 +208,7 @@ function ProjectActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "edit-description",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Description"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("textarea", {
@@ -217,12 +217,12 @@ function ProjectActionsModal({
                     onChange: (e) => setDescription(e.target.value),
                     rows: 3,
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {
@@ -252,7 +252,7 @@ function ProjectActionsModal({
                   "Are you sure you want to archive",
                   " ",
                   /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-foreground font-medium",
+                    className: "font-medium text-foreground",
                     children: project.name
                   }, undefined, false, undefined, this),
                   "?"
@@ -263,7 +263,7 @@ function ProjectActionsModal({
                 children: "Archived projects can be restored later."
               }, undefined, false, undefined, this),
               error && /* @__PURE__ */ jsxDEV("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {
@@ -293,7 +293,7 @@ function ProjectActionsModal({
                   "Are you sure you want to delete",
                   " ",
                   /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-foreground font-medium",
+                    className: "font-medium text-foreground",
                     children: project.name
                   }, undefined, false, undefined, this),
                   "?"
@@ -304,7 +304,7 @@ function ProjectActionsModal({
                 children: "This action cannot be undone."
               }, undefined, false, undefined, this),
               error && /* @__PURE__ */ jsxDEV("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {

package/dist/ui/modals/index.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/modals/CreateProjectModal.tsx
-import { useState } from "react";
 import { Button, Input } from "@contractspec/lib.design-system";
+import { useState } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var TIERS = [
@@ -46,7 +46,7 @@ function CreateProjectModal({
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
       /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: onClose,
         role: "button",
         tabIndex: 0,
@@ -57,10 +57,10 @@ function CreateProjectModal({
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
           /* @__PURE__ */ jsxDEV("h2", {
-            className: "mb-4 text-xl font-semibold",
+            className: "mb-4 font-semibold text-xl",
             children: "Create New Project"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("form", {
@@ -71,7 +71,7 @@ function CreateProjectModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "project-name",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Project Name *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV(Input, {
@@ -87,7 +87,7 @@ function CreateProjectModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "project-description",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Description"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("textarea", {
@@ -97,7 +97,7 @@ function CreateProjectModal({
                     placeholder: "Describe what this project is about...",
                     rows: 3,
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
@@ -105,7 +105,7 @@ function CreateProjectModal({
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "project-tier",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Tier"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("select", {
@@ -113,7 +113,7 @@ function CreateProjectModal({
                     value: tier,
                     onChange: (e) => setTier(e.target.value),
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                    className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50",
                     children: TIERS.map((t) => /* @__PURE__ */ jsxDEV("option", {
                       value: t.value,
                       children: t.label
@@ -122,7 +122,7 @@ function CreateProjectModal({
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {
@@ -151,8 +151,8 @@ function CreateProjectModal({
 }
 
 // src/ui/modals/ProjectActionsModal.tsx
-import { useEffect, useState as useState2 } from "react";
 import { Button as Button2, Input as Input2 } from "@contractspec/lib.design-system";
+import { useEffect, useState as useState2 } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function ProjectActionsModal({
@@ -245,7 +245,7 @@ function ProjectActionsModal({
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
       /* @__PURE__ */ jsxDEV2("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: handleClose,
         role: "button",
         tabIndex: 0,
@@ -256,13 +256,13 @@ function ProjectActionsModal({
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV2("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
           /* @__PURE__ */ jsxDEV2("div", {
-            className: "border-border mb-4 border-b pb-4",
+            className: "mb-4 border-border border-b pb-4",
             children: [
               /* @__PURE__ */ jsxDEV2("h2", {
-                className: "text-xl font-semibold",
+                className: "font-semibold text-xl",
                 children: project.name
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("p", {
@@ -344,7 +344,7 @@ function ProjectActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV2("label", {
                     htmlFor: "edit-name",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Project Name *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2(Input2, {
@@ -359,7 +359,7 @@ function ProjectActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV2("label", {
                     htmlFor: "edit-description",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Description"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2("textarea", {
@@ -368,12 +368,12 @@ function ProjectActionsModal({
                     onChange: (e) => setDescription(e.target.value),
                     rows: 3,
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV2("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("div", {
@@ -403,7 +403,7 @@ function ProjectActionsModal({
                   "Are you sure you want to archive",
                   " ",
                   /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-foreground font-medium",
+                    className: "font-medium text-foreground",
                     children: project.name
                   }, undefined, false, undefined, this),
                   "?"
@@ -414,7 +414,7 @@ function ProjectActionsModal({
                 children: "Archived projects can be restored later."
               }, undefined, false, undefined, this),
               error && /* @__PURE__ */ jsxDEV2("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("div", {
@@ -444,7 +444,7 @@ function ProjectActionsModal({
                   "Are you sure you want to delete",
                   " ",
                   /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-foreground font-medium",
+                    className: "font-medium text-foreground",
                     children: project.name
                   }, undefined, false, undefined, this),
                   "?"
@@ -455,7 +455,7 @@ function ProjectActionsModal({
                 children: "This action cannot be undone."
               }, undefined, false, undefined, this),
               error && /* @__PURE__ */ jsxDEV2("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("div", {

package/dist/ui/renderers/index.d.ts

@@ -1,2 +1,2 @@
+export { projectListMarkdownRenderer, saasBillingMarkdownRenderer, saasDashboardMarkdownRenderer, } from './project-list.markdown';
 export { projectListReactRenderer } from './project-list.renderer';
-export { projectListMarkdownRenderer, saasDashboardMarkdownRenderer, saasBillingMarkdownRenderer, } from './project-list.markdown';

package/dist/ui/renderers/index.js

@@ -346,8 +346,8 @@ function createSaasHandlers(db) {
   };
 }
 // src/ui/hooks/useProjectList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 function useProjectList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { saas: saas2 } = handlers;
@@ -409,117 +409,6 @@ function useProjectList(options = {}) {
   };
 }
 
-// src/ui/SaasProjectList.tsx
-import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
-  EmptyState,
-  LoaderBlock,
-  ErrorState,
-  Button
-} from "@contractspec/lib.design-system";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function getStatusTone(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "DRAFT":
-      return "neutral";
-    case "ARCHIVED":
-      return "danger";
-    default:
-      return "neutral";
-  }
-}
-function SaasProjectList({
-  onProjectClick,
-  onCreateProject
-}) {
-  const { data, loading, error, stats, refetch } = useProjectList();
-  if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
-      label: "Loading projects..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV(ErrorState, {
-      title: "Failed to load projects",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV(EmptyState, {
-      title: "No projects found",
-      description: "Create your first project to get started.",
-      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV(Button, {
-        onPress: onCreateProject,
-        children: "Create Project"
-      }, undefined, false, undefined, this) : undefined
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "space-y-6",
-    children: [
-      stats && /* @__PURE__ */ jsxDEV(StatCardGroup, {
-        children: [
-          /* @__PURE__ */ jsxDEV(StatCard, {
-            label: "Total Projects",
-            value: stats.total.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
-            label: "Active",
-            value: stats.activeCount.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
-            label: "Draft",
-            value: stats.draftCount.toString()
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((project) => /* @__PURE__ */ jsxDEV(EntityCard, {
-          cardTitle: project.name,
-          cardSubtitle: project.tier,
-          meta: /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground text-sm",
-            children: project.description
-          }, undefined, false, undefined, this),
-          chips: /* @__PURE__ */ jsxDEV(StatusChip, {
-            tone: getStatusTone(project.status),
-            label: project.status
-          }, undefined, false, undefined, this),
-          footer: /* @__PURE__ */ jsxDEV("span", {
-            className: "text-muted-foreground text-xs",
-            children: project.updatedAt.toLocaleDateString()
-          }, undefined, false, undefined, this),
-          onClick: onProjectClick ? () => onProjectClick(project.id) : undefined
-        }, project.id, false, undefined, this))
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/ui/renderers/project-list.renderer.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var projectListReactRenderer = {
-  target: "react",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component") {
-      throw new Error("Invalid source type");
-    }
-    if (desc.source.componentKey !== "SaasProjectListView") {
-      throw new Error(`Unknown component: ${desc.source.componentKey}`);
-    }
-    return /* @__PURE__ */ jsxDEV2(SaasProjectList, {}, undefined, false, undefined, this);
-  }
-};
-
 // src/ui/renderers/project-list.markdown.ts
 var projectListMarkdownRenderer = {
   target: "markdown",
@@ -668,6 +557,117 @@ var saasBillingMarkdownRenderer = {
     };
   }
 };
+
+// src/ui/SaasProjectList.tsx
+import {
+  Button,
+  EmptyState,
+  EntityCard,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function getStatusTone(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "success";
+    case "DRAFT":
+      return "neutral";
+    case "ARCHIVED":
+      return "danger";
+    default:
+      return "neutral";
+  }
+}
+function SaasProjectList({
+  onProjectClick,
+  onCreateProject
+}) {
+  const { data, loading, error, stats, refetch } = useProjectList();
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+      label: "Loading projects..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV(ErrorState, {
+      title: "Failed to load projects",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV(EmptyState, {
+      title: "No projects found",
+      description: "Create your first project to get started.",
+      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV(Button, {
+        onPress: onCreateProject,
+        children: "Create Project"
+      }, undefined, false, undefined, this) : undefined
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-6",
+    children: [
+      stats && /* @__PURE__ */ jsxDEV(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Total Projects",
+            value: stats.total.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Active",
+            value: stats.activeCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Draft",
+            value: stats.draftCount.toString()
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        children: data.items.map((project) => /* @__PURE__ */ jsxDEV(EntityCard, {
+          cardTitle: project.name,
+          cardSubtitle: project.tier,
+          meta: /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: project.description
+          }, undefined, false, undefined, this),
+          chips: /* @__PURE__ */ jsxDEV(StatusChip, {
+            tone: getStatusTone(project.status),
+            label: project.status
+          }, undefined, false, undefined, this),
+          footer: /* @__PURE__ */ jsxDEV("span", {
+            className: "text-muted-foreground text-xs",
+            children: project.updatedAt.toLocaleDateString()
+          }, undefined, false, undefined, this),
+          onClick: onProjectClick ? () => onProjectClick(project.id) : undefined
+        }, project.id, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/renderers/project-list.renderer.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var projectListReactRenderer = {
+  target: "react",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component") {
+      throw new Error("Invalid source type");
+    }
+    if (desc.source.componentKey !== "SaasProjectListView") {
+      throw new Error(`Unknown component: ${desc.source.componentKey}`);
+    }
+    return /* @__PURE__ */ jsxDEV2(SaasProjectList, {}, undefined, false, undefined, this);
+  }
+};
 export {
   saasDashboardMarkdownRenderer,
   saasBillingMarkdownRenderer,

package/dist/ui/renderers/project-list.renderer.d.ts

@@ -1,6 +1,6 @@
 /**
  * React renderer for SaaS Project List presentation
  */
-import * as React from 'react';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import * as React from 'react';
 export declare const projectListReactRenderer: PresentationRenderer<React.ReactElement>;

package/dist/ui/renderers/project-list.renderer.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/hooks/useProjectList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 function useProjectList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { saas } = handlers;
@@ -65,14 +65,14 @@ function useProjectList(options = {}) {
 
 // src/ui/SaasProjectList.tsx
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
+  Button,
   EmptyState,
-  LoaderBlock,
+  EntityCard,
   ErrorState,
-  Button
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
 } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";