@1kbirds/chidori-mock-hub 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# @1kbirds/chidori-mock-hub
+
+Navigation hub for the Chidori mock packages. The hub embeds each existing React review app with its own seeded in-memory service instance and provides a home page for moving between virtual apps.
+
+## Included Apps
+
+- Google Calendar: `@1kbirds/chidori-mock-google-calendar`
+- Gmail: `@1kbirds/chidori-mock-gmail`
+- Salesforce: `@1kbirds/chidori-mock-salesforce`
+- Slack: `@1kbirds/chidori-mock-slack`
+- Linear: `@1kbirds/chidori-mock-linear`
+
+## Review
+
+Run verification:
+
+```sh
+npm run build
+npm test
+```
+
+Start the hub:
+
+```sh
+npm run dev:hub
+```
+
+Then open `http://127.0.0.1:5178/`.
+
+The home page links to each embedded app. Each app also shows its standalone dev command and URL.

package/dist/catalog.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from "react";
+import { type HubAppId, type HubAppMetadata } from "./metadata";
+export type { HubAppId };
+export interface HubAppDefinition extends HubAppMetadata {
+    App: ComponentType;
+}
+export declare const hubApps: HubAppDefinition[];
+export declare function getHubApp(id: string | undefined): HubAppDefinition | undefined;
+//# sourceMappingURL=catalog.d.ts.map

package/dist/catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../src/catalog.ts"],"names":[],"mappings":"AAUA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAkB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAEhF,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,GAAG,EAAE,aAAa,CAAC;CACpB;AAmCD,eAAO,MAAM,OAAO,EAAE,gBAAgB,EAGnC,CAAC;AAEJ,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAE9E"}

package/dist/catalog.js

