2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T3eb4,"use client"; import * as React from "react"; import { IconChevronLeft, IconChevronRight, IconChevronUp, IconChevronDown } from "@tabler/icons-react"; import { useDefaultLayout, usePanelRef, type Layout, type PanelImperativeHandle, type PanelSize } from "react-resizable-panels"; import { Button } from "@/components/ui/button"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"; import { cn } from "@/lib/utils"; import { useMounted } from "../_shared/use-nav"; export type ResizableOrientation = "horizontal" | "vertical"; /** `default`: panes share hairlines inside one frame. `cards`: each pane is its own card. `filled`: raised panes on a tinted tray. `plain`: no frame, for nesting inside a pane. */ export type ResizableVariant = "default" | "cards" | "filled" | "plain"; /** `line`: hairline that thickens on hover. `bar`: a visible track. `grip`: hairline with a grab pill. */ export type ResizableHandleType = "line" | "bar" | "grip"; type PaneApi = { collapsed: boolean; collapse: () => void; expand: () => void; toggle: () => void; /** Current size as a percentage of the group. */ size: number; }; type RootApi = { orientation: ResizableOrientation; ready: boolean; register: (id: string, handle: PanelImperativeHandle | null) => void; report: (id: string, size: PanelSize, collapsedSize: number, collapsible: boolean) => void; }; const RootContext = React.createContext(null); const PaneContext = React.createContext(null); /** Read and drive the pane that contains the caller (collapse, expand, current size). */ export function useResizablePane(): PaneApi { const ctx = React.useContext(PaneContext); if (!ctx) throw new Error("useResizablePane must be used inside ."); return ctx; } export type ResizablePaneProps = { /** Stable id. Required to persist sizes; defaults to the pane's position. */ id?: string; /** A number is a percentage of the group (0 to 100). A string takes its unit: "260px", "16rem", "30%". */ defaultSize?: number | string; minSize?: number | string; maxSize?: number | string; /** Keep this pane's pixel width when the group resizes, instead of its share. At least one pane must not. */ preservePixels?: boolean; /** Dragging below `minSize` collapses the pane to `collapsedSize`. */ collapsible?: boolean; collapsedSize?: number; /** Names the pane for assistive technology and the reopen button. */ label?: string; className?: string; children?: React.ReactNode; }; const unit = (n: number | string | undefined) => (n === undefined ? undefined : typeof n === "number" ? `${String(n)}%` : n); /** A pane. Direct children of `ResizablePanels`; handles are inserted between them. */ export function ResizablePane({ id, defaultSize, minSize, maxSize, collapsible = false, collapsedSize = 0, preservePixels = false, label, className, children, }: ResizablePaneProps) { const root = React.useContext(RootContext); const fallbackId = React.useId(); const paneId = id ?? fallbackId; const ref = usePanelRef(); const [collapsed, setCollapsed] = React.useState(false); const [size, setSize] = React.useState(typeof defaultSize === "number" ? defaultSize : 0); React.useEffect(() => { root?.register(paneId, ref.current); return () => root?.register(paneId, null); }, [root, paneId, ref]); const api = React.useMemo( () => ({ collapsed, size, collapse: () => ref.current?.collapse(), expand: () => ref.current?.expand(), toggle: () => (ref.current?.isCollapsed() ? ref.current.expand() : ref.current?.collapse()), }), [collapsed, size, ref], ); return ( { setSize(next.asPercentage); setCollapsed(collapsible && next.asPercentage <= collapsedSize + 0.01); root?.report(paneId, next, collapsedSize, collapsible); }} className={cn("min-h-0 min-w-0", className)} aria-label={label} data-slot="resizable-pane" > {/* A collapsed pane keeps its state but takes no focus and is hidden from assistive technology. */}

