Workspace

import { cn } from "cn"
import { DockviewReact, type DockviewApi, type DockviewReadyEvent, type DockviewTheme, type IDockviewPanelHeaderProps, type IDockviewPanelProps, type SerializedDockview } from "dockview-react"
import "dockview-react/dist/styles/dockview.css"
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type ComponentType, type ReactNode, type SyntheticEvent } from "react"
import { useMaybeHotkeys } from "@/hooks/use-hotkeys"
import { mirrorRoot } from "@/hooks/use-popout"
import {
  createWorkspacePanelStore,
  debounce,
  isReservedPanelId,
  nextPanelId,
  parseWorkspaceLayout,
  WORKSPACE_LAYOUT_KIND,
  WORKSPACE_LAYOUT_VERSION,
  WORKSPACE_PERSISTENCE_BOUNDARIES,
  type WorkspaceDockLayout,
  type WorkspaceLayout,
  type WorkspacePanelState,
  type WorkspacePanelStatePatch,
  type WorkspacePanelStore,
} from "@/lib/workspace-layout"
import { Panel } from "@/components/ui/panel"

// Panels that dock, tab, float, and pop out, on dockview.
//
// The dock owns where things sit. tradecn owns what each panel is: a kind, a title, and a little
// JSON the panel asked to keep. Every docked panel is wrapped in a `Panel`, so it is the hotkey
// scope `panel:<kind>` and wears the active border, and the dock decides which one is active.
//
// Nothing is persisted here. `onLayoutChange` hands over a layout some milliseconds after the last
// change, and `defaultLayout` takes one back.

// The class the registry item's `css` maps onto your shadcn tokens. No `colorScheme`: that is your app's to say.
const THEME: DockviewTheme = { name: "tradecn", className: "dockview-theme-tradecn" }
const PANEL_COMPONENT = "tradecn-panel"

export type WorkspacePanelLocation = "grid" | "floating" | "popout" | "edge"

export interface WorkspacePanelProps {
  id: string
  kind: string
}

export interface WorkspacePanelInfo {
  id: string
  kind: string
  title: string
  active: boolean
  location: WorkspacePanelLocation
}

export interface WorkspaceBox {
  x?: number
  y?: number
  width?: number
  height?: number
}

export interface WorkspaceAddPanelOptions {
  kind: string
  /** `book-1`, `book-2` by default, which an id naming an `Object.prototype` member (`constructor`, `__proto__`, …) gets too. An id that is already open is not opened twice: it is focused, unless `focus: false` leaves everything as it stands. */
  id?: string
  /** The kind by default. */
  title?: string
  state?: WorkspacePanelState
  /** Beside another panel, or as a tab with it (`within`). Left out, it joins the active group. */
  position?: { reference?: string; direction: "left" | "right" | "above" | "below" | "within" }
  /** Open it floating instead. */
  floating?: boolean | WorkspaceBox
  /** Move the keyboard to it once it has rendered. Default true. */
  focus?: boolean
}

export interface WorkspaceApi {
  /** Returns the panel's id. */
  addPanel(options: WorkspaceAddPanelOptions): string
  closePanel(id: string): void
  /** Makes it the active panel and puts the keyboard inside it, so the keys of `panel:<kind>` answer. */
  focusPanel(id: string): void
  /** The next panel in the dock's own order, or the one before with -1. */
  focusNext(step?: 1 | -1): void
  panels(): WorkspacePanelInfo[]
  activePanel(): string | null
  setTitle(id: string, title: string): void
  getState(id: string): WorkspacePanelState | undefined
  setState(id: string, patch: WorkspacePanelStatePatch | ((state: WorkspacePanelState) => WorkspacePanelStatePatch)): void
  float(id: string, box?: WorkspaceBox): void
  /** A window of its own. False when the browser blocked it. Has to run inside a click or a key press. */
  popout(id: string): Promise<boolean>
  toggleMaximize(id: string): void
  toLayout(): WorkspaceLayout
  /** Replaces everything with a stored layout. False, and an empty workspace, when it does not parse or the dock refuses it. */
  load(layout: unknown): boolean
  clear(): void
  /** The dock's own API, for what this one does not cover. */
  readonly dockview: DockviewApi
}

export interface WorkspacePanelHandle extends WorkspacePanelInfo {
  state: WorkspacePanelState
  setTitle(title: string): void
  /** Merges into what the panel keeps across a reload. Small and JSON. */
  setState(patch: WorkspacePanelStatePatch | ((state: WorkspacePanelState) => WorkspacePanelStatePatch)): void
  close(): void
  float(box?: WorkspaceBox): void
  popout(): Promise<boolean>
  toggleMaximize(): void
}

interface WorkspaceContextValue {
  store: WorkspacePanelStore
  kinds: Record<string, ComponentType<WorkspacePanelProps>>
  api: WorkspaceApi | null
  watermark: ReactNode
  tabComponent: ComponentType
  /** The panel's element, once it has one. Returns the unregister. */
  registerHost(id: string, element: HTMLElement): () => void
}

const WorkspaceContext = createContext<WorkspaceContextValue | null>(null)
const WorkspacePanelContext = createContext<WorkspacePanelHandle | null>(null)

interface WorkspaceTabContextValue {
  panelApi: IDockviewPanelHeaderProps["api"]
  tabLocation: IDockviewPanelHeaderProps["tabLocation"]
}

const WorkspaceTabContext = createContext<WorkspaceTabContextValue | null>(null)

/** The panel this component is drawn in: its id, kind, title, kept state, and what the dock can do with it. */
export function useWorkspacePanel(): WorkspacePanelHandle {
  const panel = useContext(WorkspacePanelContext)
  if (!panel) throw new Error("useWorkspacePanel must be called inside a panel of a <Workspace>")
  return panel
}

function locationOf(api: IDockviewPanelProps["api"]): WorkspacePanelLocation {
  return api.location.type
}

interface Internals {
  api: WorkspaceApi
  registerHost: WorkspaceContextValue["registerHost"]
  dispose(): void
}

interface Callbacks {
  onLayoutChange?: (layout: WorkspaceLayout) => void
  onLayoutError?: (reason: unknown) => void
  popoutUrl?: string
}

// Dockview 8.3.1 removes overflow DOM without disposing its tab renderers. Keep the actual
// renderer lifetime tied to that popup so closing it also unmounts consumer effects and portals.
function manageOverflowTabs(dock: DockviewApi) {
  type DockPanel = DockviewApi["panels"][number]
  type Renderer = ReturnType<DockPanel["view"]["createTabRenderer"]>
  const panels = new Map<DockPanel, () => void>()
  const popups = new Map<Element, { observer: MutationObserver; renderers: Set<Renderer> }>()
  const attach = (panel: DockPanel) => {
    if (panels.has(panel)) return
    const view = panel.view
    const create = view.createTabRenderer
    const owned = new Set<Renderer>()
    const wrapped: typeof create = (location) => {
      const renderer = create.call(view, location)
      if (location !== "headerOverflow") return renderer
      owned.add(renderer)
      let disposed = false
      let detach = () => {}
      const dispose = renderer.dispose?.bind(renderer)
      renderer.dispose = () => {
        if (disposed) return
        disposed = true
        owned.delete(renderer)
        detach()
        dispose?.()
      }
      // The dock inserts the renderer synchronously after this factory returns.
      queueMicrotask(() => {
        if (disposed) return
        const anchor = renderer.element.closest(".dv-popover-anchor")
        if (!anchor || !renderer.element.isConnected) { renderer.dispose?.(); return }
        let popup = popups.get(anchor)
        if (!popup) {
          const renderers = new Set<Renderer>()
          const Observer = anchor.ownerDocument.defaultView?.MutationObserver ?? MutationObserver
          const observer = new Observer(() => {
            for (const item of [...renderers]) if (!anchor.contains(item.element)) item.dispose?.()
          })
          observer.observe(anchor, { childList: true, subtree: true })
          popup = { observer, renderers }
          popups.set(anchor, popup)
        }
        popup.renderers.add(renderer)
        const current = popup
        detach = () => {
          current.renderers.delete(renderer)
          if (current.renderers.size === 0) { current.observer.disconnect(); popups.delete(anchor) }
        }
      })
      return renderer
    }
    view.createTabRenderer = wrapped
    panels.set(panel, () => {
      if (view.createTabRenderer === wrapped) view.createTabRenderer = create
      for (const renderer of [...owned]) renderer.dispose?.()
    })
  }
  const added = dock.onDidAddPanel(attach)
  const removed = dock.onDidRemovePanel((panel) => { panels.get(panel)?.(); panels.delete(panel) })
  for (const panel of dock.panels) attach(panel)
  return { dispose() {
    added.dispose()
    removed.dispose()
    for (const cleanup of panels.values()) cleanup()
    panels.clear()
  } }
}

