Add re-order, spotlight/focus, and auto-position-snapshots features

- HTML5 drag-and-drop reordering of strip participants (per-GM flag)
- Shift+click toggles spotlight focus on a participant (gold ring indicator)
- Escape exits focus mode
- Auto-save strip position on drag end + every 30s with viewport validation
- Reset strip position button in Director's Board
- French locale strings for reset button
This commit is contained in:
2026-05-27 11:44:24 +02:00
parent 816b7951fb
commit 9e80c2c028
44 changed files with 1770 additions and 11 deletions
+32
View File
@@ -136,6 +136,17 @@
}
}
// ── Small tile shell sizing (all S layouts) ─────────────────────────────────
// Base .sp-avatar__shell is 60×60 fixed — override to follow --sp-widget-width
.scrying-pool.scrying-pool-strip.sp-layout-vertical-sm,
.scrying-pool.scrying-pool-strip.sp-layout-horizontal-sm,
.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm {
.sp-participant-avatar .sp-avatar__shell {
width: calc(var(--sp-widget-width) - 12px);
height: calc(var(--sp-widget-width) - 12px);
}
}
// ── Toolbar: grip + toggle + DB + close on one line ─────────────────────────
// All chrome lives here; hidden at rest, revealed on strip hover.
.sp-strip__toolbar {
@@ -501,6 +512,27 @@
}
}
// ============================================================
// Spotlight focus state — gold ring (uses urgency-director token)
// ============================================================
.sp-participant-avatar.sp-state-focused {
.sp-avatar__shell::after {
box-shadow: inset 0 0 0 2px var(--sp-urgency-director);
}
}
// ============================================================
// Drag-and-drop reorder feedback
// ============================================================
.sp-strip__participant-item.sp-dragging {
opacity: 0.3;
}
.sp-strip__participant-item.sp-drag-over {
box-shadow: inset 0 0 0 2px var(--sp-urgency-director);
border-radius: 4px;
}
// ============================================================
// StateRing animations — gated under no-preference (AC-16)
// ============================================================