@solidrt/components 0.0.49 → 0.0.51

package/docs/typography.md

@@ -0,0 +1,5 @@
+# Typography helpers
+
+`typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
+
+The compensation exists because the renderer rasterizes glyphs unhinted and composites in nonlinear sRGB, which thins light-on-dark text on low-DPI displays as glyphs shrink. `typeWeight(weight, size, onDark?)` adds `policy.textWeightDelta` (0 on high-DPI displays) plus one extra step below 16px; dark-on-light text passes through untouched. `lightOnDark(text, fill)` computes the polarity for a known pair of colors (Button uses it for its fills); omitted, the theme's own palette polarity is used.

package/docs/view.md

@@ -0,0 +1,14 @@
+# View
+
+A general-purpose box. Spreads `layout` onto the underlying view, applies the transform from `style`, and draws a background and/or border when those style props are set. Takes all pointer event props.
+
+```jsx
+import { View } from "@solidrt/components"
+
+<View
+  layout={{ padding: 16, flexDirection: "column", gap: 8 }}
+  style={{ backgroundColor: "#222", borderRadius: 8 }}
+>
+  {/* ... */}
+</View>
+```

package/docs/window.md

@@ -0,0 +1,15 @@
+# Window
+
+The root surface of an app: renders a core `<window>`, so `render()` accepts it. Applies `layout` and `style.backgroundColor` only (a window cannot be transformed or bordered), plus `title` and `fullscreen`.
+
+```jsx
+import { Window } from "@solidrt/components"
+
+function App() {
+  return (
+    <Window title="My App" style={{ backgroundColor: "#111" }}>
+      {/* ... */}
+    </Window>
+  )
+}
+```

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "license": "MIT",
+  "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./theme": "./src/theme.ts"
   },
   "files": [
     "src/",
+    "docs/",
     "examples/",
     "AGENTS.md"
   ],
@@ -18,6 +21,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.0",
-    "@solidrt/core": "0.0.49"
+    "@solidrt/core": "0.0.51"
   }
 }

package/src/badge.tsx

@@ -35,9 +35,11 @@ export function Badge(props: BadgeProps) {
         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
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.badge, ...props.style })
+  let bg = () => styled().backgroundColor ?? colors().bg
+  let fg = () => styled().color ?? colors().fg
+  let radius = () => styled().borderRadius ?? RADIUS
   // Resolved once via children(): the typeof probe and the mount sites must
   // share one build - reading the raw getter again would orphan native nodes.
   let resolved = children(() => props.children)
@@ -54,11 +56,11 @@ export function Badge(props: BadgeProps) {
       paddingTop={2}
       paddingBottom={2}
       {...props.layout}
-      x={props.style?.x}
-      y={props.style?.y}
-      scale={props.style?.scale}
-      rotate={props.style?.rotate}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      rotate={styled().rotate}
+      opacity={styled().opacity}
     >
       <d-rect color={bg()} radius={radius()} />
       <Show when={isText()} fallback={resolved()}>

package/src/button.tsx

@@ -4,6 +4,7 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle, lightOnDark } from "./typography"
+import { Spinner } from "./spinner"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -22,7 +23,10 @@ export interface ButtonProps {
   // stretches to the container's width (the default). Padding is the same at
   // every size.
   size?: ButtonSize
-  onPress?: () => void
+  // A returned promise makes this an async action: the button shows a
+  // centered spinner in place of the label (geometry unchanged) and ignores
+  // presses until it settles. Non-thenable returns are ignored.
+  onPress?: () => unknown
   disabled?: boolean
   // Focus-navigation candidacy (spatial nav, TV remotes); on by default.
   // Disabled buttons are never candidates.
@@ -37,44 +41,45 @@ export interface ButtonProps {
 const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
 
 // A themed press target: a padded, centered, accent-colored box with a label.
-// Press feedback is a slight scale, hover feedback a tint (non-touch
-// interaction policies only), both reactive reads of the press state so no
-// nodes are recreated. Override the box via style and the padding/sizing via
-// layout. A caller-set backgroundColor disables the hover tint: we cannot know
-// its hover variant. When disabled, it takes no pointer events at all.
-// Focus (spatial nav) draws a ring under the focusRing policy, text-colored
-// rather than primary so it stays visible on primary-filled buttons; Enter/
-// Space/remote-select activates (handled by createPress).
+// Press feedback is a slight scale, hover feedback the theme's overlayHover
+// tint drawn over the fill (non-touch interaction policies only), both
+// reactive reads of the press state so no nodes are recreated. Override the
+// box via style and the padding/sizing via layout; because hover is an
+// overlay, it composes over a caller-set backgroundColor too. When disabled,
+// it takes no pointer events at all. Focus (spatial nav) draws a ring under
+// the focusRing policy, text-colored rather than primary so it stays visible
+// on primary-filled buttons; Enter/Space/remote-select activates (handled by
+// createPress).
 export function Button(props: ButtonProps) {
-  // Fill, hover fill, and label color per variant, read reactively from the
-  // theme. No variant draws a border.
+  // Fill and label color per variant, read reactively from the theme. No
+  // variant draws a border.
   let colors = () => {
     let c = theme.color
     switch (props.variant ?? "primary") {
       case "secondary":
-        return { fill: c.secondary, hover: c.secondaryHover, label: c.onSecondary }
+        return { fill: c.secondary, label: c.onSecondary }
       case "ghost":
-        return { fill: "transparent", hover: c.surfaceHover, label: c.text }
+        return { fill: "transparent", label: c.text }
       case "danger":
-        return { fill: c.danger, hover: c.dangerHover, label: c.onPrimary }
+        return { fill: c.danger, label: c.onPrimary }
       default:
-        return { fill: c.primary, hover: c.primaryHover, label: c.onPrimary }
+        return { fill: c.primary, label: c.onPrimary }
     }
   }
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = (): StyleProps => ({ ...theme.components.button, ...props.style })
   let idleFill = () =>
     props.disabled
       ? props.variant === "ghost"
         ? "transparent"
         : theme.color.surface
       : colors().fill
-  let bg = (s: PressState) =>
-    props.style?.backgroundColor ??
-    (props.disabled
-      ? idleFill()
-      : s.hovered && policy.interaction !== "touch"
-        ? colors().hover
-        : colors().fill)
-  let radius = () => props.style?.borderRadius ?? theme.radius.md
+  let bg = () => styled().backgroundColor ?? idleFill()
+  // The hover feedback: the theme's overlay tint drawn over the fill, so it
+  // composes with any backgroundColor (variant, theme override, or caller).
+  let overlay = (s: PressState) =>
+    s.hovered && !props.disabled && policy.interaction !== "touch" ? theme.color.overlayHover : "transparent"
+  let radius = () => styled().borderRadius ?? theme.radius.md
   let label = () => (props.disabled ? theme.color.textMuted : colors().label)
   // Resolved once via children(): reading the raw children getter builds a new
   // subtree per read, so the typeof probe and the two mount sites below must
@@ -84,19 +89,19 @@ export function Button(props: ButtonProps) {
   // 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 ?? idleFill())
+  let labelOnDark = () => lightOnDark(label(), bg())
 
   // props (not a literal) so a swapped-in onPress is read at event time.
   let press = createPress(props)
   let style = () => ({
-    ...props.style,
+    ...styled(),
     ...(press.focused() && policy.focusRing ? { borderWidth: 2, borderColor: theme.color.text } : {}),
-    backgroundColor: bg(press.state()),
+    backgroundColor: bg(),
     borderRadius: radius(),
     // Always a number: a scale that flips from a number back to undefined
     // hits the transform decoder, which rejects null. Multiply so a
     // caller-set scale is preserved under the press feedback.
-    scale: (props.style?.scale ?? 1) * (press.pressed() && policy.motion !== "none" ? 0.97 : 1),
+    scale: (styled().scale ?? 1) * (press.pressed() && policy.motion !== "none" ? 0.97 : 1),
   })
 
   return (
@@ -109,6 +114,7 @@ export function Button(props: ButtonProps) {
       flexDirection="row"
       alignItems="center"
       justifyContent="center"
+      position="relative"
       paddingTop={space("md")}
       paddingBottom={space("md")}
       paddingLeft={space("lg")}
@@ -125,11 +131,17 @@ export function Button(props: ButtonProps) {
       pointerEvents={props.disabled ? "none" : undefined}
     >
       <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <d-rect color={overlay(press.state())} radius={style().borderRadius} />
       <Show when={isText()} fallback={resolved()}>
-        <text color={label()} {...typeStyle("body", labelOnDark())}>
+        <text color={press.pending() ? "transparent" : label()} {...typeStyle("body", labelOnDark())}>
           {resolved()}
         </text>
       </Show>
+      <Show when={press.pending()}>
+        <view position="absolute" top={0} bottom={0} left={0} right={0} alignItems="center" justifyContent="center">
+          <Spinner size={16} thickness={2} style={{ color: label() }} />
+        </view>
+      </Show>
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"

package/src/card.tsx

@@ -19,9 +19,11 @@ export interface CardProps {
 // style.borderWidth or style.borderColor to draw an outline. Override any paint
 // via style, spacing/sizing via layout.
 export function Card(props: CardProps) {
-  let bg = () => props.style?.backgroundColor ?? theme.color.surface
-  let radius = () => props.style?.borderRadius ?? theme.radius.lg
-  let hasBorder = () => props.style?.borderWidth != null || props.style?.borderColor != null
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.card, ...props.style })
+  let bg = () => styled().backgroundColor ?? theme.color.surface
+  let radius = () => styled().borderRadius ?? theme.radius.lg
+  let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
 
   return (
     <view
@@ -31,11 +33,11 @@ export function Card(props: CardProps) {
       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}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      rotate={styled().rotate}
+      opacity={styled().opacity}
     >
       <d-rect color={bg()} radius={radius()} />
       <Show when={props.title != null}>
@@ -47,8 +49,8 @@ export function Card(props: CardProps) {
       <Show when={hasBorder()}>
         <d-rect
           drawStyle="stroke"
-          color={props.style?.borderColor ?? theme.color.border}
-          strokeWidth={props.style?.borderWidth ?? theme.borderWidth.sm}
+          color={styled().borderColor ?? theme.color.border}
+          strokeWidth={styled().borderWidth ?? theme.borderWidth.sm}
           radius={radius()}
         />
       </Show>

package/src/checkbox.tsx

@@ -2,7 +2,8 @@ import { createSignal, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
+import { densityScale } from "./density"
+import { Icon } from "./icon"
 import type { StyleProps } from "./types"
 
 export interface CheckboxProps {
@@ -43,6 +44,7 @@ export function Checkbox(props: CheckboxProps) {
     borderColor: theme.color.border,
     borderWidth: theme.borderWidth.sm,
     borderRadius: theme.radius.sm,
+    ...theme.components.checkbox,
     ...props.style,
   })
 
@@ -52,6 +54,7 @@ export function Checkbox(props: CheckboxProps) {
       repaintBoundary
       width={size()}
       height={size()}
+      position="relative"
       {...props.layout}
       x={style().x}
       y={style().y}
@@ -63,14 +66,23 @@ export function Checkbox(props: CheckboxProps) {
     >
       <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
       <Show when={checked()}>
-        <d-path
-          d={check()}
-          drawStyle="stroke"
-          color={theme.color.onPrimary}
-          strokeWidth={2}
-          strokeCap="round"
-          strokeJoin="round"
-        />
+        <Show
+          when={theme.icons.check}
+          fallback={
+            <d-path
+              d={check()}
+              drawStyle="stroke"
+              color={theme.color.onPrimary}
+              strokeWidth={2}
+              strokeCap="round"
+              strokeJoin="round"
+            />
+          }
+        >
+          <view position="absolute" top={0} bottom={0} left={0} right={0} alignItems="center" justifyContent="center">
+            <Icon src={theme.icons.check!} size={Math.round(size() * 0.75)} color={theme.color.onPrimary} />
+          </view>
+        </Show>
       </Show>
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect

package/src/context-menu.tsx

@@ -91,9 +91,11 @@ export function ContextMenu(props: ContextMenuProps) {
       >
         <d-rect
           color={
-            press.pressed() || (press.hovered() && policy.interaction !== "touch")
-              ? theme.color.surfaceHover
-              : "transparent"
+            press.pressed()
+              ? theme.color.overlayPressed
+              : press.hovered() && policy.interaction !== "touch"
+                ? theme.color.overlayHover
+                : "transparent"
           }
         />
         <text {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>

package/src/density.tsx

@@ -0,0 +1,39 @@
+import { createContext, useContext } from "@solidrt/core"
+import { policy, type DensityPolicy } from "./policy"
+
+// Subtree density: a region (a toolbar, a table, a sidebar) tightens its
+// controls wholesale instead of per-child props. The context holds an
+// accessor so a reactive `value` stays live for consumers.
+let DensityContext = createContext<() => DensityPolicy | undefined>(() => undefined)
+
+export interface DensityProps {
+  value: DensityPolicy
+  children?: any
+}
+
+/**
+ * Overrides the density policy for its subtree: every density-scaled metric
+ * below - `space()`, control sizes, `Item` row paddings - resolves this value
+ * instead of the global `policy.density`. Nests; the nearest wins.
+ *
+ *   <Density value="compact">
+ *     <Item label="..." />   // compact rows, no per-item props
+ *   </Density>
+ */
+export function Density(props: DensityProps) {
+  return <DensityContext value={() => props.value}>{props.children}</DensityContext>
+}
+
+// How density maps to component metrics: a multiplier on control sizes,
+// paddings, and hit targets. Comfortable is the components' designed size.
+const DENSITY_SCALE: Record<DensityPolicy, number> = { comfortable: 1, compact: 0.85, dense: 0.7 }
+
+/**
+ * Reactive density multiplier for control metrics: the nearest <Density>
+ * above the calling scope, falling back to the global `policy.density`.
+ * Call it during component setup or inside JSX/thunks (an owner is needed to
+ * see a <Density> region; without one it reads the global policy).
+ */
+export function densityScale(): number {
+  return DENSITY_SCALE[useContext(DensityContext)() ?? policy.density]
+}

package/src/divider.tsx

@@ -18,7 +18,9 @@ export interface DividerProps {
 export function Divider(props: DividerProps) {
   let vertical = () => props.orientation === "vertical"
   let thickness = () => props.thickness ?? 1
-  let color = () => props.style?.backgroundColor ?? theme.color.border
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.divider, ...props.style })
+  let color = () => styled().backgroundColor ?? theme.color.border
 
   return (
     <view