From ad7c0a42b0c24a73b25f89f06db247621373418f Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Sat, 21 Feb 2026 16:30:19 -0500
Subject: [PATCH 1/5] allows for more custom shapes

---
 src/lib/components/GlobalsPanel.svelte | 152 ++++++++++++++++----
 src/lib/components/TrayScene.svelte    |  28 ++--
 src/lib/models/box.ts                  |  48 +++++--
 src/lib/models/counterTray.ts          | 189 +++++++++++++++++++------
 src/lib/models/lid.ts                  |   4 +-
 5 files changed, 320 insertions(+), 101 deletions(-)

diff --git a/src/lib/components/GlobalsPanel.svelte b/src/lib/components/GlobalsPanel.svelte
index 9b1d2d1..3346160 100644
--- a/src/lib/components/GlobalsPanel.svelte
+++ b/src/lib/components/GlobalsPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { CounterTrayParams, CustomShape } from '$lib/models/counterTray';
+	import type { CounterTrayParams, CustomShape, CustomBaseShape } from '$lib/models/counterTray';
 
 	interface Props {
 		params: CounterTrayParams;
@@ -8,6 +8,13 @@
 
 	let { params, onchange }: Props = $props();
 
+	const baseShapeOptions: { value: CustomBaseShape; label: string }[] = [
+		{ value: 'rectangle', label: 'Rectangle' },
+		{ value: 'square', label: 'Square' },
+		{ value: 'circle', label: 'Circle' },
+		{ value: 'hex', label: 'Hex' }
+	];
+
 	function updateParam<K extends keyof CounterTrayParams>(key: K, value: CounterTrayParams[K]) {
 		onchange({ ...params, [key]: value });
 	}
@@ -17,7 +24,10 @@
 		const newName = `Custom ${params.customShapes.length + 1}`;
 		onchange({
 			...params,
-			customShapes: [...params.customShapes, { name: newName, width: 20, length: 30 }]
+			customShapes: [
+				...params.customShapes,
+				{ name: newName, baseShape: 'rectangle', width: 20, length: 30 }
+			]
 		});
 	}
 
@@ -46,6 +56,34 @@
 				return;
 			}
 		}
+
+		// Handle baseShape changes - sync length to width for non-rectangle shapes
+		if (field === 'baseShape') {
+			const baseShape = value as CustomBaseShape;
+			if (baseShape !== 'rectangle') {
+				// For square, circle, hex: set length = width
+				newShapes[index] = { ...newShapes[index], baseShape, length: newShapes[index].width };
+			} else {
+				newShapes[index] = { ...newShapes[index], baseShape };
+			}
+			onchange({ ...params, customShapes: newShapes });
+			return;
+		}
+
+		// Handle width changes for non-rectangle shapes - sync length
+		if (field === 'width') {
+			const shape = newShapes[index];
+			const baseShape = shape.baseShape ?? 'rectangle';
+			if (baseShape !== 'rectangle') {
+				// For square, circle, hex: length = width
+				newShapes[index] = { ...newShapes[index], width: value as number, length: value as number };
+			} else {
+				newShapes[index] = { ...newShapes[index], width: value as number };
+			}
+			onchange({ ...params, customShapes: newShapes });
+			return;
+		}
+
 		newShapes[index] = { ...newShapes[index], [field]: value };
 		onchange({ ...params, customShapes: newShapes });
 	}
@@ -88,7 +126,7 @@
 		</h3>
 		<div class="grid grid-cols-2 gap-2">
 			<label class="block">
-				<span class="text-xs text-gray-400">Square W</span>
+				<span class="text-xs text-gray-400">Square Width</span>
 				<input
 					type="number"
 					step="0.1"
@@ -98,7 +136,7 @@
 				/>
 			</label>
 			<label class="block">
-				<span class="text-xs text-gray-400">Square L</span>
+				<span class="text-xs text-gray-400">Square Length</span>
 				<input
 					type="number"
 					step="0.1"
@@ -108,7 +146,7 @@
 				/>
 			</label>
 			<label class="block">
-				<span class="text-xs text-gray-400">Hex F-to-F</span>
+				<span class="text-xs text-gray-400">Hex (flat-to-flat)</span>
 				<input
 					type="number"
 					step="0.1"
@@ -118,7 +156,7 @@
 				/>
 			</label>
 			<label class="block">
-				<span class="text-xs text-gray-400">Circle Dia</span>
+				<span class="text-xs text-gray-400">Circle Diameter</span>
 				<input
 					type="number"
 					step="0.1"
@@ -144,7 +182,7 @@
 					onchange={(e) => updateParam('hexPointyTop', e.currentTarget.checked)}
 					class="rounded border-gray-600 bg-gray-700"
 				/>
-				<span class="text-xs text-gray-400">Hex Pointy</span>
+				<span class="text-xs text-gray-400">Hex Pointy Top</span>
 			</label>
 		</div>
 	</section>
