mokkun 0.1.5 → 0.2.0

package/dist/types/renderer-v2/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * mokkun v2 レンダラー（DADS 準拠）
+ * v2 文書を旧フォーマットへ変換せずに直接描画する。
+ *
+ * - renderViewV2: HTML 文字列を返す（SSR / 静的出力）
+ * - mountViewV2: container に描画し、イベントを結線して V2Controller を返す
+ *
+ * 設計: docs/format-redesign/03-renderer-v2.md
+ */
+import type { MokkunV2Schema } from '../types/schema-v2';
+import { V2_VIEW_STATES, type V2RenderOptions, type V2ViewState } from './context';
+/** onAction の付随情報 */
+export interface V2ActionPayload {
+    /** Section.actions / list.bulkActions のとき、操作が属する Section の id */
+    section?: string;
+    /** list.bulkActions のとき、選択されている行の ID（行の `id`、なければ先頭列の値、なければ 1 始まりの通し番号） */
+    selectedRows?: string[];
+}
+export interface V2Callbacks {
+    /** グローバルナビ・パンくず・navigate アクションで遷移先 view を通知する */
+    onNavigate?: (view: string) => void;
+    /** navigate 以外のアクション（submit / custom / reset）を実行したとき。Section 内の操作は payload を持つ */
+    onAction?: (actionId: string, kind: string, payload?: V2ActionPayload) => void;
+    /** true のとき、遷移時に location.hash も書き換える（既定 false） */
+    syncHash?: boolean;
+}
+export interface V2Controller {
+    destroy(): void;
+}
+/**
+ * view を HTML 文字列にする。出力は `.mokkun-v2` ルート要素で包まれる。
+ * view 名が存在しないときは空のルートにエラー文を入れて返す。
+ */
+export declare function renderViewV2(schema: MokkunV2Schema, viewName: string, options?: V2RenderOptions): string;
+/**
+ * container に view を描画して振る舞いを結線する。
+ * destroy() でイベントを外し、DADS の CSS 注入も解除する（二重に呼んでも何も起きない）。
+ * 同じ container に destroy() せずに続けて mount すると、前の mount のイベントが残って重複して結線される。
+ * 作り直すときは先に前の V2Controller の destroy() を呼ぶこと。
+ */
+export declare function mountViewV2(container: HTMLElement, schema: MokkunV2Schema, viewName: string, callbacks?: V2Callbacks & V2RenderOptions, options?: V2RenderOptions): V2Controller;
+export { holdV2Styles } from './styles';
+export { V2_VIEW_STATES };
+export { availableStates, parseViewState, resolveRole, resolveViewState, V2_STATE_LABELS } from './view-state';
+export type { V2RenderOptions, V2ViewState };

package/dist/types/renderer-v2/list-cells.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 一覧のセル: 型ごとの表示（status = chip-label、date、number 右寄せ）、リンク（column.to）、入力欄（column.field）
+ */
+import type { ListColumnV2 } from '../types/schema-v2';
+import { type ListRow } from './list-data';
+export declare function renderCell(col: ListColumnV2, row: ListRow, index: number, base: string): string;

