@fulate/import 1.0.0

package/README.md

@@ -0,0 +1,39 @@
+# `@fulate/import`
+
+> 文档角色：`GUIDE`。权威来源：import adapter 源码与测试；当前文件 schema 和元素身份规则见 Core/UI 领域规范。
+
+`@fulate/import` 负责把当前支持的外部格式映射为 Fulate canonical creation input。它不是旧 Fulate
+版本兼容层，不提供旧 schema 协商、自动迁移或整树 validation；解析后的声明格式直接交给当前
+owner。
+
+## Fulate 文件
+
+```ts
+import {
+  serializeSceneToJSON,
+  parseFileData,
+  restoreScene
+} from "@fulate/import";
+
+const json = serializeSceneToJSON(root);
+const data = parseFileData(json);
+restoreScene(root, data);
+```
+
+`serializeScene()`/`serializeSceneToJSON()` 保存当前 Root 配置和元素树。当前 file marker 为
+`__fulate_file__`，`version` 为 `2`。`deserializeElement()`
+按 `type` 选择当前内建或调用者提供的 factory；文件中的 `key` 由 producer 保留，Core 不生成第二
+份身份。`exportToFile()` 与 `importFromFile()` 是浏览器文件 API 的薄适配。
+`parseFileData()` 只执行 JSON parse；声明格式错误和 restore 错误直接传播。History 属于应用组合层，
+成功恢复场景后由拥有 Select 的应用决定是否清空。
+
+## 自定义 factory
+
+通过 `ReadonlyMap<string, DeserializeFactory>` 或普通对象传入 custom factory。factory 直接返回
+当前 Element；不需要包装 DTO、预检整棵图或保留旧 reader。
+
+## Sketch
+
+`importSketch(file)` 解析 Sketch 输入并返回 `{ fileData, images, warnings }`；
+`importSketchFile(root, deserialize, filter?)` 负责文件选择、恢复和必要的导入警告。Sketch 的
+外部数据只在 adapter 边界映射，恢复后的场景继续使用当前 Fulate schema 与 owner。

package/dist/fulate/index.d.ts

@@ -0,0 +1,30 @@
+import { Element, type ElementJSON, type Root, type SkinOptions } from "@fulate/core";
+import type { ElementFilter } from "../util";
+export type { ElementFilter };
+export type DeserializeFactory = (data: Record<string, any>) => Element;
+export type DeserializeFactories = ReadonlyMap<string, DeserializeFactory> | Readonly<Record<string, DeserializeFactory>>;
+export interface FileData {
+    [key: string]: any;
+    __fulate_file__: true;
+    version: 2;
+    root?: {
+        viewport?: {
+            x?: number;
+            y?: number;
+            scale?: number;
+            minScale?: number;
+            maxScale?: number;
+        };
+        skin?: SkinOptions;
+        width?: number;
+        height?: number;
+    };
+    children: ElementJSON[];
+}
+export declare function serializeScene(root: Root, filter?: ElementFilter): FileData;
+export declare function serializeSceneToJSON(root: Root, filter?: ElementFilter): string;
+export declare function deserializeElement(data: Record<string, any>, factories?: DeserializeFactories): Element;
+export declare function restoreScene(root: Root, fileData: FileData, filter?: ElementFilter, factories?: DeserializeFactories): void;
+export declare function parseFileData(json: string): FileData;
+export declare function exportToFile(root: Root, filename?: string, filter?: ElementFilter): void;
+export declare function importFromFile(root: Root, filter?: ElementFilter, factories?: DeserializeFactories): Promise<boolean>;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export type { ImportResult, Importer } from "./types";
+export { importSketch, importSketchFile, SketchImporter } from "./sketch";
+export { serializeScene, serializeSceneToJSON, deserializeElement, restoreScene, parseFileData, exportToFile, importFromFile } from "./fulate";
+export type { FileData, DeserializeFactories, DeserializeFactory } from "./fulate";
+export { restoreScene as restoreSceneBase } from "./util";
+export type { ElementFilter, DeserializeFn, RestoreOptions } from "./util";

package/dist/index.js

