@ghia/native 0.0.0-stage → 0.11.0

package/dist/motion-bindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-bindings.d.ts","sourceRoot":"","sources":["../js/motion-bindings.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;IACnC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAA;CAC5B,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,cAAc,CAAA;IAC9B,uDAAuD;IACvD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAC1C,8FAA8F;IAC9F,cAAc,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAA;CAClC;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC/B;IAAE,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,SAAS,CAAA;CAAE,CAezF;AAID;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAS/D;AAaD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,iBAAiB,EACvB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAClD,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,SAAS;AAC7C,uEAAuE;AACvE,IAAI,CAAC,EAAE,MAAM,GACZ,IAAI,CA0BN;AAED,qFAAqF;AACrF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,EAAE,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAO1F;AAED,qDAAqD;AACrD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAG/D"}

package/dist/motion-bindings.js

@@ -0,0 +1,107 @@
+/// Style entries that are motion values do not travel as style: they bind the
+/// value to the element's window and go to native as the `motionValues`
+/// custom prop, which samples them every frame. The framework adapters share
+/// this; each owns a `MotionBindingHost` on its root.
+import { assertSpanMotionValues } from "./motion-span.js";
+import { isMotionValue } from "./motion-value.js";
+export function splitMotionStyle(style) {
+    if (style == null)
+        return { style: undefined, motionValues: undefined };
+    let motionValues;
+    const plain = {};
+    for (const key of Object.keys(style)) {
+        const value = Reflect.get(style, key);
+        if (isMotionValue(value)) {
+            motionValues ??= {};
+            motionValues[key] = value;
+        }
+        else {
+            plain[key] = value;
+        }
+    }
+    // Untouched when it holds no motion value, so the common style is not copied.
+    return { style: (motionValues ? plain : style), motionValues };
+}
+const MOTION_TRANSFORM_WIRE_NAMES = { scale: "motionScale", rotate: "motionRotate" };
+/**
+ * The style of a motion component: its static `scale` and `rotate` are Motion's, which native knows
+ * under other names so that they do not meet the CSS properties. A motion value keeps its key, which
+ * native reads as Motion's too.
+ */
+export function motionComponentStyle(style) {
+    if (typeof style !== "object" || style === null)
+        return style;
+    if (!Object.hasOwn(style, "scale") && !Object.hasOwn(style, "rotate"))
+        return style;
+    const renamed = {};
+    for (const key of Object.keys(style)) {
+        const value = Reflect.get(style, key);
+        renamed[isMotionValue(value) ? key : (MOTION_TRANSFORM_WIRE_NAMES[key] ?? key)] = value;
+    }
+    return renamed;
+}
+function sameBindings(left, right) {
+    if (left === right)
+        return true;
+    if (!left || !right)
+        return false;
+    const keys = Object.keys(left);
+    if (keys.length !== Object.keys(right).length)
+        return false;
+    return keys.every((key) => left[key] === right[key]);
+}
+/**
+ * Brings the element's binding in line with its style. New values are bound
+ * before the old are released, and the release waits for the batch that
+ * rebinds the element, so a value shared by both is never freed in between.
+ */
+export function syncMotionBindings(host, mutations, id, next, 
+/** The element type: a span can only bind what an inline box shows. */
+type) {
+    if (type === "span")
+        assertSpanMotionValues(next);
+    const previous = host.motionBindings.get(id);
+    if (sameBindings(previous?.values, next))
+        return;
+    if (!next) {
+        if (previous)
+            host.motionReleases.push(...previous.releases);
+        host.motionBindings.delete(id);
+        mutations.setCustomProp(id, "motionValues", null);
+        return;
+    }
+    const binding = { values: next, releases: [] };
+    const ids = {};
+    try {
+        for (const [property, value] of Object.entries(next)) {
+            binding.releases.push(value.bind(host.nativeRenderer));
+            ids[property] = value.id;
+        }
+    }
+    catch (error) {
+        for (const release of binding.releases)
+            release();
+        throw error;
+    }
+    if (previous)
+        host.motionReleases.push(...previous.releases);
+    host.motionBindings.set(id, binding);
+    mutations.setCustomProp(id, "motionValues", ids);
+}
+/** Queues the releases of the elements that are going away, without running them. */
+export function retireMotionBindings(host, ids) {
+    for (const id of ids) {
+        const binding = host.motionBindings.get(id);
+        if (!binding)
+            continue;
+        host.motionBindings.delete(id);
+        host.motionReleases.push(...binding.releases);
+    }
+}
+/** Runs once the mutation batch has been applied. */
+export function runMotionReleases(host) {
+    const releases = host.motionReleases.splice(0);
+    for (const release of releases)
+        release();
+}
+//# sourceMappingURL=motion-bindings.js.map