@@ -155,6 +193,7 @@
 		</h3>
 		<div class="space-y-2">
 			{#each params.customShapes as shape, index (shape.name)}
+				{@const baseShape = shape.baseShape ?? 'rectangle'}
 				<div class="bg-gray-750 rounded p-2">
 					<div class="mb-2 flex items-center gap-2">
 						<input
@@ -172,32 +211,87 @@
 							&times;
 						</button>
 					</div>
-					<div class="grid grid-cols-2 gap-2">
+					<div class="mb-2">
 						<label class="block">
-							<span class="text-xs text-gray-400">Width</span>
-							<input
-								type="number"
-								step="0.1"
-								min="1"
-								value={shape.width}
-								onchange={(e) =>
-									updateCustomShape(index, 'width', parseFloat(e.currentTarget.value))}
+							<span class="text-xs text-gray-400">Base Shape</span>
+							<select
+								value={baseShape}
+								onchange={(e) => updateCustomShape(index, 'baseShape', e.currentTarget.value)}
 								class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
-							/>
-						</label>
-						<label class="block">
-							<span class="text-xs text-gray-400">Length</span>
-							<input
-								type="number"
-								step="0.1"
-								min="1"
-								value={shape.length}
-								onchange={(e) =>
-									updateCustomShape(index, 'length', parseFloat(e.currentTarget.value))}
-								class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
-							/>
+							>
+								{#each baseShapeOptions as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
 						</label>
 					</div>
+					<div class="grid grid-cols-2 gap-2">
+						{#if baseShape === 'rectangle'}
+							<label class="block">
+								<span class="text-xs text-gray-400">Width</span>
+								<input
+									type="number"
+									step="0.1"
+									min="1"
+									value={shape.width}
+									onchange={(e) =>
+										updateCustomShape(index, 'width', parseFloat(e.currentTarget.value))}
+									class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
+								/>
+							</label>
+							<label class="block">
+								<span class="text-xs text-gray-400">Length</span>
+								<input
+									type="number"
+									step="0.1"
+									min="1"
+									value={shape.length}
+									onchange={(e) =>
+										updateCustomShape(index, 'length', parseFloat(e.currentTarget.value))}
+									class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
+								/>
+							</label>
+						{:else if baseShape === 'square'}
+							<label class="col-span-2 block">
+								<span class="text-xs text-gray-400">Size</span>
+								<input
+									type="number"
+									step="0.1"
+									min="1"
+									value={shape.width}
+									onchange={(e) =>
+										updateCustomShape(index, 'width', parseFloat(e.currentTarget.value))}
+									class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
+								/>
+							</label>
+						{:else if baseShape === 'circle'}
+							<label class="col-span-2 block">
+								<span class="text-xs text-gray-400">Diameter</span>
+								<input
+									type="number"
+									step="0.1"
+									min="1"
+									value={shape.width}
+									onchange={(e) =>
+										updateCustomShape(index, 'width', parseFloat(e.currentTarget.value))}
+									class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
+								/>
+							</label>
+						{:else if baseShape === 'hex'}
+							<label class="col-span-2 block">
+								<span class="text-xs text-gray-400">Flat-to-Flat</span>
+								<input
+									type="number"
+									step="0.1"
+									min="1"
+									value={shape.width}
+									onchange={(e) =>
+										updateCustomShape(index, 'width', parseFloat(e.currentTarget.value))}
+									class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
+								/>
+							</label>
+						{/if}
+					</div>
 				</div>
 			{/each}
 			<button
diff --git a/src/lib/components/TrayScene.svelte b/src/lib/components/TrayScene.svelte
index 2e95da5..2a4f844 100644
--- a/src/lib/components/TrayScene.svelte
+++ b/src/lib/components/TrayScene.svelte
@@ -445,6 +445,7 @@
 		{#if stack.isEdgeLoaded}
 			<!-- Edge-loaded: counters standing on edge like books -->
 			{#each Array(stack.count) as _counterItem, counterIdx (counterIdx)}
+				{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
 				{@const standingHeight =
 					stack.shape === 'custom'
 						? Math.min(stack.width, stack.length)
@@ -457,13 +458,13 @@
 					{@const counterSpacing = (stack.slotWidth ?? stack.count * stack.thickness) / stack.count}
 					{@const posX = meshOffset.x + stack.x + (counterIdx + 0.5) * counterSpacing}
 					{@const posZ = meshOffset.z - stack.y - (stack.slotDepth ?? stack.length) / 2}
-					{#if stack.shape === 'square' || stack.shape === 'custom'}
+					{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 						<!-- Standing on edge: thickness along X (stacking), height along Y, length along Z -->
 						<T.Mesh position.x={posX} position.y={counterY} position.z={posZ}>
 							<T.BoxGeometry args={[stack.thickness, standingHeight, stack.length]} />
 							<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
 						</T.Mesh>
-					{:else if stack.shape === 'circle'}
+					{:else if effectiveShape === 'circle'}
 						<!-- Cylinder standing on edge: rotate so axis is along X -->
 						<T.Mesh
 							position.x={posX}
@@ -492,12 +493,12 @@
 					{@const counterSpacing = (stack.slotDepth ?? stack.count * stack.thickness) / stack.count}
 					{@const posX = meshOffset.x + stack.x + (stack.slotWidth ?? stack.length) / 2}
 					{@const posZ = meshOffset.z - stack.y - (counterIdx + 0.5) * counterSpacing}
-					{#if stack.shape === 'square' || stack.shape === 'custom'}
+					{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 						<T.Mesh position.x={posX} position.y={counterY} position.z={posZ}>
 							<T.BoxGeometry args={[stack.length, standingHeight, stack.thickness]} />
 							<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
 						</T.Mesh>
-					{:else if stack.shape === 'circle'}
+					{:else if effectiveShape === 'circle'}
 						<T.Mesh
 							position.x={posX}
 							position.y={counterY}
@@ -531,12 +532,13 @@
 				{@const posZ = meshOffset.z - stack.y}
 				{@const isAlt = counterIdx % 2 === 1}
 				{@const counterColor = isAlt ? `hsl(${(stackIdx * 137.508) % 360}, 50%, 40%)` : stack.color}
-				{#if stack.shape === 'square' || stack.shape === 'custom'}
+				{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
+				{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 					<T.Mesh position.x={posX} position.y={posY} position.z={posZ}>
 						<T.BoxGeometry args={[stack.width, stack.thickness, stack.length]} />
 						<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
 					</T.Mesh>
-				{:else if stack.shape === 'circle'}
+				{:else if effectiveShape === 'circle'}
 					<T.Mesh position.x={posX} position.y={posY} position.z={posZ}>
 						<T.CylinderGeometry args={[stack.width / 2, stack.width / 2, stack.thickness, 32]} />
 						<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
@@ -579,6 +581,7 @@
 			{#if stack.isEdgeLoaded}
 				<!-- Edge-loaded: counters standing on edge like books -->
 				{#each Array(stack.count) as _counterItem, counterIdx (counterIdx)}
+					{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
 					{@const standingHeight =
 						stack.shape === 'custom'
 							? Math.min(stack.width, stack.length)
@@ -593,13 +596,13 @@
 							(stack.slotWidth ?? stack.count * stack.thickness) / stack.count}
 						{@const posX = trayXOffset + stack.x + (counterIdx + 0.5) * counterSpacing}
 						{@const posZ = trayZOffset - stack.y - (stack.slotDepth ?? stack.length) / 2}
-						{#if stack.shape === 'square' || stack.shape === 'custom'}
+						{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 							<!-- Standing on edge: thickness along X (stacking), height along Y, length along Z -->
 							<T.Mesh position.x={posX} position.y={counterY} position.z={posZ}>
 								<T.BoxGeometry args={[stack.thickness, standingHeight, stack.length]} />
 								<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
 							</T.Mesh>
-						{:else if stack.shape === 'circle'}
+						{:else if effectiveShape === 'circle'}
 							<!-- Cylinder standing on edge: rotate so axis is along X -->
 							<T.Mesh
 								position.x={posX}
@@ -631,12 +634,12 @@
 							(stack.slotDepth ?? stack.count * stack.thickness) / stack.count}
 						{@const posX = trayXOffset + stack.x + (stack.slotWidth ?? stack.length) / 2}
 						{@const posZ = trayZOffset - stack.y - (counterIdx + 0.5) * counterSpacing}
-						{#if stack.shape === 'square' || stack.shape === 'custom'}
+						{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 							<T.Mesh position.x={posX} position.y={counterY} position.z={posZ}>
 								<T.BoxGeometry args={[stack.length, standingHeight, stack.thickness]} />
 								<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
 							</T.Mesh>
-						{:else if stack.shape === 'circle'}
+						{:else if effectiveShape === 'circle'}
 							<T.Mesh
 								position.x={posX}
 								position.y={counterY}
@@ -673,12 +676,13 @@
 					{@const counterColor = isAlt
 						? `hsl(${(stackIdx * 137.508) % 360}, 50%, 40%)`
 						: stack.color}
-					{#if stack.shape === 'square' || stack.shape === 'custom'}
+					{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
+					{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 						<T.Mesh position.x={posX} position.y={posY} position.z={posZ}>
 							<T.BoxGeometry args={[stack.width, stack.thickness, stack.length]} />
 							<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
 						</T.Mesh>
-					{:else if stack.shape === 'circle'}
+					{:else if effectiveShape === 'circle'}
 						<T.Mesh position.x={posX} position.y={posY} position.z={posZ}>
 							<T.CylinderGeometry args={[stack.width / 2, stack.width / 2, stack.thickness, 32]} />
 							<T.MeshStandardMaterial color={counterColor} roughness={0.4} metalness={0.2} />
diff --git a/src/lib/models/box.ts b/src/lib/models/box.ts
index b7f992a..69a51b4 100644
--- a/src/lib/models/box.ts
+++ b/src/lib/models/box.ts
@@ -81,15 +81,35 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 		return customShapes?.find((s) => s.name === name) || null;
 	};
 
+	// Get effective dimensions for custom shapes based on their base shape
+	// Returns [width, length] accounting for hex point-to-point calculations
+	const getCustomEffectiveDims = (custom: NonNullable<ReturnType<typeof getCustomShape>>): [number, number] => {
+		const baseShape = custom.baseShape ?? 'rectangle';
+		if (baseShape === 'hex') {
+			// width stores flat-to-flat, calculate point-to-point
+			const flatToFlat = custom.width;
+			const pointToPoint = flatToFlat / Math.cos(Math.PI / 6);
+			// Use global hexPointyTop to determine orientation
+			const w = hexPointyTop ? flatToFlat : pointToPoint;
+			const l = hexPointyTop ? pointToPoint : flatToFlat;
+			return [w, l];
+		}
+		if (baseShape === 'circle' || baseShape === 'square') {
+			// Both dimensions are equal (diameter or size)
+			return [custom.width, custom.width];
+		}
+		// Rectangle: use width and length directly
+		return [custom.width, custom.length];
+	};
+
 	// For top-loaded/crosswise custom shapes: LONGER side = width (X), SHORTER side = length (Y)
 	const getPocketWidth = (shape: string): number => {
 		if (shape === 'square') return squarePocketWidth;
 		if (shape === 'hex') return hexPocketWidth;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.max(w, l); // Longer side along X (parallel to tray length)
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l) + clearance * 2; // Longer side along X (parallel to tray length)
 		}
 		return circlePocketWidth;
 	};
@@ -99,9 +119,8 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 		if (shape === 'hex') return hexPocketLength;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.min(w, l); // Shorter side along Y
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l) + clearance * 2; // Shorter side along Y
 		}
 		return circlePocketLength;
 	};
@@ -111,9 +130,8 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 	const getPocketLengthLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.max(w, l); // Longer side along Y (perpendicular to tray length)
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l) + clearance * 2; // Longer side along Y (perpendicular to tray length)
 		}
 		return getPocketLength(shape);
 	};
@@ -122,7 +140,8 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 	const getStandingHeightLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side is height
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side is height
 		}
 		return getCounterStandingHeight(shape);
 	};
@@ -131,7 +150,8 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 	const getStandingHeightCrosswise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side is height
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side is height
 		}
 		return getCounterStandingHeight(shape);
 	};
@@ -143,7 +163,8 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 			return hexPointyTop ? hexFlatToFlatBase : hexFlatToFlatBase / Math.cos(Math.PI / 6);
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.max(custom.width, custom.length); // Longer side along X
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l); // Longer side along X
 		}
 		return circleDiameterBase;
 	};
@@ -154,7 +175,8 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 			return hexPointyTop ? hexFlatToFlatBase / Math.cos(Math.PI / 6) : hexFlatToFlatBase;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side along Y
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side along Y
 		}
 		return circleDiameterBase;
 	};
diff --git a/src/lib/models/counterTray.ts b/src/lib/models/counterTray.ts
index a8d21af..1636ef3 100644
--- a/src/lib/models/counterTray.ts
+++ b/src/lib/models/counterTray.ts
@@ -17,11 +17,15 @@ export type TopLoadedStackDef = [string, number, string?];
 // Edge-loaded stack definition: [shape, count, orientation?, label?]
 export type EdgeLoadedStackDef = [string, number, EdgeOrientation?, string?];
 
+// Base shape types for custom shapes
+export type CustomBaseShape = 'rectangle' | 'square' | 'circle' | 'hex';
+
 // Custom shape definition
 export interface CustomShape {
 	name: string; // Unique identifier, e.g., "Large Card"
-	width: number; // X dimension (mm)
-	length: number; // Y dimension (mm)
+	baseShape: CustomBaseShape; // The underlying shape type
+	width: number; // For rectangle: width. For square/circle/hex: the single dimension (size/diameter/flat-to-flat)
+	length: number; // For rectangle: length. For square/circle/hex: same as width (auto-set)
 }
 
 export interface CounterTrayParams {
@@ -57,7 +61,7 @@ export const defaultParams: CounterTrayParams = {
 	wallThickness: 2.0,
 	floorThickness: 2.0,
 	rimHeight: 2.0,
-	cutoutRatio: 0.3,
+	cutoutRatio: 0.35,
 	cutoutMax: 12,
 	trayLengthOverride: 0,
 	extraTrayCols: 1,
@@ -79,6 +83,7 @@ export const defaultParams: CounterTrayParams = {
 export interface CounterStack {
 	shape: 'square' | 'hex' | 'circle' | 'custom';
 	customShapeName?: string; // Only set when shape === 'custom'
+	customBaseShape?: CustomBaseShape; // The base shape type when shape === 'custom'
 	x: number; // Center X position in tray (or slot start X for edge-loaded)
 	y: number; // Center Y position in tray (or slot start Y for edge-loaded)
 	z: number; // Bottom Z position of stack
@@ -150,16 +155,36 @@ export function getCounterPositions(
 		return customShapes?.find((s) => s.name === name) || null;
 	};
 
+	// Get effective dimensions for custom shapes based on their base shape
+	// Returns [width, length] accounting for hex point-to-point calculations
+	const getCustomEffectiveDims = (custom: CustomShape): [number, number] => {
+		const baseShape = custom.baseShape ?? 'rectangle';
+		if (baseShape === 'hex') {
+			// width stores flat-to-flat, calculate point-to-point
+			const flatToFlat = custom.width;
+			const pointToPoint = flatToFlat / Math.cos(Math.PI / 6);
+			// Use global hexPointyTop to determine orientation
+			const w = hexPointyTop ? flatToFlat : pointToPoint;
+			const l = hexPointyTop ? pointToPoint : flatToFlat;
+			return [w, l];
+		}
+		if (baseShape === 'circle' || baseShape === 'square') {
+			// Both dimensions are equal (diameter or size)
+			return [custom.width, custom.width];
+		}
+		// Rectangle: use width and length directly
+		return [custom.width, custom.length];
+	};
+
 	// Pocket width (X dimension) - for top-loaded/crosswise, use LONGER side (parallel to tray length)
 	const getPocketWidth = (shape: string): number => {
 		if (shape === 'square') return squarePocketWidth;
 		if (shape === 'hex') return hexPocketWidth;
 		const custom = getCustomShape(shape);
 		if (custom) {
+			const [w, l] = getCustomEffectiveDims(custom);
 			// For top-loaded/crosswise: longer side along X (parallel to tray length)
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.max(w, l);
+			return Math.max(w, l) + clearance * 2;
 		}
 		return circleDiameter;
 	};
@@ -170,10 +195,9 @@ export function getCounterPositions(
 		if (shape === 'hex') return hexPocketLength;
 		const custom = getCustomShape(shape);
 		if (custom) {
+			const [w, l] = getCustomEffectiveDims(custom);
 			// For top-loaded/crosswise: shorter side along Y
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.min(w, l);
+			return Math.min(w, l) + clearance * 2;
 		}
 		return circleDiameter;
 	};
@@ -183,9 +207,8 @@ export function getCounterPositions(
 	const getPocketLengthLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.max(w, l); // Longer side along Y (perpendicular to tray length)
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l) + clearance * 2; // Longer side along Y (perpendicular to tray length)
 		}
 		return getPocketLength(shape);
 	};
@@ -197,7 +220,8 @@ export function getCounterPositions(
 			return hexPointyTop ? hexFlatToFlatBase : hexFlatToFlatBase / Math.cos(Math.PI / 6);
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.max(custom.width, custom.length); // Longer side along X for top-loaded/crosswise
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l); // Longer side along X for top-loaded/crosswise
 		}
 		return circleDiameterBase;
 	};
@@ -208,7 +232,8 @@ export function getCounterPositions(
 			return hexPointyTop ? hexFlatToFlatBase / Math.cos(Math.PI / 6) : hexFlatToFlatBase;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side along Y for top-loaded/crosswise
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side along Y for top-loaded/crosswise
 		}
 		return circleDiameterBase;
 	};
@@ -218,7 +243,8 @@ export function getCounterPositions(
 	const getCounterWidthLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side (standing height)
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side (standing height)
 		}
 		return getCounterWidth(shape);
 	};
@@ -226,7 +252,8 @@ export function getCounterPositions(
 	const getCounterLengthLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.max(custom.width, custom.length); // Longer side along Y
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l); // Longer side along Y
 		}
 		return getCounterLength(shape);
 	};
@@ -240,7 +267,8 @@ export function getCounterPositions(
 	const getStandingHeightLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side is height
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side is height
 		}
 		return getStandingHeight(shape);
 	};
