mokkun 0.1.4 → 0.1.6

package/README.md

@@ -78,6 +78,16 @@ https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
 画面間のナビゲーション（actions の navigate）も設定してください。
 ```
 
+### エディタで補完を使う
+
+YAML の先頭行に次のモードラインを書くと、[YAML Language Server](https://github.com/redhat-developer/yaml-language-server)（VS Code の YAML 拡張など）でキー補完とバリデーションが効きます。
+
+```yaml
+# yaml-language-server: $schema=https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
+```
+
+リポジトリ内では `.vscode/settings.json` の `"yaml.schemas": { "./schema.json": ["examples/*.yaml", "*.mokkun.yaml"] }` で、`examples/*.yaml` と `*.mokkun.yaml` に自動適用できます。
+
 ### 生成した YAML をモックとして表示する
 
 AI が生成した YAML を `.yaml` ファイルとして保存し、`npx mokkun` で表示できます。
@@ -161,8 +171,8 @@ mokkun/
 
 | コンポーネント | 説明 |
 |---------------|------|
-| app_header | アプリケーションヘッダー（ロゴ、テナント切替、ユーザーメニュー） |
-| app_navi | アプリナビゲーション（主要機能の切り替え） |
+| appHeader | アプリケーションヘッダー（ロゴ、テナント切替、ユーザーメニュー。`systemName` で左上のシステム名を指定） |
+| appNavi | アプリナビゲーション（主要機能の切り替え） |
 | heading | 見出し |
 | tabs | タブ |
 | accordion_panel | アコーディオン |
@@ -195,9 +205,11 @@ mokkun/
 
 ## YAML構造
 
+YAML のキーは camelCase が正規形です。snake_case のキー（teamkit の generate-ui 出力など）も互換として引き続き受け付けます。
+
 ```yaml
 view:
-  screen_name:
+  myScreen:
     title: "画面タイトル"
     description: "画面の説明"
     fields:
@@ -211,13 +223,13 @@ view:
         label: "送信"
         style: "primary"
 
-common_components:
-  component_name:
+commonComponents:
+  myComponent:
     type: "field_group"
     fields: []
 
 validations:
-  rule_name:
+  myRule:
     rules:
       required: true
       min: 1

package/bin/cli.mjs

@@ -13,11 +13,16 @@ const distDir = resolve(__dirname, '../dist')
 const args = process.argv.slice(2)
 let yamlFile = null
 let port = 3333
+let theme = 'light'
+const VALID_THEMES = ['light', 'dark']
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--port' || args[i] === '-p') {
     port = parseInt(args[i + 1], 10)
     i++
+  } else if (args[i] === '--theme' || args[i] === '-t') {
+    theme = args[i + 1]
+    i++
   } else if (args[i] === '--help' || args[i] === '-h') {
     printHelp()
     process.exit(0)
@@ -26,6 +31,12 @@ for (let i = 0; i < args.length; i++) {
   }
 }
 
+// Validate theme
+if (!VALID_THEMES.includes(theme)) {
+  console.warn(`Warning: Unknown theme "${theme}". Falling back to light. Valid themes: ${VALID_THEMES.join(', ')}`)
+  theme = 'light'
+}
+
 function printHelp() {
   console.log(`
 mokkun - YAML-based form & mockup viewer
@@ -34,13 +45,15 @@ Usage:
   npx mokkun [options] [yaml-file]
 
 Options:
-  -p, --port <port>  Port number (default: 3333)
-  -h, --help         Show this help
+  -p, --port <port>    Port number (default: 3333)
+  -t, --theme <theme>  Theme: light, dark (default: light)
+  -h, --help           Show this help
 
 Examples:
-  npx mokkun                     # Start with built-in sample
-  npx mokkun ./my-form.yaml      # Open specific YAML file
-  npx mokkun -p 8080 form.yaml   # Custom port
+  npx mokkun                            # Start with built-in sample
+  npx mokkun ./my-form.yaml             # Open specific YAML file
+  npx mokkun -p 8080 form.yaml          # Custom port
+  npx mokkun --theme light form.yaml    # Use light theme
 `)
 }
 
@@ -76,12 +89,12 @@ const MIME_TYPES = {
 
 // Generate viewer HTML
 function generateViewerHtml() {
-  const yamlParam = yamlFile ? `yaml=${encodeURIComponent('/__yaml__/' + basename(yamlFile))}` : ''
   const viewerHtmlPath = resolve(__dirname, 'viewer.html')
   let html = readFileSync(viewerHtmlPath, 'utf-8')
-  if (yamlParam) {
+  if (yamlFile) {
     html = html.replace('/* __YAML_URL__ */ null', JSON.stringify('/__yaml__/' + basename(yamlFile)))
   }
