prjct-cli 0.13.3 → 0.15.1

package/packages/web/components/CommandBar/CommandBar.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import {
+  WORKFLOW_COMMANDS,
+  COMMAND_GROUPS,
+  SYNC_COMMAND,
+} from '@/lib/commands'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface CommandBarProps {
+  isConnected: boolean
+  onCommand: (cmd: string) => void
+}
+
+export function CommandBar({ isConnected, onCommand }: CommandBarProps) {
+  return (
+    <div className="flex items-center gap-0.5 px-2 py-1">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={() => onCommand(SYNC_COMMAND.cmd)}
+            disabled={!isConnected}
+            className={cn(
+              'p-1.5 rounded transition-colors',
+              isConnected
+                ? 'text-orange-500 hover:bg-orange-500/10'
+                : 'text-muted-foreground/50 cursor-not-allowed'
+            )}
+          >
+            <SYNC_COMMAND.icon className="w-4 h-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{SYNC_COMMAND.tip}</TooltipContent>
+      </Tooltip>
+
+      <div className="w-px h-4 bg-border mx-1" />
+
+      {COMMAND_GROUPS.map((group, groupIdx) => (
+        <div key={group} className="flex items-center">
+          {WORKFLOW_COMMANDS.filter(c => c.group === group).map(({ cmd, icon: Icon, tip }) => (
+            <Tooltip key={cmd}>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => onCommand(cmd)}
+                  disabled={!isConnected}
+                  className={cn(
+                    'p-1.5 rounded transition-colors',
+                    isConnected
+                      ? 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                      : 'text-muted-foreground/50 cursor-not-allowed'
+                  )}
+                >
+                  <Icon className="w-3.5 h-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{tip}</TooltipContent>
+            </Tooltip>
+          ))}
+          {groupIdx < COMMAND_GROUPS.length - 1 && (
+            <div className="w-px h-4 bg-border mx-0.5" />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/packages/web/components/CommandBar/index.ts

@@ -0,0 +1 @@
+export { CommandBar } from './CommandBar'

package/packages/web/components/DashboardContent/DashboardContent.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { SessionsChart } from '@/components/charts/SessionsChart'
 import { Button } from '@/components/ui/button'
-import { ProjectAvatar } from '@/components/ProjectAvatar'
+import { ProgressRing } from '@/components/ProgressRing'
 import { TechStackBadges } from '@/components/TechStackBadges'
 import { formatRelativeTime, formatPath } from '@/lib/format'
 import {
@@ -16,7 +16,9 @@ import {
   Lightbulb,
   ListTodo,
   Zap,
-  FolderGit2
+  FolderGit2,
+  Play,
+  FileText
 } from 'lucide-react'
 import {
   DropdownMenu,
@@ -36,6 +38,14 @@ import {
 } from '@/components/ui/alert-dialog'
 import { deleteProject } from '@/lib/actions/projects'
 
+// Traffic light colors based on completion rate
+type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
+function getCompletionColor(rate: number): AccentColor {
+  if (rate >= 75) return 'success'
+  if (rate >= 25) return 'warning'
+  return 'destructive'
+}
+
 export interface Project {
   id: string
   name: string
@@ -46,6 +56,7 @@ export interface Project {
   lastActivity?: string | null
   ideasCount?: number
   nextTasksCount?: number
+  shippedCount?: number
   techStack?: string[]
   iconPath?: string | null
   version?: string
@@ -161,13 +172,20 @@ interface ProjectCardProps {
 function ProjectCard({ project, onDeleteClick }: ProjectCardProps) {
   const hasStats = project.currentTask || project.nextTasksCount || project.ideasCount || project.lastActivity
 
+  // Calculate completion rate
+  const shipped = project.shippedCount ?? 0
+  const pending = project.nextTasksCount ?? 0
+  const total = shipped + pending
+  const completionRate = total > 0 ? Math.round((shipped / total) * 100) : 0
+  const completionColor = getCompletionColor(completionRate)
+
   return (
     <div className="group relative bg-card border border-border rounded-lg overflow-hidden hover:border-primary/50 active:scale-[0.99] transition-all">
       {project.hasActiveSession && <div className="absolute top-0 left-0 right-0 h-0.5 bg-green-500" />}
 
       <Link href={`/project/${project.id}`} className="block p-3 sm:p-4">
         <div className="flex items-start gap-3">
-          <ProjectAvatar projectId={project.id} name={project.name} iconPath={project.iconPath} size="lg" />
+          <ProgressRing value={completionRate} size="md" accentColor={completionColor} className="shrink-0" />
 
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
@@ -180,7 +198,7 @@ function ProjectCard({ project, onDeleteClick }: ProjectCardProps) {
               )}
             </div>
             {project.repoPath && (
-              <p className="text-[11px] sm:text-xs text-muted-foreground truncate mt-0.5 flex items-center gap-1">
+              <p className="text-xs text-muted-foreground truncate mt-0.5 flex items-center gap-1">
                 <FolderGit2 className="w-3 h-3 shrink-0" />
                 {formatPath(project.repoPath)}
               </p>
@@ -200,6 +218,18 @@ function ProjectCard({ project, onDeleteClick }: ProjectCardProps) {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
+              <DropdownMenuItem asChild className="min-h-[44px] sm:min-h-0">
+                <Link href={`/project/${project.id}/code`}>
+                  <Play className="w-4 h-4 mr-2" />
+                  Start working
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild className="min-h-[44px] sm:min-h-0">
+                <Link href={`/project/${project.id}/reports`}>
+                  <FileText className="w-4 h-4 mr-2" />
+                  Reports
+                </Link>
+              </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-destructive focus:text-destructive min-h-[44px] sm:min-h-0"
                 onClick={(e: React.MouseEvent) => onDeleteClick(project, e)}
@@ -221,7 +251,7 @@ function ProjectCard({ project, onDeleteClick }: ProjectCardProps) {
         )}
 
         {hasStats && (
-          <div className="mt-3 flex flex-wrap items-center gap-2 sm:gap-3 text-[11px] sm:text-xs text-muted-foreground">
+          <div className="mt-3 flex flex-wrap items-center gap-2 sm:gap-3 text-xs text-muted-foreground">
             {(project.nextTasksCount ?? 0) > 0 && (
               <div className="flex items-center gap-1">
                 <ListTodo className="w-3.5 h-3.5" />

package/packages/web/components/DateGroup/DateGroup.tsx

@@ -5,7 +5,7 @@ import type { DateGroupProps } from './DateGroup.types'
 export function DateGroup({ dateKey, events }: DateGroupProps) {
   return (
     <div>
-      <p className="text-[11px] sm:text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-2">
+      <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
         {formatTimelineDate(dateKey + 'T00:00:00')}
       </p>
       <div className="space-y-1">

package/packages/web/components/EmptyState/EmptyState.tsx

@@ -1,7 +1,8 @@
 'use client'
 
+import Link from 'next/link'
 import { cn } from '@/lib/utils'
-import { Copy } from 'lucide-react'
+import { ArrowRight } from 'lucide-react'
 import type { EmptyStateProps } from './EmptyState.types'
 
 export function EmptyState({
@@ -9,28 +10,34 @@ export function EmptyState({
   title,
   description,
   command,
+  href,
   className,
   compact = false,
 }: EmptyStateProps) {
-  const handleCopy = () => {
-    if (command) {
-      navigator.clipboard.writeText(command)
-    }
-  }
+  // Command button content
+  const CommandButton = href ? (
+    <Link
+      href={href}
+      className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-emerald-500/10 text-xs font-mono text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors group border border-emerald-500/20"
+    >
+      {command}
+      <ArrowRight className="h-3 w-3 group-hover:translate-x-0.5 transition-transform" />
+    </Link>
+  ) : command ? (
+    <button
+      onClick={() => navigator.clipboard.writeText(command)}
+      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs font-mono hover:bg-muted/80"
+    >
+      {command}
+    </button>
+  ) : null
 
   if (compact) {
     return (
       <div className={cn('flex items-center gap-2 text-muted-foreground', className)}>
         <Icon className="h-4 w-4" />
         <span className="text-sm">{title}</span>
-        {command && (
-          <button
-            onClick={handleCopy}
-            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs font-mono hover:bg-muted/80"
-          >
-            {command}
-          </button>
-        )}
+        {CommandButton}
       </div>
     )
   }
@@ -45,13 +52,24 @@ export function EmptyState({
         <p className="text-xs text-muted-foreground/70 mt-1">{description}</p>
       )}
       {command && (
-        <button
-          onClick={handleCopy}
-          className="mt-2 inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-muted text-xs font-mono text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors group"
-        >
-          {command}
-          <Copy className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
-        </button>
+        <div className="mt-2">
+          {href ? (
+            <Link
+              href={href}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-emerald-500/10 text-xs font-mono text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors group border border-emerald-500/20"
+            >
+              {command}
+              <ArrowRight className="h-3 w-3 group-hover:translate-x-0.5 transition-transform" />
+            </Link>
+          ) : (
+            <button
+              onClick={() => navigator.clipboard.writeText(command)}
+              className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-muted text-xs font-mono text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors"
+            >
+              {command}
+            </button>
+          )}
+        </div>
       )}
     </div>
   )

package/packages/web/components/EmptyState/EmptyState.types.ts

@@ -5,6 +5,7 @@ export interface EmptyStateProps {
   title: string
   description?: string
   command?: string
+  href?: string
   className?: string
   compact?: boolean
 }

package/packages/web/components/EventRow/EventRow.tsx

@@ -17,7 +17,7 @@ export function EventRow({ event }: EventRowProps) {
   return (
     <div className="flex items-center gap-2 sm:gap-3 py-2 sm:py-1.5 px-2 -mx-2 rounded-md hover:bg-muted/50 active:bg-muted/70 transition-colors group">
       {event.ts && (
-        <span className="hidden sm:block text-[10px] text-muted-foreground w-14 shrink-0 tabular-nums">
+        <span className="hidden sm:block text-xs text-muted-foreground w-14 shrink-0 tabular-nums">
           {formatTime(event.ts)}
         </span>
       )}
@@ -29,18 +29,18 @@ export function EventRow({ event }: EventRowProps) {
           {getEventLabel(event)}
         </span>
         {event.ts && (
-          <span className="sm:hidden text-[10px] text-muted-foreground">
+          <span className="sm:hidden text-xs text-muted-foreground">
             {formatTime(event.ts)}
           </span>
         )}
       </div>
 
-      <span className="text-[9px] font-bold tracking-wider text-muted-foreground shrink-0">
+      <span className="text-xs font-bold tracking-wider text-muted-foreground shrink-0">
         {getEventBadge(event.type)}
       </span>
 
       {duration && (
-        <span className="text-[10px] text-muted-foreground shrink-0">
+        <span className="text-xs text-muted-foreground shrink-0">
           {duration}
         </span>
       )}

package/packages/web/components/EventRow/EventRow.utils.ts

@@ -17,9 +17,9 @@ export function getEventIconName(type: string): EventIconName {
 
 export function getEventColor(type: string): string {
   const colorMap: Record<string, string> = {
-    task_complete: 'text-emerald-500',
-    task_start: 'text-amber-500',
-    feature_ship: 'text-blue-500',
+    task_complete: 'text-muted-foreground',
+    task_start: 'text-muted-foreground',
+    feature_ship: 'text-muted-foreground',
     sync: 'text-muted-foreground',
   }
   return colorMap[type] ?? 'text-muted-foreground'

package/packages/web/components/HeroSection/HeroSection.tsx

@@ -1,53 +1,90 @@
 'use client'
 
+import Link from 'next/link'
+import { Play, FileText, Flame } from 'lucide-react'
 import { ProgressRing } from '@/components/ProgressRing'
-import { BackLink } from '@/components/BackLink'
 import { TasksCounter } from '@/components/TasksCounter'
-import { VelocityBadge } from '@/components/VelocityBadge'
 import { InsightMessage } from '@/components/InsightMessage'
 import { WeeklySparkline } from '@/components/WeeklySparkline'
 import { HealthGradientBackground } from '@/components/HealthGradientBackground'
 import { useCountUp, useWeeklyActivity } from './hooks'
-import { getHealthColor } from './HeroSection.utils'
+import { getCompletionColor } from './HeroSection.utils'
 import type { HeroProps } from './HeroSection.types'
 
 export function HeroSection({
   projectId,
   projectName,
-  tasksCompleted,
-  healthScore,
-  velocityChange,
+  projectVersion,
+  totalShips,
+  completionRate,
+  streak,
   insightMessage,
   timeline = [],
 }: HeroProps) {
-  const animatedCount = useCountUp(tasksCompleted)
+  const animatedCount = useCountUp(totalShips)
   const weeklyData = useWeeklyActivity(timeline)
-  const healthColor = getHealthColor(healthScore)
+  const completionColor = getCompletionColor(completionRate)
 
   return (
     <div className="relative mb-6 md:mb-8">
-      <HealthGradientBackground score={healthScore} />
-      <BackLink projectId={projectId} projectName={projectName} className="md:hidden mb-4" />
+      <HealthGradientBackground score={completionRate} />
+
+      <div className="relative z-10 flex items-center justify-between my-16">
+        <div className="flex items-baseline gap-3">
+          <h1 className="text-5xl md:text-6xl font-bold tracking-tight">{projectName}</h1>
+          {projectVersion && (
+            <span className="text-lg md:text-xl font-mono text-muted-foreground">v{projectVersion}</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Reports Link */}
+          <Link
+            href={`/project/${projectId}/reports`}
+            className="inline-flex items-center gap-2 px-4 py-3 bg-muted hover:bg-muted/80 text-foreground font-medium rounded-xl transition-all duration-200 hover:scale-105"
+          >
+            <FileText className="h-5 w-5" />
+            <span>Reports</span>
+          </Link>
+
+          {/* Start Working CTA */}
+          <Link
+            href={`/project/${projectId}/code`}
+            className="group relative inline-flex items-center gap-2 px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-xl shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transition-all duration-200 hover:scale-105"
+          >
+            <Play className="h-5 w-5 fill-current" />
+            <span>Start Working</span>
+            <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-emerald-400 to-emerald-600 opacity-0 group-hover:opacity-100 transition-opacity -z-10" />
+          </Link>
+        </div>
+      </div>
 
       <div className="relative flex flex-col md:flex-row md:items-start md:justify-between gap-4 md:gap-0">
         <div className="flex items-center md:items-start gap-4 md:gap-6">
           <ProgressRing
-            value={healthScore}
+            value={completionRate}
             size="xl"
-            accentColor={healthColor}
+            accentColor={completionColor}
             className="shrink-0"
           />
 
           <div className="flex-1 min-w-0">
             <TasksCounter count={animatedCount} />
-            <VelocityBadge change={velocityChange} />
+            {/* Streak badge */}
+            {streak > 0 && (
+              <div className="flex items-center gap-1.5 mt-1">
+                <Flame className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium text-muted-foreground">
+                  {streak} day streak
+                </span>
+              </div>
+            )}
             <InsightMessage message={insightMessage} />
           </div>
         </div>
 
         <div className="flex flex-col items-start md:items-end gap-3 md:gap-4">
-          <BackLink projectId={projectId} projectName={projectName} className="hidden md:flex" />
-          <WeeklySparkline data={weeklyData} />
+          <WeeklySparkline data={weeklyData} size="lg" />
         </div>
       </div>
     </div>

package/packages/web/components/HeroSection/HeroSection.types.ts

@@ -5,10 +5,10 @@ export type { TimelineEvent }
 export interface HeroProps {
   projectId: string
   projectName: string
-  tasksCompleted: number
-  healthScore: number
-  velocity: number
-  velocityChange: number
+  projectVersion?: string | null
+  totalShips: number
+  completionRate: number
+  streak: number
   insightMessage: string
   timeline?: TimelineEvent[]
 }

package/packages/web/components/HeroSection/HeroSection.utils.ts

@@ -1,7 +1,11 @@
 export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
 
-export function getHealthColor(score: number): AccentColor {
-  if (score >= 70) return 'success'
-  if (score >= 40) return 'warning'
+// Completion rate color: traffic light based on project progress
+// Green >= 75% (almost done!)
+// Yellow 25-74% (good progress)
+// Red < 25% (just getting started)
+export function getCompletionColor(rate: number): AccentColor {
+  if (rate >= 75) return 'success'
+  if (rate >= 25) return 'warning'
   return 'destructive'
 }

package/packages/web/components/IdeasCard/IdeasCard.tsx

@@ -1,48 +1,115 @@
-import { BentoCard } from '@/components/BentoCard'
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
 import { EmptyState } from '@/components/EmptyState'
-import { Lightbulb } from 'lucide-react'
+import { ExpandButton } from '@/components/ExpandButton'
+import { Lightbulb, Sparkles, Rocket, X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { IdeasCardProps } from './IdeasCard.types'
 
-export function IdeasCard({ ideas, className }: IdeasCardProps) {
-  const displayIdeas = ideas.slice(0, 4)
+const COLLAPSED_LIMIT = 8
+const EXPANDED_LIMIT = 30
+
+export function IdeasCard({ ideas, codeHref, className }: IdeasCardProps) {
+  const [expanded, setExpanded] = useState(false)
+  const limit = expanded ? EXPANDED_LIMIT : COLLAPSED_LIMIT
+  const displayIdeas = ideas.slice(0, limit)
   const highImpactCount = ideas.filter(i => i.impact === 'HIGH').length
+  const hasMore = ideas.length > limit
 
   return (
-    <BentoCard
-      size="1x1"
-      title="Ideas"
-      icon={Lightbulb}
-      count={ideas.length}
-      className={className}
-    >
+    <div className={cn(
+      'relative overflow-hidden rounded-xl border bg-card p-4',
+      className
+    )}>
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Lightbulb className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            Ideas
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          {highImpactCount > 0 && (
+            <span className="text-xs font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+              {highImpactCount} high impact
+            </span>
+          )}
+          <span className="text-xs font-medium text-muted-foreground tabular-nums">
+            {ideas.length}
+          </span>
+        </div>
+      </div>
+
       {ideas.length === 0 ? (
         <EmptyState
           icon={Lightbulb}
           title="No ideas yet"
           command="/p:idea"
+          href={codeHref}
           compact
         />
       ) : (
-        <div className="space-y-1.5">
-          {displayIdeas.map((idea, i) => (
-            <div key={i} className="flex items-start gap-2">
-              <Lightbulb
-                className={cn(
-                  'h-3 w-3 mt-0.5 shrink-0',
-                  idea.impact === 'HIGH' ? 'text-amber-500' : 'text-muted-foreground'
+        <div className="space-y-1">
+          {displayIdeas.map((idea, i) => {
+            const featureHref = codeHref
+              ? `${codeHref}?cmd=${encodeURIComponent(`p. feature "${idea.title}"`)}`
+              : undefined
+            const deleteHref = codeHref
+              ? `${codeHref}?cmd=${encodeURIComponent(`p. idea remove ${i + 1}`)}`
+              : undefined
+
+            return (
+              <div
+                key={i}
+                className="flex items-start gap-2 py-1.5 group hover:bg-muted/50 rounded px-1 -mx-1"
+              >
+                {idea.impact === 'HIGH' ? (
+                  <Sparkles className="h-3 w-3 mt-0.5 shrink-0 text-foreground" />
+                ) : (
+                  <Lightbulb className="h-3 w-3 mt-0.5 shrink-0 text-muted-foreground" />
                 )}
-              />
-              <p className="text-sm truncate">{idea.title}</p>
-            </div>
-          ))}
-          {highImpactCount > 0 && (
-            <p className="text-[10px] text-amber-600 dark:text-amber-400 mt-2 pl-5 font-medium">
-              {highImpactCount} high impact
-            </p>
+                <p className={cn(
+                  'text-sm flex-1 min-w-0',
+                  idea.impact === 'HIGH' && 'font-medium'
+                )}>
+                  {idea.title}
+                </p>
+                {/* Always visible action buttons */}
+                <div className="flex items-center gap-1 shrink-0">
+                  {featureHref && (
+                    <Link
+                      href={featureHref}
+                      className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                      title="Convert to feature"
+                    >
+                      <Rocket className="h-3.5 w-3.5" />
+                    </Link>
+                  )}
+                  {deleteHref && (
+                    <Link
+                      href={deleteHref}
+                      className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                      title="Delete idea"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Link>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+          {(hasMore || expanded) && ideas.length > COLLAPSED_LIMIT && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={ideas.length}
+              collapsedLimit={COLLAPSED_LIMIT}
+              onToggle={() => setExpanded(!expanded)}
+            />
           )}
         </div>
       )}
-    </BentoCard>
+    </div>
   )
 }

package/packages/web/components/IdeasCard/IdeasCard.types.ts

@@ -5,5 +5,6 @@ export interface Idea {
 
 export interface IdeasCardProps {
   ideas: Idea[]
+  codeHref?: string
   className?: string
 }

package/packages/web/components/MasonryGrid/MasonryGrid.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils'
+
+interface MasonryGridProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function MasonryGrid({ children, className }: MasonryGridProps) {
+  return (
+    <div className={cn(
+      'columns-1 sm:columns-2 xl:columns-3 gap-4 max-w-full overflow-x-hidden',
+      '[&>*]:mb-4 [&>*]:break-inside-avoid',
+      className
+    )}>
+      {children}
+    </div>
+  )
+}

package/packages/web/components/MasonryGrid/index.ts

@@ -0,0 +1 @@
+export { MasonryGrid } from './MasonryGrid'