@remix-run/ui 0.4.0 → 0.6.0

package/src/animation/animate-mixins.ts

@@ -37,7 +37,7 @@ type AnimationState = {
 }
 
 const animatingNodes = new WeakMap<Element, AnimationState>()
-const initialEntranceSeenByParent = new WeakMap<ParentNode, Set<string>>()
+const initialEntranceSeenByParent = new WeakMap<ParentNode, Set<unknown>>()
 
 function extractStyleProps(config: AnimateMixinConfig): Keyframe {
   let result: Keyframe = {}
@@ -152,14 +152,14 @@ function waitForAnimationOrAbort(animation: Animation, signal: AbortSignal): Pro
 }
 
 function shouldSkipInitialEntrance(
-  event: { key?: string; parent: ParentNode },
+  event: { key?: unknown; parent: ParentNode },
   config: AnimateMixinConfig,
 ): boolean {
   if (config.initial !== false) return false
   if (event.key == null) return false
   let seenForParent = initialEntranceSeenByParent.get(event.parent)
   if (!seenForParent) {
-    seenForParent = new Set<string>()
+    seenForParent = new Set<unknown>()
     initialEntranceSeenByParent.set(event.parent, seenForParent)
   }
   if (seenForParent.has(event.key)) return false

package/src/animation/demos/color-interpolation.tsx

@@ -57,7 +57,7 @@ export function ColorInterpolation() {
 
       <div mix={[css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })]}>
         <div
