@tastic/hud 0.14.2 → 0.15.0

package/src/TriggerGauge.tsx

@@ -5,79 +5,79 @@ import { StyleSheet, View } from 'react-native'
 import { Easing, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated'
 
 export interface TriggerGaugeProps {
-  // One dash per option — a single-select section's arc (grid size, speed, trail speed, CPU
+  // One dash per option - a single-select section's arc (grid size, speed, trail speed, CPU
   // difficulty) lights exactly one dash at the selected index; a multi-select section's (powerups)
-  // lights one dash per enabled option, independently. Fewer than 2 renders nothing — a one-option
+  // lights one dash per enabled option, independently. Fewer than 2 renders nothing - a one-option
   // "choice" has nothing for an arc to distinguish.
   segments: number
   litIndices: number[]
   size: number
   accentColor: string
   mutedColor: string
-  // Each dash's own arc length in px (at this gauge's radius) — how much of the arc it visually
-  // covers. Omit to auto-size (see DASH_GAP_PX below) so it reads as a true dashed line — each dash
+  // Each dash's own arc length in px (at this gauge's radius) - how much of the arc it visually
+  // covers. Omit to auto-size (see DASH_GAP_PX below) so it reads as a true dashed line - each dash
   // fills its own slot along the arc minus a small constant gap, regardless of segment count. Pass
   // an explicit px value to override that with a fixed size instead (won't auto-adjust for segment
   // count, so a large fixed value can visually merge adjacent dashes on a high-segment gauge like
-  // powerups — unlike the old straight-bar version, an oversized arc here just gets long, not
+  // powerups - unlike the old straight-bar version, an oversized arc here just gets long, not
   // distorted, since it's a real curve rather than an approximation of one).
   dashWidth?: number
   // Where the arc begins, in degrees clockwise from 12 o'clock (matching Skia's own angle
-  // convention once shifted — see the -90° conversion below). Traversal from startDeg to endDeg is
+  // convention once shifted - see the -90° conversion below). Traversal from startDeg to endDeg is
   // always clockwise, so which of the two possible arcs (the short way or the long way around) you
-  // get depends on how far clockwise endDeg sits from startDeg — swap the two values to flip
-  // direction. Defaults to 6 o'clock — see endDeg for why that default is a full circle rather than
+  // get depends on how far clockwise endDeg sits from startDeg - swap the two values to flip
+  // direction. Defaults to 6 o'clock - see endDeg for why that default is a full circle rather than
   // any particular arc.
   startDeg?: number
-  // Where the arc ends — see startDeg. Defaults to whatever startDeg resolved to (its own explicit
-  // value if you passed one, otherwise 6 o'clock), not some other fixed clock position — so passing
+  // Where the arc ends - see startDeg. Defaults to whatever startDeg resolved to (its own explicit
+  // value if you passed one, otherwise 6 o'clock), not some other fixed clock position - so passing
   // only startDeg still gets you a full circle, just seamed wherever you started it, rather than an
   // arbitrary partial arc between your startDeg and an unrelated default endDeg. Pass a distinct
-  // endDeg to actually clamp the sweep and carve out a gap — e.g. 210 (7 o'clock) with endDeg 150
+  // endDeg to actually clamp the sweep and carve out a gap - e.g. 210 (7 o'clock) with endDeg 150
   // (5 o'clock) is a 300° arc, the long way over the top through 12, leaving a 60° gap under the
   // bottom through 6. Whenever the span is carved down from a full circle like that, it's divided
-  // into exactly `segments` equal shares (see the render below) — a 2-way split gets two equal
+  // into exactly `segments` equal shares (see the render below) - a 2-way split gets two equal
   // shares meeting at the sweep's midpoint, a 3-way split gets three, and so on for any segment
-  // count — every option gets a true, equal fraction of the visible arc. Segment order follows the
+  // count - every option gets a true, equal fraction of the visible arc. Segment order follows the
   // same clockwise sweep, so index 0 sits nearest startDeg and the last index nearest endDeg.
   endDeg?: number
 }
 
-// Stroke width for an unlit dash — thin, so it reads as a faint outline rather than competing with
+// Stroke width for an unlit dash - thin, so it reads as a faint outline rather than competing with
 // the lit one for attention.
 const UNLIT_THICKNESS = 3
-// Stroke width for a lit dash — noticeably thicker than UNLIT_THICKNESS, so the active option looks
+// Stroke width for a lit dash - noticeably thicker than UNLIT_THICKNESS, so the active option looks
 // like it's actually "filled in" rather than just recolored.
 const LIT_THICKNESS = 7
-// Gap between consecutive dashes when auto-sizing (dashWidth omitted) — constant regardless of
+// Gap between consecutive dashes when auto-sizing (dashWidth omitted) - constant regardless of
 // segment count, which is what keeps the arc reading as one dashed line instead of a solid merged
-// ring (many segments) — sized generously so unlit and lit dashes read as clearly separate marks
+// ring (many segments) - sized generously so unlit and lit dashes read as clearly separate marks
 // rather than blending into one ring at a glance.
 const DASH_GAP_PX = 9
-// Gap between the trigger's own icon circle and the arc — small, so the dashes sit close in around
+// Gap between the trigger's own icon circle and the arc - small, so the dashes sit close in around
 // the icon rather than floating well outside its silhouette.
 const ARC_GAP = 2
-// Baseline for startDeg when the caller passes neither prop at all — arbitrary in principle (any
+// Baseline for startDeg when the caller passes neither prop at all - arbitrary in principle (any
 // value gives a full circle once endDeg defaults to match it, see the component signature below),
 // picked as 6 o'clock so the seam sits tucked underneath the trigger rather than across its top.
 const DEFAULT_START_DEG = 180 // 6 o'clock
 // Floor so a many-segment gauge (or a very small dashWidth override) never collapses a dash's own
 // sweep down to something too thin to register as a stroke.
 const MIN_DASH_ANGLE_DEG = 4
-// One-shot "gauge waking up" reveal on mount — each dash sweeps in from nothing rather than popping
+// One-shot "gauge waking up" reveal on mount - each dash sweeps in from nothing rather than popping
 // straight into existence, staggered by index so the reveal visibly travels along the arc instead of
 // every dash appearing at once. Purely cosmetic, and runs once per mount only (see the effect below).
 const MOUNT_DURATION_MS = 450
 const MOUNT_STAGGER_MS = 40
-// Selection-change transition — separate from the one-shot mount reveal above, and re-triggered
+// Selection-change transition - separate from the one-shot mount reveal above, and re-triggered
 // every time litIndices actually changes after that. Quick and snappy rather than a slow drift, so
 // it reads as "the gauge just updated" without making the picker feel sluggish to use.
 const SELECTION_TRANSITION_DURATION_MS = 260
 
-// Arc of dashes drawn around a SectionedDropdown trigger, purely decorative-informational — the
+// Arc of dashes drawn around a SectionedDropdown trigger, purely decorative-informational - the
 // trigger's own icon stays exactly as it is (see SectionedDropdown's triggerIcon), this just frames
 // it with an at-a-glance read of *which* option is active without opening the popover. Each dash is
-// a real Skia arc segment (Path.addArc), not a straight bar approximating one — a straight bar wide
+// a real Skia arc segment (Path.addArc), not a straight bar approximating one - a straight bar wide
 // enough to look bold started visibly crossing its neighbors on a sparse (e.g. 3-option) gauge,
 // since a chord that long diverges a lot from the circle it's meant to trace; an actual arc stays on
 // the circle at any width. Skia measures angles clockwise from 3 o'clock, so a center angle here
@@ -85,66 +85,66 @@ const SELECTION_TRANSITION_DURATION_MS = 260
 // addArc.
 export function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }: TriggerGaugeProps) {
   // Every hook below runs unconditionally, ahead of the segments<2 bail-out further down (rules of
-  // hooks) — harmless when it fires, since the resulting paths just never get read.
+  // hooks) - harmless when it fires, since the resulting paths just never get read.
   const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS
   const mountProgress = useSharedValue(0)
   useLayoutEffect(() => {
     mountProgress.value = withTiming(1, { duration: totalDurationMs, easing: Easing.out(Easing.cubic) })
-    // Runs once per mount only — a "the gauge just appeared" cue, not tied to which option is
+    // Runs once per mount only - a "the gauge just appeared" cue, not tied to which option is
     // selected, so this deliberately ignores changes to props that follow.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Clockwise distance from startDeg to endDeg — e.g. 210 (7 o'clock) to 150 (5 o'clock) is 300°,
+  // Clockwise distance from startDeg to endDeg - e.g. 210 (7 o'clock) to 150 (5 o'clock) is 300°,
   // the long way over the top, not the 60° short way under the bottom that a naive `endDeg -
   // startDeg` would give as a negative number whenever endDeg is numerically smaller. Divided evenly
-  // across every segment (not every *gap* between segments — see step below) so each option gets a
+  // across every segment (not every *gap* between segments - see step below) so each option gets a
   // true equal fraction of the visible arc regardless of segment count, which is what actually keeps
   // a 2-segment gauge from reading differently proportioned than a 3- or 4-segment one. The %360
   // double-mod can't distinguish "0° apart" from "360° apart" (both reduce to 0), and a 0° sweep is
-  // never a useful gauge — every dash would collapse onto the same point — so a 0 result is treated
+  // never a useful gauge - every dash would collapse onto the same point - so a 0 result is treated
   // as the far more likely intent, a full unbroken circle, rather than a degenerate one.
   const rawSweepDeg = (((endDeg - startDeg) % 360) + 360) % 360
   const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg
-  // Each segment's own angular share of totalSweepDeg — doubles as both "this dash's width before
+  // Each segment's own angular share of totalSweepDeg - doubles as both "this dash's width before
   // the gap is subtracted" (see autoDashAngleDeg below) and "the spacing between consecutive
   // centers" (see centerDeg), since a set of equal, contiguous shares naturally has both properties
   // at once.
   const step = segments > 0 ? totalSweepDeg / segments : 0
   // Segment i's own center sits half a share clockwise from startDeg, then a further whole share per
-  // preceding index — i.e. the middle of the i-th equal slice, not at either of its edges. Segment
+  // preceding index - i.e. the middle of the i-th equal slice, not at either of its edges. Segment
   // 0 is the first slice *after* startDeg (never sits exactly on startDeg itself), and the last
-  // segment's slice ends exactly on endDeg. Index increases clockwise — left to right across the
-  // top — matching normal reading order.
+  // segment's slice ends exactly on endDeg. Index increases clockwise - left to right across the
+  // top - matching normal reading order.
   const centerDeg = useCallback((i: number) => startDeg + (i + 0.5) * step, [startDeg, step])
   // A single-select trigger (grid size, speed, trail speed, CPU difficulty) always has exactly one
-  // lit index — a multi-select one (powerups) can have any count, including exactly 1, so this is a
+  // lit index - a multi-select one (powerups) can have any count, including exactly 1, so this is a
   // structural property of which *kind* of section this gauge belongs to, not something that flips
   // render to render in practice.
   const singleSelect = litIndices.length === 1
 
-  // The lit arc's own center angle, for the singleSelect case — tracked continuously rather than
+  // The lit arc's own center angle, for the singleSelect case - tracked continuously rather than
   // computed fresh from a "from index" + 0..1 progress pair, specifically so a rapid follow-up
   // selection can *retarget* an already-in-flight rotation instead of snapping to a fixed start
   // angle first. withTiming does this automatically when you assign a new target to a shared value
   // that's already mid-animation: it interpolates from wherever the value actually is right now, not
   // from the animation's original start point. Resetting the value before restarting the animation
-  // (this file's own previous approach) throws that away — every follow-up transition would snap the
+  // (this file's own previous approach) throws that away - every follow-up transition would snap the
   // arc to the *previous* transition's fixed departure angle before rotating on, which read as a
   // glitch/teleport on anything but the very first change. Initial value is set directly, before any
-  // animation exists, so the very first mount doesn't rotate in from nowhere — see the mount reveal
+  // animation exists, so the very first mount doesn't rotate in from nowhere - see the mount reveal
   // (sweep width, not angle) above for that.
   const angleDeg = useSharedValue(centerDeg(litIndices[0] ?? 0))
 
-  // Selection-change transition state, used only for the multi-select (non-singleSelect) case now —
+  // Selection-change transition state, used only for the multi-select (non-singleSelect) case now -
   // singleSelect handles its own transition via angleDeg above. `transitionFrom` is whatever was lit
-  // just before the most recent change — detected by comparing litIndicesKey against lastKeyRef,
+  // just before the most recent change - detected by comparing litIndicesKey against lastKeyRef,
   // which trails one change behind (see lastIndicesRef.current below). This lives in
-  // useLayoutEffect rather than a plain useEffect specifically so it fires — and, since
-  // setTransitionFrom during it triggers a synchronous re-render, *resolves* — before the browser
+  // useLayoutEffect rather than a plain useEffect specifically so it fires - and, since
+  // setTransitionFrom during it triggers a synchronous re-render, *resolves* - before the browser
   // ever paints the frame it was scheduled from: a plain useEffect can run after paint, letting React
   // commit one real frame with the new litIndices against the still-stale transitionFrom/
-  // selectionProgress first, which reads as a flash. Refs, not state, for the tracking itself —
+  // selectionProgress first, which reads as a flash. Refs, not state, for the tracking itself -
   // react-hooks/refs correctly flags reading or writing a ref during the render body (a discarded/
   // replayed render can leave a ref mutated without ever committing, corrupting this tracking in a
   // way that reproduces intermittently rather than every time), so this all needs to live inside an
@@ -173,7 +173,7 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
 
   const radius = size / 2 + ARC_GAP
   // step is always >= 0 now (totalSweepDeg's double-mod guarantees it, unlike the old signed
-  // sweepDeg this replaced), so this no longer needs Math.abs — kept as its own name rather than
+  // sweepDeg this replaced), so this no longer needs Math.abs - kept as its own name rather than
   // reusing `step` directly since this one specifically means "before the gap is subtracted."
   const slotDeg = step
   // A px gap converted to degrees at this radius (arc length = radius * angleInRadians), so the gap
@@ -182,7 +182,7 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
   // No upper clamp: each dash fills its own equal slot minus the constant gap, whatever that share
   // works out to be, so a 2-segment gauge tiles as fully as a 4-segment one instead of stopping at
   // some fixed width and leaving the rest of a large share visibly empty (that mismatch is exactly
-  // what a fixed ceiling used to cause — same segment count, same full circle, but only some of
+  // what a fixed ceiling used to cause - same segment count, same full circle, but only some of
   // them read as "divided all the way around" and others didn't).
   const autoDashAngleDeg = Math.max(MIN_DASH_ANGLE_DEG, slotDeg - gapDeg)
   const dashAngleDeg = dashWidth != null ? Math.max(MIN_DASH_ANGLE_DEG, (dashWidth / radius) * (180 / Math.PI)) : autoDashAngleDeg
@@ -193,11 +193,11 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
   const canvasSize = diameter + LIT_THICKNESS
   const oval = Skia.XYWHRect(LIT_THICKNESS / 2, LIT_THICKNESS / 2, diameter, diameter)
 
-  // One combined path per style group (lit vs unlit) rather than one path per dash — a Path strokes
+  // One combined path per style group (lit vs unlit) rather than one path per dash - a Path strokes
   // as a single color/width, so dashes sharing a style share a path; this also keeps the number of
   // useDerivedValue calls fixed at two regardless of segment count, which a per-dash hook would
   // violate (hook counts can't vary across renders). Always reflects the FINAL/target litIndices,
-  // dim — including whatever's mid-"leaving" in litPath below, so the dim base is already sitting
+  // dim - including whatever's mid-"leaving" in litPath below, so the dim base is already sitting
   // there the instant a lit dash starts shrinking off of it, rather than popping in only once the
   // shrink finishes.
   const unlitPath = useDerivedValue(() => {
@@ -212,13 +212,13 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
       }
       const sweep = dashAngleDeg * local
       if (sweep <= 0) continue
-      // Recomputed inline (not calling the outer centerDeg helper) — this runs inside a
+      // Recomputed inline (not calling the outer centerDeg helper) - this runs inside a
       // useDerivedValue worklet, and the helper above is a plain JS closure, not itself workletized.
       const dashCenterDeg = startDeg + (i + 0.5) * step
       path.addArc(oval, dashCenterDeg - 90 - sweep / 2, sweep)
     }
     return path
-    // litIndicesKey, not litIndices — the array itself is a brand-new reference on every render
+    // litIndicesKey, not litIndices - the array itself is a brand-new reference on every render
     // (including ones triggered by a totally unrelated sibling gauge or settings field), which would
     // otherwise force this worklet to rebuild on every such render. The stable string key only
     // actually changes when the *content* does, so an unrelated re-render leaves the already-running
@@ -227,11 +227,11 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
 
   const litPath = useDerivedValue(() => {
     const path = Skia.Path.Make()
-    // The common case — a single-select trigger swapping from one tier to another — is just one
+    // The common case - a single-select trigger swapping from one tier to another - is just one
     // full-width arc sitting at angleDeg's current value, which useLayoutEffect above retargets
     // (never resets) on every change; this alone gives a real rotating handoff, including smoothly
     // redirecting mid-rotation if another change interrupts it. Only reached once the mount reveal
-    // is done — before that, the sweep-width stagger below owns the reveal instead.
+    // is done - before that, the sweep-width stagger below owns the reveal instead.
     if (mountProgress.value >= 1 && singleSelect) {
       path.addArc(oval, angleDeg.value - 90 - dashAngleDeg / 2, dashAngleDeg)
       return path
@@ -248,21 +248,21 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs
         local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1)
       } else if (isLitNow === wasLit) {
-        local = 1 // steady — lit before and after (or the mount-only branch above already handled unlit)
+        local = 1 // steady - lit before and after (or the mount-only branch above already handled unlit)
       } else if (isLitNow) {
-        local = selectionProgress.value // entering — grows in
+        local = selectionProgress.value // entering - grows in
       } else {
-        local = 1 - selectionProgress.value // leaving — shrinks away
+        local = 1 - selectionProgress.value // leaving - shrinks away
       }
       const sweep = dashAngleDeg * local
       if (sweep <= 0) continue
-      // Recomputed inline (not calling the outer centerDeg helper) — this runs inside a
+      // Recomputed inline (not calling the outer centerDeg helper) - this runs inside a
       // useDerivedValue worklet, and the helper above is a plain JS closure, not itself workletized.
       const dashCenterDeg = startDeg + (i + 0.5) * step
       path.addArc(oval, dashCenterDeg - 90 - sweep / 2, sweep)
     }
     return path
-    // litIndicesKey/transitionFromKey, not the arrays themselves — see unlitPath's identical comment.
+    // litIndicesKey/transitionFromKey, not the arrays themselves - see unlitPath's identical comment.
   }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height])
 
   if (segments < 2) return null

