@onjmin/dtm 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,628 @@
+/**
+ * オーディオ設定とSoundFont管理
+ * Audio Context初期化、SoundFont読み込み、ノート再生等
+ */
+/**
+ * Audio Context初期化
+ * DOMに依存しない純粋な音声設定
+ */
+declare function createAudioContext(): {
+    audioCtx: AudioContext;
+    gainNode: GainNode;
+    drumGainNode: GainNode;
+};
+/**
+ * オーディオレコーダーのセットアップ
+ */
+declare function setupRecorder(audioCtx: AudioContext, gainNode: GainNode, drumGainNode: GainNode): {
+    startRecording: () => void;
+    stopRecording: () => void;
+    getRecordedData: () => [Float32Array<ArrayBufferLike>[], Float32Array<ArrayBufferLike>[]];
+    isRecording: () => boolean;
+    clearRecordedData: () => void;
+};
+/**
+ * SoundFontリストの取得
+ */
+declare function fetchSoundFontList(ttl: string): Promise<string[]>;
+/**
+ * 楽器名からキーへのマッピングを構築
+ */
+declare function buildNameToKeyMapping(): Promise<Record<string, string>>;
+
+/**
+ * ドラム音源関連の設定
+ * ドラムキー値とドラムパターンを定義
+ */
+declare const DRUM_FONT = "FluidR3_GM_sf2_file";
+declare const DRUM_KEYS: {
+    readonly kick: 36;
+    readonly snare: 38;
+    readonly clap: 39;
+    readonly rimshot: 37;
+    readonly hihatClosed: 42;
+    readonly hihatPedal: 44;
+    readonly hihatOpen: 46;
+    readonly tomLow: 45;
+    readonly tomMid: 47;
+    readonly tomHigh: 50;
+    readonly crash: 49;
+    readonly ride: 51;
+    readonly splash: 55;
+    readonly tambourine: 54;
+};
+type DrumPattern = {
+    step: number;
+    pitch: number;
+    velocity: number;
+}[];
+declare const DRUM_PATTERNS: Record<string, DrumPattern>;
+
+type Note = {
+    id: number;
+    startStep: number;
+    durationSteps: number;
+    pitch: number;
+    velocity?: number;
+};
+type RenderConfig = {
+    stepsPerBar: number;
+    keyCount: number;
+    pitchRangeStart: number;
+    keyHeight: number;
+    stepWidth: number;
+};
+type CoreEventHandlers = {
+    onMMLGenerated: (mml: string) => void;
+    onNotesChanged: (notes: Note[]) => void;
+    onNoteClick?: (step: number, pitch: number, isErasing: boolean) => void;
+};
+type PreviewSoundCallback = (pitch: number, position: number) => void;
+type AddNoteOptions = {
+    noteLengthSteps: number;
+    velocity?: number;
+};
+type PianoRollOptions = {
+    mountTarget: HTMLElement;
+    width?: number;
+    height?: number;
+    config: RenderConfig;
+    noteLengthSteps?: number;
+    onPreviewSound?: PreviewSoundCallback;
+};
+type ToolMode = "pen" | "select" | "eraser";
+type TrackConfig = {
+    id: string;
+    name: string;
+    /** ノート描画色 [r, g, b] */
+    color: [number, number, number];
+    /** MMLチャンネル番号 (@n)。再生時のトラック識別にも使う */
+    instrument: number;
+    /** 0-127。velocity兼ボリューム（既存挙動を踏襲） */
+    volume: number;
+};
+type PlayNoteEvent = {
+    trackId: string;
+    pitch: number;
+    /** 元ノートのvelocity (0-127) */
+    velocity: number;
+    /** トラックvolume×velocityを反映した 0-1 程度の音量係数 */
+    volume: number;
+    /** 「今」からの相対秒。利用側は audioCtx.currentTime + when で発音する */
+    when: number;
+    /** 秒 */
+    duration: number;
+};
+type PlayDrumEvent = {
+    pitch: number;
+    /** 0-1 */
+    velocity: number;
+    /** 「今」からの相対秒 */
+    when: number;
+    /** 秒 */
+    duration: number;
+};
+type ParseChordFn = (str: string) => {
+    value: Iterable<number>;
+};
+type ParseChordsFn = (str: string, bpm: number) => Array<{
+    key: string;
+    chord: string;
+    when: number;
+    duration: number;
+}>;
+type ParseMidiFn = (bytes: Uint8Array) => unknown;
+type DawOptions = {
+    /** メロディックトラックのノート発音要求 */
+    onPlayNote?: (e: PlayNoteEvent) => void;
+    /** ドラムノート発音要求 */
+    onPlayDrum?: (e: PlayDrumEvent) => void;
+    /** 初回ユーザー操作時に呼ばれる（AudioContextのresume等に使う） */
+    onResumeAudio?: () => void | Promise<void>;
+    /** 再生の基準クロック秒。既定 performance.now()/1000。利用側は audioCtx.currentTime を返す */
+    getAudioTime?: () => number;
+    /** 録音ボタン押下（利用側のオーディオグラフに依存するため任意） */
+    onToggleRecord?: () => void;
+    parseChord?: ParseChordFn;
+    parseChords?: ParseChordsFn;
+    parseMidi?: ParseMidiFn;
+    /** トラック構成。既定は melody/submelody/bass/chord の4本 */
+    tracks?: TrackConfig[];
+    /** ドラムパターン辞書。既定は DRUM_PATTERNS */
+    drumPatterns?: Record<string, DrumPattern>;
+    defaultBpm?: number;
+    initialMML?: string;
+};
+type PlaybackState = "stopped" | "playing" | "paused";
+type DawInstance = {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    getMML: () => {
+        full: string;
+        minified: string;
+    };
+    loadMML: (mml: string) => void;
+    loadMIDI: (bytes: Uint8Array) => void;
+    exportMIDI: () => Blob;
+    setBpm: (bpm: number) => void;
+    getPlaybackState: () => PlaybackState;
+    destroy: () => void;
+};
+
+/**
+ * コード進行文字列を伴奏トラックのノート配置へ展開する。
+ *
+ * parseChord / parseChords は外部（rpgen3）実装を注入する想定。
+ * 旧 demo/index.html の applyChordProgression を移植・整理し、
+ * 実際のノート追加を行わず配置（placement）の配列を返す純関数にした。
+ */
+
+type ChordPatternType = "block" | "arpeggio" | "arpeggio-fast" | "offbeat" | "yatsume" | "alternating";
+type ChordPlacement = {
+    startStep: number;
+    pitch: number;
+    durationSteps: number;
+    velocity: number;
+};
+type ApplyChordOptions = {
+    chordStr: string;
+    patternType: ChordPatternType;
+    /** ルートのセミトーンシフト（0-11） */
+    rootShift: number;
+    bpm: number;
+    stepsPerBar: number;
+    parseChord: ParseChordFn;
+    parseChords: ParseChordsFn;
+};
+/**
+ * コード進行 → 伴奏ノート配置。
+ */
+declare const buildChordPlacements: (options: ApplyChordOptions) => ChordPlacement[];
+
+/**
+ * mountDAW — 1関数でマウントできるモバイルファーストDAWコンポーネント（Layer 2）。
+ *
+ * 発音は注入フック（onPlayNote / onPlayDrum）へ委譲し、ライブラリ自体は音を出さない。
+ * MIDI/コード解析も注入（parseMidi / parseChord / parseChords）。未注入なら該当UIを隠す。
+ */
+
+/** シンプルモード（4トラック）— 役割別に自動分類してMIDIを読み込む */
+declare const TRACKS_SIMPLE: TrackConfig[];
+/** 上級者モード（16トラック）— MIDIトラックを1:1で扱う */
+declare const TRACKS_ADVANCED: TrackConfig[];
+/**
+ * DAWコンポーネントをマウントする。
+ */
+declare const mountDAW: (target: HTMLElement, options?: DawOptions) => DawInstance;
+
+/**
+ * インラインSVGアイコン。外部アイコンフォント(MDI等)への依存を避けるため、
+ * 必要最小限のパスをライブラリ内に同梱する。
+ */
+type IconDef = {
+    d: string;
+    stroke?: boolean;
+};
+declare const ICONS: Record<string, IconDef>;
+/**
+ * アイコン名からSVG文字列を生成する。
+ */
+declare const icon: (name: keyof typeof ICONS | string, size?: number) => string;
+
+/**
+ * 楽器プリセット定義
+ * FluidR3_GM Instrument Presets
+ *
+ * 独自の価値観に基づくソート基準:
+ * 1. 汎用性 (Standard): どんな曲にも合う基本セット
+ * 2. 時代感 (Vibe): シンセやレトロなど特定の空気感
+ * 3. 世界観 (World): 特定の地域やファンタジー
+ * 4. 感情 (Atmosphere): アンビエントやシネマティック
+ */
+type InstrumentPreset = {
+    displayName: string;
+    description: string;
+    melody: string;
+    submelody: string;
+    bass: string;
+    chord: string;
+};
+declare const INSTRUMENT_PRESETS: Record<string, InstrumentPreset>;
+
+/**
+ * 操作履歴を管理するための双方向連結リスト
+ */
+declare class LinkedList<T> {
+    #private;
+    constructor();
+    /**
+     * 履歴を1つ追加
+     */
+    add(value: T): void;
+    /**
+     * 履歴を1つ戻す
+     */
+    undo(): T | null;
+    /**
+     * 履歴を1つ進める
+     */
+    redo(): T | null;
+    /**
+     * Undo可能かチェック（カーソル移動なし）
+     */
+    canUndo(): boolean;
+    /**
+     * Redo可能かチェック（カーソル移動なし）
+     */
+    canRedo(): boolean;
+}
+
+declare const PITCH_MAP: string[];
+/**
+ * ノートデータ管理とMML生成の責務を持つDOM非依存のコアロジック
+ */
+declare class MMLCore {
+    private notes;
+    private nextNoteId;
+    private handlers;
+    private volume;
+    private tempo;
+    private history;
+    private isUndoRedo;
+    isBatchOperation: boolean;
+    private lastHistorySnapshot;
+    private lastUndoTime;
+    private static readonly UNDO_DEBOUNCE_MS;
+    private toolMode;
+    constructor(handlers: CoreEventHandlers, volume?: number);
+    beginBatch(): void;
+    endBatch(): void;
+    saveHistory(): void;
+    private restoreHistory;
+    undo(): boolean;
+    redo(): boolean;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    setToolMode(mode: "pen" | "select" | "eraser"): void;
+    getToolMode(): "pen" | "select" | "eraser";
+    resetHistory(): void;
+    addHistoryOnce(): void;
+    clearNotesWithoutHistory(): void;
+    setLoadMode(mode: boolean): void;
+    /**
+     * 指定されたグリッド位置にノートを追加する操作
+     * @param step ステップ位置
+     * @param pitch ピッチ番号
+     * @param options ノート長などの設定
+     */
+    addNote(step: number, pitch: number, options: AddNoteOptions): void;
+    deleteNoteById(noteId: number): void;
+    private getMaxStep;
+    moveNote(noteId: number, startStep: number, pitch: number): void;
+    moveNoteEnd(_: number): void;
+    resizeNote(noteId: number, durationSteps: number): void;
+    resizeNoteEnd(_: number): void;
+    getNotes(): Note[];
+    getMML(volumeOverride?: number): string;
+    setVolume(volume: number): void;
+    setTempo(tempo: number): void;
+    private generateAndNotify;
+    /**
+     * 近似値を許容して単一音符を決定する。
+     * ただし、残りステップ(limit)は絶対に超えない。
+     */
+    private stepsToMMLDuration;
+    /**
+     * ギャップに収まる最大の音符を探す（減算アルゴリズム用）
+     */
+    private findBestFitDuration;
+    /**
+     * ピッチからオクターブ最適化のある音名を取得
+     */
+    private getNoteWithOctave;
+    /**
+     * MML生成（1/2小節パターンスキャン方式）
+     */
+    private generateMML;
+    /**
+     * ノート配列を直接渡してMMLを生成する（一時的に内部状態を差し替えて生成後に復元）
+     */
+    getMMLFromNotes(notes: Note[], tempo?: number, volume?: number): string;
+    /**
+     * MMLの音長文字列（"4", "4.", "12"など）をステップ数に変換する
+     */
+    private getStepFromDottedMML;
+}
+/**
+ * 和音を含むノート配列を、各トラックが単音（モノフォニック）になるよう
+ * 最小トラック数に分解する（区間スケジューリング・グリーディ法）。
+ * 最小トラック数 = 任意の瞬間の最大同時発音数。
+ */
+declare const decomposeToMonophonic: (notes: Note[]) => Note[][];
+/**
+ * ノート配列が「和音伴奏トラック」かどうかを判定する。
+ * 和音 = 同一 startStep に3音以上同時発音しているもの。
+ * そのような和音構成ノートの割合が threshold 以上であれば true。
+ * @param threshold 0〜1。デフォルト 0.6（60%以上が和音ノートならば伴奏トラック）
+ */
+declare const isChordHeavyTrack: (notes: Note[], threshold?: number) => boolean;
+
+/**
+ * 打ち込み補助マクロ群。MMLCore を直接操作する。
+ *
+ * 旧 demo/index.html の generateRandomPattern / applyHarmonicFilterMacro /
+ * applyMonophonicMacro / shiftAllNotes を移植・整理したもの。
+ */
+
+/**
+ * アクティブトラックにスケールに沿ったランダムなノートを8小節分配置する。
+ */
+declare const generateRandomPattern: (core: MMLCore, options: {
+    stepsPerBar: number;
+    startStep: number;
+    pitchRangeStart: number;
+}) => void;
+/**
+ * 半小節ごとに伴奏トラックの構成音(pitch class)に合致しない音を削除する。
+ */
+declare const applyHarmonicFilter: (targetCore: MMLCore, chordCore: MMLCore, options: {
+    stepsPerBar: number;
+}) => void;
+/**
+ * 伴奏フィルタに加え、同タイミングの重なりを最高音優先で単音化する。
+ */
+declare const applyMonophonic: (targetCore: MMLCore, chordCore: MMLCore, options: {
+    stepsPerBar: number;
+}) => void;
+/**
+ * 全トラックのノートを一括でステップシフトする（負方向で範囲外は削除）。
+ */
+declare const shiftNotes: (cores: MMLCore[], shiftSteps: number) => void;
+
+/**
+ * MIDI入出力ユーティリティ。
+ *
+ * - 入力: 注入された parseMidi（midi-parser-js 互換）の戻り値を解析し、
+ *   チャンネルを melody/submelody/bass/chord へ自動分類してノート配置を返す。
+ * - 出力: トラック群とドラムパターンから .mid バイナリ(Blob)を生成する。
+ *
+ * 旧 demo/index.html の analyzeMidiTracks / getBPM / parseMidiWithSelection /
+ * exportMIDI を移植・整理したもの。
+ */
+
+type MidiTrackAnalysis = {
+    index: number;
+    name: string;
+    noteCount: number;
+    selected: boolean;
+};
+type MidiNotePlacement = {
+    /** melody/submelody/bass/chord */
+    trackId: string;
+    startStep: number;
+    pitch: number;
+    durationSteps: number;
+    velocity: number;
+};
+type MidiExtraction = {
+    placements: MidiNotePlacement[];
+    bpm: number;
+};
+/**
+ * MIDIの各トラックを走査し、ノート数などの概要を返す（トラック選択UI用）。
+ */
+declare const analyzeMidiTracks: (midi: unknown) => MidiTrackAnalysis[];
+/** MIDIメタイベントからBPMを取得（無ければ120）。 */
+declare const getMidiBPM: (midi: unknown) => number;
+/**
+ * 選択トラックからノートを抽出し、チャンネル特性に基づいて
+ * melody/submelody/bass/chord へ自動分類した配置を返す。
+ */
+declare const extractMidiPlacements: (midi: unknown, selectedTrackIndices: number[]) => MidiExtraction;
+/**
+ * 上級者モード用：MIDIトラックインデックス N → DAW トラック trackIds[N] へ直接マッピング。
+ * 自動分類なし。選択された MIDI トラック K のノートは DAW トラック K に入る。
+ */
+declare const extractMidiPlacementsByTrack: (midi: unknown, selectedIndices: number[], trackIds: string[]) => MidiExtraction;
+type ExportMidiOptions = {
+    tracks: {
+        notes: Note[];
+        volume: number;
+    }[];
+    drumPattern?: DrumPattern;
+    drumVolume?: number;
+    bpm: number;
+    stepsPerBar: number;
+};
+/**
+ * トラック群とドラムパターンから .mid バイナリ(Blob)を生成する。
+ */
+declare const exportMIDI: (options: ExportMidiOptions) => Blob;
+
+/**
+ * MML文字列を解析し、トラックごとのノート配置へ復元するローダ。
+ *
+ * 旧来 demo/index.html の `loadMML` をライブラリへ移植・整理したもの。
+ * 実際のノート追加（MMLCore への反映）は呼び出し側で行う。
+ */
+type MMLNotePlacement = {
+    /** 0:melody 1:submelody 2:bass 3:chord */
+    trackIndex: number;
+    startStep: number;
+    pitch: number;
+    durationSteps: number;
+};
+type ParsedMML = {
+    placements: MMLNotePlacement[];
+    /** メロディトラックの t 指定から検出したBPM（無ければ null） */
+    bpm: number | null;
+};
+type ParseMMLOptions = {
+    /** 1小節あたりのステップ数。既定192 */
+    stepsPerBar?: number;
+};
+/**
+ * MML文字列を解析してノート配置とBPMを返す。
+ */
+declare const parseMML: (mml: string, options?: ParseMMLOptions) => ParsedMML;
+
+type PianoRollInstance = {
+    core: MMLCore;
+    getNotes: () => Note[];
+    getMML: () => string;
+    setVolume: (volume: number) => void;
+    setNoteLengthSteps: (steps: number) => void;
+    redraw: () => void;
+    setToolMode: (mode: ToolMode) => void;
+    getToolMode: () => ToolMode;
+    getSelectionRect: () => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    getNotesInRect: (rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => Note[];
+    clearSelection: () => void;
+    copySelection: () => Note[];
+    pasteNotes: (notes: Note[], startStep: number) => void;
+};
+declare const createPianoRoll: (options: PianoRollOptions, handlers: CoreEventHandlers) => PianoRollInstance;
+
+declare const getRenderConfig: () => RenderConfig;
+declare const getDrawOffset: () => {
+    x: number;
+    y: number;
+};
+declare const getGridCanvas: () => HTMLCanvasElement;
+declare const getGridContext: () => CanvasRenderingContext2D;
+declare const getHeaderCanvas: () => HTMLCanvasElement;
+/**
+ * Canvasを初期化し、指定されたターゲット要素にマウントします。
+ * ヘッダー用、鍵盤用、ノート用の3つのCanvasを作成します。
+ */
+declare const init: (mountTarget: HTMLElement, width: number | undefined, height: number | undefined, config: RenderConfig) => void;
+/**
+ * 鍵盤を描画します。
+ * - 白鍵: クリーム色、全幅
+ * - 黒鍵: 左 62% を黒塗り、右 38% は白鍵色（奥に伸びて見える）
+ * - E→F / C→B(下オクターブ) の白白境界に区切り線
+ */
+declare const drawKeyboard: () => void;
+declare const drawHeader: () => void;
+/**
+ * グリッドと背景を描画します。（グリッドCanvasと鍵盤/ヘッダー描画の呼び出し）
+ * @param noteLengthSteps ノート長ステップ数（この値ごとに縦線を表示）
+ */
+declare const drawGrid: (noteLengthSteps?: number) => void;
+/**
+ * 指定されたノートの配列を描画します。
+ */
+declare const drawNotes: (notes: Note[], color?: number[]) => void;
+/**
+ * 選択範囲の四角形を描画します。
+ */
+declare const drawSelectionRect: (rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null) => void;
+/**
+ * 選択されたノートをハイライト描画します。（濃い色で描画、枠なし）
+ */
+declare const drawSelectedNotes: (notes: Note[], selectedIds: Set<number>, baseColor?: number[]) => void;
+/**
+ * カーソルの座標取得
+ * (グリッドCanvasの相対座標を取得)
+ */
+declare const getXY: (e: MouseEvent | PointerEvent) => [number, number, number];
+declare const getGridPosition: (e: MouseEvent | PointerEvent) => {
+    step: number;
+    pitch: number;
+    x: number;
+    y: number;
+};
+/**
+ * ユーザーのクリックイベントを抽象化し、グリッド座標をコールバックに渡します。
+ * イベントリスナーをグリッドCanvasにのみ追加します。
+ */
+declare const onClick: (callback: (step: number, pitch: number) => void) => void;
+/**
+ * 描画オフセット（描画開始ピクセル位置）を設定します。
+ */
+declare const setDrawOffset: (x: number, y: number) => void;
+
+/**
+ * 再生シーケンサ。タイムライン計算と先読みスケジューリングを担い、
+ * 実際の発音は注入されたフック（onPlayNote / onPlayDrum）へ委譲する。
+ * 描画（プレイヘッド・オートスクロール）は onTick 経由で呼び出し側へ。
+ *
+ * 旧 demo/index.html の startPlayback / updatePlayback / stopPlayback を移植・整理。
+ */
+
+type SequencerTrack = {
+    id: string;
+    volume: number;
+    notes: Note[];
+};
+type SequencerOptions = {
+    getTracks: () => SequencerTrack[];
+    getBpm: () => number;
+    getPlayStartStep: () => number;
+    getDrumPattern: () => DrumPattern | null;
+    /** ソロ対象トラックID（null=ソロ無効） */
+    getSoloTrackId: () => string | null;
+    getAudioTime: () => number;
+    onPlayNote: (e: PlayNoteEvent) => void;
+    onPlayDrum: (e: PlayDrumEvent) => void;
+    /** 毎フレーム currentPlayStep を通知（プレイヘッド/オートスクロール用） */
+    onTick: (currentPlayStep: number) => void;
+    onEnd: () => void;
+    stepsPerBar: number;
+};
+type Sequencer = {
+    start: (fromStep?: number) => void;
+    stop: () => void;
+    isActive: () => boolean;
+};
+declare const createSequencer: (options: SequencerOptions) => Sequencer;
+
+/**
+ * mountDAW が注入する自己完結スタイル。
+ * すべてのクラスは `dtm-` プレフィックスでスコープし、ホスト側CSSと衝突しにくくする。
+ * ドット絵・レトロゲーム風ピクセルアートデザイン（美咲フォント・角なし・ハードシャドウ）。
+ * モバイルファースト（狭幅基準）で設計し、min-width メディアクエリで広幅に拡張する。
+ */
+declare const DAW_CSS = "\n@font-face {\n  font-family: 'k8x12';\n  src: url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/777630d46640dc5a928ea833c2fcb875.ttf') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n\n/* ====================================================\n   PIXEL MUSIC STUDIO \u2014 \u30C9\u30C3\u30C8\u7D75UI\u30B7\u30B9\u30C6\u30E0\n   PICO-8\u30AB\u30E9\u30FC\u30D1\u30EC\u30C3\u30C8\u30FB\u7F8E\u54B2\u30D5\u30A9\u30F3\u30C8\u30FB\u30B2\u30FC\u30E0\u30A6\u30A3\u30F3\u30C9\u30A6\u67A0\n   ==================================================== */\n\n.dtm-daw {\n  /* PICO-8 16\u8272\u30D1\u30EC\u30C3\u30C8\u3088\u308A */\n  --c-black:   #000000;\n  --c-navy:    #1d2b53;\n  --c-purple:  #7e2553;\n  --c-dkgreen: #008751;\n  --c-brown:   #ab5236;\n  --c-dkgray:  #5f574f;\n  --c-gray:    #c2c3c7;\n  --c-white:   #fff1e8;\n  --c-red:     #ff004d;\n  --c-orange:  #ffa300;\n  --c-yellow:  #ffec27;\n  --c-green:   #00e436;\n  --c-cyan:    #29adff;\n  --c-lavend:  #83769c;\n  --c-pink:    #ff77a8;\n  --c-peach:   #ffccaa;\n\n  /* \u30BB\u30DE\u30F3\u30C6\u30A3\u30C3\u30AF\u30C8\u30FC\u30AF\u30F3 */\n  --dtm-bg:       var(--c-black);\n  --dtm-surface:  var(--c-navy);\n  --dtm-deep:     #0a0f1f;\n  --dtm-border:   var(--c-cyan);\n  --dtm-border2:  var(--c-dkgray);\n  --dtm-text:     var(--c-white);\n  --dtm-muted:    var(--c-lavend);\n  --dtm-primary:  var(--c-cyan);\n  --dtm-pfg:      var(--c-black);\n  --dtm-danger:   var(--c-red);\n  --dtm-success:  var(--c-green);\n  --dtm-accent:   var(--c-pink);\n  --dtm-gold:     var(--c-yellow);\n  --dtm-warn:     var(--c-orange);\n  --dtm-tap:      40px;\n  --dtm-gap:      6px;\n  --dtm-font:     'k8x12',ui-monospace,monospace;\n\n  box-sizing: border-box;\n  font-family: var(--dtm-font);\n  font-size: 14px;\n  line-height: 1.6;\n  letter-spacing: .06em;\n  color: var(--dtm-text);\n  background: var(--dtm-bg);\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  image-rendering: pixelated;\n  -webkit-font-smoothing: none;\n  -moz-osx-font-smoothing: unset;\n  font-smooth: never;\n  -webkit-tap-highlight-color: transparent;\n}\n.dtm-daw *,\n.dtm-daw *::before,\n.dtm-daw *::after { box-sizing: border-box; }\n\n/* \u2500\u2500\u2500 \u30B2\u30FC\u30E0\u30A6\u30A3\u30F3\u30C9\u30A6\u5171\u901A\u67A0 \u2500\u2500\u2500 */\n/* \u5916\u67A0(\u9ED22px) \u2192 \u8272\u4ED8\u304D2px border \u2192 \u5185\u67A0(\u9ED2inset2px) \u306E3\u91CD\u69CB\u9020 */\n.dtm-win {\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  background: var(--dtm-surface);\n}\n\n/* \u2500\u2500\u2500 \u5171\u901A\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  min-height: var(--dtm-tap);\n  min-width: var(--dtm-tap);\n  padding: 0 10px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-shadow: 3px 3px 0 var(--c-black);\n  transition: none;\n}\n.dtm-btn:active  { transform: translate(3px,3px); box-shadow: none; }\n.dtm-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }\n.dtm-btn--primary { border-color: var(--dtm-primary); background: var(--dtm-primary); color: var(--dtm-pfg); }\n.dtm-btn--success { border-color: var(--dtm-success); background: var(--dtm-success); color: var(--c-black); }\n.dtm-btn--danger  { border-color: var(--dtm-danger);  background: var(--dtm-danger);  color: var(--c-white); }\n.dtm-btn--accent  { border-color: var(--dtm-accent);  background: var(--dtm-accent);  color: var(--c-black); }\n.dtm-btn--ghost   { background: transparent; border-color: var(--dtm-border2); }\n.dtm-btn--icon    { padding: 0; }\n\n/* \u2500\u2500\u2500 \u30A2\u30A4\u30B3\u30F3\u30DC\u30BF\u30F3 \u2500\u2500\u2500 */\n.dtm-iconbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  flex: 0 0 auto;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-surface);\n  color: var(--dtm-text);\n  font-size: 16px;\n  cursor: pointer;\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-iconbtn:active  { transform: translate(3px,3px); box-shadow: none; }\n.dtm-iconbtn:disabled { opacity: .3; cursor: default; box-shadow: none; }\n\n/* \u2500\u2500\u2500 \u30C8\u30E9\u30F3\u30B9\u30DD\u30FC\u30C8\u30D0\u30FC\uFF08HUD\u30B9\u30BF\u30A4\u30EB\uFF09 \u2500\u2500\u2500 */\n.dtm-topbar {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-success),\n    4px 4px 0 var(--c-black);\n}\n\n/* PLAY\u30DC\u30BF\u30F3 \u2014 \u30B2\u30FC\u30E0\u306E\u300C\u6C7A\u5B9A\u30DC\u30BF\u30F3\u300D\u7684\u5B58\u5728\u611F */\n.dtm-play {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 44px;\n  padding: 0 20px;\n  border: 2px solid var(--c-black);\n  background: var(--dtm-success);\n  color: var(--c-black);\n  font-family: var(--dtm-font);\n  font-size: 14px;\n  text-transform: uppercase;\n  letter-spacing: .2em;\n  cursor: pointer;\n  box-shadow: 0 0 0 2px var(--dtm-success), 4px 4px 0 var(--c-black);\n}\n.dtm-play:active  { transform: translate(4px,4px); box-shadow: none; }\n.dtm-play:disabled { opacity: .35; cursor: default; box-shadow: none; }\n.dtm-play--stop {\n  background: var(--dtm-danger);\n  box-shadow: 0 0 0 2px var(--dtm-danger), 4px 4px 0 var(--c-black);\n  color: var(--c-white);\n}\n.dtm-rec { color: var(--dtm-danger); }\n\n/* BPM \u2014 \u30C7\u30B8\u30BF\u30EB\u30AB\u30A6\u30F3\u30BF\u30FC\u98A8 */\n.dtm-label {\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  color: var(--dtm-muted);\n  white-space: nowrap;\n}\n.dtm-checkbox-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--dtm-font);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: .12em;\n  color: var(--dtm-muted);\n  cursor: pointer;\n  user-select: none;\n  margin-top: 4px;\n}\n.dtm-checkbox-label:hover { color: var(--dtm-text); }\n.dtm-checkbox-label--sub { margin-left: 20px; font-size: 10px; }\n.dtm-checkbox {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--dtm-success);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.dtm-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: .1em;\n  color: var(--dtm-muted);\n  cursor: pointer;\n}\n.dtm-toggle input { width: 16px; height: 16px; accent-color: var(--dtm-accent); }\n\n/* \u2500\u2500\u2500 \u30C4\u30FC\u30EB\u30C9\u30C3\u30AF\uFF08\u88C5\u5099\u30B9\u30ED\u30C3\u30C8\u98A8\uFF09 \u2500\u2500\u2500 */\n.dtm-tooldock {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--dtm-gap);\n  padding: 6px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n}\n.dtm-sep {\n  width: 2px; align-self: stretch;\n  background: var(--dtm-border2); margin: 2px;\n}\n.dtm-row .dtm-label[data-dtm] { min-width: 48px; text-align: center; }\n\n/* \u2500\u2500\u2500 \u30BB\u30B0\u30E1\u30F3\u30C8\uFF08\u30A2\u30A4\u30C6\u30E0\u30B9\u30ED\u30C3\u30C8\uFF09 \u2500\u2500\u2500 */\n.dtm-seg {\n  display: inline-flex;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-segbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dtm-tap);\n  height: var(--dtm-tap);\n  border: none;\n  border-right: 2px solid var(--dtm-border2);\n  background: transparent;\n  color: var(--dtm-muted);\n  cursor: pointer;\n}\n.dtm-segbtn:last-child { border-right: none; }\n.dtm-segbtn--active {\n  background: var(--dtm-gold);\n  color: var(--c-black);\n}\n.dtm-segbtn:not(.dtm-segbtn--active):active { background: var(--dtm-border2); }\n\n/* \u2500\u2500\u2500 \u30D5\u30A9\u30FC\u30E0\u8981\u7D20 \u2500\u2500\u2500 */\n.dtm-select, .dtm-input, .dtm-textarea {\n  min-height: var(--dtm-tap);\n  padding: 4px 8px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  color: var(--dtm-text);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  letter-spacing: .06em;\n  box-shadow: inset 2px 2px 0 var(--c-black);\n}\n.dtm-select:focus, .dtm-input:focus, .dtm-textarea:focus {\n  outline: none;\n  border-color: var(--dtm-primary);\n}\n.dtm-input--num { width: 64px; text-align: center; font-size: 16px; }\n.dtm-textarea { width: 100%; min-height: 56px; resize: vertical; line-height: 1.7; }\n.dtm-range { height: var(--dtm-tap); accent-color: var(--dtm-primary); }\n\n/* \u2500\u2500\u2500 \u30C8\u30E9\u30C3\u30AF\u30D4\u30EB\uFF08\u30AD\u30E3\u30E9\u30AF\u30BF\u30FC\u9078\u629E\u30DC\u30BF\u30F3\uFF09 \u2500\u2500\u2500 */\n.dtm-tracks {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dtm-gap);\n}\n.dtm-pill {\n  --dtm-pill-color: var(--dtm-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 1 auto;\n  justify-content: center;\n  min-height: 42px;\n  padding: 0 12px;\n  border: 2px solid var(--dtm-border2);\n  background: var(--dtm-deep);\n  color: var(--dtm-muted);\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: .1em;\n  cursor: pointer;\n  box-shadow: 3px 3px 0 var(--c-black);\n}\n.dtm-pill .dtm-dot {\n  width: 8px; height: 8px;\n  background: var(--dtm-pill-color);\n  flex: 0 0 auto;\n  box-shadow: 1px 1px 0 var(--c-black);\n}\n/* \u30A2\u30AF\u30C6\u30A3\u30D6\u9078\u629E = \u91D1\u8272\u30CF\u30A4\u30E9\u30A4\u30C8 + \u30AB\u30FC\u30BD\u30EB */\n.dtm-pill--active {\n  border-color: var(--dtm-gold);\n  color: var(--dtm-gold);\n  background: var(--dtm-surface);\n  box-shadow: 0 0 0 2px var(--dtm-gold), 3px 3px 0 var(--c-black);\n}\n.dtm-pill--active::before { content: \"\u25BA \"; font-size: 10px; }\n.dtm-pill:not(.dtm-pill--active):active { transform: translate(3px,3px); box-shadow: none; }\n\n/* \u2500\u2500\u2500 \u30D4\u30A2\u30CE\u30ED\u30FC\u30EB\uFF08\u30C8\u30E9\u30C3\u30AB\u30FC\u98A8\uFF09 \u2500\u2500\u2500 */\n.dtm-roll-wrap { display: flex; gap: var(--dtm-gap); }\n.dtm-roll {\n  position: relative;\n  flex: 1 1 auto;\n  height: 56vh;\n  min-height: 280px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-border2),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n.dtm-vscroll {\n  position: relative;\n  width: 20px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  cursor: pointer;\n  flex: 0 0 auto;\n  touch-action: none;\n}\n.dtm-vscroll-thumb, .dtm-hscroll-thumb {\n  position: absolute;\n  background: var(--dtm-primary);\n  min-width: 20px;\n  min-height: 20px;\n}\n.dtm-vscroll-thumb { left: 0; width: 100%; }\n.dtm-hscroll {\n  position: relative;\n  width: 100%; height: 20px;\n  background: var(--dtm-deep);\n  border: 2px solid var(--dtm-border2);\n  cursor: pointer;\n  touch-action: none;\n}\n.dtm-hscroll-thumb { top: 0; height: 100%; }\n\n/* \u2500\u2500\u2500 \u30D1\u30CD\u30EB\uFF08RPG\u30C0\u30A4\u30A2\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\uFF09 \u2500\u2500\u2500 */\n.dtm-panel {\n  background: var(--dtm-surface);\n  border: 2px solid var(--c-black);\n  box-shadow:\n    inset 0 0 0 2px var(--c-black),\n    0 0 0 2px var(--dtm-primary),\n    4px 4px 0 var(--c-black);\n  overflow: hidden;\n}\n.dtm-panel > summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 0 12px;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: .14em;\n  display: flex;\n  align-items: center;\n  min-height: var(--dtm-tap);\n  background: var(--dtm-deep);\n  border-bottom: 2px solid var(--dtm-border2);\n  color: var(--dtm-primary);\n  gap: 8px;\n}\n.dtm-panel:not([open]) > summary { border-bottom: none; }\n.dtm-panel > summary::-webkit-details-marker { display: none; }\n/* \u5DE6\u7AEF\u30E9\u30A4\u30F3\uFF08\u30B2\u30FC\u30E0UI\u306E\u30BB\u30AF\u30B7\u30E7\u30F3\u8272\u5206\u3051\uFF09 */\n.dtm-panel > summary::before {\n  content: '';\n  display: block;\n  width: 4px;\n  height: 20px;\n  background: var(--dtm-accent);\n  flex: 0 0 auto;\n}\n.dtm-panel[open] > summary::before { background: var(--dtm-primary); }\n/* \u6298\u308A\u305F\u305F\u307F\u77E2\u5370 */\n.dtm-panel > summary::after {\n  content: \"\u25B6\";\n  margin-left: auto;\n  color: var(--dtm-muted);\n  font-size: 10px;\n}\n.dtm-panel[open] > summary::after { content: \"\u25BC\"; }\n.dtm-panel-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }\n.dtm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.dtm-track-body { display: flex; flex-direction: column; gap: 10px; }\n\n/* \u2500\u2500\u2500 MML\u51FA\u529B\uFF08CRT\u30BF\u30FC\u30DF\u30CA\u30EB\uFF09 \u2500\u2500\u2500 */\n.dtm-output {\n  background: var(--c-black);\n  color: var(--dtm-success);\n  border: 2px solid var(--dtm-success);\n  padding: 10px;\n  box-shadow: 0 0 0 2px var(--c-black), 4px 4px 0 var(--c-black);\n}\n.dtm-output::before {\n  content: \"C:\\> MML OUTPUT\";\n  display: block;\n  font-size: 11px;\n  color: var(--dtm-muted);\n  letter-spacing: .14em;\n  margin-bottom: 6px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--dtm-border2);\n}\n.dtm-output pre {\n  margin: 0;\n  background: transparent;\n  padding: 0;\n  overflow-x: auto;\n  font-family: var(--dtm-font);\n  font-size: 12px;\n  line-height: 1.8;\n  color: var(--dtm-success);\n}\n.dtm-output-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }\n.dtm-output-row pre { flex: 1; }\n\n/* \u2500\u2500\u2500 \u30ED\u30FC\u30C7\u30A3\u30F3\u30B0\u30AA\u30FC\u30D0\u30FC\u30EC\u30A4 \u2500\u2500\u2500 */\n.dtm-overlay {\n  position: fixed; inset: 0; z-index: 1000;\n  background: rgba(0,0,0,.92);\n  display: flex; align-items: center; justify-content: center;\n  flex-direction: column; gap: 14px;\n}\n.dtm-overlay[hidden] { display: none; }\n.dtm-overlay::before {\n  content: 'NOW LOADING';\n  font-family: var(--dtm-font);\n  font-size: 13px;\n  color: var(--dtm-primary);\n  text-transform: uppercase;\n  letter-spacing: .25em;\n  animation: dtm-blink 1s steps(1) infinite;\n}\n/* 8\u30D6\u30ED\u30C3\u30AF\u523B\u307F\u3067\u57CB\u307E\u308B\u30D4\u30AF\u30BB\u30EB\u30D0\u30FC */\n.dtm-spinner {\n  width: 96px; height: 12px;\n  position: relative;\n  background: var(--c-navy);\n  border: 2px solid var(--dtm-primary);\n  box-shadow: 0 0 0 2px var(--c-black), 4px 4px 0 var(--c-black);\n}\n.dtm-spinner::after {\n  content: '';\n  position: absolute;\n  left: 0; top: 0; height: 100%;\n  background: var(--dtm-primary);\n  animation: dtm-load 1.6s steps(8) infinite;\n}\n@keyframes dtm-load { 0%{width:0} 100%{width:100%} }\n\n@keyframes dtm-blink { 0%,100%{opacity:1} 50%{opacity:0} }\n.dtm-blink { animation: dtm-blink 1s steps(1) infinite; }\n\n.dtm-hidden { display: none !important; }\n.dtm-grow { flex: 1 1 auto; }\n\n/* \u2500\u2500\u2500 \u5E83\u5E45\u62E1\u5F35 \u2500\u2500\u2500 */\n@media (min-width: 768px) {\n  .dtm-daw { gap: 8px; padding: 10px; }\n  .dtm-roll { height: 420px; }\n}\n";
+/**
+ * スタイルを document.head に一度だけ注入する。
+ */
+declare const injectStyles: (doc?: Document) => void;
+
+export { type AddNoteOptions, type ApplyChordOptions, type ChordPatternType, type ChordPlacement, type CoreEventHandlers, DAW_CSS, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawOptions, type DrumPattern, type ExportMidiOptions, INSTRUMENT_PRESETS, type InstrumentPreset, LinkedList, MMLCore, type MMLNotePlacement, type MidiExtraction, type MidiNotePlacement, type MidiTrackAnalysis, type Note, PITCH_MAP, type ParseChordFn, type ParseChordsFn, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PlayDrumEvent, type PlayNoteEvent, type PlaybackState, type PreviewSoundCallback, type RenderConfig, type Sequencer, type SequencerOptions, type SequencerTrack, TRACKS_ADVANCED, TRACKS_SIMPLE, type ToolMode, type TrackConfig, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, buildChordPlacements, buildNameToKeyMapping, createAudioContext, createPianoRoll, createSequencer, decomposeToMonophonic, drawGrid, drawHeader, drawKeyboard, drawNotes, drawSelectedNotes, drawSelectionRect, exportMIDI, extractMidiPlacements, extractMidiPlacementsByTrack, fetchSoundFontList, generateRandomPattern, getDrawOffset, getGridCanvas, getGridContext, getGridPosition, getHeaderCanvas, getMidiBPM, getRenderConfig, getXY, icon, init, injectStyles, isChordHeavyTrack, mountDAW, onClick, parseMML, setDrawOffset, setupRecorder, shiftNotes };