@solidrt/components 0.0.63 → 0.0.65

package/src/theme.ts

@@ -1,6 +1,6 @@
 import { createStore } from "@solidjs/signals"
-import type { FontWeight } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { FontWeight, WindowShaderProps } from "@solidrt/core"
+import type { ElevationLevel, Material, MaterialRole, StyleProps } from "./types"
 
 export type TextStyle = {
   size: number
@@ -13,23 +13,58 @@ 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"
+// themed, so they take no override either. A runtime list, so defineTheme
+// can write every key (see there).
+const THEMED_COMPONENTS = [
+  "button",
+  "card",
+  "badge",
+  "switch",
+  "checkbox",
+  "radio",
+  "slider",
+  "item",
+  "select",
+  "segmentedControl",
+  "textInput",
+  "richTextEditor",
+  "tooltip",
+  "divider",
+  "progressBar",
+  "spinner",
+  "contextMenu",
+  "navShell",
+] as const
+export type ThemedComponent = (typeof THEMED_COMPONENTS)[number]
+
+// The roles and levels, as runtime lists so defineTheme writes every key.
+const MATERIAL_ROLES = ["surface", "control", "accent", "overlay"] as const satisfies readonly MaterialRole[]
+const ELEVATION_LEVELS = ["flat", "raised", "floating", "overlay"] as const satisfies readonly ElevationLevel[]
+
+/**
+ * The theme's one light, in screen space (x right, y down, z into the
+ * screen), the way a 3D scene's directional light is given by the way it
+ * travels: `[0.3, 1, 1]` comes from above, slightly left, in front. Every
+ * lit face derives from it: shadows fall along its x/y and stretch as it
+ * lowers, the sheen and the bevel run from the lit edge to the shaded one,
+ * and faces take on its `color`. `ambient` (0..1) is the fill light on the
+ * shaded side: the more of it, the fainter the shadows and the flatter the
+ * sheen. Fixed per theme, or moved at event rate with `setTheme({ light })`
+ * (a drag, a time of day); every face re-derives its paint on each move, so
+ * it is not a per-frame animation.
+ */
+export type Light = {
+  direction: [x: number, y: number, z: number]
+  color: string
+  ambient: number
+}
+
+/**
+ * What shadows are cast in: their `color` (black, or a deep tint for a
+ * colored scheme) and a `strength` factor, since the alpha that reads on a
+ * light ground vanishes on a dark one (the lit dark preset uses 1.7).
+ */
+export type ShadowTone = { color: string; strength: number }
 
 // A resolved theme: every value is a plain string/number ready to be read by
 // a component. Authoring happens through defineTheme, which is where
@@ -80,13 +115,20 @@ export type Theme = {
     // selected glyphs; translucent so the text stays readable. Defaults to
     // overlayPressed (a neutral scheme-aware tint that needs no color math).
     selection: string
+    // The cap riding a track: the Switch knob, the Slider thumb. Unset, the
+    // knob is onPrimary and the thumb primary. A palette whose onPrimary is
+    // dark (text on a bright accent) sets a light cap here, or its off knob
+    // sinks into the track; the lit presets set one, lit like any face.
+    thumb?: 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 }
   // 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.
+  // Tooltip), lg one step over (Card), full the pill: Badge, and through
+  // pill() every part shaped by its own height (Switch, Slider, Radio,
+  // ProgressBar), which a full of 0 squares.
   radius: { sm: number; md: number; lg: number; full: number }
   borderWidth: { sm: number; focus: number }
   // Motion durations (ms). Every built-in transition the components declare
@@ -94,7 +136,8 @@ export type Theme = {
   // 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.
+  // fill) and of a face's shadows as it sinks or lifts. 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
@@ -104,26 +147,57 @@ export type Theme = {
   // 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.
+  // no icon set. Both keys always present (see defineTheme).
   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.
+  // style still wins. `material` and `elevation` in one restyle that
+  // component's faces. Every key always present (see defineTheme).
   components: { [K in ThemedComponent]?: StyleProps }
+  // The light every face is lit by (see Light).
+  light: Light
+  // What the faces' shadows are cast in (see ShadowTone).
+  shadow: ShadowTone
+  // The material of each role's faces (see MaterialRole, Material). The
+  // stock presets give every role `{}`, the flat look; the lit presets a
+  // sheen and a bevel per role. Per component, theme.components.<name>
+  // .material merges over the role's, an instance's style.material over
+  // that, and style.glow overrides the glow layer alone (null clears it).
+  // Every role always present (see defineTheme).
+  material: { [R in MaterialRole]: Material }
+  // The height of each elevation level, in the light's units: a face at
+  // height h casts its key shadow h px along the light's slant and blurs it
+  // 2.5 h px, and a tight contact shadow under it. The stock presets are 0
+  // throughout (no face casts); the lit presets use flat 0, raised 2,
+  // floating 6, overlay 14. Every level always present (see defineTheme).
+  elevation: { [L in ElevationLevel]: number }
+  // The theme's window finish: a core window shader declaration (a linked
+  // program and its params) that Window declares on the window as it is,
+  // plus `uScale`, the display scale. Strength and layer switches are the
+  // theme's own params; an app adjusts one by spreading the current ones
+  // (setTheme merges one level deep, so a partial replaces the whole
+  // params object it names). The theme's
+  // module links the program itself, once, at init: the client brings the
+  // GPU up before the bundle runs. The package ships no finish; the stock
+  // presets have none. Every key always present (see defineTheme):
+  // `program` unset means no finish.
+  finish: Partial<WindowShaderProps>
 }
 
 // -- Authoring ---------------------------------------------------------------
 
-// A color in a theme definition: one value, or a [light, dark] pair resolved
+// A value 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 ThemeValue<T> = T | [light: T, dark: T]
+export type ThemeColor = ThemeValue<string>
 
 export type ThemeDefinition = {
-  color: { [K in Exclude<keyof Theme["color"], "ring" | "selection">]: ThemeColor } & {
+  color: { [K in Exclude<keyof Theme["color"], "ring" | "selection" | "thumb">]: ThemeColor } & {
     ring?: ThemeColor
     selection?: ThemeColor
+    thumb?: ThemeColor
   }
   text?: {
     fontFamily?: string
@@ -148,6 +222,16 @@ export type ThemeDefinition = {
   size?: Partial<Theme["size"]>
   icons?: Theme["icons"]
   components?: Theme["components"]
+  // The light; a field left out takes LIGHT's (from above, slightly left,
+  // in front; white; ambient 0.5).
+  light?: { direction?: Light["direction"]; color?: ThemeColor; ambient?: ThemeValue<number> }
+  // The shadow tone; a field left out takes SHADOW's (black, strength 1).
+  shadow?: { color?: ThemeColor; strength?: ThemeValue<number> }
+  // The material per role; a role left out is `{}`, flat.
+  material?: { [R in MaterialRole]?: Material }
+  // The height per level; a level left out is 0.
+  elevation?: { [L in ElevationLevel]?: number }
+  finish?: WindowShaderProps
 }
 
 const SPACING_BASE = 4
@@ -169,6 +253,10 @@ const BORDER_WIDTH = { sm: 1, focus: 2 }
 // 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 }
+// The default light: from above, slightly left, in front, white, with half
+// ambient - a neutral key that leaves every base color as it is.
+const LIGHT: Light = { direction: [0.3, 1, 1], color: "#ffffff", ambient: 0.5 }
+const SHADOW: ShadowTone = { color: "#000000", strength: 1 }
 
 // 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
@@ -184,9 +272,16 @@ const ROLE_DEFAULTS: { [K in TextVariant]: { step: number; lineHeight: number; w
   heading: { step: 2, lineHeight: 1.3, weight: 700 },
 }
 
+// The side of a [light, dark] pair for the scheme; a bare value as it is.
+function pick<T>(name: string, value: ThemeValue<T>, scheme?: "light" | "dark"): T {
+  if (!Array.isArray(value)) return value
+  if (!scheme) throw new Error(`Theme value "${name}" is a [light, dark] pair; pass a scheme to defineTheme`)
+  return value[scheme === "light" ? 0 : 1]
+}
+
 /**
  * Resolves a theme definition into a Theme. `scheme` picks the side of every
- * [light, dark] color pair; a definition without pairs needs no scheme
+ * [light, dark] 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).
@@ -197,13 +292,22 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
     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
+    color[k] = pick(key, value, scheme)
   }
   if (def.color.ring == null) color.ring = color.text
   if (def.color.selection == null) color.selection = color.overlayPressed
+  // Optional keys are still written (thumb here; icons, components,
+  // material and elevation below): setTheme merges a category with
+  // Object.assign, which skips absent keys, so a resolved theme carries
+  // every key and a preset that sets none of them still clears what an
+  // earlier preset set.
+  if (!("thumb" in color)) color.thumb = undefined
+  let components = {} as Theme["components"]
+  for (let name of THEMED_COMPONENTS) components[name] = def.components?.[name]
+  let material = {} as Theme["material"]
+  for (let role of MATERIAL_ROLES) material[role] = { ...def.material?.[role] }
+  let elevation = {} as Theme["elevation"]
+  for (let level of ELEVATION_LEVELS) elevation[level] = def.elevation?.[level] ?? 0
   let base = def.text?.base ?? 14
   let ratio = def.text?.ratio ?? 1.26
   let role = (name: TextVariant): TextStyle => {
@@ -235,8 +339,26 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
     borderWidth: { ...BORDER_WIDTH, ...def.borderWidth },
     motion: { ...MOTION, ...def.motion },
     size: { ...SIZE, ...def.size },
-    icons: def.icons ?? {},
-    components: def.components ?? {},
+    icons: { chevronDown: def.icons?.chevronDown, check: def.icons?.check },
+    components,
+    light: {
+      direction: def.light?.direction ?? LIGHT.direction,
+      color: def.light?.color != null ? pick("light.color", def.light.color, scheme) : LIGHT.color,
+      ambient: def.light?.ambient != null ? pick("light.ambient", def.light.ambient, scheme) : LIGHT.ambient,
+    },
+    shadow: {
+      color: def.shadow?.color != null ? pick("shadow.color", def.shadow.color, scheme) : SHADOW.color,
+      strength: def.shadow?.strength != null ? pick("shadow.strength", def.shadow.strength, scheme) : SHADOW.strength,
+    },
+    material,
+    elevation,
+    finish: {
+      program: def.finish?.program,
+      params: def.finish?.params,
+      textures: def.finish?.textures,
+      previous: def.finish?.previous,
+      vertexCount: def.finish?.vertexCount,
+    },
   }
 }
 
@@ -256,12 +378,15 @@ const DEFAULT: ThemeDefinition = {
     // 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"],
+    // (the website token build imports this module headless). Both tones
+    // are tuned a step above the 4.5:1 AA floor against surfaceAlt, the
+    // least contrasting surface muted text sits on (list rows, tracks,
+    // fields) - tuning against `background` alone left them at 4.1:1 and
+    // 4.3:1 there. Light lands at 5.2:1 on surfaceAlt (6.0:1 on the
+    // background), dark at 5.4:1 (6.8:1), and both keep a clear step of
+    // de-emphasis under `text`. If a surface changes, recheck the WCAG
+    // ratios against the new surfaceAlt.
+    textMuted: ["#606366", "#939aa4"],
     border: ["rgba(0,0,0,0.15)", "rgba(255,255,255,0.14)"],
     // Accent tuned to the puzzle mark's mid blue.
     primary: "#547ebf",
@@ -284,8 +409,30 @@ const DEFAULT: ThemeDefinition = {
   text: { roles: { caption: { size: 12 } } },
 }
 
+// The lit presets: the same palette under a light, with a sheen and a bevel
+// per role and the elevation levels raised. Strengths tuned by eye on a
+// low-DPI display, dark and light: the accent faces catch the most light,
+// overlays the least. The cap (Switch knob, Slider thumb) is a light face
+// in both schemes, lit like any other. The shadow strength on dark is what
+// a shadow needs there to read at all.
+const LIT: ThemeDefinition = {
+  ...DEFAULT,
+  color: { ...DEFAULT.color, thumb: "#f4f6fa" },
+  light: { ambient: 0.35 },
+  shadow: { strength: [1, 1.7] },
+  material: {
+    surface: { sheen: 0.5, bevel: 0.6 },
+    control: { sheen: 0.6, bevel: 0.7 },
+    accent: { sheen: 1, bevel: 0.9 },
+    overlay: { sheen: 0.4, bevel: 0.6 },
+  },
+  elevation: { flat: 0, raised: 2, floating: 6, overlay: 14 },
+}
+
 export let darkTheme: Theme = defineTheme(DEFAULT, "dark")
 export let lightTheme: Theme = defineTheme(DEFAULT, "light")
+export let litDarkTheme: Theme = defineTheme(LIT, "dark")
+export let litLightTheme: Theme = defineTheme(LIT, "light")
 
 let [themeStore, setThemeStore] = createStore<Theme>({ ...darkTheme })
 
@@ -300,7 +447,11 @@ type ThemePartial = { [K in keyof Theme]?: Partial<Theme[K]> }
 // 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).
+// category (for components, that level is the component name; for
+// material, the role). A resolved theme carries every key of every
+// category, unset ones as undefined, so it replaces the previous theme
+// outright, per-component overrides and icon slots included; a partial
+// keeps whatever it does not name.
 export function setTheme(partial: ThemePartial) {
   setThemeStore((s) => {
     for (let key in partial) {
@@ -309,3 +460,13 @@ export function setTheme(partial: ThemePartial) {
     }
   })
 }
+
+/**
+ * A pill or circle radius that follows the theme: half of `size`, capped by
+ * `radius.full`, so a theme with `full: 0` squares every round part (Switch
+ * track and knob, Slider groove and thumb, Radio, ProgressBar) while the
+ * default 9999 leaves them round. For a custom control with a round part.
+ */
+export function pill(size: number): number {
+  return Math.min(theme.radius.full, size / 2)
+}

package/src/tooltip.tsx

@@ -5,8 +5,9 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { colorFade, popupFadeOut } from "./motion"
+import { Surface } from "./surface"
 
 export interface TooltipProps extends TransitionProps {
   // The tooltip body. A string/number renders as themed text; anything else
@@ -32,7 +33,8 @@ let margin = () => theme.spacing.sm
  * mouse pointer on the wrapped content shows a bubble near it after a short
  * delay. Under the touch policy it never shows, so tooltip content must stay
  * non-essential. The bubble is portal-mounted at the window root and takes no
- * pointer events; it hides on leave and on press.
+ * pointer events; it hides on leave and on press. Its bubble is an
+ * overlay face, floating.
  */
 export function Tooltip(props: TooltipProps) {
   let anchor: { id: number } | undefined
@@ -94,25 +96,27 @@ export function Tooltip(props: TooltipProps) {
         opacity={pos() ? 1 : 0}
         transition={popupFadeOut()}
       >
-        <d-rect
-          transition={withTransitionDefaults(split().background, colorFade())}
-          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
-          color={theme.components.tooltip?.backgroundColor ?? theme.color.surfaceAlt}
+        <Surface
+          role="overlay"
+          elevation={theme.components.tooltip?.elevation ?? "floating"}
+          fill={theme.components.tooltip?.backgroundColor ?? theme.color.surfaceAlt}
           radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
+          material={theme.components.tooltip?.material}
+          glow={theme.components.tooltip?.glow}
+          outline={{
+            color: theme.components.tooltip?.borderColor ?? theme.color.border,
+            width: theme.components.tooltip?.borderWidth ?? theme.borderWidth.sm,
+          }}
+          fillTransition={split().background}
+          onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+          outlineTransition={split().border}
+          onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
         />
         <Show when={isText()} fallback={content()}>
           <text transition={colorFade()} color={theme.color.text} {...typeStyle("body")}>
             {content()}
           </text>
         </Show>
-        <d-rect
-          drawStyle="stroke"
-          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}
-          radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
-        />
       </view>,
     )
   }

package/src/types.ts

@@ -201,6 +201,56 @@ export function transitionEndFor<P extends string>(
 // into Taffy and changing them triggers a relayout; style properties are
 // paint-only and can change without affecting layout.
 
+/**
+ * Emitted light around a filled part: a zero-offset halo, `radius` logical
+ * px of blur. Without `color` the part glows in its own fill color (a danger
+ * button red, a primary one in the accent); a part whose fill has no color
+ * to take (a ghost button, a gradient) then casts nothing, so a theme-wide
+ * glow never grows a black halo. A layer of a Material; Theme["material"]
+ * says where the roles land.
+ */
+export type Glow = { radius: number; color?: Color }
+
+/**
+ * The four kinds of face a component's chrome can be. A component picks a
+ * role, never a material: the theme assigns each role its Material and the
+ * Surface primitive draws it. `surface` is what things sit on (Card, Item,
+ * the NavShell strips, the panes), `control` the body of a control (a
+ * secondary Button, a field, a Select trigger, the tracks and grooves),
+ * `accent` the accent-colored fills (a primary Button, Switch on, the
+ * Slider fill, a Badge) and `overlay` what floats over the screen (a
+ * Tooltip, a dropdown, a menu).
+ */
+export type MaterialRole = "surface" | "control" | "accent" | "overlay"
+
+/**
+ * How far a face stands off the ground, as a named level the theme maps to
+ * a height (Theme["elevation"]): its shadows' offset and blur grow with it.
+ * `flat` casts nothing; Card and the raised parts of controls sit at
+ * `raised` by default, popups at `floating` or `overlay`.
+ */
+export type ElevationLevel = "flat" | "raised" | "floating" | "overlay"
+
+/**
+ * A frosted backdrop: the face blurs and saturates what is painted beneath
+ * it (a core `backdropFilter`) and paints `tint` over that, its own fill at
+ * a translucency when unset. A deliberate overlay, never a surface material:
+ * every glass face captures the pixels under it each frame it paints, which
+ * a tiled GPU pays for per panel (okf/notes/backdrop-filter-cost.md).
+ */
+export type Glass = { blur: number; tint?: Color }
+
+/**
+ * The stack of optional layers a face is drawn with; `{}` is the flat look,
+ * a plain fill. `sheen` (0..1) is a fill gradient along the theme light,
+ * lit edge to shaded edge; `bevel` (0..1) a one-pixel stroke from the light
+ * color on the lit edge to black on the shaded one; `glass` the frosted
+ * backdrop; `glow` the emitted-light halo. Layers compose: glass with a
+ * glowing edge is two layers, not a fifth kind. Shadows are not a layer,
+ * they follow the elevation.
+ */
+export type Material = { sheen?: number; bevel?: number; glass?: Glass; glow?: Glow }
+
 // Paint-only props. None of these change the box Taffy computes. Borders are
 // drawn as a stroke overlay (not part of the box model), and the transform is
 // applied at paint time, so both live here.
@@ -231,13 +281,27 @@ export interface StyleProps {
   // clip, scroll); a single number or [tl, tr, br, bl].
   clipRadius?: number | [number, number, number, number]
   opacity?: number
+  // A halo on the component's accent part: the fill of Button, Badge,
+  // Checkbox and Switch, the Slider and ProgressBar fills, the Radio dot,
+  // the SegmentedControl indicator. Unset, the role's material glow applies
+  // (theme.material); null clears it here.
+  glow?: Glow | null
+  // Layers merged over the role's material for this component's faces (a
+  // matte card in a lit theme: `material: { sheen: 0, bevel: 0 }`).
+  material?: Partial<Material>
+  // The elevation of the component's raised face (a Card, a Button, an
+  // Item), replacing its default level: `elevation: "flat"` grounds a card,
+  // `"raised"` lifts a list row (priced in okf/notes/lit-list-cost.md).
+  elevation?: ElevationLevel
 }
 
 // One choice in an options list, shared by the single-choice controls
 // (Select, SegmentedControl). Lives here so those components stay independent
 // of each other: shared shapes go through this module, never a sibling import.
-export interface Option {
-  value: unknown
+// Generic in the value, so a control's `onChange` hands back the type its
+// options were declared with.
+export interface Option<T = unknown> {
+  value: T
   label: string
 }
 

package/src/window.tsx

@@ -1,23 +1,46 @@
-import type { LayoutProps, PointerProps } from "@solidrt/core"
+import { displayScale } from "@solidrt/core"
+import type { LayoutProps, PointerProps, WindowShaderProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { colorFade } from "./motion"
+import { theme } from "./theme"
 
 export interface WindowProps extends PointerProps {
   children?: any
   title?: string
   fullscreen?: boolean
+  // The window's own finish, a core window shader declaration forwarded
+  // as-is. Unset, the window takes the theme's finish (theme.finish);
+  // null opts out of that too.
+  shader?: WindowShaderProps | null
   layout?: LayoutProps
   style?: StyleProps
 }
 
+// The theme's finish: its declaration with uScale (the display scale, a
+// per-client fact the theme cannot know; for effects counted in logical
+// px) merged into the params, or nothing while the theme has no program.
+function themeFinish(): WindowShaderProps | null {
+  let f = theme.finish
+  if (f.program == null) return null
+  return {
+    program: f.program,
+    params: { ...f.params, uScale: displayScale() },
+    textures: f.textures,
+    previous: f.previous,
+    vertexCount: f.vertexCount,
+  }
+}
+
 // A window is the root surface: it can't be transformed or bordered, so only
-// the paint-only backgroundColor from style applies here.
+// the paint-only backgroundColor from style applies here. Its finish is the
+// theme's, or the app's own (`shader`).
 export function Window(props: WindowProps) {
   return (
     <window
       {...props.layout}
       title={props.title}
       fullscreen={props.fullscreen}
+      shader={props.shader === undefined ? themeFinish() : props.shader}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
@@ -37,4 +60,4 @@ export function Window(props: WindowProps) {
       {props.children}
     </window>
   )
-}
+}