mokkun 0.1.5 → 0.1.6

package/dist/types/lib.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Mokkun Library Entry Point
+ * YAML-based presentation and form builder
+ */
+import './style.css';
+import { parseYaml, getScreen, getScreenNames, findFieldById } from './parser';
+import type { MokkunSchema, ScreenDefinition, BuiltInThemeId } from './types';
+/**
+ * Mokkun initialization options
+ */
+export interface MokkunInitOptions {
+    /** Container selector or element */
+    container: string | HTMLElement;
+    /** URL to YAML file */
+    yamlUrl?: string;
+    /** Inline YAML content */
+    yamlContent?: string;
+    /** Initial theme ('light' | 'dark') */
+    theme?: BuiltInThemeId | string;
+    /** Initial screen to display */
+    initialScreen?: string;
+    /** Callback when ready */
+    onReady?: (instance: MokkunInstance) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Callback when navigating between screens */
+    onNavigate?: (fromScreen: string, toScreen: string) => void;
+    /** Callback when form is submitted */
+    onSubmit?: (screenName: string, formData: Record<string, unknown>) => void;
+}
+/**
+ * Mokkun instance returned by init()
+ */
+export interface MokkunInstance {
+    /** Current schema */
+    readonly schema: MokkunSchema | null;
+    /** Current screen name */
+    readonly currentScreen: string | null;
+    /** Navigate to a screen */
+    showScreen: (screenName: string) => void;
+    /** Get available screen names */
+    getScreenNames: () => string[];
+    /** Change theme */
+    setTheme: (themeId: string) => void;
+    /** Get current theme */
+    getTheme: () => string | null;
+    /** Get current form data */
+    getFormData: () => Record<string, unknown> | null;
+    /** Destroy instance and cleanup */
+    destroy: () => void;
+}
+/**
+ * Initialize Mokkun with the given options
+ */
+declare function init(options: MokkunInitOptions): Promise<MokkunInstance>;
+/**
+ * Mokkun - YAML-based presentation and form builder
+ */
+export declare const Mokkun: {
+    /** Initialize Mokkun */
+    init: typeof init;
+    /** Library version */
+    VERSION: string;
+    /** Utility functions */
+    utils: {
+        parseYaml: typeof parseYaml;
+        getScreen: typeof getScreen;
+        getScreenNames: typeof getScreenNames;
+        findFieldById: typeof findFieldById;
+    };
+    /** Theme management */
+    theme: {
+        apply: (id: string) => boolean;
+        getCurrent: () => string | null;
+        getAvailable: () => import("./types").ThemeDefinition[];
+    };
+};
+export type { MokkunSchema, ScreenDefinition, BuiltInThemeId };
+export { Textarea, createTextarea, type TextareaState, type TextareaCallbacks, type TextareaConfig, } from './renderer/components/textarea';
+export { Combobox, type ComboboxOption, type ComboboxConfig, type ComboboxState, type ComboboxCallbacks, } from './renderer/components';

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

