@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/dist/ui/SaasDashboard.js

@@ -1,7 +1,214 @@
 // @bun
+// 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 } = handlers;
@@ -64,8 +271,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 } = handlers;
@@ -153,8 +360,8 @@ function useProjectMutations(options = {}) {
 }
 
 // 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 = [
@@ -199,7 +406,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,
@@ -210,10 +417,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", {
@@ -224,7 +431,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, {
@@ -240,7 +447,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", {
@@ -250,7 +457,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),
@@ -258,7 +465,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", {
@@ -266,7 +473,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
@@ -275,7 +482,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", {
@@ -304,8 +511,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({
@@ -398,7 +605,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,
@@ -409,13 +616,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", {
@@ -497,7 +704,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, {
@@ -512,7 +719,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", {
@@ -521,12 +728,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", {
@@ -556,7 +763,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),
                   "?"
@@ -567,7 +774,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", {
@@ -597,7 +804,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),
                   "?"
@@ -608,7 +815,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", {
@@ -636,19 +843,59 @@ function ProjectActionsModal({
   }, undefined, true, undefined, this);
 }
 
+// src/ui/SaasDashboard.visualizations.tsx
+import {
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function SaasVisualizationOverview({
+  projects,
+  projectLimit
+}) {
+  const items = createSaasVisualizationItems(projects, projectLimit);
+  return /* @__PURE__ */ jsxDEV3("section", {
+    className: "space-y-3",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV3("h3", {
+            className: "font-semibold text-lg",
+            children: "Portfolio Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3(VisualizationGrid, {
+        children: items.map((item) => /* @__PURE__ */ jsxDEV3(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 { useState as useState5, useCallback as useCallback3 } from "react";
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
+  Button as Button3,
   EmptyState,
-  LoaderBlock,
+  EntityCard,
   ErrorState,
-  Button as Button3
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { useCallback as useCallback3, useState as useState5 } from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 "use client";
 function getStatusTone(status) {
   switch (status) {
@@ -683,32 +930,32 @@ function SaasDashboard() {
     { id: "settings", label: "Settings", icon: "\u2699\uFE0F" }
   ];
   if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV3(LoaderBlock, {
+    return /* @__PURE__ */ jsxDEV4(LoaderBlock, {
       label: "Loading dashboard..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV3(ErrorState, {
+    return /* @__PURE__ */ jsxDEV4(ErrorState, {
       title: "Failed to load dashboard",
       description: error.message,
       onRetry: refetch,
       retryLabel: "Retry"
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV4("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV3("h2", {
-            className: "text-2xl font-bold",
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "font-bold text-2xl",
             children: "SaaS Dashboard"
           }, undefined, false, undefined, this),
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(Button3, {
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV4(Button3, {
             onPress: () => setIsCreateModalOpen(true),
             children: [
-              /* @__PURE__ */ jsxDEV3("span", {
+              /* @__PURE__ */ jsxDEV4("span", {
                 className: "mr-2",
                 children: "+"
               }, undefined, false, undefined, this),
@@ -717,59 +964,63 @@ function SaasDashboard() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      stats && subscription && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
+      stats && subscription && /* @__PURE__ */ jsxDEV4(StatCardGroup, {
         children: [
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Projects",
             value: stats.total.toString()
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Active",
             value: stats.activeCount.toString()
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Draft",
             value: stats.draftCount.toString()
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          /* @__PURE__ */ jsxDEV4(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",
+      data && stats && /* @__PURE__ */ jsxDEV4(SaasVisualizationOverview, {
+        projectLimit: stats.projectLimit,
+        projects: data.items
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4("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__ */ jsxDEV4("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV4("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(ProjectsTab, {
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV4(ProjectsTab, {
             data,
             onProjectClick: handleProjectClick
           }, undefined, false, undefined, this),
-          activeTab === "billing" && /* @__PURE__ */ jsxDEV3(BillingTab, {
+          activeTab === "billing" && /* @__PURE__ */ jsxDEV4(BillingTab, {
             subscription
           }, undefined, false, undefined, this),
-          activeTab === "settings" && /* @__PURE__ */ jsxDEV3(SettingsTab, {}, undefined, false, undefined, this)
+          activeTab === "settings" && /* @__PURE__ */ jsxDEV4(SettingsTab, {}, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3(CreateProjectModal, {
+      /* @__PURE__ */ jsxDEV4(CreateProjectModal, {
         isOpen: isCreateModalOpen,
         onClose: () => setIsCreateModalOpen(false),
         onSubmit: async (input) => {
@@ -777,7 +1028,7 @@ function SaasDashboard() {
         },
         isLoading: mutations.createState.loading
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3(ProjectActionsModal, {
+      /* @__PURE__ */ jsxDEV4(ProjectActionsModal, {
         isOpen: isProjectActionsOpen,
         project: selectedProject,
         onClose: () => {
@@ -803,34 +1054,34 @@ function SaasDashboard() {
 }
 function ProjectsTab({ data, onProjectClick }) {
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+    return /* @__PURE__ */ jsxDEV4(EmptyState, {
       title: "No projects yet",
       description: "Create your first project to get started."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     className: "space-y-4",
-    children: /* @__PURE__ */ jsxDEV3("div", {
+    children: /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4(EntityCard, {
         cardTitle: project.name,
         cardSubtitle: project.tier,
-        meta: /* @__PURE__ */ jsxDEV3("p", {
+        meta: /* @__PURE__ */ jsxDEV4("p", {
           className: "text-muted-foreground text-sm",
           children: project.description
         }, undefined, false, undefined, this),
-        chips: /* @__PURE__ */ jsxDEV3(StatusChip, {
+        chips: /* @__PURE__ */ jsxDEV4(StatusChip, {
           tone: getStatusTone(project.status),
           label: project.status
         }, undefined, false, undefined, this),
-        footer: /* @__PURE__ */ jsxDEV3("div", {
+        footer: /* @__PURE__ */ jsxDEV4("div", {
           className: "flex w-full items-center justify-between",
           children: [
-            /* @__PURE__ */ jsxDEV3("span", {
+            /* @__PURE__ */ jsxDEV4("span", {
               className: "text-muted-foreground text-xs",
               children: project.updatedAt.toLocaleDateString()
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3(Button3, {
+            /* @__PURE__ */ jsxDEV4(Button3, {
               variant: "ghost",
               size: "sm",
               onPress: () => onProjectClick?.(project),
@@ -845,25 +1096,25 @@ function ProjectsTab({ data, onProjectClick }) {
 function BillingTab({ subscription }) {
   if (!subscription)
     return null;
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV3("div", {
+          /* @__PURE__ */ jsxDEV4("div", {
             className: "flex items-start justify-between",
             children: [
-              /* @__PURE__ */ jsxDEV3("div", {
+              /* @__PURE__ */ jsxDEV4("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV3("h3", {
-                    className: "text-lg font-semibold",
+                  /* @__PURE__ */ jsxDEV4("h3", {
+                    className: "font-semibold text-lg",
                     children: [
                       subscription.plan,
                       " Plan"
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV3("p", {
+                  /* @__PURE__ */ jsxDEV4("p", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       "Current period:",
@@ -874,7 +1125,7 @@ function BillingTab({ subscription }) {
                       subscription.currentPeriodEnd.toLocaleDateString()
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV3("p", {
+                  /* @__PURE__ */ jsxDEV4("p", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       "Billing cycle: ",
@@ -883,21 +1134,21 @@ function BillingTab({ subscription }) {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV3(StatusChip, {
+              /* @__PURE__ */ jsxDEV4(StatusChip, {
                 tone: "success",
                 label: subscription.status
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
+          /* @__PURE__ */ jsxDEV4("div", {
             className: "mt-4 flex gap-3",
             children: [
-              /* @__PURE__ */ jsxDEV3(Button3, {
+              /* @__PURE__ */ jsxDEV4(Button3, {
                 variant: "outline",
                 onPress: () => alert("Upgrade clicked!"),
                 children: "Upgrade Plan"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3(Button3, {
+              /* @__PURE__ */ jsxDEV4(Button3, {
                 variant: "ghost",
                 onPress: () => alert("Manage Billing clicked!"),
                 children: "Manage Billing"
@@ -906,10 +1157,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__ */ jsxDEV4("div", {
+        className: "rounded-xl border border-border bg-destructive/10 p-4 text-destructive",
+        children: /* @__PURE__ */ jsxDEV4("p", {
+          className: "font-medium text-sm",
           children: "\u26A0\uFE0F Your subscription will be cancelled at the end of the current period."
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -917,63 +1168,63 @@ function BillingTab({ subscription }) {
   }, undefined, true, undefined, this);
 }
 function SettingsTab() {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     className: "space-y-6",
-    children: /* @__PURE__ */ jsxDEV3("div", {
-      className: "border-border bg-card rounded-xl border p-6",
+    children: /* @__PURE__ */ jsxDEV4("div", {
+      className: "rounded-xl border border-border bg-card p-6",
       children: [
-        /* @__PURE__ */ jsxDEV3("h3", {
-          className: "mb-4 text-lg font-semibold",
+        /* @__PURE__ */ jsxDEV4("h3", {
+          className: "mb-4 font-semibold text-lg",
           children: "Organization Settings"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV3("div", {
+        /* @__PURE__ */ jsxDEV4("div", {
           className: "space-y-4",
           children: [
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV4("div", {
               children: [
-                /* @__PURE__ */ jsxDEV3("label", {
+                /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4("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__ */ jsxDEV4("div", {
               children: [
-                /* @__PURE__ */ jsxDEV3("label", {
+                /* @__PURE__ */ jsxDEV4("label", {
                   htmlFor: "timezone",
-                  className: "text-sm font-medium",
+                  className: "font-medium text-sm",
                   children: "Default Timezone"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("select", {
+                /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4("option", {
                       children: "UTC"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV4("option", {
                       children: "America/New_York"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV4("option", {
                       children: "Europe/London"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
+                    /* @__PURE__ */ jsxDEV4("option", {
                       children: "Asia/Tokyo"
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV4("div", {
               className: "pt-2",
-              children: /* @__PURE__ */ jsxDEV3(Button3, {
+              children: /* @__PURE__ */ jsxDEV4(Button3, {
                 onPress: () => alert("Settings saved!"),
                 children: "Save Settings"
               }, undefined, false, undefined, this)