mokkun 0.1.5 → 0.1.6

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

@@ -0,0 +1,53 @@
+/**
+ * Screen Renderer
+ * 画面全体のレンダリングを担当
+ */
+import type { ScreenDefinition } from '../types/schema';
+import { AppHeader } from './components/app-header';
+import { AppNavi } from './components/app-navi';
+/**
+ * ウィザード画面をレンダリング
+ */
+export declare function renderWizardScreen(screen: ScreenDefinition, currentStepIndex?: number): string;
+/**
+ * 通常画面をレンダリング（shell レイアウト固定）
+ */
+export declare function renderScreen(screen: ScreenDefinition): string;
+/**
+ * 画面コントローラーインターフェース
+ */
+export interface ScreenController {
+    /** AppHeaderインスタンス（存在する場合） */
+    appHeader?: AppHeader;
+    /** AppNaviインスタンス（存在する場合） */
+    appNavi?: AppNavi;
+    /** 全コンポーネントを破棄 */
+    destroy: () => void;
+}
+/**
+ * 画面をDOMにマウント
+ */
+export declare function mountScreen(container: HTMLElement, screen: ScreenDefinition): ScreenController;
+/**
+ * AppHeader / AppNavi のみをマウントする（renderScreen の文字列出力を使う呼び出し側用）
+ */
+export interface AppChromeController {
+    appHeader?: AppHeader;
+    appNavi?: AppNavi;
+    destroy: () => void;
+}
+export declare function mountAppChrome(container: HTMLElement, screen: ScreenDefinition): AppChromeController;
+/**
+ * ウィザード画面をDOMにマウント（ステップ管理付き）
+ */
+export declare function mountWizardScreen(container: HTMLElement, screen: ScreenDefinition, initialStep?: number): WizardController;
+/**
+ * ウィザードコントローラーインターフェース
+ */
+export interface WizardController {
+    getCurrentStep: () => number;
+    destroy: () => void;
+    goToStep: (step: number) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+}

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

@@ -0,0 +1,29 @@
+/**
+ * DOM Utilities
+ * DOM操作のユーティリティ関数
+ */
+/**
+ * 要素を作成する
+ */
+export declare function createElement<K extends keyof HTMLElementTagNameMap>(tag: K, options?: {
+    className?: string;
+    attributes?: Record<string, string>;
+    textContent?: string;
+    children?: (HTMLElement | string)[];
+}): HTMLElementTagNameMap[K];
+/**
+ * 要素をクリアする
+ */
+export declare function clearElement(element: HTMLElement): void;
+/**
+ * 一意なIDを生成する
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * HTMLテキストをエスケープする
+ */
+export declare function escapeHtml(text: string): string;
+/**
+ * タブIDを検証・サニタイズする
+ */
+export declare function sanitizeTabId(id: string): string;

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

@@ -0,0 +1,13 @@
+/**
+ * Dummy Data Generator
+ * リピーター用のダミーデータ自動生成
+ */
+import type { InputField } from '../../types';
+/**
+ * フィールドタイプに応じたダミーデータを生成
+ */
+export declare function generateDummyData(field: InputField, index?: number): unknown;
+/**
+ * リピーターアイテム用のダミーデータセットを生成
+ */
+export declare function generateRepeaterItemDummyData(itemFields: InputField[], itemIndex: number): Record<string, unknown>;

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

@@ -0,0 +1,90 @@
+/**
+ * Field Helper Utilities
+ * フォームフィールドレンダリング用の共有ヘルパー関数
+ */
+import type { InputField, SelectOption } from '../../types/schema';
+/**
+ * HTML特殊文字をエスケープ
+ *
+ * @param text - エスケープする文字列
+ * @returns エスケープされた文字列
+ */
+export declare function escapeHtml(text: string): string;
+/**
+ * SSR対応のHTMLエスケープ
+ * document が利用できない環境でも動作する
+ *
+ * @param text - エスケープする文字列
+ * @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生成
+ *
+ * @param field - 入力フィールド定義
+ * @param content - フィールドのコンテンツHTML
+ * @returns ラッパー付きのHTML文字列
+ */
+export declare function createFieldWrapper(field: InputField, content: string): string;
+/**
+ * 共通属性を生成
+ *
+ * @param field - 入力フィールド定義
+ * @returns 属性文字列
+ */
+export declare function getCommonAttributes(field: InputField): string;
+/**
+ * 選択肢の配列を取得（文字列参照は未対応）
+ *
+ * @param options - 選択肢配列または参照文字列
+ * @returns 選択肢の配列
+ */
+export declare function getOptions(options: SelectOption[] | string): SelectOption[];
+/**
+ * ファイルサイズをフォーマット
+ *
+ * @param bytes - バイト数
+ * @returns フォーマットされたサイズ文字列
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * MIMEタイプから表示名を取得
+ *
+ * @param mimeType - MIMEタイプ文字列
+ * @returns 表示用のフォーマット名
+ */
+export declare function formatMimeType(mimeType: string): string;
+/**
+ * レベルに基づくデフォルトサイズを取得
+ *
+ * @param level - 見出しレベル (1-6)
+ * @returns サイズバリアント
+ */
+export declare function getDefaultSizeForLevel(level: 1 | 2 | 3 | 4 | 5 | 6): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * 単位ラベルのマッピング
+ */
+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/renderer/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility Functions Export
+ */
+export { createElement, clearElement, generateId } from './dom';
+export { generateDummyData, generateRepeaterItemDummyData } from './dummy-data';
+export { escapeHtml, escapeHtmlSafe, createFieldWrapper, getCommonAttributes, getOptions, formatFileSize, formatMimeType, getDefaultSizeForLevel, unitLabels, } from './field-helpers';

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

