@solidrt/components 0.0.19 → 0.0.20

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/package.json

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

package/src/icon.tsx

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

package/src/index.ts

@@ -24,6 +24,7 @@ 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 { Icon, type IconProps } from "./icon"
 export { theme, setTheme, darkTheme, lightTheme, type Theme } from "./theme"
 export {
   policy,

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 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/text-input.tsx

@@ -1,5 +1,5 @@
 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"
@@ -10,6 +10,11 @@ import { policy, densityScale } from "./policy"
 // 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,20 +139,16 @@ 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.
+  let rowHeight = () => Math.round(theme.text.body.size * theme.text.body.lineHeight)
+  let caretX = () => measureText(value().slice(0, buffer.caret()), { fontSize: theme.text.body.size }).width
   let scrollX = createCaretScroll(
     () => viewport,
     () => ({
@@ -162,11 +163,11 @@ export function TextInput(props: TextInputProps) {
   )
 
   let textStyle = (color: string) => ({
+    w: TEXT_SHAPE_WIDTH,
     fontSize: theme.text.body.size,
     lineHeight: theme.text.body.lineHeight,
     color,
     maxLines: 1,
-    flexShrink: 0,
   })
 
   return (
@@ -199,30 +200,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() - theme.text.body.size) / 2}
+                w={CARET_WIDTH}
+                h={theme.text.body.size}
+              />
+            ) : null}
+          </>
         )}
       </view>
     </view>