package/dist/types/renderer-v2/list-data.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 一覧（kind: list）の行データと、セルの型ごとの値の整形
+ * 行は list.rows（代表行）が優先。なければ列の id / ラベル / type からダミーを作る。
+ */
+import type { ListColumnV2, ListV2 } from '../types/schema-v2';
+import type { ViewContext } from './context';
+export type CellKind = 'id' | 'date' | 'number' | 'status' | 'text';
+/** 列の種類。type があればそれに従い、なければ id / ラベルから推測する（従来どおり） */
+export declare function columnKind(col: ListColumnV2): CellKind;
+/**
+ * 状態列のダミー値に使うラベル。同じ view の status / select / radio などの選択肢から借りる
+ * （項目 id が列 id と同じか、列 id を含むもの。「すべて」は除く）。無ければ undefined
+ */
+export declare function statusLabelsFor(col: ListColumnV2, ctx: ViewContext): string[] | undefined;
+/** 列の id / ラベルから推測したダミー値 */
+export declare function dummyCell(col: ListColumnV2, row: number, ctx?: ViewContext): string;
+export interface ListRow {
+    /** 行 ID。選択行の payload（selectedRows）と入力欄の name に使う。一覧の中で一意 */
+    id: string;
+    values: Record<string, unknown>;
+    /** 1 ページ目に収まらない行（rows と pageSize があるとき。並べ替えのあとで表示を決め直す） */
+    pageHidden: boolean;
+}
+/**
+ * 行 ID を一意にする。空のキーと重複したキーには `#<行の添字（0 始まり）>` を付ける
+ * （付けたあとも既存のキーと重なるなら、重ならなくなるまで `#` を足す）
+ */
+export declare function uniqueRowKeys(keys: string[]): string[];
+/** 表示する行。empty 状態では 0 行。rows があればそれ（pageSize があれば 2 ページ目以降は pageHidden）、なければダミー行 */
+export declare function listRows(list: ListV2, ctx: ViewContext): {
+    rows: ListRow[];
+    total: number;
+    given: boolean;
+};
+/** 日付を「2026年11月7日」にする。YYYY-MM は「2026年11月」。解釈できない値はそのまま */
+export declare function formatDateCell(value: unknown): string;
+/** 数値セル: 数値（と数字だけの文字列）は桁区切りにする。単位付きの文字列はそのまま */
+export declare function formatNumberCell(value: unknown): string;
+/**
+ * 状態ラベル → チップの色（03-renderer-v2.md の表と同じ。上から順に最初に当たったものを使う）
+ *
+ * | 順 | 当たるラベル | 色 |
+ * |---|---|---|
+ * | 1 | 不承認・不承諾・非承認・不可・却下 | error（red） |
+ * | 2 | 未〜・不〜・非〜で始まる（未完了・不備）、〜予定、〜なし で終わる | neutral（gray） |
+ * | 3 | 〜待ち で終わる（承認待ち・キャンセル待ち） | warning（yellow） |
+ * | 4 | 間近・保留・注意・期限・差戻 | warning（yellow） |
+ * | 5 | 要確認・要対応・エラー・欠品・失敗・取下・無効・廃番 | error（red） |
+ * | 6 | 〜済（対応済み・送信済み・受付済）・完了・承認・内定・有効・適正・販売中・成功・受理 | success（green） |
+ * | 7 | 処理中・審査中・確認中・準備中・対応中・配送中・進行中 | info（light-blue） |
+ * | 8 | それ以外（キャンセル・受付・下書きなど） | neutral（gray） |
+ */
+export declare function statusColor(label: string): string;

package/dist/types/renderer-v2/mount-parts.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 部品ごとの小さな振る舞い: switch / file-upload / table の並べ替え / tab / submenu / dialog
+ */
+/** switch の状態を aria-checked と、フォーム送信用の hidden input の両方へ反映する */
+export declare function setSwitch(button: HTMLElement, on: boolean): void;
+export declare function toggleSwitch(button: HTMLElement): void;
+/** 選択済みファイルを一覧に反映する（DADS の file-upload JS の最小相当） */
+export declare function updateFileList(input: HTMLInputElement): void;
+/** 並べ替えヘッダーのクリック。none → ascending → descending → ascending … */
+export declare function sortTable(button: HTMLElement): void;
+/** rows と pageSize があるときは、並べ替えた全行の先頭 pageSize 件だけを表示する（2 ページ目以降は hidden） */
+export declare function applyPage(list: HTMLElement | null): void;
+export declare function selectTab(tab: HTMLElement): void;
+/** 矢印キー / Home / End で隣のタブへ */
+export declare function moveTabFocus(tab: HTMLElement, key: string): boolean;
+export declare function setSubmenu(button: HTMLElement, open: boolean): void;
+export declare function closeAllSubmenus(root: ParentNode): void;
+export declare function openDialog(dialog: HTMLDialogElement): void;
+export declare function closeDialog(dialog: HTMLDialogElement): void;