@@ -0,0 +1,6 @@
+/**
+ * Theme module exports
+ */
+export { ThemeManager, themeManager, initializeTheme, applyTheme, getAvailableThemes, getCurrentTheme, onThemeChange, } from './theme-manager';
+export type { ThemeDefinition, ThemeConfig, ThemeCSSVariables, ThemeChangeEventDetail, BuiltInThemeId, } from '../types/theme';
+export { THEME_STORAGE_KEY, THEME_DATA_ATTRIBUTE, THEME_CHANGE_EVENT, } from '../types/theme';

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

@@ -0,0 +1,102 @@
+/**
+ * Mokkun Theme Manager
+ * テーマの読み込み、切り替え、保存を管理
+ */
+import type { ThemeDefinition, ThemeChangeEventDetail } from '../types/theme';
+/**
+ * Theme Manager class
+ */
+export declare class ThemeManager {
+    private themes;
+    private currentThemeId;
+    private config;
+    private customStyleElement;
+    constructor();
+    /**
+     * Initialize the theme manager
+     * Loads saved preference or applies default theme
+     */
+    initialize(): void;
+    /**
+     * Load theme configuration from YAML string
+     */
+    loadConfig(yamlContent: string): void;
+    /**
+     * Get all available themes
+     */
+    getAvailableThemes(): ThemeDefinition[];
+    /**
+     * Get current theme ID
+     */
+    getCurrentTheme(): string | null;
+    /**
+     * Get theme by ID
+     */
+    getTheme(id: string): ThemeDefinition | undefined;
+    /**
+     * Check if a theme exists
+     */
+    hasTheme(id: string): boolean;
+    /**
+     * Apply a theme by ID
+     */
+    applyTheme(themeId: string): boolean;
+    /**
+     * Apply custom CSS variables
+     */
+    private applyCustomVariables;
+    /**
+     * Remove custom CSS variables style element
+     */
+    private removeCustomVariables;
+    /**
+     * Register a custom theme
+     */
+    registerTheme(theme: ThemeDefinition): void;
+    /**
+     * Unregister a theme (only custom themes can be removed)
+     */
+    unregisterTheme(themeId: string): boolean;
+    /**
+     * Save theme preference to localStorage
+     */
+    private saveTheme;
+    /**
+     * Get saved theme from localStorage
+     */
+    getSavedTheme(): string | null;
+    /**
+     * Clear saved theme preference
+     */
+    clearSavedTheme(): void;
+    /**
+     * Dispatch theme change event
+     */
+    private dispatchThemeChangeEvent;
+    /**
+     * Subscribe to theme changes
+     */
+    onThemeChange(callback: (detail: ThemeChangeEventDetail) => void): () => void;
+    /**
+     * Get default theme ID
+     */
+    getDefaultTheme(): string;
+    /**
+     * Check if system prefers dark mode
+     */
+    prefersColorScheme(): 'light' | 'dark';
+    /**
+     * Apply system preference
+     */
+    applySystemPreference(): void;
+    /**
+     * Watch for system preference changes
+     */
+    watchSystemPreference(autoApply?: boolean): () => void;
+}
+export declare const themeManager: ThemeManager;
+export declare const initializeTheme: () => void;
+export declare const applyTheme: (id: string) => boolean;
+export declare const getAvailableThemes: () => ThemeDefinition[];
+export declare const getCurrentTheme: () => string | null;
+export declare const onThemeChange: (callback: (detail: ThemeChangeEventDetail) => void) => () => void;

package/dist/types/types/field-renderable.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Field Renderable Interface
+ * 静的renderFieldメソッドを持つコンポーネントの共通インターフェース
+ */
+import type { InputField } from './schema';
+/**
+ * 静的renderFieldメソッドを持つコンポーネントのインターフェース
+ *
+ * このインターフェースは、フォームフィールドをHTMLとしてレンダリングする
+ * 静的メソッドを持つコンポーネントクラスに実装されます。
+ *
+ * @template T - 対応するInputFieldの型（例: TextField, SelectField）
+ *
+ * @example
+ * ```typescript
+ * export class Input implements FieldRenderable<TextField> {
+ *   static renderField(field: TextField): string {
+ *     // HTML生成ロジック
+ *     return '<input type="text" ... />'
+ *   }
+ * }
+ * ```
+ */
+export interface FieldRenderable<T extends InputField = InputField> {
+    /**
+     * フィールド定義からHTMLを生成する静的メソッド
+     *
+     * @param field - フィールド定義オブジェクト
+     * @returns 生成されたHTML文字列
+     */
+    renderField(field: T): string;
+}
+/**
+ * FieldRenderableを実装するクラスの型
+ * staticメソッドを持つクラスの型チェックに使用
+ */
+export interface FieldRenderableClass<T extends InputField = InputField> {
+    new (...args: unknown[]): unknown;
+    renderField(field: T): string;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Type exports
+ */
+export * from './schema';
+export * from './theme';
+export * from './field-renderable';