@yahoo/uds-create-config 4.11.0 → 4.12.1

package/dist/capture/node-ops.js

@@ -0,0 +1,146 @@
+import { CapturedNode } from "./captured-tree.js";
+import { pathOf } from "../framework/utils/refs.js";
+import { rejectData } from "../framework/rejection.js";
+import { pathInput } from "../framework/schemas.js";
+import { specFromCapture } from "./capture-to-spec.js";
+import { specToNodePatches } from "./node-patches.js";
+import { z } from "zod";
+//#region src/capture/node-ops.ts
+/**
+* The capture op on a canvas node: a captured page becomes an artboard's rows. It reads the system
+* the canvas draws on, so a component's classes, layers and slots map back through the same config
+* that emitted them.
+*/
+const DEFAULT_WIDTH = 1600;
+const frameSchema = z.object({
+	type: z.string().min(1),
+	props: z.record(z.string(), z.unknown()).optional()
+});
+const fromHtmlData = z.object({
+	/** The captured page, parsed by the host into the captured-tree shape. */
+	tree: CapturedNode,
+	/** The artboard's name. */
+	label: z.string().min(1).max(200).optional(),
+	/** The page to place the artboard on. */
+	page: z.string().min(1).optional(),
+	x: z.number().optional(),
+	y: z.number().optional(),
+	/** The frame width; also recorded on the spec, and what `100vw` measures inside it. */
+	width: z.number().min(100).max(4e3).optional(),
+	/** The captured viewport's height, what `100vh` measures inside the frame. */
+	height: z.number().min(100).max(8e3).optional(),
+	/** Wraps the capture's top-level components; required when there are several. */
+	frame: frameSchema.optional(),
+	/** Convert only the subtree this selector finds. */
+	selector: z.string().optional(),
+	/** Children kept per element; `0` keeps every child. */
+	childCap: z.number().int().nonnegative().optional()
+});
+const fromHtmlInput = z.object({
+	path: pathInput("node"),
+	data: fromHtmlData
+});
+/** The system this canvas draws on, with the slug node types are qualified by. */
+function attachedSystem(config) {
+	const [source] = config.list("system-source");
+	const system = source ? config.sourceFor(source.path) : void 0;
+	if (!source || !system) return rejectData("This canvas has no system attached, so there is no component grammar to read a capture with.");
+	return {
+		slug: source.path,
+		system
+	};
+}
+function pageOf(body) {
+	return body.page ? pathOf(body.page) : void 0;
+}
+/** The placed nodes holding content on `page`, earliest first by stacking order. */
+function artboardsOn(config, page) {
+	const out = [];
+	for (const node of config.list("node")) {
+		const body = node.body;
+		if (pageOf(body) !== page) continue;
+		if (!body.type && body.linkedSource == null) continue;
+		out.push({
+			id: node.path,
+			order: body.order ?? Number.NEGATIVE_INFINITY
+		});
+	}
+	return out.sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));
+}
+function convert(config, input) {
+	const { slug, system } = attachedSystem(config);
+	const data = input.data;
+	if (config.resolve("node", input.path)) return rejectData(`Node "${input.path}" already exists; pick a path that is free.`, ["path"]);
+	if (!data.page) return rejectData(`Pass \`page\` (and \`label\`) to place node "${input.path}".`, ["data", "page"]);
+	if (!config.resolve("page", data.page)) return rejectData(`Page "${data.page}" does not exist.`, ["data", "page"]);
+	let converted;
+	try {
+		converted = specFromCapture({
+			tree: data.tree,
+			config: system,
+			selector: data.selector,
+			root: data.frame,
+			width: data.width ?? DEFAULT_WIDTH,
+			height: data.height,
+			childCap: data.childCap ?? 0
+		});
+	} catch (error) {
+		return rejectData(error instanceof Error ? error.message : String(error));
+	}
+	const front = artboardsOn(config, data.page).at(-1);
+	const placement = {
+		page: data.page,
+		x: data.x,
+		y: data.y,
+		width: data.width ?? DEFAULT_WIDTH,
+		label: data.label ?? input.path,
+		order: front && Number.isFinite(front.order) ? front.order + 1 : 1
+	};
+	return specToNodePatches({
+		config,
+		nodeId: input.path,
+		spec: converted.spec,
+		slug,
+		placement
+	});
+}
+const fromHtmlExample = () => ({
+	path: "screen-home",
+	data: {
+		label: "Home",
+		page: "home",
+		width: 1600,
+		frame: {
+			type: "component:Box",
+			props: { position: "relative" }
+		},
+		tree: {
+			tag: "body",
+			children: [{
+				tag: "div",
+				attrs: {
+					"data-uds-component": "Box",
+					"data-uds-layer": "root",
+					class: "uds-primitives-box-root uds-p-4"
+				},
+				children: ["Hello"]
+			}]
+		}
+	}
+});
+const captureNodeOps = { "from-html": {
+	input: fromHtmlInput,
+	readOnly: false,
+	label: "Artboard from a captured page",
+	description: "Turn a captured page into this node's content: each rendered component becomes an element with the props its classes, inline style and stamps say, its layers become slots, and the whole becomes the node's rows. `tree` is the page parsed into the captured-tree shape (a host that accepts raw HTML parses it first). The node is placed on `page` with `label`; a path that already exists is refused.",
+	scope: "item",
+	approval: "destructive",
+	title: (entity) => `Fill ${entity} from a captured page`,
+	example: fromHtmlExample,
+	handler: (input, config) => {
+		const patches = convert(config, fromHtmlInput.parse(input));
+		return patches.length === 0 ? config : config.applyAll(patches);
+	}
+} };
+//#endregion
+export { captureNodeOps };

