chore: import upstream snapshot with attribution

apps/sim/stores/panel/editor/index.ts

@@ -0,0 +1 @@
+export { usePanelEditorSearchStore, usePanelEditorStore } from './store'

apps/sim/stores/panel/editor/store.ts

@@ -0,0 +1,145 @@
+'use client'
+
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type {
+  WorkflowSearchRange,
+  WorkflowSearchTarget,
+  WorkflowSearchValuePath,
+} from '@/lib/workflows/search-replace/types'
+import { EDITOR_CONNECTIONS_HEIGHT } from '@/stores/constants'
+import { usePanelStore } from '../store'
+
+let renameCallback: (() => void) | null = null
+
+export type ActiveSearchTargetKind = WorkflowSearchTarget['kind']
+
+export interface ActiveSearchTarget {
+  matchId: string
+  blockId: string
+  subBlockId: string
+  canonicalSubBlockId: string
+  valuePath: WorkflowSearchValuePath
+  kind: string
+  targetKind: ActiveSearchTargetKind
+  subBlockType: string
+  rawValue: string
+  searchText: string
+  query: string
+  range?: WorkflowSearchRange
+  structuredOccurrenceIndex?: number
+  displayLabel?: string
+  resourceGroupKey?: string
+}
+
+/**
+ * State for the Editor panel.
+ * Tracks the currently selected block to edit its subblocks/values and connections panel height.
+ */
+interface PanelEditorState {
+  /** Currently selected block identifier, or null when nothing is selected */
+  currentBlockId: string | null
+  /** Sets the current selected block identifier (use null to clear) */
+  setCurrentBlockId: (blockId: string | null) => void
+  /** Clears the current selection */
+  clearCurrentBlock: () => void
+  /** Height of the connections section in pixels */
+  connectionsHeight: number
+  /** Sets the connections section height */
+  setConnectionsHeight: (height: number) => void
+  /** Toggle connections between collapsed (min height) and expanded (default height) */
+  toggleConnectionsCollapsed: () => void
+  /** Register the rename callback (called by Editor on mount) */
+  registerRenameCallback: (callback: (() => void) | null) => void
+  /** Trigger rename mode by invoking the registered callback */
+  triggerRename: () => void
+}
+
+interface PanelEditorSearchState {
+  /** Ephemeral workflow search target used for scrolling/highlighting editor fields */
+  activeSearchTarget: ActiveSearchTarget | null
+  /** Sets an active search target to highlight in the editor */
+  setActiveSearchTarget: (target: ActiveSearchTarget | null) => void
+}
+
+export const usePanelEditorSearchStore = create<PanelEditorSearchState>()((set) => ({
+  activeSearchTarget: null,
+  setActiveSearchTarget: (target) => {
+    set({ activeSearchTarget: target })
+    if (target) {
+      usePanelStore.getState().setActiveTab('editor')
+    }
+  },
+}))
+
+/**
+ * Editor panel store.
+ * Persisted to preserve selection across navigations/refreshes.
+ */
+export const usePanelEditorStore = create<PanelEditorState>()(
+  persist(
+    (set, get) => ({
+      currentBlockId: null,
+      connectionsHeight: EDITOR_CONNECTIONS_HEIGHT.DEFAULT,
+      registerRenameCallback: (callback) => {
+        renameCallback = callback
+      },
+      triggerRename: () => {
+        renameCallback?.()
+      },
+      setCurrentBlockId: (blockId) => {
+        set({ currentBlockId: blockId })
+        if (blockId !== null) {
+          usePanelStore.getState().setActiveTab('editor')
+        }
+      },
+      clearCurrentBlock: () => {
+        set({ currentBlockId: null })
+        usePanelEditorSearchStore.getState().setActiveSearchTarget(null)
+      },
+      setConnectionsHeight: (height) => {
+        const clampedHeight = Math.max(
+          EDITOR_CONNECTIONS_HEIGHT.MIN,
+          Math.min(EDITOR_CONNECTIONS_HEIGHT.MAX, height)
+        )
+        set({ connectionsHeight: clampedHeight })
+        if (typeof window !== 'undefined') {
+          document.documentElement.style.setProperty(
+            '--editor-connections-height',
+            `${clampedHeight}px`
+          )
+        }
+      },
+      toggleConnectionsCollapsed: () => {
+        const currentState = get()
+        const isAtMinHeight = currentState.connectionsHeight <= 35
+        const newHeight = isAtMinHeight
+          ? EDITOR_CONNECTIONS_HEIGHT.DEFAULT
+          : EDITOR_CONNECTIONS_HEIGHT.MIN
+
+        set({ connectionsHeight: newHeight })
+        if (typeof window !== 'undefined') {
+          document.documentElement.style.setProperty(
+            '--editor-connections-height',
+            `${newHeight}px`
+          )
+        }
+      },
+    }),
+    {
+      name: 'panel-editor-state',
+      partialize: (state) => ({
+        currentBlockId: state.currentBlockId,
+        connectionsHeight: state.connectionsHeight,
+      }),
+      onRehydrateStorage: () => (state) => {
+        if (state && typeof window !== 'undefined') {
+          document.documentElement.style.setProperty(
+            '--editor-connections-height',
+            `${state.connectionsHeight || EDITOR_CONNECTIONS_HEIGHT.DEFAULT}px`
+          )
+        }
+      },
+    }
+  )
+)

