react-native-enriched-html 0.0.0 → 1.0.1

package/src/web/pmPlugins/StrictMarksPlugin.ts

@@ -0,0 +1,134 @@
+import { Extension } from '@tiptap/core';
+import { Mark, type ResolvedPos, type Schema } from '@tiptap/pm/model';
+import { Plugin, PluginKey, type EditorState } from '@tiptap/pm/state';
+
+const NONINCLUSIVE_MARKS = ['link', 'mention'] as const;
+
+function stripNonInclusiveMarksFromSet(
+  schema: Schema,
+  marks: readonly Mark[]
+): readonly Mark[] {
+  let out = marks.slice();
+  for (const name of NONINCLUSIVE_MARKS) {
+    const markType = schema.marks[name];
+    if (!markType?.isInSet(out)) continue;
+    out = out.filter((m) => m.type !== markType);
+  }
+  return out;
+}
+
+function stripNonInclusiveMarksIfAfterIsOut(
+  schema: Schema,
+  $from: ResolvedPos
+): readonly Mark[] {
+  const nodeBefore = $from.nodeBefore;
+  if (!nodeBefore) {
+    return [];
+  }
+  let out = nodeBefore.marks;
+  for (const name of NONINCLUSIVE_MARKS) {
+    const markType = schema.marks[name];
+    if (!markType?.isInSet(out)) continue;
+    const afterHasMark =
+      $from.nodeAfter != null && markType.isInSet($from.nodeAfter.marks);
+    if (!afterHasMark) {
+      out = out.filter((m) => m.type !== markType);
+    }
+  }
+  return out;
+}
+
+function resolveStrictMarks(
+  $from: ResolvedPos,
+  oldState: EditorState,
+  newState: EditorState,
+  docChanged: boolean,
+  textLengthChanged: boolean
+): readonly Mark[] {
+  // Editor completely empty
+  if (newState.doc.textContent.length === 0) {
+    return textLengthChanged
+      ? []
+      : (oldState.storedMarks ?? newState.storedMarks ?? []);
+  }
+
+  // Character to the left: strictly inherit from it
+  if ($from.nodeBefore) {
+    // Non-inclusive marks: do not carry onto text typed after the last marked
+    // character (e.g. space exits link/mention, matching native).
+    return stripNonInclusiveMarksIfAfterIsOut(newState.schema, $from);
+  }
+
+  // Start of line with text to the right
+  if ($from.nodeAfter) {
+    if (!docChanged) {
+      return []; // Pure cursor movement: kill RTL mark bleeding
+    }
+    const old$ = oldState.selection.$from;
+    const { nodeBefore: oldBefore, nodeAfter: oldAfter } = old$;
+    // Styled|plain boundary after Enter/paste/etc.: inherit the left inline's marks so
+    // bold, code, and other marks behave the same on a new paragraph.
+    if (
+      oldBefore &&
+      oldAfter &&
+      !Mark.sameSet(oldBefore.marks, oldAfter.marks)
+    ) {
+      return stripNonInclusiveMarksFromSet(newState.schema, oldBefore.marks);
+    }
+    return stripNonInclusiveMarksFromSet(
+      newState.schema,
+      $from.nodeAfter.marks
+    );
+  }
+
+  // Completely empty line
+  if (textLengthChanged) {
+    const prevEndPos = $from.before() - 1;
+    return prevEndPos > 0 ? newState.doc.resolve(prevEndPos).marks() : [];
+  }
+  if (oldState.storedMarks) {
+    return oldState.storedMarks; // Structural nav (Enter/Backspace): keep explicit marks
+  }
+  return newState.storedMarks ?? $from.marks();
+}
+
+export const StrictMarksPlugin = Extension.create({
+  name: 'strictMarksPlugin',
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('strictMarks'),
+        appendTransaction(transactions, oldState, newState) {
+          const { selection } = newState;
+
+          if (!selection.empty) return null;
+
+          const docChanged = !oldState.doc.eq(newState.doc);
+          const selChanged = !oldState.selection.eq(newState.selection);
+          if (!docChanged && !selChanged) return null;
+
+          const isExplicitToggle =
+            !docChanged && transactions.some((tr) => tr.storedMarks !== null);
+          if (isExplicitToggle) return null;
+
+          const { $from } = selection;
+          const textLengthChanged =
+            oldState.doc.textContent.length !== newState.doc.textContent.length;
+
+          const strictMarks = resolveStrictMarks(
+            $from,
+            oldState,
+            newState,
+            docChanged,
+            textLengthChanged
+          );
+
+          const activeMarks = newState.storedMarks ?? $from.marks();
+          if (Mark.sameSet(strictMarks, activeMarks)) return null;
+
+          return newState.tr.setStoredMarks(strictMarks);
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/StripBoldInStyledHeadingsPlugin.ts

@@ -0,0 +1,84 @@
+import { Extension, type CommandProps } from '@tiptap/core';
+import {
+  Plugin,
+  PluginKey,
+  type EditorState,
+  type Transaction,
+} from '@tiptap/pm/state';
+import type { HtmlStyle } from '../../types';
+import { HEADING_TAGS } from '../formats/EnrichedHeading';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    stripBoldInStyledHeadings: {
+      // Remove redundant bold marks from headings whose level is already bold via `htmlStyle` CSS.
+      normalizeBoldInStyledHeadings: () => ReturnType;
+    };
+  }
+}
+
+interface StripBoldInStyledHeadingsPluginOptions {
+  getHtmlStyle: () => Required<HtmlStyle>;
+}
+
+function transactionStripBoldInCssBoldHeadings(
+  state: EditorState,
+  htmlStyle: Required<HtmlStyle>
+): Transaction | null {
+  const boldType = state.schema.marks.bold;
+  if (!boldType) return null;
+
+  const tr = state.tr;
+  state.doc.descendants((node, pos) => {
+    if (node.type.name !== 'heading') return true;
+    const level = node.attrs.level as number;
+    if (level < 1 || level > HEADING_TAGS.length) return false;
+    const key = HEADING_TAGS[level - 1]!;
+    if (htmlStyle[key].bold) {
+      tr.removeMark(pos + 1, pos + node.nodeSize - 1, boldType);
+    }
+    return false;
+  });
+
+  return tr.steps.length > 0 ? tr : null;
+}
+
+export const StripBoldInStyledHeadingsPlugin =
+  Extension.create<StripBoldInStyledHeadingsPluginOptions>({
+    name: 'stripBoldInStyledHeadings',
+    addOptions() {
+      return {
+        getHtmlStyle: () => {
+          throw new Error(
+            'StripBoldInStyledHeadingsPlugin.configure({ getHtmlStyle }) is required'
+          );
+        },
+      };
+    },
+    addCommands() {
+      return {
+        normalizeBoldInStyledHeadings:
+          () =>
+          ({ state, dispatch }: CommandProps) => {
+            const htmlStyle = this.options.getHtmlStyle();
+            const tr = transactionStripBoldInCssBoldHeadings(state, htmlStyle);
+            if (!tr) return false;
+            if (dispatch) dispatch(tr);
+            return true;
+          },
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: new PluginKey('stripBoldInStyledHeadings'),
+          appendTransaction: (transactions, _oldState, newState) => {
+            if (!transactions.some((tr) => tr.docChanged)) return;
+            const htmlStyle = this.options.getHtmlStyle();
+
+            return transactionStripBoldInCssBoldHeadings(newState, htmlStyle);
+          },
+        }),
+      ];
+    },
+  });

