@pyreon/connector-document 0.3.0

package/lib/index.d.ts

@@ -0,0 +1,70 @@
+import { DocChild, DocNode, NodeType, ResolvedStyles } from "@pyreon/document";
+
+//#region src/cssValueParser.d.ts
+/**
+ * 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`
+ */
+declare function parseCssDimension(value: string | number | null | undefined, rootSize?: number): number | 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)
+ */
+declare function parseBoxModel(value: string | number | undefined, rootSize?: number): BoxModelResult;
+/**
+ * Parse a CSS font-weight value.
+ */
+declare function parseFontWeight(value: string | number | undefined): "normal" | "bold" | number | undefined;
+/**
+ * Parse a CSS line-height value to a unitless number.
+ */
+declare function parseLineHeight(value: string | number | undefined, rootSize?: number): number | undefined;
+//#endregion
+//#region src/extractDocumentTree.d.ts
+/** Marker interface: components with _documentType are extractable. */
+interface DocumentMarker {
+  _documentType: NodeType;
+}
+interface ExtractOptions {
+  /** Root font size for rem→px conversion. Default: 16. */
+  rootSize?: number;
+  /** Include resolved styles from $rocketstyle. Default: true. */
+  includeStyles?: boolean;
+}
+/**
+ * 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.
+ */
+declare function extractDocumentTree(vnode: unknown, options?: ExtractOptions): DocNode;
+//#endregion
+//#region src/resolveStyles.d.ts
+/**
+ * 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.
+ */
+declare function resolveStyles(rocketstyle: Record<string, unknown>, rootSize?: number): ResolvedStyles;
+//#endregion
+export { type DocChild, type DocNode, type DocumentMarker, type ExtractOptions, type NodeType, type ResolvedStyles, extractDocumentTree, parseBoxModel, parseCssDimension, parseFontWeight, parseLineHeight, resolveStyles };
+//# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -0,0 +1,249 @@
+//#region src/cssValueParser.ts
+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`
+*/
+function parseCssDimension(value, rootSize = DEFAULT_ROOT_SIZE) {
+	if (value == null) return void 0;
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return void 0;
+	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);
+}
+/**
+* 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)
+*/
+function parseBoxModel(value, rootSize = DEFAULT_ROOT_SIZE) {
+	if (value == null) return void 0;
+	if (typeof value === "number") return value;
+	const parts = value.trim().split(/\s+/).map((p) => parseCssDimension(p, rootSize));
+	const nums = parts.filter((p) => p != null);
+	if (nums.length !== parts.length) return void 0;
+	if (nums.length === 1) return nums[0];
+	if (nums.length === 2) return [nums[0], nums[1]];
+	if (nums.length === 3) return [
+		nums[0],
+		nums[1],
+		nums[2],
+		nums[1]
+	];
+	if (nums.length === 4) return [
+		nums[0],
+		nums[1],
+		nums[2],
+		nums[3]
+	];
+}
+/**
+* Parse a CSS font-weight value.
+*/
+function parseFontWeight(value) {
+	if (value == null) return void 0;
+	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;
+}
+/**
+* Parse a CSS line-height value to a unitless number.
+*/
+function parseLineHeight(value, rootSize = DEFAULT_ROOT_SIZE) {
+	if (value == null) return void 0;
+	if (typeof value === "number") return value;
+	if (value === "normal") return void 0;
+	const dim = parseCssDimension(value, rootSize);
+	if (dim != null) return dim;
+}
+
+//#endregion
+//#region src/resolveStyles.ts
+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.
+*/
+function resolveStyles(rocketstyle, rootSize = 16) {
+	const styles = {};
+	const fontSize = parseCssDimension(rocketstyle.fontSize, rootSize);
+	if (fontSize != null) styles.fontSize = fontSize;
+	if (typeof rocketstyle.fontFamily === "string") styles.fontFamily = rocketstyle.fontFamily;
+	const fontWeight = parseFontWeight(rocketstyle.fontWeight);
+	if (fontWeight != null) styles.fontWeight = fontWeight;
+	if (typeof rocketstyle.fontStyle === "string" && FONT_STYLE_VALUES.has(rocketstyle.fontStyle)) styles.fontStyle = rocketstyle.fontStyle;
+	if (typeof rocketstyle.textDecoration === "string" && TEXT_DECORATION_VALUES.has(rocketstyle.textDecoration)) styles.textDecoration = rocketstyle.textDecoration;
+	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;
+	const lineHeight = parseLineHeight(rocketstyle.lineHeight, rootSize);
+	if (lineHeight != null) styles.lineHeight = lineHeight;
+	const letterSpacing = parseCssDimension(rocketstyle.letterSpacing, rootSize);
+	if (letterSpacing != null) styles.letterSpacing = letterSpacing;
+	const padding = parseBoxModel(rocketstyle.padding, rootSize);
+	if (padding != null) styles.padding = padding;
+	const margin = parseBoxModel(rocketstyle.margin, rootSize);
+	if (margin != null) styles.margin = margin;
+	const borderRadius = parseCssDimension(rocketstyle.borderRadius, rootSize);
+	if (borderRadius != null) styles.borderRadius = borderRadius;
+	const borderWidth = parseCssDimension(rocketstyle.borderWidth, 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;
+	if (rocketstyle.width != null) styles.width = parseCssDimension(rocketstyle.width, rootSize) ?? rocketstyle.width;
+	if (rocketstyle.height != null) styles.height = parseCssDimension(rocketstyle.height, rootSize) ?? rocketstyle.height;
+	if (rocketstyle.maxWidth != null) styles.maxWidth = parseCssDimension(rocketstyle.maxWidth, rootSize) ?? rocketstyle.maxWidth;
+	if (typeof rocketstyle.opacity === "number") styles.opacity = rocketstyle.opacity;
+	return styles;
+}
+
+//#endregion
+//#region src/extractDocumentTree.ts
+function isVNode(value) {
+	return value != null && typeof value === "object" && "type" in value && "props" in value;
+}
+function getDocumentType(fn) {
+	if (typeof fn !== "function") return void 0;
+	const meta = fn.meta;
+	if (meta?._documentType) return meta._documentType;
+	if ("_documentType" in fn) return fn._documentType;
+}
+function flattenChildren(children) {
+	const result = [];
+	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
+	else if (typeof child === "function") {
+		const resolved = child();
+		if (Array.isArray(resolved)) result.push(...flattenChildren(resolved));
+		else result.push(resolved);
+	} else result.push(child);
+	return result;
+}
+function extractChildren(children, options) {
+	const flat = flattenChildren(children);
+	const result = [];
+	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, options) {
+	const { type, props, children } = vnode;
+	const includeStyles = options.includeStyles !== false;
+	const rootSize = options.rootSize ?? 16;
+	const docType = getDocumentType(type);
+	if (docType) {
+		const docProps = {};
+		if (props._documentProps && typeof props._documentProps === "object") Object.assign(docProps, props._documentProps);
+		const styles = includeStyles && props.$rocketstyle ? resolveStyles(props.$rocketstyle, rootSize) : void 0;
+		const node = {
+			type: docType,
+			props: docProps,
+			children: extractChildren(children ?? [], options)
+		};
+		if (styles && Object.keys(styles).length > 0) node.styles = styles;
+		return node;
+	}
+	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);
+		if (typeof result === "string") return [result];
+		if (typeof result === "number") return [String(result)];
+		return null;
+	}
+	if (typeof type === "string") {
+		const docChildren = extractChildren(children ?? [], options);
+		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.
+*/
+function extractDocumentTree(vnode, options = {}) {
+	if (isVNode(vnode)) {
+		const result = extractNode(vnode, options);
+		if (result && !Array.isArray(result)) return result;
+		return {
+			type: "document",
+			props: {},
+			children: Array.isArray(result) ? result : []
+		};
+	}
+	if (typeof vnode === "function") return extractDocumentTree(vnode(), options);
+	return {
+		type: "document",
+		props: {},
+		children: []
+	};
+}
+
+//#endregion
+export { extractDocumentTree, parseBoxModel, parseCssDimension, parseFontWeight, parseLineHeight, resolveStyles };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@pyreon/connector-document",
+  "version": "0.3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/ui-system",
+    "directory": "packages/connector-document"
+  },
+  "description": "Bridge between @pyreon/ui-system styled components and @pyreon/document rendering",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "source": "./src/index.ts",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "!lib/**/*.map",
+    "!lib/analysis",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublish": "bun run build",
+    "build": "bun run vl_rolldown_build",
+    "build:watch": "bun run vl_rolldown_build-watch",
+    "lint": "biome check src/",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pyreon/core": ">=0.7.0",
+    "@pyreon/document": ">=0.10.0"
+  },
+  "devDependencies": {
+    "@pyreon/core": "^0.7.11",
+    "@pyreon/document": "^0.10.0",
+    "@vitus-labs/tools-rolldown": "^1.15.4",
+    "@pyreon/typescript": "^0.7.11"
+  }
+}