@solidrt/components 0.0.5 → 0.0.7

package/README.md

@@ -12,48 +12,128 @@ bun add @solidrt/components
 
 Appearance (colors, spacing, border, font size) is controlled via the shared theme. Call `setTheme` from `@solidrt/components` to override defaults.
 
+## Layout and style
+
+Most components group their props into two objects:
+
+- `layout` - properties that feed the layout engine (flexbox/grid, sizing, padding, margin, position). Changing them triggers a relayout. This is the core `LayoutProps` set.
+- `style` - paint-only properties that never affect layout: `color`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, and the transform `x`, `y`, `rotate`, `scale`.
+
+Event handlers (`onPointerDown`, `onKeyDown`, etc.) are passed directly as top-level props.
+
+`StyleProps`:
+
+| Prop              | Type                                       | Description                          |
+| ----------------- | ------------------------------------------ | ------------------------------------ |
+| `color`           | `string`                                   | Text color (used by `Text`).         |
+| `backgroundColor` | `string`                                   | Fill color.                          |
+| `borderColor`     | `string`                                   | Stroke color (when `borderWidth` set). |
+| `borderWidth`     | `number`                                   | Border stroke width.                 |
+| `borderRadius`    | `number \| [number, number, number, number]` | Corner radius.                     |
+| `x` / `y`         | `number`                                   | Translation offset.                  |
+| `rotate`          | `number`                                   | Rotation.                            |
+| `scale`           | `number`                                   | Scale factor.                        |
+
 ## Components
 
-### SafeArea
+### Window
 
-Wraps its children in a view that applies padding to avoid system UI intrusions (status bars, home indicators, notches, etc.).
+The root surface of an app. Accepts `layout` and the `backgroundColor` from `style`; a window cannot be transformed or bordered.
 
 ```jsx
-import { SafeArea } from "@solidrt/components"
+import { Window } from "@solidrt/components"
 
 function App() {
   return (
-    <window>
-      <SafeArea top bottom>
-        <text>Content clear of system UI</text>
-      </SafeArea>
-    </window>
+    <Window title="My App" style={{ backgroundColor: "#111" }}>
+      {/* ... */}
+    </Window>
   )
 }
 ```
 
-Top and bottom insets are applied by default. Pass `false` to opt out of an edge, or a number to apply the inset with a minimum padding.
+**Props**
+
+| Prop         | Type          | Default | Description                          |
+| ------------ | ------------- | ------- | ------------------------------------ |
+| `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.                             |
+
+### 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.
 
 ```jsx
