@datalayer/agent-runtimes 0.0.2

package/package.json

@@ -0,0 +1,327 @@
+{
+  "name": "@datalayer/agent-runtimes",
+  "version": "0.0.2",
+  "type": "module",
+  "workspaces": [
+    ".",
+    "examples/*"
+  ],
+  "author": {
+    "name": "Datalayer",
+    "email": "info@datalayer.io"
+  },
+  "keywords": [
+    "datalayer",
+    "ai",
+    "ai-agents",
+    "acp",
+    "a2a",
+    "a2ui",
+    "ag-ui",
+    "data",
+    "jupyter",
+    "react",
+    "run",
+    "storybook",
+    "vercel-ai"
+  ],
+  "files": [
+    "lib/**/*.{css,d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "schema/*.json"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datalayer/agent-runtimes.git"
+  },
+  "homepage": "https://github.com/datalayer/agent-runtimes",
+  "bugs": {
+    "url": "https://github.com/datalayer/agent-runtimes/issues"
+  },
+  "sideEffects": [
+    "style/*.css",
+    "style/index.js"
+  ],
+  "styleModule": "style/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "apply:patches": "bash scripts/apply-patches.sh",
+    "build": "npm run clean && gulp resources-to-lib && tsc -b && vite build",
+    "build-storybook": "storybook build",
+    "build:all": "npm run build && npm run build:examples",
+    "build:examples": "npm run build:nextjs",
+    "build:lib": "npm run clean:lib && gulp resources-to-lib && tsc -b",
+    "build:nextjs": "npm run build --workspace=nextjs-notebook-example",
+    "build:types": "npm run clean:lib && tsc -b",
+    "check": "npm run format:check && npm run lint:all && npm run type-check:all",
+    "check:fix": "npm run format:all && npm run lint:fix && npm run type-check:all",
+    "clean": "rimraf lib dist build tsconfig.tsbuildinfo",
+    "clean:cache": "rimraf node_modules/.vite",
+    "clean:dist": "rimraf dist",
+    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+    "create:patches": "bash scripts/create-patches.sh",
+    "examples": "run-p jupyter:start server:start examples:vite",
+    "examples:fresh": "npm run clean:cache && npm run examples",
+    "examples:nextjs": "npm run dev --workspace=nextjs-notebook-example",
+    "examples:vite": "VITE_APP_TARGET=examples VITE_DATALAYER_RUN_URL=http://localhost:8888 vite",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,json,md}\" \"examples/**/*.{js,jsx,ts,tsx,css,json,md,mjs}\"",
+    "format:all": "npm run format && npm run format --workspaces --if-present",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,json,md}\" \"examples/**/*.{js,jsx,ts,tsx,css,json,md,mjs}\"",
+    "format:check:all": "npm run format:check && npm run format:check --workspaces --if-present",
+    "format:fix": "npm run format",
+    "format:fix:all": "npm run format:all",
+    "jupyter:start": "./dev/sh/start-jupyter-server.sh",
+    "kill": "./dev/sh/kill.sh || true",
+    "lint": "eslint . --quiet",
+    "lint:all": "npm run lint && npm run lint --workspaces --if-present",
+    "lint:fix": "eslint . --fix",
+    "lint:fix:all": "npm run lint:fix && npm run lint:fix --workspaces --if-present",
+    "postinstall": "bash scripts/apply-patches.sh",
+    "prepare": "husky",
+    "preview": "vite preview",
+    "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache",
+    "server": "python -m agent_runtimes",
+    "server:start": "python -m agent_runtimes --port 8765 --reload --debug",
+    "showcase:vercel-ai-elements": "VITE_APP_TARGET=showcase-vercel-ai-elements vite",
+    "start": "vite",
+    "start:acp": "run-p server:start start:acp:vite",
+    "start:acp:prod": "run-p server start:acp:vite",
+    "start:acp:vite": "VITE_ACP_WS_URL=ws://localhost:8765/api/v1/acp/ws vite",
+    "storybook": "storybook dev -p 6006",
+    "sync:jupyter": "bash scripts/sync-jupyter.sh",
+    "sync:jupyter:watch": "bash scripts/sync-jupyter.sh --watch",
+    "test": "vitest run --project=unit --project=general",
+    "test:all": "vitest run",
+    "test:coverage": "vitest run --coverage --project=unit --project=general",
+    "test:integration": "vitest run --project=integration",
+    "test:ui": "vitest --ui --project=unit --project=general",
+    "test:unit": "vitest run --project=unit",
+    "test:watch": "vitest --project=unit --project=general",
+    "type-check": "tsc --noEmit",
+    "type-check:all": "npm run type-check && npm run type-check --workspaces --if-present",
+    "type-check:watch": "tsc -b -w --noEmit",
+    "typedoc": "typedoc --options typedoc.json --out docs/docs/typescript_api",
+    "watch:lib": "run-p 'watch:lib:*'",
+    "watch:lib:res": "gulp resources-to-lib-watch",
+    "watch:lib:src": "tsc -b -w"
+  },
+  "dependencies": {
+    "@a2a-js/sdk": "^0.3.6",
+    "@a2ui/lit": "^0.8.1",
+    "@ag-ui/client": "^0.0.42",
+    "@ag-ui/core": "^0.0.42",
+    "@ag-ui/encoder": "^0.0.42",
+    "@ag-ui/proto": "^0.0.42",
+    "@agentclientprotocol/sdk": "^0.8.0",
+    "@ai-sdk/react": "^3.0.5",
+    "@anthropic-ai/sdk": "^0.52.0",
+    "@datalayer/core": "^0.0.20",
+    "@datalayer/icons-react": "^1.0.6",
+    "@datalayer/jupyter-lexical": "^1.0.6",
+    "@datalayer/jupyter-react": "^2.0.0",
+    "@datalayer/primer-addons": "^1.0.4",
+    "@datalayer/primer-rjsf": "^1.0.1",
+    "@jupyter-widgets/base-manager": "^1.0.12",
+    "@jupyter-widgets/schema": "^0.5.6",
+    "@jupyterlab/apputils": "^4.6.0",
+    "@jupyterlab/cells": "^4.5.0",
+    "@jupyterlab/codeeditor": "^4.5.0",
+    "@jupyterlab/coreutils": "^6.0.0",
+    "@jupyterlab/documentsearch": "^4.5.0",
+    "@jupyterlab/rendermime": "^4.5.0",
+    "@jupyterlab/services": "^7.0.0",
+    "@jupyterlab/translation": "^4.5.0",
+    "@jupyterlab/ui-components": "^4.5.0",
+    "@lumino/commands": "^2.3.3",
+    "@lumino/coreutils": "^2.2.2",
+    "@lumino/datagrid": "^2.5.3",
+    "@lumino/disposable": "^2.1.5",
+    "@lumino/polling": "^2.1.5",
+    "@lumino/signaling": "^2.1.5",
+    "@lumino/widgets": "^2.7.2",
+    "@mcp-ui/client": "^5.17.1",
+    "@modelcontextprotocol/ext-apps": "^0.2.2",
+    "@primer/behaviors": "^1.8.4",
+    "@primer/brand-primitives": "^0.51.0",
+    "@primer/css": "^21.5.1",
+    "@primer/octicons-react": "^19.15.1",
+    "@primer/primitives": "^10.5.0",
+    "@primer/react": "^37.19.0",
+    "@primer/react-brand": "^0.58.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@styled-system/css": "^5.1.5",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.90.6",
+    "@toon-format/toon": "^1.3.0",
+    "@xyflow/react": "^12.10.0",
+    "ai": "^6.0.6",
+    "ansi-to-html": "^0.7.2",
+    "axios": "^1.7.7",
+    "boring-avatars": "^2.0.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^2.29.3",
+    "deepmerge": "^4.3.1",
+    "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.2",
+    "embla-carousel-react": "^8.6.0",
+    "fuse.js": "^7.0.0",
+    "html2canvas": "^1.4.1",
+    "input-otp": "^1.4.2",
+    "jwt-decode": "^2.2.0",
+    "localforage": "^1.10.0",
+    "lucide-react": "^0.542.0",
+    "marked": "^4.0.10",
+    "mock-socket": "^9.3.1",
+    "motion": "^12.23.26",
+    "nanoid": "^5.1.6",
+    "react": "18.3.1",
+    "react-confetti": "^6.4.0",
+    "react-dom": "18.3.1",
+    "react-hook-form": "^7.69.0",
+    "react-is": "^19.2.0",
+    "react-router-dom": "^6.0.0",
+    "react-toastify": "^11.0.5",
+    "recharts": "^3.6.0",
+    "shiki": "^3.20.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^1.6.10",
+    "styled-system": "^5.1.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "tokenlens": "^1.3.1",
+    "tslib": "^2.8.1",
+    "tus-js-client": "^4.2.3",
+    "tw-animate-css": "^1.4.0",
+    "ulid": "^2.3.0",
+    "unique-names-generator": "^4.7.1",
+    "use-stick-to-bottom": "^1.1.1",
+    "usehooks-ts": "^2.9.1",
+    "uuid": "^13.0.0",
+    "validator": "^13.7.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.1.13",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.0",
+    "@copilotkit/react-core": "1.10.6",
+    "@copilotkit/react-ui": "1.10.6",
+    "@copilotkit/runtime": "1.10.6",
+    "@eslint/js": "^9.29.0",
+    "@storybook/addon-a11y": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-onboarding": "^9.1.1",
+    "@storybook/addon-vitest": "^9.1.1",
+    "@storybook/builder-vite": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
+    "@tailwindcss/postcss": "^4.1.16",
+    "@types/node": "^20.11.0",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.6",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "abort-controller": "^3.0.0",
+    "autoprefixer": "^10.4.21",
+    "crypto-browserify": "^3.12.1",
+    "dotenv": "^17.2.2",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.1",
+    "globals": "^16.2.0",
+    "gulp": "^4.0.2",
+    "gulp-append-prepend": "^1.0.8",
+    "gulp-filter": "^6.0.0",
+    "gulp-watch": "^5.0.1",
+    "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^16.1.5",
+    "npm-run-all": "^4.1.5",
+    "patch-package": "^8.0.0",
+    "playwright": "^1.53.2",
+    "prettier": "^3.6.2",
+    "react-router-dom": "^6.22.3",
+    "rimraf": "^6.0.1",
+    "storybook": "^9.1.1",
+    "typedoc-plugin-markdown": "^4.0.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.34.1",
+    "vite": "^7.0.0",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-treat-umd-as-commonjs": "^0.1.4",
+    "vite-plugin-wasm": "^3.5.0",
+    "vitest": "^3.2.4"
+  },
+  "resolutions": {
+    "@microsoft/fast-colors": "5.3.1",
+    "@microsoft/fast-components": "2.30.6",
+    "@microsoft/fast-element": "1.13.0",
+    "@microsoft/fast-foundation": "2.49.6",
+    "@microsoft/fast-react-wrapper": "0.3.24",
+    "@microsoft/fast-web-utilities": "5.4.1",
+    "@microsoft/load-themed-styles": "1.10.295",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.6",
+    "ai": "^6.0.6",
+    "pyodide": "0.28.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "^5.8.3"
+  },
+  "overrides": {
+    "@microsoft/fast-colors": "5.3.1",
+    "@microsoft/fast-components": "2.30.6",
+    "@microsoft/fast-element": "1.13.0",
+    "@microsoft/fast-foundation": "2.49.6",
+    "@microsoft/fast-react-wrapper": "0.3.24",
+    "@microsoft/fast-web-utilities": "5.4.1",
+    "@microsoft/load-themed-styles": "1.10.295",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.6",
+    "ai": "^6.0.6",
+    "pyodide": "0.28.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "^5.8.3"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "src/**/*.{css,json,md}": [
+      "prettier --write"
+    ]
+  },
+  "optionalDependencies": {
+    "keytar": "^7.9.0"
+  }
+}