package/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts

@@ -0,0 +1,34 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+export const StripMarksInCodeBlockPlugin = Extension.create({
+  name: 'stripMarksInCodeBlock',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('stripMarksInCodeBlock'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) return;
+
+          const tr = newState.tr;
+
+          const allMarks = Object.values(newState.schema.marks);
+
+          newState.doc.descendants((node, pos) => {
+            if (node.type.name === 'codeBlock') {
+              allMarks.forEach((markType) => {
+                tr.removeMark(pos + 1, pos + node.nodeSize - 1, markType);
+              });
+              return false;
+            }
+
+            return true;
+          });
+
+          return tr.steps.length > 0 ? tr : null;
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/StripMarksOnImagePlugin.ts

@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+export const StripMarksOnImagePlugin = Extension.create({
+  name: 'stripMarksOnImage',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('stripMarksOnImage'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const tr = newState.tr;
+          let modified = false;
+
+          newState.doc.descendants((node, pos) => {
+            if (node.type.name === 'image' && node.marks.length > 0) {
+              node.marks.forEach((mark) => {
+                tr.removeMark(pos, pos + node.nodeSize, mark);
+              });
+              modified = true;
+            }
+          });
+
+          return modified ? tr : null;
+        },
+      }),
+    ];
+  },
+});

