@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/dist/browser/index.js

@@ -123,8 +123,8 @@ var FeatureAccessReasonEnum = defineEnum("FeatureAccessReason", [
 ]);
 
 // src/billing/billing.event.ts
-import { ScalarTypeEnum, defineSchemaModel } from "@contractspec/lib.schema";
 import { defineEvent } from "@contractspec/lib.contracts-spec";
+import { defineSchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";
 var UsageRecordedPayload = defineSchemaModel({
   name: "UsageRecordedPayload",
   description: "Payload when feature usage is recorded",
@@ -1043,6 +1043,79 @@ function createSaasHandlers(db) {
     getSubscription
   };
 }
+// src/project/project.entity.ts
+import {
+  defineEntity as defineEntity2,
+  defineEntityEnum as defineEntityEnum2,
+  field as field2,
+  index as index2
+} from "@contractspec/lib.schema";
+var ProjectStatusEnum = defineEntityEnum2({
+  name: "ProjectStatus",
+  values: ["DRAFT", "ACTIVE", "ARCHIVED", "DELETED"],
+  schema: "saas_app",
+  description: "Status of a project."
+});
+var ProjectEntity = defineEntity2({
+  name: "Project",
+  description: "A project belonging to an organization.",
+  schema: "saas_app",
+  map: "project",
+  fields: {
+    id: field2.id({ description: "Unique project ID" }),
+    name: field2.string({ description: "Project name" }),
+    description: field2.string({
+      isOptional: true,
+      description: "Project description"
+    }),
+    slug: field2.string({
+      isOptional: true,
+      description: "URL-friendly identifier"
+    }),
+    organizationId: field2.foreignKey({ description: "Owning organization" }),
+    createdBy: field2.foreignKey({
+      description: "User who created the project"
+    }),
+    status: field2.enum("ProjectStatus", { default: "DRAFT" }),
+    isPublic: field2.boolean({
+      default: false,
+      description: "Whether project is publicly visible"
+    }),
+    settings: field2.json({
+      isOptional: true,
+      description: "Project-specific settings"
+    }),
+    tags: field2.string({ isArray: true, description: "Project tags" }),
+    metadata: field2.json({ isOptional: true }),
+    createdAt: field2.createdAt(),
+    updatedAt: field2.updatedAt(),
+    archivedAt: field2.dateTime({ isOptional: true })
+  },
+  indexes: [
+    index2.on(["organizationId", "status"]),
+    index2.on(["organizationId", "createdAt"]),
+    index2.unique(["organizationId", "slug"])
+  ],
+  enums: [ProjectStatusEnum]
+});
+var ProjectMemberEntity = defineEntity2({
+  name: "ProjectMember",
+  description: "User access to a specific project.",
+  schema: "saas_app",
+  map: "project_member",
+  fields: {
+    id: field2.id(),
+    projectId: field2.foreignKey(),
+    userId: field2.foreignKey(),
+    role: field2.string({
+      description: "Role in project (owner, editor, viewer)"
+    }),
+    addedBy: field2.string({ isOptional: true }),
+    createdAt: field2.createdAt()
+  },
+  indexes: [index2.unique(["projectId", "userId"])]
+});
+
 // src/project/project.enum.ts
 import { defineEnum as defineEnum2 } from "@contractspec/lib.schema";
 var ProjectStatusSchemaEnum = defineEnum2("ProjectStatus", [
@@ -1058,112 +1131,210 @@ var ProjectStatusFilterEnum = defineEnum2("ProjectStatusFilter", [
   "all"
 ]);
 
-// src/project/project.schema.ts
+// src/project/project.event.ts
+import { defineEvent as defineEvent2 } from "@contractspec/lib.contracts-spec";
 import { defineSchemaModel as defineSchemaModel3, ScalarTypeEnum as ScalarTypeEnum3 } from "@contractspec/lib.schema";
-var ProjectModel = defineSchemaModel3({
-  name: "Project",
-  description: "A project within an organization",
+var ProjectCreatedPayload = defineSchemaModel3({
+  name: "ProjectCreatedPayload",
+  description: "Payload when a project is created",
   fields: {
-    id: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
+    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
     name: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
-    description: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
-    slug: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
     organizationId: {
       type: ScalarTypeEnum3.String_unsecure(),
       isOptional: false
     },
     createdBy: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
-    status: { type: ProjectStatusSchemaEnum, isOptional: false },
-    isPublic: { type: ScalarTypeEnum3.Boolean(), isOptional: false },
-    tags: {
+    createdAt: { type: ScalarTypeEnum3.DateTime(), isOptional: false }
+  }
+});
+var ProjectUpdatedPayload = defineSchemaModel3({
+  name: "ProjectUpdatedPayload",
+  description: "Payload when a project is updated",
+  fields: {
+    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
+    updatedFields: {
       type: ScalarTypeEnum3.String_unsecure(),
       isArray: true,
       isOptional: false
     },
-    createdAt: { type: ScalarTypeEnum3.DateTime(), isOptional: false },
+    updatedBy: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
     updatedAt: { type: ScalarTypeEnum3.DateTime(), isOptional: false }
   }
 });
-var CreateProjectInputModel = defineSchemaModel3({
+var ProjectDeletedPayload = defineSchemaModel3({
+  name: "ProjectDeletedPayload",
+  description: "Payload when a project is deleted",
+  fields: {
+    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
+    organizationId: {
+      type: ScalarTypeEnum3.String_unsecure(),
+      isOptional: false
+    },
+    deletedBy: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
+    deletedAt: { type: ScalarTypeEnum3.DateTime(), isOptional: false }
+  }
+});
+var ProjectArchivedPayload = defineSchemaModel3({
+  name: "ProjectArchivedPayload",
+  description: "Payload when a project is archived",
+  fields: {
+    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
+    archivedBy: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
+    archivedAt: { type: ScalarTypeEnum3.DateTime(), isOptional: false }
+  }
+});
+var ProjectCreatedEvent = defineEvent2({
+  meta: {
+    key: "project.created",
+    version: "1.0.0",
+    description: "A new project has been created.",
+    stability: "stable",
+    owners: ["@saas-team"],
+    tags: ["project", "created"]
+  },
+  payload: ProjectCreatedPayload
+});
+var ProjectUpdatedEvent = defineEvent2({
+  meta: {
+    key: "project.updated",
+    version: "1.0.0",
+    description: "A project has been updated.",
+    stability: "stable",
+    owners: ["@saas-team"],
+    tags: ["project", "updated"]
+  },
+  payload: ProjectUpdatedPayload
+});
+var ProjectDeletedEvent = defineEvent2({
+  meta: {
+    key: "project.deleted",
+    version: "1.0.0",
+    description: "A project has been deleted.",
+    stability: "stable",
+    owners: ["@saas-team"],
+    tags: ["project", "deleted"]
+  },
+  payload: ProjectDeletedPayload
+});
+var ProjectArchivedEvent = defineEvent2({
+  meta: {
+    key: "project.archived",
+    version: "1.0.0",
+    description: "A project has been archived.",
+    stability: "stable",
+    owners: ["@saas-team"],
+    tags: ["project", "archived"]
+  },
+  payload: ProjectArchivedPayload
+});
+
+// src/project/project.schema.ts
+import { defineSchemaModel as defineSchemaModel4, ScalarTypeEnum as ScalarTypeEnum4 } from "@contractspec/lib.schema";
+var ProjectModel = defineSchemaModel4({
+  name: "Project",
+  description: "A project within an organization",
+  fields: {
+    id: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
+    name: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
+    description: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    slug: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    organizationId: {
+      type: ScalarTypeEnum4.String_unsecure(),
+      isOptional: false
+    },
+    createdBy: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
+    status: { type: ProjectStatusSchemaEnum, isOptional: false },
+    isPublic: { type: ScalarTypeEnum4.Boolean(), isOptional: false },
+    tags: {
+      type: ScalarTypeEnum4.String_unsecure(),
+      isArray: true,
+      isOptional: false
+    },
+    createdAt: { type: ScalarTypeEnum4.DateTime(), isOptional: false },
+    updatedAt: { type: ScalarTypeEnum4.DateTime(), isOptional: false }
+  }
+});
+var CreateProjectInputModel = defineSchemaModel4({
   name: "CreateProjectInput",
   description: "Input for creating a project",
   fields: {
-    name: { type: ScalarTypeEnum3.NonEmptyString(), isOptional: false },
-    description: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
-    slug: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
-    isPublic: { type: ScalarTypeEnum3.Boolean(), isOptional: true },
+    name: { type: ScalarTypeEnum4.NonEmptyString(), isOptional: false },
+    description: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    slug: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    isPublic: { type: ScalarTypeEnum4.Boolean(), isOptional: true },
     tags: {
-      type: ScalarTypeEnum3.String_unsecure(),
+      type: ScalarTypeEnum4.String_unsecure(),
       isArray: true,
       isOptional: true
     }
   }
 });
-var UpdateProjectInputModel = defineSchemaModel3({
+var UpdateProjectInputModel = defineSchemaModel4({
   name: "UpdateProjectInput",
   description: "Input for updating a project",
   fields: {
-    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false },
-    name: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
-    description: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
-    slug: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
-    isPublic: { type: ScalarTypeEnum3.Boolean(), isOptional: true },
+    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
+    name: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    description: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    slug: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
+    isPublic: { type: ScalarTypeEnum4.Boolean(), isOptional: true },
     tags: {
-      type: ScalarTypeEnum3.String_unsecure(),
+      type: ScalarTypeEnum4.String_unsecure(),
       isArray: true,
       isOptional: true
     },
     status: { type: ProjectStatusSchemaEnum, isOptional: true }
   }
 });
-var GetProjectInputModel = defineSchemaModel3({
+var GetProjectInputModel = defineSchemaModel4({
   name: "GetProjectInput",
   fields: {
-    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false }
+    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false }
   }
 });
-var DeleteProjectInputModel = defineSchemaModel3({
+var DeleteProjectInputModel = defineSchemaModel4({
   name: "DeleteProjectInput",
   fields: {
-    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false }
+    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false }
   }
 });
-var DeleteProjectOutputModel = defineSchemaModel3({
+var DeleteProjectOutputModel = defineSchemaModel4({
   name: "DeleteProjectOutput",
   fields: {
-    success: { type: ScalarTypeEnum3.Boolean(), isOptional: false }
+    success: { type: ScalarTypeEnum4.Boolean(), isOptional: false }
   }
 });
-var ProjectDeletedPayloadModel = defineSchemaModel3({
+var ProjectDeletedPayloadModel = defineSchemaModel4({
   name: "ProjectDeletedPayload",
   fields: {
-    projectId: { type: ScalarTypeEnum3.String_unsecure(), isOptional: false }
+    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false }
   }
 });
-var ListProjectsInputModel = defineSchemaModel3({
+var ListProjectsInputModel = defineSchemaModel4({
   name: "ListProjectsInput",
   description: "Input for listing projects",
   fields: {
     status: { type: ProjectStatusFilterEnum, isOptional: true },
-    search: { type: ScalarTypeEnum3.String_unsecure(), isOptional: true },
+    search: { type: ScalarTypeEnum4.String_unsecure(), isOptional: true },
     limit: {
-      type: ScalarTypeEnum3.Int_unsecure(),
+      type: ScalarTypeEnum4.Int_unsecure(),
       isOptional: true,
       defaultValue: 20
     },
     offset: {
-      type: ScalarTypeEnum3.Int_unsecure(),
+      type: ScalarTypeEnum4.Int_unsecure(),
       isOptional: true,
       defaultValue: 0
     }
   }
 });
-var ListProjectsOutputModel = defineSchemaModel3({
+var ListProjectsOutputModel = defineSchemaModel4({
   name: "ListProjectsOutput",
   description: "Output for listing projects",
   fields: {
     projects: { type: ProjectModel, isArray: true, isOptional: false },
-    total: { type: ScalarTypeEnum3.Int_unsecure(), isOptional: false }
+    total: { type: ScalarTypeEnum4.Int_unsecure(), isOptional: false }
   }
 });
 
@@ -1409,209 +1580,38 @@ var ListProjectsContract = defineQuery2({
   }
 });
 
-// src/project/project.event.ts
-import { ScalarTypeEnum as ScalarTypeEnum4, defineSchemaModel as defineSchemaModel4 } from "@contractspec/lib.schema";
-import { defineEvent as defineEvent2 } from "@contractspec/lib.contracts-spec";
-var ProjectCreatedPayload = defineSchemaModel4({
-  name: "ProjectCreatedPayload",
-  description: "Payload when a project is created",
-  fields: {
-    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    name: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    organizationId: {
-      type: ScalarTypeEnum4.String_unsecure(),
-      isOptional: false
-    },
-    createdBy: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    createdAt: { type: ScalarTypeEnum4.DateTime(), isOptional: false }
-  }
-});
-var ProjectUpdatedPayload = defineSchemaModel4({
-  name: "ProjectUpdatedPayload",
-  description: "Payload when a project is updated",
-  fields: {
-    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    updatedFields: {
-      type: ScalarTypeEnum4.String_unsecure(),
-      isArray: true,
-      isOptional: false
-    },
-    updatedBy: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    updatedAt: { type: ScalarTypeEnum4.DateTime(), isOptional: false }
-  }
-});
-var ProjectDeletedPayload = defineSchemaModel4({
-  name: "ProjectDeletedPayload",
-  description: "Payload when a project is deleted",
-  fields: {
-    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    organizationId: {
-      type: ScalarTypeEnum4.String_unsecure(),
-      isOptional: false
-    },
-    deletedBy: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    deletedAt: { type: ScalarTypeEnum4.DateTime(), isOptional: false }
-  }
-});
-var ProjectArchivedPayload = defineSchemaModel4({
-  name: "ProjectArchivedPayload",
-  description: "Payload when a project is archived",
-  fields: {
-    projectId: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    archivedBy: { type: ScalarTypeEnum4.String_unsecure(), isOptional: false },
-    archivedAt: { type: ScalarTypeEnum4.DateTime(), isOptional: false }
-  }
-});
-var ProjectCreatedEvent = defineEvent2({
+// src/project/project.presentation.ts
+import {
+  definePresentation as definePresentation3,
+  StabilityEnum as StabilityEnum3
+} from "@contractspec/lib.contracts-spec";
+var ProjectListPresentation = definePresentation3({
   meta: {
-    key: "project.created",
+    key: "saas.project.list",
     version: "1.0.0",
-    description: "A new project has been created.",
-    stability: "stable",
+    title: "Project List",
+    description: "List view of projects with status, tags, and last updated info",
+    domain: "saas-boilerplate",
     owners: ["@saas-team"],
-    tags: ["project", "created"]
+    tags: ["project", "list", "dashboard"],
+    stability: StabilityEnum3.Beta,
+    goal: "Browse and manage projects",
+    context: "Project list page"
   },
-  payload: ProjectCreatedPayload
+  source: {
+    type: "component",
+    framework: "react",
+    componentKey: "ProjectListView",
+    props: ProjectModel
+  },
+  targets: ["react", "markdown", "application/json"],
+  policy: {
+    flags: ["saas.projects.enabled"]
+  }
 });
-var ProjectUpdatedEvent = defineEvent2({
+var ProjectDetailPresentation = definePresentation3({
   meta: {
-    key: "project.updated",
-    version: "1.0.0",
-    description: "A project has been updated.",
-    stability: "stable",
-    owners: ["@saas-team"],
-    tags: ["project", "updated"]
-  },
-  payload: ProjectUpdatedPayload
-});
-var ProjectDeletedEvent = defineEvent2({
-  meta: {
-    key: "project.deleted",
-    version: "1.0.0",
-    description: "A project has been deleted.",
-    stability: "stable",
-    owners: ["@saas-team"],
-    tags: ["project", "deleted"]
-  },
-  payload: ProjectDeletedPayload
-});
-var ProjectArchivedEvent = defineEvent2({
-  meta: {
-    key: "project.archived",
-    version: "1.0.0",
-    description: "A project has been archived.",
-    stability: "stable",
-    owners: ["@saas-team"],
-    tags: ["project", "archived"]
-  },
-  payload: ProjectArchivedPayload
-});
-
-// src/project/project.entity.ts
-import {
-  defineEntity as defineEntity2,
-  defineEntityEnum as defineEntityEnum2,
-  field as field2,
-  index as index2
-} from "@contractspec/lib.schema";
-var ProjectStatusEnum = defineEntityEnum2({
-  name: "ProjectStatus",
-  values: ["DRAFT", "ACTIVE", "ARCHIVED", "DELETED"],
-  schema: "saas_app",
-  description: "Status of a project."
-});
-var ProjectEntity = defineEntity2({
-  name: "Project",
-  description: "A project belonging to an organization.",
-  schema: "saas_app",
-  map: "project",
-  fields: {
-    id: field2.id({ description: "Unique project ID" }),
-    name: field2.string({ description: "Project name" }),
-    description: field2.string({
-      isOptional: true,
-      description: "Project description"
-    }),
-    slug: field2.string({
-      isOptional: true,
-      description: "URL-friendly identifier"
-    }),
-    organizationId: field2.foreignKey({ description: "Owning organization" }),
-    createdBy: field2.foreignKey({
-      description: "User who created the project"
-    }),
-    status: field2.enum("ProjectStatus", { default: "DRAFT" }),
-    isPublic: field2.boolean({
-      default: false,
-      description: "Whether project is publicly visible"
-    }),
-    settings: field2.json({
-      isOptional: true,
-      description: "Project-specific settings"
-    }),
-    tags: field2.string({ isArray: true, description: "Project tags" }),
-    metadata: field2.json({ isOptional: true }),
-    createdAt: field2.createdAt(),
-    updatedAt: field2.updatedAt(),
-    archivedAt: field2.dateTime({ isOptional: true })
-  },
-  indexes: [
-    index2.on(["organizationId", "status"]),
-    index2.on(["organizationId", "createdAt"]),
-    index2.unique(["organizationId", "slug"])
-  ],
-  enums: [ProjectStatusEnum]
-});
-var ProjectMemberEntity = defineEntity2({
-  name: "ProjectMember",
-  description: "User access to a specific project.",
-  schema: "saas_app",
-  map: "project_member",
-  fields: {
-    id: field2.id(),
-    projectId: field2.foreignKey(),
-    userId: field2.foreignKey(),
-    role: field2.string({
-      description: "Role in project (owner, editor, viewer)"
-    }),
-    addedBy: field2.string({ isOptional: true }),
-    createdAt: field2.createdAt()
-  },
-  indexes: [index2.unique(["projectId", "userId"])]
-});
-
-// src/project/project.presentation.ts
-import {
-  definePresentation as definePresentation3,
-  StabilityEnum as StabilityEnum3
-} from "@contractspec/lib.contracts-spec";
-var ProjectListPresentation = definePresentation3({
-  meta: {
-    key: "saas.project.list",
-    version: "1.0.0",
-    title: "Project List",
-    description: "List view of projects with status, tags, and last updated info",
-    domain: "saas-boilerplate",
-    owners: ["@saas-team"],
-    tags: ["project", "list", "dashboard"],
-    stability: StabilityEnum3.Beta,
-    goal: "Browse and manage projects",
-    context: "Project list page"
-  },
-  source: {
-    type: "component",
-    framework: "react",
-    componentKey: "ProjectListView",
-    props: ProjectModel
-  },
-  targets: ["react", "markdown", "application/json"],
-  policy: {
-    flags: ["saas.projects.enabled"]
-  }
-});
-var ProjectDetailPresentation = definePresentation3({
-  meta: {
-    key: "saas.project.detail",
+    key: "saas.project.detail",
     version: "1.0.0",
     title: "Project Details",
     description: "Detailed view of a project with settings and activity",
@@ -1632,76 +1632,213 @@ var ProjectDetailPresentation = definePresentation3({
     flags: ["saas.projects.enabled"]
   }
 });
-// src/settings/settings.enum.ts
-import { defineEntityEnum as defineEntityEnum3 } from "@contractspec/lib.schema";
-var SettingsScopeEnum = defineEntityEnum3({
-  name: "SettingsScope",
-  values: ["APP", "ORG", "USER", "PROJECT"],
-  schema: "saas_app",
-  description: "Scope of a setting."
+// 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." }
+  }
 });
-
-// src/settings/settings.entity.ts
-import { defineEntity as defineEntity3, field as field3, index as index3 } from "@contractspec/lib.schema";
-var SettingsEntity = defineEntity3({
-  name: "Settings",
-  description: "Application, organization, or user settings.",
-  schema: "saas_app",
-  map: "settings",
-  fields: {
-    id: field3.id(),
-    key: field3.string({
-      description: 'Setting key (e.g., "theme", "notifications.email")'
-    }),
-    scope: field3.enum("SettingsScope"),
-    scopeId: field3.string({
-      isOptional: true,
-      description: "ID of scoped entity (org, user, project)"
-    }),
-    value: field3.json({ description: "Setting value" }),
-    valueType: field3.string({
-      default: '"string"',
-      description: "Type hint for value"
-    }),
-    schema: field3.json({
-      isOptional: true,
-      description: "JSON schema for validation"
-    }),
-    description: field3.string({ isOptional: true }),
-    isSecret: field3.boolean({
-      default: false,
-      description: "Whether value should be encrypted"
-    }),
-    createdAt: field3.createdAt(),
-    updatedAt: field3.updatedAt()
-  },
-  indexes: [
-    index3.unique(["scope", "scopeId", "key"]),
-    index3.on(["scope", "key"])
-  ],
-  enums: [SettingsScopeEnum]
+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 FeatureFlagEntity = defineEntity3({
-  name: "FeatureFlag",
-  description: "Feature flags for progressive rollout.",
-  schema: "saas_app",
-  map: "feature_flag",
-  fields: {
-    id: field3.id(),
-    key: field3.string({ isUnique: true, description: "Feature flag key" }),
-    name: field3.string({ description: "Human-readable name" }),
-    description: field3.string({ isOptional: true }),
-    enabled: field3.boolean({ default: false }),
-    defaultValue: field3.boolean({ default: false }),
-    rules: field3.json({ isOptional: true, description: "Targeting rules" }),
-    rolloutPercentage: field3.int({
-      default: 0,
-      description: "Percentage rollout (0-100)"
-    }),
-    createdAt: field3.createdAt(),
-    updatedAt: field3.updatedAt()
+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/saas-boilerplate.feature.ts
 import { defineFeature } from "@contractspec/lib.contracts-spec";
 var SaasBoilerplateFeature = defineFeature({
@@ -1779,6 +1916,7 @@ var SaasBoilerplateFeature = defineFeature({
       targets: ["react", "markdown"]
     }
   ],
+  visualizations: SaasVisualizationRefs,
   capabilities: {
     requires: [
       { key: "identity", version: "1.0.0" },
@@ -1796,19 +1934,89 @@ var SaasBoilerplateFeature = defineFeature({
   ]
 });
 
-// src/ui/hooks/useProjectList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-function useProjectList(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime();
-  const { saas: saas2 } = handlers;
-  const [data, setData] = useState(null);
-  const [subscription, setSubscription] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
-  const fetchData = useCallback(async () => {
-    setLoading(true);
+// src/settings/settings.enum.ts
+import { defineEntityEnum as defineEntityEnum3 } from "@contractspec/lib.schema";
+var SettingsScopeEnum = defineEntityEnum3({
+  name: "SettingsScope",
+  values: ["APP", "ORG", "USER", "PROJECT"],
+  schema: "saas_app",
+  description: "Scope of a setting."
+});
+
+// src/settings/settings.entity.ts
+import { defineEntity as defineEntity3, field as field3, index as index3 } from "@contractspec/lib.schema";
+var SettingsEntity = defineEntity3({
+  name: "Settings",
+  description: "Application, organization, or user settings.",
+  schema: "saas_app",
+  map: "settings",
+  fields: {
+    id: field3.id(),
+    key: field3.string({
+      description: 'Setting key (e.g., "theme", "notifications.email")'
+    }),
+    scope: field3.enum("SettingsScope"),
+    scopeId: field3.string({
+      isOptional: true,
+      description: "ID of scoped entity (org, user, project)"
+    }),
+    value: field3.json({ description: "Setting value" }),
+    valueType: field3.string({
+      default: '"string"',
+      description: "Type hint for value"
+    }),
+    schema: field3.json({
+      isOptional: true,
+      description: "JSON schema for validation"
+    }),
+    description: field3.string({ isOptional: true }),
+    isSecret: field3.boolean({
+      default: false,
+      description: "Whether value should be encrypted"
+    }),
+    createdAt: field3.createdAt(),
+    updatedAt: field3.updatedAt()
+  },
+  indexes: [
+    index3.unique(["scope", "scopeId", "key"]),
+    index3.on(["scope", "key"])
+  ],
+  enums: [SettingsScopeEnum]
+});
+var FeatureFlagEntity = defineEntity3({
+  name: "FeatureFlag",
+  description: "Feature flags for progressive rollout.",
+  schema: "saas_app",
+  map: "feature_flag",
+  fields: {
+    id: field3.id(),
+    key: field3.string({ isUnique: true, description: "Feature flag key" }),
+    name: field3.string({ description: "Human-readable name" }),
+    description: field3.string({ isOptional: true }),
+    enabled: field3.boolean({ default: false }),
+    defaultValue: field3.boolean({ default: false }),
+    rules: field3.json({ isOptional: true, description: "Targeting rules" }),
+    rolloutPercentage: field3.int({
+      default: 0,
+      description: "Percentage rollout (0-100)"
+    }),
+    createdAt: field3.createdAt(),
+    updatedAt: field3.updatedAt()
+  }
+});
+// 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: saas2 } = handlers;
+  const [data, setData] = useState(null);
+  const [subscription, setSubscription] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
     setError(null);
     try {
       const [projectsResult, subscriptionResult] = await Promise.all([
@@ -1861,8 +2069,8 @@ function useProjectList(options = {}) {
 }
 
 // src/ui/hooks/useProjectMutations.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function useProjectMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime2();
   const { saas: saas2 } = handlers;
@@ -1949,9 +2157,12 @@ function useProjectMutations(options = {}) {
   };
 }
 
+// src/ui/hooks/index.ts
+"use client";
+
 // src/ui/modals/CreateProjectModal.tsx
-import { useState as useState3 } from "react";
 import { Button, Input } from "@contractspec/lib.design-system";
+import { useState as useState3 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var TIERS = [
@@ -1996,7 +2207,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,
@@ -2007,10 +2218,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", {
@@ -2021,7 +2232,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, {
@@ -2037,7 +2248,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", {
@@ -2047,7 +2258,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),
@@ -2055,7 +2266,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", {
@@ -2063,7 +2274,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
@@ -2072,7 +2283,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", {
@@ -2101,8 +2312,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({
@@ -2195,7 +2406,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,
@@ -2206,13 +2417,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", {
@@ -2294,7 +2505,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, {
@@ -2309,7 +2520,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", {
@@ -2318,12 +2529,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", {
@@ -2353,7 +2564,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),
                   "?"
@@ -2364,7 +2575,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", {
@@ -2394,7 +2605,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),
                   "?"
@@ -2405,7 +2616,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", {
@@ -2432,92 +2643,290 @@ function ProjectActionsModal({
     ]
   }, undefined, true, undefined, this);
 }
-
-// src/ui/SaasDashboard.tsx
-import { useState as useState5, useCallback as useCallback3 } from "react";
-import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
-  EmptyState,
-  LoaderBlock,
-  ErrorState,
-  Button as Button3
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function getStatusTone(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "DRAFT":
-      return "neutral";
-    case "ARCHIVED":
-      return "warning";
-    default:
-      return "neutral";
-  }
+// src/ui/overlays/demo-overlays.ts
+var saasFreeUserOverlay = {
+  overlayId: "saas-boilerplate.free-tier",
+  version: "1.0.0",
+  description: "Shows limitations for free tier users",
+  appliesTo: {
+    feature: "saas-boilerplate",
+    tier: "free"
+  },
+  modifications: [
+    {
+      type: "setLimit",
+      field: "projects",
+      max: 3,
+      message: "Upgrade to create more projects"
+    },
+    { type: "hideField", field: "advancedSettings", reason: "Pro feature" },
+    {
+      type: "addBadge",
+      position: "header",
+      label: "Free Plan",
+      variant: "default"
+    }
+  ]
+};
+var saasDemoOverlay = {
+  overlayId: "saas-boilerplate.demo-user",
+  version: "1.0.0",
+  description: "Demo mode for SaaS boilerplate",
+  appliesTo: {
+    feature: "saas-boilerplate",
+    role: "demo"
+  },
+  modifications: [
+    {
+      type: "hideField",
+      field: "billingSection",
+      reason: "Demo users cannot access billing"
+    },
+    {
+      type: "hideField",
+      field: "deleteAccount",
+      reason: "Not available in demo"
+    },
+    {
+      type: "addBadge",
+      position: "header",
+      label: "Demo Mode",
+      variant: "warning"
+    }
+  ]
+};
+var saasOverlays = [
+  saasFreeUserOverlay,
+  saasDemoOverlay
+];
+// src/ui/renderers/project-list.markdown.ts
+var PROJECT_TIERS = [
+  "FREE",
+  "PRO",
+  "ENTERPRISE"
+];
+function toVisualizationProject(project, index4) {
+  return {
+    status: project.status === "DELETED" ? "ARCHIVED" : project.status,
+    tier: PROJECT_TIERS[index4 % PROJECT_TIERS.length] ?? "FREE",
+    createdAt: project.createdAt
+  };
 }
-function SaasDashboard() {
-  const [activeTab, setActiveTab] = useState5("projects");
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState5(false);
-  const [selectedProject, setSelectedProject] = useState5(null);
-  const [isProjectActionsOpen, setIsProjectActionsOpen] = useState5(false);
-  const { data, subscription, loading, error, stats, refetch } = useProjectList();
-  const mutations = useProjectMutations({
-    onSuccess: () => {
-      refetch();
+var projectListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "ProjectListView") {
+      throw new Error("projectListMarkdownRenderer: not ProjectListView");
     }
-  });
-  const handleProjectClick = useCallback3((project) => {
-    setSelectedProject(project);
-    setIsProjectActionsOpen(true);
-  }, []);
-  const tabs = [
-    { id: "projects", label: "Projects", icon: "\uD83D\uDCC1" },
-    { id: "billing", label: "Billing", icon: "\uD83D\uDCB3" },
-    { id: "settings", label: "Settings", icon: "⚙️" }
-  ];
-  if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV3(LoaderBlock, {
-      label: "Loading dashboard..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV3(ErrorState, {
-      title: "Failed to load dashboard",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
+    const data = await mockListProjectsHandler({
+      limit: 20,
+      offset: 0
+    });
+    const items = data.projects ?? [];
+    const lines = [
+      "# Projects",
+      "",
+      `**Total**: ${data.total} projects`,
+      ""
+    ];
+    if (items.length === 0) {
+      lines.push("_No projects found._");
+    } else {
+      lines.push("| Status | Project | Description |");
+      lines.push("|--------|---------|-------------|");
+      for (const project of items) {
+        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
+        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
+      }
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV3("h2", {
-            className: "text-2xl font-bold",
-            children: "SaaS Dashboard"
-          }, undefined, false, undefined, this),
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(Button3, {
-            onPress: () => setIsCreateModalOpen(true),
-            children: [
-              /* @__PURE__ */ jsxDEV3("span", {
-                className: "mr-2",
-                children: "+"
-              }, undefined, false, undefined, this),
-              " New Project"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      stats && subscription && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
-        children: [
-          /* @__PURE__ */ jsxDEV3(StatCard, {
-            label: "Projects",
+};
+var saasDashboardMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SaasDashboard") {
+      throw new Error("saasDashboardMarkdownRenderer: not SaasDashboard");
+    }
+    const [projectsData, subscription] = await Promise.all([
+      mockListProjectsHandler({ limit: 50 }),
+      mockGetSubscriptionHandler()
+    ]);
+    const projects = projectsData.projects ?? [];
+    const activeProjects = projects.filter((p) => p.status === "ACTIVE").length;
+    const archivedProjects = projects.filter((p) => p.status === "ARCHIVED").length;
+    const visualizations = createSaasVisualizationItems(projects.map(toVisualizationProject), 10);
+    const lines = [
+      "# SaaS Dashboard",
+      "",
+      "> Organization overview and usage summary",
+      "",
+      "## Summary",
+      "",
+      "| Metric | Value |",
+      "|--------|-------|",
+      `| Total Projects | ${projectsData.total} |`,
+      `| Active Projects | ${activeProjects} |`,
+      `| Archived Projects | ${archivedProjects} |`,
+      `| Subscription Plan | ${subscription.planName} |`,
+      `| Subscription Status | ${subscription.status} |`,
+      ""
+    ];
+    lines.push("## Visualization Overview");
+    lines.push("");
+    for (const item of visualizations) {
+      lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+    }
+    lines.push("");
+    lines.push("## Projects");
+    lines.push("");
+    if (projects.length === 0) {
+      lines.push("_No projects yet._");
+    } else {
+      lines.push("| Status | Project | Description |");
+      lines.push("|--------|---------|-------------|");
+      for (const project of projects.slice(0, 10)) {
+        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
+        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
+      }
+      if (projects.length > 10) {
+        lines.push(`| ... | ... | _${projectsData.total - 10} more projects_ |`);
+      }
+    }
+    lines.push("");
+    lines.push("## Subscription");
+    lines.push("");
+    lines.push(`- **Plan**: ${subscription.planName}`);
+    lines.push(`- **Status**: ${subscription.status}`);
+    if (subscription.currentPeriodEnd) {
+      lines.push(`- **Period End**: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`);
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+var saasBillingMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SubscriptionView") {
+      throw new Error("saasBillingMarkdownRenderer: not SubscriptionView");
+    }
+    const subscription = await mockGetSubscriptionHandler();
+    const lines = [
+      "# Billing & Subscription",
+      "",
+      "> Current subscription details and billing information",
+      "",
+      "## Subscription Details",
+      "",
+      "| Property | Value |",
+      "|----------|-------|",
+      `| Plan | ${subscription.planName} |`,
+      `| Status | ${subscription.status} |`,
+      `| ID | ${subscription.id} |`,
+      `| Period Start | ${new Date(subscription.currentPeriodStart).toLocaleDateString()} |`,
+      `| Period End | ${new Date(subscription.currentPeriodEnd).toLocaleDateString()} |`
+    ];
+    lines.push("");
+    lines.push("## Plan Limits");
+    lines.push("");
+    lines.push(`- **Projects**: ${subscription.limits.projects}`);
+    lines.push(`- **Users**: ${subscription.limits.users}`);
+    lines.push("");
+    lines.push("## Plan Features");
+    lines.push("");
+    if (subscription.planName.toLowerCase().includes("free")) {
+      lines.push("- ✅ Up to 3 projects");
+      lines.push("- ✅ Basic support");
+      lines.push("- ❌ Priority support");
+      lines.push("- ❌ Advanced analytics");
+    } else if (subscription.planName.toLowerCase().includes("pro")) {
+      lines.push("- ✅ Unlimited projects");
+      lines.push("- ✅ Priority support");
+      lines.push("- ✅ Advanced analytics");
+      lines.push("- ❌ Custom integrations");
+    } else {
+      lines.push("- ✅ Unlimited projects");
+      lines.push("- ✅ Priority support");
+      lines.push("- ✅ Advanced analytics");
+      lines.push("- ✅ Custom integrations");
+      lines.push("- ✅ Dedicated support");
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+
+// src/ui/SaasProjectList.tsx
+import {
+  Button as Button3,
+  EmptyState,
+  EntityCard,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function getStatusTone(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "success";
+    case "DRAFT":
+      return "neutral";
+    case "ARCHIVED":
+      return "danger";
+    default:
+      return "neutral";
+  }
+}
+function SaasProjectList({
+  onProjectClick,
+  onCreateProject
+}) {
+  const { data, loading, error, stats, refetch } = useProjectList();
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV3(LoaderBlock, {
+      label: "Loading projects..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV3(ErrorState, {
+      title: "Failed to load projects",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+      title: "No projects found",
+      description: "Create your first project to get started.",
+      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV3(Button3, {
+        onPress: onCreateProject,
+        children: "Create Project"
+      }, undefined, false, undefined, this) : undefined
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: [
+      stats && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Total Projects",
             value: stats.total.toString()
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV3(StatCard, {
@@ -2527,46 +2936,225 @@ function SaasDashboard() {
           /* @__PURE__ */ jsxDEV3(StatCard, {
             label: "Draft",
             value: stats.draftCount.toString()
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        children: data.items.map((project) => /* @__PURE__ */ jsxDEV3(EntityCard, {
+          cardTitle: project.name,
+          cardSubtitle: project.tier,
+          meta: /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground text-sm",
+            children: project.description
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard, {
+          chips: /* @__PURE__ */ jsxDEV3(StatusChip, {
+            tone: getStatusTone(project.status),
+            label: project.status
+          }, undefined, false, undefined, this),
+          footer: /* @__PURE__ */ jsxDEV3("span", {
+            className: "text-muted-foreground text-xs",
+            children: project.updatedAt.toLocaleDateString()
+          }, undefined, false, undefined, this),
+          onClick: onProjectClick ? () => onProjectClick(project.id) : undefined
+        }, project.id, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/renderers/project-list.renderer.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var projectListReactRenderer = {
+  target: "react",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component") {
+      throw new Error("Invalid source type");
+    }
+    if (desc.source.componentKey !== "SaasProjectListView") {
+      throw new Error(`Unknown component: ${desc.source.componentKey}`);
+    }
+    return /* @__PURE__ */ jsxDEV4(SaasProjectList, {}, undefined, false, undefined, this);
+  }
+};
+// src/ui/SaasDashboard.visualizations.tsx
+import {
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function SaasVisualizationOverview({
+  projects,
+  projectLimit
+}) {
+  const items = createSaasVisualizationItems(projects, projectLimit);
+  return /* @__PURE__ */ jsxDEV5("section", {
+    className: "space-y-3",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV5("h3", {
+            className: "font-semibold text-lg",
+            children: "Portfolio Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Contract-backed charts for project mix, capacity, and activity."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(VisualizationGrid, {
+        children: items.map((item) => /* @__PURE__ */ jsxDEV5(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/SaasDashboard.tsx
+import {
+  Button as Button4,
+  EmptyState as EmptyState2,
+  EntityCard as EntityCard2,
+  ErrorState as ErrorState2,
+  LoaderBlock as LoaderBlock2,
+  StatCard as StatCard2,
+  StatCardGroup as StatCardGroup2,
+  StatusChip as StatusChip2
+} from "@contractspec/lib.design-system";
+import { useCallback as useCallback3, useState as useState5 } from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+function getStatusTone2(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "success";
+    case "DRAFT":
+      return "neutral";
+    case "ARCHIVED":
+      return "warning";
+    default:
+      return "neutral";
+  }
+}
+function SaasDashboard() {
+  const [activeTab, setActiveTab] = useState5("projects");
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState5(false);
+  const [selectedProject, setSelectedProject] = useState5(null);
+  const [isProjectActionsOpen, setIsProjectActionsOpen] = useState5(false);
+  const { data, subscription, loading, error, stats, refetch } = useProjectList();
+  const mutations = useProjectMutations({
+    onSuccess: () => {
+      refetch();
+    }
+  });
+  const handleProjectClick = useCallback3((project) => {
+    setSelectedProject(project);
+    setIsProjectActionsOpen(true);
+  }, []);
+  const tabs = [
+    { id: "projects", label: "Projects", icon: "\uD83D\uDCC1" },
+    { id: "billing", label: "Billing", icon: "\uD83D\uDCB3" },
+    { id: "settings", label: "Settings", icon: "⚙️" }
+  ];
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV6(LoaderBlock2, {
+      label: "Loading dashboard..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV6(ErrorState2, {
+      title: "Failed to load dashboard",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "font-bold text-2xl",
+            children: "SaaS Dashboard"
+          }, undefined, false, undefined, this),
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV6(Button4, {
+            onPress: () => setIsCreateModalOpen(true),
+            children: [
+              /* @__PURE__ */ jsxDEV6("span", {
+                className: "mr-2",
+                children: "+"
+              }, undefined, false, undefined, this),
+              " New Project"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      stats && subscription && /* @__PURE__ */ jsxDEV6(StatCardGroup2, {
+        children: [
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
+            label: "Projects",
+            value: stats.total.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
+            label: "Active",
+            value: stats.activeCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
+            label: "Draft",
+            value: stats.draftCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(StatCard2, {
             label: "Plan",
             value: subscription.plan,
             hint: subscription.status
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("nav", {
-        className: "bg-muted flex gap-1 rounded-lg p-1",
+      data && stats && /* @__PURE__ */ jsxDEV6(SaasVisualizationOverview, {
+        projectLimit: stats.projectLimit,
+        projects: data.items
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("nav", {
+        className: "flex gap-1 rounded-lg bg-muted p-1",
         role: "tablist",
-        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV3("button", {
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV6("button", {
           type: "button",
           role: "tab",
           "aria-selected": activeTab === tab.id,
           onClick: () => setActiveTab(tab.id),
-          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
           children: [
-            /* @__PURE__ */ jsxDEV3("span", {
+            /* @__PURE__ */ jsxDEV6("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(ProjectsTab, {
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV6(ProjectsTab, {
             data,
             onProjectClick: handleProjectClick
           }, undefined, false, undefined, this),
-          activeTab === "billing" && /* @__PURE__ */ jsxDEV3(BillingTab, {
+          activeTab === "billing" && /* @__PURE__ */ jsxDEV6(BillingTab, {
             subscription
           }, undefined, false, undefined, this),
-          activeTab === "settings" && /* @__PURE__ */ jsxDEV3(SettingsTab, {}, undefined, false, undefined, this)
+          activeTab === "settings" && /* @__PURE__ */ jsxDEV6(SettingsTab, {}, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3(CreateProjectModal, {
+      /* @__PURE__ */ jsxDEV6(CreateProjectModal, {
         isOpen: isCreateModalOpen,
         onClose: () => setIsCreateModalOpen(false),
         onSubmit: async (input) => {
@@ -2574,7 +3162,7 @@ function SaasDashboard() {
         },
         isLoading: mutations.createState.loading
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3(ProjectActionsModal, {
+      /* @__PURE__ */ jsxDEV6(ProjectActionsModal, {
         isOpen: isProjectActionsOpen,
         project: selectedProject,
         onClose: () => {
@@ -2600,34 +3188,34 @@ function SaasDashboard() {
 }
 function ProjectsTab({ data, onProjectClick }) {
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+    return /* @__PURE__ */ jsxDEV6(EmptyState2, {
       title: "No projects yet",
       description: "Create your first project to get started."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-4",
-    children: /* @__PURE__ */ jsxDEV3("div", {
+    children: /* @__PURE__ */ jsxDEV6("div", {
       className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-      children: data.items.map((project) => /* @__PURE__ */ jsxDEV3(EntityCard, {
+      children: data.items.map((project) => /* @__PURE__ */ jsxDEV6(EntityCard2, {
         cardTitle: project.name,
         cardSubtitle: project.tier,
-        meta: /* @__PURE__ */ jsxDEV3("p", {
+        meta: /* @__PURE__ */ jsxDEV6("p", {
           className: "text-muted-foreground text-sm",
           children: project.description
         }, undefined, false, undefined, this),
-        chips: /* @__PURE__ */ jsxDEV3(StatusChip, {
-          tone: getStatusTone(project.status),
+        chips: /* @__PURE__ */ jsxDEV6(StatusChip2, {
+          tone: getStatusTone2(project.status),
           label: project.status
         }, undefined, false, undefined, this),
-        footer: /* @__PURE__ */ jsxDEV3("div", {
+        footer: /* @__PURE__ */ jsxDEV6("div", {
           className: "flex w-full items-center justify-between",
           children: [
-            /* @__PURE__ */ jsxDEV3("span", {
+            /* @__PURE__ */ jsxDEV6("span", {
               className: "text-muted-foreground text-xs",
               children: project.updatedAt.toLocaleDateString()
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3(Button3, {
+            /* @__PURE__ */ jsxDEV6(Button4, {
               variant: "ghost",
               size: "sm",
               onPress: () => onProjectClick?.(project),
@@ -2642,25 +3230,25 @@ function ProjectsTab({ data, onProjectClick }) {
 function BillingTab({ subscription }) {
   if (!subscription)
     return null;
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV3("div", {
+          /* @__PURE__ */ jsxDEV6("div", {
             className: "flex items-start justify-between",
             children: [
-              /* @__PURE__ */ jsxDEV3("div", {
+              /* @__PURE__ */ jsxDEV6("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV3("h3", {
-                    className: "text-lg font-semibold",
+                  /* @__PURE__ */ jsxDEV6("h3", {
+                    className: "font-semibold text-lg",
                     children: [
                       subscription.plan,
                       " Plan"
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV3("p", {
+                  /* @__PURE__ */ jsxDEV6("p", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       "Current period:",
@@ -2671,7 +3259,7 @@ function BillingTab({ subscription }) {
                       subscription.currentPeriodEnd.toLocaleDateString()
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV3("p", {
+                  /* @__PURE__ */ jsxDEV6("p", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       "Billing cycle: ",
@@ -2680,21 +3268,21 @@ function BillingTab({ subscription }) {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV3(StatusChip, {
+              /* @__PURE__ */ jsxDEV6(StatusChip2, {
                 tone: "success",
                 label: subscription.status
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
+          /* @__PURE__ */ jsxDEV6("div", {
             className: "mt-4 flex gap-3",
             children: [
-              /* @__PURE__ */ jsxDEV3(Button3, {
+              /* @__PURE__ */ jsxDEV6(Button4, {
                 variant: "outline",
                 onPress: () => alert("Upgrade clicked!"),
                 children: "Upgrade Plan"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3(Button3, {
+              /* @__PURE__ */ jsxDEV6(Button4, {
                 variant: "ghost",
                 onPress: () => alert("Manage Billing clicked!"),
                 children: "Manage Billing"
@@ -2703,10 +3291,10 @@ function BillingTab({ subscription }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsxDEV3("div", {
-        className: "border-border bg-destructive/10 text-destructive rounded-xl border p-4",
-        children: /* @__PURE__ */ jsxDEV3("p", {
-          className: "text-sm font-medium",
+      subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsxDEV6("div", {
+        className: "rounded-xl border border-border bg-destructive/10 p-4 text-destructive",
+        children: /* @__PURE__ */ jsxDEV6("p", {
+          className: "font-medium text-sm",
           children: "⚠️ Your subscription will be cancelled at the end of the current period."
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -2714,233 +3302,137 @@ function BillingTab({ subscription }) {
   }, undefined, true, undefined, this);
 }
 function SettingsTab() {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
-    children: /* @__PURE__ */ jsxDEV3("div", {
-      className: "border-border bg-card rounded-xl border p-6",
+    children: /* @__PURE__ */ jsxDEV6("div", {
+      className: "rounded-xl border border-border bg-card p-6",
       children: [
-        /* @__PURE__ */ jsxDEV3("h3", {
-          className: "mb-4 text-lg font-semibold",
+        /* @__PURE__ */ jsxDEV6("h3", {
+          className: "mb-4 font-semibold text-lg",
           children: "Organization Settings"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV3("div", {
+        /* @__PURE__ */ jsxDEV6("div", {
           className: "space-y-4",
           children: [
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV3("label", {
+                /* @__PURE__ */ jsxDEV6("label", {
                   htmlFor: "org-name",
-                  className: "text-sm font-medium",
+                  className: "font-medium text-sm",
                   children: "Organization Name"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("input", {
+                /* @__PURE__ */ jsxDEV6("input", {
                   id: "org-name",
                   type: "text",
                   defaultValue: "Demo Organization",
-                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+                  className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV3("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV3("label", {
-                  htmlFor: "timezone",
-                  className: "text-sm font-medium",
-                  children: "Default Timezone"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("select", {
-                  id: "timezone",
-                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
-                  children: [
-                    /* @__PURE__ */ jsxDEV3("option", {
-                      children: "UTC"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
-                      children: "America/New_York"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
-                      children: "Europe/London"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV3("option", {
-                      children: "Asia/Tokyo"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV3("div", {
-              className: "pt-2",
-              children: /* @__PURE__ */ jsxDEV3(Button3, {
-                onPress: () => alert("Settings saved!"),
-                children: "Save Settings"
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/ui/SaasProjectList.tsx
-import {
-  StatCard as StatCard2,
-  StatCardGroup as StatCardGroup2,
-  StatusChip as StatusChip2,
-  EntityCard as EntityCard2,
-  EmptyState as EmptyState2,
-  LoaderBlock as LoaderBlock2,
-  ErrorState as ErrorState2,
-  Button as Button4
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-"use client";
-function getStatusTone2(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "DRAFT":
-      return "neutral";
-    case "ARCHIVED":
-      return "danger";
-    default:
-      return "neutral";
-  }
-}
-function SaasProjectList({
-  onProjectClick,
-  onCreateProject
-}) {
-  const { data, loading, error, stats, refetch } = useProjectList();
-  if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV4(LoaderBlock2, {
-      label: "Loading projects..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV4(ErrorState2, {
-      title: "Failed to load projects",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV4(EmptyState2, {
-      title: "No projects found",
-      description: "Create your first project to get started.",
-      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV4(Button4, {
-        onPress: onCreateProject,
-        children: "Create Project"
-      }, undefined, false, undefined, this) : undefined
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      stats && /* @__PURE__ */ jsxDEV4(StatCardGroup2, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(StatCard2, {
-            label: "Total Projects",
-            value: stats.total.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard2, {
-            label: "Active",
-            value: stats.activeCount.toString()
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard2, {
-            label: "Draft",
-            value: stats.draftCount.toString()
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((project) => /* @__PURE__ */ jsxDEV4(EntityCard2, {
-          cardTitle: project.name,
-          cardSubtitle: project.tier,
-          meta: /* @__PURE__ */ jsxDEV4("p", {
-            className: "text-muted-foreground text-sm",
-            children: project.description
-          }, undefined, false, undefined, this),
-          chips: /* @__PURE__ */ jsxDEV4(StatusChip2, {
-            tone: getStatusTone2(project.status),
-            label: project.status
-          }, undefined, false, undefined, this),
-          footer: /* @__PURE__ */ jsxDEV4("span", {
-            className: "text-muted-foreground text-xs",
-            children: project.updatedAt.toLocaleDateString()
-          }, undefined, false, undefined, this),
-          onClick: onProjectClick ? () => onProjectClick(project.id) : undefined
-        }, project.id, false, undefined, this))
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+                /* @__PURE__ */ jsxDEV6("label", {
+                  htmlFor: "timezone",
+                  className: "font-medium text-sm",
+                  children: "Default Timezone"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV6("select", {
+                  id: "timezone",
+                  className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV6("option", {
+                      children: "UTC"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV6("option", {
+                      children: "America/New_York"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV6("option", {
+                      children: "Europe/London"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV6("option", {
+                      children: "Asia/Tokyo"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV6("div", {
+              className: "pt-2",
+              children: /* @__PURE__ */ jsxDEV6(Button4, {
+                onPress: () => alert("Settings saved!"),
+                children: "Save Settings"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 
 // src/ui/SaasSettingsPanel.tsx
-import { useState as useState6 } from "react";
 import { Button as Button5 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { useState as useState6 } from "react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
 "use client";
 function SaasSettingsPanel() {
   const [orgName, setOrgName] = useState6("Demo Organization");
   const [timezone, setTimezone] = useState6("UTC");
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV7("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV5("h3", {
-            className: "mb-4 text-lg font-semibold",
+          /* @__PURE__ */ jsxDEV7("h3", {
+            className: "mb-4 font-semibold text-lg",
             children: "Organization Settings"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV7("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("label", {
+                  /* @__PURE__ */ jsxDEV7("label", {
                     htmlFor: "setting-org-name",
-                    className: "block text-sm font-medium",
+                    className: "block font-medium text-sm",
                     children: "Organization Name"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("input", {
+                  /* @__PURE__ */ jsxDEV7("input", {
                     id: "setting-org-name",
                     type: "text",
                     value: orgName,
                     onChange: (e) => setOrgName(e.target.value),
-                    className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+                    className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV7("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("label", {
+                  /* @__PURE__ */ jsxDEV7("label", {
                     htmlFor: "setting-timezone",
-                    className: "block text-sm font-medium",
+                    className: "block font-medium text-sm",
                     children: "Default Timezone"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("select", {
+                  /* @__PURE__ */ jsxDEV7("select", {
                     id: "setting-timezone",
                     value: timezone,
                     onChange: (e) => setTimezone(e.target.value),
-                    className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+                    className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",
                     children: [
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "UTC",
                         children: "UTC"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "America/New_York",
                         children: "America/New_York"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "Europe/London",
                         children: "Europe/London"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("option", {
+                      /* @__PURE__ */ jsxDEV7("option", {
                         value: "Asia/Tokyo",
                         children: "Asia/Tokyo"
                       }, undefined, false, undefined, this)
@@ -2950,37 +3442,37 @@ function SaasSettingsPanel() {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "mt-6",
-            children: /* @__PURE__ */ jsxDEV5(Button5, {
+            children: /* @__PURE__ */ jsxDEV7(Button5, {
               variant: "default",
               children: "Save Changes"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
-          /* @__PURE__ */ jsxDEV5("h3", {
-            className: "mb-4 text-lg font-semibold",
+          /* @__PURE__ */ jsxDEV7("h3", {
+            className: "mb-4 font-semibold text-lg",
             children: "Notifications"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "space-y-3",
             children: [
               { label: "Email notifications", defaultChecked: true },
               { label: "Usage alerts", defaultChecked: true },
               { label: "Weekly digest", defaultChecked: false }
-            ].map((item) => /* @__PURE__ */ jsxDEV5("label", {
+            ].map((item) => /* @__PURE__ */ jsxDEV7("label", {
               className: "flex items-center gap-3",
               children: [
-                /* @__PURE__ */ jsxDEV5("input", {
+                /* @__PURE__ */ jsxDEV7("input", {
                   type: "checkbox",
                   defaultChecked: item.defaultChecked,
-                  className: "border-input h-4 w-4 rounded"
+                  className: "h-4 w-4 rounded border-input"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV7("span", {
                   className: "text-sm",
                   children: item.label
                 }, undefined, false, undefined, this)
@@ -2989,26 +3481,26 @@ function SaasSettingsPanel() {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV7("div", {
         className: "rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20",
         children: [
-          /* @__PURE__ */ jsxDEV5("h3", {
-            className: "mb-2 text-lg font-semibold text-red-700 dark:text-red-400",
+          /* @__PURE__ */ jsxDEV7("h3", {
+            className: "mb-2 font-semibold text-lg text-red-700 dark:text-red-400",
             children: "Danger Zone"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("p", {
-            className: "mb-4 text-sm text-red-600 dark:text-red-300",
+          /* @__PURE__ */ jsxDEV7("p", {
+            className: "mb-4 text-red-600 text-sm dark:text-red-300",
             children: "These actions are irreversible. Please proceed with caution."
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV7("div", {
             className: "flex gap-3",
             children: [
-              /* @__PURE__ */ jsxDEV5(Button5, {
+              /* @__PURE__ */ jsxDEV7(Button5, {
                 variant: "secondary",
                 size: "sm",
                 children: "Export Data"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5(Button5, {
+              /* @__PURE__ */ jsxDEV7(Button5, {
                 variant: "secondary",
                 size: "sm",
                 children: "Delete Organization"
@@ -3020,228 +3512,6 @@ function SaasSettingsPanel() {
     ]
   }, undefined, true, undefined, this);
 }
-// src/ui/hooks/index.ts
-"use client";
-
-// src/ui/renderers/project-list.renderer.tsx
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-var projectListReactRenderer = {
-  target: "react",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component") {
-      throw new Error("Invalid source type");
-    }
-    if (desc.source.componentKey !== "SaasProjectListView") {
-      throw new Error(`Unknown component: ${desc.source.componentKey}`);
-    }
-    return /* @__PURE__ */ jsxDEV6(SaasProjectList, {}, undefined, false, undefined, this);
-  }
-};
-
-// src/ui/renderers/project-list.markdown.ts
-var projectListMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "ProjectListView") {
-      throw new Error("projectListMarkdownRenderer: not ProjectListView");
-    }
-    const data = await mockListProjectsHandler({
-      limit: 20,
-      offset: 0
-    });
-    const items = data.projects ?? data.items ?? [];
-    const lines = [
-      "# Projects",
-      "",
-      `**Total**: ${data.total} projects`,
-      ""
-    ];
-    if (items.length === 0) {
-      lines.push("_No projects found._");
-    } else {
-      lines.push("| Status | Project | Description |");
-      lines.push("|--------|---------|-------------|");
-      for (const project of items) {
-        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
-        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
-      }
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var saasDashboardMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "SaasDashboard") {
-      throw new Error("saasDashboardMarkdownRenderer: not SaasDashboard");
-    }
-    const [projectsData, subscription] = await Promise.all([
-      mockListProjectsHandler({ limit: 50 }),
-      mockGetSubscriptionHandler()
-    ]);
-    const projects = projectsData.projects ?? [];
-    const activeProjects = projects.filter((p) => p.status === "ACTIVE").length;
-    const archivedProjects = projects.filter((p) => p.status === "ARCHIVED").length;
-    const lines = [
-      "# SaaS Dashboard",
-      "",
-      "> Organization overview and usage summary",
-      "",
-      "## Summary",
-      "",
-      "| Metric | Value |",
-      "|--------|-------|",
-      `| Total Projects | ${projectsData.total} |`,
-      `| Active Projects | ${activeProjects} |`,
-      `| Archived Projects | ${archivedProjects} |`,
-      `| Subscription Plan | ${subscription.planName} |`,
-      `| Subscription Status | ${subscription.status} |`,
-      "",
-      "## Projects",
-      ""
-    ];
-    if (projects.length === 0) {
-      lines.push("_No projects yet._");
-    } else {
-      lines.push("| Status | Project | Description |");
-      lines.push("|--------|---------|-------------|");
-      for (const project of projects.slice(0, 10)) {
-        const status = project.status === "ACTIVE" ? "✅" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "⏸️";
-        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
-      }
-      if (projects.length > 10) {
-        lines.push(`| ... | ... | _${projectsData.total - 10} more projects_ |`);
-      }
-    }
-    lines.push("");
-    lines.push("## Subscription");
-    lines.push("");
-    lines.push(`- **Plan**: ${subscription.planName}`);
-    lines.push(`- **Status**: ${subscription.status}`);
-    if (subscription.currentPeriodEnd) {
-      lines.push(`- **Period End**: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`);
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var saasBillingMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "SubscriptionView") {
-      throw new Error("saasBillingMarkdownRenderer: not SubscriptionView");
-    }
-    const subscription = await mockGetSubscriptionHandler();
-    const lines = [
-      "# Billing & Subscription",
-      "",
-      "> Current subscription details and billing information",
-      "",
-      "## Subscription Details",
-      "",
-      "| Property | Value |",
-      "|----------|-------|",
-      `| Plan | ${subscription.planName} |`,
-      `| Status | ${subscription.status} |`,
-      `| ID | ${subscription.id} |`,
-      `| Period Start | ${new Date(subscription.currentPeriodStart).toLocaleDateString()} |`,
-      `| Period End | ${new Date(subscription.currentPeriodEnd).toLocaleDateString()} |`
-    ];
-    lines.push("");
-    lines.push("## Plan Limits");
-    lines.push("");
-    lines.push(`- **Projects**: ${subscription.limits.projects}`);
-    lines.push(`- **Users**: ${subscription.limits.users}`);
-    lines.push("");
-    lines.push("## Plan Features");
-    lines.push("");
-    if (subscription.planName.toLowerCase().includes("free")) {
-      lines.push("- ✅ Up to 3 projects");
-      lines.push("- ✅ Basic support");
-      lines.push("- ❌ Priority support");
-      lines.push("- ❌ Advanced analytics");
-    } else if (subscription.planName.toLowerCase().includes("pro")) {
-      lines.push("- ✅ Unlimited projects");
-      lines.push("- ✅ Priority support");
-      lines.push("- ✅ Advanced analytics");
-      lines.push("- ❌ Custom integrations");
-    } else {
-      lines.push("- ✅ Unlimited projects");
-      lines.push("- ✅ Priority support");
-      lines.push("- ✅ Advanced analytics");
-      lines.push("- ✅ Custom integrations");
-      lines.push("- ✅ Dedicated support");
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-// src/ui/overlays/demo-overlays.ts
-var saasFreeUserOverlay = {
-  overlayId: "saas-boilerplate.free-tier",
-  version: "1.0.0",
-  description: "Shows limitations for free tier users",
-  appliesTo: {
-    feature: "saas-boilerplate",
-    tier: "free"
-  },
-  modifications: [
-    {
-      type: "setLimit",
-      field: "projects",
-      max: 3,
-      message: "Upgrade to create more projects"
-    },
-    { type: "hideField", field: "advancedSettings", reason: "Pro feature" },
-    {
-      type: "addBadge",
-      position: "header",
-      label: "Free Plan",
-      variant: "default"
-    }
-  ]
-};
-var saasDemoOverlay = {
-  overlayId: "saas-boilerplate.demo-user",
-  version: "1.0.0",
-  description: "Demo mode for SaaS boilerplate",
-  appliesTo: {
-    feature: "saas-boilerplate",
-    role: "demo"
-  },
-  modifications: [
-    {
-      type: "hideField",
-      field: "billingSection",
-      reason: "Demo users cannot access billing"
-    },
-    {
-      type: "hideField",
-      field: "deleteAccount",
-      reason: "Not available in demo"
-    },
-    {
-      type: "addBadge",
-      position: "header",
-      label: "Demo Mode",
-      variant: "warning"
-    }
-  ]
-};
-var saasOverlays = [
-  saasFreeUserOverlay,
-  saasDemoOverlay
-];
 // src/index.ts
 import { identityRbacSchemaContribution } from "@contractspec/lib.identity-rbac";
 import { jobsSchemaContribution } from "@contractspec/lib.jobs";
@@ -3293,6 +3563,7 @@ export {
   mockCreateProjectHandler,
   mockCheckFeatureAccessHandler,
   example_default as example,
+  createSaasVisualizationItems,
   createSaasHandlers,
   UsageSummaryModel,
   UsageRecordedPayloadModel,
@@ -3311,8 +3582,15 @@ export {
   SettingsScopeEnum,
   SettingsPanelPresentation,
   SettingsEntity,
+  SaasVisualizationSpecs,
+  SaasVisualizationRegistry,
+  SaasVisualizationRefs,
   SaasSettingsPanel,
+  SaasProjectUsageVisualization,
+  SaasProjectTierVisualization,
+  SaasProjectStatusVisualization,
   SaasProjectList,
+  SaasProjectActivityVisualization,
   SaasDashboardPresentation,
   SaasDashboard,
   SaasBoilerplateFeature,