@solidrt/components 0.0.50 → 0.0.52

package/src/theme.ts

@@ -1,4 +1,5 @@
-import { createStore, mixColors } from "@solidrt/core"
+import { createStore } from "@solidjs/signals"
+import type { StyleProps } from "./types"
 
 export type TextStyle = {
   size: number
@@ -9,10 +10,36 @@ export type TextStyle = {
 // The type scale's role names. <Text variant> and theme.text are keyed by these.
 export type TextVariant = "caption" | "label" | "body" | "title" | "heading"
 
+// The components whose chrome accepts a theme-level paint override (see
+// Theme["components"]). Plain containers (View, Pressable, ...) are not
+// themed, so they take no override either.
+export type ThemedComponent =
+  | "button"
+  | "card"
+  | "badge"
+  | "switch"
+  | "checkbox"
+  | "radio"
+  | "item"
+  | "select"
+  | "segmentedControl"
+  | "textInput"
+  | "richTextEditor"
+  | "tooltip"
+  | "divider"
+  | "progressBar"
+  | "spinner"
+
+// A resolved theme: every value is a plain string/number ready to be read by
+// a component. Authoring happens through defineTheme, which is where
+// [light, dark] pairs and the type-scale expansion live; a Theme itself has
+// no notion of modes.
 export type Theme = {
   text: {
     // Passed through to the core font stack: "sans" | "mono" | a family name.
     fontFamily: string
+    // The monospace family for code (RichTextEditor inline code).
+    monoFamily: string
     caption: TextStyle
     label: TextStyle
     body: TextStyle
@@ -26,117 +53,229 @@ export type Theme = {
     surface: string
     // Subtle raised/track fill (switch off-state, slider track, ...).
     surfaceAlt: string
-    // Hover tint for surface-colored controls (non-touch interaction policies).
-    surfaceHover: string
     text: string
     textMuted: string
     border: string
     primary: string
-    // Hover tint for primary-colored controls.
-    primaryHover: string
     onPrimary: string
     // Lower-emphasis accent: the puzzle mark's darker blue.
     secondary: string
-    // Hover tint for secondary-colored controls.
-    secondaryHover: string
     onSecondary: string
     // Validation / destructive.
     danger: string
-    // Hover tint for danger-colored controls.
-    dangerHover: string
     // Overlay dim behind modals.
     scrim: string
+    // Hover/pressed feedback tints: translucent colors DRAWN OVER a control's
+    // own fill (one token pair for every control, instead of a hover variant
+    // per fill color), so feedback works over any background, including a
+    // caller-set style.backgroundColor. Non-touch interaction policies only.
+    overlayHover: string
+    overlayPressed: string
+    // The focus ring (spatial nav under the focusRing policy), drawn at
+    // borderWidth.focus by every focusable control. Defaults to text so it
+    // stays visible on primary-filled controls.
+    ring: string
   }
+  // Gaps and paddings, multiples of one base unit (sm 1x, md 2x, lg 4x,
+  // xl 5x); read through space() where density should apply.
   spacing: { sm: number; md: number; lg: number; xl: number }
-  radius: { sm: number; md: number; lg: number }
-  borderWidth: { sm: number }
+  // Corner radii. md is THE control radius (Button, TextInput, Select,
+  // SegmentedControl); sm is one step under it (Checkbox, Item, menus,
+  // Tooltip), lg one step over (Card), full is the pill.
+  radius: { sm: number; md: number; lg: number; full: number }
+  borderWidth: { sm: number; focus: 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, ...);
+  // the theme sets the app-wide default.
+  size: { navRail: number; navSidebar: number; splitViewList: number; menuMinWidth: number; slider: number }
+  // Semantic control glyphs, as SVG document strings (the Icon currency).
+  // Components draw their built-in vector paths by default; a theme that sets
+  // a slot swaps that glyph everywhere it appears. The package still bundles
+  // no icon set.
+  icons: { chevronDown?: string; check?: string }
+  // Per-component paint overrides: merged between a component's themed
+  // defaults and the instance's style prop, so a theme can restyle every
+  // Button (say, pill corners) without wrapping the component. Instance
+  // style still wins.
+  components: { [K in ThemedComponent]?: StyleProps }
 }
 
-// Scheme-independent tokens, shared by both presets. The type scale: body is
-// the base text style; caption and label sit under it (secondary and
-// emphasized small text), title and heading above it (card and page headings).
-const TEXT: Theme["text"] = {
-  fontFamily: "sans",
-  caption: { size: 11, lineHeight: 1.3, weight: 400 },
-  label: { size: 12, lineHeight: 1.3, weight: 600 },
-  body: { size: 14, lineHeight: 1.5, weight: 400 },
-  title: { size: 18, lineHeight: 1.4, weight: 700 },
-  heading: { size: 22, lineHeight: 1.3, weight: 700 },
+// -- Authoring ---------------------------------------------------------------
+
+// A color in a theme definition: one value, or a [light, dark] pair resolved
+// by defineTheme's scheme argument. Pairs are opt-in per token; a definition
+// without any needs no scheme at all (a game ships one look, not two).
+export type ThemeColor = string | [light: string, dark: string]
+
+export type ThemeDefinition = {
+  color: { [K in Exclude<keyof Theme["color"], "ring">]: ThemeColor } & { ring?: ThemeColor }
+  text?: {
+    fontFamily?: string
+    monoFamily?: string
+    // The body font size; the other roles derive from it. Default 14.
+    base?: number
+    // The step between adjacent roles (caption, label, body, title, heading
+    // sit at base * ratio^(-2..2), rounded to whole px). Default 1.26.
+    ratio?: number
+    // Per-role overrides of the derived size and the default line heights
+    // and weights.
+    roles?: { [K in TextVariant]?: Partial<TextStyle> }
+  }
+  // One base unit (the steps derive from it, see deriveSpacing) or explicit
+  // steps. Default 4.
+  spacing?: number | Partial<Theme["spacing"]>
+  // One base (the control radius; the steps derive from it, see
+  // deriveRadius) or explicit steps. Default 8.
+  radius?: number | Partial<Theme["radius"]>
+  borderWidth?: Partial<Theme["borderWidth"]>
+  size?: Partial<Theme["size"]>
+  icons?: Theme["icons"]
+  components?: Theme["components"]
 }
-const SPACING = { sm: 4, md: 8, lg: 16, xl: 20 }
-const RADIUS = { sm: 4, md: 8, lg: 12 }
-const BORDER_WIDTH = { sm: 1 }
 
-export let darkTheme: Theme = {
-  text: TEXT,
-  color: {
-    background: "#0b0f17",
-    surface: "#161b22",
-    surfaceAlt: "#21262d",
-    surfaceHover: "#262c34",
-    text: "#e6edf3",
-    // Muted is an opaque tone between text and background, mixed in LAB (like
-    // Material 3's tonal colors, not an alpha overlay): alpha text renders
-    // thin on low-DPI and its contrast depends on what sits behind it.
-    textMuted: mixColors("#e6edf3", "#0b0f17", 0.4),
-    border: "rgba(255,255,255,0.14)",
-    // Accent tuned to the puzzle mark's mid blue; hover lifts toward its
-    // lightest segment tone.
-    primary: "#547ebf",
-    primaryHover: "#7ea9ea",
-    onPrimary: "#ffffff",
-    // The darker shade of the same puzzle segment; hover lifts toward primary.
-    secondary: "#2b5696",
-    secondaryHover: "#3a68ab",
-    onSecondary: "#ffffff",
-    danger: "#f85149",
-    dangerHover: "#ff7b72",
-    scrim: "rgba(0,0,0,0.6)",
-  },
-  spacing: SPACING,
-  radius: RADIUS,
-  borderWidth: BORDER_WIDTH,
+const SPACING_BASE = 4
+
+// The spacing scale from its base unit.
+function deriveSpacing(base: number): Theme["spacing"] {
+  return { sm: base, md: base * 2, lg: base * 4, xl: base * 5 }
+}
+const RADIUS_BASE = 8
+const RADIUS_FULL = 9999
+
+// The radius scale from its base: sm half, lg one and a half, full the pill.
+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 }
+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
+// an emphasized weight (form labels, key/value keys, tags), caption the one
+// small role (badges, tab labels, timestamps), title and heading sit above
+// body (card and page headings). De-emphasis is a color (textMuted), not a
+// size: caption is small text to be glanced at, so keep it in the full text
+// color rather than stacking small and muted.
+const ROLE_DEFAULTS: { [K in TextVariant]: { step: number; lineHeight: number; weight: TextStyle["weight"] } } = {
+  caption: { step: -1, lineHeight: 1.3, weight: 400 },
+  label: { step: 0, lineHeight: 1.5, weight: 600 },
+  body: { step: 0, lineHeight: 1.5, weight: 400 },
+  title: { step: 1, lineHeight: 1.4, weight: 700 },
+  heading: { step: 2, lineHeight: 1.3, weight: 700 },
+}
+
+/**
+ * Resolves a theme definition into a Theme. `scheme` picks the side of every
+ * [light, dark] color pair; a definition without pairs needs no scheme
+ * (modes are a per-theme choice, not a framework requirement). The type
+ * scale expands from text.base and text.ratio, with text.roles overriding
+ * per role. Throws on a pair without a scheme (throw-in-dev policy).
+ */
+export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Theme {
+  let color = {} as Theme["color"]
+  for (let key in def.color) {
+    let k = key as keyof Theme["color"]
+    let value = def.color[k]
+    if (value == null) continue
+    if (Array.isArray(value)) {
+      if (!scheme) throw new Error(`Theme color "${key}" is a [light, dark] pair; pass a scheme to defineTheme`)
+      color[k] = value[scheme === "light" ? 0 : 1]
+    } else color[k] = value
+  }
+  if (def.color.ring == null) color.ring = color.text
+  let base = def.text?.base ?? 14
+  let ratio = def.text?.ratio ?? 1.26
+  let role = (name: TextVariant): TextStyle => {
+    let d = ROLE_DEFAULTS[name]
+    return {
+      size: Math.round(base * ratio ** d.step),
+      lineHeight: d.lineHeight,
+      weight: d.weight,
+      ...def.text?.roles?.[name],
+    }
+  }
+  return {
+    text: {
+      fontFamily: def.text?.fontFamily ?? "sans",
+      monoFamily: def.text?.monoFamily ?? "mono",
+      caption: role("caption"),
+      label: role("label"),
+      body: role("body"),
+      title: role("title"),
+      heading: role("heading"),
+    },
+    color,
+    spacing:
+      typeof def.spacing === "number"
+        ? deriveSpacing(def.spacing)
+        : { ...deriveSpacing(SPACING_BASE), ...def.spacing },
+    radius:
+      typeof def.radius === "number" ? deriveRadius(def.radius) : { ...deriveRadius(RADIUS_BASE), ...def.radius },
+    borderWidth: { ...BORDER_WIDTH, ...def.borderWidth },
+    size: { ...SIZE, ...def.size },
+    icons: def.icons ?? {},
+    components: def.components ?? {},
+  }
 }
 
-export let lightTheme: Theme = {
-  text: TEXT,
+// -- The built-in presets: one definition, resolved twice ---------------------
+
+const DEFAULT: ThemeDefinition = {
   color: {
-    background: "#ffffff",
-    surface: "#f6f8fa",
-    surfaceAlt: "#eaeef2",
-    surfaceHover: "#e0e5eb",
-    text: "#1f2328",
-    textMuted: mixColors("#1f2328", "#ffffff", 0.4),
-    border: "rgba(0,0,0,0.15)",
-    // Accent tuned to the puzzle mark's mid blue; hover deepens toward its
-    // darker segment tone.
+    background: ["#ffffff", "#0b0f17"],
+    surface: ["#f6f8fa", "#161b22"],
+    surfaceAlt: ["#eaeef2", "#21262d"],
+    // Dark body text sits well under white (about 10:1 on the background,
+    // tuned by eye on a low-DPI display): full brightness glares on a dark
+    // ground, and the low-DPI weight compensation thickens it further.
+    text: ["#1f2328", "#b1bac4"],
+    // Muted is an opaque tone between text and background, mixed in oklab
+    // (like Material 3's tonal colors, not an alpha overlay): alpha text
+    // renders thin on low-DPI and its contrast depends on what sits behind
+    // it. Precomputed - core's mixColors delegates to flux:rendertree, and a
+    // preset is data that must not need the render engine at import time
+    // (the website token build imports this module headless). If text or
+    // background changes, recompute: mixColors(text, background, 0.4).
+    // The dark tone sits a step above the 4.5:1 AA floor (about 5.4:1)
+    // instead of at the mix: the body text already sits low, and the
+    // strict mix falls under it.
+    textMuted: ["#707376", "#828993"],
+    border: ["rgba(0,0,0,0.15)", "rgba(255,255,255,0.14)"],
+    // Accent tuned to the puzzle mark's mid blue.
     primary: "#547ebf",
-    primaryHover: "#3f5494",
     onPrimary: "#ffffff",
-    // The darker shade of the same puzzle segment; hover deepens it further.
+    // The darker shade of the same puzzle segment.
     secondary: "#2b5696",
-    secondaryHover: "#1f4176",
     onSecondary: "#ffffff",
-    danger: "#cf222e",
-    dangerHover: "#a40e26",
-    scrim: "rgba(0,0,0,0.4)",
+    danger: ["#cf222e", "#f85149"],
+    scrim: ["rgba(0,0,0,0.4)", "rgba(0,0,0,0.6)"],
+    // 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)"],
   },
-  spacing: SPACING,
-  radius: RADIUS,
-  borderWidth: BORDER_WIDTH,
+  // 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
+  // low-DPI display or at TV distance, so it is pinned.
+  text: { roles: { caption: { size: 12 } } },
 }
 
-// Backed by a Solid store so reads are tracked: calling setTheme at runtime
-// recolors the live UI without remounting. Components read theme.* through
-// thunks/JSX expressions, so they pick this up with no call-site changes.
-let [theme, setThemeStore] = createStore<Theme>({ ...darkTheme })
-export { theme }
+export let darkTheme: Theme = defineTheme(DEFAULT, "dark")
+export let lightTheme: Theme = defineTheme(DEFAULT, "light")
+
+let [themeStore, setThemeStore] = createStore<Theme>({ ...darkTheme })
+
+// The shared theme, backed by a Solid store so reads are tracked: calling
+// setTheme at runtime recolors the live UI without remounting. Components
+// read theme.* through thunks/JSX expressions, so they pick this up with no
+// call-site changes.
+export let theme: Theme = themeStore
 
 type ThemePartial = { [K in keyof Theme]?: Partial<Theme[K]> }
 
-// Switch themes with a full preset (setTheme(lightTheme)) or apply a targeted
-// override (setTheme({ color: { primary: "#f00" } })). Merges one level deep per
-// category, matching the previous Object.assign behavior.
+// Switch themes with a full preset (setTheme(lightTheme)), a resolved
+// definition (setTheme(defineTheme({...}))), or apply a targeted override
+// (setTheme({ color: { primary: "#f00" } })). Merges one level deep per
+// category (for components, that level is the component name).
 export function setTheme(partial: ThemePartial) {
   setThemeStore((s) => {
     for (let key in partial) {

package/src/tooltip.tsx

@@ -4,8 +4,10 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface TooltipProps {
+export interface TooltipProps extends TransitionProps {
   // The tooltip body. A string/number renders as themed text; anything else
   // renders as-is.
   content?: any
@@ -19,9 +21,10 @@ export interface TooltipProps {
 }
 
 const DELAY = 500
-const GAP = 6
+// Distance between the anchor and the bubble.
+let gap = () => theme.spacing.sm
 // Minimum distance kept between the bubble and the window edges.
-const MARGIN = 4
+let margin = () => theme.spacing.sm
 
 /**
  * A hover-only affordance: under desktop/hybrid interaction policies, resting a
@@ -61,8 +64,8 @@ export function Tooltip(props: TooltipProps) {
       let b = bubble && getBoundingBox(bubble)
       if (!a || !b) return
       let x = a.x + a.width / 2 - b.width / 2
-      x = Math.round(Math.min(Math.max(x, MARGIN), env.windowSize.width - b.width - MARGIN))
-      let y = Math.round(props.placement === "bottom" ? a.y + a.height + GAP : a.y - b.height - GAP)
+      x = Math.round(Math.min(Math.max(x, margin()), env.windowSize.width - b.width - margin()))
+      let y = Math.round(props.placement === "bottom" ? a.y + a.height + gap() : a.y - b.height - gap())
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
@@ -85,7 +88,12 @@ export function Tooltip(props: TooltipProps) {
         paddingRight={space("md")}
         pointerEvents="none"
       >
-        <d-rect color={theme.color.surfaceAlt} radius={theme.radius.sm} />
+        <d-rect
+          transition={split().background}
+          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")}>
             {content()}
@@ -93,16 +101,22 @@ export function Tooltip(props: TooltipProps) {
         </Show>
         <d-rect
           drawStyle="stroke"
-          color={theme.color.border}
-          strokeWidth={theme.borderWidth.sm}
-          radius={theme.radius.sm}
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+          color={theme.components.tooltip?.borderColor ?? theme.color.border}
+          strokeWidth={theme.components.tooltip?.borderWidth ?? theme.borderWidth.sm}
+          radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
         />
       </view>,
     )
   }
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => (anchor = n)}
       onPointerEnter={enter}
       onPointerLeave={hide}

package/src/types.ts

@@ -1,4 +1,122 @@
-import type { Color, Gradient, LayoutProps } from "@solidrt/core"
+import type {
+  Color,
+  Gradient,
+  LayoutProps,
+  Transition,
+  TransitionEndEvent,
+  TransitionPropName,
+  TransitionProps as CoreTransitionProps,
+} from "@solidrt/core"
+
+// Native transitions through a component. A component is a root view plus
+// the nodes it draws for `style` (a background d-rect, a stroke d-rect for
+// the border), so a declaration names the STYLE properties - backgroundColor,
+// borderColor, borderWidth, borderRadius - next to the view-level ones, and
+// splitTransition hands each entry to the node that owns it. Core's paint
+// names (color, radius, strokeWidth) are deliberately not accepted: on a
+// 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.
+export type TransitionViewProp =
+  | "opacity"
+  | "x"
+  | "y"
+  | "scale"
+  | "scaleX"
+  | "scaleY"
+  | "rotate"
+  | "rotateX"
+  | "rotateY"
+  | "originX"
+  | "originY"
+  | "perspective"
+  | "clipRadius"
+export type TransitionStyleProp = "backgroundColor" | "borderColor" | "borderWidth" | "borderRadius"
+export type TransitionScrollProp = "scrollX" | "scrollY"
+
+type TransitionEntries<P extends string> = {
+  /** One spec for every property the component animates (no `from`/`exit` here, as in core). */
+  all?: Transition
+  /** Group stagger (ms) for descendant enter/exit animations; see core. */
+  stagger?: number
+} & { [K in P]?: Transition }
+
+/** A component's transition declaration: view-level and style names, `all`, or a shorthand string. */
+export type ComponentTransition<P extends string = TransitionViewProp | TransitionStyleProp> =
+  | TransitionEntries<P>
+  | string
+  | null
+
+export interface TransitionProps<P extends string = TransitionViewProp | TransitionStyleProp> {
+  /**
+   * Animate later writes of the listed properties instead of snapping, like
+   * the core `transition` prop but in the component's own vocabulary:
+   * `transition={{ opacity: "200ms ease-out", backgroundColor: { duration: 300 } }}`.
+   * `all` or a bare string covers every property the component animates.
+   */
+  transition?: ComponentTransition<P>
+  /** A transition settled; `property` is in the component's vocabulary (`backgroundColor`, not `color`). */
+  onTransitionEnd?: (event: { property: P }) => void
+}
+
+/** The core transition declarations for a component's root view and its background/border rects. */
+export type SplitTransition = {
+  root: CoreTransitionProps["transition"]
+  background: CoreTransitionProps["transition"]
+  border: CoreTransitionProps["transition"]
+}
+
+const STYLE_TO_BACKGROUND: Record<string, TransitionPropName> = { backgroundColor: "color", borderRadius: "radius" }
+const STYLE_TO_BORDER: Record<string, TransitionPropName> = {
+  borderColor: "color",
+  borderWidth: "strokeWidth",
+  borderRadius: "radius",
+}
+
+/**
+ * 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.
+ */
+export function splitTransition<P extends string>(t: ComponentTransition<P> | undefined): SplitTransition {
+  if (t == null || typeof t === "string") return { root: t, background: t, border: t }
+  let root: Record<string, unknown> = {}
+  let background: Record<string, unknown> = {}
+  let border: Record<string, unknown> = {}
+  for (let [key, value] of Object.entries(t)) {
+    if (key === "all" || key === "stagger") {
+      root[key] = value
+      background[key] = value
+      border[key] = value
+    } 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 {
+      root[key] = value
+    }
+  }
+  let pick = (o: Record<string, unknown>) => (Object.keys(o).length ? (o as CoreTransitionProps["transition"]) : undefined)
+  return { root: pick(root), background: pick(background), border: pick(border) }
+}
+
+/** 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",
+  handler: ((event: { property: P }) => void) | undefined,
+): ((event: TransitionEndEvent) => void) | undefined {
+  if (!handler) return undefined
+  return (e) => {
+    let name: string = e.property
+    if (node === "background") name = e.property === "color" ? "backgroundColor" : "borderRadius"
+    if (node === "border")
+      name = e.property === "color" ? "borderColor" : e.property === "strokeWidth" ? "borderWidth" : "borderRadius"
+    handler({ property: name as P })
+  }
+}
 
 // The split between layout and style follows one rule: layout properties feed
 // into Taffy and changing them triggers a relayout; style properties are

package/src/view.tsx

@@ -1,7 +1,8 @@
 import type { LayoutProps, PointerProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ViewProps extends PointerProps {
+export interface ViewProps extends PointerProps, TransitionProps {
   children?: any
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
@@ -13,8 +14,12 @@ export function View(props: ViewProps) {
     props.style?.backgroundColor != null || props.style?.borderRadius != null
   let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       {...props.layout}
       x={props.style?.x}
@@ -45,6 +50,8 @@ export function View(props: ViewProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
         />
@@ -53,6 +60,8 @@ export function View(props: ViewProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}