@solidrt/components 0.0.18 → 0.0.20

package/src/context-menu.tsx

@@ -0,0 +1,189 @@
+import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
+import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { Pressable, type PressState } from "./pressable"
+import { theme } from "./theme"
+import { policy, densityScale } from "./policy"
+
+export interface ContextMenuItem {
+  label: string
+  onSelect?: () => void
+  disabled?: boolean
+}
+
+export interface ContextMenuProps {
+  items: ContextMenuItem[]
+  // The content the menu attaches to.
+  children?: any
+  layout?: LayoutProps
+}
+
+const LONG_PRESS_MS = 500
+// Finger travel (window px) that cancels a pending long-press.
+const MOVE_SLOP = 8
+// Minimum distance kept between the menu and the window edges.
+const MARGIN = 4
+const MIN_WIDTH = 120
+
+/**
+ * Secondary actions on the wrapped content. The opening gesture follows the
+ * physical pointer: right-click for a mouse, long-press for touch. The
+ * presentation forks on the interaction policy: touch gets a bottom sheet over
+ * a scrim, desktop/hybrid an anchored menu at the pointer. Pressing outside
+ * closes without selecting.
+ */
+export function ContextMenu(props: ContextMenuProps) {
+  let [open, setOpen] = createSignal(false)
+  let [point, setPoint] = createSignal({ x: 0, y: 0 })
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let downAt: { x: number; y: number } | undefined
+
+  let openAt = (x: number, y: number) => {
+    setPoint({ x, y })
+    setOpen(true)
+  }
+  let cancelHold = () => {
+    clearTimeout(timer)
+    downAt = undefined
+  }
+  onCleanup(cancelHold)
+
+  let handleDown = (e: PointerEvent) => {
+    if (e.button === 2) {
+      cancelHold()
+      openAt(e.clientX, e.clientY)
+    } else if (e.pointerType === "touch") {
+      downAt = { x: e.clientX, y: e.clientY }
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        if (downAt) openAt(downAt.x, downAt.y)
+        downAt = undefined
+      }, LONG_PRESS_MS)
+    }
+  }
+  let handleMove = (e: PointerEvent) => {
+    if (!downAt) return
+    if (Math.abs(e.clientX - downAt.x) > MOVE_SLOP || Math.abs(e.clientY - downAt.y) > MOVE_SLOP) cancelHold()
+  }
+
+  let choose = (item: ContextMenuItem) => {
+    setOpen(false)
+    item.onSelect?.()
+  }
+
+  let bodyText = (color: string) => ({
+    fontSize: theme.text.body.size,
+    lineHeight: theme.text.body.lineHeight,
+    color,
+    maxLines: 1,
+  })
+
+  let ItemRow = (p: { item: ContextMenuItem; padY: number }) => (
+    <Pressable
+      onPress={() => choose(p.item)}
+      disabled={p.item.disabled}
+      layout={{
+        flexDirection: "row",
+        alignItems: "center",
+        paddingTop: p.padY,
+        paddingBottom: p.padY,
+        paddingLeft: Math.round(theme.spacing.md * densityScale()),
+        paddingRight: Math.round(theme.spacing.md * densityScale()),
+      }}
+      style={(s: PressState) => ({
+        backgroundColor:
+          s.pressed || (s.hovered && policy.interaction !== "touch") ? theme.color.surfaceHover : "transparent",
+      })}
+    >
+      <text {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>
+    </Pressable>
+  )
+
+  // Anchored at the opening pointer position, flipping up when it would run
+  // off the bottom. Same reflow-free placement as Tooltip/Select: portal at
+  // the window root, measured in onLayout, moved with x/y paint transforms.
+  let Menu = () => {
+    let menu: { id: number } | undefined
+    let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
+    onLayout(() => {
+      let b = menu && getBoundingBox(menu)
+      if (!b) return
+      let p = point()
+      let x = Math.round(Math.min(Math.max(p.x, MARGIN), env.windowSize.width - b.width - MARGIN))
+      let y = Math.round(
+        Math.max(p.y + b.height > env.windowSize.height - MARGIN ? p.y - b.height : p.y, MARGIN),
+      )
+      let cur = pos()
+      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+    })
+    return createPortal(
+      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+        <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)} />
+        <view
+          ref={(n: { id: number }) => (menu = n)}
+          position="absolute"
+          top={0}
+          left={0}
+          x={pos()?.x ?? -10000}
+          y={pos()?.y ?? 0}
+          minWidth={MIN_WIDTH}
+          flexDirection="column"
+          paddingTop={theme.spacing.sm}
+          paddingBottom={theme.spacing.sm}
+        >
+          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <For each={props.items}>
+            {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.sm * densityScale())} />}
+          </For>
+          <d-rect
+            drawStyle="stroke"
+            color={theme.color.border}
+            strokeWidth={theme.borderWidth.sm}
+            radius={theme.radius.sm}
+          />
+        </view>
+      </view>,
+    )
+  }
+
+  // Bottom sheet over a scrim; content is a sibling of the scrim (Modal's
+  // trick) so a row press never has the scrim on its hit path.
+  let Sheet = () =>
+    createPortal(
+      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+        <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
+          <d-rect color={theme.color.scrim} />
+        </view>
+        <view
+          position="absolute"
+          left={0}
+          right={0}
+          bottom={0}
+          flexDirection="column"
+          paddingTop={theme.spacing.md}
+          paddingBottom={theme.spacing.md + env.safeArea.bottom}
+        >
+          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <For each={props.items}>
+            {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.md * 1.5)} />}
+          </For>
+        </view>
+      </view>,
+    )
+
+  return (
+    <view
+      onPointerDown={handleDown}
+      onPointerMove={handleMove}
+      onPointerUp={cancelHold}
+      onPointerLeave={cancelHold}
+      {...props.layout}
+    >
+      {props.children}
+      <Show when={open()}>
+        <Show when={policy.interaction === "touch"} fallback={<Menu />}>
+          <Sheet />
+        </Show>
+      </Show>
+    </view>
+  )
+}

