@amsterdamdatalabs/enact-extensions 0.1.0 → 0.1.1

package/scripts/postinstall.mjs

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+/**
+ * postinstall.mjs — TTY-aware npm postinstall script for enact-extensions.
+ *
+ * CI-SAFETY CONTRACT (most important property):
+ *   - If NOT a TTY → print one-line notice and exit 0. NEVER hang.
+ *   - If CI env var is set → print one-line notice and exit 0.
+ *   - If ENACT_EXTENSIONS_NO_POSTINSTALL is set → print one-line notice and exit 0.
+ *   - If interactive TTY (and not CI) → run `hooks setup` interactive picker.
+ *   - Entire script is wrapped in try/catch → ALWAYS process.exit(0).
+ *     A postinstall that throws would break `npm ci` in CI.
+ *
+ * The CI/TTY guards ensure this script is fully safe in:
+ *   - Docker CI environments (CI=1, no TTY)
+ *   - npm ci / npm install in CI pipelines
+ *   - Automated install tooling (pipes, scripts)
+ *   - Developer machines with interactive TTY (triggers the interactive picker)
+ */
+
+try {
+  const { stdin, env } = process;
+
+  const isCI = !!(env.CI || env.CONTINUOUS_INTEGRATION || env.BUILD_ID || env.GITHUB_ACTIONS);
+  const isNoPostinstall = !!(env.ENACT_EXTENSIONS_NO_POSTINSTALL);
+  const isTTY = !!(stdin.isTTY);
+
+  const NOTICE = `Run \`enact-extensions hooks setup\` to enable session-start drift checks.\n`;
+
+  if (!isTTY || isCI || isNoPostinstall) {
+    // Non-interactive or CI: print notice and exit immediately.
+    process.stdout.write(NOTICE);
+    process.exit(0);
+  }
+
+  // Interactive TTY (non-CI): run the hooks setup interactive picker via CLI.
+  // We spawn a child process rather than importing directly to keep postinstall
+  // isolated from any import-time side-effects in the CLI modules.
+  const { spawnSync } = await import("node:child_process");
+  const { dirname, join, resolve } = await import("node:path");
+  const { fileURLToPath } = await import("node:url");
+
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const CLI = join(resolve(__dirname, ".."), "scripts", "enact-extensions.mjs");
+
+  // Spawn with stdio inherited so the interactive readline prompt is visible.
+  // We spawn and ignore the exit code — postinstall must always exit 0.
+  spawnSync(process.execPath, [CLI, "hooks", "setup"], {
+    stdio: "inherit",
+    env: { ...process.env },
+  });
+  process.exit(0);
+} catch {
+  // CRITICAL: never let an error propagate from postinstall.
+  // Printing to stderr is best-effort (safe to fail).
+  try {
+    process.stderr.write(
+      "[enact-extensions postinstall] Non-fatal error during hook setup. Run `enact-extensions hooks setup` manually.\n",
+    );
+  } catch {
+    // Even stderr.write failed — just exit 0.
+  }
+  process.exit(0);
+}

package/scripts/setup-enact-context.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 # Wire enact-context setup into the enact-extensions workspace.
-# Validates the plugin bundle (catalog) then runs consolidated agent setup.
+# Validates the plugin-dev bundle then runs consolidated agent setup.
 set -euo pipefail
 
 ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
@@ -16,7 +16,7 @@ if ! command -v enact-context >/dev/null 2>&1; then
 fi
 
 cd "$ROOT"
-npm run validate:catalog
+npm run validate
 
 echo ""
 echo "Running enact-context setup (claude, codex, opencode, enact, zed)..."

