@fieldnotes/core 0.46.1 → 0.48.0

package/dist/index.js

@@ -897,6 +897,26 @@ function getTemplateBounds(el) {
       const maxY = Math.max(y0, y1, y2, y3);
       return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
     }
+    case "rectangle": {
+      const halfW = (el.width ?? 0) / 2;
+      const cos = Math.cos(el.angle);
+      const sin = Math.sin(el.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const x0 = cx + perpX;
+      const y0 = cy + perpY;
+      const x1 = cx + r * cos + perpX;
+      const y1 = cy + r * sin + perpY;
+      const x2 = cx + r * cos - perpX;
+      const y2 = cy + r * sin - perpY;
+      const x3 = cx - perpX;
+      const y3 = cy - perpY;
+      const minX = Math.min(x0, x1, x2, x3);
+      const minY = Math.min(y0, y1, y2, y3);
+      const maxX = Math.max(x0, x1, x2, x3);
+      const maxY = Math.max(y0, y1, y2, y3);
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
   }
 }
 function transferStrokeBounds(prev, next) {
@@ -3200,6 +3220,46 @@ function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
   }
   return cells;
 }
+function getHexCellsInRectangle(center2, angle, lengthCells, widthCells, cellSize, orientation) {
+  const nLen = Math.round(lengthCells);
+  const wCells = Math.max(1, Math.round(widthCells));
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
+  const cube = offsetToCube(off.col, off.row, orientation);
+  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
+  if (nLen <= 0) return [centerPixel];
+  const vertexOffset = orientation === "pointy" ? Math.PI / 6 : 0;
+  const step = Math.PI / 3;
+  const snappedAngle = Math.round((angle - vertexOffset) / step) * step + vertexOffset;
+  const cos = Math.cos(snappedAngle);
+  const sin = Math.sin(snappedAngle);
+  const snapUnit = Math.sqrt(3) * cellSize;
+  const lineLength = nLen * snapUnit;
+  const halfWidth = wCells * snapUnit / 2 + 1e-6;
+  const iterM = nLen + Math.ceil(wCells / 2) + 1;
+  const cells = [];
+  for (let dq = -iterM; dq <= iterM; dq++) {
+    const rMin = Math.max(-iterM, -dq - iterM);
+    const rMax = Math.min(iterM, -dq + iterM);
+    for (let dr = rMin; dr <= rMax; dr++) {
+      const absQ = cube.q + dq;
+      const absR = cube.r + dr;
+      const pixel = offsetToPixel(
+        cubeToOffset(absQ, absR, orientation).col,
+        cubeToOffset(absQ, absR, orientation).row,
+        cellSize,
+        orientation
+      );
+      const dx = pixel.x - centerPixel.x;
+      const dy = pixel.y - centerPixel.y;
+      const along = dx * cos + dy * sin;
+      const perp = Math.abs(-dx * sin + dy * cos);
+      if (along >= -snapUnit * 0.1 && along <= lineLength + snapUnit * 0.1 && perp <= halfWidth) {
+        cells.push(pixel);
+      }
+    }
+  }
+  return cells;
+}
 function getHexCellsInSquare(center2, radiusCells, cellSize, orientation) {
   const n2 = Math.round(radiusCells);
   const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
@@ -3238,6 +3298,48 @@ function drawHexPath(ctx, cx, cy, cellSize, orientation) {
   ctx.closePath();
 }
 
+// src/elements/renderers/template-measure.ts
+function renderTemplateFeetLabel(ctx, p) {
+  if (p.feet <= 0) return;
+  const directional = p.templateShape === "cone" || p.templateShape === "line" || p.templateShape === "rectangle";
+  const dir = directional ? p.angle : 0;
+  const length = p.templateShape === "square" ? p.radius / 2 : p.radius;
+  const cos = Math.cos(dir);
+  const sin = Math.sin(dir);
+  const start = p.position;
+  const end = { x: start.x + length * cos, y: start.y + length * sin };
+  const midX = start.x + length / 2 * cos;
+  const midY = start.y + length / 2 * sin;
+  ctx.save();
+  ctx.globalAlpha = 1;
+  ctx.beginPath();
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = p.color;
+  ctx.lineWidth = 1.5;
+  ctx.moveTo(start.x, start.y);
+  ctx.lineTo(end.x, end.y);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  const label = `${Math.round(p.feet)} ft`;
+  const fontSize = Math.max(10, Math.min(14, p.radius * 0.15));
+  ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "bottom";
+  const textY = midY - 4;
+  const metrics = ctx.measureText(label);
+  const padX = 4;
+  const padY = 2;
+  const textW = metrics.width + padX * 2;
+  const textH = fontSize + padY * 2;
+  ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
+  ctx.beginPath();
+  ctx.roundRect(midX - textW / 2, textY - textH, textW, textH, 3);
+  ctx.fill();
+  ctx.fillStyle = p.color;
+  ctx.fillText(label, midX, textY - padY);
+  ctx.restore();
+}
+
 // src/elements/renderers/template-renderer.ts
 function renderTemplate(ctx, template, store) {
   const grid = store?.getElementsByType("grid")[0];
@@ -3261,9 +3363,6 @@ function renderGeometricTemplate(ctx, template) {
       ctx.arc(cx, cy, r, 0, Math.PI * 2);
       ctx.fill();
       ctx.stroke();
-      if (template.radiusFeet != null && template.radiusFeet > 0) {
-        renderRadiusMarker(ctx, cx, cy, r, template.radiusFeet);
-      }
       break;
     case "square":
       ctx.fillRect(cx - r / 2, cy - r / 2, r, r);
@@ -3295,6 +3394,32 @@ function renderGeometricTemplate(ctx, template) {
       ctx.stroke();
       break;
     }
+    case "rectangle": {
+      const halfW = (template.width ?? 0) / 2;
+      const cos = Math.cos(template.angle);
+      const sin = Math.sin(template.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      ctx.beginPath();
+      ctx.moveTo(cx + perpX, cy + perpY);
+      ctx.lineTo(cx + r * cos + perpX, cy + r * sin + perpY);
+      ctx.lineTo(cx + r * cos - perpX, cy + r * sin - perpY);
+      ctx.lineTo(cx - perpX, cy - perpY);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      break;
+    }
+  }
+  if (template.radiusFeet != null && template.radiusFeet > 0) {
+    renderTemplateFeetLabel(ctx, {
+      position: template.position,
+      radius: template.radius,
+      angle: template.angle,
+      templateShape: template.templateShape,
+      feet: template.radiusFeet,
+      color: template.strokeColor
+    });
   }
   ctx.restore();
 }
@@ -3316,6 +3441,18 @@ function renderHexTemplate(ctx, template, cellSize, orientation) {
     case "square":
       cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
       break;
+    case "rectangle": {
+      const widthCells = (template.width ?? 0) / snapUnit;
+      cells = getHexCellsInRectangle(
+        center2,
+        template.angle,
+        radiusCells,
+        widthCells,
+        cellSize,
+        orientation
+      );
+      break;
+    }
   }
   ctx.save();
   ctx.globalAlpha = template.opacity;
@@ -3342,44 +3479,18 @@ function renderHexTemplate(ctx, template, cellSize, orientation) {
     ctx.lineWidth = template.strokeWidth;
     ctx.stroke();
   }
-  if (template.templateShape === "circle" && template.radiusFeet != null && template.radiusFeet > 0) {
-    const r = template.radius;
-    renderRadiusMarker(ctx, center2.x, center2.y, r, template.radiusFeet);
+  if (template.radiusFeet != null && template.radiusFeet > 0) {
+    renderTemplateFeetLabel(ctx, {
+      position: template.position,
+      radius: template.radius,
+      angle: template.angle,
+      templateShape: template.templateShape,
+      feet: template.radiusFeet,
+      color: template.strokeColor
+    });
   }
   ctx.restore();
 }
-function renderRadiusMarker(ctx, cx, cy, r, feet) {
-  const markerColor = ctx.strokeStyle;
-  ctx.save();
-  ctx.globalAlpha = 1;
-  ctx.beginPath();
-  ctx.setLineDash([4, 4]);
-  ctx.strokeStyle = markerColor;
-  ctx.lineWidth = 1.5;
-  ctx.moveTo(cx, cy);
-  ctx.lineTo(cx + r, cy);
-  ctx.stroke();
-  ctx.setLineDash([]);
-  const label = `${Math.round(feet)} ft`;
-  const fontSize = Math.max(10, Math.min(14, r * 0.15));
-  ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "bottom";
-  const textX = cx + r / 2;
-  const textY = cy - 4;
-  const metrics = ctx.measureText(label);
-  const padX = 4;
-  const padY = 2;
-  const textW = metrics.width + padX * 2;
-  const textH = fontSize + padY * 2;
-  ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
-  ctx.beginPath();
-  ctx.roundRect(textX - textW / 2, textY - textH, textW, textH, 3);
-  ctx.fill();
-  ctx.fillStyle = markerColor;
-  ctx.fillText(label, textX, textY - padY);
-  ctx.restore();
-}
 
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
@@ -3918,7 +4029,8 @@ function createTemplate(input) {
     opacity: input.opacity ?? 0.6,
     feetPerCell: input.feetPerCell,
     radiusFeet: input.radiusFeet,
-    ...input.renderStyle !== void 0 ? { renderStyle: input.renderStyle } : {}
+    ...input.renderStyle !== void 0 ? { renderStyle: input.renderStyle } : {},
+    ...input.width !== void 0 ? { width: input.width } : {}
   };
 }
 
@@ -5515,6 +5627,20 @@ function emitGeometricTemplate(t) {
       ].map(([px, py]) => `${n(px ?? 0)},${n(py ?? 0)}`).join(" ");
       return `<polygon points="${pts}" ${attrs} />`;
     }