package/dist/capture/node-patches.d.ts

@@ -0,0 +1,32 @@
+import { Config, Patch } from "../framework/Config.js";
+import { Spec } from "./capture-to-spec.js";
+
+//#region src/capture/node-patches.d.ts
+interface Placement {
+  readonly page: string;
+  readonly x?: number;
+  readonly y?: number;
+  readonly width: number;
+  readonly label?: string;
+  readonly order?: number;
+}
+/**
+ * The patches that place `nodeId` holding `spec`: a create per subtree row, children before the
+ * rows that point at them, then the placed node itself with its placement. The node must not exist
+ * yet; a paste mints a fresh id, so a path that is taken is the caller's mistake, not a refill.
+ */
+declare function specToNodePatches({
+  config,
+  nodeId,
+  spec,
+  slug,
+  placement
+}: {
+  readonly config: Config;
+  readonly nodeId: string;
+  readonly spec: Spec;
+  readonly slug: string;
+  readonly placement: Placement;
+}): Patch[];
+//#endregion
+export { specToNodePatches };

package/dist/capture/node-patches.js

@@ -0,0 +1,99 @@
+import { ref } from "../framework/utils/refs.js";
+//#region src/capture/node-patches.ts
+/**
+* A spec as the node rows of one new placed node. A placed node's content is its subtree rows, one
+* per element, at `<node>/<element key>`, each pointing at its children by ref; the root element's
+* content lives on the placed node itself beside its placement.
+*/
+const INTRINSIC_TAG = /^[a-z][a-zA-Z0-9-]*$/;
+const SPEC_PRIMITIVES = new Set(["Slot", "Fragment"]);
+/** A spec element's `type` as the ref a node row stores, qualified with the system's slug. */
+function elementTypeRef({ type, slug }) {
+	const colon = type.indexOf(":");
+	if (colon !== -1) return ref(type.slice(0, colon), type.slice(colon + 1), slug);
+	if (INTRINSIC_TAG.test(type)) return ref("html", type);
+	if (SPEC_PRIMITIVES.has(type)) return ref("spec", type);
+	return ref("component", type, slug);
+}
+/** The content fields of one element as a node row holds them. */
+function elementNodeFields({ element, nodeId, slug }) {
+	const sub = (key) => ref("node", `${nodeId}/${key}`);
+	const slots = {};
+	for (const [name, fills] of Object.entries(element.slots ?? {})) slots[name] = fills.map(sub);
+	return {
+		type: elementTypeRef({
+			type: element.type,
+			slug
+		}),
+		props: element.props ?? {},
+		...element.children?.length ? { children: element.children.map(sub) } : {},
+		...Object.keys(slots).length > 0 ? { slots } : {},
+		...element.ref !== void 0 ? { ref: element.ref } : {},
+		...element.visible !== void 0 ? { visible: element.visible } : {},
+		...element.repeat !== void 0 ? { repeat: element.repeat } : {}
+	};
+}
+/** Element keys in the order a write needs: children before the element that points at them. */
+function postOrder(spec) {
+	const out = [];
+	const seen = /* @__PURE__ */ new Set();
+	const visit = (key) => {
+		if (seen.has(key)) return;
+		seen.add(key);
+		const el = spec.elements[key];
+		if (!el) return;
+		for (const child of el.children ?? []) visit(child);
+		for (const fills of Object.values(el.slots ?? {})) for (const child of fills) visit(child);
+		out.push(key);
+	};
+	visit(spec.root);
+	return out;
+}
+/**
+* The patches that place `nodeId` holding `spec`: a create per subtree row, children before the
+* rows that point at them, then the placed node itself with its placement. The node must not exist
+* yet; a paste mints a fresh id, so a path that is taken is the caller's mistake, not a refill.
+*/
+function specToNodePatches({ config, nodeId, spec, slug, placement }) {
+	if (config.resolve("node", nodeId)) throw new Error(`Node "${nodeId}" already exists; pick a path that is free.`);
+	const patches = [];
+	for (const key of postOrder(spec)) {
+		if (key === spec.root) continue;
+		patches.push({
+			kind: "node",
+			operation: "create",
+			path: `${nodeId}/${key}`,
+			data: elementNodeFields({
+				element: spec.elements[key],
+				nodeId,
+				slug
+			})
+		});
+	}
+	patches.push({
+		kind: "node",
+		operation: "create",
+		path: nodeId,
+		data: {
+			...elementNodeFields({
+				element: spec.elements[spec.root],
+				nodeId,
+				slug
+			}),
+			meta: spec.meta,
+			page: ref("page", placement.page),
+			x: placement.x ?? 0,
+			y: placement.y ?? 0,
+			size: {
+				type: "custom",
+				width: placement.width,
+				height: 0
+			},
+			...placement.label !== void 0 ? { label: placement.label } : {},
+			...placement.order !== void 0 ? { order: placement.order } : {}
+		}
+	});
+	return patches;
+}
+//#endregion
+export { specToNodePatches };

