torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/FormBuilder/types.ts

@@ -1,311 +0,0 @@
-import { ReactNode } from "react";
-import type {
-  ControllerRenderProps,
-  ControllerFieldState,
-  DefaultValues,
-  FieldErrors,
-  FieldValues,
-  Resolver,
-  UseFormReturn,
-} from "react-hook-form";
-import type { FieldDirection } from "./context";
-import type { SectionColor } from "../SectionBlock";
-
-/**
- * What shape of value a field produces, stamped on each `FormBuilder.*` field component.
- *
- * This is for consumers that have to interpret a form they did not author — `DataViews.Filters`
- * reads it to decide whether a child's value becomes a list, a numeric range or a date range. It
- * describes the field, not any one consumer's use of it.
- *
- * Read it with `fieldKindOf(element)` rather than comparing `element.type` against an imported
- * component: identity comparison breaks across duplicated module instances and stops matching
- * after a hot reload.
- */
-export type FieldKind =
-  /** A string value — `Text`, `Textarea`, `Email`, `Password`, `Color`, `Phone`, `Otp`. */
-  | "text"
-  /** A number — `Number`, `Currency`. */
-  | "number"
-  /** One of a supplied list — `Select`, `SearchableSelect`, `RadioList`, `RadioCards`. */
-  | "choice"
-  /** Several of a supplied list — `MultiSelect`, `Tags`, `CheckboxGroup`, `TreeSelect`. */
-  | "multiChoice"
-  /** A boolean — `Checkbox`, `SwitchBox`. */
-  | "boolean"
-  /** A date or date range — `Date`, `DateRange`, `DateTime`, `DateMultiple`. */
-  | "date"
-  /** Two numbers when `range`, otherwise one — `Slider`. */
-  | "slider"
-  /** Whatever the caller renders — `Custom`, `File`, `Image`, `Signature`, `RichText`. */
-  | "custom";
-
-/** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
-/**
- * One alert under a field. Mirrors `FieldHint`'s own props so the design system stays the single
- * source of truth for how each state looks.
- */
-export interface FieldHintSpec {
-  label: ReactNode;
-  state?: "info" | "warning" | "error" | "success";
-  icon?: ReactNode;
-}
-
-export interface BaseFieldProps {
-  name: string;
-  label?: ReactNode;
-  placeholder?: string;
-  description?: ReactNode;
-  required?: boolean;
-  disabled?: boolean;
-  hidden?: boolean;
-  /** Span the full section width. */
-  fullWidth?: boolean;
-  /**
-   * Alerts stacked under the field. The validation error, when there is one, always renders first —
-   * it is the actionable message — and these follow in order. Ignored in `bare` mode (a
-   * `FormBuilder.Table` cell), where errors surface as a tooltip to keep the row one line tall.
-   */
-  hints?: FieldHintSpec[];
-}
-
-export interface OptionItem {
-  label: string;
-  value: string;
-  icon?: ReactNode;
-  /** Secondary row label — shown by `FormBuilder.RadioList` / `.CheckboxGroup`. */
-  description?: string;
-}
-
-/** `FormBuilder.Select` / `.SearchableSelect` — supports async option loading. */
-/** `FormBuilder.Select` — the plain `Select` dropdown. */
-export interface SelectFieldProps extends BaseFieldProps {
-  options: OptionItem[];
-}
-
-/**
- * `FormBuilder.SearchableSelect` — the `SearchableSelect` combobox: a search box with
- * client-side filtering, or server-side search + infinite scroll via the async props.
- */
-export interface SearchableSelectFieldProps extends SelectFieldProps {
-  /** Filter `options` locally (default). Set false for server-side search. */
-  filterClientSide?: boolean;
-  /** Debounced as the user types — refetch your data here. */
-  onSearchChange?: (query: string) => void;
-  /** Called when the list bottom scrolls into view and `hasMore && !loading`. */
-  onLoadMore?: () => void;
-  hasMore?: boolean;
-  loading?: boolean;
-}
-
-/** `FormBuilder.MultiSelect` / `.Tags`, `.Radio`. */
-export interface OptionsFieldProps extends BaseFieldProps {
-  options: OptionItem[];
-}
-
-/** `FormBuilder.Currency`. */
-export interface CurrencyFieldProps extends BaseFieldProps {
-  currencySymbol?: ReactNode;
-}
-
-/** `FormBuilder.File` / `.Image`. */
-export interface FileFieldProps extends BaseFieldProps {
-  accept?: string;
-  multiple?: boolean;
-}
-
-/** `FormBuilder.Custom` — bring your own control, keeping the FieldSection + validation wiring. */
-export interface CustomFieldProps extends BaseFieldProps {
-  render: (args: {
-    field: ControllerRenderProps<FieldValues, string>;
-    fieldState: ControllerFieldState;
-  }) => ReactNode;
-}
-
-/** `FormBuilder.Date` / `.DateRange` / `.DateMultiple` / `.DateTime`. */
-export interface DateFieldProps extends BaseFieldProps {
-  mode?: "single" | "multiple" | "range";
-  timePicker?: boolean;
-  /** Display format, e.g. "yyyy/MM/dd" (DatePicker default). */
-  dateFormat?: string;
-}
-
-/** `FormBuilder.Otp` — code input; value is a string of `length` digits. */
-export interface OtpFieldProps extends BaseFieldProps {
-  /** Number of digit slots (default 6). */
-  length?: number;
-}
-
-/** `FormBuilder.SwitchBox` — a switch inside a `#f9f9f9` field box. */
-export interface SwitchBoxFieldProps extends BaseFieldProps {
-  /** Text shown inside the box, left of the divider (the design's "Sub-Field-Header"). */
-  subLabel?: string;
-}
-
-/** `FormBuilder.Checkbox` — a single boolean checkbox with an optional inline label. */
-export interface CheckboxFieldProps extends BaseFieldProps {
-  /** Text shown inline next to the checkbox (in addition to the field `label`). */
-  subLabel?: string;
-}
-
-/** One option for `FormBuilder.RadioCards`. */
-export interface RadioCardOption {
-  label: ReactNode;
-  value: string;
-  description?: ReactNode;
-  disabled?: boolean;
-}
-
-/** `FormBuilder.RadioCards` — radio options rendered as cards. */
-export interface RadioCardsFieldProps extends BaseFieldProps {
-  options: RadioCardOption[];
-}
-
-/** `FormBuilder.TreeSelect` (SearchableTree) — hierarchical single-select; value = node id. */
-export interface TreeSelectFieldProps<T = unknown> extends BaseFieldProps {
-  nodes: T[];
-  getNodeId: (node: T) => string;
-  getNodeLabel: (node: T) => ReactNode;
-  /** Nested data: expose each node's children. */
-  getNodeChildren?: (node: T) => T[] | undefined;
-  /** Flat data: the key on each node pointing at its parent's id. */
-  parentIdKey?: string;
-  /** Allow selecting branch (folder) nodes too. */
-  selectableFolders?: boolean;
-}
-
-/** `FormBuilder.Password` — optionally show a strength meter. */
-export interface PasswordFieldProps extends BaseFieldProps {
-  strengthMeter?: boolean;
-}
-
-/** `FormBuilder.Slider` — numeric slider; value `number` (or `[number, number]` with `range`). */
-export interface SliderFieldProps extends BaseFieldProps {
-  min?: number;
-  max?: number;
-  step?: number;
-  /** Two thumbs — value becomes `[number, number]`. */
-  range?: boolean;
-  /** Appended to the value readout, e.g. `"%"` → `50%`. */
-  suffix?: string;
-}
-
-/** `FormBuilder.Color` — color picker; value hex `string`. */
-export interface ColorFieldProps extends BaseFieldProps {
-  presets?: string[];
-  /** Enable the opacity slider and `#rrggbbaa` output (default true). */
-  alpha?: boolean;
-}
-
-/** `FormBuilder.Phone` — country dial-code + number; value `string`. */
-export interface PhoneFieldProps extends BaseFieldProps {
-  defaultCountry?: string;
-}
-
-/** `FormBuilder.Signature` — freehand signature pad; value is a PNG data-URL `string`. */
-export interface SignatureFieldProps extends BaseFieldProps {
-  /** Stroke color (default `#111827`). */
-  penColor?: string;
-}
-
-/** `FormBuilder.FieldArray` — a repeating list of sub-fields (RHF `useFieldArray`). */
-export interface FieldArrayProps {
-  name: string;
-  label?: ReactNode;
-  description?: ReactNode;
-  hidden?: boolean;
-  addLabel?: ReactNode;
-  /** Value for a newly-added row. */
-  defaultItem?: Record<string, unknown>;
-  /** Render a row's sub-fields; use names like `${rowName}.field`. */
-  children: (rowName: string, index: number, remove: () => void) => ReactNode;
-}
-
-/** One column of `FormBuilder.Table`. `cell` renders any `FormBuilder.*` field for a row. */
-export interface TableColumn {
-  header: ReactNode;
-  /** Fixed column width in px (otherwise the column sizes to content). */
-  width?: number;
-  align?: "start" | "center" | "end";
-  /**
-   * The row-object key this column edits. Set it to make the column header **sortable** — a
-   * sort toggle appears and clicking it reorders the rows by this key (asc/desc). Omit for
-   * non-sortable columns.
-   */
-  sortKey?: string;
-  /**
-   * Render the cell's field. `rowName` is the array path for this row (e.g. `lines.0`), so name
-   * sub-fields `${rowName}.<key>`. The field renders "bare" (control only, error as a tooltip).
-   */
-  cell: (rowName: string, index: number) => ReactNode;
-}
-
-/**
- * `FormBuilder.Table` — an editable table field (built on RHF `useFieldArray`). Each row is a
- * record; each column cell is any `FormBuilder.*` field. Supports per-row checkbox selection
- * (+ select-all + bulk delete), drag-drop reordering, and add/remove rows. Renders inside a
- * `SectionBlock`, so place it as a top-level child (not inside a `FormRenderer.Section`).
- */
-export interface TableFieldProps {
-  name: string;
-  /** SectionBlock title. */
-  title?: ReactNode;
-  /** SectionBlock color badge (default `"Blue"`). */
-  color?: SectionColor;
-  icon?: ReactNode;
-  description?: ReactNode;
-  hidden?: boolean;
-  columns: TableColumn[];
-  /** Value for a newly-added row. */
-  defaultItem?: Record<string, unknown>;
-  addLabel?: ReactNode;
-  /** Per-row checkboxes + select-all + bulk delete (default `true`). */
-  selectable?: boolean;
-  /** Drag-drop row reordering (default `true`). */
-  reorderable?: boolean;
-}
-
-/** Root `<FormBuilder>` props. */
-export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
-  children: ReactNode;
-  /** `id` on the underlying `<form>` — lets an outside button submit it via `form={id}`. */
-  id?: string;
-  /**
-   * An existing react-hook-form instance. Pass one when something **outside** the
-   * form needs the same values — e.g. a `FormSummary` rendered beside it:
-   *
-   * ```tsx
-   * const form = useForm({ resolver, defaultValues })
-   * <FormBuilder form={form} …>…</FormBuilder>
-   * <FormSummary form={form}>…</FormSummary>
-   * ```
-   *
-   * When omitted, FormBuilder creates its own from `resolver`/`defaultValues`/`values`.
-   */
-  form?: UseFormReturn<T>;
-  onSubmit: (values: T) => void | Promise<void>;
-  onInvalid?: (errors: FieldErrors<T>) => void;
-  /** RHF resolver — e.g. `zodResolver(schema)`. Library stays validation-agnostic. */
-  resolver?: Resolver<T>;
-  defaultValues?: DefaultValues<T>;
-  /** Controlled values for edit — the form re-syncs when this changes. */
-  values?: T;
-  /** Loading flag — Submit shows a spinner and inputs disable. */
-  loading?: boolean;
-  /**
-   * Field row direction. Unset means `"flexible"` — stacked, then label-beside-control once the
-   * field row passes the container `md` breakpoint. `FormRenderer` pins `"vertical"` in a drawer;
-   * pass `"flexible"` there to get the responsive layout back.
-   */
-  fieldDirection?: FieldDirection;
-  /** Reset to defaults after a successful submit. */
-  resetOnSuccess?: boolean;
-  /**
-   * Lands on the `<form>` element itself — FormBuilder renders nothing around it. Use it to let
-   * the form fill its parent (e.g. `"flex-1 min-h-0"` inside a flex column that has a height).
-   *
-   * There is no `layout` prop: the fields always fill their container. The page framing that
-   * used to live here — the 1100px cap and 48px gutters — belongs to `FormRenderer`.
-   */
-  className?: string;
-}

