→ What Was Built

⇄ How We Worked

The owner directed with short messages — often a single sentence or a screenshot of a visual problem. Claude planned the approach first and waited for a go-ahead before writing any code. Changes stayed as working-tree edits; the owner reviewed and committed everything themselves.

What worked: the plan-first loop caught wrong assumptions early. Screenshots replaced long descriptions — "the yellow shape is invisible on the yellow zone" plus an image led straight to the right fix. Doing one thing at a time kept mistakes small.

What was hard: the dom-to-image-more iOS restriction and the brownish bleed on printer-friendly exports were genuinely unsolved — documented and left open rather than papered over. The deployment card was the most complex piece: rebuilt once, then extended across five sessions, one clearly scoped addition at a time.

🏛️ Architecture

🃏 Card Design

🎨 Visual & CSS

🛠️ Config & Ops

✓ What Was Built

Reference Card Page

• src/routes/reference/+page.svelte — new page; shares the same sidebar + card preview layout as the other editors.
• Sidebar checkboxes: two-column layout (Card Elements / Card Design). Core categories first (Show Weapons, Show Fighters, Show Characteristics, Show Deployments, Show Card Decks, Show Treasures, Show Twists), alliance categories below. "Circle type" checkbox in the Card Design column.
• Faction category merging: each alliance entry includes the alliance SVG icon first, then all faction icons, then each faction's subfaction (bladeborn) icons inline — no separate Bladeborn group.
• Landing page button: Reference Card added to src/routes/+page.svelte below Card Back, styled in zinc (secondary).

Card Layout

• 5 × 8 grid: grid-template-columns: repeat(5, 1fr) + grid-template-rows: repeat(8, 1fr) with height: 100% on the grid — icons fill the full card space without wasted margins.
• Fixed cell size: .rm-cell is 70 × 70 px with display: flex; align-items: center; justify-content: center. SVG icons are 72 % of cell width in both raw and circle-type designs so position never jumps when switching design.
• Labels: small text below each icon, always color: #000 regardless of design or printer-friendly state.

Circle Type Design

• Standard mode: .rm-badge — position: absolute; inset: 0, maroon #5a0a14 background, SVG fill: #FAF6F3, masked with runemark-shape.svg (same blob as Fighter Card).
• Printer-friendly mode: outer .rm-border-pf (black, full size, same mask) wrapping inner .rm-badge-pf (calc(100% - 2px), white background, black SVG fill) — 1 px ring, matching the Fighter Card PF approach.

Multi-Card Export

• Pagination: ITEMS_PER_CARD = 40; cardPages derived store chunks visibleItems into groups of 40. Each chunk renders its own scaled card element.
• Export loop: iterates over cardEls; 200 ms pause between desktop downloads; numbered suffix (_1, _2, …) appended when more than one card.

Export Artifact Fixes

• Every card element, grid, cell, and label carries explicit border: 0; outline: none; background: transparent on its own CSS rule (no wildcard) — prevents dom-to-image-more from emitting black frames.
• overflow: hidden removed from .rm-cell and .rm-badge — a known cause of white-box artifacts in dom-to-image-more.

i18n & Cleanup

• Added: ui.reference-card, ui.form-show, ui.form-weapon-runemarks, ui.form-circle-type in both locales.
• Pluralised: ui.deployment-group "Deployment" → "Deployments" (DE: "Aufstellungen"); ui.treasure-group "Treasure" → "Treasures" (DE: "Schätze").
• Removed unused keys from a scrapped group-header phase: ui.form-core, ui.form-factions, ui.form-bladeborn, ui.form-grand-alliances.
• Removed unused miscRunemarks import from reference/+page.svelte.

Group Runemarks (Reference Card)

• Checkbox: "Group Runemarks" added under Card Design in the Reference Card sidebar (i18n key: ui.form-new-line; DE: "Runenzeichen gruppieren").
• Pagination: cardPages returns RmItem[][][] (pages → groups → items). Groups can split across pages at the ITEMS_PER_CARD boundary.
• Filler cells: when enabled, invisible filler <div>s are injected after each group (except the last on a page) to pad the group's item count to the next multiple of 5. The next group then starts at column 1 with no gap penalty.
• Grid rows: pageGridRows simplified to always return repeat(8, 1fr) — no 12 px separator tracks needed.

Deployment Card — Mask Circle Fix

• SVG mask: added <mask id="inside-bf-mask"> in <defs> — black rect over full SVG, white rect over battlefield. Mask circles are now invisible outside the battlefield boundary.
• Split rendering: mask circle is two <circle> elements — a masked visual circle (pointer-events="none") and a transparent full-size hit target, so the circle remains clickable anywhere within its radius.
• Radius labels: MASK_RADII labels changed from S/M to Small/Large.

Deployment Card — Popup Position Fix

