@jjlmoya/utils-home 1.17.0 → 1.24.0

package/src/tool/wifiRangeSimulator/sketch-render-dash.ts

@@ -0,0 +1,170 @@
+import type { Point, Segment, PlacedObject, PlacedDevice, SignalResult } from './logic';
+import { calculateSignalFromSketch, getVerdictColor, computeStreamingVerdict } from './logic';
+import { renderRouter, renderRays } from './sketch-render';
+import { getUI } from './i18n-utils';
+
+const CIRCUMFERENCE = 2 * Math.PI * 70;
+
+function setText(id: string, val: string) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = val;
+}
+
+function setAttr(id: string, attr: string, val: string) {
+  const el = document.getElementById(id);
+  if (el) el.setAttribute(attr, val);
+}
+
+function setStyle(id: string, prop: string, val: string) {
+  const el = document.getElementById(id);
+  if (el) (el as HTMLElement).style.setProperty(prop, val);
+}
+
+function updateRing(percent: number, color: string) {
+  const offset = CIRCUMFERENCE - (CIRCUMFERENCE * percent) / 100;
+  setAttr('sketch-ring-fill', 'stroke-dashoffset', String(offset));
+  setAttr('sketch-ring-fill', 'stroke', color);
+  setStyle('sketch-ring-pct', 'color', color);
+  setText('sketch-ring-pct', `${percent}%`);
+}
+
+function getStatusCol(status: string, pct: number): string {
+  if (pct >= 60) return '#22c55e';
+  if (pct >= 30) return '#f59e0b';
+  return '#ef4444';
+}
+
+function updateStreaming(result: ReturnType<typeof calculateSignalFromSketch>) {
+  const keys = ['4kStreaming', 'onlineGaming', 'videoCalls', 'basicBrowsing'];
+  const thresholds: Record<string, number> = { '4kStreaming': result.strengthPercent, onlineGaming: result.strengthPercent, videoCalls: result.strengthPercent, basicBrowsing: result.strengthPercent };
+  keys.forEach((k) => {
+    const el = document.getElementById(`sketch-badge-${k}`);
+    if (!el) return;
+    el.textContent = result.streamingVerdict[k];
+    const col = getStatusCol(result.streamingVerdict[k], thresholds[k]);
+    (el as HTMLElement).style.color = col;
+    (el as HTMLElement).style.background = col + '14';
+  });
+}
+
+function buildMiniBar(percent: number, color: string): string {
+  const w = Math.max(4, Math.round((percent / 100) * 60));
+  return `<svg width="64" height="6" style="flex-shrink:0"><rect width="64" height="6" rx="3" fill="var(--bg-muted)"/><rect width="${w}" height="6" rx="3" fill="${color}"/></svg>`;
+}
+
+function buildDeviceCard(dev: PlacedDevice, result: ReturnType<typeof calculateSignalFromSketch>): string {
+  const color = getVerdictColor(result.verdict);
+  const ui = getUI();
+  return `
+    <div class="sketch-device-card">
+      <div class="sketch-device-header">
+        <span class="sketch-device-dot" style="background:${color}"></span>
+        <span class="sketch-device-name">${dev.name}</span>
+        <span class="sketch-device-pct" style="color:${color}">${result.strengthPercent}%</span>
+      </div>
+      <div class="sketch-device-bar-row">
+        ${buildMiniBar(result.strengthPercent, color)}
+        <span class="sketch-device-range">${result.effectiveRange}${ui.labelMeters}</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderDevicePanel(devices: PlacedDevice[], router: Point, walls: Segment[], objects: PlacedObject[]) {
+  const panel = document.getElementById('sketch-device-panel');
+  if (!panel) return;
+  const ui = getUI();
+  panel.innerHTML = `<div class="sketch-device-section-title">${ui.labelPerDevice}</div>`;
+  devices.forEach((dev) => {
+    const result = calculateSignalFromSketch(router, dev, walls, objects);
+    const div = document.createElement('div');
+    div.innerHTML = buildDeviceCard(dev, result);
+    panel.appendChild(div.firstElementChild as HTMLElement);
+  });
+}
+
+function buildTips(walls: Segment[], objects: PlacedObject[], result: ReturnType<typeof calculateSignalFromSketch>): string[] {
+  const ui = getUI();
+  const tips: string[] = [];
+  const concreteCount = walls.filter((w) => w.material === 'concrete').length;
+  const metalCount = walls.filter((w) => w.material === 'metalDoor').length;
+  const total = walls.length + objects.length;
+
+  if (concreteCount > 0 || metalCount > 0) {
+    tips.push(ui.tipMoveRouter);
+  }
+  if (total >= 3) {
+    tips.push(ui.tipReduceObstacles);
+  }
+  if (result.verdict === 'dead' || result.verdict === 'poor') {
+    tips.push(ui.tipElevateRouter);
+  }
+  if (objects.some((o) => o.material === 'aquarium')) {
+    tips.push(ui.tipFishTank);
+  }
+  if (objects.some((o) => o.material === 'microwave')) {
+    tips.push(ui.tipMicrowave);
+  }
+  return tips;
+}
+
+function renderTips(tips: string[]) {
+  const area = document.getElementById('sketch-tip-area');
+  if (!area) return;
+  area.innerHTML = '';
+  tips.forEach((text) => {
+    const card = document.createElement('div');
+    card.className = 'sketch-tip-card';
+    card.innerHTML = `<div class="sketch-tip-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div><div class="sketch-tip-text">${text}</div>`;
+    area.appendChild(card);
+  });
+}
+
+function averageResults(results: ReturnType<typeof calculateSignalFromSketch>[]): SignalResult {
+  const ui = getUI();
+  const avgPct = Math.round(results.reduce((s, r) => s + r.strengthPercent, 0) / results.length);
+  const avgRange = Math.round(results.reduce((s, r) => s + r.effectiveRange, 0) / results.length);
+  let verdict: SignalResult['verdict'];
+  if (avgPct >= 80) verdict = 'perfect';
+  else if (avgPct >= 60) verdict = 'good';
+  else if (avgPct >= 40) verdict = 'fair';
+  else if (avgPct >= 20) verdict = 'poor';
+  else verdict = 'dead';
+  return {
+    strengthPercent: avgPct,
+    effectiveRange: avgRange,
+    verdict,
+    streamingVerdict: computeStreamingVerdict(avgPct, ui),
+    rayCount: 1,
+  };
+}
+
+export function updateDashboard(
+  router: Point,
+  devices: PlacedDevice[],
+  walls: Segment[],
+  objects: PlacedObject[]
+) {
+  if (devices.length === 0) return;
+
+  const ui = getUI();
+  const allResults = devices.map((dev) => calculateSignalFromSketch(router, dev, walls, objects));
+  const avgResult = averageResults(allResults);
+  const color = getVerdictColor(avgResult.verdict);
+
+  updateRing(avgResult.strengthPercent, color);
+  setText('sketch-range-val', `${avgResult.effectiveRange} ${ui.labelMeters}`);
+  updateStreaming(avgResult);
+  renderTips(buildTips(walls, objects, avgResult));
+  renderDevicePanel(devices, router, walls, objects);
+  renderRays(router, devices, walls, objects);
+  renderRouter(router, color);
+
+  const ring = document.getElementById('sketch-ring');
+  if (ring) {
+    ring.classList.remove('sketch-peak-anim', 'sketch-danger-anim');
+    void ring.offsetWidth;
+    if (avgResult.verdict === 'perfect') ring.classList.add('sketch-peak-anim');
+    if (avgResult.verdict === 'dead') ring.classList.add('sketch-danger-anim');
+  }
+}

