@remix-run/ui 0.1.2 → 0.2.0

package/src/runtime/mixins/ref-mixin.ts

@@ -1,4 +1,4 @@
-import { createMixin } from './mixin.ts'
+import { createMixin, type MixinFactory } from './mixin.ts'
 import type { ElementProps } from '../jsx.ts'
 
 /**
@@ -9,8 +9,8 @@ export type RefCallback<node extends EventTarget> = (node: node, signal: AbortSi
 /**
  * Calls a callback when an element is inserted and aborts it when removed.
  */
-export const ref = createMixin<Element, [callback: RefCallback<Element>], ElementProps>(
-  (handle) => {
+export const ref: MixinFactory<Element, [callback: RefCallback<Element>], ElementProps> =
+  createMixin<Element, [callback: RefCallback<Element>], ElementProps>((handle) => {
     let controller: AbortController | undefined
 
     handle.addEventListener('insert', (event) => {
@@ -28,5 +28,4 @@ export const ref = createMixin<Element, [callback: RefCallback<Element>], Elemen
       callback = nextCallback
       return handle.element
     }
-  },
-)
+  })

package/src/runtime/reconcile.ts

@@ -20,6 +20,7 @@ import {
   isCommittedTextNode,
   isFragmentNode,
   isHostNode,
+  isNonRenderNode,
   isTextNode,
   findContextFromAncestry,
 } from './vnode.ts'
@@ -421,6 +422,10 @@ export function diffVNodes(
     return rootCursor
   }
 
+  if (isNonRenderNode(curr) && isNonRenderNode(next)) {
+    return rootCursor
+  }
+
   if (isCommittedTextNode(curr) && isTextNode(next)) {
     diffText(curr, next, vParent)
     return rootCursor
@@ -444,7 +449,7 @@ export function diffVNodes(
       frame,
       scheduler,
       styles,
-      vParent,
+      next,
       rootTarget,
       undefined,
       anchor,
@@ -484,7 +489,7 @@ function replace(
     return
   }
 
-  let replacementAnchor = findNextSiblingDomAnchor(curr, vParent) ?? anchor
+  let replacementAnchor = findNextSiblingDomAnchor(curr) ?? anchor
   remove(curr, domParent, scheduler, styles)
   insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor)
 }
@@ -709,6 +714,10 @@ function insert(
     ? (dom: Node) => domParent.insertBefore(dom, anchor)
     : (dom: Node) => domParent.appendChild(dom)
 
+  if (isNonRenderNode(node)) {
+    return cursor
+  }
+
   if (isTextNode(node)) {
     if (cursor instanceof Text) {
       node._parent = vParent
@@ -878,17 +887,7 @@ function insert(
   if (isFragmentNode(node)) {
     // Insert fragment children in order before the same anchor
     for (let child of node._children) {
-      cursor = insert(
-        child,
-        domParent,
-        frame,
-        scheduler,
-        styles,
-        vParent,
-        rootTarget,
-        anchor,
-        cursor,
-      )
+      cursor = insert(child, domParent, frame, scheduler, styles, node, rootTarget, anchor, cursor)
     }
     return cursor
   }
@@ -1275,6 +1274,8 @@ export function renderComponent(
   anchor?: Node,
   cursor?: Node | null,
 ): Node | null | undefined {
+  if (handle.isRemoved()) return cursor
+
   let [element, tasks] = handle.render(next.props)
   let content = toVNode(element)
   let newCursor = diffVNodes(
@@ -2020,15 +2021,23 @@ function shouldDispatchInlineMixinLifecycle(node: Node): boolean {
   return true
 }
 
-export function findNextSiblingDomAnchor(curr: VNode, vParent?: VNode): Node | null {
+export function findNextSiblingDomAnchor(curr: VNode): Node | null {
+  let vParent = curr._parent
   if (!vParent || !Array.isArray(vParent._children)) return null
   let children = vParent._children
+  if (children.length === 0) return findNextSiblingDomAnchor(vParent)
+
   let idx = children.indexOf(curr)
   if (idx === -1) return null
   for (let i = idx + 1; i < children.length; i++) {
     let dom = findFirstDomAnchor(children[i])
     if (dom) return dom
   }
+
+  if (isFragmentNode(vParent)) {
+    return findNextSiblingDomAnchor(vParent)
+  }
+
   return null
 }
 

package/src/runtime/scheduler.ts

@@ -17,7 +17,23 @@ type SchedulerPhaseListener = EventListenerOrEventListenerObject | null
 /**
  * Scheduler API used by the reconciler and frame runtime.
  */
-export type Scheduler = ReturnType<typeof createScheduler>
+export interface Scheduler {
+  enqueue(vnode: CommittedComponentNode, domParent: ParentNode): void
+  enqueueWork(newTasks: EmptyFn[]): void
+  enqueueCommitPhase(newTasks: EmptyFn[]): void
+  enqueueTasks(newTasks: EmptyFn[]): void
+  addEventListener(
+    type: SchedulerPhaseType,
+    listener: SchedulerPhaseListener,
+    options?: AddEventListenerOptions | boolean,
+  ): void
+  removeEventListener(
+    type: SchedulerPhaseType,
+    listener: SchedulerPhaseListener,
+    options?: EventListenerOptions | boolean,
+  ): void
+  dequeue(): void
+}
 
 // Protect against infinite cascading updates (e.g. handle.update() during render)
 const MAX_CASCADING_UPDATES = 50
@@ -38,7 +54,7 @@ export function createScheduler(
   doc: Document,
   rootTarget: EventTarget,
   styles: StyleManager = defaultStyleManager,
-) {
+): Scheduler {
   let documentState = createDocumentState(doc)
   let scheduled = new Map<CommittedComponentNode, ParentNode>()
   let workTasks: EmptyFn[] = []
@@ -53,23 +69,7 @@ export function createScheduler(
     beforeUpdate: 0,
     commit: 0,
   }
-  let scheduler: {
-    enqueue(vnode: CommittedComponentNode, domParent: ParentNode): void
-    enqueueWork(newTasks: EmptyFn[]): void
-    enqueueCommitPhase(newTasks: EmptyFn[]): void
-    enqueueTasks(newTasks: EmptyFn[]): void
-    addEventListener(
-      type: SchedulerPhaseType,
-      listener: SchedulerPhaseListener,
-      options?: AddEventListenerOptions | boolean,
-    ): void
-    removeEventListener(
-      type: SchedulerPhaseType,
-      listener: SchedulerPhaseListener,
-      options?: EventListenerOptions | boolean,
-    ): void
-    dequeue(): void
-  }
+  let scheduler: Scheduler
 
   function dispatchError(error: unknown) {
     console.error(error)
@@ -137,7 +137,7 @@ export function createScheduler(
             // Needed for fragment self-updates that add children - without this, new children
             // would be appended after siblings. The keyed diff has placement logic, but unkeyed
             // diff relies on anchor for correct positioning.
-            let anchor = findNextSiblingDomAnchor(vnode, vParent) || undefined
+            let anchor = findNextSiblingDomAnchor(vnode) || undefined
             try {
               let updateStyles = getFrameStyleManager(vnode)
               renderComponent(

package/src/runtime/svg-attributes.ts

@@ -5,6 +5,7 @@ const CANONICAL_CAMEL_SVG_ATTRS = new Set([
   'accentHeight',
   'attributeName',
   'attributeType',
+  'autoReverse',
   'baseFrequency',
   'baseProfile',
   'calcMode',

package/src/runtime/to-vnode.ts

@@ -2,7 +2,7 @@ import { Fragment } from './component.ts'
 import { invariant } from './invariant.ts'
 import { isEmptyChild, isPrimitiveChild, normalizeChildren } from './core/children.ts'
 import type { RemixElement, RemixNode } from './jsx.ts'
-import { isRemixElement, TEXT_NODE, type VNode } from './vnode.ts'
+import { isRemixElement, NON_RENDER_NODE, TEXT_NODE, type VNode } from './vnode.ts'
 
 function flatMapChildrenToVNodes(node: RemixElement): VNode[] {
   if (!('children' in node.props)) return []
@@ -21,7 +21,7 @@ function flattenChildrenToVNodes(nodes: RemixNode[], out: VNode[]): void {
 
 export function toVNode(node: RemixNode): VNode {
   if (isEmptyChild(node)) {
-    return { type: TEXT_NODE, _text: '' }
+    return { type: NON_RENDER_NODE }
   }
 
   if (isPrimitiveChild(node)) {

package/src/runtime/vnode.ts

@@ -6,6 +6,7 @@ import type { ElementProps, RemixNode } from './jsx.ts'
 export { isRemixElement }
 
 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 =
@@ -13,6 +14,7 @@ export type VNodeType =
   | string // host element
   | Function // component
   | typeof TEXT_NODE
+  | typeof NON_RENDER_NODE
   | typeof Fragment
   | typeof Frame
 
@@ -66,6 +68,10 @@ export type TextNode = VNode & {
   _text: string
 }
 
+export type NonRenderNode = VNode & {
+  type: typeof NON_RENDER_NODE
+}
+
 export type CommittedTextNode = TextNode & {
   _dom: Text
 }
@@ -102,6 +108,10 @@ export function isTextNode(node: VNode): node is TextNode {
   return node.type === TEXT_NODE
 }
 
+export function isNonRenderNode(node: VNode): node is NonRenderNode {
+  return node.type === NON_RENDER_NODE
+}
+
 export function isCommittedTextNode(node: VNode): node is CommittedTextNode {
   return isTextNode(node) && node._dom instanceof Text
 }

package/src/server/README.md

@@ -1,6 +1,6 @@
 # Server
 
-Remix Component can render to HTML on the server using two APIs:
+Remix UI can render to HTML on the server using two APIs:
 
 - `renderToString` - Returns a complete HTML string. Simple, but buffers the entire response.
 - `renderToStream` - Returns a `ReadableStream<Uint8Array>`. Sends the initial HTML immediately and streams frame content as it resolves.
@@ -26,6 +26,7 @@ import { renderToStream } from 'remix/ui/server'
 
 let stream = renderToStream(<App />, {
   frameSrc: request.url,
+  signal: request.signal,
   resolveFrame(src, _target, context) {
     let frameUrl = new URL(src, context?.currentFrameSrc ?? request.url)
     return fetchHtml(frameUrl)
@@ -44,6 +45,7 @@ return new Response(stream, {
 
 - **`frameSrc`** - Seeds SSR frame state for the current render. When provided, server-rendered components can read `handle.frame.src` and `handle.frames.top.src` during SSR.
 - **`topFrameSrc`** - Overrides the root frame URL used for `handle.frames.top.src`. This is mainly useful when calling `renderToStream()` from inside `resolveFrame()` for a nested frame render.
+- **`signal`** - Cancels pending server rendering work. Pass `request.signal` so client disconnects can stop unresolved frame work without invoking `onError` for the disconnect itself.
 - **`resolveFrame(src, target, context)`** - Called when a `<Frame>` needs its content. Return a string of HTML, a `ReadableStream<Uint8Array>`, or a promise of either. `context.currentFrameSrc` is the URL for the frame that contains the `<Frame>`, and `context.topFrameSrc` is the outer document URL. Required if your component tree contains `<Frame>` elements.
 - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error.
 
@@ -80,7 +82,7 @@ function ProductPage() {
 
 ## CSS
 
-Components using the `css` prop have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
+Components using the `css(...)` mixin through `mix` have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
 
 ## See Also
 

package/src/server/stream.ts

@@ -7,6 +7,7 @@ import {
   SELF_CLOSING_TAGS,
   normalizeAttributeName,
   serializeStyleObject,
+  shouldStringifyBooleanAttribute,
 } from '../runtime/core/attributes.ts'
 import { appendFlushMarker, type FlushKind, stripFlushMarkers } from '../runtime/stream-protocol.ts'
 import { REMIX_UI_STYLE_LAYER } from '../style/layers.ts'
@@ -31,6 +32,8 @@ export interface RenderToStreamOptions {
   frameSrc?: string | URL
   /** Source URL for the top-level frame in nested frame renders. */
   topFrameSrc?: string | URL
+  /** Signal that cancels pending server rendering work. */
+  signal?: AbortSignal
   /** Error hook invoked when rendering work throws. */
   onError?: (error: unknown) => void
   /** Callback used to resolve nested frame content during streaming SSR. */
@@ -97,6 +100,7 @@ interface RenderContext {
   unresolvedHydrationData: Map<string, UnresolvedHydrationData>
   frameData: Map<string, FrameData>
   blockingFrameTails: ReadableStream<Uint8Array>[]
+  signal: AbortSignal
   flushKind: FlushKind
   serverIdScope: string
   serverIdCounter: number
@@ -192,6 +196,7 @@ export function renderToStream(
   let currentFrameSrc = normalizeFrameSrc(options?.frameSrc ?? options?.topFrameSrc)
   let topFrameSrc = normalizeFrameSrc(options?.topFrameSrc ?? currentFrameSrc)
   let rootFrameState = createSsrFrameState(currentFrameSrc, topFrameSrc)
+  let renderAbortController = new AbortController()
 
   let context: RenderContext = {
     insideSvg: false,
@@ -204,21 +209,38 @@ export function renderToStream(
     unresolvedHydrationData: new Map(),
     frameData: new Map(),
     blockingFrameTails: [],
+    signal: renderAbortController.signal,
     flushKind: 'fragment',
     serverIdScope: crypto.randomUUID().slice(0, 8),
     serverIdCounter: 0,
   }
 
+  function cancel(reason: unknown): void {
+    if (!renderAbortController.signal.aborted) {
+      renderAbortController.abort(reason)
+    }
+  }
+
+  let signal = options?.signal
+  if (signal?.aborted) {
+    cancel(signal.reason)
+  } else {
+    signal?.addEventListener('abort', () => cancel(signal.reason), { once: true })
+  }
+
   return new ReadableStream({
     async start(controller) {
       try {
         let root = buildSegment(node, context, rootFrameState)
         await resolveBlocking(root)
+        if (closeIfCancelled(controller, context)) return
         await resolveClientEntries(context, options?.resolveClientEntry)
+        if (closeIfCancelled(controller, context)) return
         validateClientEntriesForHydration(context)
         let html = serializeSegment(root)
         let finalHtml = finalizeHtml(html, context)
         let bytes = encoder.encode(appendFlushMarker(finalHtml, context.flushKind))
+        if (closeIfCancelled(controller, context)) return
         controller.enqueue(bytes)
 
         // If we have any tails from blocking frame streams, stream them now.
@@ -226,7 +248,7 @@ export function renderToStream(
         // that must come after the initial document chunk.
         let tailPromise =
           context.blockingFrameTails.length > 0
-            ? streamByteStreams(context.blockingFrameTails, controller, context.onError)
+            ? streamByteStreams(context.blockingFrameTails, controller, context)
             : Promise.resolve()
 
         // If we have pending non-blocking frames, stream them as they resolve
@@ -237,15 +259,44 @@ export function renderToStream(
 
         await Promise.all([tailPromise, pendingPromise])
 
+        if (closeIfCancelled(controller, context)) return
         controller.close()
       } catch (error) {
+        if (isSignalAbortError(context.signal, error)) {
+          closeStream(controller)
+          return
+        }
         onError(error)
         controller.error(error)
       }
     },
+    cancel(reason) {
+      cancel(reason)
+    },
   })
 }
 
+function isSignalAbortError(signal: AbortSignal, error: unknown): boolean {
+  return signal.aborted && error === signal.reason
+}
+
+function closeIfCancelled(
+  controller: ReadableStreamDefaultController,
+  context: RenderContext,
+): boolean {
+  if (!context.signal.aborted) return false
+  closeStream(controller)
+  return true
+}
+
+function closeStream(controller: ReadableStreamDefaultController): void {
+  try {
+    controller.close()
+  } catch {
+    // The consumer may already have cancelled the stream.
+  }
+}
+
 function defaultResolveFrame(): never {
   throw new Error('No resolveFrame provided')
 }
@@ -428,6 +479,9 @@ function buildFrameSegment(props: any, context: RenderContext, frameState: SsrFr
     let framePromise = Promise.resolve(
       context.resolveFrame(props.src, props.name, resolveFrameContext),
     ).then(async (resolved) => resolveFrameHtml(resolved))
+    // The response stream can be cancelled before pending frames are drained.
+    // Keep the promise observed so request aborts don't become unhandled.
+    framePromise.catch(() => {})
     context.pendingFrames.push({ frameId, promise: framePromise })
   } else {
     seg.pending = Promise.resolve(
@@ -529,11 +583,15 @@ function renderAttributes(props: any, isSvg: boolean, excludedProps?: Set<string
     if (excludedProps?.has(key)) continue
 
     let value = props[key]
-    if (value === undefined || value === null || value === false) continue
-
     let attrName = transformAttributeName(key, isSvg)
+    let shouldStringifyBoolean = shouldStringifyBooleanAttribute(attrName)
+    if (value === undefined || value === null || (value === false && !shouldStringifyBoolean)) {
+      continue
+    }
 
-    if (value === true) {
+    if (typeof value === 'boolean' && shouldStringifyBoolean) {
+      attrs += ` ${attrName}="${escapeHtml(String(value))}"`
+    } else if (value === true) {
       attrs += ` ${attrName}`
     } else {
       attrs += ` ${attrName}="${escapeHtml(String(value))}"`
@@ -1248,26 +1306,33 @@ async function streamPendingFrames(
   let processedFrames = new Set<string>()
 
   while (true) {
+    if (context.signal.aborted) break
+
     let batch = context.pendingFrames.filter(({ frameId }) => !processedFrames.has(frameId))
     if (batch.length === 0) break
 
     await Promise.all(
       batch.map(async ({ frameId, promise }) => {
+        if (context.signal.aborted) return
         processedFrames.add(frameId)
         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>`
+          if (context.signal.aborted) return
           controller.enqueue(encoder.encode(templateHtml))
 
           // Forward any additional chunks from a stream-valued resolveFrame result.
           if (tail) {
-            await streamByteStreams([tail], controller, context.onError)
+            await streamByteStreams([tail], controller, context)
           }
         } catch (error) {
-          context.onError(error)
+          if (!isSignalAbortError(context.signal, error)) {
+            context.onError(error)
+          }
         }
       }),
     )
@@ -1277,19 +1342,23 @@ async function streamPendingFrames(
 async function streamByteStreams(
   streams: ReadableStream<Uint8Array>[],
   controller: ReadableStreamDefaultController,
-  onError: (error: unknown) => void,
+  context: RenderContext,
 ): Promise<void> {
   await Promise.all(
     streams.map(async (stream) => {
       let reader = stream.getReader()
       try {
         while (true) {
+          if (context.signal.aborted) break
           let { done, value } = await reader.read()
           if (done) break
+          if (context.signal.aborted) break
           controller.enqueue(value)
         }
       } catch (error) {
-        onError(error)
+        if (!isSignalAbortError(context.signal, error)) {
+          context.onError(error)
+        }
       } finally {
         reader.releaseLock()
       }

package/src/style/css-mixin.ts

@@ -1,4 +1,5 @@
 import { createMixin, renderMixinElement } from '../runtime/mixins/mixin.ts'
+import type { MixinFactory } from '../runtime/mixins/mixin.ts'
 import type { MixinDescriptor } from '../runtime/mixins/mixin.ts'
 import type { ElementProps } from '../runtime/jsx.ts'
 import { invariant } from '../runtime/invariant.ts'
@@ -20,7 +21,11 @@ const clientStyleCache: StyleCache = new Map()
 /**
  * Applies generated class names for CSS object styles.
  */
-export const css = createMixin<Element, [styles: CSSProps], ElementProps>((handle) => {
+export const css: MixinFactory<Element, [styles: CSSProps], ElementProps> = createMixin<
+  Element,
+  [styles: CSSProps],
+  ElementProps
+>((handle) => {
   let activeSelector = ''
   let activeGeneration = -1
   let currentStyles: CSSProps = {}

package/src/style/index.ts

@@ -6,5 +6,4 @@ export type {
 } from './style.ts'
 export { processStyleClass, normalizeCssValue } from './style.ts'
 export { createStyleManager }
-
-export type StyleManager = ReturnType<typeof createStyleManager>
+export type { ServerStyleSource, StyleManager } from './stylesheet.ts'

package/src/style/stylesheet.ts

@@ -1,7 +1,19 @@
 import { REMIX_UI_STYLE_LAYER } from './layers.ts'
 
 type RuleEntry = { count: number; index: number }
-type ServerStyleSource = ParentNode | Iterable<Node>
+export type ServerStyleSource = ParentNode | Iterable<Node>
+
+export interface StyleManager {
+  insert(className: string, rule: string): void
+  remove(className: string): void
+  has(className: string): boolean
+  getGeneration(): number
+  reset(): void
+  adoptServerStyles(source: ServerStyleSource): Set<string>
+  replaceServerStyles(source: ServerStyleSource): void
+  selectors(): IterableIterator<string>
+  dispose(): void
+}
 
 const SERVER_STYLE_SELECTOR = 'style[data-rmx]'
 
@@ -68,7 +80,7 @@ function getStyleSelector(styleEl: HTMLStyleElement): string | null {
   return selector ? selector : null
 }
 
-export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER) {
+export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleManager {
   let stylesheet: CSSStyleSheet | null = null
   let generation = 0
 

package/src/theme/contract.ts

@@ -4,7 +4,38 @@ export interface ThemeVariableTree {
   [key: string]: string | ThemeVariableTree
 }
 
-const themeVariableNames = {
+type ThemeVariableGroup<key extends string> = Readonly<Record<key, string>>
+type ThemeActionVariableGroup = ThemeVariableGroup<
+  'background' | 'backgroundHover' | 'backgroundActive' | 'foreground' | 'border'
+>
+
+type ThemeVariableNames = {
+  readonly space: ThemeVariableGroup<'none' | 'px' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
+  readonly radius: ThemeVariableGroup<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>
+  readonly fontFamily: ThemeVariableGroup<'sans' | 'mono'>
+  readonly fontSize: ThemeVariableGroup<'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
+  readonly lineHeight: ThemeVariableGroup<'tight' | 'normal' | 'relaxed'>
+  readonly letterSpacing: ThemeVariableGroup<'tight' | 'normal' | 'meta' | 'wide'>
+  readonly fontWeight: ThemeVariableGroup<'normal' | 'medium' | 'semibold' | 'bold'>
+  readonly control: {
+    readonly height: ThemeVariableGroup<'sm' | 'md' | 'lg'>
+  }
+  readonly surface: ThemeVariableGroup<'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4'>
+  readonly shadow: ThemeVariableGroup<'xs' | 'sm' | 'md' | 'lg' | 'xl'>
+  readonly colors: {
+    readonly text: ThemeVariableGroup<'primary' | 'secondary' | 'muted' | 'link'>
+    readonly border: ThemeVariableGroup<'subtle' | 'default' | 'strong'>
+    readonly focus: ThemeVariableGroup<'ring'>
+    readonly overlay: ThemeVariableGroup<'scrim'>
+    readonly action: {
+      readonly primary: ThemeActionVariableGroup
+      readonly secondary: ThemeActionVariableGroup
+      readonly danger: ThemeActionVariableGroup
+    }
+  }
+}
+
+const themeVariableNamesSource: ThemeVariableNames = {
   space: {
     none: '--rmx-space-none',
     px: '--rmx-space-px',
@@ -117,7 +148,9 @@ const themeVariableNames = {
       },
     },
   },
-} as const satisfies ThemeVariableTree
+} satisfies ThemeVariableTree
+
+export const themeVariableNames: ThemeVariableNames = themeVariableNamesSource
 
 type MapLeaves<source, leaf> = source extends string
   ? leaf
@@ -126,6 +159,7 @@ type MapLeaves<source, leaf> = source extends string
     }
 
 export type ThemeValue = string | number
+export type ThemeContract = MapLeaves<ThemeVariableNames, string>
 export type ThemeValues = MapLeaves<typeof themeVariableNames, ThemeValue>
 export type ThemeVars = Readonly<Record<string, string>>
 export type CreateThemeOptions = {
@@ -146,7 +180,7 @@ export type ThemeComponent = ThemeRenderer & {
   vars: ThemeVars
 }
 
-export const theme = createThemeContract(themeVariableNames)
+export const theme: ThemeContract = createThemeContract(themeVariableNames)
 
 export type ThemeUtility = ReturnType<typeof css>
 
@@ -158,8 +192,6 @@ type NestedThemeMix<value, depth extends number = 4> = depth extends 0
 
 export type ThemeMix = NestedThemeMix<ThemeMixLeaf>
 
-export { themeVariableNames }
-
 function createThemeContract<tree extends ThemeVariableTree>(tree: tree): MapLeaves<tree, string> {
   return mapTreeLeaves(tree, (variableName) => `var(${variableName})`) as MapLeaves<tree, string>
 }

package/src/theme/glyph-contract.ts

@@ -32,7 +32,9 @@ export type GlyphContract = Readonly<Record<GlyphName, { id: string }>>
 
 const DEFAULT_GLYPH_ID_PREFIX = 'rmx-glyph'
 
-export const glyphContract = Object.freeze(createGlyphContract(DEFAULT_GLYPH_ID_PREFIX))
+export const glyphContract: GlyphContract = Object.freeze(
+  createGlyphContract(DEFAULT_GLYPH_ID_PREFIX),
+)
 
 function createGlyphIds(idPrefix: string): Record<GlyphName, string> {
   return Object.fromEntries(glyphNames.map((name) => [name, `${idPrefix}-${name}`])) as Record<

package/src/theme/presets/rmx-01/index.ts

@@ -1,9 +1,11 @@
 import { createGlyphSheet } from '../../../components/glyph/glyph.tsx'
 import { createTheme } from '../../runtime.ts'
+import type { GlyphSheetComponent } from '../../../components/glyph/glyph.tsx'
+import type { ThemeComponent } from '../../contract.ts'
 
 import { glyphValues } from './glyphs.tsx'
 
-export const RMX_01 = createTheme({
+export const RMX_01: ThemeComponent = createTheme({
   space: {
     none: '0px',
     px: '1px',
@@ -118,4 +120,4 @@ export const RMX_01 = createTheme({
   },
 })
 
-export const RMX_01_GLYPHS = createGlyphSheet(glyphValues)
+export const RMX_01_GLYPHS: GlyphSheetComponent = createGlyphSheet(glyphValues)