diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index bbb8eca1745..94b055e163d 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -14,6 +14,7 @@ --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */ --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */ --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */ + --output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */ --auth-primary-btn-bg: #ffffff; --auth-primary-btn-border: #ffffff; --auth-primary-btn-text: #000000; diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts index 4f442fe053b..c46b23f8880 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts @@ -1,69 +1,40 @@ -import { useCallback, useEffect } from 'react' -import { useShallow } from 'zustand/react/shallow' -import { PANEL_WIDTH } from '@/stores/constants' +import { useDragResize } from '@/hooks/use-drag-resize' +import { CONTENT_WINDOW_GAP, PANEL_WIDTH } from '@/stores/constants' import { usePanelStore } from '@/stores/panel' -/** Inset gap between the viewport edge and the content window */ -const CONTENT_WINDOW_GAP = 8 +/** + * Computes the clamped panel width for a pointer position. The maximum is + * floored at the minimum so a narrow viewport can never invert the clamp + * and force the panel below {@link PANEL_WIDTH.MIN}. + */ +function computePanelWidth(ev: PointerEvent): number { + const maxWidth = Math.max(PANEL_WIDTH.MIN, window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE) + const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - ev.clientX + return Math.min(Math.max(newWidth, PANEL_WIDTH.MIN), maxWidth) +} + +/** + * Applies the panel width per frame. The `--panel-width` CSS variable alone + * sizes `.panel-container`, so no React work happens during the drag. + */ +function applyPanelWidth(width: number): void { + document.documentElement.style.setProperty('--panel-width', `${width}px`) +} /** - * Custom hook to handle panel resize functionality. - * Manages mouse events for resizing and enforces min/max width constraints. - * Maximum width is capped at 40% of the viewport width for optimal layout. + * Handles panel drag-resize with zero React renders during the drag. + * The final width is committed to the store (one re-render + one + * localStorage write) when the drag ends. * - * @returns Resize state and handlers + * @returns Pointer-down handler for the resize handle */ export function usePanelResize() { - const { setPanelWidth, isResizing, setIsResizing } = usePanelStore( - useShallow((s) => ({ - setPanelWidth: s.setPanelWidth, - isResizing: s.isResizing, - setIsResizing: s.setIsResizing, - })) - ) - - /** - * Handles mouse down on resize handle - */ - const handleMouseDown = useCallback(() => { - setIsResizing(true) - }, [setIsResizing]) - - /** - * Setup resize event listeners and body styles when resizing - * Cleanup is handled automatically by the effect's return function - */ - useEffect(() => { - if (!isResizing) return - - const handleMouseMove = (e: MouseEvent) => { - const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - e.clientX - const maxWidth = window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE - - if (newWidth >= PANEL_WIDTH.MIN && newWidth <= maxWidth) { - setPanelWidth(newWidth) - } - } - - const handleMouseUp = () => { - setIsResizing(false) - } - - document.addEventListener('mousemove', handleMouseMove) - document.addEventListener('mouseup', handleMouseUp) - document.body.style.cursor = 'ew-resize' - document.body.style.userSelect = 'none' - - return () => { - document.removeEventListener('mousemove', handleMouseMove) - document.removeEventListener('mouseup', handleMouseUp) - document.body.style.cursor = '' - document.body.style.userSelect = '' - } - }, [isResizing, setPanelWidth, setIsResizing]) - - return { - isResizing, - handleMouseDown, - } + const setPanelWidth = usePanelStore((s) => s.setPanelWidth) + + return useDragResize({ + cursor: 'ew-resize', + compute: computePanelWidth, + apply: applyPanelWidth, + commit: setPanelWidth, + }) } diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx index 0831daffffb..5fa00fb44ca 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx @@ -122,11 +122,10 @@ export const Panel = memo(function Panel() { const panelRef = useRef(null) const fileInputRef = useRef(null) - const { activeTab, setActiveTab, panelWidth, _hasHydrated, setHasHydrated } = usePanelStore( + const { activeTab, setActiveTab, _hasHydrated, setHasHydrated } = usePanelStore( useShallow((state) => ({ activeTab: state.activeTab, setActiveTab: state.setActiveTab, - panelWidth: state.panelWidth, _hasHydrated: state._hasHydrated, setHasHydrated: state.setHasHydrated, })) @@ -189,7 +188,7 @@ export const Panel = memo(function Panel() { const { handleRunWorkflow, handleCancelExecution, isExecuting } = useWorkflowExecution() // Panel resize hook - const { handleMouseDown } = usePanelResize() + const { handlePointerDown } = usePanelResize() /** * Opens subscription settings modal @@ -932,7 +931,7 @@ export const Panel = memo(function Panel() { {/* Resize Handle */}
void + handleOutputPanelResizePointerDown: (e: React.PointerEvent) => void handleHeaderClick: () => void isExpanded: boolean expandToLastHeight: () => void @@ -109,7 +109,7 @@ export interface OutputPanelProps { */ export const OutputPanel = React.memo(function OutputPanel({ selectedEntry, - handleOutputPanelResizeMouseDown, + handleOutputPanelResizePointerDown, handleHeaderClick, isExpanded, expandToLastHeight, @@ -130,7 +130,6 @@ export const OutputPanel = React.memo(function OutputPanel({ handleClearConsoleFromMenu, }: OutputPanelProps) { // Access store-backed settings directly to reduce prop drilling - const outputPanelWidth = useTerminalStore((state) => state.outputPanelWidth) const wrapText = useTerminalStore((state) => state.wrapText) const setWrapText = useTerminalStore((state) => state.setWrapText) const openOnRun = useTerminalStore((state) => state.openOnRun) @@ -293,12 +292,12 @@ export const OutputPanel = React.memo(function OutputPanel({ <>
{/* Horizontal Resize Handle */}
state.setOutputPanelWidth) - const [isResizing, setIsResizing] = useState(false) + const setOutputPanelWidth = useTerminalStore((s) => s.setOutputPanelWidth) + const terminalElRef = useRef(null) - const handleMouseDown = useCallback(() => { - setIsResizing(true) + const captureTerminalElement = useCallback(() => { + terminalElRef.current = document.querySelector('[aria-label="Terminal"]') + return terminalElRef.current !== null }, []) - useEffect(() => { - if (!isResizing) return - - const handleMouseMove = (e: MouseEvent) => { - const terminalEl = document.querySelector('[aria-label="Terminal"]') - if (!terminalEl) return - - const terminalRect = terminalEl.getBoundingClientRect() - const newWidth = terminalRect.right - e.clientX - const maxWidth = terminalRect.width - TERMINAL_BLOCK_COLUMN_WIDTH - const clampedWidth = Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth)) - - setOutputPanelWidth(clampedWidth) - } - - const handleMouseUp = () => { - setIsResizing(false) - } - - document.addEventListener('mousemove', handleMouseMove) - document.addEventListener('mouseup', handleMouseUp) - document.body.style.cursor = 'ew-resize' - document.body.style.userSelect = 'none' - - return () => { - document.removeEventListener('mousemove', handleMouseMove) - document.removeEventListener('mouseup', handleMouseUp) - document.body.style.cursor = '' - document.body.style.userSelect = '' - } - }, [isResizing, setOutputPanelWidth]) + const computeOutputPanelWidth = useCallback((ev: PointerEvent) => { + const terminalEl = terminalElRef.current + if (!terminalEl) return null + const terminalRect = terminalEl.getBoundingClientRect() + const newWidth = terminalRect.right - ev.clientX + const maxWidth = terminalRect.width - TERMINAL_BLOCK_COLUMN_WIDTH + return Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth)) + }, []) - return { - isResizing, - handleMouseDown, - } + return useDragResize({ + cursor: 'ew-resize', + compute: computeOutputPanelWidth, + apply: applyOutputPanelWidth, + commit: setOutputPanelWidth, + onStart: captureTerminalElement, + }) } diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts index 6279aeb24e6..f68403e901a 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts @@ -1,52 +1,48 @@ -import { useCallback, useEffect } from 'react' +import { TERMINAL_CONFIG } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils' +import { useDragResize } from '@/hooks/use-drag-resize' +import { CONTENT_WINDOW_GAP, TERMINAL_HEIGHT } from '@/stores/constants' import { useTerminalStore } from '@/stores/terminal' -const MIN_HEIGHT = 30 -const MAX_HEIGHT_PERCENTAGE = 0.7 +/** Computes the clamped terminal height for a pointer position */ +function computeTerminalHeight(ev: PointerEvent): number { + const maxHeight = Math.max( + TERMINAL_HEIGHT.MIN, + window.innerHeight * TERMINAL_HEIGHT.MAX_PERCENTAGE + ) + const newHeight = window.innerHeight - CONTENT_WINDOW_GAP - ev.clientY + return Math.min(Math.max(newHeight, TERMINAL_HEIGHT.MIN), maxHeight) +} -/** Inset gap between the viewport edge and the content window */ -const CONTENT_WINDOW_GAP = 8 +/** + * Applies the terminal height per frame. The `--terminal-height` CSS + * variable alone sizes `.terminal-container`, so no React work happens on + * ordinary frames. The store is committed mid-drag only when the height + * crosses the expanded threshold, so `isExpanded` subscribers (header + * chevron, auto-open logic) still flip live during the drag. + */ +function applyTerminalHeight(height: number): void { + document.documentElement.style.setProperty('--terminal-height', `${height}px`) + + const store = useTerminalStore.getState() + const wasExpanded = store.terminalHeight > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD + const nowExpanded = height > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD + if (wasExpanded !== nowExpanded) store.setTerminalHeight(height) +} +/** + * Handles terminal drag-resize with zero React renders during the drag + * (except at expanded-threshold crossings). The final height is committed + * to the store (one re-render + one localStorage write) when the drag ends. + * + * @returns Pointer-down handler for the resize handle + */ export function useTerminalResize() { - const setTerminalHeight = useTerminalStore((state) => state.setTerminalHeight) - const isResizing = useTerminalStore((state) => state.isResizing) - const setIsResizing = useTerminalStore((state) => state.setIsResizing) - - const handleMouseDown = useCallback(() => { - setIsResizing(true) - }, [setIsResizing]) - - useEffect(() => { - if (!isResizing) return - - const handleMouseMove = (e: MouseEvent) => { - const newHeight = window.innerHeight - CONTENT_WINDOW_GAP - e.clientY - const maxHeight = window.innerHeight * MAX_HEIGHT_PERCENTAGE - - if (newHeight >= MIN_HEIGHT && newHeight <= maxHeight) { - setTerminalHeight(newHeight) - } - } - - const handleMouseUp = () => { - setIsResizing(false) - } - - document.addEventListener('mousemove', handleMouseMove) - document.addEventListener('mouseup', handleMouseUp) - document.body.style.cursor = 'ns-resize' - document.body.style.userSelect = 'none' - - return () => { - document.removeEventListener('mousemove', handleMouseMove) - document.removeEventListener('mouseup', handleMouseUp) - document.body.style.cursor = '' - document.body.style.userSelect = '' - } - }, [isResizing, setTerminalHeight, setIsResizing]) - - return { - isResizing, - handleMouseDown, - } + const setTerminalHeight = useTerminalStore((s) => s.setTerminalHeight) + + return useDragResize({ + cursor: 'ns-resize', + compute: computeTerminalHeight, + apply: applyTerminalHeight, + commit: setTerminalHeight, + }) } diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx index c96aac2f30a..4d6c086ffdf 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx @@ -720,8 +720,8 @@ export const Terminal = memo(function Terminal() { const [isPlaygroundEnabled] = useState(() => isTruthy(getEnv('NEXT_PUBLIC_ENABLE_PLAYGROUND'))) - const { handleMouseDown } = useTerminalResize() - const { handleMouseDown: handleOutputPanelResizeMouseDown } = useOutputPanelResize() + const { handlePointerDown } = useTerminalResize() + const { handlePointerDown: handleOutputPanelResizePointerDown } = useOutputPanelResize() const { filters, @@ -1255,6 +1255,10 @@ export const Terminal = memo(function Terminal() { /** * Adjust output panel width on resize. * Closes the output panel if there's not enough space for the minimum width. + * The clamp compares against the live `--output-panel-width` CSS variable + * (the visual width — during a drag it runs ahead of the store, which only + * commits on release) so a resize mid-drag can never stomp the drag with a + * stale store value; the store value is the fallback before any write. */ useEffect(() => { const el = terminalRef.current @@ -1271,7 +1275,11 @@ export const Terminal = memo(function Terminal() { return } - if (outputPanelWidth > maxWidth) { + const liveWidth = Number.parseFloat( + document.documentElement.style.getPropertyValue('--output-panel-width') + ) + const currentWidth = Number.isNaN(liveWidth) ? outputPanelWidth : liveWidth + if (currentWidth > maxWidth) { setOutputPanelWidth(Math.max(maxWidth, MIN_OUTPUT_PANEL_WIDTH_PX)) } } @@ -1301,7 +1309,7 @@ export const Terminal = memo(function Terminal() { {/* Resize Handle */}
{/* Header */}
number | null + /** + * Applies per-frame visual feedback (typically a CSS variable write). + * Invoked inside requestAnimationFrame, at most once per frame. + */ + apply: (value: number) => void + /** + * Persists the final value once when the drag ends. Not called when the + * pointer never moved (a plain click on the handle). + */ + commit: (value: number) => void + /** + * Optional drag-start hook (e.g. capture an anchor element, set a store + * flag). Return `false` to abort the drag before any listeners are + * attached. + */ + onStart?: () => boolean | undefined + /** Optional drag-end hook, invoked after teardown and commit */ + onEnd?: () => void +} + +/** + * Shared drag-resize mechanism with zero React renders during the drag. + * + * Architecture (mirrors the sidebar's `use-sidebar-resize.ts`): + * + * pointerdown → capture the pointer on the handle (so move/up keep arriving + * even when the cursor leaves the window or crosses an iframe) + * pointermove → remember the latest pointer event and schedule a + * requestAnimationFrame callback that `compute`s the clamped + * value from it and `apply`s it, so both any layout read and + * the DOM write align with the browser paint cycle + * pointerup → tear down, `compute` the final value from the latest + * pointer event, `apply` and `commit` it once — deriving the + * final value from the event (rather than reading state back + * out of the DOM) means a fast single-frame flick is never + * lost to a cancelled RAF + * + * The drag is torn down by `pointerup`/`pointercancel` of the captured + * pointer (other pointers are ignored, so a second touch cannot kill the + * gesture) or window `blur`, so an interrupted gesture can never leave the + * listeners or body cursor stuck. A single-flight guard prevents stacking + * listeners across rapid presses, and an unmount cleanup tears down a drag + * still in flight. + */ +export function useDragResize(options: UseDragResizeOptions) { + const cleanupRef = useRef<(() => void) | null>(null) + const optionsRef = useRef(options) + + useEffect(() => { + optionsRef.current = options + }, [options]) + + const handlePointerDown = useCallback((e: React.PointerEvent) => { + if (cleanupRef.current) return + if (optionsRef.current.onStart?.() === false) return + + const handle = e.currentTarget + const pointerId = e.pointerId + document.body.style.cursor = optionsRef.current.cursor + document.body.style.userSelect = 'none' + handle.setPointerCapture?.(pointerId) + + let rafId: number | null = null + let lastEvent: PointerEvent | null = null + + const onPointerMove = (ev: PointerEvent) => { + if (ev.pointerId !== pointerId) return + lastEvent = ev + rafId ??= requestAnimationFrame(() => { + rafId = null + if (lastEvent === null) return + const value = optionsRef.current.compute(lastEvent) + if (value !== null) optionsRef.current.apply(value) + }) + } + + const cleanup = () => { + if (rafId !== null) { + cancelAnimationFrame(rafId) + rafId = null + } + document.body.style.cursor = '' + document.body.style.userSelect = '' + if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId) + document.removeEventListener('pointermove', onPointerMove) + document.removeEventListener('pointerup', onPointerEnd) + document.removeEventListener('pointercancel', onPointerEnd) + window.removeEventListener('blur', endDrag) + cleanupRef.current = null + } + + function endDrag() { + cleanup() + if (lastEvent !== null) { + const value = optionsRef.current.compute(lastEvent) + if (value !== null) { + optionsRef.current.apply(value) + optionsRef.current.commit(value) + } + } + optionsRef.current.onEnd?.() + } + + function onPointerEnd(ev: PointerEvent) { + if (ev.pointerId !== pointerId) return + endDrag() + } + + cleanupRef.current = cleanup + document.addEventListener('pointermove', onPointerMove) + document.addEventListener('pointerup', onPointerEnd) + document.addEventListener('pointercancel', onPointerEnd) + window.addEventListener('blur', endDrag) + }, []) + + useEffect(() => () => cleanupRef.current?.(), []) + + return { handlePointerDown } +} diff --git a/apps/sim/stores/constants.ts b/apps/sim/stores/constants.ts index a4848017e98..e905109dcd8 100644 --- a/apps/sim/stores/constants.ts +++ b/apps/sim/stores/constants.ts @@ -18,6 +18,9 @@ const API_ENDPOINTS = { * @see layout.tsx for pre-hydration script that reads localStorage */ +/** Inset gap in pixels between the viewport edge and the content window */ +export const CONTENT_WINDOW_GAP = 8 + /** Sidebar width constraints */ export const SIDEBAR_WIDTH = { DEFAULT: 248, diff --git a/apps/sim/stores/panel/store.ts b/apps/sim/stores/panel/store.ts index 1082ab64071..c8257f355c7 100644 --- a/apps/sim/stores/panel/store.ts +++ b/apps/sim/stores/panel/store.ts @@ -29,10 +29,6 @@ export const usePanelStore = create()( document.documentElement.removeAttribute('data-panel-active-tab') } }, - isResizing: false, - setIsResizing: (isResizing) => { - set({ isResizing }) - }, _hasHydrated: false, setHasHydrated: (hasHydrated) => { set({ _hasHydrated: hasHydrated }) @@ -44,8 +40,8 @@ export const usePanelStore = create()( * Persist only the durable panel preferences. `activeTab` MUST be kept: * the blocking script in `app/layout.tsx` reads it from this persisted * `panel-state` entry to set `data-panel-active-tab` before hydration, - * preventing a tab flash. The transient `isResizing` drag flag and the - * `_hasHydrated` hydration marker are excluded. + * preventing a tab flash. The `_hasHydrated` hydration marker is + * excluded. */ partialize: (state) => ({ panelWidth: state.panelWidth, diff --git a/apps/sim/stores/panel/types.ts b/apps/sim/stores/panel/types.ts index d26dd609e9e..a46bc93adc1 100644 --- a/apps/sim/stores/panel/types.ts +++ b/apps/sim/stores/panel/types.ts @@ -11,10 +11,6 @@ export interface PanelState { setPanelWidth: (width: number) => void activeTab: PanelTab setActiveTab: (tab: PanelTab) => void - /** Whether the panel is currently being resized */ - isResizing: boolean - /** Updates the panel resize state */ - setIsResizing: (isResizing: boolean) => void _hasHydrated: boolean setHasHydrated: (hasHydrated: boolean) => void } diff --git a/apps/sim/stores/terminal/store.ts b/apps/sim/stores/terminal/store.ts index 009319a5ffd..d8f276c72f6 100644 --- a/apps/sim/stores/terminal/store.ts +++ b/apps/sim/stores/terminal/store.ts @@ -8,7 +8,6 @@ export const useTerminalStore = create()( (set) => ({ terminalHeight: TERMINAL_HEIGHT.DEFAULT, lastExpandedHeight: TERMINAL_HEIGHT.DEFAULT, - isResizing: false, /** * Updates the terminal height and synchronizes the CSS custom property. * @@ -33,23 +32,20 @@ export const useTerminalStore = create()( document.documentElement.style.setProperty('--terminal-height', `${clampedHeight}px`) } }, - /** - * Updates the terminal resize state used to coordinate layout transitions. - * - * @param isResizing - True while the terminal is being resized via mouse drag. - */ - setIsResizing: (isResizing) => { - set({ isResizing }) - }, outputPanelWidth: OUTPUT_PANEL_WIDTH.DEFAULT, /** - * Updates the output panel width, enforcing the minimum constraint. + * Updates the output panel width, enforcing the minimum constraint and + * synchronizing the `--output-panel-width` CSS custom property. * * @param width - Desired width in pixels for the output panel. */ setOutputPanelWidth: (width) => { const clampedWidth = Math.max(OUTPUT_PANEL_WIDTH.MIN, width) set({ outputPanelWidth: clampedWidth }) + + if (typeof window !== 'undefined') { + document.documentElement.style.setProperty('--output-panel-width', `${clampedWidth}px`) + } }, openOnRun: true, /** @@ -94,9 +90,8 @@ export const useTerminalStore = create()( { name: 'terminal-state', /** - * Persist only the durable terminal UI preferences. The transient - * `isResizing` drag flag and the `_hasHydrated` hydration marker are - * excluded so they always start fresh on load. + * Persist only the durable terminal UI preferences. The `_hasHydrated` + * hydration marker is excluded so it always starts fresh on load. */ partialize: (state) => ({ terminalHeight: state.terminalHeight, @@ -107,8 +102,9 @@ export const useTerminalStore = create()( structuredView: state.structuredView, }), /** - * Synchronizes the `--terminal-height` CSS custom property with the - * persisted store value after client-side rehydration. + * Synchronizes the `--terminal-height` and `--output-panel-width` CSS + * custom properties with the persisted store values after client-side + * rehydration. */ onRehydrateStorage: () => (state) => { if (state && typeof window !== 'undefined') { @@ -116,6 +112,10 @@ export const useTerminalStore = create()( '--terminal-height', `${state.terminalHeight}px` ) + document.documentElement.style.setProperty( + '--output-panel-width', + `${state.outputPanelWidth}px` + ) } }, } diff --git a/apps/sim/stores/terminal/types.ts b/apps/sim/stores/terminal/types.ts index a50196102f8..b8eba62e6e1 100644 --- a/apps/sim/stores/terminal/types.ts +++ b/apps/sim/stores/terminal/types.ts @@ -21,21 +21,6 @@ export interface TerminalState { setWrapText: (wrap: boolean) => void structuredView: boolean setStructuredView: (structured: boolean) => void - /** - * Indicates whether the terminal is currently being resized via mouse drag. - * - * @remarks - * This flag is used by other workspace UI elements (e.g. notifications, - * diff controls) to temporarily disable position transitions while the - * terminal height is actively changing, avoiding janky animations. - */ - isResizing: boolean - /** - * Updates the {@link TerminalState.isResizing} flag. - * - * @param isResizing - True while the terminal is being resized. - */ - setIsResizing: (isResizing: boolean) => void _hasHydrated: boolean setHasHydrated: (hasHydrated: boolean) => void }