@jjlmoya/utils-chrono 1.2.0

package/src/tool/crown-reference-guide/client.ts

@@ -0,0 +1,193 @@
+interface CrownPos {
+  id: number;
+  title: string;
+  desc: string;
+  detail: string;
+  winding: string;
+  hack: string;
+  note?: string;
+}
+
+interface Movement {
+  id: string;
+  name: string;
+  maker: string;
+  positions: CrownPos[];
+  posCount: number;
+}
+
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+let currentMovementId = 'eta-2824';
+
+const movements: Movement[] = [
+  {
+    id: 'eta-2824', name: 'ETA 2824-2 / Sellita SW200', maker: 'ETA / Sellita', posCount: 3,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown is pushed in. Watch runs normally.', detail: ui.position0Detail || 'No winding or setting functions are engaged.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn the crown clockwise to wind the mainspring.', detail: ui.position1Detail || 'About 30\u201340 full rotations from a dead stop.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: ui.position2Title || 'Date Quick-Set', desc: ui.position2Desc || 'Turn the crown clockwise to advance the date.', detail: ui.position2Detail || 'AVOID quick-setting between 9pm and 3am.', winding: '\u2014', hack: '\u2014', note: 'Avoid quick-set date between 9pm\u20133am' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Turn the crown in either direction to move the hands.', detail: ui.position3Detail || 'Pull to position 3 and rotate to set time.', winding: '\u2014', hack: ui.hasHack || 'Yes' },
+    ],
+  },
+  {
+    id: 'eta-2892', name: 'ETA 2892-A2 / Sellita SW300', maker: 'ETA / Sellita', posCount: 3,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. Thin movement running normally.', detail: ui.position0Detail || 'Slim profile and efficient automatic winding.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise to wind.', detail: ui.position1Detail || 'About 40 turns from dead stop.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: ui.position2Title || 'Date Quick-Set', desc: ui.position2Desc || 'Turn clockwise to advance the date.', detail: ui.position2Detail || 'Avoid quick-set between 9pm and 3am.', winding: '\u2014', hack: '\u2014', note: 'Avoid quick-set date between 9pm\u20133am' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Rotate freely. Hacking seconds stop.', detail: ui.position3Detail || 'Use a time reference for perfect sync.', winding: '\u2014', hack: ui.hasHack || 'Yes' },
+    ],
+  },
+  {
+    id: 'valjoux-7750', name: 'Valjoux 7750 / Sellita SW500', maker: 'ETA / Sellita', posCount: 3,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. Chronograph runs independently.', detail: ui.position0Detail || 'Cam-switched chronograph mechanism.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise to wind.', detail: ui.position1Detail || 'Ball bearing rotor. About 40 turns.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: ui.position2Title || 'Date Quick-Set', desc: ui.position2Desc || 'Turn clockwise to advance the date.', detail: ui.position2Detail || 'Day is linked to hour hand, no quick-set.', winding: '\u2014', hack: '\u2014', note: 'Day advances with time only' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Rotate freely. Seconds hack.', detail: ui.position3Detail || 'Stop chronograph before setting time.', winding: '\u2014', hack: ui.hasHack || 'Yes' },
+    ],
+  },
+  {
+    id: 'miyota-8215', name: 'Miyota 8215 / 8315', maker: 'Citizen Miyota', posCount: 2,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. Automatic winding.', detail: ui.position0Detail || 'Does not hack. Unidirectional rotor.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise to wind.', detail: ui.position1Detail || 'Unidirectional rotor. No date quick-set on base model.', winding: 'CW', hack: ui.noHack || 'No' },
+      { id: 2, title: '\u2014', desc: '\u2014', detail: '\u2014', winding: '\u2014', hack: '\u2014' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Rotate to set hands. No hacking.', detail: ui.position3Detail || 'No hack. Rotate past desired time then back.', winding: '\u2014', hack: ui.noHack || 'No' },
+    ],
+  },
+  {
+    id: 'miyota-9015', name: 'Miyota 9015', maker: 'Citizen Miyota', posCount: 3,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. 28,800 vph high-beat.', detail: ui.position0Detail || 'Slim. Direct competitor to ETA 2892.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise. Quiet, smooth winding.', detail: ui.position1Detail || 'Bidirectional rotor. About 35 turns.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: ui.position2Title || 'Date Quick-Set', desc: ui.position2Desc || 'Turn clockwise to advance date.', detail: ui.position2Detail || 'Avoid quick-set between 9pm and 4am.', winding: '\u2014', hack: '\u2014', note: 'Avoid quick-set date between 9pm\u20134am' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Rotate freely. Hacking stops seconds.', detail: ui.position3Detail || 'Smooth hand movement.', winding: '\u2014', hack: ui.hasHack || 'Yes' },
+    ],
+  },
+  {
+    id: 'seiko-nh35', name: 'Seiko NH35 / 4R35', maker: 'Seiko Instruments', posCount: 3,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. Magic Lever winding.', detail: ui.position0Detail || 'Efficient winding with minimal rotor movement.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise. Notched winding feel.', detail: ui.position1Detail || 'About 40\u201350 turns from dead.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: ui.position2Title || 'Date Quick-Set', desc: ui.position2Desc || 'Turn clockwise to advance date.', detail: ui.position2Detail || 'Avoid 9pm\u20133am. Day-date versions quick-set both.', winding: '\u2014', hack: '\u2014', note: 'Avoid quick-set date between 9pm\u20133am' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Rotate freely. Hacking stops seconds.', detail: ui.position3Detail || '3Hz sweep. Set and push crown back.', winding: '\u2014', hack: ui.hasHack || 'Yes' },
+    ],
+  },
+  {
+    id: 'seiko-6r35', name: 'Seiko 6R35', maker: 'Seiko', posCount: 3,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. 70h power reserve.', detail: ui.position0Detail || 'Improved regulation over 4R series.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise. Extended mainspring.', detail: ui.position1Detail || 'About 50\u201360 turns from dead.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: ui.position2Title || 'Date Quick-Set', desc: ui.position2Desc || 'Turn clockwise to advance date.', detail: ui.position2Detail || 'Avoid 9pm\u20133am. Instant date change.', winding: '\u2014', hack: '\u2014', note: 'Avoid quick-set date between 9pm\u20133am' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Rotate freely. Hacking.', detail: ui.position3Detail || '70h reserve means less frequent winding.', winding: '\u2014', hack: ui.hasHack || 'Yes' },
+    ],
+  },
+  {
+    id: 'unitas-6498', name: 'Unitas 6497 / 6498', maker: 'ETA / Unitas', posCount: 1,
+    positions: [
+      { id: 0, title: ui.position0Title || 'Resting', desc: ui.position0Desc || 'Crown pushed in. Hand-wound, small seconds.', detail: ui.position0Detail || 'Classic pocket watch caliber. No date.', winding: '\u2014', hack: '\u2014' },
+      { id: 1, title: ui.position1Title || 'Manual Winding', desc: ui.position1Desc || 'Turn clockwise. 18,000 vph (2.5 Hz).', detail: ui.position1Detail || 'About 30\u201335 turns. Vintage character.', winding: 'CW', hack: '\u2014' },
+      { id: 2, title: '\u2014', desc: '\u2014', detail: '\u2014', winding: '\u2014', hack: '\u2014' },
+      { id: 3, title: ui.position3Title || 'Time Setting', desc: ui.position3Desc || 'Pull to set. Rotate freely.', detail: ui.position3Detail || 'No hacking. Large crown for easy setting.', winding: '\u2014', hack: ui.noHack || 'No' },
+    ],
+  },
+];
+
+const crownStem = document.querySelector('.crown-stem') as SVGElement;
+const crownHead = document.querySelector('.crown-head') as SVGElement;
+const posChips = document.querySelectorAll('.pos-chip') as NodeListOf<HTMLButtonElement>;
+
+const positionBadge = document.getElementById('position-badge') as HTMLElement;
+const positionName = document.getElementById('position-name') as HTMLElement;
+const panelDesc = document.getElementById('panel-desc') as HTMLElement;
+const panelDetail = document.getElementById('panel-detail') as HTMLElement;
+const panelNote = document.getElementById('panel-note') as HTMLElement;
+const panelNoteText = document.getElementById('panel-note-text') as HTMLElement;
+const attrWindingValue = document.getElementById('attr-winding-value') as HTMLElement;
+const attrHackValue = document.getElementById('attr-hack-value') as HTMLElement;
+const movementSelect = document.getElementById('movement-select') as HTMLSelectElement;
+const pullBtn = document.getElementById('pull-btn') as HTMLButtonElement;
+const arrowCw = document.querySelector('.arrow-cw') as SVGElement;
+const arrowCcw = document.querySelector('.arrow-ccw') as SVGElement;
+
+function getMovement(id: string): Movement {
+  return movements.find((m) => m.id === id) || movements[0];
+}
+
+function getEffectivePositions(movement: Movement): CrownPos[] {
+  return movement.positions.filter((p) => p.title !== '\u2014');
+}
+
+function setCrownPull(pos: number) {
+  const offset = pos * 8;
+  crownStem.setAttribute('width', String(28 + offset));
+  crownHead.setAttribute('x', String(158 + offset));
+}
+
+function setPosHighlight(pos: number) {
+  posChips.forEach((chip) => {
+    chip.classList.toggle('active', parseInt(chip.dataset.pos || '0', 10) === pos);
+  });
+}
+
+function setArrows(pos: number, movement: Movement) {
+  const p = movement.positions[pos];
+  arrowCw.style.opacity = '0';
+  arrowCcw.style.opacity = '0';
+  if (p && p.winding === 'CW') arrowCw.style.opacity = '0.8';
+  else if (p && p.winding === 'CCW') arrowCcw.style.opacity = '0.8';
+}
+
+function setPanel(pos: number, movement: Movement) {
+  const p = movement.positions[pos];
+  if (!p || p.title === '\u2014') {
+    const eff = getEffectivePositions(movement);
+    const nearest = eff.reduce((a, b) => Math.abs(a.id - pos) < Math.abs(b.id - pos) ? a : b);
+    setPanel(nearest.id, movement);
+    return;
+  }
+  positionBadge.textContent = String(p.id);
+  positionName.textContent = p.title;
+  panelDesc.textContent = p.desc;
+  panelDetail.textContent = p.detail;
+  attrWindingValue.textContent = p.winding;
+  attrHackValue.textContent = p.hack;
+  panelNote.style.display = p.note ? 'flex' : 'none';
+  if (p.note) panelNoteText.textContent = p.note;
+}
+
+
+function selectPosition(pos: number, movement: Movement) {
+  const eff = getEffectivePositions(movement);
+  const exists = eff.some((p) => p.id === pos);
+  const target = exists ? pos : eff.reduce((a, b) => Math.abs(a.id - pos) < Math.abs(b.id - pos) ? a : b).id;
+  setCrownPull(target);
+  setPosHighlight(target);
+  setArrows(target, movement);
+  setPanel(target, movement);
+
+}
+
+function loadMovement(id: string) {
+  currentMovementId = id;
+  selectPosition(0, getMovement(id));
+}
+
+posChips.forEach((chip) => {
+  chip.addEventListener('click', () => selectPosition(parseInt(chip.dataset.pos || '0', 10), getMovement(currentMovementId)));
+});
+
+
+movementSelect.addEventListener('change', () => loadMovement(movementSelect.value));
+
+let pullStep = 0;
+pullBtn.addEventListener('click', () => {
+  const eff = getEffectivePositions(getMovement(currentMovementId));
+  pullStep = (pullStep + 1) % eff.length;
+  selectPosition(eff[pullStep].id, getMovement(currentMovementId));
+});
+
+loadMovement(currentMovementId);

