mokkun 0.1.4 → 0.1.6

package/dist/types/loader/file-loader.d.ts

@@ -25,6 +25,8 @@ export interface FileLoadSuccess {
     schema: MokkunSchema;
     fileName: string;
     source: 'file' | 'url' | 'drop';
+    /** 読み込んだ YAML の原文（コメント・順序を保持） */
+    content: string;
 }
 /**
  * ファイル読み込み失敗結果

package/dist/types/parser/key-normalizer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * YAML キー正規化
+ *
+ * YAML の正規形は camelCase。内部表現は snake_case のまま維持するため、
+ * パーサーの入口で camelCase キーを内部の snake_case キーへ変換する。
+ * snake_case の YAML（teamkit generate-ui の出力など）は変換せずそのまま通す（後方互換）。
+ */
+/**
+ * 内部で使用する snake_case キーの完全な集合（ソート済み、113 個）。
+ * schema.json のプロパティ名 / src/types/schema.ts のプロパティ名 /
+ * yaml-parser.ts が読むキーの和集合。key-normalizer.test.ts で schema.json と突き合わせる。
+ *
+ * 注意: 内部で元から camelCase のプロパティ（dropdownItems, maxColumns, weekStartsOn, loaderType,
+ * showProgress, initialProgress, ariaLabel, defaultValue）は snake_case 版と衝突するため、パーサーは snake 形で読む。
+ * definition_list の group/item の maxColumns はレンダラーが camelCase で読むが、静的 renderField では無視される。
+ */
+export declare const KNOWN_KEYS: readonly string[];
+/** snake_case を camelCase に変換（use_24_hour → use24Hour） */
+export declare function toCamel(snake: string): string;
+/** camelCase を snake_case に変換（use24Hour → use_24_hour） */
+export declare function toSnake(camel: string): string;
+/** camelCase キー → 内部 snake_case キー */
+export declare const CAMEL_TO_SNAKE: Record<string, string>;
+export declare function normalizeKeysDeep(value: unknown, parentKey?: string, verbatimSelf?: boolean, isNamedEntry?: boolean): unknown;

package/dist/types/renderer/components/app-header.d.ts