function connect(dv: DockviewApi, store: WorkspacePanelStore, callbacks: () => Callbacks, delay: number): Internals {
  // Loading replaces every panel, and the dock reports each removal and each change as it goes.
  let loading = false
  let wantsFocus: string | null = null
  const hosts = new Map<string, HTMLElement>()
  let focusRepair: { id: string; dispose(): void } | null = null

  const focusHost = (id: string) => {
    const target = hosts.get(id)?.firstElementChild
    // Popouts adopt this element into another document without changing its original prototype.
    if (target && "focus" in target && typeof target.focus === "function") {
      target.focus({ preventScroll: true })
      return target
    }
    return null
  }

  const repairPointerFocus = (id: string, target: Element) => {
    const doc = target.ownerDocument
    const renderer = dv.getPanel(id)?.view.content.element
    const parent = renderer?.parentElement
    if (!doc.defaultView || doc.activeElement !== target || !renderer || !parent || !renderer.contains(target)) return
    // Dockview's pending pointer frame reparents this renderer. Watch only that removal
    // until our frame runs, and relinquish focus when a caller deliberately blurs it.
    let removed = false
    const rememberRemoval = (records: MutationRecord[]) => {
      for (const record of records) for (const node of record.removedNodes) if (node === renderer) removed = true
    }
    const observer = new doc.defaultView.MutationObserver(rememberRemoval)
    const stop = () => pending.dispose()
    const blur = (event: FocusEvent) => {
      if (event.target !== target) return
      queueMicrotask(() => {
        if (focusRepair !== pending) return
        rememberRemoval(observer.takeRecords())
        if (!removed) pending.dispose()
      })
    }
    const pending = { id, dispose() {
      cancelAnimationFrame(frame)
      observer.disconnect()
      doc.removeEventListener("focusin", stop, true)
      doc.removeEventListener("focusout", blur, true)
      if (focusRepair === pending) focusRepair = null
    } }
    // Use Dockview's module-realm queue even when the renderer has been adopted into a popout.
    const frame = requestAnimationFrame(() => {
      if (focusRepair !== pending) return
      rememberRemoval(observer.takeRecords())
      pending.dispose()
      if (removed && dv.activePanel?.id === id && hosts.get(id)?.firstElementChild === target && target.isConnected && target.ownerDocument === doc && !doc.defaultView?.closed && doc.activeElement === doc.body) focusHost(id)
    })
    focusRepair = pending
    observer.observe(parent, { childList: true })
    doc.addEventListener("focusin", stop, true)
    doc.addEventListener("focusout", blur, true)
  }

  const toLayout = (): WorkspaceLayout => {
    const dockview = dv.toJSON()
    const records = store.snapshot()
    const panels = Object.fromEntries(Object.keys(dockview.panels).flatMap((id) => (Object.prototype.hasOwnProperty.call(records, id) ? [[id, records[id]!] as const] : [])))
    return { version: WORKSPACE_LAYOUT_VERSION, kind: WORKSPACE_LAYOUT_KIND, dockview: dockview as unknown as WorkspaceDockLayout, panels, boundaries: WORKSPACE_PERSISTENCE_BOUNDARIES }
  }

  // What was last handed over or loaded, so an event that changed nothing, such as the dock's own
  // pass after a restore, is not a save.
  let written = ""
  const save = debounce(() => {
    const { onLayoutChange } = callbacks()
    if (!onLayoutChange) return
    // The dock may already be gone when the last change is flushed on the way out.
    try {
      const layout = toLayout()
      const text = JSON.stringify(layout)
      if (text === written) return
      written = text
      onLayoutChange(layout)
    } catch (reason) {
      callbacks().onLayoutError?.(reason)
    }
  }, delay)
  const changed = () => {
    if (!loading) save()
  }

  const info = (id: string): WorkspacePanelInfo | null => {
    const panel = dv.getPanel(id)
    const record = store.get(id)
    if (!panel || !record) return null
    return { id, kind: record.kind, title: record.title, active: dv.activePanel?.id === id, location: locationOf(panel.api) }
  }

  const api: WorkspaceApi = {
    addPanel({ kind, id: wanted, title, state, position, floating, focus = true }) {
      // An id that names an Object.prototype member breaks the dock, which keys its panels by plain objects: such a
      // panel opens under its default id instead, and the id returned says which.
      const id = wanted != null && !isReservedPanelId(wanted) ? wanted : nextPanelId(kind, dv.panels.map((panel) => panel.id))
      if (dv.getPanel(id)) {
        // An ensure-open call with focus: false must not steal the keyboard from
        // the panel the trader is in.
        if (focus) api.focusPanel(id)
        return id
      }
      const record = { kind, title: title ?? kind, state: state ?? {} }
      store.set(id, record)
      const earlierFocus = wantsFocus
      if (focus) wantsFocus = id
      try {
        const base = { id, component: PANEL_COMPONENT, title: record.title }
        if (floating) dv.addPanel({ ...base, floating: floating === true ? true : floating })
        else if (position) dv.addPanel({ ...base, position: position.reference ? { referencePanel: position.reference, direction: position.direction } : { direction: position.direction } })
        else dv.addPanel(base)
      } catch (reason) {
        store.delete(id)
        wantsFocus = earlierFocus
        throw reason
      }
      return id
    },
    closePanel(id) {
      dv.getPanel(id)?.api.close()
    },
    focusPanel(id) {
      const previous = focusRepair?.id
      focusRepair?.dispose()
      const panel = dv.getPanel(id)
      if (!panel) return
      const inactive = dv.activePanel?.id !== id
      panel.api.setActive()
      const target = focusHost(id)
      if (target && (inactive || previous === id)) repairPointerFocus(id, target)
    },
    focusNext(step = 1) {
      if (step === 1) dv.moveToNext({ includePanel: true })
      else dv.moveToPrevious({ includePanel: true })
      const id = dv.activePanel?.id
      if (id) focusHost(id)
    },
    panels: () => dv.panels.flatMap((panel) => info(panel.id) ?? []),
    activePanel: () => dv.activePanel?.id ?? null,
    setTitle(id, title) {
      store.setTitle(id, title)
    },
    getState: (id) => store.get(id)?.state,
    setState(id, patch) {
      store.setState(id, patch)
    },
    float(id, box) {
      const panel = dv.getPanel(id)
      if (panel) dv.addFloatingGroup(panel, box)
    },
    async popout(id) {
      const panel = dv.getPanel(id)
      if (!panel) return false
      return dv.addPopoutGroup(panel, { popoutUrl: callbacks().popoutUrl })
    },
    toggleMaximize(id) {
      const panel = dv.getPanel(id)
      if (!panel) return
      if (panel.api.isMaximized()) panel.api.exitMaximized()
      else panel.api.maximize()
    },
    toLayout,
    load(value) {
      const layout = parseWorkspaceLayout(value)
      loading = true
      try {
        if (!layout) throw new Error("not a version 1 tradecn workspace layout")
        store.replace(layout.panels)
        dv.fromJSON(layout.dockview as unknown as SerializedDockview)
        written = JSON.stringify(toLayout())
        return true
      } catch (reason) {
        dv.clear()
        store.replace({})
        callbacks().onLayoutError?.(reason)
        return false
      } finally {
        loading = false
      }
    },
    clear() {
      dv.clear()
    },
    dockview: dv,
  }

  // The store is where a title lives; the dock draws it in places this file does not render, such as the overflow list.
  const syncTitles = () => {
    for (const panel of dv.panels) {
      const title = store.get(panel.id)?.title
      if (title && panel.title !== title) panel.api.setTitle(title)
    }
  }

  const disposables = [
    manageOverflowTabs(dv),
    dv.onDidLayoutChange(changed),
    dv.onDidRemovePanel((panel) => {
      if (loading) return
      hosts.delete(panel.id)
      store.delete(panel.id)
    }),
    dv.onDidLayoutFromJSON(syncTitles),
  ]
  const unsubscribe = store.subscribe(() => {
    syncTitles()
    changed()
  })

  return {
    api,
    registerHost(id, element) {
      hosts.set(id, element)
      if (wantsFocus === id) {
        wantsFocus = null
        focusHost(id)
      }
      return () => {
        if (hosts.get(id) === element) hosts.delete(id)
      }
    },
    dispose() {
      focusRepair?.dispose()
      save.flush()
      unsubscribe()
      for (const d of disposables) d.dispose()
    },
  }
}

export interface WorkspaceProps extends Omit<ComponentProps<"div">, "children"> {
  /** What draws each kind of panel. Keep it the same object between renders: every panel re-renders when it changes. */
  panels: Record<string, ComponentType<WorkspacePanelProps>>
  /** Contents of each tab, including overflow entries. Define the component outside render to preserve its state. */
  tabComponent?: ComponentType
  /** A stored layout, read once as the workspace mounts. Anything that does not parse falls through to `seed`. */
  defaultLayout?: unknown
  /** Builds the starting layout when there is none to restore. */
  seed?: (api: WorkspaceApi) => void
  /** The layout, some milliseconds after the last change to it. Saving it is yours. */
  onLayoutChange?: (layout: WorkspaceLayout) => void
  /** How long a burst of changes has to go quiet. Default 250. */
  layoutChangeDelay?: number
  /** A stored layout was refused, or a layout could not be written out. */
  onLayoutError?: (reason: unknown) => void
  onReady?: (api: WorkspaceApi) => void
  /** Shown while there are no panels. */
  watermark?: ReactNode
  /** Disables grid splitter resizing. Use dockview.updateOptions for drag policy. */
  locked?: boolean
  disableFloating?: boolean
  /** The same-origin page a popout opens. The dock's default is `/popout.html`, and it has to exist. */
  popoutUrl?: string
}

// A delay a timer can wait out: NaN or a negative number fires at once, which would save on every pointer move of a
// drag, so those read as the default; one past 2^31 - 1 ms fires at once too, so it is capped there.
const saveDelay = (ms: number) => (Number.isFinite(ms) && ms >= 0 ? Math.min(ms, 2_147_483_647) : 250)

export function Workspace({ panels, tabComponent = DefaultWorkspaceTab, defaultLayout, seed, onLayoutChange, layoutChangeDelay = 250, onLayoutError, onReady, watermark = null, locked, disableFloating, popoutUrl, className, ...props }: WorkspaceProps) {
  const [store] = useState(createWorkspacePanelStore)
  const [internals, setInternals] = useState<Internals | null>(null)
  const latest = useRef({ defaultLayout, seed, onLayoutChange, onLayoutError, onReady, layoutChangeDelay, popoutUrl })
  useEffect(() => {
    latest.current = { defaultLayout, seed, onLayoutChange, onLayoutError, onReady, layoutChangeDelay, popoutUrl }
  })
  const live = useRef<Internals | null>(null)
  // The last change is written out before the dock goes: a parent's cleanup runs ahead of its child's.
  useEffect(
    () => () => {
      live.current?.dispose()
      live.current = null
    },
    [],
  )

  const ready = useCallback(
    (event: DockviewReadyEvent) => {
      live.current?.dispose()
      const next = connect(event.api, store, () => latest.current, saveDelay(latest.current.layoutChangeDelay))
      live.current = next
      setInternals(next)
      const { defaultLayout: stored, seed: build, onReady: tell } = latest.current
      const restored = stored !== undefined && stored !== null && next.api.load(stored)
      if (!restored) build?.(next.api)
      tell?.(next.api)
    },
    [store],
  )

  const context = useMemo<WorkspaceContextValue>(
    () => ({ store, kinds: panels, api: internals?.api ?? null, watermark, tabComponent, registerHost: (id, element) => internals?.registerHost(id, element) ?? (() => {}) }),
    [store, panels, internals, watermark, tabComponent],
  )

  return (
    <WorkspaceContext.Provider value={context}>
      <div data-slot="tradecn-workspace" className={cn("relative h-full min-h-0 w-full min-w-0 lining-nums tabular-nums", className)} {...props}>
        <DockviewReact
          components={COMPONENTS}
          defaultTabComponent={WorkspaceTabHost}
          watermarkComponent={WorkspaceWatermark}
          theme={THEME}
          locked={locked}
          disableFloatingGroups={disableFloating}
          popoutUrl={popoutUrl}
          onReady={ready}
        />
      </div>
    </WorkspaceContext.Provider>
  )
}