@@ -0,0 +1,114 @@
+/**
+ * Mokkun - File Loader Module
+ * YAMLファイルの読み込み機能を提供
+ */
+import type { MokkunSchema } from '../types/schema';
+import type { ParseError } from '../parser/yaml-parser';
+/**
+ * ファイル読み込みエラーの種類
+ */
+export type FileLoadErrorType = 'INVALID_FILE_TYPE' | 'FILE_READ_ERROR' | 'FETCH_ERROR' | 'YAML_PARSE_ERROR' | 'NETWORK_ERROR';
+/**
+ * ファイル読み込みエラー
+ */
+export interface FileLoadError {
+    type: FileLoadErrorType;
+    message: string;
+    details?: string;
+    parseErrors?: ParseError[];
+}
+/**
+ * ファイル読み込み成功結果
+ */
+export interface FileLoadSuccess {
+    success: true;
+    schema: MokkunSchema;
+    fileName: string;
+    source: 'file' | 'url' | 'drop';
+    /** 読み込んだ YAML の原文（コメント・順序を保持） */
+    content: string;
+}
+/**
+ * ファイル読み込み失敗結果
+ */
+export interface FileLoadFailure {
+    success: false;
+    error: FileLoadError;
+}
+/**
+ * ファイル読み込み結果
+ */
+export type FileLoadResult = FileLoadSuccess | FileLoadFailure;
+/**
+ * ファイル読み込みコールバック
+ */
+export type FileLoadCallback = (result: FileLoadResult) => void;
+/**
+ * ドロップゾーンオプション
+ */
+export interface DropZoneOptions {
+    element: HTMLElement;
+    onLoad: FileLoadCallback;
+    onDragOver?: () => void;
+    onDragLeave?: () => void;
+    multiple?: boolean;
+}
+/**
+ * ファイル選択オプション
+ */
+export interface FileSelectOptions {
+    onLoad: FileLoadCallback;
+    multiple?: boolean;
+}
+/**
+ * ファイル名が許可された拡張子かチェック
+ */
+export declare function isValidFileName(fileName: string): boolean;
+/**
+ * ファイルタイプが許可されているかチェック
+ */
+export declare function isValidFileType(file: File): boolean;
+/**
+ * FileReaderでファイルを読み込み
+ */
+export declare function readFile(file: File, source: 'file' | 'drop'): Promise<FileLoadResult>;
+/**
+ * 複数ファイルを読み込み
+ */
+export declare function readFiles(files: FileList | File[], source: 'file' | 'drop'): Promise<FileLoadResult[]>;
+/**
+ * URLからYAMLファイルを読み込み
+ */
+export declare function loadFromUrl(url: string): Promise<FileLoadResult>;
+/**
+ * URLパラメータからYAMLパスを取得
+ */
+export declare function getYamlUrlFromParams(): string | null;
+/**
+ * URLパラメータで指定されたYAMLを読み込み
+ */
+export declare function loadFromUrlParams(): Promise<FileLoadResult | null>;
+/**
+ * ファイル選択input要素を作成
+ */
+export declare function createFileInput(options: FileSelectOptions): HTMLInputElement;
+/**
+ * ファイル選択ダイアログを開く
+ */
+export declare function openFileDialog(options: FileSelectOptions): void;
+/**
+ * ドロップゾーンをセットアップ
+ */
+export declare function setupDropZone(options: DropZoneOptions): () => void;
+/**
+ * エラーをフォーマットして表示用文字列に変換
+ */
+export declare function formatFileLoadError(error: FileLoadError): string;
+/**
+ * ファイル読み込みUIを生成
+ */
+export declare function renderFileLoaderUI(): string;
+/**
+ * ファイルローダーUIにイベントをアタッチ
+ */
+export declare function attachFileLoaderEvents(container: HTMLElement, onLoad: FileLoadCallback): () => void;

package/dist/types/loader/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Loader exports
+ */
+export * from './file-loader';

package/dist/types/parser/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Parser exports
+ */
+export * from './yaml-parser';

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/parser/yaml-parser.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Mokkun YAML Parser
+ * YAMLテキストを型安全にパースする
+ */
+import type { MokkunSchema, ScreenDefinition, InputField, InputFieldType, CommonComponent, ValidationRule } from '../types/schema';
+/**
+ * パースエラーの種類
+ */
+export type ParseErrorType = 'YAML_SYNTAX_ERROR' | 'SCHEMA_VALIDATION_ERROR' | 'MISSING_REQUIRED_FIELD' | 'INVALID_FIELD_TYPE' | 'INVALID_VALUE';
+/**
+ * パースエラー
+ */
+export interface ParseError {
+    type: ParseErrorType;
+    message: string;
+    path?: string;
+    line?: number;
+    column?: number;
+}
+/**
+ * パース結果
+ */
+export type ParseResult<T> = {
+    success: true;
+    data: T;
+} | {
+    success: false;
+    errors: ParseError[];
+};
+export declare const VALID_FIELD_TYPES: InputFieldType[];
+/**
+ * YAMLテキストをパースしてMokkunSchemaに変換
+ */
+export declare function parseYaml(yamlText: string): ParseResult<MokkunSchema>;
+/**
+ * パースエラーを整形して文字列に変換
+ */
+export declare function formatParseErrors(errors: ParseError[]): string;
+/**
+ * 画面定義を取得
+ */
+export declare function getScreen(schema: MokkunSchema, screenName: string): ScreenDefinition | undefined;
+/**
+ * 全ての画面名を取得
+ */
+export declare function getScreenNames(schema: MokkunSchema): string[];
+/**
+ * フィールドをIDで検索
+ */
+export declare function findFieldById(fields: InputField[], fieldId: string): InputField | undefined;
+/**
+ * 共通コンポーネントを取得
+ */
+export declare function getCommonComponent(schema: MokkunSchema, componentName: string): CommonComponent | undefined;
+/**
+ * バリデーションルールを取得
+ */
+export declare function getValidationRule(schema: MokkunSchema, ruleName: string): ValidationRule | undefined;

