@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/dist/node/ui/index.js

@@ -344,9 +344,216 @@ function createSaasHandlers(db) {
     getSubscription
   };
 }
+// src/visualizations/catalog.ts
+import {
+  defineVisualization,
+  VisualizationRegistry
+} from "@contractspec/lib.contracts-spec/visualizations";
+var PROJECT_LIST_REF = {
+  key: "saas.project.list",
+  version: "1.0.0"
+};
+var META = {
+  version: "1.0.0",
+  domain: "saas",
+  stability: "experimental",
+  owners: ["@example.saas-boilerplate"],
+  tags: ["saas", "visualization", "projects"]
+};
+var SaasProjectUsageVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-usage",
+    title: "Project Capacity",
+    description: "Current project count against the current plan limit.",
+    goal: "Show usage against the active plan allowance.",
+    context: "SaaS account overview."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "metric",
+    measure: "totalProjects",
+    comparisonMeasure: "projectLimit",
+    measures: [
+      {
+        key: "totalProjects",
+        label: "Projects",
+        dataPath: "totalProjects",
+        format: "number"
+      },
+      {
+        key: "projectLimit",
+        label: "Plan Limit",
+        dataPath: "projectLimit",
+        format: "number"
+      }
+    ],
+    table: { caption: "Current project count and plan limit." }
+  }
+});
+var SaasProjectStatusVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-status",
+    title: "Project Status",
+    description: "Distribution of project states.",
+    goal: "Show the mix of active, draft, and archived projects.",
+    context: "Project portfolio overview."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "pie",
+    nameDimension: "status",
+    valueMeasure: "projects",
+    dimensions: [
+      { key: "status", label: "Status", dataPath: "status", type: "category" }
+    ],
+    measures: [
+      {
+        key: "projects",
+        label: "Projects",
+        dataPath: "projects",
+        format: "number"
+      }
+    ],
+    table: { caption: "Project counts by status." }
+  }
+});
+var SaasProjectTierVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-tiers",
+    title: "Tier Comparison",
+    description: "Distribution of projects across tiers.",
+    goal: "Compare how the current portfolio is distributed by tier.",
+    context: "Plan and packaging overview."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "bar",
+    xDimension: "tier",
+    yMeasures: ["projects"],
+    dimensions: [
+      { key: "tier", label: "Tier", dataPath: "tier", type: "category" }
+    ],
+    measures: [
+      {
+        key: "projects",
+        label: "Projects",
+        dataPath: "projects",
+        format: "number",
+        color: "#1d4ed8"
+      }
+    ],
+    table: { caption: "Project counts by tier." }
+  }
+});
+var SaasProjectActivityVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-activity",
+    title: "Recent Project Activity",
+    description: "Daily project creation activity.",
+    goal: "Show recent project activity over time.",
+    context: "Project portfolio trend view."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "line",
+    xDimension: "day",
+    yMeasures: ["projects"],
+    dimensions: [{ key: "day", label: "Day", dataPath: "day", type: "time" }],
+    measures: [
+      {
+        key: "projects",
+        label: "Projects",
+        dataPath: "projects",
+        format: "number",
+        color: "#0f766e"
+      }
+    ],
+    table: { caption: "Daily project creation counts." }
+  }
+});
+var SaasVisualizationSpecs = [
+  SaasProjectUsageVisualization,
+  SaasProjectStatusVisualization,
+  SaasProjectTierVisualization,
+  SaasProjectActivityVisualization
+];
+var SaasVisualizationRegistry = new VisualizationRegistry([
+  ...SaasVisualizationSpecs
+]);
+var SaasVisualizationRefs = SaasVisualizationSpecs.map((spec) => ({
+  key: spec.meta.key,
+  version: spec.meta.version
+}));
+
+// src/visualizations/selectors.ts
+function toDayKey(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return date.toISOString().slice(0, 10);
+}
+function createSaasVisualizationItems(projects, projectLimit = 10) {
+  const statusCounts = new Map;
+  const tierCounts = new Map;
+  const activityCounts = new Map;
+  for (const project of projects) {
+    statusCounts.set(project.status, (statusCounts.get(project.status) ?? 0) + 1);
+    tierCounts.set(project.tier, (tierCounts.get(project.tier) ?? 0) + 1);
+    const day = toDayKey(project.createdAt);
+    activityCounts.set(day, (activityCounts.get(day) ?? 0) + 1);
+  }
+  return [
+    {
+      key: "saas-capacity",
+      spec: SaasProjectUsageVisualization,
+      data: { data: [{ totalProjects: projects.length, projectLimit }] },
+      title: "Project Capacity",
+      description: "Current project count compared to the active limit.",
+      height: 220
+    },
+    {
+      key: "saas-status",
+      spec: SaasProjectStatusVisualization,
+      data: {
+        data: Array.from(statusCounts.entries()).map(([status, count]) => ({
+          status,
+          projects: count
+        }))
+      },
+      title: "Project Status",
+      description: "Status mix across the current project portfolio.",
+      height: 260
+    },
+    {
+      key: "saas-tier",
+      spec: SaasProjectTierVisualization,
+      data: {
+        data: Array.from(tierCounts.entries()).map(([tier, count]) => ({
+          tier,
+          projects: count
+        }))
+      },
+      title: "Tier Comparison",
+      description: "How projects are distributed across tiers."
+    },
+    {
+      key: "saas-activity",
+      spec: SaasProjectActivityVisualization,
+      data: {
+        data: Array.from(activityCounts.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([day, count]) => ({ day, projects: count }))
+      },
+      title: "Recent Project Activity",
+      description: "Daily project creation activity."
+    }
+  ];
+}
 // 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,8 +616,8 @@ function useProjectList(options = {}) {
 }
 
 // src/ui/hooks/useProjectMutations.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function useProjectMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime2();
   const { saas: saas2 } = handlers;