function useWorkspaceContext(): WorkspaceContextValue {
  const workspace = useContext(WorkspaceContext)
  if (!workspace) throw new Error("a workspace panel was rendered outside a <Workspace>")
  return workspace
}

function WorkspacePanelHost({ api: panelApi }: IDockviewPanelProps) {
  const { store, kinds, api, registerHost } = useWorkspaceContext()
  const hotkeys = useMaybeHotkeys()
  const id = panelApi.id
  const getRecord = useCallback(() => store.get(id), [store, id])
  const record = useSyncExternalStore(store.subscribe, getRecord, getRecord)

  const subscribe = useCallback(
    (cb: () => void) => {
      const disposables = [panelApi.onDidActiveChange(cb), panelApi.onDidActiveGroupChange(cb), panelApi.onDidLocationChange(cb)]
      return () => {
        for (const d of disposables) d.dispose()
      }
    },
    [panelApi],
  )
  const active = useSyncExternalStore(
    subscribe,
    () => panelApi.isActive && panelApi.isGroupActive,
    () => false,
  )
  const location = useSyncExternalStore(
    subscribe,
    () => locationOf(panelApi),
    () => "grid" as const,
  )

  const [element, setElement] = useState<HTMLDivElement | null>(null)
  useEffect(() => (element ? registerHost(id, element) : undefined), [registerHost, id, element])

  // A popout is another document in the same JavaScript: it needs the keys, and the root element's
  // attributes, which is where a theme class lives. The dock copies the stylesheets itself.
  const popoutDocument = location === "popout" && element && element.ownerDocument !== document ? element.ownerDocument : null
  useEffect(() => (hotkeys && popoutDocument ? hotkeys.attach(popoutDocument) : undefined), [hotkeys, popoutDocument])
  useEffect(() => {
    if (!popoutDocument) return
    mirrorRoot(document, popoutDocument)
    if (typeof MutationObserver === "undefined") return
    const observer = new MutationObserver(() => mirrorRoot(document, popoutDocument))
    observer.observe(document.documentElement, { attributes: true })
    return () => observer.disconnect()
  }, [popoutDocument])

  const handle = useMemo<WorkspacePanelHandle | null>(
    () =>
      api && record
        ? {
            id,
            kind: record.kind,
            title: record.title,
            state: record.state,
            active,
            location,
            setTitle: (title) => api.setTitle(id, title),
            setState: (patch) => api.setState(id, patch),
            close: () => api.closePanel(id),
            float: (box) => api.float(id, box),
            popout: () => api.popout(id),
            toggleMaximize: () => api.toggleMaximize(id),
          }
        : null,
    [api, record, id, active, location],
  )
  if (!handle) return null
  // Own keys only: a layout naming "constructor" or "__proto__" must hit the
  // placeholder, not an Object.prototype member. The long spelling keeps installed
  // source compiling for consumers whose TypeScript lib predates ES2022.
  const Component = Object.prototype.hasOwnProperty.call(kinds, handle.kind) ? kinds[handle.kind] : undefined

  return (
    <WorkspacePanelContext.Provider value={handle}>
      <div ref={setElement} data-workspace-panel={id} className="contents">
        <Panel kind={handle.kind} active={active} aria-label={handle.title} className="h-full rounded-none border-transparent">
          {Component ? <Component id={id} kind={handle.kind} /> : <p className="m-auto p-4 text-center text-xs text-muted-foreground">No panel is registered for the kind “{handle.kind}”.</p>}
        </Panel>
      </div>
    </WorkspacePanelContext.Provider>
  )
}

function WorkspaceTabHost({ api: panelApi, tabLocation }: IDockviewPanelHeaderProps) {
  const { tabComponent: Component } = useWorkspaceContext()
  const context = useMemo(() => ({ panelApi, tabLocation }), [panelApi, tabLocation])
  return <WorkspaceTabContext.Provider value={context}><Component /></WorkspaceTabContext.Provider>
}

function useWorkspaceTabContext() {
  const context = useContext(WorkspaceTabContext)
  if (!context) throw new Error("workspace tab parts must be rendered by a <Workspace> tabComponent")
  return context
}

function useWorkspaceTabTitle() {
  const { panelApi } = useWorkspaceTabContext()
  const subscribe = useCallback(
    (cb: () => void) => {
      const d = panelApi.onDidTitleChange(cb)
      return () => d.dispose()
    },
    [panelApi],
  )
  return useSyncExternalStore(
    subscribe,
    () => panelApi.title ?? panelApi.id,
    () => panelApi.id,
  )
}

export interface WorkspaceTabHandle extends Omit<WorkspacePanelHandle, "kind" | "state"> {
  /** Undefined for a panel added directly through the raw Dockview API without a workspace record. */
  kind: string | undefined
  state: WorkspacePanelState | undefined
  /** The same panel can have a tab in both places at once. */
  tabLocation: IDockviewPanelHeaderProps["tabLocation"]
  /** Requires a workspace record. Raw panels ignore this command; use their native panel API instead. */
  setTitle(title: string): void
  /** Requires a workspace record. Raw panels ignore the patch without calling an updater. */
  setState: WorkspacePanelHandle["setState"]
  /** Activates this panel; moves body focus only when a workspace host is registered. */
  focus(): void
}

/** Opt into this panel's state and dock events. Static tab markup needs no subscription. */
export function useWorkspaceTab(): WorkspaceTabHandle {
  const { panelApi, tabLocation } = useWorkspaceTabContext()
  const { store, api } = useWorkspaceContext()
  const id = panelApi.id
  const getRecord = useCallback(() => store.get(id), [store, id])
  const record = useSyncExternalStore(store.subscribe, getRecord, getRecord)
  const title = useWorkspaceTabTitle()
  const subscribe = useCallback((cb: () => void) => {
    const listeners = [panelApi.onDidActiveChange(cb), panelApi.onDidActiveGroupChange(cb), panelApi.onDidLocationChange(cb)]
    return () => { for (const listener of listeners) listener.dispose() }
  }, [panelApi])
  const active = useSyncExternalStore(subscribe, () => panelApi.isActive && panelApi.isGroupActive, () => false)
  const location = useSyncExternalStore(subscribe, () => locationOf(panelApi), () => "grid" as const)
  return {
    id, kind: record?.kind, state: record?.state, title, active, location, tabLocation,
    setTitle: (value) => api?.setTitle(id, value),
    setState: (patch) => api?.setState(id, patch),
    close: () => panelApi.close(),
    float: (box) => api?.float(id, box),
    popout: () => api?.popout(id) ?? Promise.resolve(false),
    toggleMaximize: () => api?.toggleMaximize(id),
    focus: () => api?.focusPanel(id),
  }
}

export interface WorkspaceTabProps extends ComponentProps<"div"> {
  children: ReactNode
}

/** Inner tab contents. Dockview owns the outer tab's role, name, keyboard navigation and drag. */
export function WorkspaceTab({ className, onClick, ...props }: WorkspaceTabProps) {
  const { panelApi } = useWorkspaceTabContext()
  const { api } = useWorkspaceContext()
  return <div data-workspace-tab={panelApi.id} className={cn("flex h-full items-center gap-1.5 text-xs", className)} {...props} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented && event.currentTarget.contains(event.target as Node)) api?.focusPanel(panelApi.id)
  }} />
}

export function WorkspaceTabTitle({ className, ...props }: Omit<ComponentProps<"span">, "children"> & { children?: never }) {
  const title = useWorkspaceTabTitle()
  return <span data-slot="tradecn-workspace-tab-title" className={cn("truncate", className)} {...props}>{title}</span>
}

export interface WorkspaceTabCloseProps extends ComponentProps<"button"> {
  children: ReactNode
}

export function WorkspaceTabClose({ className, onClick, type = "button", "aria-label": label, "aria-labelledby": labelledBy, ...props }: WorkspaceTabCloseProps) {
  const { panelApi, tabLocation } = useWorkspaceTabContext()
  const title = useWorkspaceTabTitle()
  return <button
    type={type}
    data-slot="tradecn-workspace-tab-close"
    aria-label={label ?? (labelledBy ? undefined : `Close ${title}`)}
    aria-labelledby={labelledBy}
    className={cn("-mr-1 inline-flex size-4 items-center justify-center rounded-sm leading-none text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50", className)}
    {...props}
    onClick={(event) => {
      onClick?.(event)
      if (event.defaultPrevented) { event.stopPropagation(); return }
      // The native overflow row dismisses on click; prevent it from activating the removed panel.
      if (tabLocation === "headerOverflow") event.preventDefault()
      else event.stopPropagation()
      panelApi.close()
    }}
  />
}

export interface WorkspaceTabActionsProps extends ComponentProps<"div"> {
  children: ReactNode
}

