2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T2a5e,"use client"; import { GripHorizontal, GripVertical } from "lucide-react"; import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState, type ComponentProps, type KeyboardEvent, type PointerEvent, type ReactElement, type RefObject, } from "react"; import { cn } from "@/lib/utils"; type Direction = "horizontal" | "vertical"; type Group = { direction: Direction; sizes: number[]; dragging: boolean; ready: boolean; setDragging: (on: boolean) => void; resize: (handle: number, delta: number, from: number[]) => void; collapse: (handle: number) => void; reset: (handle: number) => void; limits: (panel: number) => { min: number; max: number }; root: RefObject; }; const GroupContext = createContext(null); const SlotContext = createContext(0); const round = (n: number) => Math.round(n * 100) / 100; const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n)); function useGroup() { const group = useContext(GroupContext); if (!group) throw new Error("Resizable parts must be used inside ."); return group; } export interface ResizablePanelProps extends ComponentProps<"div"> { /** Starting size as a percentage of the group. Panels without one share what's left. */ defaultSize?: number; minSize?: number; maxSize?: number; /** Dragging well past minSize snaps the panel shut to collapsedSize. */ collapsible?: boolean; collapsedSize?: number; } export interface ResizablePanelGroupProps extends ComponentProps<"div"> { direction?: Direction; /** Panel sizes in percent, when you control them. */ sizes?: number[]; onSizesChange?: (sizes: number[]) => void; /** Remember the sizes in this browser under this key. */ autoSaveId?: string; } /** Panels side by side (or stacked) with handles between them. Drag a handle, or focus it and use the arrow keys. */ export function ResizablePanelGroup({ direction = "horizontal", sizes: sizesProp, onSizesChange, autoSaveId, className, children, ...props }: ResizablePanelGroupProps) { const items = Children.toArray(children).filter(isValidElement) as ReactElement[]; const panels = items.filter((c) => c.type === ResizablePanel).map((c) => c.props); const defaults = (() => { const fixed = panels.reduce((sum, p) => sum + (p.defaultSize ?? 0), 0); const open = panels.filter((p) => p.defaultSize === undefined).length; return panels.map((p) => p.defaultSize ?? (open ? (100 - fixed) / open : 0)); })(); const [inner, setInner] = useState(defaults); const [dragging, setDragging] = useState(false); const [ready, setReady] = useState(false); const root = useRef(null); const sizes = sizesProp ?? inner; const key = autoSaveId && `resizable:${autoSaveId}`; useEffect(() => { if (key) { try { const saved = JSON.parse(localStorage.getItem(key) ?? "null"); if (Array.isArray(saved) && saved.length === panels.length) setInner(saved); } catch {} } requestAnimationFrame(() => setReady(true)); }, [key, panels.length]); const commit = (next: number[]) => { if (sizesProp === undefined) setInner(next); onSizesChange?.(next); if (key) { try { localStorage.setItem(key, JSON.stringify(next)); } catch {} } }; const limits = (i: number) => ({ min: panels[i]?.minSize ?? 0, max: panels[i]?.maxSize ?? 100 }); const fit = (i: number, size: number) => { const p = panels[i]; const { min, max } = limits(i); if (p?.collapsible && size < min) return size < min / 2 ? (p.collapsedSize ?? 0) : min; return clamp(size, min, max); }; const resize = (handle: number, delta: number, from: number[]) => { const a = handle - 1; const b = handle; if (a < 0 || b >= panels.length) return; const total = from[a] + from[b]; let first = fit(a, from[a] + delta); const second = fit(b, total - first); first = total - second; if (first === from[a] && from[a] === sizes[a]) return; const next = [...from]; next[a] = round(first); next[b] = round(second); commit(next); }; const collapse = (handle: number) => { const a = handle - 1; const p = panels[a]; if (!p?.collapsible) return; const shut = p.collapsedSize ?? 0; const target = sizes[a] > shut ? shut : Math.max(p.defaultSize ?? limits(a).min, limits(a).min); resize(handle, target - sizes[a], sizes); }; const reset = (handle: number) => { const a = handle - 1; const b = handle; const total = sizes[a] + sizes[b]; const share = defaults[a] / (defaults[a] + defaults[b] || 1); resize(handle, total * share - sizes[a], sizes); }; let panel = 0; return (

{items.map((child, i) => { const index = child.type === ResizablePanel ? panel++ : panel; return ( {child} ); })}

); } export function ResizablePanel({ className, style, defaultSize: _default, minSize: _min, maxSize: _max, collapsible: _collapsible, collapsedSize = 0, ...props }: ResizablePanelProps) { const group = useGroup(); const index = useContext(SlotContext); const size = group.sizes[index] ?? 0; return (

); } export interface ResizableHandleProps extends ComponentProps<"div"> { /** line: a hairline · grip: a hairline with a raised grip · pill: a small bar in a gap, for panels with rounded corners. */ variant?: "line" | "grip" | "pill"; } export function ResizableHandle({ variant = "line", className, onKeyDown, ...props }: ResizableHandleProps) { const group = useGroup(); const handle = useContext(SlotContext); const vertical = group.direction === "vertical"; const start = useRef<{ pos: number; px: number; sizes: number[] } | null>(null); const [active, setActive] = useState(false); const before = group.sizes[handle - 1] ?? 0; const { min, max } = group.limits(handle - 1); const down = (e: PointerEvent) => { if (e.button !== 0 || !group.root.current) return; e.preventDefault(); e.currentTarget.setPointerCapture(e.pointerId); e.currentTarget.focus(); const box = group.root.current.getBoundingClientRect(); start.current = { pos: vertical ? e.clientY : e.clientX, px: vertical ? box.height : box.width, sizes: group.sizes }; setActive(true); group.setDragging(true); }; const move = (e: PointerEvent) => { if (!start.current) return; const d = ((vertical ? e.clientY : e.clientX) - start.current.pos) / start.current.px; group.resize(handle, d * 100, start.current.sizes); }; const up = () => { if (!start.current) return; start.current = null; setActive(false); group.setDragging(false); }; const key = (e: KeyboardEvent) => { onKeyDown?.(e); const step = e.shiftKey ? 10 : 2; const moves: Record = vertical ? { ArrowUp: -step, ArrowDown: step, Home: min - before, End: max - before } : { ArrowLeft: -step, ArrowRight: step, Home: min - before, End: max - before }; if (e.key === "Enter") { e.preventDefault(); group.collapse(handle); } else if (e.key in moves) { e.preventDefault(); group.resize(handle, moves[e.key], group.sizes); } }; const Grip = vertical ? GripHorizontal : GripVertical; return (

group.reset(handle)} onKeyDown={key} className={cn( "group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-none", vertical ? "cursor-row-resize" : "cursor-col-resize", variant === "pill" ? vertical ? "h-2.5 w-full" : "h-full w-2.5" : cn( "bg-black/[0.08] transition-colors duration-150 hover:bg-neutral-400 focus-visible:bg-neutral-500 data-active:bg-neutral-950 dark:bg-white/[0.1] dark:hover:bg-neutral-500 dark:focus-visible:bg-neutral-400 dark:data-active:bg-white", "after:absolute", vertical ? "h-px w-full after:inset-x-0 after:-inset-y-1.5" : "h-full w-px after:inset-y-0 after:-inset-x-1.5", ), className, )} {...props} > {variant === "grip" && ( )} {variant === "pill" && ( )}

); } export default ResizablePanelGroup; 2e:T1c1bc,

