@yahoo/uds-create-config 4.51.3 → 4.53.0

package/dist/capture/node-ops.js

@@ -3,7 +3,7 @@ import { pathOf } from "../framework/utils/refs.js";
 import { pathInput } from "../framework/schemas.js";
 import { CapturedNode } from "./captured-tree.js";
 import { specFromCapture } from "./capture-to-spec.js";
-import { specToNodePatches } from "./node-patches.js";
+import { attachedSystem, specToNodePatches } from "../entities/canvas/node-patches.js";
 import { z } from "zod";
 //#region src/capture/node-ops.ts
 /**
@@ -40,16 +40,6 @@ 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;
 }

package/dist/configs/CanvasConfig.js

@@ -4,6 +4,7 @@ import { Package } from "../entities/system/Package.js";
 import { Component } from "../entities/system/Component.js";
 import { Icon } from "../entities/system/Icon.js";
 import { captureNodeOps } from "../capture/node-ops.js";
+import { nodeGestureOps } from "../entities/canvas/node-gestures.js";
 import { Device } from "../entities/system/Device.js";
 import { Operation } from "../entities/system/Operation.js";
 import { Tool } from "../entities/system/Tool.js";
@@ -147,7 +148,10 @@ const Size = z.discriminatedUnion("type", [z.object({
 })]);
 const Node = defineEntity({
 	kind: "node",
-	schemas: captureNodeOps,
+	schemas: {
+		...captureNodeOps,
+		...nodeGestureOps
+	},
 	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/system.js

@@ -50,6 +50,9 @@ import { forwardRoutesMigration } from "../migrations/20260929161433_forward_rou
 import { registryDirBesideComponentsMigration } from "../migrations/20260930152239_registry_dir_beside_components.js";
 import { buildImportAliasesMigration } from "../migrations/20260930153059_build_import_aliases.js";
 import { canvasToolIconsAndDescriptionsMigration } from "../migrations/20260930183521_canvas_tool_icons_and_descriptions.js";
+import { styleRulesAsListMigration } from "../migrations/20261001112308_style_rules_as_list.js";
+import { motionExitAndElementDuplicateMigration } from "../migrations/20261001130958_motion_exit_and_element_duplicate.js";
+import { layerStyleAndForwardOpsMigration } from "../migrations/20261001131000_layer_style_and_forward_ops.js";
 const System = defineConfig({
 	name: WEB_CONFIG_NAME,
 	description: "A design system: the values, primitives and compositions an app is built from. A ref is written `{ \"__ref\": \"<kind>:<path>\" }`, so a token is `{ \"__ref\": \"token:<group>/<name>\" }` and a token group is `{ \"__ref\": \"token:<group>\" }`. Build it in this order. Tokens first, in groups by purpose (colors, spacing, radii, type sizes), since everything else names them. Then style properties, each with `values` holding one ref to the token group whose members it accepts (`{ \"__ref\": \"token:color\" }`), so a prop takes token names rather than raw CSS; add a string keyword only for a value no token holds. A style rule's bag holds a prop's values (`\"padding\": \"4\"`, `\"bg\": \"brand\"`), never raw CSS. Then a few primitive components, one layer each, whose props are style properties (a box for layout and surface, a text for type, a pressable for interaction). Then every other component composed from those primitives: its layers name a primitive or an element, its anatomy places them (a node renders a layer, a tag or `Slot` where a slot prop's content lands; `children` is the edge list; `visible` is `{ \"$state\": \"<prop>\" }`; a prop shown in a nested layer is a `forward` route, and `$state` never sits in a node's props), and its style rules set style-property values per layer, keyed by prop values when a variant changes them. Modes (a dark mode is `{ type: \"selector\", value: \".dark\" }`) change token values through a token's `overrides`, so a component never restyles for a mode; modifiers (hover, focus, disabled) name a state, and a style rule applies under one as a `_hover` block inside a layer bag. Composites bundle style values that recur. Last, register canvas roles: the canvas draws with them, one entity per tool (`frame` for the layout primitive, `text` for the text primitive, `image`) whose entries name the components that tool inserts, and a tool whose role is unregistered is disabled. Give each component a `preview` entry under `*` so it shows content, and never write a CSS property name where a style-property name belongs.",
@@ -111,5 +114,8 @@ if (!registeredSchemaMigrations().has(20260929161433)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20260930152239)) registerSchemaMigrations(registryDirBesideComponentsMigration);
 if (!registeredSchemaMigrations().has(20260930153059)) registerSchemaMigrations(buildImportAliasesMigration);
 if (!registeredSchemaMigrations().has(20260930183521)) registerSchemaMigrations(canvasToolIconsAndDescriptionsMigration);
+if (!registeredSchemaMigrations().has(20261001112308)) registerSchemaMigrations(styleRulesAsListMigration);
+if (!registeredSchemaMigrations().has(20261001130958)) registerSchemaMigrations(motionExitAndElementDuplicateMigration);
+if (!registeredSchemaMigrations().has(20261001131e3)) registerSchemaMigrations(layerStyleAndForwardOpsMigration);
 //#endregion
 export { System };

package/dist/entities/canvas/node-gestures.d.ts

@@ -0,0 +1,2 @@
+import { type UserSchemas } from '../../framework/schemas';
+export declare const nodeGestureOps: UserSchemas;