@@ -0,0 +1,46 @@
+import { createGmailMock, demoSeed as gmailSeed } from "@1kbirds/chidori-mock-gmail";
+import { GmailMockApp } from "@1kbirds/chidori-mock-gmail/ui";
+import { createGoogleCalendarMock, demoSeed as googleCalendarSeed } from "@1kbirds/chidori-mock-google-calendar";
+import { GoogleCalendarMockApp } from "@1kbirds/chidori-mock-google-calendar/ui";
+import { createLinearMock, demoSeed as linearSeed } from "@1kbirds/chidori-mock-linear";
+import { LinearMockApp } from "@1kbirds/chidori-mock-linear/ui";
+import { createSalesforceMock, demoSeed as salesforceSeed } from "@1kbirds/chidori-mock-salesforce";
+import { SalesforceMockApp } from "@1kbirds/chidori-mock-salesforce/ui";
+import { createSlackMock, demoSeed as slackSeed } from "@1kbirds/chidori-mock-slack";
+import { SlackMockApp } from "@1kbirds/chidori-mock-slack/ui";
+import { createElement } from "react";
+import { hubAppMetadata } from "./metadata";
+const calendarMock = createGoogleCalendarMock({
+    now: "2026-06-01T15:00:00.000Z",
+    seed: googleCalendarSeed,
+});
+const gmailMock = createGmailMock({
+    now: "2026-06-01T16:30:00.000Z",
+    seed: gmailSeed,
+});
+const salesforceMock = createSalesforceMock({
+    now: "2026-06-01T15:00:00.000Z",
+    seed: salesforceSeed,
+});
+const slackMock = createSlackMock({
+    now: "2026-06-01T17:00:00.000Z",
+    seed: slackSeed,
+});
+const linearMock = createLinearMock({
+    now: "2026-06-01T17:30:00.000Z",
+    seed: linearSeed,
+});
+const appComponents = {
+    calendar: () => createElement(GoogleCalendarMockApp, { mock: calendarMock }),
+    gmail: () => createElement(GmailMockApp, { mock: gmailMock }),
+    salesforce: () => createElement(SalesforceMockApp, { mock: salesforceMock }),
+    slack: () => createElement(SlackMockApp, { mock: slackMock }),
+    linear: () => createElement(LinearMockApp, { mock: linearMock }),
+};
+export const hubApps = hubAppMetadata.map((app) => ({
+    ...app,
+    App: appComponents[app.id],
+}));
+export function getHubApp(id) {
+    return hubApps.find((app) => app.id === id);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { getHubAppMetadata, hubAppMetadata } from "./metadata";
+export type { HubAppId, HubAppMetadata } from "./metadata";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { getHubAppMetadata, hubAppMetadata } from "./metadata";

package/dist/metadata.d.ts

@@ -0,0 +1,15 @@
+export type HubAppId = "calendar" | "gmail" | "salesforce" | "slack" | "linear";
+export interface HubAppMetadata {
+    id: HubAppId;
+    name: string;
+    packageName: string;
+    category: string;
+    description: string;
+    route: string;
+    devCommand: string;
+    standaloneUrl: string;
+    capabilities: string[];
+}
+export declare const hubAppMetadata: HubAppMetadata[];
+export declare function getHubAppMetadata(id: string | undefined): HubAppMetadata | undefined;
+//# sourceMappingURL=metadata.d.ts.map

package/dist/metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../src/metadata.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,QAAQ,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,cAAc,EAwD1C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAEpF"}

package/dist/metadata.js

@@ -0,0 +1,60 @@
+export const hubAppMetadata = [
+    {
+        id: "calendar",
+        name: "Google Calendar",
+        packageName: "@1kbirds/chidori-mock-google-calendar",
+        category: "Scheduling",
+        description: "Calendar CRUD, event listing, free/busy, and a React calendar review app.",
+        route: "#/calendar",
+        devCommand: "npm run dev:google-calendar",
+        standaloneUrl: "http://127.0.0.1:5173/",
+        capabilities: ["Calendars", "Events", "Free/busy", "Week view"],
+    },
+    {
+        id: "gmail",
+        name: "Gmail",
+        packageName: "@1kbirds/chidori-mock-gmail",
+        category: "Email",
+        description: "Labels, messages, threads, drafts, send, search, attachments, and mailbox UI.",
+        route: "#/gmail",
+        devCommand: "npm run dev:gmail",
+        standaloneUrl: "http://127.0.0.1:5175/",
+        capabilities: ["Inbox", "Threads", "Draft/send", "Search"],
+    },
+    {
+        id: "salesforce",
+        name: "Salesforce",
+        packageName: "@1kbirds/chidori-mock-salesforce",
+        category: "CRM",
+        description: "Accounts, contacts, leads, opportunities, tasks, notes, SOQL, and sales console UI.",
+        route: "#/salesforce",
+        devCommand: "npm run dev:salesforce",
+        standaloneUrl: "http://127.0.0.1:5174/",
+        capabilities: ["CRM records", "Lead conversion", "SOQL", "Sales console"],
+    },
+    {
+        id: "slack",
+        name: "Slack",
+        packageName: "@1kbirds/chidori-mock-slack",
+        category: "Communication",
+        description: "Users, channels, messages, threads, reactions, files, search, and workspace UI.",
+        route: "#/slack",
+        devCommand: "npm run dev:slack",
+        standaloneUrl: "http://127.0.0.1:5176/",
+        capabilities: ["Channels", "Threads", "Reactions", "Files"],
+    },
+    {
+        id: "linear",
+        name: "Linear",
+        packageName: "@1kbirds/chidori-mock-linear",
+        category: "Planning",
+        description: "Teams, workflow states, issues, comments, projects, cycles, and board UI.",
+        route: "#/linear",
+        devCommand: "npm run dev:linear",
+        standaloneUrl: "http://127.0.0.1:5177/",
+        capabilities: ["Issues", "Workflow states", "Comments", "Board"],
+    },
+];
+export function getHubAppMetadata(id) {
+    return hubAppMetadata.find((app) => app.id === id);
+}

package/dist/ui/HubApp.d.ts

@@ -0,0 +1,3 @@
+import "./styles.css";
+export declare function HubApp(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HubApp.d.ts.map

package/dist/ui/HubApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HubApp.d.ts","sourceRoot":"","sources":["../../src/ui/HubApp.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,wBAAgB,MAAM,4CA6FrB"}

package/dist/ui/HubApp.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { getHubApp, hubApps } from "../catalog";
+import "./styles.css";
+export function HubApp() {
+    const [hash, setHash] = useState(() => window.location.hash || "#/");
+    useEffect(() => {
+        const onHashChange = () => setHash(window.location.hash || "#/");
+        window.addEventListener("hashchange", onHashChange);
+        return () => window.removeEventListener("hashchange", onHashChange);
+    }, []);
+    const activeId = hash.replace(/^#\/?/, "");
+    const activeApp = getHubApp(activeId);
+    const grouped = useMemo(() => hubApps.reduce((groups, app) => {
+        groups[app.category] = groups[app.category] ?? [];
+        groups[app.category].push(app);
+        return groups;
+    }, {}), []);
+    return (_jsxs("div", { className: "hub-shell", children: [_jsxs("aside", { className: "hub-sidebar", children: [_jsx("a", { className: "hub-logo", href: "#/", children: "Chidori Mock" }), _jsxs("nav", { children: [_jsx("a", { className: !activeApp ? "active" : "", href: "#/", children: "Home" }), hubApps.map((app) => (_jsx("a", { className: activeApp?.id === app.id ? "active" : "", href: app.route, children: app.name }, app.id)))] })] }), _jsx("main", { className: "hub-main", children: activeApp ? (_jsxs("section", { className: "hub-app-view", children: [_jsxs("header", { className: "hub-app-header", children: [_jsxs("div", { children: [_jsx("p", { children: activeApp.packageName }), _jsx("h1", { children: activeApp.name })] }), _jsxs("div", { className: "hub-header-actions", children: [_jsx("code", { children: activeApp.devCommand }), _jsx("a", { href: activeApp.standaloneUrl, children: "Standalone" }), _jsx("a", { href: "#/", children: "Home" })] })] }), _jsx("div", { className: "hub-embedded-app", children: _jsx(activeApp.App, {}) })] })) : (_jsxs("section", { className: "hub-home", children: [_jsxs("header", { className: "hub-home-header", children: [_jsxs("div", { children: [_jsx("p", { children: "Virtual apps" }), _jsx("h1", { children: "Chidori Mock Hub" })] }), _jsxs("span", { children: [hubApps.length, " packages"] })] }), Object.entries(grouped).map(([category, apps]) => (_jsxs("section", { className: "hub-category", children: [_jsx("h2", { children: category }), _jsx("div", { className: "hub-card-grid", children: apps.map((app) => (_jsxs("a", { className: "hub-card", href: app.route, children: [_jsxs("div", { children: [_jsx("span", { children: app.packageName }), _jsx("h3", { children: app.name }), _jsx("p", { children: app.description })] }), _jsx("ul", { children: app.capabilities.map((capability) => (_jsx("li", { children: capability }, capability))) })] }, app.id))) })] }, category)))] })) })] }));
+}

package/dist/ui/dev.d.ts

@@ -0,0 +1,2 @@
+import "./styles.css";
+//# sourceMappingURL=dev.d.ts.map

package/dist/ui/dev.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/ui/dev.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC"}

package/dist/ui/dev.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { HubApp } from "./HubApp";
+import "./styles.css";
+createRoot(document.getElementById("root")).render(_jsx(React.StrictMode, { children: _jsx(HubApp, {}) }));

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export { HubApp } from "./HubApp";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1 @@
+export { HubApp } from "./HubApp";

package/dist/ui/styles.css

@@ -0,0 +1,214 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #f6f7f9;
+  color: #1f2937;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hub-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 248px 1fr;
+}
+
+.hub-sidebar {
+  background: #101827;
+  color: #eef2ff;
+  padding: 18px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.hub-logo {
+  font-size: 22px;
+  font-weight: 750;
+  padding: 4px 8px;
+}
+
+.hub-sidebar nav {
+  display: grid;
+  gap: 4px;
+}
+
+.hub-sidebar nav a {
+  border-radius: 7px;
+  color: #cbd5e1;
+  padding: 9px 10px;
+}
+
+.hub-sidebar nav a.active,
+.hub-sidebar nav a:hover {
+  background: #273449;
+  color: #fff;
+}
+
+.hub-main {
+  min-width: 0;
+}
+
+.hub-home {
+  padding: 24px;
+  display: grid;
+  gap: 26px;
+}
+
+.hub-home-header,
+.hub-app-header {
+  background: #fff;
+  border: 1px solid #dfe3ea;
+  border-radius: 8px;
+  padding: 18px 20px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+}
+
+.hub-home-header p,
+.hub-app-header p {
+  margin: 0;
+  color: #667085;
+  font-size: 13px;
+}
+
+.hub-home-header h1,
+.hub-app-header h1 {
+  margin: 3px 0 0;
+  font-size: 28px;
+}
+
+.hub-home-header span {
+  border: 1px solid #dfe3ea;
+  border-radius: 999px;
+  padding: 7px 11px;
+  color: #475467;
+  background: #f8fafc;
+}
+
+.hub-category {
+  display: grid;
+  gap: 10px;
+}
+
+.hub-category h2 {
+  margin: 0;
+  font-size: 15px;
+  color: #475467;
+}
+
+.hub-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.hub-card {
+  min-height: 214px;
+  background: #fff;
+  border: 1px solid #dfe3ea;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.hub-card:hover {
+  border-color: #5b6ee1;
+  box-shadow: 0 8px 22px rgb(16 24 40 / 8%);
+}
+
+.hub-card span {
+  color: #667085;
+  font-size: 12px;
+}
+
+.hub-card h3 {
+  margin: 5px 0 7px;
+  font-size: 20px;
+}
+
+.hub-card p {
+  margin: 0;
+  color: #475467;
+  line-height: 1.45;
+}
+
+.hub-card ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hub-card li {
+  background: #eef2ff;
+  color: #3447b6;
+  border-radius: 999px;
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
+.hub-app-view {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.hub-app-header {
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+.hub-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+
+.hub-header-actions code,
+.hub-header-actions a {
+  border: 1px solid #dfe3ea;
+  border-radius: 6px;
+  background: #f8fafc;
+  color: #344054;
+  padding: 7px 10px;
+}
+
+.hub-embedded-app {
+  min-width: 0;
+  min-height: 0;
+}
+
+@media (max-width: 820px) {
+  .hub-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .hub-home-header,
+  .hub-app-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .hub-header-actions {
+    justify-content: flex-start;
+  }
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@1kbirds/chidori-mock-hub",
+  "version": "0.1.0",
+  "description": "Mock app hub aggregating Chidori virtual app integrations.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
+    "./ui/styles.css": "./dist/ui/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/ui/styles.css dist/ui/styles.css",
+    "test": "vitest run",
+    "dev": "vite --host 127.0.0.1 --port 5178"
+  },
+  "dependencies": {
+    "@1kbirds/chidori-mock-gmail": "0.1.0",
+    "@1kbirds/chidori-mock-google-calendar": "0.1.0",
+    "@1kbirds/chidori-mock-linear": "0.1.0",
+    "@1kbirds/chidori-mock-salesforce": "0.1.0",
+    "@1kbirds/chidori-mock-slack": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.0",
+    "vite": "^7.0.0",
+    "vitest": "^3.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ThousandBirdsInc/chidori-mock.git",
+    "directory": "packages/hub"
+  },
+  "homepage": "https://github.com/ThousandBirdsInc/chidori-mock/tree/main/packages/hub",
+  "bugs": {
+    "url": "https://github.com/ThousandBirdsInc/chidori-mock/issues"
+  }
+}

package/src/__tests__/catalog.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { getHubAppMetadata, hubAppMetadata } from "../index";
+
+describe("hub catalog", () => {
+  it("lists every implemented mock app", () => {
+    expect(hubAppMetadata.map((app) => app.id)).toEqual(["calendar", "gmail", "salesforce", "slack", "linear"]);
+  });
+
+  it("includes package references and navigation metadata", () => {
+    for (const app of hubAppMetadata) {
+      expect(app.packageName).toMatch(/^@1kbirds\/chidori-mock-/);
+      expect(app.route).toBe(`#/${app.id}`);
+      expect(app.devCommand).toMatch(/^npm run dev:/);
+      expect(app.standaloneUrl).toMatch(/^http:\/\/127\.0\.0\.1:/);
+      expect(app.capabilities.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("resolves apps by id", () => {
+    expect(getHubAppMetadata("gmail")?.name).toBe("Gmail");
+    expect(getHubAppMetadata("missing")).toBeUndefined();
+  });
+});

package/src/catalog.ts

@@ -0,0 +1,60 @@
+import { createGmailMock, demoSeed as gmailSeed } from "@1kbirds/chidori-mock-gmail";
+import { GmailMockApp } from "@1kbirds/chidori-mock-gmail/ui";
+import { createGoogleCalendarMock, demoSeed as googleCalendarSeed } from "@1kbirds/chidori-mock-google-calendar";
+import { GoogleCalendarMockApp } from "@1kbirds/chidori-mock-google-calendar/ui";
+import { createLinearMock, demoSeed as linearSeed } from "@1kbirds/chidori-mock-linear";
+import { LinearMockApp } from "@1kbirds/chidori-mock-linear/ui";
+import { createSalesforceMock, demoSeed as salesforceSeed } from "@1kbirds/chidori-mock-salesforce";
+import { SalesforceMockApp } from "@1kbirds/chidori-mock-salesforce/ui";
+import { createSlackMock, demoSeed as slackSeed } from "@1kbirds/chidori-mock-slack";
+import { SlackMockApp } from "@1kbirds/chidori-mock-slack/ui";
+import { createElement, type ComponentType } from "react";
+import { hubAppMetadata, type HubAppId, type HubAppMetadata } from "./metadata";
+
+export type { HubAppId };
+
+export interface HubAppDefinition extends HubAppMetadata {
+  App: ComponentType;
+}
+
+const calendarMock = createGoogleCalendarMock({
+  now: "2026-06-01T15:00:00.000Z",
+  seed: googleCalendarSeed,
+});
+
+const gmailMock = createGmailMock({
+  now: "2026-06-01T16:30:00.000Z",
+  seed: gmailSeed,
+});
+
+const salesforceMock = createSalesforceMock({
+  now: "2026-06-01T15:00:00.000Z",
+  seed: salesforceSeed,
+});
+
+const slackMock = createSlackMock({
+  now: "2026-06-01T17:00:00.000Z",
+  seed: slackSeed,
+});
+
+const linearMock = createLinearMock({
+  now: "2026-06-01T17:30:00.000Z",
+  seed: linearSeed,
+});
+
+const appComponents: Record<HubAppId, ComponentType> = {
+  calendar: () => createElement(GoogleCalendarMockApp, { mock: calendarMock }),
+  gmail: () => createElement(GmailMockApp, { mock: gmailMock }),
+  salesforce: () => createElement(SalesforceMockApp, { mock: salesforceMock }),
+  slack: () => createElement(SlackMockApp, { mock: slackMock }),
+  linear: () => createElement(LinearMockApp, { mock: linearMock }),
+};
+
+export const hubApps: HubAppDefinition[] = hubAppMetadata.map((app) => ({
+  ...app,
+  App: appComponents[app.id],
+}));
+
+export function getHubApp(id: string | undefined): HubAppDefinition | undefined {
+  return hubApps.find((app) => app.id === id);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { getHubAppMetadata, hubAppMetadata } from "./metadata";
+export type { HubAppId, HubAppMetadata } from "./metadata";

package/src/metadata.ts

@@ -0,0 +1,75 @@
+export type HubAppId = "calendar" | "gmail" | "salesforce" | "slack" | "linear";
+
+export interface HubAppMetadata {
+  id: HubAppId;
+  name: string;
+  packageName: string;
+  category: string;
+  description: string;
+  route: string;
+  devCommand: string;
+  standaloneUrl: string;
+  capabilities: string[];
+}
+
+export const hubAppMetadata: HubAppMetadata[] = [
+  {
+    id: "calendar",
+    name: "Google Calendar",
+    packageName: "@1kbirds/chidori-mock-google-calendar",
+    category: "Scheduling",
+    description: "Calendar CRUD, event listing, free/busy, and a React calendar review app.",
+    route: "#/calendar",
+    devCommand: "npm run dev:google-calendar",
+    standaloneUrl: "http://127.0.0.1:5173/",
+    capabilities: ["Calendars", "Events", "Free/busy", "Week view"],
+  },
+  {
+    id: "gmail",
+    name: "Gmail",
+    packageName: "@1kbirds/chidori-mock-gmail",
+    category: "Email",
+    description: "Labels, messages, threads, drafts, send, search, attachments, and mailbox UI.",
+    route: "#/gmail",
+    devCommand: "npm run dev:gmail",
+    standaloneUrl: "http://127.0.0.1:5175/",
+    capabilities: ["Inbox", "Threads", "Draft/send", "Search"],
+  },
+  {
+    id: "salesforce",
+    name: "Salesforce",
+    packageName: "@1kbirds/chidori-mock-salesforce",
+    category: "CRM",
+    description: "Accounts, contacts, leads, opportunities, tasks, notes, SOQL, and sales console UI.",
+    route: "#/salesforce",
+    devCommand: "npm run dev:salesforce",
+    standaloneUrl: "http://127.0.0.1:5174/",
+    capabilities: ["CRM records", "Lead conversion", "SOQL", "Sales console"],
+  },
+  {
+    id: "slack",
+    name: "Slack",
+    packageName: "@1kbirds/chidori-mock-slack",
+    category: "Communication",
+    description: "Users, channels, messages, threads, reactions, files, search, and workspace UI.",
+    route: "#/slack",
+    devCommand: "npm run dev:slack",
+    standaloneUrl: "http://127.0.0.1:5176/",
+    capabilities: ["Channels", "Threads", "Reactions", "Files"],
+  },
+  {
+    id: "linear",
+    name: "Linear",
+    packageName: "@1kbirds/chidori-mock-linear",
+    category: "Planning",
+    description: "Teams, workflow states, issues, comments, projects, cycles, and board UI.",
+    route: "#/linear",
+    devCommand: "npm run dev:linear",
+    standaloneUrl: "http://127.0.0.1:5177/",
+    capabilities: ["Issues", "Workflow states", "Comments", "Board"],
+  },
+];
+
+export function getHubAppMetadata(id: string | undefined): HubAppMetadata | undefined {
+  return hubAppMetadata.find((app) => app.id === id);
+}

package/src/ui/HubApp.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useMemo, useState } from "react";
+import { getHubApp, hubApps } from "../catalog";
+import "./styles.css";
+
+export function HubApp() {
+  const [hash, setHash] = useState(() => window.location.hash || "#/");
+
+  useEffect(() => {
+    const onHashChange = () => setHash(window.location.hash || "#/");
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
+  const activeId = hash.replace(/^#\/?/, "");
+  const activeApp = getHubApp(activeId);
+  const grouped = useMemo(
+    () =>
+      hubApps.reduce<Record<string, typeof hubApps>>((groups, app) => {
+        groups[app.category] = groups[app.category] ?? [];
+        groups[app.category].push(app);
+        return groups;
+      }, {}),
+    [],
+  );
+
+  return (
+    <div className="hub-shell">
+      <aside className="hub-sidebar">
+        <a className="hub-logo" href="#/">
+          Chidori Mock
+        </a>
+        <nav>
+          <a className={!activeApp ? "active" : ""} href="#/">
+            Home
+          </a>
+          {hubApps.map((app) => (
+            <a className={activeApp?.id === app.id ? "active" : ""} href={app.route} key={app.id}>
+              {app.name}
+            </a>
+          ))}
+        </nav>
+      </aside>
+
+      <main className="hub-main">
+        {activeApp ? (
+          <section className="hub-app-view">
+            <header className="hub-app-header">
+              <div>
+                <p>{activeApp.packageName}</p>
+                <h1>{activeApp.name}</h1>
+              </div>
+              <div className="hub-header-actions">
+                <code>{activeApp.devCommand}</code>
+                <a href={activeApp.standaloneUrl}>Standalone</a>
+                <a href="#/">Home</a>
+              </div>
+            </header>
+            <div className="hub-embedded-app">
+              <activeApp.App />
+            </div>
+          </section>
+        ) : (
+          <section className="hub-home">
+            <header className="hub-home-header">
+              <div>
+                <p>Virtual apps</p>
+                <h1>Chidori Mock Hub</h1>
+              </div>
+              <span>{hubApps.length} packages</span>
+            </header>
+
+            {Object.entries(grouped).map(([category, apps]) => (
+              <section className="hub-category" key={category}>
+                <h2>{category}</h2>
+                <div className="hub-card-grid">
+                  {apps.map((app) => (
+                    <a className="hub-card" href={app.route} key={app.id}>
+                      <div>
+                        <span>{app.packageName}</span>
+                        <h3>{app.name}</h3>
+                        <p>{app.description}</p>
+                      </div>
+                      <ul>
+                        {app.capabilities.map((capability) => (
+                          <li key={capability}>{capability}</li>
+                        ))}
+                      </ul>
+                    </a>
+                  ))}
+                </div>
+              </section>
+            ))}
+          </section>
+        )}
+      </main>
+    </div>
+  );
+}

package/src/ui/dev.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { HubApp } from "./HubApp";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <HubApp />
+  </React.StrictMode>,
+);

package/src/ui/index.ts

@@ -0,0 +1 @@
+export { HubApp } from "./HubApp";

package/src/ui/styles.css

@@ -0,0 +1,214 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #f6f7f9;
+  color: #1f2937;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hub-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 248px 1fr;
+}
+
+.hub-sidebar {
+  background: #101827;
+  color: #eef2ff;
+  padding: 18px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.hub-logo {
+  font-size: 22px;
+  font-weight: 750;
+  padding: 4px 8px;
+}
+
+.hub-sidebar nav {
+  display: grid;
+  gap: 4px;
+}
+
+.hub-sidebar nav a {
+  border-radius: 7px;
+  color: #cbd5e1;
+  padding: 9px 10px;
+}
+
+.hub-sidebar nav a.active,
+.hub-sidebar nav a:hover {
+  background: #273449;
+  color: #fff;
+}
+
+.hub-main {
+  min-width: 0;
+}
+
+.hub-home {
+  padding: 24px;
+  display: grid;
+  gap: 26px;
+}
+
+.hub-home-header,
+.hub-app-header {
+  background: #fff;
+  border: 1px solid #dfe3ea;
+  border-radius: 8px;
+  padding: 18px 20px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+}
+
+.hub-home-header p,
+.hub-app-header p {
+  margin: 0;
+  color: #667085;
+  font-size: 13px;
+}
+
+.hub-home-header h1,
+.hub-app-header h1 {
+  margin: 3px 0 0;
+  font-size: 28px;
+}
+
+.hub-home-header span {
+  border: 1px solid #dfe3ea;
+  border-radius: 999px;
+  padding: 7px 11px;
+  color: #475467;
+  background: #f8fafc;
+}
+
+.hub-category {
+  display: grid;
+  gap: 10px;
+}
+
+.hub-category h2 {
+  margin: 0;
+  font-size: 15px;
+  color: #475467;
+}
+
+.hub-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.hub-card {
+  min-height: 214px;
+  background: #fff;
+  border: 1px solid #dfe3ea;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.hub-card:hover {
+  border-color: #5b6ee1;
+  box-shadow: 0 8px 22px rgb(16 24 40 / 8%);
+}
+
+.hub-card span {
+  color: #667085;
+  font-size: 12px;
+}
+
+.hub-card h3 {
+  margin: 5px 0 7px;
+  font-size: 20px;
+}
+
+.hub-card p {
+  margin: 0;
+  color: #475467;
+  line-height: 1.45;
+}
+
+.hub-card ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hub-card li {
+  background: #eef2ff;
+  color: #3447b6;
+  border-radius: 999px;
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
+.hub-app-view {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.hub-app-header {
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+.hub-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+
+.hub-header-actions code,
+.hub-header-actions a {
+  border: 1px solid #dfe3ea;
+  border-radius: 6px;
+  background: #f8fafc;
+  color: #344054;
+  padding: 7px 10px;
+}
+
+.hub-embedded-app {
+  min-width: 0;
+  min-height: 0;
+}
+
+@media (max-width: 820px) {
+  .hub-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .hub-home-header,
+  .hub-app-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .hub-header-actions {
+    justify-content: flex-start;
+  }
+}