@graph8/sdk 0.308.1 → 0.357.0

package/styles/tokens.css

@@ -0,0 +1,284 @@
+/*
+ * @graph8/sdk/ui — GENERATED FILE. DO NOT EDIT BY HAND.
+ *
+ * Source:    frontend/app/globals.css
+ * Generator: sdk/js/scripts/sync-ui.mjs
+ * Regenerate: npm run generate:ui --prefix sdk/js
+ *
+ * Hand edits are overwritten on the next build and will fail the drift guard
+ * in sdk/js/tests/ui/drift.test.ts.
+ */
+
+:root {
+  /* BG */
+  --background: #ffffff;
+  /* SURFACE ELEMENT */
+  --foreground: #171717;
+  --card: #ffffff;
+  --card-foreground: #171717;
+  /* MODAL BG */
+  --popover: #fcfcfc;
+  --popover-element: #ededed;
+  --popover-foreground: #525252;
+  --primary: #7d2df3;
+  --primary-foreground: #ffffff;
+  --secondary: #fdfdfd;
+  --secondary-foreground: #171717;
+  /* SURFACE */
+  --muted: #f9f9f9;
+  --muted-foreground: #202020;
+  --accent: #f2eafe;
+  --accent-foreground: #7d2df3;
+  --destructive: #ca3214;
+  --destructive-foreground: #fffcfc;
+
+  --text-color: #0a0a0a;
+  --text-color-muted: #777777;
+
+  /* BORDER */
+  --border: #dfdfdf;
+  /* INPUT */
+  --input: #ededed;
+  --ring: #7d2df3;
+  --radius: 0.5rem;
+
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  --tracking-normal: 0.025em;
+
+  --warning: #fff3c4;
+  --warning-foreground: #a0750a;
+
+  --error: #fef2f2;
+  --error-foreground: #c10506;
+
+  --positive: var(--green);
+  --positive-foreground: var(--green-foreground);
+
+  --info: #ebf2ff;
+  --info-foreground: #033b9b;
+
+  /* Warm-grey "page" surface for the Newsletter Templates Hub scroll region */
+  --canvas: #f7f6f3;
+
+  --icon-btn: var(--primary);
+  --icon-btn-bg: #eee7fb;
+  --icon-btn-stroke: #d8c3f7;
+
+  --stat-successful: #10b981;
+  --stat-neutral: #777777;
+  --stat-failed: #de351e;
+
+  --gray: #ededed;
+  --gray-foreground: #3e4652;
+  --blue: #cfe8f9;
+  --blue-foreground: #2563eb;
+  --yellow: #fef9c3;
+  --yellow-foreground: #b45309;
+  --green: #d1fae5;
+  /* Figure/text green — darkened emerald-600 (#059669, 3.5:1 on white) to
+     emerald-700 for WCAG AA. Feeds --positive-foreground, used for revenue
+     figures, success text and the Badge `positive` variant. The lighter
+     --green (#d1fae5) stays for decorative fills/backgrounds. (#21215) */
+  --green-foreground: #047857;
+  --red: #fee2e2;
+  --red-foreground: #b91c1c;
+
+  --cyan: #cffafe;
+  --cyan-foreground: #0891b2;
+  --orange: #ffedd5;
+  --orange-foreground: #c2410c;
+  --pink: #fce7f3;
+  --pink-foreground: #be185d;
+  --indigo: #e0e7ff;
+  --indigo-foreground: #4338ca;
+
+  --primary-50: #f2eaff;
+  --primary-100: #ddc5ff;
+  --primary-200: #bb8dff;
+  --primary-300: #bb8dff;
+  --primary-400: #934cfc;
+  /* primary is 500 */
+  --primary-600: #4e0daf;
+  --primary-700: #3b038d;
+  --primary-800: #2b006b;
+  --primary-900: #160e22;
+  --sidebar: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+  /* Chart tokens (D-011). Unthemed values equal the colours the app's charts use today
+   * (features/enrichment/src/utils/agChartsConfig.ts), so nothing changes off-theme. The
+   * 2026 theme redefines them below. Read in code through lib/charts/chart-tokens.ts.
+   *
+   * The heat tokens (`--heat-*`, D-025) are deliberately NOT defined here: off-theme they differ
+   * per persona and per component, so each component passes its legacy hex as the var() fallback
+   * (components/abm/persona-colors.ts `heatVar`). Only the 2026 theme defines them. */
+  --chart-1: #3b82f6;
+  --chart-2: #10b981;
+  --chart-3: #f87171;
+  --chart-4: #8b5cf6;
+  --chart-5: #f59e0b;
+  --chart-6: #ec4899;
+  --chart-7: #14b8a6;
+  --chart-8: #6366f1;
+  --chart-positive: #10b981;
+  --chart-negative: #f87171;
+  --chart-neutral: #9ca3af;
+
+  /* Favorite star and channel icons (D-051). Colored on purpose, at Thomas's request: the favorite
+   * star is amber and each channel has its own brand-adjacent hue. System tokens read directly by
+   * components (`text-favorite`, `text-channel-linkedin`); both themes and both modes share them, so
+   * the 2026 theme does not redefine them. Light values hold 3:1 on white as icon glyphs, except
+   * WhatsApp, which keeps its brand green in both modes so its mark reads as WhatsApp. */
+  --favorite: #e5a100;
+  --channel-linkedin: #0a66c2;
+  --channel-email: #0284c7;
+  --channel-phone: #16a34a;
+  --channel-voice: #ea580c;
+  --channel-sms: #0d9488;
+  --channel-whatsapp: #25d366;
+  --channel-social: #db2777;
+  --channel-content: #4f46e5;
+  --channel-ads: #dc2626;
+  --channel-community: #64748b;
+  --channel-meetings: #d97706;
+  --channel-support: #65a30d;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #a6abb2;
+  --card: #171717;
+  --card-foreground: #e2e8f0;
+  --popover: #171717;
+  --popover-element: #1c1c1c;
+  --popover-foreground: #a9a9a9;
+  --primary: #7d2df3;
+  --primary-foreground: #ffffff;
+  --secondary: #242424;
+  --secondary-foreground: #ffffff;
+  --muted: #101010;
+  --muted-foreground: #a6abb2;
+  --accent: #160e22;
+  --accent-foreground: #7d2df3;
+  --destructive: #430c04;
+  --destructive-foreground: #de351e;
+
+  --text-color: #fcfcfc;
+  --text-color-muted: #a6abb2;
+
+  --border: #292929;
+  --input: #262626;
+  --ring: #7d2df3;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+
+  --warning: #1b1b04;
+  --warning-foreground: #bdbd26;
+
+  --error: #220c0d;
+  --error-foreground: #fc6367;
+
+  --positive: var(--green);
+  --positive-foreground: var(--green-foreground);
+
+  --info: #0f1424;
+  --info-foreground: #8fb4ff;
+
+  /* Warm-grey "page" surface for the Newsletter Templates Hub scroll region */
+  --canvas: #0c0c0c;
+
+  --icon-btn: var(--primary);
+  --icon-btn-bg: #1a1427;
+  --icon-btn-stroke: #3e2566;
+
+  --stat-successful: #10b981;
+  --stat-neutral: #777777;
+  --stat-failed: #de351e;
+
+  --gray: #3c3b3b;
+  --gray-foreground: #d1d5dd;
+  --blue: #1e293b;
+  --blue-foreground: #60a5fa;
+  --yellow: #a16207;
+  --yellow-foreground: #fef08a;
+  --green: #064e3b;
+  --green-foreground: #6ee7b7;
+  --red: #7f1d1d;
+  --red-foreground: #fecaca;
+
+  --cyan: #164e63;
+  --cyan-foreground: #67e8f9;
+  --orange: #7c2d12;
+  --orange-foreground: #fdba74;
+  --pink: #831843;
+  --pink-foreground: #f9a8d4;
+  --indigo: #312e81;
+  --indigo-foreground: #a5b4fc;
+
+  --primary-50: #f2eaff;
+  --primary-100: #ddc5ff;
+  --primary-200: #bb8dff;
+  --primary-300: #bb8dff;
+  --primary-400: #934cfc;
+  /* primary is 500 */
+  --primary-600: #4e0daf;
+  --primary-700: #3b038d;
+  --primary-800: #2b006b;
+  --primary-900: #160e22;
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+  /* Chart tokens (D-011), unthemed dark values (see :root). */
+  --chart-1: #60a5fa;
+  --chart-2: #34d399;
+  --chart-3: #f87171;
+  --chart-4: #a78bfa;
+  --chart-5: #fbbf24;
+  --chart-6: #f472b6;
+  --chart-7: #2dd4bf;
+  --chart-8: #818cf8;
+  --chart-positive: #34d399;
+  --chart-negative: #f87171;
+  --chart-neutral: #9ca3af;
+
+  /* Favorite star and channel icons (D-051), dark values: lifted a step to read on the dark canvas. */
+  --favorite: #facc15;
+  --channel-linkedin: #70b5f9;
+  --channel-email: #38bdf8;
+  --channel-phone: #4ade80;
+  --channel-voice: #fb923c;
+  --channel-sms: #2dd4bf;
+  --channel-whatsapp: #25d366;
+  --channel-social: #f472b6;
+  --channel-content: #818cf8;
+  --channel-ads: #f87171;
+  --channel-community: #94a3b8;
+  --channel-meetings: #fbbf24;
+  --channel-support: #a3e635;
+}

