/**
 * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).
 * Keeps Library panel / tree and generic `FinderPanelView` visually aligned.
 *
 * Scroll owner is `[data-page-scroll]` (same as table hubs).
 *
 * `react-resizable-panels` defaults Group to `height:100%; overflow:hidden` and the
 * Panel content wrapper to `overflow:auto; max-height:100%` — that traps
 * `position:sticky` inside the panel and steals page scroll. Split hubs MUST pass
 * {@link LIST_PAGE_SPLIT_RESIZABLE_GROUP_STYLE} + {@link LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE}.
 */

import type * as React from "react"

/**
 * `ResizableHandle` between Miller / tree columns.
 * Grip comes from the global `ResizableHandle` (on by default + viewport sticky).
 * This class only raises stacking above column chrome.
 */
export const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS = "z-20"

/**
 * Horizontal Miller / tree `ResizablePanelGroup` — natural height so the page
 * scrolls; panels share the card width.
 */
export const LIST_PAGE_SPLIT_RESIZABLE_GROUP_CLASS = "w-full min-h-[420px]"

/**
 * Override library Group inline styles so sticky column headers can attach to
 * `[data-page-scroll]` and content can grow the page.
 */
export const LIST_PAGE_SPLIT_RESIZABLE_GROUP_STYLE: React.CSSProperties = {
  height: "auto",
  overflow: "visible",
}

/**
 * Override library Panel content wrapper (`overflow:auto` / `maxHeight:100%`)
 * so bodies grow with the page instead of nesting a scroller.
 */
export const LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE: React.CSSProperties = {
  overflow: "visible",
  maxHeight: "none",
}

/** Primary column stack (scope list, folder list, record list, …). */
export const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =
  "flex min-w-0 flex-col bg-card"

/** Right-hand inspector / detail column shell. */
export const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =
  "flex min-w-0 flex-col bg-card"

/**
 * Column body under a sticky header — grows with content (page scroll).
 * Kept as a named token so hubs can add padding without inventing a scroller.
 */
export const LIST_PAGE_SPLIT_MILLER_SCROLL_BODY_CLASS = "w-full"