package/dist/configs/CanvasConfig.d.ts

@@ -6,11 +6,11 @@ import { ComponentContractOf, PathOf } from "../framework/registered.js";
 import { EntityClass, GroupComputedInput } from "../framework/defineEntity.js";
 import { ConfigClass, ConfigInstance } from "../framework/defineConfig.js";
 import { Config } from "../framework/Config.js";
+import { GlyphNamespace } from "../entities/system/glyph-identity.js";
 import { StoredPreviewCondition } from "../framework/preview-store.js";
 import { listSlots, namedSlots, slotHostedBy, slotOf } from "../spec/slot.js";
 import { cellAt } from "../spec/cell.js";
 import { instanceAt } from "../spec/instance.js";
-import { GlyphNamespace } from "../entities/system/glyph-identity.js";
 import { ReactNativeSystem } from "./react-native-system.js";
 import { System } from "./system.js";
 import { AnySystemConfig } from "./platform.js";

package/dist/configs/CanvasConfig.js

@@ -2,8 +2,9 @@ import { AI_LANES } from "../ai-lanes.js";
 import { defineEntity } from "../framework/defineEntity.js";
 import { Package } from "../entities/system/Package.js";
 import { Component } from "../entities/system/Component.js";
-import { Device } from "../entities/system/Device.js";
 import { Icon } from "../entities/system/Icon.js";
+import { captureNodeOps } from "../capture/node-ops.js";
+import { Device } from "../entities/system/Device.js";
 import { Operation } from "../entities/system/Operation.js";
 import { Tool } from "../entities/system/Tool.js";
 import { defineConfig } from "../framework/defineConfig.js";