package/apps/lib/components/FormRenderer/FormDrawer.tsx

@@ -1,128 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-
-import {
-  Drawer,
-  DrawerContent,
-  DrawerPanel,
-  DrawerTitle,
-  DrawerNotch,
-  DrawerNotchClose,
-  DrawerNotchDivider,
-  DrawerNotchPill,
-} from "../Drawer";
-import { FormHeaderBar, type HeaderVariant } from "./header";
-
-export interface FormDrawerProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** The `<FormBuilder>` (or any content) to host inside the drawer. */
-  children: ReactNode;
-  /**
-   * The conclusion panel rendered **beside** the form, outside the drawer's scrollable
-   * body — typically a `<FormSummary>` reading the same hoisted `form`. `FormDrawer` owns
-   * the box around it (full height, shrinkable), which is what lets the panel's own
-   * `h-full` and internal scrolling work. The panel sizes itself — a `FormSummary` is
-   * 228px wide by default — and brings its own (dark) background.
-   */
-  summary?: ReactNode;
-  /** @deprecated Renamed to `summary`. */
-  childrenOutside?: ReactNode;
-  /**
-   * Plain title text (uppercased) in the header's title pill — also the a11y title.
-   * A string, because it renders through the same `HeaderBar` as the page form.
-   */
-  title?: string;
-  /** Badge text in the title pill. Defaults from `variant` (New / Edit / View). */
-  badge?: string;
-  /** Colored badge variant, matching the page form's header. Default `"new"`. */
-  variant?: HeaderVariant;
-  /** Action buttons shown on the right of the drawer header (e.g. a Save submit). */
-  actions?: ReactNode;
-  /** Shows an "Open in new tab" pill in the notch when provided. */
-  onOpenInNewTab?: () => void;
-}
-
-/**
- * A right-anchored Glare drawer for hosting a form. This is a **FormRenderer**
- * concern — `FormBuilder` itself is drawer-unaware (it only displays inputs).
- * Wrap a `<FormBuilder>` in `<FormDrawer>` (and pass `fieldDirection="vertical"`
- * to the form) to show it in a drawer, or let `FormRenderer` do it via
- * `display: "drawer"`.
- *
- * The `wrapperClassName` includes `mt-0 h-auto` to cancel `DrawerContent`'s base
- * bottom-sheet offset (the Glare right-side form-drawer recipe).
- *
- * It owns the arrangement of its two slots: the form goes in a `DrawerPanel` (the light
- * surface), and `summary` sits beside it in the tray with a 6px gutter. The tray itself
- * paints nothing, so each panel brings its own background.
- */
-export function FormDrawer({
-  open,
-  onOpenChange,
-  children,
-  summary,
-  childrenOutside,
-  title = "Form",
-  badge,
-  variant,
-  actions,
-  onOpenInNewTab,
-}: FormDrawerProps) {
-  const conclusion = summary ?? childrenOutside;
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange} direction="right">
-      {/* The panel fills the available width (minus the 8px insets), capped at 1048px.
-          `gap-[6px]` is the gutter between the form panel and the conclusion beside it. */}
-      <DrawerContent
-        wrapperClassName="top-2 right-2 bottom-2 left-auto mt-0 h-auto w-[calc(100vw-1rem)] max-w-[1048px]"
-        className="gap-[6px]"
-        notch={
-          <DrawerNotch>
-            <DrawerNotchClose onClick={() => onOpenChange(false)} />
-            {onOpenInNewTab && (
-              <>
-                <DrawerNotchDivider />
-                <DrawerNotchPill color="Yellow" onClick={onOpenInNewTab}>
-                  Open in new tab
-                  <i className="ri-arrow-right-up-line text-[12px]" />
-                </DrawerNotchPill>
-              </>
-            )}
-          </DrawerNotch>
-        }
-      >
-        <DrawerPanel className="rounded-tr-[16px] rounded-b-[16px] p-0">
-          <div className="relative flex min-h-0 flex-1 flex-col">
-            {/* Vaul requires a Drawer.Title for the a11y name; the visible title is the
-                HeaderBar below, so this one is for screen readers only. */}
-            <DrawerTitle className="sr-only">{title}</DrawerTitle>
-
-            {/* The SAME floating header the page form uses, so a form's title looks
-                identical in either surface. */}
-            <FormHeaderBar title={title} label={badge} variant={variant}>
-              {actions}
-            </FormHeaderBar>
-
-            {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. The
-                48px bottom breathing-room goes on an inner wrapper, not the scroll container:
-                FormRenderer's outer element is `h-full`, which would pin it to the content box and
-                swallow the container's own `pb`. On a plain wrapper that `h-full` resolves to the
-                content height, so the padding actually lengthens the scroll. The conclusion panel
-                is a separate sibling, so it keeps its own spacing. */}
-            <div className="h-full overflow-y-auto px-3 pt-[72px]">
-              <div className="pb-[48px]">{children}</div>
-            </div>
-          </div>
-        </DrawerPanel>
-
-        {/* `flex min-h-0` so the conclusion stretches to the tray's full height and can
-            still shrink — without `min-h-0` it would grow past the tray instead of
-            scrolling inside it. No `flex-1`: the panel sizes itself. */}
-        {conclusion && <div className="flex min-h-0">{conclusion}</div>}
-      </DrawerContent>
-    </Drawer>
-  );
-}