package/dist/types/renderer-v2/mount-repeat.d.ts

@@ -0,0 +1,8 @@
+/**
+ * repeatable: グループの追加・削除、添字の再採番、min / max の反映
+ */
+export declare function syncAllRepeatables(root: ParentNode): void;
+/** クリックされたボタンが追加 / 削除なら処理して true を返す */
+export declare function handleRepeatClick(target: Element): boolean;
+/** フォームのリセット後: 繰り返しグループを min 件に戻す（超過分は削除） */
+export declare function resetRepeatables(root: ParentNode): void;

package/dist/types/renderer-v2/mount-section.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Section 単位の操作: reset（その Section の項目だけ初期値に戻す）、一括操作が使う選択行の収集
+ */
+/** 行の選択チェックボックス／ラジオで選ばれている行 ID（list.bulkActions の payload.selectedRows） */
+export declare function selectedRowIds(root: HTMLElement, sectionId: string | undefined): string[];
+/**
+ * その Section の入力欄だけを初期値に戻す（ネイティブの form.reset() はフォーム全体を戻してしまう）。
+ * 繰り返しは min 件に戻し、switch とファイル一覧も追随させる。
+ */
+export declare function resetSection(root: HTMLElement, sectionId: string | undefined): void;

package/dist/types/renderer-v2/mount-visibility.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 条件: 参照先項目の現在値で、visibleWhen（項目ラッパー／セクションの hidden）と
+ * requiredWhen（必須／任意の表示と required 属性）を切り替える
+ */
+import { type Token } from './condition';
+/** 項目の現在値。複数選択（data-multiple）は選択値の配列、単一 checkbox / switch は 'true' / 'false' */
+export declare function readValue(field: HTMLElement): Token;
+/** root 内の [data-visible-when] をすべて評価する */
+export declare function evaluateVisibility(root: ParentNode): void;
+/** root 内の [data-required-when] をすべて評価し、「※必須」「※任意」と required 属性を切り替える */
+export declare function evaluateRequired(root: ParentNode): void;
+/** visibleWhen と requiredWhen を評価する */
+export declare function evaluateConditions(root: ParentNode): void;

package/dist/types/renderer-v2/mount.d.ts

@@ -0,0 +1,9 @@
+/**
+ * mountViewV2 の振る舞い結線（イベント委譲）
+ * - 遷移: グローバルナビ・パンくず・navigate アクション → callbacks.onNavigate
+ * - 確認ダイアログ: アクションボタンで開き、確定ボタンでアクションを実行
+ * - visibleWhen / repeatable / accordion 以外の DADS 部品の最小限の JS
+ */
+import type { V2Callbacks } from './index';
+/** イベントを結線する。戻り値で解除 */
+export declare function attachV2Behavior(root: HTMLElement, callbacks: V2Callbacks): () => void;

package/dist/types/renderer-v2/role.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ロール指定（Action.role / NavGroup.role / Notice.role）の評価
+ */
+import type { RoleSpecV2 } from '../types/schema-v2';
+/**
+ * 現在のロールで表示するか。role の省略は全ロール、現在のロールが未選択なら常に表示する
+ * （ロールを選ばない既存の挙動を変えない）。
+ */
+export declare function visibleForRole(role: RoleSpecV2 | undefined, current: string | undefined): boolean;
+/** ローカル日付 YYYY-MM-DD */
+export declare function isoDate(date: Date): string;
+/** until が今日より前なら期限切れ（当日までは表示する） */
+export declare function isExpired(until: string | undefined, today: string): boolean;
+/** 今日（YYYY-MM-DD）。YYYY-MM-DD の文字列か有効な Date だけ受け付け、それ以外は実行時の日付にする */
+export declare function resolveToday(today: Date | string | undefined): string;