@@ -0,0 +1,745 @@
+import { Element, Layer, Shape } from "@fulate/core";
+import { Circle, Group, Image, Line, LineTree, Polygon, Rectangle, RippleOverlay, ScrollView, Text, Triangle, VectorPath, Workspace } from "@fulate/ui";
+import { loadAsync } from "jszip";
+import { isNil, isUndefined } from "lodash-es";
+//#region packages/import/src/sketch/parser.ts
+async function parseSketchFile(data) {
+	const zip = await loadAsync(data instanceof File ? await data.arrayBuffer() : data);
+	const document = await readJSON(zip, "document.json");
+	const meta = await readJSON(zip, "meta.json");
+	const pages = [];
+	for (const ref of document.pages) {
+		const pagePath = `${ref._ref}.json`;
+		pages.push(await readJSON(zip, pagePath));
+	}
+	const images = /* @__PURE__ */ new Map();
+	const imagesFolder = zip.folder("images");
+	if (imagesFolder) {
+		const entries = [];
+		imagesFolder.forEach((relativePath, file) => {
+			if (!file.dir) entries.push({
+				name: relativePath,
+				file
+			});
+		});
+		for (const { name, file } of entries) images.set(`images/${name}`, await file.async("arraybuffer"));
+	}
+	return {
+		document,
+		meta,
+		pages,
+		images
+	};
+}
+async function readJSON(zip, path) {
+	const entry = zip.file(path);
+	if (!entry) throw new Error(`Missing ${path} in sketch file`);
+	const text = await entry.async("text");
+	return JSON.parse(text);
+}
+//#endregion
+//#region packages/import/src/sketch/style.ts
+function sketchColorToCSS(c) {
+	const r = Math.round(c.red * 255);
+	const g = Math.round(c.green * 255);
+	const b = Math.round(c.blue * 255);
+	if (c.alpha >= 1) return `rgb(${r},${g},${b})`;
+	return `rgba(${r},${g},${b},${parseFloat(c.alpha.toFixed(3))})`;
+}
+function convertStyle(style) {
+	const props = {};
+	const warnings = [];
+	if (!style) return {
+		props,
+		warnings
+	};
+	if (!isUndefined(style.windingRule)) props.fillRule = style.windingRule === 1 ? "evenodd" : "nonzero";
+	const opacity = style.contextSettings?.opacity ?? style.opacity;
+	if (!isUndefined(opacity) && opacity < 1) props.opacity = opacity;
+	const gradientFill = findFirstEnabled(style.fills, (f) => f.fillType === 1);
+	if (gradientFill?.gradient) props.backgroundColor = convertGradient(gradientFill.gradient);
+	else {
+		const fill = findFirstEnabled(style.fills, (f) => f.fillType === 0);
+		if (fill) props.backgroundColor = sketchColorToCSS(fill.color);
+	}
+	const gradientBorder = findFirstEnabled(style.borders, (b) => b.fillType === 1);
+	if (gradientBorder?.gradient) {
+		props.borderColor = convertGradient(gradientBorder.gradient);
+		props.borderWidth = gradientBorder.thickness;
+		props.borderPosition = convertBorderPosition(gradientBorder.position);
+	} else {
+		const border = findFirstEnabled(style.borders, (b) => b.fillType === 0);
+		if (border) {
+			props.borderColor = sketchColorToCSS(border.color);
+			props.borderWidth = border.thickness;
+			props.borderPosition = convertBorderPosition(border.position);
+		}
+	}
+	const shadow = findFirstEnabled(style.shadows);
+	if (shadow) props.shadow = convertShadow(shadow);
+	if (style.innerShadows?.some((s) => s.isEnabled)) warnings.push("Inner shadows not supported, skipped");
+	if (style.blur?.isEnabled) warnings.push("Blur effect not supported, skipped");
+	return {
+		props,
+		warnings
+	};
+}
+function convertBorderPosition(pos) {
+	if (pos === 2) return "outside";
+	return "inside";
+}
+function convertShadow(s) {
+	return {
+		color: sketchColorToCSS(s.color),
+		blur: s.blurRadius,
+		offsetX: s.offsetX,
+		offsetY: s.offsetY
+	};
+}
+function convertGradient(sg) {
+	const from = parseSketchNormalizedPoint(sg.from);
+	const to = parseSketchNormalizedPoint(sg.to);
+	return {
+		type: sg.gradientType === 0 ? "linear" : "radial",
+		from,
+		to,
+		...sg.gradientType === 1 ? {
+			center: from,
+			radius: .5
+		} : {},
+		stops: sg.stops.map((s) => ({
+			color: sketchColorToCSS(s.color),
+			position: s.position
+		}))
+	};
+}
+function parseSketchNormalizedPoint(str) {
+	const match = str.match(/\{([^,]+),\s*([^}]+)\}/);
+	if (!match) return {
+		x: .5,
+		y: .5
+	};
+	return {
+		x: parseFloat(match[1]),
+		y: parseFloat(match[2])
+	};
+}
+function findFirstEnabled(items, filter) {
+	if (!items) return void 0;
+	return items.find((item) => item.isEnabled && (!filter || filter(item)));
+}
+//#endregion
+//#region packages/import/src/sketch/text.ts
+function convertTextProps(layer) {
+	const result = {};
+	const attrStr = layer.attributedString;
+	if (!attrStr) return result;
+	result.text = attrStr.string;
+	result.overflow = "visible";
+	result.verticalAlign = "top";
+	result.wordWrap = false;
+	const dominant = getDominantAttribute(attrStr.attributes);
+	if (!dominant) return result;
+	const font = dominant.attributes.MSAttributedStringFontAttribute;
+	if (font) {
+		result.fontSize = font.attributes.size;
+		result.fontFamily = normalizeFontFamily(font.attributes.name);
+		if (isBoldFont(font.attributes.name)) result.fontWeight = "bold";
+		if (isItalicFont(font.attributes.name)) result.fontStyle = "italic";
+	}
+	const color = dominant.attributes.MSAttributedStringColorAttribute;
+	if (color) result.color = sketchColorToCSS(color);
+	const paragraph = dominant.attributes.paragraphStyle;
+	if (paragraph) {
+		result.textAlign = convertAlignment(paragraph.alignment);
+		if (paragraph.maximumLineHeight && result.fontSize) result.lineHeight = parseFloat((paragraph.maximumLineHeight / result.fontSize).toFixed(2));
+	}
+	if (dominant.attributes.underlineStyle) result.underline = true;
+	if (dominant.attributes.strikethroughStyle) result.strikethrough = true;
+	if (dominant.attributes.kerning) result.letterSpacing = dominant.attributes.kerning;
+	if (layer.style) {
+		const { props } = convertStyle(layer.style);
+		if (props.backgroundColor) result.color = props.backgroundColor;
+		if (props.borderColor && props.borderWidth) {
+			result.textStrokeColor = props.borderColor;
+			result.textStrokeWidth = props.borderWidth;
+		}
+		if (props.shadow) result.textShadow = props.shadow;
+	}
+	return result;
+}
+function getDominantAttribute(attrs) {
+	if (!attrs.length) return void 0;
+	if (attrs.length === 1) return attrs[0];
+	return attrs.reduce((a, b) => a.length >= b.length ? a : b);
+}
+function convertAlignment(alignment) {
+	switch (alignment) {
+		case 1: return "right";
+		case 2: return "center";
+		default: return "left";
+	}
+}
+function normalizeFontFamily(name) {
+	return name.replace(/-(Bold|Italic|Light|Medium|Regular|Thin|Black|Heavy|Semibold|UltraLight|ExtraBold|BoldItalic|MediumItalic|LightItalic)$/i, "").replace(/([a-z])([A-Z])/g, "$1 $2");
+}
+function isBoldFont(name) {
+	return /bold|black|heavy|extrabold|semibold/i.test(name);
+}
+function isItalicFont(name) {
+	return /italic|oblique/i.test(name);
+}
+//#endregion
+//#region packages/import/src/util/index.ts
+function defaultAppend(els, root) {
+	root.append(...els);
+}
+/**
+* 通用场景恢复模板：
+* 1. 应用 root 配置（resize、viewport、Skin）
+* 2. reset viewport
+* 3. 移除旧元素（由 filter 决定）
+* 4. 反序列化并添加 children（由 append 决定）
+* 5. requestRender
+*/
+function restoreScene$1(options) {
+	const { root, fileData, deserialize, append, filter } = options;
+	const toRemove = filter ? root.children.filter((child) => filter(child)) : [];
+	if (fileData.root) {
+		const { viewport, skin, width, height } = fileData.root;
+		if (skin) {
+			const { text, ...paint } = skin;
+			Object.assign(root.skin, paint);
+			if (text) Object.assign(root.skin.text, text);
+		}
+		if (!isNil(width) && !isNil(height)) root.resize(width, height);
+		if (viewport) root.viewport.restore({
+			x: viewport.x ?? 0,
+			y: viewport.y ?? 0,
+			scale: viewport.scale ?? 1
+		});
+		else root.viewport.reset();
+	} else root.viewport.reset();
+	if (toRemove.length) root.removeChild(...toRemove);
+	const els = fileData.children.map((data) => deserialize(data));
+	if (els.length) (append ?? defaultAppend)(els, root);
+	root.invalidateAll();
+}
+function pickFile(accept) {
+	return new Promise((resolve) => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = accept;
+		input.onchange = () => resolve(input.files?.[0] ?? null);
+		input.click();
+	});
+}
+function arrayBufferToDataURL(buf, mime) {
+	const bytes = new Uint8Array(buf);
+	let binary = "";
+	for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+	return `data:${mime};base64,${btoa(binary)}`;
+}
+function guessMimeType(path) {
+	switch (path.split(".").pop()?.toLowerCase()) {
+		case "jpg":
+		case "jpeg": return "image/jpeg";
+		case "png": return "image/png";
+		case "gif": return "image/gif";
+		case "webp": return "image/webp";
+		case "svg": return "image/svg+xml";
+		default: return "image/png";
+	}
+}
+//#endregion
+//#region packages/import/src/sketch/image.ts
+/**
+* Extract the image ref path from a bitmap layer and resolve it
+* to a data URL using the images extracted from the zip.
+*/
+function resolveImageSrc(layer, images) {
+	const ref = layer.image;
+	if (!ref) return void 0;
+	const refPath = ref._ref;
+	const buf = images.get(refPath);
+	if (!buf) return void 0;
+	return arrayBufferToDataURL(buf, guessMimeType(refPath));
+}
+//#endregion
+//#region packages/import/src/sketch/converter.ts
+function convertSketchToFileData(sketch) {
+	const warnings = [];
+	const imageDataURLs = /* @__PURE__ */ new Map();
+	const children = [];
+	const ctx = {
+		offsetX: 0,
+		offsetY: 0,
+		flipH: false,
+		flipV: false,
+		groupW: 0,
+		groupH: 0,
+		zipImages: sketch.images,
+		imageDataURLs,
+		warnings,
+		out: children
+	};
+	for (const page of sketch.pages) flattenLayers(page.layers ?? [], ctx);
+	return {
+		fileData: {
+			__fulate_file__: true,
+			version: 2,
+			children
+		},
+		images: imageDataURLs,
+		warnings
+	};
+}
+var MASK_SHAPE_TYPES = new Set([
+	"rectangle",
+	"circle",
+	"triangle",
+	"polygon",
+	"vectorPath"
+]);
+function flattenLayers(layers, ctx) {
+	for (let index = 0; index < layers.length;) {
+		const layer = layers[index];
+		if (!layer.isVisible || !layer.hasClippingMask) {
+			flattenLayer(layer, ctx);
+			index++;
+			continue;
+		}
+		if ((layer.clippingMaskMode ?? 0) !== 0) {
+			ctx.warnings.push(`[${layer.name}] alpha clipping mask not supported`);
+			flattenLayer(layer, ctx);
+			index++;
+			continue;
+		}
+		if (layer.rotation || layer.isFlippedHorizontal || layer.isFlippedVertical || ctx.flipH || ctx.flipV) {
+			ctx.warnings.push(`[${layer.name}] transformed clipping mask not supported`);
+			flattenLayer(layer, ctx);
+			index++;
+			continue;
+		}
+		let chainEnd = index + 1;
+		while (chainEnd < layers.length && !layers[chainEnd].shouldBreakMaskChain) chainEnd++;
+		const maskOutput = [];
+		flattenLayer(layer, {
+			...ctx,
+			out: maskOutput
+		});
+		const mask = maskOutput.length === 1 ? maskOutput[0] : void 0;
+		if (!mask || !MASK_SHAPE_TYPES.has(mask.type)) {
+			ctx.warnings.push(`[${layer.name}] clipping mask shape not supported`);
+			ctx.out.push(...maskOutput);
+			index++;
+			continue;
+		}
+		mask.overflow = "hidden";
+		const children = [];
+		flattenLayers(layers.slice(index + 1, chainEnd), {
+			...ctx,
+			out: children
+		});
+		for (const child of children) {
+			child.left -= mask.left;
+			child.top -= mask.top;
+		}
+		if (children.length) mask.children = children;
+		ctx.out.push(mask);
+		index = chainEnd;
+	}
+}
+function flattenLayer(layer, ctx) {
+	if (!layer.isVisible) return;
+	const cls = layer._class;
+	if (cls === "artboard") {
+		const childCtx = {
+			...ctx,
+			offsetX: ctx.offsetX,
+			offsetY: ctx.offsetY,
+			flipH: false,
+			flipV: false,
+			groupW: 0,
+			groupH: 0
+		};
+		flattenLayers(layer.layers ?? [], childCtx);
+		return;
+	}
+	if (cls === "group") {
+		let cx = ctx.offsetX + layer.frame.x;
+		let cy = ctx.offsetY + layer.frame.y;
+		if (ctx.flipH) cx = ctx.offsetX + (ctx.groupW - layer.frame.x - layer.frame.width);
+		if (ctx.flipV) cy = ctx.offsetY + (ctx.groupH - layer.frame.y - layer.frame.height);
+		const childCtx = {
+			...ctx,
+			offsetX: cx,
+			offsetY: cy,
+			flipH: ctx.flipH !== !!layer.isFlippedHorizontal,
+			flipV: ctx.flipV !== !!layer.isFlippedVertical,
+			groupW: layer.frame.width,
+			groupH: layer.frame.height
+		};
+		flattenLayers(layer.layers ?? [], childCtx);
+		return;
+	}
+	if (cls === "shapeGroup") {
+		const vectorPath = convertShapeGroup(layer, ctx);
+		if (vectorPath) ctx.out.push(vectorPath);
+		return;
+	}
+	const type = mapSketchClass(cls, layer, ctx.warnings);
+	if (!type) return;
+	const base = buildBase(layer, type, ctx);
+	switch (type) {
+		case "text":
+			delete base.backgroundColor;
+			delete base.borderColor;
+			delete base.borderWidth;
+			delete base.borderPosition;
+			delete base.shadow;
+			Object.assign(base, convertTextProps(layer));
+			break;
+		case "image":
+			assignImageSrc(base, layer, ctx);
+			break;
+		case "line":
+			assignLinePath(base, layer);
+			break;
+		case "polygon":
+			assignPolygonContour(base, layer);
+			break;
+		case "vectorPath":
+			assignVectorPath(base, layer);
+			break;
+	}
+	applyInheritedFlips(base, ctx);
+	ctx.out.push(base);
+}
+function applyInheritedFlips(base, ctx) {
+	if (ctx.flipH) base.scaleX = (base.scaleX ?? 1) * -1;
+	if (ctx.flipV) base.scaleY = (base.scaleY ?? 1) * -1;
+}
+function buildBase(layer, type, ctx) {
+	const { props, warnings: styleWarnings } = convertStyle(layer.style);
+	for (const w of styleWarnings) ctx.warnings.push(`[${layer.name}] ${w}`);
+	let left = ctx.offsetX + layer.frame.x;
+	let top = ctx.offsetY + layer.frame.y;
+	if (ctx.flipH) left = ctx.offsetX + (ctx.groupW - layer.frame.x - layer.frame.width);
+	if (ctx.flipV) top = ctx.offsetY + (ctx.groupH - layer.frame.y - layer.frame.height);
+	const base = {
+		type,
+		left,
+		top,
+		width: layer.frame.width,
+		height: layer.frame.height,
+		...props
+	};
+	if (layer.rotation) base.angle = -layer.rotation;
+	if (type === "rectangle" || type === "text" || type === "image") {
+		if (layer.fixedRadius) base.radius = layer.fixedRadius;
+		else if (layer.points?.length) {
+			const cr = layer.points[0].cornerRadius;
+			if (cr > 0) base.radius = cr;
+		}
+	}
+	if (layer.isFlippedHorizontal) base.scaleX = -1;
+	if (layer.isFlippedVertical) base.scaleY = -1;
+	return base;
+}
+var CLASS_MAP = {
+	rectangle: "rectangle",
+	oval: "circle",
+	triangle: "triangle",
+	text: "text",
+	bitmap: "image",
+	star: "polygon",
+	polygon: "polygon",
+	slice: "",
+	hotspot: "",
+	MSImmutableHotspotLayer: ""
+};
+function mapSketchClass(cls, layer, warnings) {
+	if (cls in CLASS_MAP) {
+		const mapped = CLASS_MAP[cls];
+		if (!mapped) return null;
+		if (cls === "star") warnings.push(`[${layer.name}] "${cls}" mapped to polygon`);
+		return mapped;
+	}
+	if (cls === "shapePath") return resolveShapePath(layer, warnings);
+	if (cls === "shapeGroup") return null;
+	warnings.push(`[${layer.name}] unsupported layer class "${cls}", skipped`);
+	return null;
+}
+function resolveShapePath(layer, warnings) {
+	const points = layer.points;
+	if (!points || points.length < 2) {
+		warnings.push(`[${layer.name}] shapePath with <2 points, skipped`);
+		return null;
+	}
+	if (points.some(hasCurveHandle)) return "vectorPath";
+	if (layer.isClosed) return "polygon";
+	return "line";
+}
+function hasCurveHandle(point) {
+	return hasOutgoingHandle(point) || hasIncomingHandle(point);
+}
+function hasOutgoingHandle(point) {
+	return point.hasCurveFrom ?? !sketchPointsNearEqual(point.point, point.curveFrom);
+}
+function hasIncomingHandle(point) {
+	return point.hasCurveTo ?? !sketchPointsNearEqual(point.point, point.curveTo);
+}
+function sketchPointsNearEqual(a, b, eps = 1e-6) {
+	if (a === b) return true;
+	const pa = parseSketchPointRaw(a);
+	const pb = parseSketchPointRaw(b);
+	if (!pa || !pb) return false;
+	return Math.abs(pa.x - pb.x) < eps && Math.abs(pa.y - pb.y) < eps;
+}
+function parseSketchPointRaw(str) {
+	const match = str.match(/\{([^,]+),\s*([^}]+)\}/);
+	if (!match) return null;
+	return {
+		x: parseFloat(match[1]),
+		y: parseFloat(match[2])
+	};
+}
+function convertShapeGroup(layer, ctx) {
+	const paths = (layer.layers ?? []).filter((child) => child.isVisible);
+	if (!(paths.length > 0 && paths.every((path) => path._class === "shapePath" && (path.booleanOperation === void 0 || path.booleanOperation === -1) && (path.points?.length ?? 0) >= 2))) {
+		ctx.warnings.push(`[${layer.name}] boolean or heterogeneous shapeGroup not supported, skipped`);
+		return null;
+	}
+	const base = buildBase(layer, "vectorPath", ctx);
+	base.path = paths.flatMap((path) => createVectorPathCommands(path, (point) => parseShapeGroupPoint(point, path)));
+	applyInheritedFlips(base, ctx);
+	return base;
+}
+function assignVectorPath(base, layer) {
+	const { width, height } = layer.frame;
+	base.path = createVectorPathCommands(layer, (point) => parseSketchPoint(point, width, height));
+}
+function createVectorPathCommands(layer, resolvePoint) {
+	const points = layer.points;
+	const commands = [{
+		type: "M",
+		point: resolvePoint(points[0].point)
+	}];
+	for (let index = 1; index < points.length; index++) appendSketchSegment(commands, points[index - 1], points[index], resolvePoint, false);
+	if (layer.isClosed) {
+		appendSketchSegment(commands, points[points.length - 1], points[0], resolvePoint, true);
+		commands.push({ type: "Z" });
+	}
+	return commands;
+}
+function appendSketchSegment(commands, from, to, resolvePoint, closing) {
+	const outgoing = hasOutgoingHandle(from);
+	const incoming = hasIncomingHandle(to);
+	if (outgoing || incoming) commands.push({
+		type: "C",
+		control1: resolvePoint(outgoing ? from.curveFrom : from.point),
+		control2: resolvePoint(incoming ? to.curveTo : to.point),
+		point: resolvePoint(to.point)
+	});
+	else if (!closing) commands.push({
+		type: "L",
+		point: resolvePoint(to.point)
+	});
+}
+function parseShapeGroupPoint(point, path) {
+	const { width, height, x: left, y: top } = path.frame;
+	let { x, y } = parseSketchPoint(point, width, height);
+	if (path.isFlippedHorizontal) x = width - x;
+	if (path.isFlippedVertical) y = height - y;
+	if (path.rotation) {
+		const centerX = width / 2;
+		const centerY = height / 2;
+		const radians = -path.rotation * Math.PI / 180;
+		const cos = Math.cos(radians);
+		const sin = Math.sin(radians);
+		const offsetX = x - centerX;
+		const offsetY = y - centerY;
+		x = centerX + offsetX * cos - offsetY * sin;
+		y = centerY + offsetX * sin + offsetY * cos;
+	}
+	return {
+		x: left + x,
+		y: top + y
+	};
+}
+function assignPolygonContour(base, layer) {
+	const points = layer.points;
+	if (!points?.length) return;
+	const { width, height } = layer.frame;
+	base.contour = points.map((p) => parseSketchPoint(p.point, width, height));
+}
+function assignLinePath(base, layer) {
+	const points = layer.points;
+	if (!points?.length) return;
+	const { width, height } = layer.frame;
+	let parsed = points.map((p) => parseSketchPoint(p.point, width, height));
+	if (base.angle) {
+		const cx = width / 2;
+		const cy = height / 2;
+		const rad = base.angle * Math.PI / 180;
+		const cos = Math.cos(rad);
+		const sin = Math.sin(rad);
+		parsed = parsed.map((p) => ({
+			x: cx + (p.x - cx) * cos - (p.y - cy) * sin,
+			y: cy + (p.x - cx) * sin + (p.y - cy) * cos
+		}));
+		delete base.angle;
+	}
+	const origin = parsed[0];
+	base.left += origin.x;
+	base.top += origin.y;
+	base.path = parsed.map((p) => ({
+		x: p.x - origin.x,
+		y: p.y - origin.y
+	}));
+	delete base.width;
+	delete base.height;
+	if (base.borderColor) {
+		base.strokeColor = base.borderColor;
+		delete base.borderColor;
+	}
+	if (base.borderWidth) {
+		base.strokeWidth = base.borderWidth;
+		delete base.borderWidth;
+	}
+	delete base.borderPosition;
+}
+function parseSketchPoint(str, frameW, frameH) {
+	const match = str.match(/\{([^,]+),\s*([^}]+)\}/);
+	if (!match) return {
+		x: 0,
+		y: 0
+	};
+	return {
+		x: parseFloat(match[1]) * frameW,
+		y: parseFloat(match[2]) * frameH
+	};
+}
+function assignImageSrc(base, layer, ctx) {
+	const src = resolveImageSrc(layer, ctx.zipImages);
+	if (src) {
+		base.src = src;
+		const ref = layer.image?._ref;
+		if (ref) ctx.imageDataURLs.set(ref, src);
+	} else ctx.warnings.push(`[${layer.name}] image resource not found`);
+}
+//#endregion
+//#region packages/import/src/sketch/index.ts
+var SketchImporter = class {
+	async import(file) {
+		return importSketch(file);
+	}
+};
+async function importSketch(file) {
+	return convertSketchToFileData(await parseSketchFile(file));
+}
+async function importSketchFile(root, deserialize, filter) {
+	const file = await pickFile(".sketch");
+	if (!file) return false;
+	const result = await importSketch(file);
+	if (result.warnings.length) console.warn("[Sketch Import]", result.warnings);
+	restoreScene$1({
+		root,
+		fileData: result.fileData,
+		deserialize,
+		filter,
+		append: (els, root) => {
+			const layer = new Layer();
+			const workspace = new Workspace({
+				key: "workspace",
+				width: 1920,
+				height: 1080
+			});
+			layer.append(workspace, ...els);
+			root.append(layer);
+		}
+	});
+	return true;
+}
+//#endregion
+//#region packages/import/src/fulate/index.ts
+var FILE_MARKER = "__fulate_file__";
+var FILE_VERSION = 2;
+var builtInConstructors = {
+	element: Element,
+	shape: Shape,
+	layer: Layer,
+	rectangle: Rectangle,
+	circle: Circle,
+	triangle: Triangle,
+	polygon: Polygon,
+	vectorPath: VectorPath,
+	text: Text,
+	image: Image,
+	workspace: Workspace,
+	group: Group,
+	scrollview: ScrollView,
+	line: Line,
+	lineTree: LineTree,
+	ripple: RippleOverlay
+};
+function normalizeType(type) {
+	return type.startsWith("f-") ? type.slice(2) : type;
+}
+var builtInFactories = Object.fromEntries(Object.entries(builtInConstructors).map(([type, Constructor]) => [type, (data) => {
+	const { type, children, ...options } = data;
+	return new Constructor(options);
+}]));
+function resolveFactory(type, factories) {
+	const normalized = normalizeType(type);
+	let custom;
+	if (factories instanceof Map) custom = factories.get(normalized);
+	else if (factories && Object.prototype.hasOwnProperty.call(factories, normalized)) custom = factories[normalized];
+	return custom ?? builtInFactories[normalized];
+}
+function serializeScene(root, filter) {
+	return {
+		[FILE_MARKER]: true,
+		version: FILE_VERSION,
+		root: root.toJSON(),
+		children: root.children.filter((child) => !filter || filter(child)).map((child) => child.toJSON())
+	};
+}
+function serializeSceneToJSON(root, filter) {
+	return JSON.stringify(serializeScene(root, filter));
+}
+function deserializeElement(data, factories) {
+	const element = resolveFactory(data.type, factories)(data);
+	if (data.children) element.replaceChildren(...data.children.map((child) => deserializeElement(child, factories)));
+	return element;
+}
+function restoreScene(root, fileData, filter, factories) {
+	restoreScene$1({
+		root,
+		fileData,
+		deserialize: (data) => deserializeElement(data, factories),
+		filter
+	});
+}
+function parseFileData(json) {
+	return JSON.parse(json);
+}
+function exportToFile(root, filename = "fulate-design.json", filter) {
+	const json = serializeSceneToJSON(root, filter);
+	const blob = new Blob([json], { type: "application/json" });
+	const url = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = filename;
+	anchor.click();
+	URL.revokeObjectURL(url);
+}
+async function importFromFile(root, filter, factories) {
+	const file = await pickFile(".json");
+	if (!file) return false;
+	restoreScene(root, parseFileData(await file.text()), filter, factories);
+	return true;
+}
+//#endregion
+export { SketchImporter, deserializeElement, exportToFile, importFromFile, importSketch, importSketchFile, parseFileData, restoreScene, restoreScene$1 as restoreSceneBase, serializeScene, serializeSceneToJSON };

