@pyreon/connector-document 0.11.1 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/connector-document",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -24,7 +24,8 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src"
   ],
   "engines": {
     "node": ">= 22"
@@ -43,13 +44,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.1",
-    "@pyreon/document": "^0.11.1"
+    "@pyreon/core": "^0.11.3",
+    "@pyreon/document": "^0.11.3"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.11.1",
-    "@pyreon/document": "^0.11.1",
+    "@pyreon/core": "^0.11.3",
+    "@pyreon/document": "^0.11.3",
     "@vitus-labs/tools-rolldown": "^1.15.4",
-    "@pyreon/typescript": "^0.11.1"
+    "@pyreon/typescript": "^0.11.3"
   }
 }

package/src/__tests__/cssValueParser.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, it } from "vitest"
+import {
+  parseBoxModel,
+  parseCssDimension,
+  parseFontWeight,
+  parseLineHeight,
+} from "../cssValueParser"
+
+describe("parseCssDimension", () => {
+  it("passes through numbers", () => {
+    expect(parseCssDimension(14)).toBe(14)
+    expect(parseCssDimension(0)).toBe(0)
+    expect(parseCssDimension(-5)).toBe(-5)
+    expect(parseCssDimension(1.5)).toBe(1.5)
+  })
+
+  it("parses px values", () => {
+    expect(parseCssDimension("14px")).toBe(14)
+    expect(parseCssDimension("0px")).toBe(0)
+    expect(parseCssDimension("-5px")).toBe(-5)
+    expect(parseCssDimension("1.5px")).toBe(1.5)
+  })
+
+  it("parses rem values", () => {
+    expect(parseCssDimension("1rem")).toBe(16)
+    expect(parseCssDimension("1.5rem")).toBe(24)
+    expect(parseCssDimension("0.5rem")).toBe(8)
+    expect(parseCssDimension("2rem", 20)).toBe(40)
+  })
+
+  it("parses em values", () => {
+    expect(parseCssDimension("1em")).toBe(16)
+    expect(parseCssDimension("2em")).toBe(32)
+  })
+
+  it("parses pt values", () => {
+    expect(parseCssDimension("12pt")).toBeCloseTo(16)
+    expect(parseCssDimension("9pt")).toBeCloseTo(12)
+  })
+
+  it("parses bare number strings", () => {
+    expect(parseCssDimension("14")).toBe(14)
+    expect(parseCssDimension("0")).toBe(0)
+    expect(parseCssDimension("-5")).toBe(-5)
+  })
+
+  it("returns undefined for unresolvable values", () => {
+    expect(parseCssDimension("auto")).toBeUndefined()
+    expect(parseCssDimension("100%")).toBeUndefined()
+    expect(parseCssDimension("calc(100% - 20px)")).toBeUndefined()
+    expect(parseCssDimension("var(--spacing)")).toBeUndefined()
+  })
+
+  it("trims whitespace", () => {
+    expect(parseCssDimension(" 14px ")).toBe(14)
+    expect(parseCssDimension("  1rem  ")).toBe(16)
+  })
+})
+
+describe("parseBoxModel", () => {
+  it("returns undefined for null/undefined", () => {
+    expect(parseBoxModel(undefined)).toBeUndefined()
+    expect(parseBoxModel(null as any)).toBeUndefined()
+  })
+
+  it("passes through numbers", () => {
+    expect(parseBoxModel(8)).toBe(8)
+    expect(parseBoxModel(0)).toBe(0)
+  })
+
+  it("parses single value", () => {
+    expect(parseBoxModel("8px")).toBe(8)
+    expect(parseBoxModel("1rem")).toBe(16)
+  })
+
+  it("parses two values (vertical horizontal)", () => {
+    expect(parseBoxModel("8px 16px")).toEqual([8, 16])
+  })
+
+  it("parses three values (top horizontal bottom)", () => {
+    expect(parseBoxModel("8px 16px 12px")).toEqual([8, 16, 12, 16])
+  })
+
+  it("parses four values", () => {
+    expect(parseBoxModel("8px 16px 12px 4px")).toEqual([8, 16, 12, 4])
+  })
+
+  it("returns undefined when any part is unresolvable", () => {
+    expect(parseBoxModel("8px auto")).toBeUndefined()
+    expect(parseBoxModel("8px 16px auto 4px")).toBeUndefined()
+  })
+})
+
+describe("parseFontWeight", () => {
+  it("passes through numbers", () => {
+    expect(parseFontWeight(400)).toBe(400)
+    expect(parseFontWeight(700)).toBe(700)
+  })
+
+  it("handles string keywords", () => {
+    expect(parseFontWeight("normal")).toBe("normal")
+    expect(parseFontWeight("bold")).toBe("bold")
+  })
+
+  it("parses numeric strings", () => {
+    expect(parseFontWeight("400")).toBe(400)
+    expect(parseFontWeight("700")).toBe(700)
+  })
+
+  it("returns undefined for null/undefined", () => {
+    expect(parseFontWeight(undefined)).toBeUndefined()
+  })
+
+  it("returns undefined for unrecognized values", () => {
+    expect(parseFontWeight("lighter")).toBeUndefined()
+  })
+})
+
+describe("parseLineHeight", () => {
+  it("passes through numbers (unitless)", () => {
+    expect(parseLineHeight(1.5)).toBe(1.5)
+    expect(parseLineHeight(2)).toBe(2)
+  })
+
+  it("parses px values", () => {
+    expect(parseLineHeight("24px")).toBe(24)
+  })
+
+  it("returns undefined for 'normal'", () => {
+    expect(parseLineHeight("normal")).toBeUndefined()
+  })
+
+  it("returns undefined for null/undefined", () => {
+    expect(parseLineHeight(undefined)).toBeUndefined()
+  })
+})

