@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/cameras/tabs/StreamsTab.tsx

@@ -1,114 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { Radio, Copy, Check } from 'lucide-react'
-import { useState } from 'react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-
-interface StreamsTabProps {
-  readonly deviceId: string
-}
-
-export function StreamsTab({ deviceId }: StreamsTabProps) {
-  const client = useBackendClient()
-  const [copiedUrl, setCopiedUrl] = useState<string | null>(null)
-
-  const { data: deviceData } = useQuery({
-    queryKey: ['device', deviceId],
-    queryFn: () => client.getDevice(deviceId),
-    enabled: !!deviceId,
-  })
-
-  const device = (deviceData ?? {}) as Record<string, unknown>
-  const serverUrl = (client as unknown as { serverUrl?: string }).serverUrl ?? window.location.origin
-
-  // Build stream URLs from known patterns
-  const streams = [
-    {
-      id: 'webrtc',
-      label: 'WebRTC',
-      resolution: 'Native',
-      codec: 'H.264',
-      url: `${serverUrl}/webrtc/${deviceId}`,
-    },
-    {
-      id: 'hls',
-      label: 'HLS',
-      resolution: 'Native',
-      codec: 'H.264',
-      url: `${serverUrl}/hls/${deviceId}/index.m3u8`,
-    },
-    {
-      id: 'mjpeg',
-      label: 'MJPEG',
-      resolution: 'Scaled',
-      codec: 'MJPEG',
-      url: `${serverUrl}/mjpeg/${deviceId}`,
-    },
-  ]
-
-  async function handleCopy(url: string) {
-    try {
-      await navigator.clipboard.writeText(url)
-      setCopiedUrl(url)
-      setTimeout(() => setCopiedUrl(null), 2000)
-    } catch {
-      // clipboard not available
-    }
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Available streams */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="border-b border-border px-4 py-2.5 flex items-center justify-between">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Available Streams</h2>
-          <span className="text-[10px] text-foreground-subtle">{streams.length} streams</span>
-        </div>
-        <div className="divide-y divide-border">
-          {streams.map((stream) => (
-            <div key={stream.id} className="flex items-center gap-3 px-4 py-3">
-              <div className="flex items-center justify-center rounded-lg h-8 w-8 bg-info/10 flex-shrink-0">
-                <Radio className="h-4 w-4 text-info" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <p className="text-xs font-medium text-foreground">{stream.label}</p>
-                  <span className="text-[9px] bg-surface-hover rounded px-1.5 py-0.5 text-foreground-subtle">
-                    {stream.resolution}
-                  </span>
-                  <span className="text-[9px] bg-surface-hover rounded px-1.5 py-0.5 text-foreground-subtle">
-                    {stream.codec}
-                  </span>
-                </div>
-                <p className="text-[10px] font-mono text-foreground-subtle mt-0.5 truncate">{stream.url}</p>
-              </div>
-              <button
-                onClick={() => handleCopy(stream.url)}
-                className="p-1.5 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors flex-shrink-0"
-                title="Copy URL"
-              >
-                {copiedUrl === stream.url ? (
-                  <Check className="h-3.5 w-3.5 text-success" />
-                ) : (
-                  <Copy className="h-3.5 w-3.5" />
-                )}
-              </button>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Restreamer URLs */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="border-b border-border px-4 py-2.5">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Restreamer</h2>
-        </div>
-        <div className="px-4 py-8 flex flex-col items-center text-center text-foreground-subtle">
-          <p className="text-sm">Restreamer URLs</p>
-          <p className="text-xs mt-1 opacity-70">
-            Restreamer endpoints will be displayed here when a restreamer is configured
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/BlockPicker.tsx

@@ -1,54 +0,0 @@
-import { X } from 'lucide-react'
-import { getAllBlocks } from './block-registry'
-import type { DashboardBlock } from '../../types/dashboard'
-
-interface BlockPickerProps {
-  open: boolean
-  onClose: () => void
-  onSelect: (block: DashboardBlock) => void
-}
-
-export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
-  if (!open) return null
-
-  const blocks = getAllBlocks()
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
-      <div
-        className="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-2xl shadow-black/20"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-sm font-semibold text-foreground">Add Block</h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-md hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-        <div className="grid grid-cols-2 gap-2">
-          {blocks.map((block) => {
-            const Icon = block.icon
-            return (
-              <button
-                key={block.id}
-                onClick={() => { onSelect(block); onClose() }}
-                className="flex items-center gap-3 rounded-lg border border-border p-3 text-left hover:bg-surface-hover hover:border-primary/30 transition-all group"
-              >
-                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 group-hover:bg-primary/15 transition-colors shrink-0">
-                  <Icon className="h-4 w-4 text-primary" />
-                </div>
-                <div>
-                  <span className="text-xs font-medium text-foreground block">{block.name}</span>
-                  <span className="text-[10px] text-foreground-subtle">{block.defaultSize.w}x{block.defaultSize.h}</span>
-                </div>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/BlockWrapper.tsx

@@ -1,97 +0,0 @@
-import { useState } from 'react'
-import { Settings, X, GripVertical } from 'lucide-react'
-import type { DashboardBlock } from '../../types/dashboard'
-
-interface BlockWrapperProps {
-  block: DashboardBlock
-  config: Record<string, unknown>
-  size: { w: number; h: number }
-  onRemove: () => void
-  onConfigChange: (config: Record<string, unknown>) => void
-}
-
-export function BlockWrapper({ block, config, size, onRemove, onConfigChange }: BlockWrapperProps) {
-  const [showConfig, setShowConfig] = useState(false)
-  const Component = block.component
-  const Icon = block.icon
-
-  return (
-    <div className="flex flex-col h-full rounded-lg border border-border bg-surface shadow-sm shadow-black/5 overflow-hidden hover:shadow-md hover:shadow-black/8 transition-shadow">
-      {/* Title bar */}
-      <div className="drag-handle flex items-center h-8 px-2 border-b border-border bg-surface/80 shrink-0 cursor-move group">
-        <GripVertical className="h-3 w-3 text-foreground-subtle/30 group-hover:text-foreground-subtle transition-colors mr-1" />
-        <Icon className="h-3 w-3 text-primary/70 mr-1.5 shrink-0" />
-        <span className="text-[11px] font-semibold text-foreground/80 truncate flex-1">
-          {block.name}
-        </span>
-        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-          {block.configSchema && block.configSchema.length > 0 && (
-            <button
-              onClick={(e) => { e.stopPropagation(); setShowConfig(!showConfig) }}
-              className="p-1 rounded-md hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
-            >
-              <Settings className="h-3 w-3" />
-            </button>
-          )}
-          <button
-            onClick={(e) => { e.stopPropagation(); onRemove() }}
-            className="p-1 rounded-md hover:bg-danger/10 text-foreground-subtle hover:text-danger transition-colors"
-          >
-            <X className="h-3 w-3" />
-          </button>
-        </div>
-      </div>
-
-      {/* Config panel */}
-      {showConfig && block.configSchema && (
-        <div className="p-2.5 border-b border-border bg-background/50 space-y-2">
-          {block.configSchema.map((field) => (
-            <label key={field.key} className="flex items-center gap-2 text-[11px]">
-              <span className="text-foreground-subtle w-20 shrink-0">{field.label}</span>
-              {field.type === 'number' && (
-                <input
-                  type="number"
-                  value={(config[field.key] as number) ?? field.defaultValue ?? ''}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: Number(e.target.value) })}
-                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
-                />
-              )}
-              {field.type === 'text' && (
-                <input
-                  type="text"
-                  value={(config[field.key] as string) ?? field.defaultValue ?? ''}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.value })}
-                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
-                />
-              )}
-              {field.type === 'boolean' && (
-                <input
-                  type="checkbox"
-                  checked={(config[field.key] as boolean) ?? field.defaultValue ?? false}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.checked })}
-                  className="accent-primary"
-                />
-              )}
-              {field.type === 'select' && (
-                <select
-                  value={(config[field.key] as string) ?? field.defaultValue ?? ''}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.value })}
-                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
-                >
-                  {field.options?.map((opt) => (
-                    <option key={opt.value} value={opt.value}>{opt.label}</option>
-                  ))}
-                </select>
-              )}
-            </label>
-          ))}
-        </div>
-      )}
-
-      {/* Block content */}
-      <div className="flex-1 overflow-auto p-3">
-        <Component config={config} size={size} />
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/DashboardGrid.tsx

