@solidrt/components 0.0.50 → 0.0.52

package/src/rich-text-document.ts

@@ -0,0 +1,247 @@
+// Headless rich-text document buffer: the value model of a rich text editor
+// (okf/backlog/rich-text-editor.md) over the same string offsets the text
+// buffer and the editor geometry use. Flat, Delta-like: one text with "\n"
+// between paragraphs, attributed runs tiling it, one attribute set per
+// paragraph. Attributes are opaque key/values here; what {bold: true} or an
+// atom's {atom: "image"} mean is the component's business.
+
+import { createSignal, flush } from "@solidjs/signals"
+import { createTextBuffer, type TextBuffer, type TextBufferOptions } from "@solidrt/core/text-input"
+
+/** Formatting as opaque key/values, compared with `===`. */
+export type Attributes = Record<string, string | number | boolean>
+/** A change to apply: a `null` value removes the key. */
+export type AttributePatch = Record<string, string | number | boolean | null>
+
+/** An attributed range of the document text; runs tile the text. */
+export type DocumentRun = { start: number; end: number; attributes: Attributes }
+
+/**
+ * A rich text value. `text` is the plain text (what a caret moves over):
+ * "\n" separates paragraphs, an inline atom is one U+FFFC ({@link ATOM}).
+ * `runs` tile the text (none when it is empty) with no two neighbours
+ * carrying equal attributes; `blocks` holds one attribute set per paragraph
+ * (`\n` count + 1). Plain data: build one with {@link plainDocument}, or
+ * literally.
+ */
+export type Document = { text: string; runs: DocumentRun[]; blocks: Attributes[] }
+
+/** The character standing in for an inline atom (object replacement character). */
+export const ATOM = "\uFFFC"
+
+/** A document of `text` with no formatting. */
+export function plainDocument(text = ""): Document {
+  return {
+    text,
+    runs: text ? [{ start: 0, end: text.length, attributes: {} }] : [],
+    blocks: Array.from({ length: countNewlines(text, 0, text.length) + 1 }, () => ({})),
+  }
+}
+
+export type DocumentBufferOptions = {
+  /** Controlled document accessor; edits then flow out through onInput only. */
+  value?: () => Document | undefined
+  /** Initial document when uncontrolled. */
+  defaultValue?: Document
+  /** Called with the new document after every edit. */
+  onInput?: (document: Document) => void
+  maxLength?: TextBufferOptions["maxLength"]
+  step?: TextBufferOptions["step"]
+}
+
+export type DocumentBuffer = TextBuffer & {
+  /** The current document (`value()` is its text). */
+  document(): Document
+  /**
+   * Inline attributes at the caret: the pending typing attributes if
+   * {@link format} was called on a collapsed selection, else those of the
+   * character before the caret (the ones typed text will take).
+   */
+  attributes(): Attributes
+  /**
+   * Set or remove (`null`) inline attributes on the selection. On a
+   * collapsed selection they become the typing attributes of the next
+   * insert instead, dropped when the caret moves.
+   */
+  format(patch: AttributePatch): void
+  /** Set or remove (`null`) block attributes on the paragraphs the selection touches. */
+  formatBlock(patch: AttributePatch): void
+  /** Replace the selection with an inline atom carrying `attributes`. */
+  insertAtom(attributes: Attributes): void
+  /** Replace the whole document, caret to the end. */
+  setDocument(next: Document): void
+}
+
+/**
+ * An editable rich text document with the contract of createTextBuffer
+ * (controlled/uncontrolled, buffer-owned selection, grapheme `step`,
+ * synchronous commits) plus formatting. Inserted text takes the inline
+ * attributes of the character before the caret; a "\n" splits its paragraph
+ * into two with the same block attributes, deleting one merges (the first
+ * paragraph's attributes win).
+ */
+export function createDocumentBuffer(options: DocumentBufferOptions = {}): DocumentBuffer {
+  let [internal, setInternal] = createSignal<Document>(options.defaultValue ?? plainDocument())
+  let current = () => options.value?.() ?? internal()
+  // Typing attributes set on a collapsed selection, valid while the caret
+  // stays where they were set.
+  let [pending, setPending] = createSignal<{ at: number; attributes: Attributes } | null>(null)
+
+  let commit = (next: Document) => {
+    if (options.value?.() == null) setInternal(next)
+    options.onInput?.(next)
+  }
+
+  let inherited = (offset: number): Attributes => {
+    let runs = current().runs
+    let at = offset > 0 ? offset - 1 : 0
+    return runs.find((r) => r.start <= at && at < r.end)?.attributes ?? {}
+  }
+
+  let text = createTextBuffer({
+    value: () => current().text,
+    maxLength: options.maxLength,
+    step: options.step,
+    onReplace: (start, end, inserted) => {
+      let doc = current()
+      let typing = pending()
+      let attributes = typing && typing.at === start && start === end ? typing.attributes : inherited(start)
+      setPending(null)
+      let paragraph = countNewlines(doc.text, 0, start)
+      let removed = countNewlines(doc.text, start, end)
+      let added = countNewlines(inserted, 0, inserted.length)
+      let block = doc.blocks[paragraph] ?? {}
+      commit({
+        text: doc.text.slice(0, start) + inserted + doc.text.slice(end),
+        runs: spliceRuns(doc.runs, start, end, inserted.length, attributes),
+        blocks: [
+          ...doc.blocks.slice(0, paragraph),
+          ...Array.from({ length: added + 1 }, () => block),
+          ...doc.blocks.slice(paragraph + removed + 1),
+        ],
+      })
+    },
+  })
+
+  let range = (): [number, number] => {
+    let { anchor, focus } = text.selection()
+    return anchor <= focus ? [anchor, focus] : [focus, anchor]
+  }
+
+  let attributes = (): Attributes => {
+    let typing = pending()
+    let caret = text.caret()
+    return typing && typing.at === caret ? typing.attributes : inherited(caret)
+  }
+
+  return {
+    ...text,
+    move: (direction, opts) => {
+      setPending(null)
+      text.move(direction, opts)
+    },
+    setSelection: (anchor, focus) => {
+      setPending(null)
+      text.setSelection(anchor, focus)
+    },
+    document: current,
+    attributes,
+    format: (patch) => {
+      let [start, end] = range()
+      if (start === end) {
+        setPending({ at: start, attributes: patched(attributes(), patch) })
+        flush()
+        return
+      }
+      let doc = current()
+      commit({ ...doc, runs: formatRuns(doc.runs, start, end, patch) })
+      flush()
+    },
+    formatBlock: (patch) => {
+      let [start, end] = range()
+      let doc = current()
+      let first = countNewlines(doc.text, 0, start)
+      let last = countNewlines(doc.text, 0, end)
+      commit({ ...doc, blocks: doc.blocks.map((b, i) => (first <= i && i <= last ? patched(b, patch) : b)) })
+      flush()
+    },
+    insertAtom: (attributes) => {
+      let [start, end] = range()
+      if (start !== end) text.insertText("")
+      setPending({ at: start, attributes })
+      flush()
+      text.insertText(ATOM)
+    },
+    setDocument: (next) => {
+      commit(next)
+      text.setSelection(next.text.length, next.text.length)
+    },
+  }
+}
+
+function countNewlines(text: string, start: number, end: number): number {
+  let n = 0
+  for (let i = start; i < end; i++) if (text.charCodeAt(i) === 10) n++
+  return n
+}
+
+function sameAttributes(a: Attributes, b: Attributes): boolean {
+  let keys = Object.keys(a)
+  return keys.length === Object.keys(b).length && keys.every((k) => a[k] === b[k])
+}
+
+function patched(attributes: Attributes, patch: AttributePatch): Attributes {
+  let out: Attributes = { ...attributes }
+  for (let key of Object.keys(patch)) {
+    let value = patch[key]
+    if (value == null) delete out[key]
+    else out[key] = value
+  }
+  return out
+}
+
+// Drop empty runs and merge equal neighbours: the tiling invariant.
+function normalize(runs: DocumentRun[]): DocumentRun[] {
+  let out: DocumentRun[] = []
+  for (let run of runs) {
+    if (run.end <= run.start) continue
+    let last = out[out.length - 1]
+    if (last && sameAttributes(last.attributes, run.attributes)) last.end = run.end
+    else out.push({ ...run })
+  }
+  return out
+}
+
+// Runs after replacing [start, end) by `length` characters in `attributes`.
+function spliceRuns(runs: DocumentRun[], start: number, end: number, length: number, attributes: Attributes): DocumentRun[] {
+  let delta = length - (end - start)
+  let out: DocumentRun[] = []
+  let inserted = false
+  for (let run of runs) {
+    if (run.start < start) out.push({ start: run.start, end: Math.min(run.end, start), attributes: run.attributes })
+    if (!inserted && run.end >= start) {
+      out.push({ start, end: start + length, attributes })
+      inserted = true
+    }
+    if (run.end > end) out.push({ start: Math.max(run.start, end) + delta, end: run.end + delta, attributes: run.attributes })
+  }
+  if (!inserted) out.push({ start, end: start + length, attributes })
+  return normalize(out)
+}
+
+// Runs with `patch` applied over [start, end).
+function formatRuns(runs: DocumentRun[], start: number, end: number, patch: AttributePatch): DocumentRun[] {
+  let out: DocumentRun[] = []
+  for (let run of runs) {
+    let from = Math.max(run.start, start)
+    let to = Math.min(run.end, end)
+    if (from >= to) {
+      out.push(run)
+      continue
+    }
+    if (run.start < from) out.push({ start: run.start, end: from, attributes: run.attributes })
+    out.push({ start: from, end: to, attributes: patched(run.attributes, patch) })
+    if (to < run.end) out.push({ start: to, end: run.end, attributes: run.attributes })
+  }
+  return normalize(out)
+}

