@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/renderers/config/ConfigRenderer.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { Check, Loader2, Plus, X } from 'lucide-react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+type JsonValue = null | boolean | number | string | JsonValue[] | { [k: string]: JsonValue };
+
+type UiSection = {
+  id: string;
+  title: string;
+  description?: string;
+  fields: string[];
+};
+
+type KeySpec = {
+  type?: string;
+  control?: string;
+  label?: string;
+  description?: string;
+  constraints?: { min?: number; max?: number };
+};
+
+type ConfigSchema = {
+  uiSchema?: { sections?: UiSection[] };
+  keySpecs?: Record<string, KeySpec>;
+};
+
+function getByPath(obj: unknown, path: string): JsonValue {
+  const parts = path.split('.');
+  let cur: unknown = obj;
+  for (const p of parts) {
+    if (!cur || typeof cur !== 'object' || !(p in (cur as Record<string, unknown>))) return null;
+    cur = (cur as Record<string, unknown>)[p];
+  }
+  return cur as JsonValue;
+}
+
+function setByPath(obj: Record<string, unknown>, path: string, value: JsonValue): Record<string, unknown> {
+  const parts = path.split('.');
+  const next = structuredClone(obj) as Record<string, unknown>;
+  let cur: Record<string, unknown> = next;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const k = parts[i];
+    const v = cur[k];
+    if (!v || typeof v !== 'object' || Array.isArray(v)) cur[k] = {};
+    cur = cur[k] as Record<string, unknown>;
+  }
+  cur[parts[parts.length - 1]] = value;
+  return next;
+}
+
+export function ConfigRenderer({ content, saveAction }: RendererContext) {
+  const parsed = useMemo(() => {
+    try {
+      return JSON.parse(content) as Record<string, unknown>;
+    } catch {
+      return null;
+    }
+  }, [content]);
+
+  const [data, setData] = useState<Record<string, unknown> | null>(parsed);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState('');
+  const [tagInput, setTagInput] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    setData(parsed);
+    setError('');
+  }, [parsed]);
+
+  const schema = (data ?? {}) as ConfigSchema;
+  const sections = schema.uiSchema?.sections ?? [];
+  const keySpecs = schema.keySpecs ?? {};
+
+  const persist = useCallback(async (next: Record<string, unknown>) => {
+    setSaving(true);
+    setSaved(false);
+    setError('');
+    try {
+      await saveAction(`${JSON.stringify(next, null, 2)}\n`);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 1200);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to save');
+    } finally {
+      setSaving(false);
+    }
+  }, [saveAction]);
+
+  const updateValue = useCallback(async (path: string, value: JsonValue) => {
+    if (!data) return;
+    const next = setByPath(data, path, value);
+    setData(next);
+    await persist(next);
+  }, [data, persist]);
+
+  if (!parsed || !data) {
+    return (
+      <div className="rounded-xl border border-border p-4 text-sm text-error">
+        CONFIG.json parse failed. Please check JSON format.
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto flex flex-col gap-3">
+      <div className="flex items-center justify-between rounded-xl border border-border bg-card px-4 py-2.5">
+        <div className="text-xs text-muted-foreground">CONFIG Control Panel</div>
+        <div className="text-xs flex items-center gap-2">
+          {saving && <span className="inline-flex items-center gap-1 text-muted-foreground"><Loader2 size={12} className="animate-spin" />Saving</span>}
+          {!saving && saved && <span className="inline-flex items-center gap-1" style={{ color: 'var(--success)' }}><Check size={12} />Saved</span>}
+        </div>
+      </div>
+
+      {error && <div className="rounded-lg border border-error/30 bg-error/10 px-3 py-2 text-xs text-error">{error}</div>}
+
+      {sections.map((section) => (
+        <div key={section.id} className="rounded-xl border border-border bg-card p-4">
+          <div className="mb-3">
+            <h3 className="text-sm font-semibold text-foreground">{section.title}</h3>
+            {section.description && <p className="text-xs text-muted-foreground mt-1">{section.description}</p>}
+          </div>
+
+          <div className="space-y-3">
+            {section.fields.map((fieldPath) => {
+              const spec = keySpecs[fieldPath] ?? {};
+              const value = getByPath(data, fieldPath);
+              const label = spec.label || fieldPath;
+
+              return (
+                <div key={fieldPath} className="rounded-lg border border-border/80 bg-background px-3 py-2.5">
+                  <div className="flex items-center justify-between gap-3 mb-1.5">
+                    <div>
+                      <div className="text-sm text-foreground">{label}</div>
+                      {spec.description && <div className="text-xs text-muted-foreground mt-0.5">{spec.description}</div>}
+                    </div>
+
+                    {spec.control === 'switch' && typeof value === 'boolean' && (
+                      <button
+                        type="button"
+                        onClick={() => updateValue(fieldPath, !value)}
+                        className="px-2.5 py-1 rounded-md text-xs font-medium"
+                        style={{
+                          background: value ? 'var(--amber)' : 'var(--muted)',
+                          color: value ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
+                        }}
+                      >
+                        {value ? 'ON' : 'OFF'}
+                      </button>
+                    )}
+                  </div>
+
+                  {spec.control === 'text' && typeof value === 'string' && (
+                    <input
+                      defaultValue={value}
+                      onBlur={(e) => updateValue(fieldPath, e.target.value)}
+                      className="w-full px-2 py-1.5 text-sm bg-card border border-border rounded text-foreground"
+                    />
+                  )}
+
+                  {spec.control === 'number' && typeof value === 'number' && (
+                    <input
+                      type="number"
+                      defaultValue={value}
+                      min={spec.constraints?.min}
+                      max={spec.constraints?.max}
+                      onBlur={(e) => {
+                        const raw = Number(e.target.value);
+                        const min = spec.constraints?.min;
+                        const max = spec.constraints?.max;
+                        let next = Number.isFinite(raw) ? raw : value;
+                        if (typeof min === 'number' && next < min) next = min;
+                        if (typeof max === 'number' && next > max) next = max;
+                        updateValue(fieldPath, next);
+                      }}
+                      className="w-full px-2 py-1.5 text-sm bg-card border border-border rounded text-foreground"
+                    />
+                  )}
+
+                  {spec.control === 'tag-list' && Array.isArray(value) && (
+                    <div className="flex flex-col gap-2">
+                      <div className="flex flex-wrap gap-1.5">
+                        {value.map((tag, idx) => (
+                          <span key={`${String(tag)}-${idx}`} className="inline-flex items-center gap-1 px-2 py-0.5 rounded border border-border text-xs bg-muted text-foreground">
+                            {String(tag)}
+                            <button
+                              type="button"
+                              onClick={() => updateValue(fieldPath, value.filter((_, i) => i !== idx))}
+                              className="text-muted-foreground hover:text-foreground"
+                            >
+                              <X size={11} />
+                            </button>
+                          </span>
+                        ))}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <input
+                          value={tagInput[fieldPath] ?? ''}
+                          onChange={(e) => setTagInput((prev) => ({ ...prev, [fieldPath]: e.target.value }))}
+                          onKeyDown={(e) => {
+                            if (e.key !== 'Enter') return;
+                            e.preventDefault();
+                            const nextTag = (tagInput[fieldPath] ?? '').trim();
+                            if (!nextTag) return;
+                            updateValue(fieldPath, [...value, nextTag]);
+                            setTagInput((prev) => ({ ...prev, [fieldPath]: '' }));
+                          }}
+                          className="flex-1 px-2 py-1.5 text-sm bg-card border border-border rounded text-foreground"
+                          placeholder="Add item"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const nextTag = (tagInput[fieldPath] ?? '').trim();
+                            if (!nextTag) return;
+                            updateValue(fieldPath, [...value, nextTag]);
+                            setTagInput((prev) => ({ ...prev, [fieldPath]: '' }));
+                          }}
+                          className="px-2.5 py-1.5 rounded-md text-xs bg-muted text-foreground inline-flex items-center gap-1"
+                        >
+                          <Plus size={12} /> Add
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/_standalone/components/renderers/csv/BoardView.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { Plus } from 'lucide-react';
+import type { BoardConfig } from './types';
+import { serializeCSV, tagColor } from './types';
+
+export function BoardView({ headers, rows, cfg, saveAction }: {
+  headers: string[];
+  rows: string[][];
+  cfg: BoardConfig;
+  saveAction: (c: string) => Promise<void>;
+}) {
+  const [localRows, setLocalRows] = useState(rows);
+  const [dragOver, setDragOver] = useState<string | null>(null);
+  const [newColInput, setNewColInput] = useState('');
+  const [showNewCol, setShowNewCol] = useState(false);
+  useEffect(() => { setLocalRows(rows); }, [rows]);
+
+  const groupIdx = headers.indexOf(cfg.groupField);
+  const titleIdx = headers.indexOf(cfg.titleField);
+  const descIdx = headers.indexOf(cfg.descField);
+
+  const { groups, groupKeys } = useMemo(() => {
+    const map = new Map<string, { row: string[]; origIdx: number }[]>();
+    localRows.forEach((row, i) => {
+      const key = (groupIdx >= 0 ? row[groupIdx] : '') || '(empty)';
+      if (!map.has(key)) map.set(key, []);
+      map.get(key)!.push({ row, origIdx: i });
+    });
+    return { groups: map, groupKeys: [...map.keys()] };
+  }, [localRows, groupIdx]);
+
+  async function moveCard(origIdx: number, newGroup: string) {
+    const updated = localRows.map((r, i) => {
+      if (i !== origIdx) return r;
+      const next = [...r];
+      if (groupIdx >= 0) next[groupIdx] = newGroup;
+      return next;
+    });
+    setLocalRows(updated);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  function Column({ group }: { group: string }) {
+    const cards = groups.get(group) ?? [];
+    const tc = tagColor(group);
+    const isOver = dragOver === group;
+    return (
+      <div className="flex-shrink-0 w-64 flex flex-col gap-2">
+        <div className="flex items-center gap-2 px-1 py-1.5">
+          <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: tc.text }} />
+          <span className="text-xs font-semibold uppercase tracking-wider truncate font-display" style={{ color: tc.text }}>{group}</span>
+          <span className="text-xs ml-auto shrink-0" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>{cards.length}</span>
+        </div>
+        <div
+          className="flex flex-col gap-2 rounded-xl p-1.5 min-h-[80px] transition-colors"
+          style={{ background: isOver ? 'var(--amber-dim)' : 'var(--muted)', border: `1px solid ${isOver ? 'var(--amber)' : 'transparent'}` }}
+          onDragOver={e => { e.preventDefault(); setDragOver(group); }}
+          onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragOver(null); }}
+          onDrop={e => {
+            setDragOver(null);
+            const idx = parseInt(e.dataTransfer.getData('origIdx'));
+            if (!isNaN(idx)) moveCard(idx, group);
+          }}
+        >
+          {cards.map(({ row, origIdx }) => {
+            const title = titleIdx >= 0 ? row[titleIdx] : row[0] ?? '';
+            const desc = descIdx >= 0 ? row[descIdx] : '';
+            return (
+              <div key={origIdx} draggable
+                onDragStart={e => { e.dataTransfer.setData('origIdx', String(origIdx)); setDragOver(null); }}
+                onDragEnd={() => setDragOver(null)}
+                className="rounded-lg border p-3 flex flex-col gap-1.5 cursor-grab active:cursor-grabbing hover:bg-muted/50 transition-colors"
+                style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
+              >
+                <p className="text-sm font-medium leading-snug" style={{ color: 'var(--foreground)' }}>{title}</p>
+                {desc && <p className="text-xs leading-relaxed line-clamp-2" style={{ color: 'var(--muted-foreground)' }}>{desc}</p>}
+                <div className="flex flex-wrap gap-1 mt-0.5">
+                  {headers.map((h, ci) => {
+                    if (ci === groupIdx || ci === titleIdx || ci === descIdx) return null;
+                    const v = row[ci]; if (!v) return null;
+                    return <span key={ci} className="text-2xs px-1.5 py-0.5 rounded font-display"
+                      style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}
+                    >{h}: {v}</span>;
+                  })}
+                </div>
+              </div>
+            );
+          })}
+          {cards.length === 0 && (
+            <div className="flex items-center justify-center h-12">
+              <span className="text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.4 }}>Drop here</span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-3 overflow-x-auto pb-3 items-start">
+      {groupKeys.map(group => <Column key={group} group={group} />)}
+
+      {/* New column */}
+      <div className="flex-shrink-0 w-64">
+        {showNewCol ? (
+          <div className="rounded-xl border p-3 flex flex-col gap-2" style={{ borderColor: 'var(--border)', background: 'var(--card)' }}>
+            <input autoFocus value={newColInput} onChange={e => setNewColInput(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' && newColInput.trim()) {
+                  setNewColInput('');
+                  setShowNewCol(false);
+                }
+                if (e.key === 'Escape') { setNewColInput(''); setShowNewCol(false); }
+              }}
+              placeholder="Column name…"
+              className="text-xs bg-transparent outline-none w-full font-display"
+              style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--amber)' }}
+            />
+            <div className="flex gap-2">
+              <button onClick={() => {
+                setNewColInput('');
+                setShowNewCol(false);
+              }}
+                className="text-xs px-2 py-1 rounded font-display"
+                style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+              >Create</button>
+              <button onClick={() => { setNewColInput(''); setShowNewCol(false); }}
+                className="text-xs px-2 py-1 rounded font-display"
+                style={{ color: 'var(--muted-foreground)' }}
+              >Cancel</button>
+            </div>
+          </div>
+        ) : (
+          <button onClick={() => setShowNewCol(true)}
+            className="flex items-center gap-1.5 text-xs px-3 py-2 rounded-xl border border-dashed w-full transition-colors hover:bg-muted font-display"
+            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}
+          >
+            <Plus size={12} /> Add column
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/renderers/csv/ConfigPanel.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { X } from 'lucide-react';
+import CustomSelect from '@/components/CustomSelect';
+import type { CsvConfig, ViewType } from './types';
+
+export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
+  headers: string[];
+  cfg: CsvConfig;
+  view: ViewType;
+  onClose: () => void;
+  onChange: (cfg: CsvConfig) => void;
+}) {
+  const labelStyle: React.CSSProperties = { color: 'var(--muted-foreground)', fontSize: '0.72rem' };
+
+  function FieldSelect({ label, value, onChange: onCh }: { label: string; value: string; onChange: (v: string) => void }) {
+    return (
+      <div className="flex items-center justify-between gap-2">
+        <span className="font-display" style={labelStyle}>{label}</span>
+        <CustomSelect
+          value={value}
+          onChange={onCh}
+          size="sm"
+          options={[
+            { value: '', label: '— none —' },
+            ...headers.map(h => ({ value: h, label: h })),
+          ]}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="absolute right-0 top-10 z-20 w-72 rounded-xl border shadow-xl p-4 flex flex-col gap-3"
+      style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>{view} settings</span>
+        <button onClick={onClose} style={{ color: 'var(--muted-foreground)' }}><X size={13} /></button>
+      </div>
+
+      {view === 'table' && (
+        <>
+          <div className="h-px" style={{ background: 'var(--border)' }} />
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Sort</p>
+          <FieldSelect label="Sort by" value={cfg.table.sortField}
+            onChange={v => onChange({ ...cfg, table: { ...cfg.table, sortField: v } })} />
+          <div className="flex items-center justify-between gap-2">
+            <span style={labelStyle}>Direction</span>
+            <div className="flex rounded overflow-hidden border" style={{ borderColor: 'var(--border)' }}>
+              {(['asc', 'desc'] as const).map(d => (
+                <button key={d} onClick={() => onChange({ ...cfg, table: { ...cfg.table, sortDir: d } })}
+                  className="px-3 py-1 text-xs transition-colors font-display"
+                  style={{
+                    fontSize: '0.72rem',
+                    background: cfg.table.sortDir === d ? 'var(--amber)' : 'var(--background)',
+                    color: cfg.table.sortDir === d ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
+                  }}
+                >{d}</button>
+              ))}
+            </div>
+          </div>
+
+          <div className="h-px" style={{ background: 'var(--border)' }} />
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Group</p>
+          <FieldSelect label="Group by" value={cfg.table.groupField}
+            onChange={v => onChange({ ...cfg, table: { ...cfg.table, groupField: v } })} />
+
+          <div className="h-px" style={{ background: 'var(--border)' }} />
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Columns</p>
+          <div className="flex flex-col gap-1.5">
+            {headers.map(h => {
+              const hidden = cfg.table.hiddenFields.includes(h);
+              return (
+                <div key={h} className="flex items-center justify-between">
+                  <span style={labelStyle}>{h}</span>
+                  <button onClick={() => {
+                    const next = hidden
+                      ? cfg.table.hiddenFields.filter(f => f !== h)
+                      : [...cfg.table.hiddenFields, h];
+                    onChange({ ...cfg, table: { ...cfg.table, hiddenFields: next } });
+                  }}
+                    className="text-xs px-2 py-0.5 rounded transition-colors font-display"
+                    style={{
+                      background: hidden ? 'var(--muted)' : 'var(--amber-dim)',
+                      color: hidden ? 'var(--muted-foreground)' : 'var(--amber)',
+                    }}
+                  >{hidden ? 'Hidden' : 'Visible'}</button>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {view === 'gallery' && (
+        <>
+          <FieldSelect label="Title" value={cfg.gallery.titleField}
+            onChange={v => onChange({ ...cfg, gallery: { ...cfg.gallery, titleField: v } })} />
+          <FieldSelect label="Description" value={cfg.gallery.descField}
+            onChange={v => onChange({ ...cfg, gallery: { ...cfg.gallery, descField: v } })} />
+          <FieldSelect label="Tag / Badge" value={cfg.gallery.tagField}
+            onChange={v => onChange({ ...cfg, gallery: { ...cfg.gallery, tagField: v } })} />
+        </>
+      )}
+
+      {view === 'board' && (
+        <>
+          <FieldSelect label="Group by" value={cfg.board.groupField}
+            onChange={v => onChange({ ...cfg, board: { ...cfg.board, groupField: v } })} />
+          <FieldSelect label="Card title" value={cfg.board.titleField}
+            onChange={v => onChange({ ...cfg, board: { ...cfg.board, titleField: v } })} />
+          <FieldSelect label="Card desc" value={cfg.board.descField}
+            onChange={v => onChange({ ...cfg, board: { ...cfg.board, descField: v } })} />
+        </>
+      )}
+    </div>
+  );
+}

package/_standalone/components/renderers/csv/CsvRenderer.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useMemo, useCallback, useState } from 'react';
+import { LayoutGrid, Columns, Table2, Settings2 } from 'lucide-react';
+import type { RendererContext } from '@/lib/renderers/registry';
+import type { ViewType, CsvConfig } from './types';
+import { defaultConfig, parseCSV } from './types';
+import { useRendererState } from '@/lib/renderers/useRendererState';
+import { TableView } from './TableView';
+import { GalleryView } from './GalleryView';
+import { BoardView } from './BoardView';
+import { ConfigPanel } from './ConfigPanel';
+
+const VIEW_TABS: { id: ViewType; icon: React.ReactNode; label: string }[] = [
+  { id: 'table',   icon: <Table2 size={13} />,    label: 'Table' },
+  { id: 'gallery', icon: <LayoutGrid size={13} />, label: 'Gallery' },
+  { id: 'board',   icon: <Columns size={13} />,    label: 'Board' },
+];
+
+export function CsvRenderer({ filePath, content, saveAction }: RendererContext) {
+  const { headers, rows } = useMemo(() => parseCSV(content), [content]);
+  const def = useMemo(() => defaultConfig(headers), [headers]);
+  const [cfg, setCfg] = useRendererState<CsvConfig>('csv', filePath, def);
+  const [showConfig, setShowConfig] = useState(false);
+
+  const updateConfig = useCallback((next: CsvConfig) => {
+    setCfg(next);
+  }, [setCfg]);
+
+  const view = cfg.activeView;
+
+  return (
+    <div className="w-full py-2">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 mb-4 relative">
+        <div className="flex items-center gap-0.5 p-1 rounded-lg" style={{ background: 'var(--muted)' }}>
+          {VIEW_TABS.map(tab => (
+            <button key={tab.id} onClick={() => updateConfig({ ...cfg, activeView: tab.id })}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors font-display"
+              style={{
+                background: view === tab.id ? 'var(--card)' : 'transparent',
+                color: view === tab.id ? 'var(--foreground)' : 'var(--muted-foreground)',
+                boxShadow: view === tab.id ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+              }}
+            >{tab.icon}{tab.label}</button>
+          ))}
+        </div>
+        <div className="flex-1" />
+        <span className="text-xs font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>
+          {rows.length} rows
+        </span>
+        <div className="relative">
+          <button onClick={() => setShowConfig(v => !v)}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-colors"
+            style={{ background: showConfig ? 'var(--accent)' : 'var(--muted)', color: showConfig ? 'var(--foreground)' : 'var(--muted-foreground)' }}
+            title="View settings"
+          ><Settings2 size={13} /></button>
+          {showConfig && (
+            <ConfigPanel headers={headers} cfg={cfg} view={view}
+              onClose={() => setShowConfig(false)} onChange={updateConfig} />
+          )}
+        </div>
+      </div>
+
+      {view === 'table' && <TableView headers={headers} rows={rows} cfg={cfg.table} saveAction={saveAction} />}
+      {view === 'gallery' && <GalleryView headers={headers} rows={rows} cfg={cfg.gallery} />}
+      {view === 'board' && <BoardView headers={headers} rows={rows} cfg={cfg.board} saveAction={saveAction} />}
+    </div>
+  );
+}

package/_standalone/components/renderers/csv/EditableCell.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+export function EditableCell({ value, onCommit }: { value: string; onCommit: (v: string) => void }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => { setDraft(value); }, [value]);
+  useEffect(() => { if (editing) ref.current?.select(); }, [editing]);
+  function commit() { setEditing(false); if (draft !== value) onCommit(draft); else setDraft(value); }
+  if (editing) return (
+    <input ref={ref} value={draft} onChange={e => setDraft(e.target.value)}
+      onBlur={commit} onKeyDown={e => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') { setDraft(value); setEditing(false); } }}
+      className="w-full bg-transparent outline-none text-sm" onClick={e => e.stopPropagation()}
+      style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--amber)', minWidth: 60 }}
+    />
+  );
+  return (
+    <div className="truncate text-sm cursor-text" style={{ color: 'var(--foreground)', minWidth: 60 }}
+      onClick={() => setEditing(true)} title={value}
+    >{value || <span style={{ color: 'var(--muted-foreground)', opacity: 0.3 }}>—</span>}</div>
+  );
+}
+
+export function AddRowTr({ headers, visibleIndices, onAdd, onCancel }: { headers: string[]; visibleIndices: number[]; onAdd: (r: string[]) => void; onCancel: () => void }) {
+  const [vals, setVals] = useState(() => Array(headers.length).fill(''));
+  function set(i: number, v: string) { setVals(prev => { const n = [...prev]; n[i] = v; return n; }); }
+  return (
+    <tr style={{ background: 'color-mix(in srgb, var(--amber) 6%, transparent)', borderTop: '1px solid var(--amber)' }}>
+      {visibleIndices.map((ci, pos) => (
+        <td key={ci} className="px-3 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+          <input autoFocus={pos === 0} value={vals[ci]} onChange={e => set(ci, e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') onAdd(vals); if (e.key === 'Escape') onCancel(); }}
+            placeholder={headers[ci]} className="w-full bg-transparent outline-none text-sm placeholder:opacity-30"
+            style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--border)' }}
+          />
+        </td>
+      ))}
+      <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }} />
+    </tr>
+  );
+}

package/_standalone/components/renderers/csv/GalleryView.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import type { GalleryConfig } from './types';
+import { tagColor } from './types';
+
+export function GalleryView({ headers, rows, cfg }: { headers: string[]; rows: string[][]; cfg: GalleryConfig }) {
+  const titleIdx = headers.indexOf(cfg.titleField);
+  const descIdx = headers.indexOf(cfg.descField);
+  const tagIdx = headers.indexOf(cfg.tagField);
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+      {rows.map((row, i) => {
+        const title = titleIdx >= 0 ? row[titleIdx] : row[0] ?? '';
+        const desc = descIdx >= 0 ? row[descIdx] : '';
+        const tag = tagIdx >= 0 ? row[tagIdx] : '';
+        const tc = tag ? tagColor(tag) : null;
+        return (
+          <div key={i} className="rounded-xl border p-4 flex flex-col gap-2 hover:bg-muted/50 transition-colors"
+            style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
+          >
+            {tag && tc && <span className="self-start text-xs px-2 py-0.5 rounded-full font-medium"
+              style={{ background: tc.bg, color: tc.text }}>{tag}</span>}
+            <p className="text-sm font-semibold leading-snug" style={{ color: 'var(--foreground)' }}>{title}</p>
+            {desc && <p className="text-xs leading-relaxed line-clamp-3" style={{ color: 'var(--muted-foreground)' }}>{desc}</p>}
+            <div className="mt-1 flex flex-col gap-0.5">
+              {headers.map((h, ci) => {
+                if (ci === titleIdx || ci === descIdx || ci === tagIdx) return null;
+                const v = row[ci]; if (!v) return null;
+                return <div key={ci} className="flex items-baseline gap-1.5 text-xs">
+                  <span className="font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.6, fontSize: '0.68rem' }}>{h}</span>
+                  <span className="truncate" style={{ color: 'var(--muted-foreground)' }}>{v}</span>
+                </div>;
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}