/** Controls that keep their own focus and do not activate or drag the surrounding tab. */
export function WorkspaceTabActions({ className, onMouseDownCapture, onPointerDown, onMouseDown, onTouchStart, onClick, onDragStart, onKeyDown, ...props }: WorkspaceTabActionsProps) {
  const { tabLocation } = useWorkspaceTabContext()
  const release = useRef<(() => void) | null>(null)
  useEffect(() => () => release.current?.(), [])
  const isolateTabEvent = (event: SyntheticEvent<HTMLDivElement>) => {
    // Header portals need document listeners for outside dismissal. Overflow portals also need
    // isolation from the dock's window-level popup dismissal.
    if (tabLocation === "headerOverflow" || event.currentTarget.contains(event.target as Node)) event.stopPropagation()
  }
  return <div data-slot="tradecn-workspace-tab-actions" className={cn("flex shrink-0 items-center gap-1.5", className)} {...props}
    onMouseDownCapture={(event) => {
      onMouseDownCapture?.(event)
      release.current?.()
      // Arm the drag guard before child controls can stop bubbling. Capture never stops their handlers.
      // Portaled menu content belongs to this React tree, but not to the tab's drag surface.
      if (!event.currentTarget.contains(event.target as Node)) return
      const tab = event.currentTarget.closest(".dv-tab")
      if (!tab) return
      const doc = tab.ownerDocument
      const stopDrag = (drag: DragEvent) => {
        // HTML5 drag starts on the draggable ancestor, bypassing the inner control's handlers.
        if (drag.target === tab) { drag.preventDefault(); drag.stopPropagation() }
      }
      const cleanup = () => {
        doc.removeEventListener("dragstart", stopDrag, true)
        doc.removeEventListener("dragend", cleanup, true)
        doc.removeEventListener("mousedown", cleanup, true)
        doc.removeEventListener("mouseup", cleanup, true)
        doc.defaultView?.removeEventListener("blur", cleanup)
        release.current = null
      }
      doc.addEventListener("dragstart", stopDrag, true)
      doc.addEventListener("dragend", cleanup, true)
      doc.addEventListener("mousedown", cleanup, true)
      doc.addEventListener("mouseup", cleanup, true)
      doc.defaultView?.addEventListener("blur", cleanup)
      release.current = cleanup
    }}
    onPointerDown={(event) => { onPointerDown?.(event); isolateTabEvent(event) }}
    onMouseDown={(event) => { onMouseDown?.(event); isolateTabEvent(event) }}
    onTouchStart={(event) => { onTouchStart?.(event); isolateTabEvent(event) }}
    onClick={(event) => { onClick?.(event); isolateTabEvent(event) }}
    onDragStart={(event) => {
      onDragStart?.(event)
      // Draggable children own their data and default action; only the surrounding dock is excluded.
      if (event.currentTarget.contains(event.target as Node)) event.stopPropagation()
    }}
    onKeyDown={(event) => {
      onKeyDown?.(event)
      // The dock dismisses at the window even when a nested control handled the key. A portaled
      // menu gets its own Escape; Escape on an ordinary overflow control still closes the dock popup.
      if (tabLocation === "headerOverflow" && (event.key === "Enter" || (event.key === "Escape" && (event.defaultPrevented || !event.currentTarget.contains(event.target as Node))))) event.stopPropagation()
    }}
  />
}

function DefaultWorkspaceTab() {
  return <WorkspaceTab><WorkspaceTabTitle /><WorkspaceTabClose>×</WorkspaceTabClose></WorkspaceTab>
}

function WorkspaceWatermark() {
  const { watermark } = useWorkspaceContext()
  return <div className="flex h-full items-center justify-center text-xs text-muted-foreground">{watermark}</div>
}

const COMPONENTS = { [PANEL_COMPONENT]: WorkspacePanelHost }

import { cn } from "cn"
import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, type ComponentProps, type KeyboardEvent, type ReactNode, type SyntheticEvent } from "react"
import { createPortal } from "react-dom"
import { Input } from "@/components/ui/input"
import { HotkeyScope, useMaybeHotkeys } from "@/hooks/use-hotkeys"
import type { Popout } from "@/hooks/use-popout"
import { cycleLinkGroup, type LinkGroup, type LinkGroupId } from "@/lib/link-group"

// The frame around one thing on a trading screen: a book, a chart, a blotter.
//
// A panel is a hotkey scope, so its keys come with it: `kind="book"` is the scope
// `panel:book`, shared by every book on the screen, and the book with focus is the
// one that answers a key. Palette actions registered with that scope are offered when
// the palette opens from inside a book; with several books, register them with
// `within: useHotkeyScope()` so the book that held focus is the one that runs. The header is a drag handle for whatever lays panels out, and the things in it that take
// a click keep that click from starting a drag.

interface PanelContextValue {
  titleId: string
}

const PanelContext = createContext<PanelContextValue | null>(null)

// The layout around a panel listens for one of these on the header to start a drag.
const keepFromDrag = { onPointerDown: stop, onMouseDown: stop, onTouchStart: stop }

function stop(event: SyntheticEvent) {
  event.stopPropagation()
}

// The consumer's handler runs first, and cancelling it lets the press reach the header's drag.
// Only a cancellation the handler itself adds opts out: a press an ancestor capture already
// prevented still stays away from the drag.
function guardFromDrag<E extends SyntheticEvent>(own?: (event: E) => void) {
  return (event: E) => {
    const alreadyPrevented = event.defaultPrevented
    own?.(event)
    if (alreadyPrevented || !event.defaultPrevented) event.stopPropagation()
  }
}

export type PanelState = "error" | "drag-target" | "active" | "inactive" | "auto"

export interface PanelProps extends Omit<ComponentProps<"div">, "ref"> {
  /** The kind of panel, `book` or `chart`. It is the hotkey scope `panel:<kind>`, shared by every instance. */
  kind: string
  /** Draw the active border. Left out, the panel is active while focus is inside it. */
  active?: boolean
  /** Something is being dragged over this panel. */
  dragTarget?: boolean
  /** Draw the error border. It outranks the other two. */
  error?: boolean
}

export function Panel({ kind, active, dragTarget = false, error = false, className, children, ...props }: PanelProps) {
  const titleId = useId()
  const state: PanelState = error ? "error" : dragTarget ? "drag-target" : active === undefined ? "auto" : active ? "active" : "inactive"
  return (
    <PanelContext.Provider value={{ titleId }}>
      <HotkeyScope
        role="region"
        aria-labelledby={props["aria-label"] ? undefined : titleId}
        {...props}
        scope={`panel:${kind}`}
        data-slot="tradecn-panel"
        data-kind={kind}
        data-state={state}
        className={cn(
          "flex min-h-0 min-w-0 flex-col overflow-hidden rounded-md border border-border bg-card text-card-foreground outline-none lining-nums tabular-nums",
          "data-[state=active]:border-panel-active data-[state=auto]:focus-within:border-panel-active",
          "data-[state=drag-target]:border-panel-drag-target data-[state=drag-target]:bg-panel-drag-target/10",
          "data-[state=error]:border-panel-error",
          className,
        )}
      >
        {children}
      </HotkeyScope>
    </PanelContext.Provider>
  )
}

/** The strip along the top, and the handle a layout drags the panel by: aim it at `[data-panel-handle]`. */
export function PanelHeader({ className, ...props }: ComponentProps<"div">) {
  return <div data-panel-handle="" className={cn("flex h-7 shrink-0 items-center gap-1.5 border-b border-border bg-muted/40 px-2 text-xs select-none", className)} {...props} />
}

/** Names the panel, to the eye and to a screen reader. */
export function PanelTitle({ className, ...props }: ComponentProps<"div">) {
  const panel = useContext(PanelContext)
  return <div id={panel?.titleId} className={cn("truncate font-medium", className)} {...props} />
}

/** Your buttons, pushed to the far end of the header. A press on one does not start a drag unless your handler cancels. */
export function PanelActions({ className, onPointerDown, onMouseDown, onTouchStart, ...props }: ComponentProps<"div">) {
  return <div className={cn("ml-auto flex items-center gap-0.5", className)} {...props} onPointerDown={guardFromDrag(onPointerDown)} onMouseDown={guardFromDrag(onMouseDown)} onTouchStart={guardFromDrag(onTouchStart)} />
}

export function PanelContent({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("min-h-0 flex-1 overflow-auto", className)} {...props} />
}

export interface SymbolTagProps {
  value: string | null
  /** Enter on a draft that is not blank and not what is already showing. */
  onCommit: (symbol: string) => void
  /** Trims and upper-cases by default. Pass your own for symbols where case matters. */
  normalize?: (raw: string) => string
  /** False refuses the draft: the field stays open and marks itself invalid. */
  validate?: (symbol: string) => boolean
  /** Shown while there is no symbol. */
  placeholder?: string
  /** Controlled edit mode, for a hotkey that opens the field. */
  editing?: boolean
  onEditingChange?: (editing: boolean) => void
  disabled?: boolean
  label?: string
  className?: string
}

const defaultNormalize = (raw: string) => raw.trim().toUpperCase()

/**
 * The panel's symbol. Click it, or press Enter on it, to type another: Enter commits, Escape and
 * clicking away put it back. When the symbol changes and it was not typed here, the tag rings once
 * in `panel-sync`, which is how a panel says it followed its link group.
 */
export function SymbolTag({ value, onCommit, normalize = defaultNormalize, validate, placeholder = "symbol", editing: editingProp, onEditingChange, disabled = false, label = "Symbol", className }: SymbolTagProps) {
  const [ownEditing, setOwnEditing] = useState(false)
  const editing = (editingProp ?? ownEditing) && !disabled
  const [draft, setDraft] = useState("")
  const [invalid, setInvalid] = useState(false)
  const [wasEditing, setWasEditing] = useState(false)
  const root = useRef<HTMLSpanElement>(null)
  const input = useRef<HTMLInputElement>(null)
  const button = useRef<HTMLButtonElement>(null)
  // Set by the keyboard exits, so focus goes back to the tag and stays in the panel's scope. Clicking away keeps the click's focus.
  const refocus = useRef(false)
  // The field is open and has not been left yet. Some engines blur an input as it is removed, and that must not count as clicking away.
  const open = useRef(false)
  const typedHere = useRef(value)

  // Opened from outside (a hotkey): start from what is showing, same as a click.
  if (editing !== wasEditing) {
    setWasEditing(editing)
    if (editing) {
      setDraft(value ?? "")
      setInvalid(false)
    }
  }

  function setEditing(next: boolean) {
    if (editingProp === undefined) setOwnEditing(next)
    onEditingChange?.(next)
  }

  function leave(restoreFocus: boolean) {
    if (!open.current) return
    open.current = false
    refocus.current = restoreFocus
    setEditing(false)
  }

  function commit() {
    const next = normalize(draft)
    if (!next || next === value) return leave(true)
    if (validate && !validate(next)) return setInvalid(true)
    typedHere.current = next
    onCommit(next)
    leave(true)
  }

  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (event.key !== "Enter" && event.key !== "Escape") return
    // Claimed, so a hotkey dispatcher listening further out leaves it alone.
    event.preventDefault()
    event.stopPropagation()
    if (event.key === "Enter") commit()
    else leave(true)
  }

  useLayoutEffect(() => {
    if (editing) {
      open.current = true
      input.current?.focus()
      input.current?.select()
    } else if (refocus.current) {
      refocus.current = false
      button.current?.focus()
    }
  }, [editing])

  useLayoutEffect(() => {
    if (typedHere.current === value) return
    typedHere.current = value
    const el = root.current
    if (!el || typeof el.animate !== "function") return
    if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return
    el.animate([{ boxShadow: "0 0 0 1px var(--panel-sync)" }, { boxShadow: "0 0 0 1px transparent" }], { duration: 900, easing: "ease-out" })
  }, [value])

  return (
    <span ref={root} {...keepFromDrag} data-symbol-tag="" data-editing={editing} className={cn("inline-flex h-5 items-center rounded-sm font-(family-name:--tradecn-font-mono) text-xs", className)}>
      {editing ? (
        <Input
          ref={input}
          value={draft}
          onChange={(event) => {
            setDraft(event.target.value)
            setInvalid(false)
          }}
          onKeyDown={onKeyDown}
          onBlur={() => leave(false)}
          aria-label={label}
          aria-invalid={invalid || undefined}
          spellCheck={false}
          autoComplete="off"
          autoCapitalize="characters"
          className="h-5 w-24 rounded-sm px-1 py-0 font-(family-name:--tradecn-font-mono) text-xs md:text-xs"
        />
      ) : (
        <button
          ref={button}
          type="button"
          disabled={disabled}
          aria-label={value ? `${label} ${value}, change` : `${label}, none, set`}
          onClick={() => setEditing(true)}
          className={cn("h-5 rounded-sm px-1 font-semibold outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none", !value && "font-normal text-muted-foreground")}
        >
          {value ?? placeholder}
        </button>
      )}
    </span>
  )
}