package/spec/index.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "enact-extensions-index.json",
+  "title": "Enact Extensions Discovery Index",
+  "description": "Schema for the generated discovery index produced by `enact-extensions index`. This is a generated artifact (never committed). The schema file is committed as the contract.",
+  "type": "object",
+  "required": ["generatedAt", "count", "plugins"],
+  "additionalProperties": false,
+  "properties": {
+    "generatedAt": {
+      "description": "ISO 8601 timestamp when the index was generated, or null if not provided.",
+      "oneOf": [
+        { "type": "string", "format": "date-time" },
+        { "type": "null" }
+      ]
+    },
+    "count": {
+      "type": "integer",
+      "minimum": 0,
+      "description": "Total number of plugin bundles discovered. Must equal plugins.length."
+    },
+    "plugins": {
+      "type": "array",
+      "description": "Ordered list of discovered plugin bundle entries.",
+      "items": {
+        "type": "object",
+        "required": ["name", "version", "category", "description", "targets", "path"],
+        "additionalProperties": false,
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Unique plugin identifier from .agents/plugin.json."
+          },
+          "version": {
+            "type": "string",
+            "description": "Plugin version string."
+          },
+          "category": {
+            "type": "string",
+            "description": "Plugin category (from interface.category, may be empty string)."
+          },
+          "description": {
+            "type": "string",
+            "description": "Short human-readable plugin description."
+          },
+          "targets": {
+            "type": "array",
+            "items": { "type": "string" },
+            "description": "Agent platforms this plugin targets (e.g. claude, codex, cursor)."
+          },
+          "path": {
+            "type": "string",
+            "description": "Repo-relative path to the plugin bundle directory (relative to package root, not absolute)."
+          }
+        }
+      }
+    }
+  }
+}

package/web/assets/README.md

@@ -0,0 +1,111 @@
+# web/assets — Amsterdam Data Labs Design System
+
+## Provenance
+
+These assets are vendored from the Amsterdam Data Labs (ADL) design system,
+originally sourced from the `net-revenue-demo` repository
+(`public/_ds/amsterdam-data-labs-design-system-*/tokens/`).
+
+They are committed source — not generated — and represent the UI styling
+contract for any HTML surfaces served by enact-extensions. Do not hand-edit
+token values; update from the upstream design system and re-vendor.
+
+## Contents
+
+```
+web/assets/
+  logo-full.png          — ADL full wordmark (horizontal)
+  logo-slim.png          — ADL compact mark (icon-only / slim)
+  tokens/
+    index.css            — single entrypoint: @imports all 5 token files
+    fonts.css            — Google Fonts @import (Space Grotesk / Manrope / IBM Plex Mono)
+    colors.css           — primitive ramps (--adl-*) + semantic aliases
+    spacing.css          — 4px-grid space scale, breakpoints, z-index
+    effects.css          — radii, shadows, motion easing + duration
+    base.css             — element resets that consume the tokens above
+```
+
+Link `tokens/index.css` from HTML — it loads all five files in the correct
+dependency order (fonts → colors → spacing → effects → base).
+
+## Key Semantic Tokens
+
+Product code should consume **semantic** tokens only — never the raw `--adl-*`
+primitive ramps.
+
+### Backgrounds & Surfaces
+
+| Token | Light | Dark |
+|---|---|---|
+| `--bg-canvas` | `#ffffff` | `#061726` |
+| `--surface-default` | `#ffffff` | `--adl-navy-900` |
+| `--surface-raised` | `--adl-neutral-50` | `--adl-navy-800` |
+| `--surface-sunken` | `--adl-neutral-100` | `--adl-navy-950` |
+
+### Text
+
+| Token | Purpose |
+|---|---|
+| `--text-primary` | Body copy, headings |
+| `--text-secondary` | Supporting labels |
+| `--text-muted` | Placeholder, captions |
+| `--text-link` | Hyperlinks |
+
+### Borders
+
+| Token | Purpose |
+|---|---|
+| `--border-subtle` | Dividers, ghost cards |
+| `--border-default` | Standard input borders |
+| `--border-strong` | Emphasized outlines |
+| `--border-focus` | Keyboard focus ring |
+
+### Brand
+
+The ADL primary brand anchor is **`--adl-teal-500: #18949a`**.
+
+```css
+--brand-primary:        var(--adl-teal-500);   /* #18949a */
+--brand-primary-hover:  var(--adl-teal-600);
+--brand-primary-active: var(--adl-teal-700);
+--brand-secondary:       var(--adl-mint-400);  /* #5acfb0 */
+```
+
+## Light / Dark Theming
+
+Tokens switch automatically via the `[data-theme]` attribute. Apply it to
+`<html>` (or any subtree root) to switch the entire surface:
+
+```html
+<!-- light (default — no attribute needed) -->
+<html>
+
+<!-- dark -->
+<html data-theme="dark">
+```
+
+All semantic tokens resolve to their dark-mode equivalents when
+`[data-theme="dark"]` is in scope. Primitive ramps (`--adl-*`) are
+theme-invariant.
+
+## Typography
+
+Fonts load from Google Fonts via the `@import` in `fonts.css`. No font
+binaries are committed.
+
+| Role | Family | Weights |
+|---|---|---|
+| Display / headings | Space Grotesk | 400 500 600 700 |
+| Body / UI text | Manrope | 400 500 600 700 800 |
+| Code / mono / data | IBM Plex Mono | 400 500 600 |
+
+CSS variable references:
+
+```css
+--font-display: "Space Grotesk", sans-serif;
+--font-body:    "Manrope", sans-serif;
+--font-mono:    "IBM Plex Mono", monospace;
+```
+
+Replace with licensed ADL brand font binaries when they become available;
+update `fonts.css` to use `@font-face` declarations pointing to local files.