package/dist/types/renderer/action-handler.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Action Handler
+ * アクションボタンのイベント処理（確認ダイアログ統合）
+ */
+import { DeleteConfirmDialog, type DeleteConfirmDialogConfig, type DependencyInfo } from './components/delete-confirm-dialog';
+/**
+ * アクションハンドラーのコールバック
+ */
+export interface ActionHandlerCallbacks {
+    /** submit アクション実行時 */
+    onSubmit?: (actionId: string, url?: string, method?: string) => void;
+    /** navigate アクション実行時 */
+    onNavigate?: (actionId: string, to: string) => void;
+    /** custom アクション実行時 */
+    onCustom?: (actionId: string, handler: string) => void;
+    /** reset アクション実行時 */
+    onReset?: (actionId: string) => void;
+    /** アクションがキャンセルされた時 */
+    onCancel?: (actionId: string) => void;
+}
+/**
+ * 削除確認ダイアログの拡張設定（YAMLから取得する追加情報）
+ */
+export interface DeleteConfirmExtendedConfig {
+    /** 依存データを取得する関数 */
+    getDependencies?: () => DependencyInfo[] | Promise<DependencyInfo[]>;
+    /** 削除対象名を取得する関数 */
+    getTargetName?: () => string;
+    /** 削除対象タイプ */
+    targetType?: string;
+    /** 警告メッセージ */
+    warningMessage?: string;
+}
+/**
+ * アクションハンドラー
+ * ボタンクリック時の処理と確認ダイアログの表示を管理
+ */
+export declare class ActionHandler {
+    private container;
+    private callbacks;
+    private deleteConfirmConfigs;
+    private boundClickHandler;
+    constructor(container: HTMLElement, callbacks?: ActionHandlerCallbacks, deleteConfirmConfigs?: Map<string, DeleteConfirmExtendedConfig>);
+    /**
+     * イベントリスナーを設定
+     */
+    attach(): void;
+    /**
+     * イベントリスナーを削除
+     */
+    detach(): void;
+    /**
+     * 削除確認の設定を登録
+     */
+    registerDeleteConfirmConfig(actionId: string, config: DeleteConfirmExtendedConfig): void;
+    /**
+     * クリックイベントハンドラー
+     */
+    private handleClick;
+    /**
+     * 確認ダイアログを表示
+     */
+    private showConfirmDialog;
+    /**
+     * アクションを実行
+     */
+    private executeAction;
+}
+/**
+ * コンテナにアクションハンドラーをアタッチ
+ */
+export declare function attachActionHandler(container: HTMLElement, callbacks?: ActionHandlerCallbacks, deleteConfirmConfigs?: Map<string, DeleteConfirmExtendedConfig>): ActionHandler;
+/**
+ * 簡易的な確認ダイアログを表示（スタンドアロン使用）
+ */
+export declare function showDeleteConfirmDialog(config: DeleteConfirmDialogConfig, onConfirm: () => void, onCancel?: () => void): DeleteConfirmDialog;

package/dist/types/renderer/components/accordion-panel.d.ts