const LINK_CLASS: Record<LinkGroupId, string> = {
  1: "bg-link-1",
  2: "bg-link-2",
  3: "bg-link-3",
  4: "bg-link-4",
}

export interface LinkGroupDotProps extends Omit<ComponentProps<"button">, "onChange" | "children"> {
  group: LinkGroup
  /** Click moves to the next group, Shift+click to the one before. */
  onGroupChange: (group: LinkGroup) => void
}

/** Which link group the panel is in, as a color and a number, because color is never the only channel. */
export function LinkGroupDot({ group, onGroupChange, className, onClick, onPointerDown, onMouseDown, onTouchStart, ...props }: LinkGroupDotProps) {
  const name = group === null ? "Not linked" : `Link group ${group}`
  return (
    <button
      type="button"
      onPointerDown={guardFromDrag(onPointerDown)}
      onMouseDown={guardFromDrag(onMouseDown)}
      onTouchStart={guardFromDrag(onTouchStart)}
      aria-label={`${name}, change`}
      title={name}
      data-link-group={group ?? "none"}
      className={cn(
        "inline-flex size-4 shrink-0 items-center justify-center rounded-sm text-xs leading-none font-semibold text-black/85 outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
        group === null ? "border border-dashed border-muted-foreground/60" : LINK_CLASS[group],
        className,
      )}
      {...props}
      onClick={(event) => {
        onClick?.(event)
        if (!event.defaultPrevented) onGroupChange(cycleLinkGroup(group, event.shiftKey ? -1 : 1))
      }}
    >
      {group}
    </button>
  )
}

export interface PanelPopoutProps {
  /** From `usePopout()`. */
  popout: Popout
  /** What the page shows in the panel's place while it is out. */
  placeholder?: ReactNode
  children?: ReactNode
}

/**
 * Renders its children in the page or in the popout's window, wherever `popout` says, without
 * remounting them. Inside a `HotkeysProvider` the popout's document gets the same keys.
 */
export function PanelPopout({ popout, placeholder, children }: PanelPopoutProps) {
  const { slotRef, isOpen, host, window: popoutWindow } = popout
  const hotkeys = useMaybeHotkeys()
  const target = popoutWindow?.document
  useEffect(() => (hotkeys && target ? hotkeys.attach(target) : undefined), [hotkeys, target])
  return (
    <>
      <div ref={slotRef} className="contents" />
      {isOpen ? placeholder : null}
      {host ? createPortal(children, host) : null}
    </>
  )
}

