@graph8/sdk 0.362.0 → 0.373.0

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

@@ -4,100 +4,385 @@
 /* The blocks live in this repo, so Tailwind sees their classes through the normal content scan. */
 
 /*
- * graph8 ink palette. The kit's default accent is purple; this app runs the ink theme: white canvas,
- * near-black text, greys as ink tints, colour only for meaning (positive, warning, error). Change the
- * accent here, in one place, if your product has its own.
+ * The default look: graph8's ink palette. White canvas, near-black ink, greys as ink tints, colour only
+ * for meaning (moss = good, ochre = needs attention, ember = error). Every component reads these tokens,
+ * so changing a value here (or running `npx @graph8/sdk brand --brand-color "#0f62fe"`, which writes
+ * --primary, --ring and a --brand scale at the end of this file) re-skins the whole app, light and dark.
+ *
+ * Text pairs meet WCAG AA (4.5:1) in both modes. Lines and hover tints are decorative.
  */
+
+@theme {
+  /* System UI fonts: SF Pro on Apple, Segoe UI Variable on Windows. Inter is used when installed. */
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+/* Extra tokens as utilities: bg-surface-subtle, border-line-soft, text-text-faint, bg-avatar ... */
+@theme inline {
+  --color-surface-subtle: var(--surface-subtle);
+  --color-line-soft: var(--line-soft);
+  --color-text-faint: var(--text-faint);
+  --color-text-disabled: var(--text-disabled);
+  --color-avatar: var(--avatar-bg);
+  --color-avatar-foreground: var(--avatar-fg);
+}
+
 :root {
+  color-scheme: light;
+
+  /* Palette */
   --ink: #16140f;
+  --moss: #3f6b3a;
+  --moss-soft: #eaf1e6;
+  --ochre: #8a5a12;
+  --ochre-soft: #f6eddc;
+  --ember: #c8432e;
+  --ember-text: #b23a26;
+  --ember-soft: #f8e7e2;
+
+  /* Surfaces and text */
+  --background: #ffffff;
+  --foreground: var(--ink);
+  --card: #ffffff;
+  --card-foreground: var(--ink);
+  --popover: #ffffff;
+  --popover-foreground: var(--ink);
+  --popover-element: rgba(22, 20, 15, 0.06);
+  --canvas: #ffffff;
+  --text-color: var(--ink);
+  --text-color-muted: #625f58; /* 6.4:1 on white */
+  --text-faint: #77746c; /* meta text (timestamps): 4.7:1 on white */
+  --text-disabled: rgba(22, 20, 15, 0.38); /* disabled and decorative only */
+  --muted: #f7f7f6;
+  --muted-foreground: #625f58;
+  --secondary: rgba(22, 20, 15, 0.05);
+  --secondary-foreground: var(--ink);
+  --surface-subtle: rgba(22, 20, 15, 0.025);
+  --surface-hover: rgba(22, 20, 15, 0.04);
+  --surface-selected: rgba(22, 20, 15, 0.06);
+  --avatar-bg: rgba(22, 20, 15, 0.06);
+  --avatar-fg: rgba(22, 20, 15, 0.72);
+
+  /* Lines */
+  --border: #e6e4df;
+  --line-soft: #efeeea;
+  --input: #d9d6cf;
+
+  /* Accent: ink. A brand colour replaces --primary and --ring (see the brand region at the end). */
   --primary: var(--ink);
   --primary-foreground: #ffffff;
-  --accent: rgba(22, 20, 15, 0.06);
+  --primary-50: rgba(22, 20, 15, 0.04);
+  --primary-100: rgba(22, 20, 15, 0.08);
+  --primary-200: rgba(22, 20, 15, 0.14);
+  --primary-300: rgba(22, 20, 15, 0.24);
+  --primary-400: rgba(22, 20, 15, 0.48);
+  --primary-600: rgba(22, 20, 15, 0.92);
+  --primary-700: rgba(22, 20, 15, 0.95);
+  --primary-800: rgba(22, 20, 15, 0.98);
+  --primary-900: var(--ink);
+  --accent: rgba(22, 20, 15, 0.05);
   --accent-foreground: var(--ink);
-  --ring: rgba(22, 20, 15, 0.35);
-  --surface-hover: rgba(22, 20, 15, 0.04);
-  --surface-selected: rgba(22, 20, 15, 0.06);
-  --signal: #c8432e;
+  --ring: rgba(22, 20, 15, 0.55); /* focus rings: 4:1 on white */
+  --icon-btn: var(--primary);
+  --icon-btn-bg: rgba(22, 20, 15, 0.06);
+  --icon-btn-stroke: var(--border);
+
+  /* Meaning */
+  --signal: var(--ember);
   --signal-foreground: #ffffff;
-  --foreground: var(--ink);
-  --card-foreground: var(--ink);
-  --text-color: var(--ink);
-  --text-color-muted: #6f6b63;
-  --muted: #f6f5f2;
-  --muted-foreground: #4a4740;
-  --border: #e6e3dd;
-  --input: #e6e3dd;
-  --sidebar: #fbfaf8;
+  --destructive: var(--ember);
+  --destructive-foreground: #ffffff;
+  --positive: var(--moss-soft);
+  --positive-foreground: var(--moss);
+  --warning: var(--ochre-soft);
+  --warning-foreground: var(--ochre);
+  --error: var(--ember-soft);
+  --error-foreground: var(--ember-text);
+  --info: rgba(22, 20, 15, 0.05);
+  --info-foreground: #3d3a34;
+  --green: var(--moss-soft);
+  --green-foreground: var(--moss);
+  --yellow: var(--ochre-soft);
+  --yellow-foreground: var(--ochre);
+  --red: var(--ember-soft);
+  --red-foreground: var(--ember-text);
+  --gray: rgba(22, 20, 15, 0.06);
+  --gray-foreground: #4a4740;
+  --stat-successful: var(--moss);
+  --stat-neutral: var(--text-faint);
+  --stat-neutral-ghost: rgba(22, 20, 15, 0.38);
+  --stat-failed: var(--ember);
+
+  /* Sidebar */
+  --sidebar: #fafaf9;
   --sidebar-foreground: var(--ink);
-  --sidebar-border: #e6e3dd;
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
   --sidebar-accent: rgba(22, 20, 15, 0.06);
   --sidebar-accent-foreground: var(--ink);
-  --icon-btn: var(--ink);
-  --icon-btn-bg: var(--muted);
-  --icon-btn-stroke: var(--border);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  /* Shape and depth: flat surfaces with hairlines; only floating layers (menus, dialogs) cast shadows. */
+  --radius: 0.5rem;
+  --tracking-normal: 0em;
+  --shadow-2xs: 0 1px 0 rgba(22, 20, 15, 0.03);
+  --shadow-xs: 0 1px 1px rgba(22, 20, 15, 0.04);
+  --shadow-sm: 0 1px 2px rgba(22, 20, 15, 0.06), 0 1px 3px rgba(22, 20, 15, 0.04);
+  --shadow: 0 1px 2px rgba(22, 20, 15, 0.06), 0 1px 3px rgba(22, 20, 15, 0.04);
+  --shadow-md: 0 4px 12px -2px rgba(22, 20, 15, 0.08), 0 2px 4px -2px rgba(22, 20, 15, 0.05);
+  --shadow-lg: 0 12px 28px -8px rgba(22, 20, 15, 0.12), 0 4px 8px -4px rgba(22, 20, 15, 0.06);
+  --shadow-xl: 0 20px 44px -12px rgba(22, 20, 15, 0.16), 0 8px 16px -8px rgba(22, 20, 15, 0.08);
+  --shadow-2xl: 0 32px 64px -16px rgba(22, 20, 15, 0.22);
+
+  /* Tables: the list table scrolls inside the screen with a sticky header. `none` lets it grow with the page. */
+  --table-head-bg: var(--background);
+  --table-row-hover: var(--surface-hover);
+  --table-row-selected: var(--surface-selected);
+  --g8-table-max-height: calc(100dvh - 14rem);
+
+  /* Charts: ink first; moss and ember only for good and bad. */
   --chart-1: var(--ink);
-  --chart-2: #5f6b7a;
-  --chart-3: #3f7a5a;
-  --chart-4: #a0750a;
-  --chart-5: #8a857c;
-  --chart-positive: #047857;
+  --chart-2: #3f6b3a;
+  --chart-3: #5b6b7a;
+  --chart-4: #8a5a12;
+  --chart-5: #a89f91;
+  --chart-6: #c8432e;
+  --chart-7: rgba(22, 20, 15, 0.6);
+  --chart-8: rgba(22, 20, 15, 0.35);
+  --chart-positive: #3f6b3a;
   --chart-negative: #c8432e;
   --chart-neutral: #8a857c;
 }
 
 .dark {
-  --ink: #f2efe9;
-  --background: #111110;
-  --primary: var(--ink);
-  --primary-foreground: #111110;
-  --accent: rgba(242, 239, 233, 0.08);
-  --accent-foreground: var(--ink);
-  --ring: rgba(242, 239, 233, 0.4);
-  --surface-hover: rgba(242, 239, 233, 0.05);
-  --surface-selected: rgba(242, 239, 233, 0.08);
-  --signal: #e2634f;
-  --signal-foreground: #111110;
+  color-scheme: dark;
+
+  --ink: #f2efe9; /* bone: the ink of dark mode */
+  --moss: #9fc893;
+  --moss-soft: rgba(159, 200, 147, 0.13);
+  --ochre: #e3b66b;
+  --ochre-soft: rgba(227, 182, 107, 0.13);
+  --ember: #c8432e;
+  --ember-text: #ec8270;
+  --ember-soft: rgba(236, 130, 112, 0.13);
+
+  --background: #16140f;
   --foreground: var(--ink);
-  --card: #171716;
+  --card: #1c1a15;
   --card-foreground: var(--ink);
-  --popover: #1a1a19;
+  --popover: #201e19;
   --popover-foreground: var(--ink);
+  --popover-element: rgba(242, 239, 233, 0.08);
+  --canvas: #16140f;
   --text-color: var(--ink);
-  --text-color-muted: #9a958c;
-  --muted: #1b1b19;
-  --muted-foreground: #c9c5bd;
-  --secondary: #1f1f1d;
+  --text-color-muted: #a8a49c; /* 7.4:1 on the dark canvas */
+  --text-faint: #8c887f; /* 5.2:1 */
+  --text-disabled: rgba(242, 239, 233, 0.38);
+  --muted: #1d1b16;
+  --muted-foreground: #a8a49c;
+  --secondary: rgba(242, 239, 233, 0.07);
   --secondary-foreground: var(--ink);
-  --border: #2a2a27;
-  --input: #2a2a27;
-  --sidebar: #141413;
+  --surface-subtle: rgba(242, 239, 233, 0.03);
+  --surface-hover: rgba(242, 239, 233, 0.05);
+  --surface-selected: rgba(242, 239, 233, 0.09);
+  --avatar-bg: rgba(242, 239, 233, 0.1);
+  --avatar-fg: rgba(242, 239, 233, 0.85);
+
+  --border: #33302b;
+  --line-soft: #26241f;
+  --input: #3e3b36;
+
+  --primary: var(--ink);
+  --primary-foreground: #16140f;
+  --primary-50: rgba(242, 239, 233, 0.04);
+  --primary-100: rgba(242, 239, 233, 0.08);
+  --primary-200: rgba(242, 239, 233, 0.14);
+  --primary-300: rgba(242, 239, 233, 0.24);
+  --primary-400: rgba(242, 239, 233, 0.48);
+  --primary-600: rgba(242, 239, 233, 0.92);
+  --primary-700: rgba(242, 239, 233, 0.95);
+  --primary-800: rgba(242, 239, 233, 0.98);
+  --primary-900: var(--ink);
+  --accent: rgba(242, 239, 233, 0.07);
+  --accent-foreground: var(--ink);
+  --ring: rgba(242, 239, 233, 0.55);
+  --icon-btn: var(--primary);
+  --icon-btn-bg: rgba(242, 239, 233, 0.08);
+  --icon-btn-stroke: var(--border);
+
+  --signal: var(--ember);
+  --signal-foreground: #ffffff;
+  --destructive: var(--ember);
+  --destructive-foreground: #ffffff;
+  --positive: var(--moss-soft);
+  --positive-foreground: var(--moss);
+  --warning: var(--ochre-soft);
+  --warning-foreground: var(--ochre);
+  --error: var(--ember-soft);
+  --error-foreground: var(--ember-text);
+  --info: rgba(242, 239, 233, 0.07);
+  --info-foreground: #d6d2ca;
+  --green: var(--moss-soft);
+  --green-foreground: var(--moss);
+  --yellow: var(--ochre-soft);
+  --yellow-foreground: var(--ochre);
+  --red: var(--ember-soft);
+  --red-foreground: var(--ember-text);
+  --gray: rgba(242, 239, 233, 0.1);
+  --gray-foreground: #c9c5bd;
+  --stat-successful: var(--moss);
+  --stat-neutral: var(--text-faint);
+  --stat-neutral-ghost: rgba(242, 239, 233, 0.38);
+  --stat-failed: var(--ember-text);
+
+  --sidebar: #12110d;
   --sidebar-foreground: var(--ink);
-  --sidebar-border: #2a2a27;
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
   --sidebar-accent: rgba(242, 239, 233, 0.08);
   --sidebar-accent-foreground: var(--ink);
-  --icon-btn: var(--ink);
-  --icon-btn-bg: var(--muted);
-  --icon-btn-stroke: var(--border);
+  --sidebar-border: #2a2823;
+  --sidebar-ring: var(--ring);
+
+  --shadow-2xs: 0 1px 0 rgba(0, 0, 0, 0.3);
+  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 239, 233, 0.04);
+  --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 239, 233, 0.05);
+  --shadow-xl: 0 20px 44px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(242, 239, 233, 0.06);
+  --shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(242, 239, 233, 0.06);
+
+  --table-head-bg: var(--background);
+
   --chart-1: var(--ink);