package/src/web/positionMapping.ts

@@ -0,0 +1,81 @@
+import type { Node } from '@tiptap/pm/model';
+
+/**
+ * Position model mismatch: ProseMirror vs native (iOS/Android)
+ *
+ * Native selection/cursor offsets are plain string indices in rendered text
+ * Block boundaries are represented by a single '\n'.
+ *
+ * ProseMirror positions are tree positions. Entering/leaving block nodes
+ * consumes extra positions that do not map to extra native characters.
+ * Crossing one paragraph boundary is 1 native char ('\n') but usually 2 PM
+ * positions (close paragraph + open next paragraph).
+ *
+ * Example for three paragraphs "AAAA", "BBBB", "CCCC":
+ *
+ *   PM:      1  2  3  4  5  6  7  8  9  10 11 12 13 14 15 16 17
+ *   Native:  0  1  2  3  4  4  5  6  7   8  9  9 10 11 12 13 14
+ *
+ * PM 5 and PM 6 both map to native 4, PM 11 and PM 12 both map to native 9.
+ *
+ * Inline images occupy one index in the native plain string as a '\ufffc' character,
+ * we do the same for the web implementation.
+ */
+
+/**
+ * Plain text in the native coordinate model for [from, to), including '\ufffc' per inline image.
+ */
+export function nativeLeafText(doc: Node, from: number, to: number): string {
+  return doc.textBetween(from, to, '\n', () => '\ufffc');
+}
+
+function nativeTextLength(doc: Node, from: number, to: number): number {
+  return nativeLeafText(doc, from, to).length;
+}
+
+/**
+ * Returns the native position for a given TipTap document position.
+ */
+export function tiptapPosToNativePos(doc: Node, tiptapPos: number): number {
+  if (tiptapPos <= 1) return 0;
+  return nativeTextLength(doc, 0, tiptapPos);
+}
+
+/**
+ * Returns the TipTap document position for a given native position.
+ *
+ * Traverses only text-bearing block nodes (paragraphs, headings, etc.),
+ * skipping wrapper nodes like block quotes and lists. This ensures the result
+ * is always a valid cursor position drilled down to the innermost content node.
+ */
+export function nativePosToTiptapPos(doc: Node, nativePos: number): number {
+  let currentNativePos = 0;
+  let targetTiptapPos = -1;
+  let lastValidTiptapPos = -1;
+
+  doc.descendants((node, pos) => {
+    if (targetTiptapPos !== -1) return false;
+
+    // Only consider text-bearing leaf blocks (paragraphs, headings, code blocks).
+    // Wrapper nodes (lists, list items, block quotes) are skipped
+    if (node.isTextblock) {
+      const textLen = node.textContent.length;
+
+      if (currentNativePos + textLen >= nativePos) {
+        // pos is before the opening tag; pos+1 is the first position inside.
+        const offset = Math.max(0, nativePos - currentNativePos);
+        targetTiptapPos = pos + 1 + offset;
+        return false;
+      }
+
+      currentNativePos += textLen + 1; // +1 for the '\n' block separator
+      lastValidTiptapPos = pos + 1 + textLen;
+    }
+
+    return true;
+  });
+
+  if (targetTiptapPos !== -1) return targetTiptapPos;
+  if (lastValidTiptapPos !== -1) return lastValidTiptapPos;
+  return 1;
+}

package/src/web/returnKeyTypeToEnterKeyHint.ts

@@ -0,0 +1,29 @@
+import type { ReturnKeyTypeOptions } from 'react-native';
+
+// Keywords for the HTML global [`enterkeyhint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint) attribute
+export type EnterKeyHint =
+  | 'enter'
+  | 'done'
+  | 'go'
+  | 'next'
+  | 'previous'
+  | 'search'
+  | 'send';
+
+// Maps React Native `returnKeyType` to the HTML global `enterkeyhint` attribute
+// if possible, otherwise falls back to enter.
+export function returnKeyTypeToEnterKeyHint(
+  returnKeyType: ReturnKeyTypeOptions | undefined
+): EnterKeyHint {
+  switch (returnKeyType) {
+    case 'done':
+    case 'go':
+    case 'next':
+    case 'previous':
+    case 'search':
+    case 'send':
+      return returnKeyType;
+    default:
+      return 'enter';
+  }
+}