"use client";

import { GripHorizontal, GripVertical } from "lucide-react";
import {
  Children,
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type PointerEvent,
  type ReactElement,
  type RefObject,
} from "react";
import { cn } from "@/lib/utils";

type Direction = "horizontal" | "vertical";

type Group = {
  direction: Direction;
  sizes: number[];
  dragging: boolean;
  ready: boolean;
  setDragging: (on: boolean) => void;
  resize: (handle: number, delta: number, from: number[]) => void;
  collapse: (handle: number) => void;
  reset: (handle: number) => void;
  limits: (panel: number) => { min: number; max: number };
  root: RefObject<HTMLDivElement | null>;
};

const GroupContext = createContext<Group | null>(null);
const SlotContext = createContext(0);

const round = (n: number) => Math.round(n * 100) / 100;
const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));

function useGroup() {
  const group = useContext(GroupContext);
  if (!group) throw new Error("Resizable parts must be used inside <ResizablePanelGroup>.");
  return group;
}

export interface ResizablePanelProps extends ComponentProps<"div"> {
  /** Starting size as a percentage of the group. Panels without one share what's left. */
  defaultSize?: number;
  minSize?: number;
  maxSize?: number;
  /** Dragging well past minSize snaps the panel shut to collapsedSize. */
  collapsible?: boolean;
  collapsedSize?: number;
}