@@ -211,6 +212,7 @@ const Size = z.discriminatedUnion("type", [z.object({
 */
 const Node = defineEntity({
 	kind: "node",
+	schemas: captureNodeOps,
 	fields: z.object({
 		/** A real ref, never a bare name — dependents()/rename-cascade need a real edge, and a bare
 		*  `kind:path` string the framework never walks gives neither. Absent only on a placeholder

package/dist/configs/react-native-system.d.ts

@@ -1,5 +1,5 @@
-import { Ref } from "../framework/utils/ref-grammar.js";
 import { CopyPlan } from "../entities/system/copy-plan.js";
+import { Ref } from "../framework/utils/ref-grammar.js";
 import { SubEntityClass } from "../framework/defineSubEntity.js";
 import { ComputedInput } from "../framework/registry.js";
 import { DerivedEntityClass } from "../framework/defineDerivedEntity.js";
@@ -9,12 +9,12 @@ import { ConfigClass } from "../framework/defineConfig.js";
 import { PinOptionsField } from "../entities/system/LinkedSystem.js";
 import { BreakPlan, LinkPlan, SourceRowState, UnlinkPlan } from "../entities/system/link-plan.js";
 import { Config } from "../framework/Config.js";
+import { GlyphNamespace } from "../entities/system/glyph-identity.js";
 import { StylePropValue } from "../entities/system/StyleProperty.js";
 import { StoredPreviewCondition } from "../framework/preview-store.js";
 import { listSlots, namedSlots, slotHostedBy, slotOf } from "../spec/slot.js";
 import { cellAt } from "../spec/cell.js";
 import { instanceAt } from "../spec/instance.js";
-import { GlyphNamespace } from "../entities/system/glyph-identity.js";
 import { DerivedColor, Gradient } from "../entities/system/color.js";
 import { StyleValue } from "../entities/system/style-bag.js";
 import { ComponentElementBody, ComponentReference, ComponentStyleBody } from "../entities/system/Component.js";
@@ -1144,8 +1144,8 @@ declare const ReactNativeSystem: ConfigClass<{
     value: _$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodNumber]>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
     type: _$zod.ZodOptional<_$zod.ZodEnum<{
-      mode: "mode";
       state: "state";
+      mode: "mode";
     }>>;
     default: _$zod.ZodOptional<_$zod.ZodObject<{
       __ref: _$zod.ZodString;
@@ -1159,7 +1159,7 @@ declare const ReactNativeSystem: ConfigClass<{
     arbitrary: _$zod.ZodDefault<_$zod.ZodBoolean>;
     negates: _$zod.ZodDefault<_$zod.ZodBoolean>;
     opacityOf: _$zod.ZodOptional<_$zod.ZodLazy<_$zod.ZodType<Ref, unknown, _$zod_v4_core0.$ZodTypeInternals<Ref, unknown>>>>;
-  }, "values" | "properties" | "classPrefix"> & {
+  }, "values" | "classPrefix" | "properties"> & {
     properties: _$zod.ZodArray<_$zod.ZodPipe<_$zod.ZodPipe<_$zod.ZodString, _$zod.ZodTransform<string, string>>, _$zod.ZodEnum<{
       filter: "filter";
       transform: "transform";
@@ -1184,7 +1184,14 @@ declare const ReactNativeSystem: ConfigClass<{
       overflow: "overflow";
       padding: "padding";
       width: "width";
+      elevation: "elevation";
       fontFamily: "fontFamily";
+      fontSize: "fontSize";
+      fontStyle: "fontStyle";
+      fontVariant: "fontVariant";
+      fontWeight: "fontWeight";
+      letterSpacing: "letterSpacing";
+      pointerEvents: "pointerEvents";
       alignContent: "alignContent";
       alignItems: "alignItems";
       alignSelf: "alignSelf";
@@ -1226,7 +1233,6 @@ declare const ReactNativeSystem: ConfigClass<{
       boxShadow: "boxShadow";
       boxSizing: "boxSizing";
       columnGap: "columnGap";
-      elevation: "elevation";
       experimental_backgroundImage: "experimental_backgroundImage";
       experimental_backgroundPosition: "experimental_backgroundPosition";
       experimental_backgroundRepeat: "experimental_backgroundRepeat";
@@ -1236,10 +1242,6 @@ declare const ReactNativeSystem: ConfigClass<{
       flexGrow: "flexGrow";
       flexShrink: "flexShrink";
       flexWrap: "flexWrap";
-      fontSize: "fontSize";
-      fontStyle: "fontStyle";
-      fontVariant: "fontVariant";
-      fontWeight: "fontWeight";
       includeFontPadding: "includeFontPadding";
       insetBlock: "insetBlock";
       insetBlockEnd: "insetBlockEnd";
@@ -1248,7 +1250,6 @@ declare const ReactNativeSystem: ConfigClass<{
       insetInlineEnd: "insetInlineEnd";
       insetInlineStart: "insetInlineStart";
       justifyContent: "justifyContent";
-      letterSpacing: "letterSpacing";
       lineHeight: "lineHeight";
       marginBlock: "marginBlock";
       marginBlockEnd: "marginBlockEnd";
@@ -1289,7 +1290,6 @@ declare const ReactNativeSystem: ConfigClass<{
       paddingStart: "paddingStart";
       paddingTop: "paddingTop";
       paddingVertical: "paddingVertical";
-      pointerEvents: "pointerEvents";
       resizeMode: "resizeMode";
       rotation: "rotation";
       rowGap: "rowGap";
@@ -1442,6 +1442,10 @@ declare const ReactNativeSystem: ConfigClass<{
       }, _$zod_v4_core0.$strip>;
       default: _$zod.ZodOptional<_$zod.ZodBoolean>;
       defaultProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+      props: _$zod.ZodOptional<_$zod.ZodObject<{
+        glyph: _$zod.ZodString;
+        axes: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+      }, _$zod_v4_core0.$strip>>;
     }, _$zod_v4_core0.$strip>>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "canvas-role", {
     readonly create: {
@@ -2970,8 +2974,8 @@ declare const ReactNativeSystem: ConfigClass<{
       value: _$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodNumber]>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
       type: _$zod.ZodOptional<_$zod.ZodEnum<{
-        mode: "mode";
         state: "state";
+        mode: "mode";
       }>>;
       default: _$zod.ZodOptional<_$zod.ZodObject<{
         __ref: _$zod.ZodString;
@@ -2985,7 +2989,7 @@ declare const ReactNativeSystem: ConfigClass<{
       arbitrary: _$zod.ZodDefault<_$zod.ZodBoolean>;
       negates: _$zod.ZodDefault<_$zod.ZodBoolean>;
       opacityOf: _$zod.ZodOptional<_$zod.ZodLazy<_$zod.ZodType<Ref, unknown, _$zod_v4_core0.$ZodTypeInternals<Ref, unknown>>>>;
-    }, "values" | "properties" | "classPrefix"> & {
+    }, "values" | "classPrefix" | "properties"> & {
       properties: _$zod.ZodArray<_$zod.ZodPipe<_$zod.ZodPipe<_$zod.ZodString, _$zod.ZodTransform<string, string>>, _$zod.ZodEnum<{
         filter: "filter";
         transform: "transform";
@@ -3010,7 +3014,14 @@ declare const ReactNativeSystem: ConfigClass<{
         overflow: "overflow";
         padding: "padding";
         width: "width";
+        elevation: "elevation";
         fontFamily: "fontFamily";
+        fontSize: "fontSize";
+        fontStyle: "fontStyle";
+        fontVariant: "fontVariant";
+        fontWeight: "fontWeight";
+        letterSpacing: "letterSpacing";
+        pointerEvents: "pointerEvents";
         alignContent: "alignContent";
         alignItems: "alignItems";
         alignSelf: "alignSelf";
@@ -3052,7 +3063,6 @@ declare const ReactNativeSystem: ConfigClass<{
         boxShadow: "boxShadow";
         boxSizing: "boxSizing";
         columnGap: "columnGap";
-        elevation: "elevation";
         experimental_backgroundImage: "experimental_backgroundImage";
         experimental_backgroundPosition: "experimental_backgroundPosition";
         experimental_backgroundRepeat: "experimental_backgroundRepeat";
@@ -3062,10 +3072,6 @@ declare const ReactNativeSystem: ConfigClass<{
         flexGrow: "flexGrow";
         flexShrink: "flexShrink";
         flexWrap: "flexWrap";
-        fontSize: "fontSize";
-        fontStyle: "fontStyle";
-        fontVariant: "fontVariant";
-        fontWeight: "fontWeight";
         includeFontPadding: "includeFontPadding";
         insetBlock: "insetBlock";
         insetBlockEnd: "insetBlockEnd";
@@ -3074,7 +3080,6 @@ declare const ReactNativeSystem: ConfigClass<{
         insetInlineEnd: "insetInlineEnd";
         insetInlineStart: "insetInlineStart";
         justifyContent: "justifyContent";
-        letterSpacing: "letterSpacing";
         lineHeight: "lineHeight";
         marginBlock: "marginBlock";
         marginBlockEnd: "marginBlockEnd";
@@ -3115,7 +3120,6 @@ declare const ReactNativeSystem: ConfigClass<{
         paddingStart: "paddingStart";
         paddingTop: "paddingTop";
         paddingVertical: "paddingVertical";
-        pointerEvents: "pointerEvents";
         resizeMode: "resizeMode";
         rotation: "rotation";
         rowGap: "rowGap";
@@ -3268,6 +3272,10 @@ declare const ReactNativeSystem: ConfigClass<{
         }, _$zod_v4_core0.$strip>;
         default: _$zod.ZodOptional<_$zod.ZodBoolean>;
         defaultProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+        props: _$zod.ZodOptional<_$zod.ZodObject<{
+          glyph: _$zod.ZodString;
+          axes: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+        }, _$zod_v4_core0.$strip>>;
       }, _$zod_v4_core0.$strip>>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "canvas-role", {
       readonly create: {

package/dist/configs/react-native-system.js

@@ -3,8 +3,8 @@ import { Composite } from "../entities/system/Composite.js";
 import { Package } from "../entities/system/Package.js";
 import { File } from "../entities/system/File.js";
 import { Component } from "../entities/system/Component.js";
-import { Device } from "../entities/system/Device.js";
 import { Icon } from "../entities/system/Icon.js";
+import { Device } from "../entities/system/Device.js";
 import { Operation } from "../entities/system/Operation.js";
 import { Tool } from "../entities/system/Tool.js";
 import { registerSchemaMigrations, registeredSchemaMigrations } from "../framework/schema-version.js";

package/dist/configs/system.d.ts

@@ -1,5 +1,5 @@
-import { Ref } from "../framework/utils/ref-grammar.js";
 import { CopyPlan } from "../entities/system/copy-plan.js";
+import { Ref } from "../framework/utils/ref-grammar.js";
 import { SubEntityClass } from "../framework/defineSubEntity.js";
 import { ComputedInput } from "../framework/registry.js";
 import { DerivedEntityClass } from "../framework/defineDerivedEntity.js";
@@ -9,12 +9,12 @@ import { ConfigClass } from "../framework/defineConfig.js";
 import { PinOptionsField } from "../entities/system/LinkedSystem.js";
 import { BreakPlan, LinkPlan, SourceRowState, UnlinkPlan } from "../entities/system/link-plan.js";
 import { Config } from "../framework/Config.js";
+import { GlyphNamespace } from "../entities/system/glyph-identity.js";
 import { StylePropValue } from "../entities/system/StyleProperty.js";
 import { StoredPreviewCondition } from "../framework/preview-store.js";
 import { listSlots, namedSlots, slotHostedBy, slotOf } from "../spec/slot.js";
 import { cellAt } from "../spec/cell.js";
 import { instanceAt } from "../spec/instance.js";
-import { GlyphNamespace } from "../entities/system/glyph-identity.js";
 import { DerivedColor, Gradient } from "../entities/system/color.js";
 import { StyleValue } from "../entities/system/style-bag.js";
 import { ComponentElementBody, ComponentReference, ComponentStyleBody } from "../entities/system/Component.js";
@@ -1133,8 +1133,8 @@ declare const System: ConfigClass<{
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "composite", Record<never, never>, Record<never, never>, false, Record<never, never>, Record<never, never>>>]>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
     type: _$zod.ZodOptional<_$zod.ZodEnum<{
-      mode: "mode";
       state: "state";
+      mode: "mode";
     }>>;
     default: _$zod.ZodOptional<_$zod.ZodObject<{
       __ref: _$zod.ZodString;
@@ -1296,6 +1296,10 @@ declare const System: ConfigClass<{
       }, _$zod_v4_core0.$strip>;
       default: _$zod.ZodOptional<_$zod.ZodBoolean>;
       defaultProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+      props: _$zod.ZodOptional<_$zod.ZodObject<{
+        glyph: _$zod.ZodString;
+        axes: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+      }, _$zod_v4_core0.$strip>>;
     }, _$zod_v4_core0.$strip>>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "canvas-role", {
     readonly create: {
@@ -2831,8 +2835,8 @@ declare const System: ConfigClass<{
       }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "composite", Record<never, never>, Record<never, never>, false, Record<never, never>, Record<never, never>>>]>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
       type: _$zod.ZodOptional<_$zod.ZodEnum<{
-        mode: "mode";
         state: "state";
+        mode: "mode";
       }>>;
       default: _$zod.ZodOptional<_$zod.ZodObject<{
         __ref: _$zod.ZodString;
@@ -2994,6 +2998,10 @@ declare const System: ConfigClass<{
         }, _$zod_v4_core0.$strip>;
         default: _$zod.ZodOptional<_$zod.ZodBoolean>;
         defaultProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+        props: _$zod.ZodOptional<_$zod.ZodObject<{
+          glyph: _$zod.ZodString;
+          axes: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+        }, _$zod_v4_core0.$strip>>;
       }, _$zod_v4_core0.$strip>>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "canvas-role", {
       readonly create: {

package/dist/configs/system.js

@@ -1,13 +1,13 @@
+import { Settings } from "../entities/system/Settings.js";
 import { Font } from "../entities/system/Font.js";
 import { Composite } from "../entities/system/Composite.js";
 import { Modifier } from "../entities/system/Modifier.js";
-import { Settings } from "../entities/system/Settings.js";
 import { StyleProperty } from "../entities/system/StyleProperty.js";
 import { Package } from "../entities/system/Package.js";
 import { File } from "../entities/system/File.js";
 import { Component } from "../entities/system/Component.js";
-import { Device } from "../entities/system/Device.js";
 import { Icon } from "../entities/system/Icon.js";
+import { Device } from "../entities/system/Device.js";
 import { Operation } from "../entities/system/Operation.js";
 import { Tool } from "../entities/system/Tool.js";
 import { registerSchemaMigrations, registeredSchemaMigrations } from "../framework/schema-version.js";
@@ -35,6 +35,7 @@ import { previewConditionsKeyedMigration } from "../migrations/20260920004019_pr
 import { prefixedTokenGroupMigration } from "../migrations/20260920161309_prefixed_token_group.js";
 import { iconLibraryWithoutComponentMigration } from "../migrations/20260921044042_icon_library_without_component.js";
 import { iconLibrariesMigration } from "../migrations/20260922013625_icon_libraries.js";
+import { iconCanvasToolMigration } from "../migrations/20260923005318_icon_canvas_tool.js";
 //#region src/configs/system.ts
 /**
 * `System` — the design-system config TYPE. Declares the exact kinds a design system owns (tokens,
@@ -90,5 +91,6 @@ if (!registeredSchemaMigrations().has(20260920004019)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20260920161309)) registerSchemaMigrations(prefixedTokenGroupMigration);
 if (!registeredSchemaMigrations().has(20260921044042)) registerSchemaMigrations(iconLibraryWithoutComponentMigration);
 if (!registeredSchemaMigrations().has(20260922013625)) registerSchemaMigrations(iconLibrariesMigration);
+if (!registeredSchemaMigrations().has(20260923005318)) registerSchemaMigrations(iconCanvasToolMigration);
 //#endregion
 export { System };

package/dist/entities/native/NativeModifier.d.ts

@@ -14,8 +14,8 @@ declare const NativeModifier: EntityClass<z.ZodObject<{
   value: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
 }, z.core.$strip>, z.ZodObject<{
   type: z.ZodOptional<z.ZodEnum<{
-    mode: "mode";
     state: "state";
+    mode: "mode";
   }>>;
   default: z.ZodOptional<z.ZodObject<{
     __ref: z.ZodString;