-// top only
-<SafeArea bottom={false}>
+import { View } from "@solidrt/components"
+
+<View
+  layout={{ padding: 16, flexDirection: "column", gap: 8 }}
+  style={{ backgroundColor: "#222", borderRadius: 8 }}
+>
+  {/* ... */}
+</View>
+```
 
-// apply top and bottom insets, with a minimum of 16px each
-<SafeArea top={16} bottom={16}>
+**Props**
 
-// all four edges
-<SafeArea top bottom left right>
+Accepts all pointer event props, plus:
+
+| Prop       | Type                          | Description           |
+| ---------- | ----------------------------- | --------------------- |
+| `layout`   | `LayoutProps`                 | Layout properties.    |
+| `style`    | `StyleProps`                  | Paint properties.     |
+| `ref`      | `(node: { id: number }) => void` | Node reference.    |
+| `children` | `any`                         | Content.              |
+
+### Text
+
+Renders text inside a layout box. Font properties live in `layout` (they affect measurement); `color` lives in `style`.
+
+```jsx
+import { Text } from "@solidrt/components"
+
+<Text layout={{ fontSize: 18, maxLines: 2 }} style={{ color: "#fff" }}>
+  Hello
+</Text>
 ```
 
+`layout` accepts all `LayoutProps` plus the font fields `fontFamily`, `fontSize`, `lineHeight`, `fontStyle`, `fontWeight`, `textAlign`, and `maxLines`.
+
 **Props**
 
-| Prop       | Type                | Default | Description                                         |
-| ---------- | ------------------- | ------- | --------------------------------------------------- |
-| `top`      | `boolean \| number` | `true`  | Apply top inset. A number sets the minimum padding. |
-| `bottom`   | `boolean \| number` | `true`  | Apply bottom inset. A number sets the minimum padding. |
-| `left`     | `boolean \| number` | `false` | Apply left inset. A number sets the minimum padding. |
-| `right`    | `boolean \| number` | `false` | Apply right inset. A number sets the minimum padding. |
-| `children` | `any`               | -       | Content to render inside the safe area.             |
+Accepts all pointer event props, plus:
+
+| Prop       | Type                          | Description                       |
+| ---------- | ----------------------------- | --------------------------------- |
+| `layout`   | `TextLayoutProps`             | Layout properties plus font fields. |
+| `style`    | `StyleProps`                  | `color` and transform.            |
+| `ref`      | `(node: { id: number }) => void` | Node reference.                |
+| `children` | `any`                         | Text content.                     |
+
+### Image
+
+Loads and displays an image from a URL or raw bytes.
+
+```jsx
+import { Image } from "@solidrt/components"
+
+function Avatar() {
+  return <Image src="https://example.com/avatar.png" layout={{ width: 64, height: 64 }} />
+}
+```
+
+**Props**
+
+Accepts `layout`, `style`, and all pointer event props, plus:
+
+| Prop  | Type                   | Description                                |
+| ----- | ---------------------- | ------------------------------------------ |
+| `src` | `string \| Uint8Array` | URL to fetch, or raw image bytes to decode |
 
 ### TextInput
 
@@ -71,7 +151,7 @@ function NameField() {
       onInput={setName}
       onSubmit={(v) => console.log("submitted", v)}
       placeholder="Your name"
-      width={240}
+      layout={{ width: 240 }}
     />
   )
 }
@@ -79,39 +159,61 @@ function NameField() {
 
 **Props**
 
-| Prop           | Type                       | Default | Description                                                  |
-| -------------- | -------------------------- | ------- | ------------------------------------------------------------ |
-| `value`        | `string`                   | -       | Controlled value. If omitted, the component is uncontrolled. |
-| `defaultValue` | `string`                   | `""`    | Initial value for uncontrolled use                           |
-| `onInput`      | `(value: string) => void`  | -       | Fires on every change                                        |
-| `onSubmit`     | `(value: string) => void`  | -       | Fires on Enter                                               |
-| `onFocus`      | `() => void`               | -       | Fires when the field gains focus                             |
-| `onBlur`       | `() => void`               | -       | Fires when the field loses focus                             |
-| `placeholder`  | `string`                   | -       | Shown when value is empty and the field is not focused       |
-| `maxLength`    | `number`                   | -       | Truncates input to this length                               |
-| `disabled`     | `boolean`                  | `false` | Ignores pointer and key events when true                     |
-| `autoFocus`    | `boolean`                  | `false` | Focuses on mount                                             |
-| `width`        | `number \| "auto" \| "N%"` | -       | Field width                                                  |
+| Prop           | Type                      | Default | Description                                                  |
+| -------------- | ------------------------- | ------- | ------------------------------------------------------------ |
+| `value`        | `string`                  | -       | Controlled value. If omitted, the component is uncontrolled. |
+| `defaultValue` | `string`                  | `""`    | Initial value for uncontrolled use.                          |
+| `onInput`      | `(value: string) => void` | -       | Fires on every change.                                       |
+| `onSubmit`     | `(value: string) => void` | -       | Fires on Enter.                                              |
+| `onFocus`      | `() => void`              | -       | Fires when the field gains focus.                            |
+| `onBlur`       | `() => void`              | -       | Fires when the field loses focus.                            |
+| `placeholder`  | `string`                  | -       | Shown when value is empty and the field is not focused.      |
+| `maxLength`    | `number`                  | -       | Truncates input to this length.                              |
+| `disabled`     | `boolean`                 | `false` | Ignores pointer and key events when true.                    |
+| `autoFocus`    | `boolean`                 | `false` | Focuses on mount.                                            |
+| `layout`       | `LayoutProps`             | -       | Layout properties (e.g. `width`).                            |
+| `style`        | `StyleProps`              | -       | Overrides theme colors, border, and radius.                  |
 
-### Image
+### SafeArea
 
-Loads and displays an image from a URL or raw bytes.
+Wraps its children in a view that applies padding to avoid system UI intrusions (status bars, home indicators, notches, etc.).
 
 ```jsx
