@joewinke/jatui 0.1.28 → 0.1.29

package/dist/actions/railNav.js

@@ -60,17 +60,6 @@
  *   3. Handle Left/Right in `onAction` and call `rail.bump(host)` on change:
  *        onAction: (id, dir, host) => { formData[id] = cycle(opts[id], …, dir); rail.bump(host); }
  */
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 // ─── Exported helpers ──────────────────────────────────────────────────────────
 /**
  * Cycle through `list`, returning the item `dir` steps from `current`.
@@ -84,40 +73,39 @@ var __assign = (this && this.__assign) || function () {
 export function cycle(list, current, dir) {
     if (list.length === 0)
         return current;
-    var i = list.indexOf(current);
+    const i = list.indexOf(current);
     // When `current` is not in the list, treat it as if we're at position -1
     // so that `dir=1` lands at index 0 (the first item) and `dir=-1` lands at
     // the last item — matching the "not found → start from the beginning" idiom.
-    var base = i === -1 ? -1 : i;
+    const base = i === -1 ? -1 : i;
     return list[(((base + dir) % list.length) + list.length) % list.length];
 }
 // ─── Internals ─────────────────────────────────────────────────────────────────
-var BUMP_DURATION_MS = 280;
-var RAIL_FOCUS_CLASS = 'rail-focus';
-var RAIL_CYCLED_CLASS = 'rail-cycled';
+const BUMP_DURATION_MS = 280;
+const RAIL_FOCUS_CLASS = 'rail-focus';
+const RAIL_CYCLED_CLASS = 'rail-cycled';
 function resolveOrder(opts) {
     return typeof opts.order === 'function' ? opts.order() : opts.order;
 }
 function resolveAttr(opts) {
-    var _a;
-    return (_a = opts.attr) !== null && _a !== void 0 ? _a : 'data-rail-id';
+    return opts.attr ?? 'data-rail-id';
 }
 /** Return all currently-rendered rung hosts in the rail order. */
 function resolveHosts(optsRef) {
-    var container = optsRef.current.container;
+    const { container } = optsRef.current;
     if (!container)
         return [];
-    var attr = resolveAttr(optsRef.current);
-    var order = resolveOrder(optsRef.current);
+    const attr = resolveAttr(optsRef.current);
+    const order = resolveOrder(optsRef.current);
     return order
-        .map(function (id) { return container.querySelector("[".concat(attr, "=\"").concat(id, "\"]")); })
+        .map((id) => container.querySelector(`[${attr}="${id}"]`))
         // checkVisibility() correctly returns false for elements inside a closed <details>
         // (browsers keep offsetParent non-null for those, so that check alone is insufficient).
         // Where checkVisibility is unavailable (jsdom, older engines) treat the rung as
         // visible — a rendered element in `order` is navigable by default; only the
         // closed-<details> case needs the extra exclusion, and that only exists in a
         // real layout engine.
-        .filter(function (el) { var _a, _b; return !!el && ((_b = (_a = el.checkVisibility) === null || _a === void 0 ? void 0 : _a.call(el)) !== null && _b !== void 0 ? _b : true); });
+        .filter((el) => !!el && (el.checkVisibility?.() ?? true));
 }
 /**
  * Focus the most appropriate control inside a rung host:
@@ -132,17 +120,17 @@ function resolveHosts(optsRef) {
  *  4. Last resort: focus the host itself (requires tabindex on the host).
  */
 function focusRailHost(host) {
-    var _a;
     if (host.matches('input,select,textarea,button,[contenteditable="true"],[tabindex]')) {
         host.focus();
         return;
     }
-    var inner = (_a = host.querySelector('[contenteditable="true"],input,select,textarea')) !== null && _a !== void 0 ? _a : host.querySelector('.sd-trigger,button');
-    (inner !== null && inner !== void 0 ? inner : host).focus();
+    const inner = host.querySelector('[contenteditable="true"],input,select,textarea') ??
+        host.querySelector('.sd-trigger,button');
+    (inner ?? host).focus();
 }
 function makeController(optsRef) {
-    var _currentRailId = '';
-    var _lastFocusedHost = null;
+    let _currentRailId = '';
+    let _lastFocusedHost = null;
     function applyFocusClass(host) {
         if (_lastFocusedHost && _lastFocusedHost !== host) {
             _lastFocusedHost.classList.remove(RAIL_FOCUS_CLASS);
@@ -157,14 +145,14 @@ function makeController(optsRef) {
         host.classList.remove(RAIL_CYCLED_CLASS);
         void host.offsetWidth; // reflow so the animation restarts on rapid presses
         host.classList.add(RAIL_CYCLED_CLASS);
-        setTimeout(function () { return host.classList.remove(RAIL_CYCLED_CLASS); }, BUMP_DURATION_MS);
+        setTimeout(() => host.classList.remove(RAIL_CYCLED_CLASS), BUMP_DURATION_MS);
     }
     function focus(id) {
-        var container = optsRef.current.container;
+        const { container } = optsRef.current;
         if (!container)
             return;
-        var attr = resolveAttr(optsRef.current);
-        var host = container.querySelector("[".concat(attr, "=\"").concat(id, "\"]"));
+        const attr = resolveAttr(optsRef.current);
+        const host = container.querySelector(`[${attr}="${id}"]`);
         if (host) {
             focusRailHost(host);
             applyFocusClass(host);
@@ -175,21 +163,20 @@ function makeController(optsRef) {
         }
     }
     function moveRung(dir) {
-        var _a;
-        var hosts = resolveHosts(optsRef);
+        const hosts = resolveHosts(optsRef);
         if (hosts.length === 0)
             return;
-        var attr = resolveAttr(optsRef.current);
-        var ids = hosts.map(function (h) { return h.getAttribute(attr); });
+        const attr = resolveAttr(optsRef.current);
+        const ids = hosts.map((h) => h.getAttribute(attr));
         // Anchor on the actually-focused rung first. Fall back to the last tracked
         // rung (covers focus parked on the container after an Escape pop-out).
-        var active = document.activeElement;
-        var activeFocused = (_a = (active === null || active === void 0 ? void 0 : active.closest("[".concat(attr, "]")))) === null || _a === void 0 ? void 0 : _a.getAttribute(attr);
-        var fromId = activeFocused && ids.includes(activeFocused) ? activeFocused : _currentRailId;
-        var pos = fromId ? ids.indexOf(fromId) : -1;
+        const active = document.activeElement;
+        const activeFocused = (active?.closest(`[${attr}]`))?.getAttribute(attr);
+        const fromId = activeFocused && ids.includes(activeFocused) ? activeFocused : _currentRailId;
+        let pos = fromId ? ids.indexOf(fromId) : -1;
         if (pos === -1)
             pos = dir === 1 ? -1 : hosts.length;
-        var next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
+        const next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
         focusRailHost(hosts[next]);
         applyFocusClass(hosts[next]);
         _currentRailId = ids[next];
@@ -197,10 +184,9 @@ function makeController(optsRef) {
     function refresh() {
         // Re-derive hosts; re-apply focus class if the current rung is still rendered
         // (DOM may have been reconstructed by Svelte's reactive updates).
-        var hosts = resolveHosts(optsRef);
-        var attr = resolveAttr(optsRef.current);
-        for (var _i = 0, hosts_1 = hosts; _i < hosts_1.length; _i++) {
-            var h = hosts_1[_i];
+        const hosts = resolveHosts(optsRef);
+        const attr = resolveAttr(optsRef.current);
+        for (const h of hosts) {
             if (h.getAttribute(attr) === _currentRailId) {
                 applyFocusClass(h);
                 return;
@@ -208,11 +194,10 @@ function makeController(optsRef) {
         }
     }
     function handleFocusin(event) {
-        var _a;
-        var attr = resolveAttr(optsRef.current);
-        var order = resolveOrder(optsRef.current);
-        var host = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("[".concat(attr, "]"));
-        var id = host === null || host === void 0 ? void 0 : host.getAttribute(attr);
+        const attr = resolveAttr(optsRef.current);
+        const order = resolveOrder(optsRef.current);
+        const host = event.target?.closest(`[${attr}]`);
+        const id = host?.getAttribute(attr);
         // Only track rungs that are in the rail order. Tabbing into an off-rail
         // control (e.g. a description textarea) leaves the last real rung intact
         // so Up / Down can resume from it after the user tabs back out.
@@ -222,18 +207,17 @@ function makeController(optsRef) {
         }
     }
     function handleKeydown(event) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var opts = optsRef.current;
-        var el = document.activeElement;
-        var tag = el === null || el === void 0 ? void 0 : el.tagName;
-        var isTextField = !!el &&
+        const opts = optsRef.current;
+        const el = document.activeElement;
+        const tag = el?.tagName;
+        const isTextField = !!el &&
             (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
-        var isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
-        var hasMod = event.metaKey || event.ctrlKey || event.altKey;
+        const isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
+        const hasMod = event.metaKey || event.ctrlKey || event.altKey;
         // Modal trap — stop non-text keystrokes from bubbling to window-level page
         // listeners (e.g., a listNav attached to `window`). Text-field keystrokes
         // propagate normally so typing in the drawer doesn't interfere.
-        var trap = opts.trap !== false;
+        const trap = opts.trap !== false;
         if (trap && !isTextField)
             event.stopPropagation();
         // Escape cascade:
@@ -241,33 +225,33 @@ function makeController(optsRef) {
         //  2. focus inside a descendant control → pop back to container
         //  3. focus already on the container (or just popped) → call onEscape
         if (event.key === 'Escape' && !hasMod) {
-            var popoverOpen_1 = (_b = (_a = opts.isPopoverOpen) === null || _a === void 0 ? void 0 : _a.call(opts)) !== null && _b !== void 0 ? _b : false;
-            if (popoverOpen_1) {
+            const popoverOpen = opts.isPopoverOpen?.() ?? false;
+            if (popoverOpen) {
                 event.preventDefault();
-                (_c = opts.onPopoverEscape) === null || _c === void 0 ? void 0 : _c.call(opts);
+                opts.onPopoverEscape?.();
                 return true;
             }
-            var container = opts.container;
+            const { container } = opts;
             if (container && el && el !== container && container.contains(el)) {
                 event.preventDefault();
                 container.focus();
                 return true;
             }
             event.preventDefault();
-            (_d = opts.onEscape) === null || _d === void 0 ? void 0 : _d.call(opts);
+            opts.onEscape?.();
             return true;
         }
         // Rail motion — suppressed when a popover is open or a modifier is held.
-        var popoverOpen = (_f = (_e = opts.isPopoverOpen) === null || _e === void 0 ? void 0 : _e.call(opts)) !== null && _f !== void 0 ? _f : false;
+        const popoverOpen = opts.isPopoverOpen?.() ?? false;
         if (!hasMod && !popoverOpen) {
             // Vertical: ArrowDown / j step down; ArrowUp / k step up.
             // j / k are blocked in ANY text field; arrows are blocked only inside
             // multiline fields so the caret can still move line-by-line.
-            var goDown = event.key === 'ArrowDown' || event.key === 'j';
-            var goUp = event.key === 'ArrowUp' || event.key === 'k';
+            const goDown = event.key === 'ArrowDown' || event.key === 'j';
+            const goUp = event.key === 'ArrowUp' || event.key === 'k';
             if (goDown || goUp) {
-                var isVimKey = event.key === 'j' || event.key === 'k';
-                var blocked = isVimKey ? isTextField : isMultiline;
+                const isVimKey = event.key === 'j' || event.key === 'k';
+                const blocked = isVimKey ? isTextField : isMultiline;
                 if (!blocked) {
                     event.preventDefault();
                     moveRung(goDown ? 1 : -1);
@@ -279,14 +263,15 @@ function makeController(optsRef) {
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
                 !isTextField) {
                 event.preventDefault();
-                var attr = resolveAttr(opts);
+                const attr = resolveAttr(opts);
                 // Prefer the element that actually has DOM focus, then fall back to
                 // the last tracked rung (focus parked on the container after pop-out).
-                var focusedHost = (_g = (el === null || el === void 0 ? void 0 : el.closest("[".concat(attr, "]")))) !== null && _g !== void 0 ? _g : (opts.container && _currentRailId
-                    ? opts.container.querySelector("[".concat(attr, "=\"").concat(_currentRailId, "\"]"))
-                    : null);
+                const focusedHost = (el?.closest(`[${attr}]`)) ??
+                    (opts.container && _currentRailId
+                        ? opts.container.querySelector(`[${attr}="${_currentRailId}"]`)
+                        : null);
                 if (focusedHost && opts.onAction) {
-                    var rungId = (_h = focusedHost.getAttribute(attr)) !== null && _h !== void 0 ? _h : '';
+                    const rungId = focusedHost.getAttribute(attr) ?? '';
                     opts.onAction(rungId, event.key === 'ArrowRight' ? 1 : -1, focusedHost);
                 }
                 return true;
@@ -295,13 +280,13 @@ function makeController(optsRef) {
         return false;
     }
     return {
-        handleKeydown: handleKeydown,
-        handleFocusin: handleFocusin,
-        moveRung: moveRung,
-        focus: focus,
-        refresh: refresh,
-        currentId: function () { return _currentRailId; },
-        bump: bump,
+        handleKeydown,
+        handleFocusin,
+        moveRung,
+        focus,
+        refresh,
+        currentId: () => _currentRailId,
+        bump,
     };
 }
 // ─── Composable ────────────────────────────────────────────────────────────────
@@ -316,7 +301,7 @@ function makeController(optsRef) {
  *   panel.addEventListener('focusin', (e) => rail.handleFocusin(e));
  */
 export function createRailNav(options) {
-    var ref = { current: options };
+    const ref = { current: options };
     return makeController(ref);
 }
 // ─── Action ────────────────────────────────────────────────────────────────────
@@ -331,10 +316,9 @@ export function createRailNav(options) {
  *     <div   data-rail-id="priority" tabindex="-1">…</div>
  *   </div>
  */
-export var railNav = function (node, initial) {
-    if (initial === void 0) { initial = { order: [] }; }
-    var ref = { current: __assign(__assign({}, initial), { container: node }) };
-    var controller = makeController(ref);
+export const railNav = (node, initial = { order: [] }) => {
+    const ref = { current: { ...initial, container: node } };
+    const controller = makeController(ref);
     function onKeydown(e) {
         controller.handleKeydown(e);
     }
@@ -344,12 +328,11 @@ export var railNav = function (node, initial) {
     node.addEventListener('keydown', onKeydown);
     node.addEventListener('focusin', onFocusin);
     return {
-        update: function (next) {
-            if (next === void 0) { next = { order: [] }; }
-            ref.current = __assign(__assign({}, next), { container: node });
+        update(next = { order: [] }) {
+            ref.current = { ...next, container: node };
             controller.refresh();
         },
-        destroy: function () {
+        destroy() {
             node.removeEventListener('keydown', onKeydown);
             node.removeEventListener('focusin', onFocusin);
         },

package/dist/components/markup.js

@@ -1,6 +1,6 @@
 // Markup drawing primitives for construction drawing redlining
 // Adapted from JAT feedback annotation engine with cloud bubble tool added
-export var MARKUP_COLORS = [
+export const MARKUP_COLORS = [
     "#ef4444",
     "#eab308",
     "#22c55e",
@@ -8,13 +8,13 @@ export var MARKUP_COLORS = [
     "#ffffff",
     "#111827",
 ];
-export var DEFAULT_STROKE_WIDTH = 3;
-var _nextId = 1;
+export const DEFAULT_STROKE_WIDTH = 3;
+let _nextId = 1;
 export function nextShapeId() {
     return _nextId++;
 }
 function drawArrow(ctx, shape) {
-    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    const { start, end, color, strokeWidth } = shape;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineCap = "round";
@@ -24,9 +24,9 @@ function drawArrow(ctx, shape) {
     ctx.lineTo(end.x, end.y);
     ctx.stroke();
     // Arrowhead
-    var angle = Math.atan2(end.y - start.y, end.x - start.x);
-    var headLen = 14;
-    var headAngle = Math.PI / 7;
+    const angle = Math.atan2(end.y - start.y, end.x - start.x);
+    const headLen = 14;
+    const headAngle = Math.PI / 7;
     ctx.beginPath();
     ctx.moveTo(end.x, end.y);
     ctx.lineTo(end.x - headLen * Math.cos(angle - headAngle), end.y - headLen * Math.sin(angle - headAngle));
@@ -35,24 +35,24 @@ function drawArrow(ctx, shape) {
     ctx.stroke();
 }
 function drawRectangle(ctx, shape) {
-    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    const { start, end, color, strokeWidth } = shape;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineJoin = "round";
-    var x = Math.min(start.x, end.x);
-    var y = Math.min(start.y, end.y);
-    var w = Math.abs(end.x - start.x);
-    var h = Math.abs(end.y - start.y);
+    const x = Math.min(start.x, end.x);
+    const y = Math.min(start.y, end.y);
+    const w = Math.abs(end.x - start.x);
+    const h = Math.abs(end.y - start.y);
     ctx.strokeRect(x, y, w, h);
 }
 function drawEllipse(ctx, shape) {
-    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    const { start, end, color, strokeWidth } = shape;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
-    var cx = (start.x + end.x) / 2;
-    var cy = (start.y + end.y) / 2;
-    var rx = Math.abs(end.x - start.x) / 2;
-    var ry = Math.abs(end.y - start.y) / 2;
+    const cx = (start.x + end.x) / 2;
+    const cy = (start.y + end.y) / 2;
+    const rx = Math.abs(end.x - start.x) / 2;
+    const ry = Math.abs(end.y - start.y) / 2;
     if (rx < 1 || ry < 1)
         return;
     ctx.beginPath();
@@ -64,53 +64,51 @@ function drawEllipse(ctx, shape) {
  * Standard construction markup tool for highlighting areas of change.
  */
 function drawCloud(ctx, shape) {
-    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    const { start, end, color, strokeWidth } = shape;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    var x = Math.min(start.x, end.x);
-    var y = Math.min(start.y, end.y);
-    var w = Math.abs(end.x - start.x);
-    var h = Math.abs(end.y - start.y);
+    const x = Math.min(start.x, end.x);
+    const y = Math.min(start.y, end.y);
+    const w = Math.abs(end.x - start.x);
+    const h = Math.abs(end.y - start.y);
     if (w < 4 || h < 4)
         return;
     // Generate perimeter points, then draw arcs between them
-    var arcSize = Math.min(w, h, 30); // arc diameter adapts to shape size
-    var perimeter = 2 * (w + h);
-    var numArcs = Math.max(8, Math.round(perimeter / arcSize));
+    const arcSize = Math.min(w, h, 30); // arc diameter adapts to shape size
+    const perimeter = 2 * (w + h);
+    const numArcs = Math.max(8, Math.round(perimeter / arcSize));
     // Collect points along the rectangle perimeter
-    var points = [];
-    var segLengths = [w, h, w, h];
-    var segDirs = [
+    const points = [];
+    const segLengths = [w, h, w, h];
+    const segDirs = [
         { dx: 1, dy: 0 },
         { dx: 0, dy: 1 },
         { dx: -1, dy: 0 },
         { dx: 0, dy: -1 },
     ];
-    var segStarts = [
-        { x: x, y: y },
-        { x: x + w, y: y },
+    const segStarts = [
+        { x, y },
+        { x: x + w, y },
         { x: x + w, y: y + h },
-        { x: x, y: y + h },
+        { x, y: y + h },
     ];
-    var totalLen = 0;
-    for (var _i = 0, segLengths_1 = segLengths; _i < segLengths_1.length; _i++) {
-        var l = segLengths_1[_i];
+    let totalLen = 0;
+    for (const l of segLengths)
         totalLen += l;
-    }
-    var step = totalLen / numArcs;
-    var dist = 0;
-    var segIdx = 0;
-    var segDist = 0;
-    for (var i = 0; i < numArcs; i++) {
-        var target = i * step;
+    const step = totalLen / numArcs;
+    let dist = 0;
+    let segIdx = 0;
+    let segDist = 0;
+    for (let i = 0; i < numArcs; i++) {
+        const target = i * step;
         while (dist + segLengths[segIdx] - segDist < target && segIdx < 3) {
             dist += segLengths[segIdx] - segDist;
             segIdx++;
             segDist = 0;
         }
-        var remaining = target - dist;
+        const remaining = target - dist;
         points.push({
             x: segStarts[segIdx].x + segDirs[segIdx].dx * (segDist + remaining),
             y: segStarts[segIdx].y + segDirs[segIdx].dy * (segDist + remaining),
@@ -118,20 +116,20 @@ function drawCloud(ctx, shape) {
     }
     // Draw arcs between consecutive points
     ctx.beginPath();
-    for (var i = 0; i < points.length; i++) {
-        var p1 = points[i];
-        var p2 = points[(i + 1) % points.length];
-        var mx = (p1.x + p2.x) / 2;
-        var my = (p1.y + p2.y) / 2;
+    for (let i = 0; i < points.length; i++) {
+        const p1 = points[i];
+        const p2 = points[(i + 1) % points.length];
+        const mx = (p1.x + p2.x) / 2;
+        const my = (p1.y + p2.y) / 2;
         // Bulge outward from center of rectangle
-        var cx = x + w / 2;
-        var cy = y + h / 2;
-        var dx = mx - cx;
-        var dy = my - cy;
-        var len = Math.sqrt(dx * dx + dy * dy) || 1;
-        var bulge = arcSize * 0.35;
-        var ctrlX = mx + (dx / len) * bulge;
-        var ctrlY = my + (dy / len) * bulge;
+        const cx = x + w / 2;
+        const cy = y + h / 2;
+        const dx = mx - cx;
+        const dy = my - cy;
+        const len = Math.sqrt(dx * dx + dy * dy) || 1;
+        const bulge = arcSize * 0.35;
+        const ctrlX = mx + (dx / len) * bulge;
+        const ctrlY = my + (dy / len) * bulge;
         if (i === 0) {
             ctx.moveTo(p1.x, p1.y);
         }
@@ -141,7 +139,7 @@ function drawCloud(ctx, shape) {
     ctx.stroke();
 }
 function drawFreehand(ctx, shape) {
-    var points = shape.points, color = shape.color, strokeWidth = shape.strokeWidth;
+    const { points, color, strokeWidth } = shape;
     if (points.length < 2)
         return;
     ctx.strokeStyle = color;
@@ -150,16 +148,16 @@ function drawFreehand(ctx, shape) {
     ctx.lineJoin = "round";
     ctx.beginPath();
     ctx.moveTo(points[0].x, points[0].y);
-    for (var i = 1; i < points.length; i++) {
+    for (let i = 1; i < points.length; i++) {
         ctx.lineTo(points[i].x, points[i].y);
     }
     ctx.stroke();
 }
 function drawText(ctx, shape) {
-    var position = shape.position, content = shape.content, color = shape.color, fontSize = shape.fontSize;
+    const { position, content, color, fontSize } = shape;
     if (!content)
         return;
-    ctx.font = "bold ".concat(fontSize, "px sans-serif");
+    ctx.font = `bold ${fontSize}px sans-serif`;
     ctx.textBaseline = "top";
     // Black outline for contrast on construction drawings
     ctx.strokeStyle = "#000000";
@@ -194,8 +192,7 @@ export function renderShape(ctx, shape) {
     ctx.restore();
 }
 export function renderAllShapes(ctx, shapes) {
-    for (var _i = 0, shapes_1 = shapes; _i < shapes_1.length; _i++) {
-        var shape = shapes_1[_i];
+    for (const shape of shapes) {
         renderShape(ctx, shape);
     }
 }