package/style/animation/Animation.module.css

@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * Hero example
+ */
+.DiscussionsExampleHero {
+  --discussions-example-hero-shadow: 0 0 0 1px rgba(53, 72, 91, 0.14), 0 2.75px 2.21px rgba(0, 0, 0, 0.07),
+    0 6.65px 5.32px rgba(0, 0, 0, 0.043), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03),
+    0 42px 33.4px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.017);
+  max-width: 1024px;
+  margin: var(--base-size-128) auto;
+  position: relative;
+}
+
+.DiscussionsExampleHero::before {
+  content: '';
+  position: absolute;
+  inset: var(--base-size-16);
+  filter: blur(var(--base-size-48));
+  transform: translateZ(0);
+  background: linear-gradient(
+    to right,
+    hsl(var(--base-color-scale-blue-2-hsl)),
+    hsl(var(--base-color-scale-purple-2-hsl))
+  );
+}
+
+.DiscussionsExampleHero__image {
+  box-shadow: var(--discussions-example-hero-shadow);
+  width: 100%;
+  height: auto;
+  position: relative;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.DiscussionsExampleHero__label {
+  box-shadow: var(--discussions-example-hero-shadow);
+
+  padding-left: var(--base-size-24);
+  padding-right: var(--base-size-24);
+  height: var(--base-size-48);
+  background-color: var(--brand-color-canvas-default);
+}
+
+.DiscussionsExampleHero__label svg {
+  height: var(--base-size-24);
+  width: var(--base-size-24);
+}
+
+.DiscussionsExampleHero__label--one {
+  position: absolute;
+  top: -32px;
+  left: 20%;
+}
+
+.DiscussionsExampleHero__labelContainer--two {
+  position: absolute;
+  top: 20%;
+  right: -5%;
+}
+
+.DiscussionsExampleHero__label--two {
+  transform: scale(1.2);
+}
+
+.DiscussionsExampleHero__label--three {
+  position: absolute;
+  bottom: -3%;
+  left: -2%;
+  transform: scale(1.5);
+}
+
+.DiscussionsExampleHero__video {
+  position: absolute;
+  top: 30%;
+  left: 60%;
+}
+
+/**
+ * Progress bar example
+ */
+.ProgressBarExamples {
+  max-width: 1024px;
+  margin: var(--base-size-128) auto;
+}
+
+.ProgressBarExample {
+  position: relative;
+}
+
+.ProgressBarExample__bar {
+  background-color: var(--brand-color-neutral-subtle);
+  border-radius: var(--brand-borderRadius-medium);
+  display: flex;
+  height: var(--base-size-8);
+  overflow: hidden;
+}
+
+.ProgressBarExample__barInner {
+  background-color: var(--base-color-scale-blue-4);
+  height: 100%;
+}
+
+/**
+ * Playground example
+ */
+.Playground {
+  background-color: var(--brand-color-neutral-subtle);
+  max-width: 200px;
+  min-height: 200px;
+}
+
+.PlaygroundText {
+  pointer-events: none;
+}
+
+/*
+* TimelineBar example
+*/
+.TimelineBarExample {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--brand-color-canvas-default);
+  padding: var(--base-size-48) var(--base-size-48) var(--base-size-96);
+  justify-content: center;
+}
+
+.TimelineBarExample__start {
+  position: relative;
+}
+
+.TimelineBarExample__line {
+  background: linear-gradient(#56d364, #2ea043, var(--brand-color-canvas-default));
+  width: var(--base-size-4);
+  height: 200px;
+  border-radius: var(--brand-borderRadius-medium);
+  display: block;
+  position: absolute;
+  left: calc(50% - var(--base-size-4));
+  top: 60px;
+}
+
+.TimelineBarExample__icon {
+  padding: var(--base-size-8);
+  border-radius: 50%;
+  background-color: hsl(var(--base-color-scale-green-7-hsl) / 1);
+  display: flex;
+  height: var(--base-size-48);
+  width: var(--base-size-48);
+  align-items: center;
+  justify-content: center;
+}
+
+.TimelineBarExample__text {
+  max-width: 650px;
+}
+
+.TimelineBarExample__highlightedText {
+  color: var(--base-color-scale-green-0) !important;
+}
+
+.TimelineBarExample__start {
+  display: flex;
+  order: 1;
+}
+
+.TimelineBarExample__end {
+  order: 2;
+}

package/style/base.css

@@ -0,0 +1,204 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ ---break---
+ */
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@plugin "tailwindcss-animate";
+
+/*
+ ---break---
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --dla-color-green-light: #2ECC71;
+  --dla-color-green-main: #1ABC9C;
+  --dla-color-green-dark: #16A085;
+  --dla-color-grey: #59595C;
+  --dla-color-black: #000000;
+  --dla-color-white: #FFFFFF;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+body {
+  background: #ffffff !important;
+  overflow-y: visible !important;
+  margin: 0 !important;
+  padding: 0 !important;
+/*  --jp-ui-font-size1: 12px; */
+}
+
+.Primer_Brand__Hero-module__Hero___EM3jf {
+  padding-top: 88px;
+}
+
+#dla-hero .Primer_Brand__Heading-module__Heading--1___Ufc7G {
+  font-size: 62px;
+}
+
+#dla-hero .Primer_Brand__Grid-module__Grid___q48mT {
+  grid-column-gap: 12px !important;
+}
+
+#dla-hero .Primer_Brand__Text-module__Text___pecHN {
+  max-width: 1000px;
+  padding-right: 15px;
+}
+
+#dla-hero .Primer_Brand__Text-module__Text___pecHN {
+  line-height: 16px;
+}
+
+/* TODO Check the specificity of this rule */
+.jp-ThemedContainer a {
+  color: var(--jp-brand-color1, #1976d2) !important;
+  text-decoration: none !important
+}
+
+.jp-Shout-button {
+  height: 30px;
+  width: 150px;
+  margin: 8px;
+  padding-top: 9px;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 2px;
+  background-color: #2296f3;
+  color: #212121;
+}
+
+.jp-Shout-summary {
+  margin: 4px;
+}
+
+/*
+ ---break---
+ */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/*
+ ---break---
+ */
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/*
+ ---break---
+ */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}