-import { Image } from "@solidrt/components"
+import { SafeArea } from "@solidrt/components"
 
-function Avatar() {
-  return <Image src="https://example.com/avatar.png" width={64} height={64} />
+function App() {
+  return (
+    <Window>
+      <SafeArea top bottom>
+        <Text>Content clear of system UI</Text>
+      </SafeArea>
+    </Window>
+  )
 }
 ```
 
-**Props**
+Top and bottom insets are applied by default. Pass `false` to opt out of an edge, or a number to apply the inset with a minimum padding.
+
+```jsx
+// top only
+<SafeArea bottom={false}>
 
-Accepts all layout, transform, and pointer event props, plus:
+// apply top and bottom insets, with a minimum of 16px each
+<SafeArea top={16} bottom={16}>
 
-| Prop  | Type                   | Description                                  |
-| ----- | ---------------------- | -------------------------------------------- |
-| `src` | `string \| Uint8Array` | URL to fetch, or raw image bytes to decode   |
+// all four edges
+<SafeArea top bottom left right>
+```
+
+**Props**
+
+| Prop       | Type                | Default | Description                                            |
+| ---------- | ------------------- | ------- | ------------------------------------------------------ |
+| `top`      | `boolean \| number` | `true`  | Apply top inset. A number sets the minimum padding.    |
+| `bottom`   | `boolean \| number` | `true`  | Apply bottom inset. A number sets the minimum padding. |
+| `left`     | `boolean \| number` | `false` | Apply left inset. A number sets the minimum padding.   |
+| `right`    | `boolean \| number` | `false` | Apply right inset. A number sets the minimum padding.  |
+| `children` | `any`               | -       | Content to render inside the safe area.                |
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -14,7 +14,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-beta.13",
-    "@solidrt/core": "0.0.5"
+    "@solidjs/signals": "2.0.0-beta.14",
+    "@solidrt/core": "0.0.7"
   }
 }

package/src/image.tsx

@@ -1,14 +1,16 @@
 import { createSignal, onCleanup } from "@solidjs/signals"
 import { decodeImage, createTexture } from "@solidrt/core/gpu"
-import type { LayoutProps, TransformProps, PointerProps } from "@solidrt/core"
+import type { LayoutProps, PointerProps } from "@solidrt/core"
+import type { StyleProps } from "./types"
 
-export interface ImageProps extends LayoutProps, TransformProps, PointerProps {
+export interface ImageProps extends PointerProps {
   src: string | Uint8Array
+  layout?: LayoutProps
+  style?: StyleProps
 }
 
 //TODO onLoad, onError
 //TODO release texture in onCleanup
-//TODO forward all LayoutProps (currently only the common subset)
 export function Image(props: ImageProps) {
   let [res] = createSignal(async () => {
     let bytes: Uint8Array
@@ -24,6 +26,7 @@ export function Image(props: ImageProps) {
   })
 
   let src = () => res()?.id
+  let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
   onCleanup(() => {
     //TODO release texture
@@ -31,36 +34,36 @@ export function Image(props: ImageProps) {
 
   return (
     <view
-      width={props.width}
-      height={props.height}
-      flex={props.flex}
-      flexGrow={props.flexGrow}
-      flexShrink={props.flexShrink}
-      alignSelf={props.alignSelf}
-      margin={props.margin}
-      marginTop={props.marginTop}
-      marginBottom={props.marginBottom}
-      marginLeft={props.marginLeft}
-      marginRight={props.marginRight}
-      padding={props.padding}
-      position={props.position}
-      top={props.top}
-      right={props.right}
-      bottom={props.bottom}
-      left={props.left}
-      x={props.x}
-      y={props.y}
-      scale={props.scale}
-      rotate={props.rotate}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onKeyDown={props.onKeyDown}
+      onKeyUp={props.onKeyUp}
+      onTextInput={props.onTextInput}
       pointerEvents={props.pointerEvents}
     >
+      {props.style?.backgroundColor != null ? (
+        <d-rect color={props.style.backgroundColor} radius={props.style?.borderRadius} />
+      ) : null}
       <texture src={src()} />
+      {hasBorder() ? (
+        <d-rect
+          drawStyle="stroke"
+          color={props.style?.borderColor ?? "transparent"}
+          strokeWidth={props.style?.borderWidth}
+          radius={props.style?.borderRadius}
+        />
+      ) : null}
     </view>
   )
 }

package/src/index.ts

@@ -1,4 +1,8 @@
+export { Window, type WindowProps } from "./window"
+export { View, type ViewProps } from "./view"
+export { Text, type TextProps } from "./text"
 export { Image, type ImageProps } from "./image"
 export { SafeArea } from "./safe-area"
 export { TextInput, type TextInputProps } from "./text-input"
-export { theme, setTheme, type Theme } from "./theme"
+export { theme, setTheme, type Theme } from "./theme"
+export type { StyleProps, TextLayoutProps } from "./types"

package/src/safe-area.tsx

@@ -6,6 +6,7 @@ export function SafeArea(props: {
   bottom?: boolean | number
   left?: boolean | number
   right?: boolean | number
+  relative?: boolean
   children?: any
 }) {
   let [insets, setInsets] = createSignal({ top: 0, bottom: 0, left: 0, right: 0 })
@@ -28,6 +29,7 @@ export function SafeArea(props: {
     <view
       flex={1}
       flexDirection="column"
+      position={props.relative !== false ? "relative" : undefined}
       marginTop={pad("top")}
       marginBottom={pad("bottom")}
       marginLeft={pad("left")}

package/src/text-input.tsx

@@ -1,9 +1,9 @@
-import { createSignal, onCleanup } from "@solidjs/signals"
-import { measureText, setFocus } from "@solidrt/core"
+import { createSignal, flush, onCleanup } from "@solidjs/signals"
+import { getBoundingBox, measureText, onLayout, setFocus } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import type { StyleProps } from "./types"
 import { theme } from "./theme"
 
-type Dimension = number | "auto" | `${number}%`
-
 export interface TextInputProps {
   value?: string
   defaultValue?: string
@@ -17,7 +17,8 @@ export interface TextInputProps {
   disabled?: boolean
   autoFocus?: boolean
 
-  width?: Dimension
+  layout?: LayoutProps
+  style?: StyleProps
 }
 
 // V1: single-line, caret-at-end only, no selection, no mid-string editing.
@@ -27,8 +28,10 @@ export function TextInput(props: TextInputProps) {
   let [internalValue, setInternalValue] = createSignal(props.defaultValue ?? "")
   let [focused, setFocused] = createSignal(false)
   let [caretOn, setCaretOn] = createSignal(true)
+  let [viewportWidth, setViewportWidth] = createSignal(0)
 
   let node: { id: number } | undefined
+  let viewport: { id: number } | undefined
   let blinkId: any = null
 
   let value = () => props.value ?? internalValue()
@@ -87,13 +90,30 @@ export function TextInput(props: TextInputProps) {
     if (blinkId != null) clearInterval(blinkId)
   })
 
+  // Style overrides fall back to theme defaults.
+  let textColor = () => props.style?.color ?? theme.color.text
+  let surfaceColor = () => props.style?.backgroundColor ?? theme.color.surface
+  let borderColor = () => props.style?.borderColor ?? theme.color.border
+  let borderWidth = () => props.style?.borderWidth ?? theme.borderWidth.sm
+  let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
+
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
   let displayText = () => (showPlaceholder() ? (props.placeholder ?? "") : value())
-  let displayColor = () => (showPlaceholder() ? theme.color.textMuted : theme.color.text)
+  let displayColor = () => (showPlaceholder() ? theme.color.textMuted : textColor())
+
+  // Viewport width is the inner scroll container's own laid-out width, read
+  // after layout. This works for numeric, "auto" and "%" widths alike (no need
+  // to subtract padding: the padding lives on the outer view). getBoundingBox
+  // is a snapshot, so we push it into a signal from onLayout. The flush drains
+  // the resulting scrollX update synchronously, before paint, so the scroll
+  // tracks the width in the same frame instead of trailing it by one.
+  onLayout(() => {
+    if (!viewport) return
+    let w = getBoundingBox(viewport)?.width ?? 0
+    if (w !== viewportWidth()) setViewportWidth(w)
+    flush()
+  })
 
-  // V1: viewport width derived from numeric props.width minus padding.
-  // For "auto" / "%" widths, fall back to 0 (no scroll, caret may overflow).
-  let viewportWidth = () => (typeof props.width === "number" ? props.width - 2 * theme.spacing.md : 0)
   let caretWidth = () => (focused() && !showPlaceholder() ? 1 : 0)
   let scrollX = () => {
     if (showPlaceholder()) return 0
@@ -111,25 +131,30 @@ export function TextInput(props: TextInputProps) {
       }}
       flexDirection="row"
       alignItems="center"
-      width={props.width}
       paddingLeft={theme.spacing.md}
       paddingRight={theme.spacing.md}
       paddingTop={theme.spacing.sm}
       paddingBottom={theme.spacing.sm}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
       onPointerDown={handlePointerDown}
       onFocus={handleFocus}
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
       onTextInput={handleTextInput}
     >
-      <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+      <d-rect color={surfaceColor()} radius={borderRadius()} />
       <d-rect
         drawStyle="stroke"
-        color={theme.color.border}
-        strokeWidth={theme.borderWidth.sm}
-        radius={theme.radius.sm}
+        color={borderColor()}
+        strokeWidth={borderWidth()}
+        radius={borderRadius()}
       />
       <view
+        ref={(n: { id: number }) => (viewport = n)}
         flex={1}
         flexDirection="row"
         alignItems="center"

package/src/text.tsx

@@ -0,0 +1,70 @@
+import { createMemo } from "@solidjs/signals"
+import type { PointerProps } from "@solidrt/core"
+import type { StyleProps, TextLayoutProps } from "./types"
+
+export interface TextProps extends PointerProps {
+  children?: any
+  ref?: (node: { id: number }) => void
+  layout?: TextLayoutProps
+  style?: StyleProps
+}
+
+// Font keys live in layout (they affect measurement) but belong on the inner
+// <text> node, not the box <view>. Strip them out before spreading layout.
+const FONT_KEYS = [
+  "fontFamily",
+  "fontSize",
+  "lineHeight",
+  "fontStyle",
+  "fontWeight",
+  "textAlign",
+  "maxLines",
+]
+
+export function Text(props: TextProps) {
+  let box = createMemo(() => {
+    let l = props.layout
+    if (!l) return {}
+    let out: Record<string, unknown> = {}
+    for (let key in l) {
+      if (!FONT_KEYS.includes(key)) out[key] = (l as Record<string, unknown>)[key]
+    }
+    return out
+  })
+
+  return (
+    <view
+      ref={props.ref}
+      {...box()}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onKeyDown={props.onKeyDown}
+      onKeyUp={props.onKeyUp}
+      onTextInput={props.onTextInput}
+      pointerEvents={props.pointerEvents}
+    >
+      <text
+        color={props.style?.color}
+        fontFamily={props.layout?.fontFamily}
+        fontSize={props.layout?.fontSize}
+        lineHeight={props.layout?.lineHeight}
+        fontStyle={props.layout?.fontStyle}
+        fontWeight={props.layout?.fontWeight}
+        textAlign={props.layout?.textAlign}
+        maxLines={props.layout?.maxLines}
+      >
+        {props.children}
+      </text>
+    </view>
+  )
+}

package/src/types.ts

@@ -0,0 +1,33 @@
+import type { Color, LayoutProps } from "@solidrt/core"
+
+// The split between layout and style follows one rule: layout properties feed
+// into Taffy and changing them triggers a relayout; style properties are
+// paint-only and can change without affecting layout.
+
+// 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.
+export interface StyleProps {
+  color?: Color
+  backgroundColor?: Color
+  borderColor?: Color
+  borderWidth?: number
+  borderRadius?: number | [number, number, number, number]
+  x?: number
+  y?: number
+  rotate?: number
+  scale?: number
+}
+
+// Text shaping affects measurement, so font props belong with layout rather
+// than style. These end up on the inner <text> node, while the box layout
+// fields go on the wrapping <view>.
+export interface TextLayoutProps extends LayoutProps {
+  fontFamily?: "sans" | "mono" | (string & {})
+  fontSize?: number
+  lineHeight?: number
+  fontStyle?: "normal" | "italic"
+  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+  textAlign?: "left" | "right" | "center" | "justify"
+  maxLines?: number
+}

package/src/view.tsx

@@ -0,0 +1,54 @@
+import type { LayoutProps, PointerProps } from "@solidrt/core"
+import type { StyleProps } from "./types"
+
+export interface ViewProps extends PointerProps {
+  children?: any
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+export function View(props: ViewProps) {
+  let hasBackground = () =>
+    props.style?.backgroundColor != null || props.style?.borderRadius != null
+  let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
+
+  return (
+    <view
+      ref={props.ref}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onKeyDown={props.onKeyDown}
+      onKeyUp={props.onKeyUp}
+      onTextInput={props.onTextInput}
+      pointerEvents={props.pointerEvents}
+    >
+      {hasBackground() ? (
+        <d-rect
+          color={props.style?.backgroundColor ?? "transparent"}
+          radius={props.style?.borderRadius}
+        />
+      ) : null}
+      {props.children}
+      {hasBorder() ? (
+        <d-rect
+          drawStyle="stroke"
+          color={props.style?.borderColor ?? "transparent"}
+          strokeWidth={props.style?.borderWidth}
+          radius={props.style?.borderRadius}
+        />
+      ) : null}
+    </view>
+  )
+}

package/src/window.tsx

@@ -0,0 +1,31 @@
+import type { LayoutProps } from "@solidrt/core"
+import type { StyleProps } from "./types"
+
+export interface WindowProps {
+  children?: any
+  title?: string
+  fullscreen?: boolean
+  vsync?: boolean
+  fps?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// A window is the root surface: it can't be transformed or bordered, so only
+// the paint-only backgroundColor from style applies here.
+export function Window(props: WindowProps) {
+  return (
+    <window
+      {...props.layout}
+      title={props.title}
+      fullscreen={props.fullscreen}
+      vsync={props.vsync}
+      fps={props.fps}
+    >
+      {props.style?.backgroundColor != null ? (
+        <d-rect color={props.style.backgroundColor} />
+      ) : null}
+      {props.children}
+    </window>
+  )
+}