diff --git a/.changeset/outline-styles.md b/.changeset/outline-styles.md
new file mode 100644
index 00000000..c83b567f
--- /dev/null
+++ b/.changeset/outline-styles.md
@@ -0,0 +1,7 @@
+---
+'@plextv/react-lightning': minor
+'@plextv/react-lightning-plugin-css-transform': minor
+'@plextv/react-lightning-plugin-reanimated': patch
+---
+
+Support css outlines. `outlineWidth` / `outlineColor` / `outlineOffset` now paint a ring outside the node (the border shader can draw outside its bounds with a gap), so a focus ring no longer needs an extra absolutely-positioned view. A border and an outline share the one shader an element gets, so the border still wins and a dev warning says so. Also: a partial style push (reanimated, or an imperative `style.x =`) now resolves its shader against the merged style, so pushing only a `borderColor` or `outlineColor` keeps the width it already had, and an `outlineColor` transition animates the shader.
diff --git a/.changeset/reanimated-css-pseudo-selectors.md b/.changeset/reanimated-css-pseudo-selectors.md
new file mode 100644
index 00000000..fa61594e
--- /dev/null
+++ b/.changeset/reanimated-css-pseudo-selectors.md
@@ -0,0 +1,5 @@
+---
+'@plextv/react-lightning-plugin-reanimated': minor
+---
+
+Support reanimated's CSS transitions and pseudo selectors. A `CSSStyle` on an animated component now works: `transitionProperty` / `transitionDuration` / `transitionTimingFunction` / `transitionDelay` (and the `transition` shorthand) become a Lightning transition on the node, and per-property values keyed by `default` / `:focus` / `:focus-within` swap on focus without a re-render. `:hover`, `:active` and `:active-deepest` need pointer or press state that Lightning doesn't have, so they're ignored with a dev warning, as are CSS animations (`animationName` and friends) for now.
diff --git a/apps/react-native-lightning-example/src/index.tsx b/apps/react-native-lightning-example/src/index.tsx
index 32a4a689..947b21f4 100644
--- a/apps/react-native-lightning-example/src/index.tsx
+++ b/apps/react-native-lightning-example/src/index.tsx
@@ -22,6 +22,7 @@ import { AnimationTest } from './pages/AnimationTest';
 import { ComponentTest } from './pages/ComponentTest';
 import { LayoutTest } from './pages/LayoutTest';
 import { LibraryTest } from './pages/LibraryTest';
+import { PseudoSelectorTest } from './pages/PseudoSelectorTest';
 import { SimpleTest } from './pages/SimpleTest';
 import { VirtualizedListTest } from './pages/VirtualizedListTest';
 
@@ -56,6 +57,7 @@ const screens = {
   Library: 'library',
   Simple: 'simple',
   Components: 'components',
+  PseudoSelectors: 'pseudoSelectors',
   NestedLayouts: 'nestedLayouts',
   VirtualizedList: 'virtualizedList',
 };
