create-tx5dr-plugin 1.1.0 → 1.2.0

package/README.md

@@ -0,0 +1,130 @@
+# create-tx5dr-plugin
+
+Scaffold a new [TX-5DR](https://github.com/boybook/tx-5dr) plugin project.
+
+## Usage
+
+```bash
+npx create-tx5dr-plugin [name] [options]
+```
+
+### Options
+
+| Flag | Description | Default |
+|------|-------------|---------|
+| `--type <utility\|strategy>` | Plugin type | `utility` |
+| `--lang <ts\|js>` | Language | `ts` |
+| `--template <basic\|ui-vanilla\|ui-react\|ui-vue>` | Project template | `basic` |
+| `--help, -h` | Show help | |
+
+### Templates
+
+| Template | Description |
+|----------|-------------|
+| `basic` | Server-side plugin only (no UI) |
+| `ui-vanilla` | Plugin with vanilla HTML/JS/CSS UI page |
+| `ui-react` | Plugin with React + Vite UI page |
+| `ui-vue` | Plugin with Vue + Vite UI page |
+
+### Examples
+
+```bash
+# Interactive mode (prompts for all options)
+npx create-tx5dr-plugin
+
+# Basic utility plugin
+npx create-tx5dr-plugin my-plugin
+
+# Strategy plugin
+npx create-tx5dr-plugin my-strategy --type strategy
+
+# Plugin with React UI
+npx create-tx5dr-plugin my-plugin --template ui-react
+
+# Plugin with Vue UI
+npx create-tx5dr-plugin my-plugin --template ui-vue
+
+# Vanilla UI (no build step for UI files)
+npx create-tx5dr-plugin my-plugin --template ui-vanilla
+```
+
+## Generated Structure
+
+### Basic (no UI)
+
+```
+my-plugin/
+├── package.json
+├── tsconfig.json
+├── .gitignore
+├── scripts/
+│   └── link.mjs              # Symlink to TX-5DR plugins dir
+└── src/
+    ├── index.ts
+    ├── locales/
+    └── __tests__/
+```
+
+### React / Vue UI
+
+```
+my-plugin/
+├── package.json               # Includes vite + framework deps
+├── tsconfig.json              # Server-side TS config
+├── scripts/
+│   └── link.mjs
+├── src/
+│   ├── index.ts               # Plugin definition with UI pages
+│   ├── locales/
+│   └── __tests__/
+├── ui/                        # Vite project
+│   ├── vite.config.ts         # MPA build config
+│   ├── tsconfig.json          # Frontend TS (includes bridge types)
+│   ├── settings.html          # HTML entry
+│   └── src/
+│       ├── main.tsx / main.ts # Framework entry
+│       ├── App.tsx / App.vue  # Main component
+│       └── App.css            # Uses --tx5dr-* CSS tokens
+└── dist/                      # Build output
+    ├── index.js               # Server-side plugin
+    └── ui/
+        └── settings.html      # Built iframe page
+```
+
+## Development Workflow
+
+```bash
+cd my-plugin
+npm install
+npm run build        # Build everything (server + UI)
+npm run link         # Symlink dist/ to TX-5DR plugins dir
+
+# Development (two terminals):
+npm run dev:server   # Watch server-side TypeScript
+npm run dev:ui       # Watch UI with Vite (React/Vue only)
+```
+
+### How `npm run link` works
+
+The `scripts/link.mjs` script:
+1. Detects the TX-5DR data directory (platform-specific, or `TX5DR_DATA_DIR` env)
+2. Creates a symlink from `dist/` to `{dataDir}/plugins/{plugin-name}`
+3. Creates a `.hotreload` marker so TX-5DR dev server auto-reloads on changes
+
+```bash
+npm run link            # Create symlink
+npm run link -- --unlink   # Remove symlink
+```
+
+### Hot Reload
+
+In development mode (`NODE_ENV !== 'production'`), the TX-5DR server watches plugin directories that contain a `.hotreload` marker file. When files change, the plugin is automatically reloaded after a short debounce.
+
+## Documentation
+
+- [Plugin System Guide](https://github.com/boybook/tx-5dr/blob/main/docs/plugin-system.md)
+- [@tx5dr/plugin-api](https://www.npmjs.com/package/@tx5dr/plugin-api) — TypeScript types and testing utilities
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -6,6 +6,6 @@
  *   npx create-tx5dr-plugin                              # Interactive
  *   npx create-tx5dr-plugin my-plugin                    # Name only, prompts for rest
  *   npx create-tx5dr-plugin my-plugin --type utility     # Non-interactive
- *   npx create-tx5dr-plugin my-plugin --type strategy --lang js
+ *   npx create-tx5dr-plugin my-plugin --template ui-react
  */
 export {};

package/dist/index.js

@@ -6,11 +6,12 @@
  *   npx create-tx5dr-plugin                              # Interactive
  *   npx create-tx5dr-plugin my-plugin                    # Name only, prompts for rest
  *   npx create-tx5dr-plugin my-plugin --type utility     # Non-interactive
- *   npx create-tx5dr-plugin my-plugin --type strategy --lang js
+ *   npx create-tx5dr-plugin my-plugin --template ui-react
  */
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 import { createInterface } from 'node:readline';
+const VALID_TEMPLATES = ['basic', 'ui-vanilla', 'ui-react', 'ui-vue'];
 // ===== CLI argument parsing =====
 function parseArgs() {
     const args = process.argv.slice(2);
@@ -30,6 +31,12 @@ function parseArgs() {
                 config.lang = value;
             }
         }
+        else if (arg === '--template' && i + 1 < args.length) {
+            const value = args[++i];
+            if (VALID_TEMPLATES.includes(value)) {
+                config.template = value;
+            }
+        }
         else if (arg === '--help' || arg === '-h') {
             printUsage();
             process.exit(0);
@@ -49,14 +56,22 @@ function printUsage() {
     npx create-tx5dr-plugin [name] [options]
 
   Options:
-    --type <utility|strategy>   Plugin type (default: utility)
-    --lang <ts|js>              Language (default: ts)
-    --help, -h                  Show this help message
+    --type <utility|strategy>                        Plugin type (default: utility)
+    --lang <ts|js>                                   Language (default: ts)
+    --template <basic|ui-vanilla|ui-react|ui-vue>    Template (default: basic)
+    --help, -h                                       Show this help message
+
+  Templates:
+    basic        Server-side plugin only (no UI)
+    ui-vanilla   Plugin with vanilla HTML/JS/CSS UI page
+    ui-react     Plugin with React + Vite UI page
+    ui-vue       Plugin with Vue + Vite UI page
 
   Examples:
-    npx create-tx5dr-plugin my-cool-plugin
-    npx create-tx5dr-plugin my-cool-plugin --type strategy
-    npx create-tx5dr-plugin my-cool-plugin --type utility --lang js
+    npx create-tx5dr-plugin my-plugin
+    npx create-tx5dr-plugin my-plugin --type strategy
+    npx create-tx5dr-plugin my-plugin --template ui-react
+    npx create-tx5dr-plugin my-plugin --template ui-vue --type utility
   `);
 }
 // ===== Interactive prompts =====
@@ -83,28 +98,61 @@ async function promptConfig(partial) {
             const answer = await prompt(rl, 'Language (ts/js) [ts]: ');
             lang = answer === 'js' ? 'js' : 'ts';
         }
-        return { name, type, lang };
+        let template = partial.template;
+        if (!template) {
+            const answer = await prompt(rl, 'Template (basic/ui-vanilla/ui-react/ui-vue) [basic]: ');
+            template = VALID_TEMPLATES.includes(answer) ? answer : 'basic';
+        }
+        return { name, type, lang, template };
     }
     finally {
         rl.close();
     }
 }
-// ===== Template generation =====
+// ===== Helpers =====
+function hasUI(config) {
+    return config.template !== 'basic';
+}
+function hasVite(config) {
+    return config.template === 'ui-react' || config.template === 'ui-vue';
+}
+// ===== Core template generation =====
 function generatePackageJson(config) {
-    const deps = {};
     const devDeps = {
         '@tx5dr/plugin-api': 'latest',
     };
     if (config.lang === 'ts') {
         devDeps['typescript'] = '^5.0.0';
         devDeps['vitest'] = '^1.0.0';
-        devDeps['@tx5dr/plugin-api'] = 'latest';
+    }
+    if (hasVite(config)) {
+        devDeps['vite'] = '^6.0.0';
+        if (config.template === 'ui-react') {
+            devDeps['react'] = '^19.0.0';
+            devDeps['react-dom'] = '^19.0.0';
+            devDeps['@vitejs/plugin-react'] = '^4.0.0';
+            devDeps['@types/react'] = '^19.0.0';
+            devDeps['@types/react-dom'] = '^19.0.0';
+        }
+        else if (config.template === 'ui-vue') {
+            devDeps['vue'] = '^3.5.0';
+            devDeps['@vitejs/plugin-vue'] = '^5.0.0';
+        }
     }
     const scripts = {};
     if (config.lang === 'ts') {
-        scripts['build'] = 'tsc';
-        scripts['dev'] = 'tsc --watch';
+        if (hasVite(config)) {
+            scripts['build'] = 'tsc && npm run build:ui';
+            scripts['build:ui'] = 'vite build --config ui/vite.config.ts';
+            scripts['dev:server'] = 'tsc --watch';
+            scripts['dev:ui'] = 'vite build --watch --config ui/vite.config.ts';
+        }
+        else {
+            scripts['build'] = 'tsc';
+            scripts['dev'] = 'tsc --watch';
+        }
         scripts['test'] = 'vitest run';
+        scripts['link'] = 'node scripts/link.mjs';
     }
     const pkg = {
         name: config.name,
@@ -116,9 +164,6 @@ function generatePackageJson(config) {
         scripts,
         devDependencies: devDeps,
     };
-    if (Object.keys(deps).length > 0) {
-        pkg.dependencies = deps;
-    }
     return JSON.stringify(pkg, null, 2) + '\n';
 }
 function generateTsConfig() {
@@ -153,6 +198,7 @@ function generateLocaleEn(config) {
         pluginDescription: `${config.name} plugin`,
     }, null, 2) + '\n';
 }
+// ===== Server-side plugin definition templates =====
 function generateTsUtilityPlugin(config) {
     return `import type {
   PluginDefinition,
@@ -295,6 +341,78 @@ export const locales: Record<string, Record<string, string>> = {
   en: enLocale,
 };
 
+export default plugin;
+`;
+}
+function generateTsUtilityPluginWithUI(config) {
+    return `import type {
+  PluginDefinition,
+  PluginContext,
+  ParsedFT8Message,
+  SlotInfo,
+} from '@tx5dr/plugin-api';
+import zhLocale from './locales/zh.json' with { type: 'json' };
+import enLocale from './locales/en.json' with { type: 'json' };
+
+export const plugin: PluginDefinition = {
+  name: '${config.name}',
+  version: '0.1.0',
+  type: 'utility',
+  description: 'pluginDescription',
+
+  settings: {
+    // Define your plugin settings here
+  },
+
+  ui: {
+    dir: 'ui',
+    pages: [
+      {
+        id: 'settings',
+        entry: 'settings.html',
+        title: 'settingsPage',
+        accessScope: 'admin',
+      },
+    ],
+  },
+
+  onLoad(ctx: PluginContext): void {
+    ctx.ui.registerPageHandler({
+      async onMessage(pageId, action, data) {
+        if (action === 'getSettings') {
+          return {
+            message: ctx.store.global.get<string>('message', ''),
+          };
+        }
+        if (action === 'saveSettings') {
+          const { message } = data as { message: string };
+          ctx.store.global.set('message', message);
+          ctx.log.info('Settings saved', { message });
+          return { ok: true };
+        }
+        return null;
+      },
+    });
+  },
+
+  hooks: {
+    onSlotStart(slotInfo: SlotInfo, messages: ParsedFT8Message[], ctx: PluginContext): void {
+      ctx.log.debug('Slot started', { slotId: slotInfo.id, messageCount: messages.length });
+    },
+
+    onDecode(messages: ParsedFT8Message[], ctx: PluginContext): void {
+      for (const msg of messages) {
+        ctx.log.debug('Decoded message', { raw: msg.rawMessage, snr: msg.snr });
+      }
+    },
+  },
+};
+
+export const locales: Record<string, Record<string, string>> = {
+  zh: zhLocale,
+  en: enLocale,
+};
+
 export default plugin;
 `;
 }
@@ -326,6 +444,63 @@ export const plugin = {
 export default plugin;
 `;
 }
+function generateJsUtilityPluginWithUI(config) {
+    return `/** @type {import('@tx5dr/plugin-api').PluginDefinition} */
+export const plugin = {
+  name: '${config.name}',
+  version: '0.1.0',
+  type: 'utility',
+  description: 'pluginDescription',
+
+  settings: {},
+
+  ui: {
+    dir: 'ui',
+    pages: [
+      {
+        id: 'settings',
+        entry: 'settings.html',
+        title: 'settingsPage',
+        accessScope: 'admin',
+      },
+    ],
+  },
+
+  onLoad(ctx) {
+    ctx.ui.registerPageHandler({
+      async onMessage(pageId, action, data) {
+        if (action === 'getSettings') {
+          return {
+            message: ctx.store.global.get('message', ''),
+          };
+        }
+        if (action === 'saveSettings') {
+          ctx.store.global.set('message', data.message);
+          ctx.log.info('Settings saved', { message: data.message });
+          return { ok: true };
+        }
+        return null;
+      },
+    });
+  },
+
+  hooks: {
+    onSlotStart(slotInfo, messages, ctx) {
+      ctx.log.debug('Slot started', { slotId: slotInfo.id, messageCount: messages.length });
+    },
+
+    onDecode(messages, ctx) {
+      for (const msg of messages) {
+        ctx.log.debug('Decoded message', { raw: msg.rawMessage, snr: msg.snr });
+      }
+    },
+  },
+};
+
+export default plugin;
+`;
+}
+// ===== Test templates =====
 function generateTsTest(config) {
     if (config.type === 'strategy') {
         return `import { describe, it, expect } from 'vitest';
@@ -400,6 +575,490 @@ describe('${config.name}', () => {
 });
 `;
 }
+// ===== Vanilla UI templates =====
+function generateVanillaUIHtml(config) {
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="settings.css">
+</head>
+<body>
+  <div class="container">
+    <h2 class="title">${config.name} Settings</h2>
+
+    <div class="section">
+      <label class="label">Message</label>
+      <input type="text" class="input" id="messageInput" placeholder="Enter a message">
+    </div>
+
+    <div class="section">
+      <button class="btn btn-primary" id="saveBtn">Save</button>
+      <span class="status" id="status"></span>
+    </div>
+
+    <div class="section">
+      <p class="text-secondary" id="currentValue"></p>
+    </div>
+  </div>
+  <script src="settings.js"></script>
+</body>
+</html>
+`;
+}
+function generateVanillaUIJs() {
+    return `/// <reference types="@tx5dr/plugin-api/bridge" />
+(function () {
+  'use strict';
+
+  var bridge = window.tx5dr;
+  var messageInput = document.getElementById('messageInput');
+  var saveBtn = document.getElementById('saveBtn');
+  var status = document.getElementById('status');
+  var currentValue = document.getElementById('currentValue');
+
+  // Load saved value on page open
+  bridge.invoke('getSettings').then(function (settings) {
+    if (settings && settings.message) {
+      messageInput.value = settings.message;
+      currentValue.textContent = 'Current: ' + settings.message;
+    }
+  }).catch(function () {
+    // Use defaults
+  });
+
+  // Save button handler
+  saveBtn.addEventListener('click', function () {
+    var message = messageInput.value.trim();
+    if (!message) return;
+
+    saveBtn.disabled = true;
+    status.textContent = 'Saving...';
+
+    bridge.invoke('saveSettings', { message: message }).then(function () {
+      status.textContent = 'Saved!';
+      currentValue.textContent = 'Current: ' + message;
+      setTimeout(function () { status.textContent = ''; }, 2000);
+    }).catch(function (err) {
+      status.textContent = 'Error: ' + err.message;
+    }).finally(function () {
+      saveBtn.disabled = false;
+    });
+  });
+
+  // Listen for server push updates
+  bridge.onPush('settingsUpdated', function (data) {
+    if (data && data.message) {
+      messageInput.value = data.message;
+      currentValue.textContent = 'Current: ' + data.message;
+    }
+  });
+
+  // Auto-resize iframe
+  var resizeObserver = new ResizeObserver(function () {
+    var h = document.body.scrollHeight;
+    if (h > 0) bridge.resize(h);
+  });
+  resizeObserver.observe(document.body);
+  bridge.resize(document.body.scrollHeight);
+})();
+`;
+}
+function generateUICss() {
+    return `/* Plugin UI styles — using TX-5DR Design Tokens */
+.container {
+  padding: var(--tx5dr-spacing-lg);
+  font-family: var(--tx5dr-font);
+  color: var(--tx5dr-text);
+}
+
+.title {
+  font-size: var(--tx5dr-font-size-lg);
+  font-weight: 600;
+  margin-bottom: var(--tx5dr-spacing-lg);
+}
+
+.section {
+  margin-bottom: var(--tx5dr-spacing-md);
+  display: flex;
+  align-items: center;
+  gap: var(--tx5dr-spacing-sm);
+}
+
+.label {
+  font-size: var(--tx5dr-font-size-sm);
+  color: var(--tx5dr-text-secondary);
+  min-width: 70px;
+}
+
+.input {
+  flex: 1;
+  padding: var(--tx5dr-spacing-sm) var(--tx5dr-spacing-md);
+  background: var(--tx5dr-bg-content);
+  border: 1px solid var(--tx5dr-border);
+  border-radius: var(--tx5dr-radius-sm);
+  color: var(--tx5dr-text);
+  font-size: var(--tx5dr-font-size-md);
+  font-family: var(--tx5dr-font);
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.input:focus {
+  border-color: var(--tx5dr-primary);
+  box-shadow: 0 0 0 2px var(--tx5dr-focus-ring);
+}
+
+.btn {
+  padding: var(--tx5dr-spacing-sm) var(--tx5dr-spacing-lg);
+  border: 1px solid var(--tx5dr-border);
+  border-radius: var(--tx5dr-radius-sm);
+  background: var(--tx5dr-bg-content);
+  color: var(--tx5dr-text);
+  font-size: var(--tx5dr-font-size-sm);
+  font-family: var(--tx5dr-font);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn:hover {
+  background: var(--tx5dr-bg-hover);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--tx5dr-primary);
+  border-color: var(--tx5dr-primary);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: var(--tx5dr-primary-hover);
+}
+
+.status {
+  font-size: var(--tx5dr-font-size-sm);
+  color: var(--tx5dr-text-secondary);
+}
+
+.text-secondary {
+  font-size: var(--tx5dr-font-size-sm);
+  color: var(--tx5dr-text-secondary);
+}
+`;
+}
+function generateVanillaJsConfig() {
+    return JSON.stringify({
+        compilerOptions: {
+            types: ['@tx5dr/plugin-api/bridge'],
+        },
+    }, null, 2) + '\n';
+}
+// ===== Vite-based UI templates (React / Vue) =====
+function generateViteConfig(config) {
+    const pluginImport = config.template === 'ui-react'
+        ? "import react from '@vitejs/plugin-react';"
+        : "import vue from '@vitejs/plugin-vue';";
+    const pluginUsage = config.template === 'ui-react' ? 'react()' : 'vue()';
+    return `import { defineConfig } from 'vite';
+${pluginImport}
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [${pluginUsage}],
+  root: import.meta.dirname,
+  build: {
+    outDir: '../dist/ui',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        settings: resolve(import.meta.dirname, 'settings.html'),
+        // Add more entries here for multi-page plugins:
+        // dashboard: resolve(import.meta.dirname, 'dashboard.html'),
+      },
+    },
+  },
+});
+`;
+}
+function generateUITsConfig(config) {
+    const jsx = config.template === 'ui-react' ? { jsx: 'react-jsx' } : {};
+    return JSON.stringify({
+        compilerOptions: {
+            target: 'ES2021',
+            module: 'ESNext',
+            moduleResolution: 'bundler',
+            strict: true,
+            esModuleInterop: true,
+            skipLibCheck: true,
+            types: ['@tx5dr/plugin-api/bridge'],
+            ...jsx,
+        },
+        include: ['src'],
+    }, null, 2) + '\n';
+}
+function generateFrameworkEntryHtml(config) {
+    const ext = config.template === 'ui-react' ? 'tsx' : 'ts';
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/main.${ext}"></script>
+</body>
+</html>
+`;
+}
+function generateReactMain() {
+    return `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<App />);
+
+// Auto-resize iframe to fit content
+const observer = new ResizeObserver(() => {
+  const h = document.body.scrollHeight;
+  if (h > 0) tx5dr.resize(h);
+});
+observer.observe(document.body);
+`;
+}
+function generateReactApp(config) {
+    return `import React, { useCallback, useEffect, useState } from 'react';
+import './App.css';
+
+export function App() {
+  const [message, setMessage] = useState('');
+  const [saved, setSaved] = useState('');
+  const [status, setStatus] = useState('');
+
+  useEffect(() => {
+    tx5dr.invoke('getSettings').then((settings: any) => {
+      if (settings?.message) {
+        setMessage(settings.message);
+        setSaved(settings.message);
+      }
+    });
+
+    // Listen for push updates from the server
+    const handleUpdate = (data: any) => {
+      if (data?.message) {
+        setMessage(data.message);
+        setSaved(data.message);
+      }
+    };
+    tx5dr.onPush('settingsUpdated', handleUpdate);
+    return () => tx5dr.offPush('settingsUpdated', handleUpdate);
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!message.trim()) return;
+    setStatus('Saving...');
+    try {
+      await tx5dr.invoke('saveSettings', { message });
+      setSaved(message);
+      setStatus('Saved!');
+      setTimeout(() => setStatus(''), 2000);
+    } catch (err: any) {
+      setStatus('Error: ' + err.message);
+    }
+  }, [message]);
+
+  return (
+    <div className="container">
+      <h2 className="title">${config.name} Settings</h2>
+
+      <div className="section">
+        <label className="label">Message</label>
+        <input
+          className="input"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Enter a message"
+          onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+        />
+      </div>
+
+      <div className="section">
+        <button className="btn btn-primary" onClick={handleSave}>
+          Save
+        </button>
+        {status && <span className="status">{status}</span>}
+      </div>
+
+      {saved && (
+        <div className="section">
+          <p className="text-secondary">Current: {saved}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+}
+function generateVueMain() {
+    return `import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+
+// Auto-resize iframe to fit content
+const observer = new ResizeObserver(() => {
+  const h = document.body.scrollHeight;
+  if (h > 0) tx5dr.resize(h);
+});
+observer.observe(document.body);
+`;
+}
+function generateVueApp(config) {
+    return `<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import './App.css';
+
+const message = ref('');
+const saved = ref('');
+const status = ref('');
+
+onMounted(async () => {
+  const settings = await tx5dr.invoke('getSettings') as any;
+  if (settings?.message) {
+    message.value = settings.message;
+    saved.value = settings.message;
+  }
+
+  tx5dr.onPush('settingsUpdated', handleUpdate);
+});
+
+onUnmounted(() => {
+  tx5dr.offPush('settingsUpdated', handleUpdate);
+});
+
+function handleUpdate(data: any) {
+  if (data?.message) {
+    message.value = data.message;
+    saved.value = data.message;
+  }
+}
+
+async function handleSave() {
+  if (!message.value.trim()) return;
+  status.value = 'Saving...';
+  try {
+    await tx5dr.invoke('saveSettings', { message: message.value });
+    saved.value = message.value;
+    status.value = 'Saved!';
+    setTimeout(() => { status.value = ''; }, 2000);
+  } catch (err: any) {
+    status.value = 'Error: ' + err.message;
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <h2 class="title">${config.name} Settings</h2>
+
+    <div class="section">
+      <label class="label">Message</label>
+      <input
+        class="input"
+        v-model="message"
+        placeholder="Enter a message"
+        @keydown.enter="handleSave"
+      />
+    </div>
+
+    <div class="section">
+      <button class="btn btn-primary" @click="handleSave">Save</button>
+      <span v-if="status" class="status">{{ status }}</span>
+    </div>
+
+    <div v-if="saved" class="section">
+      <p class="text-secondary">Current: {{ saved }}</p>
+    </div>
+  </div>
+</template>
+`;
+}
+// ===== Link script =====
+function generateLinkScript(pluginName) {
+    return `#!/usr/bin/env node
+// Symlink this plugin's dist/ to the TX-5DR plugins directory.
+// Usage:  node scripts/link.mjs           (create link)
+//         node scripts/link.mjs --unlink  (remove link)
+
+import { symlinkSync, unlinkSync, existsSync, mkdirSync, writeFileSync, lstatSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import { homedir, platform } from 'node:os';
+
+const PLUGIN_NAME = '${pluginName}';
+
+function getDataDir() {
+  if (process.env.TX5DR_DATA_DIR) return process.env.TX5DR_DATA_DIR;
+  const home = homedir();
+  switch (platform()) {
+    case 'darwin':
+      return join(home, 'Library', 'Application Support', 'TX-5DR');
+    case 'win32':
+      return join(process.env.LOCALAPPDATA || join(home, 'AppData', 'Local'), 'TX-5DR');
+    default:
+      return join(process.env.XDG_DATA_HOME || join(home, '.local', 'share'), 'TX-5DR');
+  }
+}
+
+const unlink = process.argv.includes('--unlink');
+const pluginsDir = join(getDataDir(), 'plugins');
+const target = resolve('dist');
+const linkPath = join(pluginsDir, PLUGIN_NAME);
+
+if (unlink) {
+  if (existsSync(linkPath)) {
+    unlinkSync(linkPath);
+    console.log('Unlinked: ' + linkPath);
+  } else {
+    console.log('No link found at: ' + linkPath);
+  }
+  process.exit(0);
+}
+
+if (!existsSync(target)) {
+  console.error('Error: dist/ not found. Run "npm run build" first.');
+  process.exit(1);
+}
+
+if (existsSync(linkPath)) {
+  try {
+    const stat = lstatSync(linkPath);
+    if (stat.isSymbolicLink()) {
+      console.log('Already linked: ' + linkPath + ' -> ' + target);
+      process.exit(0);
+    }
+  } catch { /* continue */ }
+  console.error('Error: ' + linkPath + ' already exists and is not a symlink.');
+  process.exit(1);
+}
+
+mkdirSync(pluginsDir, { recursive: true });
+symlinkSync(target, linkPath, 'junction');
+
+// Create .hotreload marker so the TX-5DR dev server auto-reloads on changes.
+const hotreloadPath = join(target, '.hotreload');
+if (!existsSync(hotreloadPath)) {
+  writeFileSync(hotreloadPath, '', 'utf-8');
+}
+
+console.log('Linked: ' + linkPath + ' -> ' + target);
+console.log('Created .hotreload marker for dev auto-reload.');
+`;
+}
 // ===== File generation =====
 function generateFiles(config) {
     const files = new Map();
@@ -410,6 +1069,9 @@ function generateFiles(config) {
         if (config.type === 'strategy') {
             files.set('src/index.ts', generateTsStrategyPlugin(config));
         }
+        else if (hasUI(config)) {
+            files.set('src/index.ts', generateTsUtilityPluginWithUI(config));
+        }
         else {
             files.set('src/index.ts', generateTsUtilityPlugin(config));
         }
@@ -418,7 +1080,41 @@ function generateFiles(config) {
         files.set('src/__tests__/plugin.test.ts', generateTsTest(config));
     }
     else {
-        files.set('index.js', generateJsUtilityPlugin(config));
+        if (hasUI(config)) {
+            files.set('index.js', generateJsUtilityPluginWithUI(config));
+        }
+        else {
+            files.set('index.js', generateJsUtilityPlugin(config));
+        }
+    }
+    // Vanilla UI template
+    if (config.template === 'ui-vanilla') {
+        files.set('ui/jsconfig.json', generateVanillaJsConfig());
+        files.set('ui/settings.html', generateVanillaUIHtml(config));
+        files.set('ui/settings.css', generateUICss());
+        files.set('ui/settings.js', generateVanillaUIJs());
+    }
+    // React UI template
+    if (config.template === 'ui-react') {
+        files.set('ui/vite.config.ts', generateViteConfig(config));
+        files.set('ui/tsconfig.json', generateUITsConfig(config));
+        files.set('ui/settings.html', generateFrameworkEntryHtml(config));
+        files.set('ui/src/main.tsx', generateReactMain());
+        files.set('ui/src/App.tsx', generateReactApp(config));
+        files.set('ui/src/App.css', generateUICss());
+    }
+    // Vue UI template
+    if (config.template === 'ui-vue') {
+        files.set('ui/vite.config.ts', generateViteConfig(config));
+        files.set('ui/tsconfig.json', generateUITsConfig(config));
+        files.set('ui/settings.html', generateFrameworkEntryHtml(config));
+        files.set('ui/src/main.ts', generateVueMain());
+        files.set('ui/src/App.vue', generateVueApp(config));
+        files.set('ui/src/App.css', generateUICss());
+    }
+    // Link script for all templates with TS
+    if (config.lang === 'ts') {
+        files.set('scripts/link.mjs', generateLinkScript(config.name));
     }
     return files;
 }
@@ -439,6 +1135,7 @@ async function main() {
     console.log(`Creating TX-5DR plugin: ${config.name}`);
     console.log(`  Type: ${config.type}`);
     console.log(`  Language: ${config.lang === 'ts' ? 'TypeScript' : 'JavaScript'}`);
+    console.log(`  Template: ${config.template}`);
     console.log(`  Directory: ${targetDir}`);
     console.log();
     const files = generateFiles(config);
@@ -457,7 +1154,24 @@ async function main() {
         console.log('  npm test');
     }
     console.log();
-    console.log('Then copy the built plugin into your TX-5DR data/plugins/ directory.');
+    if (config.lang === 'ts') {
+        console.log('Link to TX-5DR for development:');
+        console.log('  npm run link');
+        console.log();
+    }
+    if (hasVite(config)) {
+        console.log('UI development (run in two terminals):');
+        console.log('  npm run dev:server    # Watch server-side TypeScript');
+        console.log('  npm run dev:ui        # Watch UI with Vite');
+    }
+    else if (hasUI(config)) {
+        console.log('UI files are in the ui/ directory.');
+        console.log('Edit HTML/JS/CSS directly — the Bridge SDK is auto-injected by the host.');
+    }
+    if (hasUI(config) || hasVite(config)) {
+        console.log();
+        console.log('Docs: https://github.com/boybook/tx-5dr/blob/main/docs/plugin-system.md');
+    }
 }
 main().catch((err) => {
     console.error(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tx5dr-plugin",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "Scaffold a new TX-5DR plugin project",
   "license": "MIT",