npm - @seastudio/sdk - Versions diffs - 3.0.0 - Mend

@seastudio/sdk 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/README.md +108 -0
package/bin/seastudio.js +3 -0
package/dist/chunk-4ITOR5QE.js +901 -0
package/dist/chunk-5QAINQWV.js +94 -0
package/dist/chunk-6USQFZRH.js +291 -0
package/dist/chunk-AGBZJGTY.cjs +1311 -0
package/dist/chunk-ANWOL7SM.js +566 -0
package/dist/chunk-BWG45ZWF.cjs +305 -0
package/dist/chunk-CVF4QHS6.cjs +436 -0
package/dist/chunk-DDVRUPMZ.js +1293 -0
package/dist/chunk-DSOSHJH2.js +643 -0
package/dist/chunk-FLATZQA2.js +174 -0
package/dist/chunk-HJJTBVKQ.cjs +909 -0
package/dist/chunk-ISI2OLPI.cjs +179 -0
package/dist/chunk-MYURVLGP.cjs +165 -0
package/dist/chunk-N33Y5NY7.cjs +105 -0
package/dist/chunk-QD4KISXM.js +160 -0
package/dist/chunk-SNGU4SHO.cjs +654 -0
package/dist/chunk-TFOJLA2F.cjs +588 -0
package/dist/chunk-Z7LV7DCO.js +429 -0
package/dist/develop-tool/cli/index.cjs +1138 -0
package/dist/develop-tool/cli/index.d.cts +1 -0
package/dist/develop-tool/cli/index.d.ts +1 -0
package/dist/develop-tool/cli/index.js +1127 -0
package/dist/index.cjs +370 -0
package/dist/index.d.cts +11 -0
package/dist/index.d.ts +11 -0
package/dist/index.js +9 -0
package/dist/mcp/core/index.cjs +90 -0
package/dist/mcp/core/index.d.cts +124 -0
package/dist/mcp/core/index.d.ts +124 -0
package/dist/mcp/core/index.js +1 -0
package/dist/mcp/index.cjs +317 -0
package/dist/mcp/index.d.cts +123 -0
package/dist/mcp/index.d.ts +123 -0
package/dist/mcp/index.js +8 -0
package/dist/mcp/plugin-editor/index.cjs +47 -0
package/dist/mcp/plugin-editor/index.d.cts +98 -0
package/dist/mcp/plugin-editor/index.d.ts +98 -0
package/dist/mcp/plugin-editor/index.js +2 -0
package/dist/mcp/plugin-excel/index.cjs +31 -0
package/dist/mcp/plugin-excel/index.d.cts +86 -0
package/dist/mcp/plugin-excel/index.d.ts +86 -0
package/dist/mcp/plugin-excel/index.js +2 -0
package/dist/mcp/plugin-preview/index.cjs +23 -0
package/dist/mcp/plugin-preview/index.d.cts +109 -0
package/dist/mcp/plugin-preview/index.d.ts +109 -0
package/dist/mcp/plugin-preview/index.js +2 -0
package/dist/mcp/plugin-seaflow/index.cjs +35 -0
package/dist/mcp/plugin-seaflow/index.d.cts +318 -0
package/dist/mcp/plugin-seaflow/index.d.ts +318 -0
package/dist/mcp/plugin-seaflow/index.js +2 -0
package/dist/mcp/seastudio/index.cjs +75 -0
package/dist/mcp/seastudio/index.d.cts +341 -0
package/dist/mcp/seastudio/index.d.ts +341 -0
package/dist/mcp/seastudio/index.js +2 -0
package/dist/tools-LMW67LIY.js +2 -0
package/dist/tools-TU7PBMDO.cjs +23 -0
package/dist/types-Clgf5gBf.d.cts +107 -0
package/dist/types-Clgf5gBf.d.ts +107 -0
package/dist/ui/index.cjs +58 -0
package/dist/ui/index.d.cts +142 -0
package/dist/ui/index.d.ts +142 -0
package/dist/ui/index.js +1 -0
package/package.json +115 -0
package/src/develop-tool/templates/plugin/README.md.tmpl +36 -0
package/src/develop-tool/templates/plugin/frontend/index.html.tmpl +12 -0
package/src/develop-tool/templates/plugin/frontend/package.json.tmpl +30 -0
package/src/develop-tool/templates/plugin/frontend/postcss.config.js +6 -0
package/src/develop-tool/templates/plugin/frontend/src/App.css +43 -0
package/src/develop-tool/templates/plugin/frontend/src/App.tsx.tmpl +43 -0
package/src/develop-tool/templates/plugin/frontend/src/main.tsx +10 -0
package/src/develop-tool/templates/plugin/frontend/src/vite-env.d.ts +1 -0
package/src/develop-tool/templates/plugin/frontend/tsconfig.json +20 -0
package/src/develop-tool/templates/plugin/frontend/vite.config.ts +12 -0
package/src/develop-tool/templates/plugin/seastudio.config.json.tmpl +14 -0
package/src/ui/cosmos.css +407 -0

