@solidrt/components 0.0.21 → 0.0.23

package/AGENTS.md

@@ -28,7 +28,7 @@ Most components group props into two objects, plus top-level event handlers:
 
 - `Window` - root surface; renders a core `<window>`, so `render()` accepts it.
   Applies `layout` and `style.backgroundColor` only (a window cannot be
-  transformed or bordered). Also: `title`, `fullscreen`, `vsync`, `fps`.
+  transformed or bordered). Also: `title`, `fullscreen`.
 - `View` - general box; draws a background/border when the matching `style`
   props are set.
 - `Text` - text in a layout box; font fields go in `layout`, `color` in `style`.
@@ -37,7 +37,7 @@ Most components group props into two objects, plus top-level event handlers:
   uncontrolled, plus `placeholder`, `maxLength`, `autoFocus`, `disabled`.
 - `ScrollView` - scrollable region; vertical by default, `horizontal` to flip.
   Wheel + drag, no momentum yet. Backed by `createScroll` from
-  `@solidrt/core/scroll` (headless offset+clamp geometry).
+  `@solidrt/core` (headless offset+clamp geometry).
 - `Pressable` - pressable box; `onPress` on a primary press released inside,
   `disabled` opts out. `children`/`style` can be functions of `{ pressed,
   hovered }`. No pointer capture: a drag out cancels via onPointerLeave.
@@ -85,6 +85,23 @@ Most components group props into two objects, plus top-level event handlers:
   `setTheme({...})` merges a one-level-deep override. Default is dark. Color
   tokens: `background`, `surface`, `surfaceAlt`, `text`, `textMuted`, `border`,
   `primary`, `onPrimary`, `danger`, `scrim`.
+- `policy` / `setPolicy` / `setPolicyResolver` / `defaultPolicyResolver` /
+  `densityScale` - shared REACTIVE behavior (theme answers "how does it look",
+  policy answers "how does it behave"). Derived from `@solidrt/core`'s
+  `capabilities`/`env` (touch vs. desktop, window size class, display scale).
+  Fields: `interaction` (`"touch" | "desktop" | "hybrid"`, gates hover vs.
+  long-press affordances), `density` (`"comfortable" | "compact" | "dense"`,
+  drives `densityScale()`: 1 / 0.85 / 0.7), `motion` (`"normal" | "reduced" |
+  "none"`), `focusRing` (boolean), `textScale`/`textWeightDelta` (Dynamic-Type
+  and low-DPI weight compensation, consumed by `Text`), `navigation`
+  (`"bottomTabs" | "rail" | "sidebar"`) and `layout` (`"singlePane" |
+  "twoPane"`, both recommendations derived from window size class). Read
+  `policy.*` directly (reactive getters, like `theme`); `setPolicy({ field:
+  value })` pins one field regardless of the derived value, `setPolicy({
+  field: undefined })` hands it back to the resolver; `setPolicyResolver(caps
+  => Policies)` replaces the whole derivation for full custom control.
+  `Tooltip`, `Select`, `ContextMenu` fork on `policy.interaction`; `NavShell`
+  on `policy.navigation`; `SplitView` on `policy.layout`.
 
 ## Minimal app (verified to render)
 

package/README.md