package/dist/motion-bindings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-bindings.js","sourceRoot":"","sources":["../js/motion-bindings.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wEAAwE;AACxE,6EAA6E;AAC7E,sDAAsD;AAGtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAgBjD,MAAM,UAAU,gBAAgB,CAC9B,KAAgC;IAEhC,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,CAAA;IACvE,IAAI,YAAqD,CAAA;IACzD,MAAM,KAAK,GAA4B,EAAE,CAAA;IACzC,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACrC,MAAM,KAAK,GAAY,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;QAC9C,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,YAAY,KAAK,EAAE,CAAA;YACnB,YAAY,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QAC3B,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACpB,CAAC;IACH,CAAC;IACD,8EAA8E;IAC9E,OAAO,EAAE,KAAK,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAc,EAAE,YAAY,EAAE,CAAA;AAC7E,CAAC;AAED,MAAM,2BAA2B,GAA2B,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA;AAE5G;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAQ,KAAY;IACtD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IAC7D,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;QAAE,OAAO,KAAK,CAAA;IACnF,MAAM,OAAO,GAA4B,EAAE,CAAA;IAC3C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACrC,MAAM,KAAK,GAAY,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;QAC9C,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAA;IACzF,CAAC;IACD,OAAO,OAAgB,CAAA;AACzB,CAAC;AAED,SAAS,YAAY,CACnB,IAA6C,EAC7C,KAA8C;IAE9C,IAAI,IAAI,KAAK,KAAK;QAAE,OAAO,IAAI,CAAA;IAC/B,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK;QAAE,OAAO,KAAK,CAAA;IACjC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAA;IAC3D,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;AACtD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAChC,IAAuB,EACvB,SAAkD,EAClD,EAAU,EACV,IAA6C;AAC7C,uEAAuE;AACvE,IAAa;IAEb,IAAI,IAAI,KAAK,MAAM;QAAE,sBAAsB,CAAC,IAAI,CAAC,CAAA;IACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAC5C,IAAI,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC;QAAE,OAAM;IAEhD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,IAAI,QAAQ;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAC5D,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC9B,SAAS,CAAC,aAAa,CAAC,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,CAAA;QACjD,OAAM;IACR,CAAC;IAED,MAAM,OAAO,GAAkB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAA;IAC7D,MAAM,GAAG,GAA2B,EAAE,CAAA;IACtC,IAAI,CAAC;QACH,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACrD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAA;YACtD,GAAG,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,EAAE,CAAA;QAC1B,CAAC;IACH,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,KAAK,MAAM,OAAO,IAAI,OAAO,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAA;QACjD,MAAM,KAAK,CAAA;IACb,CAAC;IACD,IAAI,QAAQ;QAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC5D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IACpC,SAAS,CAAC,aAAa,CAAC,EAAE,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;AAClD,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,oBAAoB,CAAC,IAAuB,EAAE,GAAsB;IAClF,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QAC3C,IAAI,CAAC,OAAO;YAAE,SAAQ;QACtB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC/C,CAAC;AACH,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,iBAAiB,CAAC,IAAuB;IACvD,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC9C,KAAK,MAAM,OAAO,IAAI,QAAQ;QAAE,OAAO,EAAE,CAAA;AAC3C,CAAC"}

package/dist/motion-config.d.ts

