@andrewcyuan/focusgrid 0.1.0

package/dist/react/index.d.cts

@@ -0,0 +1,294 @@
+import { ReactNode } from "react";
+import { ShortcutBinding } from "@andrewcyuan/shortcut-engine";
+
+//#region core/src/layout/types.d.ts
+type PaneId = string;
+type NodeId = string;
+type Orientation = "horizontal" | "vertical";
+declare const cardinalDirections: readonly ["left", "right", "up", "down"];
+type CardinalDirection = (typeof cardinalDirections)[number];
+declare enum PaneCommandCapability {
+  ResizeX = "canResizeX",
+  ResizeY = "canResizeY",
+  Remove = "canRemove",
+  SplitHorizontal = "canSplitHorizontal",
+  SplitVertical = "canSplitVertical",
+  SwapX = "canSwapX",
+  SwapY = "canSwapY",
+  Focus = "canFocus"
+}
+type PaneCommandCapabilityInput = Partial<Record<PaneCommandCapability, boolean>>;
+type PaneNode = {
+  kind: "pane";
+  id: NodeId;
+  paneId: PaneId;
+} & PaneCommandCapabilityInput;
+type SplitNode = {
+  kind: "split";
+  id: NodeId;
+  orientation: Orientation;
+  children: LayoutNode[];
+  sizes: number[];
+  lastFocusedChildId?: NodeId;
+};
+type LayoutNode = PaneNode | SplitNode;
+type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+type ComputedPane = {
+  paneId: PaneId;
+  nodeId: NodeId;
+  rect: Rect;
+  active: boolean;
+};
+type ComputedHandle = {
+  id: string;
+  splitId: NodeId;
+  index: number;
+  rect: Rect;
+  direction: Orientation;
+};
+type ComputedNode = {
+  kind: "pane";
+  pane: ComputedPane;
+} | {
+  kind: "split";
+  orientation: Orientation;
+  children: ComputedNode[];
+  handles: ComputedHandle[];
+};
+type ComputedLayout = {
+  root: ComputedNode;
+  rectByNodeId: Map<NodeId, Rect>;
+  panes: ComputedPane[];
+  handles: ComputedHandle[];
+};
+type FocusGridControllerState = {
+  root: LayoutNode;
+  activePaneId: PaneId | null;
+  container: {
+    width: number;
+    height: number;
+  };
+};
+//#endregion
+//#region core/src/controller.d.ts
+interface DomController {
+  focus(paneId: PaneId): boolean;
+}
+type Listener = (next: FocusGridControllerState, previous: FocusGridControllerState) => void;
+type PaneLayoutChangeEvent = {
+  pane: ComputedPane;
+  previousPane: ComputedPane;
+  controller: FocusGridController;
+};
+type PaneCloseEvent = {
+  paneId: PaneId;
+  previousPane: ComputedPane;
+  controller: FocusGridController;
+};
+type PaneEventHandlers = {
+  onPaneLayoutChange?: (event: PaneLayoutChangeEvent) => void;
+  onPaneClose?: (event: PaneCloseEvent) => void;
+};
+type PaneDefaults = PaneCommandCapabilityInput;
+type FocusGridControllerProps = FocusGridControllerState & {
+  paneDefaults?: PaneDefaults;
+  minWidth?: number;
+  minHeight?: number;
+  directionalFocusOverflow?: boolean;
+};
+type SplitPaneOptions = Partial<Omit<PaneNode, "kind" | "id" | "paneId">> & {
+  side: CardinalDirection;
+  newPaneId?: PaneId;
+  newPaneNodeId?: NodeId;
+  splitId?: NodeId;
+  preserveActivePane?: boolean;
+};
+type ResizePaneOptions = {
+  direction: CardinalDirection;
+  deltaPx: number;
+};
+type ResizeHandleOptions = {
+  index: number;
+  deltaPx: number;
+  snapshotSizes?: number[];
+};
+declare class FocusGridController {
+  private readonly domController;
+  readonly minWidth: number;
+  readonly minHeight: number;
+  readonly directionalFocusOverflow: boolean;
+  private currentState;
+  private cachedLayout;
+  private readonly paneDefaults;
+  private readonly listeners;
+  constructor({
+    paneDefaults,
+    minWidth,
+    minHeight,
+    directionalFocusOverflow,
+    ...state
+  }: FocusGridControllerProps, domController: DomController);
+  /** Computed render data; stable until the next committed change. */
+  getLayout(): ComputedLayout;
+  getPane(paneId: PaneId): PaneNode | null;
+  getContainerSize(): {
+    width: number;
+    height: number;
+  };
+  getSplitSizes(splitId: NodeId): number[] | null;
+  splitActive(side: CardinalDirection): PaneId | null;
+  removeActive(): boolean;
+  focusAdjacent(direction: CardinalDirection): boolean;
+  swapAdjacent(direction: CardinalDirection): boolean;
+  resizeActive(direction: CardinalDirection, deltaPx: number): boolean;
+  split(paneNodeId: NodeId, props: SplitPaneOptions): PaneId | null;
+  remove(paneId: PaneId): boolean;
+  swap(firstPaneId: PaneId, secondPaneId: PaneId): boolean;
+  resize(paneId: PaneId, props: ResizePaneOptions): boolean;
+  resizeHandle(splitId: NodeId, props: ResizeHandleOptions): boolean;
+  focus(paneId: PaneId): boolean;
+  updatePane(paneId: PaneId, patch: Partial<Omit<PaneNode, "kind" | "id" | "paneId">>): boolean;
+  setContainerSize(width: number, height: number): boolean;
+  private commit;
+  subscribePaneEvents({
+    onPaneLayoutChange,
+    onPaneClose
+  }: PaneEventHandlers): () => void;
+  subscribe(listener: Listener): () => void;
+}
+//#endregion
+//#region dom/src/controller.d.ts
+/** Attach the renderer root; pane elements are resolved only when focus is requested. */
+declare class FocusGridDomController implements DomController {
+  private root;
+  setRoot(root: HTMLElement | null): void;
+  focus(paneId: PaneId): boolean;
+}
+//#endregion
+//#region react/src/FocusgridController.d.ts
+declare const FocusgridController: import("react").Context<{
+  controller: FocusGridController;
+  domController: FocusGridDomController;
+} | null>;
+//#endregion
+//#region react/src/PaneView.d.ts
+type Pane = {
+  paneId: PaneId;
+  rect: Rect;
+  active: boolean;
+  controller: FocusGridController;
+};
+//#endregion
+//#region react/src/FocusGrid.d.ts
+type FocusGridProps = PaneEventHandlers & {
+  keymap?: readonly ShortcutBinding[];
+  renderPane: (ctx: Pane) => ReactNode;
+  className?: string;
+};
+declare function FocusGrid({
+  className,
+  onPaneLayoutChange,
+  onPaneClose,
+  ...content
+}: FocusGridProps): import("react").JSX.Element;
+//#endregion
+//#region react/src/hooks.d.ts
+declare function useFocusGridController(createProps: () => FocusGridControllerProps, domController: DomController): FocusGridController;
+declare function useControllerLayout(controller: FocusGridController): ComputedLayout;
+//#endregion
+//#region react/src/composite-shortcuts.d.ts
+type CompositeNavigationDirection = "left" | "right" | "up" | "down" | "start" | "end";
+declare function createCompositeNavigationKeymap(move: (direction: CompositeNavigationDirection, event: KeyboardEvent) => void): ShortcutBinding[];
+//#endregion
+//#region react/src/default-pane-keymap.d.ts
+declare const defaultPaneShortcutActions: readonly [{
+  readonly id: "split-right";
+  readonly label: "Split right";
+  readonly action: (controller: FocusGridController) => string | null;
+  readonly defaultSequence: "Ctrl-B %";
+}, {
+  readonly id: "split-down";
+  readonly label: "Split down";
+  readonly action: (controller: FocusGridController) => string | null;
+  readonly defaultSequence: "Ctrl-B \"";
+}, {
+  readonly id: "close";
+  readonly label: "Close active";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B X";
+}, {
+  readonly id: "focus-left";
+  readonly label: "Focus left";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Left";
+}, {
+  readonly id: "focus-right";
+  readonly label: "Focus right";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Right";
+}, {
+  readonly id: "focus-up";
+  readonly label: "Focus up";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Up";
+}, {
+  readonly id: "focus-down";
+  readonly label: "Focus down";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Down";
+}, {
+  readonly id: "swap-left";
+  readonly label: "Swap left";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Left";
+}, {
+  readonly id: "swap-right";
+  readonly label: "Swap right";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Right";
+}, {
+  readonly id: "swap-up";
+  readonly label: "Swap up";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Up";
+}, {
+  readonly id: "swap-down";
+  readonly label: "Swap down";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Down";
+}, {
+  readonly id: "resize-left";
+  readonly label: "Resize left";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B H";
+  readonly repeat: true;
+}, {
+  readonly id: "resize-right";
+  readonly label: "Resize right";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B L";
+  readonly repeat: true;
+}, {
+  readonly id: "resize-up";
+  readonly label: "Resize up";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B K";
+  readonly repeat: true;
+}, {
+  readonly id: "resize-down";
+  readonly label: "Resize down";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B J";
+  readonly repeat: true;
+}];
+type PaneShortcutId = (typeof defaultPaneShortcutActions)[number]["id"];
+type PaneShortcutValues = Record<PaneShortcutId, string>;
+declare function createDefaultPaneShortcuts(): PaneShortcutValues;
+declare function createDefaultPaneKeymap(controller: FocusGridController): ShortcutBinding[];
+//#endregion
+export { CompositeNavigationDirection, FocusGrid, type FocusGridProps, FocusgridController, type Pane, type PaneShortcutId, type PaneShortcutValues, createCompositeNavigationKeymap, createDefaultPaneKeymap, createDefaultPaneShortcuts, defaultPaneShortcutActions, useControllerLayout, useFocusGridController };