package/web/assets/tokens/base.css

@@ -0,0 +1,45 @@
+/* Amsterdam Data Labs — minimal base element styles. */
+:root {
+  color-scheme: light;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-md);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background: var(--bg-canvas);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono);
+}
+
+a {
+  color: var(--text-link);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+::selection {
+  background: var(--adl-teal-100);
+  color: var(--adl-navy-900);
+}

package/web/assets/tokens/colors.css

@@ -0,0 +1,248 @@
+/* Amsterdam Data Labs — color tokens.
+   Primitives (--adl-*) come from the ADL W3C DTCG token source.
+   Product code should consume the SEMANTIC tokens (bottom of file). */
+
+:root {
+  /* ── Primitive ramps ───────────────────────────────────────── */
+
+  /* Teal — primary brand. Anchor 500 = #18949a */
+  --adl-teal-50:  #e6f4f5;
+  --adl-teal-100: #c0e3e5;
+  --adl-teal-200: #95d0d3;
+  --adl-teal-300: #66bcc0;
+  --adl-teal-400: #3aa9ae;
+  --adl-teal-500: #18949a;
+  --adl-teal-600: #147f84;
+  --adl-teal-700: #10696d;
+  --adl-teal-800: #0c5256;
+  --adl-teal-900: #073b3e;
+
+  /* Mint — secondary brand / success. Anchor 400 = #5acfb0 */
+  --adl-mint-50:  #e9f9f4;
+  --adl-mint-100: #cdf1e6;
+  --adl-mint-200: #a6e6d2;
+  --adl-mint-300: #7eddc1;
+  --adl-mint-400: #5acfb0;
+  --adl-mint-500: #3bb898;
+  --adl-mint-600: #2e9a7f;
+  --adl-mint-700: #237b66;
+  --adl-mint-800: #195d4d;
+  --adl-mint-900: #103f34;
+
+  /* Navy — cool ink / dark neutral. Anchors 600/700/900 */
+  --adl-navy-50:  #eef2f6;
+  --adl-navy-100: #d2dde7;
+  --adl-navy-200: #a8bccf;
+  --adl-navy-300: #7795b1;
+  --adl-navy-400: #4a6a8a;
+  --adl-navy-500: #2c4763;
+  --adl-navy-600: #1f3a5f;
+  --adl-navy-700: #1a2332;
+  --adl-navy-800: #0f2a44;
+  --adl-navy-900: #0a2840;
+  --adl-navy-950: #061726;
+
+  /* Blue — sky / bright blue. Anchors 200/400/500 */
+  --adl-blue-50:  #eaf3fc;
+  --adl-blue-100: #cfe6f9;
+  --adl-blue-200: #c5ddf2;
+  --adl-blue-300: #8ec6ee;
+  --adl-blue-400: #5dade2;
+  --adl-blue-500: #4fa0e3;
+  --adl-blue-600: #3a82c4;
+  --adl-blue-700: #2e679e;
+  --adl-blue-800: #234e78;
+  --adl-blue-900: #183753;
+
+  /* Indigo — periwinkle. Anchors 500/600 */
+  --adl-indigo-50:  #eef1fb;
+  --adl-indigo-100: #d6ddf5;
+  --adl-indigo-200: #b3c0ec;
+  --adl-indigo-300: #8fa3e2;
+  --adl-indigo-400: #7389db;
+  --adl-indigo-500: #5b7bd5;
+  --adl-indigo-600: #5b6bc0;
+  --adl-indigo-700: #48569c;
+  --adl-indigo-800: #384278;
+  --adl-indigo-900: #282f55;
+
+  /* Violet — accent. Anchor 500 = #6c5ce7 */
+  --adl-violet-50:  #efedfc;
+  --adl-violet-100: #d8d2f8;
+  --adl-violet-200: #bab0f2;
+  --adl-violet-300: #9b8eec;
+  --adl-violet-400: #8170e9;
+  --adl-violet-500: #6c5ce7;
+  --adl-violet-600: #5847c4;
+  --adl-violet-700: #46389c;
+  --adl-violet-800: #352b76;
+  --adl-violet-900: #251e52;
+
+  /* Cyan — highlight. Anchor 400 = #4dd0e1 */
+  --adl-cyan-50:  #e7fafc;
+  --adl-cyan-100: #c4f1f6;
+  --adl-cyan-200: #97e5ee;
+  --adl-cyan-300: #6cdae6;
+  --adl-cyan-400: #4dd0e1;
+  --adl-cyan-500: #2bb6c8;
+  --adl-cyan-600: #2194a3;
+  --adl-cyan-700: #19737f;
+  --adl-cyan-800: #12545d;
+  --adl-cyan-900: #0b373d;
+
+  /* Maroon — deep accent (estimated anchor 600) */
+  --adl-maroon-50:  #f7eaea;
+  --adl-maroon-100: #ecc9c9;
+  --adl-maroon-200: #dc9d9d;
+  --adl-maroon-300: #c96f6f;
+  --adl-maroon-400: #a84444;
+  --adl-maroon-500: #842b2b;
+  --adl-maroon-600: #6b2020;
+  --adl-maroon-700: #561a1a;
+  --adl-maroon-800: #411414;
+  --adl-maroon-900: #2d0e0e;
+
+  /* Red — error / danger. Anchors 300 (dark) / 500 (light) */
+  --adl-red-50:  #fcebe9;
+  --adl-red-100: #f6cac5;
+  --adl-red-200: #eea49b;
+  --adl-red-300: #e57373;
+  --adl-red-400: #d4564a;
+  --adl-red-500: #c0392b;
+  --adl-red-600: #a32d21;
+  --adl-red-700: #82241a;
+  --adl-red-800: #611b14;
+  --adl-red-900: #41120d;
+
+  /* Pink — soft tint. Anchor 200 = #f5c2c7 */
+  --adl-pink-50:  #fdf0f1;
+  --adl-pink-100: #fad9dc;
+  --adl-pink-200: #f5c2c7;
+  --adl-pink-300: #eda1a8;
+  --adl-pink-400: #e07c85;
+  --adl-pink-500: #cf5762;
+
+  /* Amber — warning (added default; no native ADL warning hue) */
+  --adl-amber-50:  #fdf6e8;
+  --adl-amber-100: #f9e6bf;
+  --adl-amber-200: #f2cf86;
+  --adl-amber-300: #e9b652;
+  --adl-amber-400: #e0a23b;
+  --adl-amber-500: #c8842a;
+  --adl-amber-600: #a4691f;
+  --adl-amber-700: #7e4f18;
+
+  /* Neutral — cool grays. Anchors 0/50/200 */
+  --adl-neutral-0:   #ffffff;
+  --adl-neutral-50:  #f7fbff;
+  --adl-neutral-100: #eef4fa;
+  --adl-neutral-200: #dde7f0;
+  --adl-neutral-300: #c2d2e0;
+  --adl-neutral-400: #9fb2c4;
+  --adl-neutral-500: #7388a0;
+  --adl-neutral-600: #51647a;
+  --adl-neutral-700: #374759;
+  --adl-neutral-800: #1f2c3a;
+  --adl-neutral-900: #0e1822;
+}
+
+/* ── Semantic tokens — LIGHT (default) ─────────────────────────
+   Consume these in product code; never the raw ramps. */
+:root {
+  --bg-canvas:  var(--adl-neutral-0);
+  --bg-subtle:  var(--adl-neutral-50);
+  --bg-muted:   var(--adl-neutral-200);
+  --bg-inverse: var(--adl-navy-900);
+
+  --surface-default: var(--adl-neutral-0);
+  --surface-raised:  var(--adl-neutral-50);
+  --surface-sunken:  var(--adl-neutral-100);
+
+  --text-primary:   var(--adl-navy-900);
+  --text-secondary: var(--adl-navy-600);
+  --text-muted:     var(--adl-neutral-500);
+  --text-inverse:   var(--adl-neutral-0);
+  --text-link:      var(--adl-teal-600);
+  --text-on-brand:  var(--adl-neutral-0);
+
+  --border-subtle:  var(--adl-neutral-200);
+  --border-default: var(--adl-neutral-300);
+  --border-strong:  var(--adl-neutral-400);
+  --border-focus:   var(--adl-teal-500);
+
+  --brand-primary:        var(--adl-teal-500);
+  --brand-primary-hover:  var(--adl-teal-600);
+  --brand-primary-active: var(--adl-teal-700);
+  --brand-primary-subtle: var(--adl-teal-50);
+  --brand-secondary:       var(--adl-mint-400);
+  --brand-secondary-hover: var(--adl-mint-500);
+  --brand-accent:     var(--adl-indigo-500);
+  --brand-accent-alt: var(--adl-violet-500);
+
+  --feedback-info:           var(--adl-blue-500);
+  --feedback-info-subtle:    var(--adl-blue-50);
+  --feedback-success:        var(--adl-mint-600);
+  --feedback-success-subtle: var(--adl-mint-50);
+  --feedback-warning:        var(--adl-amber-400);
+  --feedback-warning-subtle: var(--adl-amber-50);
+  --feedback-danger:         var(--adl-red-500);
+  --feedback-danger-subtle:  var(--adl-red-50);
+
+  /* Data-viz categorical order */
+  --chart-1: var(--adl-teal-500);
+  --chart-2: var(--adl-indigo-500);
+  --chart-3: var(--adl-cyan-400);
+  --chart-4: var(--adl-violet-500);
+  --chart-5: var(--adl-blue-500);
+  --chart-6: var(--adl-mint-400);
+}
+
+/* ── Semantic tokens — DARK ───────────────────────────────────
+   Apply data-theme="dark" on <html> or any subtree root. */
+[data-theme="dark"] {
+  --bg-canvas:  var(--adl-navy-950);
+  --bg-subtle:  var(--adl-navy-900);
+  --bg-muted:   var(--adl-navy-800);
+  --bg-inverse: var(--adl-neutral-50);
+
+  --surface-default: var(--adl-navy-900);
+  --surface-raised:  var(--adl-navy-800);
+  --surface-sunken:  var(--adl-navy-950);
+
+  --text-primary:   var(--adl-neutral-50);
+  --text-secondary: var(--adl-blue-200);
+  --text-muted:     var(--adl-navy-300);
+  --text-inverse:   var(--adl-navy-900);
+  --text-link:      var(--adl-blue-400);
+  --text-on-brand:  var(--adl-navy-900);
+
+  --border-subtle:  var(--adl-navy-800);
+  --border-default: var(--adl-navy-700);
+  --border-strong:  var(--adl-navy-600);
+  --border-focus:   var(--adl-mint-400);
+
+  --brand-primary:        var(--adl-mint-400);
+  --brand-primary-hover:  var(--adl-mint-300);
+  --brand-primary-active: var(--adl-mint-200);
+  --brand-primary-subtle: var(--adl-teal-900);
+  --brand-secondary:       var(--adl-blue-500);
+  --brand-secondary-hover: var(--adl-blue-400);
+  --brand-accent:     var(--adl-indigo-600);
+  --brand-accent-alt: var(--adl-cyan-400);
+
+  --feedback-info:           var(--adl-blue-400);
+  --feedback-info-subtle:    var(--adl-navy-800);
+  --feedback-success:        var(--adl-mint-400);
+  --feedback-success-subtle: var(--adl-teal-900);
+  --feedback-warning:        var(--adl-amber-300);
+  --feedback-warning-subtle: var(--adl-amber-700);
+  --feedback-danger:         var(--adl-red-300);
+  --feedback-danger-subtle:  var(--adl-red-900);
+
+  --chart-1: var(--adl-cyan-400);
+  --chart-2: var(--adl-indigo-400);
+  --chart-3: var(--adl-mint-400);
+  --chart-4: var(--adl-violet-400);
+  --chart-5: var(--adl-blue-400);
+  --chart-6: var(--adl-teal-300);
+}

package/web/assets/tokens/effects.css

@@ -0,0 +1,24 @@
+/* Amsterdam Data Labs — radii, shadows, motion. */
+:root {
+  /* Corner radii — crisp, technical; generous only on pills/avatars */
+  --radius-xs: 4px;   /* checkboxes, tags */
+  --radius-sm: 6px;   /* inputs, buttons */
+  --radius-md: 10px;  /* cards */
+  --radius-lg: 14px;  /* modals, feature panels */
+  --radius-xl: 20px;  /* hero media */
+  --radius-full: 999px; /* pills, avatars */
+
+  /* Shadows — cool navy-tinted, low spread. Elevation, not decoration. */
+  --shadow-xs: 0 1px 2px rgba(10, 40, 64, 0.06);
+  --shadow-sm: 0 1px 3px rgba(10, 40, 64, 0.08), 0 1px 2px rgba(10, 40, 64, 0.04);
+  --shadow-md: 0 4px 12px rgba(10, 40, 64, 0.10), 0 1px 3px rgba(10, 40, 64, 0.06);
+  --shadow-lg: 0 12px 32px rgba(10, 40, 64, 0.14), 0 2px 6px rgba(10, 40, 64, 0.06);
+  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--border-focus) 30%, transparent);
+
+  /* Motion — quick, understated. No bounces. */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
+  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
+  --duration-fast: 120ms; /* @kind other */
+  --duration-base: 180ms; /* @kind other */
+  --duration-slow: 320ms; /* @kind other */
+}

