@aiquants/resize-panels 0.2.0

package/README.md

@@ -0,0 +1,192 @@
+# @aiquants/resize-panels
+
+React 向けのリサイズ可能なパネルレイアウトコンポーネント集です。`~/components/elements/ResizablePanels` で培ったロジックをパッケージ化し、任意のアプリケーションから再利用できるようにしました。
+
+## 主な特徴
+
+- `PanelGroup` と `Panel` と `PanelResizeHandle` を中核に、リデューサーでレイアウトと DOM 計測を同期
+- `calculateSnapThreshold` とノイズ除去ロジックでリサイズ時の揺らぎを抑え、意図しない折りたたみを防止
+- `collapsible` パネルと `usePanelControls` により、ドラッグ操作と UI 操作の両方で折りたたみ / 展開を制御
+- `autoSaveId` を指定するとローカルストレージにパネルサイズを自動保存し、再読み込み時に復元
+- `showDebugInfo` を使えば `PanelDebugInfo` とグローバルオーバーレイで計測結果や制約違反を可視化
+
+## インストール
+
+ワークスペース内で利用する場合は `pnpm` を利用します。
+
+```bash
+pnpm add @aiquants/resize-panels
+```
+
+モノレポ内から参照する場合は `package.json` に次のように記載します。
+
+```json
+{
+    "dependencies": {
+        "@aiquants/resize-panels": "workspace:*"
+    }
+}
+```
+
+## クイックスタート
+
+```tsx
+import { useId } from "react"
+import { PanelGroup, Panel, PanelResizeHandle } from "@aiquants/resize-panels"
+
+export const Example = () => {
+    const baseId = useId()
+
+    return (
+        <PanelGroup id={`${baseId}-group`} direction="horizontal" className="h-96">
+            <Panel id={`${baseId}-left`} defaultSize={{ value: 200, unit: "pixels" }} className="bg-slate-100">
+                左パネル
+            </Panel>
+            <PanelResizeHandle id={`${baseId}-handle`} />
+            <Panel id={`${baseId}-right`} defaultSize={{ value: 60, unit: "percentage" }} className="bg-slate-50">
+                右パネル
+            </Panel>
+        </PanelGroup>
+    )
+}
+```
+
+### 折りたたみを有効にする
+
+`Panel` に `collapsible` を指定すると、対応する `PanelResizeHandle` を端までドラッグしたタイミングで自動的に折りたたみ・展開が行われます。`defaultCollapsed` を併用すると初期状態を折りたたみ済みに設定できます。
+
+```tsx
+<PanelGroup direction="horizontal" className="h-96">
+    <Panel id="sidebar" defaultSize={{ value: 240, unit: "pixels" }} collapsible>
+        サイドバー
+    </Panel>
+    <PanelResizeHandle id="handle" />
+    <Panel id="main" defaultSize={{ value: 60, unit: "percentage" }}>
+        メインコンテンツ
+    </Panel>
+</PanelGroup>
+```
+
+### UI から折りたたみ / 展開を切り替える
+
+`usePanelControls(panelId)` フックを使うと、任意の UI から対象パネルを折りたたみ・展開・トグルできます。ボタンを配置するコンポーネントは `PanelGroup` の配下（コンテキスト内）に置いてください。折りたたみ後もボタンを表示したい場合は、別パネルやヘッダーなど常に可視な場所に設置します。
+
+```tsx
+import { PanelGroup, Panel, PanelResizeHandle, usePanelControls } from "@aiquants/resize-panels"
+
+const PanelToggleButtons = ({ panelId, label }: { panelId: string; label: string }) => {
+    const { isCollapsed, collapse, expand, toggle } = usePanelControls(panelId)
+
+    return (
+        <div className="flex items-center gap-2">
+            <span>{label}</span>
+            <button onClick={() => collapse()} disabled={isCollapsed}>
+                折りたたむ
+            </button>
+            <button onClick={() => expand()} disabled={!isCollapsed}>
+                展開する
+            </button>
+            <button onClick={() => toggle()}>
+                {isCollapsed ? "展開に切り替え" : "折りたたみに切り替え"}
+            </button>
+        </div>
+    )
+}
+
+export const Example = () => (
+    <PanelGroup direction="horizontal" className="h-96">
+        <Panel id="sidebar" defaultSize={{ value: 240, unit: "pixels" }} collapsible>
+            <PanelToggleButtons panelId="sidebar" label="サイドバー" />
+        </Panel>
+        <PanelResizeHandle id="split" />
+        <Panel id="main" defaultSize={{ value: 60, unit: "percentage" }}>
+            <PanelToggleButtons panelId="details" label="詳細パネル" />
+        </Panel>
+        <PanelResizeHandle id="split-right" />
+        <Panel id="details" defaultSize={{ value: 40, unit: "percentage" }} collapsible>
+            詳細
+        </Panel>
+    </PanelGroup>
+)
+```
+
+`collapse()` はパネルを非表示にし、`expand()` はドラッグ操作と同じロジックで直前のサイズや推奨サイズを復元します。`toggle()` を使うと現在の状態に応じて自動的に切り替わります。
+
+## コンポーネント API
+
+### PanelGroup の主なプロパティ
+
+| プロパティ | 型 | 説明 |
+|-------------|----|------|
+| `id` | `string` | `data-panel-group-id` にも反映される識別子。複数グループを並べる場合は指定を推奨 |
+| `direction` | `'horizontal' \| 'vertical'` | パネルの配置方向 |
+| `className` / `style` | `string` / `React.CSSProperties` | コンテナの見た目を調整するための追加スタイル |
+| `children` | `React.ReactNode` | グループ内の `Panel` と `PanelResizeHandle` を並べるための子要素 |
+| `showDebugInfo` | `boolean` | `PanelDebugInfo` とグローバルオーバーレイを表示して計測結果と制約違反を可視化 |
+| `onLayout` | `(sizes: number[]) => void` | リサイズや初期化のたびに最新のピクセルサイズ配列を通知 |
+| `autoSaveId` | `string` | 指定すると `localStorage` にパネルサイズを保存・復元 |
+
+### Panel の主なプロパティ
+
+| プロパティ | 型 | 説明 |
+|-------------|----|------|
+| `id` | `string` | パネル識別子。省略時はランダム生成だが、SSR との整合のため明示指定を推奨 |
+| `defaultSize` | `{ value: number; unit: 'pixels' \| 'percentage' } \| number` | 初期サイズ。数値のみの場合はパーセンテージとして扱う |
+| `minSize` / `maxSize` | `FlexibleSize` | パネルの最小・最大サイズ制約。ピクセル・割合で指定可能 |
+| `collapsible` | `boolean` | ハンドルを端までドラッグした際に折りたたみ可能にするかどうか |
+| `defaultCollapsed` | `boolean` | 初期状態を折りたたみ済みにするかどうか |
+| `pixelAdjustPriority` | `number` | 余白調整時にピクセル基準パネルへ割り当てる優先度 |
+| `className` / `style` | `string` / `React.CSSProperties` | パネル本体の見た目をカスタマイズ |
+
+### PanelResizeHandle の主なプロパティ
+
+| プロパティ | 型 | 説明 |
+|-------------|----|------|
+| `id` | `string` | ハンドル識別子。省略時はランダム生成 |
+| `disabled` | `boolean` | `true` にするとドラッグ操作を無効化 |
+| `onDragging` | `(isDragging: boolean) => void` | ドラッグ開始 / 終了ごとに呼び出されるコールバック |
+| `className` / `style` | `string` / `React.CSSProperties` | ハンドル見た目を追加カスタマイズ |
+| `children` | `React.ReactNode` | 独自のハンドルインジケーターを描画する場合に使用 |
+
+## フックとユーティリティ
+
+- `useResizablePanels`: `PanelGroup` 内部実装でも利用しているフック。カスタムコンテナを作る場合に役立ちます。
+- `usePanelGroup`: コンテキストを直接参照し、パネルリストやレイアウト情報を取得できます。
+- `usePanelControls`: 特定パネルに対する折りたたみ / 展開操作を提供します。
+- `generatePanelId` と `generateResizeHandleId`: SSR と CSR の双方で衝突しにくい ID を生成します。
+- `saveLayout` と `loadLayout`: 任意のタイミングでレイアウトを永続化 / 復元できます。
+- `getPanelElement`, `getPanelGroupElement`, `getResizeHandleElement`: `data-*` 属性をもとに DOM 要素を取得します。
+
+## レイアウト保存と復元
+
+`PanelGroup` に `autoSaveId` を指定すると、`ResizeObserver` が安定した後のパネルサイズを 200ms デバウンス付きで `localStorage` に保存します。ページを再読み込みすると `loadLayout(autoSaveId)` の結果が自動的に反映され、ピクセル基準パネルと割合基準パネルの両方が復元されます。手動で制御したい場合は公開ユーティリティの `saveLayout` / `loadLayout` を直接呼び出してください。
+
+## デバッグと可視化
+
+`PanelGroup` の `showDebugInfo` を有効にすると、各 `Panel` に `PanelDebugInfo` が表示され、折りたたみ状態・計測サイズ・保持中の割合が即座に確認できます。同時にグローバルオーバーレイが開き、コンテナの実測サイズ、制約違反の有無、ハンドル厚み（`PANEL_HANDLE_THICKNESS` で定義された 8px）なども一覧できます。
+
+## スナップとノイズ対策の挙動
+
+`PanelResizeHandle` と `Panel` の両方で `calculateSnapThreshold` を利用し、コンテナサイズに応じたゼロスナップ閾値を共有しています。`Panel` コンポーネントでは ResizeObserver が一時的に極端な値を返した場合でも、`noiseThreshold` を用いたフィルタでチラつきを防ぎ、リデューサーが保持する状態と DOM 計測値の整合を保ちます。
+
+## スタイル
+
+`src/styles.css` で Tailwind CSS レイヤーを読み込んでいます。グローバルに取り込み済みの環境では追加設定不要ですが、個別プロジェクトでユーティリティクラスを無効化したい場合はローカルの Tailwind 設定でオーバーライドしてください。
+
+## デモ
+
+モノレポ内に簡易デモアプリを用意しています。
+
+```bash
+pnpm --filter '@aiquants/resize-panels-demo' dev
+```
+
+`http://localhost:5175` にアクセスすると複数レイアウトを含むデモを確認できます。
+
+## ビルド
+
+```bash
+pnpm --filter '@aiquants/resize-panels' build
+```
+
+生成物は `dist` に出力されます。