import { createContext, useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react"
import { createBroadcastChannelTransport, createLinkGroupStore, cycleLinkGroup, normalizeSymbol, type LinkGroup, type LinkGroupStore, type LinkTransport } from "@/lib/link-group"

// React bindings for the link-group store: a provider that owns one and keeps it connected, and a
// hook that gives a panel its group and its symbol.

const StoreContext = createContext<LinkGroupStore | null>(null)

export interface LinkGroupProviderProps {
  /** Bring your own, to seed it or to share one between roots. One is created otherwise, and `transport` and `channel` are ignored. */
  store?: LinkGroupStore
  /** How a link reaches other windows. BroadcastChannel by default; `null` keeps links inside this window. Read once. */
  transport?: LinkTransport | null
  /** The BroadcastChannel name for the default transport. Read once. */
  channel?: string
  children?: ReactNode
}

export function LinkGroupProvider({ store, transport, channel, children }: LinkGroupProviderProps) {
  const [own] = useState(() => createLinkGroupStore({ transport: transport === undefined ? createBroadcastChannelTransport(channel) : transport }))
  const value = store ?? own
  useEffect(() => value.connect(), [value])
  return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>
}

/** The store from the nearest provider. */
export function useLinkGroupStore(): LinkGroupStore {
  const store = useContext(StoreContext)
  if (!store) throw new Error("useLinkGroup needs a <LinkGroupProvider> above it")
  return store
}

export interface UseLinkGroupOptions {
  /** Controlled group, for a layout that persists it. */
  group?: LinkGroup
  defaultGroup?: LinkGroup
  onGroupChange?: (group: LinkGroup) => void
  /** What the panel shows before anyone sets anything. */
  defaultSymbol?: string | null
  /** The symbol this panel shows changed, by its own hand or through its group. The moment to persist. */
  onSymbolChange?: (symbol: string | null) => void
  /** Recorded on the group with every write from here: usually the panel's id. */
  source?: string
}

export interface LinkGroupHandle {
  group: LinkGroup
  symbol: string | null
  /** Sets this panel's symbol and, when it is linked, its group's. */
  setSymbol: (symbol: string | null) => void
  setGroup: (group: LinkGroup) => void
  /** Unlinked, 1, 2, 3, 4, unlinked. */
  cycleGroup: (step?: 1 | -1) => void
}

/**
 * A panel's group and symbol. Unlinked, the symbol is the panel's own. Linked, it is the group's:
 * joining a group that has a symbol adopts it, joining an empty one gives it this panel's, and
 * leaving keeps whatever was showing.
 */
export function useLinkGroup(options: UseLinkGroupOptions = {}): LinkGroupHandle {
  const { group: controlled, defaultGroup = null, onGroupChange, defaultSymbol = null, onSymbolChange, source = null } = options
  const store = useLinkGroupStore()
  const [ownGroup, setOwnGroup] = useState<LinkGroup>(defaultGroup)
  const group = controlled !== undefined ? controlled : ownGroup
  const [symbol, setOwnSymbol] = useState<string | null>(() => normalizeSymbol(defaultSymbol))
  const linked = useSyncExternalStore(
    store.subscribe,
    () => (group === null ? null : store.get(group)),
    () => null,
  )
  // Follow the group once it has something to say, a clear included. State set during render, so the
  // panel never paints the symbol it just left behind.
  if (linked && (linked.version > 0 || linked.symbol !== null) && linked.symbol !== symbol) setOwnSymbol(linked.symbol)

  // A group nobody has written to takes the symbol of the first panel to join it.
  useEffect(() => {
    if (group !== null) store.seed(group, symbol, source)
  }, [store, group, symbol, source])

  const notify = useRef(onSymbolChange)
  useEffect(() => {
    notify.current = onSymbolChange
  })
  const told = useRef(symbol)
  useEffect(() => {
    if (told.current === symbol) return
    told.current = symbol
    notify.current?.(symbol)
  }, [symbol])

  const setSymbol = useCallback(
    (next: string | null) => {
      const value = normalizeSymbol(next)
      setOwnSymbol(value)
      if (group !== null) store.set(group, value, source)
    },
    [store, group, source],
  )
  const setGroup = useCallback(
    (next: LinkGroup) => {
      if (controlled === undefined) setOwnGroup(next)
      onGroupChange?.(next)
    },
    [controlled, onGroupChange],
  )
  const cycleGroup = useCallback((step: 1 | -1 = 1) => setGroup(cycleLinkGroup(group, step)), [group, setGroup])

  return { group, symbol, setSymbol, setGroup, cycleGroup }
}

import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"

// A panel in a window of its own, without losing the panel.
//
// The content is rendered through a portal into one host element that never changes. The host sits
// in a slot in the page while the popout is closed and in the popout's body while it is open, and
// moving a DOM node does not remount what React rendered into it. State, subscriptions, and context
// all carry over, in both directions.
//
// The popout runs in the opener's JavaScript, so it is one React tree and one set of stores. What
// does not come along by itself is the page's CSS, which is copied in and kept in step with the
// opener's root element, where a theme class lives.

export interface PopoutOptions {
  title?: string
  /** Inner size in CSS pixels. Default 640 by 420. */
  width?: number
  height?: number
  left?: number
  top?: number
  /** The window name. Opening a name that is already open reuses that window. A new window each time by default. */
  name?: string
  /** Copy the page's stylesheets, and mirror the root element's attributes, into the popout. Default true. */
  copyStyles?: boolean
  /** Instead of `window.open`, for a shell that makes its own windows. It must hand back a same-origin window synchronously. */
  openWindow?: (features: string) => Window | null
  onOpen?: (popout: Window) => void
  /** Closed from either side: `close()`, the window's own close button, the opener going away, or the reveal after an `Activity` hide closed the window. */
  onClose?: () => void
  /** The browser refused the window. `open()` has to run inside a click or a key press. */
  onBlocked?: () => void
}

export interface Popout {
  isOpen: boolean
  window: Window | null
  /** Render into this with `createPortal`. Null on a server. */
  host: HTMLElement | null
  /** Put this on an empty element where the content sits while the popout is closed. */
  slotRef: (node: HTMLElement | null) => void
  /** False when the browser blocked it. */
  open: () => boolean
  close: () => void
}

function features(options: PopoutOptions): string {
  const parts = ["popup=yes", `width=${Math.round(options.width ?? 640)}`, `height=${Math.round(options.height ?? 420)}`]
  if (options.left !== undefined) parts.push(`left=${Math.round(options.left)}`)
  if (options.top !== undefined) parts.push(`top=${Math.round(options.top)}`)
  return parts.join(",")
}

/** Makes `to`'s root element carry the attributes of `from`'s, which is where a theme class lives. */
export function mirrorRoot(from: Document, to: Document) {
  for (const name of to.documentElement.getAttributeNames()) if (!from.documentElement.hasAttribute(name)) to.documentElement.removeAttribute(name)
  for (const name of from.documentElement.getAttributeNames()) to.documentElement.setAttribute(name, from.documentElement.getAttribute(name) ?? "")
}

function copyStyles(from: Document, to: Document) {
  for (const node of from.querySelectorAll<HTMLElement>('link[rel="stylesheet"], style')) {
    const copy = to.importNode(node, true)
    // The property is the absolute URL; the attribute may be relative, and the popout is about:blank.
    if (copy.tagName === "LINK") (copy as HTMLLinkElement).href = (node as HTMLLinkElement).href
    to.head.appendChild(copy)
  }
  to.body.className = from.body.className
  mirrorRoot(from, to)
}

// In the page the host takes no box of its own; in the popout it is the page.
function place(host: HTMLElement, slot: HTMLElement | null, popout: Window | null) {
  // A window that died between renders reads as closed: the host goes back to the
  // slot instead of into a dead document.
  const target = popout && !popout.closed ? popout : null
  host.dataset.popout = target ? "open" : "closed"
  host.style.cssText = target ? "display:block;height:100vh" : "display:contents"
  if (target) target.document.body.appendChild(host)
  else if (slot) slot.appendChild(host)
  else host.remove()
}

export function usePopout(options: PopoutOptions = {}): Popout {
  const [host] = useState<HTMLElement | null>(() => (typeof document === "undefined" ? null : document.createElement("div")))
  const [slot, setSlot] = useState<HTMLElement | null>(null)
  const [popout, setPopout] = useState<Window | null>(null)
  const live = useRef<Window | null>(null)
  const latest = useRef(options)
  useEffect(() => {
    latest.current = options
  })

  useLayoutEffect(() => {
    if (host) place(host, slot, popout)
  }, [host, slot, popout])

  // Every window whose close has been reported, so no path reports one twice —
  // a close in the opening commit, or a close-open-close chain ahead of the
  // reconcile, included.
  const closeReported = useRef<WeakSet<Window>>(new WeakSet())
  const finish = useCallback((target: Window) => {
    if (live.current !== target) return
    live.current = null
    closeReported.current.add(target)
    setPopout(null)
    latest.current.onClose?.()
  }, [])

  useEffect(() => {
    if (!popout) return
    // pagehide is also a reload, which leaves an empty about:blank behind: close that too.
    const closed = () => {
      finish(popout)
      popout.close()
    }
    const shut = () => popout.close()
    popout.addEventListener("pagehide", closed)
    window.addEventListener("pagehide", shut)
    let observer: MutationObserver | null = null
    if (latest.current.copyStyles !== false && typeof MutationObserver !== "undefined") {
      observer = new MutationObserver(() => mirrorRoot(document, popout.document))
      observer.observe(document.documentElement, { attributes: true })
    }
    return () => {
      popout.removeEventListener("pagehide", closed)
      window.removeEventListener("pagehide", shut)
      observer?.disconnect()
    }
  }, [popout, finish])

  // Unmounting the panel takes its window with it.
  useEffect(
    () => () => {
      live.current?.close()
      live.current = null
    },
    [],
  )

  // Effect cleanup is not unmount: an Activity hide (or Fast Refresh) runs the cleanup
  // above and closes the window while this hook's state survives. Reconcile on revival,
  // so isOpen tells the truth and close() stops returning early on a null handle. Only a
  // null live handle reconciles — an open() that ran earlier in the same revival, from a
  // child effect or a keypress in the transition gap, already owns live and must not be
  // clobbered — and a dead window that is still the live one goes through finish, the
  // same path its close listener would take.
  useEffect(() => {
    if (!popout) return
    if (live.current === null) {
      // The hide's cleanup closed the window without the close listener firing:
      // complete the lifecycle so every onOpen still meets its onClose.
      setPopout(null)
      if (!closeReported.current.has(popout)) {
        closeReported.current.add(popout)
        latest.current.onClose?.()
      }
    } else if (live.current === popout && popout.closed) finish(popout)
    else if (live.current !== popout && popout.closed && !closeReported.current.has(popout)) {
      // A newer window took over during the reveal — a child's effect or a keypress in
      // the gap — and state will settle on it. Complete the dead one's pair here, once.
      closeReported.current.add(popout)
      latest.current.onClose?.()
    }
  }, [popout, finish])

  const open = useCallback(() => {
    if (live.current && !live.current.closed) {
      live.current.focus()
      return true
    }
    const o = latest.current
    const next = o.openWindow ? o.openWindow(features(o)) : window.open("", o.name ?? "_blank", features(o))
    if (!next) {
      o.onBlocked?.()
      return false
    }
    if (o.title !== undefined) next.document.title = o.title
    if (o.copyStyles !== false) copyStyles(document, next.document)
    live.current = next
    setPopout(next)
    o.onOpen?.(next)
    return true
  }, [])

  const close = useCallback(() => {
    const target = live.current
    if (!target) return
    finish(target)
    target.close()
  }, [finish])

  return { isOpen: popout !== null, window: popout, host, slotRef: setSlot, open, close }
}

import { createContext, useContext, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type ReactNode } from "react"
import { createHotkeyRegistry, type HandlerScope, type HotkeyBinding, type HotkeyEntry, type HotkeyHandler, type HotkeyRegistry, type HotkeyScopeName, type HotkeyTarget } from "@/lib/hotkeys"

// React bindings for the hotkey registry. The registry does the work and knows nothing about React;
// this file puts one in context, attaches its listener, marks scopes in the DOM, and keeps a
// component's handler attached for as long as the component is mounted.

const RegistryContext = createContext<HotkeyRegistry | null>(null)
const ScopeContext = createContext<HandlerScope | null>(null)
const EMPTY_DECLARED: ReadonlySet<string> = new Set()
const EMPTY_DECLARED_MAP: ReadonlyMap<HotkeyRegistry, ReadonlySet<string>> = new Map()
const DeclaredContext = createContext<ReadonlyMap<HotkeyRegistry, ReadonlySet<string>>>(EMPTY_DECLARED_MAP)

export interface HotkeysProviderProps {
  /** Bring your own to declare bindings and load overrides before the first render. One is created otherwise. */
  registry?: HotkeyRegistry
  /** Declared on mount, removed on unmount. Keep the array's identity stable: a module constant. */
  bindings?: readonly HotkeyBinding[]
  /** Where to listen. `document` by default; a popout window's document for a second one. */
  target?: HotkeyTarget
  children?: ReactNode
}

export function HotkeysProvider({ registry, bindings, target, children }: HotkeysProviderProps) {
  const [own] = useState(() => createHotkeyRegistry())
  const value = registry ?? own
  // Visible during render, before any effect runs: a child that supplies a default for an id
  // the consumer declares here must see the declaration on its first pass, not an effect later.
  // Keyed by registry, so a nested provider with its own registry inherits nothing it doesn't own.
  const parentDeclared = useContext(DeclaredContext)
  const declared = useMemo(() => {
    if (!bindings?.length) return parentDeclared
    const next = new Map(parentDeclared)
    next.set(value, new Set([...(parentDeclared.get(value) ?? EMPTY_DECLARED), ...bindings.map((binding) => binding.id)]))
    return next
  }, [parentDeclared, bindings, value])
  useEffect(() => value.attach(target), [value, target])
  useEffect(() => {
    if (!bindings) return
    for (const binding of bindings) value.register(binding)
    return () => {
      for (const binding of bindings) value.unregister(binding.id)
    }
  }, [value, bindings])
  return <RegistryContext.Provider value={value}><DeclaredContext.Provider value={declared}>{children}</DeclaredContext.Provider></RegistryContext.Provider>
}

/** The registry from the nearest provider. */
export function useHotkeys(): HotkeyRegistry {
  const registry = useContext(RegistryContext)
  if (!registry) throw new Error("useHotkeys needs a <HotkeysProvider> above it")
  return registry
}

/** The same, or null without a provider, for components that treat hotkeys as optional. */
export function useMaybeHotkeys(): HotkeyRegistry | null {
  return useContext(RegistryContext)
}

/**
 * Ids the surrounding providers declare through `bindings` for one registry — the nearest
 * provider's unless another is given — visible during render before any effect registers them.
 * Returns an empty set without a provider.
 */
export function useDeclaredHotkeyIds(registry?: HotkeyRegistry | null): ReadonlySet<string> {
  const map = useContext(DeclaredContext)
  const nearest = useContext(RegistryContext)
  const key = registry ?? nearest
  return (key && map.get(key)) || EMPTY_DECLARED
}

export interface UseHotkeyOptions {
  /** False detaches the handler; the binding stays declared and listed. */
  enabled?: boolean
}

/**
 * Attach a handler to a declared binding while this component is mounted. Inside a `HotkeyScope` of
 * the binding's own scope, the handler answers only for events from that scope element, so two
 * instances of a panel each get their own keys.
 */
export function useHotkey(id: string, handler: HotkeyHandler, options: UseHotkeyOptions = {}): void {
  const registry = useHotkeys()
  const scope = useContext(ScopeContext)
  const enabled = options.enabled !== false
  const latest = useRef(handler)
  // A commit no key caused, such as a push that revokes an action, runs every layout effect before the passive ones,
  // and a key dispatched in between must reach the handler that commit rendered, or none. So the handler is swapped
  // before any layout effect runs, and the binding detaches in the commit that disables or unmounts it.
  useInsertionEffect(() => {
    latest.current = handler
  })
  useLayoutEffect(() => {
    if (!enabled) return
    return registry.bind(id, (event) => latest.current(event), scope)
  }, [registry, id, enabled, scope])
}

/** Every binding with its keys in force, for a help overlay or a settings screen. Re-renders on declare, remap, and reset, and when a handler attaches or detaches. */
export function useHotkeyList(): readonly HotkeyEntry[] {
  const registry = useHotkeys()
  return useSyncExternalStore(registry.subscribe, registry.list, registry.list)
}

/** The chord typed so far (`"g"`), or null. For a "g …" hint in a status bar. */
export function usePendingChord(): string | null {
  const registry = useHotkeys()
  return useSyncExternalStore(registry.subscribe, registry.pending, registry.pending)
}

/**
 * The nearest HotkeyScope's element getter, or null outside one. Hand it to a scoped
 * palette action's `within`, so the panel that answers is the one containing the
 * captured focus — the scope element itself included, since clicking a panel focuses it.
 */
export function useHotkeyScope(): (() => Element | null) | null {
  const scope = useContext(ScopeContext)
  return scope ? scope.element : null
}

export interface HotkeyScopeProps extends Omit<ComponentProps<"div">, "ref"> {
  scope: HotkeyScopeName
}

/**
 * Marks a subtree as a scope. Keys pressed with focus inside it reach this scope's bindings first.
 * It takes focus on click (`tabIndex={-1}`) so that clicking a panel is enough to aim the keyboard at it.
 */
export function HotkeyScope({ scope, children, ...props }: HotkeyScopeProps) {
  const [element, setElement] = useState<HTMLDivElement | null>(null)
  const value = useMemo<HandlerScope>(() => ({ scope, element: () => element }), [scope, element])
  return (
    <ScopeContext.Provider value={value}>
      <div tabIndex={-1} {...props} ref={setElement} data-hotkey-scope={scope}>
        {children}
      </div>
    </ScopeContext.Provider>
  )
}

// What a workspace saves, and what it leaves out on purpose.
//
// A layout is the dock arrangement plus one small record per panel: its kind, its title, and the
// JSON the panel asked to keep, such as a symbol, a link group, or a view setting. It is meant to be
// reused: saved as a template, handed to a colleague, restored next quarter. That only works when
// nothing tied to a session is in it, so the boundaries travel in the payload and say, as data, what
// the writer put in and what it kept out.
//
// Storage is the consumer's. Nothing here touches localStorage. A stored layout comes back through
// `parseWorkspaceLayout`, which takes nothing on trust.

export const WORKSPACE_LAYOUT_KIND = "tradecn-workspace"
export const WORKSPACE_LAYOUT_VERSION = 1

export const WORKSPACE_PERSISTENCE_BOUNDARIES = {
  /** In the layout. `onLayoutChange` hands over a fresh one when any of these changes. */
  autosave: ["dock-arrangement", "floating-and-popout-positions", "panel-kinds", "panel-titles", "panel-state"],
  /**
   * Belongs to one workspace and is not in the layout. Store it beside the layout, keyed by panel id. Default ids are
   * reused once a panel closes, so give a panel that keeps such data an id of its own.
   */
  workspaceScoped: ["grid-column-state", "selection", "scroll-position", "ticket-drafts"],
  /** Belongs to the person, whichever workspace is open. */
  globalScoped: ["hotkey-remaps", "palette-recents", "theme", "instrument-conventions"],
  /** Stored by nobody. It comes from the server every time. */
  excluded: ["market-data", "orders-and-status", "positions", "feed-health", "link-group-symbols"],
} as const

export type WorkspaceBoundary = keyof typeof WORKSPACE_PERSISTENCE_BOUNDARIES

export type WorkspacePersistenceBoundaries = { readonly [K in WorkspaceBoundary]: readonly string[] }

const BOUNDARY_KEYS = Object.keys(WORKSPACE_PERSISTENCE_BOUNDARIES) as WorkspaceBoundary[]

export type WorkspaceJson = string | number | boolean | null | WorkspaceJson[] | { [key: string]: WorkspaceJson }

/** What a panel keeps across a reload. Small and JSON: a symbol, a link group, a view setting. */
export type WorkspacePanelState = { [key: string]: WorkspaceJson }

export interface WorkspacePanelRecord {
  /** Which of the workspace's `panels` draws it, and the hotkey scope `panel:<kind>`. */
  kind: string
  title: string
  state: WorkspacePanelState
}

export interface WorkspaceLayout {
  version: typeof WORKSPACE_LAYOUT_VERSION
  kind: typeof WORKSPACE_LAYOUT_KIND
  /** The dock's own serialized form. Opaque here: read `panels` instead. */
  dockview: WorkspaceDockLayout
  /** One record per panel id in `dockview`. */
  panels: Record<string, WorkspacePanelRecord>
  /** What the writer included and what it kept out, at the time it wrote. */
  boundaries: WorkspacePersistenceBoundaries
}

/** As much of the dock's format as this file checks. */
export interface WorkspaceDockLayout {
  grid: { root: unknown; [key: string]: unknown }
  panels: Record<string, unknown>
  [key: string]: unknown
}

function isObject(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null && !Array.isArray(value)
}

/** The value as JSON would store it: functions and undefined are gone, and a top-level toJSON decides what is stored, as it does for JSON. When JSON cannot walk the whole value, what it can walk is kept key by key — a cycle or a throwing getter drops alone and never wipes the rest of the state — unless the value has a top-level toJSON at all, since its raw fields are what it chose to hide. */
export function toPanelState(value: unknown): WorkspacePanelState {
  if (!isObject(value)) return {}
  try {
    const text = JSON.stringify(value)
    // A top-level toJSON that returns undefined, a function, or a symbol stores nothing.
    if (text === undefined) return {}
    const stored: unknown = JSON.parse(text)
    return isObject(stored) ? (stored as WorkspacePanelState) : {}
  } catch {
    // A value with a toJSON, own or inherited, owns its serialization: when JSON
    // could not use it, store nothing rather than the fields it hides. Existence is
    // checked, not the value, so a stateful getter never gets a second, different say.
    try {
      if ("toJSON" in value) return {}
    } catch {
      return {}
    }
  }
  let keys: string[]
  try {
    keys = Object.keys(value)
  } catch {
    return {}
  }
  const pairs: Array<[string, WorkspaceJson]> = []
  for (const key of keys) {
    try {
      // The read runs inside the guard: a throwing getter drops its own key only.
      const entry: unknown = (value as Record<string, unknown>)[key]
      // Serialized under its own key, so a nested toJSON receives the key JSON's
      // whole pass would give it; a value JSON omits leaves the wrapper empty.
      const stored = JSON.parse(JSON.stringify({ [key]: entry })) as Record<string, WorkspaceJson>
      if (!Object.prototype.hasOwnProperty.call(stored, key)) continue
      // Collected as pairs: assigning out[key] would hand a "__proto__" key to the
      // prototype setter instead of keeping it an ordinary own key, as JSON does.
      pairs.push([key, stored[key] as WorkspaceJson])
    } catch {
      continue
    }
  }
  return Object.fromEntries(pairs)
}

function readBoundaries(value: unknown): WorkspacePersistenceBoundaries {
  if (!isObject(value)) return WORKSPACE_PERSISTENCE_BOUNDARIES
  const out = {} as Record<WorkspaceBoundary, readonly string[]>
  for (const key of BOUNDARY_KEYS) {
    const list = value[key]
    if (!Array.isArray(list) || !list.every((entry) => typeof entry === "string")) return WORKSPACE_PERSISTENCE_BOUNDARIES
    out[key] = [...(list as string[])]
  }
  return out
}

/**
 * A stored layout, checked. Takes the object or the JSON text of one, and returns null for anything
 * that is not a version 1 tradecn workspace whose every docked panel has a record saying what kind
 * it is. A record with no panel in the dock is dropped. What comes back is a copy.
 */
export function parseWorkspaceLayout(value: unknown): WorkspaceLayout | null {
  let raw = value
  if (typeof raw === "string") {
    try {
      raw = JSON.parse(raw)
    } catch {
      return null
    }
  }
  if (!isObject(raw) || raw.kind !== WORKSPACE_LAYOUT_KIND || raw.version !== WORKSPACE_LAYOUT_VERSION) return null
  const dock = raw.dockview
  if (!isObject(dock) || !isObject(dock.grid) || !("root" in dock.grid) || !isObject(dock.panels) || !isObject(raw.panels)) return null
  // The dock keys its panels by plain objects, so an id that names an Object.prototype member breaks it, and a record
  // under `__proto__` would set this object's prototype: such a layout is not one the workspace can show.
  if (Object.keys(dock.panels).some(isReservedPanelId)) return null
  const panels: Record<string, WorkspacePanelRecord> = {}
  for (const id of Object.keys(dock.panels)) {
    const record = raw.panels[id]
    if (!isObject(record) || typeof record.kind !== "string" || !record.kind) return null
    panels[id] = { kind: record.kind, title: typeof record.title === "string" && record.title ? record.title : record.kind, state: toPanelState(record.state) }
  }
  let dockview: WorkspaceDockLayout
  try {
    dockview = JSON.parse(JSON.stringify(dock)) as WorkspaceDockLayout
  } catch {
    return null
  }
  return { version: WORKSPACE_LAYOUT_VERSION, kind: WORKSPACE_LAYOUT_KIND, dockview, panels, boundaries: readBoundaries(raw.boundaries) }
}

/** The kinds a layout asks for that are not among `kinds`. The workspace draws a placeholder for each; this is for saying so up front. */
export function unknownPanelKinds(layout: WorkspaceLayout, kinds: Iterable<string>): string[] {
  const known = new Set(kinds)
  return [...new Set(Object.values(layout.panels).map((record) => record.kind))].filter((kind) => !known.has(kind)).sort()
}

/** Whether an id names an `Object.prototype` member (`__proto__`, `constructor`, `toString`, …), which no panel can carry: the dock keys its panels by plain objects. */
export function isReservedPanelId(id: string): boolean {
  return id in Object.prototype
}

/** `book-1`, then `book-2`: the lowest number not taken. */
export function nextPanelId(kind: string, taken: Iterable<string>): string {
  const used = new Set(taken)
  let n = 1
  while (used.has(`${kind}-${n}`)) n += 1
  return `${kind}-${n}`
}

export type WorkspacePanelStatePatch = { [key: string]: WorkspaceJson | undefined }

export interface WorkspacePanelStore {
  /** The same object until this panel changes, so it is safe as a `useSyncExternalStore` snapshot. */
  get(id: string): WorkspacePanelRecord | undefined
  /** Adds the panel, or replaces its record. */
  set(id: string, record: WorkspacePanelRecord): void
  setTitle(id: string, title: string): void
  /** Merges a patch into the panel's state. A key set to undefined is removed. A patch that changes nothing tells nobody. */
  setState(id: string, patch: WorkspacePanelStatePatch | ((state: WorkspacePanelState) => WorkspacePanelStatePatch)): void
  delete(id: string): void
  /** Every record at once, for a layout being loaded. */
  replace(records: Record<string, WorkspacePanelRecord>): void
  ids(): string[]
  /** Copies, for writing out. */
  snapshot(): Record<string, WorkspacePanelRecord>
  subscribe(cb: () => void): () => void
}

export function createWorkspacePanelStore(): WorkspacePanelStore {
  let records = new Map<string, WorkspacePanelRecord>()
  const listeners = new Set<() => void>()
  const emit = () => {
    for (const cb of [...listeners]) cb()
  }
  const clean = (record: WorkspacePanelRecord): WorkspacePanelRecord => ({ kind: record.kind, title: record.title || record.kind, state: toPanelState(record.state) })

  return {
    get: (id) => records.get(id),
    set(id, record) {
      records.set(id, clean(record))
      emit()
    },
    setTitle(id, title) {
      const record = records.get(id)
      if (!record || !title || record.title === title) return
      records.set(id, { ...record, title })
      emit()
    },
    setState(id, patch) {
      const record = records.get(id)
      if (!record) return
      const next = toPanelState({ ...record.state, ...(typeof patch === "function" ? patch(record.state) : patch) })
      if (JSON.stringify(next) === JSON.stringify(record.state)) return
      records.set(id, { ...record, state: next })
      emit()
    },
    delete(id) {
      if (records.delete(id)) emit()
    },
    replace(next) {
      records = new Map(Object.entries(next).map(([id, record]) => [id, clean(record)]))
      emit()
    },
    ids: () => [...records.keys()],
    snapshot: () => Object.fromEntries([...records].map(([id, record]) => [id, { ...record, state: toPanelState(record.state) }])),
    subscribe(cb) {
      listeners.add(cb)
      return () => {
        listeners.delete(cb)
      }
    },
  }
}

export interface Debounced {
  (): void
  /** Run now if a run is waiting. */
  flush(): void
  cancel(): void
  pending(): boolean
}

/** One call `ms` after the last of a burst: a sash drag reports a change on every pointer move. */
export function debounce(fn: () => void, ms: number): Debounced {
  let timer: ReturnType<typeof setTimeout> | null = null
  const run = () => {
    timer = null
    fn()
  }
  const debounced = (() => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(run, ms)
  }) as Debounced
  debounced.flush = () => {
    if (!timer) return
    clearTimeout(timer)
    run()
  }
  debounced.cancel = () => {
    if (timer) clearTimeout(timer)
    timer = null
  }
  debounced.pending = () => timer !== null
  return debounced
}

