feat(css): add Base UI theme demo

feat(css): add framework-agnostic design system
2026-07-22 14:14:58 +00:00 · 2026-07-22 13:49:01 +00:00
29 changed files with 2105 additions and 34 deletions
@@ -413,6 +413,27 @@
        "drizzle-kit": "catalog:",
      },
    },
+    "packages/css": {
+      "name": "@opencode-ai/css",
+      "version": "1.18.4",
+    },
+    "packages/css-base-ui": {
+      "name": "@opencode-ai/css-base-ui",
+      "version": "1.18.4",
+      "dependencies": {
+        "@base-ui/react": "1.6.0",
+        "@opencode-ai/css": "workspace:*",
+        "react": "19.2.7",
+        "react-dom": "19.2.7",
+      },
+      "devDependencies": {
+        "@types/react": "19.2.17",
+        "@types/react-dom": "19.2.3",
+        "@typescript/native-preview": "catalog:",
+        "@vitejs/plugin-react": "6.0.3",
+        "vite": "8.1.4",
+      },
+    },
    "packages/desktop": {
      "name": "@opencode-ai/desktop",
      "version": "1.18.4",
@@ -1473,6 +1494,10 @@

    "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],

+    "@base-ui/react": ["@base-ui/react@1.6.0", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@base-ui/utils": "0.3.1", "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw=="],
+
+    "@base-ui/utils": ["@base-ui/utils@0.3.1", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.2.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg=="],
+
    "@bufbuild/protobuf": ["@bufbuild/protobuf@2.12.1", "", {}, "sha512-BvAMfS6LrgZiryOAZ4pBYucu4wG/Ei/9o9DZ9akbREnMLbPJiom2i8b9C8IsKErQoiKqVhrerzt3kOT/RrzLHg=="],

    "@bufbuild/protoplugin": ["@bufbuild/protoplugin@2.12.1", "", { "dependencies": { "@bufbuild/protobuf": "2.12.1", "@typescript/vfs": "^1.6.2", "typescript": "5.4.5" } }, "sha512-PY58KxQVAD1BnnKtStOctsMoegEVGfBnY5AOqVQOIu711nA13oYtTqJM8df5lUQg2J1DR3XxUXptE+fWX5oLdA=="],
@@ -2085,6 +2110,10 @@

    "@opencode-ai/core": ["@opencode-ai/core@workspace:packages/core"],

+    "@opencode-ai/css": ["@opencode-ai/css@workspace:packages/css"],
+
+    "@opencode-ai/css-base-ui": ["@opencode-ai/css-base-ui@workspace:packages/css-base-ui"],
+
    "@opencode-ai/desktop": ["@opencode-ai/desktop@workspace:packages/desktop"],

    "@opencode-ai/docs": ["@opencode-ai/docs@workspace:packages/docs"],
@@ -5267,7 +5296,7 @@

    "react": ["react@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="],

-    "react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+    "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],

    "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],

@@ -5449,7 +5478,7 @@

    "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="],

-    "scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],

    "scroll-into-view-if-needed": ["scroll-into-view-if-needed@3.1.0", "", { "dependencies": { "compute-scroll-into-view": "^3.0.2" } }, "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ=="],

@@ -6325,6 +6354,8 @@

    "@babel/helper-create-class-features-plugin/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],

+    "@base-ui/utils/reselect": ["reselect@5.2.0", "", {}, "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw=="],
+
    "@bufbuild/protoplugin/typescript": ["typescript@5.4.5", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ=="],

    "@cloudflare/kv-asset-handler/mime": ["mime@3.0.0", "", { "bin": { "mime": "cli.js" } }, "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="],
@@ -6361,8 +6392,6 @@

    "@fuma-translate/react/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "@fuma-translate/react/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "@hey-api/json-schema-ref-parser/js-yaml": ["js-yaml@4.3.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q=="],

    "@hey-api/openapi-ts/open": ["open@11.0.0", "", { "dependencies": { "default-browser": "^5.4.0", "define-lazy-prop": "^3.0.0", "is-in-ssh": "^1.0.0", "is-inside-container": "^1.0.0", "powershell-utils": "^0.1.0", "wsl-utils": "^0.3.0" } }, "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw=="],
@@ -6379,12 +6408,16 @@

    "@jsx-email/cli/esbuild": ["esbuild@0.19.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.19.12", "@esbuild/android-arm": "0.19.12", "@esbuild/android-arm64": "0.19.12", "@esbuild/android-x64": "0.19.12", "@esbuild/darwin-arm64": "0.19.12", "@esbuild/darwin-x64": "0.19.12", "@esbuild/freebsd-arm64": "0.19.12", "@esbuild/freebsd-x64": "0.19.12", "@esbuild/linux-arm": "0.19.12", "@esbuild/linux-arm64": "0.19.12", "@esbuild/linux-ia32": "0.19.12", "@esbuild/linux-loong64": "0.19.12", "@esbuild/linux-mips64el": "0.19.12", "@esbuild/linux-ppc64": "0.19.12", "@esbuild/linux-riscv64": "0.19.12", "@esbuild/linux-s390x": "0.19.12", "@esbuild/linux-x64": "0.19.12", "@esbuild/netbsd-x64": "0.19.12", "@esbuild/openbsd-x64": "0.19.12", "@esbuild/sunos-x64": "0.19.12", "@esbuild/win32-arm64": "0.19.12", "@esbuild/win32-ia32": "0.19.12", "@esbuild/win32-x64": "0.19.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg=="],

+    "@jsx-email/cli/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@jsx-email/cli/tailwindcss": ["tailwindcss@3.3.3", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.18.2", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", "postcss": "^8.4.23", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.1", "postcss-nested": "^6.0.1", "postcss-selector-parser": "^6.0.11", "resolve": "^1.22.2", "sucrase": "^3.32.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w=="],

    "@jsx-email/cli/vite": ["vite@4.5.14", "", { "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", "rollup": "^3.27.1" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@types/node": ">= 14", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g=="],

    "@jsx-email/doiuse-email/htmlparser2": ["htmlparser2@9.1.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.1.0", "entities": "^4.5.0" } }, "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ=="],

+    "@jsx-email/tailwind/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@kobalte/core/solid-presence": ["solid-presence@0.1.8", "", { "dependencies": { "@corvu/utils": "~0.4.0" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-pWGtXUFWYYUZNbg5YpG5vkQJyOtzn2KXhxYaMx/4I+lylTLYkITOLevaCwMRN+liCVk0pqB6EayLWojNqBFECA=="],

    "@malept/flatpak-bundler/fs-extra": ["fs-extra@9.1.0", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
@@ -6449,8 +6482,6 @@

    "@mintlify/mdx/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "@mintlify/mdx/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "@mintlify/mdx/shiki": ["shiki@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/engine-javascript": "3.23.0", "@shikijs/engine-oniguruma": "3.23.0", "@shikijs/langs": "3.23.0", "@shikijs/themes": "3.23.0", "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA=="],

    "@mintlify/models/axios": ["axios@1.16.1", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.5", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A=="],
@@ -6591,6 +6622,10 @@

    "@opencode-ai/core/@ai-sdk/openai-compatible": ["@ai-sdk/openai-compatible@2.0.41", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.23" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-kNAGINk71AlOXx10Dq/PXw4t/9XjdK8uxfpVElRwtSFMdeSiLVt58p9TPx4/FJD+hxZuVhvxYj9r42osxWq79g=="],

+    "@opencode-ai/css-base-ui/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
+
+    "@opencode-ai/css-base-ui/vite": ["vite@8.1.4", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.5", "postcss": "^8.5.16", "rolldown": "~1.1.4", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.3.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ=="],
+
    "@opencode-ai/desktop/@actions/artifact": ["@actions/artifact@4.0.0", "", { "dependencies": { "@actions/core": "^1.10.0", "@actions/github": "^6.0.1", "@actions/http-client": "^2.1.0", "@azure/core-http": "^3.0.5", "@azure/storage-blob": "^12.15.0", "@octokit/core": "^5.2.1", "@octokit/plugin-request-log": "^1.0.4", "@octokit/plugin-retry": "^3.0.9", "@octokit/request": "^8.4.1", "@octokit/request-error": "^5.1.1", "@protobuf-ts/plugin": "^2.2.3-alpha.1", "archiver": "^7.0.1", "jwt-decode": "^3.1.2", "unzip-stream": "^0.3.1" } }, "sha512-HCc2jMJRAfviGFAh0FsOR/jNfWhirxl7W6z8zDtttt0GltwxBLdEIjLiweOPFl9WbyJRW1VWnPUSAixJqcWUMQ=="],

    "@opencode-ai/desktop/marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="],
@@ -6601,6 +6636,8 @@

    "@opencode-ai/storybook/@types/react": ["@types/react@18.0.25", "", { "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g=="],

+    "@opencode-ai/storybook/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@opencode-ai/ui/@solid-primitives/resize-observer": ["@solid-primitives/resize-observer@2.1.3", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-zBLje5E06TgOg93S7rGPldmhDnouNGhvfZVKOp+oG2XU8snA+GoCSSCz1M+jpNAg5Ek2EakU5UVQqL152WmdXQ=="],

    "@opencode-ai/updates/wrangler": ["wrangler@4.110.0", "", { "dependencies": { "@cloudflare/kv-asset-handler": "0.5.0", "@cloudflare/unenv-preset": "2.16.1", "blake3-wasm": "2.1.5", "esbuild": "0.28.1", "miniflare": "4.20260708.1", "path-to-regexp": "6.3.0", "unenv": "2.0.0-rc.24", "workerd": "1.20260708.1" }, "optionalDependencies": { "fsevents": "2.3.3" }, "peerDependencies": { "@cloudflare/workers-types": "^5.20260708.1" }, "optionalPeers": ["@cloudflare/workers-types"], "bin": { "wrangler": "bin/wrangler.js", "wrangler2": "bin/wrangler.js", "cf-wrangler": "bin/cf-wrangler.js" } }, "sha512-xZeXKYi7hxQRF5anL+v77RkufJNpF9f3Eqeyqq2QBsETpLZgh0Agj0jJ6JPtkbgn6ukZdh8OK5egsGPWIditgg=="],
@@ -6613,8 +6650,6 @@

    "@opencode-ai/www/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "@opencode-ai/www/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "@opencode-ai/www/tailwindcss": ["tailwindcss@4.3.2", "", {}, "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA=="],

    "@opencode-ai/www/vite": ["vite@8.1.4", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.5", "postcss": "^8.5.16", "rolldown": "~1.1.4", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.3.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ=="],
@@ -6645,12 +6680,8 @@

    "@pierre/diffs/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "@pierre/diffs/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "@pierre/trees/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "@pierre/trees/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "@poppinss/dumper/supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],

    "@protobuf-ts/plugin/typescript": ["typescript@3.9.10", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q=="],
@@ -6671,8 +6702,12 @@

    "@radix-ui/react-accordion/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.3", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.3", "@radix-ui/react-use-layout-effect": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA=="],

+    "@radix-ui/react-arrow/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-collapsible/@radix-ui/react-presence": ["@radix-ui/react-presence@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg=="],

+    "@radix-ui/react-collapsible/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-collection/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA=="],

    "@radix-ui/react-collection/@radix-ui/react-context": ["@radix-ui/react-context@1.2.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg=="],
@@ -6705,8 +6740,12 @@

    "@radix-ui/react-dismissable-layer/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],

+    "@radix-ui/react-dismissable-layer/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-focus-scope/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],

+    "@radix-ui/react-focus-scope/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-navigation-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.5", "", {}, "sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg=="],

    "@radix-ui/react-navigation-menu/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA=="],
@@ -6727,18 +6766,28 @@

    "@radix-ui/react-popover/@radix-ui/react-presence": ["@radix-ui/react-presence@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg=="],

+    "@radix-ui/react-popover/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-popover/react-remove-scroll": ["react-remove-scroll@2.5.5", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.3", "react-style-singleton": "^2.2.1", "tslib": "^2.1.0", "use-callback-ref": "^1.3.0", "use-sidecar": "^1.1.2" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw=="],

    "@radix-ui/react-popper/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],

+    "@radix-ui/react-popper/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
+    "@radix-ui/react-portal/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-presence/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

+    "@radix-ui/react-primitive/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-roving-focus/@radix-ui/react-collection": ["@radix-ui/react-collection@1.0.3", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-context": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-slot": "1.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA=="],

    "@radix-ui/react-roving-focus/@radix-ui/react-direction": ["@radix-ui/react-direction@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA=="],

    "@radix-ui/react-roving-focus/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],

+    "@radix-ui/react-roving-focus/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-scroll-area/@radix-ui/primitive": ["@radix-ui/primitive@1.1.5", "", {}, "sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg=="],

    "@radix-ui/react-scroll-area/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA=="],
@@ -6761,16 +6810,24 @@

    "@radix-ui/react-tabs/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.3", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.3", "@radix-ui/react-use-layout-effect": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA=="],

+    "@radix-ui/react-toggle/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-toggle-group/@radix-ui/react-direction": ["@radix-ui/react-direction@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA=="],

+    "@radix-ui/react-toggle-group/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-tooltip/@radix-ui/react-presence": ["@radix-ui/react-presence@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg=="],

+    "@radix-ui/react-tooltip/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@radix-ui/react-use-controllable-state/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],

    "@radix-ui/react-use-effect-event/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

    "@radix-ui/react-use-escape-keydown/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],

+    "@radix-ui/react-visually-hidden/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],

    "@sentry/bundler-plugin-core/glob": ["glob@9.3.5", "", { "dependencies": { "fs.realpath": "^1.0.0", "minimatch": "^8.0.2", "minipass": "^4.2.4", "path-scurry": "^1.6.1" } }, "sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q=="],
@@ -6853,8 +6910,6 @@

    "@storybook/addon-docs/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "@storybook/addon-docs/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "@storybook/csf-plugin/unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],

    "@tailwindcss/node/lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],
@@ -7067,6 +7122,8 @@

    "form-data/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],

+    "framer-motion/react-dom": ["react-dom@18.2.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="],
+
    "fs-extra/jsonfile": ["jsonfile@6.2.1", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q=="],

    "fumadocs-core/js-yaml": ["js-yaml@5.2.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.mjs" } }, "sha512-zfLtNfQqxVqq3uaTqSkh4x4hZw3KHobGUA0fJUj4wawW8bsQLTVqpHdXSIzidh7o+4lEW36tANuAGdaFx6Zgnw=="],
@@ -7093,8 +7150,6 @@

    "fumadocs-ui/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "fumadocs-ui/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "fumadocs-ui/shiki": ["shiki@4.3.1", "", { "dependencies": { "@shikijs/core": "4.3.1", "@shikijs/engine-javascript": "4.3.1", "@shikijs/engine-oniguruma": "4.3.1", "@shikijs/langs": "4.3.1", "@shikijs/themes": "4.3.1", "@shikijs/types": "4.3.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-oR+qDVi2OjX1tmDpyv+3KviX01KzO6Af+0NNnKnsp9491UEGz2YpxTuJboS/6VhYpTdqzmuJBuiTlrAWWJAssw=="],

    "gaxios/node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
@@ -7175,8 +7230,6 @@

    "next-mdx-remote-client/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

-    "next-mdx-remote-client/react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
    "next-mdx-remote-client/serialize-error": ["serialize-error@13.0.1", "", { "dependencies": { "non-error": "^0.1.0", "type-fest": "^5.4.1" } }, "sha512-bBZaRwLH9PN5HbLCjPId4dP5bNGEtumcErgOX952IsvOhVPrm3/AeK1y0UHA/QaPG701eg0yEnOKsCOC6X/kaA=="],

    "nitro/h3": ["h3@2.0.1-rc.5", "", { "dependencies": { "rou3": "^0.7.9", "srvx": "^0.9.1" }, "peerDependencies": { "crossws": "^0.4.1" }, "optionalPeers": ["crossws"] }, "sha512-qkohAzCab0nLzXNm78tBjZDvtKMTmtygS8BJLT3VPczAQofdqlFXDPkXdLMJN4r05+xqneG8snZJ0HgkERCZTg=="],
@@ -7249,6 +7302,8 @@

    "rc/ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],

+    "react-dom/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
+
    "react-reconciler/react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],

    "react-reconciler/scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
@@ -7525,8 +7580,6 @@

    "@expressive-code/plugin-shiki/shiki/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],

-    "@fuma-translate/react/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "@hey-api/json-schema-ref-parser/js-yaml/argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],

    "@inquirer/core/wrap-ansi/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
@@ -7581,6 +7634,8 @@

    "@jsx-email/cli/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.19.12", "", { "os": "win32", "cpu": "x64" }, "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA=="],

+    "@jsx-email/cli/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@jsx-email/cli/tailwindcss/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],

    "@jsx-email/cli/tailwindcss/glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
@@ -7595,6 +7650,8 @@

    "@jsx-email/doiuse-email/htmlparser2/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],

+    "@jsx-email/tailwind/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@malept/flatpak-bundler/fs-extra/jsonfile": ["jsonfile@6.2.1", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q=="],

    "@mintlify/cli/fs-extra/jsonfile": ["jsonfile@6.2.1", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q=="],
@@ -7677,8 +7734,6 @@

    "@mintlify/mdx/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.20.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw=="],

-    "@mintlify/mdx/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "@mintlify/mdx/shiki/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],

    "@mintlify/mdx/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA=="],