package/dist/Panel.d.ts

@@ -0,0 +1,8 @@
+import { PanelProps } from './types';
+
+/**
+ * Render a resizable panel within a managed group, keeping DOM measurements in sync with reducer state.
+ * 管理対象グループ内で DOM 計測とリデューサー状態を同期させながらリサイズ可能パネルを描画するコンポーネント。
+ */
+export declare const Panel: import('react').MemoExoticComponent<({ id: providedId, defaultSize, minSize, maxSize, className, style, children, order, collapsible, defaultCollapsed, pixelAdjustPriority }: PanelProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC;;;GAGG;AACH,eAAO,MAAM,KAAK,iLAA2M,UAAU,6CAmerO,CAAA"}

package/dist/PanelDebugInfo.d.ts

@@ -0,0 +1,29 @@
+import { PanelDirection, PanelLayoutData } from './types';
+
+type PanelDebugInfoProps = {
+    panel: PanelLayoutData | undefined;
+    isLastFlexiblePanel: boolean;
+    measuredPixelSize: number;
+    measuredPercentageSize: number;
+    containerAxisSize: number;
+    direction: PanelDirection;
+};
+type FormatPanelDebugInfoArgs = {
+    panel: PanelLayoutData | undefined;
+    isLastFlexiblePanel: boolean;
+    measuredPixelSize: number;
+    measuredPercentageSize: number;
+    containerAxisSize: number;
+    containerLabel: string;
+};
+type FormattedPanelDebugInfo = {
+    stateValueDisplay: string;
+    measuredValueDisplay: string;
+    containerDisplay: string;
+    headlineLabel: string;
+    titleText: string;
+};
+export declare const formatPanelDebugInfo: ({ panel, isLastFlexiblePanel, measuredPixelSize, measuredPercentageSize, containerAxisSize, containerLabel }: FormatPanelDebugInfoArgs) => FormattedPanelDebugInfo;
+export declare const PanelDebugInfo: import('react').MemoExoticComponent<({ panel, isLastFlexiblePanel, measuredPixelSize, measuredPercentageSize, containerAxisSize, direction }: PanelDebugInfoProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=PanelDebugInfo.d.ts.map

package/dist/PanelDebugInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDebugInfo.d.ts","sourceRoot":"","sources":["../src/PanelDebugInfo.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9D,KAAK,mBAAmB,GAAG;IACvB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,mBAAmB,EAAE,OAAO,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,cAAc,CAAA;CAC5B,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC5B,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,mBAAmB,EAAE,OAAO,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,8GAA8G,wBAAwB,KAAG,uBAkB7K,CAAA;AAED,eAAO,MAAM,cAAc,gJAAkH,mBAAmB,6CAgG9J,CAAA"}

package/dist/PanelGroup.d.ts

@@ -0,0 +1,8 @@
+import { PanelGroupProps } from './types';
+
+/**
+ * Provide layout context and container for coordinated panels.
+ * 連動するパネルのためのレイアウトコンテキストとコンテナを提供するコンポーネント。
+ */
+export declare const PanelGroup: (props: PanelGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PanelGroup.d.ts.map

package/dist/PanelGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGroup.d.ts","sourceRoot":"","sources":["../src/PanelGroup.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AA+B9C;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CA+KhD,CAAA"}

package/dist/PanelResizeHandle.d.ts

@@ -0,0 +1,8 @@
+import { PanelResizeHandleProps } from './types';
+
+/**
+ * Render an interactive divider that manages adjacent panel resizing gestures.
+ * 隣接パネルのリサイズ操作を管理するインタラクティブなディバイダーを描画するコンポーネント。
+ */
+export declare const PanelResizeHandle: import('react').MemoExoticComponent<({ id, disabled, className, style, children, onDragging }: PanelResizeHandleProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=PanelResizeHandle.d.ts.map

package/dist/PanelResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EASH,KAAK,sBAAsB,EAE9B,MAAM,SAAS,CAAA;AAGhB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iGAA2E,sBAAsB,6CAmjB7H,CAAA"}

package/dist/context.d.ts

@@ -0,0 +1,13 @@
+import { PanelGroupContextValue } from './types';
+
+/**
+ * Provide shared panel group state to descendant components.
+ * 子孫コンポーネントへパネルグループの共有状態を提供するコンテキスト。
+ */
+export declare const PanelGroupContext: import('react').Context<PanelGroupContextValue | null>;
+/**
+ * Access panel group behaviors and layout data from the nearest provider.
+ * 最も近いプロバイダーからパネルグループの振る舞いとレイアウトデータを取得するフック。
+ */
+export declare const usePanelGroup: () => PanelGroupContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,wDAAqD,CAAA;AAEnF;;;GAGG;AACH,eAAO,MAAM,aAAa,8BAMzB,CAAA"}

package/dist/debugOverlayStore.d.ts

@@ -0,0 +1,62 @@
+import { ContainerSize, PanelDirection, PanelLayoutData, ResizeHandleLayoutData } from './types';
+
+/**
+ * Snapshot of the debug overlay state across panel groups.
+ * デバッグオーバーレイのスナップショット状態を表す構造体。
+ */
+export type DebugOverlaySnapshot = {
+    ownerId: string | null;
+    groups: DebugGroupState[];
+};
+/**
+ * Aggregated state for a panel group tracked by the debug overlay.
+ * デバッグオーバーレイが追跡するパネルグループの集約状態。
+ */
+export type DebugGroupState = {
+    groupId: string;
+    displayName: string;
+    direction: PanelDirection;
+    containerSize: ContainerSize;
+    panels: PanelLayoutData[];
+    handles: ResizeHandleLayoutData[];
+    index: number;
+};
+type DebugGroupUpdate = {
+    displayName: string;
+    direction: PanelDirection;
+    containerSize: ContainerSize;
+    panels: PanelLayoutData[];
+    handles: ResizeHandleLayoutData[];
+};
+/**
+ * Subscribe to the identifier of the panel group that renders the overlay.
+ * オーバーレイを描画するパネルグループ識別子を購読するフック。
+ */
+export declare const useDebugOverlayOwnerId: () => string | null;
+/**
+ * Subscribe to the aggregate debug overlay snapshot.
+ * 集約されたデバッグオーバーレイのスナップショットを購読するフック。
+ */
+export declare const useDebugOverlaySnapshot: () => DebugOverlaySnapshot;
+/**
+ * Enable a panel group for inclusion in the debug overlay.
+ * デバッグオーバーレイへの取り込み対象としてパネルグループを有効化するメソッド。
+ */
+export declare const enableDebugOverlayGroup: (groupId: string) => void;
+/**
+ * Disable a panel group from the debug overlay without erasing cached data.
+ * キャッシュを保持したままパネルグループをデバッグオーバーレイ対象から外すメソッド。
+ */
+export declare const disableDebugOverlayGroup: (groupId: string) => void;
+/**
+ * Persist the latest panel group measurements into the debug overlay store.
+ * 最新のパネルグループ測定値をデバッグオーバーレイストアに保存するメソッド。
+ */
+export declare const updateDebugOverlayGroup: (groupId: string, update: DebugGroupUpdate) => void;
+/**
+ * Remove a panel group from the debug overlay store entirely.
+ * パネルグループをデバッグオーバーレイストアから完全に削除するメソッド。
+ */
+export declare const removeDebugOverlayGroup: (groupId: string) => void;
+export {};
+//# sourceMappingURL=debugOverlayStore.d.ts.map

package/dist/debugOverlayStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debugOverlayStore.d.ts","sourceRoot":"","sources":["../src/debugOverlayStore.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErG;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,MAAM,EAAE,eAAe,EAAE,CAAA;CAC5B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,cAAc,CAAA;IACzB,aAAa,EAAE,aAAa,CAAA;IAC5B,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,KAAK,gBAAgB,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,cAAc,CAAA;IACzB,aAAa,EAAE,aAAa,CAAA;IAC5B,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,OAAO,EAAE,sBAAsB,EAAE,CAAA;CACpC,CAAA;AAmQD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,qBAElC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,4BAEnC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,SAAS,MAAM,SAEtD,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GAAI,SAAS,MAAM,SAEvD,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,SAAS,MAAM,EAAE,QAAQ,gBAAgB,SAEhF,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,SAAS,MAAM,SAEtD,CAAA"}

package/dist/hooks.d.ts

@@ -0,0 +1,44 @@
+import { CSSProperties } from 'react';
+import { LayoutConstraintViolation, PanelGroupProps, PanelLayoutData, PanelMeasurement, ResizeHandleLayoutData } from './types';
+
+/**
+ * Orchestrate registration, constraint resolution, measurement sync, and persistence for a panel group.
+ * パネルグループにおける登録処理・制約判定・計測同期・永続化の統括。
+ */
+export declare const useResizablePanels: ({ direction, style, onLayout, autoSaveId, showDebugInfo }: PanelGroupProps) => {
+    groupRef: import('react').RefObject<HTMLDivElement | null>;
+    contextValue: {
+        direction: import('./types').PanelDirection;
+        panels: PanelLayoutData[];
+        containerSize: {
+            width: number;
+            height: number;
+        };
+        isContainerReady: boolean;
+        showDebugInfo: boolean;
+        registerPanel: (panel: PanelLayoutData) => void;
+        unregisterPanel: (id: string) => void;
+        resizePanels: (leftId: string, rightId: string, leftSize: number, rightSize: number) => void;
+        collapsePanel: (id: string) => void;
+        expandPanel: (id: string, targetSize?: number) => void;
+        getPanel: (id: string) => PanelLayoutData | undefined;
+        reportPanelMeasurement: (panelId: string, measurement: PanelMeasurement | null) => void;
+        panelMeasurements: Record<string, PanelMeasurement>;
+        reportHandleMeasurement: (handleId: string, measurement: ResizeHandleLayoutData | null) => void;
+        handleMeasurements: Record<string, ResizeHandleLayoutData>;
+        layoutConstraintViolation: LayoutConstraintViolation | null;
+    };
+    groupStyle: CSSProperties;
+};
+/**
+ * Provide imperative helpers for toggling a specific panel while preserving stored sizing.
+ * 特定パネルの保存済みサイズを維持しつつ開閉を制御する命令型ユーティリティを提供するカスタムフック。
+ */
+export declare const usePanelControls: (panelId: string) => {
+    panel: PanelLayoutData | undefined;
+    isCollapsed: boolean;
+    collapse: () => void;
+    expand: (targetSize?: number) => void;
+    toggle: () => void;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAkF,MAAM,OAAO,CAAA;AAG1H,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAGpI;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,2DAAmE,eAAe;;;;;;;;;;;+BAmavE,eAAe;8BAKhB,MAAM;+BAkBlC,MAAM,WAAW,MAAM,YAAY,MAAM,aAAa,MAAM;4BAmFhE,MAAM;0BAaN,MAAM,eAAe,MAAM;uBAa3B,MAAM;0CAWsC,MAAM,eAAe,gBAAgB,GAAG,IAAI;;4CA6B1C,MAAM,eAAe,sBAAsB,GAAG,IAAI;;;;;CA4F5G,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM;;;;0BAS1B,MAAM;;CAwB3B,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+
+export { PanelGroupContext, usePanelGroup } from './context';
+export { usePanelControls, useResizablePanels } from './hooks';
+export { Panel } from './Panel';
+export { PanelGroup } from './PanelGroup';
+export { PanelResizeHandle } from './PanelResizeHandle';
+export type { ContainerAxisMeasurement, ContainerSize, FlexibleSize, PanelDirection, PanelGroupContextValue, PanelGroupProps, PanelLayoutData, PanelProps, PanelResizeHandleProps, SizeConfig, SizeUnit, } from './types';
+export { clamp, generatePanelId, getConstraintInPixels, getContainerSize, loadLayout, normalizeSizeConfig, saveLayout, } from './utils';
+/**
+ * Locate a panel element in the DOM by its data attribute.
+ * data 属性を手がかりにパネル要素を DOM から取得する補助関数。
+ */
+export declare const getPanelElement: (id: string) => HTMLElement | null;
+/**
+ * Locate a panel group element in the DOM by its data attribute.
+ * data 属性を手がかりにパネルグループ要素を DOM から取得する補助関数。
+ */
+export declare const getPanelGroupElement: (id: string) => HTMLElement | null;
+/**
+ * Locate a resize handle element in the DOM by its data attribute.
+ * data 属性を手がかりにリサイズハンドル要素を DOM から取得する補助関数。
+ */
+export declare const getResizeHandleElement: (id: string) => HTMLElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC5D,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,YAAY,EACR,wBAAwB,EACxB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,UAAU,EACV,sBAAsB,EACtB,UAAU,EACV,QAAQ,GACX,MAAM,SAAS,CAAA;AAEhB,OAAO,EACH,KAAK,EACL,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,UAAU,GACb,MAAM,SAAS,CAAA;AAEhB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,WAAW,GAAG,IAE1D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,MAAM,KAAG,WAAW,GAAG,IAE/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,IAAI,MAAM,KAAG,WAAW,GAAG,IAEjE,CAAA"}