package/dist/sketch/converter.d.ts

@@ -0,0 +1,3 @@
+import type { SketchFile } from "./types";
+import type { ImportResult } from "../types";
+export declare function convertSketchToFileData(sketch: SketchFile): ImportResult;

package/dist/sketch/image.d.ts

@@ -0,0 +1,6 @@
+import type { SketchLayer } from "./types";
+/**
+ * Extract the image ref path from a bitmap layer and resolve it
+ * to a data URL using the images extracted from the zip.
+ */
+export declare function resolveImageSrc(layer: SketchLayer, images: Map<string, ArrayBuffer>): string | undefined;

package/dist/sketch/index.d.ts

@@ -0,0 +1,8 @@
+import type { Root } from "@fulate/core";
+import type { Importer, ImportResult } from "../types";
+import type { ElementFilter, DeserializeFn } from "../util";
+export declare class SketchImporter implements Importer {
+    import(file: File | ArrayBuffer): Promise<ImportResult>;
+}
+export declare function importSketch(file: File | ArrayBuffer): Promise<ImportResult>;
+export declare function importSketchFile(root: Root, deserialize: DeserializeFn, filter?: ElementFilter): Promise<boolean>;

package/dist/sketch/parser.d.ts

@@ -0,0 +1,2 @@
+import type { SketchFile } from "./types";
+export declare function parseSketchFile(data: File | ArrayBuffer): Promise<SketchFile>;