export interface ResizablePanelGroupProps extends ComponentProps<"div"> {
  direction?: Direction;
  /** Panel sizes in percent, when you control them. */
  sizes?: number[];
  onSizesChange?: (sizes: number[]) => void;
  /** Remember the sizes in this browser under this key. */
  autoSaveId?: string;
}

/** Panels side by side (or stacked) with handles between them. Drag a handle, or focus it and use the arrow keys. */
export function ResizablePanelGroup({ direction = "horizontal", sizes: sizesProp, onSizesChange, autoSaveId, className, children, ...props }: ResizablePanelGroupProps) {
  const items = Children.toArray(children).filter(isValidElement) as ReactElement<ResizablePanelProps>[];
  const panels = items.filter((c) => c.type === ResizablePanel).map((c) => c.props);
  const defaults = (() => {
    const fixed = panels.reduce((sum, p) => sum + (p.defaultSize ?? 0), 0);
    const open = panels.filter((p) => p.defaultSize === undefined).length;
    return panels.map((p) => p.defaultSize ?? (open ? (100 - fixed) / open : 0));
  })();
  const [inner, setInner] = useState(defaults);
  const [dragging, setDragging] = useState(false);
  const [ready, setReady] = useState(false);
  const root = useRef<HTMLDivElement>(null);
  const sizes = sizesProp ?? inner;
  const key = autoSaveId && `resizable:${autoSaveId}`;

  useEffect(() => {
    if (key) {
      try {
        const saved = JSON.parse(localStorage.getItem(key) ?? "null");
        if (Array.isArray(saved) && saved.length === panels.length) setInner(saved);
      } catch {}
    }
    requestAnimationFrame(() => setReady(true));
  }, [key, panels.length]);

  const commit = (next: number[]) => {
    if (sizesProp === undefined) setInner(next);
    onSizesChange?.(next);
    if (key) {
      try {
        localStorage.setItem(key, JSON.stringify(next));
      } catch {}
    }
  };

  const limits = (i: number) => ({ min: panels[i]?.minSize ?? 0, max: panels[i]?.maxSize ?? 100 });
  const fit = (i: number, size: number) => {
    const p = panels[i];
    const { min, max } = limits(i);
    if (p?.collapsible && size < min) return size < min / 2 ? (p.collapsedSize ?? 0) : min;
    return clamp(size, min, max);
  };

  const resize = (handle: number, delta: number, from: number[]) => {
    const a = handle - 1;
    const b = handle;
    if (a < 0 || b >= panels.length) return;
    const total = from[a] + from[b];
    let first = fit(a, from[a] + delta);
    const second = fit(b, total - first);
    first = total - second;
    if (first === from[a] && from[a] === sizes[a]) return;
    const next = [...from];
    next[a] = round(first);
    next[b] = round(second);
    commit(next);
  };

  const collapse = (handle: number) => {
    const a = handle - 1;
    const p = panels[a];
    if (!p?.collapsible) return;
    const shut = p.collapsedSize ?? 0;
    const target = sizes[a] > shut ? shut : Math.max(p.defaultSize ?? limits(a).min, limits(a).min);
    resize(handle, target - sizes[a], sizes);
  };

  const reset = (handle: number) => {
    const a = handle - 1;
    const b = handle;
    const total = sizes[a] + sizes[b];
    const share = defaults[a] / (defaults[a] + defaults[b] || 1);
    resize(handle, total * share - sizes[a], sizes);
  };

  let panel = 0;
  return (
    <GroupContext.Provider value={{ direction, sizes, dragging, ready, setDragging, resize, collapse, reset, limits, root }}>
      <div
        ref={root}
        data-direction={direction}
        data-dragging={dragging || undefined}
        className={cn("flex size-full overflow-hidden", direction === "vertical" && "flex-col", dragging && "select-none", className)}
        {...props}
      >
        {items.map((child, i) => {
          const index = child.type === ResizablePanel ? panel++ : panel;
          return (
            <SlotContext.Provider key={child.key ?? i} value={index}>
              {child}
            </SlotContext.Provider>
          );
        })}
      </div>
    </GroupContext.Provider>
  );
}