+    case "rectangle": {
+      const halfW = (t.width ?? 0) / 2;
+      const cos = Math.cos(t.angle);
+      const sin = Math.sin(t.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const pts = [
+        [cx + perpX, cy + perpY],
+        [cx + r * cos + perpX, cy + r * sin + perpY],
+        [cx + r * cos - perpX, cy + r * sin - perpY],
+        [cx - perpX, cy - perpY]
+      ].map(([px, py]) => `${n(px ?? 0)},${n(py ?? 0)}`).join(" ");
+      return `<polygon points="${pts}" ${attrs} />`;
+    }
   }
 }
 function emitHexTemplate(t, grid) {
@@ -5537,6 +5663,18 @@ function emitHexTemplate(t, grid) {
     case "square":
       cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
       break;
+    case "rectangle": {
+      const widthCells = (t.width ?? 0) / snapUnit;
+      cells = getHexCellsInRectangle(
+        center2,
+        t.angle,
+        radiusCells,
+        widthCells,
+        cellSize,
+        orientation
+      );
+      break;
+    }
   }
   let d = "";
   for (const cell of cells) {
@@ -8225,6 +8363,21 @@ function getOverlayLayout(el, zoom) {
   const rotateHandle = rotatePoint(topMid, center2, angle);
   return { center: center2, corners, rotateHandle, angle };
 }
+function templateAimKnob(el, zoom) {
+  if (el.type !== "template") return null;
+  if (el.templateShape !== "cone" && el.templateShape !== "line" && el.templateShape !== "rectangle")
+    return null;
+  const gap = ROTATE_HANDLE_OFFSET / zoom;
+  const dist = el.radius + gap;
+  const origin = el.position;
+  return {
+    origin,
+    knob: {
+      x: origin.x + dist * Math.cos(el.angle),
+      y: origin.y + dist * Math.sin(el.angle)
+    }
+  };
+}
 function getHandlePositions(bounds) {
   return [
     ["nw", { x: bounds.x, y: bounds.y }],
@@ -8358,21 +8511,66 @@ function renderSelectionBoxes(ctx, p) {
       } else if (el.type === "template") {
         ctx.setLineDash([]);
         ctx.fillStyle = "#ffffff";
-        const hx = bounds.x + bounds.w;
-        const hy = bounds.y + bounds.h;
-        ctx.fillRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
-        ctx.strokeRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
+        if (el.templateShape === "rectangle") {
+          if (p.selectedIds.length === 1) {
+            const cos = Math.cos(el.angle);
+            const sin = Math.sin(el.angle);
+            const halfW = (el.width ?? 0) / 2;
+            const pts = [
+              [el.position.x + el.radius * cos, el.position.y + el.radius * sin],
+              [
+                el.position.x + el.radius / 2 * cos + halfW * -sin,
+                el.position.y + el.radius / 2 * sin + halfW * cos
+              ]
+            ];
+            for (const [hx, hy] of pts) {
+              ctx.fillRect(
+                hx - handleWorldSize / 2,
+                hy - handleWorldSize / 2,
+                handleWorldSize,
+                handleWorldSize
+              );
+              ctx.strokeRect(
+                hx - handleWorldSize / 2,
+                hy - handleWorldSize / 2,
+                handleWorldSize,
+                handleWorldSize
+              );
+            }
+          }
+        } else {
+          const hx = bounds.x + bounds.w;
+          const hy = bounds.y + bounds.h;
+          ctx.fillRect(
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+          ctx.strokeRect(
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+        }
         ctx.setLineDash([4 / zoom, 4 / zoom]);
+        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line" || el.templateShape === "rectangle")) {
+          const aim = templateAimKnob(el, zoom);
+          if (aim) {
+            ctx.beginPath();
+            ctx.moveTo(aim.origin.x, aim.origin.y);
+            ctx.lineTo(aim.knob.x, aim.knob.y);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.fillStyle = "#ffffff";
+            ctx.beginPath();
+            ctx.arc(aim.knob.x, aim.knob.y, handleWorldSize / 2, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            ctx.setLineDash([4 / zoom, 4 / zoom]);
+          }
+        }
       }
       if (p.selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
         const stemStart = topMidpoint(layout);
@@ -8518,6 +8716,7 @@ function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
   for (const id of selectedIds) {
     const el = ctx.store.getById(id);
     if (!el || el.type !== "template") continue;
+    if (el.templateShape === "rectangle") continue;
     const bounds = getElementBounds(el);
     if (!bounds) continue;
     const hx = bounds.x + bounds.w;
@@ -8528,6 +8727,50 @@ function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
   }
   return null;
 }
+function hitTestTemplateAimHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked) return null;
+  const knob = templateAimKnob(el, ctx.camera.zoom);
+  if (!knob) return null;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
+  const dx = world.x - knob.knob.x;
+  const dy = world.y - knob.knob.y;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestRectangleLengthHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked || el.type !== "template" || el.templateShape !== "rectangle") return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const hx = el.position.x + el.radius * Math.cos(el.angle);
+  const hy = el.position.y + el.radius * Math.sin(el.angle);
+  const dx = world.x - hx;
+  const dy = world.y - hy;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestRectangleWidthHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked || el.type !== "template" || el.templateShape !== "rectangle") return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  const halfW = (el.width ?? 0) / 2;
+  const hx = el.position.x + el.radius / 2 * cos + halfW * -sin;
+  const hy = el.position.y + el.radius / 2 * sin + halfW * cos;
+  const dx = world.x - hx;
+  const dy = world.y - hy;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
 function findElementsInRect(marquee, ctx) {
   const candidates = ctx.store.queryRect(marquee);
   const ids = [];
@@ -8682,6 +8925,34 @@ function computeTemplateResize(el, world, opts) {
   }
   return updates;
 }
+function computeRectangleLengthResize(el, world, opts) {
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  let len = (world.x - el.position.x) * cos + (world.y - el.position.y) * sin;
+  if (opts.snapToGrid && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    len = Math.max(snapUnit, Math.round(len / snapUnit) * snapUnit);
+  }
+  len = Math.max(MIN_ELEMENT_SIZE, len);
+  const updates = { radius: len };
+  if (el.feetPerCell != null && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    updates.radiusFeet = len / snapUnit * el.feetPerCell;
+  }
+  return updates;
+}
+function computeRectangleWidthResize(el, world, opts) {
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  const perp = Math.abs(-(world.x - el.position.x) * sin + (world.y - el.position.y) * cos);
+  let width = perp * 2;
+  if (opts.snapToGrid && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    width = Math.max(snapUnit, Math.round(width / snapUnit) * snapUnit);
+  }
+  width = Math.max(MIN_ELEMENT_SIZE, width);
+  return { width };
+}
 
 // src/tools/select-tool.ts
 var SNAP_PX = 6;
@@ -8777,6 +9048,24 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
+    const rectLengthHit = hitTestRectangleLengthHandle(world, ctx, this._selectedIds);
+    if (rectLengthHit) {
+      this.mode = { type: "resizing-rect-length", elementId: rectLengthHit.elementId };
+      ctx.requestRender();
+      return;
+    }
+    const rectWidthHit = hitTestRectangleWidthHandle(world, ctx, this._selectedIds);
+    if (rectWidthHit) {
+      this.mode = { type: "resizing-rect-width", elementId: rectWidthHit.elementId };
+      ctx.requestRender();
+      return;
+    }
+    const aimHit = hitTestTemplateAimHandle(world, ctx, this._selectedIds);
+    if (aimHit) {
+      this.mode = { type: "aiming-template", elementId: aimHit.elementId };
+      ctx.requestRender();
+      return;
+    }
     const rotateHit = hitTestRotateHandle(world, ctx, this._selectedIds);
     if (rotateHit) {
       const el = ctx.store.getById(rotateHit.elementId);
@@ -8858,6 +9147,32 @@ var SelectTool = class {
       this.handleTemplateResize(world, ctx);
       return;
     }
+    if (this.mode.type === "aiming-template") {
+      const el = ctx.store.getById(this.mode.elementId);
+      if (el && el.type === "template" && !el.locked) {
+        let a = Math.atan2(world.y - el.position.y, world.x - el.position.x);
+        if (state.shiftKey) {
+          const snap = ctx.gridType === "hex" ? Math.PI / 3 : ROTATE_SNAP;
+          a = Math.round(a / snap) * snap;
+        }
+        ctx.store.update(this.mode.elementId, { angle: normalizeAngle(a) });
+        ctx.requestRender();
+      }
+      return;
+    }
+    if (this.mode.type === "resizing-rect-length" || this.mode.type === "resizing-rect-width") {
+      ctx.setCursor?.(this.mode.type === "resizing-rect-length" ? "ew-resize" : "ns-resize");
+      const el = ctx.store.getById(this.mode.elementId);
+      if (el && el.type === "template" && !el.locked) {
+        const opts = { snapToGrid: ctx.snapToGrid, gridSize: ctx.gridSize, gridType: ctx.gridType };
+        const patch = this.mode.type === "resizing-rect-length" ? computeRectangleLengthResize(el, world, opts) : computeRectangleWidthResize(el, world, opts);
+        if (patch) {
+          ctx.store.update(this.mode.elementId, patch);
+          ctx.requestRender();
+        }
+      }
+      return;
+    }
     if (this.mode.type === "rotating") {
       const { elementId, center: center2, startPointerAngle, startRotation } = this.mode;
       const a = Math.atan2(world.y - center2.y, world.x - center2.x);
@@ -9064,6 +9379,18 @@ var SelectTool = class {
       ctx.setCursor?.("nwse-resize");
       return null;
     }
+    if (hitTestRectangleLengthHandle(world, ctx, this._selectedIds)) {
+      ctx.setCursor?.("ew-resize");
+      return null;
+    }
+    if (hitTestRectangleWidthHandle(world, ctx, this._selectedIds)) {
+      ctx.setCursor?.("ns-resize");
+      return null;
+    }
+    if (hitTestTemplateAimHandle(world, ctx, this._selectedIds)) {
+      ctx.setCursor?.("grab");
+      return null;
+    }
     if (hitTestRotateHandle(world, ctx, this._selectedIds)) {
       ctx.setCursor?.("grab");
       return null;
@@ -9724,6 +10051,11 @@ var MeasureTool = class {
 };
 
 // src/tools/template-tool.ts
+var MIN_RECT_WIDTH = 20;
+function defaultRectWidth(radius, scaleUnit) {
+  if (scaleUnit > 0) return scaleUnit;
+  return Math.max(MIN_RECT_WIDTH, radius * 0.25);
+}
 var TemplateTool = class {
   name = "template";
   drawing = false;
@@ -9733,6 +10065,7 @@ var TemplateTool = class {
   gridType;
   hexOrientation;
   snapEnabled = false;
+  feetScaleUnit = 0;
   templateShape;
   fillColor;
   strokeColor;
@@ -9781,6 +10114,7 @@ var TemplateTool = class {
     this.gridType = ctx.gridType;
     this.hexOrientation = ctx.hexOrientation;
     this.snapEnabled = !!ctx.gridType || (ctx.snapToGrid ?? false);
+    this.feetScaleUnit = ctx.gridSize && ctx.gridSize > 0 ? ctx.gridType === "hex" ? Math.sqrt(3) * ctx.gridSize : ctx.gridSize : 0;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.origin = this.snapToGrid(world, ctx);
     this.current = { ...this.origin };
@@ -9800,11 +10134,13 @@ var TemplateTool = class {
     const snapUnit = gridSize && gridSize > 0 ? ctx.gridType === "hex" ? Math.sqrt(3) * gridSize : gridSize : 0;
     const cells = snapUnit > 0 ? radius / snapUnit : 0;
     const radiusFeet = cells * this.feetPerCell;
+    const width = this.templateShape === "rectangle" ? defaultRectWidth(radius, this.feetScaleUnit) : void 0;
     const element = createTemplate({
       position: { ...this.origin },
       templateShape: this.templateShape,
       radius,
       angle,
+      width,
       fillColor: this.fillColor,
       strokeColor: this.strokeColor,
       strokeWidth: this.strokeWidth,
@@ -9879,7 +10215,24 @@ var TemplateTool = class {
         ctx.stroke();
         break;
       }
+      case "rectangle": {
+        const halfW = defaultRectWidth(radius, this.feetScaleUnit) / 2;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const perpX = -sin * halfW;
+        const perpY = cos * halfW;
+        ctx.beginPath();
+        ctx.moveTo(cx + perpX, cy + perpY);
+        ctx.lineTo(cx + radius * cos + perpX, cy + radius * sin + perpY);
+        ctx.lineTo(cx + radius * cos - perpX, cy + radius * sin - perpY);
+        ctx.lineTo(cx - perpX, cy - perpY);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        break;
+      }
     }
+    this.drawFeetLabel(ctx, radius);
     ctx.restore();
   }
   renderHexOverlay(ctx, radius) {
@@ -9904,6 +10257,18 @@ var TemplateTool = class {
       case "square":
         hexCells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
         break;
+      case "rectangle": {
+        const widthCells = defaultRectWidth(radius, this.feetScaleUnit) / snapUnit;
+        hexCells = getHexCellsInRectangle(
+          center2,
+          angle,
+          radiusCells,
+          widthCells,
+          cellSize,
+          orientation
+        );
+        break;
+      }
     }
     ctx.save();
     ctx.globalAlpha = 0.4;
@@ -9920,7 +10285,7 @@ var TemplateTool = class {
     ctx.strokeStyle = this.strokeColor;
     ctx.lineWidth = this.strokeWidth;
     ctx.stroke();
-    if (this.templateShape === "cone" || this.templateShape === "line" || this.templateShape === "circle" || this.templateShape === "square") {
+    if (this.templateShape === "cone" || this.templateShape === "line" || this.templateShape === "circle" || this.templateShape === "square" || this.templateShape === "rectangle") {
       ctx.globalAlpha = 0.5;
       ctx.beginPath();
       drawHexPath(ctx, center2.x, center2.y, cellSize, orientation);
@@ -9930,30 +10295,7 @@ var TemplateTool = class {
       ctx.lineWidth = this.strokeWidth;
       ctx.stroke();
     }
-    if (this.templateShape === "circle") {
-      const feet = radiusCells * this.feetPerCell;
-      if (feet > 0) {
-        ctx.globalAlpha = 1;
-        const label = `${Math.round(feet)} ft`;
-        const fontSize = Math.max(10, Math.min(14, radius * 0.15));
-        ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
-        ctx.textAlign = "center";
-        ctx.textBaseline = "bottom";
-        const textX = center2.x;
-        const textY = center2.y - 4;
-        const metrics = ctx.measureText(label);
-        const padX = 4;
-        const padY = 2;
-        const textW = metrics.width + padX * 2;
-        const textH = fontSize + padY * 2;
-        ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
-        ctx.beginPath();
-        ctx.roundRect(textX - textW / 2, textY - textH, textW, textH, 3);
-        ctx.fill();
-        ctx.fillStyle = this.strokeColor;
-        ctx.fillText(label, textX, textY - padY);
-      }
-    }
+    this.drawFeetLabel(ctx, radius);
     ctx.restore();
   }
   computeRadius() {
@@ -9971,6 +10313,17 @@ var TemplateTool = class {
     const dy = this.current.y - this.origin.y;
     return Math.atan2(dy, dx);
   }
+  drawFeetLabel(ctx, radius) {
+    const feet = this.feetScaleUnit > 0 ? radius / this.feetScaleUnit * this.feetPerCell : 0;
+    renderTemplateFeetLabel(ctx, {
+      position: this.origin,
+      radius,
+      angle: this.computeAngle(),
+      templateShape: this.templateShape,
+      feet,
+      color: this.strokeColor
+    });
+  }
   snapToGrid(point, ctx) {
     if (!ctx.gridSize) return point;
     if (ctx.gridType === "hex" && ctx.hexOrientation) {
@@ -10100,7 +10453,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.46.1";
+var VERSION = "0.48.0";
 export {
   ArrowTool,
   AutoSave,
@@ -10151,6 +10504,7 @@ export {
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,
+  getHexCellsInRectangle,
   getHexCellsInSquare,
   getHexDistance,
   isNearBezier,