package/src/tool/wifiRangeSimulator/sketch-render-device.ts

@@ -0,0 +1,42 @@
+import type { PlacedDevice } from './logic';
+
+function setAttrs(el: Element, attrs: Record<string, string>) {
+  Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+}
+
+function makeGlow(color: string) {
+  const el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  setAttrs(el, { cx: '0', cy: '0', r: '24', fill: 'none', stroke: color, 'stroke-width': '2', opacity: '0.3' });
+  return el;
+}
+
+function makeRect() {
+  const el = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  setAttrs(el, { x: '-14', y: '-14', width: '28', height: '28', rx: '6', fill: 'var(--bg-surface)', stroke: 'var(--border-color)', 'stroke-width': '1' });
+  return el;
+}
+
+function makeIcon() {
+  const el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  setAttrs(el, { x: '-8', y: '-8', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--text-main)', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' });
+  el.innerHTML = '<rect x="2" y="4" width="20" height="14" rx="2"/><line x1="8" y1="22" x2="16" y2="22"/><line x1="12" y1="18" x2="12" y2="22"/>';
+  return el;
+}
+
+function makeLabel(name: string) {
+  const el = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  setAttrs(el, { x: '0', y: '26', 'text-anchor': 'middle', fill: 'var(--text-muted)', 'font-size': '8', 'font-weight': '700' });
+  el.textContent = name;
+  return el;
+}
+
+export function buildDeviceSVG(dev: PlacedDevice, color: string) {
+  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  setAttrs(g, { id: `sketch-device-${dev.id}`, transform: `translate(${dev.x}, ${dev.y})`, style: 'cursor:grab' });
+  g.dataset.deviceId = dev.id;
+  g.appendChild(makeGlow(color));
+  g.appendChild(makeRect());
+  g.appendChild(makeIcon());
+  g.appendChild(makeLabel(dev.name));
+  return g;
+}