// Link groups: panels that wear the same color show the same symbol.
//
// The store holds one symbol per group and knows nothing about React. A write bumps the group's
// version and, while the store is connected, goes out on a transport so other windows follow. The
// transport is an interface with two methods: BroadcastChannel here, a desktop shell's own events
// in an app that has them.
//
// Windows come and go, so a store that connects says hello and the others answer with what they
// hold: a window opened late shows the group's symbol instead of nothing. When two windows write at
// once, the higher version wins, and on a tie the higher window id, so both sides pick the same one.

export type LinkGroupId = 1 | 2 | 3 | 4

/** `null` is unlinked. */
export type LinkGroup = LinkGroupId | null

export const LINK_GROUPS: readonly LinkGroupId[] = [1, 2, 3, 4]

export interface LinkGroupState {
  group: LinkGroupId
  symbol: string | null
  /** Who wrote it: whatever the writer passed to `set`, usually a panel's id. */
  source: string | null
  /** Counts writes. Between windows the higher version wins. 0 is never written, or only seeded. */
  version: number
}

export type LinkMessage =
  | { kind: "tradecn-link"; type: "set"; origin: string; group: LinkGroupId; symbol: string | null; source: string | null; version: number }
  | { kind: "tradecn-link"; type: "hello"; origin: string }

