@remix-run/ui 0.3.0 → 0.5.0

package/dist/runtime/vnode.js

@@ -1,40 +1,45 @@
-import { Fragment, Frame } from "./component.js";
-import { isRemixElement } from "./core/vnode.js";
+import { isRemixElement } from './core/vnode.js';
 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 function isFragmentNode(node) {
-    return node.type === Fragment;
+    return node.kind === 'fragment';
 }
 export function isTextNode(node) {
-    return node.type === TEXT_NODE;
+    return node.kind === 'text';
 }
 export function isNonRenderNode(node) {
-    return node.type === NON_RENDER_NODE;
+    return node.kind === 'empty';
 }
 export function isCommittedTextNode(node) {
-    return isTextNode(node) && node._dom instanceof Text;
+    return node.kind === 'text';
 }
 export function isHostNode(node) {
-    return typeof node.type === 'string';
+    return node.kind === 'host';
 }
 export function isCommittedHostNode(node) {
-    return isHostNode(node) && node._dom instanceof Element;
+    return node.kind === 'host';
 }
 export function isComponentNode(node) {
-    return typeof node.type === 'function' && node.type !== Frame;
+    return node.kind === 'component';
 }
 export function isCommittedComponentNode(node) {
-    return isComponentNode(node) && node._content !== undefined;
+    return node.kind === 'component' && '_content' in node;
+}
+export function isFrameNode(node) {
+    return node.kind === 'frame';
+}
+export function isCommittedFrameNode(node) {
+    return node.kind === 'frame';
 }
 export function findContextFromAncestry(node, type) {
     let current = 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/dist/runtime/vnode.js.map

@@ -1 +1 @@
-{"version":3,"file":"vnode.js","sourceRoot":"","sources":["../../src/runtime/vnode.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,OAAO,EAAE,cAAc,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;AAC5C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;AACxD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;AA6F9C,MAAM,UAAU,cAAc,CAAC,IAAW;IACxC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAA;AAC/B,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAW;IACpC,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAA;AAChC,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAW;IACzC,OAAO,IAAI,CAAC,IAAI,KAAK,eAAe,CAAA;AACtC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAW;IAC7C,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,YAAY,IAAI,CAAA;AACtD,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAW;IACpC,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAA;AACtC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAW;IAC7C,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,YAAY,OAAO,CAAA;AACzD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAW;IACzC,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,CAAA;AAC/D,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,IAAW;IAClD,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAA;AAC7D,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,IAAW,EAAE,IAAe;IAClE,IAAI,OAAO,GAAsB,IAAI,CAAA;IACrC,OAAO,OAAO,EAAE,CAAC;QACf,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,IAAI,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;YACtD,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,CAAA;QAC1C,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;IAC3B,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC"}
+{"version":3,"file":"vnode.js","sourceRoot":"","sources":["../../src/runtime/vnode.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAUhD,OAAO,EAAE,cAAc,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;AAC5C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;AACxD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;AAqL9C,MAAM,UAAU,cAAc,CAAC,IAAW;IACxC,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,CAAA;AACjC,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAW;IACpC,OAAO,IAAI,CAAC,IAAI,KAAK,MAAM,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAW;IACzC,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAA;AAC9B,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAoB;IACtD,OAAO,IAAI,CAAC,IAAI,KAAK,MAAM,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAW;IACpC,OAAO,IAAI,CAAC,IAAI,KAAK,MAAM,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAoB;IACtD,OAAO,IAAI,CAAC,IAAI,KAAK,MAAM,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,IAAW;IAEX,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,CAAA;AAClC,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,IAAW;IAClD,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,UAAU,IAAI,IAAI,CAAA;AACxD,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAW;IACrC,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAA;AAC9B,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,IAAoB;IACvD,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAA;AAC9B,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,IAAiB,EAAE,IAAqB;IAC9E,IAAI,OAAO,GAA4B,IAAI,CAAA;IAC3C,OAAO,OAAO,EAAE,CAAC;QACf,IAAI,OAAO,CAAC,IAAI,KAAK,WAAW,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YAC1D,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,CAAA;QAC1C,CAAC;QACD,OAAO,GAAG,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC"}

package/dist/select/index.d.ts

@@ -0,0 +1,19 @@
+import type { CSSMixinDescriptor, Handle, Props, RemixNode } from '@remix-run/ui';
+import type { SearchValue } from '../shared/typeahead.ts';
+export interface SelectProps extends Omit<Props<'button'>, 'children' | 'name'> {
+    children?: RemixNode;
+    defaultLabel: string;
+    defaultValue?: string | null;
+    disabled?: boolean;
+    name?: string;
+}
+export type SelectOptionProps = Props<'div'> & {
+    children?: RemixNode;
+    disabled?: boolean;
+    label: string;
+    textValue?: SearchValue;
+    value: string;
+};
+export declare const triggerStyle: CSSMixinDescriptor;
+export declare function Select(handle: Handle<SelectProps>): () => RemixNode;
+export declare function Option(handle: Handle<SelectOptionProps>): () => RemixNode;

package/dist/select/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { createElement, css } from '@remix-run/ui';
+import * as popover from '@remix-run/ui/popover';
+import * as select from '@remix-run/ui/select/primitives';
+import { CheckIcon, ChevronVerticalIcon } from '../shared/icons.js';
+import { listboxIndicatorStyle, listboxLabelStyle, listboxListStyle, listboxOptionStyle, popoverSurfaceStyle, } from '../shared/listbox-popover-styles.js';
+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 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 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 = css({
+    appearance: 'none',
+    margin: 0,
+    boxSizing: 'border-box',
+    width: '100%',
+    minWidth: 0,
+    height: '32px',
+    paddingBlock: '6px',
+    paddingInlineStart: '12px',
+    paddingInlineEnd: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: '6px',
+    border: 0,
+    borderRadius: '8px',
+    background: 'light-dark(#FFFFFF, #1a1a1a)',
+    boxShadow: selectTriggerShadow,
+    color: 'light-dark(#101010, #ececec)',
+    fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    fontSize: '13px',
+    lineHeight: '20px',
+    fontFeatureSettings: '"ss01" on, "cv01" on',
+    letterSpacing: 0,
+    textAlign: 'left',
+    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: 'light-dark(#FFFFFF, #1a1a1a)',
+        color: 'light-dark(#101010, #ececec)',
+    },
+    '&:active': {
+        background: 'light-dark(#FFFFFF, #1a1a1a)',
+    },
+    '&:focus-visible': {
+        outline: 0,
+        boxShadow: selectTriggerFocusShadow,
+    },
+    '&[aria-expanded="true"]': {
+        boxShadow: selectTriggerFocusShadow,
+    },
+    '&:disabled': {
+        opacity: 0.55,
+    },
+});
+const triggerLabelCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flex: '1 1 auto',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+});
+const triggerIconCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '16px',
+    height: '16px',
+    color: 'light-dark(#707070, #b3b3b3)',
+    flex: 'none',
+    '& > svg': {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+    },
+});
+export const triggerStyle = selectTriggerCss;
+function SelectLabel(handle) {
+    let context = handle.context.get(select.Context);
+    return () => _jsx("span", { mix: triggerLabelCss, children: context.displayedLabel });
+}
+export function Select(handle) {
+    return () => {
+        let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props;
+        return (_jsxs(select.Context, { defaultLabel: defaultLabel, defaultValue: defaultValue, disabled: disabled, name: name, children: [_jsxs("button", { type: "button", ...buttonProps, mix: [triggerStyle, select.trigger(), mix], children: [_jsx(SelectLabel, {}), _jsx(ChevronVerticalIcon, { mix: triggerIconCss })] }), _jsx(popover.Context, { children: _jsx("div", { mix: [popoverSurfaceStyle, select.popover()], children: _jsx("div", { mix: [listboxListStyle, select.list()], children: children }) }) }), name && _jsx("input", { mix: select.hiddenInput() })] }));
+    };
+}
+export function Option(handle) {
+    return () => {
+        let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props;
+        return (_jsxs("div", { ...divProps, mix: [listboxOptionStyle, select.option({ value, label, disabled, textValue }), mix], children: [_jsx(CheckIcon, { mix: listboxIndicatorStyle }), _jsx("span", { mix: listboxLabelStyle, children: children ?? label })] }));
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/select/index.tsx"],"names":[],"mappings":"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"}

package/dist/select/keydown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keydown.js","sourceRoot":"","sources":["../../src/select/keydown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAIlC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CACrB,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;IACtB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;QACtB,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,OAAO,CAAC,KAAK,CAAC,CAAA;IAChB,CAAC;AACH,CAAC,CAAC,CACL,CAAA"}

package/dist/{components/select/select.d.ts → select/primitives.d.ts}

@@ -1,7 +1,7 @@
-import { on, type CSSMixinDescriptor, type Dispatched, type ElementProps, type Handle, type MixinFactory, type Props, type RemixNode } from '@remix-run/ui';
-import * as listbox from '../listbox/listbox.ts';
-import * as popover from '../popover/popover.ts';
-declare const SELECT_CHANGE_EVENT: "rmx:select-change";
+import { on, type Dispatched, type ElementProps, type Handle, type MixinFactory, type Props, type RemixNode } from '@remix-run/ui';
+import * as listbox from '../listbox/index.ts';
+import * as popover from '../popover/index.ts';
+declare const SELECT_CHANGE_EVENT: 'rmx:select-change';
 type SelectChangeHandler<target extends HTMLElement> = (event: Dispatched<SelectChangeEvent, target>, signal: AbortSignal) => void | Promise<void>;
 declare global {
     interface HTMLElementEventMap {
@@ -23,6 +23,7 @@ export interface SelectContextProps {
     defaultLabel: string;
     defaultValue?: string | null;
     disabled?: boolean;
+    labelSwapDelayMs?: number;
     name?: string;
 }
 export interface SelectProps extends Omit<Props<'button'>, 'children' | 'name'> {
@@ -55,7 +56,6 @@ interface SelectContextValue {
 }
 declare function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>): () => RemixNode;
 declare const popoverMixin: MixinFactory<HTMLElement, [], ElementProps>;
-export declare const triggerStyle: CSSMixinDescriptor;
 export declare const Context: typeof SelectProvider;
 export declare const hiddenInput: MixinFactory<HTMLInputElement, [], ElementProps>;
 export declare const list: MixinFactory<HTMLElement, [], ElementProps>;
@@ -63,5 +63,3 @@ export declare const option: MixinFactory<HTMLElement, [option: Omit<listbox.Lis
 export { popoverMixin as popover };
 export declare const trigger: MixinFactory<HTMLButtonElement, [], ElementProps>;
 export declare function onSelectChange<target extends HTMLElement>(handler: SelectChangeHandler<target>, captureBoolean?: boolean): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>>;
-export declare function Select(handle: Handle<SelectProps>): () => RemixNode;
-export declare function Option(handle: Handle<SelectOptionProps>): () => RemixNode;

package/dist/{components/select/select.js → select/primitives.js}

@@ -1,16 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
-import { attrs, createElement, createMixin, css, on, ref, } from '@remix-run/ui';
-import * as button from "../button/button.js";
-import { Glyph } from "../glyph/glyph.js";
-import * as listbox from "../listbox/listbox.js";
-import * as popover from "../popover/popover.js";
-import { theme } from "../../theme/theme.js";
-import { hiddenTypeahead } from "../../interactions/typeahead/typeahead-mixin.js";
-import { onKeyDown } from "../../interactions/keydown/keydown.js";
-import { waitForCssTransition } from "../../utils/wait-for-css-transition.js";
-import { wait } from "../../utils/wait.js";
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { attrs, createMixin, on, ref, } from '@remix-run/ui';
+import * as listbox from '../listbox/index.js';
+import * as popover from '../popover/index.js';
+import { hiddenTypeahead } from '../shared/typeahead.js';
+import { waitForCssTransition } from '../shared/wait-for-css-transition.js';
+import { wait } from '../shared/wait.js';
+import { onKeyDown } from './keydown.js';
 const SELECT_CHANGE_EVENT = 'rmx:select-change';
-const LABEL_SWAP_DELAY_MS = 75;
+const DEFAULT_LABEL_SWAP_DELAY_MS = 75;
 export class SelectChangeEvent extends Event {
     label;
     optionId;
@@ -125,7 +122,7 @@ function SelectProvider(handle) {
             return;
         }
         await Promise.all([handle.update(), waitForCssTransition(surfaceRef, handle.signal)]);
-        await wait(LABEL_SWAP_DELAY_MS); // UX delay label swap for clear value change
+        await wait(handle.props.labelSwapDelayMs ?? DEFAULT_LABEL_SWAP_DELAY_MS);
         if (handle.signal.aborted)
             return;
         displayedLabel = selectedLabel;
@@ -319,39 +316,6 @@ const hiddenInputMixin = createMixin((handle) => {
         value: context.value ?? '',
     });
 });
-const selectTriggerCss = css({
-    minHeight: theme.control.height.sm,
-    width: '100%',
-    paddingInline: theme.space.md,
-    paddingInlineEnd: theme.space.sm,
-    display: 'grid',
-    gridTemplateColumns: 'minmax(0, 1fr) auto',
-    alignItems: 'center',
-    gap: theme.space.sm,
-    borderRadius: theme.radius.md,
-    backgroundImage: 'none',
-    border: '0.5px solid transparent',
-    boxShadow: 'none',
-    fontSize: theme.fontSize.xs,
-    textAlign: 'left',
-    backgroundColor: theme.surface.lvl3,
-    color: theme.colors.text.secondary,
-    '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible': {
-        backgroundColor: theme.surface.lvl4,
-        color: theme.colors.text.primary,
-    },
-    '&:active': {
-        backgroundColor: theme.surface.lvl3,
-    },
-    '&:focus-visible': {
-        outline: `2px solid ${theme.colors.focus.ring}`,
-        outlineOffset: '2px',
-    },
-    '&:disabled': {
-        opacity: 0.6,
-    },
-});
-export const triggerStyle = selectTriggerCss;
 export const Context = SelectProvider;
 export const hiddenInput = hiddenInputMixin;
 export const list = listMixin;
@@ -369,20 +333,4 @@ const select = {
 export function onSelectChange(handler, captureBoolean) {
     return on(SELECT_CHANGE_EVENT, handler, captureBoolean);
 }
-function SelectLabel(handle) {
-    let context = getSelectContext(handle);
-    return () => _jsx("span", { mix: button.labelStyle, children: context.displayedLabel });
-}
-export function Select(handle) {
-    return () => {
-        let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props;
-        return (_jsxs(select.Context, { defaultLabel: defaultLabel, defaultValue: defaultValue, disabled: disabled, name: name, children: [_jsxs("button", { ...buttonProps, mix: [button.baseStyle, triggerStyle, select.trigger(), mix], children: [_jsx(SelectLabel, {}), _jsx(Glyph, { mix: button.iconStyle, name: "chevronVertical" })] }), _jsx(popover.Context, { children: _jsx("div", { mix: [popover.surfaceStyle, select.popover()], children: _jsx("div", { mix: [popover.contentStyle, listbox.listStyle, select.list()], children: children }) }) }), name && _jsx("input", { mix: select.hiddenInput() })] }));
-    };
-}
-export function Option(handle) {
-    return () => {
-        let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props;
-        return (_jsxs("div", { ...divProps, mix: [listbox.optionStyle, select.option({ value, label, disabled, textValue }), mix], children: [_jsx(Glyph, { mix: listbox.glyphStyle, name: "check" }), _jsx("span", { mix: listbox.labelStyle, children: children ?? handle.props.label })] }));
-    };
-}
-//# sourceMappingURL=select.js.map
+//# sourceMappingURL=primitives.js.map

package/dist/select/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../src/select/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/server/stream.js

@@ -1,8 +1,8 @@
-import { Fragment, createComponent, createFrameHandle, Frame } from "../runtime/component.js";
-import { isEntry } from "../runtime/client-entries.js";
-import { FRAMEWORK_PROPS as RUNTIME_FRAMEWORK_PROPS, SELF_CLOSING_TAGS, normalizeAttributeName, serializeStyleObject, shouldStringifyBooleanAttribute, } from "../runtime/core/attributes.js";
-import { appendFlushMarker, stripFlushMarkers } from "../runtime/stream-protocol.js";
-import { REMIX_UI_STYLE_LAYER } from "../style/layers.js";
+import { Fragment, createComponent, createFrameHandle, Frame } from '../runtime/component.js';
+import { isEntry } from '../runtime/client-entries.js';
+import { FRAMEWORK_PROPS as RUNTIME_FRAMEWORK_PROPS, SELF_CLOSING_TAGS, normalizeAttributeName, serializeStyleObject, shouldStringifyBooleanAttribute, } from '../runtime/core/attributes.js';
+import { appendFlushMarker, stripFlushMarkers } from '../runtime/stream-protocol.js';
+import { REMIX_UI_STYLE_LAYER } from '../style/layers.js';
 export function createVNode(type, props, key) {
     return { type, props, key };
 }
@@ -63,7 +63,6 @@ export function renderToStream(node, options) {
         onError,
         resolveFrame: options?.resolveFrame ?? defaultResolveFrame,
         styleCache: new Map(),
-        emittedStyles: new Set(),
         pendingFrames: [],
         hydrationData: new Map(),
         unresolvedHydrationData: new Map(),
@@ -263,7 +262,7 @@ function buildSegment(node, context, frameState) {
             }
             return buildElementSegment(tag, props, context, frameState);
         }
-        if (typeof type === 'function') {
+        if (isElementFunction(type)) {
             if (type === Frame) {
                 return buildFrameSegment(node, context, frameState);
             }
@@ -569,6 +568,9 @@ function isSsrMixinElement(value) {
         return false;
     return '__rmxMixinElementType' in value;
 }
+function isElementFunction(value) {
+    return typeof value === 'function';
+}
 function isSsrMixinDescriptor(value) {
     if (!value || typeof value !== 'object' || isRemixElement(value)) {
         return false;
@@ -648,7 +650,7 @@ function createHydrationPropsReplacer(context, frameState) {
             return { $rmx: true, type, props: transformProps(props) };
         }
         // 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;
@@ -755,13 +757,13 @@ async function resolveClientEntries(context, resolveClientEntry) {
     let resolvedEntries = new Map();
     for (let [hydrationId, unresolvedHydrationData] of context.unresolvedHydrationData) {
         let { entryId, component, props } = unresolvedHydrationData;
-        let resolvedEntry = resolvedEntries.get(entryId);
+        let resolvedEntry = resolvedEntries.get(component);
         if (!resolvedEntry) {
             resolvedEntry = resolveClientEntry
                 ? await Promise.resolve(resolveClientEntry(entryId, component))
                 : resolveDefaultClientEntry(entryId, component);
             validateResolvedClientEntry(entryId, resolvedEntry);
-            resolvedEntries.set(entryId, resolvedEntry);
+            resolvedEntries.set(component, resolvedEntry);
         }
         context.hydrationData.set(hydrationId, {
             exportName: resolvedEntry.exportName,
@@ -862,7 +864,6 @@ function finalizeHtml(html, context) {
             html = `<head>${headContent}</head>${html}`;
         }
     }
-    html = dedupeServerStyleTagsInHtml(html, context.emittedStyles);
     // Append aggregated hydration/frame data script at the end
     let rmxData = buildRmxDataScript(context);
     if (rmxData) {
@@ -923,24 +924,11 @@ function renderStyleTag(selector, css, layer = REMIX_UI_STYLE_LAYER) {
     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, name) {
-    let match = attrs.match(new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)')`));
-    if (!match)
-        return null;
-    return match[1] ?? match[2] ?? null;
-}
-function dedupeServerStyleTagsInHtml(html, seenStyles) {
-    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) {
+    // A literal "</style" closes an HTML style element even when it appears inside a CSS string.
+    return css.replace(/</g, '\\3C ');
 }
 function buildRmxDataScript(context) {
     if (context.hydrationData.size === 0 && context.frameData.size === 0) {
@@ -964,6 +952,12 @@ function escapeScriptJson(json) {
 // 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, controller, encoder) {
     let processedFrames = new Set();
     while (true) {
@@ -980,7 +974,6 @@ async function streamPendingFrames(context, controller, encoder) {
                 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)