package/src/__tests__/extractDocumentTree.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, it } from "vitest"
+import type { DocumentMarker } from "../extractDocumentTree"
+import { extractDocumentTree } from "../extractDocumentTree"
+
+// Helper: create a mock VNode
+const vnode = (
+  type: string | ((...args: any[]) => any),
+  props: Record<string, any> = {},
+  children: unknown[] = [],
+) => ({ type, props, children })
+
+// Helper: create a document-marked component function
+const docComponent = (docType: string, render?: (...args: any[]) => any) => {
+  const fn = render ?? ((props: any) => vnode("div", props, props.children ? [props.children] : []))
+  ;(fn as any)._documentType = docType
+  return fn as ((...args: any[]) => any) & DocumentMarker
+}
+
+describe("extractDocumentTree", () => {
+  it("extracts a simple document node", () => {
+    const Heading = docComponent("heading")
+    const tree = vnode(
+      Heading,
+      { $rocketstyle: { fontSize: 24, fontWeight: "bold" }, _documentProps: { level: 1 } },
+      ["Hello World"],
+    )
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.type).toBe("heading")
+    expect(result.props).toEqual({ level: 1 })
+    expect(result.children).toEqual(["Hello World"])
+    expect(result.styles).toEqual({ fontSize: 24, fontWeight: "bold" })
+  })
+
+  it("extracts nested document nodes", () => {
+    const Section = docComponent("section")
+    const Text = docComponent("text")
+
+    const tree = vnode(Section, { $rocketstyle: { padding: 16 } }, [
+      vnode(Text, { $rocketstyle: { fontSize: 14, color: "#333" } }, ["Paragraph one"]),
+      vnode(Text, { $rocketstyle: { fontSize: 14, color: "#333" } }, ["Paragraph two"]),
+    ])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.type).toBe("section")
+    expect(result.styles).toEqual({ padding: 16 })
+    expect(result.children).toHaveLength(2)
+    expect((result.children[0] as any).type).toBe("text")
+    expect((result.children[1] as any).type).toBe("text")
+  })
+
+  it("flattens transparent wrappers", () => {
+    const Section = docComponent("section")
+    const Text = docComponent("text")
+
+    // A plain div wrapper (no _documentType) should be transparent
+    const tree = vnode(Section, {}, [
+      vnode("div", {}, [vnode(Text, { $rocketstyle: { fontSize: 14 } }, ["Hello"])]),
+    ])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.type).toBe("section")
+    expect(result.children).toHaveLength(1)
+    expect((result.children[0] as any).type).toBe("text")
+  })
+
+  it("handles string children", () => {
+    const Text = docComponent("text")
+    const tree = vnode(Text, {}, ["Hello", " ", "World"])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.children).toEqual(["Hello", " ", "World"])
+  })
+
+  it("handles number children", () => {
+    const Text = docComponent("text")
+    const tree = vnode(Text, {}, [42])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.children).toEqual(["42"])
+  })
+
+  it("skips null and boolean children", () => {
+    const Section = docComponent("section")
+    const tree = vnode(Section, {}, [null, false, true, "visible"])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.children).toEqual(["visible"])
+  })
+
+  it("resolves reactive getter children", () => {
+    const Text = docComponent("text")
+    const tree = vnode(Text, {}, [() => "dynamic text"])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.children).toEqual(["dynamic text"])
+  })
+
+  it("omits styles when includeStyles is false", () => {
+    const Heading = docComponent("heading")
+    const tree = vnode(Heading, { $rocketstyle: { fontSize: 24 } }, ["Hello"])
+
+    const result = extractDocumentTree(tree, { includeStyles: false })
+
+    expect(result.styles).toBeUndefined()
+  })
+
+  it("wraps in document node when root has no _documentType", () => {
+    const tree = vnode("div", {}, ["raw text"])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.type).toBe("document")
+    expect(result.children).toEqual(["raw text"])
+  })
+
+  it("handles component functions without _documentType by calling them", () => {
+    const Text = docComponent("text")
+    const Wrapper = (props: any) =>
+      vnode(Text, { $rocketstyle: { fontSize: 14 } }, [props.children])
+
+    const tree = vnode(Wrapper, {}, ["wrapped text"])
+
+    const result = extractDocumentTree(tree)
+
+    expect(result.type).toBe("text")
+    expect(result.children).toEqual(["wrapped text"])
+  })
+
+  it("handles function passed directly", () => {
+    const Text = docComponent("text")
+    const template = () => vnode(Text, { $rocketstyle: { fontSize: 14 } }, ["Hello"])
+
+    const result = extractDocumentTree(template)
+
+    expect(result.type).toBe("text")
+    expect(result.children).toEqual(["Hello"])
+  })
+
+  it("creates empty document for null input", () => {
+    const result = extractDocumentTree(null)
+
+    expect(result.type).toBe("document")
+    expect(result.children).toEqual([])
+  })
+})