package/templates/next-app/README.md.tmpl

@@ -0,0 +1,35 @@
+# {{title}}
+
+A Next.js (App Router, TypeScript, Tailwind CSS v4) app scaffolded by `npx @graph8/sdk create {{stackId}}`.
+It runs on graph8: the UI is source you own, and the data comes from the graph8 API through this app's own
+server route, so the API key never reaches the browser.
+
+## Start
+
+1. Create `.env.local` from `.env.local.example` and set `G8_API_KEY` (graph8 app > Settings > Developers).
+2. Check the key, its scopes and your subscription for this stack:
+
+   ```bash
+   npx @graph8/sdk doctor --stack {{stackId}}
+   ```
+
+3. Run it:
+
+   ```bash
+   {{devCommand}}
+   ```
+
+## Screens
+
+{{screens}}
+
+## Where things are
+
+- `components/g8/`: the blocks of this stack (components, hooks, server recipes). Each block has a
+  `README.md` describing its flow and defaults. This code is yours: edit it.
+- `app/api/g8/[...path]/route.ts`: the proxy the browser calls. Before shipping, set `authorize` (who may call it)
+  and `allowedPrefixes` (which API areas), both documented in the file.
+- `lib/nav.ts` and `components/app-shell.tsx`: the sidebar. `app/<route>/page.tsx`: one page per screen.
+- `graph8.json`: which blocks are installed (used by `npx @graph8/sdk doctor`).
+
+Add another feature: `npx @graph8/sdk add <block>` (see `npx @graph8/sdk list`).

