50: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/2ntfcxrkfxczh.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"] 51: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/2ntfcxrkfxczh.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"] 52:T227a,'use client' import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts' import { BarChart3, Bell, ClipboardList, FileText, Search, Users } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' import { Progress } from '@/components/ui/progress' import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar' import { app1Activity, app1Chart, app1ChartConfig, app1Projects, app1User } from "@/components/data/app-1-data" import { App1Sidebar } from './app-1-sidebar' const STATS = [ { label: 'Total projects', value: '24', hint: '+2 from last month', icon: FileText }, { label: 'Active tasks', value: '127', hint: '+12 from yesterday', icon: ClipboardList }, { label: 'Team members', value: '16', hint: '+1 new member', icon: Users }, { label: 'Completion rate', value: '87%', hint: '+5% from last week', icon: BarChart3 }, ] const STATUS_VARIANT = { 'In progress': 'default', 'In review': 'secondary', Planning: 'outline', } as const export function App1() { return ( {/* min-w-0: the inset is a flex item, and a flex item's min-width is `auto`, so it refuses to shrink below the min-content width of the widest thing inside it. At tablet widths, where the sidebar becomes permanent, that pushed the inset ~23px past the viewport and ate the right padding off every card. */}

Welcome back, {app1User.name.split(' ')[0]}

{app1User.initials}

{STATS.map(stat => ( {stat.label}

{stat.value}

{stat.hint}

))}

Task throughput Tasks opened against tasks completed over the last eight weeks {/* ChartContainer supplies the responsive wrapper and the CSS variables the series read. */} } /> } /> {/* The two series separate by form, not by luminance, so they stay readable in both themes. */}

Active projects Your current project progress {app1Projects.map(project => (

{project.name}

{project.status}

{project.description}

{project.progress}%

{project.team.map(member => ( {member.initials} ))} Due {project.dueDate}

))} Recent activity Latest updates from your team

{entry.person.initials}

{entry.person.name}{' '} {entry.action}