export function ResizablePanel({ className, style, defaultSize: _default, minSize: _min, maxSize: _max, collapsible: _collapsible, collapsedSize = 0, ...props }: ResizablePanelProps) {
  const group = useGroup();
  const index = useContext(SlotContext);
  const size = group.sizes[index] ?? 0;
  return (
    <div
      data-panel=""
      data-collapsed={(_collapsible && size <= collapsedSize) || undefined}
      className={cn(
        "relative min-h-0 min-w-0 overflow-hidden",
        group.ready && !group.dragging && "transition-[flex-basis] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
        className,
      )}
      style={{ flex: `0 1 ${size}%`, ...style }}
      {...props}
    />
  );
}

export interface ResizableHandleProps extends ComponentProps<"div"> {
  /** line: a hairline · grip: a hairline with a raised grip · pill: a small bar in a gap, for panels with rounded corners. */
  variant?: "line" | "grip" | "pill";
}

export function ResizableHandle({ variant = "line", className, onKeyDown, ...props }: ResizableHandleProps) {
  const group = useGroup();
  const handle = useContext(SlotContext);
  const vertical = group.direction === "vertical";
  const start = useRef<{ pos: number; px: number; sizes: number[] } | null>(null);
  const [active, setActive] = useState(false);
  const before = group.sizes[handle - 1] ?? 0;
  const { min, max } = group.limits(handle - 1);

  const down = (e: PointerEvent<HTMLDivElement>) => {
    if (e.button !== 0 || !group.root.current) return;
    e.preventDefault();
    e.currentTarget.setPointerCapture(e.pointerId);
    e.currentTarget.focus();
    const box = group.root.current.getBoundingClientRect();
    start.current = { pos: vertical ? e.clientY : e.clientX, px: vertical ? box.height : box.width, sizes: group.sizes };
    setActive(true);
    group.setDragging(true);
  };
  const move = (e: PointerEvent<HTMLDivElement>) => {
    if (!start.current) return;
    const d = ((vertical ? e.clientY : e.clientX) - start.current.pos) / start.current.px;
    group.resize(handle, d * 100, start.current.sizes);
  };
  const up = () => {
    if (!start.current) return;
    start.current = null;
    setActive(false);
    group.setDragging(false);
  };
  const key = (e: KeyboardEvent<HTMLDivElement>) => {
    onKeyDown?.(e);
    const step = e.shiftKey ? 10 : 2;
    const moves: Record<string, number> = vertical
      ? { ArrowUp: -step, ArrowDown: step, Home: min - before, End: max - before }
      : { ArrowLeft: -step, ArrowRight: step, Home: min - before, End: max - before };
    if (e.key === "Enter") {
      e.preventDefault();
      group.collapse(handle);
    } else if (e.key in moves) {
      e.preventDefault();
      group.resize(handle, moves[e.key], group.sizes);
    }
  };

  const Grip = vertical ? GripHorizontal : GripVertical;
  return (
    <div
      role="separator"
      tabIndex={0}
      aria-orientation={vertical ? "horizontal" : "vertical"}
      aria-valuenow={Math.round(before)}
      aria-valuemin={min}
      aria-valuemax={max}
      data-active={active || undefined}
      onPointerDown={down}
      onPointerMove={move}
      onPointerUp={up}
      onPointerCancel={up}
      onDoubleClick={() => group.reset(handle)}
      onKeyDown={key}
      className={cn(
        "group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-none",
        vertical ? "cursor-row-resize" : "cursor-col-resize",
        variant === "pill"
          ? vertical
            ? "h-2.5 w-full"
            : "h-full w-2.5"
          : cn(
              "bg-black/[0.08] transition-colors duration-150 hover:bg-neutral-400 focus-visible:bg-neutral-500 data-active:bg-neutral-950 dark:bg-white/[0.1] dark:hover:bg-neutral-500 dark:focus-visible:bg-neutral-400 dark:data-active:bg-white",
              "after:absolute",
              vertical ? "h-px w-full after:inset-x-0 after:-inset-y-1.5" : "h-full w-px after:inset-y-0 after:-inset-x-1.5",
            ),
        className,
      )}
      {...props}
    >
      {variant === "grip" && (
        <span className="pointer-events-none z-10 flex items-center justify-center rounded-[6px] bg-white text-neutral-400 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.08)] transition-colors group-hover/handle:text-neutral-700 group-data-active/handle:text-neutral-950 dark:bg-neutral-800 dark:text-neutral-500 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.1)] dark:group-hover/handle:text-neutral-200 dark:group-data-active/handle:text-white">
          <Grip className={vertical ? "h-3 w-4" : "h-4 w-3"} />
        </span>
      )}
      {variant === "pill" && (
        <span
          className={cn(
            "pointer-events-none rounded-full bg-neutral-950/15 transition-[background-color,width,height] duration-200 group-hover/handle:bg-neutral-950/35 group-focus-visible/handle:bg-neutral-950/45 group-data-active/handle:bg-neutral-950/60 dark:bg-white/20 dark:group-hover/handle:bg-white/40 dark:group-data-active/handle:bg-white/70",
            vertical ? "h-1 w-8 group-hover/handle:w-11 group-data-active/handle:w-11" : "h-8 w-1 group-hover/handle:h-11 group-data-active/handle:h-11",
          )}
        />
      )}
    </div>
  );
}

export default ResizablePanelGroup;

2f:Tccb,import { Archive, Inbox, Send, Star } from "lucide-react"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable"; const folders = [ { icon: Inbox, name: "Inbox", count: 12 }, { icon: Star, name: "Starred", count: 3 }, { icon: Send, name: "Sent" }, { icon: Archive, name: "Archive" }, ]; const mail = [ { from: "Maya Chen", subject: "Q4 roadmap draft", time: "9:41" }, { from: "Linear", subject: "3 issues assigned to you", time: "9:12" }, { from: "Daniel Ortiz", subject: "Re: launch checklist", time: "Yesterday" }, { from: "Stripe", subject: "Your payout is on the way", time: "Mon" }, ]; export default function Demo() { return (

{folders.map(({ icon: Icon, name, count }, i) => (

{name} {count && {count}}

))} {mail.map((m, i) => (

{m.from} {m.time}

{m.subject}

))}

Q4 roadmap draft

Maya Chen · 9:41

{[100, 92, 96, 60].map((w, i) => (

))}

); } 30:T714b,

import { Archive, Inbox, Send, Star } from "lucide-react";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable";

const folders = [
  { icon: Inbox, name: "Inbox", count: 12 },
  { icon: Star, name: "Starred", count: 3 },
  { icon: Send, name: "Sent" },
  { icon: Archive, name: "Archive" },
];