• Bug: clicking a marker near the bottom of the card opened the popup out of frame — the overflow correction in $effect used pv.y (the raw click Y) instead of rect.top (the popup's actual rendered top). Subtracting overflow from the click position pushed the popup back below the viewport instead of up.
• Fix: replaced pv.y - overflowBottom → rect.top - overflowBottom and pv.x - overflowRight → rect.left - overflowRight — now the adjustment shifts from the current rendered position, placing the popup flush with the edge.

Deployment Card — Wording

• form-icon: "Icon" → "Runemark"
• form-round-label: "Round" → "Round label" (added label to creation popup for consistency)
• popover-zone: "Zone from here" → "Draw zone from here"
• popover-mask: "Mask circle here" → "Place mask circle"
• popover-mask-title: "Mask zone" → "Mask Circle"
• zone-pick-start/end and measurement-pick-end: shortened instruction strings
• popover-add-to-position: "Add to position" → "Place here"

Reference & Text Card — Wording

• form-circle-type: "Circle type" → "Circles" (DE: "Kreise")
• form-layout-banderole: "Banderole type" → "Banderole" (already correct in DE)

Deployment Card — Matched Play Position

• When Orientation is toggled off and Matched Play is on, the Matched Play runemark/text now renders at y=20 (Orientation's slot) instead of y=60. Controlled by a derived mpY = showOrientation ? 60 : 20 constant.

Fighter Card — Export Border & Dark-Spots Fix

• Root cause: the March 29 "Finalize deployment card" commit removed ~30 per-element border: 0 declarations from FighterCard.svelte, replacing them with a single .card * { border-width: 0; border-style: solid } blanket rule. dom-to-image-more's CSS serializer preserves border-style: solid but silently drops border-width: 0, leaving every element with the UA-default border width — producing visible black frames in all exports.
• Secondary cause: the split border-width/border-style form was also wrong — the shorthand border: 0 additionally sets border-style: none, which survives serialization. border-width: 0 alone does not.
• Fix: changed the blanket rule to border: 0 and restored border: 0; outline: none; background: transparent on every individual selector — matching the TextCard pattern that has always worked. This mirrors rule #2 in the dom-to-image-more memory.
• Dark-spots bonus fix: the same per-element background: transparent resets also eliminated the printer-friendly "brownish bleed at SVG mask edge" artifact — leaked background: url('/background.jpg') from ancestor rules is now properly overridden on each element.

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Zone Data Model

• ZonePreset type removed from types.ts. DeploymentZone changed from { preset: ZonePreset } to { startPos: DeploymentPosition; endPos: DeploymentPosition }.
• Zone rect computation: zoneRect(zone) in DeploymentCard.svelte now calls getCoords(startPos) and getCoords(endPos) and returns the bounding rectangle. Any two grid positions produce a valid zone.

Zone Drawing UI

• Entry point: "Zone from here" button in the empty-position popover (same popover as Add Point / Measurement). Auto-creates a red player if none exist, matching the behaviour of Add Point.
• Two-step flow: first click → zone start (highlighted with a ring on the dot, same as measurement start); second click → zone created for the active player. A hint bar shows the current step ("Click a position to set the zone start corner" / "…end corner").
• Position dots shown automatically during zone mode even if "Show Markers" is toggled off: showPositionDots is showMarkers || zoneMode || measurementMode.

Zone Click-to-Edit

• Zone rects are clickable: onZoneClick prop added to DeploymentCard; each zone <rect> gets onclick + cursor: pointer when the prop is set. Disabled during zone/measurement mode and export.
• Zone popover: shows player colour title, position coordinates (R1C1 → R4C6), colour picker row (all 4 colours, active highlighted), "Redraw" button (removes + re-enters zone mode for that player), and "Remove zone" link.
• reassignZoneToColor: moves a zone from one player to another, auto-creating the target player if needed. Updates the popover mode to point at the new player/zone indices.

Mask Zone Cutouts

• Data model extended: DeploymentZone gains mask?: boolean and radius?: number (SVG units, defaults to 89). When mask: true, startPos is the circle centre; endPos is unused.
• Rendering: zone rendering split into two passes — regular zone rects first, then mask circles on top (before dashed centre lines). Mask circles are filled with the battlefield background colour (#d9b8a8 / white in printer-friendly), fully opaque, visually punching a hole through any coloured zones beneath. No SVG clip-paths needed.
• "Mask circle here" button in the empty-position popover. Single-tap creation — circle placed immediately with default radius.
• Mask zone popover: S / M size buttons (89 / 179 SVG units = 1 and 2 horizontal grid steps); Remove link. No colour picker.

Printer-Friendly Hatch Patterns

• SVG <pattern> defs: four distinct hatch patterns defined inside <defs> — forward-diagonal (/), back-diagonal (\), crosshatch (×), and horizontal lines. Each maps to one player index 0–3.
• Zone rects: fill switches to url(#hatch-N) with fill-opacity=1 in PF mode (was flat grey at varying opacity). Dotted zone borders removed entirely (stroke="none").
• Player number badges: white filled circle (r=13) + player number text centred inside each zone in PF mode — unambiguous per-player attribution even when hatches overlap. Badge block moved after the measurement lines in SVG paint order so badges always render on top of lines.
• Mask circles: stroke="none" (dotted border removed in all modes).

Perimeter Snap Points

• DeploymentPosition union extended with `PRM-${string}` template literal in types.ts. Coords are encoded in the ID string itself (PRM-{x}-{y}), parsed by a regex branch in getCoords() — zero coupling, survives JSON serialisation.
• 8 snap points per mask circle: cardinal and intercardinal angles (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°) computed as a $derived.by() reactive over all mask zones. Rendered as dashed semi-transparent dots when position dots are visible.
• PRM guard: in handlePositionClick, perimeter positions are silently ignored unless measurementMode is active — they only serve as measurement endpoints.

Measurement Line UX

• Midpoint dot: a small filled circle (r=4) rendered at the midpoint of each measurement line when the Euclidean length exceeds 60 SVG units. Guard prevents the dot overlapping the cap icons on very short lines.
• Label white halo (printer-friendly): measurement line label <text> gains stroke="white" stroke-width="4" paint-order="stroke fill". The white stroke acts as a knockout background, keeping the label legible over hatched zones without a separate <rect>.

Shape & Layout Fixes

• Shape stroke: colour changed from white to rgba(255,255,255,0.6), width reduced to 1px. Prevents the yellow shape (on yellow zone) from becoming invisible while keeping the stroke subtle everywhere else.
• RND label clamping: label position flips below the shape when it would be clipped at the top card edge (labelAbove < 24); also clamped horizontally to stay inside card bounds (Math.max(50, Math.min(865, cx))).
• .objective-label--pf CSS rule: added missing rule (background: white; color: #000) so objective labels render correctly in printer-friendly mode.
• Corner runemarks consolidated to the right: Orientation moved from top-left to top-right (x=863 y=20); Matched Play placed directly below it (x=863 y=60). Top-left corner is now clear.
• Card name rotated upward: .card-name gains transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap so the caption reads upward along the left edge, anchored at left: 28px; bottom: 20px. right: 0 removed.

Mobile & Editor UX

• JSON dropdown click-outside: $effect handler added to close the JSON dropdown on outside click — matching the existing View and Export dropdown behaviour.
• scrollIntoView on popover inputs: all 5 popover text inputs call scrollIntoView({ block: 'nearest', behavior: 'smooth' }) on focus so the iOS virtual keyboard does not obscure the input.
• WIP watermark removed: <div class="wip-watermark"> removed from the deployment page body.

Code Quality

• FighterCard CSS resets: removed ~100 redundant border: 0; outline: none; background: transparent declarations from individual CSS rules — all covered by the existing .card * reset rule.
• src/app.d.ts cleanup: removed all SvelteKit boilerplate comments and commented-out interface stubs. File retains only the active __BUILD_DATE__ declaration.

Example JSON

• _work/deployments/agents-of-belakor-battlefield-edge.json: approximation of the "Agents of Be'lakor: Battlefield Edge" deployment card. Red zone R1C4 → R4C6; blue zone R6C1 → R7C9. Three "Ritual Point" objectives; two 8" measurement lines from centre.

i18n & Cleanup

• Added: ui.popover-zone, ui.popover-zone-redraw, ui.popover-remove-zone, ui.zone-pick-start, ui.zone-pick-end, ui.popover-mask, ui.popover-mask-title, ui.popover-mask-radius in both locales.
• Removed: all deployment.zone-* preset label keys (14 keys) and ui.form-zones, ui.form-add-zone from both locales — no longer referenced.

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Independent Hierarchy Toggle

• freeHierarchy: boolean added to both FighterCardData and TextCardData in types.ts; defaults to false.
• Form UI: "Use Independent Hierarchy" checkbox in Card Elements section of both FighterForm.svelte and TextForm.svelte. Uses onchange (not bind:checked) to clear grandAlliance, faction, and bladeborn when toggling off. When on: 3 sublabeled <select> elements (Grand Alliance / Faction / Subfaction) with alphabetically sorted options. When off: existing FactionSelect component unchanged.
• Card rendering: faction and subfaction runemark badges use ternary conditions — freeHierarchy ? findFactionSvg(data.faction) : getFactionSvg(data.grandAlliance, data.faction) — so the correct SVG is shown regardless of mode. Tags row applies the same cascade conditions so it stays consistent with the badge display.
• findFactionSvg / findSubfactionSvg: two flat-lookup helpers added to hierarchy.ts and exported from index.ts. They search all alliances without needing a parent ID — required because free mode sets faction without necessarily setting a matching grandAlliance.
• i18n: new keys ui.form-free-hierarchy, ui.form-grand-alliance, ui.form-faction, ui.form-subfaction in both en.json and de.json.

Tags Row (Pills → Text)

• Design: Alegreya uppercase, 14 px, letter-spacing: 0.04em, items joined by • (U+2022 bullet). Replaces pill badges (maroon background, border-radius, border) across both card types.
• Fighter card: tags row placed inside .image-inner (which carries the SVG mask-image). This means the background strip (rgba(0,0,0,0.35)) is naturally clipped at the torn-paper edge — the strip cannot bleed past the mask boundary. Previous placement outside .image-inner caused the rectangular strip to overlap the shape mask.
• Text card: tags row sits directly in the dark header section; no background needed. Banderole mode overrides text colour to #5a0a14; printer-friendly to #000.
• Tags content: Alliance label → Faction label → Subfaction label (respecting cascade / free mode) → fighter runemark labels → activation label (text card only). Empty slots are filtered out with TypeScript type narrowing (.filter((x): x is string => !!x)).
• CSS removed: .pills-row, .runemark-pill, .image-bottom and all their modifier variants (.is-printer-friendly, .is-banderole) deleted from both card components.

Code Quality Audit & Refactor

• Runemark mask CSS variable: the inline style string mask-image: {runemarkMaskUrl}; -webkit-mask-image: {runemarkMaskUrl}; mask-size: 100% 100%; ... was repeated on every .runemark-border and .runemark-badge element — 8 times in FighterCard.svelte and 10 times in TextCard.svelte. Replaced with a --rm-mask CSS custom property set once on the .card element; the CSS rules for .runemark-border and .runemark-badge now reference var(--rm-mask). 18 inline style attributes removed.
• SVGO investigation: ran SVGO 4.0.1 against the runemark SVG library (1.8 MB, 234 files). Savings were 0–1 bytes per file — files consist entirely of compressed path data with no redundant markup. SVGO not worth running; SVGs are already optimal.

Export Polish

• "Upload model image" hidden during exports: placeholder text in the model image area is suppressed for both the default export and the printer-friendly export. FighterCard.svelte gained an exporting?: boolean prop; the span renders only when !exporting && !printerFriendly. The page passes {exporting} to the component.

JSON Save / Load — Fighter & Text Cards

• UI: "Save JSON" and "Load JSON" added to the existing export dropdown (below a <hr> divider) on both /fighter and /text pages, desktop and mobile. Reuses the same split-button chevron already present — no new toolbar space needed.
• Save: saveLayout() serialises data to a pretty-printed .json file using makeSlug() for the filename. Fighter strips modelImage (blob URL, not serialisable). Both pages strip svg from runemark objects — only { id, label } is saved, keeping files compact.
• Load: handleFileLoad() reads the file via FileReader, parses JSON, re-hydrates runemark SVGs from the bundled fighterRunemarks record by id, then replaces data. Malformed JSON is silently ignored.
• Runemark state sync fix: rmKeys (the internal string array driving the runemark selects) was local $state in FighterForm / TextForm. On JSON load, setting data externally caused the form's $effect to immediately overwrite data.rightRunemarks / data.fighterRunemarks with the stale empty keys. Fix: rmKeys lifted to the parent page as $state, passed to the form as a $bindable prop. handleFileLoad sets rmKeys from loaded ids before replacing data.

⏳ Still Pending

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Banderole Layout Variant

• New layout variant: layoutVariant?: 'standard' | 'banderole' added to TextCardData. When 'banderole': .image-inner is not rendered (top section shows card texture); the type label is wrapped in .banderole containing a masked .banderole-bg div for the maroon shape and a .card-label-text on top via z-index.
• Shape and position: .banderole is position: absolute; left: -15px; right: -15px; bottom: 56px; padding: 4px 50px — overhangs the card edges slightly. .banderole-bg uses inset: -35px 0 to extend 35 px above and below, rendering the mask at ~150 px height so the SVG's ragged edge detail resolves to ~10 px of visible deviation. Text bottom aligns with standard mode at 56 + 4 = 60 px.
• Runemark inversion: in banderole mode the runemarks switch from white-on-maroon to black-on-cream (.runemark-border → maroon, .runemark-badge → #FAF6F3, SVG fill → #000). Pills invert to maroon text on transparent.
• Printer-friendly banderole: .banderole-bg set to background: transparent; a .banderole-outline SVG with the same path stroked in black renders only when printerFriendly. The full torn-edge overlay is suppressed in banderole mode (printerFriendly && !isBanderole). Outline SVG must have explicit width: 100%; height: calc(100% + 70px) — relying on inset alone does not size SVG elements correctly.

Form & i18n

• Two-column layout: Card Elements checkboxes (left) and a new Card Design column (right, banderole toggle) rendered as a CSS grid 1fr 1fr; on mobile (<1024 px) collapses to single column with row-gap: 28px.
• i18n: new keys ui.form-card-design ("Card Design" / "Kartendesign") and ui.form-layout-banderole ("Banderole type" / "Banderole") in both locales.

Runemark Additions

• Thyrielle's Zephyrites (factions-order-bladeborn-thyrielles-zephyrites.svg) — added to hierarchy.ts under Order › Bladeborn; i18n key thyrielles-zephyrites in both locales.
• Warhammer Underworld (misc-whu.svg) — added to miscRunemarks in index.ts; i18n key misc.whu in both locales. SVG subsequently cropped.
• Warcry (misc-warcry.svg) — added to miscRunemarks in index.ts; i18n key misc.warcry in both locales.

Inline Runemark Markup

• Syntax: [slug] in body text or prerequisite text renders as (SVG). Unrecognised keys are left as literal text. Fighter/weapon keys are slugified at map-build time (Beast→beast, Icon Bearer→icon-bearer); faction/subfaction IDs are used directly.
• slugify() + inlineRmMap: module-level IIFE in TextCard.svelte merges all runemark groups (fighters, weapons, characteristics, card-decks, deployment, misc, treasure, twists) plus the full hierarchy (alliances, factions, subfactions) into a single slug → svg lookup. parseMarkup() extended with a third regex pass.
• CSS: .body-text :global(.inline-rm) — inline-block, 1.1em × 1.1em, vertical-align: -0.15em; inner SVG inherits fill: currentColor.
• Picker: [⊕] button added to both markup toolbars (body text and prerequisite). Clicking opens an inline panel with a search input (auto-focused) and a grouped, scrollable list. Clicking an entry inserts [slug] at the current cursor position and closes the picker. Opening one picker closes the other.
• Picker options: all groups present — Runemarks (fighters), Weapons, Characteristics, Card Decks, Deployment, Misc, Treasure, Twists, plus one group per grand alliance (Chaos/Death/Destruction/Order) containing factions and subfactions. Each entry shows [slug] in monospace and the localised label.
• i18n: new keys ui.weapons-group ("Weapons" / "Waffen") and ui.form-insert-runemark ("Insert runemark" / "Runemark einfügen") in both locales.

Small Body Text Toggle

• smallBodyText: boolean added to TextCardData; defaults to false. When active, .small-body class on .parchment reduces body text 20→16 px, flavor text 18→15 px, prerequisite text 18→14 px.
• A↓ button added to both markup toolbars (between italic and [⊕]). Shared toggle — one flag affects all text areas. Active state renders with maroon fill.
• i18n: new key ui.form-small-text ("Reduce text size" / "Textgröße reduzieren") in both locales.

Back Button Hover Effect

• Fighter, text, and card-back editors' back buttons updated from text-zinc-500 hover:text-white to text-zinc-300 rounded px-2 py-1 hover:text-white hover:bg-zinc-800 — matching the deployment editor.

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Header Resize & View Dropdown

• Header enlarged: padding px-3 py-2 → px-4 py-3; all buttons h-7 → h-9; player colour circles w-7 h-7 → w-9 h-9; separators h-5 → h-7; text text-xs → text-sm. HEADER_H updated to 61 (py-3=12 + h-9=36 + py-3=12 + border=1).
• View dropdown: new split-style button added after the Overlays pill; dropdown contains "Show Runemarks" checkbox toggle. Opening it closes the other two dropdowns. Anchored via getBoundingClientRect().left captured at open time.
• Show Runemarks toggle: showRunemarks = $state(true) in +page.svelte, passed as prop to DeploymentCard. When on: SVG icon (dagger/hammer/shield) rendered inline in bubble. When off: letter fallback (D/H/S) rendered as <text> in Germania One.

Dropdown Fixes

• Load JSON anchored correctly: previously used hardcoded right: 12px so it appeared under the Export PNG button. Now captures jsonBtnEl.getBoundingClientRect().left at open time and uses left: {jsonDropdownLeft}px as the fixed-position anchor.
• Mutual exclusion: each dropdown's open handler closes the other two first. Eliminates multiple open dropdowns overlapping each other.
• Dropdown top position: changed from header-bottom (61 px) to button-bottom (52 px = py-3 12 px + h-9 36 px + 4 px gap) so dropdowns sit immediately below their trigger button.

Popover Overflow Clamping

• Post-render clamping: bind:this={popoverEl} + $effect — after each render, measures popoverEl.getBoundingClientRect().bottom against viewportHeight - 8; shifts popoverEl.style.top up by the overflow amount if needed. Safety net: max-height: calc(100dvh - 16px); overflow-y: auto on popover container.

Code Cleanup

• Dead state removed: activeIcon (was always 'dagger', never updated), ZONE_PRESETS (declared but unused in template)
• Bug fixed: loadLayout() was closing showDropdown instead of showJsonDropdown — layout loaded but dropdown stayed open
• ZonePreset import removed from types destructure (unused after ZONE_PRESETS removal)
• Stale runemark category imports removed from an earlier misimplementation (cardDecksRunemarks, fighterRunemarks, etc.)

i18n & CSS Variables

• New i18n keys: ui.view (en: "View", de: "Ansicht"), ui.exported-card-alt (en: "Exported card", de: "Exportierte Karte")
• All four editors: alt="Exported card" → alt={t('ui.exported-card-alt')} in fighter/+page.svelte, text/+page.svelte, card-back/+page.svelte, deployment/+page.svelte
• Popover style block: all hardcoded hex colours (#27272a, #3f3f46, #fff, #d4d4d8, #52525b) replaced with --ui-surface, --ui-border, --ui-text, --ui-surface-2, --ui-text-dim, --ui-surface-hover
• app.css alignment: --ui-surface, --ui-surface-2, --ui-surface-hover, and --ui-border had one extra space vs other vars; all 14 variables in both :root and [data-theme="light"] now align at the same column (--ui-surface-hover sets the width)

Two-Point Measurement Lines

• Type changes: DeploymentMeasurement fields anchorCol/anchorRow/direction/length removed; replaced with startPos: DeploymentPosition and endPos: DeploymentPosition. DeploymentDirection type removed entirely.
• Interaction flow: tap any empty position dot → popover shows "Add Marker" + "Add Measurement" buttons. Tapping "Add Measurement" sets measurementMode = true + records measurementStart, closes popover. A hint bar appears at the top of the card area. Tapping a second position completes the line; tapping the same position or cancelling aborts.
• Measurement rendering: start/end coordinates from getCoords(); vector normalised; start cap rendered before the line, end cap after. Full-line transparent hit area (stroke="transparent" stroke-width="24") opens the measurement popover anywhere along the line.
• Cap picker UI: 4-button grid (● → | —) for both start cap and end cap; active cap highlighted red; stored as DeploymentCapType ('dot' | 'arrow' | 'tick' | 'none').
• Layer order fixed: measurements render between dashed centre lines and player bubbles in SVG source; position dots render last (on top of everything).
• Wording unified: "Overlays" → "Show Markers" throughout; state showDots → showMarkers; remove buttons styled as text-xs text-zinc-400 underline hover:text-white to match app-wide pattern.

5×5 Snap Position Grid (session one)

• Old grid removed: 9 inside (TL/TC/TR/ML/CC/MR/BL/BC/BR) + 12 outside edges + 4 corners = 25 positions.
• New grid: 25 inside (R1C1–R5C5) + 20 outside edges (OUT-T/B/L/R 1–5) + 4 corners = 49 positions. R3C3 = exact battlefield centre (crosshair). R3 row lies on horizontal centre line; C3 column on vertical centre line.
• Unified CNR coordinate system: all positions (inside and outside) derived from corner constants CNR_L=63, CNR_R=852, CNR_T=34, CNR_B=540. Inside: x = CNR_L + c*(CNR_R-CNR_L)/6, y = CNR_T + r*(CNR_B-CNR_T)/6. Outside edge: same formula at the fixed edge coordinate. Corners: literal corner values. This ensures every column aligns vertically and every row aligns horizontally across inside and outside dots.
• Even corner-to-corner distribution: the 5 outside edge positions per side span from corner to corner in 6 equal steps, so all 7 points per side (2 corners + 5 edge) are equally spaced.
• Regex-based helpers: getCoords() uses .match() against the systematic naming — no switch statement needed.
• Dead code removed: redundant ax/ay/ex/ey aliases in measurement rendering (leftover from MEAS_INSET removal) eliminated.

7×9 Snap Grid & 99-Position Reference Match (session two)

• Grid redesigned to match the physical reference card: 63 magenta inside dots (7 rows × 9 cols, outermost positioned exactly on the BF boundary lines) + 36 blue outside dots = 99 total. Previous 5×5 grid was incorrect.
• Inside formula: x = BF_L + (c−1)·BF_W/8, y = BF_T + (r−1)·BF_H/6. C1=BF_L, C9=BF_R, R1=BF_T, R7=BF_B. Centre R4C5 = (BF_CX, BF_CY) ✓
• Outside formula: T/B use same x as inside columns at CNR_T/CNR_B; L/R use same y as inside rows at CNR_L/CNR_R. 9 T + 9 B + 7 L + 7 R + 4 corners = 36.
• 3 blue dots per corner: OUT-T1 (above R1C1) + OUT-L1 (left of R1C1) + OUT-CNR-TL (diagonal) form a tight cluster at each corner.
• Outer left/right columns moved 10 px inward: CNR_L 63→73, CNR_R 852→842. Brings outside dots visually closer to the battlefield edge.
• DeploymentPosition type in types.ts expanded accordingly: R1C1–R7C9, OUT-T1–T9, OUT-B1–B9, OUT-L1–L7, OUT-R1–R7.

Template Deduplication

• Three copies removed: dashed centre lines, measurement lines, and deployment shapes were each duplicated three times in the SVG template — a leftover from iterative Python-based editing. Each section now appears exactly once.
• File reduced from 668 to 437 lines (−231 lines of pure duplication). Indentation normalised throughout.

Deployment Point Shapes

• Speech bubbles replaced with geometric shapes: triangle (dagger), diamond (hammer), circle (shield). Shapes filled with player colour; white icon via SVG fill inheritance; black icon on yellow or in printer-friendly mode.
• Uniform vertical extent: all three shapes span cy ± CIRCLE_R (22px) from the snap point. Circle: r=22. Diamond: half-diagonal=22. Triangle: point-down equilateral with flat top at cy−22, tip at cy+22.
• Icon fill via inheritance: innerContent() strips all fill attributes; outer <svg> sets fill={iconColor}. Replaces fragile render-time .replace() approach.
• Per-icon sizing: dagger 29px (shifted up to triangle centroid: cy − CIRCLE_R/3 + 2); hammer 28px; shield 32px.
• Printer-friendly badges moved from above shape to left-of-shape, vertically centred: x={cx − CIRCLE_R − 4}, text-anchor="end".
• RND label above shape at uniform anchor cy − SHAPE_R − RND_OFF; white with black stroke outline in colour mode, plain black in printer-friendly.
• Yellow updated from #ca8a04 to #f59e0b (brighter amber); synced across DeploymentCard.svelte and +page.svelte.
• Removed: makeTailPoints(), getTailAngle(), bubbleWidth() and all tail/bubble constants (BH, BPAD, BRAD, TAIL_LEN, TAIL_W, GAP, BW_ICON, CHAR_W). Template indentation fixed.

Corner Runemarks — Orientation & Matched Play

• Two new fixed runemarks rendered in the card's top-left and top-right corners, 20 px inset from every edge (matching the caption's bottom/left: 20px spacing): twists-orientation.svg (top-left) and card-decks-symmetrical.svg (top-right, Matched Play).
• Text fallbacks: when showRunemarks is off the SVGs are replaced with ↑ (Orientation) and MP (Matched Play) in Germania One, same dark-maroon fill #5a0a14; printer-friendly uses #000.
• Individual View toggles: showOrientation and showMatchedPlay booleans added to +page.svelte and passed as props; two new pill-switch rows added to the View dropdown. New i18n keys: ui.form-show-orientation, ui.form-show-matched-play (en + de).

RND Label Redesign

• Problem: the SVG <rect> approach used a fixed 54 px width — too wide for "2", too narrow for "Hello, world". A stroke-on-white text approach produced staircase artefacts via feMorphology.
• Solution: RND labels are now rendered as HTML <div> elements positioned absolutely over the card (position: absolute; transform: translate(-50%,-50%)). Background #faf6f3, border-radius: 4px, padding: 2px 6px, white-space: nowrap — the browser sizes the box to fit any text automatically. Printer-friendly: white background. All export-breaking properties (border: none; outline: none; box-shadow: none) explicitly reset.
• Layer order: divs are rendered after </svg> in DOM order and so naturally sit above the SVG content.

Player Badge — Circular White Background

• Moved out of the shapes loop: previously rendered inside the per-player/per-point loop (causing z-order issues with measurement lines). Now rendered in a separate final {#each} block after position dots — guaranteed on top of all SVG content.
• Circular background: <circle cx={cx−CIRCLE_R−10} cy={cy} r="9" fill="white"/> — centred on the circled-numeral glyph (right edge at cx−CIRCLE_R−4, glyph ~12 px wide so centre at cx−CIRCLE_R−10), radius 9 gives ≈1–2 px clearance.

Dagger Letter Vertical Centring

• Previous: y={cy + 8} (baseline) ≈ visual centre at cy — too low.
• First fix: y={cy − CIRCLE_R/3} (triangle centroid, ≈cy−7.3) — too high.
• Final: y={cy − CIRCLE_R/6} (≈cy−3.7) with dominant-baseline="central" — splits the difference between centroid and mid-height, visually balanced. Circle and diamond shapes remain at cy.

Measurement Cap Button Differentiation

• Start cap picker: arrow symbol changed to ←, tick symbol changed to ⊤.
• End cap picker: arrow symbol stays →, tick symbol stays ⊥.
• Gives each button a distinct directional character so start and end pickers read differently at a glance.

New Faction Runemark — Cities of Sigmar (Alternative)

• SVG: factions-order-cities-of-sigmar-alternative.svg copied from _work/ to src/lib/runemarks/svg/.
• Hierarchy: imported as oCitiesOfSigmarAlt in hierarchy.ts; entry { id: 'cities-of-sigmar-alternative', label: 'Cities of Sigmar (Alternative)', … } inserted immediately after the base cities-of-sigmar entry.
• i18n: factions.cities-of-sigmar-alternative added to en.json ("Cities of Sigmar (Alternative)") and de.json ("Städte Sigmars (Alternativ)").

Objective Markers (session four)

• New type: DeploymentObjective { position, label } added to types.ts; objectives?: DeploymentObjective[] added to DeploymentCardData.
• SVG rendering: black circle r=16 (half of CIRCLE_R × 1.5; smaller than deployment shapes) rendered below deployment point shapes in the SVG painter order. No stroke, fully opaque black.
• HTML label: same div-over-SVG pattern as RND labels. transform: translate(-50%, 0), positioned at top: cy + OBJECTIVE_R + 4px so it sits just below the circle. Black background, #faf6f3 text, white-space: nowrap.
• Position dot coloring: objectivePositions derived set; dot gets pos-dot--objective class (black fill, #faf6f3 stroke) when an objective occupies that position.
• Click priority: handlePositionClick checks objectives first (before deployment points), then empty — prevents a stacked objective + point on the same position opening the wrong popover.
• Popover — new mode: { kind: 'objective'; oi: number } branch added to PopoverMode; shows title, label input, and remove link.
• i18n: deployment.objective ("Objective" / "Ziel"); ui.form-objective-label, ui.popover-add-objective, ui.popover-remove-objective (en + de).

Empty Popover Restructure & Wording (session four)

• "Add point" → "Place marker": the old label implied a scoring point. "Place marker" correctly describes placing a dagger/shield/hammer marker at a position.
• "Measurement" → "Add measurement": consistent "Add X" verb across all three actions.
• Three stacked full-width buttons: "Place marker" (red) and "Add measurement" (zinc) are now separate full-width buttons, replacing the side-by-side layout that forced small text.
• Objective section: a border-t border-zinc-700 divider with a popover-label "OBJECTIVE" header separates the label input + Add objective button from the marker/measurement actions. Makes it immediately clear the label field belongs to the objective action only.
• popoverObjectiveLabel state resets to '' each time an empty popover opens.

Popover Overflow Fix (session four)

• Problem: the existing $effect measured getBoundingClientRect() synchronously — before browser layout was complete, the element height could be 0 or stale, so the adjustment was a no-op.
• Fix: wrapped measurement in requestAnimationFrame() so it fires after paint. Element and popover values captured as local constants before the callback to avoid stale reactive reads.
• Right-edge clamping added: the effect now also checks rect.right vs viewportWidth - 8 and shifts el.style.left leftward if needed.
• Initial position guard: clampedStyle bottom clamp increased from viewportHeight - 320 to viewportHeight - 500; prevents a visible flash on the frame before rAF fires.

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Printer-Friendly Export

• Printer-friendly mode: printerFriendly prop on DeploymentCard; white card background (.card.is-printer-friendly { background: white }); all bubble colours forced to #000; battlefield fill changed to white with a black outline stroke; white <rect> as first SVG child covers any viewport-edge bleed
• Unicode player badges: ①②③④ rendered above each bubble when printerFriendly is true, using SVG <text> with paint-order="stroke" and a white stroke-width="4" halo for legibility over any background; stored as PLAYER_BADGES constant in script block (Svelte {@const} cannot appear at template top-level)
• Printer-friendly export flow: dropdown option sets printerFriendly = true, awaits RAF for re-render, calls doExport('_print'), then resets flag; avoids any flicker in the live preview

Form & Caption Polish

• Form field styles: DeploymentForm.svelte root wrapper changed from ad-hoc Tailwind classes to space-y-10 text-sm matching other forms; all labels migrated to scoped .field-label; all text/select inputs migrated to scoped .field-input; labels inside flex rows get style="margin-bottom:0"
• Card name caption: .card-name div added below SVG — position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-family: 'Alegreya'; font-size: 13px; color: #000; opacity: 0.5 — matching FighterCard caption style; opacity: 1 in printer-friendly mode; form name label annotated "— renders like caption"

Export Frame Bug Fix

• Root cause identified and fixed: Tailwind v4 preflight sets border-style: solid; border-color: currentColor on *, suppressed by border-width: 0. dom-to-image-more treats zero/default values as "skip" when serialising computed styles — so border-width: 0 is absent in the cloned foreignObject, leaving border-style: solid active. Overlay elements with color: #000, left: 0; right: 0, and opacity < 1 (stacking context) produce a full-width black frame. Fix: explicit border: 0; outline: none; background: transparent on every transparent overlay element's own CSS rule
• Additional CSS fixes on .card: changed display: inline-block → display: block (inline-block creates a descender gap → bottom bar in export); added border: 0; outline: none to .card itself; SVG given inline style="display:block;border:none;outline:none;" for reliable serialisation
• Code cleanup: removed stale .card svg CSS rule (redundant with inline SVG style and incorrect indentation); removed all capturing state scaffolding from both DeploymentCard.svelte and +page.svelte; added explicit { width, height, scale: 2 } to domtoimage.toPng() call

SVG Optimisation

• 5 batches: all Chaos factions, Death factions, Destruction factions, Order factions, and fighters runemarks re-optimised (viewBox preserved, redundant attributes stripped, consistent width="300" height="300"); 229 total SVGs in library after this pass

Card-First UI Rebuild

• Sidebar removed entirely: replaced with a compact single-row header toolbar; all editing now happens via popovers triggered from the card or header buttons
• Interactive position dots: showPositionDots prop renders white dots at all 25 positions; tap empty = popover to add a point for the active player; tap occupied = popover to edit/remove. Large r=22 transparent hit target, visual dot r=7.
• Popovers: contextual panel at tap coordinates (clamped to viewport). Empty-dot popover: player selection, icon selector (dagger/hammer/shield), RND input, Add Point / Add Measurement buttons. Occupied-dot popover: reassign colour, change icon, edit RND, remove. Measurement popover: 3×3 direction grid, length and label inputs, remove.
• 8-way direction picker on card: after placing a measurement anchor via snap grid, 8 arrow buttons radiate from the anchor point inside the SVG itself; click one to set direction and create the measurement. MEAS_INSET=20 pulls line endpoints 20 px inward from anchor/terminus to avoid overlapping bubbles; midpoint handle stays at true geometric midpoint.
• Overlays toggle: pill switch (role="switch", aria-checked) in header; gates both showPositionDots and onMeasurementClick — turning it off hides all interactive dots and measurement handles for a clean preview
• Pinch-to-zoom & pan: two-finger pinch scales card 0.5×–4×, centroid delta pans; double-tap resets to fit; touch-action: none on <main>

Header Toolbar & i18n

• Header structure: ← Back | card name | player circles + ✕ | Overlays [pill] | + Add Measurement | Save JSON[▾] | Export PNG[▾]; all items shrink-0 inside a single overflow-x-auto row
• JSON split button: "Save JSON" as primary action; dropdown exposes "Load JSON". Intentionally separate from the Export PNG split button — JSON is round-trip data, PNG is a deliverable.
• Fixed-position dropdowns: both dropdowns use position: fixed; top: 45px; right: 12px to escape overflow-x: auto clipping
• 22 new i18n keys in ui namespace added to both en.json and de.json: back, overlays, overlays-on/off-title, save-json, load-json, more-json/export-options, player select/remove titles, measurement anchor hint, and all five popover strings
• Locale reorder: both JSON files restructured into 13 logical groups via Node.js script — 134 keys total. Groups: App/global → Navigation → Card types → Colors → Export & file → Image adjust → Faction filter → Common helpers → Fighter & text fields → Image/background → Card back → Deployment form → Deployment editor UI

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Deployment Card — Form & Bubbles

• Speech bubble rendering: coloured rounded-rect bubble (BH=48px) with white icon (32px) and optional RND label; directional tail pointing toward battlefield; 33 snap positions
• Corner tail fix: replaced hardcoded 45° diagonal tail with getTailAngle() using exact atan2 to the nearest battlefield corner (~35°); general makeTailPoints(BW, BH, angle) handles all directions and detects rounded-corner zone
• Dashed centre lines from centre: split into four arms originating at (BF_CX, BF_CY) so the first dash starts at the cross
• Player-level form structure: DeploymentPlayer { color, points[] }; colour exclusion, position exclusion, smart CC-first defaulting, dynamic bubble width, contrast-aware icon buttons
• Layout & i18n: sidebar 360 → 480 px; desktop scroll; mobile horizontal scroll + pinned export; all strings moved to t() with 13 new locale keys

Text Card — Caption Feature

• TextCardData — added showCaption: boolean and imageCaption: string
• Card visual — caption at position: absolute; bottom: 20px inside .card, matching Fighter Card; dark text, 50% opacity
• Form order — Type select before Name; caption input below Name; keyed as form-placeholder-caption-fighter / form-placeholder-caption-text

SVG Normalisation & Misc

• 61 runemark SVGs normalised: 34×32, 16×512, 11×1024 px all set to 300×300 via sed; viewBox unchanged; all 203 runemarks now share width="300" height="300"
• Card Back dark mode: .swatch-black gained border-color: rgba(255,255,255,0.3)
• Issue templates: "Ability card editor" → "Text card editor"; Card back option added; preamble comment added to all three templates

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Card Back Editor — /card-back

• New route — src/routes/card-back/+page.svelte; same two-panel layout (form left, card preview right) as fighter and text editors
• CardBackData interface in types.ts: title, backgroundImage, imageOffsetX/Y, imageZoom, runemark, textColor, showFlippedName
• Card visual — 574×915px; default texture (static/background.jpg); has-bg-image class suppresses CSS background when custom image is uploaded (avoids double-layering)
• Name + runemark overlay — Germania One 56px; runemark 280×280px SVG; mirrored name (rotated 180°) above/below runemark or flanking name when no runemark
• Mirrored name — showFlippedName flag (default true); works for name-only and name+runemark; name-overlay-text-only class widens gap to 220px when no runemark between the two names
• Text colour — three swatches: white (#fff), black (#000), red (#c0392b); drives --card-text-color CSS custom property on .card; printer-friendly always forces #000
• Runemark picker — search input + scrollable grouped list (identical pattern to FactionSelect); covers all fighter, weapon, characteristic, and faction/hierarchy runemarks; selection badge with clear button; "no matches" empty state
• Background image — upload, remove, sliders for X/Y position and zoom (desktop); Adjust Image button + full-card touch overlay for drag-to-pan + pinch-to-zoom (mobile)
• Export — PNG + printer-friendly PNG via dom-to-image-more (desktop) / modern-screenshot (mobile); Web Share API on iOS

i18n

• New keys in both locales: card-back, form-placeholder-card-back, form-runemark, form-filter-runemarks, form-text-color, form-show-flipped-name, adjust-image-hint-mobile
• Fixed hardcoded English "Adjust image position and zoom in the Preview tab." in FighterForm.svelte — now uses t('ui.adjust-image-hint-mobile')
• JSON parse bug fixed in de.json: stray ASCII " inside a German string containing typographic quotes was terminating the JSON value early

Docs & Code Cleanup

• README.md — card back editor described; "Both editors" → "All three editors"
• CLAUDE.md — project description, routes list, and Card structure section updated
• Bug fix: adjustMode now resets to false when background image is removed (was sticky, would re-activate on next upload)

Landing Page

• Build-time date injection — LAST_UPDATED hardcoded string removed; Vite define injects __BUILD_DATE__ as the ISO date at build time; ambient declare const added to src/app.d.ts for TypeScript; "Last updated" on the landing page now advances automatically on every build with no manual edit needed
• Card Back button secondary style — button visually de-emphasised relative to Fighter Card and Text Card buttons; uses bg-zinc-700 hover:bg-zinc-600 fill with text-zinc-300 hover:text-white for a clear hover effect, while the primary editors keep bg-red-900

Runemark Library — New Categories (card back only)

• 28 new SVG files — Card Decks (6), Deployment (3), Misc (3), Treasure (8), Twists (7)
• 5 new export Records in src/lib/runemarks/index.ts: cardDecksRunemarks, deploymentRunemarks, miscRunemarks, treasureRunemarks, twistsRunemarks
• 5 new i18n namespaces (card-decks, deployment, misc, treasure, twists) with translations in both en.json and de.json; group labels added to the ui namespace
• LocaleData interface in types.ts updated with the 5 new fields
• Card back picker — 5 new sorted groups appended to allRunemarkOptions; new records spread into allRunemarkSvgs
• SVG fill bug fix — card-decks-scales-of-talaxis.svg and deployment-shield.svg had fill="#000" on their <path> elements; stripped so paths inherit --card-text-color from the parent <svg> correctly
• i18n README — namespace table extended with 5 new entries

Deployment Card Editor — /deployment

• Landscape layout — 915×574px card (portrait dimensions rotated); sidebar 360px; scale formula min((viewportWidth − 360) / 915, (viewportHeight − 64) / 574, 1) constrains both axes; mobile tab bar identical to other editors
• Battlefield rectangle — parchment-coloured (#d9b8a8) rect inset 100px left/right, 60px top/bottom; dashed centre lines (8px dash / 6px gap) divide it into 4 quadrants; card name renders faintly at centre of battlefield
• SVG-based card — DeploymentCard.svelte renders an inline <svg width="915" height="574"> directly; parchment texture via CSS background-image on the wrapper .card div (same as other cards)
• 17 snap positions — 9 inside (3×3 grid: TL TC TR / ML CC MR / BL BC BR) + 8 outside (OUT-TL/TC/TR, OUT-LC, OUT-RC, OUT-BL/BC/BR); each maps to an (x, y) coordinate on the SVG canvas
• Deployment icon types — dagger (downward triangle ▽), hammer (diamond ◇), shield (circle ⊙); outer shapes drawn as SVG polygon/circle with fill="currentColor"; inner icon imported via ?raw from deployment-dagger.svg / deployment-hammer.svg / deployment-shield.svg and embedded as white content in a nested <svg>
• Player colours — 2-player for now: red #c0272d, blue #1a3a6e; set via style="color: {color}" on <use>, picked up by fill="currentColor" on outer shapes
• RND labels — positioned adjacent to icon in the "outward" direction from the rectangle (above for top positions, below for bottom, left/right for side); colour matches player colour (or black in printer-friendly mode)
• Data model fully typed — DeploymentCardData, DeploymentPoint, DeploymentMeasurement, DeploymentPosition, DeploymentIconType, DeploymentColor, DeploymentCapType, DeploymentDirection all in src/lib/types.ts
• Measurement model defined — each point supports 0–2 DeploymentMeasurement entries: direction (up/down/left/right), label (e.g. 8"), startCap + endCap ('arrow' | 'tick' | 'none'); rendering not yet implemented

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Card Elements — Text Card

• Four new boolean flags on TextCardData: showActivation, showFlavorText, showPrerequisite, showPointsTable
• Defaults — showRunemarks: true, showActivation: true, showFlavorText: true; prerequisite and points table default false
• Card Elements checkbox order — Show Runemarks → Show Activation → Show Flavor Text → Show Points Cost Increases → Show Prerequisite
• Card render gates — {#if data.showActivation && data.activationType}, {#if data.showFlavorText && data.flavorText}, {#if data.showPointsTable}, {#if data.showPrerequisite && data.prerequisiteText}
• Parchment render order — flavor text → points table → prerequisite → body text
• Points table decoupled — no longer gated on cardLabel === 'divine-blessing'; works with any card type

Card Elements — Fighter Card

• Two new boolean flags on FighterCardData: showSubtitle, showCaption
• Caption field moved — extracted from the image block, now appears below the subtitle input; gated on showCaption

Prerequisite Field & Rename

• prerequisiteText: string added to TextCardData; card renders .prerequisite-box wrapping .body-text with parseMarkup()
• Files renamed: AbilityCard.svelte → TextCard.svelte, AbilityForm.svelte → TextForm.svelte, route /ability → /text
• Type AbilityCardData → TextCardData; card type slug 'ability' preserved in preset labels

Table Row Contrast — Fighter Card

• White wash — rgba(255, 255, 255, 0.25) on .stats-values, .weapons-box, and .damage-box
• Alternating tints — rgba(90, 10, 20, 0.06) on even damage rows; rgba(90, 10, 20, 0.08) on second weapon row (:nth-child(odd) due to header being first child)
• Row dividers — box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.4) on damage rows after the first
• Damage row height — bumped to 28px; damage-box vertical padding/gap tuned to 0
• Removed text-transform: uppercase from .dcol-wide (the "* Zugewiesener Schaden" label)
• Gap between tables reduced to 20px (was 29px)
• Printer-friendly — all backgrounds and alternating tints reset to transparent

Points Table Restyle — Text Card

• Matches damage table — removed dark maroon header and outer border/radius; replaced with box-shadow: inset 0 1px 0 0 #000, inset 0 -1px 0 0 #000 outer borders and rgba(255, 255, 255, 0.25) container background
• All text — Alegreya 17px, color: #000, padding: 0 8px; Germania One and colored header removed
• Row height — 28px for header, regular, and elite rows; row dividers rgba(0, 0, 0, 0.4)
• Alternating tint — .points-table > *:nth-child(even) gets rgba(90, 10, 20, 0.06) (regular row = 2nd child)
• Printer-friendly — container and tint both cleared
• Dead code removed — points-row-bottom class and .points-value.is-empty rule

German Translation Corrections

• form-caption: "Beschriftung" → "Bildunterschrift"
• form-damage-points-allocated: "Zugeteilte Schadenspunkte" → "Zugewiesener Schaden"
• col-damage-points-allocated: "* Erlittener Schaden" → "* Zugewiesener Schaden"

Landing Page

• Button group gains my-4 for extra breathing room above and below
• LAST_UPDATED constant + locale-aware "Last updated" line via Intl.DateTimeFormat + $derived

Export Filename — Faction Prefix

• makeSlug() in both /fighter and /text pages now collects grandAlliance, faction, and bladeborn (skipping empty values), slugifies each, and prepends them before the card name — e.g. stormcast-eternals_prosecutors_my-fighter_2026-03-22_14-30.png

Runemark Rules — Hero / Monster / Thrall Mutual Exclusion

• Picking any of Hero, Monster, or Thrall disables the other two in all three runemark selects
• Thrall added to the priority sort (priority = -1) so it floats to the top of the right-column runemark display, matching Hero and Monster behaviour

LangSwitch — Custom Dropdown

• Replaced native <select> + separate link with a single <details>/<summary> pill dropdown
• Summary — globe SVG icon + current language name, styled to match the GitHub and theme-toggle pills
• Menu — language <button>s (active state bold), horizontal divider, <a> link for "Add a language..."
• Close on select — details.open = false after i18n.setLocale()
• Close on outside tap — document click listener registered via $effect with cleanup
• Redundant .lang-add CSS rule removed (duplicate of .lang-option color)

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Divine Blessing & Locale Sorting

• Divine Blessing card type — new preset slug divine-blessing; German: "Göttlicher Segen"; added to both form select and card presetSlugs
• Points value fields — regularPointsValue and elitePointsValue added to TextCardData; form inputs appear conditionally below Card Name when Divine Blessing is selected
• Form field order — Activation moved below Card Name and Points section, before Runemarks; Divine Blessing positioned before Lesser Artefact in the type dropdown
• Locale-aware sorting — FactionSelect sorts alliances, factions, and subfactions; FighterForm and TextForm sort weapon types and fighter runemarks — all via localeCompare(b, i18n.code) in $derived
• FactionSelect refactor — extracted sortAll() for the no-search path; eliminated redundant !lc guard branches inside the filter map
• FactionSelect type fix — replaced FighterCardData import with a structural prop type { grandAlliance, faction, bladeborn }, making it correctly usable with both card types
• Info file cleanup — stale cardLabel comment in types.ts; ability card label list in CLAUDE.md; march-20 locale sorting pending item marked Done

Points Table Empty State

• Pre-filled defaults — initial state changed from undefined to '15' / '20'; type changed from number? to string? to match what text inputs actually bind
• is-empty class — card shows — (em dash) at 16px with class:is-empty when field is cleared, matching the fighter card weapon stat pattern (.weapon-val.is-empty)
• Stable row height — line-height: 1.1 (relative) replaced with line-height: 25px (absolute) on .points-value; font-size changes in .is-empty no longer affect the row height
• Form placeholders — inputs show 15 / 20 as placeholders when cleared

Points Table Refinements

• Header row — restructured divine blessing table with a dark maroon header row ("Fighter Wounds" / "Points Cost Increase") styled like the fighter stat table; row labels shortened to "Regular (≤ 22)" and "Elite (≥ 23)"
• Border approach — switched from box-shadow: 0 0 0 1px to border: 1px solid #5a0a14 + border-radius: 6.5px 6.5px 0 0 on the inner header row, matching the fighter table pattern; removed overflow: hidden
• i18n additions — added points-col-wounds ("Fighter Wounds" / "Lebenspunkte des Kämpfers") and points-col-cost ("Points Cost Increase" / "Punktwertzuschlag"); shortened points-regular / points-elite to just "Regular" / "Elite"

💡 Key Decisions

📁 Files Changed

✓ What Was Built

i18n System

• i18n module — src/lib/i18n/index.svelte.ts with module-level $state locale, reactive t(key, vars?) with fallback to en.json, i18n.setLocale() + i18n.init() (localStorage persistence).
• Auto-discovery — import.meta.glob('./locales/*.json', { eager: true }) discovers locale files automatically; contributors only need to add a .json file, no code changes.
• EN + DE locale files — 7 namespaces each: meta, alliances, factions, subfactions, ui (~55 keys), card (~20 keys incl. column headers), runemarks (26 keys), weapons (17 keys). All values natural case; CSS handles text-transform: uppercase.
• Stable key pattern — stored values remain English slugs/keys (weapon names, cardLabel, runemark IDs) for icon/SVG lookup; translation happens at render time only.
• i18n bug fixes — activation options (Double/Triple/Quad) now use t('card.activation-*'); card name placeholder wired to t('card.card-name-placeholder'); ui.title and ui.github removed from locale files and made static.

Components & UI

• LangSwitch — native <select> styled as pill (matches ThemeToggle), globe icon, "Add a language…" option opens GitHub Issues in a new tab. Hidden when only one locale present.
• All components wired — every visible string in FighterForm, TextForm, FighterCard, TextCard, ThemeToggle, FactionSelect, fighter page, and text page now uses t().
• Card values translated — column headers (BASE SIZE, POINTS VALUE, MOVE, TOUGHNESS, WOUNDS, RANGE, ATTACKS, STRENGTH, DAMAGE, damage bracket header), runemark pills, weapon names, fighter name / card name placeholders, card type label.
• Custom card type option — "Custom…" sentinel in Type select; reveals free-text input with 30-char limit and live counter.
• Landing page pill row — GitHub link, LangSwitch, and ThemeToggle grouped into one consistent pill row; flex-wrap for mobile.

Faction Data

• Thanatek's Tithe subfaction — added under Death / Ossiarch Bonereapers in hierarchy.ts and both locale files. SVG optimized from editor source: stripped class, id, and style attributes; normalized viewBox to 0 0 origin with translate; added width/height="300" and <title>; removed all path ids and redundant fill. Import wired up as dBbThanateksTithe.
• Removed 4 Underworlds-only factions — Drepur's Wraithcreepers and Lady Harrow's Mournflight (Nighthaunt); Ironsoul's Condemnors and Storm of Celestus (Stormcast Sacrosanct Chamber). These Warhammer Underworlds warbands are redundant for a Warcry card creator.

Contributor Docs

• Contributor docs — src/lib/i18n/README.md expanded with namespace table, TODO convention, RTL note, and what not to translate; README.md Translations section added; CONTRIBUTING.md lists translations as a contribution type; .github/ISSUE_TEMPLATE/new_language.md created.

i18n Polish (2026-03-21)

• | line-break in card headers — all nine col-* column headers in FighterCard.svelte now render via split('|') + <br>, allowing long translated labels (e.g. "Lebens|punkte") to wrap within narrow cells. col-base-size and col-points migrated to the same consistent pattern.
• | line-break in weapon names — weapon name span in FighterCard.svelte uses the same split pattern (e.g. "Reichweiten|waffe"). FighterForm weapon <select> refactored to an #each loop and strips | via .replaceAll('|', '') so the split character never appears in the dropdown.
• i18n README corrections — new "Line breaks in card text" section documents the | feature with examples and clarifies that only card.* and weapons.* support it. False claim that "TODO suffix is stripped in display" corrected: the t() function returns raw values as-is.
• Pre-release QA pass — de.json typos fixed (double-O in "Ordnung", "Geingeres" → "Geringeres"); duplicate translation on cities-of-sigmar-dispossessed resolved; all templates, README, CONTRIBUTING, and issue templates reviewed and confirmed accurate.

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Markup Toolbar (Bold / Italic)

• Bold / italic markup buttons on the ability form body text field — B and I buttons wrap the current selection in **…** / *…* markers; parseMarkup() in TextCard.svelte renders them as <strong> / <em> via {@html}.
• Torn-edge SVG overlay on printer-friendly ability card — the torn-paper path is drawn as an absolute overlay inside .image-section, matching the fighter card aesthetic. Only shown when printerFriendly=true.

Form Polish

• Form label cleanup — "Card Type" → "Type (select)", "Card Name" → "Card", "Body Text" → "Text"; default card name changed from "ABILITY NAME" to "CARD NAME" in both the form state and the card placeholder.
• Damage bracket alignment — Damage Points Allocated input is now text-center; Move/Damage column headers lost unnecessary text-center class (inputs already centered).
• Battle Trait card type — added as a new option in the ability card type select (after Heroic Trait). cardLabel comment in types.ts updated to document the new value.

Favicon & PWA Icons

• Full favicon set added to static/: SVG (modern browsers), ICO (fallback), 96px PNG, apple-touch-icon (180px), 192px + 512px manifest icons, site.webmanifest.
• Link tag order in app.html: .ico sizes="any" → .svg type="image/svg+xml" → apple-touch-icon → manifest. Modern browsers pick SVG; ICO covers RSS readers and old browsers.
• Paths use %sveltekit.assets% — all four link hrefs prefixed with %sveltekit.assets% so they resolve correctly under paths.base = '/warcry-card-creator-2026' on GitHub Pages. Without this, SvelteKit's prerender throws a 404 error on /favicon.ico during CI build.
• theme_color / background_color in manifest set to #5a0a14 (dark maroon) to match card aesthetic.
• PWA install prompt enabled on Android/Chrome via manifest; iOS home screen icon covered by apple-touch-icon.

Pill / Badge Styling

• Size increased from 13px / 5px 10px to 15px / 7px 13px on both Fighter and Ability cards.
• Font changed from 'Germania One' to 'Alegreya' — Alegreya is more legible at small body-text sizes.
• Pills alignment fixed on Fighter card — the pills-break div (a width:100% flex spacer that forced hierarchy pills and fighter runemark pills onto separate rows) was removed. All pills now flow in one continuous row.
• Worst-case test combination identified and saved: Grand Alliance = Sentinels of Order, Faction = Stormcast Eternals: Vanguard Auxiliary Chamber, Bladeborn = The Farstriders, Fighter runemarks = Icon Bearer + Terrifying + Berserker, Activation = QUAD.

Label Rename

• "Ability Card" → "Ability / Text Card" — updated in both the landing page button (src/routes/+page.svelte) and the editor header (src/routes/text/+page.svelte) to better reflect that the card type is used for plain text cards beyond just abilities.

Community & GitHub Files

• Repo community files added: CODE_OF_CONDUCT.md, CONTRIBUTING.md, SECURITY.md, LICENSE (MIT); README.md expanded.
• GitHub templates reworked: .github/ISSUE_TEMPLATE/bug_report.md, feature_request.md, and new PULL_REQUEST_TEMPLATE.md.

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Grand Alliance Selection

• Alliance headers in FactionSelect converted to clickable buttons — clicking sets data.grandAlliance and clears data.faction/data.bladeborn. Card already renders only the GA runemark when faction is empty.
• Selected state highlighted in red; selectionLabel shows the alliance name alone.

Light/Dark Theme

• data-theme attribute on <html> controls the active theme. Defaults to system prefers-color-scheme; manual toggle saves to localStorage and overrides permanently.
• FOUC prevention: inline <script> in app.html reads localStorage (or system pref) and sets data-theme before first paint.
• :root defines dark-mode vars; [data-theme="light"] overrides with warm parchment palette. Tailwind class overrides in app.css remap zinc/white classes — no component class changes needed. Form components use var(--ui-*) directly.
• Light palette: shell #e4ddd3, inputs #ede8e2, text #2e2620.
• ThemeToggle: pill-shaped button (sun/moon + label), landing page only, below card buttons.
• Red button contrast fix: [data-theme="light"] .bg-red-900.text-white keeps button text white on maroon.
• Contrast audit: --ui-text-subtle darkened to #5a5048 (~5.3:1 on page bg — WCAG AA).

Mobile Image Positioning

• Touch overlay on card image area in the Preview tab; "Adjust Image" toggle button appears when a model image is uploaded.
• Single-finger drag → X/Y offset; two-finger pinch → zoom. touch-action: none on the overlay suppresses browser scroll/zoom without needing preventDefault().
• Position X/Y/Zoom sliders in FighterForm wrapped in hidden lg:block — desktop only. Mobile shows a hint: "Adjust image position and zoom in the Preview tab."
• Below-card slider strip removed entirely.
• Range input thumb: custom 20px circle (#991b1b) via -webkit-appearance: none + -moz-; track uses var(--ui-surface-2) for theme compat.

Mobile Form Polish

• iOS layout shift fix: placeholder="—" added to characteristics inputs (Points, Move, Toughness, Wounds). Missing placeholder caused iOS to switch keyboard type on empty field, triggering a viewport shift. Matches existing weapon input pattern.
• Empty characteristics on card: class:stat-val-empty shows — at 16px — matches weapon value class:is-empty from Mar 15.
• Select centering on iOS: style="text-align-last: center" on Base Size + Weapon Type selects. iOS Safari ignores text-align: center on <select>; text-align-last is the correct property.
• .field-input font-size set to 1rem unconditionally; @media (max-width: 1023px) override removed.

Mobile Export Fix

• Library: modern-screenshot (domToPng) replaces dom-to-image-more on real mobile devices. Uses Canvas 2D API internally — bypasses the iOS Safari foreignObject restriction that blocked background textures and model images. Desktop unchanged.
• Explicit dimensions: the card sits inside a CSS transform: scale(cardScale) wrapper. getBoundingClientRect() includes the transform, so without explicit dimensions the captured size was wrong. Fix: { width: 574, height: 915, scale: 2 } passed to domToPng.
• iOS download — Web Share API: on HTTPS, navigator.share saves immediately to Photos — no overlay. On localhost (HTTP, no secure context), navigator.share is undefined and the overlay fallback fires instead. Confirmed on real device: overlay is a localhost artefact only.
• Inline overlay fallback: fullscreen dark overlay + long-press-to-save instruction. Localhost-only. Uses inline style="color: #fff" — light theme CSS overrides text-white to near-black.
• isRealMobile: plain const via navigator.userAgent regex (/iPhone|iPad|iPod|Android/i). Separates real devices from desktop mobile-viewport emulation — desktop in mobile viewport keeps dom-to-image-more.
• Split export button (PNG + printer-friendly dropdown) added to mobile Preview tab on both editor pages. Landing page "unavailable" notice removed.

Misc

• LAN testing: server: { host: true } in vite.config.ts — dev server on all network interfaces. README updated.
• CLAUDE.md: import sorting, key quoting, on-touch cleanup policy documented.

💡 Key Decisions

Grand Alliance & Theme

Mobile Image Positioning

Mobile Export

Mobile Form Polish

📁 Files Changed

✓ What Was Built

Pre-work

• Removed isRestricted block from both editor pages — editors now fully accessible on any screen size
• Removed mobile warning message and all viewport detection state from the index page (/)

Tab Bar & Layout

• Tab bar on mobile (Edit / Preview): solid bg-red-800 fill on active tab, dark bg-zinc-950 on inactive — hidden on desktop (sm:hidden)
• Layout: flex-col h-dvh on mobile stacks tab bar → form/preview panel; sm:flex-row restores side-by-side on desktop
• h-dvh (dynamic viewport height) instead of h-screen — accounts for iOS Safari browser chrome correctly
• overflow-hidden on wrapper + min-h-0 on <aside> — fixes flex scroll trap so the inner overflow-y-auto form div scrolls correctly within the bounded height

Card Scaling

• Explicit-dimension card wrapper: width: 574×cardScale px; height: 915×cardScale px; position: relative — card absolutely positioned inside with transform-origin: top left; flex sees the correct visual size instead of the raw 915px layout box
• cardScale uses viewport width on mobile ((viewportWidth - 32) / 574), viewport height on desktop
• Export button hidden from Edit tab header on mobile (hidden sm:block); shown above the card in the Preview panel on mobile only (sm:hidden)

Form Polish

• FighterForm grids: Characteristics and each Weapon row changed from grid-cols-5 to grid-cols-3 sm:grid-cols-5 — 3-column wrap on mobile
• iOS input zoom fix: @media (max-width: 639px) { .field-input { font-size: 1rem; } } added to both FighterForm.svelte and TextForm.svelte — prevents iOS Safari from auto-zooming on focus
• Dropdown click-outside: $effect attaches a deferred document click listener when showDropdown is true; any tap outside closes it — fixes dropdown getting stuck open on touch devices
• Tablet portrait fix: raised the mobile/desktop layout breakpoint from sm: (640px) to lg: (1024px) — tablets in portrait now use the tabbed layout instead of a cramped 480px form + ~288px preview side-by-side. isMobile threshold updated to match. iOS input zoom media query updated to max-width: 1023px.

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Runemark Library Audit

• Full audit against a reference card creator — cross-checked faction list and all subfactions
• Added Everchosen as a top-level Chaos faction (SVG + hierarchy entry)
• Added Legions of Nagash as a top-level Death faction (SVG + hierarchy entry)
• Added 10 Cities of Sigmar subfactions: Anvilgard, Castelite Hosts, Darkling Covens, Dispossessed, Greywater Fastness, Hallowheart, Hammerhal, Tempest's Eye, The Living City, The Phoenicium (SVGs + hierarchy entries)
• Added Grombrindal as a top-level Order faction (SVG sourced from reference project)
• Added Lesser Artefact and Greater Artefact to ability card type select

Hierarchy Restructure

• Standalone warbands namespaced under parent faction (e.g. Iron Golem → Slaves to Darkness: Iron Golem); Cities of Sigmar subfactions promoted to factions; several Death/Destruction factions similarly reparented
• Ulfenkarn removed from the hierarchy entirely; dUlfenkarn import removed from hierarchy.ts
• TXT export workflow: hierarchy exported to editable plain text, user audited, changes applied back to hierarchy.ts — SVG imports reused, only labels and nesting changed

Filterable Faction Select

• Built FactionSelect.svelte — replaces the three cascading Alliance/Faction/Subfaction <select> elements with a single filterable component: text filter input + scrollable grouped list (alliance headers sticky, factions indented, subfactions further indented); current selection shown as a dismissible badge; A→Z order preserved
• Applied to both editors — FighterForm.svelte and TextForm.svelte; cascading selects removed from both

Card Polish

• Activation badge font-size increased from 14px → 24px in TextCard.svelte
• Pipe line break (|) supported in fighter name and text card name — card renders <br> at each |; form label hints updated

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Fighter Card Polish

• Renamed faction "Chaotic Beasts" → "Monsters of Chaos (Chaotic Beasts)"; fixed alphabetical sort in hierarchy
• Empty weapon stat values render — at smaller font; weapon stat field placeholders changed to —
• Image caption field: Alegreya font, absolutely positioned at bottom: 20px, 50% opacity in preview / full in export
• Circular runemark badges replaced with custom organic shape (runemark-shape.svg) — CSS mask + wrapper border technique (78px border / 76px badge)
• Fixed hardcoded fill="#FFF" in 20 runemark SVGs so printer-friendly fills work
• Table border-radii: outer boxes 7.5px, inner rows 6.5px (1mm equivalent)
• Subtitle — optional secondary line below fighter name; Germania One; maxlength="120" + live counter; rendered only when non-empty
• Header text changed from abbreviations to full words: MOVE / TOUGHNESS / WOUNDS / RANGE / ATTACKS / STRENGTH / DAMAGE
• Weapon name font 16px → 18px; use:fittext applied so long names shrink to fit
• Monster damage auto-dash: when Range/Attacks/Strength all empty, Damage shows — with class:is-empty styling
• Damage table font 15px → 17px; form labels: "Damage Table", "Damage Points Allocated"
• Code cleanup: removed unused has-chevrons/chevron-* classes; removed dead Weapon.icon field
• Dead assets removed: duplicate SVGs in static/, unreferenced favicon.svg
• Base size changed to <select> — 14 round (⌀ 20 → ⌀ 160) + 7 oval options, round-first ascending
• Page <title> tags added to /fighter and /text routes

Font Swap

• Replaced RodchenkoCTT with Germania One (weight 400 only, self-hosted, SIL OFL 1.1)
• Replaced OldrichiumITCStdLight with Alegreya (variable, wght 100–900, regular + italic, SIL OFL 1.1)
• Font family names updated throughout; letter-spacing removed from all Germania One usages
• Monster damage table uses Alegreya (body font, not Germania One)
• Stale font files removed: RodchenkoCTT, OldrichiumITCStdLight, RobotoSlab

Text Card

• Built TextCard.svelte: 574×915px, torn-edge header with dark maroon background, horizontal runemarks row (GA + faction + subfaction + 2 fighter runemarks + activation badge), card type label, parchment with title / flavor text / body text
• Built TextForm.svelte: card type, name, runemarks selects, activation select, flavor + body textareas
• Built /text/+page.svelte: split-panel layout, Export PNG + printer-friendly export
• Printer-friendly: white background, no torn-edge mask, black text, white pills, black runemark fills

💡 Key Decisions

📁 Files Changed

✓ What Was Built

Fighter Runemarks & Pills

• Fighter runemarks (right column) — 26 SVG files imported (fighters-agile.svg → fighters-warrior.svg, A–Z); fighterRunemarks export added to index.ts; 3 select dropdowns in form; card shows up to 3 circles in the right column, sorted Hero/Monster first.
• Deduplication via disabled options — already-selected runemark stays visible in the other dropdowns but is disabled; Hero and Monster are mutually exclusive (selecting one disables the other across all three selects).
• Hero/Monster always on top — $effect sorts selected runemarks so Hero or Monster always appears first in the right column.
• 4 new monster factions — "Chaotic Beasts" in Agents of Chaos, "Monsters of Death" in Bringers of Death, "Monsters of Destruction" in Harbingers of Destruction, "Monsters of Order" in Sentinels of Order; 4 new SVGs added to src/lib/runemarks/svg/.
• Pills mode — when "Show Runemarks" is unchecked, alliance/faction/bladeborn and fighter runemarks are shown as styled pills at the bottom of the image area instead of circles; fighter runemarks start on a new line; centered with 24px bottom spacing.
• Image mask restructured — mask moved from .image-section to a new .image-inner wrapper so absolutely-positioned pills are not clipped by the mask.
• Header text fallback labels — when "Show Runemarks" is off, M / T / W / RNG / A / S / DMG text labels are wrapped in <span class="header-text"> with explicit color: #FAF6F3 to be visible against the dark header (previously invisible because the parent had color: transparent for background-clip: text).
• Color pass — all #1a0408 occurrences replaced with #000; all fill: white replaced with fill: #FAF6F3 (warm off-white matching parchment).
• Code cleanup — $props() declaration moved before $effect() in FighterForm.svelte (was logically unsafe ordering).

Export fidelity fixes

• White dot top-left — .runemarks container always in DOM even when empty; added border: 0; outline: none; background: transparent to its CSS rule.
• White frame around card — .card * {} wildcard doesn't reset .card itself; added border: 0; outline: none directly to .card. Added same reset to #cardEl wrapper in +page.svelte.
• White frame around model image — .image-section and .image-inner and .model-img all needed per-element explicit resets.
• Damage table horizontal white lines — border-top: 1px solid black on .damage-row is silently dropped by dom-to-image-more; replaced with box-shadow: inset 0 1px 0 0 #000.
• Header runemark icons smaller in export — .header-runemark span lacked reset; SVG had width: auto which behaves differently in SVG foreignObject; changed to explicit width: 28px; height: 28px.
• Weapon runemark SVG fill — added fill: #000 to .weapon-runemark :global(svg) for export consistency.

Git & GitHub Pages

• Git repo initialized — git init run in project root; .claude/ added to .gitignore (contains local Claude Code permission settings, not for version control).
• adapter-static — swapped @sveltejs/adapter-auto for @sveltejs/adapter-static; svelte.config.js sets paths.base = '/warcry-card-creator-2026' when NODE_ENV === 'production'.
• Prerendering — src/routes/+layout.ts added with export const prerender = true; all pages are fully static.
• Base-path links — all internal hrefs updated to use base from $app/paths (/fighter → {base}/fighter etc.) in +page.svelte, fighter/+page.svelte, and ability/+page.svelte.
• static/.nojekyll — prevents GitHub Pages from ignoring the _app/ directory.
• GitHub Actions deploy workflow — .github/workflows/deploy.yml; triggers on push to main; builds with Node 22 + npm ci; uploads build/ via actions/upload-pages-artifact and deploys via actions/deploy-pages.
• Pages source set to "GitHub Actions" — not a branch; the official actions handle deployment directly.
• Site live at hennirocks.github.io/warcry-card-creator-2026/

UI Polish & Mobile

• Landing page copy — title updated to "Warcry Card Creator 2026"; descriptive text added: project summary + fan disclaimer, combined into one paragraph. <svelte:head> title tag added.
• README rewritten — replaced SvelteKit boilerplate with a proper project description mirroring the landing page copy, plus concise dev instructions.
• Mobile restriction — phone screens (<640px) and portrait tablet screens (<1024px wide, portrait) see a "requires tablet in landscape or larger screen" notice with a back link instead of the editor. Reactive to window resize and orientation change.
• Index page note — same restriction note shown conditionally on the landing page for restricted screen sizes (JS-driven, same logic as the editor pages).
• Ability page restriction — same mobile restriction applied to the text card placeholder page.
• Form readability — sublabel color bumped from zinc-500 to zinc-400; upload hint text from zinc-400/zinc-600 to zinc-300/zinc-400.
• Export PNG button — slightly larger padding, text-sm font size, lightened base color one step for more visual prominence.

Runemark Library

• SVG audit — compared the project's svg/ folder against a reference repo; identified 15 missing bladeborn warbands, 17 missing/new faction icons, and weapons-pistol.svg.
• New SVGs added — 20 new files added from the white/ set (white versions for use in the maroon runemark circles); weapons-pistol.svg from the black/ set (weapon icons are black).
• All new factions & subfactions wired up — every svg: null entry in hierarchy.ts filled in; Gobbapalooza shares Gloomspite Gitz icon; Brand's Oathbound shares Darkoath icon; Hexbane's Hunters moved to Order of Azyr.
• Hexbane's Hunters recovered — SVG existed in git history but had been inadvertently deleted; restored via git show HEAD:….
• Pistol weapon type — added import to index.ts and option to FighterForm.svelte weapon select (between Mace and Ranged Weapon).
• File naming normalised — 13 bladeborn-*.svg files renamed to the project's factions-{alliance}-bladeborn-*.svg convention; factions-death-teratic_cohort.svg underscore → hyphen; all imports in hierarchy.ts updated.

Export dropdown & printer-friendly mode

• Split dropdown button — "Export PNG" button replaced with a split button: left part exports normally, right chevron (▾) reveals a dropdown with "Export printer-friendly PNG". Dropdown dismisses on mouseleave.
• Printer-friendly export — sets printerFriendly = true on the card, waits a frame, captures PNG with _print suffix, then resets. No separate component needed.
• Printer-friendly visual overrides — white card background, gray image area, dark table headers become transparent, all text/SVG fills black, runemark badges white with black border, zebra-stripe tints removed.
• Export frame fix: .label-col span — in printer-friendly mode the dark header background is removed, exposing UA default borders on the inline <span> elements inside .label-col (covered only by the .card * wildcard which dom-to-image-more ignores). Fix: added border: 0; outline: none; background: transparent directly to a .label-col span CSS rule.
• All printer-friendly dividers use box-shadow — consistent with the existing pattern; border-* properties are dropped by dom-to-image-more.

Damage brackets table improvements

• Header label added — left column header now reads "* DAMAGE POINTS ALLOCATED".
• Fixed column widths — MOVE and DAMAGE stat columns use flex: 0 0 100px; wide column uses flex: 1; consistent across header and all data rows.
• Alternating row colors — start on the first data row (i % 2 === 0), matching the weapons table style; suppressed in printer-friendly export.
• Monster damage * → */* — both card preview and disabled form field updated to reflect the damage fraction format.

💡 Key Decisions

Export fidelity — additional learnings

📁 Files Changed

✓ What Was Built

Image & Mask

• Image area inset — dark area sits with 16px margins on top/left/right, parchment background visible around it.
• SVG mask on image section — static/image-mask-1-cropped.svg applied as mask-image on .image-section; torn/rough edges on all four sides. The mask stretches with the div (mask-size: 100% 100%); image section layout is completely unchanged.
• Runemark directory renamed — src/lib/runemarks/weapons/ → src/lib/runemarks/svg/; all imports updated.
• Dead asset cleanup — 5 orphaned files removed: static/image-area.svg, two old mask SVGs, factions-chaos-everchosen.svg, factions-death-legions-of-nagash.svg, factions-chaos-bladeborn-dread-pagent.svg (misspelled duplicate).
• Image height is flexible — .image-section uses flex: 1 1 0; parchment is flex: 0 0 auto so the image grows/shrinks with content.

Table & Stats Polish

• Table headers — SVG icons replaced with text labels: BASE SIZE, POINTS VALUE, M, T, W / (empty), RNG, A, S, DMG.
• Header text style — Warcry font, weight 400, parchment texture via background-clip: text.
• Table borders — outer border 1px, all inner column/row borders removed.
• Row height — reduced from 64px to 55px across stats and weapons boxes.
• Table width — changed from fixed 500px to width: 100%, matching parchment padding (38px each side).
• Auto-fit text — fittext Svelte action on all value cells; shrinks font in 0.5px steps on content change via requestAnimationFrame.
• Cell padding — 10px horizontal padding on stat/weapon value cells.
• Damage bracket columns — all three columns equally distributed (flex: 1), form inputs also equal-width (grid-cols-3).

Weapons & Runemarks

• Weapon type field — added name to Weapon interface; form shows Type as first column.
• Form field order — characteristics: Base Size → Points → Move → Toughness → Wounds; weapons: Type → RNG → A → S → DMG.
• Fighter name wraps — long names wrap to multiple lines; image area shrinks to absorb extra height.
• Download naming — exported PNG named slug_YYYY-MM-DD_HH-MM.png.
• Checkbox grouping — Named Fighter and Monster checkboxes grouped together between Fighter Name and Model Image in the form.
• Weapon type select — Type column is now a <select> with 16 options (Axe → Unarmed); unselected shows em dash (—) on card.
• Show Runemarks toggle — checkbox swaps M/T/W and RNG/A/S/DMG column headers and weapon type cells between text labels and SVG runemarks.
• Characteristic runemarks — 7 SVGs (move, toughness, wounds, range, attacks, strength, damage) inlined via ?raw import; white fill applied via CSS.
• Weapon runemarks — 16 SVGs inlined; displayed in weapon type cell when runemark mode active.
• SVG optimisation — all runemarks run through SVGO (5–22% reduction); moved from static/ to src/lib/runemarks/ so Vite bundles them — no separate HTTP requests, reliable export.

Faction Hierarchy

• Grand Alliance circles — 4 SVGs (Agents of Chaos / Bringers of Death / Harbingers of Destruction / Sentinels of Order); top-left circle on card; select in form.
• Faction circles — 123 faction SVGs loaded; displayed as middle and bottom circles in the left runemark column.
• Runemark circles — 76px (10mm at 2×), #5a0a14 background, 1px white border; card-level positioning so they never clip.
• 3-level runemark hierarchy — new src/lib/runemarks/hierarchy.ts; explicit Alliance → Faction → Subfaction/Bladeborn mapping for all four alliances; all 21 Sentinels of Order factions wired with correct subfaction/Bladeborn lists (17 new SVG imports); 3 new Order factions (Ruination Chamber, Twistweald, Ydrilan Riverblades) and 5 missing subfaction SVGs (The Knives of the Crone, Jaws of Itzl, Gladitorium Fighters, The Emberwatch, Heralds of Kurnoth) tracked as svg: null; labels corrected: "Lumineth Realm-lords", "Thunderstrike Chamber", "Vanguard Auxiliary Chamber"; all three levels sorted A→Z.
• Placeholder SVG — filled X badge shown when an entry is selected but has no SVG yet.
• Cascading selects — Faction disabled until Alliance chosen; Subfaction/Bladeborn disabled until Faction chosen; each level resets children on change.
• index.ts simplified — old import.meta.glob faction logic removed; re-exports from hierarchy.ts plus weapon/characteristic exports.

Card Layout & UX

• Image repositioning — Position X / Y sliders via object-position; Zoom slider via transform: scale() anchored to position origin.
• Gradient removed — .img-fade overlay deleted.
• Monster bottom spacing fixed — removed max-height: 257px cap; image now shrinks naturally so bottom padding is always consistent.
• Viewport-fit layout — outer container is h-screen; card scales to fit via reactive cardScale derived from window.innerHeight; form scrolls independently.
• Chevrons inline — named fighter chevrons moved to flow inline next to text (removed absolute positioning).
• Damage bracket header — "DMG" renamed to "DAMAGE".
• Form field labels — Points Value, Move (M), Toughness (T), Wounds (W), Range (RNG), Attacks (A), Strength (S), Damage (DMG), Wounds Taken.
• Form section order — Fighter → Checkboxes → Model Image → Runemarks → Characteristics → Weapons → Damage Brackets.

Export fidelity (second session)

• Model image now exports — mask-image: url('/...') in CSS is not resolved by dom-to-image-more; inlined the SVG mask as a UTF-8 data URL via Vite ?raw import (src/lib/image-mask.svg) and applied as an inline style attribute.
• Fighter name frame eliminated — added explicit border: 0; outline: none; background: transparent directly to .fighter-name and .chevron CSS rules.
• All table cell frames eliminated — added explicit border: 0; outline: none; background: transparent to every transparent cell class: .parchment, .stats-values, .stat-col, .stat-val, .weapon-row, .wcol, .weapon-val, .weapon-art-placeholder, .dcol, .dcol-wide.
• overflow: hidden removed from layout containers — removed from .stats-box, .weapons-box, .damage-box, .image-section, .runemark-badge, .stat-col, .stat-val, .wcol, .weapon-val, .dcol. Rounded corners preserved by applying border-radius: 14px 14px 0 0 to header rows and 0 0 14px 14px to last value rows.

💡 Key Decisions

Export fidelity — key learnings

⏳ Still Pending

📁 Files Changed

✓ What Was Built

Fonts & Texture

• Added RodchenkoCTT.ttf and OldrichiumITCStdLight.otf to static/fonts/ and declared them in app.css
• Applied background.jpg parchment texture to .card (full-card coverage); parchment section and table value rows are now transparent so the texture shows through

Image Mask

• Added image-area.svg (organic/torn-edge shape) as a CSS mask-image on .image-section; replaced the old solid dark background
• Iterated on mask sizing and position to hide the organic top edge above the card boundary (mask-position: 0 -40px)

Bug Fixes & Cleanup

• Fixed SSR crash (Node is not defined) in /fighter/+page.svelte by switching dom-to-image-more to a dynamic import() inside exportCard()
• Removed redundant CSS: .weapon-art-col (duplicated .wcol), .damage-val (duplicated .dcol-stat), no-op border-right: none, default background: transparent declarations, border-radius: 0, gap: 0

Fighter Card Polish

• Fighter name changed to align-items: center; justify-content: center for vertical/horizontal centering (optical balance still being tuned)
• Damage bracket rows locked to 5 fixed rows — removed Add Row and Remove Row (×) buttons and their handlers from FighterForm.svelte
• Monster field locking: when isMonster is true, Move (characteristics) and Damage (both weapons) render as disabled inputs showing * in the form; card visual also shows * for those cells. Stored values are preserved so unchecking monster restores them.
• Base Size default changed from ø 32 to 32 (no ø prefix)

💡 Key Decisions

⏳ Still Pending

📁 Files Changed

✓ What Was Built

💡 Key Decisions

🃏 Card Types (v9 Reference)

Fighter Card

• Portrait ~830×1300 ratio (approx 0.638 w:h)
• Top ~55%: full-bleed model photo, runemarks top-left and top-right (up to 3 each)
• Torn/jagged paper edge divider
• Bottom ~45%: parchment — fighter name, characteristics table (Base Size, Points, Move, Toughness, Wounds), weapons table (icon, Range, Attacks, Strength, Damage/Crit)
• Optional monster damage bracket table

Text Card (also Heroic Trait / Reaction)

• Same portrait ratio
• Top ~28%: dark maroon header — runemarks row (1–4), activation badge (DOUBLE/TRIPLE/QUAD), card-type label
• Torn paper divider
• Bottom ~72%: parchment — card name, optional italic flavor text, body text

Typography

📐 Sizing & Spacing — The Long Road

Most of this session was an iterative, sometimes messy process of extracting exact measurements from the v9 SVG reference and translating them into a faithful CSS layout. What looked simple turned into a long back-and-forth — with the user providing physical measurements in mm, then verifying by screenshot, then refining again.

Physical dimensions and the 2× scale

The card is 76×121mm physical. We render at 2× screen scale to get crisp PNG exports at double resolution. Conversion factor: 1mm = 7.559px (2 × 96 / 25.4). All measurements were converted once and kept as fixed pixel values — no CSS mm units, which behave unpredictably in browsers.

Layout structure

The card is a flex-direction: column container. The image section has a fixed height (flex: 0 0 397px); the parchment fills the rest (flex: 1). Inside the parchment, the fighter name uses flex: 1 to fill the space above the tables, which are anchored at the bottom with flex-shrink: 0.

The tables are 5 columns × 100px = 500px wide (66mm), centred within the 574px card by the parchment padding.

Monster layout

When isMonster: true, the image section shrinks to 212px and a damage bracket table appends below the weapons box. The damage table is full-width (no border-radius, black borders, transparent background) and capped at 5 data rows to prevent overflow. The monster image height was reduced from the spec'd 37.9mm to ~28mm after overflow was observed in practice.

Why it took so long

Early attempts used percentage-based or approximate sizes — the card never matched the reference. Progress only clicked once every dimension was derived from the physical mm spec and consistently applied. Screenshots revealed mismatches multiple times before the spacing felt right. The table column and row sizes in particular required several passes: equal-width columns were not obvious from the SVG, and the gap between the image and first table was initially left unspecified then re-derived from the reference.

⚙ Node Version Note

System default is Node v16 (Laravel Herd). Project requires v22+. Herd has v22.22.0 at:

~/Library/Application Support/Herd/config/nvm/versions/node/v22.22.0/bin

Use make dev which sets PATH automatically, or switch in Herd's UI.

⚡ State / Reactivity Pattern

Page creates let data = $state<FighterCardData>({...}) and passes the reactive proxy to both FighterForm and FighterCard as a prop. The form mutates properties directly (data.name = x, weapon.range = x) — Svelte 5 deep reactivity propagates all mutations back to the card in real time. No stores, no $bindable needed.

⏳ Still Pending