package/apps/lib/components/FormRenderer/detail.tsx

@@ -1,207 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "../../utils/cn";
-import { formBarItemStyles } from "../TabFormItem";
-import { FormHeaderBar, type HeaderVariant } from "./header";
-
-/**
- * Detail-tabs — a display-only view where a left **sidebar** switches the main area between
- * **`FormRenderer.Section` panels** (a detail page, not a form). It lives on `FormRenderer`
- * (`FormRenderer.Sidebar` / `.Sidebar.Item` / `.Tab`) so `FormBuilder` stays form-only. Built on
- * the same Radix Tabs primitive shadcn uses: the sidebar is the `Tabs.List`, each `Sidebar.Item` a
- * `Tabs.Trigger`, each `Tab` a `Tabs.Content` — so the fixed rail and the panels share tab state.
- */
-
-export interface DetailSidebarProps {
-  children: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Sidebar` — the tab rail, sitting where a `FormRenderer.Stepper`'s nav would.
- * Renders **nothing itself**: the FormRenderer root detects it and places its `Sidebar.Item`
- * children (the tab triggers) into the fixed rail.
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- children are read by the FormRenderer root
-function DetailSidebarRoot(_props: DetailSidebarProps) {
-  return null;
-}
-(DetailSidebarRoot as unknown as { __isDetailSidebar: boolean }).__isDetailSidebar = true;
-
-export interface DetailSidebarItemProps {
-  /** Ties this row to the `FormRenderer.Tab` of the same `value` — clicking it shows that panel. */
-  value: string;
-  /** Leading icon (e.g. a Remix `<i className="ri-…" />`). */
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Sidebar.Item` — a rail nav row, rendered as a Radix `Tabs.Trigger` styled with the
- * `TabFormItem` `tree` look. Radix drives the active state (`data-state="active"` → black pill).
- */
-function DetailSidebarItem({ value, icon, children }: DetailSidebarItemProps) {
-  return (
-    <TabsPrimitive.Trigger
-      value={value}
-      className={cn(
-        formBarItemStyles({ componentType: "tree" }),
-        "h-[32px] w-full justify-start gap-2 rounded-[10px] px-[6px] [&_i]:text-[16px]",
-        // Radix sets `data-state` on the trigger; the active tab is the filled (black) pill.
-        "data-[state=active]:bg-background-presentation-tab-topbar-selected data-[state=active]:text-content-presentation-tab-action-selected",
-        "data-[state=active]:hover:bg-background-presentation-tab-topbar-selected data-[state=active]:hover:px-[6px]",
-      )}
-    >
-      {icon}
-      <span className="flex-1 truncate text-left typography-body-medium-medium">{children}</span>
-    </TabsPrimitive.Trigger>
-  );
-}
-
-export const DetailSidebar = Object.assign(DetailSidebarRoot, {
-  Item: DetailSidebarItem,
-});
-
-export function isDetailSidebarElement(
-  node: React.ReactNode,
-): node is React.ReactElement<DetailSidebarProps> {
-  return (
-    React.isValidElement(node) &&
-    (node.type as { __isDetailSidebar?: boolean })?.__isDetailSidebar === true
-  );
-}
-
-export interface DetailRowProps {
-  label: React.ReactNode;
-  value: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Row` — a read-only label/value cell for detail content (the display counterpart of a
- * form field). Drop several inside a `FormRenderer.Grid` within a `FormRenderer.Section`.
- */
-export function DetailRow({ label, value }: DetailRowProps) {
-  return (
-    <div className="flex flex-col gap-1">
-      <span className="typography-body-small-regular text-content-presentation-global-secondary">
-        {label}
-      </span>
-      <span className="typography-body-medium-medium text-content-presentation-global-primary">
-        {value}
-      </span>
-    </div>
-  );
-}
-
-export interface DetailGridProps {
-  /** Column count (default 2). */
-  columns?: 1 | 2 | 3;
-  children: React.ReactNode;
-}
-
-const GRID_COLS: Record<NonNullable<DetailGridProps["columns"]>, string> = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-};
-
-/**
- * `FormRenderer.Grid` — arranges `FormRenderer.Row`s in an equal-column grid spanning the **full
- * section width** (default 2 columns, so cells split in half). Padded so the rows breathe inside a
- * `FormRenderer.Section` (clear of the title badge, roomy row + column spacing).
- */
-export function DetailGrid({ columns = 2, children }: DetailGridProps) {
-  return (
-    <div className={cn("grid w-full gap-x-12 gap-y-5 py-3", GRID_COLS[columns])}>{children}</div>
-  );
-}
-
-export interface DetailTabProps {
-  /** Ties this panel to the `Sidebar.Item` of the same `value`. */
-  value: string;
-  /** The panel body — typically `FormRenderer.Section` display blocks. */
-  children: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Tab` — a content panel shown when its `value` is the active tab. Renders
- * **nothing itself**: the FormRenderer root detects it and mounts it as a Radix `Tabs.Content`
- * (kept mounted, inactive ones hidden).
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- read by the FormRenderer root
-export function DetailTab(_props: DetailTabProps) {
-  return null;
-}
-(DetailTab as unknown as { __isDetailTab: boolean }).__isDetailTab = true;
-
-export function isDetailTabElement(
-  node: React.ReactNode,
-): node is React.ReactElement<DetailTabProps> {
-  return (
-    React.isValidElement(node) && (node.type as { __isDetailTab?: boolean })?.__isDetailTab === true
-  );
-}
-
-export interface DetailTabsViewProps {
-  header?: { title: string; label?: string; variant?: HeaderVariant };
-  /** Header action buttons (Print / Approve / …). */
-  actions?: React.ReactNode;
-  /** The `FormRenderer.Sidebar` element — its children are the tab triggers. */
-  sidebar: React.ReactElement<DetailSidebarProps>;
-  /** The `FormRenderer.Tab` elements — the content panels. */
-  tabs: React.ReactElement<DetailTabProps>[];
-  className?: string;
-}
-
-/**
- * The detail-tabs surface: the floating header over a fixed left rail (the sidebar) + a scrolling
- * content column showing the active tab. Radix `Tabs.Root` owns the state (uncontrolled, defaults to
- * the first tab). The rail matches the stepper's rail position; only the content column scrolls.
- */
-export function DetailTabsView({ header, actions, sidebar, tabs, className }: DetailTabsViewProps) {
-  const defaultValue = tabs[0]?.props.value;
-
-  return (
-    <TabsPrimitive.Root
-      orientation="vertical"
-      defaultValue={defaultValue}
-      className={cn("h-full w-full @container", className)}
-    >
-      {/* Scroll shell — mirrors FormBuilder's: the absolute header floats over the body. */}
-      <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
-        {header && (
-          <FormHeaderBar title={header.title} label={header.label} variant={header.variant}>
-            {actions}
-          </FormHeaderBar>
-        )}
-
-        <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-row">
-          {/* The fixed rail — the tab list. `pt-[72px]` clears the floating header. */}
-          <TabsPrimitive.List asChild>
-            <aside className="flex h-full w-[216px] shrink-0 flex-col gap-1 overflow-y-auto border-r border-border-presentation-global-primary bg-black-alpha-5 px-2 pb-6 pt-[72px] scrollbar-hide">
-              {sidebar.props.children}
-            </aside>
-          </TabsPrimitive.List>
-
-          {/* The only scrolling region — the active tab's Sections. */}
-          <div className="flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
-            <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4">
-              {tabs.map((panel) => (
-                <TabsPrimitive.Content
-                  key={panel.props.value}
-                  value={panel.props.value}
-                  forceMount
-                  className="flex flex-col gap-4 outline-none data-[state=inactive]:hidden"
-                >
-                  {panel.props.children}
-                </TabsPrimitive.Content>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </TabsPrimitive.Root>
-  );
-}