package/src/rich-text-editor.tsx

@@ -0,0 +1,151 @@
+import { untrack } from "@solidrt/core"
+import type { LayoutProps, TextInputHints } from "@solidrt/core"
+import type { TextRunRange } from "flux:rendertree"
+import { EditorField } from "./editor-field"
+import { createDocumentBuffer, type Attributes, type Document, type DocumentBuffer } from "./rich-text-document"
+import type { StyleProps, TransitionProps } from "./types"
+import { theme } from "./theme"
+import { policy } from "./policy"
+
+export interface RichTextEditorProps extends TransitionProps {
+  value?: Document
+  defaultValue?: Document
+  onInput?: (value: Document) => void
+  /**
+   * Receives the editor's document buffer, the formatting API: `format`,
+   * `formatBlock`, `insertAtom`, `attributes` (for toolbar state), plus the
+   * text buffer's selection and edit methods. The app renders its own
+   * controls around the editor and calls these.
+   */
+  editorRef?: (editor: DocumentBuffer) => void
+  onFocus?: () => void
+  onBlur?: () => void
+
+  placeholder?: string
+  disabled?: boolean
+  autoFocus?: boolean
+  /** Without a `layout.height`: rows to grow to before scrolling. Default unbounded. */
+  maxRows?: number
+  hints?: TextInputHints
+
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// The attributes the editor draws (anything else is carried in the document
+// and ignored here). Inline: bold, italic, underline, code (mono), color,
+// link (a URL string: primary color, underlined). Block: heading 1-3.
+// Font-affecting ones also feed the geometry (prepareText runs), so the
+// caret and wrapping follow the drawn glyphs.
+type Font = Pick<TextRunRange, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight">
+
+function fontOf(inline: Attributes, block: Attributes, base: number): Font {
+  let font: Font = {}
+  let heading = block.heading
+  if (heading === 1) font.fontSize = theme.text.heading.size * policy.textScale
+  else if (heading === 2) font.fontSize = theme.text.title.size * policy.textScale
+  else if (heading === 3) font.fontSize = base
+  if (heading === 1 || heading === 2 || heading === 3 || inline.bold) font.fontWeight = 700
+  if (inline.italic) font.fontStyle = "italic"
+  if (inline.code) font.fontFamily = theme.text.monoFamily
+  return font
+}
+
+// A document as style intervals: the document runs cut at paragraph
+// boundaries, each with the paragraph's block attributes alongside.
+type Interval = { start: number; end: number; inline: Attributes; block: Attributes }
+
+function intervals(doc: Document): Interval[] {
+  let out: Interval[] = []
+  let paragraph = 0
+  for (let run of doc.runs) {
+    let at = run.start
+    // Runs are clamped to the text: a malformed document draws what it can.
+    let runEnd = Math.min(run.end, doc.text.length)
+    while (at < runEnd) {
+      let next = doc.text.indexOf("\n", at)
+      let paragraphEnd = next < 0 ? doc.text.length : next + 1
+      let end = Math.min(runEnd, paragraphEnd)
+      out.push({ start: at, end, inline: run.attributes, block: doc.blocks[paragraph] ?? {} })
+      if (end === paragraphEnd && next >= 0) paragraph++
+      at = end
+    }
+  }
+  return out
+}
+
+/**
+ * Edits a rich text {@link Document} (styled runs, paragraph attributes,
+ * inline atoms as U+FFFC) in the TextInput field: same focus, caret, keys,
+ * wrapping and scrolling, always multiline. Formatting is driven through
+ * `editorRef` (the document buffer), not a built-in toolbar. Atoms are drawn
+ * as their placeholder character for now.
+ */
+export function RichTextEditor(props: RichTextEditorProps) {
+  let editor!: DocumentBuffer
+  let base = () => theme.text.body.size * policy.textScale
+  let doc = () => editor.document()
+
+  // Geometry runs: every interval whose font differs from the base.
+  let runs = (): TextRunRange[] => {
+    let size = base()
+    let out: TextRunRange[] = []
+    for (let { start, end, inline, block } of intervals(doc())) {
+      let font = fontOf(inline, block, size)
+      if (Object.keys(font).length === 0) continue
+      out.push({ start, end, ...font })
+    }
+    return out
+  }
+
+  // Only set props are passed: an explicit undefined would reach the tree.
+  let spanProps = (i: Interval): Record<string, unknown> => {
+    let out: Record<string, unknown> = fontOf(i.inline, i.block, base())
+    let link = typeof i.inline.link === "string"
+    if (typeof i.inline.color === "string") out.color = i.inline.color
+    else if (link) out.color = theme.color.primary
+    if (i.inline.underline || link) out.textDecoration = "underline"
+    return out
+  }
+
+  return (
+    <EditorField
+      transition={props.transition}
+      onTransitionEnd={props.onTransitionEnd}
+      buffer={(step) => {
+        editor = createDocumentBuffer({
+          value: () => props.value,
+          defaultValue: untrack(() => props.defaultValue),
+          onInput: (d) => props.onInput?.(d),
+          step,
+        })
+        props.editorRef?.(editor)
+        return editor
+      }}
+      runs={runs}
+      renderLine={({ line, font, color }) => (
+        <d-text y={line().y} w={line().width + 1} {...font()} color={color()} maxLines={1}>
+          {intervals(doc())
+            .filter((i) => i.end > line().start && i.start < line().end)
+            .map((i) => (
+              <span {...spanProps(i)}>
+                {doc().text.slice(Math.max(i.start, line().start), Math.min(i.end, line().end))}
+              </span>
+            ))}
+        </d-text>
+      )}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      autoFocus={props.autoFocus}
+      multiline
+      maxRows={props.maxRows}
+      hints={props.hints}
+      ref={props.ref}
+      layout={props.layout}
+      style={{ ...theme.components.richTextEditor, ...props.style }}
+    />
+  )
+}

package/src/scroll-view.tsx

@@ -1,14 +1,22 @@
-import { createPan, createScroll } from "@solidrt/core"
-import type { LayoutProps, PointerProps, WheelEvent } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import { createPan, createScroll, createSignal, onSettled, untrack } from "@solidrt/core"
+import type { LayoutProps, PointerProps, Scroll, WheelEvent } from "@solidrt/core"
+import type { StyleProps, TransitionProps, TransitionScrollProp, TransitionStyleProp, TransitionViewProp } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ScrollViewProps extends PointerProps {
+export interface ScrollViewProps
+  extends PointerProps,
+    TransitionProps<TransitionViewProp | TransitionStyleProp | TransitionScrollProp> {
   children?: any
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
   /** Scroll the horizontal axis instead of the vertical one. */
   horizontal?: boolean
+  /** Receives the scroll handle (offset, range, scrollTo) for driving the view
+   * from app code; scroll policies such as following a growing log are written
+   * against it. Called once the component has settled, outside any reactive
+   * scope, so a signal setter can be passed directly. */
+  scrollRef?: (scroll: Scroll) => void
 }
 
 // A scrollable region. The outer box carries layout/style/transform and the
@@ -21,31 +29,81 @@ export interface ScrollViewProps extends PointerProps {
 // stealing the pointer from a pressable the drag started on (its press
 // feedback retracts), and keeps scrolling when the pointer leaves the box.
 // There is no momentum yet; a fling stops when the finger lifts.
+//
+// Motion: the offset is written as a target and the runtime springs to it,
+// so a wheel tick glides instead of jumping and a burst of ticks retargets
+// one continuous motion. While a finger drags, the spring is withdrawn from
+// the viewport declaration so the content tracks the finger exactly; the
+// first drag write cancels any spring still in flight. A `scrollX`/`scrollY`
+// entry in the `transition` prop replaces the default.
+const SCROLL_SPRING = { duration: 250 }
+
 export function ScrollView(props: ScrollViewProps) {
   let viewport: { id: number } | undefined
   let content: { id: number } | undefined
+  let [dragging, setDragging] = createSignal(false)
 
   let scroll = createScroll(
     () => viewport,
     () => content,
     { axis: props.horizontal ? "horizontal" : "vertical" },
   )
+  // Handed out from onSettled rather than the body: the body is an owned
+  // scope, where a signal write (an app passing its setter) is refused.
+  onSettled(() => {
+    untrack(() => props.scrollRef)?.(scroll)
+  })
 
   // Content follows the finger: it moves opposite to scroll offsets, which
   // grow toward the bottom/right.
   let pan = createPan({
     axis: props.horizontal ? "horizontal" : "vertical",
-    onPanMove: (dx, dy) => scroll.scrollBy(-dx, -dy),
+    onPanStart: () => setDragging(true),
+    onPanMove: (dx, dy) => scroll.scrollBy({ x: -dx, y: -dy }),
+    onPanEnd: () => setDragging(false),
   })
 
   let onWheel = (e: WheelEvent) => {
     // A plain mouse wheel only emits deltaY. On a horizontal scroller, route that
     // vertical delta to the x axis so the wheel still scrolls it (trackpads that
     // emit deltaX take precedence).
-    if (props.horizontal) scroll.scrollBy(e.deltaX || e.deltaY, 0)
-    else scroll.scrollBy(e.deltaX, e.deltaY)
+    if (props.horizontal) scroll.scrollBy({ x: e.deltaX || e.deltaY })
+    else scroll.scrollBy({ x: e.deltaX, y: e.deltaY })
   }
 
+  // The viewport owns the scroll offset, the outer box everything else: a
+  // scrollX/scrollY entry is lifted out of the root declaration so that a
+  // shared `all` does not animate opacity twice (outer times viewport).
+  let split = () => {
+    let t = splitTransition(props.transition)
+    if (t.root == null || typeof t.root === "string") return { ...t, viewport: t.root }
+    let { scrollX, scrollY, ...rest } = t.root as Record<string, unknown>
+    let viewport: Record<string, unknown> = {}
+    if (scrollX !== undefined) viewport.scrollX = scrollX
+    if (scrollY !== undefined) viewport.scrollY = scrollY
+    if (rest.all !== undefined) viewport.all = rest.all
+    return {
+      ...t,
+      root: Object.keys(rest).length ? (rest as typeof t.root) : undefined,
+      viewport: Object.keys(viewport).length ? (viewport as typeof t.root) : undefined,
+    }
+  }
+  // The viewport's declaration: the user's scroll entries over the default
+  // spring. During a drag, and while the latest programmatic write asked for
+  // no motion (scrollTo behavior "instant"), the scroll entries go, and a
+  // user `all` narrows to the one other property the viewport writes
+  // (clipRadius) so it cannot put a spring back under the finger or the
+  // instant write.
+  let viewportTransition = () => {
+    let user = split().viewport
+    let entries: Record<string, unknown> = typeof user === "string" ? { all: user } : { ...(user ?? {}) }
+    if (dragging() || scroll.behavior() === "instant") {
+      let { scrollX, scrollY, all, ...rest } = entries
+      if (all !== undefined) rest.clipRadius = all
+      return Object.keys(rest).length ? rest : null
+    }
+    return { scrollX: SCROLL_SPRING, scrollY: SCROLL_SPRING, ...entries }
+  }
   let direction = () => (props.horizontal ? "row" : "column")
   let hasBackground = () =>
     props.style?.backgroundColor != null || props.style?.borderRadius != null
@@ -53,6 +111,8 @@ export function ScrollView(props: ScrollViewProps) {
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       {...props.layout}
       x={props.style?.x}
@@ -70,16 +130,23 @@ export function ScrollView(props: ScrollViewProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
         />
       ) : null}
+      {/* transition before scrollX/scrollY: props apply in source order, and
+          an instant write needs the withdrawn declaration to land before the
+          value in the same flush, or the value starts a spring anyway. */}
       <view
         ref={(n: { id: number }) => (viewport = n)}
         flex={1}
         overflow="hidden"
         clipRadius={props.style?.borderRadius}
         flexDirection={direction()}
+        transition={viewportTransition()}
+        onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
         scrollX={scroll.offset().x}
         scrollY={scroll.offset().y}
         {...pan.handlers}
@@ -92,6 +159,8 @@ export function ScrollView(props: ScrollViewProps) {
       {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/segmented-control.tsx

@@ -1,13 +1,14 @@
-import { createSignal, For } from "@solidrt/core"
+import { createSignal, For, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle, lightOnDark } from "./typography"
-import type { Option, StyleProps } from "./types"
+import type { Option, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SegmentedControlProps {
+export interface SegmentedControlProps extends TransitionProps {
   options: Option[]
   // Controlled selected value. If omitted, the control is uncontrolled.
   value?: unknown
@@ -37,8 +38,12 @@ export function SegmentedControl(props: SegmentedControlProps) {
     props.onChange?.(v)
   }
 
-  let radius = () =>
-    typeof props.style?.borderRadius === "number" ? props.style.borderRadius : theme.radius.md
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.segmentedControl, ...props.style })
+  let radius = () => {
+    let r = styled().borderRadius
+    return typeof r === "number" ? r : theme.radius.md
+  }
   // Per-corner radii: round only the corners on the control's outer edge, so
   // the segments read as one joined control. [tl, tr, br, bl].
   let corners = (i: number): number | [number, number, number, number] => {
@@ -50,34 +55,38 @@ export function SegmentedControl(props: SegmentedControlProps) {
     return 0
   }
 
-  let idleFill = () => props.style?.backgroundColor ?? theme.color.surfaceAlt
+  let idleFill = () => styled().backgroundColor ?? theme.color.surfaceAlt
   let activeFill = () => (props.disabled ? theme.color.surface : theme.color.primary)
   let label = (active: boolean) =>
     props.disabled ? theme.color.textMuted : active ? theme.color.onPrimary : theme.color.text
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       flexDirection="row"
       gap={DIVIDER}
       {...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={theme.color.border} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={theme.color.border} radius={radius()} />
       <For each={props.options}>
         {(opt, i) => {
           let active = () => value() === opt.value
           let press = createPress({ onPress: () => select(opt.value) })
-          let fill = () =>
-            active()
-              ? activeFill()
-              : press.hovered() && !props.disabled && policy.interaction !== "touch"
-                ? theme.color.surfaceHover
-                : idleFill()
-          return (
+          let fill = () => (active() ? activeFill() : idleFill())
+          // Hover feedback: the theme overlay tint drawn over the segment fill.
+          let overlay = () =>
+            press.hovered() && !props.disabled && policy.interaction !== "touch"
+              ? theme.color.overlayHover
+              : "transparent"
+  return (
             <view
               ref={press.ref}
               repaintBoundary
@@ -89,9 +98,14 @@ export function SegmentedControl(props: SegmentedControlProps) {
               paddingLeft={space("md")}
               paddingRight={space("md")}
               {...press.handlers}
+              focusable={!props.disabled}
               pointerEvents={props.disabled ? "none" : undefined}
             >
               <d-rect color={fill()} radius={corners(i())} />
+              <d-rect color={overlay()} radius={corners(i())} />
+              <Show when={press.focused() && policy.focusRing}>
+                <d-rect drawStyle="stroke" color={theme.color.ring} strokeWidth={theme.borderWidth.focus} radius={corners(i())} />
+              </Show>
               <text
                 color={label(active())}
                 {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}