@@ -117,6 +117,8 @@ export interface AppHeaderConfig {
     logoAlt?: string;
     /** ロゴのリンク先 */
     logoHref?: string;
+    /** システム名（既定ロゴのテキスト。logo 指定時は無視） */
+    systemName?: string;
     /** アプリ名 */
     appName: string;
     /** テナント一覧 */

package/dist/types/renderer/components/dialog/action-dialog.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Action Dialog Component
+ * ユーザーアクション確認用ダイアログ
+ *
+ * 機能:
+ * - 確認/キャンセルボタン
+ * - デンジャーモード（危険なアクションの強調）
+ * - アイコン表示
+ * - サブアクションエリア
+ */
+import { BaseDialog } from './base-dialog';
+import type { ActionDialogConfig, ActionDialogCallbacks } from './dialog-types';
+/**
+ * アクションダイアログコンポーネント
+ * ユーザーに確認・キャンセルの選択を求めるダイアログ
+ */
+export declare class ActionDialog extends BaseDialog {
+    protected config: Required<Omit<ActionDialogConfig, 'customIcon' | 'message' | 'subActionContent'>> & Pick<ActionDialogConfig, 'customIcon' | 'message' | 'subActionContent'>;
+    protected callbacks: ActionDialogCallbacks;
+    constructor(config: ActionDialogConfig, callbacks?: ActionDialogCallbacks);
+    /**
+     * ダイアログのクラス名を取得
+     */
+    protected getDialogClassName(): string;
+    /**
+     * ARIA role を取得（アクション確認なので alertdialog）
+     */
+    protected getAriaRole(): string;
+    /**
+     * ダイアログのコンテンツをレンダリング
+     */
+    protected renderContent(): HTMLElement;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * アイコンをレンダリング
+     */
+    private renderIcon;
+    /**
+     * アイコンのSVGを取得
+     */
+    private getIconSVG;
+    /**
+     * ボディをレンダリング
+     */
+    private renderBody;
+    /**
+     * フッターをレンダリング
+     */
+    private renderFooter;
+    /**
+     * 確認ボタンクリック時
+     */
+    private handleConfirm;
+    /**
+     * キャンセルボタンクリック時
+     */
+    private handleCancel;
+}

package/dist/types/renderer/components/dialog/base-dialog.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Base Dialog Component
+ * すべてのダイアログバリアントの基盤となるクラス
+ *
+ * 機能:
+ * - オーバーレイ管理
+ * - フォーカストラップ
+ * - キーボードイベント処理（Escape, Tab）
+ * - ARIA属性管理
+ * - open/closeライフサイクル
+ * - bodyスクロール防止
+ * - フォーカス復元
+ */
+import type { BaseDialogConfig, BaseDialogCallbacks, BaseDialogState } from './dialog-types';
+/**
+ * ベースダイアログコンポーネント
+ * すべてのダイアログタイプの共通ロジックを提供
+ */
+export declare class BaseDialog {
+    protected config: BaseDialogConfig;
+    protected callbacks: BaseDialogCallbacks;
+    protected state: BaseDialogState;
+    protected dialogElement: HTMLElement | null;
+    protected overlayElement: HTMLElement | null;
+    protected readonly dialogId: string;
+    private boundKeydownHandler;
+    constructor(config?: BaseDialogConfig, callbacks?: BaseDialogCallbacks);
+    /**
+     * ダイアログを開く
+     */
+    open(): void;
+    /**
+     * ダイアログを閉じる
+     */
+    close(): void;
+    /**
+     * 設定を更新
+     */
+    updateConfig(config: Partial<BaseDialogConfig>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): BaseDialogState;
+    /**
+     * ダイアログ要素を取得（テスト用）
+     */
+    getDialogElement(): HTMLElement | null;
+    /**
+     * オーバーレイ要素を取得（テスト用）
+     */
+    getOverlayElement(): HTMLElement | null;
+    /**
+     * ダイアログをレンダリング
+     * 継承クラスでオーバーライドして独自のコンテンツを追加
+     */
+    protected render(): void;
+    /**
+     * ダイアログのコンテンツをレンダリング
+     * 継承クラスで必ずオーバーライドすること
+     */
+    protected renderContent(): HTMLElement | null;
+    /**
+     * ダイアログのクラス名を取得
+     * 継承クラスでオーバーライドしてタイプ固有のクラスを追加
+     */
+    protected getDialogClassName(): string;
+    /**
+     * ダイアログのARIA role を取得
+     * 継承クラスでオーバーライド可能（例: ActionDialog → alertdialog）
+     */
+    protected getAriaRole(): string;
+    /**
+     * 初期フォーカス要素を取得
+     * 継承クラスでオーバーライドして特定の要素を返すことができる
+     */
+    protected getFirstFocusElement(): HTMLElement | null;
+    /**
+     * オーバーレイを作成
+     */
+    private createOverlay;
+    /**
+     * ダイアログコンテナを作成
+     */
+    private createDialogContainer;
+    /**
+     * イベントリスナーを設定
+     */
+    private setupEventListeners;
+    /**
+     * イベントリスナーを削除
+     */
+    private removeEventListeners;
+    /**
+     * キーボードイベントハンドラ
+     */
+    private handleKeydown;
+    /**
+     * Escapeキー処理
+     */
+    private handleEscapeKey;
+    /**
+     * オーバーレイクリック処理
+     */
+    private handleOverlayClick;
+    /**
+     * Tab キーの処理（フォーカストラップ）
+     */
+    private handleTabKey;
+    /**
+     * フォーカス可能な要素を取得
+     */
+    private getFocusableElements;
+    /**
+     * フォーカスをダイアログ内に設定
+     */
+    private trapFocus;
+    /**
+     * ダイアログ要素を破棄
+     */
+    private destroy;
+    /**
+     * HTML特殊文字をエスケープ
+     */
+    protected escapeHtml(text: string): string;
+}

package/dist/types/renderer/components/dialog/dialog-types.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Dialog Types
+ * ダイアログシステムの共通型定義
+ */
+export type DialogSize = 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'FULL';
+export interface BaseDialogConfig {
+    isOpen?: boolean;
+    size?: DialogSize;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    firstFocusTarget?: 'first' | 'confirm' | 'cancel';
+    onClickOverlay?: () => void | boolean;
+    onPressEscape?: () => void | boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    contentPadding?: 'normal' | 'compact' | 'none';
+    className?: string;
+}
+export interface BaseDialogCallbacks {
+    onOpen?: () => void;
+    onClose?: () => void;
+    onAfterClose?: () => void;
+}
+export interface BaseDialogState {
+    isOpen: boolean;
+    previouslyFocusedElement: Element | null;
+}
+export type DialogIcon = 'warning' | 'error' | 'info' | 'success' | 'custom';
+export interface ActionDialogConfig extends BaseDialogConfig {
+    title: string;
+    message?: string;
+    icon?: DialogIcon;
+    customIcon?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDisabled?: boolean;
+    danger?: boolean;
+    showSubActionArea?: boolean;
+    subActionContent?: HTMLElement | string;
+}
+export interface ActionDialogCallbacks extends BaseDialogCallbacks {
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+export interface MessageDialogConfig extends BaseDialogConfig {
+    title: string;
+    message: string;
+    icon?: Exclude<DialogIcon, 'custom'> | 'custom';
+    customIcon?: string;
+    closeLabel?: string;
+}
+export interface MessageDialogCallbacks extends BaseDialogCallbacks {
+    onAcknowledge?: () => void;
+}
+export interface ModelessDialogPosition {
+    top: number;
+    left: number;
+}
+export interface ModelessDialogConfig extends Omit<BaseDialogConfig, 'closeOnOverlayClick'> {
+    title: string;
+    position?: 'auto' | ModelessDialogPosition;
+    draggable?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+export interface ModelessDialogCallbacks extends BaseDialogCallbacks {
+    onMove?: (position: ModelessDialogPosition) => void;
+}
+export interface FormDialogConfig extends BaseDialogConfig {
+    title: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    preventCloseOnSubmit?: boolean;
+    warnOnUnsavedChanges?: boolean;
+}
+export interface FormDialogCallbacks extends BaseDialogCallbacks {
+    onSubmit?: (formData: FormData) => void | Promise<void>;
+    onCancel?: () => void;
+    onFormChange?: (isDirty: boolean) => void;
+}
+export interface DependencyInfo {
+    type: string;
+    label: string;
+    count: number;
+}
+export interface DeleteConfirmDialogConfig extends ActionDialogConfig {
+    targetName: string;
+    targetType?: string;
+    dependencies?: DependencyInfo[];
+    warningMessage?: string;
+}
+export interface DeleteConfirmDialogCallbacks extends ActionDialogCallbacks {
+}
+export interface DeleteConfirmDialogState extends BaseDialogState {
+}

package/dist/types/renderer/components/form-fields.d.ts

@@ -83,9 +83,6 @@ export declare function renderGoogleMapEmbedFieldHtml(field: GoogleMapEmbedField
  * image_uploader → 画像アップローダーコンポーネント
  */
 export declare function renderImageUploaderField(field: ImageUploaderField): string;
-/**
- * repeater → 静的なリピーターフィールド表示
- */
 export declare function renderRepeaterFieldStatic(field: RepeaterField): string;
 /**
  * フィールドタイプに応じてレンダリング

package/dist/types/renderer/components/tabs.d.ts

@@ -176,4 +176,10 @@ export declare class Tabs {
      */
     refreshTabContent(tabId: string): Promise<void>;
     static renderField(field: InputField): string;
+    private static renderDummy;
 }
+/**
+ * 静的出力（Tabs.renderField）のタブ切替を有効化する。クリックと矢印キーに対応。
+ * @returns クリーンアップ関数
+ */
+export declare function attachTabsBehavior(container: HTMLElement): () => void;

package/dist/types/renderer/layouts/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Screen Layout — 画面レイアウトは shell 固定
+ */
+export { shellLayout } from './shell';
+export type { ScreenLayout, LayoutHelpers, RenderedSection } from './types';

package/dist/types/renderer/layouts/shell.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Layout "shell" — アプリシェル型（管理画面）
+ * app_header / app_navi を全幅で最上部に置き、本文は 12 カラムグリッドのカード群にする。
+ */
+import type { ScreenLayout } from './types';
+import './shell.css';
+export declare const shellLayout: ScreenLayout;

package/dist/types/renderer/layouts/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Screen Layout — 画面全体の骨格（ヘッダ・セクション・アクションの配置）。layout は shell のみ
+ */
+import type { ScreenDefinition, InputField, Action } from '../../types/schema';
+/** セクション1つ分の描画済み部品 */
+export interface RenderedSection {
+    id: string;
+    title: string;
+    icon?: string;
+    fieldsHtml: string;
+    publishToggleHtml: string;
+}
+/** レイアウト実装が利用できるヘルパー群 */
+export interface LayoutHelpers {
+    /** 画面タイトル＋説明文 */
+    renderScreenHeader(screen: ScreenDefinition): string;
+    /** app_header / app_navi のマウント先コンテナ */
+    renderAppLayoutContainers(screen: ScreenDefinition): string;
+    /** 任意のフィールド配列を描画 */
+    renderFields(fields: InputField[]): string;
+    /** 任意のアクション配列を描画 */
+    renderActions(actions: Action[]): string;
+    /** sections を部品に分解したもの（sections が無い画面では空配列） */
+    renderSections(screen: ScreenDefinition): RenderedSection[];
+    /** セクションIDを生成 */
+    generateSectionId(sectionName: string, index: number): string;
+    escapeHtml(text: string): string;
+}
+export interface ScreenLayout {
+    /** レイアウトID */
+    id: string;
+    /** 画面全体のHTMLを返す（`.screen` 要素を含むこと） */
+    render(screen: ScreenDefinition, helpers: LayoutHelpers): string;
+}

package/dist/types/renderer/screen-renderer.d.ts

@@ -3,7 +3,6 @@
  * 画面全体のレンダリングを担当
  */
 import type { ScreenDefinition } from '../types/schema';
-import { type SectionDefinition } from './components/section-nav';
 import { AppHeader } from './components/app-header';
 import { AppNavi } from './components/app-navi';
 /**
@@ -11,7 +10,7 @@ import { AppNavi } from './components/app-navi';
  */
 export declare function renderWizardScreen(screen: ScreenDefinition, currentStepIndex?: number): string;
 /**
- * 通常画面をレンダリング
+ * 通常画面をレンダリング（shell レイアウト固定）
  */
 export declare function renderScreen(screen: ScreenDefinition): string;
 /**
@@ -22,8 +21,6 @@ export interface ScreenController {
     appHeader?: AppHeader;
     /** AppNaviインスタンス（存在する場合） */
     appNavi?: AppNavi;
-    /** SectionNavコントローラー（存在する場合） */
-    sectionNav?: SectionNavController;
     /** 全コンポーネントを破棄 */
     destroy: () => void;
 }
@@ -32,17 +29,14 @@ export interface ScreenController {
  */
 export declare function mountScreen(container: HTMLElement, screen: ScreenDefinition): ScreenController;
 /**
- * セクションナビゲーションを初期化
+ * AppHeader / AppNavi のみをマウントする（renderScreen の文字列出力を使う呼び出し側用）
  */
-export declare function initializeSectionNav(container: HTMLElement, screen: ScreenDefinition): SectionNavController | null;
-/**
- * セクションナビコントローラーインターフェース
- */
-export interface SectionNavController {
-    getActiveSection: () => SectionDefinition | undefined;
-    scrollToSection: (sectionId: string) => void;
+export interface AppChromeController {
+    appHeader?: AppHeader;
+    appNavi?: AppNavi;
     destroy: () => void;
 }
+export declare function mountAppChrome(container: HTMLElement, screen: ScreenDefinition): AppChromeController;
 /**
  * ウィザード画面をDOMにマウント（ステップ管理付き）
  */
@@ -52,6 +46,7 @@ export declare function mountWizardScreen(container: HTMLElement, screen: Screen
  */
 export interface WizardController {
     getCurrentStep: () => number;
+    destroy: () => void;
     goToStep: (step: number) => void;
     nextStep: () => void;
     prevStep: () => void;

package/dist/types/renderer/utils/dummy-data.d.ts

@@ -11,17 +11,3 @@ export declare function generateDummyData(field: InputField, index?: number): un
  * リピーターアイテム用のダミーデータセットを生成
  */
 export declare function generateRepeaterItemDummyData(itemFields: InputField[], itemIndex: number): Record<string, unknown>;
-/**
- * DataTable用のダミー行データを生成
- */
-export declare function generateDataTableDummyRow(columns: Array<{
-    id: string;
-    label: string;
-}>, rowIndex: number): Record<string, unknown>;
-/**
- * DataTable用のダミーデータセットを生成
- */
-export declare function generateDataTableDummyData(columns: Array<{
-    id: string;
-    label: string;
-}>, rowCount?: number): Array<Record<string, unknown>>;

package/dist/types/renderer/utils/field-helpers.d.ts

@@ -18,6 +18,16 @@ export declare function escapeHtml(text: string): string;
  * @returns エスケープされた文字列
  */
 export declare function escapeHtmlSafe(text: string): string;
+/**
+ * radio/checkbox グループの方向を決める。direction 指定があれば優先。
+ * 未指定なら 選択肢4個以下かつ全ラベル8文字以下(説明文なし)で horizontal。
+ */
+export declare function resolveGroupDirection(direction: 'horizontal' | 'vertical' | undefined, options: Array<{
+    label: string;
+    description?: string;
+}>): 'horizontal' | 'vertical';
+/** 入力欄ではないが見出しとしてラベルだけ残すタイプ（description は出さない） */
+export declare const HEADING_LABEL_TYPES: Set<string>;
 /**
  * フィールドのラッパーHTML生成
  *
@@ -65,3 +75,16 @@ export declare function getDefaultSizeForLevel(level: 1 | 2 | 3 | 4 | 5 | 6): 'x
  * 単位ラベルのマッピング
  */
 export declare const unitLabels: Record<string, string>;
+/**
+ * ユーザー指定の class 値を検証して返す（英数字・_・-・空白のみ許可）
+ * 不正な値は undefined を返し、呼び出し側は無視する。
+ */
+export declare function safeClassName(value: unknown): string | undefined;
+/**
+ * 数値属性を生成する。有限な数値でない場合は空文字（属性なし）を返す。
+ */
+export declare function numAttr(name: string, value: unknown): string;
+/**
+ * 識別子（クラス名の一部や data 属性値）として使えるトークンだけを通す
+ */
+export declare function safeToken(value: unknown, fallback: string): string;

package/dist/types/renderer/utils/icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * アイコン名 → 絵文字/Unicode記号 のマップ
+ * YAML の `icon: "refresh"` のような名前指定を、文字列のまま表示せずに記号へ変換する。
+ */
+/**
+ * アイコン名を記号に変換する。未知の名前は空文字（文字列そのものは表示しない）。
+ * 既に絵文字などの非ASCII文字列が直接指定されている場合はそのまま返す。
+ */
+export declare function resolveIcon(name: string | undefined | null): string;
+/**
+ * アイコン用の <span> HTML を生成（未知の名前は空文字）
+ */
+export declare function renderIconHtml(name: string | undefined | null, className: string): string;

package/dist/types/types/schema.d.ts

@@ -241,6 +241,8 @@ export interface AppHeaderConfigSchema {
     logoAlt?: string;
     /** ロゴのリンク先 */
     logoHref?: string;
+    /** システム名（既定ロゴのテキスト。logo 指定時は無視） */
+    systemName?: string;
     /** アプリ名 */
     appName: string;
     /** テナント一覧 */
@@ -1287,12 +1289,26 @@ export interface SegmentedControlField extends BaseInputField {
  */
 export interface TabsField extends BaseInputField {
     type: 'tabs';
-    /** タブアイテム */
-    tabs?: Array<{
-        id: string;
-        label: string;
-        content?: string;
-    }>;
+    /** タブアイテム（items と tabs は同義。items を優先） */
+    items?: TabsFieldItem[];
+    tabs?: TabsFieldItem[];
+    /** 初期アクティブタブID */
+    default?: string;
+    active?: string;
+    /** タブの配置 */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** タブのスタイル */
+    variant?: 'default' | 'pills' | 'underline' | 'bordered' | 'segmented';
+}
+export interface TabsFieldItem {
+    id?: string;
+    label?: string;
+    icon?: string;
+    badge?: string | number;
+    disabled?: boolean;
+    /** プレーンテキスト（エスケープして表示） */
+    content?: string;
+    fields?: InputField[];
 }
 /**
  * ラインクランプフィールド

package/dist/types/types/theme.d.ts

@@ -64,7 +64,7 @@ export interface ThemeDefinition {
 /**
  * Built-in theme IDs
  */
-export type BuiltInThemeId = 'light' | 'dark' | 'lofi';
+export type BuiltInThemeId = 'light' | 'dark';
 /**
  * Theme configuration from YAML
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mokkun",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "YAML-based presentation and form builder",
   "type": "module",
   "bin": {
@@ -51,6 +51,8 @@
   "license": "MIT",
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1",
     "jsdom": "^27.4.0",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",