@tatamicks/core 0.1.0 → 0.1.1

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MemoExoticComponent } from 'react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 
 export declare const ACTUAL_UNITS: readonly ["mm", "cm", "pt", "inch", "px"];
@@ -59,6 +60,13 @@ export declare function assertPositive(value: number, name?: string): void;
  */
 export declare function assertRange(value: number, min: number, max: number, name?: string): void;
 
+export declare const BackgroundPanel: default_2.FC<BackgroundPanelProps>;
+
+export declare interface BackgroundPanelProps {
+    selectedBlocks: Block[];
+    onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
+}
+
 export declare function binarySearch(num: number, arr: readonly number[]): number;
 
 /**
@@ -96,6 +104,55 @@ export declare interface BlockBehavior {
     readOnly?: boolean;
 }
 
+/**
+ * BlockBorder
+ *
+ * ブロックの境界線を描画するコンポーネント
+ * - block.style?.borderで設定された枠線を描画
+ * - pointer-events: none (クリックイベント透過)
+ *
+ * @remarks
+ * - ユーザー設定の枠線を描画
+ * - BlockBaseBorderと構造は同じだが、用途とz-indexが異なる
+ * - BlockBaseBorder: ガイド線（GUIDE層）
+ * - BlockBorder: 実際の枠線（BORDER層）
+ */
+export declare const BlockBorder: default_2.FC<BlockBorderProps>;
+
+/**
+ * BlockBorderコンポーネントのProps
+ */
+export declare interface BlockBorderProps {
+    blockSizePx: BlockSizePx;
+    borderStyle?: BorderStyle;
+    blockZIndex: number;
+    subZIndex?: number;
+    visible?: boolean;
+    dpi?: number;
+    className?: string;
+}
+
+/**
+ * BlockCanvas
+ *
+ * ブロック背景を描画するコンポーネント
+ * - z-index: ブロック基底値 + 0 (各ブロックの最下層)
+ * - pointer-events: none (クリックイベント透過)
+ * - 背景色のみを描画（境界線はBlockBaseBorderが担当）
+ */
+export declare const BlockCanvas: default_2.FC<BlockCanvasProps>;
+
+/**
+ * BlockCanvasコンポーネントのProps
+ */
+export declare interface BlockCanvasProps {
+    blockSizePx: BlockSizePx;
+    blockZIndex: number;
+    subZIndex?: number;
+    backgroundColor?: string;
+    className?: string;
+}
+
 export declare interface BlockChangeEvent {
     type: BlockChangeType;
     blockIds: string[];
@@ -120,6 +177,26 @@ export declare enum BlockChangeType {
     PASTE = "paste"
 }
 
+export declare const BlockContainer: MemoExoticComponent<ForwardRefExoticComponent<BlockContainerProps & RefAttributes<BlockRef>>>;
+
+export declare interface BlockContainerProps {
+    block: Block;
+    plugin: BlockPlugin;
+    blockRectPx: BlockRectPx;
+    blockZIndex: number;
+    mode: NoteMode;
+    value: Value;
+    onValueChange?: (val: Value) => void;
+    onValueBlur?: (val: Value) => void;
+    showGuides?: boolean;
+    showBorder?: boolean;
+    blockSubZIndex?: Record<string, number>;
+    defaultGuideBorder?: BorderStyle;
+    dpi?: number;
+    className?: string;
+    pointerEvents?: "auto" | "none";
+}
+
 /**
  * ブロックコンテナスタイルのオプション
  */
@@ -130,6 +207,81 @@ export declare interface BlockContainerStyleOptions {
     pointerEvents?: "auto" | "none";
 }
 
+/**
+ * BlockBaseBorder
+ *
+ * レイアウト編集時にブロックの境界を可視化するガイド線コンポーネント
+ * - formモードでのみ使用される
+ * - block.style?.borderが未設定のブロックに表示
+ * - pointer-events: none (クリックイベント透過)
+ *
+ * @remarks
+ * - 固定スタイル（薄いグレーの実線）でブロック境界を描画
+ * - ユーザー設定の枠線とは別の、編集補助用のガイド
+ * - BorderOverlayと構造は同じだが、用途と表示条件が異なる
+ */
+export declare const BlockGuideBorder: default_2.FC<BlockGuideBorderProps>;
+
+/**
+ * BlockBaseBorderコンポーネントのProps
+ */
+export declare interface BlockGuideBorderProps {
+    blockSizePx: BlockSizePx;
+    blockZIndex: number;
+    subZIndex?: number;
+    borderStyle?: BorderStyle;
+    visible?: boolean;
+    dpi?: number;
+    className?: string;
+}
+
+export declare const BlockLayer: MemoExoticComponent<({ blocks, pluginRegistry, mode, values, selectedBlockIds, getBlockRectPx, onValueChange, onValueBlur, showGuides, showBorder, blockSubZIndex, defaultGuideBorder, dpi, className, }: BlockLayerProps) => JSX_2.Element>;
+
+export declare interface BlockLayerProps {
+    blocks: Block[];
+    pluginRegistry: Record<string, BlockPlugin>;
+    mode: NoteMode;
+    values: Record<string, Value>;
+    selectedBlockIds?: string[];
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    onValueChange?: OnChange;
+    onValueBlur?: OnBlur;
+    showGuides?: boolean;
+    showBorder?: boolean;
+    blockSubZIndex?: Record<string, number>;
+    defaultGuideBorder?: BorderStyle;
+    dpi?: number;
+    className?: string;
+}
+
+/**
+ * ブロックレイアウト（グリッド座標系）
+ */
+export declare interface BlockLayout {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+/**
+ * BlockOrderPanel
+ * ブロックの配列順序を変更するパネル
+ * UIでは上が最前面、下が最背面（一般的なデザインソフトと同じ）
+ * 内部配列では最後が最前面
+ */
+export declare const BlockOrderPanel: {
+    ({ blocks, onBlocksChange, }: BlockOrderPanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface BlockOrderPanelProps {
+    /** ブロック一覧 */
+    blocks: Block[];
+    /** ブロック更新時のコールバック (blocks配列全体を更新) */
+    onBlocksChange: (blocks: Block[]) => void;
+}
+
 /**
  * BlockPlugin 型定義
  *
@@ -189,7 +341,7 @@ export declare interface BlockPosPx {
  */
 export declare const BlockPropertyPanel: MemoExoticComponent<({ selectedBlocks, pluginRegistry, onUpdateBlocks, gridSize, className, }: BlockPropertyPanelProps) => JSX_2.Element>;
 
-declare interface BlockPropertyPanelProps {
+export declare interface BlockPropertyPanelProps {
     selectedBlocks: Block[];
     pluginRegistry: Record<string, BlockPlugin>;
     onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
@@ -224,6 +376,43 @@ export declare interface BlockRef {
     focus: () => void;
 }
 
+export declare const BlockRenderer: typeof ForwardedBlockRenderer;
+
+/**
+ * BlockRendererコンポーネントのProps
+ *
+ * @template P - プラグイン固有プロパティ型
+ * @template V - プラグインが扱う値の型
+ */
+export declare interface BlockRendererProps<P = Record<string, Value>, V = Value> {
+    /** ブロックID */
+    id: string;
+    /** プラグイン定義 */
+    plugin: BlockPlugin<P, V>;
+    /** プラグイン固有プロパティ */
+    props: P;
+    /** ブロックの現在値 */
+    value: V;
+    /** 値変更コールバック (オプション) */
+    onChange?: (value: V) => void;
+    /** 値確定コールバック (オプション) */
+    onBlur?: (value: V) => void;
+    /** 読み取り専用フラグ */
+    readOnly: boolean;
+    /** 現在のモード */
+    mode: NoteMode;
+    /** ブロックの位置とサイズ（ピクセル単位） */
+    blockSizePx: BlockSizePx;
+    /** ブロック基底z-index */
+    blockZIndex: number;
+    /** ブロック内でのレイヤーz-index (オプション) */
+    subZIndex?: number;
+    /** バリデーション状態 (オプション) */
+    validationState?: "valid" | "invalid" | "warning";
+    /** 追加のクラス名 */
+    className?: string;
+}
+
 export declare interface BlockSize {
     w: number;
     h: number;
@@ -366,6 +555,13 @@ export declare interface BorderOverlayProps {
     className?: string;
 }
 
+export declare const BorderPanel: default_2.FC<BorderPanelProps>;
+
+export declare interface BorderPanelProps {
+    selectedBlocks: Block[];
+    onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
+}
+
 export declare const BorderRenderer: MemoExoticComponent<({ width, height, border, dpi, className, }: BorderRendererProps) => JSX_2.Element | null>;
 
 export declare interface BorderRendererProps {
@@ -397,6 +593,52 @@ export declare type BorderUnit = (typeof BORDER_UNITS)[number];
  */
 export declare function calculateGridResize(dimensions: Dimension<GridUnit>[], index: number, deltaPx: number, totalContentPx: number): Dimension<GridUnit>[];
 
+/**
+ * リサイズ後のレイアウトを計算
+ *
+ * @param params - リサイズパラメータ
+ * @returns 新しいレイアウト
+ *
+ * @remarks
+ * - 最小サイズは1x1
+ * - グリッド範囲外にははみ出さない
+ * - 左端・上端を超える場合は自動的にクランプ
+ *
+ * @example
+ * ```typescript
+ * const newLayout = calculateResizedLayout({
+ *   layout: { x: 2, y: 2, w: 3, h: 3 },
+ *   handle: ResizeHandle.SE,
+ *   deltaCol: 2,
+ *   deltaRow: 1,
+ *   gridCols: 10,
+ *   gridRows: 10,
+ * });
+ * // => { x: 2, y: 2, w: 5, h: 4 }
+ * ```
+ */
+export declare function calculateResizedLayout({ layout, handle, deltaCol, deltaRow, gridCols, gridRows, }: ResizeParams): BlockLayout;
+
+/**
+ * CanvasPanel
+ * キャンバス設定の統合パネル
+ * - PaperSizePanel: 用紙サイズ設定
+ * - MarginPanel: マージン設定
+ * - GridSizePanel: グリッドサイズ設定
+ * - BlockOrderPanel: ブロック順序設定
+ */
+export declare const CanvasPanel: {
+    ({ schema, onSchemaChange }: CanvasPanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface CanvasPanelProps {
+    /** フォームスキーマ */
+    schema: FormSchema;
+    /** スキーマ変更時のコールバック */
+    onSchemaChange: (newSchema: FormSchema) => void;
+}
+
 /**
  * チェックボックスコンポーネント
  */
@@ -405,7 +647,7 @@ export declare const Checkbox: {
     displayName: string;
 };
 
-declare interface CheckboxConfig {
+export declare interface CheckboxConfig {
     label?: string;
     [key: string]: Value;
 }
@@ -419,6 +661,70 @@ export declare interface CheckboxProps extends PropertyComponentProps<boolean |
     config?: CheckboxConfig;
 }
 
+/**
+ * @file clampBlock.ts
+ * @description ブロックをグリッド範囲内にクランプする共通ロジック
+ *
+ * @remarks
+ * 移動・挿入・リサイズ時のはみ出し防止処理を集約。
+ * DRY原則に従い、InteractionLayer内の重複コードを排除。
+ */
+/**
+ * ブロックの位置をグリッド範囲内にクランプ
+ *
+ * @param position - ブロックの位置 (x, y)
+ * @param size - ブロックのサイズ (w, h)
+ * @param gridCols - グリッドの列数
+ * @param gridRows - グリッドの行数
+ * @returns クランプされた位置 { x, y }
+ *
+ * @remarks
+ * - x は 0 ～ (gridCols - w) の範囲にクランプ
+ * - y は 0 ～ (gridRows - h) の範囲にクランプ
+ * - ブロックがグリッドからはみ出さないことを保証
+ *
+ * @example
+ * ```typescript
+ * const clamped = clampBlockToGrid(
+ *   { x: -1, y: 5 },
+ *   { w: 2, h: 3 },
+ *   10, // gridCols
+ *   10  // gridRows
+ * );
+ * // => { x: 0, y: 5 }
+ * ```
+ */
+export declare function clampBlockToGrid(position: {
+    x: number;
+    y: number;
+}, size: {
+    w: number;
+    h: number;
+}, gridCols: number, gridRows: number): {
+    x: number;
+    y: number;
+};
+
+export declare interface ClampedBlockPosition {
+    blockId: string;
+    x: number;
+    y: number;
+}
+
+/**
+ * 複数ブロックの移動をクランプ
+ * 全体のバウンディングボックスを計算し、グリッド範囲内に収めた上で
+ * 相対位置を保持したまま各ブロックの新しい座標を返す
+ *
+ * @param blocks - 移動対象のブロック配列
+ * @param deltaCol - 列方向の移動量
+ * @param deltaRow - 行方向の移動量
+ * @param gridCols - グリッドの列数
+ * @param gridRows - グリッドの行数
+ * @returns クランプ後の各ブロックの座標配列
+ */
+export declare function clampMultipleBlocks(blocks: Block[], deltaCol: number, deltaRow: number, gridCols: number, gridRows: number): ClampedBlockPosition[];
+
 /**
  * 印刷後のクリーンアップ処理
  */
@@ -426,6 +732,115 @@ export declare function cleanupPrint(options?: {
     restoreScrollbars?: boolean;
 }): void;
 
+/**
+ * カラーパレット定義（30色）
+ */
+export declare const COLOR_PALETTE: readonly [{
+    readonly label: "無色";
+    readonly value: string | undefined;
+}, {
+    readonly label: "白";
+    readonly value: "#ffffff";
+}, {
+    readonly label: "グレー1";
+    readonly value: "#efefef";
+}, {
+    readonly label: "グレー2";
+    readonly value: "#d9d9d9";
+}, {
+    readonly label: "グレー3";
+    readonly value: "#cccccc";
+}, {
+    readonly label: "グレー4";
+    readonly value: "#b7b7b7";
+}, {
+    readonly label: "グレー5";
+    readonly value: "#999999";
+}, {
+    readonly label: "グレー6";
+    readonly value: "#666666";
+}, {
+    readonly label: "グレー7";
+    readonly value: "#434343";
+}, {
+    readonly label: "黒";
+    readonly value: "#000000";
+}, {
+    readonly label: "薄茶";
+    readonly value: "#E6B8AF";
+}, {
+    readonly label: "薄赤";
+    readonly value: "#F4CCCC";
+}, {
+    readonly label: "薄橙";
+    readonly value: "#FCE5CD";
+}, {
+    readonly label: "薄黄";
+    readonly value: "#FFF2CC";
+}, {
+    readonly label: "薄緑";
+    readonly value: "#D9EAD3";
+}, {
+    readonly label: "薄青緑";
+    readonly value: "#D0E0E3";
+}, {
+    readonly label: "薄青";
+    readonly value: "#C9DAF8";
+}, {
+    readonly label: "薄青紫";
+    readonly value: "#CFE2F3";
+}, {
+    readonly label: "薄紫";
+    readonly value: "#D9D2E9";
+}, {
+    readonly label: "薄赤紫";
+    readonly value: "#EAD1DC";
+}, {
+    readonly label: "茶";
+    readonly value: "#DD7E6B";
+}, {
+    readonly label: "赤";
+    readonly value: "#EA9999";
+}, {
+    readonly label: "橙";
+    readonly value: "#F9CB9C";
+}, {
+    readonly label: "黄";
+    readonly value: "#FFE599";
+}, {
+    readonly label: "緑";
+    readonly value: "#B6D7A8";
+}, {
+    readonly label: "青緑";
+    readonly value: "#A2C4C9";
+}, {
+    readonly label: "青";
+    readonly value: "#A4C2F4";
+}, {
+    readonly label: "青紫";
+    readonly value: "#9FC5E8";
+}, {
+    readonly label: "紫";
+    readonly value: "#B4A7D6";
+}, {
+    readonly label: "赤紫";
+    readonly value: "#D5A6BD";
+}];
+
+/**
+ * カラーパレットコンポーネント
+ */
+export declare const ColorPalette: {
+    ({ onColorSelect, selectedColor, readOnly, }: ColorPaletteProps): default_2.ReactElement;
+    displayName: string;
+};
+
+export declare interface ColorPaletteProps {
+    onColorSelect: (color: string | undefined) => void;
+    selectedColor?: string;
+    readOnly?: boolean;
+}
+
 /**
  * カラーピッカーコンポーネント
  */
@@ -438,13 +853,31 @@ export declare const ColorPicker: {
  * Config型定義
  * Record<string, Value> との互換性を持たせる
  */
-declare interface ColorPickerConfig {
+export declare interface ColorPickerConfig {
     allowUndefined?: boolean;
     width?: number;
     height?: number;
     [key: string]: Value;
 }
 
+/**
+ * カラーピッカーポップオーバーコンポーネント
+ */
+export declare const ColorPickerPopover: {
+    ({ isOpen, onClose, rgba, onRgbaChange, onColorSelect, selectedColor, readOnly, }: ColorPickerPopoverProps): default_2.ReactElement | null;
+    displayName: string;
+};
+
+export declare interface ColorPickerPopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    rgba: RGBA;
+    onRgbaChange: (channel: keyof RGBA, value: number | undefined) => void;
+    onColorSelect: (color: string | undefined) => void;
+    selectedColor?: string;
+    readOnly?: boolean;
+}
+
 /**
  * ColorPicker固有のProps
  * T は string | undefined
@@ -504,8 +937,14 @@ export declare function createBlockId(kind: string): string;
  */
 export declare const createInitialProps: <P>(plugin: BlockPlugin<P>) => P;
 
+export declare const DEFAULT_DPI = 96;
+
 export declare const DEFAULT_GRID: Grid;
 
+export declare const DEFAULT_GUIDE_BORDER: BorderStyle;
+
+export declare const DEFAULT_GUIDE_LINE: LineStyle;
+
 export declare const DEFAULT_PAPER: Paper;
 
 export declare const DEFAULT_PAPER_MARGIN: PaperMargin;
@@ -551,7 +990,7 @@ export declare interface Dimension<U extends Unit = Unit> {
 
 export declare const DimensionInput: <U extends Unit>(props: DimensionInputProps<U>) => default_2.ReactElement;
 
-declare interface DimensionInputConfig<U extends Unit> {
+export declare interface DimensionInputConfig<U extends Unit> {
     allowedUnits?: readonly U[];
     min?: number;
     max?: number;
@@ -608,6 +1047,59 @@ export declare function dimensionToString<U extends Unit>(dim: Dimension<U>): st
  */
 export declare function distributeRemainder(floatPixels: number[]): number[];
 
+/**
+ * ドラッグ状態の詳細情報
+ */
+export declare interface DraggingState {
+    /** ドラッグ種別 */
+    type: DragType;
+    /** ドラッグ対象のブロックID群 */
+    blockIds: string[];
+    /** 開始グリッド座標 */
+    startGrid: {
+        col: number;
+        row: number;
+    };
+    /** 現在のグリッド座標 */
+    currentGrid: {
+        col: number;
+        row: number;
+    };
+    /** 現在のマウス座標 (px, キャンバス相対) - キャンバス外でのゴースト表示用 */
+    currentMousePx?: {
+        x: number;
+        y: number;
+    };
+    /** リサイズ用: ハンドル位置 */
+    handle?: ResizeHandle;
+    /** 挿入用: プラグイン種別 */
+    pluginKind?: string;
+    /** 挿入用: デフォルトサイズ */
+    defaultSize?: {
+        w: number;
+        h: number;
+    };
+    /** キャンバス外フラグ (true: 範囲外でドロップすると削除) */
+    isOutside?: boolean;
+}
+
+export declare const DragLayer: MemoExoticComponent<({ blocks, pluginRegistry, gridLength, draggingState, getBlockRectPx, selectionStyle, ghostZIndex, selectBorderZIndex, blockHandlesZIndex, }: DragLayerProps) => JSX_2.Element | null>;
+
+export declare interface DragLayerProps {
+    blocks: Block[];
+    pluginRegistry: Record<string, BlockPlugin>;
+    gridLength: {
+        cols: number;
+        rows: number;
+    };
+    draggingState: DraggingState | undefined;
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    selectionStyle?: BorderStyle;
+    ghostZIndex?: number;
+    selectBorderZIndex?: number;
+    blockHandlesZIndex?: number;
+}
+
 /**
  * GlobalDragStore
  *
@@ -656,6 +1148,46 @@ export declare type DragState = {
     };
 } | null;
 
+/**
+ * ドラッグ種別
+ *
+ * @remarks
+ * ドラッグ操作の種類を型安全に扱うための列挙型
+ */
+export declare enum DragType {
+    /** ブロックの移動 */
+    MOVE = "move",
+    /** ブロックのリサイズ */
+    RESIZE = "resize",
+    /** 新規ブロックの挿入 */
+    INSERT = "insert"
+}
+
+export declare const EditingBlock: typeof ForwardedEditingBlock;
+
+export declare interface EditingBlockProps<P = Record<string, Value>, V = Value> {
+    /** ブロックID */
+    id: string;
+    /** プラグイン定義 */
+    plugin: BlockPlugin<P, V>;
+    /** プラグイン固有プロパティ */
+    props: P;
+    /** ブロックの現在値 */
+    value: V;
+    /** 値変更コールバック */
+    onChange: (value: V) => void;
+    /** 値確定コールバック (オプション) */
+    onBlur?: (value: V) => void;
+    /** ブロックの位置とサイズ（ピクセル単位） */
+    blockRectPx: BlockRectPx;
+    /** z-index (オプション、デフォルト: Z_INDEX.EDIT_BLOCK) */
+    zIndex?: number;
+    /** バリデーション状態 (オプション) */
+    validationState?: "valid" | "invalid" | "warning";
+    /** 追加のクラス名 */
+    className?: string;
+}
+
 /**
  * 印刷を実行(準備 + 印刷 + クリーンアップ)
  */
@@ -676,6 +1208,19 @@ export declare interface FeaturePlugin {
     kind: string;
 }
 
+/**
+ * 指定された座標にあるブロックを検索します
+ *
+ * @param point - 検索対象の座標 (Client/Offset座標ではなく、InteractionLayer内の相対座標)
+ * @param blocks - ブロックのリスト
+ * @param getBlockRectPx - ブロックからピクセル矩形を計算する関数 (useGridCalc由来)
+ * @returns 見つかったブロックのID。見つからない場合は null
+ */
+export declare function findBlockAtPoint(point: {
+    x: number;
+    y: number;
+}, blocks: Block[], getBlockRectPx: (block: Block) => BlockRectPx): string | null;
+
 export declare function findGridIndex(starts: readonly number[], maxStep: number, windowPx: number): (px: number) => number;
 
 export declare const FONT_UNITS: readonly ["px", "pt", "mm"];
@@ -705,6 +1250,14 @@ export declare interface FormSchema {
     metaData?: Record<string, Value>;
 }
 
+declare const ForwardedBlockRenderer: <P extends Record<string, Value> = Record<string, Value>, V extends Value = Value>(props: BlockRendererProps<P, V> & {
+    ref?: default_2.Ref<BlockRef>;
+}) => default_2.ReactElement;
+
+declare const ForwardedEditingBlock: <P extends Record<string, Value>, V extends Value>(props: EditingBlockProps<P, V> & {
+    ref?: default_2.ForwardedRef<BlockRef>;
+}) => default_2.ReactElement;
+
 /**
  * ブロックコンテナの共通スタイルを生成
  *
@@ -741,6 +1294,28 @@ export declare function getBlockContainerStyle(blockRectPx: BlockRectPx, options
  */
 export declare function getBlockZIndex(index: number): number;
 
+/**
+ * 選択中のブロックから共通の値を取得する
+ * 値がバラバラの場合は undefined を返す
+ *
+ * @param blocks 選択中のブロック配列
+ * @param path プロパティへのパス (例: "props.text", "layout.x", "style.backgroundColor")
+ * @returns 全ブロックで共通の値、または値が異なる場合は undefined
+ *
+ * @example
+ * ```ts
+ * // propsの値を取得
+ * const textValue = getCommonValue(blocks, "props.text");
+ *
+ * // layoutの値を取得
+ * const xPos = getCommonValue<number>(blocks, "layout.x");
+ *
+ * // styleの値を取得
+ * const bgColor = getCommonValue(blocks, "style.backgroundColor");
+ * ```
+ */
+export declare function getCommonValue<T = Value>(blocks: Block[], path: string): T | undefined;
+
 /**
  * サポートされる最大ブロック数を取得
  *
@@ -871,6 +1446,37 @@ export declare interface GridChangeEvent {
 
 export declare type GridChangeType = "resize" | "insert" | "delete" | "equalize";
 
+/**
+ * GridDimensionLabel - グリッド線間の寸法表示
+ *
+ * グリッド線と線の間に寸法（値と単位）を表示します。
+ * ダブルクリックで単位編集UIを表示します。
+ */
+export declare const GridDimensionLabel: MemoExoticComponent<({ direction, index, dimension, position, currentPxSize, marginLeftPx, marginTopPx, isNearCursor, resizingPxSize, onDimensionChange, }: GridDimensionLabelProps) => JSX_2.Element | null>;
+
+export declare interface GridDimensionLabelProps {
+    /** ラベルの方向 ('column' or 'row') */
+    direction: "column" | "row";
+    /** 次元のインデックス（配列のインデックス） */
+    index: number;
+    /** 寸法の値（Dimensionオブジェクト） */
+    dimension: Dimension<GridUnit>;
+    /** ラベルの位置 (px) - 中央座標 */
+    position: number;
+    /** 現在のpxサイズ（単位変換用） */
+    currentPxSize: number;
+    /** 印刷可能領域の左マージン (px) */
+    marginLeftPx: number;
+    /** 印刷可能領域の上マージン (px) */
+    marginTopPx: number;
+    /** カーソルが近い場合にのみ表示 */
+    isNearCursor: boolean;
+    /** リサイズ中のプレビューサイズ(px) - 指定時は単位変換して表示 */
+    resizingPxSize?: number;
+    /** 寸法更新時のコールバック */
+    onDimensionChange?: (direction: "column" | "row", index: number, dimension: Dimension<GridUnit>) => void;
+}
+
 /**
  * GridLayer - グリッドシステムの統合コンポーネント
  *
@@ -961,6 +1567,54 @@ export declare interface GridPosPx {
     rows: number[];
 }
 
+/**
+ * GridResizeHandle - グリッドリサイズ用のハンドル
+ *
+ * グリッド線の両端にハンドルを配置し、ドラッグでリサイズ可能にします。
+ * 設計文書に従い、「グリッド線そのもののドラッグは禁止」し、
+ * 「グリッド線の両端ハンドル」のみをドラッグ可能とします。
+ */
+export declare const GridResizeHandle: MemoExoticComponent<({ direction, index, position, marginLeftPx, marginTopPx, onResizeStart, onResize, onResizeEnd, }: GridResizeHandleProps) => JSX_2.Element>;
+
+/**
+ * @file GridResizeHandle.tsx
+ * @description グリッドリサイズ用のハンドルコンポーネント
+ */
+export declare interface GridResizeHandleProps {
+    /** ハンドルの方向 ('column' or 'row') */
+    direction: "column" | "row";
+    /** グリッドのインデックス (列なら列番号、行なら行番号) */
+    index: number;
+    /** ハンドルの位置 (px) - グリッド線の位置 */
+    position: number;
+    /** 印刷可能領域の左マージン (px) */
+    marginLeftPx: number;
+    /** 印刷可能領域の上マージン (px) */
+    marginTopPx: number;
+    /** リサイズ開始時のコールバック */
+    onResizeStart?: (direction: "column" | "row", index: number) => void;
+    /** リサイズ中のコールバック */
+    onResize?: (direction: "column" | "row", index: number, delta: number) => void;
+    /** リサイズ終了時のコールバック */
+    onResizeEnd?: (direction: "column" | "row", index: number, delta: number) => void;
+}
+
+/**
+ * GridSizePanel
+ * 行・列数を変更するパネル
+ */
+export declare const GridSizePanel: {
+    ({ grid, onGridChange }: GridSizePanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface GridSizePanelProps {
+    /** グリッド設定 */
+    grid: Grid;
+    /** グリッド変更時のコールバック */
+    onGridChange: (grid: Grid) => void;
+}
+
 export declare function gridToMms(dims: Dimension<GridUnit>[], contentSizeMm: number): number[];
 
 export declare function gridToPxs(dims: Dimension<GridUnit>[], contentSizeMm: number, dpi: number): number[];
@@ -994,6 +1648,256 @@ export declare interface ImageSchema {
     alt?: string;
 }
 
+/**
+ * ImportExportPanel
+ * スキーマと値のインポート/エクスポート機能を提供
+ */
+export declare const ImportExportPanel: {
+    ({ schema, values, onSchemaChange, onValuesChange, }: ImportExportPanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface ImportExportPanelProps {
+    /** スキーマ */
+    schema: FormSchema;
+    /** 値 */
+    values: Record<string, Value>;
+    /** スキーマ変更時のコールバック */
+    onSchemaChange: (schema: FormSchema) => void;
+    /** 値変更時のコールバック */
+    onValuesChange: (values: Record<string, Value>) => void;
+}
+
+export declare const InsertGhost: MemoExoticComponent<({ pluginRegistry, gridLength, getBlockRectPx, currentGrid, currentMousePx, pluginKind, defaultSize, isOutside, selectionStyle, ghostZIndex, selectBorderZIndex, blockHandlesZIndex, }: InsertGhostProps) => JSX_2.Element | null>;
+
+export declare interface InsertGhostProps {
+    pluginRegistry: Record<string, BlockPlugin>;
+    gridLength: {
+        cols: number;
+        rows: number;
+    };
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    currentGrid: {
+        col: number;
+        row: number;
+    };
+    currentMousePx?: {
+        x: number;
+        y: number;
+    };
+    pluginKind: string;
+    defaultSize: {
+        w: number;
+        h: number;
+    };
+    isOutside: boolean;
+    selectionStyle: BorderStyle;
+    ghostZIndex?: number;
+    selectBorderZIndex?: number;
+    blockHandlesZIndex?: number;
+}
+
+export declare const InteractionBlock: default_2.MemoExoticComponent<({ block, rect, showHandles, onResizeStart, activeHandle, selectionStyle, handleStyle, selectBorderZIndex, blockHandlesZIndex, }: InteractionBlockProps) => JSX_2.Element>;
+
+export declare interface InteractionBlockProps {
+    block: Block;
+    rect: BlockRectPx;
+    showHandles?: boolean;
+    onResizeStart?: (e: default_2.PointerEvent, handle: ResizeHandle) => void;
+    activeHandle?: ResizeHandle | null;
+    selectionStyle?: BorderStyle;
+    handleStyle?: typeof RESIZE_HANDLE_STYLE;
+    /** 選択枠のz-index (デフォルト: interactionZIndexs.select_border) */
+    selectBorderZIndex?: number;
+    /** リサイズハンドルのz-index (デフォルト: interactionZIndexs.block_handles) */
+    blockHandlesZIndex?: number;
+}
+
+/**
+ * インタラクション変更イベント
+ *
+ * @remarks
+ * OnBlockChangeと同じパターン (type付きUnion型)
+ * 全ての操作をこのイベントで表現する
+ */
+export declare type InteractionChangeEvent = {
+    type: InteractionEventType.SELECT;
+    blockIds: string[];
+    shiftKey?: boolean;
+} | {
+    type: InteractionEventType.DESELECT;
+} | {
+    type: InteractionEventType.START_PRESS;
+    blockId: string;
+    startGrid: {
+        col: number;
+        row: number;
+    };
+    selectedBlockIds?: string[];
+} | {
+    type: InteractionEventType.UPDATE_DRAG;
+    currentGrid: {
+        col: number;
+        row: number;
+    };
+    currentMousePx: {
+        x: number;
+        y: number;
+    };
+    isOutside?: boolean;
+} | {
+    type: InteractionEventType.END_DRAG;
+} | {
+    type: InteractionEventType.CANCEL_DRAG;
+} | {
+    type: InteractionEventType.EDIT;
+    blockId: string;
+} | {
+    type: InteractionEventType.END_EDIT;
+} | {
+    type: InteractionEventType.START_INSERT;
+    pluginKind: string;
+    defaultSize: {
+        w: number;
+        h: number;
+    };
+} | {
+    type: InteractionEventType.CANCEL_INSERT;
+} | {
+    type: InteractionEventType.START_RESIZE;
+    blockId: string;
+    handle: ResizeHandle;
+    startGrid: {
+        col: number;
+        row: number;
+    };
+};
+
+/**
+ * インタラクション変更イベント種別
+ *
+ * @remarks
+ * インタラクション変更イベントの種類を型安全に扱うための列挙型
+ */
+export declare enum InteractionEventType {
+    /** ブロックを選択 */
+    SELECT = "select",
+    /** 選択を解除 */
+    DESELECT = "deselect",
+    /** プレス開始（ドラッグ判定前） */
+    START_PRESS = "startPress",
+    /** ドラッグ更新 */
+    UPDATE_DRAG = "updateDrag",
+    /** ドラッグ終了 */
+    END_DRAG = "endDrag",
+    /** ドラッグキャンセル */
+    CANCEL_DRAG = "cancelDrag",
+    /** 編集開始 */
+    EDIT = "edit",
+    /** 編集終了 */
+    END_EDIT = "endEdit",
+    /** 挿入開始 */
+    START_INSERT = "startInsert",
+    /** 挿入キャンセル */
+    CANCEL_INSERT = "cancelInsert",
+    /** リサイズ開始 */
+    START_RESIZE = "startResize"
+}
+
+export declare const InteractionLayer: MemoExoticComponent<({ blocks, pluginRegistry, gridLength, getBlockRectPx, getColIndex, getRowIndex, state, onChange, onBlockChange, scale, className, selectionStyle, handleStyle, editBlockZIndex, selectBorderZIndex, blockHandlesZIndex, dragGhostZIndex, }: InteractionLayerProps) => JSX_2.Element>;
+
+/**
+ * InteractionLayerProps
+ */
+export declare interface InteractionLayerProps {
+    blocks: Block[];
+    pluginRegistry: Record<string, BlockPlugin>;
+    gridLength: {
+        cols: number;
+        rows: number;
+    };
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    getColIndex: (px: number) => number;
+    getRowIndex: (px: number) => number;
+    state: InteractionState;
+    onChange: OnInteractionChange;
+    onBlockChange?: OnBlockChange;
+    scale?: number;
+    className?: string;
+    selectionStyle?: BorderStyle;
+    handleStyle?: typeof RESIZE_HANDLE_STYLE;
+    editBlockZIndex?: number;
+    selectBorderZIndex?: number;
+    blockHandlesZIndex?: number;
+    dragGhostZIndex?: number;
+}
+
+/**
+ * インタラクションモード
+ *
+ * @remarks
+ * インタラクション操作の状態を型安全に扱うための列挙型
+ */
+export declare enum InteractionMode {
+    /** 待機状態 */
+    IDLE = "idle",
+    /** マウスダウン中（クリックかドラッグか判定前） */
+    PRESSING = "pressing",
+    /** ドラッグ確定 */
+    DRAGGING = "dragging",
+    /** 編集中 */
+    EDITING = "editing"
+}
+
+/**
+ * インタラクション状態 (単一オブジェクト)
+ *
+ * @remarks
+ * Pluginの `value` に相当する統合状態
+ * 全ての操作状態をこのオブジェクト1つで管理する
+ */
+export declare interface InteractionState {
+    /** 現在のモード */
+    mode: InteractionMode;
+    /** 選択中のブロックID群 */
+    selectedBlockIds: string[];
+    /** 編集中のブロックID (nullの場合は編集モードではない) */
+    editingBlockId: string | null;
+    /** ドラッグ中の状態 (ドラッグ中のみ有効) */
+    dragging?: DraggingState;
+}
+
+export declare const interactionZIndexs: {
+    readonly base: 2100000;
+    readonly select_block: 2000000;
+    readonly block_ghost: 2200000;
+    readonly hover_outline: 2300000;
+    readonly edit_block: 2400000;
+    readonly grid_ghost: 2700000;
+    readonly grid_handles: 2800000;
+    readonly select_border: 2500000;
+    readonly block_handles: 2600000;
+    readonly rubber_band: 2900000;
+};
+
+/**
+ * Hex カラー文字列の妥当性をチェック
+ * @param hex チェックする文字列
+ * @returns 妥当な Hex カラー文字列かどうか
+ */
+export declare function isValidHex(hex: string): boolean;
+
+export declare const LayoutPanel: default_2.FC<LayoutPanelProps>;
+
+export declare interface LayoutPanelProps {
+    selectedBlocks: Block[];
+    onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
+    gridSize?: {
+        cols: number;
+        rows: number;
+    };
+}
+
 export declare interface LineStyle {
     color: string;
     width: Dimension<BorderUnit>;
@@ -1032,8 +1936,55 @@ export declare interface MarginOverlayProps {
     className?: string;
 }
 
+/**
+ * MarginPanel
+ * マージンを変更するパネル
+ */
+export declare const MarginPanel: {
+    ({ paper, onPaperChange }: MarginPanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface MarginPanelProps {
+    /** 用紙設定 */
+    paper: Paper;
+    /** 用紙変更時のコールバック */
+    onPaperChange: (paper: Paper) => void;
+}
+
+export declare const MetaPanel: default_2.FC<MetaPanelProps>;
+
+export declare interface MetaPanelProps {
+    selectedBlocks: Block[];
+    onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
+}
+
 export declare function mmsToPxs(mms: number[], dpi?: number): number[];
 
+export declare const MovingGhost: MemoExoticComponent<({ blocks, pluginRegistry, gridLength, getBlockRectPx, selectedBlockIds, deltaCol, deltaRow, isOutside, currentMousePx, selectionStyle, ghostZIndex, selectBorderZIndex, blockHandlesZIndex, }: MovingGhostProps) => JSX_2.Element>;
+
+export declare interface MovingGhostProps {
+    blocks: Block[];
+    pluginRegistry: Record<string, BlockPlugin>;
+    gridLength: {
+        cols: number;
+        rows: number;
+    };
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    selectedBlockIds: string[];
+    deltaCol: number;
+    deltaRow: number;
+    isOutside: boolean;
+    currentMousePx?: {
+        x: number;
+        y: number;
+    };
+    selectionStyle: BorderStyle;
+    ghostZIndex?: number;
+    selectBorderZIndex?: number;
+    blockHandlesZIndex?: number;
+}
+
 export declare const multilineDefinition: PluginProperties<MultilineSchema>;
 
 export declare interface MultilineSchema {
@@ -1127,7 +2078,7 @@ export declare const NumberInput: {
     displayName: string;
 };
 
-declare interface NumberInputConfig {
+export declare interface NumberInputConfig {
     min?: number;
     max?: number;
     step?: number;
@@ -1162,6 +2113,15 @@ export declare type OnError = (error: Error, context?: string) => void;
 
 export declare type OnGridChange = (event: GridChangeEvent) => void;
 
+/**
+ * インタラクション変更コールバック
+ *
+ * @remarks
+ * Pluginの `onChange` に相当
+ * 全ての操作変更をこの1つのコールバックで処理する
+ */
+export declare type OnInteractionChange = (event: InteractionChangeEvent) => void;
+
 export declare type OnPaperChange = (event: PaperChangeEvent) => void;
 
 export declare type OnSchemaChange = (schema: FormSchema) => void;
@@ -1177,6 +2137,27 @@ export declare type OnValuesChange = (values: Record<string, Value>) => void;
  */
 export declare type Orientation = "portrait" | "landscape";
 
+/**
+ * OtherPanel
+ * その他の設定の統合パネル
+ * - ImportExportPanel: スキーマ・値のインポート/エクスポート
+ */
+export declare const OtherPanel: {
+    ({ schema, values, onSchemaChange, onValuesChange, }: OtherPanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface OtherPanelProps {
+    /** フォームスキーマ */
+    schema: FormSchema;
+    /** 入力データ */
+    values: Record<string, Value>;
+    /** スキーマ変更時のコールバック */
+    onSchemaChange: (newSchema: FormSchema) => void;
+    /** 入力データ変更時のコールバック */
+    onValuesChange: (newValues: Record<string, Value>) => void;
+}
+
 export declare const PADDING_UNITS: readonly ["mm", "pt", "px", "%"];
 
 /**
@@ -1207,7 +2188,7 @@ export declare const PalettePanel: {
     displayName: string;
 };
 
-declare interface PalettePanelProps {
+export declare interface PalettePanelProps {
     /** 利用可能なプラグイン一覧 */
     plugins: BlockPlugin[];
     /** カスタムクラス名 */
@@ -1264,6 +2245,22 @@ export declare interface PaperSize {
     height: Dimension<PaperUnit>;
 }
 
+/**
+ * PaperSizePanel
+ * 用紙サイズを変更するパネル
+ */
+export declare const PaperSizePanel: {
+    ({ paper, onPaperChange, }: PaperSizePanelProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface PaperSizePanelProps {
+    /** 用紙設定 */
+    paper: Paper;
+    /** 用紙変更時のコールバック */
+    onPaperChange: (paper: Paper) => void;
+}
+
 export declare enum PaperSizePreset {
     A4 = "A4",
     B5 = "B5",
@@ -1275,6 +2272,13 @@ export declare enum PaperSizePreset {
 
 export declare type PaperUnit = (typeof PAPER_UNITS)[number];
 
+/**
+ * カラー文字列を RGBA オブジェクトに変換
+ * @param value カラー文字列 (#RRGGBB, #RRGGBBAA, rgba(r,g,b,a), undefined)
+ * @returns RGBA オブジェクト、または null（変換失敗時）
+ */
+export declare function parseColor(value: string | undefined): RGBA | null;
+
 /**
  * PlaceholderSchema の実体定義
  */
@@ -1298,6 +2302,14 @@ export declare interface PluginIconProps {
     style?: default_2.CSSProperties;
 }
 
+export declare const PluginPanels: React.FC<PluginPanelsProps>;
+
+export declare interface PluginPanelsProps {
+    selectedBlocks: Block[];
+    pluginRegistry: Record<string, BlockPlugin>;
+    onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
+}
+
 export declare type PluginProperties<P> = {
     [K in keyof P]-?: PropertyConfig<P[K], P>;
 };
@@ -1378,6 +2390,15 @@ declare interface PropertyDefinition_2<T, Context = Record<string, Value>> {
 }
 export { PropertyDefinition_2 as PropertyDefinition }
 
+export declare const PropertyField: MemoExoticComponent<({ propertyKey, definition, selectedBlocks, onChange, }: PropertyFieldProps) => JSX_2.Element | null>;
+
+export declare interface PropertyFieldProps {
+    propertyKey: string;
+    definition: PropertyDefinition_2<Value, Record<string, Value>>;
+    selectedBlocks: Block[];
+    onChange: (key: string, val: Value) => void;
+}
+
 /**
  * @file objectUtils.ts
  * @description オブジェクト操作のユーティリティ関数
@@ -1409,6 +2430,113 @@ export declare interface RendererProps<P = Record<string, Value>, V = Value> {
     validationState?: "valid" | "invalid" | "warning";
 }
 
+export declare const RESIZE_HANDLE_STYLE: ResizeHandleStyle;
+
+export declare const ResizeGhost: MemoExoticComponent<({ blocks, pluginRegistry, gridLength, getBlockRectPx, blockId, handle, deltaCol, deltaRow, isOutside, selectionStyle, ghostZIndex, selectBorderZIndex, blockHandlesZIndex, }: ResizeGhostProps) => JSX_2.Element | null>;
+
+export declare interface ResizeGhostProps {
+    blocks: Block[];
+    pluginRegistry: Record<string, BlockPlugin>;
+    gridLength: {
+        cols: number;
+        rows: number;
+    };
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    blockId: string;
+    handle: ResizeHandle;
+    deltaCol: number;
+    deltaRow: number;
+    isOutside: boolean;
+    selectionStyle: BorderStyle;
+    ghostZIndex?: number;
+    selectBorderZIndex?: number;
+    blockHandlesZIndex?: number;
+}
+
+/**
+ * リサイズハンドル方向
+ *
+ * @remarks
+ * 8方向のリサイズハンドルを型安全に扱うための列挙型
+ */
+export declare enum ResizeHandle {
+    /** 北（上） */
+    N = "n",
+    /** 北東（右上） */
+    NE = "ne",
+    /** 東（右） */
+    E = "e",
+    /** 南東（右下） */
+    SE = "se",
+    /** 南（下） */
+    S = "s",
+    /** 南西（左下） */
+    SW = "sw",
+    /** 西（左） */
+    W = "w",
+    /** 北西（左上） */
+    NW = "nw"
+}
+
+export declare const ResizeHandles: default_2.MemoExoticComponent<({ onResizeStart, activeHandle, handleStyle, zIndex, }: ResizeHandlesProps) => JSX_2.Element>;
+
+export declare interface ResizeHandlesProps {
+    onResizeStart: (e: default_2.PointerEvent, handle: ResizeHandle) => void;
+    activeHandle?: ResizeHandle | null;
+    handleStyle?: ResizeHandleStyle;
+    zIndex?: number;
+}
+
+export declare interface ResizeHandleStyle {
+    size: number;
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: string;
+}
+
+/**
+ * リサイズ計算パラメータ
+ */
+export declare interface ResizeParams {
+    /** 現在のレイアウト */
+    layout: BlockLayout;
+    /** リサイズハンドル */
+    handle: ResizeHandle;
+    /** 列方向の移動量 */
+    deltaCol: number;
+    /** 行方向の移動量 */
+    deltaRow: number;
+    /** グリッドの列数 */
+    gridCols: number;
+    /** グリッドの行数 */
+    gridRows: number;
+}
+
+/**
+ * RGBA カラー型定義
+ */
+export declare interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
+/**
+ * RGBA入力コンポーネント
+ */
+export declare const RGBAInputs: {
+    ({ rgba, onChange, readOnly, }: RGBAInputsProps): default_2.ReactElement;
+    displayName: string;
+};
+
+export declare interface RGBAInputsProps {
+    rgba: RGBA;
+    onChange: (channel: keyof RGBA, value: number | undefined) => void;
+    readOnly?: boolean;
+}
+
 /**
  * ドロップダウン選択コンポーネント
  */
@@ -1420,7 +2548,7 @@ export declare const Select: {
 /**
  * Config型定義
  */
-declare interface SelectConfig {
+export declare interface SelectConfig {
     options?: readonly SelectOption[];
     placeholder?: string;
     width?: number;
@@ -1428,6 +2556,34 @@ declare interface SelectConfig {
     [key: string]: Value;
 }
 
+export declare const SELECTION_STYLE: BorderStyle;
+
+export declare const SelectionBorder: MemoExoticComponent<({ width, height, zIndex, borderStyle, }: SelectionBorderProps) => JSX_2.Element>;
+
+declare interface SelectionBorderProps {
+    width: number;
+    height: number;
+    zIndex?: number;
+    borderStyle?: BorderStyle;
+}
+
+export declare const SelectionLayer: default_2.MemoExoticComponent<({ blocks, selectedBlockIds, isDragging, draggingState, getBlockRectPx, onResizeStart, selectionStyle, handleStyle, selectBorderZIndex, blockHandlesZIndex, }: SelectionLayerProps) => JSX_2.Element | null>;
+
+export declare interface SelectionLayerProps {
+    blocks: Block[];
+    selectedBlockIds: string[];
+    isDragging: boolean;
+    draggingState?: DraggingState;
+    getBlockRectPx: (block: Block) => BlockRectPx;
+    onResizeStart: (e: default_2.PointerEvent, handle: ResizeHandle, blockId: string) => void;
+    selectionStyle?: BorderStyle;
+    handleStyle?: typeof RESIZE_HANDLE_STYLE;
+    /** 選択枠のz-index (デフォルト: interactionZIndexs.select_border) */
+    selectBorderZIndex?: number;
+    /** リサイズハンドルのz-index (デフォルト: interactionZIndexs.block_handles) */
+    blockHandlesZIndex?: number;
+}
+
 /**
  * 選択肢の型
  */
@@ -1503,7 +2659,7 @@ export declare const Sidebar: {
     displayName: string;
 };
 
-declare interface SidebarProps {
+export declare interface SidebarProps {
     /** 全ブロック */
     blocks: Block[];
     /** 選択中のブロックID一覧 */
@@ -1550,6 +2706,21 @@ export declare function stringsToDimensions<U extends Unit>(strs: string[], allo
 
 export declare function stringToDimension<U extends Unit>(str: string, allowedUnits: readonly U[]): Dimension<U>;
 
+/**
+ * TabPanel
+ * タブコンテンツの共通ラッパー
+ */
+export declare const TabPanel: ({ children, emptyMessage, className, }: TabPanelProps) => JSX_2.Element;
+
+export declare interface TabPanelProps {
+    /** パネルの内容 */
+    children: ReactNode;
+    /** 空状態のメッセージ（childrenがない場合に表示） */
+    emptyMessage?: string;
+    /** カスタムクラス名 */
+    className?: string;
+}
+
 export declare const Tabs: default_2.FC<TabsProps>;
 
 export declare const TabsContent: default_2.FC<TabsContentProps>;
@@ -1603,7 +2774,7 @@ export declare const TextInput: {
  * Config型定義
  * Record<string, Value> との互換性を持たせる
  */
-declare interface TextInputConfig {
+export declare interface TextInputConfig {
     placeholder?: string;
     maxLength?: number;
     multiline?: boolean;
@@ -1628,6 +2799,13 @@ export declare interface TextInputProps extends PropertyComponentProps<string |
     onBlur?: () => void;
 }
 
+/**
+ * RGBA オブジェクトを Hex 文字列に変換
+ * @param rgba RGBA オブジェクト
+ * @returns #RRGGBB または #RRGGBBAA 形式の文字列、透明の場合は undefined
+ */
+export declare function toHex(rgba: RGBA): string | undefined;
+
 export declare const toMm: {
     fromCm(cm: number): number;
     fromInch(inch: number): number;
@@ -1646,6 +2824,13 @@ export declare const toPx: {
     fromDim<U extends Unit>(dim: Dimension<U>, dpi?: number, baseSizePx?: number): number;
 };
 
+/**
+ * RGBA オブジェクトを rgba() 文字列に変換
+ * @param rgba RGBA オブジェクト
+ * @returns rgba(r, g, b, a) 形式の文字列、透明の場合は undefined
+ */
+export declare function toRgbaString(rgba: RGBA): string | undefined;
+
 export declare type Unit = (typeof ALL_UNITS)[number];
 
 /**
@@ -1689,6 +2874,43 @@ export declare const universalProperties: {
     readonly alignItems: PropertyConfig<VerticalAlign | undefined, AlignmentSchema>;
 };
 
+export declare function useGridCalc(paper: Paper, grid: Grid, dpi?: number): {
+    paperPx: PaperPx;
+    gridPosPx: GridPosPx;
+    getColIndex: (px: number) => number;
+    getRowIndex: (px: number) => number;
+    getBlockRectPx: (block: Block) => BlockRectPx;
+};
+
+/**
+ * インタラクション状態管理Hook
+ *
+ * @remarks
+ * Reducer的なロジックを内包、外部からはシンプルなAPIのみ公開
+ *
+ * **核心機能**: グリッド変化判定によるドラッグ確定
+ * - `mode: 'pressing'` でグリッドをまたいだら → `mode: 'dragging'` に遷移
+ * - ピクセル閾値 (5px) は使わない
+ *
+ * @param initialState - 初期状態 (オプション)
+ * @returns [state, handleChange] - 状態とコールバック
+ *
+ * @example
+ * ```tsx
+ * const [state, onChange] = useInteractionState();
+ *
+ * // ブロックをクリック
+ * onChange({ type: InteractionEventType.SELECT, blockIds: ['block-1'] });
+ *
+ * // ドラッグ開始 (まだpressing)
+ * onChange({ type: InteractionEventType.START_PRESS, blockId: 'block-1', startGrid: { col: 0, row: 0 } });
+ *
+ * // グリッドをまたぐ (自動的にdraggingへ遷移)
+ * onChange({ type: InteractionEventType.UPDATE_DRAG, currentGrid: { col: 1, row: 0 } });
+ * ```
+ */
+export declare function useInteractionState(initialState?: Partial<InteractionState>): readonly [InteractionState, (event: InteractionChangeEvent) => void];
+
 /**
  * 未知の値がFormSchemaかどうかをバリデーションし、型安全に変換
  *