mokkun 0.1.5 → 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,8 +13,8 @@ const distDir = resolve(__dirname, '../dist')
 const args = process.argv.slice(2)
 let yamlFile = null
 let port = 3333
-let theme = 'lofi'
-const VALID_THEMES = ['lofi', 'light', 'dark']
+let theme = 'light'
+const VALID_THEMES = ['light', 'dark']
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--port' || args[i] === '-p') {
@@ -33,8 +33,8 @@ for (let i = 0; i < args.length; i++) {
 
 // Validate theme
 if (!VALID_THEMES.includes(theme)) {
-  console.error(`Error: Invalid theme "${theme}". Valid themes: ${VALID_THEMES.join(', ')}`)
-  process.exit(1)
+  console.warn(`Warning: Unknown theme "${theme}". Falling back to light. Valid themes: ${VALID_THEMES.join(', ')}`)
+  theme = 'light'
 }
 
 function printHelp() {
@@ -46,7 +46,7 @@ Usage:
 
 Options:
   -p, --port <port>    Port number (default: 3333)
-  -t, --theme <theme>  Theme: lofi, light, dark (default: lofi)
+  -t, --theme <theme>  Theme: light, dark (default: light)
   -h, --help           Show this help
 
 Examples:
@@ -94,7 +94,7 @@ function generateViewerHtml() {
   if (yamlFile) {
     html = html.replace('/* __YAML_URL__ */ null', JSON.stringify('/__yaml__/' + basename(yamlFile)))
   }
-  html = html.replace('/* __THEME__ */ \'lofi\'', JSON.stringify(theme))
+  html = html.replace('/* __THEME__ */ \'light\'', JSON.stringify(theme))
   return html
 }
 

package/bin/viewer.html

@@ -127,8 +127,8 @@
       var mokkunInstance = null;
       var screenSelect = document.getElementById('screen-select');
 
-      // Theme injected by CLI (default: lofi)
-      var currentTheme = /* __THEME__ */ '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;