package/src/__tests__/resolveStyles.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest"
+import { resolveStyles } from "../resolveStyles"
+
+describe("resolveStyles", () => {
+  it("resolves typography properties", () => {
+    const result = resolveStyles({
+      fontSize: "14px",
+      fontFamily: "system-ui, sans-serif",
+      fontWeight: "bold",
+      fontStyle: "italic",
+      textDecoration: "underline",
+      color: "#333333",
+      textAlign: "center",
+      lineHeight: 1.5,
+      letterSpacing: "0.5px",
+    })
+
+    expect(result).toEqual({
+      fontSize: 14,
+      fontFamily: "system-ui, sans-serif",
+      fontWeight: "bold",
+      fontStyle: "italic",
+      textDecoration: "underline",
+      color: "#333333",
+      textAlign: "center",
+      lineHeight: 1.5,
+      letterSpacing: 0.5,
+    })
+  })
+
+  it("resolves box model properties", () => {
+    const result = resolveStyles({
+      padding: "8px 16px",
+      margin: "12px",
+    })
+
+    expect(result).toEqual({
+      padding: [8, 16],
+      margin: 12,
+    })
+  })
+
+  it("resolves border properties", () => {
+    const result = resolveStyles({
+      borderRadius: "4px",
+      borderWidth: "1px",
+      borderColor: "#dddddd",
+      borderStyle: "solid",
+    })
+
+    expect(result).toEqual({
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: "#dddddd",
+      borderStyle: "solid",
+    })
+  })
+
+  it("resolves sizing properties", () => {
+    const result = resolveStyles({
+      width: "200px",
+      height: 100,
+      maxWidth: "100%",
+    })
+
+    expect(result).toEqual({
+      width: 200,
+      height: 100,
+      maxWidth: "100%",
+    })
+  })
+
+  it("handles numeric values directly", () => {
+    const result = resolveStyles({
+      fontSize: 14,
+      padding: 8,
+      opacity: 0.5,
+    })
+
+    expect(result).toEqual({
+      fontSize: 14,
+      padding: 8,
+      opacity: 0.5,
+    })
+  })
+
+  it("ignores irrelevant CSS properties", () => {
+    const result = resolveStyles({
+      fontSize: 14,
+      transition: "all 0.2s",
+      cursor: "pointer",
+      display: "flex",
+      position: "relative",
+      transform: "translateX(10px)",
+    })
+
+    expect(result).toEqual({ fontSize: 14 })
+  })
+
+  it("skips invalid values", () => {
+    const result = resolveStyles({
+      fontStyle: "oblique",
+      textDecoration: "overline",
+      borderStyle: "none",
+      textAlign: "start",
+    })
+
+    expect(result).toEqual({})
+  })
+
+  it("returns empty object for empty input", () => {
+    expect(resolveStyles({})).toEqual({})
+  })
+
+  it("handles backgroundColor", () => {
+    const result = resolveStyles({ backgroundColor: "#4f46e5" })
+    expect(result).toEqual({ backgroundColor: "#4f46e5" })
+  })
+
+  it("converts rem values using rootSize", () => {
+    const result = resolveStyles({ fontSize: "1.5rem" }, 20)
+    expect(result).toEqual({ fontSize: 30 })
+  })
+})

