@fieldnotes/core 0.47.0 → 0.48.0

package/dist/index.d.cts

@@ -107,13 +107,16 @@ interface GridElement extends BaseElement {
     strokeWidth: number;
     opacity: number;
 }
-type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+type TemplateShape = 'circle' | 'cone' | 'line' | 'square' | 'rectangle';
 type TemplateRenderStyle = 'cells' | 'geometric';
 interface TemplateElement extends BaseElement {
     type: 'template';
     templateShape: TemplateShape;
     radius: number;
     angle: number;
+    /** Rectangle-only: full perpendicular extent in world units (centered on the aim axis).
+     *  Absent for other shapes. Distinct from strokeWidth. */
+    width?: number;
     fillColor: string;
     strokeColor: string;
     strokeWidth: number;
@@ -745,6 +748,7 @@ interface TemplateInput extends BaseDefaults {
     templateShape: TemplateShape;
     radius: number;
     angle?: number;
+    width?: number;
     fillColor?: string;
     strokeColor?: string;
     strokeWidth?: number;
@@ -771,6 +775,7 @@ declare function getHexDistance(a: Point, b: Point, cellSize: number, orientatio
 declare function getHexCellsInRadius(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function getHexCellsInCone(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function getHexCellsInLine(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInRectangle(center: Point, angle: number, lengthCells: number, widthCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function getHexCellsInSquare(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function drawHexPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, cellSize: number, orientation: HexOrientation): void;
 
@@ -1115,6 +1120,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.47.0";
+declare const VERSION = "0.48.0";
 
-export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -107,13 +107,16 @@ interface GridElement extends BaseElement {
     strokeWidth: number;
     opacity: number;
 }
-type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+type TemplateShape = 'circle' | 'cone' | 'line' | 'square' | 'rectangle';
 type TemplateRenderStyle = 'cells' | 'geometric';
 interface TemplateElement extends BaseElement {
     type: 'template';
     templateShape: TemplateShape;
     radius: number;
     angle: number;
+    /** Rectangle-only: full perpendicular extent in world units (centered on the aim axis).
+     *  Absent for other shapes. Distinct from strokeWidth. */
+    width?: number;
     fillColor: string;
     strokeColor: string;
     strokeWidth: number;
@@ -745,6 +748,7 @@ interface TemplateInput extends BaseDefaults {
     templateShape: TemplateShape;
     radius: number;
     angle?: number;
+    width?: number;
     fillColor?: string;
     strokeColor?: string;
     strokeWidth?: number;
@@ -771,6 +775,7 @@ declare function getHexDistance(a: Point, b: Point, cellSize: number, orientatio
 declare function getHexCellsInRadius(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function getHexCellsInCone(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function getHexCellsInLine(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInRectangle(center: Point, angle: number, lengthCells: number, widthCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function getHexCellsInSquare(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
 declare function drawHexPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, cellSize: number, orientation: HexOrientation): void;
 
@@ -1115,6 +1120,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.47.0";
+declare const VERSION = "0.48.0";
 
-export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

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);
@@ -3241,7 +3301,7 @@ function drawHexPath(ctx, cx, cy, cellSize, orientation) {
 // src/elements/renderers/template-measure.ts
 function renderTemplateFeetLabel(ctx, p) {
   if (p.feet <= 0) return;
-  const directional = p.templateShape === "cone" || p.templateShape === "line";
+  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);
@@ -3334,6 +3394,22 @@ 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, {
@@ -3365,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;
@@ -3941,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 } : {}
   };
 }
 
@@ -5538,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) {
@@ -5560,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) {
@@ -8250,7 +8365,8 @@ function getOverlayLayout(el, zoom) {
 }
 function templateAimKnob(el, zoom) {
   if (el.type !== "template") return null;
-  if (el.templateShape !== "cone" && el.templateShape !== "line") 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;
@@ -8395,22 +8511,51 @@ 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")) {
+        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line" || el.templateShape === "rectangle")) {
           const aim = templateAimKnob(el, zoom);
           if (aim) {
             ctx.beginPath();
@@ -8571,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;
@@ -8594,6 +8740,37 @@ function hitTestTemplateAimHandle(world, ctx, selectedIds) {
   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 = [];
@@ -8748,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;
@@ -8843,6 +9048,18 @@ 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 };
@@ -8943,6 +9160,19 @@ var SelectTool = class {
       }
       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);
@@ -9149,6 +9379,14 @@ 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;
@@ -9813,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;
@@ -9891,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,
@@ -9970,6 +10215,22 @@ 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();
@@ -9996,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;
@@ -10012,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);
@@ -10180,7 +10453,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.47.0";
+var VERSION = "0.48.0";
 export {
   ArrowTool,
   AutoSave,
@@ -10231,6 +10504,7 @@ export {
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,
+  getHexCellsInRectangle,
   getHexCellsInSquare,
   getHexDistance,
   isNearBezier,