@@ -1,160 +0,0 @@
-import { useCallback, useState } from 'react'
-import { ResponsiveGridLayout } from 'react-grid-layout'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const GridLayout = ResponsiveGridLayout as any
-import { Plus, LayoutDashboard } from 'lucide-react'
-import { BlockWrapper } from './BlockWrapper'
-import { BlockPicker } from './BlockPicker'
-import { getBlock } from './block-registry'
-import type { DashboardBlock, DashboardLayoutItem, DashboardState } from '../../types/dashboard'
-import 'react-grid-layout/css/styles.css'
-
-const STORAGE_KEY = 'camstack-dashboard-state'
-const BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 0 }
-const COLS = { lg: 12, md: 8, sm: 4, xs: 2 }
-
-function loadState(): DashboardState {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    if (raw) return JSON.parse(raw)
-  } catch { /* ignore */ }
-  return { items: [] }
-}
-
-function saveState(state: DashboardState): void {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
-}
-
-let instanceCounter = 0
-
-export function DashboardGrid() {
-  const [state, setState] = useState<DashboardState>(loadState)
-  const [pickerOpen, setPickerOpen] = useState(false)
-
-  const updateState = useCallback((next: DashboardState) => {
-    setState(next)
-    saveState(next)
-  }, [])
-
-  const handleAddBlock = useCallback((block: DashboardBlock) => {
-    instanceCounter++
-    const instanceId = `${block.id}-${instanceCounter}`
-    const defaultConfig: Record<string, unknown> = {}
-    block.configSchema?.forEach((f) => {
-      if (f.defaultValue !== undefined) defaultConfig[f.key] = f.defaultValue
-    })
-
-    const newItem: DashboardLayoutItem = {
-      i: instanceId,
-      blockId: block.id,
-      x: 0,
-      y: Infinity, // place at bottom
-      w: block.defaultSize.w,
-      h: block.defaultSize.h,
-      config: defaultConfig,
-    }
-
-    updateState({ items: [...state.items, newItem] })
-  }, [state, updateState])
-
-  const handleRemoveBlock = useCallback((instanceId: string) => {
-    updateState({ items: state.items.filter((item) => item.i !== instanceId) })
-  }, [state, updateState])
-
-  const handleConfigChange = useCallback((instanceId: string, config: Record<string, unknown>) => {
-    updateState({
-      items: state.items.map((item) =>
-        item.i === instanceId ? { ...item, config } : item,
-      ),
-    })
-  }, [state, updateState])
-
-  const handleLayoutChange = useCallback((layout: any) => {
-    updateState({
-      items: state.items.map((item) => {
-        const layoutItem = layout.find((l: any) => l.i === item.i)
-        if (!layoutItem) return item
-        return { ...item, x: layoutItem.x, y: layoutItem.y, w: layoutItem.w, h: layoutItem.h }
-      }),
-    })
-  }, [state, updateState])
-
-  const gridLayout = state.items.map((item) => {
-    const block = getBlock(item.blockId)
-    return {
-      i: item.i,
-      x: item.x,
-      y: item.y,
-      w: item.w,
-      h: item.h,
-      minW: block?.minSize?.w ?? 2,
-      minH: block?.minSize?.h ?? 2,
-    }
-  })
-
-  return (
-    <div className="p-4">
-      <div className="flex items-center justify-between mb-4">
-        <h1 className="text-lg font-semibold text-foreground">Dashboard</h1>
-        <button
-          onClick={() => setPickerOpen(true)}
-          className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground"
-        >
-          <Plus className="h-3.5 w-3.5" />
-          Add Block
-        </button>
-      </div>
-
-      {state.items.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-24 text-foreground-subtle">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface border border-border mb-4">
-            <LayoutDashboard className="h-8 w-8 text-foreground-subtle/40" />
-          </div>
-          <p className="text-sm font-medium text-foreground/70">Your dashboard is empty</p>
-          <p className="text-xs text-foreground-subtle mt-1 mb-4">Add blocks to monitor your cameras and system</p>
-          <button
-            onClick={() => setPickerOpen(true)}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-md shadow-primary/20 hover:shadow-lg transition-all"
-          >
-            <Plus className="h-3.5 w-3.5" />
-            Add your first block
-          </button>
-        </div>
-      ) : (
-        <GridLayout
-          layouts={{ lg: gridLayout }}
-          breakpoints={BREAKPOINTS}
-          cols={COLS}
-          rowHeight={60}
-          draggableHandle=".drag-handle"
-          onLayoutChange={handleLayoutChange}
-          isResizable
-          isDraggable
-        >
-          {state.items.map((item) => {
-            const block = getBlock(item.blockId)
-            if (!block) return <div key={item.i} />
-            return (
-              <div key={item.i}>
-                <BlockWrapper
-                  block={block}
-                  config={item.config}
-                  size={{ w: item.w, h: item.h }}
-                  onRemove={() => handleRemoveBlock(item.i)}
-                  onConfigChange={(config) => handleConfigChange(item.i, config)}
-                />
-              </div>
-            )
-          })}
-        </GridLayout>
-      )}
-
-      <BlockPicker
-        open={pickerOpen}
-        onClose={() => setPickerOpen(false)}
-        onSelect={handleAddBlock}
-      />
-    </div>
-  )
-}