package/src/TriggerGaugeHost.tsx

@@ -2,12 +2,12 @@ import { SkiaGate } from './SkiaGate'
 import { TriggerGaugeProps } from './TriggerGauge'
 
 // TriggerGauge.tsx's `Skia` import binds to global.CanvasKit at module-evaluation time, which on web
-// only exists once CanvasKit's WASM fetch resolves — a plain `import { TriggerGauge } from
+// only exists once CanvasKit's WASM fetch resolves - a plain `import { TriggerGauge } from
 // './TriggerGauge'` at the top of this file would already have evaluated that binding, against a
 // not-yet-loaded, undefined CanvasKit, before anything in a consuming app renders at all, since
 // bundlers evaluate the whole static import graph up front. This file therefore never imports
 // TriggerGauge itself except as a type (erased at compile time, carrying no runtime module
-// reference) — getTriggerGauge below, hoisted to module scope so its identity stays stable across
+// reference) - getTriggerGauge below, hoisted to module scope so its identity stays stable across
 // renders (see SkiaGate's own comment on why that matters), is what actually defers the real import
 // to runtime. No explicit loadSkiaWeb() call here on web: SkiaGate.web.tsx (WithSkiaWeb) already
 // gates its own mount behind CanvasKit being ready, and on native there's nothing to wait on at all.