@@ -497,9 +704,12 @@ function useProjectMutations(options = {}) {
   };
 }
 
+// src/ui/hooks/index.ts
+"use client";
+
 // src/ui/modals/CreateProjectModal.tsx
-import { useState as useState3 } from "react";
 import { Button, Input } from "@contractspec/lib.design-system";
+import { useState as useState3 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var TIERS = [
@@ -544,7 +754,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,
@@ -555,10 +765,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", {
@@ -569,7 +779,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, {
@@ -585,7 +795,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", {
@@ -595,7 +805,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),
@@ -603,7 +813,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", {
@@ -611,7 +821,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
@@ -620,7 +830,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", {
@@ -649,8 +859,8 @@ function CreateProjectModal({
 }
 
 // src/ui/modals/ProjectActionsModal.tsx
-import { useEffect as useEffect2, useState as useState4 } from "react";
 import { Button as Button2, Input as Input2 } from "@contractspec/lib.design-system";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function ProjectActionsModal({
@@ -743,7 +953,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,
@@ -754,13 +964,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", {
@@ -842,7 +1052,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, {
@@ -857,7 +1067,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", {
@@ -866,12 +1076,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", {
@@ -901,7 +1111,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),
                   "?"
@@ -912,7 +1122,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", {
@@ -942,7 +1152,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),
                   "?"
@@ -953,7 +1163,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", {
@@ -980,141 +1190,518 @@ function ProjectActionsModal({
     ]
   }, undefined, true, undefined, this);
 }
-
-// src/ui/SaasDashboard.tsx
-import { useState as useState5, useCallback as useCallback3 } from "react";
-import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
-  EmptyState,
-  LoaderBlock,
-  ErrorState,
-  Button as Button3
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function getStatusTone(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "DRAFT":
-      return "neutral";
-    case "ARCHIVED":
-      return "warning";
-    default:
-      return "neutral";
-  }
+// src/ui/overlays/demo-overlays.ts
+var saasFreeUserOverlay = {
+  overlayId: "saas-boilerplate.free-tier",
+  version: "1.0.0",
+  description: "Shows limitations for free tier users",
+  appliesTo: {
+    feature: "saas-boilerplate",
+    tier: "free"
+  },
+  modifications: [
+    {
+      type: "setLimit",
+      field: "projects",
+      max: 3,
+      message: "Upgrade to create more projects"
+    },
+    { type: "hideField", field: "advancedSettings", reason: "Pro feature" },
+    {
+      type: "addBadge",
+      position: "header",
+      label: "Free Plan",
+      variant: "default"
+    }
+  ]
+};
+var saasDemoOverlay = {
+  overlayId: "saas-boilerplate.demo-user",
+  version: "1.0.0",
+  description: "Demo mode for SaaS boilerplate",
+  appliesTo: {
+    feature: "saas-boilerplate",
+    role: "demo"
+  },
+  modifications: [
+    {
+      type: "hideField",
+      field: "billingSection",
+      reason: "Demo users cannot access billing"
+    },
+    {
+      type: "hideField",
+      field: "deleteAccount",
+      reason: "Not available in demo"
+    },
+    {
+      type: "addBadge",
+      position: "header",
+      label: "Demo Mode",
+      variant: "warning"
+    }
+  ]
+};
+var saasOverlays = [
+  saasFreeUserOverlay,
+  saasDemoOverlay
+];
+// src/ui/renderers/project-list.markdown.ts
+var PROJECT_TIERS = [
+  "FREE",
+  "PRO",
+  "ENTERPRISE"
+];
+function toVisualizationProject(project, index) {
+  return {
+    status: project.status === "DELETED" ? "ARCHIVED" : project.status,
+    tier: PROJECT_TIERS[index % PROJECT_TIERS.length] ?? "FREE",
+    createdAt: project.createdAt
+  };
 }
-function SaasDashboard() {
-  const [activeTab, setActiveTab] = useState5("projects");
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState5(false);
-  const [selectedProject, setSelectedProject] = useState5(null);
-  const [isProjectActionsOpen, setIsProjectActionsOpen] = useState5(false);
-  const { data, subscription, loading, error, stats, refetch } = useProjectList();
-  const mutations = useProjectMutations({
-    onSuccess: () => {
-      refetch();
+var projectListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "ProjectListView") {
+      throw new Error("projectListMarkdownRenderer: not ProjectListView");
     }
-  });
-  const handleProjectClick = useCallback3((project) => {
-    setSelectedProject(project);
-    setIsProjectActionsOpen(true);
-  }, []);
-  const tabs = [
-    { id: "projects", label: "Projects", icon: "\uD83D\uDCC1" },
-    { id: "billing", label: "Billing", icon: "\uD83D\uDCB3" },
-    { id: "settings", label: "Settings", icon: "⚙️" }
-  ];
-  if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV3(LoaderBlock, {
-      label: "Loading dashboard..."
-    }, undefined, false, undefined, this);
+    const data = await mockListProjectsHandler({
+      limit: 20,
+      offset: 0
+    });
+    const items = data.projects ?? [];
+    const lines = [
+      "# Projects",
+      "",
+      `**Total**: ${data.total} projects`,
+      ""
+    ];
+    if (items.length === 0) {
+      lines.push("_No projects found._");
+    } else {
+      lines.push("| Status | Project | Description |");
+      lines.push("|--------|---------|-------------|");
+      for (const project of items) {
+        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
+        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
+      }
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
   }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV3(ErrorState, {
-      title: "Failed to load dashboard",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
+};
+var saasDashboardMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SaasDashboard") {
+      throw new Error("saasDashboardMarkdownRenderer: not SaasDashboard");
+    }
+    const [projectsData, subscription] = await Promise.all([
+      mockListProjectsHandler({ limit: 50 }),
+      mockGetSubscriptionHandler()
+    ]);
+    const projects = projectsData.projects ?? [];
+    const activeProjects = projects.filter((p) => p.status === "ACTIVE").length;
+    const archivedProjects = projects.filter((p) => p.status === "ARCHIVED").length;
+    const visualizations = createSaasVisualizationItems(projects.map(toVisualizationProject), 10);
+    const lines = [
+      "# SaaS Dashboard",
+      "",
+      "> Organization overview and usage summary",
+      "",
+      "## Summary",
+      "",
+      "| Metric | Value |",
+      "|--------|-------|",
+      `| Total Projects | ${projectsData.total} |`,
+      `| Active Projects | ${activeProjects} |`,
+      `| Archived Projects | ${archivedProjects} |`,
+      `| Subscription Plan | ${subscription.planName} |`,
+      `| Subscription Status | ${subscription.status} |`,
+      ""
+    ];
+    lines.push("## Visualization Overview");
+    lines.push("");
+    for (const item of visualizations) {
+      lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+    }
+    lines.push("");
+    lines.push("## Projects");
+    lines.push("");
+    if (projects.length === 0) {
+      lines.push("_No projects yet._");
+    } else {
+      lines.push("| Status | Project | Description |");
+      lines.push("|--------|---------|-------------|");
+      for (const project of projects.slice(0, 10)) {
+        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
+        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
+      }
+      if (projects.length > 10) {
+        lines.push(`| ... | ... | _${projectsData.total - 10} more projects_ |`);
+      }
+    }
+    lines.push("");
+    lines.push("## Subscription");
+    lines.push("");
+    lines.push(`- **Plan**: ${subscription.planName}`);
+    lines.push(`- **Status**: ${subscription.status}`);
+    if (subscription.currentPeriodEnd) {
+      lines.push(`- **Period End**: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`);
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV3("h2", {
-            className: "text-2xl font-bold",
-            children: "SaaS Dashboard"
-          }, undefined, false, undefined, this),
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(Button3, {
-            onPress: () => setIsCreateModalOpen(true),
-            children: [
-              /* @__PURE__ */ jsxDEV3("span", {
-                className: "mr-2",
-                children: "+"
+};
+var saasBillingMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SubscriptionView") {
+      throw new Error("saasBillingMarkdownRenderer: not SubscriptionView");
+    }
+    const subscription = await mockGetSubscriptionHandler();
+    const lines = [
+      "# Billing & Subscription",
+      "",
+      "> Current subscription details and billing information",
+      "",
+      "## Subscription Details",
+      "",
+      "| Property | Value |",
+      "|----------|-------|",
+      `| Plan | ${subscription.planName} |`,
+      `| Status | ${subscription.status} |`,
+      `| ID | ${subscription.id} |`,
+      `| Period Start | ${new Date(subscription.currentPeriodStart).toLocaleDateString()} |`,
+      `| Period End | ${new Date(subscription.currentPeriodEnd).toLocaleDateString()} |`
+    ];
+    lines.push("");
+    lines.push("## Plan Limits");
+    lines.push("");
+    lines.push(`- **Projects**: ${subscription.limits.projects}`);
+    lines.push(`- **Users**: ${subscription.limits.users}`);
+    lines.push("");
+    lines.push("## Plan Features");
+    lines.push("");
+    if (subscription.planName.toLowerCase().includes("free")) {
+      lines.push("- ✅ Up to 3 projects");
+      lines.push("- ✅ Basic support");
+      lines.push("- ❌ Priority support");
+      lines.push("- ❌ Advanced analytics");
+    } else if (subscription.planName.toLowerCase().includes("pro")) {
+      lines.push("- ✅ Unlimited projects");
+      lines.push("- ✅ Priority support");
+      lines.push("- ✅ Advanced analytics");
+      lines.push("- ❌ Custom integrations");
+    } else {
+      lines.push("- ✅ Unlimited projects");
+      lines.push("- ✅ Priority support");
+      lines.push("- ✅ Advanced analytics");
+      lines.push("- ✅ Custom integrations");
+      lines.push("- ✅ Dedicated support");
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+
+// src/ui/SaasProjectList.tsx
+import {
+  Button as Button3,
+  EmptyState,
+  EntityCard,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } 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__ */ jsxDEV3(LoaderBlock, {
+      label: "Loading projects..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV3(ErrorState, {
+      title: "Failed to load projects",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+      title: "No projects found",
+      description: "Create your first project to get started.",
+      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV3(Button3, {
+        onPress: onCreateProject,
+        children: "Create Project"
+      }, undefined, false, undefined, this) : undefined
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: [
+      stats && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Total Projects",
+            value: stats.total.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Active",
+            value: stats.activeCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Draft",
+            value: stats.draftCount.toString()
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        children: data.items.map((project) => /* @__PURE__ */ jsxDEV3(EntityCard, {
+          cardTitle: project.name,
+          cardSubtitle: project.tier,
+          meta: /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground text-sm",
+            children: project.description
+          }, undefined, false, undefined, this),
+          chips: /* @__PURE__ */ jsxDEV3(StatusChip, {
+            tone: getStatusTone(project.status),
+            label: project.status
+          }, undefined, false, undefined, this),
+          footer: /* @__PURE__ */ jsxDEV3("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 jsxDEV4 } 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__ */ jsxDEV4(SaasProjectList, {}, undefined, false, undefined, this);
+  }
+};
+// src/ui/SaasDashboard.visualizations.tsx
+import {
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function SaasVisualizationOverview({
+  projects,
+  projectLimit
+}) {
+  const items = createSaasVisualizationItems(projects, projectLimit);
+  return /* @__PURE__ */ jsxDEV5("section", {
+    className: "space-y-3",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV5("h3", {
+            className: "font-semibold text-lg",
+            children: "Portfolio Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Contract-backed charts for project mix, capacity, and activity."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(VisualizationGrid, {
+        children: items.map((item) => /* @__PURE__ */ jsxDEV5(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/SaasDashboard.tsx
+import {
+  Button as Button4,
+  EmptyState as EmptyState2,
+  EntityCard as EntityCard2,
+  ErrorState as ErrorState2,
+  LoaderBlock as LoaderBlock2,
+  StatCard as StatCard2,
+  StatCardGroup as StatCardGroup2,
+  StatusChip as StatusChip2
+} from "@contractspec/lib.design-system";
+import { useCallback as useCallback3, useState as useState5 } from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+function getStatusTone2(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "success";
+    case "DRAFT":
+      return "neutral";
+    case "ARCHIVED":
+      return "warning";
+    default:
+      return "neutral";
+  }
+}
+function SaasDashboard() {
+  const [activeTab, setActiveTab] = useState5("projects");
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState5(false);
+  const [selectedProject, setSelectedProject] = useState5(null);
+  const [isProjectActionsOpen, setIsProjectActionsOpen] = useState5(false);
+  const { data, subscription, loading, error, stats, refetch } = useProjectList();
+  const mutations = useProjectMutations({
+    onSuccess: () => {
+      refetch();
+    }
+  });
+  const handleProjectClick = useCallback3((project) => {
+    setSelectedProject(project);
+    setIsProjectActionsOpen(true);
+  }, []);
+  const tabs = [
+    { id: "projects", label: "Projects", icon: "\uD83D\uDCC1" },
+    { id: "billing", label: "Billing", icon: "\uD83D\uDCB3" },
+    { id: "settings", label: "Settings", icon: "⚙️" }
+  ];
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV6(LoaderBlock2, {
+      label: "Loading dashboard..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV6(ErrorState2, {
+      title: "Failed to load dashboard",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "font-bold text-2xl",
+            children: "SaaS Dashboard"
+          }, undefined, false, undefined, this),
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV6(Button4, {
+            onPress: () => setIsCreateModalOpen(true),
+            children: [
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: "mr-2",
+                children: "+"
               }, undefined, false, undefined, this),
               " New Project"
             ]
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      stats && subscription && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
+      stats && subscription && /* @__PURE__ */ jsxDEV6(StatCardGroup2, {
         children: [
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
             label: "Projects",
             value: stats.total.toString()
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
             label: "Active",
             value: stats.activeCount.toString()
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
             label: "Draft",
             value: stats.draftCount.toString()
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
             label: "Plan",
             value: subscription.plan,
             hint: subscription.status
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("nav", {
-        className: "bg-muted flex gap-1 rounded-lg p-1",
+      data && stats && /* @__PURE__ */ jsxDEV6(SaasVisualizationOverview, {
+        projectLimit: stats.projectLimit,
+        projects: data.items
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("nav", {
+        className: "flex gap-1 rounded-lg bg-muted p-1",
         role: "tablist",
-        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV3("button", {
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV6("button", {
           type: "button",
           role: "tab",
           "aria-selected": activeTab === tab.id,
           onClick: () => setActiveTab(tab.id),
-          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
           children: [
-            /* @__PURE__ */ jsxDEV3("span", {
+            /* @__PURE__ */ jsxDEV6("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(ProjectsTab, {
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV6(ProjectsTab, {
             data,
             onProjectClick: handleProjectClick
           }, undefined, false, undefined, this),
-          activeTab === "billing" && /* @__PURE__ */ jsxDEV3(BillingTab, {
+          activeTab === "billing" && /* @__PURE__ */ jsxDEV6(BillingTab, {
             subscription
           }, undefined, false, undefined, this),
-          activeTab === "settings" && /* @__PURE__ */ jsxDEV3(SettingsTab, {}, undefined, false, undefined, this)
+          activeTab === "settings" && /* @__PURE__ */ jsxDEV6(SettingsTab, {}, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3(CreateProjectModal, {
+      /* @__PURE__ */ jsxDEV6(CreateProjectModal, {
         isOpen: isCreateModalOpen,
         onClose: () => setIsCreateModalOpen(false),
         onSubmit: async (input) => {
@@ -1122,7 +1709,7 @@ function SaasDashboard() {
         },
         isLoading: mutations.createState.loading
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3(ProjectActionsModal, {
+      /* @__PURE__ */ jsxDEV6(ProjectActionsModal, {
         isOpen: isProjectActionsOpen,
         project: selectedProject,
         onClose: () => {
@@ -1148,34 +1735,34 @@ function SaasDashboard() {
 }
 function ProjectsTab({ data, onProjectClick }) {
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+    return /* @__PURE__ */ jsxDEV6(EmptyState2, {
       title: "No projects yet",
       description: "Create your first project to get started."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-4",
-    children: /* @__PURE__ */ jsxDEV3("div", {
+    children: /* @__PURE__ */ jsxDEV6("div", {
       className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-      children: data.items.map((project) => /* @__PURE__ */ jsxDEV3(EntityCard, {
+      children: data.items.map((project) => /* @__PURE__ */ jsxDEV6(EntityCard2, {
         cardTitle: project.name,
         cardSubtitle: project.tier,
-        meta: /* @__PURE__ */ jsxDEV3("p", {
+        meta: /* @__PURE__ */ jsxDEV6("p", {
           className: "text-muted-foreground text-sm",
           children: project.description
         }, undefined, false, undefined, this),
-        chips: /* @__PURE__ */ jsxDEV3(StatusChip, {
-          tone: getStatusTone(project.status),
+        chips: /* @__PURE__ */ jsxDEV6(StatusChip2, {
+          tone: getStatusTone2(project.status),
           label: project.status
         }, undefined, false, undefined, this),
-        footer: /* @__PURE__ */ jsxDEV3("div", {
+        footer: /* @__PURE__ */ jsxDEV6("div", {
           className: "flex w-full items-center justify-between",
           children: [
-            /* @__PURE__ */ jsxDEV3("span", {
+            /* @__PURE__ */ jsxDEV6("span", {
               className: "text-muted-foreground text-xs",
               children: project.updatedAt.toLocaleDateString()
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3(Button3, {
+            /* @__PURE__ */ jsxDEV6(Button4, {
               variant: "ghost",
               size: "sm",
               onPress: () => onProjectClick?.(project),
@@ -1190,25 +1777,25 @@ function ProjectsTab({ data, onProjectClick }) {
 function BillingTab({ subscription }) {
   if (!subscription)
     return null;
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV3("div", {
+          /* @__PURE__ */ jsxDEV6("div", {
             className: "flex items-start justify-between",
             children: [
-              /* @__PURE__ */ jsxDEV3("div", {
+              /* @__PURE__ */ jsxDEV6("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV3("h3", {
-                    className: "text-lg font-semibold",
+                  /* @__PURE__ */ jsxDEV6("h3", {
+                    className: "font-semibold text-lg",
                     children: [
                       subscription.plan,
                       " Plan"
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV3("p", {
+                  /* @__PURE__ */ jsxDEV6("p", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       "Current period:",
@@ -1219,7 +1806,7 @@ function BillingTab({ subscription }) {
                       subscription.currentPeriodEnd.toLocaleDateString()
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV3("p", {
+                  /* @__PURE__ */ jsxDEV6("p", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       "Billing cycle: ",
@@ -1228,21 +1815,21 @@ function BillingTab({ subscription }) {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV3(StatusChip, {
+              /* @__PURE__ */ jsxDEV6(StatusChip2, {
                 tone: "success",
                 label: subscription.status
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
+          /* @__PURE__ */ jsxDEV6("div", {
             className: "mt-4 flex gap-3",
             children: [
-              /* @__PURE__ */ jsxDEV3(Button3, {
+              /* @__PURE__ */ jsxDEV6(Button4, {
                 variant: "outline",
                 onPress: () => alert("Upgrade clicked!"),
                 children: "Upgrade Plan"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3(Button3, {
+              /* @__PURE__ */ jsxDEV6(Button4, {
                 variant: "ghost",
                 onPress: () => alert("Manage Billing clicked!"),
                 children: "Manage Billing"
@@ -1251,10 +1838,10 @@ function BillingTab({ subscription }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsxDEV3("div", {
-        className: "border-border bg-destructive/10 text-destructive rounded-xl border p-4",
-        children: /* @__PURE__ */ jsxDEV3("p", {
-          className: "text-sm font-medium",
+      subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsxDEV6("div", {
+        className: "rounded-xl border border-border bg-destructive/10 p-4 text-destructive",
+        children: /* @__PURE__ */ jsxDEV6("p", {
+          className: "font-medium text-sm",
           children: "⚠️ Your subscription will be cancelled at the end of the current period."
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -1262,63 +1849,63 @@ function BillingTab({ subscription }) {
   }, undefined, true, undefined, this);
 }
 function SettingsTab() {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
-    children: /* @__PURE__ */ jsxDEV3("div", {
-      className: "border-border bg-card rounded-xl border p-6",
+    children: /* @__PURE__ */ jsxDEV6("div", {
+      className: "rounded-xl border border-border bg-card p-6",
       children: [
-        /* @__PURE__ */ jsxDEV3("h3", {
-          className: "mb-4 text-lg font-semibold",
+        /* @__PURE__ */ jsxDEV6("h3", {
+          className: "mb-4 font-semibold text-lg",
           children: "Organization Settings"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV3("div", {
+        /* @__PURE__ */ jsxDEV6("div", {
           className: "space-y-4",
           children: [
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV3("label", {
+                /* @__PURE__ */ jsxDEV6("label", {
                   htmlFor: "org-name",
-                  className: "text-sm font-medium",
+                  className: "font-medium text-sm",
                   children: "Organization Name"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("input", {
+                /* @__PURE__ */ jsxDEV6("input", {
                   id: "org-name",
                   type: "text",
                   defaultValue: "Demo Organization",
-                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+                  className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV3("label", {
+                /* @__PURE__ */ jsxDEV6("label", {
                   htmlFor: "timezone",
-                  className: "text-sm font-medium",
+                  className: "font-medium text-sm",
                   children: "Default Timezone"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("select", {
+                /* @__PURE__ */ jsxDEV6("select", {
                   id: "timezone",
-                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+                  className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",
                   children: [
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV6("option", {
                       children: "UTC"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV6("option", {
                       children: "America/New_York"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV6("option", {
                       children: "Europe/London"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV6("option", {
                       children: "Asia/Tokyo"
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               className: "pt-2",
-              children: /* @__PURE__ */ jsxDEV3(Button3, {
+              children: /* @__PURE__ */ jsxDEV6(Button4, {
                 onPress: () => alert("Settings saved!"),
                 children: "Save Settings"
               }, undefined, false, undefined, this)
@@ -1330,165 +1917,69 @@ function SettingsTab() {
   }, undefined, false, undefined, this);
 }
 
-// src/ui/SaasProjectList.tsx
-import {
-  StatCard as StatCard2,
-  StatCardGroup as StatCardGroup2,
-  StatusChip as StatusChip2,
-  EntityCard as EntityCard2,
-  EmptyState as EmptyState2,
-  LoaderBlock as LoaderBlock2,
-  ErrorState as ErrorState2,
-  Button as Button4
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-"use client";
-function getStatusTone2(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__ */ jsxDEV4(LoaderBlock2, {
-      label: "Loading projects..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV4(ErrorState2, {
-      title: "Failed to load projects",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV4(EmptyState2, {
-      title: "No projects found",
-      description: "Create your first project to get started.",
-      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV4(Button4, {
-        onPress: onCreateProject,
-        children: "Create Project"
-      }, undefined, false, undefined, this) : undefined
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      stats && /* @__PURE__ */ jsxDEV4(StatCardGroup2, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(StatCard2, {
-            label: "Total Projects",
-            value: stats.total.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard2, {
-            label: "Active",
-            value: stats.activeCount.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard2, {
-            label: "Draft",
-            value: stats.draftCount.toString()
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((project) => /* @__PURE__ */ jsxDEV4(EntityCard2, {
-          cardTitle: project.name,
-          cardSubtitle: project.tier,
-          meta: /* @__PURE__ */ jsxDEV4("p", {
-            className: "text-muted-foreground text-sm",
-            children: project.description
-          }, undefined, false, undefined, this),
-          chips: /* @__PURE__ */ jsxDEV4(StatusChip2, {
-            tone: getStatusTone2(project.status),
-            label: project.status
-          }, undefined, false, undefined, this),
-          footer: /* @__PURE__ */ jsxDEV4("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/SaasSettingsPanel.tsx
-import { useState as useState6 } from "react";
 import { Button as Button5 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { useState as useState6 } from "react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
 "use client";
 function SaasSettingsPanel() {
   const [orgName, setOrgName] = useState6("Demo Organization");
   const [timezone, setTimezone] = useState6("UTC");
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV7("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV5("h3", {
-            className: "mb-4 text-lg font-semibold",
+          /* @__PURE__ */ jsxDEV7("h3", {
+            className: "mb-4 font-semibold text-lg",
             children: "Organization Settings"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV7("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("label", {
+                  /* @__PURE__ */ jsxDEV7("label", {
                     htmlFor: "setting-org-name",
-                    className: "block text-sm font-medium",
+                    className: "block font-medium text-sm",
                     children: "Organization Name"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("input", {
+                  /* @__PURE__ */ jsxDEV7("input", {
                     id: "setting-org-name",
                     type: "text",
                     value: orgName,
                     onChange: (e) => setOrgName(e.target.value),
-                    className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+                    className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV7("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("label", {
+                  /* @__PURE__ */ jsxDEV7("label", {
                     htmlFor: "setting-timezone",
-                    className: "block text-sm font-medium",
+                    className: "block font-medium text-sm",
                     children: "Default Timezone"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("select", {
+                  /* @__PURE__ */ jsxDEV7("select", {
                     id: "setting-timezone",
                     value: timezone,
                     onChange: (e) => setTimezone(e.target.value),
-                    className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+                    className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",
                     children: [
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "UTC",
                         children: "UTC"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "America/New_York",
                         children: "America/New_York"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "Europe/London",
                         children: "Europe/London"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "Asia/Tokyo",
                         children: "Asia/Tokyo"
                       }, undefined, false, undefined, this)
@@ -1498,37 +1989,37 @@ function SaasSettingsPanel() {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "mt-6",
-            children: /* @__PURE__ */ jsxDEV5(Button5, {
+            children: /* @__PURE__ */ jsxDEV7(Button5, {
               variant: "default",
               children: "Save Changes"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV5("h3", {
-            className: "mb-4 text-lg font-semibold",
+          /* @__PURE__ */ jsxDEV7("h3", {
+            className: "mb-4 font-semibold text-lg",
             children: "Notifications"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "space-y-3",
             children: [
               { label: "Email notifications", defaultChecked: true },
               { label: "Usage alerts", defaultChecked: true },
               { label: "Weekly digest", defaultChecked: false }
-            ].map((item) => /* @__PURE__ */ jsxDEV5("label", {
+            ].map((item) => /* @__PURE__ */ jsxDEV7("label", {
               className: "flex items-center gap-3",
               children: [
-                /* @__PURE__ */ jsxDEV5("input", {
+                /* @__PURE__ */ jsxDEV7("input", {
                   type: "checkbox",
                   defaultChecked: item.defaultChecked,
-                  className: "border-input h-4 w-4 rounded"
+                  className: "h-4 w-4 rounded border-input"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV7("span", {
                   className: "text-sm",
                   children: item.label
                 }, undefined, false, undefined, this)
@@ -1537,26 +2028,26 @@ function SaasSettingsPanel() {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV7("div", {
         className: "rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20",
         children: [
-          /* @__PURE__ */ jsxDEV5("h3", {
-            className: "mb-2 text-lg font-semibold text-red-700 dark:text-red-400",
+          /* @__PURE__ */ jsxDEV7("h3", {
+            className: "mb-2 font-semibold text-lg text-red-700 dark:text-red-400",
             children: "Danger Zone"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("p", {
-            className: "mb-4 text-sm text-red-600 dark:text-red-300",
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "mb-4 text-red-600 text-sm dark:text-red-300",
             children: "These actions are irreversible. Please proceed with caution."
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "flex gap-3",
             children: [
-              /* @__PURE__ */ jsxDEV5(Button5, {
+              /* @__PURE__ */ jsxDEV7(Button5, {
                 variant: "secondary",
                 size: "sm",
                 children: "Export Data"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5(Button5, {
+              /* @__PURE__ */ jsxDEV7(Button5, {
                 variant: "secondary",
                 size: "sm",
                 children: "Delete Organization"
@@ -1568,228 +2059,6 @@ function SaasSettingsPanel() {
     ]
   }, undefined, true, undefined, this);
 }
-// src/ui/hooks/index.ts
-"use client";
-
-// src/ui/renderers/project-list.renderer.tsx
-import { jsxDEV as jsxDEV6 } 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__ */ jsxDEV6(SaasProjectList, {}, undefined, false, undefined, this);
-  }
-};
-
-// src/ui/renderers/project-list.markdown.ts
-var projectListMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "ProjectListView") {
-      throw new Error("projectListMarkdownRenderer: not ProjectListView");
-    }
-    const data = await mockListProjectsHandler({
-      limit: 20,
-      offset: 0
-    });
-    const items = data.projects ?? data.items ?? [];
-    const lines = [
-      "# Projects",
-      "",
-      `**Total**: ${data.total} projects`,
-      ""
-    ];
-    if (items.length === 0) {
-      lines.push("_No projects found._");
-    } else {
-      lines.push("| Status | Project | Description |");
-      lines.push("|--------|---------|-------------|");
-      for (const project of items) {
-        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
-        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
-      }
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var saasDashboardMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "SaasDashboard") {
-      throw new Error("saasDashboardMarkdownRenderer: not SaasDashboard");
-    }
-    const [projectsData, subscription] = await Promise.all([
-      mockListProjectsHandler({ limit: 50 }),
-      mockGetSubscriptionHandler()
-    ]);
-    const projects = projectsData.projects ?? [];
-    const activeProjects = projects.filter((p) => p.status === "ACTIVE").length;
-    const archivedProjects = projects.filter((p) => p.status === "ARCHIVED").length;
-    const lines = [
-      "# SaaS Dashboard",
-      "",
-      "> Organization overview and usage summary",
-      "",
-      "## Summary",
-      "",
-      "| Metric | Value |",
-      "|--------|-------|",
-      `| Total Projects | ${projectsData.total} |`,
-      `| Active Projects | ${activeProjects} |`,
-      `| Archived Projects | ${archivedProjects} |`,
-      `| Subscription Plan | ${subscription.planName} |`,
-      `| Subscription Status | ${subscription.status} |`,
-      "",
-      "## Projects",
-      ""
-    ];
-    if (projects.length === 0) {
-      lines.push("_No projects yet._");
-    } else {
-      lines.push("| Status | Project | Description |");
-      lines.push("|--------|---------|-------------|");
-      for (const project of projects.slice(0, 10)) {
-        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
-        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
-      }
-      if (projects.length > 10) {
-        lines.push(`| ... | ... | _${projectsData.total - 10} more projects_ |`);
-      }
-    }
-    lines.push("");
-    lines.push("## Subscription");
-    lines.push("");
-    lines.push(`- **Plan**: ${subscription.planName}`);
-    lines.push(`- **Status**: ${subscription.status}`);
-    if (subscription.currentPeriodEnd) {
-      lines.push(`- **Period End**: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`);
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var saasBillingMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "SubscriptionView") {
-      throw new Error("saasBillingMarkdownRenderer: not SubscriptionView");
-    }
-    const subscription = await mockGetSubscriptionHandler();
-    const lines = [
-      "# Billing & Subscription",
-      "",
-      "> Current subscription details and billing information",
-      "",
-      "## Subscription Details",
-      "",
-      "| Property | Value |",
-      "|----------|-------|",
-      `| Plan | ${subscription.planName} |`,
-      `| Status | ${subscription.status} |`,
-      `| ID | ${subscription.id} |`,
-      `| Period Start | ${new Date(subscription.currentPeriodStart).toLocaleDateString()} |`,
-      `| Period End | ${new Date(subscription.currentPeriodEnd).toLocaleDateString()} |`
-    ];
-    lines.push("");
-    lines.push("## Plan Limits");
-    lines.push("");
-    lines.push(`- **Projects**: ${subscription.limits.projects}`);
-    lines.push(`- **Users**: ${subscription.limits.users}`);
-    lines.push("");
-    lines.push("## Plan Features");
-    lines.push("");
-    if (subscription.planName.toLowerCase().includes("free")) {
-      lines.push("- ✅ Up to 3 projects");
-      lines.push("- ✅ Basic support");
-      lines.push("- ❌ Priority support");
-      lines.push("- ❌ Advanced analytics");
-    } else if (subscription.planName.toLowerCase().includes("pro")) {
-      lines.push("- ✅ Unlimited projects");
-      lines.push("- ✅ Priority support");
-      lines.push("- ✅ Advanced analytics");
-      lines.push("- ❌ Custom integrations");
-    } else {
-      lines.push("- ✅ Unlimited projects");
-      lines.push("- ✅ Priority support");
-      lines.push("- ✅ Advanced analytics");
-      lines.push("- ✅ Custom integrations");
-      lines.push("- ✅ Dedicated support");
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-// src/ui/overlays/demo-overlays.ts
-var saasFreeUserOverlay = {
-  overlayId: "saas-boilerplate.free-tier",
-  version: "1.0.0",
-  description: "Shows limitations for free tier users",
-  appliesTo: {
-    feature: "saas-boilerplate",
-    tier: "free"
-  },
-  modifications: [
-    {
-      type: "setLimit",
-      field: "projects",
-      max: 3,
-      message: "Upgrade to create more projects"
-    },
-    { type: "hideField", field: "advancedSettings", reason: "Pro feature" },
-    {
-      type: "addBadge",
-      position: "header",
-      label: "Free Plan",
-      variant: "default"
-    }
-  ]
-};
-var saasDemoOverlay = {
-  overlayId: "saas-boilerplate.demo-user",
-  version: "1.0.0",
-  description: "Demo mode for SaaS boilerplate",
-  appliesTo: {
-    feature: "saas-boilerplate",
-    role: "demo"
-  },
-  modifications: [
-    {
-      type: "hideField",
-      field: "billingSection",
-      reason: "Demo users cannot access billing"
-    },
-    {
-      type: "hideField",
-      field: "deleteAccount",
-      reason: "Not available in demo"
-    },
-    {
-      type: "addBadge",
-      position: "header",
-      label: "Demo Mode",
-      variant: "warning"
-    }
-  ]
-};
-var saasOverlays = [
-  saasFreeUserOverlay,
-  saasDemoOverlay
-];
 export {
   useProjectMutations,
   useProjectList,