@solidrt/components 0.0.55 → 0.0.57

package/src/theme.ts

@@ -76,6 +76,10 @@ export type Theme = {
     // borderWidth.focus by every focusable control. Defaults to text so it
     // stays visible on primary-filled controls.
     ring: string
+    // The text-selection highlight, drawn by the editable fields behind the
+    // selected glyphs; translucent so the text stays readable. Defaults to
+    // overlayPressed (a neutral scheme-aware tint that needs no color math).
+    selection: string
   }
   // Gaps and paddings, multiples of one base unit (sm 1x, md 2x, lg 4x,
   // xl 5x); read through space() where density should apply.
@@ -85,6 +89,13 @@ export type Theme = {
   // Tooltip), lg one step over (Card), full is the pill.
   radius: { sm: number; md: number; lg: number; full: number }
   borderWidth: { sm: number; focus: number }
+  // Motion durations (ms). Every built-in transition the components declare
+  // draws its timing here, so one theme edit retimes the whole package:
+  // fast is press/hover feedback, base the color/opacity fades (state
+  // changes, the theme cross-fade, popup enter/exit), slow the travel of a
+  // control's moving parts (switch knob, segmented indicator, progress
+  // fill). See motion.tsx; policy.motion gates them.
+  motion: { fast: number; base: number; slow: number }
   // Default extents of the components that have one: the panes and rails an
   // app lays its screens around, and the smallest sensible popup/track. Each
   // is a per-instance layout override away (listWidth, layout.width, ...);
@@ -110,7 +121,10 @@ export type Theme = {
 export type ThemeColor = string | [light: string, dark: string]
 
 export type ThemeDefinition = {
-  color: { [K in Exclude<keyof Theme["color"], "ring">]: ThemeColor } & { ring?: ThemeColor }
+  color: { [K in Exclude<keyof Theme["color"], "ring" | "selection">]: ThemeColor } & {
+    ring?: ThemeColor
+    selection?: ThemeColor
+  }
   text?: {
     fontFamily?: string
     monoFamily?: string
@@ -130,6 +144,7 @@ export type ThemeDefinition = {
   // deriveRadius) or explicit steps. Default 8.
   radius?: number | Partial<Theme["radius"]>
   borderWidth?: Partial<Theme["borderWidth"]>
+  motion?: Partial<Theme["motion"]>
   size?: Partial<Theme["size"]>
   icons?: Theme["icons"]
   components?: Theme["components"]
@@ -149,6 +164,10 @@ function deriveRadius(base: number): Theme["radius"] {
   return { sm: Math.round(base / 2), md: base, lg: Math.round(base * 1.5), full: RADIUS_FULL }
 }
 const BORDER_WIDTH = { sm: 1, focus: 2 }
+// The motion timing scale (ms): fast enough that feedback reads as
+// immediate, base tuned so a state fade registers without dragging, slow
+// long enough that a part's travel reads as movement rather than a flicker.
+const MOTION = { fast: 100, base: 150, slow: 250 }
 const SIZE = { navRail: 72, navSidebar: 220, splitViewList: 320, menuMinWidth: 120, slider: 200 }
 
 // Line height and weight per role; body is the base text, label is body at
@@ -184,6 +203,7 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
     } else color[k] = value
   }
   if (def.color.ring == null) color.ring = color.text
+  if (def.color.selection == null) color.selection = color.overlayPressed
   let base = def.text?.base ?? 14
   let ratio = def.text?.ratio ?? 1.26
   let role = (name: TextVariant): TextStyle => {
@@ -213,6 +233,7 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
     radius:
       typeof def.radius === "number" ? deriveRadius(def.radius) : { ...deriveRadius(RADIUS_BASE), ...def.radius },
     borderWidth: { ...BORDER_WIDTH, ...def.borderWidth },
+    motion: { ...MOTION, ...def.motion },
     size: { ...SIZE, ...def.size },
     icons: def.icons ?? {},
     components: def.components ?? {},
@@ -253,6 +274,9 @@ const DEFAULT: ThemeDefinition = {
     // Feedback darkens on a light scheme and lightens on a dark one.
     overlayHover: ["rgba(0,0,0,0.08)", "rgba(255,255,255,0.08)"],
     overlayPressed: ["rgba(0,0,0,0.14)", "rgba(255,255,255,0.14)"],
+    // Primary (#547ebf) at a translucent strength: pale enough to read
+    // through on light, a touch stronger against the dark ground.
+    selection: ["rgba(84,126,191,0.30)", "rgba(84,126,191,0.40)"],
   },
   // base 14 and ratio 1.26 derive title 18 and heading 22; caption sits
   // one step under body but the ratio lands on 11, too small to read on a

package/src/tooltip.tsx

@@ -5,7 +5,8 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, popupFadeOut } from "./motion"
 
 export interface TooltipProps extends TransitionProps {
   // The tooltip body. A string/number renders as themed text; anything else
@@ -73,6 +74,9 @@ export function Tooltip(props: TooltipProps) {
     // share one build - reading the raw getter again would orphan native nodes.
     let content = children(() => props.content)
     let isText = () => typeof content() === "string" || typeof content() === "number"
+    // The fade is driven by the position write, not a mount-time `from`: the
+    // bubble parks offscreen until measured, so a `from` would play unseen;
+    // the exit fade plays when the bubble unmounts.
     return createPortal(
       <view
         ref={(n: { id: number }) => (bubble = n)}
@@ -87,21 +91,23 @@ export function Tooltip(props: TooltipProps) {
         paddingLeft={space("md")}
         paddingRight={space("md")}
         pointerEvents="none"
+        opacity={pos() ? 1 : 0}
+        transition={popupFadeOut()}
       >
         <d-rect
-          transition={split().background}
+          transition={withTransitionDefaults(split().background, colorFade())}
           onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={theme.components.tooltip?.backgroundColor ?? theme.color.surfaceAlt}
           radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
         />
         <Show when={isText()} fallback={content()}>
-          <text color={theme.color.text} {...typeStyle("body")}>
+          <text transition={colorFade()} color={theme.color.text} {...typeStyle("body")}>
             {content()}
           </text>
         </Show>
         <d-rect
           drawStyle="stroke"
-          transition={split().border}
+          transition={withTransitionDefaults(split().border, colorFade())}
           onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={theme.components.tooltip?.borderColor ?? theme.color.border}
           strokeWidth={theme.components.tooltip?.borderWidth ?? theme.borderWidth.sm}

package/src/types.ts

@@ -21,9 +21,12 @@ import type {
 // component they would land on the root view, which has no paint, and be
 // silently ignored.
 //
-// Controls whose paint is their own (Switch knob, Slider thumb, Checkbox
-// mark, ...) take the view-level entries only for now; see
-// okf/backlog/component-transitions-internal-paint.md.
+// Controls with a moving part of their own name it as an extra entry
+// (Switch `knob`, SegmentedControl `indicator`, ProgressBar `fill`), routed
+// by partTransition to the node owning it - with a built-in default from
+// motion.tsx when the caller names nothing. Slider is the deliberate
+// exception: its thumb and fill track the drag 1:1, and a transition would
+// rubber-band it.
 export type TransitionViewProp =
   | "opacity"
   | "x"
@@ -84,9 +87,14 @@ const STYLE_TO_BORDER: Record<string, TransitionPropName> = {
  * Map a component declaration onto the three nodes a styled component
  * draws. `all`, a shorthand string and `stagger` apply to every node; named
  * entries go to the node owning the property. An entry for a node that is
- * not mounted (no background set) simply never animates.
+ * not mounted (no background set) simply never animates. `parts` lists the
+ * component's named moving parts, routed separately via partTransition, so
+ * their entries never leak onto the root view.
  */
-export function splitTransition<P extends string>(t: ComponentTransition<P> | undefined): SplitTransition {
+export function splitTransition<P extends string>(
+  t: ComponentTransition<P> | undefined,
+  parts?: readonly string[],
+): SplitTransition {
   if (t == null || typeof t === "string") return { root: t, background: t, border: t }
   let root: Record<string, unknown> = {}
   let background: Record<string, unknown> = {}
@@ -99,7 +107,7 @@ export function splitTransition<P extends string>(t: ComponentTransition<P> | un
     } else if (key in STYLE_TO_BACKGROUND || key in STYLE_TO_BORDER) {
       if (key in STYLE_TO_BACKGROUND) background[STYLE_TO_BACKGROUND[key]!] = value
       if (key in STYLE_TO_BORDER) border[STYLE_TO_BORDER[key]!] = value
-    } else {
+    } else if (!parts?.includes(key)) {
       root[key] = value
     }
   }
@@ -107,6 +115,66 @@ export function splitTransition<P extends string>(t: ComponentTransition<P> | un
   return { root: pick(root), background: pick(background), border: pick(border) }
 }
 
+/**
+ * Fill a node's split declaration with the component's built-in transitions
+ * (motion.tsx) for the properties the caller left uncovered. A caller
+ * shorthand or `all` covers everything, so their intent wins wholesale;
+ * `transition={null}` suppresses the built-ins too; a named entry overrides
+ * the default for that property only.
+ */
+export function withTransitionDefaults(
+  t: CoreTransitionProps["transition"],
+  defaults: Record<string, Transition | undefined> | undefined,
+): CoreTransitionProps["transition"] {
+  if (t === null || typeof t === "string") return t
+  if (t?.all !== undefined) return t
+  let filled: Record<string, unknown> | undefined
+  for (let key in defaults) {
+    let spec = defaults[key]
+    if (spec === undefined || (t && key in t)) continue
+    ;(filled ??= {})[key] = spec
+  }
+  if (!filled) return t
+  return { ...filled, ...t } as CoreTransitionProps["transition"]
+}
+
+/**
+ * The core declaration for a control's named moving part - a node owning
+ * one animatable property (Switch `knob` -> the knob's `x`). The caller's
+ * entry for the part (or `all`, or a shorthand string) retimes it, an
+ * absent one falls back to the control's built-in spec, and
+ * `transition={null}` suppresses that too.
+ */
+export function partTransition<P extends string>(
+  t: ComponentTransition<P> | undefined,
+  part: string,
+  coreProp: TransitionPropName,
+  fallback: Transition | undefined,
+): CoreTransitionProps["transition"] {
+  let spec: Transition | undefined
+  if (t === null) spec = undefined
+  else if (typeof t === "string") spec = t
+  else if (t) spec = (t as Record<string, Transition | undefined>)[part] ?? t.all ?? fallback
+  else spec = fallback
+  return spec == null ? undefined : ({ [coreProp]: spec } as CoreTransitionProps["transition"])
+}
+
+/**
+ * Report a part's settled core property under the part's name. Filtered to
+ * the part's own property: the node may also run built-in fades (color),
+ * which have no name in the component vocabulary.
+ */
+export function partTransitionEnd<P extends string>(
+  part: P,
+  coreProp: TransitionPropName,
+  handler: ((event: { property: P }) => void) | undefined,
+): ((event: TransitionEndEvent) => void) | undefined {
+  if (!handler) return undefined
+  return (e) => {
+    if (e.property === coreProp) handler({ property: part })
+  }
+}
+
 /** Report a settled core property in the component vocabulary for the node it settled on. */
 export function transitionEndFor<P extends string>(
   node: "root" | "background" | "border",

package/src/view.tsx

@@ -1,6 +1,7 @@
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade } from "./motion"
 
 export interface ViewProps extends PointerProps, TransitionProps {
   children?: any
@@ -50,7 +51,7 @@ export function View(props: ViewProps) {
     >
       {hasBackground() ? (
         <d-rect
-          transition={split().background}
+          transition={withTransitionDefaults(split().background, colorFade())}
           onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
@@ -60,7 +61,7 @@ export function View(props: ViewProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
-          transition={split().border}
+          transition={withTransitionDefaults(split().border, colorFade())}
           onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}

package/src/window.tsx

@@ -1,5 +1,6 @@
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
+import { colorFade } from "./motion"
 
 export interface WindowProps extends PointerProps {
   children?: any
@@ -31,7 +32,7 @@ export function Window(props: WindowProps) {
       pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
-        <d-rect color={props.style.backgroundColor} />
+        <d-rect transition={colorFade()} color={props.style.backgroundColor} />
       ) : null}
       {props.children}
     </window>