@@ -249,17 +277,24 @@ export function getCounterPositions(
 	const getStandingHeightCrosswise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side is height
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side is height
 		}
 		return getStandingHeight(shape);
 	};
 
-	// Parse shape reference to get shape type and custom name
+	// Parse shape reference to get shape type, custom name, and base shape
 	const parseShapeRef = (
 		shapeRef: string
-	): { shapeType: 'square' | 'hex' | 'circle' | 'custom'; customName?: string } => {
+	): { shapeType: 'square' | 'hex' | 'circle' | 'custom'; customName?: string; customBaseShape?: CustomBaseShape } => {
 		if (shapeRef.startsWith('custom:')) {
-			return { shapeType: 'custom', customName: shapeRef.substring(7) };
+			const customName = shapeRef.substring(7);
+			const customShape = getCustomShape(shapeRef);
+			return {
+				shapeType: 'custom',
+				customName,
+				customBaseShape: customShape?.baseShape ?? 'rectangle'
+			};
 		}
 		return { shapeType: shapeRef as 'square' | 'hex' | 'circle' };
 	};
@@ -521,7 +556,7 @@ export function getCounterPositions(
 	// Add lengthwise edge-loaded stacks (using pre-calculated positions)
 	for (let i = 0; i < lengthwiseSlots.length; i++) {
 		const slot = lengthwiseSlots[i];
-		const { shapeType, customName } = parseShapeRef(slot.shape);
+		const { shapeType, customName, customBaseShape } = parseShapeRef(slot.shape);
 		const pocketFloorZ = trayHeight - rimHeight - slot.standingHeight;
 		const rowAssignment = (slot as EdgeLoadedSlot & { rowAssignment: string }).rowAssignment;
 		const slotXStart = (slot as EdgeLoadedSlot & { xPosition: number }).xPosition;
@@ -530,6 +565,7 @@ export function getCounterPositions(
 		counterStacks.push({
 			shape: shapeType,
 			customShapeName: customName,
+			customBaseShape,
 			x: slotXStart,
 			y: slotYStart,
 			z: pocketFloorZ + spacerOffset,
@@ -555,7 +591,7 @@ export function getCounterPositions(
 	// Add crosswise edge-loaded stacks (using pre-calculated positions and row assignments)
 	for (let i = 0; i < crosswiseSlots.length; i++) {
 		const slot = crosswiseSlots[i];
-		const { shapeType, customName } = parseShapeRef(slot.shape);
+		const { shapeType, customName, customBaseShape } = parseShapeRef(slot.shape);
 		const pocketFloorZ = trayHeight - rimHeight - slot.standingHeight;
 		const slotXStart = (slot as EdgeLoadedSlot & { xPosition: number }).xPosition;
 		const rowAssignment = (slot as EdgeLoadedSlot & { rowAssignment: string }).rowAssignment;
@@ -572,16 +608,21 @@ export function getCounterPositions(
 
 		// For crosswise custom shapes: width=shorter (standing height), length=longer (horizontal X dim)
 		const custom = getCustomShape(slot.shape);
-		const counterWidth = custom
-			? Math.min(custom.width, custom.length)
-			: getCounterWidth(slot.shape);
-		const counterLength = custom
-			? Math.max(custom.width, custom.length)
-			: getCounterLength(slot.shape);
+		let counterWidth: number;
+		let counterLength: number;
+		if (custom) {
+			const [w, l] = getCustomEffectiveDims(custom);
+			counterWidth = Math.min(w, l);
+			counterLength = Math.max(w, l);
+		} else {
+			counterWidth = getCounterWidth(slot.shape);
+			counterLength = getCounterLength(slot.shape);
+		}
 
 		counterStacks.push({
 			shape: shapeType,
 			customShapeName: customName,
+			customBaseShape,
 			x: slotXStart,
 			y: slotYStart,
 			z: pocketFloorZ + spacerOffset,
@@ -600,7 +641,7 @@ export function getCounterPositions(
 
 	// Add top-loaded stacks (using greedy bin-packing placements)
 	for (const placement of topLoadedPlacements) {
-		const { shapeType, customName } = parseShapeRef(placement.shapeRef);
+		const { shapeType, customName, customBaseShape } = parseShapeRef(placement.shapeRef);
 		const pocketDepth = placement.count * counterThickness;
 		const pocketFloorZ = trayHeight - rimHeight - pocketDepth;
 
@@ -623,6 +664,7 @@ export function getCounterPositions(
 		counterStacks.push({
 			shape: shapeType,
 			customShapeName: customName,
+			customBaseShape,
 			x: xCenter,
 			y: yCenter,
 			z: pocketFloorZ + spacerOffset,
@@ -700,6 +742,27 @@ export function createCounterTray(
 		return customShapes?.find((s) => s.name === name) || null;
 	};
 
+	// Get effective dimensions for custom shapes based on their base shape
+	// Returns [width, length] accounting for hex point-to-point calculations
+	const getCustomEffectiveDims = (custom: CustomShape): [number, number] => {
+		const baseShape = custom.baseShape ?? 'rectangle';
+		if (baseShape === 'hex') {
+			// width stores flat-to-flat, calculate point-to-point
+			const flatToFlat = custom.width;
+			const pointToPoint = flatToFlat / Math.cos(Math.PI / 6);
+			// Use global hexPointyTop to determine orientation
+			const w = hexPointyTop ? flatToFlat : pointToPoint;
+			const l = hexPointyTop ? pointToPoint : flatToFlat;
+			return [w, l];
+		}
+		if (baseShape === 'circle' || baseShape === 'square') {
+			// Both dimensions are equal (diameter or size)
+			return [custom.width, custom.width];
+		}
+		// Rectangle: use width and length directly
+		return [custom.width, custom.length];
+	};
+
 	// Get pocket dimensions for a shape
 	// For top-loaded/crosswise custom shapes: LONGER side = width (X), SHORTER side = length (Y)
 	const getPocketWidth = (shape: string): number => {
@@ -707,9 +770,8 @@ export function createCounterTray(
 		if (shape === 'hex') return hexPocketWidth;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.max(w, l); // Longer side along X (parallel to tray length)
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l) + clearance * 2; // Longer side along X (parallel to tray length)
 		}
 		return circlePocketWidth;
 	};
@@ -719,9 +781,8 @@ export function createCounterTray(
 		if (shape === 'hex') return hexPocketLength;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.min(w, l); // Shorter side along Y
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l) + clearance * 2; // Shorter side along Y
 		}
 		return circlePocketLength;
 	};
@@ -731,9 +792,8 @@ export function createCounterTray(
 	const getPocketLengthLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			const w = custom.width + clearance * 2;
-			const l = custom.length + clearance * 2;
-			return Math.max(w, l); // Longer side along Y (perpendicular to tray length)
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l) + clearance * 2; // Longer side along Y (perpendicular to tray length)
 		}
 		return getPocketLength(shape);
 	};
@@ -745,7 +805,8 @@ export function createCounterTray(
 			return hexPointyTop ? hexFlatToFlatBase : hexFlatToFlatBase / Math.cos(Math.PI / 6);
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.max(custom.width, custom.length); // Longer side along X
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.max(w, l); // Longer side along X
 		}
 		return circleDiameterBase;
 	};
@@ -756,7 +817,8 @@ export function createCounterTray(
 			return hexPointyTop ? hexFlatToFlatBase / Math.cos(Math.PI / 6) : hexFlatToFlatBase;
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side along Y
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side along Y
 		}
 		return circleDiameterBase;
 	};
@@ -769,7 +831,8 @@ export function createCounterTray(
 	const getStandingHeightLengthwise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side is height
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side is height
 		}
 		return getStandingHeight(shape);
 	};
@@ -778,7 +841,8 @@ export function createCounterTray(
 	const getStandingHeightCrosswise = (shape: string): number => {
 		const custom = getCustomShape(shape);
 		if (custom) {
-			return Math.min(custom.width, custom.length); // Shorter side is height
+			const [w, l] = getCustomEffectiveDims(custom);
+			return Math.min(w, l); // Shorter side is height
 		}
 		return getStandingHeight(shape);
 	};
@@ -1096,8 +1160,43 @@ export function createCounterTray(
 		const pw = getPocketWidth(shape);
 		const pl = getPocketLength(shape);
 
-		// Custom shapes are rectangular, use cuboid like square
-		if (shape === 'square' || shape.startsWith('custom:')) {
+		// Check if this is a custom shape and get its base shape type
+		if (shape.startsWith('custom:')) {
+			const custom = getCustomShape(shape);
+			const baseShape = custom?.baseShape ?? 'rectangle';
+
+			if (baseShape === 'hex') {
+				// Custom hex: calculate point-to-point from flat-to-flat
+				const flatToFlat = (custom?.width ?? 15) + clearance * 2;
+				const pointToPoint = flatToFlat / Math.cos(Math.PI / 6);
+				const hex = cylinder({
+					height,
+					radius: pointToPoint / 2,
+					segments: 6,
+					center: [0, 0, height / 2]
+				});
+				const rotated = hexPointyTop ? rotateZ(Math.PI / 6, hex) : hex;
+				return translate([pw / 2, pl / 2, 0], rotated);
+			} else if (baseShape === 'circle') {
+				// Custom circle: use width as diameter
+				const diameter = (custom?.width ?? 15) + clearance * 2;
+				return translate(
+					[pw / 2, pl / 2, 0],
+					cylinder({
+						height,
+						radius: diameter / 2,
+						segments: 64,
+						center: [0, 0, height / 2]
+					})
+				);
+			} else {
+				// Rectangle or square: use cuboid
+				return cuboid({ size: [pw, pl, height], center: [pw / 2, pl / 2, height / 2] });
+			}
+		}
+
+		// Built-in shapes
+		if (shape === 'square') {
 			return cuboid({ size: [pw, pl, height], center: [pw / 2, pl / 2, height / 2] });
 		} else if (shape === 'hex') {
 			const hex = cylinder({
diff --git a/src/lib/models/lid.ts b/src/lib/models/lid.ts
index fe00013..9ec6bba 100644
--- a/src/lib/models/lid.ts
+++ b/src/lib/models/lid.ts
@@ -1225,9 +1225,9 @@ export function createLid(box: Box): Geom3 | null {
 				// If lid is longer in Y, rotate text 90° to read along Y axis
 				if (rotateText) {
 					combinedText = rotateZ(Math.PI / 2, combinedText);
-					// After rotation: old X becomes Y, old Y becomes -X
+					// After mirrorY + rotateZ: center at (textCenterY, textCenterX)
 					const positionedText = translate(
-						[centerX - textCenterY * textScale, centerY + textCenterX * textScale, -0.1],
+						[centerX - textCenterY * textScale, centerY - textCenterX * textScale, -0.1],
 						scale([textScale, textScale, 1], combinedText)
 					);
 					lid = subtract(lid, positionedText);

From 060586c954d091dcf3fdea20847ab1ec2f975ddb Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Sat, 21 Feb 2026 16:34:03 -0500
Subject: [PATCH 2/5] linting

---
 src/routes/+page.svelte | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e7d3f7f..f087f86 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -456,23 +456,25 @@
 							>
 								{#if communityProjects.length > 0}
 									<div class="px-4 py-2">
-										<label class="mb-1 block text-xs text-gray-400">Load community project</label>
-										<select
-											class="w-full cursor-pointer rounded border border-gray-600 bg-gray-700 px-2 py-1.5 text-sm text-white"
-											onchange={(e) => {
-												const select = e.target as HTMLSelectElement;
-												const project = communityProjects.find((p) => p.id === select.value);
-												if (project) {
-													loadCommunityProject(project);
-												}
-												select.value = '';
-											}}
-										>
-											<option value="">Select a project...</option>
-											{#each communityProjects as project (project.id)}
-												<option value={project.id}>{project.name}</option>
-											{/each}
-										</select>
+										<label class="mb-1 block text-xs text-gray-400"
+											>Load community project
+											<select
+												class="mt-1 w-full cursor-pointer rounded border border-gray-600 bg-gray-700 px-2 py-1.5 text-sm text-white"
+												onchange={(e) => {
+													const select = e.target as HTMLSelectElement;
+													const project = communityProjects.find((p) => p.id === select.value);
+													if (project) {
+														loadCommunityProject(project);
+													}
+													select.value = '';
+												}}
+											>
+												<option value="">Select a project...</option>
+												{#each communityProjects as project (project.id)}
+													<option value={project.id}>{project.name}</option>
+												{/each}
+											</select>
+										</label>
 									</div>
 								{/if}
 								<input

From 8e9d23458675e2f5b2b4308f458059c7ceb6b761 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Sat, 21 Feb 2026 16:36:10 -0500
Subject: [PATCH 3/5] linting

---
 src/lib/components/TrayScene.svelte | 12 ++++++++----
 src/lib/models/box.ts               |  4 +++-
 src/lib/models/counterTray.ts       |  6 +++++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/TrayScene.svelte b/src/lib/components/TrayScene.svelte
index 2a4f844..cc708b4 100644
--- a/src/lib/components/TrayScene.svelte
+++ b/src/lib/components/TrayScene.svelte
@@ -445,7 +445,8 @@
 		{#if stack.isEdgeLoaded}
 			<!-- Edge-loaded: counters standing on edge like books -->
 			{#each Array(stack.count) as _counterItem, counterIdx (counterIdx)}
-				{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
+				{@const effectiveShape =
+					stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
 				{@const standingHeight =
 					stack.shape === 'custom'
 						? Math.min(stack.width, stack.length)
@@ -532,7 +533,8 @@
 				{@const posZ = meshOffset.z - stack.y}
 				{@const isAlt = counterIdx % 2 === 1}
 				{@const counterColor = isAlt ? `hsl(${(stackIdx * 137.508) % 360}, 50%, 40%)` : stack.color}
-				{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
+				{@const effectiveShape =
+					stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
 				{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 					<T.Mesh position.x={posX} position.y={posY} position.z={posZ}>
 						<T.BoxGeometry args={[stack.width, stack.thickness, stack.length]} />
@@ -581,7 +583,8 @@
 			{#if stack.isEdgeLoaded}
 				<!-- Edge-loaded: counters standing on edge like books -->
 				{#each Array(stack.count) as _counterItem, counterIdx (counterIdx)}
-					{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
+					{@const effectiveShape =
+						stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
 					{@const standingHeight =
 						stack.shape === 'custom'
 							? Math.min(stack.width, stack.length)
@@ -676,7 +679,8 @@
 					{@const counterColor = isAlt
 						? `hsl(${(stackIdx * 137.508) % 360}, 50%, 40%)`
 						: stack.color}
-					{@const effectiveShape = stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
+					{@const effectiveShape =
+						stack.shape === 'custom' ? (stack.customBaseShape ?? 'rectangle') : stack.shape}
 					{#if effectiveShape === 'square' || effectiveShape === 'rectangle'}
 						<T.Mesh position.x={posX} position.y={posY} position.z={posZ}>
 							<T.BoxGeometry args={[stack.width, stack.thickness, stack.length]} />
diff --git a/src/lib/models/box.ts b/src/lib/models/box.ts
index 69a51b4..c3933e6 100644
--- a/src/lib/models/box.ts
+++ b/src/lib/models/box.ts
@@ -83,7 +83,9 @@ export function getTrayDimensions(params: CounterTrayParams): TrayDimensions {
 
 	// Get effective dimensions for custom shapes based on their base shape
 	// Returns [width, length] accounting for hex point-to-point calculations
-	const getCustomEffectiveDims = (custom: NonNullable<ReturnType<typeof getCustomShape>>): [number, number] => {
+	const getCustomEffectiveDims = (
+		custom: NonNullable<ReturnType<typeof getCustomShape>>
+	): [number, number] => {
 		const baseShape = custom.baseShape ?? 'rectangle';
 		if (baseShape === 'hex') {
 			// width stores flat-to-flat, calculate point-to-point
diff --git a/src/lib/models/counterTray.ts b/src/lib/models/counterTray.ts
index 1636ef3..8beb9d9 100644
--- a/src/lib/models/counterTray.ts
+++ b/src/lib/models/counterTray.ts
@@ -286,7 +286,11 @@ export function getCounterPositions(
 	// Parse shape reference to get shape type, custom name, and base shape
 	const parseShapeRef = (
 		shapeRef: string
-	): { shapeType: 'square' | 'hex' | 'circle' | 'custom'; customName?: string; customBaseShape?: CustomBaseShape } => {
+	): {
+		shapeType: 'square' | 'hex' | 'circle' | 'custom';
+		customName?: string;
+		customBaseShape?: CustomBaseShape;
+	} => {
 		if (shapeRef.startsWith('custom:')) {
 			const customName = shapeRef.substring(7);
 			const customShape = getCustomShape(shapeRef);

From 2ca0cca9607c65d3c4017a36f054a9418e129ef9 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Sat, 21 Feb 2026 16:37:40 -0500
Subject: [PATCH 4/5] add key

---
 src/lib/components/GlobalsPanel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/GlobalsPanel.svelte b/src/lib/components/GlobalsPanel.svelte
index 3346160..e545eb6 100644
--- a/src/lib/components/GlobalsPanel.svelte
+++ b/src/lib/components/GlobalsPanel.svelte
@@ -219,7 +219,7 @@
 								onchange={(e) => updateCustomShape(index, 'baseShape', e.currentTarget.value)}
 								class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
 							>
-								{#each baseShapeOptions as option}
+								{#each baseShapeOptions as option (option.value)}
 									<option value={option.value}>{option.label}</option>
 								{/each}
 							</select>

From e8d67da97bdfc5cb4f439e5174bc0a36e594063d Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Sat, 21 Feb 2026 16:49:09 -0500
Subject: [PATCH 5/5] clarity in text

---
 src/lib/components/GlobalsPanel.svelte | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/GlobalsPanel.svelte b/src/lib/components/GlobalsPanel.svelte
index e545eb6..6973b71 100644
--- a/src/lib/components/GlobalsPanel.svelte
+++ b/src/lib/components/GlobalsPanel.svelte
@@ -122,26 +122,19 @@
 
 	<section>
 		<h3 class="mb-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">
-			Counter Dimensions
+			Simple Counters
 		</h3>
 		<div class="grid grid-cols-2 gap-2">
 			<label class="block">
-				<span class="text-xs text-gray-400">Square Width</span>
+				<span class="text-xs text-gray-400">Square</span>
 				<input
 					type="number"
 					step="0.1"
 					value={params.squareWidth}
-					onchange={(e) => updateParam('squareWidth', parseFloat(e.currentTarget.value))}
-					class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
-				/>
-			</label>
-			<label class="block">
-				<span class="text-xs text-gray-400">Square Length</span>
-				<input
-					type="number"
-					step="0.1"
-					value={params.squareLength}
-					onchange={(e) => updateParam('squareLength', parseFloat(e.currentTarget.value))}
+					onchange={(e) => {
+						const val = parseFloat(e.currentTarget.value);
+						onchange({ ...params, squareWidth: val, squareLength: val });
+					}}
 					class="mt-1 block w-full rounded border-gray-600 bg-gray-700 px-2 py-1 text-sm"
 				/>
 			</label>