package/src/web/sanitization/htmlSanitizer.ts

@@ -0,0 +1,8 @@
+import DOMPurify from 'dompurify';
+
+export function sanitizeHtml(html: string) {
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ['mention', 'codeblock'],
+    ADD_ATTR: ['text', 'indicator'],
+  });
+}

package/src/web/styleConversion/buildMentionRulesCSS.ts

@@ -0,0 +1,61 @@
+import type {
+  EnrichedTextHtmlStyle,
+  HtmlStyle,
+  MentionStyleProperties,
+} from '../../types';
+import { isMentionStyleRecord } from '../../utils/isMentionStyleRecord';
+import {
+  ENRICHED_TEXT_CLASSNAME,
+  ENRICHED_TEXT_INPUT_CLASSNAME,
+} from '../constants/classNames';
+import { ET_MENTION_CSS_VARS } from './htmlStyleToCSSVariables';
+import { MENTION_STYLE_DEFAULT_KEY } from './mentionIndicatorCssKey';
+
+function escapeIndicatorForCssAttributeSelector(indicator: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(indicator);
+  }
+  return indicator.replace(/["\\]/g, '\\$&');
+}
+
+function mentionSelector(className: string, indicator: string): string {
+  return indicator === MENTION_STYLE_DEFAULT_KEY
+    ? `.${className} mention`
+    : `.${className} mention[indicator="${escapeIndicatorForCssAttributeSelector(indicator)}"]`;
+}
+
+export function buildMentionRulesCSS(
+  htmlStyle?: HtmlStyle | EnrichedTextHtmlStyle
+): string {
+  const mapRaw = htmlStyle?.mention;
+  if (!mapRaw || typeof mapRaw !== 'object' || !isMentionStyleRecord(mapRaw)) {
+    return '';
+  }
+
+  const map: Record<string, MentionStyleProperties> = mapRaw;
+  const keys = Object.keys(map);
+  if (keys.length === 0) {
+    return '';
+  }
+
+  const lines: string[] = [];
+
+  for (const indicator of keys) {
+    const inputSelector = mentionSelector(
+      ENRICHED_TEXT_INPUT_CLASSNAME,
+      indicator
+    );
+    const textSelector = mentionSelector(ENRICHED_TEXT_CLASSNAME, indicator);
+
+    lines.push(
+      `${inputSelector},
+${textSelector} {
+  color: var(${ET_MENTION_CSS_VARS.color(indicator)});
+  background-color: var(${ET_MENTION_CSS_VARS.backgroundColor(indicator)});
+  text-decoration-line: var(${ET_MENTION_CSS_VARS.textDecorationLine(indicator)});
+}`.trim()
+    );
+  }
+
+  return lines.join('\n');
+}

package/src/web/styleConversion/enrichedBaseStyleToCSSProperties.ts

@@ -0,0 +1,228 @@
+import type { CSSProperties } from 'react';
+import type { EnrichedInputStyle } from '../../types';
+import type {
+  AnimatableNumericValue,
+  DimensionValue,
+  TextStyle,
+} from 'react-native';
+import { toColor } from './toColor';
+
+export interface StyleConversionExtraOptions {
+  scrollEnabled?: boolean;
+}
+
+export function enrichedBaseStyleToCSSProperties(
+  style: EnrichedInputStyle | TextStyle,
+  extraOptions: StyleConversionExtraOptions = {}
+): CSSProperties {
+  const css: CSSProperties = {
+    // Dimensions
+    width: toPx(style.width),
+    height: toPx(style.height),
+    minWidth: toPx(style.minWidth),
+    maxWidth: toPx(style.maxWidth),
+    minHeight: toPx(style.minHeight),
+    maxHeight: toPx(style.maxHeight),
+    top: toPx(style.top),
+    bottom: toPx(style.bottom),
+    left: toPx(style.left),
+    right: toPx(style.right),
+    inset: toPx(style.inset),
+    insetBlock: toPx(style.insetBlock),
+    insetBlockEnd: toPx(style.insetBlockEnd),
+    insetBlockStart: toPx(style.insetBlockStart),
+    insetInline: toPx(style.insetInline),
+    insetInlineEnd: toPx(style.insetInlineEnd ?? style.end),
+    insetInlineStart: toPx(style.insetInlineStart ?? style.start),
+
+    // Margin - specific properties take precedence over shorthands (RN behavior)
+    margin: toPx(style.margin),
+    marginTop: toPx(style.marginTop ?? style.marginVertical),
+    marginBottom: toPx(style.marginBottom ?? style.marginVertical),
+    marginLeft: toPx(style.marginLeft ?? style.marginHorizontal),
+    marginRight: toPx(style.marginRight ?? style.marginHorizontal),
+    marginBlock: toPx(style.marginBlock),
+    marginBlockEnd: toPx(style.marginBlockEnd),
+    marginBlockStart: toPx(style.marginBlockStart),
+    marginInline: toPx(style.marginInline),
+    marginInlineEnd: toPx(style.marginInlineEnd ?? style.marginEnd),
+    marginInlineStart: toPx(style.marginInlineStart ?? style.marginStart),
+
+    // Padding - specific properties take precedence over shorthands (RN behavior)
+    padding: toPx(style.padding),
+    paddingTop: toPx(style.paddingTop ?? style.paddingVertical),
+    paddingBottom: toPx(style.paddingBottom ?? style.paddingVertical),
+    paddingLeft: toPx(style.paddingLeft ?? style.paddingHorizontal),
+    paddingRight: toPx(style.paddingRight ?? style.paddingHorizontal),
+    paddingBlock: toPx(style.paddingBlock),
+    paddingBlockEnd: toPx(style.paddingBlockEnd),
+    paddingBlockStart: toPx(style.paddingBlockStart),
+    paddingInline: toPx(style.paddingInline),
+    paddingInlineEnd: toPx(style.paddingInlineEnd ?? style.paddingEnd),
+    paddingInlineStart: toPx(style.paddingInlineStart ?? style.paddingStart),
+
+    // Border widths
+    borderInlineStartWidth: toPx(style.borderStartWidth),
+    borderInlineEndWidth: toPx(style.borderEndWidth),
+    borderWidth: toPx(style.borderWidth),
+    borderTopWidth: toPx(style.borderTopWidth),
+    borderBottomWidth: toPx(style.borderBottomWidth),
+    borderLeftWidth: toPx(style.borderLeftWidth),
+    borderRightWidth: toPx(style.borderRightWidth),
+
+    // Border radius (physical)
+    borderRadius: toPx(style.borderRadius),
+    borderTopLeftRadius: toPx(style.borderTopLeftRadius),
+    borderTopRightRadius: toPx(style.borderTopRightRadius),
+    borderBottomLeftRadius: toPx(style.borderBottomLeftRadius),
+    borderBottomRightRadius: toPx(style.borderBottomRightRadius),
+
+    // Border radius (logical)
+    borderStartStartRadius: toPx(
+      style.borderStartStartRadius ?? style.borderTopStartRadius
+    ),
+    borderStartEndRadius: toPx(
+      style.borderStartEndRadius ?? style.borderTopEndRadius
+    ),
+    borderEndStartRadius: toPx(
+      style.borderEndStartRadius ?? style.borderBottomStartRadius
+    ),
+    borderEndEndRadius: toPx(
+      style.borderEndEndRadius ?? style.borderBottomEndRadius
+    ),
+
+    // Border colors
+    borderColor: toColor(style.borderColor),
+    borderBlockColor: toColor(style.borderBlockColor),
+    borderBlockEndColor: toColor(style.borderBlockEndColor),
+    borderBlockStartColor: toColor(style.borderBlockStartColor),
+    borderBottomColor: toColor(style.borderBottomColor),
+    borderInlineEndColor: toColor(style.borderEndColor),
+    borderLeftColor: toColor(style.borderLeftColor),
+    borderRightColor: toColor(style.borderRightColor),
+    borderInlineStartColor: toColor(style.borderStartColor),
+    borderTopColor: toColor(style.borderTopColor),
+    borderStyle:
+      style.borderStyle ??
+      (style.borderWidth != null ||
+      style.borderTopWidth != null ||
+      style.borderBottomWidth != null ||
+      style.borderLeftWidth != null ||
+      style.borderRightWidth != null ||
+      style.borderStartWidth != null ||
+      style.borderEndWidth != null ||
+      style.borderColor != null
+        ? 'solid'
+        : undefined),
+
+    // Typography
+    color: toColor(style.color),
+    fontFamily: style.fontFamily,
+    fontSize: toPx(style.fontSize),
+    fontStyle: style.fontStyle,
+    fontWeight: style.fontWeight,
+    lineHeight: toPx(style.lineHeight),
+    letterSpacing: toPx(style.letterSpacing),
+
+    // View appearance
+    backgroundColor: toColor(style.backgroundColor),
+    // boxShadow/filter: RN accepts arrays, CSS only strings
+    boxShadow:
+      typeof style.boxShadow === 'string' ? style.boxShadow : undefined,
+    display: style.display,
+    position: style.position,
+    alignSelf: style.alignSelf,
+    backfaceVisibility: style.backfaceVisibility,
+    cursor: style.cursor,
+    filter: typeof style.filter === 'string' ? style.filter : undefined,
+    mixBlendMode: style.mixBlendMode,
+    boxSizing: style.boxSizing,
+    // pointerEvents: RN 'box-none'/'box-only' have no CSS equivalent
+    pointerEvents:
+      style.pointerEvents === 'auto' || style.pointerEvents === 'none'
+        ? style.pointerEvents
+        : undefined,
+
+    // Outline
+    outlineColor: toColor(style.outlineColor),
+    outlineStyle:
+      style.outlineStyle ?? (style.outlineWidth != null ? 'solid' : undefined),
+    outlineOffset: toPx(style.outlineOffset),
+    outlineWidth: toPx(style.outlineWidth),
+
+    // Transforms
+    transform: resolveTransform(style.transform),
+    // transformOrigin: RN accepts strings or arrays, CSS only strings
+    transformOrigin:
+      typeof style.transformOrigin === 'string'
+        ? style.transformOrigin
+        : undefined,
+
+    // Flex
+    flex: style.flex,
+    flexGrow: style.flexGrow,
+    flexShrink: style.flexShrink,
+    flexBasis: toPx(style.flexBasis),
+
+    // Misc
+    zIndex: style.zIndex,
+    // opacity: RN AnimatableNumericValue includes AnimatedNode; CSS only number
+    opacity: typeof style.opacity === 'number' ? style.opacity : undefined,
+    aspectRatio: style.aspectRatio,
+
+    // Extra options
+    overflowY:
+      extraOptions.scrollEnabled != null
+        ? extraOptions.scrollEnabled
+          ? 'auto'
+          : 'hidden'
+        : undefined,
+  };
+
+  // Clean undefined values
+  return Object.fromEntries(
+    Object.entries(css).filter(([, v]) => v !== undefined)
+  );
+}
+
+function toPx(
+  value?: DimensionValue | AnimatableNumericValue | string
+): string | undefined {
+  if (value == null) return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'string') return value;
+  return undefined;
+}
+
+function resolveTransform(
+  transform: EnrichedInputStyle['transform']
+): string | undefined {
+  if (typeof transform === 'string') return transform;
+  if (!Array.isArray(transform)) return undefined;
+
+  const parts = transform.map((item) => {
+    if ('translateX' in item) return `translateX(${item.translateX}px)`;
+    if ('translateY' in item) return `translateY(${item.translateY}px)`;
+    if ('translateZ' in item) return `translateZ(${item.translateZ}px)`;
+    if ('scale' in item) return `scale(${item.scale})`;
+    if ('scaleX' in item) return `scaleX(${item.scaleX})`;
+    if ('scaleY' in item) return `scaleY(${item.scaleY})`;
+    if ('scaleZ' in item) return `scaleZ(${item.scaleZ})`;
+    if ('rotate' in item) return `rotate(${item.rotate})`;
+    if ('rotateX' in item) return `rotateX(${item.rotateX})`;
+    if ('rotateY' in item) return `rotateY(${item.rotateY})`;
+    if ('rotateZ' in item) return `rotateZ(${item.rotateZ})`;
+    if ('skewX' in item) return `skewX(${item.skewX})`;
+    if ('skewY' in item) return `skewY(${item.skewY})`;
+    if ('perspective' in item) return `perspective(${item.perspective}px)`;
+    if ('matrix' in item) {
+      return item.matrix.length === 16
+        ? `matrix3d(${item.matrix.join(', ')})`
+        : `matrix(${item.matrix.join(', ')})`;
+    }
+    return null;
+  });
+
+  const css = parts.filter(Boolean).join(' ');
+  return css || undefined;
+}