@papercraneai/cli 1.6.0-beta.2 → 1.6.1

package/bin/papercrane.js

@@ -581,6 +581,7 @@ import { useEffect, useState } from 'react'
 import * as actions from './action'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'
+import { DashboardGrid } from '@/components/dashboard-grid'
 import { BarChart, Bar, XAxis, YAxis } from 'recharts'
 
 // Use semantic chart colors: var(--chart-1) through var(--chart-5)
@@ -603,22 +604,28 @@ export default function MyDashboard() {
   return (
     <div className="min-h-screen p-6 bg-background text-foreground">
       <h1 className="text-2xl font-bold mb-6">My Dashboard</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Chart Title</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ChartContainer config={chartConfig} className="h-[300px] w-full">
-            <BarChart data={data}>
-              <XAxis dataKey="name" stroke="var(--muted-foreground)" />
-              <YAxis stroke="var(--muted-foreground)" />
-              <ChartTooltip content={<ChartTooltipContent />} />
-              <Bar dataKey="value" fill="var(--color-value)" />
-            </BarChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
+      <DashboardGrid cols={4} rowHeight={140} gap={16}>
+        <Card id="metric-card" className="col-start-1 col-span-2 row-start-1 row-span-1 bg-card border-border">
+          <CardHeader><CardTitle className="text-muted-foreground">Metric</CardTitle></CardHeader>
+          <CardContent>
+            <p className="text-2xl font-bold">1,234</p>
+            <span className="text-green-500 text-sm">↑ 12%</span>
+          </CardContent>
+        </Card>
+        <Card id="chart-card" className="col-start-1 col-span-4 row-start-2 row-span-2 bg-card border-border">
+          <CardHeader><CardTitle className="text-muted-foreground">Chart Title</CardTitle></CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig} className="h-[300px] w-full">
+              <BarChart data={data}>
+                <XAxis dataKey="name" stroke="var(--muted-foreground)" />
+                <YAxis stroke="var(--muted-foreground)" />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="value" fill="var(--color-value)" />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </DashboardGrid>
     </div>
   )
 }`)}
@@ -636,6 +643,18 @@ Use these Tailwind classes for theme-aware colors:
   ${chalk.green('Axis/Labels:')}   var(--muted-foreground) for XAxis/YAxis stroke
 `);
 
+    console.log(chalk.bold('DASHBOARD GRID LAYOUT'));
+    console.log(chalk.dim('─'.repeat(60)));
+    console.log(`
+  ${chalk.green('✅')} Wrap dashboard widgets in ${chalk.cyan('<DashboardGrid cols={4} rowHeight={140} gap={16}>')}
+  ${chalk.green('✅')} Give each child a unique ${chalk.cyan('id')} attribute (e.g. id="revenue-chart")
+  ${chalk.green('✅')} Add grid placement classes: ${chalk.cyan('col-start-N col-span-N row-start-N row-span-N')}
+  ${chalk.green('✅')} Grid is 4 columns. col-start: 1-4, col-span: 1-4, row-start: 1+, row-span: 1+
+  ${chalk.red('❌')} Do NOT use responsive grid classes (grid-cols-2 md:grid-cols-4)
+  ${chalk.red('❌')} Do NOT use sm:/md:/lg: breakpoint prefixes on grid placement classes
+  ${chalk.dim('   Header/title sections above DashboardGrid are fine as plain divs')}
+`);
+
     console.log(chalk.bold('AVAILABLE COMPONENTS'));
     console.log(chalk.dim('─'.repeat(60)));
     console.log(`
@@ -643,6 +662,9 @@ Use these Tailwind classes for theme-aware colors:
     Card, CardHeader, CardTitle, CardContent, CardDescription
     Button, Input, Select, Table, Badge, Tabs
 
+  ${chalk.green('Layout:')}
+    DashboardGrid (from @/components/dashboard-grid)
+
   ${chalk.green('Chart Components:')}
     ChartContainer, ChartTooltip, ChartTooltipContent (from @/components/ui/chart)
     BarChart, LineChart, AreaChart, PieChart (from recharts)

package/components/dashboard-grid.tsx

@@ -24,7 +24,7 @@ export function DashboardGrid(props: DashboardGridProps) {
     async function loadPlugin() {
       try {
         const pkg = "@papercrane/" + "dashboard-grid/plugin"
-        const mod = await import(pkg)
+        const mod = await import(/* turbopackIgnore: true */ pkg)
         if (mod.createPlugin) {
           const plugin = mod.createPlugin()
           pluginGrid = plugin.DashboardGrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papercraneai/cli",
-  "version": "1.6.0-beta.2",
+  "version": "1.6.1",
   "description": "CLI tool for managing OAuth credentials for LLM integrations",
   "main": "index.js",
   "type": "module",