@codeenvision/ui-platform 1.0.1

package/LICENSE

@@ -0,0 +1,6 @@
+Copyright (c) 2026 Cluster Envision. All rights reserved.
+
+This software and associated documentation files are proprietary and confidential.
+Unauthorized copying, modification, distribution, sublicensing, or use of this
+software, in whole or in part, is strictly prohibited without prior written
+permission from Cluster Envision.

package/README.md

@@ -0,0 +1,84 @@
+# CE UI Platform
+
+Aggregator package to consume CE UI stack (framework + web components + SCSS) as a reusable library for future apps (ecommerce, LMS, ERP, etc.).
+
+## What’s included
+
+- `@clusterenvision/ui-framework` (local file dep)
+- `@clusterenvision/ui-webcomponents` (local file dep)
+- `ce-scss-vitepress` (local file dep, CSS tokens)
+- `@ce/templates` (templating utilities)
+- `@ce/email-engine` (email rendering/dispatch)
+- Barrel exports plus helpers to register default web components and point to the SCSS build.
+
+## Usage (conceptual)
+
+- Install in a workspace-aware package manager (pnpm/yarn/npm) so file: deps resolve.
+- Import framework/runtime APIs from this package instead of touching the underlying packages directly.
+- Call `registerCeUiDefaults()` once at app bootstrap to define the custom elements and load global styles.
+- Import `ceScssPath` into your bundler (e.g., Vite) to include the CSS: `import ceScssPath from '@ce/ui-platform/css';` (see below).
+- For a smaller baseline bundle, import `ceScssMinimalPath` from `@ce/ui-platform/css`.
+
+## Exports
+
+- Framework re-exports: everything from `@clusterenvision/ui-framework`.
+- Web components: `registerDefaultComponents`, `ensureGlobalStyles`, `defineComponentElement` re-exported.
+- Bootstrap: `registerCeUiDefaults` (and `CeUiPlatformBootstrapOptions`) for one-call setup.
+- CSS path helper: `ceScssPath` and a named export `css` subpath for easy import of the compiled SCSS.
+- Ecosystem: `ceTemplates` and `ceEmailEngine` namespaces.
+- App shell templates: token-only layout primitives, app shell kit, reference templates, and product starters.
+
+## Bootstrap (recommended)
+
+Call once during app startup (client-side):
+
+```ts
+import { registerCeUiDefaults } from '@ce/ui-platform';
+
+registerCeUiDefaults();
+```
+
+Or configure behavior explicitly:
+
+```ts
+import { registerCeUiDefaults } from '@ce/ui-platform/bootstrap';
+
+registerCeUiDefaults({
+	ensureStyles: true,
+	registerComponents: true,
+	iconBase: '/assets/icons/latest/nucleo/outline',
+	iconSpriteUrl: '/assets/icons/latest/nucleo.svg',
+	diagnostics: true,
+	scssHref: '/assets/ce-ui/ce-ui-scss.css',
+});
+
+If you need direct access to the webcomponents initializer (for fine-grained control):
+
+```ts
+import { initCeUiWebcomponents } from '@ce/ui-platform';
+
+initCeUiWebcomponents({
+  iconBase: '/assets/icons/latest/nucleo/outline',
+  diagnostics: true,
+});
+```
+```
+
+## App shell templates (token-only)
+
+The platform package ships token-only HTML/CSS templates so you can scaffold shells without custom CSS. Each template includes an `html` string and a `css` string (all values are token-backed).
+
+```ts
+import { cePlatformTemplates } from '@ce/ui-platform';
+
+const { primitives, appShell, references, starters } = cePlatformTemplates;
+// primitives.css provides layout primitives
+// appShell.html is a full shell with forms/tables/empty states
+// starters include LMS/CRM/ecom examples
+```
+
+## Notes
+
+- This is a thin wrapper; underlying packages live in `projects/libraries/ui/` and are private file deps.
+- No build pipeline is added here; consume via ES modules and let your bundler handle it.
+- Stack roadmap: `docs/ce-ui-framework/STACK_ROADMAP.md`.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@codeenvision/ui-platform",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "Aggregator for CE UI framework, web components, and SCSS (reusable across apps)",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./bootstrap": "./src/bootstrap.ts",
+    "./css": "./src/css-path.js",
+    "./templates": "./src/templates/index.ts"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "npm run typecheck"
+  },
+  "dependencies": {
+    "@ce/email-engine": "file:../communication/ce-email-engine",
+    "@ce/templates": "file:../templating/ce-templates",
+    "@codeenvision/ui-framework": "^1.0.5",
+    "@codeenvision/ui-kit": "^1.0.0",
+    "@codeenvision/ui-scss": "^1.0.2",
+    "@codeenvision/ui-webcomponents": "^1.0.10",
+    "ce-scss-vitepress": "file:../ce-ui-scss"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

package/src/bootstrap.ts

@@ -0,0 +1,67 @@
+import {
+  ensureGlobalStyles,
+  initCeUiWebcomponents,
+  setCeUiScssHref,
+} from '@codeenvision/ui-webcomponents';
+
+export type CeUiPlatformBootstrapOptions = {
+  /**
+   * Ensures shared global styles are present (typically token CSS + global resets).
+   * Defaults to true.
+   */
+  ensureStyles?: boolean;
+
+  /**
+   * Registers the default CE UI custom elements.
+   * Defaults to true.
+   */
+  registerComponents?: boolean;
+
+  /**
+   * Base path for icon assets (used by <ce-icon> when no sprite URL is configured).
+   */
+  iconBase?: string;
+
+  /**
+   * Optional sprite URL for icons (e.g. "/assets/icons/latest/nucleo.svg").
+   */
+  iconSpriteUrl?: string;
+
+  /**
+   * Enable runtime diagnostics for missing custom element registrations.
+   */
+  diagnostics?: boolean;
+
+  /**
+   * Optional href to the compiled ce-ui-scss bundle.
+   * Overrides the default and any data-ce-scss-href attribute.
+   */
+  scssHref?: string;
+};
+
+/**
+ * Primary bootstrap helper for apps consuming `@ce/ui-platform`.
+ *
+ * Call once at startup (client-side) to register custom elements and ensure
+ * shared global styles are present.
+ */
+export function registerCeUiDefaults(options: CeUiPlatformBootstrapOptions = {}): void {
+  const {
+    ensureStyles = true,
+    registerComponents = true,
+    iconBase,
+    iconSpriteUrl,
+    diagnostics,
+    scssHref,
+  } = options;
+
+  if (scssHref) {
+    setCeUiScssHref(scssHref);
+  }
+  if (ensureStyles) {
+    ensureGlobalStyles({ diagnostics });
+  }
+  if (registerComponents) {
+    initCeUiWebcomponents({ iconBase, iconSpriteUrl, diagnostics });
+  }
+}

package/src/css-path.js

@@ -0,0 +1,5 @@
+// Path helper for bundlers to include the CE SCSS build.
+// Import as: import cssPath from '@ce/ui-platform/css';
+const ceScssPath = 'ce-scss-vitepress/dist/ce-ui.css';
+export { ceScssPath };
+export default ceScssPath;

package/src/css-path.js.d.ts

@@ -0,0 +1,9 @@
+declare module "./css-path.js" {
+  /** Public URL to the built ce-ui-scss bundle (used by apps/Storybook to inject global tokens). */
+  export const ceScssPath: string;
+}
+
+declare module "@ce/ui-platform/css" {
+  /** Public URL to the built ce-ui-scss bundle (used by apps/Storybook to inject global tokens). */
+  export const ceScssPath: string;
+}

package/src/css-path.ts

@@ -0,0 +1,5 @@
+// Path helper for bundlers to include the CE SCSS build.
+// Import as: import { ceScssPath, ceScssMinimalPath } from '@ce/ui-platform/css';
+export const ceScssPath = 'ce-scss-vitepress/dist/ce-ui.css';
+export const ceScssMinimalPath = 'ce-scss-vitepress/dist/ce-ui-min.css';
+export default ceScssPath;

package/src/index.ts

@@ -0,0 +1,48 @@
+// Re-export browser-safe CE UI framework APIs so consumers can import from '@ce/ui-platform'
+// (Avoids pulling Node-only types like `node:fs` into browser applications.)
+export * from '@codeenvision/ui-framework/browser';
+export * from '@codeenvision/ui-framework/router';
+
+// Primary bootstrap helper
+export { registerCeUiDefaults, type CeUiPlatformBootstrapOptions } from './bootstrap.js';
+
+// Web component helpers
+export {
+    registerDefaultComponents,
+    initCeUiWebcomponents,
+    ensureGlobalStyles,
+    ensureThemeTokens,
+    defineComponentElement,
+    type CeUiInitOptions,
+    setCeUiScssHref,
+} from '@codeenvision/ui-webcomponents';
+
+// App shell templates (token-only)
+export {
+    cePlatformTemplates,
+    layoutPrimitives,
+    appShellTemplate,
+    referenceTemplates,
+    productTemplates,
+    type TemplateBundle,
+    type TemplateCollection,
+} from './templates/index.js';
+
+// CSS helper: consumers can import the compiled SCSS output path
+export { ceScssPath, ceScssMinimalPath } from './css-path';
+
+// Icon helpers from the shared UI kit
+export type { IconName } from '@codeenvision/ui-kit';
+export {
+    ICON_NAMES,
+    setIconAssetBase,
+    getIconAssetBase,
+    iconPath,
+    listIcons,
+    getIcon,
+    hasIcon,
+    registerIcon,
+    ICON_CONTENT_MAP,
+    getIconContent,
+    renderIconElement,
+} from '@codeenvision/ui-kit';

package/src/smoke.typecheck.ts

@@ -0,0 +1,22 @@
+// Compile-time smoke test for the public entrypoints.
+// This file is intentionally not executed at runtime; it is validated via `tsc --noEmit`.
+
+import {
+  registerCeUiDefaults,
+  type CeUiPlatformBootstrapOptions,
+} from '@ce/ui-platform';
+
+import { registerCeUiDefaults as registerFromSubpath } from '@ce/ui-platform/bootstrap';
+import { ceScssPath } from '@ce/ui-platform/css';
+import { cePlatformTemplates } from '@ce/ui-platform/templates';
+
+const options: CeUiPlatformBootstrapOptions = {
+  ensureStyles: false,
+  registerComponents: false,
+};
+
+registerCeUiDefaults(options);
+registerFromSubpath(options);
+
+void ceScssPath;
+void cePlatformTemplates;

package/src/templates/app-shell.ts

@@ -0,0 +1,220 @@
+import type { TemplateBundle } from "./types.js";
+import { layoutPrimitives } from "./layout-primitives.js";
+
+export const appShellTemplate: TemplateBundle = {
+  id: "ce.app.shell",
+  name: "CE App Shell",
+  description: "App shell kit with layout, nav, header, sidebars, empty states, forms, and tables.",
+  html: `
+<div class="ce-shell">
+  <header class="ce-shell__header">
+    <div class="ce-shell__brand">CE Platform</div>
+    <nav class="ce-shell__nav">
+      <a class="ce-shell__link is-active" href="#">Home</a>
+      <a class="ce-shell__link" href="#">Projects</a>
+      <a class="ce-shell__link" href="#">Security</a>
+      <a class="ce-shell__link" href="#">Settings</a>
+    </nav>
+    <div class="ce-shell__actions">
+      <button class="ce-shell__button is-ghost">Support</button>
+      <button class="ce-shell__button is-primary">New project</button>
+    </div>
+  </header>
+  <div class="ce-shell__body">
+    <aside class="ce-shell__sidebar">
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Overview</div>
+        <a class="ce-shell__item is-active" href="#">Dashboard</a>
+        <a class="ce-shell__item" href="#">Workspaces</a>
+        <a class="ce-shell__item" href="#">Reports</a>
+      </div>
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Admin</div>
+        <a class="ce-shell__item" href="#">Members</a>
+        <a class="ce-shell__item" href="#">Billing</a>
+      </div>
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Status</div>
+        <div class="ce-empty">
+          <div class="ce-empty__title">No alerts</div>
+          <div class="ce-empty__subtitle">All systems operating normally.</div>
+          <button class="ce-shell__button is-ghost">View logs</button>
+        </div>
+      </div>
+    </aside>
+    <main class="ce-shell__main">
+      <div class="ce-page">
+        <div class="ce-page__header">
+          <div>
+            <div class="ce-page__eyebrow">Workspace</div>
+            <h1 class="ce-page__title">Operations hub</h1>
+            <p class="ce-page__subtitle">Standardized CE UI app shell with token-only styles.</p>
+          </div>
+          <div class="ce-page__actions">
+            <button class="ce-shell__button is-ghost">Filters</button>
+            <button class="ce-shell__button is-primary">Create</button>
+          </div>
+        </div>
+        <div class="ce-grid ce-grid--3">
+          <div class="ce-card">
+            <div class="ce-card__label">Active environments</div>
+            <div class="ce-card__value">12</div>
+            <div class="ce-card__meta">2 new this month</div>
+          </div>
+          <div class="ce-card">
+            <div class="ce-card__label">Open incidents</div>
+            <div class="ce-card__value">3</div>
+            <div class="ce-card__meta">All assigned</div>
+          </div>
+          <div class="ce-card">
+            <div class="ce-card__label">Uptime</div>
+            <div class="ce-card__value">99.98%</div>
+            <div class="ce-card__meta">Last 30 days</div>
+          </div>
+        </div>
+        <div class="ce-surface">
+          <div class="ce-surface__header">
+            <div>
+              <div class="ce-surface__title">Requests</div>
+              <div class="ce-surface__subtitle">Token-only table and form blocks.</div>
+            </div>
+            <button class="ce-shell__button is-ghost">Export</button>
+          </div>
+          <div class="ce-stack">
+            <form class="ce-form">
+              <label class="ce-form__label">Search</label>
+              <input class="ce-form__input" type="search" placeholder="Find request" />
+              <div class="ce-form__row">
+                <select class="ce-form__input">
+                  <option>Status: All</option>
+                </select>
+                <button class="ce-shell__button is-primary">Apply</button>
+              </div>
+            </form>
+            <div class="ce-table">
+              <div class="ce-table__head">
+                <div class="ce-table__cell">Request</div>
+                <div class="ce-table__cell">Owner</div>
+                <div class="ce-table__cell">Status</div>
+                <div class="ce-table__cell">Updated</div>
+              </div>
+              <div class="ce-table__row">
+                <div class="ce-table__cell">Audit export</div>
+                <div class="ce-table__cell">Riley</div>
+                <div class="ce-table__cell"><span class="ce-pill is-success">Approved</span></div>
+                <div class="ce-table__cell">5m ago</div>
+              </div>
+              <div class="ce-table__row">
+                <div class="ce-table__cell">Billing update</div>
+                <div class="ce-table__cell">Jordan</div>
+                <div class="ce-table__cell"><span class="ce-pill is-warning">Review</span></div>
+                <div class="ce-table__cell">2h ago</div>
+              </div>
+              <div class="ce-table__row">
+                <div class="ce-table__cell">New workspace</div>
+                <div class="ce-table__cell">Casey</div>
+                <div class="ce-table__cell"><span class="ce-pill is-neutral">Open</span></div>
+                <div class="ce-table__cell">Yesterday</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+`.trim(),
+  css: `
+${layoutPrimitives.css}
+
+.ce-empty {
+  padding: var(--ce-spacing-md, 1rem);
+  border: 1px dashed var(--ce-shell-border);
+  border-radius: var(--ce-shell-radius);
+  background: var(--ce-shell-surface);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-spacing-xs, 0.25rem);
+}
+
+.ce-empty__title {
+  font-weight: 600;
+}
+
+.ce-empty__subtitle {
+  color: var(--ce-shell-muted);
+  font-size: var(--ce-font-size-sm, 0.875rem);
+}
+
+.ce-form {
+  display: grid;
+  gap: var(--ce-spacing-sm, 0.5rem);
+}
+
+.ce-form__label {
+  font-size: var(--ce-font-size-sm, 0.875rem);
+  color: var(--ce-shell-muted);
+}
+
+.ce-form__input {
+  padding: var(--ce-spacing-sm, 0.5rem) var(--ce-spacing-md, 1rem);
+  border-radius: var(--ce-shell-radius);
+  border: 1px solid var(--ce-shell-border);
+  background: var(--ce-shell-surface);
+}
+
+.ce-form__row {
+  display: flex;
+  gap: var(--ce-spacing-sm, 0.5rem);
+  flex-wrap: wrap;
+}
+
+.ce-table {
+  display: grid;
+  gap: var(--ce-spacing-xs, 0.25rem);
+}
+
+.ce-table__head,
+.ce-table__row {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr;
+  gap: var(--ce-spacing-sm, 0.5rem);
+  padding: var(--ce-spacing-sm, 0.5rem) 0;
+  border-bottom: 1px solid var(--ce-shell-border);
+}
+
+.ce-table__head {
+  font-weight: 600;
+  font-size: var(--ce-font-size-sm, 0.875rem);
+  color: var(--ce-shell-muted);
+}
+
+.ce-table__cell {
+  font-size: var(--ce-font-size-sm, 0.875rem);
+}
+
+.ce-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--ce-spacing-xxs, 0.125rem) var(--ce-spacing-sm, 0.5rem);
+  border-radius: var(--ce-radius-pill, 9999px);
+  font-size: var(--ce-font-size-xs, 0.75rem);
+  background: var(--ce-shell-border);
+  color: var(--ce-shell-text);
+}
+
+.ce-pill.is-success {
+  background: var(--ce-color-success, #16a34a);
+  color: #fff;
+}
+
+.ce-pill.is-warning {
+  background: var(--ce-color-warning, #f59e0b);
+  color: #fff;
+}
+
+.ce-pill.is-neutral {
+  background: var(--ce-shell-border);
+}
+`.trim(),
+};

package/src/templates/index.ts

@@ -0,0 +1,18 @@
+export type { TemplateBundle, TemplateCollection } from "./types.js";
+export { layoutPrimitives } from "./layout-primitives.js";
+export { appShellTemplate } from "./app-shell.js";
+export { referenceTemplates } from "./reference-templates.js";
+export { productTemplates } from "./product-templates.js";
+
+import type { TemplateCollection } from "./types.js";
+import { layoutPrimitives } from "./layout-primitives.js";
+import { appShellTemplate } from "./app-shell.js";
+import { referenceTemplates } from "./reference-templates.js";
+import { productTemplates } from "./product-templates.js";
+
+export const cePlatformTemplates: TemplateCollection = {
+  primitives: layoutPrimitives,
+  appShell: appShellTemplate,
+  references: referenceTemplates,
+  starters: productTemplates,
+};

package/src/templates/layout-primitives.ts

@@ -0,0 +1,344 @@
+import type { TemplateBundle } from "./types.js";
+
+export const layoutPrimitives: TemplateBundle = {
+  id: "ce.layout.primitives",
+  name: "CE Layout Primitives",
+  description: "Token-only layout primitives (no web components required).",
+  html: `
+<div class="ce-shell">
+  <header class="ce-shell__header">
+    <div class="ce-shell__brand">Cluster Envision</div>
+    <nav class="ce-shell__nav">
+      <a class="ce-shell__link is-active" href="#">Overview</a>
+      <a class="ce-shell__link" href="#">Projects</a>
+      <a class="ce-shell__link" href="#">Security</a>
+      <a class="ce-shell__link" href="#">Billing</a>
+    </nav>
+    <div class="ce-shell__actions">
+      <button class="ce-shell__button">New</button>
+      <button class="ce-shell__button">Invite</button>
+    </div>
+  </header>
+  <div class="ce-shell__body">
+    <aside class="ce-shell__sidebar">
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Workspace</div>
+        <a class="ce-shell__item is-active" href="#">Dashboard</a>
+        <a class="ce-shell__item" href="#">Operations</a>
+        <a class="ce-shell__item" href="#">Compliance</a>
+      </div>
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Reports</div>
+        <a class="ce-shell__item" href="#">Usage</a>
+        <a class="ce-shell__item" href="#">Incidents</a>
+      </div>
+    </aside>
+    <main class="ce-shell__main">
+      <div class="ce-page">
+        <div class="ce-page__header">
+          <div>
+            <div class="ce-page__eyebrow">Overview</div>
+            <h1 class="ce-page__title">Security posture</h1>
+            <p class="ce-page__subtitle">Track environment health with token-only primitives.</p>
+          </div>
+          <div class="ce-page__actions">
+            <button class="ce-shell__button is-ghost">Export</button>
+            <button class="ce-shell__button is-primary">Create report</button>
+          </div>
+        </div>
+        <div class="ce-grid ce-grid--3">
+          <div class="ce-card">
+            <div class="ce-card__label">Active policies</div>
+            <div class="ce-card__value">128</div>
+            <div class="ce-card__meta">+12 this week</div>
+          </div>
+          <div class="ce-card">
+            <div class="ce-card__label">Open findings</div>
+            <div class="ce-card__value">14</div>
+            <div class="ce-card__meta">2 urgent</div>
+          </div>
+          <div class="ce-card">
+            <div class="ce-card__label">Services</div>
+            <div class="ce-card__value">23</div>
+            <div class="ce-card__meta">Across 5 regions</div>
+          </div>
+        </div>
+        <div class="ce-surface">
+          <div class="ce-surface__header">
+            <div>
+              <div class="ce-surface__title">Recent activity</div>
+              <div class="ce-surface__subtitle">Latest changes across the org.</div>
+            </div>
+            <button class="ce-shell__button is-ghost">View all</button>
+          </div>
+          <div class="ce-stack">
+            <div class="ce-row">
+              <div>
+                <div class="ce-row__title">Policy updated</div>
+                <div class="ce-row__subtitle">SOC2 data retention rule</div>
+              </div>
+              <div class="ce-row__meta">2m ago</div>
+            </div>
+            <div class="ce-row">
+              <div>
+                <div class="ce-row__title">New alert rule</div>
+                <div class="ce-row__subtitle">Cloud storage access audit</div>
+              </div>
+              <div class="ce-row__meta">30m ago</div>
+            </div>
+            <div class="ce-row">
+              <div>
+                <div class="ce-row__title">Team member added</div>
+                <div class="ce-row__subtitle">Morgan Lee joined Compliance</div>
+              </div>
+              <div class="ce-row__meta">Today</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+`.trim(),
+  css: `
+:root {
+  --ce-shell-bg: var(--ce-color-background, #f7f7fb);
+  --ce-shell-surface: var(--ce-color-surface, #ffffff);
+  --ce-shell-border: var(--ce-color-border, #e5e7eb);
+  --ce-shell-text: var(--ce-color-text, #1f2933);
+  --ce-shell-muted: var(--ce-color-text-muted, #6b7280);
+  --ce-shell-accent: var(--ce-color-accent, #1a73e8);
+  --ce-shell-radius: var(--ce-radius-md, 8px);
+  --ce-shell-gap: var(--ce-spacing-lg, 1.5rem);
+  --ce-shell-padding: var(--ce-spacing-lg, 1.5rem);
+}
+
+.ce-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--ce-shell-bg);
+  color: var(--ce-shell-text);
+  font-family: var(--ce-font-family, system-ui);
+}
+
+.ce-shell__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ce-shell-gap);
+  padding: var(--ce-shell-padding);
+  border-bottom: 1px solid var(--ce-shell-border);
+  background: var(--ce-shell-surface);
+}
+
+.ce-shell__brand {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.ce-shell__nav {
+  display: flex;
+  gap: var(--ce-spacing-md, 1rem);
+  flex-wrap: wrap;
+}
+
+.ce-shell__link {
+  color: var(--ce-shell-muted);
+  text-decoration: none;
+  font-size: var(--ce-font-size-sm, 0.875rem);
+}
+
+.ce-shell__link.is-active {
+  color: var(--ce-shell-text);
+  font-weight: 600;
+}
+
+.ce-shell__actions {
+  display: flex;
+  gap: var(--ce-spacing-sm, 0.5rem);
+}
+
+.ce-shell__button {
+  border-radius: var(--ce-shell-radius);
+  padding: var(--ce-spacing-sm, 0.5rem) var(--ce-spacing-md, 1rem);
+  border: 1px solid var(--ce-shell-border);
+  background: var(--ce-shell-surface);
+  color: var(--ce-shell-text);
+  font-size: var(--ce-font-size-sm, 0.875rem);
+  cursor: pointer;
+}
+
+.ce-shell__button.is-primary {
+  background: var(--ce-shell-accent);
+  border-color: var(--ce-shell-accent);
+  color: #fff;
+}
+
+.ce-shell__button.is-ghost {
+  background: transparent;
+}
+
+.ce-shell__body {
+  display: grid;
+  grid-template-columns: minmax(200px, 260px) 1fr;
+  min-height: 0;
+  flex: 1;
+}
+
+.ce-shell__sidebar {
+  padding: var(--ce-shell-padding);
+  background: var(--ce-shell-surface);
+  border-right: 1px solid var(--ce-shell-border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-spacing-lg, 1.5rem);
+}
+
+.ce-shell__section-title {
+  font-size: var(--ce-font-size-xs, 0.75rem);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ce-shell-muted);
+  margin-bottom: var(--ce-spacing-sm, 0.5rem);
+}
+
+.ce-shell__item {
+  color: var(--ce-shell-text);
+  text-decoration: none;
+  padding: var(--ce-spacing-xs, 0.25rem) 0;
+}
+
+.ce-shell__item.is-active {
+  font-weight: 600;
+}
+
+.ce-shell__main {
+  padding: var(--ce-shell-padding);
+  overflow: auto;
+}
+
+.ce-page__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: var(--ce-spacing-lg, 1.5rem);
+  margin-bottom: var(--ce-spacing-lg, 1.5rem);
+}
+
+.ce-page__eyebrow {
+  font-size: var(--ce-font-size-xs, 0.75rem);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ce-shell-muted);
+}
+
+.ce-page__title {
+  margin: 0;
+  font-size: var(--ce-font-size-xl, 1.5rem);
+}
+
+.ce-page__subtitle {
+  margin: var(--ce-spacing-xs, 0.25rem) 0 0;
+  color: var(--ce-shell-muted);
+}
+
+.ce-page__actions {
+  display: flex;
+  gap: var(--ce-spacing-sm, 0.5rem);
+}
+
+.ce-grid {
+  display: grid;
+  gap: var(--ce-spacing-md, 1rem);
+  margin-bottom: var(--ce-spacing-lg, 1.5rem);
+}
+
+.ce-grid--3 {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.ce-card {
+  padding: var(--ce-spacing-md, 1rem);
+  border-radius: var(--ce-shell-radius);
+  background: var(--ce-shell-surface);
+  border: 1px solid var(--ce-shell-border);
+}
+
+.ce-card__label {
+  color: var(--ce-shell-muted);
+  font-size: var(--ce-font-size-xs, 0.75rem);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ce-card__value {
+  font-size: var(--ce-font-size-xl, 1.5rem);
+  font-weight: 600;
+  margin-top: var(--ce-spacing-xs, 0.25rem);
+}
+
+.ce-card__meta {
+  color: var(--ce-shell-muted);
+  margin-top: var(--ce-spacing-xs, 0.25rem);
+  font-size: var(--ce-font-size-sm, 0.875rem);
+}
+
+.ce-surface {
+  background: var(--ce-shell-surface);
+  border: 1px solid var(--ce-shell-border);
+  border-radius: var(--ce-shell-radius);
+  padding: var(--ce-spacing-lg, 1.5rem);
+}
+
+.ce-surface__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ce-spacing-md, 1rem);
+  margin-bottom: var(--ce-spacing-md, 1rem);
+}
+
+.ce-surface__title {
+  font-weight: 600;
+}
+
+.ce-surface__subtitle {
+  color: var(--ce-shell-muted);
+  font-size: var(--ce-font-size-sm, 0.875rem);
+}
+
+.ce-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-spacing-sm, 0.5rem);
+}
+
+.ce-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ce-spacing-md, 1rem);
+  padding: var(--ce-spacing-sm, 0.5rem) 0;
+  border-bottom: 1px solid var(--ce-shell-border);
+}
+
+.ce-row:last-child {
+  border-bottom: none;
+}
+
+.ce-row__title {
+  font-weight: 500;
+}
+
+.ce-row__subtitle {
+  color: var(--ce-shell-muted);
+  font-size: var(--ce-font-size-sm, 0.875rem);
+}
+
+.ce-row__meta {
+  color: var(--ce-shell-muted);
+  font-size: var(--ce-font-size-xs, 0.75rem);
+}
+`.trim(),
+};

package/src/templates/product-templates.ts

@@ -0,0 +1,263 @@
+import type { TemplateBundle } from "./types.js";
+import { layoutPrimitives } from "./layout-primitives.js";
+
+export const productTemplates: TemplateBundle[] = [
+  {
+    id: "ce.starter.lms",
+    name: "LMS Starter",
+    description: "Token-only LMS starter shell with course grid and activity feed.",
+    html: `
+<div class="ce-shell">
+  <header class="ce-shell__header">
+    <div class="ce-shell__brand">CE Learn</div>
+    <nav class="ce-shell__nav">
+      <a class="ce-shell__link is-active" href="#">Courses</a>
+      <a class="ce-shell__link" href="#">Assignments</a>
+      <a class="ce-shell__link" href="#">People</a>
+    </nav>
+    <button class="ce-shell__button is-primary">Create course</button>
+  </header>
+  <div class="ce-shell__body">
+    <aside class="ce-shell__sidebar">
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Current term</div>
+        <a class="ce-shell__item is-active" href="#">Spring 2026</a>
+        <a class="ce-shell__item" href="#">Fall 2025</a>
+      </div>
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Quick links</div>
+        <a class="ce-shell__item" href="#">Grades</a>
+        <a class="ce-shell__item" href="#">Announcements</a>
+      </div>
+    </aside>
+    <main class="ce-shell__main">
+      <div class="ce-page__header">
+        <div>
+          <div class="ce-page__eyebrow">Dashboard</div>
+          <h1 class="ce-page__title">Your courses</h1>
+          <p class="ce-page__subtitle">Stay on top of progress and upcoming work.</p>
+        </div>
+        <button class="ce-shell__button is-ghost">Export</button>
+      </div>
+      <div class="ce-grid ce-grid--3">
+        <div class="ce-card">
+          <div class="ce-card__label">Data Ethics</div>
+          <div class="ce-card__value">12 modules</div>
+          <div class="ce-card__meta">4 assignments due</div>
+        </div>
+        <div class="ce-card">
+          <div class="ce-card__label">Cloud Security</div>
+          <div class="ce-card__value">9 modules</div>
+          <div class="ce-card__meta">1 assignment due</div>
+        </div>
+        <div class="ce-card">
+          <div class="ce-card__label">Incident Response</div>
+          <div class="ce-card__value">15 modules</div>
+          <div class="ce-card__meta">New discussion</div>
+        </div>
+      </div>
+      <div class="ce-surface">
+        <div class="ce-surface__header">
+          <div>
+            <div class="ce-surface__title">Upcoming activity</div>
+            <div class="ce-surface__subtitle">Assignments and announcements.</div>
+          </div>
+          <button class="ce-shell__button is-ghost">View all</button>
+        </div>
+        <div class="ce-stack">
+          <div class="ce-row">
+            <div>
+              <div class="ce-row__title">Quiz: Data handling</div>
+              <div class="ce-row__subtitle">Due in 2 days</div>
+            </div>
+            <div class="ce-row__meta">Course 1</div>
+          </div>
+          <div class="ce-row">
+            <div>
+              <div class="ce-row__title">Assignment: Policy audit</div>
+              <div class="ce-row__subtitle">Due next week</div>
+            </div>
+            <div class="ce-row__meta">Course 2</div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+`.trim(),
+    css: layoutPrimitives.css,
+  },
+  {
+    id: "ce.starter.crm",
+    name: "CRM Starter",
+    description: "Token-only CRM starter with pipeline highlights and task queue.",
+    html: `
+<div class="ce-shell">
+  <header class="ce-shell__header">
+    <div class="ce-shell__brand">CE CRM</div>
+    <nav class="ce-shell__nav">
+      <a class="ce-shell__link is-active" href="#">Pipeline</a>
+      <a class="ce-shell__link" href="#">Accounts</a>
+      <a class="ce-shell__link" href="#">Tasks</a>
+    </nav>
+    <button class="ce-shell__button is-primary">New deal</button>
+  </header>
+  <div class="ce-shell__body">
+    <aside class="ce-shell__sidebar">
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Teams</div>
+        <a class="ce-shell__item is-active" href="#">Enterprise</a>
+        <a class="ce-shell__item" href="#">Mid-market</a>
+      </div>
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Views</div>
+        <a class="ce-shell__item" href="#">At risk</a>
+        <a class="ce-shell__item" href="#">New leads</a>
+      </div>
+    </aside>
+    <main class="ce-shell__main">
+      <div class="ce-page__header">
+        <div>
+          <div class="ce-page__eyebrow">Pipeline</div>
+          <h1 class="ce-page__title">Quarterly deals</h1>
+          <p class="ce-page__subtitle">Track momentum and next best actions.</p>
+        </div>
+        <div class="ce-page__actions">
+          <button class="ce-shell__button is-ghost">Segments</button>
+          <button class="ce-shell__button is-primary">Assign</button>
+        </div>
+      </div>
+      <div class="ce-grid ce-grid--3">
+        <div class="ce-card">
+          <div class="ce-card__label">Qualified</div>
+          <div class="ce-card__value">$4.2M</div>
+          <div class="ce-card__meta">18 deals</div>
+        </div>
+        <div class="ce-card">
+          <div class="ce-card__label">Negotiation</div>
+          <div class="ce-card__value">$2.8M</div>
+          <div class="ce-card__meta">9 deals</div>
+        </div>
+        <div class="ce-card">
+          <div class="ce-card__label">Renewals</div>
+          <div class="ce-card__value">$1.6M</div>
+          <div class="ce-card__meta">4 at risk</div>
+        </div>
+      </div>
+      <div class="ce-surface">
+        <div class="ce-surface__header">
+          <div>
+            <div class="ce-surface__title">Task queue</div>
+            <div class="ce-surface__subtitle">Follow-ups requiring action.</div>
+          </div>
+          <button class="ce-shell__button is-ghost">Open tasks</button>
+        </div>
+        <div class="ce-stack">
+          <div class="ce-row">
+            <div>
+              <div class="ce-row__title">Call Zephyr Labs</div>
+              <div class="ce-row__subtitle">Negotiation stage</div>
+            </div>
+            <div class="ce-row__meta">Due today</div>
+          </div>
+          <div class="ce-row">
+            <div>
+              <div class="ce-row__title">Send proposal update</div>
+              <div class="ce-row__subtitle">Pipeline: Renewal</div>
+            </div>
+            <div class="ce-row__meta">Tomorrow</div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+`.trim(),
+    css: layoutPrimitives.css,
+  },
+  {
+    id: "ce.starter.ecom",
+    name: "Ecommerce Starter",
+    description: "Token-only ecommerce starter with orders and inventory summaries.",
+    html: `
+<div class="ce-shell">
+  <header class="ce-shell__header">
+    <div class="ce-shell__brand">CE Commerce</div>
+    <nav class="ce-shell__nav">
+      <a class="ce-shell__link is-active" href="#">Orders</a>
+      <a class="ce-shell__link" href="#">Catalog</a>
+      <a class="ce-shell__link" href="#">Customers</a>
+    </nav>
+    <button class="ce-shell__button is-primary">Add product</button>
+  </header>
+  <div class="ce-shell__body">
+    <aside class="ce-shell__sidebar">
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Storefronts</div>
+        <a class="ce-shell__item is-active" href="#">Global</a>
+        <a class="ce-shell__item" href="#">EU</a>
+      </div>
+      <div class="ce-shell__section">
+        <div class="ce-shell__section-title">Operations</div>
+        <a class="ce-shell__item" href="#">Inventory</a>
+        <a class="ce-shell__item" href="#">Fulfillment</a>
+      </div>
+    </aside>
+    <main class="ce-shell__main">
+      <div class="ce-page__header">
+        <div>
+          <div class="ce-page__eyebrow">Overview</div>
+          <h1 class="ce-page__title">Order pulse</h1>
+          <p class="ce-page__subtitle">Track demand and fulfillment daily.</p>
+        </div>
+        <button class="ce-shell__button is-ghost">Download report</button>
+      </div>
+      <div class="ce-grid ce-grid--3">
+        <div class="ce-card">
+          <div class="ce-card__label">Orders today</div>
+          <div class="ce-card__value">312</div>
+          <div class="ce-card__meta">+8% vs yesterday</div>
+        </div>
+        <div class="ce-card">
+          <div class="ce-card__label">Fulfillment</div>
+          <div class="ce-card__value">96%</div>
+          <div class="ce-card__meta">On-time</div>
+        </div>
+        <div class="ce-card">
+          <div class="ce-card__label">Low inventory</div>
+          <div class="ce-card__value">7 SKUs</div>
+          <div class="ce-card__meta">Needs reorder</div>
+        </div>
+      </div>
+      <div class="ce-surface">
+        <div class="ce-surface__header">
+          <div>
+            <div class="ce-surface__title">Recent orders</div>
+            <div class="ce-surface__subtitle">Token-only list patterns.</div>
+          </div>
+          <button class="ce-shell__button is-ghost">View all</button>
+        </div>
+        <div class="ce-stack">
+          <div class="ce-row">
+            <div>
+              <div class="ce-row__title">Order #1842</div>
+              <div class="ce-row__subtitle">Priority shipping</div>
+            </div>
+            <div class="ce-row__meta">$1,240</div>
+          </div>
+          <div class="ce-row">
+            <div>
+              <div class="ce-row__title">Order #1841</div>
+              <div class="ce-row__subtitle">Standard</div>
+            </div>
+            <div class="ce-row__meta">$830</div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+`.trim(),
+    css: layoutPrimitives.css,
+  },
+];

package/src/templates/reference-templates.ts

@@ -0,0 +1,99 @@
+import type { TemplateBundle } from "./types.js";
+import { layoutPrimitives } from "./layout-primitives.js";
+
+export const referenceTemplates: TemplateBundle[] = [
+  {
+    id: "ce.reference.empty-states",
+    name: "Empty States Reference",
+    description: "Token-only empty state patterns with no custom CSS beyond tokens.",
+    html: `
+<div class="ce-grid ce-grid--3">
+  <div class="ce-surface ce-empty">
+    <div class="ce-empty__title">No data yet</div>
+    <div class="ce-empty__subtitle">Connect a source to begin collecting telemetry.</div>
+    <button class="ce-shell__button is-primary">Connect source</button>
+  </div>
+  <div class="ce-surface ce-empty">
+    <div class="ce-empty__title">No incidents</div>
+    <div class="ce-empty__subtitle">Everything looks healthy across the workspace.</div>
+    <button class="ce-shell__button is-ghost">View history</button>
+  </div>
+  <div class="ce-surface ce-empty">
+    <div class="ce-empty__title">No team members</div>
+    <div class="ce-empty__subtitle">Invite teammates to collaborate in real time.</div>
+    <button class="ce-shell__button is-primary">Invite</button>
+  </div>
+</div>
+`.trim(),
+    css: `
+${layoutPrimitives.css}
+
+.ce-empty {
+  display: grid;
+  gap: var(--ce-spacing-xs, 0.25rem);
+  padding: var(--ce-spacing-lg, 1.5rem);
+  text-align: left;
+}
+
+.ce-empty__title {
+  font-weight: 600;
+}
+
+.ce-empty__subtitle {
+  color: var(--ce-shell-muted);
+}
+`.trim(),
+  },
+  {
+    id: "ce.reference.form-table",
+    name: "Form + Table Reference",
+    description: "Token-only table and form shell with no custom CSS beyond tokens.",
+    html: `
+<div class="ce-surface">
+  <div class="ce-surface__header">
+    <div>
+      <div class="ce-surface__title">Approvals</div>
+      <div class="ce-surface__subtitle">Standard table layout without extra CSS.</div>
+    </div>
+    <button class="ce-shell__button is-ghost">Download</button>
+  </div>
+  <form class="ce-form">
+    <label class="ce-form__label">Filter</label>
+    <input class="ce-form__input" placeholder="Search by name" />
+    <div class="ce-form__row">
+      <select class="ce-form__input">
+        <option>Status</option>
+      </select>
+      <select class="ce-form__input">
+        <option>Owner</option>
+      </select>
+      <button class="ce-shell__button is-primary">Apply</button>
+    </div>
+  </form>
+  <div class="ce-table">
+    <div class="ce-table__head">
+      <div class="ce-table__cell">Request</div>
+      <div class="ce-table__cell">Owner</div>
+      <div class="ce-table__cell">Status</div>
+      <div class="ce-table__cell">Due</div>
+    </div>
+    <div class="ce-table__row">
+      <div class="ce-table__cell">Storage review</div>
+      <div class="ce-table__cell">Jules</div>
+      <div class="ce-table__cell"><span class="ce-pill is-warning">Review</span></div>
+      <div class="ce-table__cell">Today</div>
+    </div>
+    <div class="ce-table__row">
+      <div class="ce-table__cell">SOC2 export</div>
+      <div class="ce-table__cell">Harper</div>
+      <div class="ce-table__cell"><span class="ce-pill is-success">Approved</span></div>
+      <div class="ce-table__cell">Tomorrow</div>
+    </div>
+  </div>
+</div>
+`.trim(),
+    css: `
+${layoutPrimitives.css}
+`.trim(),
+  },
+];

package/src/templates/types.ts

@@ -0,0 +1,14 @@
+export type TemplateBundle = {
+  id: string;
+  name: string;
+  description: string;
+  html: string;
+  css: string;
+};
+
+export type TemplateCollection = {
+  primitives: TemplateBundle;
+  appShell: TemplateBundle;
+  references: TemplateBundle[];
+  starters: TemplateBundle[];
+};

package/src/types/node-shims.d.ts

@@ -0,0 +1,27 @@
+// Minimal shims for Node.js built-in module specifiers used by type declarations
+// coming from framework/webcomponents packages in this monorepo.
+//
+// NOTE: This does not aim to be a full Node typings replacement.
+// Consumers who use Node-specific APIs should install `@types/node` in their app.
+
+declare module 'node:fs' {
+  const fs: any;
+  namespace fs {
+    export const promises: any;
+  }
+  export = fs;
+}
+
+declare module 'node:http' {
+  const http: any;
+  namespace http {
+    export type IncomingMessage = any;
+    export type ServerResponse = any;
+    export type Server = any;
+  }
+  export = http;
+}
+
+declare module 'node:url' {
+  export type URL = any;
+}

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "@ce/ui-platform": [
+        "./src/index.ts"
+      ],
+      "@ce/ui-platform/bootstrap": [
+        "./src/bootstrap.ts"
+      ],
+      "@ce/ui-platform/css": [
+        "./src/css-path.ts"
+      ],
+      "@ce/templates": [
+        "../../templating/ce-templates/src/index.ts"
+      ],
+      "@ce/email-engine": [
+        "../../communication/ce-email-engine/src/index.ts"
+      ],
+      "@ce/ui-platform/templates": [
+        "./src/templates/index.ts"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts"
+  ]
+}