@remix-run/ui 0.4.0 → 0.5.0

package/src/runtime/vnode.ts

@@ -1,7 +1,13 @@
-import type { ComponentHandle, Component } from './component.ts'
-import { Fragment, Frame } from './component.ts'
+import type { ComponentHandle, Fragment, Frame, FrameHandle, FrameProps } from './component.ts'
 import { isRemixElement } from './core/vnode.ts'
-import type { ElementProps, RemixNode } from './jsx.ts'
+import type { Frame as FrameInstance } from './frame.ts'
+import type { RemixNode } from './jsx.ts'
+import type { ElementFunction } from './element-function.ts'
+import type { Key } from './key.ts'
+import type { MixinRuntimeState, MixinRuntimeValue } from './mixins/mixin.ts'
+import type { OnMixinDescriptor } from './mixins/on-mixin.ts'
+import type { Scheduler } from './scheduler.ts'
+import type { StyleManager } from '../style/index.ts'
 
 export { isRemixElement }
 
@@ -9,136 +15,234 @@ export const TEXT_NODE = Symbol('TEXT_NODE')
 export const NON_RENDER_NODE = Symbol('NON_RENDER_NODE')
 export const ROOT_VNODE = Symbol('ROOT_VNODE')
 
-export type VNodeType =
-  | typeof ROOT_VNODE
-  | string // host element
-  | Function // component
-  | typeof TEXT_NODE
-  | typeof NON_RENDER_NODE
-  | typeof Fragment
-  | typeof Frame
-
-export type VNode<T extends VNodeType = VNodeType> = {
-  type: T
-  props?: ElementProps
-  _mixedProps?: ElementProps
-  key?: string
-
-  // _prefixes assigned during reconciliation
-  _parent?: VNode
-  _children?: VNode[]
-  _dom?: unknown
-  _controller?: AbortController
-  _mixState?: unknown
-  _directEventDescriptors?: unknown
-  _directEventState?: unknown
-  _controlledState?: unknown
-  _svg?: boolean
-  // Range roots render between comment boundary markers
-  _rangeStart?: Node
-  _rangeEnd?: Node
-  _pendingHydrationComponentId?: string
-  _frameInstance?: unknown
-  _frameFallbackRoot?: { render: (element: RemixNode) => void; dispose: () => void }
-  _frameResolveToken?: number
-  _frameResolveController?: AbortController
-  _frameResolved?: boolean
+export type VNodeKind = 'root' | 'empty' | 'text' | 'fragment' | 'host' | 'component' | 'frame'
 
-  // TEXT_NODE
-  _text?: string
-
-  // Component
-  _handle?: ComponentHandle
-  _id?: string
-  _content?: VNode
+export type RuntimeElementProps = {
+  [name: string]: unknown
+}
 
-  // Mixin-persisted node removal state
-  _persistedByMixins?: boolean
-  _persistedParentByMixins?: ParentNode
-  _persistedRemovalToken?: number
+export type RuntimeHostProps = RuntimeElementProps & {
+  children?: RemixNode
+  innerHTML?: string
+  mix?: MixinRuntimeValue
 }
 
-export type FragmentNode = VNode & {
-  type: typeof Fragment
-  _children: VNode[]
+type InputNodeBase<kind extends VNodeKind, type> = {
+  kind: kind
+  type: type
+  key?: Key
+  _parent?: never
 }
 
-export type TextNode = VNode & {
-  type: typeof TEXT_NODE
+export type NonRenderNode = InputNodeBase<'empty', typeof NON_RENDER_NODE>
+
+export type TextNode = InputNodeBase<'text', typeof TEXT_NODE> & {
   _text: string
 }
 
-export type NonRenderNode = VNode & {
-  type: typeof NON_RENDER_NODE
+export type FragmentNode = InputNodeBase<'fragment', typeof Fragment> & {
+  _children: VNodeInput[]
+}
+
+export type HostNode = InputNodeBase<'host', string> & {
+  props: RuntimeHostProps
+  _children: VNodeInput[]
+}
+
+export type ComponentNode = InputNodeBase<'component', ElementFunction> & {
+  props: RuntimeElementProps
+}
+
+export type FrameNode = InputNodeBase<'frame', typeof Frame> & {
+  props: RuntimeElementProps & FrameProps
 }
 
-export type CommittedTextNode = TextNode & {
+export type VNodeInput =
+  | NonRenderNode
+  | TextNode
+  | FragmentNode
+  | HostNode
+  | ComponentNode
+  | FrameNode
+
+type MountedNodeBase = {
+  _parent: VNodeParent
+  _svg: boolean
+}
+
+type CommittedNodeBase<kind extends VNodeKind, type> = {
+  kind: kind
+  type: type
+  key?: Key
+} & MountedNodeBase
+
+export type CommittedNonRenderNode = CommittedNodeBase<'empty', typeof NON_RENDER_NODE>
+
+export type CommittedTextNode = CommittedNodeBase<'text', typeof TEXT_NODE> & {
+  _text: string
   _dom: Text
 }
 
-export type HostNode = VNode & {
+export type ControlledReflectionState = {
+  disposed: boolean
+  listenersAttached: boolean
+  pendingRestoreVersion: number
+  managesValue: boolean
+  managesChecked: boolean
+  hasControlledValue: boolean
+  controlledValue: unknown
+  hasControlledChecked: boolean
+  controlledChecked: unknown
+  onInput(): void
+  onChange(): void
+}
+
+export type DirectEventBinding = {
   type: string
-  props: ElementProps
-  _children: VNode[]
+  handler: (event: Event, signal: AbortSignal) => void | Promise<void>
+  capture: boolean
+  stableHandler: ((event: Event) => void) | null
+  reentry: AbortController | null
+}
+
+export type DirectEventState = {
+  bindings: DirectEventBinding[]
+}
+
+export type HostPersistenceState = {
+  parent: ParentNode
+  token: number
 }
 
-export type CommittedHostNode = HostNode & {
+export type CommittedHostNode = CommittedNodeBase<'host', string> & {
+  props: RuntimeHostProps
+  _children: CommittedVNode[]
   _dom: Element
-  _controller?: AbortController
+  _mixedProps: RuntimeHostProps
+  _mixState?: MixinRuntimeState
+  _directEventDescriptors?: OnMixinDescriptor[]
+  _directEventState?: DirectEventState
+  _controlledState?: ControlledReflectionState
+  _persistence?: HostPersistenceState
 }
 
-export type ComponentNode = VNode & {
-  type: Function
-  props: ElementProps
-  _handle: ComponentHandle
+export type CommittedFragmentNode = CommittedNodeBase<'fragment', typeof Fragment> & {
+  _children: CommittedVNode[]
 }
 
-export type CommittedComponentNode = VNode & {
-  type: Function
-  props: ElementProps
-  _content: VNode
+export type MountingComponentNode = CommittedNodeBase<'component', ElementFunction> & {
+  props: RuntimeElementProps
   _handle: ComponentHandle
+  _context: ReconcileContext
+}
+
+export type CommittedComponentNode = MountingComponentNode & {
+  _content: CommittedVNode
 }
 
-export function isFragmentNode(node: VNode): node is FragmentNode {
-  return node.type === Fragment
+export interface FrameFallbackRoot {
+  render(element: RemixNode): void
+  dispose(): void
 }
 
-export function isTextNode(node: VNode): node is TextNode {
-  return node.type === TEXT_NODE
+export type FrameMountState = {
+  instance: FrameInstance
+  fallbackRoot?: FrameFallbackRoot
+  resolveToken: number
+  resolveController?: AbortController
+  resolved: boolean
 }
 
-export function isNonRenderNode(node: VNode): node is NonRenderNode {
-  return node.type === NON_RENDER_NODE
+export type CommittedFrameNode = CommittedNodeBase<'frame', typeof Frame> & {
+  props: RuntimeElementProps & FrameProps
+  _rangeStart: Comment
+  _rangeEnd: Comment
+  _state: FrameMountState
+}
+
+export type CommittedVNode =
+  | CommittedNonRenderNode
+  | CommittedTextNode
+  | CommittedFragmentNode
+  | CommittedHostNode
+  | CommittedComponentNode
+  | CommittedFrameNode
+
+export type RootVNode = {
+  kind: 'root'
+  type: typeof ROOT_VNODE
+  _children: CommittedVNode[]
+  _svg: boolean
+  _rangeStart?: Node
+  _rangeEnd?: Node
+  _pendingHydrationComponentId?: string
 }
 
-export function isCommittedTextNode(node: VNode): node is CommittedTextNode {
-  return isTextNode(node) && node._dom instanceof Text
+export interface ReconcileContext {
+  frame: FrameHandle
+  scheduler: Scheduler
+  styles: StyleManager
+  rootTarget: EventTarget
 }
 
-export function isHostNode(node: VNode): node is HostNode {
-  return typeof node.type === 'string'
+export type VNodeParent =
+  | RootVNode
+  | CommittedFragmentNode
+  | CommittedHostNode
+  | MountingComponentNode
+  | CommittedComponentNode
+
+export type VNode = VNodeInput | CommittedVNode | RootVNode | MountingComponentNode
+
+export function isFragmentNode(node: VNode): node is FragmentNode | CommittedFragmentNode {
+  return node.kind === 'fragment'
 }
 
-export function isCommittedHostNode(node: VNode): node is CommittedHostNode {
-  return isHostNode(node) && node._dom instanceof Element
+export function isTextNode(node: VNode): node is TextNode | CommittedTextNode {
+  return node.kind === 'text'
 }
 
-export function isComponentNode(node: VNode): node is ComponentNode {
-  return typeof node.type === 'function' && node.type !== Frame
+export function isNonRenderNode(node: VNode): node is NonRenderNode | CommittedNonRenderNode {
+  return node.kind === 'empty'
+}
+
+export function isCommittedTextNode(node: CommittedVNode): node is CommittedTextNode {
+  return node.kind === 'text'
+}
+
+export function isHostNode(node: VNode): node is HostNode | CommittedHostNode {
+  return node.kind === 'host'
+}
+
+export function isCommittedHostNode(node: CommittedVNode): node is CommittedHostNode {
+  return node.kind === 'host'
+}
+
+export function isComponentNode(
+  node: VNode,
+): node is ComponentNode | MountingComponentNode | CommittedComponentNode {
+  return node.kind === 'component'
 }
 
 export function isCommittedComponentNode(node: VNode): node is CommittedComponentNode {
-  return isComponentNode(node) && node._content !== undefined
+  return node.kind === 'component' && '_content' in node
+}
+
+export function isFrameNode(node: VNode): node is FrameNode | CommittedFrameNode {
+  return node.kind === 'frame'
+}
+
+export function isCommittedFrameNode(node: CommittedVNode): node is CommittedFrameNode {
+  return node.kind === 'frame'
 }
 
-export function findContextFromAncestry(node: VNode, type: Component): unknown {
-  let current: VNode | undefined = node
+export function findContextFromAncestry(node: VNodeParent, type: ElementFunction): unknown {
+  let current: VNodeParent | undefined = node
   while (current) {
-    if (current.type === type && isComponentNode(current)) {
+    if (current.kind === 'component' && current.type === type) {
       return current._handle.getContextValue()
     }
-    current = current._parent
+    current = '_parent' in current ? current._parent : undefined
   }
   return undefined
 }

package/src/select/index.tsx

@@ -30,10 +30,10 @@ export type SelectOptionProps = Props<'div'> & {
 }
 
 const selectTriggerShadow =
-  '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)'
+  '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))'
 
 const selectTriggerFocusShadow =
-  '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 #3573F6, 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 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(#3573F6, #6eaaff), 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))'
 
 const selectTriggerCss: CSSMixinDescriptor = css({
   appearance: 'none',
@@ -51,9 +51,9 @@ const selectTriggerCss: CSSMixinDescriptor = css({
   gap: '6px',
   border: 0,
   borderRadius: '8px',
-  background: '#FFFFFF',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
   boxShadow: selectTriggerShadow,
-  color: '#101010',
+  color: 'light-dark(#101010, #ececec)',
   fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
   fontStyle: 'normal',
   fontWeight: 400,
@@ -62,15 +62,15 @@ const selectTriggerCss: CSSMixinDescriptor = css({
   fontFeatureSettings: '"ss01" on, "cv01" on',
   letterSpacing: 0,
   textAlign: 'left',
-  textShadow: '0 1px 0 #FFFFFF',
+  textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
   whiteSpace: 'nowrap',
   '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
     {
-      background: '#FFFFFF',
-      color: '#101010',
+      background: 'light-dark(#FFFFFF, #1a1a1a)',
+      color: 'light-dark(#101010, #ececec)',
     },
   '&:active': {
-    background: '#FFFFFF',
+    background: 'light-dark(#FFFFFF, #1a1a1a)',
   },
   '&:focus-visible': {
     outline: 0,
@@ -99,7 +99,7 @@ const triggerIconCss: CSSMixinDescriptor = css({
   justifyContent: 'center',
   width: '16px',
   height: '16px',
-  color: '#707070',
+  color: 'light-dark(#707070, #b3b3b3)',
   flex: 'none',
   '& > svg': {
     display: 'block',

package/src/server/stream.ts

@@ -1,5 +1,6 @@
 import type { ComponentHandle, FrameHandle, Key, RemixNode } from '../runtime/component.ts'
 import type { ElementType, ElementProps, RemixElement } from '../runtime/jsx.ts'
+import type { ElementFunction } from '../runtime/element-function.ts'
 import { Fragment, createComponent, createFrameHandle, Frame } from '../runtime/component.ts'
 import { isEntry, type EntryComponent } from '../runtime/client-entries.ts'
 import {
@@ -89,7 +90,6 @@ interface RenderContext {
   onError: (error: unknown) => void
   parentVNode?: VNode
   styleCache: Map<string, { selector: string; css: string }>
-  emittedStyles: Set<string>
   resolveFrame: (
     src: string,
     target?: string,
@@ -203,7 +203,6 @@ export function renderToStream(
     onError,
     resolveFrame: options?.resolveFrame ?? defaultResolveFrame,
     styleCache: new Map(),
-    emittedStyles: new Set(),
     pendingFrames: [],
     hydrationData: new Map(),
     unresolvedHydrationData: new Map(),
@@ -436,7 +435,7 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
       return buildElementSegment(tag, props, context, frameState)
     }
 
-    if (typeof type === 'function') {
+    if (isElementFunction(type)) {
       if (type === Frame) {
         return buildFrameSegment(node, context, frameState)
       }
@@ -788,8 +787,8 @@ function sanitizeReturnedSsrMixinProps(props: ElementProps): ElementProps {
 
 function resolveReturnedSsrMixDescriptors(
   value: unknown,
-): Array<{ type: Function; args: unknown[] }> | null {
-  let descriptors: Array<{ type: Function; args: unknown[] }> = []
+): Array<{ type: ElementFunction; args: unknown[] }> | null {
+  let descriptors: Array<{ type: ElementFunction; args: unknown[] }> = []
   if (!collectReturnedSsrMixDescriptors(value, descriptors)) {
     return null
   }
@@ -799,7 +798,7 @@ function resolveReturnedSsrMixDescriptors(
 
 function collectReturnedSsrMixDescriptors(
   value: unknown,
-  output: Array<{ type: Function; args: unknown[] }>,
+  output: Array<{ type: ElementFunction; args: unknown[] }>,
 ): boolean {
   if (!value) {
     return true
@@ -829,7 +828,11 @@ function isSsrMixinElement(
   return '__rmxMixinElementType' in value
 }
 
-function isSsrMixinDescriptor(value: unknown): value is { type: Function; args: unknown[] } {
+function isElementFunction(value: unknown): value is ElementFunction {
+  return typeof value === 'function'
+}
+
+function isSsrMixinDescriptor(value: unknown): value is { type: ElementFunction; args: unknown[] } {
   if (!value || typeof value !== 'object' || isRemixElement(value)) {
     return false
   }
@@ -839,7 +842,7 @@ function isSsrMixinDescriptor(value: unknown): value is { type: Function; args:
 }
 
 function buildComponentSegment(
-  type: Function,
+  type: ElementFunction,
   props: any,
   context: RenderContext,
   componentId: string,
@@ -923,7 +926,7 @@ function createHydrationPropsReplacer(context: RenderContext, frameState: SsrFra
     }
 
     // Component function: render synchronously, then unwrap its result
-    if (typeof type === 'function') {
+    if (isElementFunction(type)) {
       let vnode = createVNode(type, props)
       if (context.parentVNode) {
         vnode._parent = context.parentVNode
@@ -1180,8 +1183,6 @@ function finalizeHtml(html: string, context: RenderContext): string {
     }
   }
 
-  html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
-
   // Append aggregated hydration/frame data script at the end
   let rmxData = buildRmxDataScript(context)
   if (rmxData) {
@@ -1252,24 +1253,12 @@ function renderStyleTag(
 ): string {
   let wrappedCss = wrapStyleForLayer(selector, css, layer)
   if (!wrappedCss) return ''
-  return `<style data-rmx="${escapeHtml(selector)}">${wrappedCss}</style>`
+  return `<style data-rmx="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`
 }
 
-function readStyleTagAttribute(attrs: string, name: string): string | null {
-  let match = attrs.match(new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)')`))
-  if (!match) return null
-  return match[1] ?? match[2] ?? null
-}
-
-function dedupeServerStyleTagsInHtml(html: string, seenStyles: Set<string>): string {
-  return html.replace(/<style\b([^>]*)>[\s\S]*?<\/style>/gi, (match, attrs) => {
-    let selector = readStyleTagAttribute(attrs, 'data-rmx')
-    if (!selector) return match
-
-    if (seenStyles.has(selector)) return ''
-    seenStyles.add(selector)
-    return match
-  })
+function escapeStyleText(css: string): string {
+  // A literal "</style" closes an HTML style element even when it appears inside a CSS string.
+  return css.replace(/</g, '\\3C ')
 }
 
 function buildRmxDataScript(context: RenderContext): string {
@@ -1303,6 +1292,12 @@ function escapeScriptJson(json: string): string {
 // the handler's `finalizeHtml` emits selector-addressed `<style>` tags in its HTML, and on the client,
 // the `adoptServerStyleTag` MutationObserver (stylesheet.ts) picks it up anywhere in the
 // document and adopts the CSS into an adopted stylesheet.
+//
+// Style tags are intentionally NOT deduped across frame boundaries: each frame
+// owns its style rules independently on the client (per-frame refcounted
+// adoption), so every frame's HTML must carry the full set of style tags its
+// content references — even when a sibling frame or the enclosing document
+// already emitted the same selector.
 async function streamPendingFrames(
   context: RenderContext,
   controller: ReadableStreamDefaultController,
@@ -1323,7 +1318,6 @@ async function streamPendingFrames(
         try {
           let { html, tail } = await promise
           if (context.signal.aborted) return
-          html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
 
           // Stream as a template element (first chunk only)
           let templateHtml = `<template id="${frameId}">${escapeTemplateContent(html)}</template>`

package/src/shared/focus-styles.ts

@@ -1,2 +1,2 @@
 export const controlFocusShadow =
-  '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 #3573F6, 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 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(#3573F6, #6eaaff), 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))'

package/src/shared/style-values.ts

@@ -114,11 +114,11 @@ export const componentStyleValues: ComponentStyleValues = {
     },
   },
   surface: {
-    lvl0: '#ffffff',
-    lvl1: '#f8f8f8',
-    lvl2: '#f5f5f5',
-    lvl3: '#f3f3f3',
-    lvl4: '#efefef',
+    lvl0: 'light-dark(#ffffff, #1a1a1a)',
+    lvl1: 'light-dark(#f8f8f8, #1f1f1f)',
+    lvl2: 'light-dark(#f5f5f5, #232323)',
+    lvl3: 'light-dark(#f3f3f3, #272727)',
+    lvl4: 'light-dark(#efefef, #2c2c2c)',
   },
   shadow: {
     xs: '0 1px 1px rgb(0 0 0 / 0.05)',
@@ -127,38 +127,38 @@ export const componentStyleValues: ComponentStyleValues = {
   },
   colors: {
     text: {
-      primary: '#151515',
-      secondary: '#4f4f4f',
-      muted: '#6d6d6d',
+      primary: 'light-dark(#151515, #ececec)',
+      secondary: 'light-dark(#4f4f4f, #b3b3b3)',
+      muted: 'light-dark(#6d6d6d, #b3b3b3)',
     },
     border: {
-      subtle: '#e7e7e7',
-      default: '#d1d1d1',
+      subtle: 'light-dark(#e7e7e7, #333333)',
+      default: 'light-dark(#d1d1d1, #444444)',
     },
     focus: {
-      ring: '#1A72FF',
+      ring: 'light-dark(#1A72FF, #6eaaff)',
     },
     action: {
       primary: {
-        background: '#1A72FF',
-        backgroundHover: '#1463e0',
-        backgroundActive: '#0f55c9',
-        foreground: 'rgb(255 255 255 / 0.92)',
-        border: '#1A72FF',
+        background: 'light-dark(#1A72FF, #6eaaff)',
+        backgroundHover: 'light-dark(#1463e0, #8bbcff)',
+        backgroundActive: 'light-dark(#0f55c9, #a7ccff)',
+        foreground: 'light-dark(rgb(255 255 255 / 0.92), #151515)',
+        border: 'light-dark(#1A72FF, #6eaaff)',
       },
       secondary: {
-        background: '#ffffff',
-        backgroundHover: '#fbfbfb',
-        backgroundActive: '#f3f3f3',
-        foreground: '#202020',
-        border: '#d1d1d1',
+        background: 'light-dark(#ffffff, #1a1a1a)',
+        backgroundHover: 'light-dark(#fbfbfb, #232323)',
+        backgroundActive: 'light-dark(#f3f3f3, #2c2c2c)',
+        foreground: 'light-dark(#202020, #ececec)',
+        border: 'light-dark(#d1d1d1, #444444)',
       },
       danger: {
-        background: '#FF3000',
-        backgroundHover: '#e12b00',
-        backgroundActive: '#c52600',
-        foreground: 'rgb(255 255 255 / 0.92)',
-        border: '#FF3000',
+        background: 'light-dark(#FF3000, #ff8a70)',
+        backgroundHover: 'light-dark(#e12b00, #ff9f8a)',
+        backgroundActive: 'light-dark(#c52600, #ffb39f)',
+        foreground: 'light-dark(rgb(255 255 255 / 0.92), #151515)',
+        border: 'light-dark(#FF3000, #ff8a70)',
       },
     },
   },

package/src/style/style.ts

@@ -19,8 +19,22 @@ export interface CSSProps extends DOMStyleProperties {
 type StyleObject = Record<string, unknown>
 
 // Convert camelCase CSS properties to kebab-case
+// Property names repeat constantly across renders; cache conversions instead
+// of running a regex each time.
+const CAMEL_TO_KEBAB_CACHE_LIMIT = 256
+const camelToKebabCache = new Map<string, string>()
+
 function camelToKebab(str: string): string {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+  let cached = camelToKebabCache.get(str)
+  if (cached === undefined) {
+    cached = str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+    if (camelToKebabCache.size >= CAMEL_TO_KEBAB_CACHE_LIMIT) {
+      let oldest = camelToKebabCache.keys().next()
+      if (!oldest.done) camelToKebabCache.delete(oldest.value)
+    }
+    camelToKebabCache.set(str, cached)
+  }
+  return cached
 }
 
 // Properties that should remain unitless (numeric values without px)
@@ -81,18 +95,23 @@ function isKeyframesAtRule(key: string): boolean {
   )
 }
 
-// Generate a hash for style objects to create unique class names
+// Generate a hash for style objects to create unique class names.
+// Class names are content-addressed — a collision silently applies the wrong
+// styles — so use two independent 32-bit FNV-1a passes (~64 bits of hash
+// space) rather than a single 32-bit hash. Must be deterministic across
+// server and client.
 function hashStyle(obj: any): string {
   // Sort keys to ensure consistent hashing, but include values in the string
   let sortedEntries = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b))
   let str = JSON.stringify(sortedEntries)
-  let hash = 0
+  let h1 = 0x811c9dc5
+  let h2 = 0xcbf29ce4
   for (let i = 0; i < str.length; i++) {
     let char = str.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash // Convert to 32-bit integer
+    h1 = Math.imul(h1 ^ char, 0x01000193) >>> 0
+    h2 = Math.imul(h2 ^ char, 0x01000193) >>> 0
   }
-  return Math.abs(hash).toString(36)
+  return h1.toString(36) + h2.toString(36)
 }
 
 // Convert style object to CSS text