@contractspec/example.saas-boilerplate 1.56.1 → 1.58.0

package/dist/node/ui/index.js

@@ -0,0 +1,1808 @@
+// src/shared/mock-data.ts
+var MOCK_PROJECTS = [
+  {
+    id: "proj-1",
+    name: "Marketing Website",
+    description: "Main company website redesign project",
+    slug: "marketing-website",
+    organizationId: "demo-org",
+    createdBy: "user-1",
+    status: "ACTIVE",
+    isPublic: false,
+    tags: ["marketing", "website", "redesign"],
+    createdAt: new Date("2024-01-15T10:00:00Z"),
+    updatedAt: new Date("2024-03-20T14:30:00Z")
+  },
+  {
+    id: "proj-2",
+    name: "Mobile App v2",
+    description: "Next generation mobile application",
+    slug: "mobile-app-v2",
+    organizationId: "demo-org",
+    createdBy: "user-2",
+    status: "ACTIVE",
+    isPublic: false,
+    tags: ["mobile", "app", "v2"],
+    createdAt: new Date("2024-02-01T09:00:00Z"),
+    updatedAt: new Date("2024-04-05T11:15:00Z")
+  },
+  {
+    id: "proj-3",
+    name: "API Integration",
+    description: "Third-party API integration project",
+    slug: "api-integration",
+    organizationId: "demo-org",
+    createdBy: "user-1",
+    status: "DRAFT",
+    isPublic: false,
+    tags: ["api", "integration"],
+    createdAt: new Date("2024-03-10T08:00:00Z"),
+    updatedAt: new Date("2024-03-10T08:00:00Z")
+  },
+  {
+    id: "proj-4",
+    name: "Analytics Dashboard",
+    description: "Internal analytics and reporting dashboard",
+    slug: "analytics-dashboard",
+    organizationId: "demo-org",
+    createdBy: "user-3",
+    status: "ARCHIVED",
+    isPublic: true,
+    tags: ["analytics", "dashboard", "reporting"],
+    createdAt: new Date("2023-10-01T12:00:00Z"),
+    updatedAt: new Date("2024-02-28T16:45:00Z")
+  }
+];
+var MOCK_SUBSCRIPTION = {
+  id: "sub-1",
+  organizationId: "demo-org",
+  planId: "pro",
+  planName: "Professional",
+  status: "ACTIVE",
+  currentPeriodStart: new Date("2024-04-01T00:00:00Z"),
+  currentPeriodEnd: new Date("2024-05-01T00:00:00Z"),
+  limits: {
+    projects: 25,
+    users: 10,
+    storage: 50,
+    apiCalls: 1e5
+  },
+  usage: {
+    projects: 4,
+    users: 5,
+    storage: 12.5,
+    apiCalls: 45230
+  }
+};
+var MOCK_USAGE_SUMMARY = {
+  organizationId: "demo-org",
+  period: "current_month",
+  apiCalls: {
+    total: 45230,
+    limit: 1e5,
+    percentUsed: 45.23
+  },
+  storage: {
+    totalGb: 12.5,
+    limitGb: 50,
+    percentUsed: 25
+  },
+  activeProjects: 4,
+  activeUsers: 5,
+  breakdown: [
+    { date: "2024-04-01", apiCalls: 3200, storageGb: 12.1 },
+    { date: "2024-04-02", apiCalls: 2800, storageGb: 12.2 },
+    { date: "2024-04-03", apiCalls: 4100, storageGb: 12.3 },
+    { date: "2024-04-04", apiCalls: 3600, storageGb: 12.4 },
+    { date: "2024-04-05", apiCalls: 3800, storageGb: 12.5 }
+  ]
+};
+
+// src/billing/billing.handler.ts
+async function mockGetSubscriptionHandler() {
+  return MOCK_SUBSCRIPTION;
+}
+async function mockGetUsageSummaryHandler(input) {
+  return {
+    ...MOCK_USAGE_SUMMARY,
+    period: input.period ?? "current_month"
+  };
+}
+async function mockRecordUsageHandler(input) {
+  const currentUsage = MOCK_USAGE_SUMMARY.apiCalls.total;
+  const newTotal = currentUsage + input.quantity;
+  return {
+    recorded: true,
+    newTotal
+  };
+}
+async function mockCheckFeatureAccessHandler(input) {
+  const { feature } = input;
+  const featureMap = {
+    custom_domains: {
+      allowed: true
+    },
+    api_access: {
+      allowed: true,
+      currentUsage: MOCK_USAGE_SUMMARY.apiCalls.total,
+      limit: MOCK_USAGE_SUMMARY.apiCalls.limit
+    },
+    advanced_analytics: {
+      allowed: false,
+      reason: "FEATURE_NOT_INCLUDED"
+    },
+    unlimited_projects: {
+      allowed: false,
+      reason: "PLAN_LIMIT",
+      currentUsage: MOCK_SUBSCRIPTION.usage.projects,
+      limit: MOCK_SUBSCRIPTION.limits.projects
+    }
+  };
+  return featureMap[feature] ?? { allowed: true };
+}
+
+// src/project/project.handler.ts
+async function mockListProjectsHandler(input) {
+  const { status, search, limit = 20, offset = 0 } = input;
+  let filtered = [...MOCK_PROJECTS];
+  if (status && status !== "all") {
+    filtered = filtered.filter((p) => p.status === status);
+  }
+  if (search) {
+    const q = search.toLowerCase();
+    filtered = filtered.filter((p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q) || p.tags.some((t) => t.toLowerCase().includes(q)));
+  }
+  filtered.sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime());
+  const total = filtered.length;
+  const projects = filtered.slice(offset, offset + limit);
+  return {
+    projects,
+    total
+  };
+}
+async function mockGetProjectHandler(input) {
+  const project = MOCK_PROJECTS.find((p) => p.id === input.projectId);
+  if (!project) {
+    throw new Error("NOT_FOUND");
+  }
+  return project;
+}
+async function mockCreateProjectHandler(input, context) {
+  if (input.slug) {
+    const exists = MOCK_PROJECTS.some((p) => p.slug === input.slug);
+    if (exists) {
+      throw new Error("SLUG_EXISTS");
+    }
+  }
+  const now = new Date;
+  return {
+    id: `proj-${Date.now()}`,
+    name: input.name,
+    description: input.description,
+    slug: input.slug ?? input.name.toLowerCase().replace(/\s+/g, "-"),
+    organizationId: context.organizationId,
+    createdBy: context.userId,
+    status: "DRAFT",
+    isPublic: input.isPublic ?? false,
+    tags: input.tags ?? [],
+    createdAt: now,
+    updatedAt: now
+  };
+}
+async function mockUpdateProjectHandler(input) {
+  const project = MOCK_PROJECTS.find((p) => p.id === input.projectId);
+  if (!project) {
+    throw new Error("NOT_FOUND");
+  }
+  return {
+    ...project,
+    name: input.name ?? project.name,
+    description: input.description ?? project.description,
+    slug: input.slug ?? project.slug,
+    isPublic: input.isPublic ?? project.isPublic,
+    tags: input.tags ?? project.tags,
+    status: input.status ?? project.status,
+    updatedAt: new Date
+  };
+}
+async function mockDeleteProjectHandler(input) {
+  const project = MOCK_PROJECTS.find((p) => p.id === input.projectId);
+  if (!project) {
+    throw new Error("NOT_FOUND");
+  }
+  return { success: true };
+}
+
+// src/handlers/saas.handlers.ts
+import { web } from "@contractspec/lib.runtime-sandbox";
+var { generateId } = web;
+function rowToProject(row) {
+  return {
+    id: row.id,
+    projectId: row.projectId,
+    organizationId: row.organizationId,
+    name: row.name,
+    description: row.description ?? undefined,
+    status: row.status,
+    tier: row.tier,
+    createdAt: new Date(row.createdAt),
+    updatedAt: new Date(row.updatedAt)
+  };
+}
+function rowToSubscription(row) {
+  return {
+    id: row.id,
+    projectId: row.projectId,
+    organizationId: row.organizationId,
+    plan: row.plan,
+    status: row.status,
+    billingCycle: row.billingCycle,
+    currentPeriodStart: new Date(row.currentPeriodStart),
+    currentPeriodEnd: new Date(row.currentPeriodEnd),
+    cancelAtPeriodEnd: Boolean(row.cancelAtPeriodEnd)
+  };
+}
+function createSaasHandlers(db) {
+  async function listProjects(input) {
+    const {
+      projectId,
+      organizationId,
+      status,
+      search,
+      limit = 20,
+      offset = 0
+    } = input;
+    let whereClause = "WHERE projectId = ?";
+    const params = [projectId];
+    if (organizationId) {
+      whereClause += " AND organizationId = ?";
+      params.push(organizationId);
+    }
+    if (status && status !== "all") {
+      whereClause += " AND status = ?";
+      params.push(status);
+    }
+    if (search) {
+      whereClause += " AND (name LIKE ? OR description LIKE ?)";
+      params.push(`%${search}%`, `%${search}%`);
+    }
+    const countResult = (await db.query(`SELECT COUNT(*) as count FROM saas_project ${whereClause}`, params)).rows;
+    const total = countResult[0]?.count ?? 0;
+    const rows = (await db.query(`SELECT * FROM saas_project ${whereClause} ORDER BY createdAt DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    return {
+      items: rows.map(rowToProject),
+      total,
+      hasMore: offset + rows.length < total
+    };
+  }
+  async function getProject(id) {
+    const rows = (await db.query(`SELECT * FROM saas_project WHERE id = ?`, [id])).rows;
+    return rows[0] ? rowToProject(rows[0]) : null;
+  }
+  async function createProject(input, context) {
+    const id = generateId("proj");
+    const now = new Date().toISOString();
+    await db.execute(`INSERT INTO saas_project (id, projectId, organizationId, name, description, status, tier, createdAt, updatedAt)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
+      id,
+      context.projectId,
+      context.organizationId,
+      input.name,
+      input.description ?? null,
+      "DRAFT",
+      input.tier ?? "FREE",
+      now,
+      now
+    ]);
+    const rows = (await db.query(`SELECT * FROM saas_project WHERE id = ?`, [id])).rows;
+    return rowToProject(rows[0]);
+  }
+  async function updateProject(input) {
+    const now = new Date().toISOString();
+    const updates = ["updatedAt = ?"];
+    const params = [now];
+    if (input.name !== undefined) {
+      updates.push("name = ?");
+      params.push(input.name);
+    }
+    if (input.description !== undefined) {
+      updates.push("description = ?");
+      params.push(input.description);
+    }
+    if (input.status !== undefined) {
+      updates.push("status = ?");
+      params.push(input.status);
+    }
+    params.push(input.id);
+    await db.execute(`UPDATE saas_project SET ${updates.join(", ")} WHERE id = ?`, params);
+    const rows = (await db.query(`SELECT * FROM saas_project WHERE id = ?`, [input.id])).rows;
+    if (!rows[0]) {
+      throw new Error("NOT_FOUND");
+    }
+    return rowToProject(rows[0]);
+  }
+  async function deleteProject(id) {
+    await db.execute(`DELETE FROM saas_project WHERE id = ?`, [id]);
+  }
+  async function getSubscription(input) {
+    let query = `SELECT * FROM saas_subscription WHERE projectId = ?`;
+    const params = [input.projectId];
+    if (input.organizationId) {
+      query += " AND organizationId = ?";
+      params.push(input.organizationId);
+    }
+    query += " LIMIT 1";
+    const rows = (await db.query(query, params)).rows;
+    return rows[0] ? rowToSubscription(rows[0]) : null;
+  }
+  return {
+    listProjects,
+    getProject,
+    createProject,
+    updateProject,
+    deleteProject,
+    getSubscription
+  };
+}
+// src/ui/hooks/useProjectList.ts
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+function useProjectList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime();
+  const { saas: saas2 } = handlers;
+  const [data, setData] = useState(null);
+  const [subscription, setSubscription] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [projectsResult, subscriptionResult] = await Promise.all([
+        saas2.listProjects({
+          projectId,
+          status: options.status === "all" ? undefined : options.status,
+          search: options.search,
+          limit: options.limit ?? 20,
+          offset: (page - 1) * (options.limit ?? 20)
+        }),
+        saas2.getSubscription({ projectId })
+      ]);
+      setData({
+        items: projectsResult.items,
+        total: projectsResult.total
+      });
+      setSubscription(subscriptionResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [saas2, projectId, options.status, options.search, options.limit, page]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const stats = useMemo(() => {
+    if (!data)
+      return null;
+    const items = data.items;
+    return {
+      total: data.total,
+      activeCount: items.filter((p) => p.status === "ACTIVE").length,
+      draftCount: items.filter((p) => p.status === "DRAFT").length,
+      projectLimit: 10,
+      usagePercent: Math.min(data.total / 10 * 100, 100)
+    };
+  }, [data]);
+  return {
+    data,
+    subscription,
+    loading,
+    error,
+    stats,
+    page,
+    refetch: fetchData,
+    nextPage: () => setPage((p) => p + 1),
+    prevPage: () => page > 1 && setPage((p) => p - 1)
+  };
+}
+
+// src/ui/hooks/useProjectMutations.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+function useProjectMutations(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime2();
+  const { saas: saas2 } = handlers;
+  const [createState, setCreateState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [updateState, setUpdateState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [deleteState, setDeleteState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const createProject = useCallback2(async (input) => {
+    setCreateState({ loading: true, error: null, data: null });
+    try {
+      const result = await saas2.createProject(input, {
+        projectId,
+        organizationId: "demo-org"
+      });
+      setCreateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to create project");
+      setCreateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [saas2, projectId, options]);
+  const updateProject = useCallback2(async (input) => {
+    setUpdateState({ loading: true, error: null, data: null });
+    try {
+      const result = await saas2.updateProject(input);
+      setUpdateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to update project");
+      setUpdateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [saas2, options]);
+  const deleteProject = useCallback2(async (id) => {
+    setDeleteState({ loading: true, error: null, data: null });
+    try {
+      await saas2.deleteProject(id);
+      setDeleteState({
+        loading: false,
+        error: null,
+        data: { success: true }
+      });
+      options.onSuccess?.();
+      return true;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to delete project");
+      setDeleteState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return false;
+    }
+  }, [saas2, options]);
+  const archiveProject = useCallback2(async (id) => {
+    return updateProject({ id, status: "ARCHIVED" });
+  }, [updateProject]);
+  const activateProject = useCallback2(async (id) => {
+    return updateProject({ id, status: "ACTIVE" });
+  }, [updateProject]);
+  return {
+    createProject,
+    updateProject,
+    deleteProject,
+    archiveProject,
+    activateProject,
+    createState,
+    updateState,
+    deleteState,
+    isLoading: createState.loading || updateState.loading || deleteState.loading
+  };
+}
+
+// src/ui/modals/CreateProjectModal.tsx
+import { useState as useState3 } from "react";
+import { Button, Input } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var TIERS = [
+  { value: "FREE", label: "Free" },
+  { value: "PRO", label: "Pro" },
+  { value: "ENTERPRISE", label: "Enterprise" }
+];
+function CreateProjectModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false
+}) {
+  const [name, setName] = useState3("");
+  const [description, setDescription] = useState3("");
+  const [tier, setTier] = useState3("FREE");
+  const [error, setError] = useState3(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        tier
+      });
+      setName("");
+      setDescription("");
+      setTier("FREE");
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create project");
+    }
+  };
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    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",
+        onClick: onClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            onClose();
+        },
+        "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",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "mb-4 text-xl font-semibold",
+            children: "Create New Project"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Project Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Input, {
+                    id: "project-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g., My Awesome Project",
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("textarea", {
+                    id: "project-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    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"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-tier",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Tier"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("select", {
+                    id: "project-tier",
+                    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",
+                    children: TIERS.map((t) => /* @__PURE__ */ jsxDEV("option", {
+                      value: t.value,
+                      children: t.label
+                    }, t.value, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    type: "button",
+                    variant: "ghost",
+                    onPress: onClose,
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    type: "submit",
+                    disabled: isLoading,
+                    children: isLoading ? "Creating..." : "Create Project"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// 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 { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function ProjectActionsModal({
+  isOpen,
+  project,
+  onClose,
+  onUpdate,
+  onArchive,
+  onActivate,
+  onDelete,
+  isLoading = false
+}) {
+  const [mode, setMode] = useState4("menu");
+  const [name, setName] = useState4("");
+  const [description, setDescription] = useState4("");
+  const [error, setError] = useState4(null);
+  const resetForm = () => {
+    setMode("menu");
+    setError(null);
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+    }
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  useEffect2(() => {
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+    }
+  }, [project]);
+  const handleEdit = async () => {
+    if (!project)
+      return;
+    setError(null);
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+    try {
+      await onUpdate({
+        id: project.id,
+        name: name.trim(),
+        description: description.trim() || undefined
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update project");
+    }
+  };
+  const handleArchive = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onArchive(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to archive project");
+    }
+  };
+  const handleActivate = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onActivate(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to activate project");
+    }
+  };
+  const handleDelete = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onDelete(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete project");
+    }
+  };
+  if (!isOpen || !project)
+    return null;
+  return /* @__PURE__ */ jsxDEV2("div", {
+    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",
+        onClick: handleClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            handleClose();
+        },
+        "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",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "border-border mb-4 border-b pb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-xl font-semibold",
+                children: project.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: [
+                  project.tier,
+                  " · ",
+                  project.status
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "menu" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("edit"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "✏️"
+                  }, undefined, false, undefined, this),
+                  " Edit Project"
+                ]
+              }, undefined, true, undefined, this),
+              project.status === "ACTIVE" || project.status === "DRAFT" ? /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("archive"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCE6"
+                  }, undefined, false, undefined, this),
+                  " Archive Project"
+                ]
+              }, undefined, true, undefined, this) : project.status === "ARCHIVED" ? /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: handleActivate,
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDD04"
+                  }, undefined, false, undefined, this),
+                  " Restore Project"
+                ]
+              }, undefined, true, undefined, this) : null,
+              /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start text-red-500 hover:text-red-600",
+                variant: "ghost",
+                onPress: () => setMode("delete"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDDD1️"
+                  }, undefined, false, undefined, this),
+                  " Delete Project"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV2(Button2, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "edit" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "edit-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Project Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Input2, {
+                    id: "edit-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "edit-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("textarea", {
+                    id: "edit-description",
+                    value: description,
+                    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"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    onPress: handleEdit,
+                    disabled: isLoading,
+                    children: isLoading ? "Saving..." : "Save Changes"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "archive" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to archive",
+                  " ",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "text-foreground font-medium",
+                    children: project.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                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",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    onPress: handleArchive,
+                    disabled: isLoading,
+                    children: isLoading ? "Archiving..." : "\uD83D\uDCE6 Archive"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "delete" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to delete",
+                  " ",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "text-foreground font-medium",
+                    children: project.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-destructive text-sm",
+                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",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "destructive",
+                    onPress: handleDelete,
+                    disabled: isLoading,
+                    children: isLoading ? "Deleting..." : "\uD83D\uDDD1️ Delete"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, 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";
+  }
+}
+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__ */ jsxDEV3(LoaderBlock, {
+      label: "Loading dashboard..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV3(ErrorState, {
+      title: "Failed to load dashboard",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  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: "+"
+              }, undefined, false, undefined, this),
+              " New Project"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      stats && subscription && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "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),
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            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",
+        role: "tablist",
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV3("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"}`,
+          children: [
+            /* @__PURE__ */ jsxDEV3("span", {
+              children: tab.icon
+            }, undefined, false, undefined, this),
+            tab.label
+          ]
+        }, tab.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "min-h-[400px]",
+        role: "tabpanel",
+        children: [
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(ProjectsTab, {
+            data,
+            onProjectClick: handleProjectClick
+          }, undefined, false, undefined, this),
+          activeTab === "billing" && /* @__PURE__ */ jsxDEV3(BillingTab, {
+            subscription
+          }, undefined, false, undefined, this),
+          activeTab === "settings" && /* @__PURE__ */ jsxDEV3(SettingsTab, {}, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3(CreateProjectModal, {
+        isOpen: isCreateModalOpen,
+        onClose: () => setIsCreateModalOpen(false),
+        onSubmit: async (input) => {
+          await mutations.createProject(input);
+        },
+        isLoading: mutations.createState.loading
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(ProjectActionsModal, {
+        isOpen: isProjectActionsOpen,
+        project: selectedProject,
+        onClose: () => {
+          setIsProjectActionsOpen(false);
+          setSelectedProject(null);
+        },
+        onUpdate: async (input) => {
+          await mutations.updateProject(input);
+        },
+        onArchive: async (projectId) => {
+          await mutations.archiveProject(projectId);
+        },
+        onActivate: async (projectId) => {
+          await mutations.activateProject(projectId);
+        },
+        onDelete: async (projectId) => {
+          await mutations.deleteProject(projectId);
+        },
+        isLoading: mutations.isLoading
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ProjectsTab({ data, onProjectClick }) {
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+      title: "No projects yet",
+      description: "Create your first project to get started."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-4",
+    children: /* @__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("div", {
+          className: "flex w-full items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxDEV3("span", {
+              className: "text-muted-foreground text-xs",
+              children: project.updatedAt.toLocaleDateString()
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3(Button3, {
+              variant: "ghost",
+              size: "sm",
+              onPress: () => onProjectClick?.(project),
+              children: "Actions"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, project.id, false, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BillingTab({ subscription }) {
+  if (!subscription)
+    return null;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "border-border bg-card rounded-xl border p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex items-start justify-between",
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: [
+                      subscription.plan,
+                      " Plan"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      "Current period:",
+                      " ",
+                      subscription.currentPeriodStart.toLocaleDateString(),
+                      " -",
+                      " ",
+                      subscription.currentPeriodEnd.toLocaleDateString()
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      "Billing cycle: ",
+                      subscription.billingCycle
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3(StatusChip, {
+                tone: "success",
+                label: subscription.status
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "mt-4 flex gap-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3(Button3, {
+                variant: "outline",
+                onPress: () => alert("Upgrade clicked!"),
+                children: "Upgrade Plan"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3(Button3, {
+                variant: "ghost",
+                onPress: () => alert("Manage Billing clicked!"),
+                children: "Manage Billing"
+              }, undefined, false, undefined, this)
+            ]
+          }, 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",
+          children: "⚠️ Your subscription will be cancelled at the end of the current period."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SettingsTab() {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: /* @__PURE__ */ jsxDEV3("div", {
+      className: "border-border bg-card rounded-xl border p-6",
+      children: [
+        /* @__PURE__ */ jsxDEV3("h3", {
+          className: "mb-4 text-lg font-semibold",
+          children: "Organization Settings"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV3("div", {
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ jsxDEV3("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV3("label", {
+                  htmlFor: "org-name",
+                  className: "text-sm font-medium",
+                  children: "Organization Name"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("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"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV3("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV3("label", {
+                  htmlFor: "timezone",
+                  className: "text-sm font-medium",
+                  children: "Default Timezone"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("select", {
+                  id: "timezone",
+                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "UTC"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "America/New_York"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "Europe/London"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "Asia/Tokyo"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV3("div", {
+              className: "pt-2",
+              children: /* @__PURE__ */ jsxDEV3(Button3, {
+                onPress: () => alert("Settings saved!"),
+                children: "Save Settings"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, 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";
+"use client";
+function SaasSettingsPanel() {
+  const [orgName, setOrgName] = useState6("Demo Organization");
+  const [timezone, setTimezone] = useState6("UTC");
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "border-border bg-card rounded-xl border p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h3", {
+            className: "mb-4 text-lg font-semibold",
+            children: "Organization Settings"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("label", {
+                    htmlFor: "setting-org-name",
+                    className: "block text-sm font-medium",
+                    children: "Organization Name"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("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"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("label", {
+                    htmlFor: "setting-timezone",
+                    className: "block text-sm font-medium",
+                    children: "Default Timezone"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("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",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("option", {
+                        value: "UTC",
+                        children: "UTC"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("option", {
+                        value: "America/New_York",
+                        children: "America/New_York"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("option", {
+                        value: "Europe/London",
+                        children: "Europe/London"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("option", {
+                        value: "Asia/Tokyo",
+                        children: "Asia/Tokyo"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "mt-6",
+            children: /* @__PURE__ */ jsxDEV5(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",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h3", {
+            className: "mb-4 text-lg font-semibold",
+            children: "Notifications"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("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", {
+              className: "flex items-center gap-3",
+              children: [
+                /* @__PURE__ */ jsxDEV5("input", {
+                  type: "checkbox",
+                  defaultChecked: item.defaultChecked,
+                  className: "border-input h-4 w-4 rounded"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("span", {
+                  className: "text-sm",
+                  children: item.label
+                }, undefined, false, undefined, this)
+              ]
+            }, item.label, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("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",
+            children: "Danger Zone"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "mb-4 text-sm text-red-600 dark:text-red-300",
+            children: "These actions are irreversible. Please proceed with caution."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "flex gap-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5(Button5, {
+                variant: "secondary",
+                size: "sm",
+                children: "Export Data"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5(Button5, {
+                variant: "secondary",
+                size: "sm",
+                children: "Delete Organization"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, 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,
+  saasOverlays,
+  saasFreeUserOverlay,
+  saasDemoOverlay,
+  saasDashboardMarkdownRenderer,
+  saasBillingMarkdownRenderer,
+  projectListReactRenderer,
+  projectListMarkdownRenderer,
+  SaasSettingsPanel,
+  SaasProjectList,
+  SaasDashboard,
+  ProjectActionsModal,
+  CreateProjectModal
+};