Dashboard

Everything is driven by a DashboardModel: mutate its properties and the screen animates. The greeting collapses into the navigation bar as you scroll, metric tiles roll to new values with numericText over sparklines that draw on first appear, and the main chart scrubs under the finger with a haptic per sample while the header shows the scrubbed value and date. The range picker slides its selection with matchedGeometryEffect and re-draws the chart. Activity rows swipe to reveal archive and delete; past 62% of the width, delete takes the whole reveal and a release commits it. Pulling down draws a ring that fills with the pull, spins while refresh runs and ends on a check with a success haptic. Sections stagger in on first appear.

Notes

• Inside a tab or another NavigationStack, pass wrapsInNavigationStack: false so the screen uses the enclosing stack instead of its own. The Productivity App template embeds it this way.
• Scrubbing uses chartXSelection; the nearest sample is resolved on the model side, so irregular series work. .selection fires when the nearest sample changes, never per frame.
• Pull-to-refresh arms at 84 pt with a rigid tick. On iOS 18 it fires when the finger lifts (onScrollPhaseChange); on iOS 17 it fires as the threshold is crossed.
• Swipe rows claim only mostly horizontal drags, so vertical scrolling is unaffected; only one row is open at a time and tapping an open row closes it. Rows expose archive and delete as VoiceOver custom actions.
• Ranges without points are hidden from the picker. DashboardMetric.Format handles compact numbers, currency and percent.
• Reduce Motion drops the reveal offsets, chart cross-fades and springs; values still roll.
• DashboardScreenExample at the end of DashboardScreen.swift is the screen shown in the preview; copy it as a starting point.

Theming

• Reads SPTheme from @Environment(\.spTheme) and requires the design-system item. Set .environment(\.spTheme, YourTheme()) above the screen to re-skin it.
• Color: bg for the ground, surface for cards and rows, accent for the chart, sparklines, refresh ring and row icons (override with tint), success and danger for change pills and delete, fill for the range track and ring, separator for grid lines and dividers, and the three text roles.
• Type, spacing and radius come from type, space and radius: cards use radius.lg with spSurface(.e1), the greeting uses type.display, tick and pill labels use type.caption.
• Motion: row removal and the refresh inset use motion.hero, the range picker uses motion.standard. Gesture release springs, the staggered reveal and value rolls keep their designed timings.