-  --chart-2: #9aa5b4;
-  --chart-3: #6fb08a;
-  --chart-4: #d2a63a;
-  --chart-5: #8a857c;
-  --chart-positive: #34d399;
-  --chart-negative: #e2634f;
+  --chart-2: #9fc893;
+  --chart-3: #8fa0b0;
+  --chart-4: #e3b66b;
+  --chart-5: #a89f91;
+  --chart-6: #e0654f;
+  --chart-7: rgba(242, 239, 233, 0.6);
+  --chart-8: rgba(242, 239, 233, 0.35);
+  --chart-positive: #9fc893;
+  --chart-negative: #e0654f;
   --chart-neutral: #8a857c;
 }
 
-html,
-body {
-  height: 100%;
+/* A table inside a card or a floating layer keeps that surface behind its sticky header. */
+.bg-card {
+  --table-head-bg: var(--card);
+}
+.bg-popover {
+  --table-head-bg: var(--popover);
+}
+
+@layer base {
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font-feature-settings: "cv11", "ss01"; /* Inter: single-storey a, open digits (ignored by other fonts) */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--primary) 16%, transparent);
+  }
+
+  /* Native checkboxes, radios and ranges follow the accent (ink, or the brand). */
+  input[type="checkbox"],
+  input[type="radio"],
+  input[type="range"],
+  progress {
+    accent-color: var(--primary);
+  }
+
+  /* Native inputs and selects that blocks style by hand get the same hairline, focus and placeholder. */
+  select,
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
+  textarea {
+    border-color: var(--input);
+  }
+  ::placeholder {
+    color: var(--text-faint);
+    opacity: 1;
+  }
+  :focus-visible {
+    outline-color: var(--ring);
+  }
+
+  /* Quiet, thin scrollbars that follow the theme. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+}
+
+/*
+ * Tables (the kit's `Table`: <table class="caption-bottom ..."> in a scrolling div). Compact 36px rows, a
+ * 12px muted header, a visible hover and a selected row marked with the accent. These rules only match
+ * while a cell still has the kit's default classes, so a block's own `py-*` or `h-*` still wins.
+ */
+table.caption-bottom {
+  font-variant-numeric: tabular-nums;
+}
+table.caption-bottom > thead > tr {
+  border-bottom-width: 0;
+}
+table.caption-bottom > thead > tr > th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--table-head-bg);
+  box-shadow: inset 0 -1px 0 var(--border);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  white-space: nowrap;
+}
+table.caption-bottom > thead > tr > th.h-12 {
+  height: 2.25rem;
+}
+table.caption-bottom > tbody > tr {
+  border-color: var(--line-soft);
+}
+table.caption-bottom > tbody > tr:hover {
+  background-color: var(--table-row-hover);
+}
+table.caption-bottom > tbody > tr[data-state="selected"] {
+  background-color: var(--table-row-selected);
+}
+table.caption-bottom > tbody > tr[data-state="selected"] > td:first-child {
+  box-shadow: inset 2px 0 0 var(--primary);
+}
+table.caption-bottom td.p-4:not([class*=" py-"], [class*=" pt-"], [class*=" pb-"]) {
+  padding-block: 0.5rem;
+}
+/* The list table of a screen scrolls in place, so its header stays in view. */
+[data-g8-list] div.overflow-auto:has(> table.caption-bottom) {
+  max-height: var(--g8-table-max-height);
+  overscroll-behavior: contain;
+}
+/* List rows stay one line each; a wide table scrolls sideways instead of wrapping into tall rows. */
+[data-g8-list] table.caption-bottom > tbody > tr > td {
+  white-space: nowrap;
+}
+
+/* Native filter inputs and selects in a toolbar line up with the 32px search field and buttons. */
+[role="toolbar"] :is(input, select).h-9 {
+  height: 2rem;
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+/* `text-destructive` is a fill colour; as text in dark mode it needs the lighter ember. */
+.dark .text-destructive {
+  color: var(--ember-text);
 }
 
 /* Quiet motion: colour and opacity transitions only; none at all when the person asks for less. */

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

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import { AppShell } from "@/components/app-shell";
+import { G8ConnectGate } from "@/components/g8/_foundation/connect-graph8";
+import { brand } from "@/g8.config";
 import "./globals.css"; // imports @graph8/sdk/ui/theme.css (tokens + Tailwind v4 @source) and the ink palette
 
 export const metadata: Metadata = {
-  title: {{titleJson}},
+  title: brand.name,
   description: "Built with graph8",
 };
 
@@ -21,7 +23,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
       <body>
-        <AppShell>{children}</AppShell>
+        <AppShell>
+          {/* Local preview: shows "Connect graph8" until the server has an API key. Does nothing in production. */}
+          <G8ConnectGate>{children}</G8ConnectGate>
+        </AppShell>
       </body>
     </html>
   );