@@ -0,0 +1,144 @@
+/**
+ * AccordionPanel Component
+ * 折りたたみパネルコンポーネント
+ *
+ *
+ * - 複数パネルの同時開閉制御（単一/複数展開モード）
+ * - 開閉アニメーション
+ * - アイコン付きヘッダー
+ * - デフォルト展開状態の設定
+ * - キーボード操作対応
+ * - アクセシビリティ対応（ARIA属性）
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * アコーディオンアイテムの定義
+ */
+export interface AccordionItem {
+    /** 一意な識別子 */
+    name: string;
+    /** ヘッダーテキスト */
+    title: string;
+    /** ヘッダーアイコン（オプション） */
+    icon?: string;
+    /** コンテンツ（HTML文字列またはHTMLElement） */
+    content: string | HTMLElement;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * アイコンの配置位置
+ */
+export type IconPosition = 'left' | 'right';
+/**
+ * 見出しタイプ
+ */
+export type HeadingType = 'sectionTitle' | 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle';
+/**
+ * アコーディオンパネルの状態
+ */
+export interface AccordionPanelState {
+    /** 展開中のパネル名リスト */
+    expandedItems: string[];
+    /** フォーカスされているアイテムのインデックス */
+    focusedIndex: number;
+}
+/**
+ * アコーディオンパネルのコールバック
+ */
+export interface AccordionPanelCallbacks {
+    /** パネル展開時 */
+    onExpand?: (name: string) => void;
+    /** パネル折りたたみ時 */
+    onCollapse?: (name: string) => void;
+    /** 展開状態変更時 */
+    onChange?: (expandedItems: string[]) => void;
+}
+/**
+ * アコーディオンパネルの設定
+ */
+export interface AccordionPanelConfig {
+    /** アコーディオンアイテム */
+    items: AccordionItem[];
+    /** 複数パネル同時展開を許可（デフォルト: true） */
+    expandableMultiply?: boolean;
+    /** デフォルトで展開するパネル名のリスト */
+    defaultExpanded?: string[];
+    /** アイコンの配置位置（デフォルト: left） */
+    iconPosition?: IconPosition;
+    /** 見出しタイプ（デフォルト: blockTitle） */
+    headingType?: HeadingType;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+}
+/**
+ * アコーディオンパネルコンポーネント
+ */
+export declare class AccordionPanel {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private itemElements;
+    constructor(container: HTMLElement, config: AccordionPanelConfig, callbacks?: AccordionPanelCallbacks);
+    /**
+     * アコーディオンパネルをレンダリング
+     */
+    render(): void;
+    /**
+     * パネルを展開
+     */
+    expand(name: string): void;
+    /**
+     * パネルを折りたたむ
+     */
+    collapse(name: string): void;
+    /**
+     * パネルの展開/折りたたみを切り替え
+     */
+    toggle(name: string): void;
+    /**
+     * すべてのパネルを展開
+     */
+    expandAll(): void;
+    /**
+     * すべてのパネルを折りたたむ
+     */
+    collapseAll(): void;
+    /**
+     * パネルの展開状態を確認
+     */
+    isExpanded(name: string): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): AccordionPanelState;
+    /**
+     * アイテムを更新
+     */
+    setItems(items: AccordionItem[]): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private createInitialState;
+    private renderItem;
+    private renderTrigger;
+    private renderIcon;
+    private renderContent;
+    private updateItemState;
+    private attachKeyboardEvents;
+    private focusNextItem;
+    private focusPreviousItem;
+    private focusFirstItem;
+    private focusLastItem;
+    private focusItem;
+    static renderField(field: InputField): string;
+}
+/**
+ * アコーディオンパネルを作成
+ */
+export declare function createAccordionPanel(container: HTMLElement, config: AccordionPanelConfig, callbacks?: AccordionPanelCallbacks): AccordionPanel;

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

