@contractspec/example.saas-boilerplate 3.8.9 → 3.8.11

package/dist/browser/ui/SaasDashboard.js

@@ -1,1239 +1 @@
-// 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 { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-import { useCallback, useEffect, useMemo, useState } from "react";
-function useProjectList(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime();
-  const { saas } = 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([
-        saas.listProjects({
-          projectId,
-          status: options.status === "all" ? undefined : options.status,
-          search: options.search,
-          limit: options.limit ?? 20,
-          offset: (page - 1) * (options.limit ?? 20)
-        }),
-        saas.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);
-    }
-  }, [saas, 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 { 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;
-  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 saas.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;
-    }
-  }, [saas, projectId, options]);
-  const updateProject = useCallback2(async (input) => {
-    setUpdateState({ loading: true, error: null, data: null });
-    try {
-      const result = await saas.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;
-    }
-  }, [saas, options]);
-  const deleteProject = useCallback2(async (id) => {
-    setDeleteState({ loading: true, error: null, data: null });
-    try {
-      await saas.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;
-    }
-  }, [saas, 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 { Button, Input } from "@contractspec/lib.design-system";
-import { useState as useState3 } from "react";
-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: "absolute inset-0 bg-background/80 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: "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 font-semibold text-xl",
-            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: "mb-1 block font-medium text-muted-foreground text-sm",
-                    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: "mb-1 block font-medium text-muted-foreground text-sm",
-                    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: "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),
-              /* @__PURE__ */ jsxDEV("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV("label", {
-                    htmlFor: "project-tier",
-                    className: "mb-1 block font-medium text-muted-foreground text-sm",
-                    children: "Tier"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("select", {
-                    id: "project-tier",
-                    value: tier,
-                    onChange: (e) => setTier(e.target.value),
-                    disabled: isLoading,
-                    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
-                    }, t.value, false, undefined, this))
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              error && /* @__PURE__ */ jsxDEV("div", {
-                className: "rounded-md bg-destructive/10 p-3 text-destructive 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 { 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({
-  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: "absolute inset-0 bg-background/80 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: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
-        children: [
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "mb-4 border-border border-b pb-4",
-            children: [
-              /* @__PURE__ */ jsxDEV2("h2", {
-                className: "font-semibold text-xl",
-                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: "mb-1 block font-medium text-muted-foreground text-sm",
-                    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: "mb-1 block font-medium text-muted-foreground text-sm",
-                    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: "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: "rounded-md bg-destructive/10 p-3 text-destructive 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: "font-medium text-foreground",
-                    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: "rounded-md bg-destructive/10 p-3 text-destructive 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: "font-medium text-foreground",
-                    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: "rounded-md bg-destructive/10 p-3 text-destructive 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.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 {
-  Button as Button3,
-  EmptyState,
-  EntityCard,
-  ErrorState,
-  LoaderBlock,
-  StatCard,
-  StatCardGroup,
-  StatusChip
-} from "@contractspec/lib.design-system";
-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) {
-    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__ */ jsxDEV4(LoaderBlock, {
-      label: "Loading dashboard..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV4(ErrorState, {
-      title: "Failed to load dashboard",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV4("h2", {
-            className: "font-bold text-2xl",
-            children: "SaaS Dashboard"
-          }, undefined, false, undefined, this),
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV4(Button3, {
-            onPress: () => setIsCreateModalOpen(true),
-            children: [
-              /* @__PURE__ */ jsxDEV4("span", {
-                className: "mr-2",
-                children: "+"
-              }, undefined, false, undefined, this),
-              " New Project"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      stats && subscription && /* @__PURE__ */ jsxDEV4(StatCardGroup, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Projects",
-            value: stats.total.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Active",
-            value: stats.activeCount.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Draft",
-            value: stats.draftCount.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Plan",
-            value: subscription.plan,
-            hint: subscription.status
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      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__ */ 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 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-          children: [
-            /* @__PURE__ */ jsxDEV4("span", {
-              children: tab.icon
-            }, undefined, false, undefined, this),
-            tab.label
-          ]
-        }, tab.id, true, undefined, this))
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "min-h-[400px]",
-        role: "tabpanel",
-        children: [
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV4(ProjectsTab, {
-            data,
-            onProjectClick: handleProjectClick
-          }, undefined, false, undefined, this),
-          activeTab === "billing" && /* @__PURE__ */ jsxDEV4(BillingTab, {
-            subscription
-          }, undefined, false, undefined, this),
-          activeTab === "settings" && /* @__PURE__ */ jsxDEV4(SettingsTab, {}, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4(CreateProjectModal, {
-        isOpen: isCreateModalOpen,
-        onClose: () => setIsCreateModalOpen(false),
-        onSubmit: async (input) => {
-          await mutations.createProject(input);
-        },
-        isLoading: mutations.createState.loading
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(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__ */ jsxDEV4(EmptyState, {
-      title: "No projects yet",
-      description: "Create your first project to get started."
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-4",
-    children: /* @__PURE__ */ jsxDEV4("div", {
-      className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-      children: data.items.map((project) => /* @__PURE__ */ jsxDEV4(EntityCard, {
-        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(StatusChip, {
-          tone: getStatusTone(project.status),
-          label: project.status
-        }, undefined, false, undefined, this),
-        footer: /* @__PURE__ */ jsxDEV4("div", {
-          className: "flex w-full items-center justify-between",
-          children: [
-            /* @__PURE__ */ jsxDEV4("span", {
-              className: "text-muted-foreground text-xs",
-              children: project.updatedAt.toLocaleDateString()
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV4(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__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "rounded-xl border border-border bg-card p-6",
-        children: [
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "flex items-start justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV4("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV4("h3", {
-                    className: "font-semibold text-lg",
-                    children: [
-                      subscription.plan,
-                      " Plan"
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: [
-                      "Current period:",
-                      " ",
-                      subscription.currentPeriodStart.toLocaleDateString(),
-                      " -",
-                      " ",
-                      subscription.currentPeriodEnd.toLocaleDateString()
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: [
-                      "Billing cycle: ",
-                      subscription.billingCycle
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV4(StatusChip, {
-                tone: "success",
-                label: subscription.status
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "mt-4 flex gap-3",
-            children: [
-              /* @__PURE__ */ jsxDEV4(Button3, {
-                variant: "outline",
-                onPress: () => alert("Upgrade clicked!"),
-                children: "Upgrade Plan"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4(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__ */ 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: "⚠️ 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__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: /* @__PURE__ */ jsxDEV4("div", {
-      className: "rounded-xl border border-border bg-card p-6",
-      children: [
-        /* @__PURE__ */ jsxDEV4("h3", {
-          className: "mb-4 font-semibold text-lg",
-          children: "Organization Settings"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV4("div", {
-          className: "space-y-4",
-          children: [
-            /* @__PURE__ */ jsxDEV4("div", {
-              children: [
-                /* @__PURE__ */ jsxDEV4("label", {
-                  htmlFor: "org-name",
-                  className: "font-medium text-sm",
-                  children: "Organization Name"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("input", {
-                  id: "org-name",
-                  type: "text",
-                  defaultValue: "Demo Organization",
-                  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__ */ jsxDEV4("div", {
-              children: [
-                /* @__PURE__ */ jsxDEV4("label", {
-                  htmlFor: "timezone",
-                  className: "font-medium text-sm",
-                  children: "Default Timezone"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("select", {
-                  id: "timezone",
-                  className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",
-                  children: [
-                    /* @__PURE__ */ jsxDEV4("option", {
-                      children: "UTC"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV4("option", {
-                      children: "America/New_York"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV4("option", {
-                      children: "Europe/London"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV4("option", {
-                      children: "Asia/Tokyo"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV4("div", {
-              className: "pt-2",
-              children: /* @__PURE__ */ jsxDEV4(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);
-}
-export {
-  SaasDashboard
-};
+import{defineVisualization as h,VisualizationRegistry as Q3}from"@contractspec/lib.contracts-spec/visualizations";var T={key:"saas.project.list",version:"1.0.0"},E={version:"1.0.0",domain:"saas",stability:"experimental",owners:["@example.saas-boilerplate"],tags:["saas","visualization","projects"]},C=h({meta:{...E,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:T,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."}}}),S=h({meta:{...E,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:T,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."}}}),l=h({meta:{...E,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:T,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."}}}),x=h({meta:{...E,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:T,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."}}}),u=[C,S,l,x],I3=new Q3([...u]),v3=u.map((G)=>({key:G.meta.key,version:G.meta.version}));function W3(G){return(G instanceof Date?G:new Date(G)).toISOString().slice(0,10)}function p(G,q=10){let Z=new Map,X=new Map,_=new Map;for(let $ of G){Z.set($.status,(Z.get($.status)??0)+1),X.set($.tier,(X.get($.tier)??0)+1);let F=W3($.createdAt);_.set(F,(_.get(F)??0)+1)}return[{key:"saas-capacity",spec:C,data:{data:[{totalProjects:G.length,projectLimit:q}]},title:"Project Capacity",description:"Current project count compared to the active limit.",height:220},{key:"saas-status",spec:S,data:{data:Array.from(Z.entries()).map(([$,F])=>({status:$,projects:F}))},title:"Project Status",description:"Status mix across the current project portfolio.",height:260},{key:"saas-tier",spec:l,data:{data:Array.from(X.entries()).map(([$,F])=>({tier:$,projects:F}))},title:"Tier Comparison",description:"How projects are distributed across tiers."},{key:"saas-activity",spec:x,data:{data:Array.from(_.entries()).sort(([$],[F])=>$.localeCompare(F)).map(([$,F])=>({day:$,projects:F}))},title:"Recent Project Activity",description:"Daily project creation activity."}]}import{useTemplateRuntime as X3}from"@contractspec/lib.example-shared-ui";import{useCallback as Y3,useEffect as Z3,useMemo as $3,useState as I}from"react";function c(G={}){let{handlers:q,projectId:Z}=X3(),{saas:X}=q,[_,$]=I(null),[F,w]=I(null),[O,U]=I(!0),[R,V]=I(null),[z,K]=I(1),N=Y3(async()=>{U(!0),V(null);try{let[Y,Q]=await Promise.all([X.listProjects({projectId:Z,status:G.status==="all"?void 0:G.status,search:G.search,limit:G.limit??20,offset:(z-1)*(G.limit??20)}),X.getSubscription({projectId:Z})]);$({items:Y.items,total:Y.total}),w(Q)}catch(Y){V(Y instanceof Error?Y:Error("Unknown error"))}finally{U(!1)}},[X,Z,G.status,G.search,G.limit,z]);Z3(()=>{N()},[N]);let J=$3(()=>{if(!_)return null;let Y=_.items;return{total:_.total,activeCount:Y.filter((Q)=>Q.status==="ACTIVE").length,draftCount:Y.filter((Q)=>Q.status==="DRAFT").length,projectLimit:10,usagePercent:Math.min(_.total/10*100,100)}},[_]);return{data:_,subscription:F,loading:O,error:R,stats:J,page:z,refetch:N,nextPage:()=>K((Y)=>Y+1),prevPage:()=>z>1&&K((Y)=>Y-1)}}import{useTemplateRuntime as K3}from"@contractspec/lib.example-shared-ui";import{useCallback as v,useState as d}from"react";function n(G={}){let{handlers:q,projectId:Z}=K3(),{saas:X}=q,[_,$]=d({loading:!1,error:null,data:null}),[F,w]=d({loading:!1,error:null,data:null}),[O,U]=d({loading:!1,error:null,data:null}),R=v(async(J)=>{$({loading:!0,error:null,data:null});try{let Y=await X.createProject(J,{projectId:Z,organizationId:"demo-org"});return $({loading:!1,error:null,data:Y}),G.onSuccess?.(),Y}catch(Y){let Q=Y instanceof Error?Y:Error("Failed to create project");return $({loading:!1,error:Q,data:null}),G.onError?.(Q),null}},[X,Z,G]),V=v(async(J)=>{w({loading:!0,error:null,data:null});try{let Y=await X.updateProject(J);return w({loading:!1,error:null,data:Y}),G.onSuccess?.(),Y}catch(Y){let Q=Y instanceof Error?Y:Error("Failed to update project");return w({loading:!1,error:Q,data:null}),G.onError?.(Q),null}},[X,G]),z=v(async(J)=>{U({loading:!0,error:null,data:null});try{return await X.deleteProject(J),U({loading:!1,error:null,data:{success:!0}}),G.onSuccess?.(),!0}catch(Y){let Q=Y instanceof Error?Y:Error("Failed to delete project");return U({loading:!1,error:Q,data:null}),G.onError?.(Q),!1}},[X,G]),K=v(async(J)=>{return V({id:J,status:"ARCHIVED"})},[V]),N=v(async(J)=>{return V({id:J,status:"ACTIVE"})},[V]);return{createProject:R,updateProject:V,deleteProject:z,archiveProject:K,activateProject:N,createState:_,updateState:F,deleteState:O,isLoading:_.loading||F.loading||O.loading}}import{Button as j,Input as H3}from"@contractspec/lib.design-system";import{useState as P}from"react";import{jsx as A,jsxs as D}from"react/jsx-runtime";var w3=[{value:"FREE",label:"Free"},{value:"PRO",label:"Pro"},{value:"ENTERPRISE",label:"Enterprise"}];function i({isOpen:G,onClose:q,onSubmit:Z,isLoading:X=!1}){let[_,$]=P(""),[F,w]=P(""),[O,U]=P("FREE"),[R,V]=P(null),z=async(K)=>{if(K.preventDefault(),V(null),!_.trim()){V("Project name is required");return}try{await Z({name:_.trim(),description:F.trim()||void 0,tier:O}),$(""),w(""),U("FREE"),q()}catch(N){V(N instanceof Error?N.message:"Failed to create project")}};if(!G)return null;return D("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[A("div",{className:"absolute inset-0 bg-background/80 backdrop-blur-sm",onClick:q,role:"button",tabIndex:0,onKeyDown:(K)=>{if(K.key==="Enter"||K.key===" ")q()},"aria-label":"Close modal"}),D("div",{className:"relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",children:[A("h2",{className:"mb-4 font-semibold text-xl",children:"Create New Project"}),D("form",{onSubmit:z,className:"space-y-4",children:[D("div",{children:[A("label",{htmlFor:"project-name",className:"mb-1 block font-medium text-muted-foreground text-sm",children:"Project Name *"}),A(H3,{id:"project-name",value:_,onChange:(K)=>$(K.target.value),placeholder:"e.g., My Awesome Project",disabled:X})]}),D("div",{children:[A("label",{htmlFor:"project-description",className:"mb-1 block font-medium text-muted-foreground text-sm",children:"Description"}),A("textarea",{id:"project-description",value:F,onChange:(K)=>w(K.target.value),placeholder:"Describe what this project is about...",rows:3,disabled:X,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"})]}),D("div",{children:[A("label",{htmlFor:"project-tier",className:"mb-1 block font-medium text-muted-foreground text-sm",children:"Tier"}),A("select",{id:"project-tier",value:O,onChange:(K)=>U(K.target.value),disabled:X,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:w3.map((K)=>A("option",{value:K.value,children:K.label},K.value))})]}),R&&A("div",{className:"rounded-md bg-destructive/10 p-3 text-destructive text-sm",children:R}),D("div",{className:"flex justify-end gap-3 pt-2",children:[A(j,{type:"button",variant:"ghost",onPress:q,disabled:X,children:"Cancel"}),A(j,{type:"submit",disabled:X,children:X?"Creating...":"Create Project"})]})]})]})]})}import{Button as B,Input as J3}from"@contractspec/lib.design-system";import{useEffect as N3,useState as m}from"react";import{jsx as H,jsxs as k}from"react/jsx-runtime";function r({isOpen:G,project:q,onClose:Z,onUpdate:X,onArchive:_,onActivate:$,onDelete:F,isLoading:w=!1}){let[O,U]=m("menu"),[R,V]=m(""),[z,K]=m(""),[N,J]=m(null),Y=()=>{if(U("menu"),J(null),q)V(q.name),K(q.description??"")},Q=()=>{Y(),Z()};N3(()=>{if(q)V(q.name),K(q.description??"")},[q]);let e=async()=>{if(!q)return;if(J(null),!R.trim()){J("Project name is required");return}try{await X({id:q.id,name:R.trim(),description:z.trim()||void 0}),Q()}catch(y){J(y instanceof Error?y.message:"Failed to update project")}},t=async()=>{if(!q)return;J(null);try{await _(q.id),Q()}catch(y){J(y instanceof Error?y.message:"Failed to archive project")}},G3=async()=>{if(!q)return;J(null);try{await $(q.id),Q()}catch(y){J(y instanceof Error?y.message:"Failed to activate project")}},q3=async()=>{if(!q)return;J(null);try{await F(q.id),Q()}catch(y){J(y instanceof Error?y.message:"Failed to delete project")}};if(!G||!q)return null;return k("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[H("div",{className:"absolute inset-0 bg-background/80 backdrop-blur-sm",onClick:Q,role:"button",tabIndex:0,onKeyDown:(y)=>{if(y.key==="Enter"||y.key===" ")Q()},"aria-label":"Close modal"}),k("div",{className:"relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",children:[k("div",{className:"mb-4 border-border border-b pb-4",children:[H("h2",{className:"font-semibold text-xl",children:q.name}),k("p",{className:"text-muted-foreground text-sm",children:[q.tier," · ",q.status]})]}),O==="menu"&&k("div",{className:"space-y-3",children:[k(B,{className:"w-full justify-start",variant:"ghost",onPress:()=>U("edit"),children:[H("span",{className:"mr-2",children:"✏️"})," Edit Project"]}),q.status==="ACTIVE"||q.status==="DRAFT"?k(B,{className:"w-full justify-start",variant:"ghost",onPress:()=>U("archive"),children:[H("span",{className:"mr-2",children:"\uD83D\uDCE6"})," Archive Project"]}):q.status==="ARCHIVED"?k(B,{className:"w-full justify-start",variant:"ghost",onPress:G3,disabled:w,children:[H("span",{className:"mr-2",children:"\uD83D\uDD04"})," Restore Project"]}):null,k(B,{className:"w-full justify-start text-red-500 hover:text-red-600",variant:"ghost",onPress:()=>U("delete"),children:[H("span",{className:"mr-2",children:"\uD83D\uDDD1️"})," Delete Project"]}),H("div",{className:"border-border border-t pt-3",children:H(B,{className:"w-full",variant:"outline",onPress:Q,children:"Close"})})]}),O==="edit"&&k("div",{className:"space-y-4",children:[k("div",{children:[H("label",{htmlFor:"edit-name",className:"mb-1 block font-medium text-muted-foreground text-sm",children:"Project Name *"}),H(J3,{id:"edit-name",value:R,onChange:(y)=>V(y.target.value),disabled:w})]}),k("div",{children:[H("label",{htmlFor:"edit-description",className:"mb-1 block font-medium text-muted-foreground text-sm",children:"Description"}),H("textarea",{id:"edit-description",value:z,onChange:(y)=>K(y.target.value),rows:3,disabled:w,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"})]}),N&&H("div",{className:"rounded-md bg-destructive/10 p-3 text-destructive text-sm",children:N}),k("div",{className:"flex justify-end gap-3 pt-2",children:[H(B,{variant:"ghost",onPress:()=>U("menu"),disabled:w,children:"Back"}),H(B,{onPress:e,disabled:w,children:w?"Saving...":"Save Changes"})]})]}),O==="archive"&&k("div",{className:"space-y-4",children:[k("p",{className:"text-muted-foreground",children:["Are you sure you want to archive"," ",H("span",{className:"font-medium text-foreground",children:q.name}),"?"]}),H("p",{className:"text-muted-foreground text-sm",children:"Archived projects can be restored later."}),N&&H("div",{className:"rounded-md bg-destructive/10 p-3 text-destructive text-sm",children:N}),k("div",{className:"flex justify-end gap-3 pt-2",children:[H(B,{variant:"ghost",onPress:()=>U("menu"),disabled:w,children:"Cancel"}),H(B,{onPress:t,disabled:w,children:w?"Archiving...":"\uD83D\uDCE6 Archive"})]})]}),O==="delete"&&k("div",{className:"space-y-4",children:[k("p",{className:"text-muted-foreground",children:["Are you sure you want to delete"," ",H("span",{className:"font-medium text-foreground",children:q.name}),"?"]}),H("p",{className:"text-destructive text-sm",children:"This action cannot be undone."}),N&&H("div",{className:"rounded-md bg-destructive/10 p-3 text-destructive text-sm",children:N}),k("div",{className:"flex justify-end gap-3 pt-2",children:[H(B,{variant:"ghost",onPress:()=>U("menu"),disabled:w,children:"Cancel"}),H(B,{variant:"destructive",onPress:q3,disabled:w,children:w?"Deleting...":"\uD83D\uDDD1️ Delete"})]})]})]})]})}import{VisualizationCard as F3,VisualizationGrid as U3}from"@contractspec/lib.design-system";import{jsx as L,jsxs as a}from"react/jsx-runtime";function o({projects:G,projectLimit:q}){let Z=p(G,q);return a("section",{className:"space-y-3",children:[a("div",{children:[L("h3",{className:"font-semibold text-lg",children:"Portfolio Visualizations"}),L("p",{className:"text-muted-foreground text-sm",children:"Contract-backed charts for project mix, capacity, and activity."})]}),L(U3,{children:Z.map((X)=>L(F3,{data:X.data,description:X.description,height:X.height,spec:X.spec,title:X.title},X.key))})]})}import{Button as M,EmptyState as _3,EntityCard as f3,ErrorState as V3,LoaderBlock as k3,StatCard as g,StatCardGroup as z3,StatusChip as s}from"@contractspec/lib.design-system";import{useCallback as y3,useState as b}from"react";import{jsx as W,jsxs as f}from"react/jsx-runtime";function O3(G){switch(G){case"ACTIVE":return"success";case"DRAFT":return"neutral";case"ARCHIVED":return"warning";default:return"neutral"}}function YG(){let[G,q]=b("projects"),[Z,X]=b(!1),[_,$]=b(null),[F,w]=b(!1),{data:O,subscription:U,loading:R,error:V,stats:z,refetch:K}=c(),N=n({onSuccess:()=>{K()}}),J=y3((Q)=>{$(Q),w(!0)},[]),Y=[{id:"projects",label:"Projects",icon:"\uD83D\uDCC1"},{id:"billing",label:"Billing",icon:"\uD83D\uDCB3"},{id:"settings",label:"Settings",icon:"⚙️"}];if(R&&!O)return W(k3,{label:"Loading dashboard..."});if(V)return W(V3,{title:"Failed to load dashboard",description:V.message,onRetry:K,retryLabel:"Retry"});return f("div",{className:"space-y-6",children:[f("div",{className:"flex items-center justify-between",children:[W("h2",{className:"font-bold text-2xl",children:"SaaS Dashboard"}),G==="projects"&&f(M,{onPress:()=>X(!0),children:[W("span",{className:"mr-2",children:"+"})," New Project"]})]}),z&&U&&f(z3,{children:[W(g,{label:"Projects",value:z.total.toString()}),W(g,{label:"Active",value:z.activeCount.toString()}),W(g,{label:"Draft",value:z.draftCount.toString()}),W(g,{label:"Plan",value:U.plan,hint:U.status})]}),O&&z&&W(o,{projectLimit:z.projectLimit,projects:O.items}),W("nav",{className:"flex gap-1 rounded-lg bg-muted p-1",role:"tablist",children:Y.map((Q)=>f("button",{type:"button",role:"tab","aria-selected":G===Q.id,onClick:()=>q(Q.id),className:`flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${G===Q.id?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:[W("span",{children:Q.icon}),Q.label]},Q.id))}),f("div",{className:"min-h-[400px]",role:"tabpanel",children:[G==="projects"&&W(R3,{data:O,onProjectClick:J}),G==="billing"&&W(A3,{subscription:U}),G==="settings"&&W(B3,{})]}),W(i,{isOpen:Z,onClose:()=>X(!1),onSubmit:async(Q)=>{await N.createProject(Q)},isLoading:N.createState.loading}),W(r,{isOpen:F,project:_,onClose:()=>{w(!1),$(null)},onUpdate:async(Q)=>{await N.updateProject(Q)},onArchive:async(Q)=>{await N.archiveProject(Q)},onActivate:async(Q)=>{await N.activateProject(Q)},onDelete:async(Q)=>{await N.deleteProject(Q)},isLoading:N.isLoading})]})}function R3({data:G,onProjectClick:q}){if(!G?.items.length)return W(_3,{title:"No projects yet",description:"Create your first project to get started."});return W("div",{className:"space-y-4",children:W("div",{className:"grid gap-4 md:grid-cols-2 lg:grid-cols-3",children:G.items.map((Z)=>W(f3,{cardTitle:Z.name,cardSubtitle:Z.tier,meta:W("p",{className:"text-muted-foreground text-sm",children:Z.description}),chips:W(s,{tone:O3(Z.status),label:Z.status}),footer:f("div",{className:"flex w-full items-center justify-between",children:[W("span",{className:"text-muted-foreground text-xs",children:Z.updatedAt.toLocaleDateString()}),W(M,{variant:"ghost",size:"sm",onPress:()=>q?.(Z),children:"Actions"})]})},Z.id))})})}function A3({subscription:G}){if(!G)return null;return f("div",{className:"space-y-6",children:[f("div",{className:"rounded-xl border border-border bg-card p-6",children:[f("div",{className:"flex items-start justify-between",children:[f("div",{children:[f("h3",{className:"font-semibold text-lg",children:[G.plan," Plan"]}),f("p",{className:"text-muted-foreground text-sm",children:["Current period:"," ",G.currentPeriodStart.toLocaleDateString()," -"," ",G.currentPeriodEnd.toLocaleDateString()]}),f("p",{className:"text-muted-foreground text-sm",children:["Billing cycle: ",G.billingCycle]})]}),W(s,{tone:"success",label:G.status})]}),f("div",{className:"mt-4 flex gap-3",children:[W(M,{variant:"outline",onPress:()=>alert("Upgrade clicked!"),children:"Upgrade Plan"}),W(M,{variant:"ghost",onPress:()=>alert("Manage Billing clicked!"),children:"Manage Billing"})]})]}),G.cancelAtPeriodEnd&&W("div",{className:"rounded-xl border border-border bg-destructive/10 p-4 text-destructive",children:W("p",{className:"font-medium text-sm",children:"⚠️ Your subscription will be cancelled at the end of the current period."})})]})}function B3(){return W("div",{className:"space-y-6",children:f("div",{className:"rounded-xl border border-border bg-card p-6",children:[W("h3",{className:"mb-4 font-semibold text-lg",children:"Organization Settings"}),f("div",{className:"space-y-4",children:[f("div",{children:[W("label",{htmlFor:"org-name",className:"font-medium text-sm",children:"Organization Name"}),W("input",{id:"org-name",type:"text",defaultValue:"Demo Organization",className:"mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"})]}),f("div",{children:[W("label",{htmlFor:"timezone",className:"font-medium text-sm",children:"Default Timezone"}),f("select",{id:"timezone",className:"mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",children:[W("option",{children:"UTC"}),W("option",{children:"America/New_York"}),W("option",{children:"Europe/London"}),W("option",{children:"Asia/Tokyo"})]})]}),W("div",{className:"pt-2",children:W(M,{onPress:()=>alert("Settings saved!"),children:"Save Settings"})})]})]})})}export{YG as SaasDashboard};