@solidrt/components 0.0.63 → 0.0.64

package/src/card.tsx

@@ -1,67 +1,123 @@
-import { Show } from "@solidrt/core"
-import type { LayoutProps } from "@solidrt/core"
+import { Show, createRadialGradient, createSignal, getLayoutBox, withAlpha } from "@solidrt/core"
+import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
+import { policy } from "./policy"
 import { typeStyle } from "./typography"
 import { space } from "./spacing"
-import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { Surface } from "./surface"
+import type { ElevationLevel, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { colorFade } from "./motion"
 
 export interface CardProps extends TransitionProps {
   children?: any
   // Optional heading rendered above the content.
   title?: string
+  // Hover lift: under the pointer the card rises one elevation level (its
+  // key shadow grows and moves out on the elevation motion, the card rises
+  // LIFT_RISE px) and a faint highlight in the light's color follows the
+  // pointer over it. Nothing rotates or scales, so edges and text stay on
+  // the pixel grid. Hover interaction policies only; under the stock
+  // presets, with no height to rise from, only the highlight shows.
+  lift?: boolean
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
 }
 
-// A themed surface container: a padded column box with rounded corners, reading
+// The level a lifting card rises to.
+const LIFTED: Record<ElevationLevel, ElevationLevel> = { flat: "raised", raised: "floating", floating: "overlay", overlay: "overlay" }
+// Whole pixels, so the card comes to rest on the pixel grid.
+const LIFT_RISE = 2
+// Alpha of the light-colored highlight that follows the pointer over a
+// lifted card.
+const GLARE = 0.08
+
+// A themed surface container: a padded column box with rounded corners, a
+// surface face drawn by Surface (raised by default, theme.elevation.raised,
+// zero under the stock presets; style.elevation changes the level), reading
 // its colors from the theme so it recolors live. Borderless by default; pass
-// style.borderWidth or style.borderColor to draw an outline. Override any paint
-// via style, spacing/sizing via layout.
+// style.borderWidth or style.borderColor to draw an outline. Override any
+// paint via style, spacing/sizing via layout.
 export function Card(props: CardProps) {
   // Theme-level per-component overrides merged under the instance style.
   let styled = () => ({ ...theme.components.card, ...props.style })
   let bg = () => styled().backgroundColor ?? theme.color.surface
   let radius = () => styled().borderRadius ?? theme.radius.lg
+  let elevation = (): ElevationLevel => styled().elevation ?? "raised"
   let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
 
+  let node: { id: number } | undefined
+  // Pointer position over the card, 0..1 per axis; null when not over it.
+  let [pointer, setPointer] = createSignal<[number, number] | null>(null)
+  let lifts = () => props.lift === true && policy.interaction !== "touch"
+  let track = (e: PointerEvent) => {
+    if (!lifts() || !node) return
+    let box = getLayoutBox(node)
+    if (!box || box.width === 0 || box.height === 0) return
+    setPointer([e.localX / box.width, e.localY / box.height])
+  }
+  let glare = () => {
+    let p = pointer()
+    if (!p) return "transparent"
+    return createRadialGradient(p[0], p[1], 0.9, [
+      { offset: 0, color: withAlpha(theme.light.color, GLARE) },
+      { offset: 1, color: withAlpha(theme.light.color, 0) },
+    ])
+  }
+  // The rise: a whole-pixel translate on the elevation motion's timing,
+  // only where the face has a height to rise from.
+  let rises = () => lifts() && policy.motion === "normal" && theme.elevation[elevation()] > 0
+  let riseTransition = () => (rises() ? { y: { duration: theme.motion.slow, bounce: 0.2 } } : undefined)
+
   let split = () => splitTransition(props.transition)
 
   return (
     <view
       transition={split().root}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
-      ref={props.ref}
+      ref={(n: { id: number }) => {
+        node = n
+        props.ref?.(n)
+      }}
       repaintBoundary
       flexDirection="column"
       gap={space("lg")}
       padding={space("xl")}
       {...props.layout}
       x={styled().x}
-      y={styled().y}
+      y={(styled().y ?? 0) - (rises() && pointer() ? LIFT_RISE : 0)}
       scale={styled().scale}
       rotate={styled().rotate}
       opacity={styled().opacity}
+      onPointerMove={lifts() ? track : undefined}
+      onPointerEnter={lifts() ? track : undefined}
+      onPointerLeave={lifts() ? () => setPointer(null) : undefined}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
+      <Surface
+        role="surface"
+        elevation={elevation()}
+        fill={bg()}
+        radius={radius()}
+        material={styled().material}
+        glow={styled().glow}
+        liftTo={lifts() ? LIFTED[elevation()] : undefined}
+        lifted={pointer() != null}
+        outline={hasBorder() ? { color: styled().borderColor ?? theme.color.border, width: styled().borderWidth ?? theme.borderWidth.sm } : null}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+      />
+      <Show when={lifts()}>
+        <d-rect color={glare()} radius={radius()} />
+      </Show>
       <Show when={props.title != null}>
         <text transition={colorFade()} color={theme.color.text} {...typeStyle("title")}>
           {props.title}
         </text>
       </Show>
       {props.children}
-      <Show when={hasBorder()}>
-        <d-rect
-          drawStyle="stroke"
-          transition={withTransitionDefaults(split().border, colorFade())}
-          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
-          color={styled().borderColor ?? theme.color.border}
-          strokeWidth={styled().borderWidth ?? theme.borderWidth.sm}
-          radius={radius()}
-        />
-      </Show>
     </view>
   )
 }

package/src/checkbox.tsx

@@ -5,6 +5,7 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { densityScale } from "./density"
 import { Icon } from "./icon"
+import { Surface } from "./surface"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { colorFade, markMotion, pressScale, scaleFeedback } from "./motion"
@@ -21,11 +22,12 @@ export interface CheckboxProps extends TransitionProps {
 
 const SIZE = 20
 
-// A checkbox. When checked, fills with primary and draws a checkmark; otherwise
-// shows an empty bordered box. The fill fades, the mark pops in/out
-// (markMotion), and a press shrinks the box slightly (pressScale). Controlled
-// via checked/onChange, or uncontrolled via defaultChecked. When disabled, it
-// takes no pointer events at all.
+// A checkbox. Unchecked it is a sunken control face (a bordered well in the
+// surface color); checked it fills with primary as an accent face, with the
+// accent material's glow, and draws a checkmark. The fill fades, the mark
+// pops in/out (markMotion), and a press shrinks the box slightly
+// (pressScale). Controlled via checked/onChange, or uncontrolled via
+// defaultChecked. When disabled, it takes no pointer events at all.
 export function Checkbox(props: CheckboxProps) {
   let [internal, setInternal] = createSignal(props.defaultChecked ?? false)
   let checked = () => (props.checked !== undefined ? props.checked : internal())
@@ -36,6 +38,9 @@ export function Checkbox(props: CheckboxProps) {
     props.onChange?.(next)
   }
   let press = createPress({ onPress: toggle })
+  // Widens the glow; hover counts only where a pointer can hover (the
+  // tint's rule).
+  let active = () => press.pressed() || (press.hovered() && policy.interaction !== "touch")
 
   let size = () => Math.round(SIZE * densityScale())
   // The checkmark in box-relative fractions, so it scales with the density.
@@ -76,11 +81,20 @@ export function Checkbox(props: CheckboxProps) {
       focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect
-        transition={withTransitionDefaults(split().background, colorFade())}
-        onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
-        color={style().backgroundColor ?? "transparent"}
+      <Surface
+        role={checked() ? "accent" : "control"}
+        elevation={style().elevation ?? "flat"}
+        fill={style().backgroundColor ?? "transparent"}
         radius={style().borderRadius}
+        material={style().material}
+        glow={checked() && !props.disabled ? style().glow : null}
+        sunken={!checked()}
+        active={active()}
+        outline={(style().borderWidth ?? 0) > 0 ? { color: style().borderColor ?? "transparent", width: style().borderWidth! } : null}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
       />
       <Show when={checked()}>
         <view
@@ -113,16 +127,6 @@ export function Checkbox(props: CheckboxProps) {
           </Show>
         </view>
       </Show>
-      <Show when={(style().borderWidth ?? 0) > 0}>
-        <d-rect
-          drawStyle="stroke"
-          transition={withTransitionDefaults(split().border, colorFade())}
-          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
-          color={style().borderColor ?? "transparent"}
-          strokeWidth={style().borderWidth}
-          radius={style().borderRadius}
-        />
-      </Show>
     </view>
   )
 }

package/src/context-menu.tsx

@@ -8,6 +8,7 @@ import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 import { colorFade, popupFade, popupFadeOut, PressFeedback } from "./motion"
+import { Surface } from "./surface"
 
 export interface ContextMenuItem {
   label: string
@@ -84,6 +85,7 @@ export function ContextMenu(props: ContextMenuProps) {
   // 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.
+  // An overlay face (the sheet sits on a scrim, so it stays flat).
   let Menu = () => {
     let menu: { id: number } | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
@@ -124,17 +126,21 @@ export function ContextMenu(props: ContextMenuProps) {
           paddingTop={theme.spacing.sm}
           paddingBottom={theme.spacing.sm}
         >
-          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
+          <Surface
+            role="overlay"
+            elevation={theme.components.contextMenu?.elevation ?? "overlay"}
+            fill={theme.components.contextMenu?.backgroundColor ?? theme.color.surface}
+            radius={theme.components.contextMenu?.borderRadius ?? theme.radius.sm}
+            material={theme.components.contextMenu?.material}
+            glow={theme.components.contextMenu?.glow}
+            outline={{
+              color: theme.components.contextMenu?.borderColor ?? theme.color.border,
+              width: theme.components.contextMenu?.borderWidth ?? theme.borderWidth.sm,
+            }}
+          />
           <For each={props.items}>
             {(item: ContextMenuItem) => <ItemRow item={item} padY={space("sm")} />}
           </For>
-          <d-rect
-            drawStyle="stroke"
-            transition={colorFade()}
-            color={theme.color.border}
-            strokeWidth={theme.borderWidth.sm}
-            radius={theme.radius.sm}
-          />
         </view>
       </view>,
     )
@@ -157,7 +163,13 @@ export function ContextMenu(props: ContextMenuProps) {
           paddingTop={theme.spacing.md}
           paddingBottom={theme.spacing.md + env.safeArea.bottom}
         >
-          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
+          <Surface
+            role="overlay"
+            fill={theme.components.contextMenu?.backgroundColor ?? theme.color.surface}
+            radius={theme.components.contextMenu?.borderRadius ?? theme.radius.sm}
+            material={theme.components.contextMenu?.material}
+            glow={null}
+          />
           <For each={props.items}>
             {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.md * 1.5)} />}
           </For>

package/src/editor-field.tsx

@@ -26,6 +26,7 @@ import { registerNavAction } from "./focus-nav"
 import type { EditorLayoutProps, StyleProps, TransitionProps } from "./types"
 import { splitTextLayout, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { colorFade } from "./motion"
+import { Surface } from "./surface"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -497,14 +498,18 @@ export function EditorField(props: EditorFieldProps) {
       onKeyDown={handleKeyDown}
       onTextInput={handleTextInput}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={surfaceColor()} radius={borderRadius()} />
-      <d-rect
-        drawStyle="stroke"
-        transition={withTransitionDefaults(split().border, colorFade())}
-        onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
-        color={borderColor()}
-        strokeWidth={borderWidth()}
+      <Surface
+        role="control"
+        fill={surfaceColor()}
         radius={borderRadius()}
+        material={props.style?.material}
+        glow={props.style?.glow}
+        sunken
+        outline={{ color: borderColor(), width: borderWidth() }}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
       />
       <view
         ref={(n: { id: number }) => (viewport = n)}

package/src/focus-nav.ts

@@ -129,9 +129,15 @@ function repeating<T>(read: () => T | null, step: (value: T) => void): void {
 
 // What "select" means per focusable node, registered by createPress's ref.
 // Only the controller path consults it - key activation reaches the focused
-// node by bubbling and never comes through here. Package-internal.
+// node by bubbling and never comes through here.
 let navActions = new Map<number, () => void>()
 
+/**
+ * Registers what the focus navigation's `select` action does on a focusable
+ * node; returns the unregister. createPress does this for every press
+ * control, so a custom control needs it only when it activates without
+ * createPress.
+ */
 export function registerNavAction(nodeId: number, action: () => void): () => void {
   navActions.set(nodeId, action)
   return () => {
@@ -334,11 +340,16 @@ export function createFocusNav(options?: FocusNavOptions) {
     () => currentScope(),
     (scopeNode) => {
       if (!scopeNode) return
-      let focused = focusedNode()
-      if (focused != null && getNodePath(focused).includes(scopeNode.id)) return
-      let placed = reachable()
-      if (placed.length > 0) focusFirst(placed)
-      else if (focused != null) setFocus(null)
+      // The pull reads focus and the candidates for itself, a snapshot, not
+      // a dependency: untracked so the strict-mode read diagnostic stays
+      // quiet (as in `repeating`).
+      untrack(() => {
+        let focused = focusedNode()
+        if (focused != null && getNodePath(focused).includes(scopeNode.id)) return
+        let placed = reachable()
+        if (placed.length > 0) focusFirst(placed)
+        else if (focused != null) setFocus(null)
+      })
     },
   )
 

package/src/glow.ts

@@ -0,0 +1,35 @@
+import { parseColor, withAlpha } from "@solidrt/core"
+import type { Color, Gradient, ShadowProps } from "@solidrt/core"
+import { theme } from "./theme"
+import type { Glow, MaterialRole } from "./types"
+
+// Alpha of a glow in its part's own fill color: reads as emitted light
+// against a dark ground without blurring the part's edge away.
+const GLOW_ALPHA = 0.7
+// Growth of the glow radius while a pressable face is hovered or pressed.
+const GLOW_ACTIVE = 1.35
+
+/** The glow a part draws: the instance or theme.components override when set (null clears), else the role's material glow. */
+export function partGlow(override: Glow | null | undefined, role: MaterialRole): Glow | null | undefined {
+  return override !== undefined ? override : theme.material[role].glow
+}
+
+/**
+ * The shadow a part draws as its glow, for a rect's `shadow` prop: zero
+ * offset, the glow's radius of blur (grown by GLOW_ACTIVE while `active`),
+ * in the glow's color or else the fill at GLOW_ALPHA. A fill with no color
+ * to take - transparent, or a gradient - casts nothing rather than a black
+ * halo. Draw it on an opaque rect (the part's own fill rect, or one in its
+ * color hidden under it), never on a transparent one: a transparent
+ * caster's blurred shadow composites in a save layer of its own, which a
+ * tiled GPU pays for per part (okf/notes/lit-list-cost.md).
+ */
+export function glowShadow(glow: Glow | null | undefined, fill: Color | Gradient, active = false): ShadowProps | undefined {
+  if (!glow) return undefined
+  let color = glow.color
+  if (color == null) {
+    if (typeof fill !== "string" || ((parseColor(fill) >>> 0) & 0xff) === 0) return undefined
+    color = withAlpha(fill, GLOW_ALPHA)
+  }
+  return { x: 0, y: 0, blur: glow.radius * (active ? GLOW_ACTIVE : 1), color }
+}

package/src/index.ts

@@ -10,8 +10,9 @@ export { ScrollView, type ScrollViewProps } from "./scroll-view"
 export { Dismissible, type DismissibleProps, type DismissDirection } from "./dismissible"
 export { Carousel, type CarouselProps } from "./carousel"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
+export { createPress, type PressOptions } from "./press"
 export { Button, type ButtonProps, type ButtonVariant } from "./button"
-export { createFocusNav, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
+export { createFocusNav, registerNavAction, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
 export { Switch, type SwitchProps } from "./switch"
 export { Checkbox, type CheckboxProps } from "./checkbox"
 export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio"
@@ -33,15 +34,24 @@ 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 { Surface, facePaint, roleFill, roleMaterial, surfaceSinks, type SurfaceProps, type FacePaint } from "./surface"
+export { lightFrom, lightSource, lightAxis, type LightAxis } from "./light"
+export { PressFeedback } from "./motion"
 export {
   theme,
   setTheme,
   defineTheme,
   darkTheme,
   lightTheme,
+  litDarkTheme,
+  litLightTheme,
+  pill,
   type Theme,
   type ThemeDefinition,
   type ThemeColor,
+  type ThemeValue,
+  type Light,
+  type ShadowTone,
   type ThemedComponent,
   type TextStyle,
   type TextVariant,
@@ -64,6 +74,11 @@ export { typeStyle, typeWeight, lightOnDark } from "./typography"
 export { space } from "./spacing"
 export type {
   StyleProps,
+  Glow,
+  Glass,
+  Material,
+  MaterialRole,
+  ElevationLevel,
   FontProps,
   TextLayoutProps,
   EditorLayoutProps,

package/src/item.tsx

@@ -5,9 +5,10 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
-import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
-import { colorFade, PressFeedback } from "./motion"
+import { Surface } from "./surface"
+import type { ElevationLevel, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
+import { colorFade } from "./motion"
 
 export interface ItemProps extends TransitionProps {
   // Leading content: an icon, avatar, checkbox, ...
@@ -38,9 +39,14 @@ export interface ItemProps extends TransitionProps {
 // trailing content pushed to the end. The dense-data workhorse - rows compose
 // with <For> inside a plain column (or a ScrollView); this package ships no
 // List wrapper because a column view IS the list. Paddings and the gap are
-// density-scaled, so a <Density> region compacts rows wholesale. With onPress
-// the row presses like a menu entry: overlay tints for hover/pressed (no
-// scale - rows sit flush in a list), focus ring under the focusRing policy.
+// density-scaled, so a <Density> region compacts rows wholesale. Its face is
+// a surface drawn by Surface, flat by default whatever the theme: a screen
+// holds dozens of rows, and a blurred shadow per row is what a scrolling list
+// cannot afford on a tablet or a TV (okf/notes/lit-list-cost.md); a raised
+// row is the app's choice through style.elevation. With onPress the row
+// presses like a menu entry: overlay tints for hover/pressed (no scale -
+// rows sit flush in a list; a row with depth sinks), focus ring under the
+// focusRing policy. borderColor/borderWidth box the row.
 export function Item(props: ItemProps) {
   // Theme-level per-component overrides merged under the instance style.
   let styled = () => ({ ...theme.components.item, ...props.style })
@@ -49,6 +55,10 @@ export function Item(props: ItemProps) {
 
   let bg = () => styled().backgroundColor ?? (props.selected ? theme.color.surfaceAlt : "transparent")
   let radius = () => styled().borderRadius ?? theme.radius.sm
+  let elevation = (): ElevationLevel => styled().elevation ?? "flat"
+  let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
+  let pressed = () => interactive() && press.pressed()
+  let hovered = () => interactive() && press.hovered() && policy.interaction !== "touch"
 
   // Resolved once via children(): the typeof probe and the mount site must
   // share one build (see Button).
@@ -92,11 +102,26 @@ export function Item(props: ItemProps) {
       focusable={(props.focusable ?? true) && interactive()}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
-      <PressFeedback
-        pressed={interactive() && press.pressed()}
-        hovered={interactive() && press.hovered() && policy.interaction !== "touch"}
+      <Surface
+        role="surface"
+        elevation={elevation()}
+        fill={bg()}
         radius={radius()}
+        material={styled().material}
+        glow={styled().glow}
+        pressed={pressed()}
+        hovered={hovered()}
+        outline={
+          press.focused() && policy.focusRing
+            ? { color: theme.color.ring, width: theme.borderWidth.focus }
+            : hasBorder()
+              ? { color: styled().borderColor ?? theme.color.border, width: styled().borderWidth ?? theme.borderWidth.sm }
+              : null
+        }
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
       />
       {props.startContent}
       <view flexDirection="column" flexGrow={1} flexShrink={1} gap={Math.round(space("sm") / 2)}>
@@ -114,9 +139,6 @@ export function Item(props: ItemProps) {
         </Show>
       </view>
       {props.endContent}
-      <Show when={press.focused() && policy.focusRing}>
-        <d-rect drawStyle="stroke" color={theme.color.ring} strokeWidth={theme.borderWidth.focus} radius={radius()} />
-      </Show>
     </view>
   )
 }