chore(network): remove asset style lab

frontend/src/pages/NetworkDiagrams/AssetStyleShowcase.tsx

@@ -1,220 +0,0 @@
-import type { ComponentType, CSSProperties } from 'react'
-import {
-  ArrowLeft,
-  Cloud,
-  Database,
-  Monitor,
-  Network,
-  Server,
-  Shield,
-  Wifi,
-} from 'lucide-react'
-import { useNavigate } from 'react-router-dom'
-import { cn } from '@/lib/utils'
-
-type NodeSpec = {
-  id: string
-  label: string
-  meta: string
-  x: number
-  y: number
-  accent: string
-  Icon: ComponentType<{ size?: number; className?: string; style?: CSSProperties }>
-  chip: string
-}
-
-const nodes: NodeSpec[] = [
-  { id: 'wan', label: 'ISP Edge', meta: 'wan uplink', x: 240, y: 28, accent: '#67e8f9', Icon: Cloud, chip: 'WAN' },
-  { id: 'fw', label: 'Perimeter FW', meta: 'ha pair', x: 240, y: 150, accent: '#f87171', Icon: Shield, chip: 'FW' },
-  { id: 'core', label: 'Core Switch', meta: 'stacked', x: 240, y: 278, accent: '#60a5fa', Icon: Network, chip: 'SW' },
-  { id: 'ap', label: 'Access Point', meta: 'wifi 6', x: 72, y: 406, accent: '#60a5fa', Icon: Wifi, chip: 'AP' },
-  { id: 'srv', label: 'File Server', meta: 'vm host', x: 240, y: 406, accent: '#34d399', Icon: Server, chip: 'SRV' },
-  { id: 'nas', label: 'Backup NAS', meta: 'snapshots', x: 408, y: 406, accent: '#a78bfa', Icon: Database, chip: 'NAS' },
-  { id: 'desk', label: 'User Workstation', meta: 'accounting', x: 240, y: 534, accent: '#fbbf24', Icon: Monitor, chip: 'WS' },
-]
-
-const links = [
-  ['wan', 'fw'],
-  ['fw', 'core'],
-  ['core', 'ap'],
-  ['core', 'srv'],
-  ['core', 'nas'],
-  ['core', 'desk'],
-] as const
-
-function ApplianceNode({ node }: { node: NodeSpec }) {
-  const { Icon } = node
-  return (
-    <div
-      className="absolute h-[108px] w-[136px] rounded-lg border border-default bg-card"
-      style={{ left: node.x, top: node.y }}
-    >
-      <div className="flex items-center justify-between border-b border-default px-2 py-1">
-        <span
-          className="rounded border px-1.5 py-0.5 text-[9px] font-semibold tracking-[0.22em]"
-          style={{ color: node.accent, borderColor: `${node.accent}66`, backgroundColor: `${node.accent}14` }}
-        >
-          {node.chip}
-        </span>
-        <span className="text-[9px] uppercase tracking-[0.18em] text-muted-foreground">Asset</span>
-      </div>
-      <div className="px-3 pb-2 pt-3">
-        <div
-          className="mb-3 flex h-11 items-center justify-center rounded-md border"
-          style={{ borderColor: `${node.accent}55`, backgroundColor: `${node.accent}12` }}
-        >
-          <Icon size={22} style={{ color: node.accent }} />
-        </div>
-        <div className="text-[12px] font-semibold text-heading">{node.label}</div>
-        <div className="mt-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground">{node.meta}</div>
-      </div>
-      <div className="absolute bottom-2 right-2 flex gap-1">
-        <span className="h-1.5 w-1.5 rounded-full bg-border-default" />
-        <span className="h-1.5 w-1.5 rounded-full bg-border-default/75" />
-        <span className="h-1.5 w-1.5 rounded-full bg-border-default/50" />
-      </div>
-    </div>
-  )
-}
-
-function SaaSNode({ node }: { node: NodeSpec }) {
-  const { Icon } = node
-  return (
-    <div
-      className="absolute h-[100px] w-[136px] rounded-2xl border border-default bg-card/95"
-      style={{ left: node.x, top: node.y }}
-    >
-      <div className="flex h-full flex-col items-center justify-center px-3 text-center">
-        <div
-          className="mb-3 flex h-11 w-11 items-center justify-center rounded-2xl"
-          style={{ backgroundColor: `${node.accent}18`, color: node.accent }}
-        >
-          <Icon size={20} />
-        </div>
-        <div className="text-[12px] font-semibold text-heading">{node.label}</div>
-        <div className="mt-1 text-[10px] text-muted-foreground">{node.meta}</div>
-      </div>
-    </div>
-  )
-}
-
-function DiagramWires({ variant }: { variant: 'appliance' | 'saas' }) {
-  return (
-    <svg className="absolute inset-0 h-full w-full">
-      {links.map(([from, to]) => {
-        const source = nodes.find(node => node.id === from)
-        const target = nodes.find(node => node.id === to)
-        if (!source || !target) return null
-
-        const x1 = source.x + 68
-        const y1 = source.y + (variant === 'appliance' ? 108 : 100)
-        const x2 = target.x + 68
-        const y2 = target.y
-        const midY = (y1 + y2) / 2
-
-        return (
-          <path
-            key={`${from}-${to}`}
-            d={`M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`}
-            fill="none"
-            stroke={variant === 'appliance' ? '#7d8596' : '#606779'}
-            strokeDasharray={variant === 'appliance' ? '0' : '5 4'}
-            strokeWidth={variant === 'appliance' ? '2.2' : '1.8'}
-          />
-        )
-      })}
-    </svg>
-  )
-}
-
-function DiagramPanel({
-  title,
-  subtitle,
-  description,
-  variant,
-}: {
-  title: string
-  subtitle: string
-  description: string
-  variant: 'appliance' | 'saas'
-}) {
-  return (
-    <section className="flex min-w-0 flex-1 flex-col rounded-2xl border border-default bg-card">
-      <div className="border-b border-default px-5 py-4">
-        <div className="mb-1 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-          {subtitle}
-        </div>
-        <h2 className="font-heading text-xl font-semibold text-heading">{title}</h2>
-        <p className="mt-2 max-w-xl text-sm text-muted-foreground">{description}</p>
-      </div>
-      <div className="p-5">
-        <div
-          className={cn(
-            'relative overflow-hidden rounded-2xl border border-default',
-            variant === 'appliance' ? 'bg-[#171a21]' : 'bg-[#181b23]',
-          )}
-        >
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(132,139,155,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(132,139,155,0.08)_1px,transparent_1px)] bg-[size:24px_24px]" />
-          <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-white/[0.03] to-transparent" />
-          <div className="relative h-[660px]">
-            <DiagramWires variant={variant} />
-            {nodes.map(node =>
-              variant === 'appliance' ? (
-                <ApplianceNode key={node.id} node={node} />
-              ) : (
-                <SaaSNode key={node.id} node={node} />
-              ),
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default function AssetStyleShowcasePage() {
-  const navigate = useNavigate()
-
-  return (
-    <div className="mx-auto max-w-[1560px] px-6 py-8">
-      <div className="mb-6 flex items-start justify-between gap-4">
-        <div>
-          <button
-            onClick={() => navigate('/network-diagrams')}
-            className="mb-4 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
-          >
-            <ArrowLeft size={14} />
-            Back to Network Maps
-          </button>
-          <div className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
-            Asset Style Lab
-          </div>
-          <h1 className="font-heading text-3xl font-bold text-heading">Two directions for network-map assets</h1>
-          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-            Same topology, two visual languages. The left mock-up leans closer to infrastructure documentation.
-            The right mock-up leans toward a cleaner product experience inside the app.
-          </p>
-        </div>
-      </div>
-
-      <div className="grid gap-6 xl:grid-cols-2">
-        <DiagramPanel
-          title="Visio / Network Appliance"
-          subtitle="Documentation-first"
-          description="More chassis cues, stronger device framing, technical chip labels, and more explicit infrastructure character."
-          variant="appliance"
-        />
-        <DiagramPanel
-          title="Clean Premium SaaS"
-          subtitle="Product-first"
-          description="Cleaner geometry, quieter chrome, softer connection treatment, and a more refined in-app editing feel."
-          variant="saas"
-        />
-      </div>
-
-      <div className="mt-6 rounded-2xl border border-default bg-card px-5 py-4 text-sm text-muted-foreground">
-        The fastest next step is to pick the lane that feels more “ResolutionFlow,” then I can translate that look into the actual editor nodes rather than keeping it as a mock-up.
-      </div>
-    </div>
-  )
-}

frontend/src/pages/NetworkDiagrams/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Plus, Search, Network, MoreHorizontal, Upload, ChevronDown, Sparkles } from 'lucide-react'
+import { Plus, Search, Network, MoreHorizontal, Upload, ChevronDown } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { networkDiagramsApi } from '@/api'
 import { toast } from '@/lib/toast'
@@ -171,13 +171,6 @@ export default function NetworkDiagramsPage() {
           <p className="mt-1 text-sm text-muted-foreground">Visual network topology documentation for your clients</p>
         </div>
         <div className="flex gap-2">
-          <button
-            onClick={() => navigate('/network-diagrams/style-lab')}
-            className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"
-          >
-            <Sparkles size={14} />
-            Style Lab
-          </button>
           <button
             onClick={handleImport}
             className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"

frontend/src/router.tsx

@@ -62,7 +62,6 @@ const GuideDetailPage = lazyWithRetry(() => import('@/pages/GuideDetailPage'))
 const AccountSettingsPage = lazyWithRetry(() => import('@/pages/AccountSettingsPage'))
 const NetworkDiagramsPage = lazyWithRetry(() => import('@/pages/NetworkDiagrams'))
 const DiagramEditorPage = lazyWithRetry(() => import('@/pages/NetworkDiagrams/DiagramEditor'))
-const AssetStyleShowcasePage = lazyWithRetry(() => import('@/pages/NetworkDiagrams/AssetStyleShowcase'))
 // Admin pages
 const AdminLayout = lazyWithRetry(() => import('@/components/admin/AdminLayout'))
 const AdminDashboardPage = lazyWithRetry(() => import('@/pages/admin/DashboardPage'))
@@ -200,7 +199,6 @@ export const router = sentryCreateBrowserRouter([
       { path: 'scripts/manage', element: page(ScriptManagePage) },
       { path: 'script-builder', element: page(ScriptBuilderPage) },
       { path: 'network-diagrams', element: page(NetworkDiagramsPage) },
-      { path: 'network-diagrams/style-lab', element: page(AssetStyleShowcasePage) },
       { path: 'network-diagrams/new', element: page(DiagramEditorPage) },
       { path: 'network-diagrams/:id', element: page(DiagramEditorPage) },
       { path: 'kb-accelerator', element: page(KBAcceleratorPage) },