package/dist/sketch/style.d.ts

@@ -0,0 +1,8 @@
+import type { SketchColor, SketchStyle } from "./types";
+import type { ShapeOption } from "@fulate/core";
+export declare function sketchColorToCSS(c: SketchColor): string;
+export interface StyleConvertResult {
+    props: Partial<ShapeOption>;
+    warnings: string[];
+}
+export declare function convertStyle(style: SketchStyle | undefined): StyleConvertResult;

package/dist/sketch/text.d.ts

@@ -0,0 +1,3 @@
+import type { SketchLayer } from "./types";
+import type { TextOption } from "@fulate/ui";
+export declare function convertTextProps(layer: SketchLayer): Partial<TextOption>;

package/dist/sketch/types.d.ts

@@ -0,0 +1,184 @@
+export interface SketchFile {
+    document: SketchDocument;
+    meta: SketchMeta;
+    pages: SketchPage[];
+    images: Map<string, ArrayBuffer>;
+}
+export interface SketchDocument {
+    _class: "document";
+    do_objectID: string;
+    assets: SketchAssets;
+    colorSpace: number;
+    pages: SketchPageRef[];
+}
+export interface SketchPageRef {
+    _class: "MSJSONFileReference";
+    _ref_class: "MSImmutablePage";
+    _ref: string;
+}
+export interface SketchAssets {
+    _class: "assetCollection";
+    colors: SketchColor[];
+    gradients: any[];
+    images: any[];
+}
+export interface SketchMeta {
+    commit: string;
+    appVersion: string;
+    build: number;
+    app: string;
+    pagesAndArtboards: Record<string, {
+        name: string;
+        artboards: Record<string, {
+            name: string;
+        }>;
+    }>;
+    version: number;
+}
+export interface SketchPage {
+    _class: "page";
+    do_objectID: string;
+    name: string;
+    layers: SketchLayer[];
+    frame: SketchRect;
+}
+export interface SketchLayer {
+    _class: string;
+    do_objectID: string;
+    name: string;
+    frame: SketchRect;
+    isVisible: boolean;
+    rotation: number;
+    isFlippedHorizontal: boolean;
+    isFlippedVertical: boolean;
+    isLocked: boolean;
+    style?: SketchStyle;
+    layers?: SketchLayer[];
+    attributedString?: SketchAttributedString;
+    image?: SketchImageRef;
+    fixedRadius?: number;
+    points?: SketchCurvePoint[];
+    isClosed?: boolean;
+    booleanOperation?: number;
+    hasClippingMask?: boolean;
+    shouldBreakMaskChain?: boolean;
+    clippingMaskMode?: number;
+}
+export interface SketchRect {
+    _class: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SketchStyle {
+    _class: "style";
+    windingRule?: number;
+    fills?: SketchFill[];
+    borders?: SketchBorder[];
+    shadows?: SketchShadow[];
+    innerShadows?: SketchShadow[];
+    blur?: SketchBlur;
+    opacity?: number;
+    contextSettings?: SketchGraphicsContextSettings;
+}
+export interface SketchGraphicsContextSettings {
+    _class: "graphicsContextSettings";
+    blendMode: number;
+    opacity: number;
+}
+export interface SketchFill {
+    _class: "fill";
+    isEnabled: boolean;
+    fillType: number;
+    color: SketchColor;
+    gradient?: SketchGradient;
+}
+export interface SketchBorder {
+    _class: "border";
+    isEnabled: boolean;
+    color: SketchColor;
+    thickness: number;
+    position: number;
+    fillType: number;
+    gradient?: SketchGradient;
+}
+export interface SketchShadow {
+    _class: "shadow" | "innerShadow";
+    isEnabled: boolean;
+    color: SketchColor;
+    blurRadius: number;
+    offsetX: number;
+    offsetY: number;
+    spread: number;
+}
+export interface SketchBlur {
+    _class: "blur";
+    isEnabled: boolean;
+    type: number;
+    radius: number;
+}
+export interface SketchColor {
+    _class: "color";
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+export interface SketchGradient {
+    _class: "gradient";
+    gradientType: number;
+    from: string;
+    to: string;
+    stops: SketchGradientStop[];
+}
+export interface SketchGradientStop {
+    _class: "gradientStop";
+    color: SketchColor;
+    position: number;
+}
+export interface SketchAttributedString {
+    _class: "attributedString";
+    string: string;
+    attributes: SketchStringAttribute[];
+}
+export interface SketchStringAttribute {
+    _class: "stringAttribute";
+    location: number;
+    length: number;
+    attributes: {
+        MSAttributedStringFontAttribute: {
+            _class: "fontDescriptor";
+            attributes: {
+                name: string;
+                size: number;
+            };
+        };
+        MSAttributedStringColorAttribute?: SketchColor;
+        paragraphStyle?: {
+            _class: "paragraphStyle";
+            alignment?: number;
+            maximumLineHeight?: number;
+            minimumLineHeight?: number;
+        };
+        kerning?: number;
+        textStyleVerticalAlignmentKey?: number;
+        underlineStyle?: number;
+        strikethroughStyle?: number;
+    };
+}
+export interface SketchImageRef {
+    _class: "MSJSONFileReference" | "MSJSONOriginalDataReference";
+    _ref_class: "MSImageData";
+    _ref: string;
+}
+export interface SketchCurvePoint {
+    _class: "curvePoint";
+    point: string;
+    curveFrom: string;
+    curveTo: string;
+    hasCurveFrom?: boolean;
+    hasCurveTo?: boolean;
+    cornerRadius: number;
+    curveMode: number;
+}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { FileData } from "./fulate";
+export interface ImportResult {
+    fileData: FileData;
+    /** imageRef → data URL */
+    images: Map<string, string>;
+    warnings: string[];
+}
+export interface Importer {
+    import(file: File | ArrayBuffer): Promise<ImportResult>;
+}

package/dist/util/index.d.ts

@@ -0,0 +1,25 @@
+import type { Root, Element } from "@fulate/core";
+import type { FileData } from "../fulate";
+export type ElementFilter = (element: Element) => boolean;
+export type DeserializeFn = (data: any) => Element;
+export interface RestoreOptions {
+    root: Root;
+    fileData: FileData;
+    deserialize: DeserializeFn;
+    /** 决定把反序列化后的元素添加到哪里、怎么添加 */
+    append?: (els: Element[], root: Root) => void;
+    /** 决定清除哪些旧元素，不传则不清除 */
+    filter?: ElementFilter;
+}
+/**
+ * 通用场景恢复模板：
+ * 1. 应用 root 配置（resize、viewport、Skin）
+ * 2. reset viewport
+ * 3. 移除旧元素（由 filter 决定）
+ * 4. 反序列化并添加 children（由 append 决定）
+ * 5. requestRender
+ */
+export declare function restoreScene(options: RestoreOptions): void;
+export declare function pickFile(accept: string): Promise<File | null>;
+export declare function arrayBufferToDataURL(buf: ArrayBuffer, mime: string): string;
+export declare function guessMimeType(path: string): string;

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@fulate/import",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --config vitest.config.ts"
+  },
+  "dependencies": {
+    "@fulate/share": "*",
+    "@fulate/core": "*",
+    "@fulate/ui": "*",
+    "jszip": "^3.10.1",
+    "lodash-es": "^4.17.22"
+  }
+}