@jjlmoya/utils-textiles 1.20.0 → 1.22.0

package/src/tool/sewingPatternScaler/component.astro

@@ -1,236 +1,236 @@
----
-import type { SewingPatternScalerUI } from './ui';
-
-interface Props {
-  ui?: Record<string, unknown>;
-}
-
-const { ui = {} } = Astro.props;
-const scalerUI = ui as SewingPatternScalerUI;
-const SIZES = ['36', '38', '40', '42', '44', '46'];
----
-
-<div class="scaler-wrapper" id="master-scaler">
-  <div class="scaler-card">
-    <div class="card-left">
-      <span class="label-tiny">{scalerUI.labelSystem}</span>
-      <div class="segmented-control" id="mode-selector">
-        <button class="segment-btn active" data-mode="standard">{scalerUI.modeStandard}</button>
-        <button class="segment-btn" data-mode="custom">{scalerUI.modeCustom}</button>
-      </div>
-
-      <div id="warn-area" class="warn-banner hidden">
-        <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="flex-shrink:0"><path d="M12,2L1,21H23L12,2M12,6L19.53,19H4.47L12,6M11,10V14H13V10H11M11,16V18H13V16H11Z"/></svg>
-        <span>{scalerUI.warnText}</span>
-      </div>
-
-      <div id="standard-grid">
-        <div class="input-grid">
-          <div class="input-group">
-            <label class="label-tiny" for="origin-size">{scalerUI.labelPatternSize}</label>
-            <select id="origin-size" class="form-input form-select">
-              {SIZES.map((s) => <option value={s} selected={s === '38'}>{scalerUI.sizePrefix} {s}</option>)}
-            </select>
-          </div>
-          <div class="input-group">
-            <label class="label-tiny" for="target-size">{scalerUI.labelTargetSize}</label>
-            <select id="target-size" class="form-input form-select">
-              {SIZES.map((s) => <option value={s} selected={s === '42'}>{scalerUI.sizePrefix} {s}</option>)}
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div id="custom-grid" class="hidden">
-        <span class="label-tiny">{scalerUI.labelOriginMeasures}</span>
-        <div class="input-grid">
-          <div class="input-item"><label class="label-tiny" for="origin-chest">{scalerUI.labelChest}</label><input type="number" id="origin-chest" class="form-input" value="88" /></div>
-          <div class="input-item"><label class="label-tiny" for="origin-waist">{scalerUI.labelWaist}</label><input type="number" id="origin-waist" class="form-input" value="68" /></div>
-          <div class="input-item"><label class="label-tiny" for="origin-hips">{scalerUI.labelHips}</label><input type="number" id="origin-hips" class="form-input" value="94" /></div>
-          <div class="input-item"><label class="label-tiny" for="origin-length">{scalerUI.labelLength}</label><input type="number" id="origin-length" class="form-input" value="60" /></div>
-        </div>
-        <span class="label-tiny target-lbl">{scalerUI.labelTargetMeasures}</span>
-        <div class="input-grid">
-          <div class="input-item"><label class="label-tiny" for="target-chest">{scalerUI.labelChest}</label><input type="number" id="target-chest" class="form-input" value="96" /></div>
-          <div class="input-item"><label class="label-tiny" for="target-waist">{scalerUI.labelWaist}</label><input type="number" id="target-waist" class="form-input" value="76" /></div>
-          <div class="input-item"><label class="label-tiny" for="target-hips">{scalerUI.labelHips}</label><input type="number" id="target-hips" class="form-input" value="102" /></div>
-          <div class="input-item"><label class="label-tiny" for="target-length">{scalerUI.labelLength}</label><input type="number" id="target-length" class="form-input" value="62" /></div>
-        </div>
-      </div>
-
-      <div class="ease-group">
-        <label class="label-tiny" for="ease-val">{scalerUI.labelEase}</label>
-        <input type="number" id="ease-val" class="form-input" value="4" />
-      </div>
-    </div>
-
-    <div class="card-right">
-      <div class="viz-container">
-        <canvas id="scaler-canvas"></canvas>
-        <div class="legend-box">
-          <div class="legend-item"><span class="ln-o"></span><span>{scalerUI.legendOriginal}</span></div>
-          <div class="legend-item"><span class="ln-s"></span><span>{scalerUI.legendUpdated}</span></div>
-        </div>
-      </div>
-
-      <div class="action-strip" id="action-pills"></div>
-
-      <div class="totals-section">
-        <div class="totals-grid">
-          <div class="total-card"><span class="total-val" id="res-c">100.0</span><span class="total-tag">{scalerUI.resBust}</span></div>
-          <div class="total-card"><span class="total-val" id="res-w">80.0</span><span class="total-tag">{scalerUI.resWaist}</span></div>
-          <div class="total-card"><span class="total-val" id="res-h">106.0</span><span class="total-tag">{scalerUI.resHips}</span></div>
-          <div class="total-card"><span class="total-val" id="res-l">62.0</span><span class="total-tag">{scalerUI.resLength}</span></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script define:vars={{ ui }} is:inline>
-  window.__scalerUI = ui;
-</script>
-
-<script>
-  import type { SewingPatternScalerUI } from './ui';
-  import type { MeasureSet } from './logic';
-  import { getStandardMeasures, computeResult, computeLateralAdj, computeLengthAdj, isLargeScale } from './logic';
-
-  declare global {
-    interface Window { __scalerUI: SewingPatternScalerUI; }
-  }
-
-  const SVG1 = `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M7 2H17C18.11 2 19 2.9 19 4V20C19 21.11 18.11 22 17 22H7C5.9 22 5 21.11 5 20V4C5 2.9 5.9 2 7 2M7 4V20H17V4H7M9 6H12V8H9V6M9 10H15V12H9V10M9 14H12V16H9V14Z"/></svg>`;
-  const SVG2 = `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19,3L13,9L15,11L19,7L21,9V3M13,10C12.5,10.5 12.5,11.5 13,12L15,14L19,10L13,10M3,17V21H7L19,9L15,5L3,17M6.12,19.88L5,18.76L16.06,7.7L17.18,8.82L6.12,19.88Z"/></svg>`;
-
-  function getNum(id: string): number {
-    return parseFloat((document.getElementById(id) as HTMLInputElement | null)?.value || '0') || 0;
-  }
-
-  function setText(id: string, v: string): void {
-    const el = document.getElementById(id);
-    if (el) el.innerText = v;
-  }
-
-  function getMode(): string {
-    const active = document.querySelector<HTMLElement>('#mode-selector .active');
-    return active?.dataset.mode || 'standard';
-  }
-
-  function getMeasures(pfx: string, mode: string): MeasureSet {
-    if (mode === 'standard') {
-      const el = document.getElementById(`${pfx}-size`) as HTMLSelectElement | null;
-      return getStandardMeasures(el?.value || '38');
-    }
-    const f = (id: string) => getNum(`${pfx}-${id}`);
-    return { chest: f('chest'), waist: f('waist'), hips: f('hips'), length: f('length') };
-  }
-
-  function buildActionHtml(lat: number, len: number, ui: SewingPatternScalerUI): string {
-    const latPos = lat >= 0;
-    const lenPos = len >= 0;
-    const latVerb = latPos ? ui.actionLatAdd : ui.actionLatRemove;
-    const lenVerb = lenPos ? ui.actionLenExtend : ui.actionLenShorten;
-    const latCls = latPos ? 'action-val-pos' : 'action-val-neg';
-    const lenCls = lenPos ? 'action-val-pos' : 'action-val-neg';
-    const latStr = `${latPos ? '+' : ''}${lat}`;
-    const lenStr = `${lenPos ? '+' : ''}${len}`;
-    return `<div class="action-pill"><div class="icon-box">${SVG1}</div><div class="action-content">` +
-      `<span class="action-text">${latVerb} <strong class="${latCls}">${latStr} cm</strong> ${ui.actionLatSuffix}</span>` +
-      `<span class="action-note">${ui.actionLatNote}</span></div></div>` +
-      `<div class="action-pill"><div class="icon-box">${SVG2}</div><div class="action-content">` +
-      `<span class="action-text">${lenVerb} <strong class="${lenCls}">${lenStr} cm</strong></span>` +
-      `<span class="action-note">${ui.actionLenNote}</span></div></div>`;
-  }
-
-  interface ShapeOpts { s: number; cX: number; cY: number; }
-
-  function drawShape(ctx: CanvasRenderingContext2D, d: MeasureSet, isO: boolean, opts: ShapeOpts): void {
-    const { s, cX, cY } = opts;
-    ctx.beginPath();
-    ctx.lineWidth = isO ? 1.5 : 3;
-    ctx.strokeStyle = isO ? 'rgba(148, 163, 184, 0.5)' : '#4f46e5';
-    if (isO) ctx.setLineDash([12, 10]); else ctx.setLineDash([]);
-    const cW = d.chest * s / 4;
-    const wW = d.waist * s / 4;
-    const hW = d.hips * s / 4;
-    const len = d.length * s;
-    const neckW = 2 * s;
-    const shldW = 5.5 * s;
-    ctx.moveTo(cX, cY);
-    ctx.quadraticCurveTo(cX - neckW * 0.8, cY, cX - neckW, cY + s);
-    ctx.lineTo(cX - shldW - d.chest * 0.04 * s / 4, cY + s * 0.2);
-    ctx.quadraticCurveTo(cX - shldW * 0.7 - d.chest * 0.12 * s / 4, cY + s * 2.5, cX - cW, cY + len * 0.4);
-    ctx.lineTo(cX - wW, cY + len * 0.65);
-    ctx.lineTo(cX - hW, cY + len);
-    ctx.lineTo(cX, cY + len);
-    ctx.lineTo(cX, cY);
-    ctx.stroke();
-  }
-
-  function draw(org: MeasureSet, tgt: MeasureSet): void {
-    const canvas = document.getElementById('scaler-canvas') as HTMLCanvasElement | null;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-    const dpr = window.devicePixelRatio || 1;
-    const par = canvas.parentElement;
-    if (!par) return;
-    const w = par.clientWidth;
-    const h = par.clientHeight;
-    canvas.width = w * dpr;
-    canvas.height = h * dpr;
-    ctx.scale(dpr, dpr);
-    ctx.clearRect(0, 0, w, h);
-    const maxV = Math.max(org.chest, tgt.chest, org.length, tgt.length, 100);
-    const s = Math.min(w, h) * 0.85 / maxV;
-    const opts = { s, cX: w / 2, cY: h * 0.08 };
-    drawShape(ctx, org, true, opts);
-    drawShape(ctx, tgt, false, opts);
-  }
-
-  function run(): void {
-    const mode = getMode();
-    const ease = getNum('ease-val');
-    const org = getMeasures('origin', mode);
-    const tgt = getMeasures('target', mode);
-    const res = computeResult(tgt, ease);
-    const ui = window.__scalerUI;
-    setText('res-c', res.c.toFixed(1));
-    setText('res-w', res.w.toFixed(1));
-    setText('res-h', res.h.toFixed(1));
-    setText('res-l', res.l.toFixed(1));
-    const lat = computeLateralAdj(org.chest, tgt.chest);
-    const len = computeLengthAdj(org.length, tgt.length);
-    const pils = document.getElementById('action-pills');
-    if (pils) pils.innerHTML = buildActionHtml(lat, len, ui);
-    draw(org, tgt);
-    const warn = document.getElementById('warn-area');
-    if (warn) warn.classList.toggle('hidden', !isLargeScale(org.chest, tgt.chest));
-  }
-
-  function attachListeners(): void {
-    const modeBtns = document.querySelectorAll<HTMLElement>('#mode-selector button');
-    modeBtns.forEach((btn) => {
-      btn.addEventListener('click', () => {
-        modeBtns.forEach((b) => b.classList.remove('active'));
-        btn.classList.add('active');
-        const mode = btn.dataset.mode || 'standard';
-        document.getElementById('standard-grid')?.classList.toggle('hidden', mode !== 'standard');
-        document.getElementById('custom-grid')?.classList.toggle('hidden', mode === 'standard');
-        run();
-      });
-    });
-    window.addEventListener('resize', run);
-    document.querySelectorAll('input, select').forEach((i) => i.addEventListener('input', run));
-  }
-
-  function init(): void {
-    attachListeners();
-    run();
-  }
-
-  document.addEventListener('astro:page-load', init);
-  init();
-</script>
-
-
+---
+import type { SewingPatternScalerUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const scalerUI = ui as SewingPatternScalerUI;
+const SIZES = ['36', '38', '40', '42', '44', '46'];
+---
+
+<div class="scaler-wrapper" id="master-scaler">
+  <div class="scaler-card">
+    <div class="card-left">
+      <span class="label-tiny">{scalerUI.labelSystem}</span>
+      <div class="segmented-control" id="mode-selector">
+        <button class="segment-btn active" data-mode="standard">{scalerUI.modeStandard}</button>
+        <button class="segment-btn" data-mode="custom">{scalerUI.modeCustom}</button>
+      </div>
+
+      <div id="warn-area" class="warn-banner hidden">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="flex-shrink:0"><path d="M12,2L1,21H23L12,2M12,6L19.53,19H4.47L12,6M11,10V14H13V10H11M11,16V18H13V16H11Z"/></svg>
+        <span>{scalerUI.warnText}</span>
+      </div>
+
+      <div id="standard-grid">
+        <div class="input-grid">
+          <div class="input-group">
+            <label class="label-tiny" for="origin-size">{scalerUI.labelPatternSize}</label>
+            <select id="origin-size" class="form-input form-select">
+              {SIZES.map((s) => <option value={s} selected={s === '38'}>{scalerUI.sizePrefix} {s}</option>)}
+            </select>
+          </div>
+          <div class="input-group">
+            <label class="label-tiny" for="target-size">{scalerUI.labelTargetSize}</label>
+            <select id="target-size" class="form-input form-select">
+              {SIZES.map((s) => <option value={s} selected={s === '42'}>{scalerUI.sizePrefix} {s}</option>)}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div id="custom-grid" class="hidden">
+        <span class="label-tiny">{scalerUI.labelOriginMeasures}</span>
+        <div class="input-grid">
+          <div class="input-item"><label class="label-tiny" for="origin-chest">{scalerUI.labelChest}</label><input type="number" id="origin-chest" class="form-input" value="88" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-waist">{scalerUI.labelWaist}</label><input type="number" id="origin-waist" class="form-input" value="68" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-hips">{scalerUI.labelHips}</label><input type="number" id="origin-hips" class="form-input" value="94" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-length">{scalerUI.labelLength}</label><input type="number" id="origin-length" class="form-input" value="60" /></div>
+        </div>
+        <span class="label-tiny target-lbl">{scalerUI.labelTargetMeasures}</span>
+        <div class="input-grid">
+          <div class="input-item"><label class="label-tiny" for="target-chest">{scalerUI.labelChest}</label><input type="number" id="target-chest" class="form-input" value="96" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-waist">{scalerUI.labelWaist}</label><input type="number" id="target-waist" class="form-input" value="76" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-hips">{scalerUI.labelHips}</label><input type="number" id="target-hips" class="form-input" value="102" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-length">{scalerUI.labelLength}</label><input type="number" id="target-length" class="form-input" value="62" /></div>
+        </div>
+      </div>
+
+      <div class="ease-group">
+        <label class="label-tiny" for="ease-val">{scalerUI.labelEase}</label>
+        <input type="number" id="ease-val" class="form-input" value="4" />
+      </div>
+    </div>
+
+    <div class="card-right">
+      <div class="viz-container">
+        <canvas id="scaler-canvas"></canvas>
+        <div class="legend-box">
+          <div class="legend-item"><span class="ln-o"></span><span>{scalerUI.legendOriginal}</span></div>
+          <div class="legend-item"><span class="ln-s"></span><span>{scalerUI.legendUpdated}</span></div>
+        </div>
+      </div>
+
+      <div class="action-strip" id="action-pills"></div>
+
+      <div class="totals-section">
+        <div class="totals-grid">
+          <div class="total-card"><span class="total-val" id="res-c">100.0</span><span class="total-tag">{scalerUI.resBust}</span></div>
+          <div class="total-card"><span class="total-val" id="res-w">80.0</span><span class="total-tag">{scalerUI.resWaist}</span></div>
+          <div class="total-card"><span class="total-val" id="res-h">106.0</span><span class="total-tag">{scalerUI.resHips}</span></div>
+          <div class="total-card"><span class="total-val" id="res-l">62.0</span><span class="total-tag">{scalerUI.resLength}</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__scalerUI = ui;
+</script>
+
+<script>
+  import type { SewingPatternScalerUI } from './ui';
+  import type { MeasureSet } from './logic';
+  import { getStandardMeasures, computeResult, computeLateralAdj, computeLengthAdj, isLargeScale } from './logic';
+
+  declare global {
+    interface Window { __scalerUI: SewingPatternScalerUI; }
+  }
+
+  const SVG1 = `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M7 2H17C18.11 2 19 2.9 19 4V20C19 21.11 18.11 22 17 22H7C5.9 22 5 21.11 5 20V4C5 2.9 5.9 2 7 2M7 4V20H17V4H7M9 6H12V8H9V6M9 10H15V12H9V10M9 14H12V16H9V14Z"/></svg>`;
+  const SVG2 = `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19,3L13,9L15,11L19,7L21,9V3M13,10C12.5,10.5 12.5,11.5 13,12L15,14L19,10L13,10M3,17V21H7L19,9L15,5L3,17M6.12,19.88L5,18.76L16.06,7.7L17.18,8.82L6.12,19.88Z"/></svg>`;
+
+  function getNum(id: string): number {
+    return parseFloat((document.getElementById(id) as HTMLInputElement | null)?.value || '0') || 0;
+  }
+
+  function setText(id: string, v: string): void {
+    const el = document.getElementById(id);
+    if (el) el.innerText = v;
+  }
+
+  function getMode(): string {
+    const active = document.querySelector<HTMLElement>('#mode-selector .active');
+    return active?.dataset.mode || 'standard';
+  }
+
+  function getMeasures(pfx: string, mode: string): MeasureSet {
+    if (mode === 'standard') {
+      const el = document.getElementById(`${pfx}-size`) as HTMLSelectElement | null;
+      return getStandardMeasures(el?.value || '38');
+    }
+    const f = (id: string) => getNum(`${pfx}-${id}`);
+    return { chest: f('chest'), waist: f('waist'), hips: f('hips'), length: f('length') };
+  }
+
+  function buildActionHtml(lat: number, len: number, ui: SewingPatternScalerUI): string {
+    const latPos = lat >= 0;
+    const lenPos = len >= 0;
+    const latVerb = latPos ? ui.actionLatAdd : ui.actionLatRemove;
+    const lenVerb = lenPos ? ui.actionLenExtend : ui.actionLenShorten;
+    const latCls = latPos ? 'action-val-pos' : 'action-val-neg';
+    const lenCls = lenPos ? 'action-val-pos' : 'action-val-neg';
+    const latStr = `${latPos ? '+' : ''}${lat}`;
+    const lenStr = `${lenPos ? '+' : ''}${len}`;
+    return `<div class="action-pill"><div class="icon-box">${SVG1}</div><div class="action-content">` +
+      `<span class="action-text">${latVerb} <strong class="${latCls}">${latStr} cm</strong> ${ui.actionLatSuffix}</span>` +
+      `<span class="action-note">${ui.actionLatNote}</span></div></div>` +
+      `<div class="action-pill"><div class="icon-box">${SVG2}</div><div class="action-content">` +
+      `<span class="action-text">${lenVerb} <strong class="${lenCls}">${lenStr} cm</strong></span>` +
+      `<span class="action-note">${ui.actionLenNote}</span></div></div>`;
+  }
+
+  interface ShapeOpts { s: number; cX: number; cY: number; }
+
+  function drawShape(ctx: CanvasRenderingContext2D, d: MeasureSet, isO: boolean, opts: ShapeOpts): void {
+    const { s, cX, cY } = opts;
+    ctx.beginPath();
+    ctx.lineWidth = isO ? 1.5 : 3;
+    ctx.strokeStyle = isO ? 'rgba(148, 163, 184, 0.5)' : '#4f46e5';
+    if (isO) ctx.setLineDash([12, 10]); else ctx.setLineDash([]);
+    const cW = d.chest * s / 4;
+    const wW = d.waist * s / 4;
+    const hW = d.hips * s / 4;
+    const len = d.length * s;
+    const neckW = 2 * s;
+    const shldW = 5.5 * s;
+    ctx.moveTo(cX, cY);
+    ctx.quadraticCurveTo(cX - neckW * 0.8, cY, cX - neckW, cY + s);
+    ctx.lineTo(cX - shldW - d.chest * 0.04 * s / 4, cY + s * 0.2);
+    ctx.quadraticCurveTo(cX - shldW * 0.7 - d.chest * 0.12 * s / 4, cY + s * 2.5, cX - cW, cY + len * 0.4);
+    ctx.lineTo(cX - wW, cY + len * 0.65);
+    ctx.lineTo(cX - hW, cY + len);
+    ctx.lineTo(cX, cY + len);
+    ctx.lineTo(cX, cY);
+    ctx.stroke();
+  }
+
+  function draw(org: MeasureSet, tgt: MeasureSet): void {
+    const canvas = document.getElementById('scaler-canvas') as HTMLCanvasElement | null;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const par = canvas.parentElement;
+    if (!par) return;
+    const w = par.clientWidth;
+    const h = par.clientHeight;
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, w, h);
+    const maxV = Math.max(org.chest, tgt.chest, org.length, tgt.length, 100);
+    const s = Math.min(w, h) * 0.85 / maxV;
+    const opts = { s, cX: w / 2, cY: h * 0.08 };
+    drawShape(ctx, org, true, opts);
+    drawShape(ctx, tgt, false, opts);
+  }
+
+  function run(): void {
+    const mode = getMode();
+    const ease = getNum('ease-val');
+    const org = getMeasures('origin', mode);
+    const tgt = getMeasures('target', mode);
+    const res = computeResult(tgt, ease);
+    const ui = window.__scalerUI;
+    setText('res-c', res.c.toFixed(1));
+    setText('res-w', res.w.toFixed(1));
+    setText('res-h', res.h.toFixed(1));
+    setText('res-l', res.l.toFixed(1));
+    const lat = computeLateralAdj(org.chest, tgt.chest);
+    const len = computeLengthAdj(org.length, tgt.length);
+    const pils = document.getElementById('action-pills');
+    if (pils) pils.innerHTML = buildActionHtml(lat, len, ui);
+    draw(org, tgt);
+    const warn = document.getElementById('warn-area');
+    if (warn) warn.classList.toggle('hidden', !isLargeScale(org.chest, tgt.chest));
+  }
+
+  function attachListeners(): void {
+    const modeBtns = document.querySelectorAll<HTMLElement>('#mode-selector button');
+    modeBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        modeBtns.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        const mode = btn.dataset.mode || 'standard';
+        document.getElementById('standard-grid')?.classList.toggle('hidden', mode !== 'standard');
+        document.getElementById('custom-grid')?.classList.toggle('hidden', mode === 'standard');
+        run();
+      });
+    });
+    window.addEventListener('resize', run);
+    document.querySelectorAll('input, select').forEach((i) => i.addEventListener('input', run));
+  }
+
+  function init(): void {
+    attachListeners();
+    run();
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+