-          className="oklch-box"
+          class="oklch-box"
           mix={[
             css({
               width: 100,

package/src/button/index.ts

@@ -31,7 +31,7 @@ const buttonDefaultAttrs = createMixin<Element, [], ElementProps>((handle, hostT
 const baseStyle: CSSMixinDescriptor = css({
   '--rmx-button-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
   '--rmx-button-focus-shadow':
-    '0 0 0 1px #3573F6, var(--rmx-button-shadow), 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)',
+    '0 0 0 1px light-dark(#3573F6, #6eaaff), var(--rmx-button-shadow), 0 0 0 4px light-dark(rgba(53, 115, 246, 0.1), rgba(110, 170, 255, 0.18)), 0 6px 32px 4px light-dark(rgba(53, 115, 246, 0.08), rgba(110, 170, 255, 0.14)), inset 0 0 8px 1px light-dark(rgba(53, 115, 246, 0.05), rgba(110, 170, 255, 0.1))',
   appearance: 'none',
   margin: 0,
   boxSizing: 'border-box',
@@ -85,49 +85,49 @@ const largeStyle: CSSMixinDescriptor = css({
 })
 
 const neutralStyle: CSSMixinDescriptor = css({
-  background: '#FCFCFC',
-  border: '1px solid rgba(0, 0, 0, 0.08)',
+  background: 'light-dark(#FCFCFC, #232323)',
+  border: '1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.14))',
   '--rmx-button-shadow':
-    '0 -2px 0 -2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 0 #FFFFFF, 0 2px 4px -1px rgb(0 0 0 / var(--rmx-button-neutral-shadow-alpha)), inset 0 2px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.05)',
-  color: '#101010',
-  textShadow: '0 1px 0 #FFFFFF',
+    '0 -2px 0 -2px rgba(0, 0, 0, 0.06), 0 0 0 1px light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08)), 0 1px 0 light-dark(#FFFFFF, rgba(255, 255, 255, 0.04)), 0 2px 4px -1px rgb(0 0 0 / var(--rmx-button-neutral-shadow-alpha)), inset 0 2px 0 light-dark(#FFFFFF, rgba(255, 255, 255, 0.08)), inset 0 -1px 0 rgba(0, 0, 0, 0.05)',
+  color: 'light-dark(#101010, #ececec)',
+  textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
   '&:hover:not(:disabled):not([aria-disabled="true"])': {
-    background: '#FFFFFF',
-    borderColor: 'rgba(0, 0, 0, 0.1)',
+    background: 'light-dark(#FFFFFF, #272727)',
+    borderColor: 'light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.18))',
     '--rmx-button-shadow':
-      '0 -2px 0 -2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1px 0 #FFFFFF, 0 3px 6px -2px rgb(0 0 0 / calc(var(--rmx-button-neutral-shadow-alpha) + 0.03)), inset 0 2px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.05)',
+      '0 -2px 0 -2px rgba(0, 0, 0, 0.06), 0 0 0 1px light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), 0 1px 0 light-dark(#FFFFFF, rgba(255, 255, 255, 0.05)), 0 3px 6px -2px rgb(0 0 0 / calc(var(--rmx-button-neutral-shadow-alpha) + 0.03)), inset 0 2px 0 light-dark(#FFFFFF, rgba(255, 255, 255, 0.1)), inset 0 -1px 0 rgba(0, 0, 0, 0.05)',
   },
   '&:active:not(:disabled):not([aria-disabled="true"]), &[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"])':
     {
-      background: '#F7F7F7',
-      borderColor: 'rgba(0, 0, 0, 0.12)',
+      background: 'light-dark(#F7F7F7, #1f1f1f)',
+      borderColor: 'light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))',
       '--rmx-button-shadow':
-        '0 0 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.8)',
+        '0 0 0 1px light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.08)), inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 -1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05))',
       textShadow: 'none',
     },
 })
 
 const primaryStyle: CSSMixinDescriptor = css({
   background:
-    'radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 66.46%), #101010',
+    'radial-gradient(50% 50% at 50% 0%, light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.65)) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, light-dark(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35)) 0%, rgba(255, 255, 255, 0) 66.46%), light-dark(#101010, #ececec)',
   border: 0,
   '--rmx-button-shadow':
-    '0 16px 16px -8px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.1), 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px 2px #101010, inset 0 0 4px 2px rgba(255, 255, 255, 0.1), inset 0 0 12px -6px rgba(255, 255, 255, 0.75)',
-  color: '#FFFFFF',
-  textShadow: '0 1px 1px #000000',
+    '0 16px 16px -8px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.1), 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px 2px light-dark(#101010, rgba(255, 255, 255, 0.45)), inset 0 0 4px 2px rgba(255, 255, 255, 0.1), inset 0 0 12px -6px rgba(255, 255, 255, 0.75)',
+  color: 'light-dark(#FFFFFF, #151515)',
+  textShadow: '0 1px 1px light-dark(#000000, rgb(255 255 255 / 0.45))',
   '&:hover:not(:disabled):not([aria-disabled="true"])': {
     background:
-      'radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 66.46%), #171717',
+      'radial-gradient(50% 50% at 50% 0%, light-dark(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.72)) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.42)) 0%, rgba(255, 255, 255, 0) 66.46%), light-dark(#171717, #ffffff)',
     '--rmx-button-shadow':
-      '0 18px 18px -10px rgba(0, 0, 0, 0.14), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px 2px #101010, inset 0 0 4px 2px rgba(255, 255, 255, 0.13), inset 0 0 12px -6px rgba(255, 255, 255, 0.85)',
+      '0 18px 18px -10px rgba(0, 0, 0, 0.14), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px 2px light-dark(#101010, rgba(255, 255, 255, 0.5)), inset 0 0 4px 2px rgba(255, 255, 255, 0.13), inset 0 0 12px -6px rgba(255, 255, 255, 0.85)',
   },
   '&:active:not(:disabled):not([aria-disabled="true"]), &[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"])':
     {
       background:
-        'radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 66.46%), #080808',
+        'radial-gradient(50% 50% at 50% 0%, light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.45)) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, light-dark(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.28)) 0%, rgba(255, 255, 255, 0) 66.46%), light-dark(#080808, #d9d9d9)',
       '--rmx-button-shadow':
-        '0 2px 2px -1px rgba(0, 0, 0, 0.14), inset 0 0 4px 2px #050505, inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 10px -6px rgba(255, 255, 255, 0.55)',
-      textShadow: '0 1px 1px #000000',
+        '0 2px 2px -1px rgba(0, 0, 0, 0.14), inset 0 0 4px 2px light-dark(#050505, rgba(255, 255, 255, 0.35)), inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 10px -6px rgba(255, 255, 255, 0.55)',
+      textShadow: '0 1px 1px light-dark(#000000, rgb(255 255 255 / 0.35))',
     },
   '&:active:not(:disabled):not([aria-disabled="true"])': {
     transform: 'translateY(1px)',
@@ -138,14 +138,14 @@ const ghostStyle: CSSMixinDescriptor = css({
   background: 'transparent',
   border: '1px solid transparent',
   '--rmx-button-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
-  color: '#101010',
+  color: 'light-dark(#101010, #ececec)',
   textShadow: 'none',
   '&:hover:not(:disabled):not([aria-disabled="true"])': {
-    background: 'rgba(16, 16, 16, 0.05)',
+    background: 'light-dark(rgba(16, 16, 16, 0.05), rgba(236, 236, 236, 0.1))',
   },
   '&:active:not(:disabled):not([aria-disabled="true"]), &[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"])':
     {
-      background: 'rgba(16, 16, 16, 0.08)',
+      background: 'light-dark(rgba(16, 16, 16, 0.08), rgba(236, 236, 236, 0.14))',
     },
 })
 

package/src/checkbox/index.ts

@@ -29,8 +29,8 @@ const checkedActiveSelector =
   '&:checked:active:not(:disabled):not([aria-disabled="true"]), &[aria-checked="true"]:active:not(:disabled):not([aria-disabled="true"]), &[data-state="checked"]:active:not(:disabled):not([aria-disabled="true"])'
 const mixedActiveSelector =
   '&:indeterminate:active:not(:disabled):not([aria-disabled="true"]), &[indeterminate]:active:not(:disabled):not([aria-disabled="true"]), &[aria-checked="mixed"]:active:not(:disabled):not([aria-disabled="true"]), &[data-state="mixed"]:active:not(:disabled):not([aria-disabled="true"])'
-const checkIconUrl =
-  "url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_2_2264)'%3E%3Cpath d='M2.75 5.76562L5.10156 8.25L9.23438 1.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.75 5.76562L5.10156 8.25L9.23438 1.75' stroke='url(%23paint0_linear_2_2264)' stroke-opacity='0.1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_2_2264' x='0' y='0' width='11.9845' height='12' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3CfeBlend mode='overlay' in2='BackgroundImageFix' result='effect1_dropShadow_2_2264'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_2_2264' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_2_2264' x1='5.99219' y1='1.75' x2='5.99219' y2='8.25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.25' stop-color='%233573F6' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%233573F6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E\")"
+const checkIconMask =
+  "url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.75 5.76562L5.10156 8.25L9.23438 1.75' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")"
 
 const checkboxAriaChecked = {
   checked: 'true',
@@ -75,10 +75,10 @@ const baseStyle: CSSMixinDescriptor = css({
   padding: 0,
   border: 0,
   borderRadius: 'var(--rmx-checkbox-radius)',
-  background: '#FFFFFF',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
   boxShadow:
-    '0 2px 2px -1px rgba(0, 0, 0, 0.05), 0 3px 4px -1.5px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 5px 16px -2.5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12)',
-  color: '#FFFFFF',
+    '0 2px 2px -1px rgba(0, 0, 0, 0.05), 0 3px 4px -1.5px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 5px 16px -2.5px rgba(0, 0, 0, 0.05), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))',
+  color: 'light-dark(#FFFFFF, #151515)',
   verticalAlign: 'middle',
   flex: 'none',
   '&::before': {
@@ -92,7 +92,7 @@ const baseStyle: CSSMixinDescriptor = css({
   },
   [`${checkedSelector}, ${mixedSelector}`]: {
     background:
-      'linear-gradient(180deg, rgba(0, 0, 0, 0) 24.52%, rgba(0, 0, 0, 0.1) 100%), #3573F6',
+      'linear-gradient(180deg, rgba(0, 0, 0, 0) 24.52%, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.14)) 100%), light-dark(#3573F6, #6eaaff)',
     backgroundBlendMode: 'overlay, normal',
     borderRadius: 'var(--rmx-checkbox-active-radius)',
     boxShadow:
@@ -104,7 +104,9 @@ const baseStyle: CSSMixinDescriptor = css({
     top: '50%',
     width: 'var(--rmx-checkbox-check-size)',
     height: 'var(--rmx-checkbox-check-size)',
-    background: `${checkIconUrl} center / contain no-repeat`,
+    background: 'currentColor',
+    mask: `${checkIconMask} center / contain no-repeat`,
+    WebkitMask: `${checkIconMask} center / contain no-repeat`,
     transform: 'translate(-50%, calc(-50% + var(--rmx-checkbox-check-y)))',
   },
   [mixedMarkSelector]: {
@@ -121,7 +123,7 @@ const baseStyle: CSSMixinDescriptor = css({
   },
   [`&:active${enabledSelector}`]: {
     boxShadow:
-      '0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.08)',
+      '0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.24)), inset 0 1px 2px rgba(0, 0, 0, 0.08)',
   },
   [`${checkedActiveSelector}, ${mixedActiveSelector}`]: {
     boxShadow:

package/src/combobox/index.tsx

@@ -59,7 +59,7 @@ const comboboxInputCss: CSSMixinDescriptor = css({
   fontFamily: styles.fontFamily.sans,
   fontSize: styles.fontSize.sm,
   lineHeight: styles.lineHeight.normal,
-  boxShadow: 'inset 0 1px 0 rgb(255 255 255 / 0.7)',
+  boxShadow: 'inset 0 1px 0 light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.08))',
   '&:focus-visible': {
     outline: `2px solid ${styles.colors.focus.ring}`,
     outlineOffset: styles.space.none,

package/src/dev/refresh.ts

@@ -0,0 +1 @@
+export { reconcileRoots, setComponentStalenessCheck } from '../runtime/refresh.ts'

package/src/index.ts

@@ -35,7 +35,7 @@ export type {
   FrameHandle,
   FrameProps,
 } from './runtime/component.ts'
-export type { LoadModule, ResolveFrame } from './runtime/frame.ts'
+export type { LoadModule, ResolveFrame, ResolveFrameOptions } from './runtime/frame.ts'
 
 // -- Elements/JSX/Props --
 export { createElement } from './runtime/create-element.ts'

package/src/input/index.ts

@@ -24,7 +24,7 @@ const frameStyles = {
   '--rmx-input-root-padding-inline': '8px',
   '--rmx-input-gap': '6px',
   '--rmx-input-icon-size': '16px',
-  '--rmx-input-icon-color': '#707070',
+  '--rmx-input-icon-color': 'light-dark(#707070, #b3b3b3)',
   appearance: 'none',
   margin: 0,
   boxSizing: 'border-box',
@@ -36,10 +36,10 @@ const frameStyles = {
   paddingInline: 'var(--rmx-input-padding-inline)',
   border: 0,
   borderRadius: '8px',
-  background: '#FFFFFF',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
   boxShadow:
-    '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.12)',
-  color: '#101010',
+    '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))',
+  color: 'light-dark(#101010, #ececec)',
   fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
   fontStyle: 'normal',
   fontWeight: 400,
@@ -47,9 +47,9 @@ const frameStyles = {
   lineHeight: '20px',
   fontFeatureSettings: '"ss01" on, "cv01" on',
   letterSpacing: 0,
-  textShadow: '0 1px 0 #FFFFFF',
+  textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
   '&::placeholder': {
-    color: '#B0B0B0',
+    color: 'light-dark(#B0B0B0, #777777)',
     opacity: 1,
   },
   '&:disabled, &[aria-disabled="true"]': {
@@ -102,13 +102,13 @@ const fieldBaseStyle: CSSMixinDescriptor = css({
   outline: 0,
   background: 'transparent',
   boxShadow: 'none',
-  color: '#101010',
+  color: 'light-dark(#101010, #ececec)',
   font: 'inherit',
   fontFeatureSettings: 'inherit',
   letterSpacing: 'inherit',
   textShadow: 'inherit',
   '&::placeholder': {
-    color: '#B0B0B0',
+    color: 'light-dark(#B0B0B0, #777777)',
     opacity: 1,
   },
   '&:disabled, &[aria-disabled="true"]': {

package/src/radio/index.ts

@@ -43,9 +43,9 @@ const baseStyle: CSSMixinDescriptor = css({
   minWidth: 'var(--rmx-radio-size)',
   minHeight: 'var(--rmx-radio-size)',
   padding: 0,
-  border: '1px solid rgba(0, 0, 0, 0.12)',
+  border: '1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))',
   borderRadius: '9999px',
-  background: '#FFFFFF',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
   boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 2px 2px rgba(0, 0, 0, 0.06)',
   verticalAlign: 'middle',
   flex: 'none',
@@ -55,9 +55,9 @@ const baseStyle: CSSMixinDescriptor = css({
     height: 'var(--rmx-radio-mark-size)',
     borderRadius: '99px',
     background:
-      'linear-gradient(180deg, rgba(53, 115, 246, 0) 25%, rgba(53, 115, 246, 0.15) 100%), #FFFFFF',
+      'linear-gradient(180deg, rgba(53, 115, 246, 0) 25%, rgba(53, 115, 246, 0.15) 100%), light-dark(#FFFFFF, #f5f9ff)',
     boxShadow:
-      '0 1px 1px -0.5px #0944BE, 0 2px 2px -1px #0944BE, 0 4px 4px -2px #0944BE, 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 0 2px 1px #FFFFFF',
+      '0 1px 1px -0.5px #0944BE, 0 2px 2px -1px #0944BE, 0 4px 4px -2px #0944BE, 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.28)), inset 0 0 2px 1px light-dark(#FFFFFF, rgba(255, 255, 255, 0.5))',
     opacity: 0,
     pointerEvents: 'none',
   },
@@ -67,7 +67,8 @@ const baseStyle: CSSMixinDescriptor = css({
   [checkedSelector]: {
     border: 0,
     borderRadius: '99px',
-    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75.48%), #3573F6',
+    background:
+      'linear-gradient(180deg, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.16)) 0%, rgba(0, 0, 0, 0) 75.48%), light-dark(#3573F6, #6eaaff)',
     backgroundBlendMode: 'overlay, normal',
     boxShadow:
       '0 1px 0 rgba(255, 255, 255, 0.6), 0 0 16px rgba(53, 115, 246, 0.25), inset 0 0 3px 1px rgba(0, 0, 0, 0.1)',

package/src/runtime/client-entry-boundary.ts

@@ -0,0 +1,54 @@
+import type { VirtualRoot } from './vdom.ts'
+
+export type ClientEntryIdentity = {
+  moduleUrl: string
+  exportName: string
+}
+
+type ClientEntryRoot = Pick<VirtualRoot, 'dispose' | 'render'>
+
+export type ClientEntryBoundaryOwner = {
+  identity: ClientEntryIdentity
+  root: ClientEntryRoot
+}
+
+const CLIENT_ENTRY_BOUNDARY_OWNER = Symbol('ClientEntryBoundaryOwner')
+
+type ClientEntryBoundaryMarker = Comment & {
+  [CLIENT_ENTRY_BOUNDARY_OWNER]?: ClientEntryBoundaryOwner
+  $rmx?: ClientEntryRoot
+}
+
+export function getClientEntryBoundaryOwner(marker: Comment): ClientEntryBoundaryOwner | undefined {
+  return (marker as ClientEntryBoundaryMarker)[CLIENT_ENTRY_BOUNDARY_OWNER]
+}
+
+export function setClientEntryBoundaryOwner(
+  marker: Comment,
+  identity: ClientEntryIdentity,
+  root: ClientEntryRoot,
+): ClientEntryBoundaryOwner {
+  let owner = { identity, root }
+  Object.defineProperties(marker, {
+    [CLIENT_ENTRY_BOUNDARY_OWNER]: {
+      configurable: true,
+      value: owner,
+    },
+    $rmx: {
+      configurable: true,
+      value: root,
+    },
+  })
+  return owner
+}
+
+export function disposeClientEntryBoundary(marker: Comment): boolean {
+  let boundaryMarker = marker as ClientEntryBoundaryMarker
+  let owner = boundaryMarker[CLIENT_ENTRY_BOUNDARY_OWNER]
+  if (!owner) return false
+
+  delete boundaryMarker[CLIENT_ENTRY_BOUNDARY_OWNER]
+  delete boundaryMarker.$rmx
+  owner.root.dispose()
+  return true
+}

package/src/runtime/component.ts

@@ -1,4 +1,6 @@
 import type { ElementProps, ElementType, RemixNode, Renderable } from './jsx.ts'
+import type { ElementFunction } from './element-function.ts'
+import type { Key } from './key.ts'
 import { TypedEventTarget } from './typed-event-target.ts'
 
 /**
@@ -138,6 +140,14 @@ export interface Context<C> {
  */
 export type FrameContent = ReadableStream<Uint8Array> | string | RemixNode
 
+/**
+ * Value returned by a browser frame resolver.
+ *
+ * A response body is rendered as frame content. When `fetch()` followed a redirect, the response's
+ * final URL updates the frame source and browser URL for a top-frame navigation.
+ */
+export type FrameResolution = FrameContent | Response
+
 /**
  * Events emitted by frame handles during reloads.
  */
@@ -208,18 +218,26 @@ export interface BuiltinElements {
 /**
  * Key type used to stabilize host elements and components during reconciliation.
  */
-export type Key = string | number | bigint
+export type { Key } from './key.ts'
 
 type ComponentConfig = {
   id: string
-  type: Function
+  type: ElementFunction
   frame: FrameHandle
-  getContext: (type: Component) => unknown
+  getContext: (type: ElementFunction) => unknown
   getFrameByName: (name: string) => FrameHandle | undefined
   getTopFrame?: () => FrameHandle | undefined
   signal?: AbortSignal
 }
 
+/**
+ * Minimal structural view of the scheduler used for handle.update() so this
+ * module doesn't depend on the reconciler.
+ */
+export interface UpdateQueue {
+  enqueue(vnode: object, domParent: ParentNode): void
+}
+
 /**
  * Runtime handle returned by {@link createComponent}.
  */
@@ -227,7 +245,7 @@ export interface ComponentHandle<C = NoContext> {
   frame: FrameHandle
   render(nextProps: ElementProps): [RemixNode, Array<() => void>]
   remove(): Array<() => void>
-  setScheduleUpdate(nextScheduleUpdate: () => void): void
+  setScheduleUpdate(queue: UpdateQueue, vnode: object, domParent: ParentNode): void
   getContextValue(): C | undefined
   isRemoved(): boolean
 }
@@ -249,12 +267,22 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   #connectedController: AbortController | undefined
   #contextValue: C | undefined
   #handle: Handle<ElementProps, C>
-  #props = {} as ElementProps
+  #props: ElementProps = {}
   #renderController: AbortController | undefined
   #renderFn: RenderFn | undefined
   #removed = false
-  #scheduleUpdate: () => void = () => {
-    throw new Error('scheduleUpdate not implemented')
+  // The schedule target is stored as fields (updated each render) rather than
+  // a closure so re-renders don't allocate a new function per component.
+  #updateQueue: UpdateQueue | undefined
+  #updateVNode: object | undefined
+  #updateDomParent: ParentNode | undefined
+  #scheduleUpdate = (): void => {
+    let queue = this.#updateQueue
+    if (!queue) throw new Error('scheduleUpdate not implemented')
+    let vnode = this.#updateVNode
+    let domParent = this.#updateDomParent
+    if (!vnode || !domParent) throw new Error('scheduleUpdate target not initialized')
+    queue.enqueue(vnode, domParent)
   }
   #tasks: Task[] = []
 
@@ -276,14 +304,15 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
     let renderFn = this.#renderFn
 
     if (renderFn === undefined) {
-      let result = this.#config.type(this.#handle)
+      let initialize = this.#config.type as unknown as (handle: Handle<ElementProps, C>) => unknown
+      let result = initialize(this.#handle)
 
-      if (typeof result !== 'function') {
+      if (!isRenderFn(result)) {
         let name = this.#config.type.name || 'Anonymous'
         throw new Error(`${name} must return a render function, received ${typeof result}`)
       }
 
-      renderFn = result as RenderFn
+      renderFn = result
       this.#renderFn = renderFn
     }
 
@@ -291,15 +320,18 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   }
 
   remove = (): Array<() => void> => {
-    if (this.#removed) return []
+    if (this.#removed) return EMPTY_TASKS
     this.#removed = true
     this.#connectedController?.abort()
     this.#abortRenderSignal()
-    return this.#dequeueTasks(AbortSignal.abort())
+    if (this.#tasks.length === 0) return EMPTY_TASKS
+    return this.#dequeueTasks((sharedAbortedSignal ??= AbortSignal.abort()))
   }
 
-  setScheduleUpdate = (nextScheduleUpdate: () => void): void => {
-    this.#scheduleUpdate = nextScheduleUpdate
+  setScheduleUpdate = (queue: UpdateQueue, vnode: object, domParent: ParentNode): void => {
+    this.#updateQueue = queue
+    this.#updateVNode = vnode
+    this.#updateDomParent = domParent
   }
 
   getContextValue = (): C | undefined => this.#contextValue
@@ -312,7 +344,8 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
       set: (value: C) => {
         this.#contextValue = value
       },
-      get: (type: ElementType | symbol) => this.#config.getContext(type as Component),
+      get: (type: ElementType | symbol) =>
+        isElementFunction(type) ? this.#config.getContext(type) : undefined,
     }
 
     return {
@@ -358,6 +391,8 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   }
 
   #dequeueTasks(signal?: AbortSignal): Array<() => void> {
+    if (this.#tasks.length === 0) return EMPTY_TASKS
+
     let needsSignal = signal === undefined && this.#tasks.some((task) => task.length >= 1)
 
     if (needsSignal) {
@@ -365,11 +400,25 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
     }
 
     signal ??= this.#renderController?.signal
+    signal ??= sharedAbortedSignal ??= AbortSignal.abort()
     let tasks = this.#tasks.splice(0, this.#tasks.length)
-    return tasks.map((task) => () => task(signal!))
+    return tasks.map((task) => () => task(signal))
   }
 }
 
+function isRenderFn(value: unknown): value is RenderFn {
+  return typeof value === 'function'
+}
+
+function isElementFunction(value: unknown): value is ElementFunction {
+  return typeof value === 'function'
+}
+
+// Shared empty result and aborted signal so the common no-task removal path
+// (large subtree teardowns dispose many components at once) allocates nothing.
+const EMPTY_TASKS: Array<() => void> = []
+let sharedAbortedSignal: AbortSignal | undefined
+
 function syncProps(target: ElementProps, next: ElementProps): void {
   for (let key in target) {
     if (!(key in next)) {

package/src/runtime/core/attributes.ts

@@ -62,10 +62,31 @@ export function canUseProperty(
   return name in element
 }
 
+// Prop names repeat constantly across elements and renders; cache the
+// normalized results so the string work and object allocation happen once
+// per distinct name. Entries are shared — callers must not mutate them.
+const NORMALIZATION_CACHE_LIMIT = 256
+const htmlAttributeNameCache = new Map<string, { ns?: string; attr: string }>()
+const svgAttributeNameCache = new Map<string, { ns?: string; attr: string }>()
+
 export function normalizeAttributeName(
   name: string,
   isSvg: boolean,
 ): { ns?: string; attr: string } {
+  let cache = isSvg ? svgAttributeNameCache : htmlAttributeNameCache
+  let cached = cache.get(name)
+  if (cached === undefined) {
+    cached = computeAttributeName(name, isSvg)
+    if (cache.size >= NORMALIZATION_CACHE_LIMIT) {
+      let oldest = cache.keys().next()
+      if (!oldest.done) cache.delete(oldest.value)
+    }
+    cache.set(name, cached)
+  }
+  return cached
+}
+
+function computeAttributeName(name: string, isSvg: boolean): { ns?: string; attr: string } {
   if (name.startsWith('aria-') || name.startsWith('data-')) return { attr: name }
 
   if (name === 'className') return { attr: 'class' }
@@ -113,6 +134,19 @@ export function getMergedClassName(props: ElementProps): string | undefined {
   return merged || undefined
 }
 
+// Style/attribute names come from a small recurring set, so cache conversions
+// instead of running a regex per property per element per render.
+const kebabCaseCache = new Map<string, string>()
+
 export function toKebabCase(value: string): string {
-  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+  let cached = kebabCaseCache.get(value)
+  if (cached === undefined) {
+    cached = value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+    if (kebabCaseCache.size >= NORMALIZATION_CACHE_LIMIT) {
+      let oldest = kebabCaseCache.keys().next()
+      if (!oldest.done) kebabCaseCache.delete(oldest.value)
+    }
+    kebabCaseCache.set(value, cached)
+  }
+  return cached
 }

package/src/runtime/core/children.ts

@@ -1,4 +1,6 @@
 import type { RemixNode } from '../jsx.ts'
+import { invariant } from '../invariant.ts'
+import { isRemixElement } from './vnode.ts'
 
 export type EmptyChild = boolean | null | undefined
 export type PrimitiveChild = string | number | bigint
@@ -13,8 +15,8 @@ export function isPrimitiveChild(value: RemixNode): value is PrimitiveChild {
 }
 
 export function normalizeChildren(children: readonly RemixNode[]): RemixNode[] {
-  for (let child of children) {
-    if (Array.isArray(child)) {
+  for (let i = 0; i < children.length; i++) {
+    if (Array.isArray(children[i])) {
       return (children as unknown[]).flat(Infinity) as RemixNode[]
     }
   }
@@ -22,6 +24,26 @@ export function normalizeChildren(children: readonly RemixNode[]): RemixNode[] {
   return children as RemixNode[]
 }
 
+export function assertRemixNodes(values: readonly unknown[]): asserts values is RemixNode[] {
+  for (let value of values) {
+    invariant(isRemixNode(value), 'Invalid child node')
+  }
+}
+
+export function isRemixNode(value: unknown): value is RemixNode {
+  if (value == null) return true
+  let type = typeof value
+  if (type === 'string' || type === 'number' || type === 'bigint' || type === 'boolean') {
+    return true
+  }
+  if (isRemixElement(value)) return true
+  if (!Array.isArray(value)) return false
+  for (let child of value) {
+    if (!isRemixNode(child)) return false
+  }
+  return true
+}
+
 export function packChildren(children: readonly RemixNode[]): RemixNode | undefined {
   if (children.length === 0) {
     return undefined