{children}

); } const handleBase = "z-10 transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ring/60"; function handleClasses(variant: ResizableVariant, type: ResizableHandleType) { if (variant === "cards" || variant === "filled") { // Gap handles between cards: invisible until hover, then a short pill. return cn( handleBase, "bg-transparent w-3 aria-[orientation=horizontal]:h-3 aria-[orientation=horizontal]:w-full", "after:inset-y-0 after:w-3 aria-[orientation=horizontal]:after:h-3", "before:absolute before:rounded-full before:bg-border before:opacity-0 before:transition-opacity before:duration-150 before:content-[''] motion-reduce:before:transition-none", "before:inset-y-[calc(50%-1rem)] before:start-1/2 before:w-1 before:-translate-x-1/2 rtl:before:translate-x-1/2", "aria-[orientation=horizontal]:before:inset-y-auto aria-[orientation=horizontal]:before:top-1/2 aria-[orientation=horizontal]:before:start-[calc(50%-1rem)] aria-[orientation=horizontal]:before:h-1 aria-[orientation=horizontal]:before:w-8 aria-[orientation=horizontal]:before:translate-x-0 aria-[orientation=horizontal]:before:-translate-y-1/2", type === "grip" ? "before:opacity-100 before:bg-border" : "hover:before:opacity-100", "data-[separator=active]:before:bg-ring/70 data-[separator=active]:before:opacity-100", ); } const hit = "after:w-2 aria-[orientation=horizontal]:after:h-2 aria-[orientation=horizontal]:after:w-full"; if (type === "bar") { return cn( handleBase, hit, "w-1.5 bg-muted hover:bg-border data-[separator=active]:bg-ring/50 aria-[orientation=horizontal]:h-1.5 aria-[orientation=horizontal]:w-full", ); } if (type === "grip") { return cn( handleBase, hit, "hover:bg-ring/50 data-[separator=active]:bg-ring/70 [&>div]:h-8 [&>div]:w-1.5 [&>div]:bg-border [&>div]:transition-colors [&>div]:duration-150 hover:[&>div]:bg-ring/70 data-[separator=active]:[&>div]:bg-ring", ); } return cn(handleBase, hit, "hover:bg-ring/50 data-[separator=active]:bg-ring/70"); } const variantRoot: Record = { default: "rounded-xl border border-border bg-background overflow-hidden", cards: "", filled: "rounded-xl bg-muted p-1.5 ring-1 ring-foreground/5", plain: "", }; const variantPane: Record = { default: "", cards: "rounded-xl border border-border bg-card overflow-hidden", filled: "rounded-lg bg-background shadow-xs ring-1 ring-foreground/6 overflow-hidden", plain: "", }; type Meta = { id: string; collapsible: boolean; collapsedSize: number }; export type ResizablePanelsProps = { /** `ResizablePane` elements. */ children: React.ReactNode; orientation?: ResizableOrientation; variant?: ResizableVariant; handle?: ResizableHandleType; /** Show a size badge on the handle while it is dragged. */ indicator?: boolean; /** Persist pane sizes to localStorage under this key. Panes need stable `id`s. */ persistKey?: string; onLayoutChange?: (layout: Layout) => void; disabled?: boolean; className?: string; }; /** * Resizable panes on the Kobra resizable (react-resizable-panels). Handles go between panes, the group fills * its parent, collapsible panes get a reopen button on their edge, and sizes can persist. */ export function ResizablePanels({ children, orientation = "horizontal", variant = "default", handle = "line", indicator = false, persistKey, onLayoutChange, disabled, className, }: ResizablePanelsProps) { const mounted = useMounted(); const panes = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[]; const ids = panes.map((p, i) => p.props.id ?? `pane-${String(i)}`); const vertical = orientation === "vertical"; const root = React.useRef(null); const handles = React.useRef(new Map()); const [layout, setLayout] = React.useState({}); const [dragging, setDragging] = React.useState(null); const [collapsedIds, setCollapsedIds] = React.useState>({}); const [ready, setReady] = React.useState(false); React.useEffect(() => { let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, []); const storage = React.useMemo( () => typeof window === "undefined" ? { getItem: () => null, setItem: () => undefined } : window.localStorage, [], ); const persisted = useDefaultLayout({ id: persistKey ?? "resizable-panels-unsaved", panelIds: ids, storage: persistKey ? storage : { getItem: () => null, setItem: () => undefined }, }); const api = React.useMemo( () => ({ orientation, ready, register: (id, h) => { if (h) handles.current.set(id, h); else handles.current.delete(id); }, report: (id, size, collapsedSize, collapsible) => { const collapsed = collapsible && size.asPercentage <= collapsedSize + 0.01; setCollapsedIds((prev) => (prev[id] === collapsed ? prev : { ...prev, [id]: collapsed })); }, }), [orientation, ready], ); // Which handle is being dragged: its position among the separators of this group. React.useEffect(() => { const node = root.current; if (!node || !indicator) return; let timer = 0; const find = (target: EventTarget | null) => { const sep = target instanceof Element ? target.closest("[data-separator]") : null; if (!sep || sep.closest("[data-slot=resizable-panels]") !== node) return null; return Array.from(sep.parentElement?.children ?? []) .filter((c) => c.hasAttribute("data-separator")) .indexOf(sep); }; const down = (e: PointerEvent) => { const i = find(e.target); if (i !== null && i >= 0) setDragging(i); }; const up = () => setDragging(null); const key = (e: KeyboardEvent) => { if (!e.key.startsWith("Arrow") && e.key !== "Home" && e.key !== "End") return; const i = find(e.target); if (i === null || i < 0) return; setDragging(i); window.clearTimeout(timer); timer = window.setTimeout(() => setDragging(null), 700); }; node.addEventListener("pointerdown", down); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); node.addEventListener("keydown", key); return () => { node.removeEventListener("pointerdown", down); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); node.removeEventListener("keydown", key); window.clearTimeout(timer); }; }, [indicator]); const metas: Meta[] = panes.map((p, i) => ({ id: ids[i], collapsible: Boolean(p.props.collapsible), collapsedSize: p.props.collapsedSize ?? 0, })); const interleaved: React.ReactNode[] = []; panes.forEach((pane, i) => { interleaved.push( React.cloneElement(pane, { key: ids[i], id: ids[i], className: cn(variantPane[variant], pane.props.className), }), ); if (i < panes.length - 1) { interleaved.push( , ); } }); // Indicator geometry: where the dragged handle sits, and the sizes either side of it. // `left-(--at)` is intentionally physical: --at is a percentage measured from the group's visual left edge. let badge: React.ReactNode = null; if (indicator && dragging !== null && dragging < panes.length - 1) { const before = ids.slice(0, dragging + 1).reduce((sum, id) => sum + (layout[id] ?? 0), 0); const a = layout[ids[dragging]] ?? 0; const b = layout[ids[dragging + 1]] ?? 0; badge = ( {Math.round(a)}% {Math.round(b)}% ); } const reopen = (i: number) => { const meta = metas[i]; if (!meta.collapsible || !collapsedIds[meta.id]) return null; const first = i === 0; const last = i === metas.length - 1; if (!first && !last) return null; const label = panes[i].props.label ?? "pane"; const Icon = vertical ? first ? IconChevronDown : IconChevronUp : first ? IconChevronRight : IconChevronLeft; return ( ); }; const group = ( { setLayout(next); onLayoutChange?.(next); }} onLayoutChanged={persistKey ? persisted.onLayoutChanged : undefined} disabled={disabled} > {interleaved} ); return (

{persistKey && !mounted ? null : group} {badge} {metas.map((_, i) => reopen(i))}

); } 32:T137e,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"; const noop = () => () => {}; /** False on the server and during hydration, true afterwards. */ export function useMounted(): boolean { return useSyncExternalStore(noop, () => true, () => false); } /** True on Apple platforms, where the modifier key is Cmd. Server and first client render say Mac. */ export function useIsMac(): boolean { return useSyncExternalStore( noop, () => /Mac|iPhone|iPad/.test(navigator.platform), () => true, ); } const listeners = new Set<() => void>(); function subscribeStorage(notify: () => void) { listeners.add(notify); window.addEventListener("storage", notify); return () => { listeners.delete(notify); window.removeEventListener("storage", notify); }; } function readRaw(key: string | undefined): string | null { if (!key) return null; try { return window.localStorage.getItem(key); } catch { return null; } } function writeStorage(key: string, value: unknown) { try { window.localStorage.setItem(key, JSON.stringify(value)); } catch { /* private mode or quota: the state still works in memory */ } listeners.forEach((notify) => notify()); } /** * State that survives reloads when `key` is given. The server and the hydrating render see `initial`; the stored * value arrives right after, and `ready` turns true two frames later so callers can keep transitions off until * the restored value has painted. Without a key it is plain state. */ export function usePersistedState( key: string | undefined, initial: T, ): [value: T, setValue: (next: T) => void, ready: boolean] { const [local, setLocal] = useState(initial); const [ready, setReady] = useState(!key); const raw = useSyncExternalStore( subscribeStorage, () => readRaw(key), () => null, ); const stored = useMemo(() => { if (raw === null) return undefined; try { return JSON.parse(raw) as T; } catch { return undefined; } }, [raw]); useEffect(() => { if (!key) return; let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, [key]); const set = useCallback( (next: T) => { setLocal(next); if (key) writeStorage(key, next); }, [key], ); return [key && stored !== undefined ? stored : local, set, ready]; } /** Controlled or uncontrolled value, Base UI naming. */ export function useControllable( value: T | undefined, defaultValue: T, onChange?: (next: T) => void, ): [T, (next: T) => void] { const [inner, setInner] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : inner; const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }); const set = useCallback( (next: T) => { if (!controlled) setInner(next); onChangeRef.current?.(next); }, [controlled], ); return [current, set]; } type ShortcutOptions = { /** `window`: any time. `within`: only while the element holds focus or the pointer. */ scope?: "window" | "within"; /** Element used by `within`. */ scopeRef?: React.RefObject; /** Also swallow these Cmd/Ctrl+key combos before other listeners see them. */ swallow?: string[]; }; /** * Cmd/Ctrl + key. Runs in the capture phase so it can claim a combo (for example, to replace the Kobra * sidebar's built-in Cmd/Ctrl+B with another key). A key of `false` disables the shortcut. */ export function useModShortcut( key: string | false | undefined, handler: () => void, { scope = "window", scopeRef, swallow = [] }: ShortcutOptions = {}, ) { const handlerRef = useRef(handler); useEffect(() => { handlerRef.current = handler; }); useEffect(() => { const wanted = key ? key.toLowerCase() : undefined; const onKeyDown = (event: KeyboardEvent) => { if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return; const pressed = event.key.toLowerCase(); if (swallow.includes(pressed) && pressed !== wanted) { event.stopPropagation(); return; } if (!wanted || pressed !== wanted) return; if (scope === "within") { const node = scopeRef?.current; if (!node || !(node.contains(document.activeElement) || node.matches(":hover"))) return; } event.preventDefault(); event.stopPropagation(); handlerRef.current(); }; window.addEventListener("keydown", onKeyDown, true); return () => window.removeEventListener("keydown", onKeyDown, true); // swallow is compared by content // eslint-disable-next-line react-hooks/exhaustive-deps }, [key, scope, scopeRef, swallow.join("|")]); } 33:T2ba7,"use client"; import { useState } from "react"; import { IconLayoutSidebar, IconMail } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { consoleLines, editorLines, inboxThreads } from "../_fixtures"; import { FileTree, FileTreeFile, FileTreeFolder } from "../../data/file-tree/file-tree"; import { DemoPage, DemoSection } from "../_shared/demo-kit"; import { ResizablePane, ResizablePanels, useResizablePane, type ResizableHandleType, type ResizableVariant } from "./resizable-panels"; const PERSIST_KEY = "kc:resizable-panels:demo"; function Frame({ height = 280, children }: { height?: number; children: React.ReactNode }) { return (