package/src/develop-tool/templates/plugin/README.md.tmpl ADDED Viewed

@@ -0,0 +1,36 @@
+# {{pluginName}}
+SeaStudio 第三方插件
+## 开发
+```bash
+cd frontend
+npm install
+npm run dev
+```
+## 构建
+```bash
+cd frontend
+npm run build
+```
+## 打包
+```bash
+seastudio pack
+```
+打包后会生成 `{{protocolHost}}.seaplugin` 文件。
+## 安装
+1. 打开 SeaStudio
+2. 设置 → 插件管理 → 添加插件
+3. 选择 `.seaplugin` 文件
+## 许可证
+MIT

package/src/develop-tool/templates/plugin/frontend/index.html.tmpl ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{pluginName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/develop-tool/templates/plugin/frontend/package.json.tmpl ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "name": "{{pluginId}}-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "pack": "cd .. && npx seastudio pack"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "lucide-react": "^0.400.0",
+    "@seastudio/sdk": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.5.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^6.0.0"
+  }
+}

package/src/develop-tool/templates/plugin/frontend/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

package/src/develop-tool/templates/plugin/frontend/src/App.css ADDED Viewed

@@ -0,0 +1,43 @@
+@import 'tailwindcss';
+:root {
+  --background: 20 14% 4%;
+  --foreground: 0 0% 95%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 0 0% 64%;
+  --border: 0 0% 14%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+.bg-background {
+  background-color: hsl(var(--background));
+}
+.text-foreground {
+  color: hsl(var(--foreground));
+}
+.bg-muted\/50 {
+  background-color: hsl(var(--muted) / 0.5);
+}
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+.border-border {
+  border-color: hsl(var(--border));
+}

package/src/develop-tool/templates/plugin/frontend/src/App.tsx.tmpl ADDED Viewed

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import { callHostTool } from '@seastudio/sdk';
+function App() {
+  const [projectPath, setProjectPath] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    callHostTool('seastudio-project_get_path', {})
+      .then((result) => {
+        if (result.content?.[0]?.text) {
+          const data = JSON.parse(result.content[0].text);
+          setProjectPath(data.path || '');
+        }
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+  return (
+    <div className="min-h-screen bg-background text-foreground p-6">
+      <h1 className="text-2xl font-bold mb-4">{{pluginName}}</h1>
+      <div className="space-y-4">
+        <div className="p-4 rounded-lg bg-muted/50 border border-border">
+          <h2 className="text-sm font-medium text-muted-foreground mb-2">当前项目</h2>
+          <p className="text-sm">
+            {loading ? '加载中...' : projectPath || '未打开项目'}
+          </p>
+        </div>
+        <div className="p-4 rounded-lg bg-muted/50 border border-border">
+          <h2 className="text-sm font-medium text-muted-foreground mb-2">开始开发</h2>
+          <p className="text-sm text-muted-foreground">
+            编辑此文件 (src/App.tsx) 开始构建你的插件。
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default App;

package/src/develop-tool/templates/plugin/frontend/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './App.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/develop-tool/templates/plugin/frontend/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/src/develop-tool/templates/plugin/frontend/tsconfig.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/src/develop-tool/templates/plugin/frontend/vite.config.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  base: './',
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});

package/src/develop-tool/templates/plugin/seastudio.config.json.tmpl ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "type": "plugin",
+  "id": "{{pluginId}}",
+  "name": "{{pluginName}}",
+  "version": "1.0.0",
+  "category": "{{category}}",
+  "protocolHost": "{{protocolHost}}",
+  "frontendDir": "frontend",
+  "tab": {
+    "id": "{{protocolHost}}",
+    "title": "{{pluginName}}"
+  },
+  "mcpTools": []
+}

package/src/ui/cosmos.css ADDED Viewed

@@ -0,0 +1,407 @@
+/**
+ * SeaStudio Cosmos Design System
+ *
+ * 统一的 UI 风格定义，供所有 Agent 和 Plugin 前端使用。
+ *
+ * 使用方式：
+ * 1. 在项目中导入: @import "@seastudio/sdk/styles/cosmos.css";
+ * 2. 或在 JS 中导入: import "@seastudio/sdk/styles/cosmos.css";
+ */
+@import "tailwindcss";
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  /* Cosmos Typography Scale - 1.25 倍率体系（基准 14px）*/
+  --font-size-xs: 0.75rem;      /* 12px - caption */
+  --font-size-sm: 0.875rem;     /* 14px - body（基准）*/
+  --font-size-base: 1rem;       /* 16px - default */
+  --font-size-lg: 1.125rem;     /* 18px - subheading */
+  --font-size-xl: 1.375rem;     /* 22px - heading */
+  --font-size-2xl: 1.75rem;     /* 28px - display */
+  --font-size-3xl: 2.125rem;    /* 34px - hero */
+  /* Cosmos Radius System */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius: 6px;
+}
+/* ========================================
+   Light Mode (Default)
+   ======================================== */
+:root {
+  --background: 48 100% 98%;
+  --foreground: 240 10% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 15%;
+  --primary: 165 80% 45%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 48 95% 75%;
+  --secondary-foreground: 240 10% 15%;
+  --muted: 48 30% 95%;
+  --muted-foreground: 240 5% 50%;
+  --accent: 330 85% 60%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 85% 55%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 15% 90%;
+  --input: 240 15% 92%;
+  --ring: 165 80% 45%;
+  --radius: 0.25rem;
+  /* Cyber theme accents */
+  --cyber-teal: 165 80% 45%;
+  --cyber-pink: 330 85% 60%;
+  --cyber-yellow: 48 95% 75%;
+  --cyber-orange: 25 95% 60%;
+}
+/* ========================================
+   Dark Mode - Infinity Kernel Cosmos Edition
+   "Zero distractions. Just pure creation."
+   ======================================== */
+.dark {
+  /* Base colors - Final Cut Pro 人体工程学标准 */
+  --background: 0 0% 11%;          /* #1C1C1E 深灰背景（macOS Dark Mode）*/
+  --foreground: 0 0% 96%;          /* #F5F5F5 接近白（对比度 15.8:1）*/
+  --card: 0 0% 13%;                /* #212123 卡片背景 */
+  --card-foreground: 0 0% 96%;
+  --popover: 0 0% 15%;             /* #262628 弹出层 */
+  --popover-foreground: 0 0% 96%;
+  /* Primary - 高亮强调（接近白）*/
+  --primary: 0 0% 96%;
+  --primary-foreground: 0 0% 11%;
+  --secondary: 0 0% 15%;
+  --secondary-foreground: 0 0% 96%;
+  --muted: 0 0% 35%;               /* #595959 中灰 */
+  --muted-foreground: 0 0% 65%;    /* #A6A6A6 次要文本 */
+  /* Accent - 中强调 */
+  --accent: 0 0% 85%;              /* #D9D9D9 亮灰 */
+  --accent-foreground: 0 0% 11%;
+  --destructive: 0 0% 70%;
+  --destructive-foreground: 0 0% 96%;
+  --border: 0 0% 18%;              /* #2E2E30 可见边框 */
+  --input: 0 0% 13%;
+  --ring: 0 0% 96%;
+  /* Cosmos 灰度调色板 - Final Cut Pro 优化版本 */
+  --cosmos-black: 0 0% 11%;        /* #1C1C1E 深灰（背景）*/
+  --cosmos-gray-900: 0 0% 13%;     /* #212123 极深 */
+  --cosmos-gray-800: 0 0% 18%;     /* #2E2E30 深 */
+  --cosmos-gray-700: 0 0% 28%;     /* #474747 中深 */
+  --cosmos-gray-600: 0 0% 40%;     /* #666666 中 */
+  --cosmos-gray-500: 0 0% 50%;     /* #808080 标准中灰 */
+  --cosmos-gray-400: 0 0% 65%;     /* #A6A6A6 中浅 */
+  --cosmos-gray-300: 0 0% 75%;     /* #BFBFBF 浅 */
+  --cosmos-gray-200: 0 0% 85%;     /* #D9D9D9 极浅 */
+  --cosmos-gray-100: 0 0% 92%;     /* #EBEBEB 最浅 */
+  --cosmos-white: 0 0% 96%;        /* #F5F5F5 接近白 */
+  /* Solarized Dark 配色 - 用于代码高亮和语法着色 */
+  --solarized-base03: 0 0% 8%;        /* #141414 纯黑灰背景 */
+  --solarized-base02: 0 0% 12%;       /* #1F1F1F 深灰背景 */
+  --solarized-base01: 194 25% 45%;    /* #586e75 注释/次要 */
+  --solarized-base00: 195 23% 51%;    /* #657b83 正文 */
+  --solarized-base0: 186 13% 59%;     /* #839496 正文强调 */
+  --solarized-base1: 180 9% 63%;      /* #93a1a1 次要强调 */
+  --solarized-base2: 92 10% 92%;      /* #eee8d5 亮色背景 */
+  --solarized-base3: 44 11% 93%;      /* #fdf6e3 亮色背景 */
+  --solarized-yellow: 45 100% 35%;    /* #b58900 */
+  --solarized-orange: 18 80% 44%;     /* #cb4b16 */
+  --solarized-red: 1 71% 52%;         /* #dc322f */
+  --solarized-magenta: 331 64% 52%;   /* #d33682 */
+  --solarized-violet: 237 45% 77%;    /* #6c71c4 */
+  --solarized-blue: 205 82% 66%;      /* #268bd2 */
+  --solarized-cyan: 175 74% 63%;      /* #2aa198 */
+  --solarized-green: 68 85% 45%;      /* #859900 */
+}
+/* Auto dark mode based on system preference */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: 0 0% 11%;
+    --foreground: 0 0% 96%;
+    --card: 0 0% 13%;
+    --card-foreground: 0 0% 96%;
+    --popover: 0 0% 15%;
+    --popover-foreground: 0 0% 96%;
+    --primary: 0 0% 96%;
+    --primary-foreground: 0 0% 11%;
+    --secondary: 0 0% 15%;
+    --secondary-foreground: 0 0% 96%;
+    --muted: 0 0% 35%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 85%;
+    --accent-foreground: 0 0% 11%;
+    --destructive: 0 0% 70%;
+    --destructive-foreground: 0 0% 96%;
+    --border: 0 0% 18%;
+    --input: 0 0% 13%;
+    --ring: 0 0% 96%;
+    /* Cosmos grayscale palette */
+    --cosmos-black: 0 0% 11%;
+    --cosmos-gray-900: 0 0% 13%;
+    --cosmos-gray-800: 0 0% 18%;
+    --cosmos-gray-700: 0 0% 28%;
+    --cosmos-gray-600: 0 0% 40%;
+    --cosmos-gray-500: 0 0% 50%;
+    --cosmos-gray-400: 0 0% 65%;
+    --cosmos-gray-300: 0 0% 75%;
+    --cosmos-gray-200: 0 0% 85%;
+    --cosmos-gray-100: 0 0% 92%;
+    --cosmos-white: 0 0% 96%;
+    /* Solarized Dark */
+    --solarized-base03: 0 0% 8%;
+    --solarized-base02: 0 0% 12%;
+    --solarized-base01: 194 25% 45%;
+    --solarized-base00: 195 23% 51%;
+    --solarized-base0: 186 13% 59%;
+    --solarized-base1: 180 9% 63%;
+    --solarized-base2: 92 10% 92%;
+    --solarized-base3: 44 11% 93%;
+    --solarized-yellow: 45 100% 35%;
+    --solarized-orange: 18 80% 44%;
+    --solarized-red: 1 71% 52%;
+    --solarized-magenta: 331 64% 52%;
+    --solarized-violet: 237 45% 77%;
+    --solarized-blue: 205 82% 66%;
+    --solarized-cyan: 175 74% 63%;
+    --solarized-green: 68 85% 45%;
+  }
+}
+/* ========================================
+   Base Styles
+   ======================================== */
+* {
+  border-color: hsl(var(--border));
+}
+body {
+  margin: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+/* ========================================
+   Scrollbar - Vesper Style
+   ======================================== */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border) / 0.9) transparent;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border) / 0.9);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  transition: all 0.2s ease;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground) / 0.24);
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+/* ========================================
+   Text Selection
+   ======================================== */
+body,
+p,
+pre,
+code,
+span,
+div {
+  user-select: text;
+  -webkit-user-select: text;
+}
+button,
+.select-none {
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select-text,
+.select-text * {
+  user-select: text !important;
+  -webkit-user-select: text !important;
+}
+/* ========================================
+   Animations
+   ======================================== */
+@keyframes cosmosFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes cosmosPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+@keyframes progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+.animate-fade-in {
+  animation: cosmosFadeIn 0.4s ease-out forwards;
+}
+.animate-pulse {
+  animation: cosmosPulse 2s ease-in-out infinite;
+}
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+/* ========================================
+   Interaction Utilities
+   ======================================== */
+.cosmos-hover {
+  transition: opacity 0.3s ease;
+}
+.cosmos-hover:hover {
+  opacity: 0.8;
+}
+.cosmos-button {
+  transition: opacity 0.2s ease;
+}
+.cosmos-button:hover {
+  opacity: 0.85;
+}
+.cosmos-button:active {
+  opacity: 0.7;
+}
+/* ========================================
+   Code Highlighting - Cosmos Grayscale
+   ======================================== */
+.hljs {
+  background: transparent !important;
+  color: hsl(var(--cosmos-gray-200)) !important;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-section {
+  color: hsl(var(--cosmos-white)) !important;
+  font-weight: 600;
+}
+.hljs-string,
+.hljs-template-variable {
+  color: hsl(var(--cosmos-gray-200)) !important;
+}
+.hljs-title,
+.hljs-name,
+.hljs-function {
+  color: hsl(var(--cosmos-gray-100)) !important;
+  font-weight: 500;
+}
+.hljs-type,
+.hljs-class .hljs-title,
+.hljs-builtin-name {
+  color: hsl(var(--cosmos-gray-100)) !important;
+  font-weight: 500;
+}
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: hsl(var(--cosmos-gray-600)) !important;
+  font-style: italic;
+}
+.hljs-number,
+.hljs-literal,
+.hljs-regexp {
+  color: hsl(var(--cosmos-gray-300)) !important;
+}
+.hljs-variable,
+.hljs-symbol,
+.hljs-bullet {
+  color: hsl(var(--cosmos-gray-400)) !important;
+}
+.hljs-attribute,
+.hljs-attr,
+.hljs-property {
+  color: hsl(var(--cosmos-gray-300)) !important;
+}
+.hljs-tag,
+.hljs-operator {
+  color: hsl(var(--cosmos-gray-400)) !important;
+}
+.hljs-link {
+  color: hsl(var(--cosmos-gray-100)) !important;
+  text-decoration: underline;
+}
+.hljs-addition {
+  color: hsl(var(--cosmos-gray-100)) !important;
+  background-color: hsl(var(--cosmos-gray-800) / 0.3);
+}
+.hljs-deletion {
+  color: hsl(var(--cosmos-gray-400)) !important;
+  background-color: hsl(var(--cosmos-gray-900) / 0.5);
+}