@@ -0,0 +1,20 @@
+import type { MotionTransition } from "./host.js";
+export type ReducedMotionSetting = "user" | "always" | "never";
+export type MotionConfigValue = {
+    /** Used by a `motion.*` component that has no `transition` of its own. */
+    transition?: MotionTransition;
+    reducedMotion?: ReducedMotionSetting;
+};
+/** A nested config only overrides what it sets. */
+export declare function mergeMotionConfig(parent: MotionConfigValue | undefined, own: MotionConfigValue): MotionConfigValue;
+/** `prefersReduced` is the OS setting; `"never"` is the default, as in Framer. */
+export declare function isReducedMotion(setting: ReducedMotionSetting | undefined, prefersReduced: boolean): boolean;
+/**
+ * Makes `animate()` jump on the motion values `style` binds to `width`,
+ * `height`, `top`, `right`, `bottom` or `left`. Returns the release. A value
+ * bound to padding, opacity, a colour and the like keeps animating, and so
+ * does one that no element binds. Framer leaves a bare `animate(mv)` alone;
+ * gpuix reduces it so a bound size or inset follows the setting.
+ */
+export declare function reduceMotionValues(style: unknown): () => void;
+//# sourceMappingURL=motion-config.d.ts.map

package/dist/motion-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-config.d.ts","sourceRoot":"","sources":["../js/motion-config.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAGjD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0EAA0E;IAC1E,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,aAAa,CAAC,EAAE,oBAAoB,CAAA;CACrC,CAAA;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,iBAAiB,GAAG,SAAS,EACrC,GAAG,EAAE,iBAAiB,GACrB,iBAAiB,CAKnB;AAED,kFAAkF;AAClF,wBAAgB,eAAe,CAC7B,OAAO,EAAE,oBAAoB,GAAG,SAAS,EACzC,cAAc,EAAE,OAAO,GACtB,OAAO,CAUT;AAKD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,IAAI,CAW7D"}

package/dist/motion-config.js

@@ -0,0 +1,51 @@
+/// What `MotionConfig` means to the adapters, shared by React and Solid: the
+/// reduced-motion setting, how nested configs combine, and the reduction of
+/// motion values that an element binds to `width`, `height` or an inset.
+import { isMotionValue } from "./motion-value.js";
+/** A nested config only overrides what it sets. */
+export function mergeMotionConfig(parent, own) {
+    const merged = { ...parent };
+    if (own.transition !== undefined)
+        merged.transition = own.transition;
+    if (own.reducedMotion !== undefined)
+        merged.reducedMotion = own.reducedMotion;
+    return merged;
+}
+/** `prefersReduced` is the OS setting; `"never"` is the default, as in Framer. */
+export function isReducedMotion(setting, prefersReduced) {
+    switch (setting) {
+        case "always":
+            return true;
+        case "user":
+            return prefersReduced;
+        case "never":
+        case undefined:
+            return false;
+    }
+}
+/** Style keys whose animation reduced motion replaces with a jump. Mirrors `AnimProp::is_positional`. */
+const REDUCED_STYLE_KEYS = new Set(["width", "height", "top", "right", "bottom", "left"]);
+/**
+ * Makes `animate()` jump on the motion values `style` binds to `width`,
+ * `height`, `top`, `right`, `bottom` or `left`. Returns the release. A value
+ * bound to padding, opacity, a colour and the like keeps animating, and so
+ * does one that no element binds. Framer leaves a bare `animate(mv)` alone;
+ * gpuix reduces it so a bound size or inset follows the setting.
+ */
+export function reduceMotionValues(style) {
+    if (typeof style !== "object" || style === null)
+        return () => { };
+    const releases = [];
+    for (const key of Object.keys(style)) {
+        if (!REDUCED_STYLE_KEYS.has(key))
+            continue;
+        const value = Reflect.get(style, key);
+        if (isMotionValue(value))
+            releases.push(value.reduceMotion());
+    }
+    return () => {
+        for (const release of releases)
+            release();
+    };
+}
+//# sourceMappingURL=motion-config.js.map