package/dist/react/index.d.ts

@@ -0,0 +1,294 @@
+import { ReactNode } from "react";
+import { ShortcutBinding } from "@andrewcyuan/shortcut-engine";
+
+//#region core/src/layout/types.d.ts
+type PaneId = string;
+type NodeId = string;
+type Orientation = "horizontal" | "vertical";
+declare const cardinalDirections: readonly ["left", "right", "up", "down"];
+type CardinalDirection = (typeof cardinalDirections)[number];
+declare enum PaneCommandCapability {
+  ResizeX = "canResizeX",
+  ResizeY = "canResizeY",
+  Remove = "canRemove",
+  SplitHorizontal = "canSplitHorizontal",
+  SplitVertical = "canSplitVertical",
+  SwapX = "canSwapX",
+  SwapY = "canSwapY",
+  Focus = "canFocus"
+}
+type PaneCommandCapabilityInput = Partial<Record<PaneCommandCapability, boolean>>;
+type PaneNode = {
+  kind: "pane";
+  id: NodeId;
+  paneId: PaneId;
+} & PaneCommandCapabilityInput;
+type SplitNode = {
+  kind: "split";
+  id: NodeId;
+  orientation: Orientation;
+  children: LayoutNode[];
+  sizes: number[];
+  lastFocusedChildId?: NodeId;
+};
+type LayoutNode = PaneNode | SplitNode;
+type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+type ComputedPane = {
+  paneId: PaneId;
+  nodeId: NodeId;
+  rect: Rect;
+  active: boolean;
+};
+type ComputedHandle = {
+  id: string;
+  splitId: NodeId;
+  index: number;
+  rect: Rect;
+  direction: Orientation;
+};
+type ComputedNode = {
+  kind: "pane";
+  pane: ComputedPane;
+} | {
+  kind: "split";
+  orientation: Orientation;
+  children: ComputedNode[];
+  handles: ComputedHandle[];
+};
+type ComputedLayout = {
+  root: ComputedNode;
+  rectByNodeId: Map<NodeId, Rect>;
+  panes: ComputedPane[];
+  handles: ComputedHandle[];
+};
+type FocusGridControllerState = {
+  root: LayoutNode;
+  activePaneId: PaneId | null;
+  container: {
+    width: number;
+    height: number;
+  };
+};
+//#endregion
+//#region core/src/controller.d.ts
+interface DomController {
+  focus(paneId: PaneId): boolean;
+}
+type Listener = (next: FocusGridControllerState, previous: FocusGridControllerState) => void;
+type PaneLayoutChangeEvent = {
+  pane: ComputedPane;
+  previousPane: ComputedPane;
+  controller: FocusGridController;
+};
+type PaneCloseEvent = {
+  paneId: PaneId;
+  previousPane: ComputedPane;
+  controller: FocusGridController;
+};
+type PaneEventHandlers = {
+  onPaneLayoutChange?: (event: PaneLayoutChangeEvent) => void;
+  onPaneClose?: (event: PaneCloseEvent) => void;
+};
+type PaneDefaults = PaneCommandCapabilityInput;
+type FocusGridControllerProps = FocusGridControllerState & {
+  paneDefaults?: PaneDefaults;
+  minWidth?: number;
+  minHeight?: number;
+  directionalFocusOverflow?: boolean;
+};
+type SplitPaneOptions = Partial<Omit<PaneNode, "kind" | "id" | "paneId">> & {
+  side: CardinalDirection;
+  newPaneId?: PaneId;
+  newPaneNodeId?: NodeId;
+  splitId?: NodeId;
+  preserveActivePane?: boolean;
+};
+type ResizePaneOptions = {
+  direction: CardinalDirection;
+  deltaPx: number;
+};
+type ResizeHandleOptions = {
+  index: number;
+  deltaPx: number;
+  snapshotSizes?: number[];
+};
+declare class FocusGridController {
+  private readonly domController;
+  readonly minWidth: number;
+  readonly minHeight: number;
+  readonly directionalFocusOverflow: boolean;
+  private currentState;
+  private cachedLayout;
+  private readonly paneDefaults;
+  private readonly listeners;
+  constructor({
+    paneDefaults,
+    minWidth,
+    minHeight,
+    directionalFocusOverflow,
+    ...state
+  }: FocusGridControllerProps, domController: DomController);
+  /** Computed render data; stable until the next committed change. */
+  getLayout(): ComputedLayout;
+  getPane(paneId: PaneId): PaneNode | null;
+  getContainerSize(): {
+    width: number;
+    height: number;
+  };
+  getSplitSizes(splitId: NodeId): number[] | null;
+  splitActive(side: CardinalDirection): PaneId | null;
+  removeActive(): boolean;
+  focusAdjacent(direction: CardinalDirection): boolean;
+  swapAdjacent(direction: CardinalDirection): boolean;
+  resizeActive(direction: CardinalDirection, deltaPx: number): boolean;
+  split(paneNodeId: NodeId, props: SplitPaneOptions): PaneId | null;
+  remove(paneId: PaneId): boolean;
+  swap(firstPaneId: PaneId, secondPaneId: PaneId): boolean;
+  resize(paneId: PaneId, props: ResizePaneOptions): boolean;
+  resizeHandle(splitId: NodeId, props: ResizeHandleOptions): boolean;
+  focus(paneId: PaneId): boolean;
+  updatePane(paneId: PaneId, patch: Partial<Omit<PaneNode, "kind" | "id" | "paneId">>): boolean;
+  setContainerSize(width: number, height: number): boolean;
+  private commit;
+  subscribePaneEvents({
+    onPaneLayoutChange,
+    onPaneClose
+  }: PaneEventHandlers): () => void;
+  subscribe(listener: Listener): () => void;
+}
+//#endregion
+//#region dom/src/controller.d.ts
+/** Attach the renderer root; pane elements are resolved only when focus is requested. */
+declare class FocusGridDomController implements DomController {
+  private root;
+  setRoot(root: HTMLElement | null): void;
+  focus(paneId: PaneId): boolean;
+}
+//#endregion
+//#region react/src/FocusgridController.d.ts
+declare const FocusgridController: import("react").Context<{
+  controller: FocusGridController;
+  domController: FocusGridDomController;
+} | null>;
+//#endregion
+//#region react/src/PaneView.d.ts
+type Pane = {
+  paneId: PaneId;
+  rect: Rect;
+  active: boolean;
+  controller: FocusGridController;
+};
+//#endregion
+//#region react/src/FocusGrid.d.ts
+type FocusGridProps = PaneEventHandlers & {
+  keymap?: readonly ShortcutBinding[];
+  renderPane: (ctx: Pane) => ReactNode;
+  className?: string;
+};
+declare function FocusGrid({
+  className,
+  onPaneLayoutChange,
+  onPaneClose,
+  ...content
+}: FocusGridProps): import("react").JSX.Element;
+//#endregion
+//#region react/src/hooks.d.ts
+declare function useFocusGridController(createProps: () => FocusGridControllerProps, domController: DomController): FocusGridController;
+declare function useControllerLayout(controller: FocusGridController): ComputedLayout;
+//#endregion
+//#region react/src/composite-shortcuts.d.ts
+type CompositeNavigationDirection = "left" | "right" | "up" | "down" | "start" | "end";
+declare function createCompositeNavigationKeymap(move: (direction: CompositeNavigationDirection, event: KeyboardEvent) => void): ShortcutBinding[];
+//#endregion
+//#region react/src/default-pane-keymap.d.ts
+declare const defaultPaneShortcutActions: readonly [{
+  readonly id: "split-right";
+  readonly label: "Split right";
+  readonly action: (controller: FocusGridController) => string | null;
+  readonly defaultSequence: "Ctrl-B %";
+}, {
+  readonly id: "split-down";
+  readonly label: "Split down";
+  readonly action: (controller: FocusGridController) => string | null;
+  readonly defaultSequence: "Ctrl-B \"";
+}, {
+  readonly id: "close";
+  readonly label: "Close active";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B X";
+}, {
+  readonly id: "focus-left";
+  readonly label: "Focus left";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Left";
+}, {
+  readonly id: "focus-right";
+  readonly label: "Focus right";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Right";
+}, {
+  readonly id: "focus-up";
+  readonly label: "Focus up";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Up";
+}, {
+  readonly id: "focus-down";
+  readonly label: "Focus down";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Down";
+}, {
+  readonly id: "swap-left";
+  readonly label: "Swap left";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Left";
+}, {
+  readonly id: "swap-right";
+  readonly label: "Swap right";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Right";
+}, {
+  readonly id: "swap-up";
+  readonly label: "Swap up";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Up";
+}, {
+  readonly id: "swap-down";
+  readonly label: "Swap down";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B Shift-Down";
+}, {
+  readonly id: "resize-left";
+  readonly label: "Resize left";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B H";
+  readonly repeat: true;
+}, {
+  readonly id: "resize-right";
+  readonly label: "Resize right";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B L";
+  readonly repeat: true;
+}, {
+  readonly id: "resize-up";
+  readonly label: "Resize up";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B K";
+  readonly repeat: true;
+}, {
+  readonly id: "resize-down";
+  readonly label: "Resize down";
+  readonly action: (controller: FocusGridController) => boolean;
+  readonly defaultSequence: "Ctrl-B J";
+  readonly repeat: true;
+}];
+type PaneShortcutId = (typeof defaultPaneShortcutActions)[number]["id"];
+type PaneShortcutValues = Record<PaneShortcutId, string>;
+declare function createDefaultPaneShortcuts(): PaneShortcutValues;
+declare function createDefaultPaneKeymap(controller: FocusGridController): ShortcutBinding[];
+//#endregion
+export { CompositeNavigationDirection, FocusGrid, type FocusGridProps, FocusgridController, type Pane, type PaneShortcutId, type PaneShortcutValues, createCompositeNavigationKeymap, createDefaultPaneKeymap, createDefaultPaneShortcuts, defaultPaneShortcutActions, useControllerLayout, useFocusGridController };