package/dist/types/renderer-v2/section-fields.d.ts

@@ -0,0 +1,11 @@
+/**
+ * kind: form の項目グリッドと repeatable
+ */
+import type { SectionV2 } from '../types/schema-v2';
+import { type ViewContext } from './context';
+/** 添字付きの DOM id / name の区切り。mount.ts が繰り返しの再採番に使う */
+export declare const GROUP_SEP = "__";
+/** 項目グリッド。group を渡すと繰り返しグループ内（id / name に添字を付ける） */
+export declare function renderFieldGrid(section: SectionV2, ctx: ViewContext, group?: number): string;
+/** 繰り返し: min 件を初期表示し、追加用に <template> を持つ */
+export declare function renderRepeatable(section: SectionV2, ctx: ViewContext): string;

package/dist/types/renderer-v2/section-list.d.ts

@@ -0,0 +1,8 @@
+/**
+ * kind: list → table（ソート可能列は sortable-header）+ page-navigation
+ * 行は list.rows（代表行）があればそれを、なければ list-data.ts のダミー（3 行）
+ * 検索と bulkActions（選択した行への操作）は表の上の同じ行に置く
+ */
+import type { SectionV2 } from '../types/schema-v2';
+import { type ViewContext } from './context';
+export declare function renderList(section: SectionV2, ctx: ViewContext): string;

package/dist/types/renderer-v2/section-readonly.d.ts

@@ -0,0 +1,8 @@
+/**
+ * kind: readonly / summary → description-list（term = ラベル、description = 値）
+ */
+import type { FieldV2, SectionV2 } from '../types/schema-v2';
+import type { ViewContext } from './context';
+/** 表示値（options があればラベルに置換、値なしは -） */
+export declare function displayText(f: FieldV2): string;
+export declare function renderReadonly(section: SectionV2, ctx: ViewContext): string;

package/dist/types/renderer-v2/section.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Section 層: kind / reveal / repeatable の出し分け
+ *
+ * - reveal: collapsed が 1 つだけ → DADS disclosure（見出しはサマリー自身）
+ * - collapsed が連続 → 1 つの積み重ねた DADS accordion（各サマリー = セクション名）
+ * - visibleWhen はセクション要素自身に付ける（見出しごと隠れる）
+ */
+import type { SectionV2 } from '../types/schema-v2';
+import { type ViewContext } from './context';
+/** Section の DOM id（toc・タブのリンク先） */
+export declare function sectionDomId(ctx: ViewContext, section: SectionV2): string;
+/** 通常（open）のセクション */
+export declare function renderSection(section: SectionV2, ctx: ViewContext): string;
+/** セクション列を描画する。連続する collapsed は 1 つの accordion にまとめ、1 つだけなら disclosure */
+export declare function renderSections(sections: SectionV2[], ctx: ViewContext): string;

package/dist/types/renderer-v2/styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DADS の CSS を v2 描画中だけ document に差し込む。
+ *
+ * DADS の global.css は html / a / :focus-visible などの要素セレクタを含むため、
+ * ライブラリの CSS（mokkun.css）に静的に含めると v1 画面まで再スタイルされる。
+ * そのため ?inline で文字列として取り込み、v2 を描画している間だけ <style> として挿入する。
+ */
+/**
+ * スタイルを 1 つ保持する。戻り値の release で解放する（二重に呼んでも 1 回分しか減らない）。
+ * 画面遷移で「古い view を destroy → 新しい view を mount」する間に <style> が外れて付け直されないよう、
+ * 呼び出し側は destroy の前に hold し、mount の後に release する。
+ */
+export declare function holdV2Styles(): () => void;

package/dist/types/renderer-v2/util.d.ts