package/dist/motion-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-config.js","sourceRoot":"","sources":["../js/motion-config.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,4EAA4E;AAC5E,yEAAyE;AAGzE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAUjD,mDAAmD;AACnD,MAAM,UAAU,iBAAiB,CAC/B,MAAqC,EACrC,GAAsB;IAEtB,MAAM,MAAM,GAAsB,EAAE,GAAG,MAAM,EAAE,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,KAAK,SAAS;QAAE,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU,CAAA;IACpE,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS;QAAE,MAAM,CAAC,aAAa,GAAG,GAAG,CAAC,aAAa,CAAA;IAC7E,OAAO,MAAM,CAAA;AACf,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,eAAe,CAC7B,OAAyC,EACzC,cAAuB;IAEvB,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,IAAI,CAAA;QACb,KAAK,MAAM;YACT,OAAO,cAAc,CAAA;QACvB,KAAK,OAAO,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,KAAK,CAAA;IAChB,CAAC;AACH,CAAC;AAED,yGAAyG;AACzG,MAAM,kBAAkB,GAAwB,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AAE9G;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAc;IAC/C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChE,MAAM,QAAQ,GAAsB,EAAE,CAAA;IACtC,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACrC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,SAAQ;QAC1C,MAAM,KAAK,GAAY,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;QAC9C,IAAI,aAAa,CAAC,KAAK,CAAC;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAA;IAC/D,CAAC;IACD,OAAO,GAAG,EAAE;QACV,KAAK,MAAM,OAAO,IAAI,QAAQ;YAAE,OAAO,EAAE,CAAA;IAC3C,CAAC,CAAA;AACH,CAAC"}

package/dist/motion-span.d.ts