package/src/divider.tsx

@@ -0,0 +1,33 @@
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import type { StyleProps } from "./types"
+
+export interface DividerProps {
+  // Line direction. Horizontal (default) is a full-width rule; vertical is a
+  // full-height rule for use inside a row.
+  orientation?: "horizontal" | "vertical"
+  // Line thickness in pixels.
+  thickness?: number
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// A thin rule in the theme border color. Stretches across its container on the
+// cross axis (full width in a column, full height in a row); add margin via
+// layout for spacing. Override the color via style.backgroundColor.
+export function Divider(props: DividerProps) {
+  let vertical = () => props.orientation === "vertical"
+  let thickness = () => props.thickness ?? 1
+  let color = () => props.style?.backgroundColor ?? theme.color.border
+
+  return (
+    <view
+      width={vertical() ? thickness() : "auto"}
+      height={vertical() ? "auto" : thickness()}
+      alignSelf="stretch"
+      {...props.layout}
+    >
+      <d-rect color={color()} />
+    </view>
+  )
+}

package/src/icon.tsx

@@ -0,0 +1,35 @@
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+
+export interface IconProps {
+  // An SVG document as a string: an imported `.svg` asset, a `lucide-static`
+  // string export, or an inline template literal. Monochrome icons that stroke/
+  // fill with `currentColor` (Lucide, Feather, Heroicons, ...) get recolored by
+  // `color`; a multi-color document keeps its own fills.
+  src: string
+  // Rendered box in pixels, square. Defaults to 24 (the common icon grid).
+  size?: number
+  // Drives `currentColor` in the document. Defaults to the theme text color.
+  color?: string
+  layout?: LayoutProps
+}
+
+const SIZE = 24
+
+// A themed wrapper over the core <svg> document primitive: a square box sized to
+// `size` and colored from the theme by default. This is the only value it adds
+// over `<svg src>` directly, so reach for the primitive when you need a
+// non-square box or want no theme coupling.
+export function Icon(props: IconProps) {
+  let size = () => props.size ?? SIZE
+
+  return (
+    <svg
+      width={size()}
+      height={size()}
+      src={props.src}
+      color={props.color ?? theme.color.text}
+      {...props.layout}
+    />
+  )
+}

package/src/index.ts

@@ -7,7 +7,37 @@ export { TextInput, type TextInputProps } from "./text-input"
 export { ScrollView, type ScrollViewProps } from "./scroll-view"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
 export { Button, type ButtonProps } from "./button"
+export { Switch, type SwitchProps } from "./switch"
+export { Checkbox, type CheckboxProps } from "./checkbox"
+export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio"
+export { Slider, type SliderProps } from "./slider"
+export { Card, type CardProps } from "./card"
+export { Divider, type DividerProps } from "./divider"
+export { Badge, type BadgeProps } from "./badge"
+export { Spinner, type SpinnerProps } from "./spinner"
+export { ProgressBar, type ProgressBarProps } from "./progress-bar"
 export { Portal, type PortalProps } from "./portal"
 export { Modal, type ModalProps } from "./modal"
-export { theme, setTheme, type Theme } from "./theme"
+export { Tooltip, type TooltipProps } from "./tooltip"
+export { Select, type SelectProps, type SelectOption } from "./select"
+export { ContextMenu, type ContextMenuProps, type ContextMenuItem } from "./context-menu"
+export { NavShell, type NavShellProps, type NavItem } from "./nav-shell"
+export { SplitView, type SplitViewProps } from "./split-view"
+export { QrCode, type QrCodeProps } from "./qrcode"
+export { Icon, type IconProps } from "./icon"
+export { theme, setTheme, darkTheme, lightTheme, type Theme } from "./theme"
+export {
+  policy,
+  setPolicy,
+  setPolicyResolver,
+  defaultPolicyResolver,
+  densityScale,
+  type Policies,
+  type PolicyResolver,
+  type InteractionPolicy,
+  type DensityPolicy,
+  type MotionPolicy,
+  type NavigationPolicy,
+  type LayoutPolicy,
+} from "./policy"
 export type { StyleProps, TextLayoutProps } from "./types"

package/src/nav-shell.tsx

@@ -0,0 +1,160 @@
+import { createSignal, Switch, Match, For } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { Pressable, type PressState } from "./pressable"
+import { theme } from "./theme"
+import { policy, densityScale } from "./policy"
+
+export interface NavItem {
+  value: unknown
+  label: string
+  // Optional icon content, rendered as-is above (tabs/rail) or beside
+  // (sidebar) the label.
+  icon?: any
+}
+
+export interface NavShellProps {
+  items: NavItem[]
+  // Controlled selected value. If omitted, the shell is uncontrolled.
+  value?: unknown
+  defaultValue?: unknown
+  onChange?: (value: unknown) => void
+  // The page content; keeps its node (and state) when the arrangement changes.
+  children?: any
+  layout?: LayoutProps
+}
+
+const RAIL_WIDTH = 72
+const SIDEBAR_WIDTH = 220
+
+/**
+ * An app shell that arranges primary navigation around the content per the
+ * navigation policy: bottom tabs under it, a narrow rail or a wide sidebar
+ * beside it. The content is a single stable node; switching arrangement only
+ * flips the shell's flex direction and remounts the (stateless) nav strip, so
+ * page state survives a resize across a breakpoint. Safe areas are the
+ * caller's concern: wrap the shell (or the window content) in SafeArea.
+ */
+export function NavShell(props: NavShellProps) {
+  let [internal, setInternal] = createSignal(props.defaultValue)
+  let value = () => (props.value !== undefined ? props.value : internal())
+  let select = (v: unknown) => {
+    if (props.value === undefined) setInternal(() => v)
+    props.onChange?.(v)
+  }
+
+  let labelColor = (item: NavItem) => (item.value === value() ? theme.color.primary : theme.color.textMuted)
+  let itemBg = (item: NavItem, s: PressState) =>
+    item.value === value()
+      ? theme.color.surfaceAlt
+      : s.hovered && policy.interaction !== "touch"
+        ? theme.color.surfaceHover
+        : "transparent"
+
+  // Icon over a small label, centered; shared by the tab bar and the rail.
+  let StackedItem = (p: { item: NavItem; padY: number; layout?: LayoutProps }) => (
+    <Pressable
+      onPress={() => select(p.item.value)}
+      layout={{
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: theme.spacing.sm,
+        paddingTop: p.padY,
+        paddingBottom: p.padY,
+        ...p.layout,
+      }}
+      style={(s: PressState) => ({ backgroundColor: itemBg(p.item, s), borderRadius: theme.radius.sm })}
+    >
+      {p.item.icon}
+      <text color={labelColor(p.item)} fontSize={11} lineHeight={1.3}>
+        {p.item.label}
+      </text>
+    </Pressable>
+  )
+
+  let Hairline = (p: { vertical?: boolean }) => (
+    <view width={p.vertical ? 1 : undefined} height={p.vertical ? undefined : 1}>
+      <d-rect color={theme.color.border} />
+    </view>
+  )
+
+  let Tabs = () => (
+    <view flexDirection="column" flexShrink={0}>
+      <Hairline />
+      <view flexDirection="row">
+        <d-rect color={theme.color.surface} />
+        <For each={props.items}>
+          {(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} layout={{ flex: 1 }} />}
+        </For>
+      </view>
+    </view>
+  )
+
+  let Rail = () => (
+    <view flexDirection="row" flexShrink={0}>
+      <view flexDirection="column" width={RAIL_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
+        <d-rect color={theme.color.surface} />
+        <For each={props.items}>{(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} />}</For>
+      </view>
+      <Hairline vertical />
+    </view>
+  )
+
+  let Sidebar = () => (
+    <view flexDirection="row" flexShrink={0}>
+      <view flexDirection="column" width={SIDEBAR_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
+        <d-rect color={theme.color.surface} />
+        <For each={props.items}>
+          {(item: NavItem) => (
+            <Pressable
+              onPress={() => select(item.value)}
+              layout={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: theme.spacing.md,
+                paddingTop: Math.round(theme.spacing.sm * densityScale()) + 2,
+                paddingBottom: Math.round(theme.spacing.sm * densityScale()) + 2,
+                paddingLeft: theme.spacing.md,
+                paddingRight: theme.spacing.md,
+                marginLeft: theme.spacing.sm,
+                marginRight: theme.spacing.sm,
+              }}
+              style={(s: PressState) => ({ backgroundColor: itemBg(item, s), borderRadius: theme.radius.sm })}
+            >
+              {item.icon}
+              <text
+                color={item.value === value() ? theme.color.primary : theme.color.text}
+                fontSize={theme.text.body.size}
+                lineHeight={theme.text.body.lineHeight}
+              >
+                {item.label}
+              </text>
+            </Pressable>
+          )}
+        </For>
+      </view>
+      <Hairline vertical />
+    </view>
+  )
+
+  // Children order is (content, nav): "column" puts the nav under the content,
+  // "row-reverse" puts it to the left, and the content node never moves.
+  return (
+    <view flexDirection={policy.navigation === "bottomTabs" ? "column" : "row-reverse"} {...props.layout}>
+      <view flex={1} flexDirection="column">
+        {props.children}
+      </view>
+      <Switch>
+        <Match when={policy.navigation === "bottomTabs"}>
+          <Tabs />
+        </Match>
+        <Match when={policy.navigation === "rail"}>
+          <Rail />
+        </Match>
+        <Match when={policy.navigation === "sidebar"}>
+          <Sidebar />
+        </Match>
+      </Switch>
+    </view>
+  )
+}

package/src/policy.ts

@@ -0,0 +1,108 @@
+import { capabilities, createSignal } from "@solidrt/core"
+import type { Capabilities } from "@solidrt/core"
+
+// Policies: how components should behave. Derived from capabilities by a
+// replaceable resolver, with per-policy application overrides on top.
+// Components consume policy.* and never ask what platform they are on.
+// Theme answers "how does it look"; policies answer "how does it behave".
+
+export type InteractionPolicy = "touch" | "desktop" | "hybrid"
+export type DensityPolicy = "comfortable" | "compact" | "dense"
+export type MotionPolicy = "normal" | "reduced" | "none"
+export type NavigationPolicy = "bottomTabs" | "rail" | "sidebar"
+export type LayoutPolicy = "singlePane" | "twoPane"
+
+export type Policies = {
+  interaction: InteractionPolicy
+  density: DensityPolicy
+  motion: MotionPolicy
+  // Whether focused controls draw a visible focus indicator. Derived from
+  // keyboard presence; the runtime cannot yet tell keyboard focus from pointer
+  // focus (no Tab traversal), so this is per-session, not per-focus-source.
+  focusRing: boolean
+  // Application policies: recommendations derived from the window size class.
+  // The application owns the final decision; accept them by consuming
+  // policy.navigation / policy.layout, or override via setPolicy.
+  navigation: NavigationPolicy
+  layout: LayoutPolicy
+}
+
+export type PolicyResolver = (caps: Capabilities) => Policies
+
+// On runtimes with device enumeration, capabilities reflect connected devices
+// from startup, so interaction settles immediately (and adapts on hotplug).
+// Elsewhere capabilities are inferred from seen input traffic: interaction
+// starts "hybrid" and settles as evidence arrives (the first mouse move flips
+// a mouse-only session to "desktop").
+export function defaultPolicyResolver(caps: Capabilities): Policies {
+  let interaction: InteractionPolicy =
+    caps.touch && caps.precisePointer
+      ? "hybrid"
+      : caps.touch
+        ? "touch"
+        : caps.precisePointer
+          ? "desktop"
+          : "hybrid"
+  return {
+    interaction,
+    density: interaction === "desktop" ? "compact" : "comfortable",
+    motion: "normal",
+    focusRing: caps.keyboardNav,
+    navigation:
+      caps.windowSizeClass === "expanded" ? "sidebar" : caps.windowSizeClass === "medium" ? "rail" : "bottomTabs",
+    layout: caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane",
+  }
+}
+
+// Boxed: a bare function as the initial signal value would be taken for the
+// writable-memo compute form of createSignal.
+let [resolverBox, setResolverBox] = createSignal({ resolve: defaultPolicyResolver as PolicyResolver })
+let [overrides, setOverrides] = createSignal<Partial<Policies>>({})
+
+// Computed, not stored: recomputes per read, tracked through capabilities/env.
+let resolved = () => resolverBox().resolve(capabilities)
+
+/** Current policies, as reactive reads. */
+export let policy = {
+  get interaction(): InteractionPolicy {
+    return overrides().interaction ?? resolved().interaction
+  },
+  get density(): DensityPolicy {
+    return overrides().density ?? resolved().density
+  },
+  get motion(): MotionPolicy {
+    return overrides().motion ?? resolved().motion
+  },
+  get focusRing(): boolean {
+    return overrides().focusRing ?? resolved().focusRing
+  },
+  get navigation(): NavigationPolicy {
+    return overrides().navigation ?? resolved().navigation
+  },
+  get layout(): LayoutPolicy {
+    return overrides().layout ?? resolved().layout
+  },
+}
+
+/** Replaces how system policies derive from capabilities. */
+export function setPolicyResolver(resolve: PolicyResolver) {
+  setResolverBox({ resolve })
+}
+
+/**
+ * Forces individual policies, overriding the resolver:
+ * setPolicy({ density: "dense" }). An explicit undefined hands a policy back
+ * to the resolver: setPolicy({ density: undefined }).
+ */
+export function setPolicy(partial: Partial<Policies>) {
+  setOverrides((prev) => ({ ...prev, ...partial }))
+}
+
+// How density maps to component metrics: a multiplier on control sizes,
+// paddings, and hit targets. Comfortable is the components' designed size.
+const DENSITY_SCALE: Record<DensityPolicy, number> = { comfortable: 1, compact: 0.85, dense: 0.7 }
+
+/** Reactive density multiplier for control metrics. */
+export function densityScale(): number {
+  return DENSITY_SCALE[policy.density]
+}

package/src/progress-bar.tsx

@@ -0,0 +1,81 @@
+import { createSignal } from "@solidjs/signals"
+import { onFrame, onLayout, getBoundingBox, Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import { policy } from "./policy"
+import type { StyleProps } from "./types"
+
+export interface ProgressBarProps {
+  // Progress from 0 to 1. Omit (or leave undefined) for an indeterminate bar: a
+  // segment that slides back and forth.
+  value?: number
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+const HEIGHT = 6
+// Indeterminate: fraction of the track the sliding segment occupies, and its
+// travel speed in track-widths per second.
+const SEGMENT = 0.3
+const SPEED = 0.8
+
+let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi : x)
+
+// A horizontal progress bar. Determinate when given a value in [0, 1]: the fill
+// grows from the left. Indeterminate when value is undefined: a short segment
+// slides back and forth (driven by core onFrame). Colors come from the theme;
+// override the track via style.backgroundColor and the fill via style.color.
+export function ProgressBar(props: ProgressBarProps) {
+  let h = () => (props.layout?.height as number) ?? HEIGHT
+  let radius = () => h() / 2
+  let track = () => props.style?.backgroundColor ?? theme.color.surfaceAlt
+  let fill = () => props.style?.color ?? theme.color.primary
+  let indeterminate = () => props.value === undefined
+
+  // Measured track width in pixels. Both the determinate fill and the
+  // indeterminate segment are drawn as a detached d-rect sized in pixels (paint
+  // only) rather than animating a percentage `width`, which would reflow taffy
+  // whenever the value changes. Refreshed each layout so it tracks resizes.
+  let trackNode: { id: number } | undefined
+  let [trackWidth, setTrackWidth] = createSignal(0)
+  onLayout(() => {
+    if (!trackNode) return
+    setTrackWidth(getBoundingBox(trackNode)?.width ?? 0)
+  })
+
+  // tick is in milliseconds (like performance.now()). The frame loop is mounted
+  // through the <Show> below only while indeterminate and the motion policy
+  // allows it: onFrame holds a standing frame request while registered, so a
+  // check inside the callback would keep the renderer free-running (which is
+  // also why a determinate bar must not register it at all). "reduced" halves
+  // the travel speed; under "none" the segment parks centered (phase 0.5).
+  let [phase, setPhase] = createSignal(0)
+  let animating = () => indeterminate() && policy.motion !== "none"
+  let Animate = () => {
+    onFrame((tick) => {
+      // Triangle wave in [0, 1]: the segment travels left edge -> right edge
+      // and back.
+      let t = ((tick / 1000) * (policy.motion === "reduced" ? SPEED / 2 : SPEED)) % 2
+      setPhase(t > 1 ? 2 - t : t)
+    })
+    return null
+  }
+
+  // Fill width in pixels: a fixed segment while indeterminate, the value fraction
+  // otherwise. Drawn via the detached d-rect `w` below (paint only), so a
+  // changing value never reflows. The indeterminate slide comes from the `x`
+  // offset.
+  let fillWidth = () => (indeterminate() ? SEGMENT : clamp(props.value ?? 0, 0, 1)) * trackWidth()
+  let effectivePhase = () => (policy.motion === "none" ? 0.5 : phase())
+  let offset = () => effectivePhase() * trackWidth() * (1 - SEGMENT)
+
+  return (
+    <view ref={(n: { id: number }) => (trackNode = n)} position="relative" width="100%" height={h()} {...props.layout}>
+      <Show when={animating()}>
+        <Animate />
+      </Show>
+      <d-rect color={track()} radius={radius()} />
+      <d-rect color={fill()} radius={radius()} w={fillWidth()} h={h()} x={indeterminate() ? offset() : 0} />
+    </view>
+  )
+}