@joewinke/jatui 0.1.30 → 0.1.33

package/dist/actions/railNav.js

@@ -60,6 +60,17 @@
  *   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`.
@@ -73,39 +84,40 @@
 export function cycle(list, current, dir) {
     if (list.length === 0)
         return current;
-    const i = list.indexOf(current);
+    var 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.
-    const base = i === -1 ? -1 : i;
+    var base = i === -1 ? -1 : i;
     return list[(((base + dir) % list.length) + list.length) % list.length];
 }
 // ─── Internals ─────────────────────────────────────────────────────────────────
-const BUMP_DURATION_MS = 280;
-const RAIL_FOCUS_CLASS = 'rail-focus';
-const RAIL_CYCLED_CLASS = 'rail-cycled';
+var BUMP_DURATION_MS = 280;
+var RAIL_FOCUS_CLASS = 'rail-focus';
+var RAIL_CYCLED_CLASS = 'rail-cycled';
 function resolveOrder(opts) {
     return typeof opts.order === 'function' ? opts.order() : opts.order;
 }
 function resolveAttr(opts) {
-    return opts.attr ?? 'data-rail-id';
+    var _a;
+    return (_a = opts.attr) !== null && _a !== void 0 ? _a : 'data-rail-id';
 }
 /** Return all currently-rendered rung hosts in the rail order. */
 function resolveHosts(optsRef) {
-    const { container } = optsRef.current;
+    var container = optsRef.current.container;
     if (!container)
         return [];
-    const attr = resolveAttr(optsRef.current);
-    const order = resolveOrder(optsRef.current);
+    var attr = resolveAttr(optsRef.current);
+    var order = resolveOrder(optsRef.current);
     return order
-        .map((id) => container.querySelector(`[${attr}="${id}"]`))
+        .map(function (id) { return container.querySelector("[".concat(attr, "=\"").concat(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((el) => !!el && (el.checkVisibility?.() ?? true));
+        .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); });
 }
 /**
  * Focus the most appropriate control inside a rung host:
@@ -120,17 +132,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;
     }
-    const inner = host.querySelector('[contenteditable="true"],input,select,textarea') ??
-        host.querySelector('.sd-trigger,button');
-    (inner ?? host).focus();
+    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();
 }
 function makeController(optsRef) {
-    let _currentRailId = '';
-    let _lastFocusedHost = null;
+    var _currentRailId = '';
+    var _lastFocusedHost = null;
     function applyFocusClass(host) {
         if (_lastFocusedHost && _lastFocusedHost !== host) {
             _lastFocusedHost.classList.remove(RAIL_FOCUS_CLASS);
@@ -145,14 +157,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(() => host.classList.remove(RAIL_CYCLED_CLASS), BUMP_DURATION_MS);
+        setTimeout(function () { return host.classList.remove(RAIL_CYCLED_CLASS); }, BUMP_DURATION_MS);
     }
     function focus(id) {
-        const { container } = optsRef.current;
+        var container = optsRef.current.container;
         if (!container)
             return;
-        const attr = resolveAttr(optsRef.current);
-        const host = container.querySelector(`[${attr}="${id}"]`);
+        var attr = resolveAttr(optsRef.current);
+        var host = container.querySelector("[".concat(attr, "=\"").concat(id, "\"]"));
         if (host) {
             focusRailHost(host);
             applyFocusClass(host);
@@ -163,20 +175,21 @@ function makeController(optsRef) {
         }
     }
     function moveRung(dir) {
-        const hosts = resolveHosts(optsRef);
+        var _a;
+        var hosts = resolveHosts(optsRef);
         if (hosts.length === 0)
             return;
-        const attr = resolveAttr(optsRef.current);
-        const ids = hosts.map((h) => h.getAttribute(attr));
+        var attr = resolveAttr(optsRef.current);
+        var ids = hosts.map(function (h) { return 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).
-        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;
+        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;
         if (pos === -1)
             pos = dir === 1 ? -1 : hosts.length;
-        const next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
+        var next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
         focusRailHost(hosts[next]);
         applyFocusClass(hosts[next]);
         _currentRailId = ids[next];
@@ -184,9 +197,10 @@ 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).
-        const hosts = resolveHosts(optsRef);
-        const attr = resolveAttr(optsRef.current);
-        for (const h of hosts) {
+        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];
             if (h.getAttribute(attr) === _currentRailId) {
                 applyFocusClass(h);
                 return;
@@ -194,10 +208,11 @@ function makeController(optsRef) {
         }
     }
     function handleFocusin(event) {
-        const attr = resolveAttr(optsRef.current);
-        const order = resolveOrder(optsRef.current);
-        const host = event.target?.closest(`[${attr}]`);
-        const id = host?.getAttribute(attr);
+        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);
         // 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.
@@ -207,17 +222,18 @@ function makeController(optsRef) {
         }
     }
     function handleKeydown(event) {
-        const opts = optsRef.current;
-        const el = document.activeElement;
-        const tag = el?.tagName;
-        const isTextField = !!el &&
+        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 &&
             (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
-        const isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
-        const hasMod = event.metaKey || event.ctrlKey || event.altKey;
+        var isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
+        var 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.
-        const trap = opts.trap !== false;
+        var trap = opts.trap !== false;
         if (trap && !isTextField)
             event.stopPropagation();
         // Escape cascade:
@@ -225,33 +241,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) {
-            const popoverOpen = opts.isPopoverOpen?.() ?? false;
-            if (popoverOpen) {
+            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) {
                 event.preventDefault();
-                opts.onPopoverEscape?.();
+                (_c = opts.onPopoverEscape) === null || _c === void 0 ? void 0 : _c.call(opts);
                 return true;
             }
-            const { container } = opts;
+            var container = opts.container;
             if (container && el && el !== container && container.contains(el)) {
                 event.preventDefault();
                 container.focus();
                 return true;
             }
             event.preventDefault();
-            opts.onEscape?.();
+            (_d = opts.onEscape) === null || _d === void 0 ? void 0 : _d.call(opts);
             return true;
         }
         // Rail motion — suppressed when a popover is open or a modifier is held.
-        const popoverOpen = opts.isPopoverOpen?.() ?? false;
+        var popoverOpen = (_f = (_e = opts.isPopoverOpen) === null || _e === void 0 ? void 0 : _e.call(opts)) !== null && _f !== void 0 ? _f : 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.
-            const goDown = event.key === 'ArrowDown' || event.key === 'j';
-            const goUp = event.key === 'ArrowUp' || event.key === 'k';
+            var goDown = event.key === 'ArrowDown' || event.key === 'j';
+            var goUp = event.key === 'ArrowUp' || event.key === 'k';
             if (goDown || goUp) {
-                const isVimKey = event.key === 'j' || event.key === 'k';
-                const blocked = isVimKey ? isTextField : isMultiline;
+                var isVimKey = event.key === 'j' || event.key === 'k';
+                var blocked = isVimKey ? isTextField : isMultiline;
                 if (!blocked) {
                     event.preventDefault();
                     moveRung(goDown ? 1 : -1);
@@ -263,15 +279,14 @@ function makeController(optsRef) {
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
                 !isTextField) {
                 event.preventDefault();
-                const attr = resolveAttr(opts);
+                var 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).
-                const focusedHost = (el?.closest(`[${attr}]`)) ??
-                    (opts.container && _currentRailId
-                        ? opts.container.querySelector(`[${attr}="${_currentRailId}"]`)
-                        : null);
+                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);
                 if (focusedHost && opts.onAction) {
-                    const rungId = focusedHost.getAttribute(attr) ?? '';
+                    var rungId = (_h = focusedHost.getAttribute(attr)) !== null && _h !== void 0 ? _h : '';
                     opts.onAction(rungId, event.key === 'ArrowRight' ? 1 : -1, focusedHost);
                 }
                 return true;
@@ -280,13 +295,13 @@ function makeController(optsRef) {
         return false;
     }
     return {
-        handleKeydown,
-        handleFocusin,
-        moveRung,
-        focus,
-        refresh,
-        currentId: () => _currentRailId,
-        bump,
+        handleKeydown: handleKeydown,
+        handleFocusin: handleFocusin,
+        moveRung: moveRung,
+        focus: focus,
+        refresh: refresh,
+        currentId: function () { return _currentRailId; },
+        bump: bump,
     };
 }
 // ─── Composable ────────────────────────────────────────────────────────────────
@@ -301,7 +316,7 @@ function makeController(optsRef) {
  *   panel.addEventListener('focusin', (e) => rail.handleFocusin(e));
  */
 export function createRailNav(options) {
-    const ref = { current: options };
+    var ref = { current: options };
     return makeController(ref);
 }
 // ─── Action ────────────────────────────────────────────────────────────────────
@@ -316,9 +331,10 @@ export function createRailNav(options) {
  *     <div   data-rail-id="priority" tabindex="-1">…</div>
  *   </div>
  */
-export const railNav = (node, initial = { order: [] }) => {
-    const ref = { current: { ...initial, container: node } };
-    const controller = makeController(ref);
+export var railNav = function (node, initial) {
+    if (initial === void 0) { initial = { order: [] }; }
+    var ref = { current: __assign(__assign({}, initial), { container: node }) };
+    var controller = makeController(ref);
     function onKeydown(e) {
         controller.handleKeydown(e);
     }
@@ -328,11 +344,12 @@ export const railNav = (node, initial = { order: [] }) => {
     node.addEventListener('keydown', onKeydown);
     node.addEventListener('focusin', onFocusin);
     return {
-        update(next = { order: [] }) {
-            ref.current = { ...next, container: node };
+        update: function (next) {
+            if (next === void 0) { next = { order: [] }; }
+            ref.current = __assign(__assign({}, next), { container: node });
             controller.refresh();
         },
-        destroy() {
+        destroy: function () {
             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 const MARKUP_COLORS = [
+export var MARKUP_COLORS = [
     "#ef4444",
     "#eab308",
     "#22c55e",
@@ -8,13 +8,13 @@ export const MARKUP_COLORS = [
     "#ffffff",
     "#111827",
 ];
-export const DEFAULT_STROKE_WIDTH = 3;
-let _nextId = 1;
+export var DEFAULT_STROKE_WIDTH = 3;
+var _nextId = 1;
 export function nextShapeId() {
     return _nextId++;
 }
 function drawArrow(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     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
-    const angle = Math.atan2(end.y - start.y, end.x - start.x);
-    const headLen = 14;
-    const headAngle = Math.PI / 7;
+    var angle = Math.atan2(end.y - start.y, end.x - start.x);
+    var headLen = 14;
+    var 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) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineJoin = "round";
-    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);
+    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);
     ctx.strokeRect(x, y, w, h);
 }
 function drawEllipse(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
-    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;
+    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;
     if (rx < 1 || ry < 1)
         return;
     ctx.beginPath();
@@ -64,51 +64,53 @@ function drawEllipse(ctx, shape) {
  * Standard construction markup tool for highlighting areas of change.
  */
 function drawCloud(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    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);
+    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);
     if (w < 4 || h < 4)
         return;
     // Generate perimeter points, then draw arcs between them
-    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));
+    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));
     // Collect points along the rectangle perimeter
-    const points = [];
-    const segLengths = [w, h, w, h];
-    const segDirs = [
+    var points = [];
+    var segLengths = [w, h, w, h];
+    var segDirs = [
         { dx: 1, dy: 0 },
         { dx: 0, dy: 1 },
         { dx: -1, dy: 0 },
         { dx: 0, dy: -1 },
     ];
-    const segStarts = [
-        { x, y },
-        { x: x + w, y },
+    var segStarts = [
+        { x: x, y: y },
+        { x: x + w, y: y },
         { x: x + w, y: y + h },
-        { x, y: y + h },
+        { x: x, y: y + h },
     ];
-    let totalLen = 0;
-    for (const l of segLengths)
+    var totalLen = 0;
+    for (var _i = 0, segLengths_1 = segLengths; _i < segLengths_1.length; _i++) {
+        var l = segLengths_1[_i];
         totalLen += l;
-    const step = totalLen / numArcs;
-    let dist = 0;
-    let segIdx = 0;
-    let segDist = 0;
-    for (let i = 0; i < numArcs; i++) {
-        const target = i * step;
+    }
+    var step = totalLen / numArcs;
+    var dist = 0;
+    var segIdx = 0;
+    var segDist = 0;
+    for (var i = 0; i < numArcs; i++) {
+        var target = i * step;
         while (dist + segLengths[segIdx] - segDist < target && segIdx < 3) {
             dist += segLengths[segIdx] - segDist;
             segIdx++;
             segDist = 0;
         }
-        const remaining = target - dist;
+        var remaining = target - dist;
         points.push({
             x: segStarts[segIdx].x + segDirs[segIdx].dx * (segDist + remaining),
             y: segStarts[segIdx].y + segDirs[segIdx].dy * (segDist + remaining),
@@ -116,20 +118,20 @@ function drawCloud(ctx, shape) {
     }
     // Draw arcs between consecutive points
     ctx.beginPath();
-    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;
+    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;
         // Bulge outward from center of rectangle
-        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;
+        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;
         if (i === 0) {
             ctx.moveTo(p1.x, p1.y);
         }
@@ -139,7 +141,7 @@ function drawCloud(ctx, shape) {
     ctx.stroke();
 }
 function drawFreehand(ctx, shape) {
-    const { points, color, strokeWidth } = shape;
+    var points = shape.points, color = shape.color, strokeWidth = shape.strokeWidth;
     if (points.length < 2)
         return;
     ctx.strokeStyle = color;
@@ -148,16 +150,16 @@ function drawFreehand(ctx, shape) {
     ctx.lineJoin = "round";
     ctx.beginPath();
     ctx.moveTo(points[0].x, points[0].y);
-    for (let i = 1; i < points.length; i++) {
+    for (var i = 1; i < points.length; i++) {
         ctx.lineTo(points[i].x, points[i].y);
     }
     ctx.stroke();
 }
 function drawText(ctx, shape) {
-    const { position, content, color, fontSize } = shape;
+    var position = shape.position, content = shape.content, color = shape.color, fontSize = shape.fontSize;
     if (!content)
         return;
-    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.font = "bold ".concat(fontSize, "px sans-serif");
     ctx.textBaseline = "top";
     // Black outline for contrast on construction drawings
     ctx.strokeStyle = "#000000";
@@ -192,7 +194,8 @@ export function renderShape(ctx, shape) {
     ctx.restore();
 }
 export function renderAllShapes(ctx, shapes) {
-    for (const shape of shapes) {
+    for (var _i = 0, shapes_1 = shapes; _i < shapes_1.length; _i++) {
+        var shape = shapes_1[_i];
         renderShape(ctx, shape);
     }
 }