@@ -7875,6 +7930,8 @@

    "@opencode-ai/desktop/@actions/artifact/@actions/http-client": ["@actions/http-client@2.2.3", "", { "dependencies": { "tunnel": "^0.0.6", "undici": "^5.25.4" } }, "sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA=="],

+    "@opencode-ai/storybook/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@opencode-ai/updates/wrangler/@cloudflare/kv-asset-handler": ["@cloudflare/kv-asset-handler@0.5.0", "", {}, "sha512-jxQYkj8dSIzc0cD6cMMNdOc1UVjqSqu8BZdor5s8cGjW2I8BjODt/kWPVdY+u9zj3ms75Q5qaZgnxUad83+eAg=="],

    "@opencode-ai/updates/wrangler/@cloudflare/unenv-preset": ["@cloudflare/unenv-preset@2.16.1", "", { "peerDependencies": { "unenv": "2.0.0-rc.24", "workerd": ">1.20260305.0 <2.0.0-0" }, "optionalPeers": ["workerd"] }, "sha512-ECxObrMfyTl5bhQf/lZCXwo5G6xX9IAUo+nDMKK4SZ8m4Jvvxp52vilxyySSWh2YTZz8+HQ07qGH/2rEom1vDw=="],
@@ -7897,8 +7954,6 @@

    "@opencode-ai/www/@tailwindcss/vite/@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.2", "@tailwindcss/oxide-darwin-arm64": "4.3.2", "@tailwindcss/oxide-darwin-x64": "4.3.2", "@tailwindcss/oxide-freebsd-x64": "4.3.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2", "@tailwindcss/oxide-linux-arm64-musl": "4.3.2", "@tailwindcss/oxide-linux-x64-gnu": "4.3.2", "@tailwindcss/oxide-linux-x64-musl": "4.3.2", "@tailwindcss/oxide-wasm32-wasi": "4.3.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2", "@tailwindcss/oxide-win32-x64-msvc": "4.3.2" } }, "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag=="],

-    "@opencode-ai/www/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "@opencode-ai/www/wrangler/@cloudflare/kv-asset-handler": ["@cloudflare/kv-asset-handler@0.5.0", "", {}, "sha512-jxQYkj8dSIzc0cD6cMMNdOc1UVjqSqu8BZdor5s8cGjW2I8BjODt/kWPVdY+u9zj3ms75Q5qaZgnxUad83+eAg=="],

    "@opencode-ai/www/wrangler/@cloudflare/unenv-preset": ["@cloudflare/unenv-preset@2.16.1", "", { "peerDependencies": { "unenv": "2.0.0-rc.24", "workerd": ">1.20260305.0 <2.0.0-0" }, "optionalPeers": ["workerd"] }, "sha512-ECxObrMfyTl5bhQf/lZCXwo5G6xX9IAUo+nDMKK4SZ8m4Jvvxp52vilxyySSWh2YTZz8+HQ07qGH/2rEom1vDw=="],
@@ -7917,10 +7972,6 @@

    "@pierre/diffs/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.20.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw=="],

-    "@pierre/diffs/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
-    "@pierre/trees/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "@radix-ui/react-accordion/@radix-ui/react-collapsible/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

    "@radix-ui/react-accordion/@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],
@@ -7929,14 +7980,32 @@

    "@radix-ui/react-accordion/@radix-ui/react-use-controllable-state/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