package/src/tool/crown-reference-guide/component.astro

@@ -0,0 +1,69 @@
+---
+import MovementSelector from './components/MovementSelector.astro';
+import PositionPanel from './components/PositionPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <div class="crown-top-row">
+    <div class="crown-visual" id="crown-visual">
+      <svg class="crown-svg" viewBox="0 0 320 100" id="crown-svg">
+        <rect class="crown-tube" x="120" y="38" width="14" height="24" rx="3" />
+        <g class="crown-move-group">
+          <rect class="crown-stem" x="132" y="42" width="28" height="16" rx="2" />
+          <rect class="crown-head" x="158" y="30" width="38" height="40" rx="6" />
+          <rect class="crown-notch" x="162" y="30" width="3" height="40" rx="0.5" />
+          <rect class="crown-notch" x="168" y="30" width="3" height="40" rx="0.5" />
+          <rect class="crown-notch" x="174" y="30" width="3" height="40" rx="0.5" />
+          <rect class="crown-notch" x="180" y="30" width="3" height="40" rx="0.5" />
+          <rect class="crown-notch" x="186" y="30" width="3" height="40" rx="0.5" />
+          <rect class="crown-notch" x="192" y="30" width="3" height="40" rx="0.5" />
+        </g>
+        <g class="arrow-cw" opacity="0">
+          <circle class="arrow-bg" cx="248" cy="50" r="22" />
+          <path class="arrow-path" d="M 240 50 A 14 14 0 0 1 258 42" />
+          <polygon class="arrow-head" points="258,38 264,42 260,46" />
+          <text class="arrow-text" x="248" y="54">CW</text>
+        </g>
+        <g class="arrow-ccw" opacity="0">
+          <circle class="arrow-bg" cx="248" cy="50" r="22" />
+          <path class="arrow-path" d="M 240 50 A 14 14 0 0 0 258 58" />
+          <polygon class="arrow-head" points="258,62 264,58 260,54" />
+          <text class="arrow-text" x="248" y="54">CCW</text>
+        </g>
+      </svg>
+    </div>
+
+    <div class="crown-side">
+      <MovementSelector labels={ui} />
+
+      <div class="pos-bar" id="pos-bar">
+        <button type="button" class="pos-chip active" data-pos="0">
+          <span class="chip-num">0</span>
+          <span class="chip-label">{ui.position0Title || "Rest"}</span>
+        </button>
+        <button type="button" class="pos-chip" data-pos="1">
+          <span class="chip-num">1</span>
+          <span class="chip-label">{ui.position1Title || "Wind"}</span>
+        </button>
+        <button type="button" class="pos-chip" data-pos="2">
+          <span class="chip-num">2</span>
+          <span class="chip-label">{ui.position2Title || "Date"}</span>
+        </button>
+        <button type="button" class="pos-chip" data-pos="3">
+          <span class="chip-num">3</span>
+          <span class="chip-label">{ui.position3Title || "Time"}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <PositionPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/crown-reference-guide/components/CrownView.astro