@@ -0,0 +1,57 @@
+import type { LayoutDrag, MotionLayoutProps, MotionStyle } from "./host.js";
+import type { MotionTargetScope, MotionAnimation, MotionAnimationTarget, MotionVariants, MotionViewport } from "./motion-variants.js";
+import type { MotionValue } from "./motion-value.js";
+/**
+ * What CSS lets an inline box show, and gpuix's inline model draws: the paragraph reads these
+ * from the style sampled for the frame, and lays itself out again when one changes the width of
+ * the text or the space along the line. Mirrors `Scope::InlineBox`.
+ */
+declare const MOTION_SPAN_KEYS: readonly ["opacity", "color", "backgroundColor", "textDecorationColor", "outlineColor", "outlineWidth", "outlineOffset", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "fontSize", "fontWeight", "fontVariationSettings", "lineHeight", "textUnderlineOffset", "textDecorationThickness"];
+export type MotionSpanKey = (typeof MOTION_SPAN_KEYS)[number];
+/**
+ * Framer's transform keys. A transform does not apply to a non-atomic inline box in CSS, so
+ * they are accepted, as Framer accepts them on any element, and have no effect.
+ */
+declare const IGNORED_STYLE_KEYS: readonly ["transform", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "scaleZ", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY", "originX", "originY", "originZ", "transformPerspective"];
+export type MotionSpanTransformStyle = {
+    [Key in (typeof IGNORED_STYLE_KEYS)[number]]?: number | string;
+};
+/**
+ * What a `motion.span` can animate: colours and the opacity they are painted with, the font of its
+ * text, its padding, margin, border and outline, the corners of its background and the lines drawn
+ * over its text. Width, height, position and the like are not a span's. The transform keys are
+ * accepted and do nothing, as a transform does nothing to a non-atomic inline box.
+ */
+export type MotionSpanStyle = Pick<MotionStyle, MotionSpanKey> & MotionSpanTransformStyle;
+export type MotionSpanVariant = MotionAnimationTarget<MotionSpanStyle>;
+export type MotionSpanVariants = MotionVariants<MotionSpanStyle>;
+/** What a span animates to while a gesture is on it, with the transition that animation plays with. */
+export type MotionSpanGestureTarget = MotionAnimationTarget<MotionSpanStyle>;
+export type MotionSpanViewport = MotionViewport;
+/** The animation props of a `motion.span`. */
+export type MotionSpanAnimation = MotionAnimation<MotionSpanStyle>;
+declare const IGNORED_PROP_NAMES: readonly ["layout", "layoutId", "layoutDependency", "layoutScroll", "layoutRoot", "layoutDrag", "onLayoutAnimationStart", "onLayoutAnimationComplete", "onLayoutMeasure", "drag", "dragConstraints", "dragElastic", "dragMomentum", "dragTransition", "dragControls", "dragListener", "dragSnapToOrigin", "dragPropagation", "dragDirectionLock", "onDirectionLock", "onDragTransitionEnd", "whileDrag"];
+/** The props a `motion.span` takes and ignores. */
+export declare const IGNORED_SPAN_PROPS: readonly string[];
+/**
+ * Framer's layout and drag props. A layout animation moves a box with a transform and a drag moves it
+ * the same way, which does nothing to a non-atomic inline box, so a `motion.span` takes them and they
+ * have no effect: no layout animation runs and no callback of one is called.
+ */
+export type MotionSpanIgnoredProps = {
+    [Prop in Exclude<(typeof IGNORED_PROP_NAMES)[number], "layout" | "layoutId" | "layoutDrag">]?: unknown;
+} & {
+    layout?: MotionLayoutProps["layout"];
+    layoutId?: string;
+    layoutDrag?: LayoutDrag;
+};
+/** `props` without the ones a span ignores, which must not reach the host as the props of an element. */
+export declare function withoutIgnoredSpanProps<Props extends object>(props: Props): Props;
+/** `style` without the transform keys, which a span ignores whatever they hold, a motion value too. */
+export declare function withoutIgnoredSpanStyle<Style>(style: Style): Style;
+/** Throws for a motion value bound to a property a span cannot show, naming it. */
+export declare function assertSpanMotionValues(values: Record<string, MotionValue> | undefined): void;
+/** A span's targets hold the keys it shows and the transform keys it ignores. */
+export declare const SPAN_SCOPE: MotionTargetScope;
+export {};
+//# sourceMappingURL=motion-span.d.ts.map

package/dist/motion-span.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-span.d.ts","sourceRoot":"","sources":["../js/motion-span.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,WAAW,EAAoB,MAAM,WAAW,CAAA;AAC7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,wqBAuCZ,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D;;;GAGG;AACH,QAAA,MAAM,kBAAkB,sPAuBd,CAAA;AAEV,MAAM,MAAM,wBAAwB,GAAG;KAAG,GAAG,IAAI,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;CAAE,CAAA;AAEzG;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,wBAAwB,CAAA;AAEzF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAA;AAEtE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAA;AAEhE,uGAAuG;AACvG,MAAM,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAA;AAE5E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAA;AAE/C,8CAA8C;AAC9C,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,eAAe,CAAC,CAAA;AA8BlE,QAAA,MAAM,kBAAkB,0YAA4C,CAAA;AAEpE,mDAAmD;AACnD,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAAuB,CAAA;AAEvE;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;KAClC,IAAI,IAAI,OAAO,CAAC,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO;CACvG,GAAG;IACF,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,UAAU,CAAA;CACxB,CAAA;AAED,yGAAyG;AACzG,wBAAgB,uBAAuB,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAMjF;AAED,uGAAuG;AACvG,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAQlE;AAED,mFAAmF;AACnF,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,SAAS,GAAG,IAAI,CAQ5F;AAaD,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,iBAIxB,CAAA"}

package/dist/motion-span.js

@@ -0,0 +1,150 @@
+/// What `motion.span` means to the adapters, shared by React and Solid: the
+/// properties an inline span can animate and the props that have no effect on a box a
+/// paragraph paints. Its variants and gestures are `motion-variants.ts`'s.
+/**
+ * What CSS lets an inline box show, and gpuix's inline model draws: the paragraph reads these
+ * from the style sampled for the frame, and lays itself out again when one changes the width of
+ * the text or the space along the line. Mirrors `Scope::InlineBox`.
+ */
+const MOTION_SPAN_KEYS = [
+    "opacity",
+    "color",
+    "backgroundColor",
+    "textDecorationColor",
+    "outlineColor",
+    "outlineWidth",
+    "outlineOffset",
+    "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+    "borderWidth",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "fontSize",
+    "fontWeight",
+    "fontVariationSettings",
+    "lineHeight",
+    "textUnderlineOffset",
+    "textDecorationThickness",
+];
+/**
+ * Framer's transform keys. A transform does not apply to a non-atomic inline box in CSS, so
+ * they are accepted, as Framer accepts them on any element, and have no effect.
+ */
+const IGNORED_STYLE_KEYS = [
+    "transform",
+    "x",
+    "y",
+    "z",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "scaleZ",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "skew",
+    "skewX",
+    "skewY",
+    "originX",
+    "originY",
+    "originZ",
+    "transformPerspective",
+];
+const LAYOUT_PROPS = [
+    "layout",
+    "layoutId",
+    "layoutDependency",
+    "layoutScroll",
+    "layoutRoot",
+    "layoutDrag",
+    "onLayoutAnimationStart",
+    "onLayoutAnimationComplete",
+    "onLayoutMeasure",
+];
+const DRAG_PROPS = [
+    "drag",
+    "dragConstraints",
+    "dragElastic",
+    "dragMomentum",
+    "dragTransition",
+    "dragControls",
+    "dragListener",
+    "dragSnapToOrigin",
+    "dragPropagation",
+    "dragDirectionLock",
+    "onDirectionLock",
+    "onDragTransitionEnd",
+    "whileDrag",
+];
+const IGNORED_PROP_NAMES = [...LAYOUT_PROPS, ...DRAG_PROPS];
+/** The props a `motion.span` takes and ignores. */
+export const IGNORED_SPAN_PROPS = IGNORED_PROP_NAMES;
+/** `props` without the ones a span ignores, which must not reach the host as the props of an element. */
+export function withoutIgnoredSpanProps(props) {
+    const kept = {};
+    for (const key of Object.keys(props)) {
+        if (!IGNORED_SPAN_PROPS.includes(key))
+            kept[key] = Reflect.get(props, key);
+    }
+    return kept;
+}
+/** `style` without the transform keys, which a span ignores whatever they hold, a motion value too. */
+export function withoutIgnoredSpanStyle(style) {
+    if (typeof style !== "object" || style === null)
+        return style;
+    if (!IGNORED_STYLE_KEYS.some((key) => Object.hasOwn(style, key)))
+        return style;
+    const kept = {};
+    for (const key of Object.keys(style)) {
+        if (!IGNORED_STYLE_KEYS.includes(key))
+            kept[key] = Reflect.get(style, key);
+    }
+    return kept;
+}
+/** Throws for a motion value bound to a property a span cannot show, naming it. */
+export function assertSpanMotionValues(values) {
+    for (const key of Object.keys(values ?? {})) {
+        if (!MOTION_SPAN_KEYS.includes(key)) {
+            throw new Error(`A span cannot take a motion value in style.${key}: an inline box can only show ${MOTION_SPAN_KEYS.join(", ")}`);
+        }
+    }
+}
+function assertSpanStyle(where, style) {
+    for (const key of Object.keys(style)) {
+        const known = MOTION_SPAN_KEYS.includes(key) || IGNORED_STYLE_KEYS.includes(key);
+        if (!known) {
+            throw new Error(`motion.span cannot animate "${key}" in ${where}: an inline box can only show ${MOTION_SPAN_KEYS.join(", ")}`);
+        }
+    }
+}
+/** A span's targets hold the keys it shows and the transform keys it ignores. */
+export const SPAN_SCOPE = {
+    component: "motion.span",
+    check: assertSpanStyle,
+    shown: (style) => withoutIgnoredSpanStyle(style),
+};
+//# sourceMappingURL=motion-span.js.map

package/dist/motion-span.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-span.js","sourceRoot":"","sources":["../js/motion-span.ts"],"names":[],"mappings":"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"}