+    "@radix-ui/react-arrow/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-collapsible/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@radix-ui/react-dialog/@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

    "@radix-ui/react-dialog/@radix-ui/react-portal/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

    "@radix-ui/react-dialog/@radix-ui/react-use-controllable-state/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

+    "@radix-ui/react-dismissable-layer/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-focus-scope/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@radix-ui/react-navigation-menu/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA=="],

+    "@radix-ui/react-popover/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-popper/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-portal/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-primitive/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-roving-focus/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@radix-ui/react-scroll-area/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA=="],

    "@radix-ui/react-tabs/@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],
@@ -7949,6 +8018,14 @@

    "@radix-ui/react-tabs/@radix-ui/react-use-controllable-state/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA=="],

+    "@radix-ui/react-toggle-group/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-toggle/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-tooltip/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "@radix-ui/react-visually-hidden/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "@sentry/bundler-plugin-core/glob/minimatch": ["minimatch@8.0.7", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-V+1uQNdzybxa14e/p00HZnQNNcTjnRJjDxg2V8wtkjFctq4M7hXFws4oekyTP0Jebeq7QYtpFyOeBAjc88zvYg=="],

    "@sentry/bundler-plugin-core/glob/minipass": ["minipass@4.2.8", "", {}, "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ=="],
@@ -8011,8 +8088,6 @@

    "@stoplight/spectral-core/minimatch/brace-expansion": ["brace-expansion@1.1.16", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw=="],

-    "@storybook/addon-docs/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "@storybook/csf-plugin/unplugin/webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],

    "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ=="],
@@ -8147,6 +8222,8 @@

    "form-data/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],