package/src/chrome/index.ts

@@ -0,0 +1,22 @@
+// The fleet-chrome entry point (`@tastic/hud/chrome`): the shared dialogs, stats screen pieces, corner
+// buttons and style tokens, reachable without the main barrel, for an app that has none of its heavy
+// peers. Hangman is the reason it exists: it has @tastic/core, @rific/updater and the Paper stack, but
+// no Skia, no @tastic/profile and no @tastic/split-screen. Everything reachable from this file must stay
+// free of those three and of the main barrel; @tastic/achievements may appear only as `import type`.
+// AchievementUnlockList is left out on purpose because it value-imports @tastic/profile's ProfileChip.
+// src/__tests__/chromeImports.test.ts walks the real import graph from here and enforces all of it.
+export { AchievementCatalogSection } from '../AchievementCatalogSection'
+export { AchievementRow, LOCKED_BADGE_COLOR } from '../AchievementRow'
+export { ActivityStatSection } from '../ActivityStatSection'
+export { BaseSettingsDialog, type BaseSettingsDialogProps } from '../BaseSettingsDialog'
+export { BaseStatsScreen } from '../BaseStatsScreen'
+export { ConfirmDialog, type ConfirmDialogProps } from '../ConfirmDialog'
+export { ContentGutter } from '../ContentGutter'
+export { CornerActionButtons } from '../CornerActionButtons'
+export { MONO_FONT } from '../fonts'
+export { getOverlayCardColors, overlayActionStyles, type OverlayCardColors, overlayStyles } from '../overlayCard'
+export { RotatedFrame, type RotatedFrameProps } from '../RotatedFrame'
+export { getStaggeredWordDuration, StaggeredWord, type StaggeredWordProps } from '../StaggeredWord'
+export { StatRow } from '../StatRow'
+export { StatSection } from '../StatSection'
+export { UpdateDialog, type UpdateDialogProps } from '../UpdateDialog'