const mail = [
  { from: "Maya Chen", subject: "Q4 roadmap draft", time: "9:41" },
  { from: "Linear", subject: "3 issues assigned to you", time: "9:12" },
  { from: "Daniel Ortiz", subject: "Re: launch checklist", time: "Yesterday" },
  { from: "Stripe", subject: "Your payout is on the way", time: "Mon" },
];

export default function Demo() {
  return (
    <div className="h-[340px] w-full max-w-[640px] overflow-hidden rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <ResizablePanelGroup>
        <ResizablePanel defaultSize={24} minSize={16} maxSize={36} className="bg-neutral-50/70 p-2 dark:bg-white/[0.02]">
          {folders.map(({ icon: Icon, name, count }, i) => (
            <div
              key={name}
              className={
                i === 0
                  ? "flex h-8 items-center gap-2 rounded-[10px] bg-neutral-950/[0.05] px-2.5 text-[13px] font-medium text-neutral-950 dark:bg-white/[0.08] dark:text-white"
                  : "flex h-8 items-center gap-2 rounded-[10px] px-2.5 text-[13px] text-neutral-600 dark:text-neutral-400"
              }
            >
              <Icon className="size-3.5 shrink-0" />
              <span className="truncate">{name}</span>
              {count && <span className="ml-auto text-[11.5px] tabular-nums text-neutral-400">{count}</span>}
            </div>
          ))}
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={36} minSize={24}>
          {mail.map((m, i) => (
            <div key={m.subject} className={i === 0 ? "border-b border-black/[0.05] bg-neutral-950/[0.03] px-4 py-3 dark:border-white/[0.06] dark:bg-white/[0.04]" : "border-b border-black/[0.05] px-4 py-3 dark:border-white/[0.06]"}>
              <div className="flex justify-between gap-2 text-[13px]">
                <span className="truncate font-medium text-neutral-900 dark:text-white">{m.from}</span>
                <span className="shrink-0 text-[11.5px] text-neutral-400">{m.time}</span>
              </div>
              <p className="truncate text-[12.5px] text-neutral-500 dark:text-neutral-400">{m.subject}</p>
            </div>
          ))}
        </ResizablePanel>
        <ResizableHandle variant="grip" />
        <ResizablePanel minSize={24} className="p-5">
          <p className="text-[15px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Q4 roadmap draft</p>
          <p className="mt-0.5 text-[12.5px] text-neutral-500 dark:text-neutral-400">Maya Chen · 9:41</p>
          <div className="mt-4 space-y-2">
            {[100, 92, 96, 60].map((w, i) => (
              <div key={i} className="h-2 rounded-full bg-neutral-950/[0.06] dark:bg-white/[0.08]" style={{ width: `${w}%` }} />
            ))}
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

31:T635,import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable"; const code = ["export function total(items) {", " return items.reduce(", " (sum, item) => sum + item.price,", " 0,", " );", "}"]; export default function Example() { return (

{code.map((line, i) => (

{i + 1} {line}

))}

Terminal

$ pnpm test

✓ total adds prices (2 ms)

Tests: 1 passed

); } 32:T3542,

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable";

const code = ["export function total(items) {", "  return items.reduce(", "    (sum, item) => sum + item.price,", "    0,", "  );", "}"];

