@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/device/zone-editor/ZoneCanvas.tsx

@@ -1,354 +0,0 @@
-import { useRef, useState, useEffect, useCallback } from 'react'
-import { Stage, Layer, Line, Circle, Text, Group, Arrow } from 'react-konva'
-import type Konva from 'konva'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface Zone {
-  id: string
-  name: string
-  type: 'intrusion' | 'package-watch' | 'tripwire'
-  color: string
-  points: { x: number; y: number }[] // normalized 0-1
-}
-
-interface ZoneCanvasProps {
-  zones: Zone[]
-  selectedZoneId: string | null
-  onSelectZone: (id: string | null) => void
-  onZonePointsChange: (id: string, points: { x: number; y: number }[]) => void
-  onZoneComplete: (zone: Zone) => void
-  drawingType: 'intrusion' | 'package-watch' | 'tripwire' | null
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function toCanvas(p: { x: number; y: number }, w: number, h: number) {
-  return { x: p.x * w, y: p.y * h }
-}
-
-function toNorm(p: { x: number; y: number }, w: number, h: number) {
-  return { x: p.x / w, y: p.y / h }
-}
-
-function flatPoints(points: { x: number; y: number }[], w: number, h: number): number[] {
-  return points.flatMap((p) => [p.x * w, p.y * h])
-}
-
-function zoneColor(zone: Zone, selected: boolean): string {
-  return selected ? '#6366f1' : zone.color
-}
-
-const GRID_COLS = 16
-const GRID_ROWS = 9
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export function ZoneCanvas({
-  zones,
-  selectedZoneId,
-  onSelectZone,
-  onZonePointsChange,
-  onZoneComplete,
-  drawingType,
-}: ZoneCanvasProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [size, setSize] = useState({ w: 800, h: 450 })
-  const [drawPoints, setDrawPoints] = useState<{ x: number; y: number }[]>([])
-  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
-
-  // Resize observer
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    const ro = new ResizeObserver((entries) => {
-      const entry = entries[0]
-      if (entry) {
-        const { width } = entry.contentRect
-        setSize({ w: width, h: (width * 9) / 16 })
-      }
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-
-  const isDrawing = drawingType !== null
-
-  const handleStageClick = useCallback(
-    (e: Konva.KonvaEventObject<MouseEvent>) => {
-      if (!isDrawing) {
-        onSelectZone(null)
-        return
-      }
-      const stage = e.target.getStage()
-      if (!stage) return
-      const pos = stage.getPointerPosition()
-      if (!pos) return
-
-      const norm = toNorm(pos, size.w, size.h)
-      const isTripwire = drawingType === 'tripwire'
-
-      if (drawPoints.length === 0) {
-        setDrawPoints([norm])
-        return
-      }
-
-      // For tripwire: complete after 2 points
-      if (isTripwire && drawPoints.length === 1) {
-        const newPoints = [...drawPoints, norm]
-        const zone: Zone = {
-          id: crypto.randomUUID(),
-          name: 'Tripwire',
-          type: 'tripwire',
-          color: '#f59e0b',
-          points: newPoints,
-        }
-        onZoneComplete(zone)
-        setDrawPoints([])
-        return
-      }
-
-      // Check if clicking near first point to close polygon
-      if (drawPoints.length >= 3 && !isTripwire) {
-        const first = toCanvas(drawPoints[0]!, size.w, size.h)
-        const dist = Math.hypot(pos.x - first.x, pos.y - first.y)
-        if (dist < 12) {
-          const zone: Zone = {
-            id: crypto.randomUUID(),
-            name: drawingType === 'package-watch' ? 'Package Watch' : 'Zone',
-            type: drawingType,
-            color: drawingType === 'package-watch' ? '#10b981' : '#3b82f6',
-            points: drawPoints,
-          }
-          onZoneComplete(zone)
-          setDrawPoints([])
-          return
-        }
-      }
-
-      setDrawPoints((prev) => [...prev, norm])
-    },
-    [isDrawing, drawPoints, size, drawingType, onZoneComplete, onSelectZone],
-  )
-
-  const handleDblClick = useCallback(
-    (e: Konva.KonvaEventObject<MouseEvent>) => {
-      if (!isDrawing || drawingType === 'tripwire') return
-      if (drawPoints.length < 3) return
-      e.cancelBubble = true
-      const zone: Zone = {
-        id: crypto.randomUUID(),
-        name: drawingType === 'package-watch' ? 'Package Watch' : 'Zone',
-        type: drawingType,
-        color: drawingType === 'package-watch' ? '#10b981' : '#3b82f6',
-        points: drawPoints,
-      }
-      onZoneComplete(zone)
-      setDrawPoints([])
-    },
-    [isDrawing, drawingType, drawPoints, onZoneComplete],
-  )
-
-  const handleMouseMove = useCallback(
-    (e: Konva.KonvaEventObject<MouseEvent>) => {
-      const stage = e.target.getStage()
-      if (!stage) return
-      const pos = stage.getPointerPosition()
-      setCursorPos(pos ?? null)
-    },
-    [],
-  )
-
-  // Grid lines
-  const gridLines: React.ReactNode[] = []
-  for (let i = 1; i < GRID_COLS; i++) {
-    const x = (size.w / GRID_COLS) * i
-    gridLines.push(
-      <Line key={`gv-${i}`} points={[x, 0, x, size.h]} stroke="#ffffff" strokeWidth={0.5} opacity={0.08} />,
-    )
-  }
-  for (let i = 1; i < GRID_ROWS; i++) {
-    const y = (size.h / GRID_ROWS) * i
-    gridLines.push(
-      <Line key={`gh-${i}`} points={[0, y, size.w, y]} stroke="#ffffff" strokeWidth={0.5} opacity={0.08} />,
-    )
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className="w-full bg-zinc-900 rounded-lg overflow-hidden"
-      style={{ cursor: isDrawing ? 'crosshair' : 'default' }}
-    >
-      <Stage
-        width={size.w}
-        height={size.h}
-        onClick={handleStageClick}
-        onDblClick={handleDblClick}
-        onMouseMove={handleMouseMove}
-      >
-        {/* Background + grid */}
-        <Layer>
-          <Line points={[0, 0, size.w, 0, size.w, size.h, 0, size.h, 0, 0]} stroke="transparent" strokeWidth={0} />
-          {gridLines}
-        </Layer>
-
-        {/* Existing zones */}
-        <Layer>
-          {zones.map((zone) => {
-            const selected = zone.id === selectedZoneId
-            const color = zoneColor(zone, selected)
-            const pts = flatPoints(zone.points, size.w, size.h)
-            const isTripwire = zone.type === 'tripwire'
-
-            return (
-              <Group
-                key={zone.id}
-                onClick={(e) => {
-                  e.cancelBubble = true
-                  if (!isDrawing) onSelectZone(zone.id)
-                }}
-              >
-                {isTripwire ? (
-                  <Arrow
-                    points={pts}
-                    stroke={color}
-                    strokeWidth={selected ? 3 : 2}
-                    fill={color}
-                    pointerLength={10}
-                    pointerWidth={8}
-                    opacity={selected ? 1 : 0.8}
-                  />
-                ) : (
-                  <Line
-                    points={pts}
-                    closed
-                    fill={color + '33'}
-                    stroke={color}
-                    strokeWidth={selected ? 2.5 : 1.5}
-                    opacity={selected ? 1 : 0.85}
-                  />
-                )}
-
-                {/* Zone label */}
-                {zone.points.length > 0 && (
-                  <Text
-                    x={toCanvas(zone.points[0]!, size.w, size.h).x + 4}
-                    y={toCanvas(zone.points[0]!, size.w, size.h).y + 4}
-                    text={zone.name}
-                    fontSize={11}
-                    fill={color}
-                    fontStyle="bold"
-                  />
-                )}
-
-                {/* Drag handles for selected zone */}
-                {selected &&
-                  zone.points.map((p, idx) => {
-                    const cp = toCanvas(p, size.w, size.h)
-                    return (
-                      <Circle
-                        key={idx}
-                        x={cp.x}
-                        y={cp.y}
-                        radius={5}
-                        fill={color}
-                        stroke="#ffffff"
-                        strokeWidth={1.5}
-                        draggable
-                        onDragMove={(e) => {
-                          const newPt = toNorm({ x: e.target.x(), y: e.target.y() }, size.w, size.h)
-                          const updated = zone.points.map((pp, i) => (i === idx ? newPt : pp))
-                          onZonePointsChange(zone.id, updated)
-                        }}
-                      />
-                    )
-                  })}
-              </Group>
-            )
-          })}
-        </Layer>
-
-        {/* Drawing preview */}
-        <Layer>
-          {isDrawing && drawPoints.length > 0 && (
-            <Group>
-              {drawPoints.length >= 2 && drawingType !== 'tripwire' && (
-                <Line
-                  points={flatPoints(drawPoints, size.w, size.h)}
-                  stroke="#6366f1"
-                  strokeWidth={1.5}
-                  dash={[6, 3]}
-                  opacity={0.8}
-                />
-              )}
-              {drawPoints.length === 1 && drawingType === 'tripwire' && cursorPos && (
-                <Line
-                  points={[
-                    drawPoints[0]!.x * size.w,
-                    drawPoints[0]!.y * size.h,
-                    cursorPos.x,
-                    cursorPos.y,
-                  ]}
-                  stroke="#f59e0b"
-                  strokeWidth={1.5}
-                  dash={[6, 3]}
-                  opacity={0.7}
-                />
-              )}
-              {/* Ghost line to cursor */}
-              {cursorPos && drawPoints.length >= 1 && drawingType !== 'tripwire' && (
-                <Line
-                  points={[
-                    drawPoints[drawPoints.length - 1]!.x * size.w,
-                    drawPoints[drawPoints.length - 1]!.y * size.h,
-                    cursorPos.x,
-                    cursorPos.y,
-                  ]}
-                  stroke="#6366f1"
-                  strokeWidth={1}
-                  dash={[4, 4]}
-                  opacity={0.5}
-                />
-              )}
-              {/* Points */}
-              {drawPoints.map((p, idx) => {
-                const cp = toCanvas(p, size.w, size.h)
-                const isFirst = idx === 0
-                return (
-                  <Circle
-                    key={idx}
-                    x={cp.x}
-                    y={cp.y}
-                    radius={isFirst && drawPoints.length >= 3 ? 7 : 4}
-                    fill={isFirst && drawPoints.length >= 3 ? '#6366f1' : '#ffffff'}
-                    stroke="#6366f1"
-                    strokeWidth={1.5}
-                    opacity={0.9}
-                  />
-                )
-              })}
-            </Group>
-          )}
-        </Layer>
-      </Stage>
-
-      {/* Hint overlay */}
-      {isDrawing && (
-        <div className="px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700">
-          {drawingType === 'tripwire'
-            ? 'Click to set start point, click again to complete the tripwire'
-            : drawPoints.length < 3
-            ? 'Click to add points (min 3). Double-click or click first point to close.'
-            : 'Continue adding points. Double-click or click first point to close.'}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/device/zone-editor/ZoneForm.tsx

@@ -1,128 +0,0 @@
-import { Trash2 } from 'lucide-react'
-import type { Zone } from './ZoneCanvas'
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const PRESET_COLORS = [
-  '#3b82f6', // blue
-  '#10b981', // green
-  '#f59e0b', // amber
-  '#ef4444', // red
-  '#8b5cf6', // purple
-  '#06b6d4', // cyan
-  '#f97316', // orange
-  '#ec4899', // pink
-]
-
-const TYPE_OPTIONS: { value: Zone['type']; label: string }[] = [
-  { value: 'intrusion', label: 'Intrusion' },
-  { value: 'package-watch', label: 'Package Watch' },
-  { value: 'tripwire', label: 'Tripwire' },
-]
-
-const INPUT_CLASS =
-  'w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none'
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-interface ZoneFormProps {
-  zone: Zone
-  onChange: (updated: Zone) => void
-  onDelete: () => void
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export function ZoneForm({ zone, onChange, onDelete }: ZoneFormProps) {
-  return (
-    <div className="flex flex-col gap-3">
-      <h3 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wider">Edit Zone</h3>
-
-      {/* Name */}
-      <div>
-        <label className="block text-xs font-medium text-foreground mb-1">Name</label>
-        <input
-          type="text"
-          className={INPUT_CLASS}
-          value={zone.name}
-          onChange={(e) => onChange({ ...zone, name: e.target.value })}
-          placeholder="Zone name"
-        />
-      </div>
-
-      {/* Type */}
-      <div>
-        <label className="block text-xs font-medium text-foreground mb-1">Type</label>
-        <select
-          className={INPUT_CLASS}
-          value={zone.type}
-          onChange={(e) => onChange({ ...zone, type: e.target.value as Zone['type'] })}
-        >
-          {TYPE_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Color */}
-      <div>
-        <label className="block text-xs font-medium text-foreground mb-1.5">Color</label>
-        <div className="flex flex-wrap gap-1.5 mb-2">
-          {PRESET_COLORS.map((color) => (
-            <button
-              key={color}
-              type="button"
-              title={color}
-              className={[
-                'h-5 w-5 rounded-md border-2 transition-transform hover:scale-110',
-                zone.color === color ? 'border-white scale-110' : 'border-transparent',
-              ].join(' ')}
-              style={{ backgroundColor: color }}
-              onClick={() => onChange({ ...zone, color })}
-            />
-          ))}
-        </div>
-        {/* Custom color input */}
-        <div className="flex items-center gap-2">
-          <input
-            type="color"
-            className="h-7 w-7 rounded border border-border bg-background cursor-pointer p-0.5"
-            value={zone.color}
-            onChange={(e) => onChange({ ...zone, color: e.target.value })}
-          />
-          <input
-            type="text"
-            className={INPUT_CLASS + ' font-mono flex-1'}
-            value={zone.color}
-            placeholder="#000000"
-            onChange={(e) => onChange({ ...zone, color: e.target.value })}
-          />
-        </div>
-      </div>
-
-      {/* Point count info */}
-      <p className="text-[10px] text-foreground-subtle">
-        {zone.type === 'tripwire' ? 'Tripwire: 2 points' : `Polygon: ${zone.points.length} points`}
-        {zone.points.length > 0 && ' — drag handles on canvas to reshape'}
-      </p>
-
-      {/* Delete */}
-      <button
-        type="button"
-        onClick={onDelete}
-        className="mt-1 flex items-center justify-center gap-1.5 w-full rounded-md border border-danger/40 bg-danger/10 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors"
-      >
-        <Trash2 className="h-3 w-3" />
-        Delete zone
-      </button>
-    </div>
-  )
-}

package/src/components/device/zone-editor/ZoneList.tsx

@@ -1,150 +0,0 @@
-import { Plus, Pencil, Trash2, Minus } from 'lucide-react'
-import type { Zone } from './ZoneCanvas'
-
-// ---------------------------------------------------------------------------
-// Type badge helper
-// ---------------------------------------------------------------------------
-
-const TYPE_LABELS: Record<Zone['type'], string> = {
-  intrusion: 'Intrusion',
-  'package-watch': 'Package',
-  tripwire: 'Tripwire',
-}
-
-const TYPE_COLORS: Record<Zone['type'], string> = {
-  intrusion: 'bg-danger/10 text-danger',
-  'package-watch': 'bg-success/10 text-success',
-  tripwire: 'bg-warning/10 text-warning',
-}
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-interface ZoneListProps {
-  zones: Zone[]
-  selectedZoneId: string | null
-  drawingType: 'intrusion' | 'package-watch' | 'tripwire' | null
-  onSelectZone: (id: string | null) => void
-  onDeleteZone: (id: string) => void
-  onStartDraw: (type: 'intrusion' | 'package-watch' | 'tripwire') => void
-  onCancelDraw: () => void
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export function ZoneList({
-  zones,
-  selectedZoneId,
-  drawingType,
-  onSelectZone,
-  onDeleteZone,
-  onStartDraw,
-  onCancelDraw,
-}: ZoneListProps) {
-  return (
-    <div className="flex flex-col gap-3">
-      {/* Add buttons */}
-      <div className="flex flex-col gap-1.5">
-        {drawingType ? (
-          <button
-            type="button"
-            onClick={onCancelDraw}
-            className="w-full flex items-center justify-center gap-1.5 rounded-md border border-warning/40 bg-warning/10 px-3 py-1.5 text-xs font-medium text-warning hover:bg-warning/20 transition-colors"
-          >
-            <Minus className="h-3 w-3" />
-            Cancel drawing
-          </button>
-        ) : (
-          <>
-            <button
-              type="button"
-              onClick={() => onStartDraw('intrusion')}
-              className="w-full flex items-center justify-center gap-1.5 rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium text-foreground hover:bg-surface-hover transition-colors"
-            >
-              <Plus className="h-3 w-3" />
-              Add Zone
-            </button>
-            <button
-              type="button"
-              onClick={() => onStartDraw('tripwire')}
-              className="w-full flex items-center justify-center gap-1.5 rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium text-foreground hover:bg-surface-hover transition-colors"
-            >
-              <Plus className="h-3 w-3" />
-              Add Tripwire
-            </button>
-          </>
-        )}
-      </div>
-
-      {/* Zone list */}
-      {zones.length === 0 ? (
-        <p className="text-center text-[11px] text-foreground-subtle py-4">
-          No zones yet. Click "Add Zone" or "Add Tripwire" to start.
-        </p>
-      ) : (
-        <div className="flex flex-col gap-1">
-          {zones.map((zone) => {
-            const isSelected = zone.id === selectedZoneId
-            return (
-              <div
-                key={zone.id}
-                className={[
-                  'flex items-center gap-2 rounded-md border px-2 py-1.5 cursor-pointer transition-colors',
-                  isSelected
-                    ? 'border-primary/50 bg-primary/10'
-                    : 'border-border bg-surface hover:bg-surface-hover',
-                ].join(' ')}
-                onClick={() => onSelectZone(isSelected ? null : zone.id)}
-              >
-                {/* Color swatch */}
-                <div
-                  className="h-3 w-3 rounded-sm flex-shrink-0"
-                  style={{ backgroundColor: zone.color }}
-                />
-
-                {/* Name */}
-                <span className="flex-1 truncate text-xs font-medium text-foreground">{zone.name}</span>
-
-                {/* Type badge */}
-                <span
-                  className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${TYPE_COLORS[zone.type]}`}
-                >
-                  {TYPE_LABELS[zone.type]}
-                </span>
-
-                {/* Actions */}
-                <div className="flex items-center gap-0.5 flex-shrink-0">
-                  <button
-                    type="button"
-                    title="Select"
-                    className="p-0.5 text-foreground-subtle hover:text-primary rounded transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onSelectZone(zone.id)
-                    }}
-                  >
-                    <Pencil className="h-3 w-3" />
-                  </button>
-                  <button
-                    type="button"
-                    title="Delete"
-                    className="p-0.5 text-foreground-subtle hover:text-danger rounded transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onDeleteZone(zone.id)
-                    }}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}