package/src/fonts.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native'
 
-// System monospace — every component here defaults its labels to this unless a consumer passes
+// System monospace - every component here defaults its labels to this unless a consumer passes
 // its own `labelFontFamily`, so a game with its own branded/registered font can override it
 // without this package needing to know that font exists.
 export const MONO_FONT = Platform.select({ ios: 'Menlo', android: 'monospace', default: 'monospace' })

package/src/guide/DirectionKeysHint.tsx

@@ -12,7 +12,7 @@ export interface DirectionKeyLabels {
 export type DirectionKeysAxis = 'both' | 'vertical'
 
 export interface DirectionKeysHintProps {
-  // What's printed on each cap — e.g. { up: 'W', left: 'A', down: 'S', right: 'D' }. Omit for the
+  // What's printed on each cap - e.g. { up: 'W', left: 'A', down: 'S', right: 'D' }. Omit for the
   // arrow keys themselves, drawn as arrow icons (so does any single cap left out). Pass whatever the
   // seat's own key scheme actually is, not a guess: the fleet games let each seat pick WASD, arrows,
   // IJKL and so on.
@@ -20,7 +20,7 @@ export interface DirectionKeysHintProps {
   // 'both' (default) draws the four-key inverted T. 'vertical' draws only up above down, for a game
   // whose controls only ever read those two (Pong's paddles).
   axis?: DirectionKeysAxis
-  // Defaults to the theme's own primary — i.e. player 1's seat color in the fleet games.
+  // Defaults to the theme's own primary - i.e. player 1's seat color in the fleet games.
   color?: string
 }
 
@@ -42,7 +42,7 @@ function KeyCap({ label, icon, color }: { label?: string; icon: string; color: s
   )
 }
 
-// Key caps in the inverted-T every keyboard player already knows (or just up over down, see `axis`) —
+// Key caps in the inverted-T every keyboard player already knows (or just up over down, see `axis`) -
 // the desktop counterpart to SwipeHint for the "how do I steer" card, since a desktop browser steers by
 // key, not by swipe. Plain Views, no animation, so there's nothing for reduced motion to switch off.
 export function DirectionKeysHint({ labels, axis = 'both', color }: DirectionKeysHintProps) {

package/src/guide/GuideProvider.tsx

@@ -5,19 +5,19 @@ import type { GuideRotation, GuideStep } from './types'
 
 interface GuideContextValue {
   isOpen: boolean
-  // Opens the guide unconditionally — the Settings "How to play" row's whole job. Never persists
+  // Opens the guide unconditionally - the Settings "How to play" row's whole job. Never persists
   // anything on its own: only finishing or skipping does, and only while the player hasn't already
   // seen this version.
   open: () => void
   close: () => void
-  // Opens it once per session, and only if this player hasn't seen `currentVersion` yet — see
+  // Opens it once per session, and only if this player hasn't seen `currentVersion` yet - see
   // useAutoShowGuide.
   requestAutoShow: () => void
 }
 
 const noop = () => {}
 
-// A default that does nothing rather than throwing when there's no provider above — an app's own
+// A default that does nothing rather than throwing when there's no provider above - an app's own
 // existing tests render its Settings dialog or Home screen without one, and a "How to play" row that
 // silently does nothing in that harness is a far better failure than every such test breaking.
 const GuideContext = createContext<GuideContextValue>({ isOpen: false, open: noop, close: noop, requestAutoShow: noop })
@@ -35,13 +35,13 @@ export interface GuideProviderProps {
   children?: ReactNode
 }
 
-// Mounted once at the app root, next to <UpdateDialog /> — the fleet's existing "self-presenting
-// app-level dialog" seat — so any screen can open it through useGuide() without prop-drilling, and
+// Mounted once at the app root, next to <UpdateDialog /> - the fleet's existing "self-presenting
+// app-level dialog" seat - so any screen can open it through useGuide() without prop-drilling, and
 // the Portal it renders sits above every route. Inside PersistGate, so `seenVersion` is already the
 // rehydrated value by the time this first renders.
 export function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, children }: GuideProviderProps) {
   const [isOpen, setIsOpen] = useState(false)
-  // Once per session, not once per Home mount — Home remounts every time the player backs out of a
+  // Once per session, not once per Home mount - Home remounts every time the player backs out of a
   // match, and skipping shouldn't be something they have to do again a minute later just because the
   // persisted flag hadn't been written back through the store yet.
   const autoShownRef = useRef(false)
@@ -74,7 +74,7 @@ export function useGuide(): GuideContextValue {
   return useContext(GuideContext)
 }
 
-// Call this from the Home screen and nowhere else — that placement, not any route check in here, is
+// Call this from the Home screen and nowhere else - that placement, not any route check in here, is
 // what keeps it from ever firing over a live match or a two-seat loadout. Home is the one screen
 // with a single reader, before any seating, so a face-to-face two-player phone doesn't need per-seat
 // rotated copies of the card. `enabled` lets a caller hold it back (e.g. while a shared-link import

package/src/guide/HowToPlayDialog.tsx

@@ -46,7 +46,7 @@ export interface HowToPlayDialogProps {
   steps: GuideStep[]
   // Last card's primary button.
   onFinish: () => void
-  // Skip (first card only — see the action row), and Android's hardware back button — both mean "I don't need this", so a caller persisting
+  // Skip (first card only - see the action row), and Android's hardware back button - both mean "I don't need this", so a caller persisting
   // "seen" should treat them exactly like onFinish.
   onSkip: () => void
   // The app's live fake-landscape rotation (see GuideRotation). Portal content escapes any rotated
@@ -147,8 +147,8 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }: CardProps) {
           )}
 
           {/* ConfirmDialog's exact row (see overlayActionStyles): outlined secondary on the left,
-            contained primary on the right. Skip and Back share the one secondary slot — three
-            full-size buttons don't fit side by side at the row's 128 minimum — so Skip is only
+            contained primary on the right. Skip and Back share the one secondary slot - three
+            full-size buttons don't fit side by side at the row's 128 minimum - so Skip is only
             offered on the first card; after that the way out is Next to the end (a short flow) or
             Android's hardware back, which skips from anywhere. */}
           <View style={overlayActionStyles.actions}>