@@ -119,6 +121,11 @@ const MainApp = () => {
           color={'rgba(55, 55, 22, 1)'}
           onPress={() => nav.navigate('VirtualizedList')}
         />
+        <Button
+          title="Pseudo Selectors"
+          color={'rgba(55, 55, 22, 1)'}
+          onPress={() => nav.navigate('PseudoSelectors')}
+        />
       </Column>
 
       <Column focusable style={{ w: 1670, h: 1080, color: 0x000000ff, clipping: true }}>
@@ -135,6 +142,7 @@ const MainApp = () => {
           <CustomStack.Screen name="Simple" component={SimpleTest} />
           <CustomStack.Screen name="Components" component={ComponentTest} />
           <CustomStack.Screen name="VirtualizedList" component={VirtualizedListTest} />
+          <CustomStack.Screen name="PseudoSelectors" component={PseudoSelectorTest} />
         </CustomStack.Navigator>
       </Column>
     </Row>
diff --git a/apps/react-native-lightning-example/src/pages/PseudoSelectorTest.tsx b/apps/react-native-lightning-example/src/pages/PseudoSelectorTest.tsx
new file mode 100644
index 00000000..12448fcd
--- /dev/null
+++ b/apps/react-native-lightning-example/src/pages/PseudoSelectorTest.tsx
@@ -0,0 +1,62 @@
+import type { FC } from 'react';
+import { Text, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { Row } from '@plextv/react-lightning-components';
+
+// This repo pins reanimated 4.3, whose CSSStyle type doesn't know pseudo
+// selectors yet, hence the casts below. The shape is what 4.6 ships.
+const asStyle = (style: object) => style as unknown as ViewStyle;
+
+// How far the labels drop so they clear the scaled artwork.
+const LABEL_SHIFT = 24;
+
+// The column shifts on :focus-within so the labels move with it, and the card
+// cancels the shift for itself: only the labels end up moving.
+const tileStyle = {
+  transform: {
+    default: [{ translateY: 0 }],
+    ':focus-within': [{ translateY: LABEL_SHIFT }],
+  },
+  transitionProperty: 'transform',
+  transitionDuration: 200,
+  transitionTimingFunction: 'ease-out',
+};
+
+const cardStyle = {
+  transform: {
+    default: [{ translateY: 0 }, { scale: 1 }],
+    ':focus': [{ translateY: -LABEL_SHIFT }, { scale: 1.08 }],
+  },
+  backgroundColor: '#26282c',
+  // The focus ring is an outline on the card itself, so it needs no extra view.
+  // Fading from a transparent white keeps it from going through black.
+  outlineStyle: 'solid' as const,
+  outlineWidth: 4,
+  outlineOffset: 2,
+  outlineColor: { default: 'rgba(255, 255, 255, 0)', ':focus': '#e5a00d' },
+  transitionProperty: ['transform', 'outlineColor'],
+  transitionDuration: [200, 120],
+  transitionTimingFunction: ['cubic-bezier(0.22, 1, 0.36, 1)', 'ease-out'],
+};
+
+const Tile = ({ title }: { title: string }) => (
+  <Animated.View style={[{ width: 220, gap: 16 }, asStyle(tileStyle)]}>
+    <Animated.View
+      focusable
+      style={[{ width: 220, height: 320, borderRadius: 8 }, asStyle(cardStyle)]}
+    />
+    <Text style={{ fontSize: 24 }}>{title}</Text>
+  </Animated.View>
+);
+
+const PseudoSelectorTest: FC = () => (
+  <Row focusable style={{ gap: 40, padding: 60 }}>
+    {['One', 'Two', 'Three', 'Four'].map((title) => (
+      <Tile key={title} title={title} />
+    ))}
+  </Row>
+);
+
+export { PseudoSelectorTest };
+export default PseudoSelectorTest;
diff --git a/apps/react-native-lightning-example/src/polyfills/isEdgeToEdge.ts b/apps/react-native-lightning-example/src/polyfills/isEdgeToEdge.ts
new file mode 100644
index 00000000..6242995e
--- /dev/null
+++ b/apps/react-native-lightning-example/src/polyfills/isEdgeToEdge.ts
@@ -0,0 +1,7 @@
+// reanimated imports react-native-is-edge-to-edge, whose "module" entry points
+// at a CJS file that vite serves without named exports. None of it means
+// anything on a TV, so the app aliases it to this.
+export const isEdgeToEdgeFromLibrary = () => false;
+export const isEdgeToEdgeFromProperty = () => false;
+export const isEdgeToEdge = () => false;
+export const controlEdgeToEdgeValues = () => {};
diff --git a/apps/react-native-lightning-example/vite.config.mjs b/apps/react-native-lightning-example/vite.config.mjs
index 287b5252..0e30f560 100644
--- a/apps/react-native-lightning-example/vite.config.mjs
+++ b/apps/react-native-lightning-example/vite.config.mjs
@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
 import babel from '@rolldown/plugin-babel';
 import legacy from '@vitejs/plugin-legacy';
 import { reactCompilerPreset } from '@vitejs/plugin-react';
@@ -32,6 +34,13 @@ const config = defineConfig((env) => ({
   build: {
     minify: false,
   },
+  resolve: {
+    alias: {
+      'react-native-is-edge-to-edge': fileURLToPath(
+        new URL('./src/polyfills/isEdgeToEdge.ts', import.meta.url),
+      ),
+    },
+  },
   server: {
     host: true,
     port: 3333,
diff --git a/packages/plugin-css-transform/src/convertCSSStyleToLightning.spec.ts b/packages/plugin-css-transform/src/convertCSSStyleToLightning.spec.ts
index 770b488a..ee340068 100644
--- a/packages/plugin-css-transform/src/convertCSSStyleToLightning.spec.ts
+++ b/packages/plugin-css-transform/src/convertCSSStyleToLightning.spec.ts
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import type { AllStyleProps } from './types/ReactStyle';
 import { convertCSSStyleToLightning } from './convertCSSStyleToLightning';
+import type { AllStyleProps } from './types/ReactStyle';
 
 // The return type is the view/image/text union; the text-only keys these specs
 // assert on aren't on the base, so read results through a loose record.
@@ -10,15 +10,13 @@ const convert = (style: AllStyleProps): Record<string, unknown> =>
 
 describe('convertCSSStyleToLightning border radius', () => {
   it('passes a uniform borderRadius through unchanged', () => {
-    expect(convertCSSStyleToLightning({ borderRadius: 8 })?.borderRadius).toBe(
-      8,
-    );
+    expect(convertCSSStyleToLightning({ borderRadius: 8 })?.borderRadius).toBe(8);
   });
 
   it('expands a single corner longhand into a [tl, tr, br, bl] array', () => {
-    expect(
-      convertCSSStyleToLightning({ borderTopRightRadius: 8 })?.borderRadius,
-    ).toEqual([0, 8, 0, 0]);
+    expect(convertCSSStyleToLightning({ borderTopRightRadius: 8 })?.borderRadius).toEqual([
+      0, 8, 0, 0,
+    ]);
   });
 
   it('maps logical start/end corners onto physical corners (LTR)', () => {
@@ -32,8 +30,7 @@ describe('convertCSSStyleToLightning border radius', () => {
 
   it('uses the uniform borderRadius as the base for unspecified corners', () => {
     expect(
-      convertCSSStyleToLightning({ borderRadius: 4, borderTopEndRadius: 8 })
-        ?.borderRadius,
+      convertCSSStyleToLightning({ borderRadius: 4, borderTopEndRadius: 8 })?.borderRadius,
     ).toEqual([4, 8, 4, 4]);
   });
 
@@ -108,3 +105,39 @@ describe('convertCSSStyleToLightning text shadows', () => {
     expect(warn).toHaveBeenCalled();
   });
 });
+
+describe('convertCSSStyleToLightning outline', () => {
+  it('converts the outline width, color and offset', () => {
+    expect(
+      convertCSSStyleToLightning({
+        outlineWidth: 4,
+        outlineColor: 'rgba(255, 0, 0, 1)',
+        outlineOffset: 2,
+      }),
+    ).toMatchObject({
+      outlineWidth: 4,
+      outlineColor: 0xff0000ff,
+      outlineOffset: 2,
+    });
+  });
+
+  it('leaves the width alone on a color-only update, so a focus ring can fade', () => {
+    const result = convertCSSStyleToLightning({ outlineColor: 'rgba(255, 0, 0, 0)' }) as Record<
+      string,
+      unknown
+    >;
+
+    expect(result.outlineColor).toBe(0xff000000);
+    expect('outlineWidth' in result).toBe(false);
+  });
+
+  it('drops outlineStyle, since only a solid ring can be drawn', () => {
+    const result = convertCSSStyleToLightning({
+      outlineStyle: 'dotted',
+      outlineWidth: 2,
+    }) as Record<string, unknown>;
+
+    expect(result.outlineStyle).toBeUndefined();
+    expect(result.outlineWidth).toBe(2);
+  });
+});
diff --git a/packages/plugin-css-transform/src/convertCSSStyleToLightning.ts b/packages/plugin-css-transform/src/convertCSSStyleToLightning.ts
index f158ace6..7433de42 100644
--- a/packages/plugin-css-transform/src/convertCSSStyleToLightning.ts
+++ b/packages/plugin-css-transform/src/convertCSSStyleToLightning.ts
@@ -1,7 +1,5 @@
-import type {
-  LightningElementStyle,
-  LightningTextElementStyle,
-} from '@plextv/react-lightning';
+import type { LightningElementStyle, LightningTextElementStyle } from '@plextv/react-lightning';
+
 import type { AllStyleProps } from './types/ReactStyle';
 import { flattenStyles } from './utils/flattenStyles';
 import { htmlColorToLightningColor } from './utils/htmlColorToLightningColor';
@@ -44,19 +42,12 @@ function resolveBorderRadius(
 
   const topLeft = num(borderTopLeftRadius) ?? num(borderTopStartRadius);
   const topRight = num(borderTopRightRadius) ?? num(borderTopEndRadius);
-  const bottomRight =
-    num(borderBottomRightRadius) ?? num(borderBottomEndRadius);
-  const bottomLeft =
-    num(borderBottomLeftRadius) ?? num(borderBottomStartRadius);
+  const bottomRight = num(borderBottomRightRadius) ?? num(borderBottomEndRadius);
+  const bottomLeft = num(borderBottomLeftRadius) ?? num(borderBottomStartRadius);
 
   const base = num(borderRadius);
 
-  if (
-    topLeft == null &&
-    topRight == null &&
-    bottomRight == null &&
-    bottomLeft == null
-  ) {
+  if (topLeft == null && topRight == null && bottomRight == null && bottomLeft == null) {
     return base;
   }
 
@@ -83,6 +74,11 @@ export function convertCSSStyleToLightning(
     border,
     borderWidth,
     borderColor,
+    outlineWidth,
+    outlineColor,
+    outlineOffset,
+    // Dropped: the shader only draws a solid ring, dashed/dotted have no equivalent.
+    outlineStyle: _outlineStyle,
     shadowColor,
     textShadowColor,
     textShadowOffset,
@@ -187,6 +183,21 @@ export function convertCSSStyleToLightning(
     }
   }
 
+  // The element draws the outline with the border shader, outside the node.
+  // Each prop is copied only when it's there: a color-only update (a focus ring
+  // fading in) must not reset the width the element already has.
+  if (typeof outlineWidth === 'number') {
+    finalStyle.outlineWidth = outlineWidth;
+  }
+
+  if (outlineColor != null) {
+    finalStyle.outlineColor = htmlColorToLightningColor(outlineColor) ?? 0;
+  }
+
+  if (typeof outlineOffset === 'number') {
+    finalStyle.outlineOffset = outlineOffset;
+  }
+
   if (otherStyles.display === 'none') {
     finalStyle.alpha = 0;
   } else if (opacity != null && typeof opacity === 'number') {
@@ -206,9 +217,7 @@ export function convertCSSStyleToLightning(
 
   if (otherStyles.top != null) {
     finalStyle.y =
-      typeof otherStyles.top === 'number'
-        ? otherStyles.top
-        : Number.parseInt(otherStyles.top, 10);
+      typeof otherStyles.top === 'number' ? otherStyles.top : Number.parseInt(otherStyles.top, 10);
   }
 
   // The renderer resolves the full 100-900 scale (and the keyword weights) to
@@ -241,8 +250,7 @@ export function convertCSSStyleToLightning(
   }
 
   if (transform != null) {
-    const { scaleX, scaleY, rotation, ...translateTransforms } =
-      parseTransform(transform);
+    const { scaleX, scaleY, rotation, ...translateTransforms } = parseTransform(transform);
 
     if (scaleX != null) {
       finalStyle.scaleX = scaleX;
@@ -260,11 +268,7 @@ export function convertCSSStyleToLightning(
   }
 
   // Disabled for now as some components set overflow to hidden while not having their size correctly calculated
-  if (
-    overflow === 'hidden' ||
-    overflowX === 'hidden' ||
-    overflowY === 'hidden'
-  ) {
+  if (overflow === 'hidden' || overflowX === 'hidden' || overflowY === 'hidden') {
     finalStyle.clipping = true;
   }
 
diff --git a/packages/plugin-css-transform/src/index.ts b/packages/plugin-css-transform/src/index.ts
index 5c09855c..8f1f97dd 100644
--- a/packages/plugin-css-transform/src/index.ts
+++ b/packages/plugin-css-transform/src/index.ts
@@ -18,6 +18,10 @@ const CSS_HANDLED_STYLE_PROPS: ReadonlySet<string> = new Set([
   'border',
   'borderWidth',
   'borderColor',
+  'outlineWidth',
+  'outlineColor',
+  'outlineOffset',
+  'outlineStyle',
   'shadowColor',
   'opacity',
   'overflow',
diff --git a/packages/plugin-reanimated/src/css/CSSStyleBinding.test.ts b/packages/plugin-reanimated/src/css/CSSStyleBinding.test.ts
new file mode 100644
index 00000000..c86ee457
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/CSSStyleBinding.test.ts
@@ -0,0 +1,225 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { PARTIAL_STYLE } from '@plextv/react-lightning';
+import type { FocusManager, LightningElement } from '@plextv/react-lightning';
+
+import { CSSStyleBinding } from './CSSStyleBinding';
+import { createCSSStyleParts, filterCSSStyle, finalizeCSSStyleParts } from './filterCSSStyle';
+import { normalizeCSSTransition } from './normalizeCSSTransition';
+import { toLightningTransition } from './toLightningTransition';
+import { resetWarnOnce } from './warnOnce';
+
+type Listener = (...args: unknown[]) => void;
+
+class FakeElement {
+  public focused = false;
+  public parent: FakeElement | null = null;
+  public props: { transition?: Record<string, unknown> } = {};
+  public pushes: { style: Record<string, unknown>; hadTransition: boolean }[] = [];
+
+  private readonly _listeners = new Map<string, Set<Listener>>();
+
+  public on(event: string, listener: Listener): () => void {
+    const listeners = this._listeners.get(event) ?? new Set();
+
+    listeners.add(listener);
+    this._listeners.set(event, listeners);
+
+    return () => listeners.delete(listener);
+  }
+
+  public setProps(payload: {
+    style?: Record<string, unknown>;
+    transition?: Record<string, unknown>;
+  }) {
+    if (payload.transition) {
+      this.props.transition = { ...this.props.transition, ...payload.transition };
+    }
+
+    if (payload.style) {
+      this.pushes.push({ style: payload.style, hadTransition: this.props.transition != null });
+    }
+  }
+
+  public setFocused(focused: boolean) {
+    this.focused = focused;
+
+    for (const listener of this._listeners.get('focusChanged') ?? []) {
+      listener(this, focused);
+    }
+  }
+
+  public asElement(): LightningElement {
+    return this as unknown as LightningElement;
+  }
+}
+
+class FakeFocusManager {
+  public focusPath: LightningElement[] = [];
+
+  private readonly _listeners = new Set<Listener>();
+
+  public on = (_event: string, listener: Listener): (() => void) => {
+    this._listeners.add(listener);
+
+    return () => this._listeners.delete(listener);
+  };
+
+  public setPath(path: FakeElement[]) {
+    this.focusPath = path.map((element) => element.asElement());
+
+    for (const listener of this._listeners) {
+      listener(this.focusPath);
+    }
+  }
+
+  public asFocusManager(): FocusManager<LightningElement> {
+    return this as unknown as FocusManager<LightningElement>;
+  }
+}
+
+function parse(style: Record<string, unknown>) {
+  const parts = finalizeCSSStyleParts(
+    (() => {
+      const collected = createCSSStyleParts();
+
+      filterCSSStyle(style, collected);
+
+      return collected;
+    })(),
+  );
+  const transitions = parts.transitionProps ? normalizeCSSTransition(parts.transitionProps) : null;
+
+  return { parts, transition: transitions ? toLightningTransition(transitions, parts) : null };
+}
+
+const focusStyle = {
+  opacity: { default: 1, ':focus': 0.5 },
+  transitionProperty: 'opacity',
+  transitionDuration: 200,
+};
+
+describe('CSSStyleBinding', () => {
+  beforeEach(() => {
+    resetWarnOnce();
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  it('pushes the selector value on focus and the resting value on blur', () => {
+    const element = new FakeElement();
+    const { parts, transition } = parse(focusStyle);
+    const binding = new CSSStyleBinding(null);
+
+    binding.setElement(element.asElement());
+    binding.update(parts, transition);
+
+    // The resting values aren't rendered, so attaching pushes them once.
+    expect(element.pushes).toEqual([
+      { style: expect.objectContaining({ opacity: 1 }), hadTransition: false },
+    ]);
+
+    element.setFocused(true);
+    expect(element.pushes.at(-1)?.style).toMatchObject({ opacity: 0.5 });
+
+    element.setFocused(false);
+    expect(element.pushes.at(-1)?.style).toMatchObject({ opacity: 1 });
+  });
+
+  it('marks its pushes partial so unrelated props survive', () => {
+    const element = new FakeElement();
+    const { parts, transition } = parse(focusStyle);
+    const binding = new CSSStyleBinding(null);
+
+    binding.setElement(element.asElement());
+    binding.update(parts, transition);
+    element.setFocused(true);
+
+    expect(element.pushes.at(-1)?.style[PARTIAL_STYLE as unknown as string]).toBe(true);
+  });
+
+  it('puts the transition on the element', () => {
+    const element = new FakeElement();
+    const { parts, transition } = parse(focusStyle);
+    const binding = new CSSStyleBinding(null);
+
+    binding.setElement(element.asElement());
+    binding.update(parts, transition);
+
+    expect(element.props.transition).toEqual({
+      alpha: { duration: 200, delay: 0, easing: 'ease' },
+    });
+  });
+
+  it('lands the resting values before the transition, so a focused mount does not animate in', () => {
+    const element = new FakeElement();
+
+    element.focused = true;
+
+    const { parts, transition } = parse(focusStyle);
+    const binding = new CSSStyleBinding(null);
+
+    binding.setElement(element.asElement());
+    binding.update(parts, transition);
+
+    expect(element.pushes).toEqual([
+      { style: expect.objectContaining({ opacity: 0.5 }), hadTransition: false },
+    ]);
+  });
+
+  it('activates :focus-within when a descendant takes focus', () => {
+    const focusManager = new FakeFocusManager();
+    const element = new FakeElement();
+    const child = new FakeElement();
+
+    child.parent = element;
+
+    const { parts, transition } = parse({
+      transform: { default: [{ translateY: 0 }], ':focus-within': [{ translateY: 10 }] },
+      transitionProperty: 'transform',
+      transitionDuration: 200,
+    });
+    const binding = new CSSStyleBinding(focusManager.asFocusManager());
+
+    binding.setElement(element.asElement());
+    binding.update(parts, transition);
+
+    focusManager.setPath([element, child]);
+    expect(element.pushes.at(-1)?.style).toMatchObject({ transform: [{ translateY: 10 }] });
+
+    focusManager.setPath([]);
+    expect(element.pushes.at(-1)?.style).toMatchObject({ transform: [{ translateY: 0 }] });
+  });
+
+  it('does not push again when a re-render produces an equal value', () => {
+    const element = new FakeElement();
+    const binding = new CSSStyleBinding(null);
+    const first = parse(focusStyle);
+
+    binding.setElement(element.asElement());
+    binding.update(first.parts, first.transition);
+    element.setFocused(true);
+
+    const pushes = element.pushes.length;
+    const second = parse(focusStyle);
+
+    binding.update(second.parts, second.transition);
+
+    expect(element.pushes).toHaveLength(pushes);
+  });
+
+  it('stops listening once destroyed', () => {
+    const element = new FakeElement();
+    const { parts, transition } = parse(focusStyle);
+    const binding = new CSSStyleBinding(null);
+
+    binding.setElement(element.asElement());
+    binding.update(parts, transition);
+    binding.destroy();
+
+    const pushes = element.pushes.length;
+
+    element.setFocused(true);
+
+    expect(element.pushes).toHaveLength(pushes);
+  });
+});
diff --git a/packages/plugin-reanimated/src/css/CSSStyleBinding.ts b/packages/plugin-reanimated/src/css/CSSStyleBinding.ts
new file mode 100644
index 00000000..01876bd8
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/CSSStyleBinding.ts
@@ -0,0 +1,199 @@
+import { PARTIAL_STYLE } from '@plextv/react-lightning';
+import type {
+  FocusManager,
+  LightningElement,
+  LightningElementStyle,
+} from '@plextv/react-lightning';
+
+import { createCSSStyleParts } from './filterCSSStyle';
+import { trackFocusWithin } from './focusWithin';
+import { resolvePseudoStyle } from './resolvePseudoStyle';
+import type { CSSStyleParts, LightningTransition, SupportedPseudoSelector } from './types';
+import { warnOnce } from './warnOnce';
+
+function isSameValue(a: unknown, b: unknown): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((item, index) => isSameValue(item, b[index]));
+  }
+
+  if (a && b && typeof a === 'object' && typeof b === 'object') {
+    const left = a as Record<string, unknown>;
+    const right = b as Record<string, unknown>;
+    const keys = Object.keys(left);
+
+    return (
+      keys.length === Object.keys(right).length &&
+      keys.every((key) => isSameValue(left[key], right[key]))
+    );
+  }
+
+  return false;
+}
+
+/**
+ * Runs the CSS side of an animated style for one element: keeps the transition
+ * settings on the node and swaps the pseudo-selector props as focus moves.
+ */
+export class CSSStyleBinding {
+  private readonly _focusManager: FocusManager<LightningElement> | null;
+  private _element: LightningElement | null = null;
+  private _parts: CSSStyleParts = createCSSStyleParts();
+  private _transition: LightningTransition | null = null;
+  private _active = new Set<SupportedPseudoSelector>();
+  private _applied: Record<string, unknown> = {};
+  private _hasPushed = false;
+  private _disposers: (() => void)[] = [];
+
+  public constructor(focusManager: FocusManager<LightningElement> | null) {
+    this._focusManager = focusManager;
+  }
+
+  /** Called after every commit that produced new style objects. */
+  public update(parts: CSSStyleParts, transition: LightningTransition | null): void {
+    this._parts = parts;
+    this._transition = transition;
+    this._resubscribe();
+    this._apply();
+  }
+
+  public setElement(element: LightningElement | null): void {
+    if (this._element === element) {
+      return;
+    }
+
+    this._element = element;
+    // A fresh node holds none of our props (and none of them are rendered).
+    this._applied = {};
+    this._hasPushed = false;
+    this._resubscribe();
+    this._apply();
+  }
+
+  public destroy(): void {
+    this._unsubscribe();
+    this._element = null;
+  }
+
+  private _unsubscribe(): void {
+    for (const dispose of this._disposers) {
+      dispose();
+    }
+
+    this._disposers = [];
+  }
+
+  private _resubscribe(): void {
+    this._unsubscribe();
+
+    const element = this._element;
+
+    if (!element) {
+      return;
+    }
+
+    const active = new Set<SupportedPseudoSelector>();
+
+    if (this._parts.pseudoStyles[':focus']) {
+      if (element.focused) {
+        active.add(':focus');
+      }
+
+      this._disposers.push(
+        element.on('focusChanged', (_element: LightningElement, focused: boolean) => {
+          this._setActive(':focus', focused);
+        }),
+      );
+    }
+
+    if (this._parts.pseudoStyles[':focus-within']) {
+      if (this._focusManager) {
+        const { within, dispose } = trackFocusWithin(this._focusManager, element, (isWithin) => {
+          this._setActive(':focus-within', isWithin);
+        });
+
+        if (within) {
+          active.add(':focus-within');
+        }
+
+        this._disposers.push(dispose);
+      } else {
+        warnOnce('":focus-within" needs a FocusManagerProvider above the animated component.');
+      }
+    }
+
+    this._active = active;
+  }
+
+  private _setActive(selector: SupportedPseudoSelector, active: boolean): void {
+    if (active) {
+      this._active.add(selector);
+    } else {
+      this._active.delete(selector);
+    }
+
+    this._apply();
+  }
+
+  private _apply(): void {
+    const element = this._element;
+
+    if (!element) {
+      return;
+    }
+
+    const resolved = resolvePseudoStyle(
+      this._parts.base,
+      this._parts.pseudoStyles,
+      this._active,
+    ) as Record<string, unknown>;
+    const changed: Record<string, unknown> = {};
+    let hasChanges = false;
+
+    for (const prop in resolved) {
+      if (!isSameValue(resolved[prop], this._applied[prop])) {
+        changed[prop] = resolved[prop];
+        hasChanges = true;
+      }
+    }
+
+    this._applied = resolved;
+
+    if (!hasChanges) {
+      this._syncTransition(element);
+
+      return;
+    }
+
+    // The resting values land before the transition does, so a node attaching
+    // in an active state doesn't animate in from the node's defaults.
+    const deferTransition = !this._hasPushed;
+
+    this._hasPushed = true;
+
+    if (!deferTransition) {
+      this._syncTransition(element);
+    }
+
+    this._push(element, changed);
+
+    if (deferTransition) {
+      this._syncTransition(element);
+    }
+  }
+
+  private _syncTransition(element: LightningElement): void {
+    if (this._transition) {
+      element.setProps({ transition: this._transition });
+    }
+  }
+
+  private _push(element: LightningElement, style: Record<string, unknown>): void {
+    (style as Record<PropertyKey, unknown>)[PARTIAL_STYLE] = true;
+
+    element.setProps({ style: style as LightningElementStyle });
+  }
+}
diff --git a/packages/plugin-reanimated/src/css/filterCSSStyle.test.ts b/packages/plugin-reanimated/src/css/filterCSSStyle.test.ts
new file mode 100644
index 00000000..932063f7
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/filterCSSStyle.test.ts
@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { createCSSStyleParts, filterCSSStyle, finalizeCSSStyleParts } from './filterCSSStyle';
+import { resetWarnOnce } from './warnOnce';
+
+function filter(...styles: Record<string, unknown>[]) {
+  const parts = createCSSStyleParts();
+
+  for (const style of styles) {
+    filterCSSStyle(style, parts);
+  }
+
+  return finalizeCSSStyleParts(parts);
+}
+
+describe('filterCSSStyle', () => {
+  beforeEach(() => {
+    resetWarnOnce();
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  it('keeps plain style props in the rendered style', () => {
+    expect(filter({ opacity: 0.5, padding: 10 }).style).toEqual({ opacity: 0.5, padding: 10 });
+  });
+
+  it('splits a pseudo-selector value into a resting value and an override', () => {
+    const parts = filter({
+      opacity: { default: 1, ':focus': 0.5 },
+      padding: 10,
+    });
+
+    expect(parts.style).toEqual({ padding: 10 });
+    expect(parts.base).toEqual({ opacity: 1 });
+    expect(parts.pseudoStyles).toEqual({ ':focus': { opacity: 0.5 } });
+  });
+
+  it('takes the resting value from an earlier style object', () => {
+    const parts = filter({ opacity: 1 }, { opacity: { ':focus': 0.5 } });
+
+    expect(parts.style).toEqual({});
+    expect(parts.base).toEqual({ opacity: 1 });
+  });
+
+  it('collects transition props', () => {
+    const parts = filter({
+      transitionProperty: 'opacity',
+      transitionDuration: 200,
+    });
+
+    expect(parts.style).toEqual({});
+    expect(parts.transitionProps).toEqual({
+      transitionProperty: 'opacity',
+      transitionDuration: 200,
+    });
+  });
+
+  it('lets the transition shorthand drop everything set before it', () => {
+    const parts = filter({ transitionDuration: 200 }, { transition: 'opacity 100ms' });
+
+    expect(parts.transitionProps).toEqual({ transition: 'opacity 100ms' });
+  });
+
+  it('ignores selectors that need pointer or press state', () => {
+    const parts = filter({ opacity: { default: 1, ':hover': 0.5, ':focus': 0.8 } });
+
+    expect(parts.pseudoStyles).toEqual({ ':focus': { opacity: 0.8 } });
+    expect(console.warn).toHaveBeenCalledOnce();
+  });
+
+  it('ignores css animation props', () => {
+    const parts = filter({ animationName: { from: { opacity: 0 } }, animationDuration: 100 });
+
+    expect(parts.style).toEqual({});
+    expect(parts.transitionProps).toBeNull();
+  });
+
+  it('treats an explicit undefined as unset', () => {
+    expect(filter({ opacity: undefined }).style).toEqual({});
+  });
+
+  it('leaves a transform array alone', () => {
+    const parts = filter({ transform: [{ translateY: 10 }] });
+
+    expect(parts.style).toEqual({ transform: [{ translateY: 10 }] });
+  });
+});
diff --git a/packages/plugin-reanimated/src/css/filterCSSStyle.ts b/packages/plugin-reanimated/src/css/filterCSSStyle.ts
new file mode 100644
index 00000000..0feedf05
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/filterCSSStyle.ts
@@ -0,0 +1,136 @@
+import type { DefaultStyle } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+
+import {
+  type CSSStyleParts,
+  PSEUDO_SELECTORS,
+  type SupportedPseudoSelector,
+  SUPPORTED_PSEUDO_SELECTORS,
+} from './types';
+import { warnOnce } from './warnOnce';
+
+const TRANSITION_PROPS: ReadonlySet<string> = new Set([
+  'transition',
+  'transitionProperty',
+  'transitionDuration',
+  'transitionTimingFunction',
+  'transitionDelay',
+  'transitionBehavior',
+]);
+
+const ANIMATION_PROPS: ReadonlySet<string> = new Set([
+  'animation',
+  'animationName',
+  'animationDuration',
+  'animationTimingFunction',
+  'animationDelay',
+  'animationIterationCount',
+  'animationDirection',
+  'animationFillMode',
+  'animationPlayState',
+]);
+
+const SUPPORTED: ReadonlySet<string> = new Set(SUPPORTED_PSEUDO_SELECTORS);
+const KNOWN: ReadonlySet<string> = new Set(PSEUDO_SELECTORS);
+
+function isPseudoSelectorValue(value: unknown): value is Record<string, unknown> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return false;
+  }
+
+  const keys = Object.keys(value);
+
+  return keys.length > 0 && keys.every((key) => key === 'default' || key.startsWith(':'));
+}
+
+export function createCSSStyleParts(style: DefaultStyle = {}): CSSStyleParts {
+  return { style, base: {}, pseudoStyles: {}, transitionProps: null };
+}
+
+/**
+ * Moves the resting value of every pseudo-selector prop out of the rendered
+ * style. Runs once the whole style array is folded, since a later style object
+ * can turn a plain prop into a pseudo one.
+ */
+export function finalizeCSSStyleParts(parts: CSSStyleParts): CSSStyleParts {
+  const style = parts.style as Record<string, unknown>;
+  const base = parts.base as Record<string, unknown>;
+
+  for (const selector in parts.pseudoStyles) {
+    const selectorStyle = parts.pseudoStyles[selector as SupportedPseudoSelector] as Record<
+      string,
+      unknown
+    >;
+
+    for (const prop in selectorStyle) {
+      if (prop in style) {
+        base[prop] = style[prop];
+        delete style[prop];
+      }
+    }
+  }
+
+  return parts;
+}
+
+/**
+ * Splits one style object into resting values, pseudo-selector overrides and
+ * transition settings, accumulating into `parts` so a style array folds into a
+ * single result. Mirrors reanimated's filterCSSAndStyleProperties.
+ */
+export function filterCSSStyle(style: Record<string, unknown>, parts: CSSStyleParts): void {
+  for (const prop in style) {
+    const value = style[prop];
+
+    // An explicit undefined reads as "not set", same as reanimated.
+    if (value === undefined) {
+      continue;
+    }
+
+    if (TRANSITION_PROPS.has(prop)) {
+      // The `transition` shorthand drops everything set before it.
+      if (prop === 'transition') {
+        parts.transitionProps = { transition: value };
+      } else {
+        (parts.transitionProps ??= {})[prop] = value;
+      }
+
+      continue;
+    }
+
+    if (ANIMATION_PROPS.has(prop)) {
+      warnOnce(`CSS animations are not supported on Lightning yet, ignoring "${prop}".`);
+
+      continue;
+    }
+
+    if (isPseudoSelectorValue(value)) {
+      if (value.default !== undefined) {
+        (parts.style as Record<string, unknown>)[prop] = value.default;
+      }
+
+      for (const selector in value) {
+        if (selector === 'default') {
+          continue;
+        }
+
+        if (!SUPPORTED.has(selector)) {
+          warnOnce(
+            KNOWN.has(selector)
+              ? `Pseudo selector "${selector}" needs pointer or press state, which Lightning doesn't have. Ignoring it.`
+              : `Pseudo selector "${selector}" is not supported on Lightning, ignoring it.`,
+          );
+
+          continue;
+        }
+
+        const pseudoStyle = (parts.pseudoStyles[selector as SupportedPseudoSelector] ??= {});
+
+        (pseudoStyle as Record<string, unknown>)[prop] = value[selector];
+      }
+
+      continue;
+    }
+
+    (parts.style as Record<string, unknown>)[prop] = value;
+  }
+}
diff --git a/packages/plugin-reanimated/src/css/focusWithin.ts b/packages/plugin-reanimated/src/css/focusWithin.ts
new file mode 100644
index 00000000..05083ec4
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/focusWithin.ts
@@ -0,0 +1,99 @@
+import type { FocusManager, LightningElement } from '@plextv/react-lightning';
+
+type Listener = (within: boolean) => void;
+
+/**
+ * `:focus-within` has to answer "does this element contain the focused one",
+ * and a wrapper View never appears in the focus path. One tracker per focus
+ * manager walks up from the focused leaf once per focus change instead of
+ * every subscriber walking its own ancestors.
+ */
+class FocusWithinTracker {
+  private readonly _focusManager: FocusManager<LightningElement>;
+  private readonly _listeners = new Map<LightningElement, Listener>();
+  private _within = new Set<LightningElement>();
+  private _unsubscribe: (() => void) | null = null;
+
+  public constructor(focusManager: FocusManager<LightningElement>) {
+    this._focusManager = focusManager;
+  }
+
+  /** Returns whether the element already contains focus. */
+  public add(element: LightningElement, listener: Listener): boolean {
+    this._listeners.set(element, listener);
+    this._unsubscribe ??= this._focusManager.on('focusPathChanged', this._onFocusPathChanged);
+
+    const within = this._contains(element, this._focusManager.focusPath);
+
+    if (within) {
+      this._within.add(element);
+    }
+
+    return within;
+  }
+
+  public remove(element: LightningElement): void {
+    this._listeners.delete(element);
+    this._within.delete(element);
+
+    if (!this._listeners.size) {
+      this._unsubscribe?.();
+      this._unsubscribe = null;
+    }
+  }
+
+  private _contains(element: LightningElement, path: LightningElement[]): boolean {
+    for (let node: LightningElement | null | undefined = path.at(-1); node; node = node.parent) {
+      if (node === element) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private _onFocusPathChanged = (path: LightningElement[]): void => {
+    const next = new Set<LightningElement>();
+
+    for (let node: LightningElement | null | undefined = path.at(-1); node; node = node.parent) {
+      if (this._listeners.has(node)) {
+        next.add(node);
+      }
+    }
+
+    const previous = this._within;
+
+    this._within = next;
+
+    for (const element of next) {
+      if (!previous.has(element)) {
+        this._listeners.get(element)?.(true);
+      }
+    }
+
+    for (const element of previous) {
+      if (!next.has(element)) {
+        this._listeners.get(element)?.(false);
+      }
+    }
+  };
+}
+
+const trackers = new WeakMap<FocusManager<LightningElement>, FocusWithinTracker>();
+
+export function trackFocusWithin(
+  focusManager: FocusManager<LightningElement>,
+  element: LightningElement,
+  listener: Listener,
+): { within: boolean; dispose: () => void } {
+  let tracker = trackers.get(focusManager);
+
+  if (!tracker) {
+    tracker = new FocusWithinTracker(focusManager);
+    trackers.set(focusManager, tracker);
+  }
+
+  const within = tracker.add(element, listener);
+
+  return { within, dispose: () => tracker?.remove(element) };
+}
diff --git a/packages/plugin-reanimated/src/css/index.ts b/packages/plugin-reanimated/src/css/index.ts
new file mode 100644
index 00000000..0081ae28
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/index.ts
@@ -0,0 +1,7 @@
+export { CSSStyleBinding } from './CSSStyleBinding';
+export { createCSSStyleParts, filterCSSStyle, finalizeCSSStyleParts } from './filterCSSStyle';
+export { normalizeCSSTransition } from './normalizeCSSTransition';
+export { resolvePseudoStyle } from './resolvePseudoStyle';
+export { toLightningTransition } from './toLightningTransition';
+export { hasPseudoStyles } from './types';
+export type { CSSStyleParts, LightningTransition, PseudoStyles } from './types';
diff --git a/packages/plugin-reanimated/src/css/normalizeCSSTransition.test.ts b/packages/plugin-reanimated/src/css/normalizeCSSTransition.test.ts
new file mode 100644
index 00000000..c2f0ee07
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/normalizeCSSTransition.test.ts
@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { normalizeCSSTransition, timeToMs } from './normalizeCSSTransition';
+import { resetWarnOnce } from './warnOnce';
+
+describe('timeToMs', () => {
+  it('reads numbers as milliseconds and parses time units', () => {
+    expect(timeToMs(200)).toBe(200);
+    expect(timeToMs('200ms')).toBe(200);
+    expect(timeToMs('0.3s')).toBe(300);
+    expect(timeToMs('nope', 50)).toBe(50);
+  });
+});
+
+describe('normalizeCSSTransition', () => {
+  beforeEach(() => {
+    resetWarnOnce();
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  it('reads a single property', () => {
+    expect(
+      normalizeCSSTransition({
+        transitionProperty: 'opacity',
+        transitionDuration: 200,
+        transitionTimingFunction: 'ease-in',
+        transitionDelay: '50ms',
+      }),
+    ).toEqual(new Map([['opacity', { duration: 200, delay: 50, easing: 'ease-in' }]]));
+  });
+
+  it('repeats a shorter settings list over the properties', () => {
+    const result = normalizeCSSTransition({
+      transitionProperty: ['transform', 'opacity', 'backgroundColor'],
+      transitionDuration: [100, 200],
+    });
+
+    expect(result?.get('transform')?.duration).toBe(100);
+    expect(result?.get('opacity')?.duration).toBe(200);
+    expect(result?.get('backgroundColor')?.duration).toBe(100);
+  });
+
+  it('defaults the timing function to ease', () => {
+    expect(
+      normalizeCSSTransition({ transitionProperty: 'opacity', transitionDuration: 1 })?.get(
+        'opacity',
+      )?.easing,
+    ).toBe('ease');
+  });
+
+  it('spells a reanimated cubicBezier easing the way the renderer parses it', () => {
+    const easing = { x1: 0.22, y1: 1, x2: 0.36, y2: 1 };
+
+    expect(
+      normalizeCSSTransition({
+        transitionProperty: 'transform',
+        transitionDuration: 200,
+        transitionTimingFunction: easing,
+      })?.get('transform')?.easing,
+    ).toBe('cubic-bezier(0.22, 1, 0.36, 1)');
+  });
+
+  it('falls back to linear for a timing function the renderer has no equivalent for', () => {
+    expect(
+      normalizeCSSTransition({
+        transitionProperty: 'opacity',
+        transitionDuration: 200,
+        transitionTimingFunction: 'steps(4, jump-end)',
+      })?.get('opacity')?.easing,
+    ).toBe('linear');
+  });
+
+  it('drops "none" and returns null when nothing is left', () => {
+    expect(
+      normalizeCSSTransition({ transitionProperty: 'none', transitionDuration: 200 }),
+    ).toBeNull();
+    expect(normalizeCSSTransition({})).toBeNull();
+  });
+
+  it('defaults the property to all when only a duration is given', () => {
+    expect(normalizeCSSTransition({ transitionDuration: 200 })?.has('all')).toBe(true);
+  });
+
+  it('parses the transition shorthand', () => {
+    expect(
+      normalizeCSSTransition({ transition: 'transform 200ms ease-in 50ms, opacity 0.3s' }),
+    ).toEqual(
+      new Map([
+        ['transform', { duration: 200, delay: 50, easing: 'ease-in' }],
+        ['opacity', { duration: 300, delay: 0, easing: 'ease' }],
+      ]),
+    );
+  });
+
+  it('parses a shorthand cubic-bezier without splitting on its commas', () => {
+    expect(
+      normalizeCSSTransition({ transition: 'transform 200ms cubic-bezier(0.22, 1, 0.36, 1)' })?.get(
+        'transform',
+      )?.easing,
+    ).toBe('cubic-bezier(0.22, 1, 0.36, 1)');
+  });
+});
diff --git a/packages/plugin-reanimated/src/css/normalizeCSSTransition.ts b/packages/plugin-reanimated/src/css/normalizeCSSTransition.ts
new file mode 100644
index 00000000..08d7183d
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/normalizeCSSTransition.ts
@@ -0,0 +1,196 @@
+import type { AnimationSettings } from '@lightningjs/renderer';
+
+import { resolveTimingEasing } from '../animation/resolveTimingEasing';
+import type { CSSTransitionProps, PropertyTransitions } from './types';
+import { warnOnce } from './warnOnce';
+
+type ShorthandItem = {
+  property: string;
+  duration: number;
+  delay: number;
+  easing: AnimationSettings['easing'];
+};
+
+const TIME_PATTERN = /^-?\d*\.?\d+(ms|s)$/;
+
+const EASING_KEYWORDS: ReadonlySet<string> = new Set([
+  'linear',
+  'ease',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'step-start',
+  'step-end',
+]);
+
+// CSS default for transition-timing-function.
+const DEFAULT_EASING = 'ease';
+
+function toArray<T>(value: T | T[] | undefined): T[] {
+  if (value === undefined) {
+    return [];
+  }
+
+  return Array.isArray(value) ? value : [value];
+}
+
+/** CSS repeats a shorter settings list over the property list. */
+function at<T>(values: T[], index: number, fallback: T): T {
+  return values.length ? (values[index % values.length] as T) : fallback;
+}
+
+export function timeToMs(value: unknown, fallback = 0): number {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    const amount = Number.parseFloat(value);
+
+    if (!Number.isNaN(amount)) {
+      return value.endsWith('ms') ? amount : amount * 1000;
+    }
+  }
+
+  return fallback;
+}
+
+/**
+ * The renderer parses `ease*` names and `cubic-bezier(...)` itself, and takes a
+ * function easing directly. Anything else (steps(), linear() with points) has
+ * no equivalent, so it falls back to linear.
+ */
+export function resolveCSSTimingFunction(value: unknown): AnimationSettings['easing'] {
+  if (value == null) {
+    return DEFAULT_EASING;
+  }
+
+  if (typeof value === 'string') {
+    if (EASING_KEYWORDS.has(value) || value.startsWith('cubic-bezier')) {
+      return value;
+    }
+
+    warnOnce(`Timing function "${value}" is not supported on Lightning, using linear.`);
+
+    return 'linear';
+  }
+
+  if (typeof value === 'object') {
+    const bezier = value as { x1?: number; y1?: number; x2?: number; y2?: number };
+
+    if (typeof bezier.x1 === 'number' && typeof bezier.x2 === 'number') {
+      return `cubic-bezier(${bezier.x1}, ${bezier.y1}, ${bezier.x2}, ${bezier.y2})`;
+    }
+  }
+
+  // Easing.* functions and Easing.bezier factories still work.
+  return resolveTimingEasing(value);
+}
+
+function splitTopLevel(value: string, separator: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = '';
+
+  for (const char of value) {
+    if (char === '(') {
+      depth += 1;
+    } else if (char === ')') {
+      depth -= 1;
+    }
+
+    if (depth === 0 && char === separator) {
+      parts.push(current);
+      current = '';
+    } else {
+      current += char;
+    }
+  }
+
+  parts.push(current);
+
+  return parts.map((part) => part.trim()).filter(Boolean);
+}
+
+function parseShorthandItem(item: string): ShorthandItem | null {
+  const tokens = splitTopLevel(item, ' ');
+  const times: number[] = [];
+  let property: string | null = null;
+  let easing: unknown;
+
+  for (const token of tokens) {
+    if (TIME_PATTERN.test(token)) {
+      times.push(timeToMs(token));
+    } else if (EASING_KEYWORDS.has(token) || token.includes('(')) {
+      easing = token;
+    } else if (property === null) {
+      property = token;
+    } else {
+      warnOnce(`Ignoring unknown transition shorthand token "${token}".`);
+    }
+  }
+
+  if (property === 'none') {
+    return null;
+  }
+
+  return {
+    property: property ?? 'all',
+    duration: times[0] ?? 0,
+    delay: times[1] ?? 0,
+    easing: resolveCSSTimingFunction(easing),
+  };
+}
+
+/**
+ * Turns the `transition*` props (or the `transition` shorthand) into per-property
+ * animation settings. `all` is kept as a key and expanded by the caller.
+ */
+export function normalizeCSSTransition(props: CSSTransitionProps): PropertyTransitions | null {
+  const transitions: PropertyTransitions = new Map();
+
+  if (typeof props.transition === 'string') {
+    for (const item of splitTopLevel(props.transition, ',')) {
+      const parsed = parseShorthandItem(item);
+
+      if (parsed) {
+        transitions.set(parsed.property, {
+          duration: parsed.duration,
+          delay: parsed.delay,
+          easing: parsed.easing,
+        });
+      }
+    }
+
+    return transitions.size ? transitions : null;
+  }
+
+  const properties = toArray(props.transitionProperty as string | string[] | undefined);
+  const durations = toArray(props.transitionDuration as unknown[]);
+  const delays = toArray(props.transitionDelay as unknown[]);
+  const easings = toArray(props.transitionTimingFunction as unknown[]);
+
+  // CSS defaults transition-property to `all`; without any timing there is
+  // nothing to animate.
+  if (!properties.length) {
+    if (!durations.length) {
+      return null;
+    }
+
+    properties.push('all');
+  }
+
+  properties.forEach((property, index) => {
+    if (property === 'none') {
+      return;
+    }
+
+    transitions.set(property, {
+      duration: timeToMs(at(durations, index, 0)),
+      delay: timeToMs(at(delays, index, 0)),
+      easing: resolveCSSTimingFunction(at(easings, index, undefined)),
+    });
+  });
+
+  return transitions.size ? transitions : null;
+}
diff --git a/packages/plugin-reanimated/src/css/resolvePseudoStyle.test.ts b/packages/plugin-reanimated/src/css/resolvePseudoStyle.test.ts
new file mode 100644
index 00000000..8c9f544d
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/resolvePseudoStyle.test.ts
@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { resolvePseudoStyle } from './resolvePseudoStyle';
+import type { SupportedPseudoSelector } from './types';
+import { resetWarnOnce } from './warnOnce';
+
+const active = (...selectors: SupportedPseudoSelector[]) => new Set(selectors);
+
+describe('resolvePseudoStyle', () => {
+  beforeEach(() => {
+    resetWarnOnce();
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  it('resolves to the resting values while nothing is active', () => {
+    expect(resolvePseudoStyle({ opacity: 1 }, { ':focus': { opacity: 0.5 } }, active())).toEqual({
+      opacity: 1,
+    });
+  });
+
+  it('resolves to the selector value while it is active', () => {
+    expect(
+      resolvePseudoStyle({ opacity: 1 }, { ':focus': { opacity: 0.5 } }, active(':focus')),
+    ).toEqual({ opacity: 0.5 });
+  });
+
+  it('lets :focus win over :focus-within', () => {
+    expect(
+      resolvePseudoStyle(
+        { opacity: 1 },
+        { ':focus': { opacity: 0.5 }, ':focus-within': { opacity: 0.8 } },
+        active(':focus', ':focus-within'),
+      ),
+    ).toEqual({ opacity: 0.5 });
+  });
+
+  it('keeps a lower-priority active value for a prop the winner does not set', () => {
+    expect(
+      resolvePseudoStyle(
+        { opacity: 1, padding: 0 },
+        { ':focus': { opacity: 0.5 }, ':focus-within': { padding: 10 } },
+        active(':focus', ':focus-within'),
+      ),
+    ).toEqual({ opacity: 0.5, padding: 10 });
+  });
+
+  it('only returns props a selector mentions', () => {
+    expect(
+      resolvePseudoStyle({ opacity: 1, padding: 10 }, { ':focus': { opacity: 0.5 } }, active()),
+    ).toEqual({ opacity: 1 });
+  });
+
+  it('drops a prop with no resting value, since it could never be reverted', () => {
+    expect(resolvePseudoStyle({}, { ':focus': { opacity: 0.5 } }, active())).toEqual({});
+    expect(console.warn).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/plugin-reanimated/src/css/resolvePseudoStyle.ts b/packages/plugin-reanimated/src/css/resolvePseudoStyle.ts
new file mode 100644
index 00000000..80245b81
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/resolvePseudoStyle.ts
@@ -0,0 +1,53 @@
+import type { DefaultStyle } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+
+import {
+  type PseudoStyles,
+  type SupportedPseudoSelector,
+  SUPPORTED_PSEUDO_SELECTORS,
+} from './types';
+import { warnOnce } from './warnOnce';
+
+/**
+ * Resolves the pseudo-selector props for the currently active states: the
+ * highest-priority active selector that sets a prop wins, anything else falls
+ * back to the resting value. Only props some selector mentions are returned, so
+ * the caller can push (and revert) a partial style.
+ */
+export function resolvePseudoStyle(
+  base: DefaultStyle,
+  pseudoStyles: PseudoStyles,
+  active: ReadonlySet<SupportedPseudoSelector>,
+): DefaultStyle {
+  const resolved: Record<string, unknown> = {};
+  const baseStyle = base as Record<string, unknown>;
+
+  for (const selector of SUPPORTED_PSEUDO_SELECTORS) {
+    const selectorStyle = pseudoStyles[selector] as Record<string, unknown> | undefined;
+
+    if (!selectorStyle) {
+      continue;
+    }
+
+    for (const prop in selectorStyle) {
+      if (active.has(selector)) {
+        resolved[prop] = selectorStyle[prop];
+      } else if (!(prop in resolved)) {
+        resolved[prop] = baseStyle[prop];
+      }
+    }
+  }
+
+  for (const prop in resolved) {
+    if (resolved[prop] === undefined) {
+      // Lightning merges style updates, so a prop that reverts to undefined is
+      // never repainted and the state would stick.
+      warnOnce(
+        `"${prop}" has a pseudo-selector value but no default, so it can't be reverted. Add a "default".`,
+      );
+
+      delete resolved[prop];
+    }
+  }
+
+  return resolved as DefaultStyle;
+}
diff --git a/packages/plugin-reanimated/src/css/toLightningTransition.test.ts b/packages/plugin-reanimated/src/css/toLightningTransition.test.ts
new file mode 100644
index 00000000..e629ca90
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/toLightningTransition.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest';
+
+import { createCSSStyleParts } from './filterCSSStyle';
+import { toLightningTransition } from './toLightningTransition';
+import type { CSSStyleParts, PropertyTransitions } from './types';
+
+const settings = { duration: 200, delay: 0, easing: 'ease' as const };
+
+function parts(overrides: Partial<CSSStyleParts>): CSSStyleParts {
+  return { ...createCSSStyleParts(), ...overrides };
+}
+
+describe('toLightningTransition', () => {
+  it('renames react-native props to their lightning equivalent', () => {
+    const transitions: PropertyTransitions = new Map([
+      ['opacity', settings],
+      ['backgroundColor', settings],
+    ]);
+
+    expect(toLightningTransition(transitions, parts({}))).toEqual({
+      alpha: settings,
+      color: settings,
+    });
+  });
+
+  it('expands a transform onto the axes the style uses', () => {
+    const transitions: PropertyTransitions = new Map([['transform', settings]]);
+    const styleParts = parts({
+      base: { transform: [{ translateY: 0 }, { scale: 1 }] },
+    });
+
+    expect(toLightningTransition(transitions, styleParts)).toEqual({
+      y: settings,
+      scaleX: settings,
+      scaleY: settings,
+    });
+  });
+
+  it('picks up an axis that only a pseudo state uses', () => {
+    const transitions: PropertyTransitions = new Map([['transform', settings]]);
+    const styleParts = parts({
+      base: { transform: [{ translateY: 0 }] },
+      pseudoStyles: { ':focus': { transform: [{ translateY: 10 }, { translateX: 5 }] } },
+    });
+
+    expect(Object.keys(toLightningTransition(transitions, styleParts) ?? {}).sort()).toEqual([
+      'x',
+      'y',
+    ]);
+  });
+
+  it('expands "all" over the props the style sets, not the whole element', () => {
+    const transitions: PropertyTransitions = new Map([['all', settings]]);
+    const styleParts = parts({
+      style: { padding: 10 },
+      base: { opacity: 1 },
+      pseudoStyles: { ':focus': { opacity: 0.5 } },
+    });
+
+    expect(toLightningTransition(transitions, styleParts)).toEqual({
+      padding: settings,
+      alpha: settings,
+    });
+  });
+
+  it('lets an explicit property beat "all"', () => {
+    const transitions: PropertyTransitions = new Map<string, typeof settings>([
+      ['all', settings],
+      ['opacity', { ...settings, duration: 50 }],
+    ]);
+    const styleParts = parts({ base: { opacity: 1 } });
+
+    expect(toLightningTransition(transitions, styleParts)?.alpha?.duration).toBe(50);
+  });
+
+  it('sends an outline color transition to the shader', () => {
+    const transitions: PropertyTransitions = new Map([['outlineColor', settings]]);
+
+    expect(toLightningTransition(transitions, parts({}))).toEqual({ shaderProps: settings });
+  });
+
+  it('returns null when nothing maps', () => {
+    expect(toLightningTransition(new Map(), parts({}))).toBeNull();
+  });
+});
diff --git a/packages/plugin-reanimated/src/css/toLightningTransition.ts b/packages/plugin-reanimated/src/css/toLightningTransition.ts
new file mode 100644
index 00000000..aedfd8a4
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/toLightningTransition.ts
@@ -0,0 +1,124 @@
+import type { DefaultStyle } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+
+import type { LightningElementStyle } from '@plextv/react-lightning';
+import { parseTransform } from '@plextv/react-lightning-plugin-css-transform';
+
+import { getTransitionProperty } from '../utils/getTransitionProperty';
+import type { CSSStyleParts, LightningTransition, PropertyTransitions } from './types';
+
+const TRANSFORM_KEYS = {
+  translateX: 'x',
+  translateY: 'y',
+  scaleX: 'scaleX',
+  scaleY: 'scaleY',
+  rotation: 'rotation',
+} as const satisfies Record<string, keyof LightningElementStyle>;
+
+// A border or outline is painted by the node's shader, so its transition is a
+// shaderProps one rather than a node prop.
+const SHADER_PROPS: ReadonlySet<string> = new Set([
+  'borderColor',
+  'borderWidth',
+  'outlineColor',
+  'outlineWidth',
+  'outlineOffset',
+]);
+
+/** Every style object the CSS style drives, resting values and pseudo overrides. */
+function eachStyle(parts: CSSStyleParts): Record<string, unknown>[] {
+  const styles: Record<string, unknown>[] = [
+    parts.style as Record<string, unknown>,
+    parts.base as Record<string, unknown>,
+  ];
+
+  for (const selector in parts.pseudoStyles) {
+    styles.push(
+      parts.pseudoStyles[selector as keyof CSSStyleParts['pseudoStyles']] as Record<
+        string,
+        unknown
+      >,
+    );
+  }
+
+  return styles;
+}
+
+/**
+ * A transform lands on the node as x / y / scale / rotation, so the transition
+ * has to be set on the axes the style actually uses.
+ */
+function transformKeys(parts: CSSStyleParts): (keyof LightningElementStyle)[] {
+  const keys = new Set<keyof LightningElementStyle>();
+
+  for (const style of eachStyle(parts)) {
+    const transform = parseTransform(style.transform as Parameters<typeof parseTransform>[0]);
+
+    for (const key in transform) {
+      const lightningKey = TRANSFORM_KEYS[key as keyof typeof TRANSFORM_KEYS];
+
+      if (lightningKey) {
+        keys.add(lightningKey);
+      }
+    }
+  }
+
+  return [...keys];
+}
+
+function drivenProps(parts: CSSStyleParts): string[] {
+  const props = new Set<string>();
+
+  for (const style of eachStyle(parts)) {
+    for (const prop in style) {
+      props.add(prop);
+    }
+  }
+
+  return [...props];
+}
+
+/**
+ * Maps the normalized per-property settings onto Lightning node props. A prop
+ * change then animates on its own, which is what makes a CSS transition work.
+ *
+ * `all` only covers the props this style object sets, not every prop on the
+ * element: a transition on width or height would animate layout.
+ */
+export function toLightningTransition(
+  transitions: PropertyTransitions,
+  parts: CSSStyleParts,
+): LightningTransition | null {
+  const result: LightningTransition = {};
+  const settingsByProp = new Map(transitions);
+  const all = settingsByProp.get('all');
+
+  settingsByProp.delete('all');
+
+  if (all) {
+    for (const prop of drivenProps(parts)) {
+      if (!settingsByProp.has(prop)) {
+        settingsByProp.set(prop, all);
+      }
+    }
+  }
+
+  for (const [prop, settings] of settingsByProp) {
+    if (SHADER_PROPS.has(prop)) {
+      result.shaderProps = settings;
+
+      continue;
+    }
+
+    if (prop === 'transform') {
+      for (const key of transformKeys(parts)) {
+        result[key] = settings;
+      }
+
+      continue;
+    }
+
+    result[getTransitionProperty(prop as keyof DefaultStyle)] = settings;
+  }
+
+  return Object.keys(result).length ? result : null;
+}
diff --git a/packages/plugin-reanimated/src/css/types.ts b/packages/plugin-reanimated/src/css/types.ts
new file mode 100644
index 00000000..5103fc7a
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/types.ts
@@ -0,0 +1,54 @@
+import type { AnimationSettings } from '@lightningjs/renderer';
+import type { DefaultStyle } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+
+import type { Animatable, LightningElementStyle } from '@plextv/react-lightning';
+
+/** Cascade order, later wins. Mirrors reanimated's NATIVE_PSEUDO_SELECTORS_PRIORITY. */
+export const PSEUDO_SELECTORS = [
+  ':focus-within',
+  ':focus',
+  ':hover',
+  ':active',
+  ':active-deepest',
+] as const;
+
+export type PseudoSelector = (typeof PSEUDO_SELECTORS)[number];
+
+/**
+ * A TV has no pointer and no press state on the element, so only the focus
+ * selectors can be resolved here.
+ */
+export const SUPPORTED_PSEUDO_SELECTORS = [':focus-within', ':focus'] as const;
+
+export type SupportedPseudoSelector = (typeof SUPPORTED_PSEUDO_SELECTORS)[number];
+
+export type PseudoStyles = Partial<Record<SupportedPseudoSelector, DefaultStyle>>;
+
+export type LightningTransition = NonNullable<Animatable<LightningElementStyle>['transition']>;
+
+/** Raw `transition*` props, exactly as they came off the style object. */
+export type CSSTransitionProps = Record<string, unknown>;
+
+export type CSSStyleParts = {
+  /** Plain values, rendered as the element's normal style. */
+  style: DefaultStyle;
+  /**
+   * Resting values for the props a pseudo selector touches. Held back from the
+   * rendered style: those props are pushed to the node by the binding, so a
+   * re-render can't clobber an active state.
+   */
+  base: DefaultStyle;
+  pseudoStyles: PseudoStyles;
+  transitionProps: CSSTransitionProps | null;
+};
+
+/** Per-property transition settings, keyed by react-native style prop or `all`. */
+export type PropertyTransitions = Map<string, Partial<AnimationSettings>>;
+
+export function hasPseudoStyles(parts: CSSStyleParts): boolean {
+  for (const _selector in parts.pseudoStyles) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/packages/plugin-reanimated/src/css/warnOnce.ts b/packages/plugin-reanimated/src/css/warnOnce.ts
new file mode 100644
index 00000000..c997a493
--- /dev/null
+++ b/packages/plugin-reanimated/src/css/warnOnce.ts
@@ -0,0 +1,15 @@
+const warned = new Set<string>();
+
+/** Style objects are rebuilt every render, so a plain warn would spam the log. */
+export function warnOnce(message: string): void {
+  if (!import.meta.env.DEV || warned.has(message)) {
+    return;
+  }
+
+  warned.add(message);
+  console.warn(`[react-lightning] ${message}`);
+}
+
+export function resetWarnOnce(): void {
+  warned.clear();
+}
diff --git a/packages/plugin-reanimated/src/exports/createAnimatedComponent.tsx b/packages/plugin-reanimated/src/exports/createAnimatedComponent.tsx
index 82bab72f..9ed0b735 100644
--- a/packages/plugin-reanimated/src/exports/createAnimatedComponent.tsx
+++ b/packages/plugin-reanimated/src/exports/createAnimatedComponent.tsx
@@ -1,6 +1,7 @@
 import {
   Component,
   type ComponentType,
+  type ContextType,
   type ForwardedRef,
   type ForwardRefExoticComponent,
   forwardRef,
@@ -13,7 +14,7 @@ import type {
   LayoutAnimationFunction,
 } from 'react-native-reanimated-original';
 
-import { PARTIAL_STYLE } from '@plextv/react-lightning';
+import { FocusManagerContext, PARTIAL_STYLE } from '@plextv/react-lightning';
 import type {
   LightningElement,
   LightningElementProps,
@@ -22,6 +23,16 @@ import type {
   RendererNode,
 } from '@plextv/react-lightning';
 
+import {
+  CSSStyleBinding,
+  type CSSStyleParts,
+  createCSSStyleParts,
+  filterCSSStyle,
+  finalizeCSSStyleParts,
+  hasPseudoStyles,
+  normalizeCSSTransition,
+  toLightningTransition,
+} from '../css';
 import { isAnimatedStyle } from '../isAnimatedStyle';
 import type { AnimatedStyle } from '../types/AnimatedStyle';
 import type { ReanimatedAnimation } from '../types/ReanimatedAnimation';
@@ -29,6 +40,8 @@ import { toLightningAnimationAndStyles } from '../utils/toLightningAnimationAndS
 
 type NativeLightningElement = NativeMethods & LightningElement;
 
+type FocusContext = ContextType<typeof FocusManagerContext>;
+
 type AnimatedProps<T extends {}> = T &
   Pick<LightningElementProps, 'transition'> & {
     style?: StyleProp<ViewStyle>;
@@ -38,19 +51,13 @@ type AnimatedProps<T extends {}> = T &
     exiting?: ReanimatedAnimation;
   };
 
-function flattenStyles<T>(
+function collectStyles<T>(
   style: StyleProp<T>,
   animatedStyles: Set<AnimatedStyle>,
-  flattenedStyles: Partial<T>,
-): void;
-function flattenStyles<T>(style: StyleProp<T>): [Set<AnimatedStyle>, Partial<T>];
-function flattenStyles<T>(
-  style: StyleProp<T>,
-  animatedStyles: Set<AnimatedStyle> = new Set(),
-  flattenedStyles: Partial<T> = {},
-) {
+  parts: CSSStyleParts,
+): void {
   if (!style) {
-    return [animatedStyles, flattenedStyles];
+    return;
   }
 
   if (Array.isArray(style)) {
@@ -58,16 +65,23 @@ function flattenStyles<T>(
       const s = style[i];
 
       if (s != null && s !== false) {
-        flattenStyles(s as StyleProp<T>, animatedStyles, flattenedStyles);
+        collectStyles(s as StyleProp<T>, animatedStyles, parts);
       }
     }
   } else if (isAnimatedStyle(style)) {
     animatedStyles.add(style);
-  } else if (style != null && style !== false) {
-    Object.assign(flattenedStyles, style);
+  } else if (style !== false) {
+    filterCSSStyle(style as Record<string, unknown>, parts);
   }
+}
+
+function flattenStyles<T>(style: StyleProp<T>): [Set<AnimatedStyle>, CSSStyleParts] {
+  const animatedStyles = new Set<AnimatedStyle>();
+  const parts = createCSSStyleParts();
 
-  return [animatedStyles, flattenedStyles];
+  collectStyles(style, animatedStyles, parts);
+
+  return [animatedStyles, finalizeCSSStyleParts(parts)];
 }
 
 function isAnimationBuilder(
@@ -149,15 +163,22 @@ export function createAnimatedComponent<TProps extends {}>(
 ): AnimatedComponent<TProps> {
   class AnimatedComponentInternal extends Component<AnimatedProps<TProps>> {
     static displayName = `LightningAnimated(${ComponentToAnimate.displayName || ComponentToAnimate.name || 'Component'})`;
+    // Pseudo selectors need the focus path, which only the manager knows.
+    static contextType = FocusManagerContext;
 
     private _ref: NativeLightningElement | null = null;
+    private _css: CSSStyleBinding | null = null;
+    private _focusContext: FocusContext = null;
     private _animatedStyles: Set<AnimatedStyle> = new Set();
     private _styles: Partial<ViewStyle> | null = null;
     private _cachedBuilders = new WeakMap<ReanimatedAnimation, LayoutAnimationFunction | null>();
 
-    constructor(props: AnimatedProps<TProps>) {
-      super(props);
+    // React only assigns `this.context` after construction, so take it from the
+    // constructor argument for the first _transformStyles pass.
+    constructor(props: AnimatedProps<TProps>, context?: unknown) {
+      super(props, context);
 
+      this._focusContext = context as FocusContext;
       this._transformStyles();
     }
 
@@ -191,6 +212,9 @@ export function createAnimatedComponent<TProps extends {}>(
     }
 
     componentWillUnmount(): void {
+      this._css?.destroy();
+      this._css = null;
+
       if (!this.props.exiting || !this._ref) {
         return;
       }
@@ -247,10 +271,11 @@ export function createAnimatedComponent<TProps extends {}>(
       }
 
       this._ref = newRef;
+      this._css?.setElement(newRef);
     };
 
     _transformStyles() {
-      const [newAnimatedStyles, flattenedStyles] = flattenStyles(this.props.style);
+      const [newAnimatedStyles, parts] = flattenStyles(this.props.style);
 
       if (this._ref) {
         // Remove refs for any animated styles that were removed
@@ -265,7 +290,34 @@ export function createAnimatedComponent<TProps extends {}>(
       }
 
       this._animatedStyles = newAnimatedStyles;
-      this._styles = flattenedStyles;
+      this._styles = parts.style as Partial<ViewStyle>;
+
+      this._updateCSSStyle(parts);
+    }
+
+    /**
+     * CSS transitions and pseudo selectors are driven off the node instead of a
+     * render: the transition settings live on the element and the binding swaps
+     * the pseudo props as focus moves.
+     */
+    private _updateCSSStyle(parts: CSSStyleParts) {
+      const transitions = parts.transitionProps
+        ? normalizeCSSTransition(parts.transitionProps)
+        : null;
+      const transition = transitions ? toLightningTransition(transitions, parts) : null;
+
+      if (!transition && !hasPseudoStyles(parts)) {
+        this._css?.destroy();
+        this._css = null;
+
+        return;
+      }
+
+      const focusContext = this._focusContext ?? (this.context as FocusContext);
+
+      this._css ??= new CSSStyleBinding(focusContext?.focusManager ?? null);
+      this._css.setElement(this._ref);
+      this._css.update(parts, transition);
     }
 
     private _runAnimation(builder: LayoutAnimationFunction | null, callback?: () => void) {
diff --git a/packages/react-lightning/src/element/LightningViewElement.outline.spec.ts b/packages/react-lightning/src/element/LightningViewElement.outline.spec.ts
new file mode 100644
index 00000000..271a0df6
--- /dev/null
+++ b/packages/react-lightning/src/element/LightningViewElement.outline.spec.ts
@@ -0,0 +1,111 @@
+import type { RendererMain } from '@lightningjs/renderer';
+import type { Fiber } from 'react-reconciler';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { LightningViewElementProps, LightningViewElementStyle } from '../types';
+import { LightningViewElement } from './LightningViewElement';
+import { PARTIAL_STYLE } from './partialStyle';
+
+type Shader = { type: string; props: Record<string, unknown> };
+
+const created: Shader[] = [];
+
+function createMockNode(props: Record<string, unknown> = {}) {
+  return {
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    alpha: 1,
+    color: 0,
+    shader: { props: {} },
+    parent: null,
+    on() {},
+    off() {},
+    animate() {
+      return { once() {}, start() {} };
+    },
+    destroy() {},
+    ...props,
+  };
+}
+
+const renderer = {
+  createNode: (props: Record<string, unknown>) => createMockNode(props),
+  createTextNode: (props: Record<string, unknown>) => createMockNode(props),
+  createShader: (type: string, props: Record<string, unknown>) => {
+    created.push({ type, props });
+
+    return { props: { ...props } };
+  },
+  createTexture: () => ({}),
+  destroyNode() {},
+} as unknown as RendererMain;
+
+function createElement(style: Partial<LightningViewElementStyle>) {
+  return new LightningViewElement(
+    { style } as LightningViewElementProps<LightningViewElementStyle>,
+    renderer,
+    [],
+    {} as Fiber,
+  );
+}
+
+// setProps stages the update and flushes on a microtask.
+const flush = () => Promise.resolve();
+
+describe('outline', () => {
+  beforeEach(() => {
+    created.length = 0;
+  });
+
+  it('draws it with the border shader, outside the node', () => {
+    createElement({ w: 100, h: 50, outlineWidth: 4, outlineColor: 0xff0000ff, outlineOffset: 2 });
+
+    expect(created).toEqual([
+      {
+        type: 'Border',
+        props: { w: 4, color: 0xff0000ff, align: 'outside', gap: 2 },
+      },
+    ]);
+  });
+
+  it('keeps the corners rounded with a border radius', () => {
+    createElement({ w: 100, h: 50, borderRadius: 8, outlineWidth: 4, outlineColor: 0xff0000ff });
+
+    expect(created).toEqual([
+      {
+        type: 'RoundedWithBorder',
+        props: {
+          radius: 8,
+          'border-w': 4,
+          'border-color': 0xff0000ff,
+          'border-align': 'outside',
+          'border-gap': 0,
+        },
+      },
+    ]);
+  });
+
+  it('lets a border win, since they share the one shader', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    createElement({ w: 100, h: 50, border: { w: 2, color: 0x00ff00ff }, outlineWidth: 4 });
+
+    expect(created).toEqual([{ type: 'Border', props: { w: 2, color: 0x00ff00ff } }]);
+    expect(warn).toHaveBeenCalledOnce();
+  });
+
+  it('keeps the outline width when only the color is pushed', async () => {
+    const el = createElement({ w: 100, h: 50, outlineWidth: 4, outlineColor: 0x00000000 });
+
+    el.setProps({
+      style: { outlineColor: 0xff0000ff, [PARTIAL_STYLE]: true },
+    } as unknown as Partial<LightningViewElementProps<LightningViewElementStyle>>);
+
+    await flush();
+
+    // Same shader type, so the live props are updated in place.
+    expect(el.node.shader.props).toMatchObject({ w: 4, color: 0xff0000ff, align: 'outside' });
+  });
+});
diff --git a/packages/react-lightning/src/element/LightningViewElement.ts b/packages/react-lightning/src/element/LightningViewElement.ts
index eac0c950..8153a320 100644
--- a/packages/react-lightning/src/element/LightningViewElement.ts
+++ b/packages/react-lightning/src/element/LightningViewElement.ts
@@ -14,12 +14,8 @@ import type {
 } from '@lightningjs/renderer';
 import type { Fiber } from 'react-reconciler';
 import { EventEmitter, type IEventEmitter } from 'tseep';
-import { PARTIAL_STYLE } from './partialStyle';
 
-import {
-  getNodeResizeObserver,
-  type NodeResizeObserver,
-} from '../observer/NodeResizeObserver';
+import { getNodeResizeObserver, type NodeResizeObserver } from '../observer/NodeResizeObserver';
 import type { Plugin } from '../render/Plugin';
 import {
   type Focusable,
@@ -37,6 +33,7 @@ import {
 import { AllStyleProps } from './AllStyleProps';
 import { createFlattenedNode } from './FlattenedRendererNode';
 import { isTranslateSettled } from './isTranslateSettled';
+import { PARTIAL_STYLE } from './partialStyle';
 
 const __bannedProps: Record<string, boolean> = {};
 let __bannedPropsInitialized = false;
@@ -68,10 +65,7 @@ function __checkProps(props: string[]) {
   }
 }
 
-function createTexture(
-  renderer: RendererMain,
-  textureDef: TextureDef,
-): Texture {
+function createTexture(renderer: RendererMain, textureDef: TextureDef): Texture {
   return renderer.createTexture(textureDef.type, textureDef.props);
 }
 
@@ -112,10 +106,8 @@ const noopAnimationController = {
 
 export class LightningViewElement<
   TStyleProps extends LightningViewElementStyle = LightningViewElementStyle,
-  TProps extends
-    LightningViewElementProps<TStyleProps> = LightningViewElementProps<TStyleProps>,
-> implements Focusable
-{
+  TProps extends LightningViewElementProps<TStyleProps> = LightningViewElementProps<TStyleProps>,
+> implements Focusable {
   public static allElements: Record<number, LightningElement> = {};
 
   public readonly id: number;
@@ -149,8 +141,7 @@ export class LightningViewElement<
   private _withheldAlpha = 1;
   private _eventEmitter = new EventEmitter<LightningElementEvents>();
   private _deferTarget: LightningElement | null = null;
-  private _deferNodeRemovalHandler: ((destroy: () => void) => void) | null =
-    null;
+  private _deferNodeRemovalHandler: ((destroy: () => void) => void) | null = null;
   private _resizeObserver: NodeResizeObserver | null = null;
   /** Rounded clipping (borderRadius + clipping -> clipRadius) opt-in; set by createRoot. */
   public static roundedClippingEnabled = false;
@@ -308,8 +299,7 @@ export class LightningViewElement<
     host: RendererNode<LightningElement> | null,
     force: boolean,
   ): void {
-    const offsetsChanged =
-      this._flatOffsetX !== offsetX || this._flatOffsetY !== offsetY;
+    const offsetsChanged = this._flatOffsetX !== offsetX || this._flatOffsetY !== offsetY;
 
     if (!force && !offsetsChanged) {
       return;
@@ -367,8 +357,7 @@ export class LightningViewElement<
       return true;
     }
 
-    const applied =
-      value + (key === 'x' ? this._flatOffsetX : this._flatOffsetY);
+    const applied = value + (key === 'x' ? this._flatOffsetX : this._flatOffsetY);
 
     if (this.node[key] === applied) {
       return false;
@@ -498,11 +487,7 @@ export class LightningViewElement<
   }
 
   public set parent(parent) {
-    if (
-      parent &&
-      this._parent === parent &&
-      this._parent.node === parent.node
-    ) {
+    if (parent && this._parent === parent && this._parent.node === parent.node) {
       return;
     }
 
@@ -517,12 +502,8 @@ export class LightningViewElement<
       }
 
       const host = parent ? parent._hostNode() : null;
-      const offsetX = parent?.isFlattened
-        ? parent._flatOffsetX + parent._layoutX
-        : 0;
-      const offsetY = parent?.isFlattened
-        ? parent._flatOffsetY + parent._layoutY
-        : 0;
+      const offsetX = parent?.isFlattened ? parent._flatOffsetX + parent._layoutX : 0;
+      const offsetY = parent?.isFlattened ? parent._flatOffsetY + parent._layoutY : 0;
 
       this._applyFlattenedLink(offsetX, offsetY, host, true);
     } else {
@@ -703,10 +684,7 @@ export class LightningViewElement<
 
     const lngProps = this._toLightningNodeProps(this.props, true);
 
-    this._styleProxy = new Proxy(
-      this.props.style ?? {},
-      this._styleProxyHandler,
-    );
+    this._styleProxy = new Proxy(this.props.style ?? {}, this._styleProxyHandler);
 
     if (import.meta.env.DEV) {
       __checkProps(Object.keys(lngProps));
@@ -717,14 +695,10 @@ export class LightningViewElement<
       !this.isTextElement &&
       !this.isImageElement &&
       this.props.transition === undefined &&
-      LightningViewElement._isLayoutOnlyNodeProps(
-        lngProps as Record<string, unknown>,
-      )
+      LightningViewElement._isLayoutOnlyNodeProps(lngProps as Record<string, unknown>)
     ) {
       this._flattened = true;
-      this.node = createFlattenedNode<this>(
-        lngProps as Record<string, unknown>,
-      );
+      this.node = createFlattenedNode<this>(lngProps as Record<string, unknown>);
       (this.node as unknown as { owner: LightningViewElement }).owner = this;
     } else {
       this.node = this._createNode(lngProps);
@@ -783,9 +757,7 @@ export class LightningViewElement<
     this._eventEmitter.emit('destroy');
   }
 
-  public on = (
-    ...args: Parameters<IEventEmitter<LightningElementEvents>['on']>
-  ): (() => void) => {
+  public on = (...args: Parameters<IEventEmitter<LightningElementEvents>['on']>): (() => void) => {
     this._eventEmitter.on(...args);
 
     if (args[0] === 'resized') {
@@ -850,10 +822,7 @@ export class LightningViewElement<
     this.recalculateVisibility();
   }
 
-  public insertChild(
-    child: LightningElement,
-    beforeChild?: LightningElement | null,
-  ): void {
+  public insertChild(child: LightningElement, beforeChild?: LightningElement | null): void {
     if (child.parent === this && child.parent.node === this.node) {
       // Already ours: a same-parent reorder, not a real (re)parent. Reshuffle
       // children[] only, keep the node/Yoga subtree alive.
@@ -862,9 +831,7 @@ export class LightningViewElement<
       return;
     }
 
-    const index = beforeChild
-      ? this.children.indexOf(beforeChild)
-      : this.children.length;
+    const index = beforeChild ? this.children.indexOf(beforeChild) : this.children.length;
 
     if (beforeChild) {
       this.children.splice(index, 0, child);
@@ -881,10 +848,7 @@ export class LightningViewElement<
     this._eventEmitter.emit('childAdded', child, index);
   }
 
-  private _moveChild(
-    child: LightningElement,
-    beforeChild?: LightningElement | null,
-  ): void {
+  private _moveChild(child: LightningElement, beforeChild?: LightningElement | null): void {
     if (child === beforeChild) {
       return;
     }
@@ -899,9 +863,7 @@ export class LightningViewElement<
 
     // Look up beforeChild after removing child, so its index already is the
     // destination position in the shortened array.
-    const toIndex = beforeChild
-      ? this.children.indexOf(beforeChild)
-      : this.children.length;
+    const toIndex = beforeChild ? this.children.indexOf(beforeChild) : this.children.length;
 
     this.children.splice(toIndex, 0, child);
 
@@ -1103,10 +1065,7 @@ export class LightningViewElement<
     }
 
     if (LightningViewElement.flattenLayoutViewsEnabled) {
-      if (
-        this._flattened &&
-        LightningViewElement._needsRealNode(key as string, value)
-      ) {
+      if (this._flattened && LightningViewElement._needsRealNode(key as string, value)) {
         this._materialize();
       }
 
@@ -1174,8 +1133,7 @@ export class LightningViewElement<
     const prevFocusable = this.focusable;
     const prevVisible = this._visible;
 
-    this._visible =
-      this.node.alpha > 0 && (!this.parent || this.parent.visible);
+    this._visible = this.node.alpha > 0 && (!this.parent || this.parent.visible);
 
     if (this._visible !== prevVisible) {
       this._eventEmitter.emit('visibilityChanged', this._visible);
@@ -1237,9 +1195,7 @@ export class LightningViewElement<
     ).start();
   }
 
-  public animateShader(
-    props: Partial<CoreShaderNode['props']>,
-  ): IAnimationController {
+  public animateShader(props: Partial<CoreShaderNode['props']>): IAnimationController {
     return this._createAnimation(
       {
         shaderProps: props,
@@ -1262,8 +1218,7 @@ export class LightningViewElement<
   };
 
   private _reconcileResizeObserving(): void {
-    const shouldObserve =
-      this.props.onResize != null || this._eventEmitter.hasListeners('resized');
+    const shouldObserve = this.props.onResize != null || this._eventEmitter.hasListeners('resized');
 
     if (shouldObserve === this._isObservingResize) {
       return;
@@ -1283,10 +1238,7 @@ export class LightningViewElement<
   }
 
   // Don't pass down the `data` prop to the lightning node.
-  private _createNode({
-    data: _data,
-    ...props
-  }: Partial<INodeProps>): RendererNode<this> {
+  private _createNode({ data: _data, ...props }: Partial<INodeProps>): RendererNode<this> {
     const node = this.isTextElement
       ? this._renderer.createTextNode(props)
       : this._renderer.createNode(props);
@@ -1388,9 +1340,7 @@ export class LightningViewElement<
       if (
         this._flattened &&
         (this.props.transition !== undefined ||
-          !LightningViewElement._isLayoutOnlyNodeProps(
-            lngProps as Record<string, unknown>,
-          ))
+          !LightningViewElement._isLayoutOnlyNodeProps(lngProps as Record<string, unknown>))
       ) {
         this._materialize();
       }
@@ -1410,8 +1360,7 @@ export class LightningViewElement<
       }
 
       if (typeof lngProps.y === 'number') {
-        flattenedMoved =
-          flattenedMoved || (this._flattened && this._layoutY !== lngProps.y);
+        flattenedMoved = flattenedMoved || (this._flattened && this._layoutY !== lngProps.y);
         this._layoutY = lngProps.y;
 
         if (!this._flattened) {
@@ -1444,10 +1393,7 @@ export class LightningViewElement<
     }
 
     if (hasStyleChanges) {
-      this._eventEmitter.emit(
-        'stylesChanged',
-        this.props.style as Partial<LightningElementStyle>,
-      );
+      this._eventEmitter.emit('stylesChanged', this.props.style as Partial<LightningElementStyle>);
     }
 
     this._isUpdateQueued = false;
@@ -1464,6 +1410,9 @@ export class LightningViewElement<
     'borderLeft',
     'borderRight',
     'borderBottom',
+    'outlineWidth',
+    'outlineColor',
+    'outlineOffset',
     'linearGradient',
   ]);
 
@@ -1523,12 +1472,7 @@ export class LightningViewElement<
 
     if (LightningViewElement.flattenLayoutViewsEnabled && this._flattened) {
       for (const key in style) {
-        if (
-          LightningViewElement._needsRealNode(
-            key,
-            style[key as keyof TStyleProps],
-          )
-        ) {
+        if (LightningViewElement._needsRealNode(key, style[key as keyof TStyleProps])) {
           this._materialize();
           break;
         }
@@ -1599,13 +1543,10 @@ export class LightningViewElement<
     if (LightningViewElement.roundedClippingEnabled && 'clipping' in style) {
       const shaderType = this._shaderDef?.type;
       const radius =
-        style.clipping === true &&
-        (shaderType === 'Rounded' || shaderType === 'RoundedWithBorder')
+        style.clipping === true && (shaderType === 'Rounded' || shaderType === 'RoundedWithBorder')
           ? this._shaderDef?.props?.radius
           : 0;
-      const clipRadius =
-        (Array.isArray(radius) ? Math.max(...radius) : (radius as number)) ||
-        0;
+      const clipRadius = (Array.isArray(radius) ? Math.max(...radius) : (radius as number)) || 0;
 
       if ((this.node.clipRadius ?? 0) !== clipRadius) {
         this.node.clipRadius = clipRadius;
@@ -1616,10 +1557,7 @@ export class LightningViewElement<
       this.recalculateVisibility();
     }
 
-    this._eventEmitter.emit(
-      'stylesChanged',
-      this.props.style as Partial<LightningElementStyle>,
-    );
+    this._eventEmitter.emit('stylesChanged', this.props.style as Partial<LightningElementStyle>);
 
     this._isUpdateQueued = false;
 
@@ -1660,8 +1598,7 @@ export class LightningViewElement<
     // See {@link withholdPaintUntilLayout}.
     if (
       this._paintWithheld &&
-      (hadLayout ||
-        isTranslateSettled(this.props.style, this.node.x, this.node.y))
+      (hadLayout || isTranslateSettled(this.props.style, this.node.x, this.node.y))
     ) {
       this._paintWithheld = false;
 
@@ -1687,9 +1624,7 @@ export class LightningViewElement<
     return animation;
   }
 
-  private _getShaderFromStyle(
-    style: TStyleProps | undefined | null,
-  ): ShaderDef | undefined {
+  private _getShaderFromStyle(style: TStyleProps | undefined | null): ShaderDef | undefined {
     if (!style) {
       return;
     }
@@ -1706,23 +1641,28 @@ export class LightningViewElement<
       borderRight,
       borderBottom,
       borderRadius,
+      outlineWidth,
+      outlineColor,
+      outlineOffset,
       linearGradient,
     } = style;
 
-    if (borderRadius) {
-      type = 'Rounded';
-      props.radius = borderRadius;
-      hasRounded = true;
-    }
-
-    if (
+    const hasBorder = !!(
       border ||
       borderColor ||
       borderTop ||
       borderLeft ||
       borderRight ||
       borderBottom
-    ) {
+    );
+
+    if (borderRadius) {
+      type = 'Rounded';
+      props.radius = borderRadius;
+      hasRounded = true;
+    }
+
+    if (hasBorder || outlineWidth) {
       if (type && type === 'Rounded') {
         type = 'RoundedWithBorder';
       } else {
@@ -1759,6 +1699,25 @@ export class LightningViewElement<
       props[hasRounded ? 'border-color' : 'color'] = borderColor;
     }
 
+    // An outline is the same border shader, drawn outside the node instead of
+    // inside it: `align` puts it there and `gap` is the outline offset.
+    if (outlineWidth) {
+      if (hasBorder) {
+        if (import.meta.env.DEV) {
+          console.warn(
+            `Warning: element ${this.id} sets both a border and an outline. They share one shader, so the border wins and the outline is dropped.`,
+          );
+        }
+      } else {
+        const prefix = hasRounded ? 'border-' : '';
+
+        props[`${prefix}w`] = outlineWidth;
+        props[`${prefix}color`] = outlineColor ?? 0;
+        props[`${prefix}align`] = 'outside';
+        props[`${prefix}gap`] = outlineOffset ?? 0;
+      }
+    }
+
     if (type) {
       if (linearGradient) {
         // Radius-only node: fold the radius into the gradient so it rounds its
@@ -1851,7 +1810,22 @@ export class LightningViewElement<
       }
     }
 
-    const styleShader = this._getShaderFromStyle(style);
+    // Reanimated and imperative style.set pushes are marked partial: they carry
+    // only the changed keys.
+    const isPartialStyle =
+      style != null && (style as Record<PropertyKey, unknown>)[PARTIAL_STYLE] === true;
+
+    // A partial push has to resolve its shader against the merged style, or a
+    // lone borderColor / outlineColor would rebuild the shader without a width.
+    const shaderStyle = isPartialStyle
+      ? ({
+          // oxlint-disable-next-line typescript/no-explicit-any -- Required for accessing AllStyleProps symbol
+          ...((this.style as any)[AllStyleProps] as TStyleProps),
+          ...style,
+        } as TStyleProps)
+      : style;
+
+    const styleShader = this._getShaderFromStyle(shaderStyle);
 
     // If the style also requires a shader, then warn. We can only apply one shader per node.
     if (shader && styleShader && import.meta.env.DEV) {
@@ -1860,13 +1834,9 @@ export class LightningViewElement<
       );
     }
 
-    // Reanimated and imperative style.set pushes are marked partial: they carry
-    // only the changed keys, so keep the current shader unless the update itself
-    // names one. A full restyle (reconciler snapshot) isn't marked, so a dropped
-    // border falls through and clears the stale shader.
-    const isPartialStyle =
-      style != null &&
-      (style as Record<PropertyKey, unknown>)[PARTIAL_STYLE] === true;
+    // Keep the current shader unless the update itself names one. A full restyle
+    // (reconciler snapshot) isn't marked partial, so a dropped border falls
+    // through and clears the stale shader.
     const oldShader = this._shaderDef;
     this._shaderDef =
       shader === undefined && isPartialStyle && !styleShader && oldShader
@@ -1883,10 +1853,7 @@ export class LightningViewElement<
         this._shaderDef.props
       ) {
         this.animateShader(this._shaderDef.props);
-      } else if (
-        this._shaderDef.type === oldShader?.type &&
-        this.shader.props
-      ) {
+      } else if (this._shaderDef.type === oldShader?.type && this.shader.props) {
         for (const [key, value] of Object.entries(this._shaderDef.props)) {
           // Gate on key existence, not truthiness: a prop whose current value
           // is falsy (e.g. a transparent `border-color` of 0) must still be
@@ -1930,13 +1897,9 @@ export class LightningViewElement<
           ? this._shaderDef?.props?.radius
           : 0;
       // The stencil takes one radius; a per-corner array clips to the largest.
-      const clipRadius =
-        (Array.isArray(radius) ? Math.max(...radius) : (radius as number)) ||
-        0;
+      const clipRadius = (Array.isArray(radius) ? Math.max(...radius) : (radius as number)) || 0;
 
-      if (
-        initial ? clipRadius > 0 : (this.node.clipRadius ?? 0) !== clipRadius
-      ) {
+      if (initial ? clipRadius > 0 : (this.node.clipRadius ?? 0) !== clipRadius) {
         finalStyle.clipRadius = clipRadius;
       }
     }
diff --git a/packages/react-lightning/src/types/Styles.ts b/packages/react-lightning/src/types/Styles.ts
index 835fe439..3dbaa184 100644
--- a/packages/react-lightning/src/types/Styles.ts
+++ b/packages/react-lightning/src/types/Styles.ts
@@ -24,6 +24,15 @@ export interface LightningViewElementStyle extends Omit<
   borderRight?: number;
   borderBottom?: number;
   borderLeft?: number;
+  /**
+   * Ring drawn outside the border box, offset by `outlineOffset`. It uses the
+   * node's border shader, so an element can't carry a border and an outline at
+   * the same time (the border wins).
+   */
+  outlineWidth?: number;
+  outlineColor?: number;
+  outlineOffset?: number;
+
   /**
    * Follows css border-radius syntax
    * https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax