4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1b85,import { Fragment } from "react"; export const Dashboard = () => (

{Array.from({ length: 20 }, (_, index) => (

))}

); 50:T2047,import type { ReactNode } from "react"; import { BarChart3, Bell, Building, Building2, CheckSquare, ChevronDown, DollarSign, FileText, GitBranch, Grid3X3, Link, Mail, Settings, Star, Users, Workflow, } from "lucide-react"; import { useResizableSidebar } from "./use-resizable-sidebar"; interface NavItem { id: string; label: string; /** A lucide element, or a plain string to render an emoji glyph instead. */ icon: ReactNode; isActive?: boolean; subItems?: NavItem[]; } const navigationItems: NavItem[] = [ { icon: , id: "notifications", label: "Notifications" }, { icon: , id: "tasks", label: "Tasks" }, { icon: , id: "emails", label: "Emails" }, { icon: , id: "reports", label: "Reports" }, { icon: , id: "automations", label: "Automations", subItems: [ { icon: , id: "workflows", label: "Workflows" }, { icon: , id: "sequences", label: "Sequences" }, ], }, ]; const favoritesItems: NavItem[] = [ { icon: , id: "onboarding-pipeline", label: "Onboarding pipeline", }, { icon: , id: "top-of-funnel", label: "Top of funnel", }, { icon: , id: "revops-workflows", label: "RevOps workflows", }, ]; const recordsItems: NavItem[] = [ { icon: , id: "companies", isActive: true, label: "Companies", }, { icon: , id: "people", label: "People" }, { icon: , id: "deals", label: "Deals" }, { icon: , id: "workspaces", label: "Workspaces" }, { icon: , id: "partnerships", label: "Partnerships" }, ]; /** Emoji glyphs need the centring wrapper a component icon draws itself. */ const EmojiIcon = ({ children }: { children: string }) => ( {children} ); const listsItems: NavItem[] = [ { icon: 🚀, id: "strategic-accounts", label: "Strategic accounts", }, ]; const NavigationItem = ({ item }: { item: NavItem }) => (

{item.icon}

{item.label} {item.subItems && }

{item.subItems && (

{item.subItems.map((subItem) => (

))}

)}

); const NavigationSection = ({ title, items }: { title: string; items: NavItem[] }) => (

{title}

))}

); export const Sidebar = () => { const { handleMouseDown } = useResizableSidebar(); return (

Dataembed

Quick actions

⌘K

))}

{/* Resize Handle */} {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- mouse-only resize affordance; the sidebar is fully usable at its default width, so there is no keyboard equivalent to provide */}

); }; 51:T901,import { useEffect, useRef } from "react"; import type { MouseEvent as ReactMouseEvent } from "react"; interface UseResizableSidebarOptions { defaultWidth?: number; minWidth?: number; maxWidth?: number; } export const useResizableSidebar = ({ defaultWidth = 240, minWidth = 100, maxWidth = 300, }: UseResizableSidebarOptions = {}) => { const startXRef = useRef(0); const startWidthRef = useRef(0); const isResizingRef = useRef(false); const handleMouseDown = (e: ReactMouseEvent) => { e.preventDefault(); isResizingRef.current = true; startXRef.current = e.clientX; // oxlint-disable-next-line unicorn/prefer-number-coercion -- parseInt tolerates a trailing unit the replace() misses; Number() would NaN on it startWidthRef.current = Number.parseInt( getComputedStyle(document.documentElement) .getPropertyValue("--sidebar-width") .replace("px", "") || defaultWidth.toString(), 10, ); document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none"; }; useEffect(() => { document.documentElement.style.setProperty("--sidebar-width", `${defaultWidth}px`); // The width lives in a CSS variable rather than state so dragging never re-renders. const handleMouseMove = (e: MouseEvent) => { if (!isResizingRef.current) { return; } const newWidth = startWidthRef.current + (e.clientX - startXRef.current); const clampedWidth = Math.min(Math.max(newWidth, minWidth), maxWidth); document.documentElement.style.setProperty("--sidebar-width", `${clampedWidth}px`); }; const handleMouseUp = () => { if (!isResizingRef.current) { return; } isResizingRef.current = false; document.body.style.cursor = ""; document.body.style.userSelect = ""; }; document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); return () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); document.body.style.cursor = ""; document.body.style.userSelect = ""; }; }, [defaultWidth, minWidth, maxWidth]); return { handleMouseDown, }; }; 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4d",null,{"namespace":"@uicapsule","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"/dashboard.tsx","content":"$4f","type":"registry:file","target":"uicapsule/sidebar/dashboard.tsx"},{"path":"/preview.tsx","content":"\"use client\";\n\nimport { Dashboard } from \"./dashboard\";\nimport { Sidebar } from \"./sidebar\";\n\nconst Preview = () => (\n \n \n \n

\n);\n\nexport default Preview;\n","type":"registry:file","target":"uicapsule/sidebar/preview.tsx"},{"path":"/sidebar.tsx","content":"$50","type":"registry:file","target":"uicapsule/sidebar/sidebar.tsx"},{"path":"/use-resizable-sidebar.ts","content":"$51","type":"registry:file","target":"uicapsule/sidebar/use-resizable-sidebar.ts"}],"className":"h-[70svh] min-h-80"}]]}]