{children}

); } function Header({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) { return (

{children} {action}

); } function Explorer({ headless = false }: { headless?: boolean }) { return (

{headless ? null :

Explorer

}

); } function Editor({ title = "format.ts" }: { title?: string }) { return (

{title}

        {editorLines.map((line, i) => (
          
            {i + 1}
            {line}
          
        ))}

); } function Console() { return (

Console

{line}

); } function Inspector() { return (

Inspector

{k}: {v}

); } function Mail() { return (

{t.from} {t.subject} {t.preview}

); } function Blank({ label }: { label: string }) { return

{label}

; } function ToggleButton({ label }: { label: string }) { const { collapsed, toggle } = useResizablePane(); return ( ); } function CollapsibleExplorer() { return (

}>Explorer

); } function HandleTypes() { const types: ResizableHandleType[] = ["line", "bar", "grip"]; return (

{types.map((type) => (

handle: {type}

))}

); } function Variants() { const variants: ResizableVariant[] = ["default", "cards", "filled"]; return (

{variants.map((variant) => (

variant: {variant}

))}

); } function Persisted() { const [epoch, setEpoch] = useState(0); const reset = () => { try { window.localStorage.removeItem(`react-resizable-panels:${PERSIST_KEY}`); window.localStorage.removeItem(PERSIST_KEY); } catch { /* storage unavailable */ } setEpoch((n) => n + 1); }; return (

Drag a handle, then reload the page.

); } export function ResizablePanelsDemo() { return ( ); } export default ResizablePanelsDemo; // keep cn referenced for consumers copying the demo helpers void cn; 34:T7c0,import type { BlockMeta } from "../../../lib/block-meta"; export const resizablePanelsMeta: BlockMeta = { slug: "resizable-panels", title: "Resizable panels", description: "Resizable panes on the Kobra resizable: horizontal and vertical, line, bar and grip handles, three variants, nesting, collapsible panes with a reopen tab, a drag size indicator and persisted sizes.", group: "navigation", kobraDeps: ["resizable", "button"], files: ["blocks/navigation/resizable-panels/resizable-panels.tsx", "blocks/navigation/_shared/use-nav.ts"], props: [ { name: "orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Axis the panes are laid out on." }, { name: "variant", type: "'default' | 'cards' | 'filled'", default: "'default'", description: "One framed surface, separate cards, or raised panes on a tinted tray." }, { name: "handle", type: "'line' | 'bar' | 'grip'", default: "'line'", description: "Handle style." }, { name: "indicator", type: "boolean", default: "false", description: "Show a size badge at the handle while dragging or resizing by keyboard." }, { name: "persistKey", type: "string", description: "Persist sizes to localStorage. Panes need stable ids." }, { name: "onLayoutChange", type: "(layout: Record) => void", description: "Live layout in percentages, by pane id." }, { name: "disabled", type: "boolean", description: "Lock all handles." }, { name: "ResizablePane", type: "id, defaultSize, minSize, maxSize, collapsible, collapsedSize, label", description: "Direct child. Sizes are percentages. Collapsible edge panes get a reopen button." }, { name: "useResizablePane()", type: "{ collapsed, size, collapse, expand, toggle }", description: "Read and drive the enclosing pane from its content." }, { name: "className", type: "string", description: "Root only." }, ], tags: ["split", "panes", "layout", "resizable", "app-ui"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#navigation","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Navigation"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Resizable panels"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Resizable panels"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Resizable panes on the Kobra resizable: horizontal and vertical, line, bar and grip handles, three variants, nesting, collapsible panes with a reopen tab, a drag size indicator and persisted sizes."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"resizable-panels","group":"navigation","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/navigation/resizable-panels/resizable-panels.tsx","code":"$31"},{"path":"blocks/navigation/_shared/use-nav.ts","code":"$32"},{"path":"blocks/navigation/resizable-panels/demo.tsx","code":"$33"},{"path":"blocks/navigation/resizable-panels/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]