package/src/cssValueParser.ts

@@ -0,0 +1,110 @@
+const PX_RE = /^(-?\d+(?:\.\d+)?)px$/
+const REM_RE = /^(-?\d+(?:\.\d+)?)rem$/
+const EM_RE = /^(-?\d+(?:\.\d+)?)em$/
+const PT_RE = /^(-?\d+(?:\.\d+)?)pt$/
+const NUMBER_RE = /^-?\d+(?:\.\d+)?$/
+
+const DEFAULT_ROOT_SIZE = 16
+
+/**
+ * Parse a CSS dimension value to a number.
+ *
+ * - `14` → `14`
+ * - `'14px'` → `14`
+ * - `'1.5rem'` → `24` (with rootSize=16)
+ * - `'12pt'` → `16` (pt × 1.333)
+ * - `'auto'` → `undefined`
+ */
+export function parseCssDimension(
+  value: string | number | null | undefined,
+  rootSize = DEFAULT_ROOT_SIZE,
+): number | undefined {
+  if (value == null) return undefined
+  if (typeof value === "number") return value
+  if (typeof value !== "string") return undefined
+
+  const trimmed = value.trim()
+
+  const pxMatch = PX_RE.exec(trimmed)
+  if (pxMatch?.[1]) return Number.parseFloat(pxMatch[1])
+
+  const remMatch = REM_RE.exec(trimmed)
+  if (remMatch?.[1]) return Number.parseFloat(remMatch[1]) * rootSize
+
+  const emMatch = EM_RE.exec(trimmed)
+  if (emMatch?.[1]) return Number.parseFloat(emMatch[1]) * rootSize
+
+  const ptMatch = PT_RE.exec(trimmed)
+  if (ptMatch?.[1]) return Number.parseFloat(ptMatch[1]) * (4 / 3)
+
+  if (NUMBER_RE.test(trimmed)) return Number.parseFloat(trimmed)
+
+  return undefined
+}
+
+type BoxModelResult = number | [number, number] | [number, number, number, number] | undefined
+
+/**
+ * Parse a CSS padding/margin shorthand to document tuple format.
+ *
+ * - `8` → `8`
+ * - `'8px'` → `8`
+ * - `'8px 16px'` → `[8, 16]`
+ * - `'8px 16px 8px 16px'` → `[8, 16, 8, 16]`
+ * - `'8px 16px 12px'` → `[8, 16, 12, 16]` (CSS 3-value shorthand)
+ */
+export function parseBoxModel(
+  value: string | number | undefined,
+  rootSize = DEFAULT_ROOT_SIZE,
+): BoxModelResult {
+  if (value == null) return undefined
+  if (typeof value === "number") return value
+
+  const parts = value
+    .trim()
+    .split(/\s+/)
+    .map((p) => parseCssDimension(p, rootSize))
+
+  const nums = parts.filter((p): p is number => p != null)
+  if (nums.length !== parts.length) return undefined
+
+  if (nums.length === 1) return nums[0]
+  if (nums.length === 2) return [nums[0], nums[1]] as [number, number]
+  if (nums.length === 3)
+    return [nums[0], nums[1], nums[2], nums[1]] as [number, number, number, number]
+  if (nums.length === 4)
+    return [nums[0], nums[1], nums[2], nums[3]] as [number, number, number, number]
+
+  return undefined
+}
+
+/**
+ * Parse a CSS font-weight value.
+ */
+export function parseFontWeight(
+  value: string | number | undefined,
+): "normal" | "bold" | number | undefined {
+  if (value == null) return undefined
+  if (typeof value === "number") return value
+  if (value === "normal" || value === "bold") return value
+  const num = Number.parseInt(value, 10)
+  if (!Number.isNaN(num)) return num
+  return undefined
+}
+
+/**
+ * Parse a CSS line-height value to a unitless number.
+ */
+export function parseLineHeight(
+  value: string | number | undefined,
+  rootSize = DEFAULT_ROOT_SIZE,
+): number | undefined {
+  if (value == null) return undefined
+  if (typeof value === "number") return value
+  if (value === "normal") return undefined
+
+  const dim = parseCssDimension(value, rootSize)
+  if (dim != null) return dim
+
+  return undefined
+}

