@solidrt/components 0.0.19 → 0.0.21

package/AGENTS.md

@@ -70,6 +70,13 @@ Most components group props into two objects, plus top-level event handlers:
   `moduleSize`/`margin`/`radius`/`level` (L/M/Q/H). Paints black-on-white by
   default (NOT the theme) to stay scannable; override `color`/`background` only
   if contrast holds. Deps on `qrcode-generator`.
+- `Icon` - thin themed wrapper over the core `<svg>` document primitive. `src`
+  is an SVG string (an imported `.svg` asset, a `lucide-static` string export, or
+  an inline literal); `size` sets a square box (default 24); `color` drives
+  `currentColor` (default `theme.color.text`). Carries no icon set of its own and
+  no icon-name registry: pass the SVG string in, so any currentColor set (Lucide,
+  Feather, Heroicons) works and only used icons are bundled. Multi-color
+  documents keep their own fills. Reach for `<svg>` directly for a non-square box.
 - `SafeArea` - pads children clear of system UI (notches, status bars); top and
   bottom on by default, pass `false`/a number per edge.
 - `theme` / `setTheme` / `darkTheme` / `lightTheme` - shared REACTIVE appearance

package/README.md

@@ -536,6 +536,29 @@ import { QrCode } from "@solidrt/components"
 | `radius`     | `number`                   | `8`            | Corner radius of the background panel.                         |
 | `layout`     | `LayoutProps`              | -              | Layout of the outer box.                                       |
 
+### Icon
+
+A thin themed wrapper over the core `<svg>` primitive. `src` is a whole SVG document as a string; the component draws it in a square box and, for monochrome icons that stroke/fill with `currentColor`, recolors it from the theme. It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `<svg>` directly.
+
+Icons are just SVG strings. Import them as assets (`import House from "lucide-static/icons/house.svg"`, resolved to a string), pull them from a string export, or inline a literal:
+
+```jsx
+import { Icon } from "@solidrt/components"
+import House from "lucide-static/icons/house.svg"
+
+<Icon src={House} />
+<Icon src={House} size={32} color={theme.color.primary} />
+```
+
+**Props**
+
+| Prop     | Type          | Default            | Description                                                    |
+| -------- | ------------- | ------------------ | -------------------------------------------------------------- |
+| `src`    | `string`      | -                  | The SVG document to draw.                                      |
+| `size`   | `number`      | `24`               | Square box side in pixels.                                     |
+| `color`  | `string`      | `theme.color.text` | Drives `currentColor`; explicit fills/strokes still win.       |
+| `layout` | `LayoutProps` | -                  | Layout of the box.                                             |
+
 ## License
 
 MIT. Copyright (c) 2026 Antoine van Wel.

package/examples/README.md

@@ -0,0 +1,11 @@
+# @solidrt/components examples
+
+Single-concept SolidRT patterns using @solidrt/components. Each file is a
+complete, runnable app (ends in `render(() => <App />)`) demonstrating exactly
+one thing - copy one and adapt it. For core primitives see
+`@solidrt/core/examples`; for the component prop model see
+`@solidrt/components/AGENTS.md`.
+
+## Theme
+- `theme-toggle.tsx` - a `Switch` flipping `setTheme` between `darkTheme` and
+  `lightTheme`; every component recolors reactively, no remount.

package/examples/theme-toggle.tsx

@@ -0,0 +1,37 @@
+// A Switch toggling between the two built-in themes. Every component reads
+// theme.* reactively, so flipping setTheme() recolors the whole tree with no
+// remount - the Switch itself included.
+import { render, createSignal, createEffect, env } from "@solidrt/core"
+import { Window, View, Text, Switch, Card, theme, setTheme, darkTheme, lightTheme } from "@solidrt/components"
+
+function App() {
+  // Start from the OS light/dark preference; env.systemTheme is
+  // "dark" | "light" | "unknown" (unknown falls back to dark, the default).
+  let [dark, setDark] = createSignal(() => env.systemTheme !== "light")
+
+  createEffect(
+    () => dark(),
+    (on) => setTheme(on ? darkTheme : lightTheme),
+  )
+
+  return (
+    <Window
+      title="Theme toggle"
+      layout={{ flexDirection: "column", alignItems: "center", justifyContent: "center" }}
+      style={{ backgroundColor: theme.color.background }}
+    >
+      <Card title={dark() ? "Dark theme" : "Light theme"} layout={{ width: 280 }}>
+        <View
+          layout={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}
+        >
+          <Text layout={{ fontSize: 14 }} style={{ color: theme.color.text }}>
+            Dark mode
+          </Text>
+          <Switch value={dark()} onChange={setDark} />
+        </View>
+      </Card>
+    </Window>
+  )
+}
+
+render(() => <App />)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -10,6 +10,7 @@
   },
   "files": [
     "src/",
+    "examples/",
     "AGENTS.md"
   ],
   "dependencies": {
@@ -17,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.15",
-    "@solidrt/core": "0.0.19"
+    "@solidrt/core": "0.0.21"
   }
 }

package/src/badge.tsx

@@ -1,12 +1,17 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import { typeStyle, lightOnDark } from "./typography"
 import type { StyleProps } from "./types"
 