package/src/components/dashboard/block-registry.ts

@@ -1,15 +0,0 @@
-import type { DashboardBlock } from '../../types/dashboard'
-
-const registry = new Map<string, DashboardBlock>()
-
-export function registerBlock(block: DashboardBlock): void {
-  registry.set(block.id, block)
-}
-
-export function getBlock(id: string): DashboardBlock | undefined {
-  return registry.get(id)
-}
-
-export function getAllBlocks(): DashboardBlock[] {
-  return Array.from(registry.values())
-}

package/src/components/dashboard/blocks/PipelineStagesBlock.tsx

@@ -1,39 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-import type { BlockProps } from '../../../types/dashboard'
-
-const STAGE_ORDER = [
-  'class-filter', 'tracker', 'sub-detection', 'recognition',
-  'zone-analysis', 'event-generation', 'object-snapshot',
-]
-
-export function PipelineStagesBlock({ config, size }: BlockProps) {
-  const client = useBackendClient()
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['pipelines'],
-    queryFn: () => client.listPipelines(),
-    refetchInterval: 5_000,
-  })
-
-  if (isLoading) return <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-  if (error) return <div className="text-xs text-danger">Failed to load pipelines</div>
-
-  const pipelines = (data ?? []) as Array<Record<string, unknown>>
-
-  return (
-    <div className="space-y-2 text-xs">
-      <div className="flex justify-between text-foreground-subtle">
-        <span>Active pipelines</span>
-        <span className="font-medium text-foreground">{pipelines.length}</span>
-      </div>
-      <div className="space-y-0.5">
-        {STAGE_ORDER.map((stage) => (
-          <div key={stage} className="flex items-center gap-1.5">
-            <div className="h-1.5 w-1.5 rounded-full bg-success shrink-0" />
-            <span className="text-foreground-subtle">{stage}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/blocks/StorageBlock.tsx

@@ -1,66 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-import type { BlockProps } from '../../../types/dashboard'
-
-interface SystemInfo {
-  version?: string
-  uptime?: number
-  nodeVersion?: string
-  platform?: string
-  [key: string]: unknown
-}
-
-function formatUptime(seconds: number): string {
-  if (seconds < 60) return `${Math.floor(seconds)}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-export function StorageBlock({ config: _config, size: _size }: BlockProps) {
-  const client = useBackendClient()
-
-  const { data: systemInfo, isLoading, error } = useQuery<SystemInfo>({
-    queryKey: ['system-info'],
-    queryFn: async () => {
-      const result = await client.getSystemInfo()
-      return result as SystemInfo
-    },
-    refetchInterval: 30_000,
-  })
-
-  const { data: addons } = useQuery({
-    queryKey: ['storage-addons'],
-    queryFn: () => client.listAddons(),
-    refetchInterval: 60_000,
-  })
-
-  if (isLoading) return <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-  if (error) return <div className="text-xs text-danger">Failed to load system info</div>
-
-  const addonList = (addons ?? []) as Array<{ manifest: { id: string } }>
-
-  return (
-    <div className="space-y-1.5 text-xs">
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Platform</span>
-        <span className="text-foreground font-medium">{systemInfo?.platform ?? 'N/A'}</span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Uptime</span>
-        <span className="text-foreground font-medium">
-          {systemInfo?.uptime != null ? formatUptime(systemInfo.uptime) : 'N/A'}
-        </span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Node</span>
-        <span className="text-foreground font-medium font-mono">{systemInfo?.nodeVersion ?? 'N/A'}</span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Addons</span>
-        <span className="text-foreground font-medium">{addonList.length} installed</span>
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/blocks/SystemStatusBlock.tsx

@@ -1,67 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { CheckCircle, AlertTriangle, Loader2 } from 'lucide-react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-import type { BlockProps } from '../../../types/dashboard'
-
-export function SystemStatusBlock({ config, size }: BlockProps) {
-  const client = useBackendClient()
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['system-info'],
-    queryFn: () => client.getSystemInfo(),
-    refetchInterval: 10_000,
-  })
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center gap-2 text-xs text-foreground-subtle">
-        <Loader2 className="h-3.5 w-3.5 animate-spin" />
-        <span>Connecting to server...</span>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-2 text-xs text-danger">
-        <AlertTriangle className="h-3.5 w-3.5" />
-        <span>Unable to reach server</span>
-      </div>
-    )
-  }
-
-  const info = data as Record<string, unknown> | undefined
-
-  return (
-    <div className="space-y-2 text-xs">
-      <div className="flex items-center gap-1.5 mb-2">
-        <CheckCircle className="h-3.5 w-3.5 text-success" />
-        <span className="text-success font-medium">Online</span>
-      </div>
-      <Row label="Version" value={String(info?.version ?? 'N/A')} />
-      <Row label="Uptime" value={formatUptime(info?.uptime as number)} />
-      <Row label="Memory" value={`${formatMB(info?.memoryUsage as number)} MB`} />
-      <Row label="Platform" value={String(info?.platform ?? 'N/A')} />
-    </div>
-  )
-}
-
-function Row({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex justify-between items-center">
-      <span className="text-foreground-subtle">{label}</span>
-      <span className="text-foreground font-medium tabular-nums">{value}</span>
-    </div>
-  )
-}
-
-function formatUptime(seconds?: number): string {
-  if (!seconds) return 'N/A'
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return h > 0 ? `${h}h ${m}m` : `${m}m`
-}
-
-function formatMB(bytes?: number): string {
-  if (!bytes) return 'N/A'
-  return (bytes / 1024 / 1024).toFixed(0)
-}

package/src/components/dashboard/blocks/index.ts

@@ -1,32 +0,0 @@
-import { Monitor, Workflow, HardDrive } from 'lucide-react'
-import { registerBlock } from '../block-registry'
-import { SystemStatusBlock } from './SystemStatusBlock'
-import { PipelineStagesBlock } from './PipelineStagesBlock'
-import { StorageBlock } from './StorageBlock'
-
-registerBlock({
-  id: 'system-status',
-  name: 'System Status',
-  icon: Monitor,
-  defaultSize: { w: 4, h: 2 },
-  minSize: { w: 2, h: 2 },
-  component: SystemStatusBlock,
-})
-
-registerBlock({
-  id: 'pipeline-stages',
-  name: 'Pipeline Stages',
-  icon: Workflow,
-  defaultSize: { w: 4, h: 3 },
-  minSize: { w: 3, h: 2 },
-  component: PipelineStagesBlock,
-})
-
-registerBlock({
-  id: 'storage',
-  name: 'Storage',
-  icon: HardDrive,
-  defaultSize: { w: 4, h: 2 },
-  minSize: { w: 2, h: 2 },
-  component: StorageBlock,
-})