image-studio/view/BottomControlsIsland.tsx

import { useMemo } from "react";
import type { AppStore } from "@editor/store";
import type { ImageDocument } from "@core/document";
import type { GenerationState, MaskViewMode, SelectionState, ViewportState } from "@editor/state";
import type { BrushSettings, ChromaKeySettings, GenerateSettings, MagicWandSettings, OperationId, ToolId } from "@editor/tools";
import { BrushControls } from "./bottom-controls/BrushControls";
import { ChromaKeyControls } from "./bottom-controls/ChromaKeyControls";
import { MagicWandControls } from "./bottom-controls/MagicWandControls";
import { GenerateActionControls } from "./bottom-controls/GenerateActionControls";
import { PanControls } from "./bottom-controls/PanControls";
import { TransformControls } from "./bottom-controls/TransformControls";
import { ZoomControls } from "./bottom-controls/ZoomControls";
import type { Rect } from "@core/geometry";
import type { TransformTarget } from "@editor/transform";
import type { GenerationWorkflow } from "@operations/generation/workflow";
import type { DocumentActions } from "@app/document-actions";
import { createDocumentReadIndex } from "@editor/document-indexes";
export type BottomControlsAction = "pan" | "zoom";

export type BottomControlsIslandProps = {
  document: ImageDocument;
  selection: SelectionState;
  viewport: ViewportState;
  visible: boolean;
  action: BottomControlsAction;
  activeTool: ToolId;
  operation?: OperationId;
  brushSettings: BrushSettings;
  generateSettings: GenerateSettings;
  generation: GenerationState;
  chromaKeySettings: ChromaKeySettings;
  magicWandSettings: MagicWandSettings;
  editingMask?: boolean;
  maskKind?: "layerMask" | "inpaintRegion";
  maskViewMode?: MaskViewMode;
  transformBounds?: Rect;
  transformTarget?: TransformTarget;
  brushHint?: string;
  dispatch: AppStore["dispatch"]; 
  generationWorkflow: GenerationWorkflow;
  documentActions: DocumentActions;
};

export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, operation, brushSettings, generateSettings, generation, chromaKeySettings, magicWandSettings, editingMask = false, maskKind, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch, generationWorkflow, documentActions }: BottomControlsIslandProps) {
  const documentIndex = useMemo(() => createDocumentReadIndex(document), [document]);
  const selectedLayerInfo = selection.layerIds.length === 1 && selection.layerIds[0] ? documentIndex.layerInfoById.get(selection.layerIds[0]) : undefined;
  const zoomPercent = Math.round(viewport.zoom * 100);
  const x = Math.round(viewport.center.x);
  const y = Math.round(viewport.center.y);

  return (
    <div
      aria-hidden={!visible}
      className={`app-surface subtle-scrollbar flex min-h-12 w-fit max-w-[calc(100vw-1.5rem)] min-w-0 flex-nowrap items-center justify-start gap-2 overflow-x-auto overflow-y-hidden rounded-xl px-2 py-1.5 text-xs text-white transition-all duration-200 ${
        visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
      }`}
    >
      {operation === "generate" ? (
        <GenerateActionControls settings={generateSettings} generation={generation} dispatch={dispatch} workflow={generationWorkflow} generate={documentActions.generate} />
      ) : operation === "chromaKey" ? (
        <ChromaKeyControls document={document} selection={selection} settings={chromaKeySettings} dispatch={dispatch} />
      ) : (activeTool === "brush" || activeTool === "eraser") && brushHint ? (
        <BrushHint tool={activeTool} hint={brushHint} />
      ) : activeTool === "brush" || activeTool === "eraser" ? (
        <BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskKind={maskKind} maskViewMode={maskViewMode} dispatch={dispatch} />
      ) : activeTool === "magicWand" ? (
        <MagicWandControls settings={magicWandSettings} dispatch={dispatch} />
      ) : activeTool === "semanticSelect" ? (
        <div className="flex items-center gap-3 px-4 text-sm text-white/75"><strong className="text-white">AI object select</strong><span>Click an object · Shift-click adds · Option-click protects</span></div>
      ) : activeTool === "maskLasso" || activeTool === "maskRectangle" ? (
        <div className="flex items-center gap-3 px-4 text-sm text-white/75"><strong className="text-white">AI region {activeTool === "maskRectangle" ? "rectangle" : "lasso"}</strong><span>Drag to replace · Shift-drag adds · Option-drag protects</span></div>
      ) : transformBounds && transformTarget ? (
        <TransformControls bounds={transformBounds} target={transformTarget} documentIndex={documentIndex} layerInfo={selectedLayerInfo} dispatch={dispatch} />
      ) : action === "pan" ? (
        <PanControls x={x} y={y} />
      ) : (
        <ZoomControls zoomPercent={zoomPercent} actions={documentActions} />
      )}
    </div>
  );
}

function BrushHint({ tool, hint }: { tool: "brush" | "eraser"; hint: string }) {
  return (
    <div className="flex items-center gap-3 px-4 text-center">
      <span className="rounded bg-white/[0.06] px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-white/45">{tool}</span>
      <span className="max-w-[34rem] text-sm font-medium text-white/80">{hint}</span>
    </div>
  );
}