@solidrt/components 0.0.50 → 0.0.52

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

@@ -1,8 +1,9 @@
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface DividerProps {
+export interface DividerProps extends TransitionProps {
   // Line direction. Horizontal (default) is a full-width rule; vertical is a
   // full-height rule for use inside a row.
   orientation?: "horizontal" | "vertical"
@@ -18,16 +19,22 @@ 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
+
+  let split = () => splitTransition(props.transition)
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       width={vertical() ? thickness() : "auto"}
       height={vertical() ? "auto" : thickness()}
       alignSelf="stretch"
       {...props.layout}
     >
-      <d-rect color={color()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={color()} />
     </view>
   )
 }

package/src/editor-field.tsx

@@ -0,0 +1,368 @@
+// The editable field shared by TextInput and the rich text editor: a
+// focusable box that edits a text buffer through the keyboard and text
+// session, lays its lines out with core's createTextEditorLayout, keeps the
+// caret in view and draws the caret; how a line's text is drawn and what the
+// buffer holds are the caller's (renderLine, buffer). Internal to the
+// package.
+import {
+  For,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  focusedNode,
+  setFocus,
+  startTextInput,
+  textInputActive,
+  untrack,
+} from "@solidrt/core"
+import { createTextEditorLayout } from "@solidrt/core/text-input"
+import type { EditorLine, TextBuffer } from "@solidrt/core/text-input"
+import type { Color, Gradient, KeyEvent, LayoutProps, PointerEvent, TextInputHints } from "@solidrt/core"
+import type { Element } from "solid-js"
+import type { MeasureTextOptions, TextRunRange } from "flux:rendertree"
+import { registerNavAction } from "./focus-nav"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
+import { theme } from "./theme"
+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 of the placeholder: effectively unbounded, so it never wraps;
+// the viewport clips it.
+const PLACEHOLDER_SHAPE_WIDTH = 1e9
+
+/** What the shell hands renderLine for one laid-out line. */
+export type LineRender = {
+  line: () => EditorLine
+  /** The field's font options (size, line height), the base for the line's text. */
+  font: () => MeasureTextOptions
+  /** The field's text color. */
+  color: () => Color | Gradient
+}
+
+export interface EditorFieldProps extends TransitionProps {
+  /**
+   * Creates the buffer the field edits, given the grapheme `step` from the
+   * field's geometry (createTextEditorLayout.step); called once.
+   */
+  buffer: (step: (text: string, offset: number, direction: "left" | "right") => number) => TextBuffer
+  /** Styled ranges over the text for the geometry (prepareText `runs`). */
+  runs?: () => TextRunRange[] | undefined
+  /** Draws one line: detached content at the line's y inside the viewport. */
+  renderLine: (r: LineRender) => Element
+
+  onSubmit?: (value: string) => void
+  onFocus?: () => void
+  onBlur?: () => void
+  placeholder?: string
+  disabled?: boolean
+  autoFocus?: boolean
+  multiline?: boolean
+  maxRows?: number
+  hints?: TextInputHints
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// The caret moves through the text (Left/Right/Home/End, Up/Down by line when
+// multiline), edits happen at the caret, and the inner box scrolls to keep it
+// in view. Printable text arrives via onTextInput (post-IME commit).
+// onKeyDown handles caret movement, Backspace/Delete, Enter/select, Escape -
+// and stops those keys from bubbling further. Focused and editing are
+// distinct (see activateField): navigation focuses, select begins editing,
+// Enter while editing submits (single-line) or inserts a newline
+// (multiline). A tap puts the caret at the nearest position. Range selection
+// (shift-movement, highlight) is not wired yet. Outside-click-to-blur is the
+// caller's job.
+export function EditorField(props: EditorFieldProps) {
+  let [caretOn, setCaretOn] = createSignal(true)
+
+  let node: { id: number } | undefined
+  let viewport: { id: number } | undefined
+  let blinkId: any = null
+
+  // Derived from core's reactive focus (setFocus is the only writer); the
+  // onFocus/onBlur handlers below keep only their side effects (blink timer,
+  // caller callbacks). focusedNode() is read FIRST, unconditionally: the
+  // memo may first compute before the ref has set `node`, and
+  // short-circuiting past the read would leave it dependency-free, frozen
+  // false forever.
+  let focused = createMemo(() => {
+    let id = focusedNode()
+    return id != null && id === node?.id
+  })
+
+  // Grapheme steps from the editor's caret stops; the editor is created
+  // below and only consulted from event handlers, after both exist. The
+  // factory is a one-shot by contract: read once, deliberately untracked.
+  let buffer = untrack(() => props.buffer)((_text, offset, direction) => editor.step(offset, direction))
+  let value = buffer.value
+
+  // autoFocus runs in an effect, not the ref: setFocus fires onFocus and reads
+  // the node's onTextInput handler to toggle the keyboard, and those handlers
+  // are only registered after the element's props are applied. The ref can fire
+  // before that, so focusing there would no-op.
+  createEffect(
+    () => props.autoFocus,
+    (autoFocus) => {
+      if (autoFocus && node) setFocus(node.id)
+    },
+  )
+
+  let handlePointerDown = () => {
+    if (props.disabled) return
+    if (node) setFocus(node.id)
+  }
+
+  // Tap-to-position: the viewport's local point plus its scroll is a content
+  // point; the nearest caret stop on the line under it takes the caret. Runs
+  // before the field's own handler above (bubbling), which focuses.
+  let handleViewportPointerDown = (e: PointerEvent) => {
+    if (props.disabled) return
+    let line = editor.lineAtY(e.localY + editor.scrollY())
+    let offset = editor.offsetAtX(line, e.localX + editor.scrollX())
+    buffer.setSelection(offset, offset)
+    setCaretOn(true)
+  }
+
+  let handleFocus = () => {
+    setCaretOn(true)
+    if (blinkId == null) {
+      blinkId = setInterval(() => setCaretOn((v) => !v), 500)
+    }
+    props.onFocus?.()
+  }
+
+  let handleBlur = () => {
+    if (blinkId != null) {
+      clearInterval(blinkId)
+      blinkId = null
+    }
+    props.onBlur?.()
+  }
+
+  // Keys the input consumes stop propagating: an ancestor (or an app-global
+  // shortcut on the window) must not also act on an ArrowLeft that moved the
+  // caret. Anything else (e.g. ctrl+s) bubbles on.
+  let handleKeyDown = (e: KeyEvent) => {
+    if (props.disabled) return
+    let consumed = true
+    if (e.key === "Backspace") {
+      buffer.deleteBackward()
+      setCaretOn(true)
+    } else if (e.key === "Delete") {
+      buffer.deleteForward()
+      setCaretOn(true)
+    } else if (e.key === "ArrowLeft") {
+      buffer.move("left")
+      setCaretOn(true)
+    } else if (e.key === "ArrowRight") {
+      buffer.move("right")
+      setCaretOn(true)
+    } else if (e.key === "Home" || e.key === "End") {
+      // Multiline: the current line's ends (offsetAtX at 0 / far right, so a
+      // wrap boundary resolves to the position that shows on this line).
+      if (props.multiline) {
+        let offset = editor.offsetAtX(editor.caretLine(), e.key === "Home" ? 0 : 1e9)
+        buffer.setSelection(offset, offset)
+      } else {
+        buffer.move(e.key === "Home" ? "start" : "end")
+      }
+      setCaretOn(true)
+    } else if (props.multiline && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+      moveLine(e.key === "ArrowUp" ? -1 : 1)
+      setCaretOn(true)
+    } else if (props.multiline && e.key === "Enter" && textInputActive()) {
+      buffer.insertText("\n")
+      setCaretOn(true)
+    } else if (e.key === "Enter" || e.code === "Select") {
+      // The remote center key's `key` is "Unidentified"; match its code.
+      activateField()
+    } else if (e.key === "Escape") {
+      if (node) setFocus(null)
+    } else {
+      consumed = false
+    }
+    if (consumed) e.stopPropagation()
+  }
+
+  let handleTextInput = (e: any) => {
+    if (props.disabled) return
+    buffer.insertText(e.text ?? "")
+    setCaretOn(true)
+  }
+
+  // Up/Down: the offset on the neighbouring line nearest the caret's x; on
+  // the first/last line they go to the text's start/end, as editors do.
+  let moveLine = (delta: number) => {
+    let target = editor.caretLine() + delta
+    let count = editor.lines().length
+    let offset =
+      target < 0 ? 0 : target >= count ? value().length : editor.offsetAtX(target, editor.caret().x)
+    buffer.setSelection(offset, offset)
+  }
+
+  // Select on the focused field: focused and editing are distinct states. A
+  // field reached by navigation is focused but has no text session yet -
+  // select begins one (raising the on-screen keyboard where used, e.g. a TV
+  // with no keyboard attached); while editing, it submits (a multiline field
+  // has no submit: Enter inserts a newline and select is left to bubble to
+  // the caller). On platforms where the session starts invisibly at focus
+  // (desktop, physical keyboard) the first branch never runs and Enter
+  // submits as always. Registered as the nav action too, for a controller's
+  // south button.
+  let activateField = () => {
+    if (props.disabled) return
+    if (!textInputActive()) {
+      startTextInput()
+    } else if (!props.multiline) {
+      props.onSubmit?.(value())
+      setFocus(null)
+    }
+  }
+
+  let unregisterNav: (() => void) | null = null
+
+  onCleanup(() => {
+    if (blinkId != null) clearInterval(blinkId)
+    unregisterNav?.()
+  })
+
+  // Style overrides fall back to theme defaults. The border doubles as the
+  // focus ring (ring color at the focus width) while focused, when the
+  // focus-ring policy asks for a visible indicator.
+  let textColor = () => props.style?.color ?? theme.color.text
+  let surfaceColor = () => props.style?.backgroundColor ?? theme.color.surface
+  let ring = () => focused() && policy.focusRing
+  let borderColor = () => props.style?.borderColor ?? (ring() ? theme.color.ring : theme.color.border)
+  let borderWidth = () => props.style?.borderWidth ?? (ring() ? theme.borderWidth.focus : theme.borderWidth.sm)
+  let borderRadius = () => props.style?.borderRadius ?? theme.radius.md
+
+  let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
+  let showCaret = () => focused() && caretOn() && !showPlaceholder()
+
+  // Everything inside the viewport is detached: the value is drawn per
+  // laid-out line by renderLine (createTextEditorLayout breaks the lines from
+  // the prepared text, at the viewport width when multiline) and the caret is
+  // a d-rect at the measured before-caret width on its line, so typing, caret
+  // movement, blink and scroll never touch layout. The single-line viewport
+  // carries an explicit height (detached content takes no layout slot) equal
+  // to the one-line height; a multiline viewport stretches to the field's
+  // height. The editor layout keeps the caret in view and flushes the offsets
+  // before paint; scrollX/scrollY are paint-time translates that also apply
+  // to detached children.
+  // All 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 font = () => ({ fontSize: fontSize(), lineHeight: theme.text.body.lineHeight })
+  let rowHeight = () => Math.round(fontSize() * theme.text.body.lineHeight)
+  let editor = createTextEditorLayout(
+    () => viewport,
+    () => ({
+      text: value(),
+      font: font(),
+      runs: props.runs?.(),
+      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
+      // the scroll offset every blink and shift text that exactly fills the box.
+      caretWidth: CARET_WIDTH,
+      wrap: props.multiline ?? false,
+    }),
+  )
+  let caret = editor.caret
+
+  // Multiline viewport height: a caller-given field height stretches the
+  // viewport (fixed box, scrolls); otherwise the content height, at least one
+  // row and at most maxRows rows. Single-line is always one row.
+  let viewportHeight = (): number | undefined => {
+    if (!props.multiline) return rowHeight()
+    if (props.layout?.height != null) return undefined
+    let lines = editor.lines()
+    let last = lines[lines.length - 1]!
+    let content = Math.ceil(last.y + last.height)
+    let max = props.maxRows != null ? props.maxRows * rowHeight() : Infinity
+    return Math.max(rowHeight(), Math.min(content, max))
+  }
+
+  let split = () => splitTransition(props.transition)
+
+  return (
+    <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
+      ref={(n: { id: number }) => {
+        node = n
+        unregisterNav?.()
+        unregisterNav = registerNavAction(n.id, activateField)
+        props.ref?.(n)
+      }}
+      textInputHints={props.multiline ? { multiline: true, ...props.hints } : props.hints}
+      focusable
+      flexDirection="row"
+      alignItems="center"
+      paddingLeft={space("md")}
+      paddingRight={space("md")}
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
+      {...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}
+      onKeyDown={handleKeyDown}
+      onTextInput={handleTextInput}
+    >
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={surfaceColor()} radius={borderRadius()} />
+      <d-rect
+        drawStyle="stroke"
+        transition={split().border}
+        onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+        color={borderColor()}
+        strokeWidth={borderWidth()}
+        radius={borderRadius()}
+      />
+      <view
+        ref={(n: { id: number }) => (viewport = n)}
+        flex={1}
+        height={viewportHeight()}
+        alignSelf={props.multiline ? "stretch" : undefined}
+        overflow="hidden"
+        scrollX={editor.scrollX()}
+        scrollY={editor.scrollY()}
+        onPointerDown={handleViewportPointerDown}
+      >
+        {showPlaceholder() ? (
+          <d-text w={PLACEHOLDER_SHAPE_WIDTH} {...font()} color={theme.color.textMuted} maxLines={1}>
+            {props.placeholder ?? ""}
+          </d-text>
+        ) : (
+          <>
+            <For each={editor.lines()} keyed={false}>
+              {(line) => props.renderLine({ line, font, color: textColor })}
+            </For>
+            {showCaret() ? (
+              <d-rect
+                color={textColor()}
+                x={caret().x}
+                y={caret().y + (caret().height - fontSize()) / 2}
+                w={CARET_WIDTH}
+                h={fontSize()}
+              />
+            ) : null}
+          </>
+        )}
+      </view>
+    </view>
+  )
+}

package/src/field.tsx

@@ -0,0 +1,47 @@
+import { Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
+
+export interface FieldProps extends TransitionProps {
+  // Label above the control.
+  label?: string
+  // Help text under the control; replaced by `error` while one is set.
+  description?: string
+  // Validation message: rendered in the danger color in place of the
+  // description.
+  error?: string
+  // The control (TextInput, Select, Slider, ...), rendered as-is.
+  children?: any
+  layout?: LayoutProps
+}
+
+// A form row: label above, control, help or error line below. It draws no
+// chrome and does not reach into the control - error styling of the input
+// itself stays the input's style prop (no hidden magic). The message line
+// only occupies space while there is one, so forms do not jump on the first
+// keystroke unless an error appears; reserve the space with a constant
+// `description` if that matters.
+export function Field(props: FieldProps) {
+  return (
+    <view flexDirection="column" gap={space("sm")} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
+      <Show when={props.label != null}>
+        <text color={theme.color.text} {...typeStyle("label")}>
+          {props.label}
+        </text>
+      </Show>
+      {props.children}
+      <Show when={props.error != null || props.description != null}>
+        <text
+          color={props.error != null ? theme.color.danger : theme.color.textMuted}
+          {...typeStyle("caption")}
+        >
+          {props.error ?? props.description}
+        </text>
+      </Show>
+    </view>
+  )
+}

package/src/icon.tsx

@@ -1,8 +1,10 @@
 import { createMemo, parseSvg, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface IconProps {
+export interface IconProps extends TransitionProps {
   // 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
@@ -18,9 +20,9 @@ export interface IconProps {
 const SIZE = 24
 
 // A themed wrapper over parseSvg: the document parsed once per src/color (a
-// memo), its draws mapped to <d-path> in a square viewBox-fitted box colored
+// memo), its draws mapped to <d-path> in a square designSize-fitted box colored
 // from the theme by default. That is the only value it adds, so reach for
-// parseSvg plus your own <view viewBox> when you need a non-square box or
+// parseSvg plus your own <view designSize> when you need a non-square box or
 // want no theme coupling. The plain repaintBoundary keeps the static subtree
 // from re-recording alongside animating siblings; pointerEvents="all" makes
 // the box one hit unit (and skips per-path outline tests) - an icon's shapes
@@ -31,11 +33,13 @@ export function Icon(props: IconProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       repaintBoundary
       pointerEvents="all"
       width={size()}
       height={size()}
-      viewBox={[doc().width, doc().height]}
+      designSize={[doc().width, doc().height]}
       {...props.layout}
     >
       <For each={doc().draws}>{(draw) => <d-path {...draw} />}</For>

package/src/image.tsx

@@ -1,8 +1,9 @@
 import { createImage, createEffect, Loading, Errored, pct } from "@solidrt/core"
 import type { ImageSource, LayoutProps, Pct, PointerProps, TextureProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ImageProps extends PointerProps {
+export interface ImageProps extends PointerProps, TransitionProps {
   src: string | Uint8Array
   /**
    * How the image maps into the Image's box (CSS object-fit): "fill"
@@ -38,6 +39,7 @@ function FallbackTexture(props: {
   height?: number | Pct
 }) {
   let tex = createImage(() => props.src)
+
   return (
     <Errored fallback={(_err: unknown) => null}>
       <texture src={tex()} fit={props.fit} width={props.width} height={props.height} />
@@ -69,9 +71,12 @@ export function Image(props: ImageProps) {
   let texW = () => (props.fit != null ? pct(100) : typeof props.layout?.width === "number" ? props.layout.width : undefined)
   let texH = () =>
     props.fit != null ? pct(100) : typeof props.layout?.height === "number" ? props.layout.height : undefined
+  let split = () => splitTransition(props.transition)
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       {...props.layout}
       overflow={props.style?.borderRadius != null ? "hidden" : props.layout?.overflow}
       clipRadius={props.style?.borderRadius}
@@ -94,7 +99,7 @@ export function Image(props: ImageProps) {
       pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
-        <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
+        <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
       <Loading fallback={null}>
         <Errored
@@ -110,6 +115,8 @@ export function Image(props: ImageProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}

package/src/index.ts

@@ -4,6 +4,8 @@ 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 { RichTextEditor, type RichTextEditorProps } from "./rich-text-editor"
+export { createDocumentBuffer, plainDocument, ATOM, type Document, type DocumentRun, type DocumentBuffer, type DocumentBufferOptions, type Attributes, type AttributePatch } from "./rich-text-document"
 export { ScrollView, type ScrollViewProps } from "./scroll-view"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
 export { Button, type ButtonProps, type ButtonVariant } from "./button"
@@ -13,6 +15,8 @@ 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 { Item, type ItemProps } from "./item"
+export { Field, type FieldProps } from "./field"
 export { Divider, type DividerProps } from "./divider"
 export { Badge, type BadgeProps, type BadgeVariant } from "./badge"
 export { Spinner, type SpinnerProps } from "./spinner"
@@ -30,9 +34,13 @@ export { Icon, type IconProps } from "./icon"
 export {
   theme,
   setTheme,
+  defineTheme,
   darkTheme,
   lightTheme,
   type Theme,
+  type ThemeDefinition,
+  type ThemeColor,
+  type ThemedComponent,
   type TextStyle,
   type TextVariant,
 } from "./theme"
@@ -41,7 +49,6 @@ export {
   setPolicy,
   setPolicyResolver,
   defaultPolicyResolver,
-  densityScale,
   type Policies,
   type PolicyResolver,
   type InteractionPolicy,
@@ -50,6 +57,16 @@ export {
   type NavigationPolicy,
   type LayoutPolicy,
 } from "./policy"
+export { Density, type DensityProps, densityScale } from "./density"
 export { typeStyle, typeWeight, lightOnDark } from "./typography"
 export { space } from "./spacing"
-export type { StyleProps, TextLayoutProps, Option } from "./types"
+export type {
+  StyleProps,
+  TextLayoutProps,
+  Option,
+  TransitionProps,
+  ComponentTransition,
+  TransitionViewProp,
+  TransitionStyleProp,
+  TransitionScrollProp,
+} from "./types"