@@ -0,0 +1,40 @@
+---
+
+
+
+
+
+---
+
+<div class="crown-visual" id="crown-visual">
+  <svg class="crown-svg" viewBox="0 0 380 130" id="crown-svg">
+    <g class="crown-group">
+      <rect class="crown-tube" x="20" y="45" width="18" height="40" rx="4" />
+
+      <g class="crown-move-group">
+        <rect class="crown-stem" x="36" y="52" width="40" height="26" rx="3" />
+
+        <rect class="crown-head" x="72" y="38" width="52" height="54" rx="8" />
+
+        <rect class="crown-notch" x="78" y="38" width="4" height="54" rx="1" />
+        <rect class="crown-notch" x="86" y="38" width="4" height="54" rx="1" />
+        <rect class="crown-notch" x="94" y="38" width="4" height="54" rx="1" />
+        <rect class="crown-notch" x="102" y="38" width="4" height="54" rx="1" />
+        <rect class="crown-notch" x="110" y="38" width="4" height="54" rx="1" />
+        <rect class="crown-notch" x="118" y="38" width="4" height="54" rx="1" />
+
+        <line class="crown-groove" x1="72" y1="56" x2="124" y2="56" />
+        <line class="crown-groove" x1="72" y1="74" x2="124" y2="74" />
+      </g>
+
+      <g class="arrow-cw" opacity="0">
+        <path class="arrow-path" d="M 150 60 Q 170 52 180 60" />
+        <polygon class="arrow-head" points="180,56 188,60 180,64" />
+      </g>
+      <g class="arrow-ccw" opacity="0">
+        <path class="arrow-path" d="M 150 74 Q 170 82 180 74" />
+        <polygon class="arrow-head" points="180,78 188,74 180,70" />
+      </g>
+    </g>
+  </svg>
+</div>