@@ -28,6 +28,41 @@ setTheme({ color: { primary: "#ff2d55" } })   // override one token
 
 The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`, `onPrimary`, `danger`, and `scrim` (modal dim). Non-color tokens are `spacing`, `radius`, `borderWidth`, and `text` (font sizes), shared across presets.
 
+## Policies
+
+Theme answers "how does it look"; policies answer "how does it behave". Policies are a second reactive layer, derived from the platform facts in `@solidrt/core` (`capabilities`, `env`), so components adapt to touch vs. desktop, window size, and display without every app wiring that logic itself.
+
+```jsx
+import { policy, setPolicy, densityScale } from "@solidrt/components"
+
+policy.interaction   // touch vs. desktop affordances (hover, long-press, ...)
+policy.density       // control/spacing scale
+```
+
+`policy` fields:
+
+| Field             | Type                                          | Description                                                                 |
+| ----------------- | ---------------------------------------------- | ----------------------------------------------------------------------------- |
+| `interaction`     | `"touch" \| "desktop" \| "hybrid"`             | Which interaction affordances a component shows (hover states vs. long-press). |
+| `density`         | `"comfortable" \| "compact" \| "dense"`        | Control/hit-target/spacing scale; see `densityScale()`.                       |
+| `motion`          | `"normal" \| "reduced" \| "none"`              | Animation intensity.                                                          |
+| `focusRing`       | `boolean`                                      | Whether focused controls draw a visible focus indicator.                      |
+| `textScale`       | `number`                                       | Multiplier on type-scale font sizes; defaults to the OS text-scale preference. |
+| `textWeightDelta` | `number`                                       | Weight compensation (in steps of 100) for light-on-dark text on low-DPI displays. |
+| `navigation`      | `"bottomTabs" \| "rail" \| "sidebar"`          | Recommended nav layout, derived from window size class.                       |
+| `layout`          | `"singlePane" \| "twoPane"`                    | Recommended single vs. two-pane layout, derived from window size class.       |
+
+Reads are reactive like `theme`, so a window resize or the first mouse move on a touch-capable device updates every consuming component live.
+
+```jsx
+setPolicy({ density: "compact" })    // pin a field, overriding the derived value
+setPolicy({ density: undefined })    // hand it back to the resolver
+```
+
+`setPolicyResolver((caps) => Policies)` replaces the whole system-derivation function for full custom control; `defaultPolicyResolver` is exported to wrap or extend instead of replacing it outright.
+
+`densityScale()` is a reactive multiplier (1 / 0.85 / 0.7 for comfortable/compact/dense) driven by `policy.density`, used internally for spacing and hit-target sizing.
+
 ## Layout and style
 
 Most components group their props into two objects:
@@ -74,8 +109,6 @@ function App() {
 | ------------ | ------------- | ------- | ------------------------------------ |
 | `title`      | `string`      | -       | Window title.                        |
 | `fullscreen` | `boolean`     | -       | Open fullscreen.                     |
-| `vsync`      | `boolean`     | -       | Enable vsync.                        |
-| `fps`        | `boolean`     | -       | Show an FPS counter.                 |
 | `layout`     | `LayoutProps` | -       | Layout properties.                   |
 | `style`      | `StyleProps`  | -       | Only `backgroundColor` is applied.   |
 | `children`   | `any`         | -       | Content.                             |
@@ -256,7 +289,7 @@ Accepts all pointer event props, plus:
 | `ref`        | `(node: { id: number }) => void` | Reference to the outer box.                   |
 | `children`   | `any`                            | Scrollable content.                          |
 
-The underlying geometry primitive `createScroll` is available from `@solidrt/core/scroll` for building custom scrollers.
+The underlying geometry primitive `createScroll` is available from `@solidrt/core` for building custom scrollers.
 
 ### Pressable
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.15",
-    "@solidrt/core": "0.0.21"
+    "@solidrt/core": "0.0.23"
   }
 }

package/src/scroll-view.tsx

@@ -1,4 +1,4 @@
-import { createScroll } from "@solidrt/core/scroll"
+import { createScroll } from "@solidrt/core"
 import type { LayoutProps, PointerEvent, PointerProps, WheelEvent } from "@solidrt/core"
 import type { StyleProps } from "./types"
 

package/src/window.tsx

@@ -5,8 +5,6 @@ export interface WindowProps extends PointerProps {
   children?: any
   title?: string
   fullscreen?: boolean
-  vsync?: boolean
-  fps?: boolean
   layout?: LayoutProps
   style?: StyleProps
 }
@@ -19,8 +17,6 @@ export function Window(props: WindowProps) {
       {...props.layout}
       title={props.title}
       fullscreen={props.fullscreen}
-      vsync={props.vsync}
-      fps={props.fps}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}