package/web/assets/tokens/fonts.css

@@ -0,0 +1,8 @@
+/* Amsterdam Data Labs — webfonts.
+   NOTE: No brand font binaries were provided. These are Google Fonts
+   substitutions chosen to match the geometric, technical wordmark:
+   - Space Grotesk  → display / headings (geometric grotesque, techy)
+   - Manrope        → body / UI text (clean, slightly geometric humanist)
+   - IBM Plex Mono  → code, data, numerals in tables
+   Replace with licensed brand fonts when available. */
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

package/web/assets/tokens/index.css

@@ -0,0 +1,18 @@
+/* Amsterdam Data Labs Design System — token entrypoint.
+   Link this single file from HTML to load the full ADL token set.
+
+   Import order:
+   1. fonts   — @import Google Fonts (must be first so the font faces are
+                available when other tokens reference --font-* vars)
+   2. colors  — primitive ramps (--adl-*) + semantic aliases
+                (--bg-*, --surface-*, --text-*, --border-*, --brand-*, etc.)
+   3. spacing — 4px-grid space scale, breakpoints, z-index layers
+   4. effects — radii, shadows, motion easing + duration
+   5. base    — element resets that consume the tokens above
+*/
+
+@import "./fonts.css";
+@import "./colors.css";
+@import "./spacing.css";
+@import "./effects.css";
+@import "./base.css";

package/web/assets/tokens/spacing.css

@@ -0,0 +1,50 @@
+/* Amsterdam Data Labs — spacing, breakpoints, z-index. 4px base grid. */
+:root {
+  --space-0:  0;
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1:  4px;
+  --space-1-5: 6px;
+  --space-2:  8px;
+  --space-2-5: 10px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-7:  28px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+  --space-40: 160px;
+  --space-48: 192px;
+
+  /* Breakpoints (min-width, mobile-first) — for reference in JS/media queries:
+     sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* Content widths */
+  --container-max: 1200px;
+  --container-narrow: 720px;
+
+  /* Z-index layers */
+  --z-hide: -1; /* @kind other */
+  --z-base: 0; /* @kind other */
+  --z-raised: 10; /* @kind other */
+  --z-dropdown: 1000; /* @kind other */
+  --z-sticky: 1100; /* @kind other */
+  --z-banner: 1200; /* @kind other */
+  --z-overlay: 1300; /* @kind other */
+  --z-modal: 1400; /* @kind other */
+  --z-popover: 1500; /* @kind other */
+  --z-toast: 1600; /* @kind other */
+  --z-tooltip: 1700; /* @kind other */
+}