+  html = html.replace('/* __THEME__ */ \'light\'', JSON.stringify(theme))
   return html
 }
 
@@ -136,6 +149,7 @@ server.listen(port, () => {
   if (yamlFile) {
     console.log(`Serving: ${yamlFile}`)
   }
+  console.log(`Theme: ${theme}`)
   console.log('Press Ctrl+C to stop.\n')
 
   // Open browser

package/bin/viewer.html

@@ -73,29 +73,6 @@
 
     .toolbar-spacer { flex: 1; }
 
-    .theme-toggle {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .theme-toggle button {
-      padding: 8px 16px;
-      border-radius: 6px;
-      border: 1px solid #3a3a5a;
-      background: transparent;
-      color: #fff;
-      font-size: 14px;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .theme-toggle button:hover { background: #3a3a5a; }
-    .theme-toggle button.active {
-      background: #6366f1;
-      border-color: #6366f1;
-    }
-
     #mokkun-app {
       margin-top: 60px;
       flex: 1;
@@ -137,12 +114,6 @@
       </div>
 
       <div class="toolbar-spacer"></div>
-
-      <div class="theme-toggle">
-        <button id="lofi-theme" class="active">Lo-Fi</button>
-        <button id="light-theme">Light</button>
-        <button id="dark-theme">Dark</button>
-      </div>
     </div>
 
     <div id="mokkun-app">
@@ -155,31 +126,16 @@
     (function() {
       var mokkunInstance = null;
       var screenSelect = document.getElementById('screen-select');
-      var lofiThemeBtn = document.getElementById('lofi-theme');
-      var lightThemeBtn = document.getElementById('light-theme');
-      var darkThemeBtn = document.getElementById('dark-theme');
-      var currentTheme = 'lofi';
+
+      // Theme injected by CLI (default: light)
+      var currentTheme = /* __THEME__ */ 'light';
 
       // YAML URL injected by CLI (or null for sample)
       var yamlUrl = /* __YAML_URL__ */ null;
 
-      // Theme
-      function setTheme(theme) {
-        currentTheme = theme;
-        document.body.classList.toggle('dark-theme', theme === 'dark');
-        document.documentElement.setAttribute('data-theme', theme);
-        lofiThemeBtn.classList.toggle('active', theme === 'lofi');
-        lightThemeBtn.classList.toggle('active', theme === 'light');
-        darkThemeBtn.classList.toggle('active', theme === 'dark');
-        if (mokkunInstance) mokkunInstance.setTheme(theme);
-      }
-
-      // Set initial theme
-      document.documentElement.setAttribute('data-theme', 'lofi');
-
-      lofiThemeBtn.addEventListener('click', function() { setTheme('lofi'); });
-      lightThemeBtn.addEventListener('click', function() { setTheme('light'); });
-      darkThemeBtn.addEventListener('click', function() { setTheme('dark'); });
+      // Apply theme
+      document.body.classList.toggle('dark-theme', currentTheme === 'dark');
+      document.documentElement.setAttribute('data-theme', currentTheme);
 
       // Screen change
       screenSelect.addEventListener('change', function() {