@papercraneai/cli 1.6.0 → 1.7.0-beta.0

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}>')} — required for layout editing and data inspection
+  ${chalk.green('✅')} Give each child a unique ${chalk.cyan('id')} attribute (e.g. id="revenue-chart") — required for drag, resize, delete, and inspect
+  ${chalk.green('✅')} Add grid placement classes: ${chalk.cyan('col-start-N col-span-N row-start-N row-span-N')}
+  ${chalk.green('✅')} Default grid is 4 columns. col-start: 1-4, col-span: 1-4, row-start: 1+, row-span: 1+ (users can expand beyond 4 via layout editor)
+  ${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,10 +662,17 @@ 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)
     XAxis, YAxis, Bar, Line, Area, Pie, Cell
+
+  ${chalk.green('Map Components:')}
+    ComposableMap, Geographies, Geography, Marker, ZoomableGroup (from react-simple-maps)
+    GeoJSON URL: https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json
 `);
 
     console.log(chalk.bold('QUICK START'));

package/components/command-listener.tsx

@@ -15,8 +15,7 @@ export function CommandListener() {
 
     async function init() {
       try {
-        const pkg = "@papercrane/" + "dashboard-grid/plugin"
-        const mod = await import(/* turbopackIgnore: true */ pkg)
+        const mod = await import("@papercrane/dashboard-grid/plugin")
         if (!cancelled && mod.createCommandHandler) {
           handlerRef.current = mod.createCommandHandler()
         }

package/components/dashboard-grid.tsx

@@ -10,7 +10,8 @@ interface DashboardGridProps {
   className?: string
 }
 
-// Try to load the enterprise DashboardGrid from the plugin
+// Load the DashboardGrid plugin for edit mode, resize, delete, and inspect features.
+// Falls back to a plain CSS grid when the plugin is not installed.
 let pluginGrid: React.ComponentType<DashboardGridProps> | null = null
 let pluginLoaded = false
 
@@ -23,8 +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("@papercrane/dashboard-grid/plugin")
         if (mod.createPlugin) {
           const plugin = mod.createPlugin()
           pluginGrid = plugin.DashboardGrid

package/lib/dev-server.js

@@ -332,7 +332,7 @@ export async function generateScaffolding(workspaceDir) {
   const nextConfigPath = path.join(workspaceDir, 'next.config.mjs');
   const nextConfig = `/** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ['@papercraneai/cli'],
+  transpilePackages: ['@papercraneai/cli', '@papercrane/dashboard-grid'],
   turbopack: {
     root: ${JSON.stringify(workspaceDir)},
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papercraneai/cli",
-  "version": "1.6.0",
+  "version": "1.7.0-beta.0",
   "description": "CLI tool for managing OAuth credentials for LLM integrations",
   "main": "index.js",
   "type": "module",
@@ -93,5 +93,11 @@
     "typescript": "^5",
     "vaul": "^1.1.2",
     "zod": "^4.1.13"
+  },
+  "overrides": {
+    "react-simple-maps": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    }
   }
 }