export interface LinkTransport {
  post(message: LinkMessage): void
  /** Deliver what other windows post. Returns the unsubscribe. */
  subscribe(cb: (message: LinkMessage) => void): () => void
}

export interface LinkGroupStore {
  /** This store's id on the transport. */
  readonly id: string
  /** The same object until the group changes, so it is safe as a `useSyncExternalStore` snapshot. */
  get(group: LinkGroupId): LinkGroupState
  /** Blank is null. Writing the symbol a group already holds changes nothing. */
  set(group: LinkGroupId, symbol: string | null, source?: string | null): void
  /**
   * Give a group that nobody has written to a first symbol, from a panel that joined it holding one.
   * A seed stays in this window and any real write replaces it, here or from another window, so a
   * symbol restored from storage never overrules the one people are looking at.
   */
  seed(group: LinkGroupId, symbol: string | null, source?: string | null): void
  subscribe(cb: () => void): () => void
  /** Start listening to the transport and ask the other windows what they hold. Returns the disconnect. */
  connect(): () => void
}

export interface LinkGroupStoreOptions {
  /** Omit or pass null to keep links inside this window. */
  transport?: LinkTransport | null
  id?: string
}

/** Unlinked, then 1 to 4, then unlinked again. `step` -1 goes the other way. */
export function cycleLinkGroup(group: LinkGroup, step: 1 | -1 = 1): LinkGroup {
  const order: LinkGroup[] = [null, ...LINK_GROUPS]
  const at = Math.max(0, order.indexOf(group))
  return order[(at + step + order.length) % order.length]!
}

export function normalizeSymbol(symbol: string | null | undefined): string | null {
  const next = typeof symbol === "string" ? symbol.trim() : ""
  return next ? next : null
}

function isGroupId(value: unknown): value is LinkGroupId {
  return LINK_GROUPS.includes(value as LinkGroupId)
}

/** Messages arrive from outside the page; take nothing on trust. */
export function isLinkMessage(value: unknown): value is LinkMessage {
  if (!value || typeof value !== "object") return false
  const m = value as Record<string, unknown>
  if (m.kind !== "tradecn-link" || typeof m.origin !== "string" || !m.origin) return false
  if (m.type === "hello") return true
  if (m.type !== "set") return false
  return isGroupId(m.group) && (m.symbol === null || typeof m.symbol === "string") && (m.source === null || typeof m.source === "string") && typeof m.version === "number" && Number.isFinite(m.version)
}

function makeId(): string {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID()
  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
}

export function createLinkGroupStore(options: LinkGroupStoreOptions = {}): LinkGroupStore {
  const id = options.id ?? makeId()
  const transport = options.transport ?? null
  const states = new Map<LinkGroupId, LinkGroupState>(LINK_GROUPS.map((group) => [group, { group, symbol: null, source: null, version: 0 }]))
  // Which store wrote each group's current state: the tie-break when two versions are equal.
  const origins = new Map<LinkGroupId, string>()
  const listeners = new Set<() => void>()
  let connections = 0
  let disconnect: (() => void) | null = null

  function emit() {
    for (const cb of listeners) cb()
  }

  function announce(state: LinkGroupState) {
    if (connections > 0) transport?.post({ kind: "tradecn-link", type: "set", origin: origins.get(state.group) ?? id, group: state.group, symbol: state.symbol, source: state.source, version: state.version })
  }

  function receive(message: LinkMessage) {
    if (!isLinkMessage(message) || message.origin === id) return
    if (message.type === "hello") {
      for (const state of states.values()) if (state.version > 0) announce(state)
      return
    }
    const current = states.get(message.group)!
    if (message.version < current.version) return
    if (message.version === current.version && (message.symbol === current.symbol || message.origin <= (origins.get(message.group) ?? ""))) return
    origins.set(message.group, message.origin)
    states.set(message.group, { group: message.group, symbol: normalizeSymbol(message.symbol), source: message.source, version: message.version })
    emit()
  }

  return {
    id,
    get: (group) => states.get(group)!,
    set(group, symbol, source = null) {
      const current = states.get(group)
      if (!current) return
      const next = normalizeSymbol(symbol)
      // Writing a seed's own symbol still counts: it is the first real write, and other windows have not heard it.
      if (next === current.symbol && (current.version > 0 || next === null)) return
      const state = { group, symbol: next, source, version: current.version + 1 }
      origins.set(group, id)
      states.set(group, state)
      emit()
      announce(state)
    },
    seed(group, symbol, source = null) {
      const current = states.get(group)
      const next = normalizeSymbol(symbol)
      if (!current || current.version > 0 || current.symbol !== null || next === null) return
      states.set(group, { group, symbol: next, source, version: 0 })
      emit()
    },
    subscribe(cb) {
      listeners.add(cb)
      return () => listeners.delete(cb)
    },
    connect() {
      if (!transport) return () => {}
      if (connections++ === 0) {
        disconnect = transport.subscribe(receive)
        transport.post({ kind: "tradecn-link", type: "hello", origin: id })
      }
      let done = false
      return () => {
        if (done) return
        done = true
        if (--connections > 0) return
        disconnect?.()
        disconnect = null
      }
    },
  }
}

export interface CallbackTransportOptions {
  /** Send a message to the other windows: a desktop shell's event, a socket, a worker's port. */
  send: (message: LinkMessage) => void
  /**
   * Deliver what the other windows send to `deliver`, and return the way to stop. Called once, for the
   * first subscriber; its return is called when the last subscriber leaves. What arrives is checked
   * before it reaches a store, so hand over whatever the channel carries.
   */
  receive: (deliver: (message: unknown) => void) => () => void
}

/**
 * A transport over two functions, for a shell whose windows are separate JavaScript contexts and
 * cannot share a `BroadcastChannel`: each window runs its own provider, and the shell's own events
 * carry the links between them.
 */
export function createCallbackTransport({ send, receive }: CallbackTransportOptions): LinkTransport {
  const listeners = new Set<(message: LinkMessage) => void>()
  let stop: (() => void) | null = null
  return {
    post(message) {
      send(message)
    },
    subscribe(cb) {
      listeners.add(cb)
      if (!stop) {
        stop = receive((message) => {
          if (isLinkMessage(message)) for (const l of [...listeners]) l(message)
        })
      }
      return () => {
        listeners.delete(cb)
        if (listeners.size || !stop) return
        stop()
        stop = null
      }
    },
  }
}

/** Every same-origin window and tab that opens this channel name shares links. The channel opens with the first subscriber and closes with the last. */
export function createBroadcastChannelTransport(name = "tradecn-link"): LinkTransport {
  const listeners = new Set<(message: LinkMessage) => void>()
  let channel: BroadcastChannel | null = null
  const onMessage = (event: MessageEvent<unknown>) => {
    if (isLinkMessage(event.data)) for (const cb of listeners) cb(event.data)
  }
  return {
    post(message) {
      channel?.postMessage(message)
    },
    subscribe(cb) {
      listeners.add(cb)
      if (!channel && typeof BroadcastChannel !== "undefined") {
        channel = new BroadcastChannel(name)
        channel.addEventListener("message", onMessage)
      }
      return () => {
        listeners.delete(cb)
        if (listeners.size || !channel) return
        channel.removeEventListener("message", onMessage)
        channel.close()
        channel = null
      }
    },
  }
}