@@ -0,0 +1,28 @@
+/**
+ * v2 レンダラー共通ユーティリティ
+ * HTML 文字列を組み立てるための最小限のヘルパー（DOM に依存しない）
+ */
+/**
+ * ユーザー由来のテキストを HTML（要素内・属性値）に埋め込めるようエスケープする
+ */
+export declare function esc(value: unknown): string;
+type AttrValue = string | number | boolean | null | undefined;
+/**
+ * 属性文字列を組み立てる。true は値なし属性、false / null / undefined は出力しない。
+ * 先頭に空白を含むため、そのままタグ名の直後に連結できる。
+ */
+export declare function attrs(map: Record<string, AttrValue>): string;
+/** 値を比較用の文字列にする（YAML の数値・真偽値と DOM の文字列値を揃える） */
+export declare function str(value: unknown): string;
+/** props から文字列を取り出す */
+export declare function propString(props: Record<string, unknown> | undefined, key: string): string | undefined;
+/** props から有限の数値を取り出す */
+export declare function propNumber(props: Record<string, unknown> | undefined, key: string): number | undefined;
+/**
+ * リンク・画像の URL を http / https / mailto に限る（javascript: などは '#' に置き換える）。
+ * 相対 URL は許可する。
+ */
+export declare function safeUrl(url: unknown): string;
+/** props の配列から、指定キーが文字列のオブジェクトだけを取り出す */
+export declare function objectItems<T extends object>(value: unknown, requiredStringKey: string): T[];
+export {};

package/dist/types/renderer-v2/view-state.d.ts

@@ -0,0 +1,25 @@
+/**
+ * View の状態表示（ビューアーの「状態」切替）
+ * - 既定（normal）は状態バナーを出さない。success / error は選ばれた 1 つだけ、同時には出さない
+ * - loading は DADS の progress-indicator（スピナー）。フォームの代わりに出す
+ * - empty は一覧の空表示（section-list.ts）で扱う
+ */
+import type { MokkunV2Schema } from '../types/schema-v2';
+import { type V2ViewState, type ViewContext } from './context';
+/** states.success / error のバナー。選ばれた状態の分だけ出す */
+export declare function renderStates(ctx: ViewContext): string;
+/** 読み込み中（上流 progress-indicator の spinner-loop.html、stacked / 大）。不確定進捗なので data-indeterminate を静的に付ける */
+export declare function renderLoading(ctx: ViewContext): string;
+/** 状態の表示名（ビューアーの選択肢） */
+export declare const V2_STATE_LABELS: Record<V2ViewState, string>;
+/**
+ * view が選べる状態。normal は常に、success / error / loading は対応する states.* があるとき、
+ * empty は states.empty か、list.empty を持つ一覧があるとき（一覧の空文言は list.empty が正）
+ */
+export declare function availableStates(schema: MokkunV2Schema, viewName: string): V2ViewState[];
+/** URL パラメータなどの文字列を状態にする（不正は normal） */
+export declare function parseViewState(value: unknown): V2ViewState;
+/** view で選べない状態なら normal に戻す（不正な値も normal） */
+export declare function resolveViewState(schema: MokkunV2Schema, viewName: string, state: unknown): V2ViewState;
+/** app.roles にあるロールだけ（それ以外は未選択＝すべて） */
+export declare function resolveRole(schema: MokkunV2Schema, role: unknown): string | undefined;

package/dist/types/renderer-v2/view.d.ts

@@ -0,0 +1,8 @@
+/**
+ * View 層: 見出し、ゴール、手順ナビ、状態バナー、アクション、レイアウト（stack / tabs / sectioned）
+ */
+import { type ViewContext } from './context';
+/** flow の手順ナビ（step-navigation, horizontal）。前の step は completed、現在の step は reached */
+export declare function renderStepNavigation(ctx: ViewContext): string;
+/** View 本体（main の中身）: パンくずは app-shell 側で前置する */
+export declare function renderViewBody(ctx: ViewContext): string;

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,7 @@
+/**
+ * Type exports
+ */
+export * from './schema';
+export * from './theme';
+export * from './field-renderable';
+export * from './schema-v2';