@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

package/src/views/canvas-app.tsx

@@ -1,839 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import {
-  ChevronDown, ChevronRight, FolderOpen, LayoutDashboard, Menu, Table2
-} from 'lucide-react';
-
-import {
-  Bar,
-  BarChart,
-  Cell,
-  Legend,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis
-} from 'recharts';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { MermaidDiagram } from '../components/mermaid-diagram';
-
-/*
- * ─────────────────────────────────────────────────────────────
- * Mermaid generators (ported from mermaid-generator.js)
- * ─────────────────────────────────────────────────────────────
- */
-
-function generateLayoutDiagram(app: any): string {
-  if (!app?.layout) return '';
-  const { layout } = app;
-  let d = 'graph LR\n';
-  const menuArr: any[] = Array.isArray(layout.menu) ? layout.menu : Object.values(layout.menu ?? {});
-  const widgetsArr: any[] = Array.isArray(layout.widgets) ? layout.widgets : Object.values(layout.widgets ?? {});
-
-  d += `  App["${layout.title || 'App'}"]\n`;
-  menuArr.forEach((item: any, i: number) => {
-    const mid = `Menu_${i}`;
-
-    d += `  subgraph cluster_${mid}\n    direction TB\n    ${mid}["${item.title || item.id}"]\n`;
-    item.views?.forEach((v: any, j: number) => {
-      const vid = `View_${i}_${j}`;
-
-      d += `    ${vid}["${v.title || v.id} (${v.type})"]\n    ${mid} --> ${vid}\n`;
-    });
-    d += `  end\n  App --> ${mid}\n`;
-  });
-  if (widgetsArr.length > 0) {
-    d += `  subgraph cluster_Widgets\n    direction TB\n    Widgets[Widgets]\n`;
-    widgetsArr.forEach((w: any, i: number) => {
-      d += `    Widget_${i}["${w.title || w.type}"]\n    Widgets --> Widget_${i}\n`;
-    });
-    d += `  end\n  App -.-> Widgets\n`;
-  }
-
-  return d;
-}
-
-function generateDataStructureDiagram(app: any): string {
-  if (!app?.data_sources) return '';
-
-  const dsArr: any[] = Array.isArray(app.data_sources) ? app.data_sources : Object.values(app.data_sources);
-  let d = 'classDiagram\n  direction TB\n';
-  const idMap: Record<string, string> = {};
-
-  dsArr.forEach((ds: any) => {
-    const safe = (ds.name || ds.slug || 'DS').replace(/[^a-zA-Z0-9_]/g, '_');
-    const key = ds.id || ds.slug || ds.name;
-
-    if (key) idMap[key] = safe;
-  });
-  dsArr.forEach((ds: any) => {
-    const safe = (ds.name || ds.slug || 'DS').replace(/[^a-zA-Z0-9_]/g, '_');
-    const fieldsArr: any[] = Array.isArray(ds.fields) ? ds.fields : Object.values(ds.fields ?? {});
-
-    d += `  class ${safe} {\n`;
-    fieldsArr.forEach((f: any) => {
-      d += `    +${f.type || 'string'} ${f.name || f.slug}\n`;
-    });
-    d += '  }\n';
-    fieldsArr.forEach((f: any) => {
-      if (f.type === 'field-relation' && f.relationDataSourceId) {
-        const target = idMap[f.relationDataSourceId];
-
-        if (target) d += `  ${safe} --> ${target} : ${f.name || f.slug}\n`;
-      }
-    });
-  });
-
-  return d;
-}
-
-/*
- * ─────────────────────────────────────────────────────────────
- * AppSidebar
- * ─────────────────────────────────────────────────────────────
- */
-
-function AppSidebar({
-  data, title, onMenuClick
-}: {
-  data: any[];
-  title?: string;
-  onMenuClick: (id: string) => void;
-}) {
-  const [collapsed, setCollapsed] = useState(false);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-
-  const toggleFolder = (id: string) => {
-    if (collapsed) {
-      setCollapsed(false);
-      setExpanded(prev => new Set([...prev, id]));
-
-      return;
-    }
-    setExpanded((prev) => {
-      const next = new Set(prev);
-
-      next.has(id) ? next.delete(id) : next.add(id);
-
-      return next;
-    });
-  };
-
-  return (
-    <aside
-      className={cn(
-        'h-full bg-white border-r border-gray-200 transition-all duration-300 flex flex-col shrink-0',
-        collapsed ? 'w-12' : 'w-52'
-      )}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-2 py-1.5 border-b border-gray-200 h-9 shrink-0">
-        {!collapsed && (
-          <span className="grow text-sm font-semibold text-gray-900 truncate mr-1">{title}</span>
-        )}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-6 w-6 shrink-0"
-          onClick={() => setCollapsed(v => !v)}>
-          <Menu className="size-3.5" />
-        </Button>
-      </div>
-
-      {/* Nav */}
-      <nav className="flex-1 overflow-y-auto p-1.5 space-y-0.5">
-        {data.map((item: any) => {
-          if (item.type === 'folder') {
-            const isExp = expanded.has(item.id);
-
-            return (
-              <div key={item.id}>
-                <button
-                  onClick={() => toggleFolder(item.id)}
-                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 text-left text-sm">
-                  <FolderOpen className="size-4 text-gray-500 shrink-0" />
-                  {!collapsed && (
-                    <>
-                      <span className="flex-1 truncate text-gray-900 font-medium">{item.title}</span>
-                      {isExp ? <ChevronDown className="size-3 text-gray-400" /> : <ChevronRight className="size-3 text-gray-400" />}
-                    </>
-                  )}
-                </button>
-                {!collapsed && isExp && (
-                  <div className="ml-4 mt-0.5 space-y-0.5">
-                    {item.menu?.map((sub: any) => (
-                      <button
-                        key={sub.id}
-                        onClick={() => { onMenuClick(sub.id); }}
-                        className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 text-left text-sm text-gray-700">
-                        <span className="truncate">{sub.title}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          }
-
-          return (
-            <button
-              key={item.id}
-              onClick={() => { onMenuClick(item.id); }}
-              title={collapsed ? item.title : undefined}
-              className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 text-left text-sm">
-              <LayoutDashboard className="size-4 text-gray-500 shrink-0" />
-              {!collapsed && (
-                <span className="truncate text-gray-900 font-medium">{item.title}</span>
-              )}
-            </button>
-          );
-        })}
-      </nav>
-    </aside>
-  );
-}
-
-/*
- * ─────────────────────────────────────────────────────────────
- * AppBoardView — simplified board (shows columns/fields as table)
- * ─────────────────────────────────────────────────────────────
- */
-
-function AppBoardView({ page, dataSources }: { page: any; dataSources: any[] }) {
-  const [activeViewIdx, setActiveViewIdx] = useState(0);
-  const views = page?.views ?? [];
-  const activeView = views[activeViewIdx];
-  const dsId = activeView?.config?.dataSourceId ?? activeView?.dataSourceId;
-  const ds = dsId ? dataSources.find(
-    (d: any) => d.id === dsId
-      || d.slug === dsId
-      || d.name === dsId
-  ) ?? dataSources[0] ?? null : dataSources[0] ?? null;
-
-  // Columns: from view config, falling back to data source fields
-  const columns: any[] = activeView?.config?.columns ?? activeView?.columns ?? ds?.fields ?? [];
-
-  // DEBUG
-  console.info('[AppBoardView] dsId', dsId, 'ds.id', ds?.id, 'records', ds?.records?.length);
-  console.info('[AppBoardView] columns[0]', columns[0], 'record[0] keys', Object.keys(ds?.records?.[0] ?? {}));
-
-  // Records: dummy data from the data source
-  const records: any[] = ds?.records ?? [];
-
-  const getCellValue = (record: any, col: any): string => {
-    // column.field is the primary key (from view config), fallback to slug/id/name
-    const key = col.field || col.slug || col.id || col.name || col;
-    const val = record[key];
-
-    if (val === null || val === undefined) return '';
-    // Relation fields: {id, name} → show name
-    if (typeof val === 'object' && !Array.isArray(val)) return val.name ?? JSON.stringify(val);
-    if (Array.isArray(val)) return val.map((v: any) => v?.name ?? v).join(', ');
-
-    return String(val);
-  };
-
-  return (
-    <div className="flex flex-col h-full w-full overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30 shrink-0">
-        <Table2 className="size-4 text-muted-foreground" />
-        <span className="text-sm font-medium">{page.title}</span>
-      </div>
-      {views.length > 1 && (
-        <div className="flex gap-1 px-3 py-1 border-b shrink-0">
-          {views.map((v: any, i: number) => (
-            <button
-              key={v.id || i}
-              onClick={() => setActiveViewIdx(i)}
-              className={cn(
-                'px-2 py-0.5 rounded text-xs',
-                activeViewIdx === i ? 'bg-primary text-primary-foreground' : 'hover:bg-muted text-muted-foreground'
-              )}>
-              {v.title || v.type}
-            </button>
-          ))}
-        </div>
-      )}
-      <div className="flex-1 overflow-auto p-3">
-        {columns.length > 0 ? (
-          <table className="w-full text-xs border border-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
-                {columns.map((col: any, i: number) => (
-                  <th key={i} className="border border-gray-200 px-2 py-1 text-left font-medium text-gray-700">
-                    {col.name || col.title || col.slug || col}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {records.length > 0 ? records.map((record: any, ri: number) => (
-                <tr key={ri} className="hover:bg-gray-50">
-                  {columns.map((col: any, ci: number) => (
-                    <td key={ci} className="border border-gray-200 px-2 py-1 max-w-[200px] truncate">
-                      {getCellValue(record, col)}
-                    </td>
-                  ))}
-                </tr>
-              )) : (
-                <tr>
-                  {columns.map((_: any, i: number) => (
-                    <td key={i} className="border border-gray-200 px-2 py-1 text-gray-400 italic">—</td>
-                  ))}
-                </tr>
-              )}
-            </tbody>
-          </table>
-        ) : (
-          <div className="text-sm text-muted-foreground text-center py-8">
-            {ds ? `Data source: ${ds.title || ds.slug}` : 'No view data available'}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/*
- * ─────────────────────────────────────────────────────────────
- * AppDashboardPreview — widget cards with dot background
- * ─────────────────────────────────────────────────────────────
- */
-
-function WidgetSummary({ widget }: { widget: any }) {
-  const ds = widget.options?.dataSource;
-  const records: any[] = ds?.records ?? [];
-  const widgetType: string = widget.options?.type || widget.type || '';
-  const normType = widgetType.toLowerCase().replace(/_/g, '');
-
-  const dataConfig = widget.options?.dataConfig ?? {};
-
-  // Calculations from dataConfig (each has func + field)
-  const calculations: any[] = Array.isArray(dataConfig.calculations) ? dataConfig.calculations : [];
-
-  // Group-by rows from dataConfig.fields.rows
-  const rowFields: string[] = Array.isArray(dataConfig.fields?.rows) ? dataConfig.fields.rows : [];
-  const groupField: string = rowFields[0] || '';
-
-  // Primary metric: first calculation's field
-  const primaryCalc = calculations[0];
-  const metricField: string = primaryCalc?.field || '';
-
-  console.info('[WidgetSummary]', widget.title, {
-    widgetType, groupField, metricField, records: records.length
-  });
-
-  const isKpi = normType === 'chartstatistic'
-    || normType.includes('kpi')
-    || normType.includes('stat')
-    || normType.includes('metric');
-
-  // For KPI: sum of primary calc field
-  const kpiValue = (() => {
-    if (!metricField || records.length === 0) return null;
-
-    if (primaryCalc?.func === 'count') return records.length;
-
-    const sum = records.reduce((acc: number, r: any) => {
-      const v = r[metricField];
-      const num = typeof v === 'object' && v !== null ? Number(v.id ?? 0) : Number(v) || 0;
-
-      return acc + num;
-    }, 0);
-
-    return sum;
-  })();
-
-  // For bar/pie charts: group records by rowField, aggregate by calc field
-  const groups: [string, number][] = (() => {
-    if (!groupField || records.length === 0) return [];
-
-    const map: Record<string, number> = {};
-
-    records.forEach((r: any) => {
-      const rawKey = r[groupField];
-      const label = typeof rawKey === 'object' && rawKey !== null ? (rawKey.name ?? String(rawKey.id ?? '—')) : String(rawKey ?? '—');
-
-      const val = primaryCalc?.func === 'count' ? 1 : metricField ? (() => {
-        const v = r[metricField];
-
-        return typeof v === 'object' && v !== null ? Number(v.id ?? 0) : Number(v) || 0;
-      })() : 1;
-
-      map[label] = (map[label] || 0) + val;
-    });
-
-    return Object.entries(map).sort((a, b) => b[1] - a[1]).slice(0, 6);
-  })();
-
-  const COLORS = [
-    '#6366f1',
-    '#22d3ee',
-    '#f59e0b',
-    '#10b981',
-    '#f43f5e',
-    '#8b5cf6'
-  ];
-  const chartData = groups.map(([name, value]) => ({ name, value }));
-
-  const isPie = normType.includes('pie') || normType.includes('donut');
-  const isLine = normType.includes('line') || normType.includes('area');
-  const isColumn = normType.includes('column');
-
-  const metricLabel = primaryCalc?.name || metricField || 'Value';
-
-  return (
-    <div className="bg-white border border-gray-200 rounded-lg p-3 shadow-sm flex flex-col gap-1 min-h-[140px]">
-      <div className="text-xs font-semibold text-gray-700 truncate">{widget.title || widget.type}</div>
-
-      {isKpi && kpiValue !== null && (
-        <div className="mt-auto">
-          <div className="text-2xl font-bold text-gray-900">
-            {kpiValue.toLocaleString(undefined, { maximumFractionDigits: 1 })}
-          </div>
-          <div className="text-[10px] text-muted-foreground">
-            {metricLabel} · {records.length} records
-          </div>
-        </div>
-      )}
-
-      {isPie && chartData.length === 0 && records.length > 0 && (
-        <div className="text-xs text-muted-foreground mt-auto py-2">
-          {records.length} records · no group field configured
-        </div>
-      )}
-
-      {isPie && chartData.length > 0 && (
-        <div style={{ width: '100%', height: 160 }}>
-          <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-              <Pie
-                data={chartData}
-                dataKey="value"
-                nameKey="name"
-                cx="50%"
-                cy="50%"
-                innerRadius={normType.includes('donut') ? 35 : 0}
-                outerRadius={55}
-                paddingAngle={2}>
-                {chartData.map((_: any, i: number) => (
-                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
-                ))}
-              </Pie>
-              <Tooltip formatter={(v: any) => v.toLocaleString(undefined, { maximumFractionDigits: 1 })} />
-              <Legend iconSize={8} wrapperStyle={{ fontSize: 10 }} />
-            </PieChart>
-          </ResponsiveContainer>
-        </div>
-      )}
-
-      {isLine && chartData.length > 0 && (
-        <div style={{ width: '100%', height: 110 }}>
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart
-              data={chartData}
-              margin={{
-                top: 4, right: 4, left: -20, bottom: 0
-              }}>
-              <XAxis dataKey="name" tick={{ fontSize: 9 }} interval="preserveStartEnd" />
-              <YAxis tick={{ fontSize: 9 }} />
-              <Tooltip formatter={(v: any) => v.toLocaleString(undefined, { maximumFractionDigits: 1 })} />
-              <Line type="monotone" dataKey="value" stroke="#6366f1" strokeWidth={2} dot={{ r: 3 }} name={metricLabel} />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-      )}
-
-      {(isColumn || (!isKpi && !isPie && !isLine)) && chartData.length > 0 && (
-        <div style={{ width: '100%', height: 110 }}>
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={chartData}
-              layout={isColumn ? 'vertical' : 'horizontal'}
-              margin={{
-                top: 4, right: 4, left: isColumn ? 40 : -20, bottom: 0
-              }}>
-              {isColumn ? (
-                <>
-                  <XAxis type="number" tick={{ fontSize: 9 }} />
-                  <YAxis type="category" dataKey="name" tick={{ fontSize: 9 }} width={36} />
-                </>
-              ) : (
-                <>
-                  <XAxis dataKey="name" tick={{ fontSize: 9 }} interval={0} />
-                  <YAxis tick={{ fontSize: 9 }} />
-                </>
-              )}
-              <Tooltip formatter={(v: any) => v.toLocaleString(undefined, { maximumFractionDigits: 1 })} />
-              <Bar
-                dataKey="value"
-                name={metricLabel}
-                radius={[
-                  3,
-                  3,
-                  0,
-                  0
-                ]}>
-                {chartData.map((_: any, i: number) => (
-                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      )}
-
-      {!isKpi && chartData.length > 0 && (
-        <div className="text-[10px] text-muted-foreground">
-          {metricLabel}{groupField ? ` by ${groupField}` : ''}
-        </div>
-      )}
-
-      {kpiValue === null && chartData.length === 0 && (
-        <div className="text-[10px] text-muted-foreground mt-auto">
-          {records.length > 0 ? `${records.length} records` : 'No data'}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function AppDashboardPreview({ page, widgets }: { page: any; widgets: any[] }) {
-  return (
-    <div className="flex flex-col h-full w-full overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30 shrink-0">
-        <LayoutDashboard className="size-4 text-muted-foreground" />
-        <span className="text-sm font-medium">{page.title}</span>
-      </div>
-      <div
-        className="flex-1 overflow-auto p-4"
-        style={{
-          background: 'radial-gradient(circle, #94a3b8 1.5px, transparent 1.5px) 0 0 / 22px 22px #f1f5f9'
-        }}>
-        <div className="grid grid-cols-2 gap-3">
-          {widgets.map((widget: any, i: number) => (
-            <WidgetSummary key={widget.id || i} widget={widget} />
-          ))}
-          {widgets.length === 0 && (
-            <div className="col-span-2 text-sm text-muted-foreground text-center py-8">No widgets configured</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/*
- * ─────────────────────────────────────────────────────────────
- * AppPreviewDocument — mermaid diagrams + data structure table
- * ─────────────────────────────────────────────────────────────
- */
-
-function AppPreviewDocument({ app }: { app: any }) {
-  const [tab, setTab] = useState(0);
-  const tabs = ['Layout Structure', 'Data Structure Table', 'Data Structure Diagram'];
-  const layoutDiagram = generateLayoutDiagram(app);
-  const dataDiagram = generateDataStructureDiagram(app);
-
-  return (
-    <div className="flex flex-col h-full overflow-hidden">
-      <div className="flex border-b shrink-0">
-        {tabs.map((t, i) => (
-          <button
-            key={i}
-            onClick={() => setTab(i)}
-            className={cn(
-              'px-3 py-2 text-xs font-medium border-b-2 -mb-px',
-              tab === i ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
-            )}>
-            {t}
-          </button>
-        ))}
-      </div>
-      <div className="flex-1 overflow-auto p-4">
-        {tab === 0 && (
-          <MermaidDiagram
-            title="Layout Structure"
-            mermaidNotation={layoutDiagram}
-            state="output-available" />
-        )}
-        {tab === 2 && (
-          <MermaidDiagram
-            title="Data Structure Diagram"
-            mermaidNotation={dataDiagram}
-            state="output-available" />
-        )}
-        {tab === 1 && (
-          <div className="text-sm space-y-6">
-            <div>
-              <h3 className="font-bold border-b pb-2 mb-3">Data Sources</h3>
-              <table className="w-full border border-gray-200 text-xs">
-                <thead className="bg-gray-50">
-                  <tr>
-                    {['Title', 'Name', 'Slug'].map(h => (
-                      <th key={h} className="border border-gray-200 px-2 py-1 text-left">{h}</th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {(Array.isArray(app?.data_sources) ? app.data_sources : Object.values(app?.data_sources ?? {})).map((ds: any) => (
-                    <tr key={ds.slug}>
-                      <td className="border border-gray-200 px-2 py-1">{ds.title}</td>
-                      <td className="border border-gray-200 px-2 py-1">{ds.name}</td>
-                      <td className="border border-gray-200 px-2 py-1">{ds.slug}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-
-            <div>
-              <h3 className="font-bold border-b pb-2 mb-3">Fields</h3>
-              {(Array.isArray(app?.data_sources) ? app.data_sources : Object.values(app?.data_sources ?? {})).map((ds: any) => (
-                <div key={ds.slug} className="border border-gray-300 bg-gray-50 rounded p-3 mb-3">
-                  <div className="font-bold text-sm mb-2">
-                    {ds.title}
-                    {' '}
-                    <span className="text-muted-foreground font-normal text-xs">{ds.name}</span>
-                  </div>
-                  <table className="w-full border border-gray-200 text-xs bg-white">
-                    <thead className="bg-gray-50">
-                      <tr>
-                        {[
-                          'Name',
-                          'Slug',
-                          'Type',
-                          'Validations'
-                        ].map(h => (
-                          <th key={h} className="border border-gray-200 px-2 py-1 text-left">{h}</th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {ds.fields?.map((field: any) => (
-                        <tr key={field.id || field.slug}>
-                          <td className="border border-gray-200 px-2 py-1">{field.name}</td>
-                          <td className="border border-gray-200 px-2 py-1">{field.slug}</td>
-                          <td className="border border-gray-200 px-2 py-1">{field.type}</td>
-                          <td className="border border-gray-200 px-2 py-1 max-w-[200px] truncate">
-                            {JSON.stringify(field.validations)}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/*
- * ─────────────────────────────────────────────────────────────
- * CanvasAppView — main export (mirrors KvCanvasAppPreview.vue)
- * ─────────────────────────────────────────────────────────────
- */
-
-interface CanvasAppViewProps {
-  app: any;
-}
-
-export function CanvasAppView({ app }: CanvasAppViewProps) {
-  // DEBUG — runs regardless of app being null
-  console.info('[CanvasAppView] render, app=', app);
-
-  const [activeTab, setActiveTab] = useState(0);
-  const [activeMenuId, setActiveMenuId] = useState<string | null>(() => {
-    const m = app?.layout?.menu;
-
-    if (!m) return null;
-
-    const first = Array.isArray(m) ? m[0] : Object.values(m)[0];
-
-    return (first as any)?.id ?? null;
-  });
-
-  if (!app) {
-    return (
-      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-        No app data available
-      </div>
-    );
-  }
-
-  // Normalize values that may arrive as {0:{...},1:{...}} objects or proper arrays
-  const toArray = (val: any): any[] => {
-    if (!val) return [];
-    if (Array.isArray(val)) return val;
-    if (typeof val === 'object') return Object.values(val);
-
-    return [];
-  };
-
-  const rawDataSources = toArray(app.data_sources);
-  const rawWidgets = toArray(app.layout?.widgets);
-  const menu = toArray(app.layout?.menu);
-
-  // DEBUG
-  console.info('[CanvasAppView] app.data_sources', app.data_sources);
-  console.info('[CanvasAppView] app.layout.dummy_data_json', app.layout?.dummy_data_json);
-
-  /*
-   * Parse dummy data from layout (mirrors Vue's dummyData parsing)
-   * Format can be either:
-   *   { "ds_slug": [...records], "other_slug": [...] }  — keyed by data source slug
-   *   [...records]                                       — flat array for single data source
-   * dummy_data_json may be a JSON string or already a parsed object/array.
-   */
-  let dummyDataMap: Record<string, any[]> = {};
-
-  try {
-    const raw = app.layout?.dummy_data_json;
-
-    if (raw) {
-      const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
-
-      if (Array.isArray(parsed)) {
-        // Flat array — assign to ALL possible keys for every data source
-        rawDataSources.forEach((ds: any) => {
-          if (ds.slug) dummyDataMap[ds.slug] = parsed;
-          if (ds.id) dummyDataMap[ds.id] = parsed;
-          if (ds.name) dummyDataMap[ds.name] = parsed;
-        });
-        dummyDataMap['__all__'] = parsed;
-      } else if (parsed && typeof parsed === 'object') {
-        // Keyed object (slug → records[])
-        dummyDataMap = parsed;
-        const firstArr = Object.values(parsed).find(v => Array.isArray(v));
-
-        if (firstArr) dummyDataMap['__all__'] = firstArr as any[];
-      }
-    }
-  } catch {
-    // invalid JSON, skip
-  }
-
-  const findRecords = (ds: any): any[] => dummyDataMap[ds.slug]
-    ?? dummyDataMap[ds.id]
-    ?? dummyDataMap[ds.name]
-    ?? dummyDataMap['__all__']
-    ?? [];
-
-  /*
-   * Prepare data sources with normalized fields + dummy records.
-   * Vue sets id = slug (useInlineDataSource({ id: ds.slug })), mirror that.
-   */
-  const dataSources = rawDataSources.map((ds: any) => ({
-    ...ds,
-    _originalId: ds.id, // keep UUID for widget lookup
-    id: ds.slug || ds.id,
-    slug: ds.slug || ds.id,
-    fields: toArray(ds.fields).map((f: any) => ({
-      ...f,
-      id: f.id || f.slug,
-      type: f.type?.replace('field-', '') ?? f.type
-    })),
-    records: findRecords(ds)
-  }));
-
-  const findDataSource = (id: string | undefined) => {
-    if (!id) return undefined;
-
-    return dataSources.find(
-      (ds: any) => ds.id === id
-        || ds.slug === id
-        || ds.name === id
-        || ds._originalId === id
-    );
-  };
-
-  // Prepare widgets — resolve dataSource, clear dataConfig.meta as Vue does
-  const widgets = rawWidgets.map((widget: any) => ({
-    ...widget,
-    options: {
-      ...widget.options,
-      dataConfig: { ...(widget.options?.dataConfig ?? {}), meta: [] },
-      dataSource: findDataSource(widget.options?.dataSourceId ?? widget.dataSourceId)
-    }
-  }));
-
-  const activeMenu = menu.find((m: any) => m.id === activeMenuId) ?? menu[0] ?? null;
-
-  // DEBUG
-  console.info('[CanvasAppView] dummyDataMap keys', Object.keys(dummyDataMap));
-  console.info('[CanvasAppView] dataSources', dataSources.map((ds: any) => ({ id: ds.id, slug: ds.slug, records: ds.records?.length })));
-  console.info('[CanvasAppView] widgets', widgets.map((w: any) => ({ title: w.title, dsId: w.options?.dataSourceId, resolved: !!w.options?.dataSource })));
-  console.info('[CanvasAppView] menu activeMenu', activeMenu?.type, activeMenu?.id);
-
-  const tabLabels = ['Preview', 'JSON', 'Docs'];
-
-  return (
-    <div className="flex flex-col h-full w-full overflow-hidden">
-      {/* Tab bar */}
-      <div className="flex border-b shrink-0 bg-background">
-        {tabLabels.map((t, i) => (
-          <button
-            key={i}
-            onClick={() => setActiveTab(i)}
-            className={cn(
-              'px-4 py-2 text-xs font-medium border-b-2 -mb-px transition-colors',
-              activeTab === i ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
-            )}>
-            {t}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab 0: App preview */}
-      {activeTab === 0 && (
-        <div className="flex flex-1 overflow-hidden">
-          <AppSidebar
-            data={menu}
-            title={app.layout?.title}
-            onMenuClick={setActiveMenuId} />
-          <div className="grow overflow-hidden">
-            {activeMenu?.type === 'board' && (
-              <AppBoardView page={activeMenu} dataSources={dataSources} />
-            )}
-            {activeMenu?.type === 'dashboard' && (
-              <AppDashboardPreview page={activeMenu} widgets={widgets} />
-            )}
-            {!activeMenu && (
-              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-                Select a menu item to preview
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Tab 1: JSON editor */}
-      {activeTab === 1 && (
-        <div className="flex-1 overflow-auto p-4">
-          <pre className="text-xs font-mono text-muted-foreground whitespace-pre-wrap break-all">
-            {JSON.stringify(app, null, 2)}
-          </pre>
-        </div>
-      )}
-
-      {/* Tab 2: Documentation */}
-      {activeTab === 2 && (
-        <div className="flex-1 overflow-hidden">
-          <AppPreviewDocument app={app} />
-        </div>
-      )}
-    </div>
-  );
-}