+    "framer-motion/react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
    "fumadocs-core/js-yaml/argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],

    "fumadocs-core/shiki/@shikijs/core": ["@shikijs/core@4.3.1", "", { "dependencies": { "@shikijs/primitive": "4.3.1", "@shikijs/types": "4.3.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-ANMDxuaPsNMdDC1m4vfvhlDmJweMwkE5XitTwrq2rWHx5jM+dlm4MmHt2PP6t0uejfR77SuhrhJ0zEijIF/uhA=="],
@@ -8257,8 +8334,6 @@

    "fumadocs-ui/motion/framer-motion": ["framer-motion@12.42.2", "", { "dependencies": { "motion-dom": "^12.42.2", "motion-utils": "^12.39.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw=="],

-    "fumadocs-ui/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "fumadocs-ui/shiki/@shikijs/core": ["@shikijs/core@4.3.1", "", { "dependencies": { "@shikijs/primitive": "4.3.1", "@shikijs/types": "4.3.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-ANMDxuaPsNMdDC1m4vfvhlDmJweMwkE5XitTwrq2rWHx5jM+dlm4MmHt2PP6t0uejfR77SuhrhJ0zEijIF/uhA=="],

    "fumadocs-ui/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@4.3.1", "", { "dependencies": { "@shikijs/types": "4.3.1", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.6" } }, "sha512-JBItcnPuYq7jVJdZo/vMj94r+szT7XEjHFX+mvFDGSEIbVAXAGyHAHzhbWzpGOwYidCZrErJLLgn2PVeiokHnQ=="],
@@ -8315,8 +8390,6 @@

    "motion/framer-motion/motion-utils": ["motion-utils@12.39.0", "", {}, "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ=="],

-    "next-mdx-remote-client/react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
    "next-mdx-remote-client/serialize-error/type-fest": ["type-fest@5.8.0", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-YGYEVz3Fm5iy/AybuA0oyNFq7H4CgQNfRp/qfe8nurE1kuCeNm3/vfm9X4Mtl+qLyaKJUh5xrFZwogr41SMjYA=="],

    "p-locate/p-limit/yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" data-color-scheme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#080808" />
+    <link rel="icon" href="data:," />
+    <title>OpenCode × Base UI</title>
+  </head>
+  <body data-oc-root>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@opencode-ai/css-base-ui",
+  "version": "1.18.4",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build --base=./ && bun script/inline.ts",
+    "typecheck": "tsgo --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.6.0",
+    "@opencode-ai/css": "workspace:*",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@typescript/native-preview": "catalog:",
+    "@vitejs/plugin-react": "6.0.3",
+    "vite": "8.1.4"
+  }
+}
@@ -0,0 +1,20 @@
+import { rm } from "node:fs/promises"
+import path from "node:path"
+
+const root = path.join(import.meta.dir, "..", "dist")
+const html = await Bun.file(path.join(root, "index.html")).text()
+const script = html.match(/<script type="module" crossorigin src="\.\/(assets\/[^"]+\.js)"><\/script>/)
+const style = html.match(/<link rel="stylesheet" crossorigin href="\.\/(assets\/[^"]+\.css)">/)
+
+if (!script || !style) throw new Error("Vite output did not contain the expected script and stylesheet")
+
+const javascript = (await Bun.file(path.join(root, script[1])).text()).replaceAll("</script", "<\/script")
+const stylesheet = (await Bun.file(path.join(root, style[1])).text()).replaceAll("</style", "<\/style")
+
+await Bun.write(
+  path.join(root, "index.html"),
+  html
+    .replace(script[0], () => `<script type="module">${javascript}</script>`)
+    .replace(style[0], () => `<style>${stylesheet}</style>`),
+)
+await rm(path.join(root, "assets"), { recursive: true })
@@ -0,0 +1,260 @@
+import { Accordion } from "@base-ui/react/accordion"
+import { Button } from "@base-ui/react/button"
+import { Checkbox } from "@base-ui/react/checkbox"
+import { Dialog } from "@base-ui/react/dialog"
+import { Field } from "@base-ui/react/field"
+import { Input } from "@base-ui/react/input"
+import { Menu } from "@base-ui/react/menu"
+import { Popover } from "@base-ui/react/popover"
+import { Select } from "@base-ui/react/select"
+import { Slider } from "@base-ui/react/slider"
+import { Switch } from "@base-ui/react/switch"
+import { Tabs } from "@base-ui/react/tabs"
+import { Tooltip } from "@base-ui/react/tooltip"
+import { createRoot } from "react-dom/client"
+import "@opencode-ai/css"
+import "./theme.css"
+
+const environments = [
+  { label: "Production", value: "production" },
+  { label: "Staging", value: "staging" },
+  { label: "Development", value: "development" },
+]
+
+function App() {
+  return (
+    <main data-component="page">
+      <header data-slot="page-header">
+        <div data-slot="page-heading">
+          <p data-slot="page-eyebrow">Theme experiment / Base UI 1.6</p>
+          <h1 data-slot="page-title">Control room</h1>
+          <p data-slot="page-description">
+            OpenCode’s unchanged colors, type, radii, and elevation applied to accessible Base UI primitives.
+          </p>
+        </div>
+        <div data-slot="page-actions">
+          <Tooltip.Provider>
+            <Tooltip.Root>
+              <Tooltip.Trigger data-component="button" data-variant="ghost" data-size="normal">
+                ⌘ K
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Positioner sideOffset={8}>
+                  <Tooltip.Popup data-ui="tooltip">Open command menu</Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          </Tooltip.Provider>
+          <Button data-component="button" data-variant="contrast" data-size="normal">
+            New deploy
+          </Button>
+        </div>
+      </header>
+
+      <div data-slot="page-content">
+        <section data-component="surface">
+          <header data-slot="surface-header">
+            <div className="section-heading">
+              <div>
+                <h2 data-slot="surface-title">Release settings</h2>
+                <p data-slot="surface-description">Field, Input, Select, Checkbox, Switch, and Slider</p>
+              </div>
+              <span data-component="badge" data-variant="accent">
+                Healthy
+              </span>
+            </div>
+          </header>
+          <div data-slot="surface-content" className="form-grid">
+            <Field.Root data-component="field">
+              <Field.Label data-slot="field-label">Release name</Field.Label>
+              <Input data-component="input" defaultValue="opencode-1.18.4" />
+              <Field.Description data-slot="field-description">Visible in the deployment timeline.</Field.Description>
+            </Field.Root>
+
+            <div data-component="field">
+              <Select.Root items={environments} defaultValue="production">
+                <Select.Label data-slot="field-label">Environment</Select.Label>
+                <Select.Trigger data-component="select" className="select-trigger">
+                  <Select.Value />
+                  <Select.Icon aria-hidden>⌄</Select.Icon>
+                </Select.Trigger>
+                <Select.Portal>
+                  <Select.Positioner className="positioner" sideOffset={6} alignItemWithTrigger={false}>
+                    <Select.Popup data-ui="popup">
+                      {environments.map((environment) => (
+                        <Select.Item key={environment.value} value={environment.value} data-ui="option">
+                          <Select.ItemIndicator>✓</Select.ItemIndicator>
+                          <Select.ItemText>{environment.label}</Select.ItemText>
+                        </Select.Item>
+                      ))}
+                    </Select.Popup>
+                  </Select.Positioner>
+                </Select.Portal>
+              </Select.Root>
+              <p data-slot="field-description">Controls where this build becomes available.</p>
+            </div>
+
+            <label data-ui="check-row">
+              <Checkbox.Root defaultChecked data-ui="checkbox">
+                <Checkbox.Indicator>✓</Checkbox.Indicator>
+              </Checkbox.Root>
+              <span>
+                <strong>Run smoke tests</strong>
+                <small>Verify auth, sessions, and tool execution.</small>
+              </span>
+            </label>
+
+            <label data-ui="check-row">
+              <Switch.Root defaultChecked data-ui="switch">
+                <Switch.Thumb />
+              </Switch.Root>
+              <span>
+                <strong>Automatic rollback</strong>
+                <small>Restore the last healthy release on failure.</small>
+              </span>
+            </label>
+
+            <div data-component="field" className="slider-field">
+              <div className="field-inline">
+                <span data-slot="field-label">Traffic allocation</span>
+                <span data-component="badge">25%</span>
+              </div>
+              <Slider.Root defaultValue={25} data-ui="slider">
+                <Slider.Control className="slider-control">
+                  <Slider.Track className="slider-track">
+                    <Slider.Indicator className="slider-indicator" />
+                    <Slider.Thumb className="slider-thumb" aria-label="Traffic allocation" />
+                  </Slider.Track>
+                </Slider.Control>
+              </Slider.Root>
+            </div>
+          </div>
+        </section>
+
+        <div className="two-column">
+          <section data-component="surface">
+            <header data-slot="surface-header">
+              <h2 data-slot="surface-title">Workspace</h2>
+              <p data-slot="surface-description">Tabs and Accordion</p>
+            </header>
+            <div data-slot="surface-content">
+              <Tabs.Root defaultValue="activity" data-ui="tabs">
+                <Tabs.List>
+                  {[
+                    ["activity", "Activity"],
+                    ["members", "Members"],
+                    ["settings", "Settings"],
+                  ].map(([value, label]) => (
+                    <Tabs.Tab key={value} value={value}>
+                      {label}
+                    </Tabs.Tab>
+                  ))}
+                  <Tabs.Indicator />
+                </Tabs.List>
+                <Tabs.Panel value="activity">
+                  12 deployments completed this week. Median duration: 42 seconds.
+                </Tabs.Panel>
+                <Tabs.Panel value="members">8 operators have access to this workspace.</Tabs.Panel>
+                <Tabs.Panel value="settings">Production deploys require a healthy smoke check.</Tabs.Panel>
+              </Tabs.Root>
+
+              <Accordion.Root defaultValue={["checks"]} data-ui="accordion">
+                {[
+                  [
+                    "checks",
+                    "What runs before activation?",
+                    "Package checks, a production build, and browser interaction tests.",
+                  ],
+                  [
+                    "rollback",
+                    "When does rollback happen?",
+                    "When health checks fail during the five-minute observation window.",
+                  ],
+                  ["access", "Who can deploy?", "Workspace owners and operators with release permissions."],
+                ].map(([value, title, content]) => (
+                  <Accordion.Item key={value} value={value}>
+                    <Accordion.Header>
+                      <Accordion.Trigger>
+                        {title}
+                        <span aria-hidden>+</span>
+                      </Accordion.Trigger>
+                    </Accordion.Header>
+                    <Accordion.Panel>
+                      <div>{content}</div>
+                    </Accordion.Panel>
+                  </Accordion.Item>
+                ))}
+              </Accordion.Root>
+            </div>
+          </section>
+
+          <section data-component="surface">
+            <header data-slot="surface-header">
+              <h2 data-slot="surface-title">Overlays</h2>
+              <p data-slot="surface-description">Popover, Menu, Dialog, and Tooltip</p>
+            </header>
+            <div data-slot="surface-content" className="overlay-demo">
+              <Popover.Root>
+                <Popover.Trigger data-component="button" data-variant="neutral" data-size="normal">
+                  View status
+                </Popover.Trigger>
+                <Popover.Portal>
+                  <Popover.Positioner className="positioner" sideOffset={8}>
+                    <Popover.Popup data-ui="popup" className="popover-popup">
+                      <Popover.Title>All systems normal</Popover.Title>
+                      <Popover.Description>API and workers are healthy in every region.</Popover.Description>
+                      <Popover.Close aria-label="Close">×</Popover.Close>
+                    </Popover.Popup>
+                  </Popover.Positioner>
+                </Popover.Portal>
+              </Popover.Root>
+
+              <Menu.Root>
+                <Menu.Trigger data-component="button" data-variant="outline" data-size="normal">
+                  Actions
+                </Menu.Trigger>
+                <Menu.Portal>
+                  <Menu.Positioner className="positioner" sideOffset={6}>
+                    <Menu.Popup data-ui="popup">
+                      <Menu.Item data-ui="option">
+                        View logs <span>⌘L</span>
+                      </Menu.Item>
+                      <Menu.Item data-ui="option">Duplicate release</Menu.Item>
+                      <Menu.Separator data-component="divider" />
+                      <Menu.Item data-ui="option" className="danger-item">
+                        Cancel deploy
+                      </Menu.Item>
+                    </Menu.Popup>
+                  </Menu.Positioner>
+                </Menu.Portal>
+              </Menu.Root>
+
+              <Dialog.Root>
+                <Dialog.Trigger data-component="button" data-variant="danger" data-size="normal">
+                  Rollback
+                </Dialog.Trigger>
+                <Dialog.Portal>
+                  <Dialog.Backdrop data-ui="backdrop" />
+                  <Dialog.Popup data-ui="dialog">
+                    <Dialog.Title>Rollback production?</Dialog.Title>
+                    <Dialog.Description>This restores v1.18.3 and stops the current rollout.</Dialog.Description>
+                    <div className="dialog-actions">
+                      <Dialog.Close data-component="button" data-variant="ghost" data-size="normal">
+                        Cancel
+                      </Dialog.Close>
+                      <Dialog.Close data-component="button" data-variant="danger" data-size="normal">
+                        Rollback
+                      </Dialog.Close>
+                    </div>
+                  </Dialog.Popup>
+                </Dialog.Portal>
+              </Dialog.Root>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+createRoot(document.getElementById("root")!).render(<App />)
@@ -0,0 +1,386 @@
+:root {
+  --oc-font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+body {
+  position: relative;
+}
+
+#root {
+  isolation: isolate;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+.section-heading,
+.field-inline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+}
+
+.positioner {
+  z-index: 20;
+  outline: none;
+}
+
+[data-ui="popup"],
+[data-ui="tooltip"] {
+  box-sizing: border-box;
+  min-width: var(--anchor-width, 180px);
+  padding: 6px;
+  border: 1px solid var(--oc-border-strong);
+  border-radius: 8px;
+  background: var(--oc-bg-layer-01);
+  color: var(--oc-text-base);
+  box-shadow: var(--oc-elevation-raised);
+  font: 13px/1.4 var(--oc-font-family-sans);
+  outline: none;
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity 100ms ease-out,
+    transform 100ms ease-out;
+}
+
+[data-ui="popup"][data-starting-style],
+[data-ui="popup"][data-ending-style],
+[data-ui="tooltip"][data-starting-style],
+[data-ui="tooltip"][data-ending-style] {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+[data-ui="tooltip"] {
+  min-width: 0;
+  padding: 5px 8px;
+  border-radius: 6px;
+  color: var(--oc-text-muted);
+  font-size: 11px;
+}
+
+[data-ui="option"] {
+  display: grid;
+  grid-template-columns: 16px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 8px;
+  border-radius: 4px;
+  outline: none;
+  cursor: default;
+  user-select: none;
+}
+
+[data-ui="option"][data-highlighted] {
+  background: var(--oc-overlay-hover);
+}
+
+.danger-item {
+  color: var(--oc-state-fg-danger);
+}
+
+[data-ui="check-row"] {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  color: var(--oc-text-base);
+}
+
+[data-ui="check-row"] span {
+  display: grid;
+  gap: 3px;
+}
+
+[data-ui="check-row"] strong {
+  font-weight: 530;
+}
+
+[data-ui="check-row"] small {
+  color: var(--oc-text-muted);
+}
+
+[data-ui="checkbox"] {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  flex: none;
+  place-items: center;
+  border: 1px solid var(--oc-border-strong);
+  border-radius: 4px;
+  background: var(--oc-bg-base);
+  color: transparent;
+  outline: none;
+}
+
+[data-ui="checkbox"][data-checked] {
+  border-color: var(--oc-bg-accent);
+  background: var(--oc-bg-accent);
+  color: var(--oc-text-contrast);
+}
+
+[data-ui="checkbox"]:focus-visible,
+[data-ui="switch"]:focus-visible,
+.slider-thumb:focus-within {
+  outline: 2px solid var(--oc-border-focus);
+  outline-offset: 2px;
+}
+
+[data-ui="switch"] {
+  width: 30px;
+  height: 18px;
+  flex: none;
+  padding: 2px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--oc-bg-layer-03);
+  outline: none;
+}
+
+[data-ui="switch"] > span {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--oc-text-contrast);
+  box-shadow: 0 1px 2px var(--oc-alpha-dark-30);
+  transition: transform 120ms ease-out;
+}
+
+[data-ui="switch"][data-checked] {
+  background: var(--oc-bg-accent);
+}
+
+[data-ui="switch"][data-checked] > span {
+  transform: translateX(12px);
+}
+
+.slider-field {
+  grid-column: 1 / -1;
+}
+
+.slider-control {
+  display: flex;
+  align-items: center;
+  height: 18px;
+}
+
+.slider-track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--oc-bg-layer-03);
+}
+
+.slider-indicator {
+  position: absolute;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--oc-bg-accent);
+}
+
+.slider-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--oc-text-contrast);
+  box-shadow: var(--oc-elevation-button-neutral);
+  outline: none;
+}
+
+.two-column {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
+  gap: 16px;
+}
+
+[data-ui="tabs"] > [role="tablist"] {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--oc-border-muted);
+}
+
+[data-ui="tabs"] [role="tab"] {
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  background: transparent;
+  color: var(--oc-text-muted);
+  outline: none;
+}
+
+[data-ui="tabs"] [role="tab"]:hover,
+[data-ui="tabs"] [role="tab"][data-active] {
+  color: var(--oc-text-base);
+}
+
+[data-ui="tabs"] [role="tab"]:focus-visible {
+  outline: 2px solid var(--oc-border-focus);
+  outline-offset: -2px;
+}
+
+[data-ui="tabs"] [role="tablist"] > span {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: var(--active-tab-width);
+  height: 2px;
+  translate: var(--active-tab-left);
+  background: var(--oc-bg-accent);
+  transition:
+    translate 140ms ease-out,
+    width 140ms ease-out;
+}
+
+[data-ui="tabs"] [role="tabpanel"] {
+  min-height: 72px;
+  padding: 16px 10px;
+  color: var(--oc-text-muted);
+  outline: none;
+}
+
+[data-ui="accordion"] {
+  border-top: 1px solid var(--oc-border-muted);
+}
+
+[data-ui="accordion"] h3 {
+  margin: 0;
+  border-bottom: 1px solid var(--oc-border-muted);
+}
+
+[data-ui="accordion"] h3 button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 10px;
+  border: 0;
+  background: transparent;
+  color: var(--oc-text-base);
+  text-align: left;
+  outline: none;
+}
+
+[data-ui="accordion"] h3 button:hover {
+  background: var(--oc-overlay-hover);
+}
+
+[data-ui="accordion"] h3 button[data-panel-open] span {
+  transform: rotate(45deg);
+}
+
+[data-ui="accordion"] [role="region"] {
+  height: var(--accordion-panel-height);
+  overflow: hidden;
+  color: var(--oc-text-muted);
+  transition: height 150ms ease-out;
+}
+
+[data-ui="accordion"] [role="region"][data-starting-style],
+[data-ui="accordion"] [role="region"][data-ending-style] {
+  height: 0;
+}
+
+[data-ui="accordion"] [role="region"] > div {
+  padding: 12px 10px 16px;
+}
+
+.overlay-demo {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.popover-popup {
+  position: relative;
+  max-width: 260px;
+  padding: 16px;
+}
+
+.popover-popup [role="heading"] {
+  font-weight: 530;
+}
+
+.popover-popup p {
+  margin: 6px 20px 0 0;
+  color: var(--oc-text-muted);
+}
+
+.popover-popup > button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  border: 0;
+  background: none;
+  color: var(--oc-text-muted);
+}
+
+[data-ui="backdrop"] {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  background: var(--oc-alpha-dark-60);
+  backdrop-filter: blur(2px);
+}
+
+[data-ui="dialog"] {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 31;
+  width: min(calc(100% - 32px), 420px);
+  padding: 24px;
+  border: 1px solid var(--oc-border-strong);
+  border-radius: 12px;
+  background: var(--oc-bg-layer-01);
+  color: var(--oc-text-base);
+  box-shadow: var(--oc-elevation-raised);
+  transform: translate(-50%, -50%);
+  outline: none;
+}
+
+[data-ui="dialog"] h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 530;
+}
+
+[data-ui="dialog"] p {
+  margin: 8px 0 24px;
+  color: var(--oc-text-muted);
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+@media (max-width: 760px) {
+  .form-grid,
+  .two-column {
+    grid-template-columns: 1fr;
+  }
+
+  .slider-field {
+    grid-column: auto;
+  }
+}
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 opencode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,156 @@
+# @opencode-ai/css
+
+OpenCode's design system as plain CSS. It has no JavaScript, framework, build tool, or runtime dependency.
+
+Use semantic HTML and `data-*` attributes. Native browser states such as `:hover`, `:focus-visible`, and `:disabled` work automatically; your JavaScript can represent application state with attributes such as `data-expanded`, `data-checked`, and `data-invalid`.
+
+## Install
+
+```sh
+npm install @opencode-ai/css
+```
+
+Load the complete design system from JavaScript:
+
+```js
+import "@opencode-ai/css"
+```
+
+Or from CSS:
+
+```css
+@import "@opencode-ai/css";
+```
+
+For a static page with no package tooling:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@opencode-ai/css/index.css" />
+```
+
+Add `data-oc-root` to the element that should receive the default page background, text color, and font. Set `data-color-scheme` to `light` or `dark` on that element or an ancestor.
+
+```html
+<body data-oc-root data-color-scheme="dark">
+  <button data-component="button" data-variant="neutral" data-size="normal">Deploy</button>
+</body>
+```
+
+## Selective imports
+
+The default export contains every component. Small pages can load only what they use:
+
+```css
+@import "@opencode-ai/css/tokens.css";
+@import "@opencode-ai/css/base.css";
+@import "@opencode-ai/css/components/button.css";
+@import "@opencode-ai/css/components/badge.css";
+@import "@opencode-ai/css/components/table.css";
+```
+
+`tokens.css` defines the color ramps and semantic theme variables. `base.css` is intentionally small and scoped: it only applies the full-page defaults to `[data-oc-root]` and normalization to design-system elements.
+
+## Common components
+
+### Button
+
+```html
+<button data-component="button" data-variant="contrast" data-size="normal">Create release</button>
+<button data-component="button" data-variant="danger" data-size="small">Delete</button>
+<button data-component="button" data-variant="ghost" data-size="small" disabled>Disabled</button>
+```
+
+Variants: `neutral`, `contrast`, `outline`, `ghost`, `ghost-muted`, `danger`, `warning`, and `loading`. Sizes: `small`, `normal`, and `large`.
+
+### Badge
+
+```html
+<span data-component="badge">Inactive</span> <span data-component="badge" data-variant="accent">Active</span>
+```
+
+### Internal-tool page
+
+```html
+<main data-component="page">
+  <header data-slot="page-header">
+    <div data-slot="page-heading">
+      <p data-slot="page-eyebrow">Release control</p>
+      <h1 data-slot="page-title">Artifacts</h1>
+    </div>
+  </header>
+
+  <section data-component="surface" data-padding="none">
+    <header data-slot="surface-header">
+      <h2 data-slot="surface-title">Published builds</h2>
+      <p data-slot="surface-description">Newest first.</p>
+    </header>
+    <div data-slot="surface-content">
+      <div data-component="table-container">
+        <table data-component="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Status</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td data-numeric>cli@1.0.0</td>
+              <td><span data-component="badge" data-variant="accent">Active</span></td>
+              <td data-align="end">
+                <button data-component="button" data-variant="neutral" data-size="small">Activate</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+</main>
+```
+
+### JavaScript-owned state
+
+The package styles state; it does not implement behavior. Keep semantic HTML and ARIA as the source of truth, then mirror state to a `data-*` attribute when a component needs it.
+
+```js
+const trigger = document.querySelector('[data-component="button"]')
+trigger.addEventListener("click", () => {
+  const expanded = trigger.getAttribute("aria-expanded") !== "true"
+  trigger.setAttribute("aria-expanded", String(expanded))
+  trigger.toggleAttribute("data-expanded", expanded)
+})
+```
+
+## Theme customization
+
+Override semantic tokens at your app root instead of editing component CSS:
+
+```css
+[data-oc-root] {
+  --oc-font-family-sans: Inter, system-ui, sans-serif;
+  --oc-page-max-width: 1440px;
+  --oc-bg-accent: #7152f4;
+  --oc-border-focus: #8271f8;
+}
+```
+
+The low-level color ramps live in `colors.css`; light and dark semantic mappings live in `theme.css`.
+
+## Component inventory
+
+The first release is intentionally focused on simple internal tools:
+
+- Layout: page, surface, and table
+- Actions and status: button and badge
+- Forms: field, input, select, textarea, and native checkbox/radio styling
+- Structure: divider
+
+Each stylesheet is available as `@opencode-ai/css/components/<name>.css`. This small interface avoids publishing framework-specific DOM contracts for menus, dialogs, comboboxes, and other interactive widgets.
+
+## Scope
+
+This package is styling only. It does not create DOM, manage focus, provide keyboard navigation, position overlays, or add ARIA attributes. Use native HTML for simple controls and a small behavior layer of your choice for menus, dialogs, comboboxes, and other interactive widgets.
+
+`@opencode-ai/ui` does not depend on this package yet. The CSS is intentionally isolated while its public interface settles.
@@ -0,0 +1,32 @@
+@layer base {
+  :root {
+    --font-weight-regular: 440;
+    --line-height-normal: 1.5;
+    --letter-spacing-normal: normal;
+    --oc-page-max-width: 1200px;
+    --oc-page-padding-block: 56px;
+  }
+
+  :where([data-component], [data-component] *, [data-slot]) {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: geometricPrecision;
+  }
+
+  :where([data-component]) {
+    font-family: var(--oc-font-family-sans);
+  }
+}
+
+@layer base {
+  [data-oc-root] {
+    min-height: 100%;
+    margin: 0;
+    background: var(--oc-bg-deep);
+    color: var(--oc-text-base);
+    font-family: var(--oc-font-family-sans);
+    font-size: 13px;
+    line-height: 1.5;
+  }
+}
@@ -0,0 +1,172 @@
+@layer theme {
+  :root {
+    /* ── Grey ── */
+    --oc-grey-50: #ffffffff;
+    --oc-grey-100: #fafafaff;
+    --oc-grey-200: #f2f2f2ff;
+    --oc-grey-300: #eeeeeeff;
+    --oc-grey-400: #dbdbdbff;
+    --oc-grey-500: #aeaeaeff;
+    --oc-grey-600: #808080ff;
+    --oc-grey-700: #5c5c5cff;
+    --oc-grey-800: #3a3a3aff;
+    --oc-grey-900: #2e2e2eff;
+    --oc-grey-1000: #242424ff;
+    --oc-grey-1100: #161616ff;
+    --oc-grey-1200: #080808ff;
+
+    /* ── Alpha Dark ── */
+    --oc-alpha-dark-100: #000000ff;
+    --oc-alpha-dark-90: #000000e5;
+    --oc-alpha-dark-80: #000000cc;
+    --oc-alpha-dark-70: #000000b2;
+    --oc-alpha-dark-60: #00000099;
+    --oc-alpha-dark-50: #00000080;
+    --oc-alpha-dark-40: #00000066;
+    --oc-alpha-dark-30: #0000004d;
+    --oc-alpha-dark-24: #0000003d;
+    --oc-alpha-dark-20: #00000033;
+    --oc-alpha-dark-16: #00000029;
+    --oc-alpha-dark-14: #00000024;
+    --oc-alpha-dark-12: #0000001f;
+    --oc-alpha-dark-10: #0000001a;
+    --oc-alpha-dark-8: #00000014;
+    --oc-alpha-dark-6: #0000000f;
+    --oc-alpha-dark-4: #0000000a;
+    --oc-alpha-dark-2: #00000005;
+    --oc-alpha-dark-0: #00000000;
+
+    /* ── Alpha Light ── */
+    --oc-alpha-light-100: #ffffffff;
+    --oc-alpha-light-90: #ffffffe5;
+    --oc-alpha-light-80: #ffffffcc;
+    --oc-alpha-light-70: #ffffffb2;
+    --oc-alpha-light-60: #ffffff99;
+    --oc-alpha-light-50: #ffffff80;
+    --oc-alpha-light-40: #ffffff66;
+    --oc-alpha-light-30: #ffffff4d;
+    --oc-alpha-light-24: #ffffff3d;
+    --oc-alpha-light-20: #ffffff33;
+    --oc-alpha-light-16: #ffffff29;
+    --oc-alpha-light-14: #ffffff24;
+    --oc-alpha-light-12: #ffffff1f;
+    --oc-alpha-light-10: #ffffff1a;
+    --oc-alpha-light-8: #ffffff14;
+    --oc-alpha-light-6: #ffffff0f;
+    --oc-alpha-light-4: #ffffff0a;
+    --oc-alpha-light-2: #ffffff05;
+    --oc-alpha-light-0: #ffffff00;
+
+    /* ── Red ── */
+    --oc-red-100: #fcecebff;
+    --oc-red-200: #f6d5d3ff;
+    --oc-red-300: #f2bbb7ff;
+    --oc-red-400: #f29b96ff;
+    --oc-red-500: #f17471ff;
+    --oc-red-600: #f1484fff;
+    --oc-red-700: #d92e3cff;
+    --oc-red-800: #b82d35ff;
+    --oc-red-900: #97252bff;
+    --oc-red-1000: #7a1f23ff;
+    --oc-red-1100: #5f1a1cff;
+    --oc-red-1200: #461516ff;
+
+    /* ── Orange ── */
+    --oc-orange-100: #fdf2edff;
+    --oc-orange-200: #ffe7dcff;
+    --oc-orange-300: #ffd8c6ff;
+    --oc-orange-400: #ffc1a4ff;
+    --oc-orange-500: #ffa478ff;
+    --oc-orange-600: #ff8648ff;
+    --oc-orange-700: #ee7330ff;
+    --oc-orange-800: #d16427ff;
+    --oc-orange-900: #b35624ff;
+    --oc-orange-1000: #954c27ff;
+    --oc-orange-1100: #723d22ff;
+    --oc-orange-1200: #5a2c14ff;
+
+    /* ── Yellow ── */
+    --oc-yellow-100: #fefaecff;
+    --oc-yellow-200: #fcefd0ff;
+    --oc-yellow-300: #f7e5b5ff;
+    --oc-yellow-400: #f3da9bff;
+    --oc-yellow-500: #f2cf76ff;
+    --oc-yellow-600: #f6c251ff;
+    --oc-yellow-700: #e7af36ff;
+    --oc-yellow-800: #cb9f34ff;
+    --oc-yellow-900: #ac8833ff;
+    --oc-yellow-1000: #8e7231ff;
+    --oc-yellow-1100: #68552bff;
+    --oc-yellow-1200: #4b4025ff;
+
+    /* ── Green ── */
+    --oc-green-100: #e7f9eaff;
+    --oc-green-200: #d0f0d5ff;
+    --oc-green-300: #b8e9c1ff;
+    --oc-green-400: #96e3a6ff;
+    --oc-green-500: #6bd586ff;
+    --oc-green-600: #49c970ff;
+    --oc-green-700: #2eaf5aff;
+    --oc-green-800: #198b43ff;
+    --oc-green-900: #1d783cff;
+    --oc-green-1000: #196130ff;
+    --oc-green-1100: #164c26ff;
+    --oc-green-1200: #14361dff;
+
+    /* ── Cyan ── */
+    --oc-cyan-100: #e2f7fbff;
+    --oc-cyan-200: #c4edf4ff;
+    --oc-cyan-300: #a3e4efff;
+    --oc-cyan-400: #65d9ebff;
+    --oc-cyan-500: #00c5dfff;
+    --oc-cyan-600: #00abcfff;
+    --oc-cyan-700: #0096b8ff;
+    --oc-cyan-800: #007d9bff;
+    --oc-cyan-900: #006c85ff;
+    --oc-cyan-1000: #005a6eff;
+    --oc-cyan-1100: #004756ff;
+    --oc-cyan-1200: #00353fff;
+
+    /* ── Blue ── */
+    --oc-blue-100: #ecf1feff;
+    --oc-blue-200: #d7e2fcff;
+    --oc-blue-300: #c3d4fdff;
+    --oc-blue-400: #a2bcffff;
+    --oc-blue-500: #7698fdff;
+    --oc-blue-600: #3b5cf6ff;
+    --oc-blue-700: #3250dfff;
+    --oc-blue-800: #2c47c8ff;
+    --oc-blue-900: #263fa9ff;
+    --oc-blue-1000: #22388fff;
+    --oc-blue-1100: #1c2e70ff;
+    --oc-blue-1200: #1b2852ff;
+
+    /* ── Purple ── */
+    --oc-purple-100: #ebecfeff;
+    --oc-purple-200: #d5d5fcff;
+    --oc-purple-300: #b9b8f5ff;
+    --oc-purple-400: #9e99f7ff;
+    --oc-purple-500: #8271f8ff;
+    --oc-purple-600: #7152f4ff;
+    --oc-purple-700: #623be2ff;
+    --oc-purple-800: #5230c2ff;
+    --oc-purple-900: #442aa1ff;
+    --oc-purple-1000: #361f83ff;
+    --oc-purple-1100: #2b1b6aff;
+    --oc-purple-1200: #221358ff;
+
+    /* ── Pink ── */
+    --oc-pink-100: #fdecf3ff;
+    --oc-pink-200: #f7d5e4ff;
+    --oc-pink-300: #fabcd8ff;
+    --oc-pink-400: #f799c6ff;
+    --oc-pink-500: #f26cb2ff;
+    --oc-pink-600: #f64aabff;
+    --oc-pink-700: #e4429eff;
+    --oc-pink-800: #c83d8bff;
+    --oc-pink-900: #aa3576ff;
+    --oc-pink-1000: #8c2d61ff;
+    --oc-pink-1100: #6f284fff;
+    --oc-pink-1200: #5c1d3fff;
+  }
+}
@@ -0,0 +1,9 @@
+@import "./components/badge.css" layer(components);
+@import "./components/button.css" layer(components);
+@import "./components/check.css" layer(components);
+@import "./components/divider.css" layer(components);
+@import "./components/field.css" layer(components);
+@import "./components/input.css" layer(components);
+@import "./components/page.css" layer(components);
+@import "./components/surface.css" layer(components);
+@import "./components/table.css" layer(components);
@@ -0,0 +1,33 @@
+[data-component="badge"] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 16px;
+  padding: 0 4px;
+  user-select: none;
+
+  border-radius: 2px;
+  border: 0.5px solid var(--oc-border-base);
+  background: var(--oc-bg-layer-02);
+
+  font-style: normal;
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--oc-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="badge"][data-high-contrast] {
+  border-color: var(--oc-border-strong);
+}
+
+[data-component="badge"][data-variant="accent"] {
+  border: 0;
+  background: var(--oc-bg-accent);
+  color: var(--oc-text-contrast);
+}
@@ -0,0 +1,246 @@
+[data-component="button"] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--oc-text-base);
+  text-shadow: none;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.04px;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="button"]:focus {
+  outline: none;
+}
+
+[data-component="button"]:is(:focus-visible, [data-state="focus"]):not(:disabled):not([data-variant="loading"]) {
+  outline: 2px solid var(--oc-border-focus);
+  outline-offset: 2.5px;
+}
+
+[data-component="button"][data-size="normal"] {
+  height: 28px;
+  padding: 0 11px;
+}
+
+[data-component="button"][data-size="small"] {
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+}
+
+[data-component="button"][data-size="large"] {
+  height: 32px;
+  padding: 0 15px;
+}
+
+[data-component="button"][data-icon][data-size="small"] {
+  padding-left: 9px;
+}
+
+[data-component="button"][data-icon][data-size="normal"] {
+  padding-left: 11px;
+}
+
+[data-component="button"][data-icon][data-size="large"] {
+  padding-left: 15px;
+}
+
+[data-component="button"] [data-slot="icon-svg"] {
+  color: currentColor;
+}
+
+/* Neutral */
+[data-component="button"][data-variant="neutral"] {
+  background-color: var(--oc-bg-button-neutral);
+  color: var(--oc-text-base);
+  box-shadow: var(--oc-elevation-button-neutral);
+}
+
+[data-component="button"][data-variant="neutral"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-hover) 0%, var(--oc-overlay-hover) 100%),
+    linear-gradient(90deg, var(--oc-bg-button-neutral) 0%, var(--oc-bg-button-neutral) 100%);
+}
+
+[data-component="button"][data-variant="neutral"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-pressed) 0%, var(--oc-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--oc-bg-button-neutral) 0%, var(--oc-bg-button-neutral) 100%);
+}
+
+[data-component="button"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Danger */
+[data-component="button"][data-variant="danger"] {
+  background-color: var(--oc-bg-button-neutral);
+  color: var(--oc-state-fg-danger);
+  box-shadow: var(--oc-elevation-button-neutral);
+}
+
+[data-component="button"][data-variant="danger"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-hover) 0%, var(--oc-overlay-hover) 100%),
+    linear-gradient(90deg, var(--oc-bg-button-neutral) 0%, var(--oc-bg-button-neutral) 100%);
+}
+
+[data-component="button"][data-variant="danger"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-pressed) 0%, var(--oc-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--oc-bg-button-neutral) 0%, var(--oc-bg-button-neutral) 100%);
+}
+
+[data-component="button"][data-variant="danger"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="button"][data-variant="warning"] {
+  background-color: var(--oc-bg-button-neutral);
+  color: var(--oc-state-fg-warning);
+  box-shadow: var(--oc-elevation-button-neutral);
+}
+
+[data-component="button"][data-variant="warning"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-hover) 0%, var(--oc-overlay-hover) 100%),
+    linear-gradient(90deg, var(--oc-bg-button-neutral) 0%, var(--oc-bg-button-neutral) 100%);
+}
+
+[data-component="button"][data-variant="warning"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-pressed) 0%, var(--oc-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--oc-bg-button-neutral) 0%, var(--oc-bg-button-neutral) 100%);
+}
+
+[data-component="button"][data-variant="warning"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Outline */
+[data-component="button"][data-variant="outline"] {
+  background-color: transparent;
+  color: var(--oc-text-base);
+  box-shadow: inset 0 0 0 1px var(--oc-border-muted);
+}
+
+[data-component="button"][data-variant="outline"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--oc-overlay-hover);
+}
+
+[data-component="button"][data-variant="outline"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--oc-overlay-pressed);
+}
+
+[data-component="button"][data-variant="outline"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Contrast */
+[data-component="button"][data-variant="contrast"] {
+  background-image:
+    linear-gradient(180deg, var(--oc-alpha-light-20) 0%, var(--oc-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--oc-bg-contrast) 0%, var(--oc-bg-contrast) 100%);
+  color: var(--oc-text-contrast);
+  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--oc-elevation-button-contrast);
+}
+
+[data-component="button"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-contrast-hover) 0%, var(--oc-overlay-contrast-hover) 100%),
+    linear-gradient(180deg, var(--oc-alpha-light-20) 0%, var(--oc-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--oc-bg-contrast) 0%, var(--oc-bg-contrast) 100%);
+}
+
+[data-component="button"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--oc-overlay-contrast-pressed) 0%, var(--oc-overlay-contrast-pressed) 100%),
+    linear-gradient(180deg, var(--oc-alpha-light-20) 0%, var(--oc-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--oc-bg-contrast) 0%, var(--oc-bg-contrast) 100%);
+}
+
+[data-component="button"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Loading */
+[data-component="button"][data-variant="loading"] {
+  background: #f2f2f2;
+  color: var(--oc-text-base);
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Ghost */
+[data-component="button"][data-variant="ghost"] {
+  background-color: transparent;
+  color: var(--oc-text-base);
+}
+
+[data-component="button"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not([data-expanded]) {
+  background-color: var(--oc-overlay-hover);
+}
+
+[data-component="button"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--oc-overlay-pressed);
+}
+
+[data-component="button"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--oc-overlay-pressed);
+}
+
+[data-component="button"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Ghost muted */
+[data-component="button"][data-variant="ghost-muted"] {
+  background-color: transparent;
+  color: var(--oc-text-muted);
+}
+
+[data-component="button"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
+  color: var(--oc-icon-muted);
+}
+
+[data-component="button"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+    [data-expanded]
+  ) {
+  background-color: var(--oc-overlay-hover);
+}
+
+[data-component="button"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--oc-overlay-pressed);
+}
+
+[data-component="button"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--oc-overlay-pressed);
+  color: var(--oc-text-base);
+}
+
+[data-component="button"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) [data-slot="icon-svg"] {
+  color: var(--oc-icon-base);
+}
+
+[data-component="button"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
@@ -0,0 +1,20 @@
+[data-component="check"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--oc-text-base);
+  font-size: 13px;
+  user-select: none;
+}
+
+[data-component="check"] :is(input[type="checkbox"], input[type="radio"]) {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--oc-bg-accent);
+}
+
+[data-component="check"]:has(input:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
@@ -0,0 +1,11 @@
+[data-component="divider"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+  border: none;
+  background: var(--oc-border-strong);
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}
@@ -0,0 +1,24 @@
+[data-component="field"] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+[data-component="field"] [data-slot="field-label"] {
+  color: var(--oc-text-base);
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1.25;
+}
+
+[data-component="field"] [data-slot="field-description"] {
+  margin: 0;
+  color: var(--oc-text-muted);
+  font-size: 11px;
+}
+
+[data-component="field"] [data-slot="field-error"] {
+  margin: 0;
+  color: var(--oc-state-fg-danger);
+  font-size: 11px;
+}
@@ -0,0 +1,55 @@
+[data-component="input"],
+[data-component="select"],
+[data-component="textarea"] {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  background: linear-gradient(180deg, var(--oc-alpha-light-2) 0%, var(--oc-alpha-light-0) 100%), var(--oc-bg-base);
+  box-shadow: var(--oc-elevation-button-neutral);
+  color: var(--oc-text-base);
+  font: inherit;
+  font-size: 13px;
+  transition:
+    outline-color 85ms ease-out,
+    background 85ms ease-out;
+}
+
+[data-component="input"],
+[data-component="select"] {
+  height: 32px;
+  padding: 0 10px;
+}
+
+[data-component="textarea"] {
+  min-height: 88px;
+  padding: 8px 10px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+:is([data-component="input"], [data-component="select"], [data-component="textarea"])::placeholder {
+  color: var(--oc-text-faint);
+}
+
+:is([data-component="input"], [data-component="select"], [data-component="textarea"]):hover:not(:disabled) {
+  background: linear-gradient(0deg, var(--oc-overlay-hover), var(--oc-overlay-hover)), var(--oc-bg-base);
+}
+
+:is([data-component="input"], [data-component="select"], [data-component="textarea"]):focus-visible {
+  outline: 2px solid var(--oc-border-focus);
+  outline-offset: 1px;
+}
+
+:is([data-component="input"], [data-component="select"], [data-component="textarea"]):is(:disabled, [data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:is([data-component="input"], [data-component="select"], [data-component="textarea"]):is(
+  [aria-invalid="true"],
+  [data-invalid]
+) {
+  outline-color: var(--oc-state-fg-danger);
+}
@@ -0,0 +1,64 @@
+[data-component="page"] {
+  width: min(100% - 32px, var(--oc-page-max-width, 1200px));
+  margin-inline: auto;
+  padding-block: var(--oc-page-padding-block, 56px);
+}
+
+[data-component="page"] [data-slot="page-header"] {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+[data-component="page"] [data-slot="page-heading"] {
+  min-width: 0;
+}
+
+[data-component="page"] [data-slot="page-eyebrow"] {
+  margin: 0 0 4px;
+  color: var(--oc-text-muted);
+  font-size: 13px;
+}
+
+[data-component="page"] [data-slot="page-title"] {
+  margin: 0;
+  color: var(--oc-text-base);
+  font-size: clamp(36px, 6vw, 64px);
+  font-weight: 440;
+  line-height: 0.95;
+  letter-spacing: -0.045em;
+}
+
+[data-component="page"] [data-slot="page-description"] {
+  max-width: 64ch;
+  margin: 12px 0 0;
+  color: var(--oc-text-muted);
+}
+
+[data-component="page"] [data-slot="page-actions"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex: none;
+}
+
+[data-component="page"] [data-slot="page-content"] {
+  display: grid;
+  gap: 16px;
+}
+
+@media (max-width: 640px) {
+  [data-component="page"] {
+    width: min(100% - 24px, var(--oc-page-max-width, 1200px));
+    padding-block: 32px;
+  }
+
+  [data-component="page"] [data-slot="page-header"] {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 24px;
+  }
+}
@@ -0,0 +1,38 @@
+[data-component="surface"] {
+  overflow: hidden;
+  border: 1px solid var(--oc-border-muted);
+  border-radius: 12px;
+  background: var(--oc-bg-layer-01);
+  box-shadow: var(--oc-elevation-raised);
+}
+
+[data-component="surface"][data-variant="flat"] {
+  box-shadow: none;
+}
+
+[data-component="surface"] [data-slot="surface-header"] {
+  padding: 24px 24px 16px;
+}
+
+[data-component="surface"] [data-slot="surface-title"] {
+  margin: 0;
+  color: var(--oc-text-base);
+  font-size: 16px;
+  font-weight: 530;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+[data-component="surface"] [data-slot="surface-description"] {
+  margin: 6px 0 0;
+  color: var(--oc-text-muted);
+  font-size: 13px;
+}
+
+[data-component="surface"] [data-slot="surface-content"] {
+  padding: 0 24px 24px;
+}
+
+[data-component="surface"][data-padding="none"] [data-slot="surface-content"] {
+  padding: 0;
+}
@@ -0,0 +1,52 @@
+[data-component="table-container"] {
+  width: 100%;
+  overflow-x: auto;
+}
+
+[data-component="table"] {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--oc-text-base);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="table"] :is(th, td) {
+  height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--oc-border-muted);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+[data-component="table"] th {
+  height: 40px;
+  color: var(--oc-text-muted);
+  font-size: 11px;
+  font-weight: 530;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+[data-component="table"] tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+[data-component="table"] tbody tr:is(:hover, [data-state="hover"]) td {
+  background: var(--oc-overlay-hover);
+}
+
+[data-component="table"] [data-align="end"] {
+  text-align: right;
+}
+
+[data-component="table"] [data-numeric] {
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+}
+
+[data-component="table"] [data-slot="table-actions"] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en" data-color-scheme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>OpenCode CSS internal tool</title>
+    <link rel="stylesheet" href="../index.css" />
+    <style>
+      :root {
+        --oc-font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+      }
+      [data-slot="release-meta"] {
+        color: var(--oc-text-muted);
+      }
+    </style>
+  </head>
+  <body data-oc-root>
+    <main data-component="page">
+      <header data-slot="page-header">
+        <div data-slot="page-heading">
+          <p data-slot="page-eyebrow">Release control</p>
+          <h1 data-slot="page-title">Artifacts</h1>
+        </div>
+        <span data-component="badge">dax@anoma.ly</span>
+      </header>
+
+      <section data-component="surface" data-padding="none">
+        <header data-slot="surface-header">
+          <h2 data-slot="surface-title">Published builds</h2>
+          <p data-slot="surface-description">
+            Every build received from the trusted publishing workflow, newest first.
+          </p>
+        </header>
+        <div data-slot="surface-content">
+          <div data-component="table-container">
+            <table data-component="table">
+              <thead>
+                <tr>
+                  <th>Channel</th>
+                  <th>Name</th>
+                  <th>Distribution</th>
+                  <th>Version</th>
+                  <th>Created</th>
+                  <th>Status</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>next</td>
+                  <td data-numeric>cli</td>
+                  <td>npm</td>
+                  <td data-numeric>0.0.0-next-16020</td>
+                  <td data-slot="release-meta">2026-07-22T13:23:42.642Z</td>
+                  <td><span data-component="badge" data-variant="accent">Active</span></td>
+                  <td></td>
+                </tr>
+                <tr>
+                  <td>next</td>
+                  <td data-numeric>cli</td>
+                  <td>npm</td>
+                  <td data-numeric>0.0.0-next-16019</td>
+                  <td data-slot="release-meta">2026-07-22T10:33:24.519Z</td>
+                  <td><span data-component="badge">Inactive</span></td>
+                  <td data-align="end">
+                    <button data-component="button" data-variant="neutral" data-size="normal">Activate</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>next</td>
+                  <td data-numeric>cli</td>
+                  <td>npm</td>
+                  <td data-numeric>0.0.0-next-16018</td>
+                  <td data-slot="release-meta">2026-07-22T10:03:19.411Z</td>
+                  <td><span data-component="badge">Inactive</span></td>
+                  <td data-align="end">
+                    <button data-component="button" data-variant="neutral" data-size="normal">Activate</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>next</td>
+                  <td data-numeric>cli</td>
+                  <td>npm</td>
+                  <td data-numeric>0.0.0-next-16017</td>
+                  <td data-slot="release-meta">2026-07-22T09:28:50.782Z</td>
+                  <td><span data-component="badge">Inactive</span></td>
+                  <td data-align="end">
+                    <button data-component="button" data-variant="neutral" data-size="normal">Activate</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,3 @@
+@import "./tokens.css";
+@import "./base.css";
+@import "./components.css";
@@ -0,0 +1,45 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@opencode-ai/css",
+  "version": "1.18.4",
+  "description": "OpenCode's framework-agnostic CSS design system",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anomalyco/opencode.git",
+    "directory": "packages/css"
+  },
+  "homepage": "https://github.com/anomalyco/opencode/tree/v2/packages/css",
+  "bugs": "https://github.com/anomalyco/opencode/issues",
+  "keywords": [
+    "css",
+    "design-system",
+    "opencode"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "style": "./index.css",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "*.css",
+    "components",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./index.css",
+    "./index.css": "./index.css",
+    "./base.css": "./base.css",
+    "./tokens.css": "./tokens.css",
+    "./components.css": "./components.css",
+    "./components/*.css": "./components/*.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
@@ -0,0 +1,24 @@
+#!/usr/bin/env bun
+
+import { Script } from "@opencode-ai/script"
+import { $ } from "bun"
+import { rm } from "node:fs/promises"
+import { fileURLToPath } from "node:url"
+
+process.chdir(fileURLToPath(new URL("..", import.meta.url)))
+
+const pkg = (await Bun.file("package.json").json()) as { name: string; version: string }
+const tarball = `${pkg.name.replace("@", "").replace("/", "-")}-${pkg.version}.tgz`
+
+if ((await $`npm view ${pkg.name}@${pkg.version} version`.nothrow()).exitCode === 0) {
+  console.log(`already published ${pkg.name}@${pkg.version}`)
+  process.exit(0)
+}
+
+try {
+  await $`bun run test`
+  await $`bun pm pack`
+  await $`npm publish ${tarball} --access public --tag ${Script.channel}`
+} finally {
+  await rm(tarball, { force: true })
+}
@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test"
+import path from "node:path"
+
+const root = path.join(import.meta.dir, "..")
+const manifest = await Bun.file(path.join(root, "package.json")).json()
+
+function imports(file: string) {
+  return [...file.matchAll(/@import\s+["'](.+?)["']/g)].map((match) => match[1])
+}
+
+describe("package", () => {
+  test("all exports resolve to files", async () => {
+    const targets = Object.values(manifest.exports) as string[]
+    const concrete = targets.filter((target) => !target.includes("*"))
+    expect(await Promise.all(concrete.map((target) => Bun.file(path.join(root, target)).exists()))).toEqual(
+      concrete.map(() => true),
+    )
+  })
+
+  test("all local CSS imports resolve", async () => {
+    const files = [...new Bun.Glob("**/*.css").scanSync({ cwd: root, absolute: true })]
+    const missing = (
+      await Promise.all(
+        files.map(async (file) =>
+          Promise.all(
+            imports(await Bun.file(file).text())
+              .filter((target) => target.startsWith("."))
+              .map(async (target) =>
+                (await Bun.file(path.resolve(path.dirname(file), target)).exists()) ? undefined : target,
+              ),
+          ),
+        ),
+      )
+    )
+      .flat()
+      .filter(Boolean)
+    expect(missing).toEqual([])
+  })
+
+  test("component index includes every component once", async () => {
+    const expected = [...new Bun.Glob("components/*.css").scanSync({ cwd: root })].sort()
+    const actual = imports(await Bun.file(path.join(root, "components.css")).text())
+      .map((target) => target.replace(/^\.\//, ""))
+      .sort()
+    expect(actual).toEqual(expected)
+  })
+
+  test("public CSS does not expose v2 names", async () => {
+    const files = [...new Bun.Glob("**/*.css").scanSync({ cwd: root, absolute: true })]
+    const stale = (
+      await Promise.all(files.map(async (file) => ((await Bun.file(file).text()).includes("-v2") ? file : undefined)))
+    ).filter(Boolean)
+    expect(stale).toEqual([])
+  })
+
+  test("all referenced tokens are declared", async () => {
+    const files = [...new Bun.Glob("**/*.css").scanSync({ cwd: root, absolute: true })]
+    const css = (await Promise.all(files.map((file) => Bun.file(file).text()))).join("\n")
+    const declared = new Set([...css.matchAll(/(--[\w-]+)\s*:/g)].map((match) => match[1]))
+    const referenced = new Set([...css.matchAll(/var\((--[\w-]+)/g)].map((match) => match[1]))
+    expect([...referenced].filter((token) => !declared.has(token)).sort()).toEqual([])
+  })
+})
@@ -0,0 +1,107 @@
+@layer theme {
+  :root {
+    --oc-font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  }
+
+  :root,
+  [data-color-scheme="light"] {
+    color-scheme: light;
+
+    --oc-bg-base: var(--oc-grey-50);
+    --oc-bg-deep: var(--oc-grey-100);
+    --oc-bg-layer-01: var(--oc-grey-100);
+    --oc-bg-layer-02: var(--oc-grey-200);
+    --oc-bg-layer-03: var(--oc-grey-300);
+    --oc-bg-contrast: var(--oc-grey-1000);
+    --oc-bg-button-neutral: var(--oc-grey-50);
+    --oc-bg-accent: var(--oc-blue-600);
+
+    --oc-text-base: var(--oc-grey-1100);
+    --oc-text-muted: var(--oc-grey-700);
+    --oc-text-faint: var(--oc-grey-600);
+    --oc-text-contrast: var(--oc-grey-50);
+    --oc-icon-base: var(--oc-grey-800);
+    --oc-icon-muted: var(--oc-grey-600);
+
+    --oc-border-muted: var(--oc-alpha-dark-8);
+    --oc-border-base: var(--oc-alpha-dark-10);
+    --oc-border-strong: var(--oc-alpha-dark-20);
+    --oc-border-focus: var(--oc-blue-500);
+
+    --oc-overlay-hover: var(--oc-alpha-dark-4);
+    --oc-overlay-pressed: var(--oc-alpha-dark-8);
+    --oc-overlay-contrast-hover: var(--oc-alpha-light-12);
+    --oc-overlay-contrast-pressed: var(--oc-alpha-light-24);
+
+    --oc-state-bg-success: var(--oc-green-100);
+    --oc-state-fg-success: var(--oc-green-800);
+    --oc-state-border-success: var(--oc-green-300);
+    --oc-state-bg-warning: var(--oc-yellow-100);
+    --oc-state-fg-warning: var(--oc-yellow-800);
+    --oc-state-border-warning: var(--oc-yellow-300);
+    --oc-state-bg-danger: var(--oc-red-100);
+    --oc-state-fg-danger: var(--oc-red-800);
+    --oc-state-border-danger: var(--oc-red-300);
+    --oc-state-bg-info: var(--oc-blue-100);
+    --oc-state-fg-info: var(--oc-blue-800);
+    --oc-state-border-info: var(--oc-blue-300);
+
+    --oc-elevation-raised:
+      0 2px 4px var(--oc-alpha-dark-4), 0 1px 2px -1px var(--oc-alpha-dark-8), 0 0 0 0.5px var(--oc-alpha-dark-12);
+    --oc-elevation-button-neutral: 0 1px 1.5px var(--oc-alpha-dark-10), 0 0 0 0.5px var(--oc-alpha-dark-14);
+    --oc-elevation-button-contrast:
+      0 1px 1.5px var(--oc-alpha-dark-20), 0 0 0 0.5px var(--oc-grey-800), inset 0 1px 2px var(--oc-alpha-light-14),
+      inset 0 -1px 2px var(--oc-alpha-dark-6);
+  }
+
+  [data-color-scheme="dark"] {
+    color-scheme: dark;
+
+    --oc-bg-base: var(--oc-grey-1100);
+    --oc-bg-deep: var(--oc-grey-1200);
+    --oc-bg-layer-01: var(--oc-grey-1000);
+    --oc-bg-layer-02: var(--oc-grey-900);
+    --oc-bg-layer-03: var(--oc-grey-800);
+    --oc-bg-contrast: var(--oc-grey-700);
+    --oc-bg-button-neutral: var(--oc-alpha-light-6);
+    --oc-bg-accent: var(--oc-blue-600);
+
+    --oc-text-base: var(--oc-grey-100);
+    --oc-text-muted: var(--oc-grey-500);
+    --oc-text-faint: var(--oc-grey-600);
+    --oc-text-contrast: var(--oc-grey-50);
+    --oc-icon-base: var(--oc-grey-400);
+    --oc-icon-muted: var(--oc-grey-600);
+
+    --oc-border-muted: var(--oc-alpha-light-8);
+    --oc-border-base: var(--oc-alpha-light-10);
+    --oc-border-strong: var(--oc-alpha-light-20);
+    --oc-border-focus: var(--oc-blue-500);
+
+    --oc-overlay-hover: var(--oc-alpha-light-6);
+    --oc-overlay-pressed: var(--oc-alpha-light-10);
+    --oc-overlay-contrast-hover: var(--oc-alpha-dark-24);
+    --oc-overlay-contrast-pressed: var(--oc-alpha-dark-40);
+
+    --oc-state-bg-success: var(--oc-green-1200);
+    --oc-state-fg-success: var(--oc-green-500);
+    --oc-state-border-success: var(--oc-green-900);
+    --oc-state-bg-warning: var(--oc-yellow-1200);
+    --oc-state-fg-warning: var(--oc-yellow-500);
+    --oc-state-border-warning: var(--oc-yellow-900);
+    --oc-state-bg-danger: var(--oc-red-1200);
+    --oc-state-fg-danger: var(--oc-red-500);
+    --oc-state-border-danger: var(--oc-red-900);
+    --oc-state-bg-info: var(--oc-blue-1200);
+    --oc-state-fg-info: var(--oc-blue-500);
+    --oc-state-border-info: var(--oc-blue-900);
+
+    --oc-elevation-raised:
+      0 2px 4px var(--oc-alpha-dark-30), 0 1px 2px var(--oc-alpha-dark-30), 0 0 0 0.5px var(--oc-alpha-light-16),
+      0 -0.5px 0 var(--oc-alpha-light-6);
+    --oc-elevation-button-neutral:
+      0 1px 2px var(--oc-alpha-dark-40), 0 0 0 0.5px var(--oc-alpha-light-20), 0 -0.5px 0 var(--oc-alpha-light-10);
+    --oc-elevation-button-contrast:
+      0 1px 2px var(--oc-alpha-dark-40), 0 0 0 0.5px var(--oc-alpha-light-40), 0 -0.5px 0 var(--oc-alpha-light-30);
+  }
+}
@@ -0,0 +1,2 @@
+@import "./colors.css";
+@import "./theme.css";
@@ -63,6 +63,9 @@ await $`bun ./packages/plugin/script/publish.ts`
 console.log("\n=== ui ===\n")
 await $`bun ./packages/ui/script/publish.ts`

+console.log("\n=== css ===\n")
+await $`bun ./packages/css/script/publish.ts`
+
 if (Script.release) {
  await $`bun ./packages/desktop/scripts/finalize-latest-json.ts`
  await $`bun ./packages/desktop/scripts/finalize-latest-yml.ts`
Author	SHA1	Message	Date
James Long	1c3d5c399e	feat(css): add Base UI theme demo	2026-07-22 14:14:58 +00:00
Dax Raad	c251ead206	feat(css): add framework-agnostic design system	2026-07-22 13:49:01 +00:00