coaia-visualizer 1.0.0

package/feat-2-webui-local-editing/updated-page.tsx

@@ -0,0 +1,284 @@
+// app/page.tsx - Updated to support auto-loading from API
+"use client"
+
+import { useState, useEffect } from "react"
+import { FileUpload } from "@/components/file-upload"
+import { ChartList } from "@/components/chart-list"
+import { ChartDetail } from "@/components/chart-detail"
+import { DataStats } from "@/components/data-stats"
+import type { ParsedData, Chart } from "@/lib/types"
+import { parseJSONL, organizeData } from "@/lib/jsonl-parser"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Download, Upload, RefreshCw, Save } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/hooks/use-toast"
+
+export default function Page() {
+  const [data, setData] = useState<ParsedData | null>(null)
+  const [selectedChart, setSelectedChart] = useState<Chart | null>(null)
+  const [viewMode, setViewMode] = useState<"hierarchy" | "list">("hierarchy")
+  const [fileName, setFileName] = useState<string>("")
+  const [isAutoLoaded, setIsAutoLoaded] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const { toast } = useToast()
+
+  // Auto-load from API if COAIAV_MEMORY_PATH is set
+  useEffect(() => {
+    async function autoLoad() {
+      try {
+        const response = await fetch('/api/jsonl')
+        if (response.ok) {
+          const { content, filename } = await response.json()
+          handleFileLoad(content, filename)
+          setIsAutoLoaded(true)
+          toast({
+            title: "File loaded",
+            description: `Loaded ${filename} from local filesystem`,
+          })
+        }
+      } catch (error) {
+        console.log('No auto-load available, waiting for manual upload')
+      }
+    }
+    autoLoad()
+  }, [])
+
+  const handleFileLoad = (content: string, name: string) => {
+    try {
+      const records = parseJSONL(content)
+      const organized = organizeData(records)
+      setData(organized)
+      setSelectedChart(null)
+      setFileName(name)
+    } catch (error) {
+      console.error("Failed to parse JSONL:", error)
+      toast({
+        variant: "destructive",
+        title: "Parse error",
+        description: "Failed to parse JSONL file. Please check the file format.",
+      })
+    }
+  }
+
+  const handleReload = async () => {
+    if (!isAutoLoaded) return
+    
+    setIsLoading(true)
+    try {
+      const response = await fetch('/api/jsonl')
+      if (response.ok) {
+        const { content, filename } = await response.json()
+        handleFileLoad(content, filename)
+        toast({
+          title: "Reloaded",
+          description: `Reloaded ${filename} from filesystem`,
+        })
+      } else {
+        throw new Error('Failed to reload')
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Reload failed",
+        description: "Failed to reload file from filesystem",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSave = async () => {
+    if (!data || !isAutoLoaded) return
+
+    setIsLoading(true)
+    try {
+      const jsonlLines: string[] = []
+
+      // Export all entities
+      for (const entity of data.entities.values()) {
+        jsonlLines.push(JSON.stringify(entity))
+      }
+
+      // Export all relations
+      for (const relation of data.relations) {
+        jsonlLines.push(JSON.stringify(relation))
+      }
+
+      const response = await fetch('/api/jsonl', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: jsonlLines.join('\n') + '\n' })
+      })
+
+      if (response.ok) {
+        const { backup } = await response.json()
+        toast({
+          title: "Saved",
+          description: `File saved. Backup created at ${backup}`,
+        })
+      } else {
+        throw new Error('Save failed')
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Save failed",
+        description: "Failed to save changes to filesystem",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleExportData = () => {
+    if (!data) return
+
+    const jsonlLines: string[] = []
+
+    // Export all entities
+    for (const entity of data.entities.values()) {
+      jsonlLines.push(JSON.stringify(entity))
+    }
+
+    // Export all relations
+    for (const relation of data.relations) {
+      jsonlLines.push(JSON.stringify(relation))
+    }
+
+    const blob = new Blob([jsonlLines.join("\n") + "\n"], { type: "application/jsonl" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = fileName || "coaia-narrative-export.jsonl"
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b border-border bg-card">
+        <div className="container mx-auto px-4 py-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-balance">COAIA Narrative Visualizer</h1>
+              <p className="text-muted-foreground mt-2">
+                Visualize and explore structural tension charts from coaia-narrative JSONL files
+              </p>
+              {isAutoLoaded && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  📁 {fileName}
+                </p>
+              )}
+            </div>
+            {data && (
+              <div className="flex items-center gap-2">
+                {isAutoLoaded && (
+                  <>
+                    <Button onClick={handleSave} variant="default" size="sm" disabled={isLoading}>
+                      <Save className="w-4 h-4 mr-2" />
+                      Save Changes
+                    </Button>
+                    <Button onClick={handleReload} variant="outline" size="sm" disabled={isLoading}>
+                      <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+                      Reload
+                    </Button>
+                  </>
+                )}
+                <Button onClick={handleExportData} variant="outline" size="sm">
+                  <Download className="w-4 h-4 mr-2" />
+                  Export JSONL
+                </Button>
+                <Button onClick={() => setData(null)} variant="outline" size="sm">
+                  <Upload className="w-4 h-4 mr-2" />
+                  Load New File
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        {!data ? (
+          <div className="max-w-2xl mx-auto">
+            <FileUpload onFileLoad={handleFileLoad} />
+            <div className="mt-8 p-6 bg-muted/30 rounded-lg">
+              <h2 className="text-lg font-semibold mb-3">About This Tool</h2>
+              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+                This visualizer helps you explore and understand structural tension charts created by the
+                coaia-narrative MCP server. It displays the creative tension between current reality and desired
+                outcomes, action steps, narrative beats across multiple universes, and the relationships between
+                entities.
+              </p>
+              <div className="space-y-2">
+                <h3 className="text-sm font-semibold">Supported Features:</h3>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-1 mt-1">•</span>
+                    <span>Hierarchical chart visualization with expandable sub-charts</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-2 mt-1">•</span>
+                    <span>Action step tracking with completion status and due dates</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-3 mt-1">•</span>
+                    <span>Narrative beats with multi-universe perspectives</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-4 mt-1">•</span>
+                    <span>Entity relation graph visualization</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-5 mt-1">•</span>
+                    <span>Local file editing and auto-saving when launched via CLI</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <DataStats data={data} />
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-1">
+                <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
+                  <TabsList className="w-full">
+                    <TabsTrigger value="hierarchy" className="flex-1">
+                      Hierarchy
+                    </TabsTrigger>
+                    <TabsTrigger value="list" className="flex-1">
+                      All Charts
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="hierarchy" className="mt-4">
+                    <ChartList
+                      data={data}
+                      selectedChart={selectedChart}
+                      onSelectChart={setSelectedChart}
+                      mode="hierarchy"
+                    />
+                  </TabsContent>
+                  <TabsContent value="list" className="mt-4">
+                    <ChartList data={data} selectedChart={selectedChart} onSelectChart={setSelectedChart} mode="list" />
+                  </TabsContent>
+                </Tabs>
+              </div>
+              <div className="lg:col-span-2">
+                {selectedChart ? (
+                  <ChartDetail chart={selectedChart} data={data} />
+                ) : (
+                  <div className="bg-card border border-border rounded-lg p-12 text-center">
+                    <p className="text-muted-foreground">Select a chart from the list to view details</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/hooks/use-toast.ts

@@ -0,0 +1,17 @@
+import { toast as sonnerToast } from "sonner"
+
+export function useToast() {
+  return {
+    toast: ({ title, description, variant }: { 
+      title?: string; 
+      description?: string; 
+      variant?: "default" | "destructive" 
+    }) => {
+      if (variant === "destructive") {
+        sonnerToast.error(title || "Error", { description })
+      } else {
+        sonnerToast.success(title || "Success", { description })
+      }
+    }
+  }
+}

package/lib/jsonl-parser.ts

@@ -0,0 +1,153 @@
+import type { EntityRecord, RelationRecord, JSONLRecord, Chart, ParsedData } from "./types"
+
+export function parseJSONL(content: string): JSONLRecord[] {
+  const lines = content.trim().split("\n")
+  const records: JSONLRecord[] = []
+
+  for (const line of lines) {
+    if (!line.trim()) continue
+    try {
+      const record = JSON.parse(line)
+      records.push(record)
+    } catch (error) {
+      console.error("Failed to parse line:", line, error)
+    }
+  }
+
+  return records
+}
+
+export function organizeData(records: JSONLRecord[]): ParsedData {
+  const entities = new Map<string, EntityRecord>()
+  const relations: RelationRecord[] = []
+  const charts = new Map<string, Chart>()
+
+  console.log("[v0] Total records to process:", records.length)
+
+  // First pass: separate entities and relations
+  for (const record of records) {
+    if (record.type === "entity") {
+      entities.set(record.name, record)
+    } else if (record.type === "relation") {
+      relations.push(record)
+    }
+  }
+
+  console.log("[v0] Total entities:", entities.size)
+  console.log("[v0] Total relations:", relations.length)
+
+  // Second pass: create chart structures
+  for (const [name, entity] of entities.entries()) {
+    if (entity.entityType === "structural_tension_chart") {
+      const chartId = entity.metadata.chartId || entity.name.replace("_chart", "")
+      console.log("[v0] Found chart:", chartId, "Level:", entity.metadata.level, "Name:", entity.name)
+
+      if (!charts.has(chartId)) {
+        charts.set(chartId, {
+          id: chartId,
+          chartEntity: entity,
+          actions: [],
+          narrativeBeats: [],
+          subCharts: [],
+          level: entity.metadata.level || 0,
+          parentChart: entity.metadata.parentChart,
+          relations: [],
+        })
+      }
+    }
+  }
+
+  console.log("[v0] Total charts created:", charts.size)
+
+  // Third pass: populate charts with their components
+  for (const [name, entity] of entities.entries()) {
+    let chartId = entity.metadata.chartId
+
+    // If no chartId in metadata, extract from entity name
+    if (!chartId && name.includes("_")) {
+      const match = name.match(/^(chart_\d+)/)
+      if (match) {
+        chartId = match[1]
+      }
+    }
+
+    const chart = charts.get(chartId)
+
+    if (!chart) {
+      if (entity.entityType !== "structural_tension_chart") {
+        console.log("[v0] No chart found for entity:", name, "chartId:", chartId)
+      }
+      continue
+    }
+
+    switch (entity.entityType) {
+      case "desired_outcome":
+        chart.desiredOutcome = entity
+        break
+      case "current_reality":
+        chart.currentReality = entity
+        break
+      case "action_step":
+        chart.actions.push(entity)
+        break
+      case "narrative_beat":
+        chart.narrativeBeats.push(entity)
+        break
+    }
+  }
+
+  for (const [id, chart] of charts.entries()) {
+    console.log(
+      `[v0] Chart ${id}: ${chart.actions.length} actions, ${chart.narrativeBeats.length} beats, level ${chart.level}`,
+    )
+  }
+
+  // Fourth pass: organize chart hierarchy and relations
+  for (const chart of charts.values()) {
+    chart.relations = relations.filter(
+      (r) =>
+        r.from.startsWith(chart.id) ||
+        r.to.startsWith(chart.id) ||
+        r.from.startsWith(`chart_${chart.id}`) ||
+        r.to.startsWith(`chart_${chart.id}`),
+    )
+
+    if (chart.parentChart) {
+      const parentId = chart.parentChart.replace("chart_", "")
+      const parentChart = charts.get(parentId) || charts.get(chart.parentChart)
+      if (parentChart) {
+        parentChart.subCharts.push(chart)
+        console.log(`[v0] Added ${chart.id} as subChart of ${parentChart.id}`)
+      } else {
+        console.log(`[v0] Parent chart not found: ${chart.parentChart} for chart ${chart.id}`)
+      }
+    }
+  }
+
+  // Identify root charts (level 0 or no parent)
+  const rootCharts = Array.from(charts.values()).filter((chart) => chart.level === 0 || !chart.parentChart)
+
+  console.log("[v0] Root charts found:", rootCharts.length)
+  console.log(
+    "[v0] Root chart IDs:",
+    rootCharts.map((c) => c.id),
+  )
+
+  return {
+    charts: Array.from(charts.values()),
+    entities,
+    relations,
+    rootCharts,
+  }
+}
+
+export function getChartSummary(chart: Chart): string {
+  const outcome = chart.desiredOutcome?.observations[0] || "No desired outcome"
+  return outcome.length > 100 ? outcome.substring(0, 100) + "..." : outcome
+}
+
+export function getChartProgress(chart: Chart): number {
+  if (chart.actions.length === 0) return 0
+  const completed = chart.actions.filter((a) => a.metadata.completionStatus).length
+  return Math.round((completed / chart.actions.length) * 100)
+}

package/lib/types.ts

@@ -0,0 +1,39 @@
+// Type definitions for coaia-narrative JSONL data structures
+
+export interface EntityRecord {
+  type: "entity"
+  name: string
+  entityType: "structural_tension_chart" | "desired_outcome" | "current_reality" | "action_step" | "narrative_beat"
+  observations: string[]
+  metadata: Record<string, any>
+}
+
+export interface RelationRecord {
+  type: "relation"
+  from: string
+  to: string
+  relationType: "contains" | "creates_tension_with" | "advances_toward" | "documents"
+  metadata: Record<string, any>
+}
+
+export type JSONLRecord = EntityRecord | RelationRecord
+
+export interface Chart {
+  id: string
+  chartEntity: EntityRecord
+  desiredOutcome?: EntityRecord
+  currentReality?: EntityRecord
+  actions: EntityRecord[]
+  narrativeBeats: EntityRecord[]
+  subCharts: Chart[]
+  level: number
+  parentChart?: string
+  relations: RelationRecord[]
+}
+
+export interface ParsedData {
+  charts: Chart[]
+  entities: Map<string, EntityRecord>
+  relations: RelationRecord[]
+  rootCharts: Chart[]
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/next.config.mjs

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+ 
+}
+
+export default nextConfig

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "coaia-visualizer",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "bin": {
+    "coaia-visualizer": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "eslint .",
+    "start": "next start",
+    "build:cli": "tsc cli.ts --outDir dist --module esnext --target es2022 --moduleResolution bundler --esModuleInterop --skipLibCheck",
+    "prepare": "npm run build:cli"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@types/minimist": "^1.2.5",
+    "@vercel/analytics": "1.3.1",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "4.1.0",
+    "dotenv": "^17.2.3",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "minimist": "^1.2.8",
+    "next": "16.0.10",
+    "next-themes": "^0.4.6",
+    "react": "19.2.0",
+    "react-day-picker": "9.8.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.60.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.9",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8.5",
+    "tailwindcss": "^4.1.9",
+    "tw-animate-css": "1.3.3",
+    "typescript": "^5"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config

package/public/icon.svg

@@ -0,0 +1,26 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @media (prefers-color-scheme: light) {
+      .background { fill: black; }
+      .foreground { fill: white; }
+    }
+    @media (prefers-color-scheme: dark) {
+      .background { fill: white; }
+      .foreground { fill: black; }
+    }
+  </style>
+  <g clip-path="url(#clip0_7960_43945)">
+    <rect class="background" width="180" height="180" rx="37" />
+    <g style="transform: scale(95%); transform-origin: center">
+      <path class="foreground"
+        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
+      <path class="foreground"
+        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_7960_43945">
+      <rect width="180" height="180" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/public/placeholder-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>

package/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>