@@ -0,0 +1,183 @@
+/**
+ * Action Button Group Component
+ * アクションボタングループコンポーネント
+ *
+ * 複数のアクションボタンを適切に配置するコンポーネント
+ */
+import type { Action, ConfirmConfig } from '../../types/schema';
+/**
+ * アクションボタンの定義
+ */
+export interface ActionButton {
+    /** ボタンID */
+    id: string;
+    /** ボタンタイプ */
+    type: 'submit' | 'navigate' | 'custom' | 'reset';
+    /** ラベル */
+    label: string;
+    /** アイコン（オプション） */
+    icon?: string;
+    /** スタイル */
+    style?: 'primary' | 'secondary' | 'danger' | 'link';
+    /** 無効化 */
+    disabled?: boolean;
+    /** 遷移先（navigate時） */
+    to?: string;
+    /** カスタムハンドラー名（custom時） */
+    handler?: string;
+    /** 確認ダイアログ設定 */
+    confirm?: ConfirmConfig;
+}
+/**
+ * ボタン配置
+ */
+export type ButtonAlignment = 'start' | 'center' | 'end' | 'spread';
+/**
+ * ActionButtonGroupの設定
+ */
+export interface ActionButtonGroupConfig {
+    /** ボタン定義 */
+    buttons: ActionButton[];
+    /** ボタン配置 */
+    alignment?: ButtonAlignment;
+    /** ボタン間のギャップ */
+    gap?: string;
+    /** モバイルでスタック表示 */
+    stackOnMobile?: boolean;
+    /** 表示可能な最大ボタン数（超過分はオーバーフローメニュー） */
+    maxVisibleButtons?: number;
+}
+/**
+ * ActionButtonGroupの状態
+ */
+export interface ActionButtonGroupState {
+    /** ボタン定義 */
+    buttons: ActionButton[];
+    /** ボタン配置 */
+    alignment: ButtonAlignment;
+    /** ボタン間のギャップ */
+    gap: string;
+    /** モバイルでスタック表示 */
+    stackOnMobile: boolean;
+    /** 表示可能な最大ボタン数 */
+    maxVisibleButtons?: number;
+    /** ローディング中のボタンID */
+    loadingButtons: Set<string>;
+    /** オーバーフローメニューが開いているか */
+    overflowMenuOpen: boolean;
+}
+/**
+ * ActionButtonGroupのコールバック
+ */
+export interface ActionButtonGroupCallbacks {
+    /** ボタンクリック時 */
+    onClick?: (buttonId: string, state: ActionButtonGroupState) => void;
+    /** Submit時 */
+    onSubmit?: (buttonId: string, state: ActionButtonGroupState) => void;
+    /** Navigate時 */
+    onNavigate?: (to: string, state: ActionButtonGroupState) => void;
+    /** Custom時 */
+    onCustom?: (handler: string, state: ActionButtonGroupState) => void;
+    /** 確認ダイアログ表示時（trueを返すと処理続行） */
+    onConfirm?: (config: ConfirmConfig, state: ActionButtonGroupState) => Promise<boolean>;
+}
+/**
+ * アクションボタングループコンポーネント
+ */
+export declare class ActionButtonGroup {
+    private config;
+    private container;
+    private callbacks;
+    private state;
+    private groupElement;
+    private overflowMenuElement;
+    constructor(config: ActionButtonGroupConfig, container: HTMLElement, callbacks?: ActionButtonGroupCallbacks);
+    /**
+     * 初期状態を生成
+     */
+    private initializeState;
+    /**
+     * 現在の状態を取得（深いコピーを返す）
+     */
+    getState(): ActionButtonGroupState;
+    /**
+     * ボタンを取得（コピーを返す）
+     */
+    getButton(id: string): ActionButton | undefined;
+    /**
+     * Action配列からConfigを生成
+     */
+    static fromActions(actions: Action[]): ActionButtonGroupConfig;
+    /**
+     * レンダリング
+     */
+    render(): void;
+    /**
+     * グループのクラス名を生成
+     */
+    private buildGroupClassName;
+    /**
+     * ボタンを可視とオーバーフローに分割
+     */
+    private splitButtons;
+    /**
+     * 単一ボタンをレンダリング
+     */
+    private renderButton;
+    /**
+     * ボタンのクラス名を生成
+     */
+    private buildButtonClassName;
+    /**
+     * ボタンタイプを取得
+     */
+    private getButtonType;
+    /**
+     * オーバーフローメニューをレンダリング
+     */
+    private renderOverflowMenu;
+    /**
+     * ボタンクリック時の処理
+     */
+    private handleButtonClick;
+    /**
+     * ローディング状態を設定
+     */
+    setLoading(buttonId: string, loading: boolean): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(buttonId: string, disabled: boolean): void;
+    /**
+     * ボタンの状態を更新
+     */
+    private updateButtonState;
+    /**
+     * オーバーフローメニューを切り替え
+     */
+    toggleOverflowMenu(): void;
+    /**
+     * オーバーフローメニューを閉じる
+     */
+    closeOverflowMenu(): void;
+    /**
+     * オーバーフローメニューの状態を更新
+     */
+    private updateOverflowMenuState;
+    /**
+     * ボタンを追加
+     */
+    addButton(button: ActionButton, index?: number): void;
+    /**
+     * ボタンを削除
+     */
+    removeButton(buttonId: string): boolean;
+    /**
+     * ボタンを更新
+     */
+    updateButton(buttonId: string, updates: Partial<ActionButton>): boolean;
+    /**
+     * クリーンアップ
+     */
+    destroy(): void;
+}