package/src/extractDocumentTree.ts

@@ -0,0 +1,181 @@
+import { resolveStyles } from "./resolveStyles"
+import type { DocChild, DocNode, NodeType } from "./types"
+
+/** Marker interface: components with _documentType are extractable. */
+export interface DocumentMarker {
+  _documentType: NodeType
+}
+
+export interface ExtractOptions {
+  /** Root font size for rem→px conversion. Default: 16. */
+  rootSize?: number
+  /** Include resolved styles from $rocketstyle. Default: true. */
+  includeStyles?: boolean
+}
+
+type VNodeLike = {
+  type: string | ((...args: any[]) => any)
+  props: Record<string, any>
+  children: unknown[]
+}
+
+function isVNode(value: unknown): value is VNodeLike {
+  return value != null && typeof value === "object" && "type" in value && "props" in value
+}
+
+function getDocumentType(fn: unknown): NodeType | undefined {
+  if (typeof fn !== "function") return undefined
+  const meta = (fn as any).meta
+  if (meta?._documentType) return meta._documentType as NodeType
+  // Fallback: check directly on function (non-rocketstyle components)
+  if ("_documentType" in fn) return (fn as any)._documentType as NodeType
+  return undefined
+}
+
+function flattenChildren(children: unknown[]): unknown[] {
+  const result: unknown[] = []
+  for (const child of children) {
+    if (Array.isArray(child)) {
+      result.push(...flattenChildren(child))
+    } else if (typeof child === "function") {
+      // Reactive getter — call to resolve
+      const resolved = child()
+      if (Array.isArray(resolved)) {
+        result.push(...flattenChildren(resolved))
+      } else {
+        result.push(resolved)
+      }
+    } else {
+      result.push(child)
+    }
+  }
+  return result
+}
+
+function extractChildren(children: unknown[], options: ExtractOptions): DocChild[] {
+  const flat = flattenChildren(children)
+  const result: DocChild[] = []
+
+  for (const child of flat) {
+    if (child == null || child === false || child === true) continue
+
+    if (typeof child === "string") {
+      result.push(child)
+      continue
+    }
+
+    if (typeof child === "number") {
+      result.push(String(child))
+      continue
+    }
+
+    if (isVNode(child)) {
+      const extracted = extractNode(child, options)
+      if (Array.isArray(extracted)) {
+        result.push(...extracted)
+      } else if (extracted != null) {
+        result.push(extracted)
+      }
+    }
+  }
+
+  return result
+}
+
+function extractNode(vnode: VNodeLike, options: ExtractOptions): DocNode | DocChild[] | null {
+  const { type, props, children } = vnode
+  const includeStyles = options.includeStyles !== false
+  const rootSize = options.rootSize ?? 16
+
+  // Component function with _documentType marker (via .statics() or direct)
+  const docType = getDocumentType(type)
+  if (docType) {
+    const docProps: Record<string, unknown> = {}
+
+    // Extract document-specific props from _documentProps
+    if (props._documentProps && typeof props._documentProps === "object") {
+      Object.assign(docProps, props._documentProps)
+    }
+
+    // Resolve styles from $rocketstyle
+    const styles =
+      includeStyles && props.$rocketstyle
+        ? resolveStyles(props.$rocketstyle as Record<string, unknown>, rootSize)
+        : undefined
+
+    // Recurse into children
+    const docChildren = extractChildren(children ?? [], options)
+
+    const node: DocNode = {
+      type: docType,
+      props: docProps,
+      children: docChildren,
+    }
+
+    if (styles && Object.keys(styles).length > 0) {
+      node.styles = styles
+    }
+
+    return node
+  }
+
+  // Component function WITHOUT _documentType — call it to get its VNode output
+  if (typeof type === "function") {
+    const mergedProps = { ...props }
+    if (children && children.length > 0) {
+      mergedProps.children = children.length === 1 ? children[0] : children
+    }
+
+    const result = type(mergedProps)
+
+    if (isVNode(result)) {
+      return extractNode(result, options)
+    }
+
+    // The component returned a primitive or null
+    if (typeof result === "string") return [result]
+    if (typeof result === "number") return [String(result)]
+    return null
+  }
+
+  // DOM element (string type like 'div', 'span') — transparent, extract children
+  if (typeof type === "string") {
+    const docChildren = extractChildren(children ?? [], options)
+    // If there's text content in the DOM element, collect it
+    if (docChildren.length > 0) return docChildren
+    return null
+  }
+
+  return null
+}
+
+/**
+ * Walk a Pyreon VNode tree and extract a `DocNode` tree for `@pyreon/document`.
+ *
+ * For each VNode whose component has a `_documentType` marker:
+ * 1. Read `_documentType` → `DocNode.type`
+ * 2. Read `_documentProps` → `DocNode.props`
+ * 3. Read `$rocketstyle` → `resolveStyles()` → `DocNode.styles`
+ * 4. Recurse into children
+ *
+ * VNodes without `_documentType` are transparent — their children
+ * are flattened into the parent's children list.
+ */
+export function extractDocumentTree(vnode: unknown, options: ExtractOptions = {}): DocNode {
+  if (isVNode(vnode)) {
+    const result = extractNode(vnode, options)
+    if (result && !Array.isArray(result)) return result
+
+    // Wrap loose children in a document node
+    const children = Array.isArray(result) ? result : []
+    return { type: "document", props: {}, children }
+  }
+
+  // If passed a component function directly, call it
+  if (typeof vnode === "function") {
+    const result = (vnode as () => unknown)()
+    return extractDocumentTree(result, options)
+  }
+
+  return { type: "document", props: {}, children: [] }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export {
+  parseBoxModel,
+  parseCssDimension,
+  parseFontWeight,
+  parseLineHeight,
+} from "./cssValueParser"
+export type { DocumentMarker, ExtractOptions } from "./extractDocumentTree"
+export { extractDocumentTree } from "./extractDocumentTree"
+export { resolveStyles } from "./resolveStyles"
+export type { DocChild, DocNode, NodeType, ResolvedStyles } from "./types"

package/src/resolveStyles.ts

@@ -0,0 +1,101 @@
+import {
+  parseBoxModel,
+  parseCssDimension,
+  parseFontWeight,
+  parseLineHeight,
+} from "./cssValueParser"
+import type { ResolvedStyles } from "./types"
+
+const TEXT_ALIGN_VALUES = new Set(["left", "center", "right", "justify"])
+const FONT_STYLE_VALUES = new Set(["normal", "italic"])
+const TEXT_DECORATION_VALUES = new Set(["none", "underline", "line-through"])
+const BORDER_STYLE_VALUES = new Set(["solid", "dashed", "dotted"])
+
+/**
+ * Convert a rocketstyle `$rocketstyle` theme object into a `ResolvedStyles`
+ * object compatible with `@pyreon/document`.
+ *
+ * Only extracts properties that `ResolvedStyles` supports — everything else
+ * (transitions, cursor, display, etc.) is silently ignored.
+ */
+export function resolveStyles(rocketstyle: Record<string, unknown>, rootSize = 16): ResolvedStyles {
+  const styles: ResolvedStyles = {}
+
+  // Typography
+  const fontSize = parseCssDimension(rocketstyle.fontSize as string | number, rootSize)
+  if (fontSize != null) styles.fontSize = fontSize
+
+  if (typeof rocketstyle.fontFamily === "string") styles.fontFamily = rocketstyle.fontFamily
+
+  const fontWeight = parseFontWeight(rocketstyle.fontWeight as string | number | undefined)
+  if (fontWeight != null) styles.fontWeight = fontWeight
+
+  if (typeof rocketstyle.fontStyle === "string" && FONT_STYLE_VALUES.has(rocketstyle.fontStyle))
+    styles.fontStyle = rocketstyle.fontStyle as "normal" | "italic"
+
+  if (
+    typeof rocketstyle.textDecoration === "string" &&
+    TEXT_DECORATION_VALUES.has(rocketstyle.textDecoration)
+  )
+    styles.textDecoration = rocketstyle.textDecoration as "none" | "underline" | "line-through"
+
+  if (typeof rocketstyle.color === "string") styles.color = rocketstyle.color
+
+  if (typeof rocketstyle.backgroundColor === "string")
+    styles.backgroundColor = rocketstyle.backgroundColor
+
+  if (typeof rocketstyle.textAlign === "string" && TEXT_ALIGN_VALUES.has(rocketstyle.textAlign))
+    styles.textAlign = rocketstyle.textAlign as "left" | "center" | "right" | "justify"
+
+  const lineHeight = parseLineHeight(
+    rocketstyle.lineHeight as string | number | undefined,
+    rootSize,
+  )
+  if (lineHeight != null) styles.lineHeight = lineHeight
+
+  const letterSpacing = parseCssDimension(rocketstyle.letterSpacing as string | number, rootSize)
+  if (letterSpacing != null) styles.letterSpacing = letterSpacing
+
+  // Box model
+  const padding = parseBoxModel(rocketstyle.padding as string | number | undefined, rootSize)
+  if (padding != null) styles.padding = padding
+
+  const margin = parseBoxModel(rocketstyle.margin as string | number | undefined, rootSize)
+  if (margin != null) styles.margin = margin
+
+  // Border
+  const borderRadius = parseCssDimension(rocketstyle.borderRadius as string | number, rootSize)
+  if (borderRadius != null) styles.borderRadius = borderRadius
+
+  const borderWidth = parseCssDimension(rocketstyle.borderWidth as string | number, rootSize)
+  if (borderWidth != null) styles.borderWidth = borderWidth
+
+  if (typeof rocketstyle.borderColor === "string") styles.borderColor = rocketstyle.borderColor
+
+  if (
+    typeof rocketstyle.borderStyle === "string" &&
+    BORDER_STYLE_VALUES.has(rocketstyle.borderStyle)
+  )
+    styles.borderStyle = rocketstyle.borderStyle as "solid" | "dashed" | "dotted"
+
+  // Sizing
+  if (rocketstyle.width != null) {
+    const w = parseCssDimension(rocketstyle.width as string | number, rootSize)
+    styles.width = w ?? (rocketstyle.width as string)
+  }
+
+  if (rocketstyle.height != null) {
+    const h = parseCssDimension(rocketstyle.height as string | number, rootSize)
+    styles.height = h ?? (rocketstyle.height as string)
+  }
+
+  if (rocketstyle.maxWidth != null) {
+    const mw = parseCssDimension(rocketstyle.maxWidth as string | number, rootSize)
+    styles.maxWidth = mw ?? (rocketstyle.maxWidth as string)
+  }
+
+  // Opacity
+  if (typeof rocketstyle.opacity === "number") styles.opacity = rocketstyle.opacity
+
+  return styles
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type { DocChild, DocNode, NodeType, ResolvedStyles } from "@pyreon/document"