export default function Example() {
  return (
    <div className="h-[340px] w-full max-w-[520px] overflow-hidden rounded-[22px] bg-white font-mono text-[12.5px] shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <ResizablePanelGroup direction="vertical">
        <ResizablePanel defaultSize={62} minSize={30} className="p-4">
          {code.map((line, i) => (
            <div key={i} className="flex gap-4 leading-6">
              <span className="w-4 text-right text-neutral-300 dark:text-neutral-600">{i + 1}</span>
              <span className="whitespace-pre text-neutral-800 dark:text-neutral-200">{line}</span>
            </div>
          ))}
        </ResizablePanel>
        <ResizableHandle variant="grip" />
        <ResizablePanel minSize={18} className="bg-neutral-50 p-4 dark:bg-black/30">
          <p className="mb-2 font-sans text-[11.5px] font-medium uppercase tracking-[0.08em] text-neutral-400">Terminal</p>
          <p className="text-neutral-500 dark:text-neutral-400">$ pnpm test</p>
          <p className="text-emerald-600 dark:text-emerald-400">✓ total adds prices (2 ms)</p>
          <p className="text-neutral-500 dark:text-neutral-400">Tests: 1 passed</p>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

33:T637,import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable"; const pane = "flex h-full items-center justify-center text-[12.5px] font-medium text-neutral-500 dark:text-neutral-400"; export default function Example() { return (

{(["line", "grip"] as const).map((variant) => (

{variant} Drag or use ← →

))}

pill Double-click resets

); } 34:T393f,

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable";

const pane = "flex h-full items-center justify-center text-[12.5px] font-medium text-neutral-500 dark:text-neutral-400";

export default function Example() {
  return (
    <div className="grid w-full max-w-[560px] gap-5">
      {(["line", "grip"] as const).map((variant) => (
        <div key={variant} className="h-[96px] overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
          <ResizablePanelGroup>
            <ResizablePanel minSize={20} className={pane}>
              <span className="font-mono">{variant}</span>
            </ResizablePanel>
            <ResizableHandle variant={variant} />
            <ResizablePanel minSize={20} className={pane}>
              Drag or use ← →
            </ResizablePanel>
          </ResizablePanelGroup>
        </div>
      ))}
      <div className="h-[96px]">
        <ResizablePanelGroup>
          <ResizablePanel minSize={20} className={`${pane} rounded-[18px] bg-white ring-1 ring-inset ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]`}>
            <span className="font-mono">pill</span>
          </ResizablePanel>
          <ResizableHandle variant="pill" />
          <ResizablePanel minSize={20} className={`${pane} rounded-[18px] bg-white ring-1 ring-inset ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]`}>
            Double-click resets
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </div>
  );
}

35:Ta9e,"use client"; import { Calendar, FolderKanban, Home, Inbox, PanelLeft, Settings } from "lucide-react"; import { useState } from "react"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable"; const nav = [ { icon: Home, name: "Home" }, { icon: Inbox, name: "Inbox" }, { icon: FolderKanban, name: "Projects" }, { icon: Calendar, name: "Calendar" }, { icon: Settings, name: "Settings" }, ]; const COLLAPSED = 10; export default function Example() { const [sizes, setSizes] = useState([30, 70]); const collapsed = sizes[0] <= COLLAPSED; return (

{nav.map(({ icon: Icon, name }, i) => (

{!collapsed && {name}}

))}

Projects

Drag the edge past its minimum and the sidebar snaps to icons. Click the button, or focus the handle and press Enter, to toggle it.

); } 36:T577a,

"use client";

import { Calendar, FolderKanban, Home, Inbox, PanelLeft, Settings } from "lucide-react";
import { useState } from "react";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable";

const nav = [
  { icon: Home, name: "Home" },
  { icon: Inbox, name: "Inbox" },
  { icon: FolderKanban, name: "Projects" },
  { icon: Calendar, name: "Calendar" },
  { icon: Settings, name: "Settings" },
];

const COLLAPSED = 10;