package/templates/next-app/_pages/redirect-page.tsx.tmpl

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect({{firstPathJson}});
+}

package/templates/next-app/_pages/route-page.tsx.tmpl

@@ -0,0 +1,9 @@
+import { {{component}} } from "{{importPath}}";
+
+// Generated by `graph8-sdk create {{stackId}}`. The screen is the {{block}} block's {{component}}
+// (source in {{blockDir}}): edit it there.
+const props = {{propsJson}};
+
+export default function Page() {
+  return <{{component}} {...props} />;
+}

package/templates/next-app/app/globals.css.tmpl

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+/* graph8 design tokens + the @source directive that makes Tailwind scan the kit's components. */
+@import "@graph8/sdk/ui/theme.css";
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}

package/templates/next-app/app/layout.tsx.tmpl

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { AppShell } from "@/components/app-shell";
+import "./globals.css"; // imports @graph8/sdk/ui/theme.css (tokens + Tailwind v4 @source)
+
+export const metadata: Metadata = {
+  title: {{titleJson}},
+  description: "Built with graph8",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <AppShell>{children}</AppShell>
+      </body>
+    </html>
+  );
+}

package/templates/next-app/components/app-shell.tsx.tmpl

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { nav } from "@/lib/nav";
+
+/** Sidebar + content area. Edit freely: add a logo, group the links, add your own auth. */
+export function AppShell({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  return (
+    <div className="flex min-h-screen">
+      <aside className="w-56 shrink-0 border-r border-border p-4">
+        <div className="mb-4 text-sm font-semibold">{{{titleJson}}}</div>
+        <nav className="flex flex-col gap-1" aria-label="Main">
+          {nav.map((item) => {
+            const active = item.path === "/" ? pathname === "/" : pathname === item.path || pathname.startsWith(`${item.path}/`);
+            return (
+              <Link
+                key={item.path}
+                href={item.path}
+                aria-current={active ? "page" : undefined}
+                className={`rounded-md px-3 py-1.5 text-sm ${active ? "bg-muted font-medium" : "text-muted-foreground hover:bg-muted"}`}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+      <main className="min-w-0 flex-1 p-6">{children}</main>
+    </div>
+  );
+}

package/templates/next-app/dot-env.local.example.tmpl

@@ -0,0 +1,6 @@
+# Copy to .env.local and fill in. Server-side only: never prefix these with NEXT_PUBLIC_.
+# A graph8 API key (graph8 app > Settings > Developers). The browser never sees it:
+# it calls this app's /api/g8/* route, which adds the key on the server.
+G8_API_KEY=
+# Optional: override the API host (default https://be.graph8.com).
+G8_API_URL=

package/templates/next-app/dot-gitignore.tmpl

@@ -0,0 +1,7 @@
+node_modules
+.next
+out
+next-env.d.ts
+*.tsbuildinfo
+.env*.local
+.DS_Store

package/templates/next-app/lib/nav.ts.tmpl

@@ -0,0 +1,2 @@
+// Generated by `graph8-sdk create {{stackId}}`. One entry per screen; edit freely.
+export const nav: { label: string; path: string }[] = {{navJson}};

package/templates/next-app/next.config.mjs.tmpl

@@ -0,0 +1,4 @@
+/** @type {import("next").NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/templates/next-app/package.json.tmpl

@@ -0,0 +1,25 @@
+{
+  "name": "{{appName}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@graph8/sdk": "{{sdkVersion}}",
+    "next": "^15.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/next-app/postcss.config.mjs.tmpl

@@ -0,0 +1,4 @@
+// Tailwind CSS v4 runs as a PostCSS plugin.
+export default {
+  plugins: { "@tailwindcss/postcss": {} },
+};

package/templates/next-app/tsconfig.json.tmpl

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}