apps/sim/stores/panel/index.ts

@@ -0,0 +1,8 @@
+// Main panel store
+
+// Editor
+export { usePanelEditorSearchStore, usePanelEditorStore } from './editor'
+export { usePanelStore } from './store'
+// Toolbar
+export { useToolbarStore } from './toolbar'
+export type { ChatContext, PanelTab } from './types'

apps/sim/stores/panel/store.ts

@@ -0,0 +1,64 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { PANEL_WIDTH } from '@/stores/constants'
+import type { PanelState, PanelTab } from '@/stores/panel/types'
+
+/**
+ * Default panel tab
+ */
+const DEFAULT_TAB: PanelTab = 'copilot'
+
+export const usePanelStore = create<PanelState>()(
+  persist(
+    (set) => ({
+      panelWidth: PANEL_WIDTH.DEFAULT,
+      setPanelWidth: (width) => {
+        // Only enforce minimum - maximum is enforced dynamically by the resize hook
+        const clampedWidth = Math.max(PANEL_WIDTH.MIN, width)
+        set({ panelWidth: clampedWidth })
+        // Update CSS variable for immediate visual feedback
+        if (typeof window !== 'undefined') {
+          document.documentElement.style.setProperty('--panel-width', `${clampedWidth}px`)
+        }
+      },
+      activeTab: DEFAULT_TAB,
+      setActiveTab: (tab) => {
+        set({ activeTab: tab })
+        // Remove data attribute once React takes control
+        if (typeof document !== 'undefined') {
+          document.documentElement.removeAttribute('data-panel-active-tab')
+        }
+      },
+      isResizing: false,
+      setIsResizing: (isResizing) => {
+        set({ isResizing })
+      },
+      _hasHydrated: false,
+      setHasHydrated: (hasHydrated) => {
+        set({ _hasHydrated: hasHydrated })
+      },
+    }),
+    {
+      name: 'panel-state',
+      /**
+       * 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.
+       */
+      partialize: (state) => ({
+        panelWidth: state.panelWidth,
+        activeTab: state.activeTab,
+      }),
+      onRehydrateStorage: () => (state) => {
+        // Sync CSS variables with stored state after rehydration
+        if (state && typeof window !== 'undefined') {
+          document.documentElement.style.setProperty('--panel-width', `${state.panelWidth}px`)
+          // Remove the data attribute so CSS rules stop interfering
+          document.documentElement.removeAttribute('data-panel-active-tab')
+        }
+      },
+    }
+  )
+)

apps/sim/stores/panel/toolbar/index.ts

@@ -0,0 +1 @@
+export { useToolbarStore } from './store'

apps/sim/stores/panel/toolbar/store.ts

@@ -0,0 +1,32 @@
+import { create } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+
+export type ToolbarSectionKey = 'triggers' | 'blocks' | 'customBlocks' | 'tools'
+
+interface ToolbarState {
+  expandedSections: Record<ToolbarSectionKey, boolean>
+  setSectionExpanded: (key: ToolbarSectionKey, expanded: boolean) => void
+}
+
+const initialState: Pick<ToolbarState, 'expandedSections'> = {
+  expandedSections: { triggers: true, blocks: true, customBlocks: true, tools: true },
+}
+
+export const useToolbarStore = create<ToolbarState>()(
+  devtools(
+    persist(
+      (set) => ({
+        ...initialState,
+        setSectionExpanded: (key, expanded) =>
+          set((state) => ({
+            expandedSections: { ...state.expandedSections, [key]: expanded },
+          })),
+      }),
+      {
+        name: 'toolbar-state',
+        partialize: (state) => ({ expandedSections: state.expandedSections }),
+      }
+    ),
+    { name: 'toolbar-store' }
+  )
+)

apps/sim/stores/panel/types.ts

@@ -0,0 +1,38 @@
+/**
+ * Available panel tabs
+ */
+export type PanelTab = 'copilot' | 'editor' | 'toolbar'
+
+/**
+ * Panel state interface
+ */
+export interface PanelState {
+  panelWidth: number
+  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
+}
+
+export type ChatContext =
+  | { kind: 'past_chat'; chatId: string; label: string }
+  | { kind: 'workflow'; workflowId: string; label: string }
+  | { kind: 'current_workflow'; workflowId: string; label: string }
+  | { kind: 'blocks'; blockIds: string[]; label: string }
+  | { kind: 'logs'; executionId?: string; label: string }
+  | { kind: 'workflow_block'; workflowId: string; blockId: string; label: string }
+  | { kind: 'knowledge'; knowledgeId?: string; label: string }
+  | { kind: 'table'; tableId: string; label: string }
+  | { kind: 'file'; fileId: string; label: string }
+  | { kind: 'folder'; folderId: string; label: string }
+  | { kind: 'filefolder'; fileFolderId: string; label: string }
+  | { kind: 'scheduledtask'; scheduleId: string; label: string }
+  | { kind: 'docs'; label: string }
+  | { kind: 'slash_command'; command: string; label: string }
+  | { kind: 'integration'; blockType: string; label: string }
+  | { kind: 'skill'; skillId: string; label: string }