@@ -167,15 +167,15 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }: CardProps) {
   )
 }
 
-// A short, skippable, paged "how to play" card — the one shared shape every fleet game's intro takes,
+// A short, skippable, paged "how to play" card - the one shared shape every fleet game's intro takes,
 // built on the same retro overlay-card look as ConfirmDialog (see overlayCard.ts) so it reads as
 // part of the same family. Controlled and presentational: whether it's visible, and what happens on
-// finish/skip (persisting "seen", mostly), is the caller's — see GuideProvider for the wiring nearly
+// finish/skip (persisting "seen", mostly), is the caller's - see GuideProvider for the wiring nearly
 // every app wants. Buttons are the primary way through; the paging ScrollView underneath is what
 // makes a swipe work too, with no gesture-handler dependency.
 //
 // Split into an outer visibility gate and an inner card so the card's own page index is created
-// fresh every time it opens — a replay from Settings always starts on the first card, with no
+// fresh every time it opens - a replay from Settings always starts on the first card, with no
 // effect needed to reset it.
 export function HowToPlayDialog({ visible, steps, ...rest }: HowToPlayDialogProps) {
   if (!visible || steps.length === 0) return null
@@ -193,7 +193,7 @@ const styles = StyleSheet.create({
   body: {
     textAlign: 'center'
   },
-  // Additive on top of overlayCard's own shared `card` shape — its default 32px padding is tighter
+  // Additive on top of overlayCard's own shared `card` shape - its default 32px padding is tighter
   // here (a paged card wants more width for its art) and the shared 16px gap is right.
   card: {
     padding: CARD_PADDING

package/src/guide/SeatDiagram.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 
 export interface SeatDiagramProps {
-  // Default to the theme's own secondary/primary — in the fleet games those ARE the two players'
+  // Default to the theme's own secondary/primary - in the fleet games those ARE the two players'
   // live seat colors, so the picture always matches whatever colors they've picked.
   topColor?: string
   bottomColor?: string
@@ -17,7 +17,7 @@ const DEVICE_HEIGHT = 120
 // "Two players, one phone": a portrait phone split into a top half and a bottom half, each tinted in
 // its own seat color, with the top label upside down the way that player actually reads it. The
 // seating card every face-to-face game (LightCycles, Snake, AirHockey, BoxHockey, Pong) needs, drawn
-// once. Plain Views, no animation — nothing here needs reduced-motion handling.
+// once. Plain Views, no animation - nothing here needs reduced-motion handling.
 export function SeatDiagram({ topColor, bottomColor, topLabel = 'P2', bottomLabel = 'P1' }: SeatDiagramProps) {
   const { colors } = useAutoPaperTheme()
   const top = topColor ?? colors.secondary
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
   label: {
     fontWeight: 'bold'
   },
-  // A wash of the seat color behind its own label rather than an rgba() fill — the theme's colors
+  // A wash of the seat color behind its own label rather than an rgba() fill - the theme's colors
   // aren't guaranteed to be 6-digit hex, so an opacity layer is the only alpha that always works.
   tint: {
     opacity: 0.2

package/src/guide/SwipeHint.tsx

@@ -13,7 +13,7 @@ export interface SwipeHintProps {
   // plays by dragging). The mouse variant also relabels itself "Drag" for screen readers, since a
   // desktop player should never be told to swipe.
   pointer?: SwipePointer
-  // Defaults to the theme's own primary — i.e. the player's own seat color in the fleet games.
+  // Defaults to the theme's own primary - i.e. the player's own seat color in the fleet games.
   color?: string
   // Length of the dotted path in points, arrowhead excluded.
   length?: number
@@ -28,7 +28,7 @@ const PAUSE_MS = 500
 const ARROW_ICON: Record<SwipeDirection, string> = { up: 'arrow-up', down: 'arrow-down', left: 'arrow-left', right: 'arrow-right' }
 
 // A finger-sized ring (or, with pointer='mouse', a mouse) sweeping along a dotted path toward an
-// arrowhead, on a loop — the "swipe this way" illustration the arcade games (LightCycles, Snake, Pong,
+// arrowhead, on a loop - the "swipe this way" illustration the arcade games (LightCycles, Snake, Pong,
 // AirHockey, BoxHockey) each need for their first card, so it lives here once rather than being
 // redrawn per app. The mouse variant is the same card on desktop web for a seat that plays by
 // dragging; Snake and AirHockey each drew their own before it existed. Plain Views plus Reanimated:
@@ -40,7 +40,7 @@ export function SwipeHint({ direction = 'right', pointer = 'finger', color, leng
   const reducedMotion = useReducedMotion()
   const progress = useSharedValue(0.5)
   const horizontal = direction === 'left' || direction === 'right'
-  // Which way the finger travels along its own axis — left/up run against the positive x/y axes.
+  // Which way the finger travels along its own axis - left/up run against the positive x/y axes.
   const sign = direction === 'right' || direction === 'down' ? 1 : -1
 
   useEffect(() => {
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between'
   },
   // Centered on the whole path (not on the dots row alone) by the container's own alignItems/
-  // justifyContent, then pushed along the axis by its own animated translate — absolute so it never
+  // justifyContent, then pushed along the axis by its own animated translate - absolute so it never
   // takes space from the dots and arrowhead it's drawn over.
   finger: {
     borderRadius: FINGER_SIZE / 2,

package/src/guide/guideSlice.ts

@@ -1,18 +1,18 @@
 // redux-persist's own REHYDRATE action-type constant, inlined as a literal rather than taking a
-// dependency on the package itself — same reasoning as @tastic/profile's createSeatColorsSlice, whose
+// dependency on the package itself - same reasoning as @tastic/profile's createSeatColorsSlice, whose
 // factory shape this follows: this file has no opinion on whether the consuming app uses
 // redux-persist at all, and the string is a long-stable part of its public contract.
 const REHYDRATE = 'persist/REHYDRATE'
 
 export interface GuideState {
-  // The highest guide version this player has finished or skipped — 0 means "never". Compared
+  // The highest guide version this player has finished or skipped - 0 means "never". Compared
   // against the app's own `currentVersion`, so bumping that later re-prompts everyone (only worth
   // doing for a genuine controls/rules change, not a copy tweak).
   versionSeen: number
 }
 
 // A `type` alias, not an `interface`, on purpose: redux's UnknownAction has a string index signature,
-// and only an object-literal type alias (never an interface) is implicitly assignable to one — with an
+// and only an object-literal type alias (never an interface) is implicitly assignable to one - with an
 // interface here `configureStore` rejects the reducer at the consuming app's own typecheck.
 export type GuideAction = {
   type: string
@@ -24,7 +24,7 @@ export type GuideAction = {
 export interface GuideSliceOptions {
   // What a player who has already seen (or been grandfathered past) the guide is stamped with.
   currentVersion: number
-  // The key the reducer is mounted under in the app's own combineReducers({...}) — redux-persist's
+  // The key the reducer is mounted under in the app's own combineReducers({...}) - redux-persist's
   // REHYDRATE payload is keyed by it, and a reducer has no way to see its own mount key.
   mountKey?: string
   // The persistConfig `key` of the store this reducer lives in. A REHYDRATE for any OTHER persisted
@@ -40,7 +40,7 @@ export interface GuideSlice {
 }
 
 // The persisted "has this player seen the how-to-play flow" flag, as its own slice rather than a
-// field on any app's settings blob — every fleet app already has a redux-persist root store behind a
+// field on any app's settings blob - every fleet app already has a redux-persist root store behind a
 // PersistGate, and a dedicated key survives 'Reset stats'/'Reset match settings' (neither touches
 // Redux) without needing any of the four strict per-app settings validators to learn a new field.
 //
@@ -49,7 +49,7 @@ export interface GuideSlice {
 // fresh install redux-persist's getStoredState finds nothing under the persistConfig key and
 // REHYDRATE arrives with `payload === undefined`; an existing player has a payload object that
 // simply predates this slice and so has no `[mountKey]` entry. The first shows the guide; the
-// second is grandfathered — stamped as already having seen `currentVersion` — so nobody who has been
+// second is grandfathered - stamped as already having seen `currentVersion` - so nobody who has been
 // playing gets a "how to play" screen after an over-the-air update. Both can still replay it from
 // Settings.
 //
@@ -68,7 +68,7 @@ export function createGuideSlice({ currentVersion, mountKey = 'guide', persistKe
     if (action.type === REHYDRATE) {
       if (action.key !== undefined && action.key !== persistKey) return state
       const payload = action.payload as Record<string, Partial<GuideState> | undefined> | undefined
-      // Nothing persisted at all (fresh install) — or the read failed, which shows the guide once
+      // Nothing persisted at all (fresh install) - or the read failed, which shows the guide once
       // more rather than silently skipping it.
       if (!payload) return state
       const persisted = payload[mountKey]

package/src/guide/index.ts

@@ -1,9 +1,10 @@
-// The how-to-play entry point (`@tastic/hud/guide`) — a standalone build reachable without ever
+// The how-to-play entry point (`@tastic/hud/guide`) - a standalone build reachable without ever
 // touching the main barrel, the same reason `@tastic/hud/skia-gate` is. This file and everything it
 // imports must stay free of @tastic/core, @tastic/profile, @tastic/split-screen, @tastic/achievements,
 // @rific/updater and Skia: those are optional peers of this package (see package.json's
-// peerDependenciesMeta) precisely so an app like Hangman, which has none of them, can install
-// @tastic/hud and use only this. src/__tests__/guideImports.test.ts enforces it.
+// peerDependenciesMeta) precisely so an app with none of them can install @tastic/hud and use only
+// this. src/__tests__/guideImports.test.ts enforces it. (src/chrome/index.ts is the other light entry,
+// for an app that has @tastic/core and @rific/updater but not the rest; Hangman is that app.)
 export { type DirectionKeyLabels, type DirectionKeysAxis, DirectionKeysHint, type DirectionKeysHintProps } from './DirectionKeysHint'
 export { GuideProvider, type GuideProviderProps, useAutoShowGuide, useGuide } from './GuideProvider'
 export { createGuideSlice, createReturningPlayerMigrate, type GuideAction, type GuidePersistedState, type GuideSlice, type GuideSliceOptions, type GuideState, type GuideStorageReader } from './guideSlice'

package/src/guide/types.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 
 // One card of a game's how-to-play flow. Content is app-local data, not something this package
 // authors: only the app knows its own controls, its own key schemes on desktop web, its own win
-// condition. `art` is whatever illustrates the idea — a `SwipeHint`/`SeatDiagram` from this same
+// condition. `art` is whatever illustrates the idea - a `SwipeHint`/`SeatDiagram` from this same
 // entry point, or anything the app draws itself (plain Views + Reanimated keeps it renderer-free).
 export interface GuideStep {
   title: string

package/src/index.ts

@@ -28,7 +28,7 @@ export { StatSection } from './StatSection'
 // TriggerGauge itself (the raw Skia-based component) is deliberately NOT exported here, even
 // though a native-only consumer could safely skip TriggerGaugeHost's SkiaGate indirection. A
 // value re-export forces the bundler to fold TriggerGauge.tsx's own `Skia` import into a chunk
-// that this entry point imports eagerly at the top level — since that chunk is then shared with
+// that this entry point imports eagerly at the top level - since that chunk is then shared with
 // TriggerGaugeHost's own dynamic import too, it defeats TriggerGaugeHost's deferred loading for
 // every consumer, on every platform, not just the ones reaching for the raw component.
 // TriggerGaugeHost is the only supported way to render this.