package/src/tool/crown-reference-guide/components/MovementSelector.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="movement-selector">
+  <label class="selector-label" for="movement-select">
+    <svg viewBox="0 0 24 24" width="16" height="16">
+      <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.611 3.611 0 0112 15.6z" fill="currentColor" />
+    </svg>
+    {labels.movementLabel || "Movement"}
+  </label>
+  <select id="movement-select" class="movement-select">
+    <option value="eta-2824">ETA 2824-2 / Sellita SW200</option>
+    <option value="eta-2892">ETA 2892-A2 / Sellita SW300</option>
+    <option value="valjoux-7750">Valjoux 7750 / Sellita SW500</option>
+    <option value="miyota-8215">Miyota 8215 / 8315</option>
+    <option value="miyota-9015">Miyota 9015</option>
+    <option value="seiko-nh35">Seiko NH35 / 4R35</option>
+    <option value="seiko-6r35">Seiko 6R35</option>
+    <option value="unitas-6498">Unitas 6497 / 6498</option>
+  </select>
+</div>

package/src/tool/crown-reference-guide/components/PositionPanel.astro

@@ -0,0 +1,59 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="position-panel" id="position-panel">
+  <div class="panel-header">
+    <div class="position-indicator" id="position-indicator">
+      <span class="position-badge" id="position-badge">0</span>
+      <span class="position-name" id="position-name">{labels.position0Title || "Resting"}</span>
+    </div>
+    <div class="position-controls">
+      <button type="button" class="pull-btn" id="pull-btn" title={labels.pullHint || "Pull crown"}>
+        <svg viewBox="0 0 24 24" width="22" height="22">
+          <path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="panel-body">
+    <div class="panel-section">
+      <p class="panel-desc" id="panel-desc">{labels.position0Desc || "Crown is pushed in. Watch runs normally."}</p>
+      <p class="panel-detail" id="panel-detail">{labels.position0Detail || "No winding or setting functions are engaged."}</p>
+    </div>
+
+    <div class="panel-attributes" id="panel-attributes">
+      <div class="attribute-row" id="attr-winding">
+        <span class="attr-icon">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm6 10c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z" fill="currentColor" />
+            <circle cx="12" cy="12" r="2" fill="currentColor" />
+          </svg>
+        </span>
+        <span class="attr-label">{labels.windingLabel || "Winding"}:</span>
+        <span class="attr-value" id="attr-winding-value">&mdash;</span>
+      </div>
+      <div class="attribute-row" id="attr-hack">
+        <span class="attr-icon">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="currentColor" />
+          </svg>
+        </span>
+        <span class="attr-label">{labels.hackLabel || "Hack"}:</span>
+        <span class="attr-value" id="attr-hack-value">&mdash;</span>
+      </div>
+    </div>
+
+    <div class="panel-note" id="panel-note" style="display: none;">
+      <svg viewBox="0 0 24 24" width="16" height="16">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor" />
+      </svg>
+      <span id="panel-note-text"></span>
+    </div>
+  </div>
+</div>