@yahoo/uds-create-config 5.52.1 → 5.53.0

package/dist/entities/system/LinkedSystem.js

@@ -749,11 +749,11 @@ const LinkedSystemDefinition = defineEntity({
 		* `Popover` over the v3 Bridge keeps the product's tokens from the Bridge, and the Popover renders
 		* Yahoo OS's own Button. Once the old link is gone, the new one can become `linked`.
 		*
-		* OPEN: motion presets and composites don't follow it yet. A taken component plays this system's
-		* motion preset of the name it uses, and a composite is the source's in a style rule and this
-		* system's as a prop.
+		* The same holds for the motion presets and composites a taken component names: through a
+		* `hybrid` link it plays this system's of that name, and otherwise the source's own, emitted
+		* under the pin's names.
 		*/
-		type: z.enum(["linked", "hybrid"]).optional().describe("How this source joins the system: `linked` (the default) brings in everything its entities reference and refuses a path another link offers differently; `hybrid` brings in only what no other link offers and uses this system's tokens wherever it has one of the same name."),
+		type: z.enum(["linked", "hybrid"]).optional().describe("How this source joins the system: `linked` (the default) brings in everything its entities reference and refuses a path another link offers differently; `hybrid` brings in only what no other link offers and uses this system's tokens, motion presets and composites wherever it has one of the same name."),
 		/**
 		* The exact published version every ref through this link resolves against.
 		*

package/dist/entities/system/Motion.js

@@ -3,6 +3,7 @@ import { isRef, refSchema } from "../../framework/utils/refs.js";
 import { METADATA_KEYS } from "../../framework/utils/field-schema.js";
 import { pathInput } from "../../framework/schemas.js";
 import { defineEntity } from "../../framework/defineEntity.js";
+import { drawnMotionBody } from "./drawn-motion.js";
 import { authoredValue } from "../../framework/projections.js";
 import { convertMotion } from "./motion-convert.js";
 import { cssMotionValue, motionTransition, reanimatedMotion, webMotionBody } from "./motion-types.js";
@@ -213,7 +214,7 @@ const Motion = defineEntity({
 			], { error: "a layer's `motion` is a preset (`Motion.ref('<path>')`) or a JS preset written in place — `{ \"whileHover\": { \"scale\": 1.05 }, \"transition\": { … } }`, the fields `Motion.item` takes with `runtime: 'js'`. A CSS preset is named with `Motion.item`." }),
 			reach: ({ config, value, element }) => {
 				if (isNativeConfig(config)) return "prop";
-				const preset = config.resolve("motion", String(authoredValue(config, "motion", value)))?.toJSON();
+				const preset = drawnMotionBody(config, String(authoredValue(config, "motion", value)));
 				if (preset?.type === "react-native-reanimated") throw new Error("No UDS web motion integration for react-native-reanimated. Select a supported preset or disable motion.");
 				return preset && webMotionBody(preset).runtime === "css" && isRef(element) ? "prop" : "none";
 			},

package/dist/entities/system/component-module.d.ts

@@ -107,17 +107,23 @@ declare function componentModuleSource(config: Config, componentPathOrRef: strin
  *
  * One view for the browser's module key, the server's build and the CLI's borrowed modules, so the
  * three name the same classes and hash the same config.
+ *
+ * The view records the consumer and pin it was built for ({@link moduleViewOf}), so a motion preset
+ * its components name is drawn as the consumer draws it. `route` is the pin as the consumer spells
+ * it when the owner is reached through another link (`bridge~yos`); `slug` alone names classes.
  */
 declare function linkedModuleView({
   consumer,
   owner,
   slug,
-  shadowed
+  shadowed,
+  route
 }: {
   readonly consumer: Config;
   readonly owner: Config;
   readonly slug: string;
   readonly shadowed: boolean;
+  readonly route?: string;
 }): Config;
 /**
  * A linked component's module source, and the config its module is built from.

package/dist/entities/system/component-module.js

@@ -1,6 +1,7 @@
 import { isNativeConfig } from "../../configs/platform.js";
 import { isRef, kindOf, pathOf, ref, routedSource, sourceHops, splitRef } from "../../framework/utils/refs.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { registerModuleView } from "../../framework/module-views.js";
 import { File } from "./File.js";
 import { Settings, classPrefixOf, prefixed, varPrefixOf } from "./Settings.js";
 import { Component } from "./Component.js";
@@ -339,13 +340,17 @@ function componentModuleSource(config, componentPathOrRef) {
 *
 * One view for the browser's module key, the server's build and the CLI's borrowed modules, so the
 * three name the same classes and hash the same config.
+*
+* The view records the consumer and pin it was built for ({@link moduleViewOf}), so a motion preset
+* its components name is drawn as the consumer draws it. `route` is the pin as the consumer spells
+* it when the owner is reached through another link (`bridge~yos`); `slug` alone names classes.
 */
-function linkedModuleView({ consumer, owner, slug, shadowed }) {
+function linkedModuleView({ consumer, owner, slug, shadowed, route = slug }) {
 	const classNames = shadowed ? prefixed({
 		prefix: classPrefixOf(consumer),
 		name: slug
 	}) : classPrefixOf(consumer);
-	return owner.apply({
+	const view = owner.apply({
 		kind: "settings",
 		operation: "update",
 		path: "settings",
@@ -354,6 +359,14 @@ function linkedModuleView({ consumer, owner, slug, shadowed }) {
 			variables: varPrefixOf(owner)
 		} }
 	});
+	if (view !== owner) registerModuleView({
+		view,
+		link: {
+			consumer,
+			slug: route
+		}
+	});
+	return view;
 }
 /** Views are built per consumer, owner, slug and shadowing, since every linked component of one owner
 *  shares one. */

package/dist/entities/system/css-motion-reach.js

@@ -1,6 +1,7 @@
 import { isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { drawnMotionBody, drawnMotionName } from "./drawn-motion.js";
 import { convertMotion } from "./motion-convert.js";
 import { webMotionBody } from "./motion-types.js";
 import { placedMotions, variantGroupsOf } from "./motion-variants.js";
@@ -31,11 +32,6 @@ function unmountableLayers(config, path) {
 	}
 	return out;
 }
-/** The preset a layer bag's `motion` names, by path. */
-function namedPreset(value) {
-	if (isRef(value)) return pathOf(value);
-	return typeof value === "string" ? value : void 0;
-}
 /**
 * Whether a layer's element wears a CSS preset's class: a plain element through its class list, and a
 * component through the `motion` value its layer is handed, which the component's style-prop runtime
@@ -46,14 +42,18 @@ function wears(element) {
 	return isRef(element) && kindOf(element) === "component";
 }
 const resolvePlacements = createSliceMemo({
-	kinds: ["component", "motion"],
+	kinds: [
+		"component",
+		"motion",
+		"linked-system"
+	],
 	compute: (config) => {
 		const out = [];
 		const seen = /* @__PURE__ */ new Set();
 		for (const component of config.list("component")) {
 			const { layers = {}, styles = {} } = component.toJSON();
 			for (const entry of Object.values(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
-				const preset = namedPreset(isPlainObject(bag) ? bag.motion : void 0);
+				const preset = drawnMotionName(config, isPlainObject(bag) ? bag.motion : void 0);
 				if (preset === void 0) continue;
 				if (motionBodyAt(config, preset)?.runtime !== "css" || !(layer in layers)) continue;
 				const key = `${component.path}\u0000${layer}\u0000${preset}`;
@@ -80,14 +80,22 @@ function cssMotionPlacements(config) {
 * variants its states name only to presets in its own group.
 */
 const cssMotionVariantGroups = createSliceMemo({
-	kinds: ["component", "motion"],
+	kinds: [
+		"component",
+		"motion",
+		"linked-system"
+	],
 	compute: (config) => variantGroupsOf({
 		config,
 		placements: cssMotionPlacements(config)
 	})
 });
 const resolveExits = createSliceMemo({
-	kinds: ["component", "motion"],
+	kinds: [
+		"component",
+		"motion",
+		"linked-system"
+	],
 	compute: (config) => {
 		const out = [];
 		const seen = /* @__PURE__ */ new Set();
@@ -95,7 +103,7 @@ const resolveExits = createSliceMemo({
 			const { styles = {} } = component.toJSON();
 			let unmountable;
 			for (const entry of Object.values(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
-				const preset = namedPreset(isPlainObject(bag) ? bag.motion : void 0);
+				const preset = drawnMotionName(config, isPlainObject(bag) ? bag.motion : void 0);
 				if (preset === void 0) continue;
 				const body = motionBodyAt(config, preset);
 				if (body?.runtime !== "css" || body.exit === void 0) continue;
@@ -193,7 +201,7 @@ function linkedMotionSwaps(config) {
 	return resolveLinkedSwaps(config);
 }
 function motionBodyAt(config, path) {
-	const body = config.resolve("motion", path)?.toJSON();
+	const body = drawnMotionBody(config, path);
 	return body ? webMotionBody(body) : void 0;
 }
 //#endregion

package/dist/entities/system/css-motion.d.ts

@@ -33,7 +33,11 @@ interface CssMotionKeyframeList {
   /** Where the list sits, as a dotted path: `variants.show.scale`. */
   readonly at: string;
 }
-/** Every CSS preset that animates states, by path, with the timing of each value per destination. */
+/**
+ * Every CSS preset that animates states, by the name it plays under, with the timing of each value per
+ * destination: this config's presets, and each linked source's it plays under the pin's name
+ * ({@link linkedMotionPresets}), whose tokens are read in the source.
+ */
 declare function cssMotionTransitions(config: Config): Readonly<Record<string, CssMotionTransitions>>;
 /**
  * How long a CSS preset's `exit` takes, in milliseconds: the longest of its values' durations and

package/dist/entities/system/css-motion.js

@@ -1,5 +1,6 @@
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { drawnMotionBody, linkedMotionPresets } from "./drawn-motion.js";
 import { cssEasing, easingCurve, linearEasing, springTiming } from "./css-timing.js";
 import { webMotionBody } from "./motion-types.js";
 import { stateVariantNames } from "./motion-variants.js";
@@ -418,10 +419,31 @@ const resolveCssMotionPresets = createSliceMemo({
 		};
 	}
 });
-/** Every CSS preset that animates states, by path, with the timing of each value per destination. */
+/**
+* Every CSS preset that animates states, by the name it plays under, with the timing of each value per
+* destination: this config's presets, and each linked source's it plays under the pin's name
+* ({@link linkedMotionPresets}), whose tokens are read in the source.
+*/
 function cssMotionTransitions(config) {
-	return resolveCssMotionPresets(config).transitions;
+	const own = resolveCssMotionPresets(config).transitions;
+	const linked = linkedMotionPresets(config);
+	if (linked.length === 0) return own;
+	const hit = withLinkedTransitions.get(config);
+	if (hit) return hit;
+	const out = { ...own };
+	for (const preset of linked) {
+		const body = webMotionBody(preset.body);
+		if (body.runtime !== "css" || !hasStates(body)) continue;
+		out[preset.name] = transitionsOf({
+			config: preset.source,
+			body,
+			report: () => {}
+		});
+	}
+	withLinkedTransitions.set(config, out);
+	return out;
 }
+const withLinkedTransitions = /* @__PURE__ */ new WeakMap();
 /**
 * How long a CSS preset's `exit` takes, in milliseconds: the longest of its values' durations and
 * delays as the element changes to its exit state. `0` for a preset with no exit, and a timing that is
@@ -443,7 +465,7 @@ function cssMotionTokens(config) {
 	return resolveCssMotionPresets(config).tokens;
 }
 function motionBodyAt(config, path) {
-	const body = config.resolve("motion", path)?.toJSON();
+	const body = drawnMotionBody(config, path);
 	return body ? webMotionBody(body) : void 0;
 }
 //#endregion

package/dist/entities/system/drawn-motion.d.ts

@@ -0,0 +1,29 @@
+import { Config } from "../../framework/Config.js";
+
+//#region src/entities/system/drawn-motion.d.ts
+/** A linked source's preset this config plays under the pin's name. */
+interface LinkedMotionPreset {
+  /** `<path>@<slug>`: the name a motion value plays it by. */
+  readonly name: string;
+  readonly slug: string;
+  /** Its path in the source. */
+  readonly path: string;
+  readonly body: Record<string, unknown>;
+  /** The source, which the tokens its body names resolve in. */
+  readonly source: Config;
+}
+/**
+ * The name the preset a `motion` value names plays under in `config`: a path of `config`'s own, or a
+ * source's preset as `<path>@<slug>`. A module view reads its owner's names, and draws them as the
+ * consumer it was built for does.
+ */
+declare function drawnMotionName(config: Config, value: unknown): string | undefined;
+/** The body of the preset `name` plays ({@link drawnMotionName}), from whichever config holds it. */
+declare function drawnMotionBody(config: Config, name: string): Record<string, unknown> | undefined;
+/**
+ * Every linked preset `config` plays under its pin's name: each preset a reached source holds that
+ * this config's refs reach, unless the link draws it with a row of this config's own.
+ */
+declare function linkedMotionPresets(config: Config): readonly LinkedMotionPreset[];
+//#endregion
+export { LinkedMotionPreset, drawnMotionBody, drawnMotionName, linkedMotionPresets };

package/dist/entities/system/drawn-motion.js

@@ -0,0 +1,77 @@
+import { isRef, pathOf, ref, routedSource, sourceOf } from "../../framework/utils/refs.js";
+import { moduleViewOf } from "../../framework/module-views.js";
+import { linkedLocalRow } from "../../framework/projections.js";
+//#region src/entities/system/drawn-motion.ts
+/**
+* The name the preset a `motion` value names plays under in `config`: a path of `config`'s own, or a
+* source's preset as `<path>@<slug>`. A module view reads its owner's names, and draws them as the
+* consumer it was built for does.
+*/
+function drawnMotionName(config, value) {
+	let named;
+	if (isRef(value)) named = value.__ref;
+	else if (typeof value === "string") named = value;
+	if (named === void 0) return void 0;
+	const path = pathOf(named);
+	const slug = sourceOf(named);
+	const view = moduleViewOf(config);
+	if (!view) return slug === void 0 ? path : linkedName({
+		config,
+		slug,
+		path
+	});
+	return linkedName({
+		config: view.consumer,
+		slug: slug === void 0 ? view.slug : routedSource(view.slug, slug),
+		path
+	});
+}
+/** The body of the preset `name` plays ({@link drawnMotionName}), from whichever config holds it. */
+function drawnMotionBody(config, name) {
+	const at = moduleViewOf(config)?.consumer ?? config;
+	return (sourceOf(name) === void 0 ? at.resolve("motion", name) : at.resolveRef(ref("motion", name)))?.toJSON();
+}
+function linkedName({ config, slug, path }) {
+	return linkedLocalRow({
+		config,
+		slug,
+		kind: "motion",
+		path
+	}) ?? `${path}@${slug}`;
+}
+const linkedPresets = /* @__PURE__ */ new WeakMap();
+/**
+* Every linked preset `config` plays under its pin's name: each preset a reached source holds that
+* this config's refs reach, unless the link draws it with a row of this config's own.
+*/
+function linkedMotionPresets(config) {
+	const hit = linkedPresets.get(config);
+	if (hit) return hit;
+	const out = [];
+	for (const slug of config.reachedSlugs()) {
+		const source = config.sourceFor(slug);
+		if (!source) continue;
+		for (const target of config.sourceClosure(slug, "motion")) {
+			const path = pathOf(target);
+			if (linkedLocalRow({
+				config,
+				slug,
+				kind: "motion",
+				path
+			}) !== void 0) continue;
+			const body = source.resolve("motion", path)?.toJSON();
+			if (body) out.push({
+				name: `${path}@${slug}`,
+				slug,
+				path,
+				body,
+				source
+			});
+		}
+	}
+	out.sort((a, b) => a.name.localeCompare(b.name));
+	linkedPresets.set(config, out);
+	return out;
+}
+//#endregion
+export { drawnMotionBody, drawnMotionName, linkedMotionPresets };

package/dist/entities/system/motion-presets.d.ts

@@ -34,9 +34,10 @@ declare function hasJsMotion(config: Config): boolean;
 /** The tokens JS presets name that a preset cannot carry as one value, for the build to report. */
 declare function motionPresetTokens(config: Config): MotionPresetToken[];
 /**
- * Each preset's own `reducedMotion`, the default for a layer that plays it and sets none, by path:
- * the named presets of either runtime, and the JS presets a style rule writes in place by their id.
+ * Each preset's own `reducedMotion`, the default for a layer that plays it and sets none, by the name
+ * it plays under: the named presets of either runtime, each linked source's this config plays under
+ * the pin's name, and the JS presets a style rule writes in place by their id.
  */
-declare const presetReducedMotions: (config: Config) => Readonly<Record<string, ReducedMotion>>;
+declare function presetReducedMotions(config: Config): Readonly<Record<string, ReducedMotion>>;
 //#endregion
 export { MOTION_PACKAGE, MotionPresetToken, hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens, presetReducedMotions };

package/dist/entities/system/motion-presets.js

@@ -1,6 +1,7 @@
 import { collectRefs, isRef, kindOf, pathOf, refOfKey } from "../../framework/utils/refs.js";
 import { composedValueFormOf } from "./composed-values.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { linkedMotionPresets } from "./drawn-motion.js";
 import { tokenValueRow } from "./token-values.js";
 import { MOTION_EASING_NAMES, bezierPoints, motionOfCssKeyword } from "./easings.js";
 import { webMotionBody } from "./motion-types.js";
@@ -241,7 +242,27 @@ const resolveJsMotionPresets = createSliceMemo({
 * a style rule sets is the one exception: it reaches `motion/react` as its `var()`.
 */
 function jsMotionPresets(config) {
-	return resolveJsMotionPresets(config).presets;
+	return withLinkedPresets(config).presets;
+}
+const linkedJsPresets = /* @__PURE__ */ new WeakMap();
+/**
+* {@link resolveJsMotionPresets}, with each linked source's JS preset this config plays under the
+* pin's name ({@link linkedMotionPresets}), its tokens read in the source.
+*/
+function withLinkedPresets(config) {
+	const own = resolveJsMotionPresets(config);
+	const linked = linkedMotionPresets(config).filter((preset) => webMotionBody(preset.body).type === "motion/react");
+	if (linked.length === 0) return own;
+	const hit = linkedJsPresets.get(config);
+	if (hit) return hit;
+	const presets = { ...own.presets };
+	for (const preset of linked) presets[preset.name] = resolveBody(preset.source, preset.name, webMotionBody(preset.body), []);
+	const out = {
+		...own,
+		presets
+	};
+	linkedJsPresets.set(config, out);
+	return out;
 }
 /** Every JS preset a style rule writes in place, by its id, resolved as {@link jsMotionPresets} are. */
 function inlineMotionProps(config) {
@@ -252,7 +273,7 @@ const MOTION_PACKAGE = "motion";
 /** Whether anything in the system animates through `motion/react`: a JS preset, named or written in
 *  place in a style rule. */
 function hasJsMotion(config) {
-	const { presets, inline } = resolveJsMotionPresets(config);
+	const { presets, inline } = withLinkedPresets(config);
 	return Object.keys(presets).length > 0 || Object.keys(inline).length > 0;
 }
 /** The tokens JS presets name that a preset cannot carry as one value, for the build to report. */
@@ -260,10 +281,28 @@ function motionPresetTokens(config) {
 	return resolveJsMotionPresets(config).tokens;
 }
 /**
-* Each preset's own `reducedMotion`, the default for a layer that plays it and sets none, by path:
-* the named presets of either runtime, and the JS presets a style rule writes in place by their id.
+* Each preset's own `reducedMotion`, the default for a layer that plays it and sets none, by the name
+* it plays under: the named presets of either runtime, each linked source's this config plays under
+* the pin's name, and the JS presets a style rule writes in place by their id.
 */
-const presetReducedMotions = createSliceMemo({
+function presetReducedMotions(config) {
+	const own = ownReducedMotions(config);
+	const linked = linkedMotionPresets(config).flatMap((preset) => {
+		const { reducedMotion } = webMotionBody(preset.body);
+		return isReducedMotion(reducedMotion) ? [[preset.name, reducedMotion]] : [];
+	});
+	if (linked.length === 0) return own;
+	const hit = linkedReducedMotions.get(config);
+	if (hit) return hit;
+	const out = {
+		...own,
+		...Object.fromEntries(linked)
+	};
+	linkedReducedMotions.set(config, out);
+	return out;
+}
+const linkedReducedMotions = /* @__PURE__ */ new WeakMap();
+const ownReducedMotions = createSliceMemo({
 	kinds: ["motion", "component"],
 	compute: (config) => {
 		const out = {};

package/dist/entities/system/motion-variants.js

@@ -2,6 +2,7 @@ import { reject } from "../../framework/rejection.js";
 import { isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { drawnMotionBody, drawnMotionName } from "./drawn-motion.js";
 import { webMotionBody } from "./motion-types.js";
 import { inlineJsMotion } from "./Motion.js";
 //#region src/entities/system/motion-variants.ts
@@ -90,14 +91,18 @@ function namedVariants(body) {
 }
 /** Every JS preset a style rule puts on a layer, across the system. */
 const placedMotions = createSliceMemo({
-	kinds: ["component", "motion"],
+	kinds: [
+		"component",
+		"motion",
+		"linked-system"
+	],
 	compute: (config) => {
 		const out = [];
 		for (const component of config.list("component")) {
 			const { styles = {} } = component.toJSON();
 			for (const [rule, entry] of Object.entries(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
 				const named = bag?.motion;
-				const preset = isRef(named) ? pathOf(named.__ref) : typeof named === "string" ? named : isInlineMotion(named) ? inlineMotionId(component.path, rule, layer) : void 0;
+				const preset = isInlineMotion(named) ? inlineMotionId(component.path, rule, layer) : drawnMotionName(config, named);
 				if (preset === void 0 || !jsBody(config, preset)) continue;
 				out.push({
 					component: component.path,
@@ -123,7 +128,11 @@ const composedComponents = (config, path) => {
 * nothing joins nothing, which keeps Button and Checkbox apart although both render Box.
 */
 const motionVariantGroups = createSliceMemo({
-	kinds: ["component", "motion"],
+	kinds: [
+		"component",
+		"motion",
+		"linked-system"
+	],
 	compute: (config) => variantGroupsOf({
 		config,
 		placements: placedMotions(config)
@@ -283,7 +292,7 @@ function orphanedMotionVariants(config) {
 	return out;
 }
 function motionBodyAt(config, path) {
-	const body = config.resolve("motion", path)?.toJSON();
+	const body = drawnMotionBody(config, path);
 	return body ? webMotionBody(body) : void 0;
 }
 function renamePresetBody(config, path, body, from, to) {

package/dist/framework/class-names.d.ts

@@ -138,9 +138,18 @@ declare function componentRuleClasses(config: Config, path: string): ComponentRu
  * composite contributes no declarations there, so omitting it would drop the class entirely.
  */
 declare function componentCompositeClasses(config: Config, path: string): ComponentRuleClass[];
-/** The class a CSS motion preset is applied by. Namespaced, so it doesn't share a space with the
- *  style-prop utilities; the `@keyframes` it runs keep their own name. */
+/**
+ * The class a CSS motion preset is applied by. Namespaced, so it doesn't share a space with the
+ * style-prop utilities; the `@keyframes` it runs keep their own name ({@link motionKeyframesName}).
+ *
+ * `path` is a name {@link drawnMotionName} gives: a linked source's preset played under the pin's
+ * name is qualified by the pin (`uds-ds-motion-fade` for `fade@ds`), and a module view's names are
+ * its consumer's classes.
+ */
 declare function motionClassName(config: Config, path: string): string;
+/** The `@keyframes` a CSS preset runs: `uds-fade`, or `uds-ds-fade` for a linked source's preset
+ *  played under the pin's name. */
+declare function motionKeyframesName(config: Config, path: string): string;
 /**
  * Every MOTION class a component's style rules apply — a layer bag naming a preset (`motion: 'spin'`).
  *
@@ -207,6 +216,46 @@ declare function componentPropComposites(config: Config, path: string, state?: R
  * plain-tag layer (which declares nothing) and a key naming no member are left as they are.
  */
 declare function inlineRuleComposites(config: Config, element: unknown, authored: Record<string, unknown>): Record<string, unknown>;
+/**
+ * The composites a rule's bag names that are drawn with another config's row, taken out of the bag.
+ *
+ * A linked component's rule is read against its source, and a `hybrid` link draws a composite it
+ * names with the consuming config's row of that name. `drawnWith` answers which row that is, as a
+ * member path in `local`, and the member's styles are that row's, so they have to be rendered against
+ * `local` while the rest of the rule is rendered against the source. The marker is the source's, which
+ * the component's own `_on<Group><Member>` rules query. `bag` is what's left for
+ * {@link inlineRuleComposites}.
+ */
+declare function splitRuleComposites({
+  config,
+  element,
+  bag: authored,
+  local,
+  drawnWith
+}: {
+  readonly config: Config;
+  readonly element: unknown;
+  readonly bag: Record<string, unknown>;
+  readonly local: Config;
+  readonly drawnWith: (member: string) => string | undefined;
+}): {
+  readonly bag: Record<string, unknown>;
+  readonly drawn: Record<string, unknown> | undefined;
+};
+/**
+ * A composite member's styles as a bag, with the composite's marker
+ * (`--<prefix>-composite-<group>: <member>`) that `_on<Group><Member>` finds it by, under the prefix
+ * of `markedIn` (`config` unless given).
+ */
+declare function compositeMemberBag({
+  config,
+  path,
+  markedIn
+}: {
+  readonly config: Config;
+  readonly path: string;
+  readonly markedIn?: Config;
+}): Record<string, unknown>;
 /**
  * The props a style rule's bag sends to each layer's ELEMENT rather than to the stylesheet, for one
  * instance. The same split the emitted module makes when it builds a layer's routed bundle.
@@ -388,4 +437,4 @@ declare function modifierUtilitiesUsed(config: Config): Set<string>;
  */
 declare function splitVariants(cls: string): string[];
 //#endregion
-export { ComponentRuleClass, PickedComposite, SplitStyleProps, arbitraryClassName, arbitraryNeedsClass, classLeaf, classSelector, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, componentStateAttribute, componentStateAttributes, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, forceStateSelector, inlineRuleComposites, isForceModeProp, kebabComponent, layerJsMotionPresets, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, splitVariants, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropOffScaleLiteral, stylePropOwnClasses, styleRuleMotionClasses };
+export { ComponentRuleClass, PickedComposite, SplitStyleProps, arbitraryClassName, arbitraryNeedsClass, classLeaf, classSelector, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, componentStateAttribute, componentStateAttributes, compositeMemberBag, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, forceStateSelector, inlineRuleComposites, isForceModeProp, kebabComponent, layerJsMotionPresets, layerRoutedProps, modifierUtilitiesUsed, motionClassName, motionKeyframesName, ruleCondition, splitRuleComposites, splitStyleProps, splitVariants, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropOffScaleLiteral, stylePropOwnClasses, styleRuleMotionClasses };