package/src/tool/wifiRangeSimulator/sketch-render.ts

@@ -0,0 +1,155 @@
+import type { Point, Segment, PlacedObject, PlacedDevice } from './logic';
+import { calculateSignalFromSketch, getVerdictColor, MATERIALS } from './logic';
+import { buildDeviceSVG } from './sketch-render-device';
+import { getUI } from './i18n-utils';
+
+export function renderWalls(walls: Segment[]) {
+  const layer = document.getElementById('sketch-walls-layer');
+  if (!layer) return;
+  layer.innerHTML = '';
+  walls.forEach((wall) => {
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', String(wall.a.x));
+    line.setAttribute('y1', String(wall.a.y));
+    line.setAttribute('x2', String(wall.b.x));
+    line.setAttribute('y2', String(wall.b.y));
+    line.setAttribute('stroke', MATERIALS[wall.material].color);
+    line.setAttribute('stroke-width', '6');
+    line.setAttribute('stroke-linecap', 'round');
+    line.setAttribute('class', 'sketch-wall-line');
+    layer.appendChild(line);
+  });
+}
+
+function buildObjRect(g: SVGGElement, obj: PlacedObject) {
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', String(-obj.width / 2));
+  rect.setAttribute('y', String(-obj.height / 2));
+  rect.setAttribute('width', String(obj.width));
+  rect.setAttribute('height', String(obj.height));
+  rect.setAttribute('rx', '4');
+  rect.setAttribute('fill', MATERIALS[obj.material].color);
+  rect.setAttribute('stroke', 'rgba(0,0,0,0.15)');
+  rect.setAttribute('stroke-width', '1');
+  g.appendChild(rect);
+}
+
+function buildObjLabel(g: SVGGElement, obj: PlacedObject) {
+  const ui = getUI();
+  const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  txt.setAttribute('y', '4');
+  txt.setAttribute('text-anchor', 'middle');
+  txt.setAttribute('fill', '#fff');
+  txt.setAttribute('font-size', '7');
+  txt.setAttribute('font-weight', '700');
+  txt.setAttribute('style', 'text-shadow:0 1px 2px rgba(0,0,0,0.4);pointer-events:none');
+  txt.textContent = `${obj.attenuation}${ui.labelDb}`;
+  g.appendChild(txt);
+}
+
+export function renderObjects(objects: PlacedObject[]) {
+  const layer = document.getElementById('sketch-objs-layer');
+  if (!layer) return;
+  const existing = layer.querySelectorAll('[data-obj-id]');
+  existing.forEach((el) => el.remove());
+  objects.forEach((obj) => {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    g.setAttribute('transform', `translate(${obj.x}, ${obj.y})`);
+    g.setAttribute('class', 'sketch-obj-group');
+    g.dataset.objId = obj.id;
+    buildObjRect(g, obj);
+    buildObjLabel(g, obj);
+    layer.appendChild(g);
+  });
+}
+
+export function renderRouter(router: Point, color?: string) {
+  const g = document.getElementById('sketch-router-group');
+  if (g) g.setAttribute('transform', `translate(${router.x}, ${router.y})`);
+  if (color) {
+    const glow = document.getElementById('sketch-router-glow');
+    if (glow) glow.setAttribute('stroke', color);
+  }
+}
+
+export function renderDevices(devices: PlacedDevice[], router: Point, walls: Segment[], objects: PlacedObject[]) {
+  const layer = document.getElementById('sketch-objs-layer');
+  if (!layer) return;
+  const existing = layer.querySelectorAll('[data-device-id]');
+  existing.forEach((el) => el.remove());
+
+  devices.forEach((dev) => {
+    const result = calculateSignalFromSketch(router, dev, walls, objects);
+    const color = getVerdictColor(result.verdict);
+    const svgEl = buildDeviceSVG(dev, color);
+    layer.appendChild(svgEl);
+  });
+}
+
+export function renderRays(router: Point, devices: PlacedDevice[], walls: Segment[], objects: PlacedObject[]) {
+  const layer = document.getElementById('sketch-rays-layer');
+  if (!layer) return;
+  layer.innerHTML = '';
+
+  devices.forEach((dev) => {
+    const result = calculateSignalFromSketch(router, dev, walls, objects);
+    const color = getVerdictColor(result.verdict);
+    const dx = dev.x - router.x;
+    const dy = dev.y - router.y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx);
+    const spread = 0.06;
+
+    [ -1, 0, 1 ].forEach((offset) => {
+      const a = angle + offset * spread;
+      const ex = router.x + Math.cos(a) * len;
+      const ey = router.y + Math.sin(a) * len;
+      const d = `M ${router.x} ${router.y} L ${ex} ${ey}`;
+
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', d);
+      path.setAttribute('fill', 'none');
+      path.setAttribute('stroke', color);
+      path.setAttribute('stroke-width', '1.5');
+      path.setAttribute('stroke-linecap', 'round');
+      path.setAttribute('opacity', String(0.25 + Math.abs(offset) * 0.15));
+      layer.appendChild(path);
+    });
+  });
+}
+
+export function spawnParticle(x: number, y: number, text: string) {
+  const wrap = document.getElementById('sketch-canvas-wrap');
+  if (!wrap) return;
+  const p = document.createElement('span');
+  p.className = 'sketch-particle';
+  p.textContent = text;
+  const rect = wrap.getBoundingClientRect();
+  p.style.left = `${x - rect.left}px`;
+  p.style.top = `${y - rect.top}px`;
+  wrap.appendChild(p);
+  setTimeout(() => p.remove(), 900);
+}
+
+export function hitObject(obj: PlacedObject, p: Point): boolean {
+  const hw = obj.width / 2;
+  const hh = obj.height / 2;
+  return p.x >= obj.x - hw && p.x <= obj.x + hw && p.y >= obj.y - hh && p.y <= obj.y + hh;
+}
+
+export function hitWall(wall: Segment, p: Point): boolean {
+  const d = dist(wall.a, wall.b);
+  const d1 = dist(p, wall.a);
+  const d2 = dist(p, wall.b);
+  return Math.abs(d - (d1 + d2)) < 8;
+}
+
+export function hitDevice(dev: PlacedDevice, p: Point): boolean {
+  return dist(p, dev) < 35;
+}
+
+function dist(a: Point, b: Point): number {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}