+export type BadgeVariant = "primary" | "neutral" | "danger"
+
 export interface BadgeProps {
   // A string/number renders as the themed pill label; anything else is rendered
   // as-is (an icon, a dot, ...).
   children?: any
+  // Visual role: primary (accent), neutral (subtle surface), danger.
+  variant?: BadgeVariant
   layout?: LayoutProps
   style?: StyleProps
 }
@@ -19,10 +24,22 @@ const RADIUS = 999
 // onPrimary text by default; override the fill via style.backgroundColor and the
 // label color via style.color.
 export function Badge(props: BadgeProps) {
-  let bg = () => props.style?.backgroundColor ?? theme.color.primary
-  let fg = () => props.style?.color ?? theme.color.onPrimary
+  let colors = () => {
+    let c = theme.color
+    switch (props.variant ?? "primary") {
+      case "neutral":
+        return { bg: c.surfaceAlt, fg: c.text }
+      case "danger":
+        return { bg: c.danger, fg: c.onPrimary }
+      default:
+        return { bg: c.primary, fg: c.onPrimary }
+    }
+  }
+  let bg = () => props.style?.backgroundColor ?? colors().bg
+  let fg = () => props.style?.color ?? colors().fg
   let radius = () => props.style?.borderRadius ?? RADIUS
   let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  let labelOnDark = () => lightOnDark(fg(), bg())
 
   return (
     <view
@@ -38,10 +55,11 @@ export function Badge(props: BadgeProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
     >
       <d-rect color={bg()} radius={radius()} />
       <Show when={isText()} fallback={props.children}>
-        <text color={fg()} fontSize={12} fontWeight={600}>
+        <text color={fg()} {...typeStyle("label", labelOnDark())}>
           {props.children}
         </text>
       </Show>

package/src/button.tsx

@@ -1,14 +1,21 @@
 import { Show } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle, lightOnDark } from "./typography"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"
+
 export interface ButtonProps {
   // A string/number is rendered as the themed label; anything else is rendered
   // as-is, so a button can hold custom content (an icon, a row, ...).
   children?: any
+  // Visual role: primary (accent fill), secondary (surface fill with border),
+  // ghost (no fill until hover), danger (destructive accent fill).
+  variant?: ButtonVariant
   onPress?: () => void
   disabled?: boolean
   layout?: LayoutProps
@@ -22,16 +29,42 @@ export interface ButtonProps {
 // layout. A caller-set backgroundColor disables the hover tint: we cannot know
 // its hover variant.
 export function Button(props: ButtonProps) {
+  // Fill, hover fill, and label color per variant, read reactively from the
+  // theme. Only secondary draws a border.
+  let colors = () => {
+    let c = theme.color
+    switch (props.variant ?? "primary") {
+      case "secondary":
+        return { fill: c.surface, hover: c.surfaceHover, label: c.text, border: c.border }
+      case "ghost":
+        return { fill: "transparent", hover: c.surfaceHover, label: c.text, border: undefined }
+      case "danger":
+        return { fill: c.danger, hover: c.dangerHover, label: c.onPrimary, border: undefined }
+      default:
+        return { fill: c.primary, hover: c.primaryHover, label: c.onPrimary, border: undefined }
+    }
+  }
   let bg = (s: PressState) =>
     props.style?.backgroundColor ??
     (props.disabled
-      ? theme.color.surface
+      ? props.variant === "ghost"
+        ? "transparent"
+        : theme.color.surface
       : s.hovered && policy.interaction !== "touch"
-        ? theme.color.primaryHover
-        : theme.color.primary)
+        ? colors().hover
+        : colors().fill)
   let radius = () => props.style?.borderRadius ?? theme.radius.sm
-  let label = () => (props.disabled ? theme.color.textMuted : theme.color.onPrimary)
+  let label = () => (props.disabled ? theme.color.textMuted : colors().label)
   let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // The label's polarity against the idle fill: onPrimary on a saturated fill
+  // is light-on-dark even in a light theme, so it needs the low-DPI weight
+  // compensation there too.
+  let labelOnDark = () =>
+    lightOnDark(
+      label(),
+      props.style?.backgroundColor ??
+        (props.disabled ? (props.variant === "ghost" ? "transparent" : theme.color.surface) : colors().fill),
+    )
 
   return (
     <Pressable
@@ -41,13 +74,15 @@ export function Button(props: ButtonProps) {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        paddingTop: Math.round(theme.spacing.sm * densityScale()),
-        paddingBottom: Math.round(theme.spacing.sm * densityScale()),
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingTop: space("sm"),
+        paddingBottom: space("sm"),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
         ...props.layout,
       }}
       style={(s: PressState) => ({
+        borderColor: colors().border,
+        borderWidth: colors().border != null ? theme.borderWidth.sm : undefined,
         ...props.style,
         backgroundColor: bg(s),
         borderRadius: radius(),
@@ -58,11 +93,7 @@ export function Button(props: ButtonProps) {
       })}
     >
       <Show when={isText()} fallback={props.children}>
-        <text
-          color={label()}
-          fontSize={theme.text.body.size}
-          lineHeight={theme.text.body.lineHeight}
-        >
+        <text color={label()} {...typeStyle("body", labelOnDark())}>
           {props.children}
         </text>
       </Show>

package/src/card.tsx

@@ -1,6 +1,8 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import { typeStyle } from "./typography"
+import { space } from "./spacing"
 import type { StyleProps } from "./types"
 
 export interface CardProps {
@@ -12,8 +14,6 @@ export interface CardProps {
   style?: StyleProps
 }
 
-const RADIUS = 12
-
 // A themed surface container: a padded column box with a subtle border and
 // rounded corners, reading its colors from the theme so it recolors live.
 // Override any paint via style, spacing/sizing via layout.
@@ -21,23 +21,25 @@ export function Card(props: CardProps) {
   let bg = () => props.style?.backgroundColor ?? theme.color.surface
   let border = () => props.style?.borderColor ?? theme.color.border
   let width = () => props.style?.borderWidth ?? theme.borderWidth.sm
-  let radius = () => props.style?.borderRadius ?? RADIUS
+  let radius = () => props.style?.borderRadius ?? theme.radius.lg
 
   return (
     <view
       ref={props.ref}
+      repaintBoundary
       flexDirection="column"
-      gap={16}
-      padding={20}
+      gap={space("lg")}
+      padding={space("xl")}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
     >
       <d-rect color={bg()} radius={radius()} />
       <Show when={props.title != null}>
-        <text color={theme.color.text} fontSize={18} fontWeight={700}>
+        <text color={theme.color.text} {...typeStyle("title")}>
           {props.title}
         </text>
       </Show>

package/src/context-menu.tsx

@@ -2,7 +2,9 @@ import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show,
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 
 export interface ContextMenuItem {
   label: string
@@ -70,12 +72,7 @@ export function ContextMenu(props: ContextMenuProps) {
     item.onSelect?.()
   }
 
-  let bodyText = (color: string) => ({
-    fontSize: theme.text.body.size,
-    lineHeight: theme.text.body.lineHeight,
-    color,
-    maxLines: 1,
-  })
+  let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
   let ItemRow = (p: { item: ContextMenuItem; padY: number }) => (
     <Pressable
@@ -86,8 +83,8 @@ export function ContextMenu(props: ContextMenuProps) {
         alignItems: "center",
         paddingTop: p.padY,
         paddingBottom: p.padY,
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
       }}
       style={(s: PressState) => ({
         backgroundColor:
@@ -132,7 +129,7 @@ export function ContextMenu(props: ContextMenuProps) {
         >
           <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())} />}
+            {(item: ContextMenuItem) => <ItemRow item={item} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"

package/src/icon.tsx

@@ -0,0 +1,37 @@
+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 (
+    <view repaintBoundary>
+      <svg
+        width={size()}
+        height={size()}
+        src={props.src}
+        color={props.color ?? theme.color.text}
+        {...props.layout}
+      />
+    </view>
+  )
+}

package/src/image.tsx

@@ -32,6 +32,7 @@ export function Image(props: ImageProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}

package/src/index.ts

@@ -1,19 +1,19 @@
 export { Window, type WindowProps } from "./window"
 export { View, type ViewProps } from "./view"
-export { Text, type TextProps } from "./text"
+export { Text, type TextProps, type TextColor } from "./text"
 export { Image, type ImageProps } from "./image"
 export { SafeArea } from "./safe-area"
 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 { Button, type ButtonProps, type ButtonVariant } 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 { Badge, type BadgeProps, type BadgeVariant } from "./badge"
 export { Spinner, type SpinnerProps } from "./spinner"
 export { ProgressBar, type ProgressBarProps } from "./progress-bar"
 export { Portal, type PortalProps } from "./portal"
@@ -24,7 +24,16 @@ export { ContextMenu, type ContextMenuProps, type ContextMenuItem } from "./cont
 export { NavShell, type NavShellProps, type NavItem } from "./nav-shell"
 export { SplitView, type SplitViewProps } from "./split-view"
 export { QrCode, type QrCodeProps } from "./qrcode"
-export { theme, setTheme, darkTheme, lightTheme, type Theme } from "./theme"
+export { Icon, type IconProps } from "./icon"
+export {
+  theme,
+  setTheme,
+  darkTheme,
+  lightTheme,
+  type Theme,
+  type TextStyle,
+  type TextVariant,
+} from "./theme"
 export {
   policy,
   setPolicy,
@@ -39,4 +48,6 @@ export {
   type NavigationPolicy,
   type LayoutPolicy,
 } from "./policy"
+export { typeStyle, typeWeight, lightOnDark } from "./typography"
+export { space } from "./spacing"
 export type { StyleProps, TextLayoutProps } from "./types"

package/src/nav-shell.tsx

@@ -2,7 +2,9 @@ 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"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 
 export interface NavItem {
   value: unknown
@@ -66,7 +68,7 @@ export function NavShell(props: NavShellProps) {
       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}>
+      <text color={labelColor(p.item)} {...typeStyle("caption")}>
         {p.item.label}
       </text>
     </Pressable>
@@ -112,8 +114,8 @@ export function NavShell(props: NavShellProps) {
                 flexDirection: "row",
                 alignItems: "center",
                 gap: theme.spacing.md,
-                paddingTop: Math.round(theme.spacing.sm * densityScale()) + 2,
-                paddingBottom: Math.round(theme.spacing.sm * densityScale()) + 2,
+                paddingTop: space("sm") + 2,
+                paddingBottom: space("sm") + 2,
                 paddingLeft: theme.spacing.md,
                 paddingRight: theme.spacing.md,
                 marginLeft: theme.spacing.sm,
@@ -124,8 +126,7 @@ export function NavShell(props: NavShellProps) {
               {item.icon}
               <text
                 color={item.value === value() ? theme.color.primary : theme.color.text}
-                fontSize={theme.text.body.size}
-                lineHeight={theme.text.body.lineHeight}
+                {...typeStyle("body")}
               >
                 {item.label}
               </text>

package/src/policy.ts

@@ -1,4 +1,4 @@
-import { capabilities, createSignal } from "@solidrt/core"
+import { capabilities, env, createSignal } from "@solidrt/core"
 import type { Capabilities } from "@solidrt/core"
 
 // Policies: how components should behave. Derived from capabilities by a
@@ -20,6 +20,15 @@ export type Policies = {
   // 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
+  // Multiplier on type-scale font sizes (Dynamic Type). Follows the OS
+  // preference (env.textScale); override via setPolicy to pin it.
+  textScale: number
+  // Base weight compensation for light-on-dark text on this display, in
+  // steps of 100 (other steps decode as 400): low-DPI rendering thins
+  // inverted-polarity glyphs. Applied by typeWeight to light-on-dark runs
+  // only (per-run polarity, or the theme's palette polarity as the default),
+  // with one extra step for small font sizes; see typography.ts.
+  textWeightDelta: number
   // 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.
@@ -48,6 +57,8 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
     density: interaction === "desktop" ? "compact" : "comfortable",
     motion: "normal",
     focusRing: caps.keyboardNav,
+    textScale: env.textScale,
+    textWeightDelta: env.displayScale < 1.5 ? 100 : 0,
     navigation:
       caps.windowSizeClass === "expanded" ? "sidebar" : caps.windowSizeClass === "medium" ? "rail" : "bottomTabs",
     layout: caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane",
@@ -76,6 +87,12 @@ export let policy = {
   get focusRing(): boolean {
     return overrides().focusRing ?? resolved().focusRing
   },
+  get textScale(): number {
+    return overrides().textScale ?? resolved().textScale
+  },
+  get textWeightDelta(): number {
+    return overrides().textWeightDelta ?? resolved().textWeightDelta
+  },
   get navigation(): NavigationPolicy {
     return overrides().navigation ?? resolved().navigation
   },

package/src/pressable.tsx

@@ -54,11 +54,13 @@ export function Pressable(props: PressableProps) {
   return (
     <view
       ref={props.ref}
+      repaintBoundary
       {...props.layout}
       x={style()?.x}
       y={style()?.y}
       scale={style()?.scale}
       rotate={style()?.rotate}
+      opacity={style()?.opacity}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
       onPointerDown={handleDown}

package/src/qrcode.tsx

@@ -27,45 +27,51 @@ const MODULE_SIZE = 6
 const MARGIN = 16
 const RADIUS = 8
 
-// Render a QR for `data` as primitives: merge horizontal runs of same-color
-// modules per row into a single sized box, on a light quiet-zone panel. The
-// module grid recomputes only when the data or error-correction level changes.
+// Render a QR for `data` as primitives: merge horizontal runs of dark modules
+// per row into a single d-rect, placed at explicit coordinates on a light
+// quiet-zone panel. Everything inside the panel is detached, so a data change
+// repaints without touching layout; the panel view itself has a fixed size
+// (module count * module size + margins) that only changes when the data
+// crosses a QR version boundary.
 export function QrCode(props: QrCodeProps) {
-  let rows = createMemo(() => {
+  let grid = createMemo(() => {
     let qr = qrcode(0, props.level ?? "M")
     qr.addData(props.data)
     qr.make()
     let n = qr.getModuleCount()
 
-    let out: { dark: boolean; len: number }[][] = []
+    let runs: { x: number; y: number; len: number }[] = []
     for (let y = 0; y < n; y++) {
-      let runs: { dark: boolean; len: number }[] = []
       let x = 0
       while (x < n) {
-        let dark = qr.isDark(y, x)
+        if (!qr.isDark(y, x)) {
+          x++
+          continue
+        }
         let len = 1
-        while (x + len < n && qr.isDark(y, x + len) === dark) len++
-        runs.push({ dark, len })
+        while (x + len < n && qr.isDark(y, x + len)) len++
+        runs.push({ x, y, len })
         x += len
       }
-      out.push(runs)
     }
-    return out
+    return { n, runs }
   })
 
   let size = () => props.moduleSize ?? MODULE_SIZE
+  let margin = () => props.margin ?? MARGIN
+  let side = () => grid().n * size() + 2 * margin()
 
   return (
-    <view flexDirection="column" padding={props.margin ?? MARGIN} {...props.layout}>
+    <view repaintBoundary width={side()} height={side()} {...props.layout}>
       <d-rect color={props.background ?? "#ffffff"} radius={props.radius ?? RADIUS} />
-      {rows().map((runs) => (
-        <view flexDirection="row">
-          {runs.map((run) => (
-            <view width={run.len * size()} height={size()}>
-              {run.dark ? <d-rect color={props.color ?? "#000000"} /> : null}
-            </view>
-          ))}
-        </view>
+      {grid().runs.map((run) => (
+        <d-rect
+          x={margin() + run.x * size()}
+          y={margin() + run.y * size()}
+          w={run.len * size()}
+          h={size()}
+          color={props.color ?? "#000000"}
+        />
       ))}
     </view>
   )

package/src/radio.tsx

@@ -3,6 +3,7 @@ import type { LayoutProps } from "@solidrt/core"
 import { Pressable } from "./pressable"
 import { theme } from "./theme"
 import { densityScale } from "./policy"
+import { typeStyle } from "./typography"
 import type { StyleProps } from "./types"
 
 // Shared selection state for a group. Created and consumed within this module, so
@@ -91,7 +92,7 @@ export function Radio(props: RadioProps) {
         </Show>
       </view>
       <Show when={isText()} fallback={props.children}>
-        <text color={theme.color.text} fontSize={theme.text.body.size} lineHeight={theme.text.body.lineHeight}>
+        <text color={theme.color.text} {...typeStyle("body")}>
           {props.children}
         </text>
       </Show>

package/src/scroll-view.tsx

@@ -65,6 +65,7 @@ export function ScrollView(props: ScrollViewProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}

package/src/select.tsx

@@ -2,7 +2,9 @@ import { createSignal, createPortal, onLayout, getBoundingBox, Show, For, env }
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 import type { StyleProps } from "./types"
 
 export interface SelectOption {
@@ -47,12 +49,7 @@ export function Select(props: SelectProps) {
     props.onChange?.(v)
   }
 
-  let bodyText = (color: string) => ({
-    fontSize: theme.text.body.size,
-    lineHeight: theme.text.body.lineHeight,
-    color,
-    maxLines: 1,
-  })
+  let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
   // One option row, shared by both presentations; only the vertical padding
   // differs (the sheet gets taller touch targets).
@@ -64,8 +61,8 @@ export function Select(props: SelectProps) {
         alignItems: "center",
         paddingTop: p.padY,
         paddingBottom: p.padY,
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
       }}
       style={(s: PressState) => ({
         backgroundColor:
@@ -111,7 +108,7 @@ export function Select(props: SelectProps) {
         >
           <d-rect color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.options}>
-            {(o: SelectOption) => <OptionRow option={o} padY={Math.round(theme.spacing.sm * densityScale())} />}
+            {(o: SelectOption) => <OptionRow option={o} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"
@@ -159,10 +156,10 @@ export function Select(props: SelectProps) {
         alignItems: "center",
         justifyContent: "space-between",
         gap: theme.spacing.md,
-        paddingTop: Math.round(theme.spacing.sm * densityScale()),
-        paddingBottom: Math.round(theme.spacing.sm * densityScale()),
-        paddingLeft: Math.round(theme.spacing.md * densityScale()),
-        paddingRight: Math.round(theme.spacing.md * densityScale()),
+        paddingTop: space("sm"),
+        paddingBottom: space("sm"),
+        paddingLeft: space("md"),
+        paddingRight: space("md"),
         ...props.layout,
       }}
       style={(s: PressState) => ({

package/src/slider.tsx

@@ -90,6 +90,7 @@ export function Slider(props: SliderProps) {
   return (
     <view
       ref={(n: { id: number }) => (track = n)}
+      repaintBoundary
       flexDirection="row"
       alignItems="center"
       height={height()}
@@ -99,6 +100,7 @@ export function Slider(props: SliderProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       pointerEvents={props.disabled ? "none" : "auto"}
       onPointerDown={handleDown}
       onPointerMove={handleMove}

package/src/spacing.ts

@@ -0,0 +1,11 @@
+import { theme, type Theme } from "./theme"
+import { densityScale } from "./policy"
+
+// Density-scaled spacing: a theme.spacing token multiplied by the density
+// policy's metric scale, rounded to whole pixels. Use it for gaps and paddings
+// that should tighten under compact/dense density; read theme.spacing directly
+// only for distances that must not move with density. Reactive when called
+// inside a tracked scope, like any theme/policy read.
+export function space(token: keyof Theme["spacing"]): number {
+  return Math.round(theme.spacing[token] * densityScale())
+}

package/src/spinner.tsx

@@ -58,6 +58,7 @@ export function Spinner(props: SpinnerProps) {
       rotate={angle()}
       x={props.style?.x}
       y={props.style?.y}
+      opacity={props.style?.opacity}
     >
       <Show when={policy.motion !== "none"}>
         <Animate />

package/src/text-input.tsx

@@ -1,15 +1,21 @@
 import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
-import { setFocus } from "@solidrt/core"
+import { measureText, setFocus } from "@solidrt/core"
 import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
 
 // Caret thickness. Shared so the drawn caret and the scroll offset's reserved
 // edge column cannot drift apart.
 const CARET_WIDTH = 1
 
+// Shaping width handed to the detached value/placeholder text: effectively
+// unbounded, so a single line never wraps. The viewport clips it and scrollX
+// slides it.
+const TEXT_SHAPE_WIDTH = 1e9
+
 export interface TextInputProps {
   value?: string
   defaultValue?: string
@@ -134,25 +140,24 @@ export function TextInput(props: TextInputProps) {
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
   let showCaret = () => focused() && caretOn() && !showPlaceholder()
 
-  // The text is split at the caret into two nodes with a zero-size anchor view
-  // between them. Flow places the anchor at the caret x (the before-text width),
-  // and the caret is a detached d-rect inside it: detached nodes take no layout
-  // slot, so the anchor stays zero-width and the after-text is not shifted. The
-  // anchor stays mounted while the caret blinks; only a detached d-view toggles
-  // inside it, so turning the caret on and off never relays the row. The
-  // anchor sits at the row's vertical center (alignItems center, zero height),
-  // so the caret is offset up by half its height to straddle it. While the
-  // placeholder shows, value() is "" so the slices and the scroll offset are 0
-  // with no special case. The viewport node is the inner scroll container;
-  // createCaretScroll reads its laid-out width after layout, keeps the caret in
-  // view, and flushes the offset before paint.
-  let beforeCaret = () => value().slice(0, buffer.caret())
-  let afterCaret = () => value().slice(buffer.caret())
+  // Everything inside the viewport is detached: the value is one d-text shaped
+  // at an unbounded width and the caret a d-rect at the measured before-caret
+  // width, so typing, caret movement, blink and scroll never touch layout. The
+  // viewport carries an explicit height (detached content takes no layout
+  // slot) equal to the one-line paragraph height, which keeps the text where
+  // the old centered attached row sat. createCaretScroll keeps the caret in
+  // view and flushes the offset before paint; scrollX is a paint-time
+  // translate that also applies to detached children.
+  // All one-line metrics derive from the scaled body size, so the field, the
+  // caret, and the scroll math grow together under policy.textScale.
+  let fontSize = () => theme.text.body.size * policy.textScale
+  let rowHeight = () => Math.round(fontSize() * theme.text.body.lineHeight)
+  let caretX = () => measureText(value().slice(0, buffer.caret()), { fontSize: fontSize() }).width
   let scrollX = createCaretScroll(
     () => viewport,
     () => ({
       text: value(),
-      fontSize: theme.text.body.size,
+      fontSize: fontSize(),
       caret: buffer.caret(),
       // Constant, not tied to caret visibility: the caret's footprint does not
       // change as it blinks, so reserving the column only when shown would swing
@@ -162,11 +167,11 @@ export function TextInput(props: TextInputProps) {
   )
 
   let textStyle = (color: string) => ({
-    fontSize: theme.text.body.size,
+    w: TEXT_SHAPE_WIDTH,
+    fontSize: fontSize(),
     lineHeight: theme.text.body.lineHeight,
     color,
     maxLines: 1,
-    flexShrink: 0,
   })
 
   return (
@@ -174,15 +179,16 @@ export function TextInput(props: TextInputProps) {
       ref={(n: { id: number }) => (node = n)}
       flexDirection="row"
       alignItems="center"
-      paddingLeft={Math.round(theme.spacing.md * densityScale())}
-      paddingRight={Math.round(theme.spacing.md * densityScale())}
-      paddingTop={Math.round(theme.spacing.sm * densityScale())}
-      paddingBottom={Math.round(theme.spacing.sm * densityScale())}
+      paddingLeft={space("md")}
+      paddingRight={space("md")}
+      paddingTop={space("sm")}
+      paddingBottom={space("sm")}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerDown={handlePointerDown}
       onFocus={handleFocus}
       onBlur={handleBlur}
@@ -199,30 +205,25 @@ export function TextInput(props: TextInputProps) {
       <view
         ref={(n: { id: number }) => (viewport = n)}
         flex={1}
-        flexDirection="row"
-        alignItems="center"
+        height={rowHeight()}
         overflow="hidden"
         scrollX={scrollX()}
       >
         {showPlaceholder() ? (
-          <text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</text>
+          <d-text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</d-text>
         ) : (
-          <view flexDirection="row" alignItems="center" flexShrink={0}>
-            <text {...textStyle(textColor())}>{beforeCaret()}</text>
-            <view>
-              {showCaret() ? (
-                <d-view>
-                  <d-rect
-                    color={textColor()}
-                    y={-theme.text.body.size / 2}
-                    w={CARET_WIDTH}
-                    h={theme.text.body.size}
-                  />
-                </d-view>
-              ) : null}
-            </view>
-            <text {...textStyle(textColor())}>{afterCaret()}</text>
-          </view>
+          <>
+            <d-text {...textStyle(textColor())}>{value()}</d-text>
+            {showCaret() ? (
+              <d-rect
+                color={textColor()}
+                x={caretX()}
+                y={(rowHeight() - fontSize()) / 2}
+                w={CARET_WIDTH}
+                h={fontSize()}
+              />
+            ) : null}
+          </>
         )}
       </view>
     </view>

package/src/text.tsx

@@ -1,9 +1,26 @@
 import { createMemo } from "@solidjs/signals"
 import type { PointerProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps } from "./types"
+import { theme, type TextVariant } from "./theme"
+import { policy } from "./policy"
+import { typeWeight } from "./typography"
+
+// Semantic text colors, resolved through the theme. Curated: only tokens that
+// make sense as a text fill; style.color takes raw values for anything else.
+export type TextColor = "text" | "textMuted" | "primary" | "onPrimary" | "danger"
 
 export interface TextProps extends PointerProps {
   children?: any
+  // Typography role from the theme's type scale; defaults to "body". Explicit
+  // layout font props override the role's fields individually. fontSize
+  // (role-derived or explicit) is multiplied by policy.textScale and
+  // fontWeight carries the typeWeight low-DPI compensation; use the core
+  // <text> primitive for text that must not scale.
+  variant?: TextVariant
+  // Semantic color from the theme; defaults to "text". style.color still wins.
+  color?: TextColor
+  // Sugar for color="textMuted".
+  muted?: boolean
   ref?: (node: { id: number }) => void
   layout?: TextLayoutProps
   style?: StyleProps
@@ -22,6 +39,11 @@ const FONT_KEYS = [
 ]
 
 export function Text(props: TextProps) {
+  let role = () => theme.text[props.variant ?? "body"]
+  let size = () => (props.layout?.fontSize ?? role().size) * policy.textScale
+  let color = () =>
+    props.style?.color ?? theme.color[props.color ?? (props.muted ? "textMuted" : "text")]
+
   let box = createMemo(() => {
     let l = props.layout
     if (!l) return {}
@@ -40,6 +62,7 @@ export function Text(props: TextProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
@@ -54,12 +77,12 @@ export function Text(props: TextProps) {
       pointerEvents={props.pointerEvents}
     >
       <text
-        color={props.style?.color}
-        fontFamily={props.layout?.fontFamily}
-        fontSize={props.layout?.fontSize}
-        lineHeight={props.layout?.lineHeight}
+        color={color()}
+        fontFamily={props.layout?.fontFamily ?? theme.text.fontFamily}
+        fontSize={size()}
+        lineHeight={props.layout?.lineHeight ?? role().lineHeight}
         fontStyle={props.layout?.fontStyle}
-        fontWeight={props.layout?.fontWeight}
+        fontWeight={typeWeight(props.layout?.fontWeight ?? role().weight, size())}
         textAlign={props.layout?.textAlign}
         maxLines={props.layout?.maxLines}
       >

package/src/theme.ts

@@ -1,12 +1,24 @@
-import { createStore } from "@solidrt/core"
+import { createStore, mixColors } from "@solidrt/core"
 
 export type TextStyle = {
   size: number
   lineHeight: number
+  weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 }
 
+// The type scale's role names. <Text variant> and theme.text are keyed by these.
+export type TextVariant = "caption" | "label" | "body" | "title" | "heading"
+
 export type Theme = {
-  text: { body: TextStyle }
+  text: {
+    // Passed through to the core font stack: "sans" | "mono" | a family name.
+    fontFamily: string
+    caption: TextStyle
+    label: TextStyle
+    body: TextStyle
+    title: TextStyle
+    heading: TextStyle
+  }
   color: {
     // Window fill.
     background: string
@@ -25,18 +37,29 @@ export type Theme = {
     onPrimary: string
     // Validation / destructive.
     danger: string
+    // Hover tint for danger-colored controls.
+    dangerHover: string
     // Overlay dim behind modals.
     scrim: string
   }
-  spacing: { sm: number; md: number }
-  radius: { sm: number }
+  spacing: { sm: number; md: number; lg: number; xl: number }
+  radius: { sm: number; md: number; lg: number }
   borderWidth: { sm: number }
 }
 
-// Scheme-independent tokens, shared by both presets.
-const TEXT = { body: { size: 14, lineHeight: 1.5 } }
-const SPACING = { sm: 4, md: 8 }
-const RADIUS = { sm: 4 }
+// 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 },
+}
+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 = {
@@ -47,12 +70,16 @@ export let darkTheme: Theme = {
     surfaceAlt: "#21262d",
     surfaceHover: "#262c34",
     text: "#e6edf3",
-    textMuted: "rgba(230,237,243,0.5)",
+    // 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)",
     primary: "#1f6feb",
     primaryHover: "#388bfd",
     onPrimary: "#ffffff",
     danger: "#f85149",
+    dangerHover: "#ff7b72",
     scrim: "rgba(0,0,0,0.6)",
   },
   spacing: SPACING,
@@ -68,12 +95,13 @@ export let lightTheme: Theme = {
     surfaceAlt: "#eaeef2",
     surfaceHover: "#e0e5eb",
     text: "#1f2328",
-    textMuted: "rgba(31,35,40,0.5)",
+    textMuted: mixColors("#1f2328", "#ffffff", 0.4),
     border: "rgba(0,0,0,0.15)",
     primary: "#1f6feb",
     primaryHover: "#1a5fd0",
     onPrimary: "#ffffff",
     danger: "#cf222e",
+    dangerHover: "#a40e26",
     scrim: "rgba(0,0,0,0.4)",
   },
   spacing: SPACING,

package/src/tooltip.tsx

@@ -1,7 +1,9 @@
 import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
-import { policy, densityScale } from "./policy"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
 
 export interface TooltipProps {
   // The tooltip body. A string/number renders as themed text; anything else
@@ -68,20 +70,21 @@ export function Tooltip(props: TooltipProps) {
     return createPortal(
       <view
         ref={(n: { id: number }) => (bubble = n)}
+        repaintBoundary
         position="absolute"
         top={0}
         left={0}
         x={pos()?.x ?? -10000}
         y={pos()?.y ?? 0}
-        paddingTop={Math.round(theme.spacing.sm * densityScale())}
-        paddingBottom={Math.round(theme.spacing.sm * densityScale())}
-        paddingLeft={Math.round(theme.spacing.md * densityScale())}
-        paddingRight={Math.round(theme.spacing.md * densityScale())}
+        paddingTop={space("sm")}
+        paddingBottom={space("sm")}
+        paddingLeft={space("md")}
+        paddingRight={space("md")}
         pointerEvents="none"
       >
         <d-rect color={theme.color.surfaceAlt} radius={theme.radius.sm} />
         <Show when={isText()} fallback={props.content}>
-          <text color={theme.color.text} fontSize={theme.text.body.size} lineHeight={theme.text.body.lineHeight}>
+          <text color={theme.color.text} {...typeStyle("body")}>
             {props.content}
           </text>
         </Show>

package/src/types.ts

@@ -17,6 +17,7 @@ export interface StyleProps {
   y?: number
   rotate?: number
   scale?: number
+  opacity?: number
 }
 
 // Text shaping affects measurement, so font props belong with layout rather

package/src/typography.ts

@@ -0,0 +1,57 @@
+import { brightness } from "@solidrt/core"
+import { theme, type TextStyle, type TextVariant } from "./theme"
+import { policy } from "./policy"
+
+// Below this effective font size, light-on-dark text on a low-DPI display
+// needs an extra compensation step (edge pixels dominate small glyphs).
+const SMALL_TEXT = 16
+
+// The rendering polarity of `text` drawn on `fill`, for typeWeight/typeStyle:
+// true when the text is the lighter of the two. Returns undefined (= fall
+// back to the theme's default polarity) when either side is not a comparable
+// color (gradients, "transparent").
+export function lightOnDark(text: unknown, fill: unknown): boolean | undefined {
+  if (typeof text !== "string" || typeof fill !== "string" || fill === "transparent") return undefined
+  return brightness(text) > brightness(fill)
+}
+
+// The theme's default polarity, derived from its own palette: light text on
+// a dark window background means a dark scheme. Nothing to declare per
+// preset, and it cannot disagree with the colors.
+function themeOnDark(): boolean {
+  return lightOnDark(theme.color.text, theme.color.background) ?? false
+}
+
+// A themed font weight with low-DPI rendering compensation applied. The
+// renderer (Impeller) rasterizes glyphs unhinted and composites the coverage
+// in nonlinear sRGB, which steals stem ink from light-on-dark text only (and
+// donates it to dark-on-light); the loss grows as glyphs shrink. Compensated
+// text adds policy.textWeightDelta (0 on high-DPI displays) plus one extra
+// step under SMALL_TEXT px; dark-on-light text passes through untouched.
+// `onDark` is the run's own polarity where the caller knows both colors (use
+// the lightOnDark() helper, like Button does for its fills); omitted, it
+// defaults to the theme's palette polarity. `size` is the effective
+// (post-textScale) font size. Clamped to the 900 ceiling; reactive like any
+// theme/policy read.
+export function typeWeight(weight: number, size: number, onDark?: boolean): TextStyle["weight"] {
+  let delta = (onDark ?? themeOnDark()) ? policy.textWeightDelta : 0
+  if (delta > 0 && size < SMALL_TEXT) delta += 100
+  return Math.min(900, weight + delta) as TextStyle["weight"]
+}
+
+// Resolved font props for a type-scale role, with the text policies applied:
+// spread onto a <text> or d-text. fontSize carries policy.textScale
+// (lineHeight is relative to the size, so it scales implicitly), fontWeight
+// carries the typeWeight compensation (pass `onDark` when the text sits on a
+// known fill). Reactive when called inside a tracked scope, like any
+// theme/policy read.
+export function typeStyle(variant: TextVariant, onDark?: boolean) {
+  let role = theme.text[variant]
+  let size = role.size * policy.textScale
+  return {
+    fontFamily: theme.text.fontFamily,
+    fontSize: size,
+    lineHeight: role.lineHeight,
+    fontWeight: typeWeight(role.weight, size, onDark),
+  }
+}

package/src/view.tsx

@@ -21,6 +21,7 @@ export function View(props: ViewProps) {
       y={props.style?.y}
       scale={props.style?.scale}
       rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}