{entry.time}

) } export default App1 53:T19e5,'use client' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '@/components/ui/sidebar' import { app1Nav, app1Team, app1User } from "@/components/data/app-1-data" function BrandMark({ className }: { className?: string }) { return ( ) } /** * Built on the Sidebar primitive rather than a hand-rolled fixed panel: it brings the mobile * sheet, the focus trap and the `sidebar_state` cookie for free. SidebarInset must stay a direct * sibling of Sidebar. */ export function App1Sidebar() { const { setOpenMobile } = useSidebar() return ( setOpenMobile(false)} > ShadcnStore {/* Presence fills what would otherwise be a column of dead space under seven nav links. */} Your team {app1Team.map(member => ( setOpenMobile(false)} />}> {member.initials} {member.online ? ( ) : null} {member.name} {member.role} ))} {app1User.initials} {app1User.name} {app1User.email} ) } export default App1Sidebar 54:T1625,import type { LucideIcon } from 'lucide-react' import { BarChart3, Calendar, FileText, Home, MessageSquare, Settings, Users } from 'lucide-react' import type { ChartConfig } from '@/components/ui/chart' /** * Portraits are served from the ShadcnStore CDN rather than a third-party avatar API, so a * shipped block never depends on someone else's host staying up. Every Avatar keeps an initials * fallback for when the image is blocked or offline. */ const CDN = 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing' export interface App1Person { name: string initials: string avatar: string } export const app1People = { jordan: { name: 'Jordan Diaz', initials: 'JD', avatar: `${CDN}/robert-chen.400w.e979c2.avif` }, john: { name: 'John Doe', initials: 'JD', avatar: `${CDN}/david-kim.400w.a3611d.avif` }, sarah: { name: 'Sarah Kim', initials: 'SK', avatar: `${CDN}/alice-brian.400w.fa3d8c.avif` }, mike: { name: 'Mike Taylor', initials: 'MT', avatar: `${CDN}/emily-chen.400w.8fb3cf.avif` }, lisa: { name: 'Lisa Park', initials: 'LP', avatar: `${CDN}/jennifer-park.400w.d30794.avif` }, ravi: { name: 'Ravi Singh', initials: 'RS', avatar: `${CDN}/john-david.400w.fde889.avif` }, emily: { name: 'Emily Chen', initials: 'EC', avatar: `${CDN}/michael-rodriguez.400w.d8234b.avif` }, alex: { name: 'Alex Moore', initials: 'AM', avatar: `${CDN}/susan-d-lunsford.400w.a3e5c2.avif` }, ryan: { name: 'Ryan Wilson', initials: 'RW', avatar: `${CDN}/keneth-conroy.400w.c4ea19.avif` }, priya: { name: 'Priya Shah', initials: 'PS', avatar: `${CDN}/sarah-johnson.400w.01a6ba.avif` }, } satisfies Record export interface App1NavItem { name: string href: string icon: LucideIcon current: boolean } export interface App1Project { id: string name: string description: string progress: number status: 'In progress' | 'Planning' | 'In review' team: App1Person[] dueDate: string } export interface App1ActivityItem { id: string person: App1Person action: string time: string } export const app1User = { ...app1People.jordan, email: 'jordan@shadcnstore.com' } /** Five teammates, so the sidebar carries presence instead of a column of dead space. */ export const app1Team: (App1Person & { role: string; online: boolean })[] = [ { ...app1People.sarah, role: 'Design', online: true }, { ...app1People.john, role: 'Engineering', online: true }, { ...app1People.mike, role: 'Engineering', online: false }, { ...app1People.lisa, role: 'Product', online: true }, { ...app1People.ravi, role: 'Data', online: false }, ] export const app1Nav: App1NavItem[] = [ { name: 'Dashboard', href: '#dashboard', icon: Home, current: true }, { name: 'Analytics', href: '#analytics', icon: BarChart3, current: false }, { name: 'Team', href: '#team', icon: Users, current: false }, { name: 'Messages', href: '#messages', icon: MessageSquare, current: false }, { name: 'Documents', href: '#documents', icon: FileText, current: false }, { name: 'Calendar', href: '#calendar', icon: Calendar, current: false }, { name: 'Settings', href: '#settings', icon: Settings, current: false }, ] /** Tasks opened against tasks closed, so the chart shows a backlog trend rather than one flat line. */ export const app1Chart = [ { week: 'Wk 1', opened: 34, completed: 28 }, { week: 'Wk 2', opened: 41, completed: 33 }, { week: 'Wk 3', opened: 29, completed: 37 }, { week: 'Wk 4', opened: 45, completed: 39 }, { week: 'Wk 5', opened: 38, completed: 44 }, { week: 'Wk 6', opened: 52, completed: 46 }, { week: 'Wk 7', opened: 47, completed: 51 }, { week: 'Wk 8', opened: 43, completed: 55 }, ] export const app1ChartConfig = { // Semantic tokens, not chart-N: the neutral palette's chart ramp has too little contrast to tell // two series apart, and these two flip correctly in both themes. completed: { label: 'Completed', color: 'var(--foreground)' }, opened: { label: 'Opened', color: 'var(--muted-foreground)' }, } satisfies ChartConfig export const app1Projects: App1Project[] = [ { id: 'p-1', name: 'Mobile app redesign', description: 'Complete UI and UX overhaul', progress: 75, status: 'In progress', team: [app1People.jordan, app1People.alex, app1People.sarah], dueDate: 'Dec 15', }, { id: 'p-2', name: 'Dashboard analytics', description: 'New reporting features', progress: 45, status: 'Planning', team: [app1People.ryan, app1People.mike], dueDate: 'Jan 20', }, { id: 'p-3', name: 'API integration', description: 'Third-party services', progress: 90, status: 'In review', team: [app1People.john, app1People.lisa, app1People.priya], dueDate: 'Dec 10', }, { id: 'p-4', name: 'Billing migration', description: 'Move invoices to the new provider', progress: 30, status: 'In progress', team: [app1People.emily, app1People.mike], dueDate: 'Feb 2', }, ] export const app1Activity: App1ActivityItem[] = [ { id: 'a-1', person: app1People.john, action: 'completed task "User authentication"', time: '2 hours ago' }, { id: 'a-2', person: app1People.sarah, action: 'commented on "Mobile design"', time: '4 hours ago' }, { id: 'a-3', person: app1People.mike, action: 'uploaded 3 files to the project', time: '6 hours ago' }, { id: 'a-4', person: app1People.lisa, action: 'updated the project timeline', time: '8 hours ago' }, { id: 'a-5', person: app1People.ravi, action: 'created the project "Website revamp"', time: '10 hours ago' }, { id: 'a-6', person: app1People.emily, action: 'assigned a task to Mike Taylor', time: '12 hours ago' }, ] 4f:["$","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"}]]}]}],["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","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":"recharts"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["avatar","badge","button","card","chart","progress","sidebar"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/application/apps/app-1/page.tsx","content":"import { App1 } from \"@/components/blocks/application/apps/app-1/components/app-1\"\n\nexport default function Page() {\n return (\n

\n \n

\n )\n}\n","type":"registry:page","target":"app/app-1/page.tsx"},{"path":"storage/app/registry-sources/application/apps/app-1/app-1.tsx","content":"$52","type":"registry:component","target":"@components/app-1.tsx"},{"path":"storage/app/registry-sources/application/apps/app-1/app-1-sidebar.tsx","content":"$53","type":"registry:component","target":"@components/app-1-sidebar.tsx"},{"path":"storage/app/registry-sources/application/apps/app-1/app-1-data.ts","content":"$54","type":"registry:lib","target":"@components/data/app-1-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]