export default function Example() {
  const [sizes, setSizes] = useState([30, 70]);
  const collapsed = sizes[0] <= COLLAPSED;
  return (
    <div className="h-[320px] w-full max-w-[560px] overflow-hidden rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <ResizablePanelGroup sizes={sizes} onSizesChange={setSizes}>
        <ResizablePanel defaultSize={30} minSize={22} maxSize={40} collapsible collapsedSize={COLLAPSED} className="bg-neutral-50/70 p-2 dark:bg-white/[0.02]">
          {nav.map(({ icon: Icon, name }, i) => (
            <div
              key={name}
              title={collapsed ? name : undefined}
              className={`flex h-9 items-center gap-2.5 rounded-[10px] text-[13px] ${collapsed ? "justify-center" : "px-2.5"} ${i === 2 ? "bg-neutral-950/[0.05] font-medium text-neutral-950 dark:bg-white/[0.08] dark:text-white" : "text-neutral-600 dark:text-neutral-400"}`}
            >
              <Icon className="size-4 shrink-0" />
              {!collapsed && <span className="truncate">{name}</span>}
            </div>
          ))}
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel className="p-4">
          <button
            onClick={() => setSizes(collapsed ? [30, 70] : [COLLAPSED, 100 - COLLAPSED])}
            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
            className="flex size-8 items-center justify-center rounded-[10px] text-neutral-500 outline-none transition-colors hover:bg-neutral-100 hover:text-neutral-900 focus-visible:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white"
          >
            <PanelLeft className="size-4" />
          </button>
          <p className="mt-3 text-[15px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Projects</p>
          <p className="mt-1 text-[12.5px] leading-relaxed text-neutral-500 dark:text-neutral-400">
            Drag the edge past its minimum and the sidebar snaps to icons. Click the button, or focus the handle and press Enter, to toggle it.
          </p>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

37:T4c1,import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable"; const card = "flex h-full items-center justify-center rounded-[16px] bg-white text-[12.5px] font-medium text-neutral-500 ring-1 ring-inset ring-black/[0.06] dark:bg-neutral-900 dark:text-neutral-400 dark:ring-white/[0.08]"; export default function Example() { return (

Files

Canvas

Properties

); } 38:T2c89,

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/scalar-ui/resizable";

const card = "flex h-full items-center justify-center rounded-[16px] bg-white text-[12.5px] font-medium text-neutral-500 ring-1 ring-inset ring-black/[0.06] dark:bg-neutral-900 dark:text-neutral-400 dark:ring-white/[0.08]";

export default function Example() {
  return (
    <div className="h-[340px] w-full max-w-[600px] rounded-[24px] bg-neutral-100 p-2 dark:bg-white/[0.04]">
      <ResizablePanelGroup autoSaveId="nested-example">
        <ResizablePanel defaultSize={34} minSize={20}>
          <div className={card}>Files</div>
        </ResizablePanel>
        <ResizableHandle variant="pill" />
        <ResizablePanel minSize={30}>
          <ResizablePanelGroup direction="vertical">
            <ResizablePanel defaultSize={65} minSize={25}>
              <div className={card}>Canvas</div>
            </ResizablePanel>
            <ResizableHandle variant="pill" />
            <ResizablePanel minSize={20}>
              <div className={card}>Properties</div>
            </ResizablePanel>
          </ResizablePanelGroup>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

29:["$","section","resizable",{"id":"resizable","aria-labelledby":"resizable-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"resizable-title","className":"sr-only","children":"Resizable Panels"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"resizable","gated":{"unlocked":true,"files":[{"name":"resizable.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"vertical":{"name":"vertical.tsx","code":"$31","html":"$32"},"handles":{"name":"handles.tsx","code":"$33","html":"$34"},"collapsible":{"name":"collapsible.tsx","code":"$35","html":"$36"},"nested":{"name":"nested.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add resizable","shadcn":"npx shadcn@latest add https://scalarui.com/r/resizable.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

Resizable

Resizable

Vertical

Handles

Collapsible

Nested