doe-sdk 0.1.0

package/templates/theme/README.md

@@ -0,0 +1,132 @@
+# {{displayName}}
+
+A custom theme for DOE.
+
+## Installation
+
+Install from the DOE marketplace or load locally during development.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server with hot reload
+pnpm dev
+
+# Validate theme
+pnpm validate
+
+# Build for production
+pnpm build
+
+# Publish to marketplace
+pnpm publish
+```
+
+## Theme Customization
+
+Edit `themes/theme.json` to customize the theme. The theme system supports:
+
+### Colors (Required)
+
+- `background` - Main app background
+- `surface` - Panel and card backgrounds
+- `text` - Primary text color
+- `textMuted` - Secondary/muted text
+- `accent` - Brand/accent color
+- `border` - Borders and dividers
+
+### Typography (Optional)
+
+- `fontFamily` - Primary font stack
+- `fontFamilyMono` - Monospace font stack
+- `scale` - Font size scale (minor-second, major-second, minor-third, major-third, perfect-fourth)
+
+### Effects (Optional)
+
+- `shadows` - Shadow style (none, subtle, soft, medium, hard, neon)
+- `glassEnabled` - Enable glassmorphism effects
+
+### Shapes (Optional)
+
+- `borderRadius` - Corner radius preset (none, xs, sm, md, lg, xl, full)
+
+### Motion (Optional)
+
+- `easing` - Animation easing (linear, ease, spring, bounce, snappy, smooth)
+- `durationScale` - Animation duration multiplier (0.5-2)
+
+## Adding Custom CSS
+
+For advanced styling beyond color tokens, use custom CSS with semantic theme parts:
+
+1. Create a CSS file in `styles/`:
+
+```css
+/* styles/my-theme.css */
+[data-theme-part="titlebar"] {
+  background: linear-gradient(#fff, #ccc);
+}
+
+[data-theme-part="sidebar"] {
+  border-right: 2px solid var(--color-accent);
+}
+```
+
+2. Reference it in your `themes/theme.json`:
+
+```json
+{
+  "customCSS": "./styles/my-theme.css",
+  "colors": { ... }
+}
+```
+
+3. The CSS file will be automatically copied to `dist/themes/` during build.
+
+### Available Theme Parts
+
+Use `data-theme-part` selectors for stable CSS targeting:
+
+**Layout:**
+- `sidebar`, `topbar`, `statusbar`, `panel`
+
+**Window (ExtensionShape):**
+- `window`, `titlebar`, `titlebar-title`, `titlebar-controls`
+- `titlebar-minimize`, `titlebar-maximize`, `titlebar-close`
+- `window-content`
+
+**Controls:**
+- `button`, `button-primary`, `button-icon`
+- `input`, `select`, `checkbox`, `switch`, `tab`
+
+**Feedback:**
+- `modal`, `modal-backdrop`, `tooltip`, `menu`, `menu-item`, `popover`
+
+**Canvas (tldraw wrapper):**
+- `toolbar`, `toolbar-button`, `style-panel`
+
+## Adding Custom Assets
+
+Place custom fonts in an `assets/fonts/` directory and reference them in your theme:
+
+```json
+{
+  "assets": {
+    "fonts": [
+      {
+        "family": "MyCustomFont",
+        "weight": "400",
+        "style": "normal",
+        "url": "./assets/fonts/MyCustomFont-Regular.woff2"
+      }
+    ]
+  }
+}
+```
+
+## License
+
+MIT

package/templates/theme/manifest.json

@@ -0,0 +1,19 @@
+{
+  "id": "@{{slug}}/{{name}}",
+  "version": "1.0.0",
+  "name": "{{displayName}}",
+  "description": "A custom theme for DOE",
+  "author": "{{author}}",
+  "permissions": [],
+  "categories": ["theme"],
+  "keywords": ["theme"],
+  "minDOEVersion": "1.0.0",
+  "contributes": {
+    "themes": [
+      {
+        "path": "./themes/theme.json",
+        "label": "{{displayName}}"
+      }
+    ]
+  }
+}

package/templates/theme/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && doe-sdk validate",
+    "validate": "doe-sdk validate",
+    "publish": "doe-sdk publish"
+  },
+  "devDependencies": {
+    "doe-sdk": "{{sdkDependency}}",
+    "vite": "^6.2.0"
+  }
+}

package/templates/theme/styles/.gitkeep

@@ -0,0 +1,2 @@
+# Custom CSS files go here
+# Reference them in your theme.json with "customCSS": "./styles/my-theme.css"

package/templates/theme/themes/theme.json

@@ -0,0 +1,32 @@
+{
+  "id": "{{name}}",
+  "name": "{{displayName}}",
+  "version": "1.0.0",
+  "author": "{{author}}",
+  "type": "dark",
+  "tags": ["custom"],
+  "colors": {
+    "background": "#1a1a2e",
+    "surface": "#252541",
+    "text": "#eaeaea",
+    "textMuted": "#a0a0a0",
+    "accent": "#e94560",
+    "border": "#3d3d5c"
+  },
+  "typography": {
+    "fontFamily": "Inter, system-ui, sans-serif",
+    "fontFamilyMono": "JetBrains Mono, monospace",
+    "scale": "minor-third"
+  },
+  "effects": {
+    "shadows": "soft",
+    "glassEnabled": false
+  },
+  "shapes": {
+    "borderRadius": "md"
+  },
+  "motion": {
+    "easing": "smooth",
+    "durationScale": 1
+  }
+}

package/templates/theme/vite-plugin-doe-theme.ts

@@ -0,0 +1,53 @@
+import type { Plugin } from "vite";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+export function doeThemePlugin(): Plugin {
+  return {
+    name: "doe-theme",
+    async buildStart() {
+      // Copy manifest.json
+      const manifest = await fs.readFile("manifest.json", "utf-8");
+      this.emitFile({
+        type: "asset",
+        fileName: "manifest.json",
+        source: manifest,
+      });
+    },
+    async generateBundle() {
+      // Copy theme JSON files
+      const themesDir = path.resolve("themes");
+      const files = await fs.readdir(themesDir);
+
+      for (const file of files) {
+        if (file.endsWith(".json")) {
+          const content = await fs.readFile(
+            path.join(themesDir, file),
+            "utf-8"
+          );
+          const theme = JSON.parse(content);
+
+          this.emitFile({
+            type: "asset",
+            fileName: `themes/${file}`,
+            source: content,
+          });
+
+          // Copy customCSS if referenced
+          if (theme.customCSS) {
+            const cssPath = path.resolve(
+              path.dirname(path.join(themesDir, file)),
+              theme.customCSS
+            );
+            const cssContent = await fs.readFile(cssPath, "utf-8");
+            this.emitFile({
+              type: "asset",
+              fileName: `themes/${theme.customCSS}`,
+              source: cssContent,
+            });
+          }
+        }
+      }
+    },
+  };
+}

package/templates/theme/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import { doeThemePlugin } from "./vite-plugin-doe-theme";
+
+export default defineConfig({
+  plugins: [doeThemePlugin()],
+  build: {
+    outDir: "dist",
+    emptyDirBeforeWrite: true,
+  },
+});