package/src/tool/wifiRangeSimulator/sketch-state.ts

@@ -0,0 +1,186 @@
+import type { Point, Segment, PlacedDevice, PlacedObject } from './logic';
+import { getUI } from './i18n-utils';
+
+export interface State {
+  tool: string;
+  drawing: boolean;
+  drawStart: Point;
+  router: Point;
+  devices: PlacedDevice[];
+  selectedDeviceId: string | null;
+  walls: Segment[];
+  objects: PlacedObject[];
+  dragging: string | null;
+  dragOffset: Point;
+  nextId: number;
+  zoom: number;
+  panX: number;
+  panY: number;
+}
+
+export interface Snapshot {
+  router: Point;
+  devices: PlacedDevice[];
+  walls: Segment[];
+  objects: PlacedObject[];
+  nextId: number;
+  zoom: number;
+  panX: number;
+  panY: number;
+}
+
+export interface History {
+  stack: Snapshot[];
+  pos: number;
+}
+
+export function defaultState(): State {
+  const ui = getUI();
+  return {
+    tool: 'select',
+    drawing: false,
+    drawStart: { x: 0, y: 0 },
+    router: { x: 150, y: 250 },
+    devices: [{ id: 'dev-1', x: 400, y: 250, name: `${ui.labelDevicePrefix} 1` }],
+    selectedDeviceId: null,
+    walls: [],
+    objects: [],
+    dragging: null,
+    dragOffset: { x: 0, y: 0 },
+    nextId: 2,
+    zoom: 1.5,
+    panX: 0,
+    panY: 0,
+  };
+}
+
+export function saveState(s: State): void {
+  const payload: Snapshot = {
+    router: { ...s.router },
+    devices: s.devices.map((d) => ({ ...d })),
+    walls: s.walls.map((w) => ({ ...w, a: { ...w.a }, b: { ...w.b } })),
+    objects: s.objects.map((o) => ({ ...o })),
+    nextId: s.nextId,
+    zoom: s.zoom,
+    panX: s.panX,
+    panY: s.panY,
+  };
+  localStorage.setItem('wifi-sketch-v1', JSON.stringify(payload));
+}
+
+function dedupeDevices(devices: PlacedDevice[]): PlacedDevice[] {
+  const seen = new Set<string>();
+  let next = 1;
+  return devices.map((d) => {
+    if (!seen.has(d.id)) {
+      seen.add(d.id);
+      return d;
+    }
+    while (seen.has(`dev-${next}`)) next++;
+    const newId = `dev-${next}`;
+    seen.add(newId);
+    return { ...d, id: newId };
+  });
+}
+
+export function loadState(): State | null {
+  const raw = localStorage.getItem('wifi-sketch-v1');
+  if (!raw) return null;
+  try {
+    const snap = JSON.parse(raw) as Snapshot;
+    const devices = dedupeDevices(snap.devices);
+    return {
+      tool: 'select',
+      drawing: false,
+      drawStart: { x: 0, y: 0 },
+      router: snap.router,
+      devices,
+      selectedDeviceId: null,
+      walls: snap.walls,
+      objects: snap.objects,
+      dragging: null,
+      dragOffset: { x: 0, y: 0 },
+      nextId: snap.nextId,
+      zoom: typeof snap.zoom === 'number' ? snap.zoom : 1,
+      panX: typeof snap.panX === 'number' ? snap.panX : 0,
+      panY: typeof snap.panY === 'number' ? snap.panY : 0,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function ptToSvg(svg: SVGSVGElement, clientX: number, clientY: number, zoom: number): Point {
+  const rect = svg.getBoundingClientRect();
+  return {
+    x: (clientX - rect.left) / zoom,
+    y: (clientY - rect.top) / zoom,
+  };
+}
+
+export function isWallTool(tool: string): boolean {
+  return ['drywall', 'brick', 'concrete', 'stoneWall'].includes(tool);
+}
+
+export function dist(a: Point, b: Point): number {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export function hitRouter(s: State, p: Point): boolean {
+  return dist(p, s.router) < 22;
+}
+
+export function nearestDevice(devices: PlacedDevice[], p: Point): PlacedDevice | null {
+  let nearest: PlacedDevice | null = null;
+  let nearestDist = Infinity;
+  for (const dev of devices) {
+    const d = dist(p, dev);
+    if (d < nearestDist) {
+      nearestDist = d;
+      nearest = dev;
+    }
+  }
+  if (nearestDist > 50) return null;
+  return nearest;
+}
+
+export function renderDeviceSelection(s: State) {
+  document.querySelectorAll('.sketch-device-selected').forEach((el) => {
+    el.remove();
+  });
+  if (!s.selectedDeviceId) return;
+  const dev = s.devices.find((d) => d.id === s.selectedDeviceId);
+  if (!dev) return;
+  const layer = document.getElementById('sketch-objs-layer');
+  if (!layer) return;
+  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  circle.setAttribute('cx', String(dev.x));
+  circle.setAttribute('cy', String(dev.y));
+  circle.setAttribute('r', '30');
+  circle.setAttribute('fill', 'none');
+  circle.setAttribute('stroke', '#0ea5e9');
+  circle.setAttribute('stroke-width', '3');
+  circle.setAttribute('stroke-dasharray', '4 2');
+  circle.setAttribute('opacity', '0.8');
+  circle.setAttribute('class', 'sketch-device-selected');
+  circle.setAttribute('pointer-events', 'none');
+  layer.appendChild(circle);
+}
+
+export function removePreviewWall() {
+  const preview = document.getElementById('sketch-draw-line');
+  if (preview) preview.setAttribute('opacity', '0');
+}
+
+export function updatePreviewWall(start: Point, end: Point, material: string) {
+  const preview = document.getElementById('sketch-draw-line');
+  if (!preview) return;
+  preview.setAttribute('x1', String(start.x));
+  preview.setAttribute('y1', String(start.y));
+  preview.setAttribute('x2', String(end.x));
+  preview.setAttribute('y2', String(end.y));
+  preview.setAttribute('stroke', material);
+  preview.setAttribute('opacity', '0.6');
+}

package/src/tool/wifiRangeSimulator/sketch.ts

@@ -0,0 +1,100 @@
+import type { State, Snapshot } from './sketch-state';
+import {
+  defaultState,
+  loadState,
+  ptToSvg,
+  renderDeviceSelection,
+  removePreviewWall,
+} from './sketch-state';
+import { renderWalls, renderObjects, renderRouter, renderDevices, hitObject, hitWall } from './sketch-render';
+import { updateDashboard } from './sketch-render-dash';
+import { initToolButtons, addToHistory, applySnapshot, renderZoom, saveState } from './sketch-actions';
+import { handleMouseDown, handleMouseMove, handleMouseUp } from './sketch-events';
+
+function initRender(s: State) {
+  renderWalls(s.walls);
+  renderObjects(s.objects);
+  renderRouter(s.router);
+  renderDevices(s.devices, s.router, s.walls, s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  renderDeviceSelection(s);
+  renderZoom(s);
+}
+
+function removeObj(s: State, h: { stack: Snapshot[]; pos: number }, p: Point) {
+  const objIdx = s.objects.findIndex((o) => hitObject(o, p));
+  if (objIdx < 0) return false;
+  s.objects.splice(objIdx, 1);
+  saveState(s);
+  addToHistory(h, s);
+  renderObjects(s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  return true;
+}
+
+function removeWall(s: State, h: { stack: Snapshot[]; pos: number }, p: Point) {
+  const wallIdx = s.walls.findIndex((w) => hitWall(w, p));
+  if (wallIdx < 0) return false;
+  s.walls.splice(wallIdx, 1);
+  saveState(s);
+  addToHistory(h, s);
+  renderWalls(s.walls);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  return true;
+}
+
+function bindCanvas(s: State, svg: SVGSVGElement, h: { stack: Snapshot[]; pos: number }, wrap: HTMLElement) {
+  wrap.addEventListener('mousedown', (e) => {
+    handleMouseDown(s, svg, e);
+  });
+  wrap.addEventListener('mousemove', (e) => {
+    handleMouseMove(s, svg, e);
+  });
+  wrap.addEventListener('mouseup', (e) => {
+    handleMouseUp(s, svg, h, e);
+  });
+  wrap.addEventListener('mouseleave', () => {
+    if (s.dragging || s.drawing) {
+      removePreviewWall();
+      s.dragging = null;
+      s.drawing = false;
+      saveState(s);
+    }
+  });
+  wrap.addEventListener('dblclick', (e) => {
+    const p = ptToSvg(svg, e.clientX, e.clientY, s.zoom);
+    if (removeObj(s, h, p)) return;
+    removeWall(s, h, p);
+  });
+}
+
+function bindKeyboard(s: State, h: { stack: Snapshot[]; pos: number }) {
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      if (h.pos <= 0) return;
+      h.pos--;
+      applySnapshot(s, h.stack[h.pos]);
+      initRender(s);
+      saveState(s);
+    }
+  });
+}
+
+export function initSketch() {
+  const wrap = document.getElementById('sketch-canvas-wrap');
+  if (!wrap) return;
+  const svg = wrap.querySelector('svg') as SVGSVGElement;
+  if (!svg) return;
+
+  const state: State = loadState() || defaultState();
+  const history = { stack: [] as Snapshot[], pos: -1 };
+  addToHistory(history, state);
+
+  initToolButtons(state, history);
+  initRender(state);
+  bindCanvas(state, svg, history, wrap);
+  bindKeyboard(state, history);
+}
+
+export type { State };