@plitzi/sdk-shared 0.38.2 → 0.38.3

package/CHANGELOG.md

@@ -1,5 +1,129 @@
 # @plitzi/sdk-shared
 
+## 0.38.3
+
+### Patch Changes
+
+- e047e1d: ## `plitzi upgrade`: a project brought up to its CLI
+
+  A project written by an older CLI had no way up but `plitzi create` in a scratch folder and a file-by-file comparison:
+  `skills update` brought the skills and nothing else, so the `check` and `shot` scripts they teach did not exist.
+  `plitzi upgrade` (also `update`) shows what this CLI writes today for what is the CLI's in the project, and `--write`
+  makes it. One part or several: `plitzi upgrade skills`, `plitzi upgrade files packages`.
+
+  - **`files`:** the CLI's machinery — `author.ts`, `main.ts`, the Playwright, TypeScript and lint configs, AGENTS.md. One
+    nobody changed since the CLI wrote it is replaced, a missing one added; one the project made its own is shown as a
+    diff and left, until `--take <file>` (or `all`). `plitzi create` now records what it wrote, by digest, in
+    `.plitzi/scaffold.json`; a project made before that sees every file that differs as its own.
+  - **`packages`:** `package.json` merged, never replaced — the scripts and dependencies it lacks added, `@plitzi/*`
+    raised to this version, then the install (`--no-install` to leave it). A script of the project's own stays.
+  - **`skills`:** `.claude/skills/plitzi-*` from the packages installed, each replaced whole, and the ones a newer CLI
+    writes added. `plitzi skills update` is `plitzi upgrade skills --write`.
+  - **`renames`:** a name a version renamed with no alias, at its file and line — `canTemplate` → `canSnippet`,
+    `authorTemplate` → `authorSnippet` and its kin (renamed only where imported from `@plitzi/sdk-authoring`) — renamed
+    with `--write`.
+
+  `npm run author` says when the skills or the CLI's files are older than the SDK installed, and `plitzi --version`
+  prints the CLI's.
+
+  ## Page checks that can be the definition of done
+
+  `inspectPage`, `plitzi check` and the scaffold's visual test failed pages that were whole, so an agent learnt to ignore
+  them:
+
+  - **A breakpoint hiding an element on purpose** — the desktop navigation on a phone, a bottom bar only a phone shows —
+    is no longer "not visible": an element whose `display` or `visibility` a breakpoint rule sets is checked at the width
+    it shows at.
+  - **A lazy image out of sight** waits whichever side it is out of: below the fold, as before, or beside the screen in a
+    carousel's track — cut off by any ancestor that clips, as the browser decides when to fetch it.
+  - **A plugin that draws nothing** says so: `drawsNothing: true` in its declaration (a clock that fires a flow), and its
+    handle is `boxless`, so no check waits for it on screen.
+
+  `plitzi check --json` and `PageReport` carry `issues` beside `problems`: each with its `code` (`element-hidden`,
+  `image-not-loaded`, `sideways-scroll`…), the `elementId` it is about and, in `check`, the `width`.
+
+  ## Authoring
+  - **A link's `content` names it.** `control-without-name` read only a link's `label`, so applying the
+    `content-attribute` suggestion as written turned every link into a warning.
+  - **`plitzi fix` writes `content-attribute`** where it has one reading: a button's or link's children that are only
+    `text(…)` and `fontAwesome({ icon })` become its own `content` and `icon` — the words kept as written, an import left
+    unused taken out. A child with an id, options or a class of the space's own stays, and is said. `npm run author`'s
+    `[fix]` line counts these too.
+  - **The recipes, the skill's examples and the catalog template** hold to the suggestions as well as the warnings, and
+    their tests say so: six recipes and the template wrote a link's or a button's words as a child.
+
+  ## Declared motion — in code, in the builder and over MCP
+
+  An element says how it arrives and whether it keeps moving with `motion`, and the SDK's stylesheet plays it — no
+  keyframes to write: `{ enter: 'fade-up', on: 'view' }` arrives as it scrolls into view, `{ enter: 'scale', stagger:
+60 }` brings its children one by one (a grid, a list's rows), `{ loop: 'float' }` keeps it moving. Enters: `fade`,
+  `fade-up`, `fade-down`, `slide-left`, `slide-right`, `scale`; loops: `float`, `pulse`, `spin`, `sway`; `duration`,
+  `delay`, `stagger` in ms. Opacity and the transforms only — an arrival on `translate`/`scale`, so it composes with an
+  element's own `transform` — a loop held until the page is live (`data-hydrated`), and none of it for a visitor who asked
+  for less motion. `view` follows the scroll where the browser has scroll timelines and plays on load where not.
+
+  - **Authoring:** `motion` on any factory; refused where it cannot play (`motion-invalid`, `motion-no-tag`), and carried
+    by `specFromSpace` and `compareSpaces`.
+  - **Builder:** a **Motion** tab in an element's tools: the presets as chips, a stage that plays the one pointed at (a
+    loop shown stronger than the page plays it, and saying so), when and how long, children one by one, and the choices
+    read back as a sentence — laid out side by side once the sidebar is wide enough. The canvas holds motion still while
+    editing; **▶** in the header (or **Play on the canvas** in the tab) plays it from the start, restarting what already
+    played, and an arrival tied to the scroll plays by the clock there, where it is usually in view already.
+  - **MCP:** `motion` on `upsertElement` and `patchElement`, checked the same way; the guide names the presets.
+  - **Schema:** `definition.motion` (`ElementMotion`, `@plitzi/sdk-shared/schema/motion` — the presets, `motionProblems`,
+    `motionAttributes`, `isMotionAnimation`, and each preset's frames, which the stylesheet is tested against), in both
+    init queries. **The platform's GraphQL schema has to declare `SpaceElementMotion`
+    before this version's builder or SDK queries it.**
+
+  ## Dev tools QA: x-ray and motion
+
+  The **QA** tab gains an **X-ray**: every element the document wires something to — bound to data, shown on a condition,
+  running a flow, moving, behind a flag — outlined in its colour and named on the page, read from the space's document by
+  the element's name; its legend counts each kind on the page and picks one to show alone. Beside **Pause**, **Slow**
+  plays every animation at a quarter of its speed and **Replay** plays the declared motion again from the start, without
+  reloading the page.
+
+  ## Plugins that draw
+
+  `useCanvas2d`, `useWebGL`, `useWebGL2` and `useAnimationFrame` (`@plitzi/plitzi-sdk`): a canvas sized to the device (at
+  most 2×), followed as it resizes, animating only while somebody can see it move — a live page, no reduced motion, the
+  tab in front, the canvas on screen — and one still frame otherwise (the builder included). `createShaderProgram`
+  compiles and links, and a shader that fails throws a `ShaderError` with the driver's log, printed as
+  `[plugin <type> "<id>"] fragment shader failed: …` instead of an empty canvas; `error` and `ready` say where it is.
+  `useReducedMotion` for the rest.
+
+  ## A space re-authored without a restart
+
+  A project's `npm run start:dev` restarts for its server code and its plugins only: a save to the space is re-authored
+  in a process of its own and every open page loads again (`server.reloadPages()` over an SSE endpoint, on with
+  `createServer({ devReload: true })` — never by `devMode` alone, since every open page holds a connection for it); an
+  edit authoring refuses is printed and the page keeps the last space that authored. A shutdown also ends WebSockets at
+  once (`1001`, going away) rather than waiting out the grace — the ten seconds a restart used to wait on an open page.
+
+  ## Checks and authoring, from the stripe.com experiment
+  - **A component's instance** is found by its own name: its root carries `data-plitzi-instance`, and the instance's
+    handle selects it — `inspectPage` no longer reports every named instance as missing.
+  - **Hidden at this width on purpose** — the burger on a desktop, the desktop menu on a phone — is listed apart
+    (`hiddenAtWidth`, and a dim line under `plitzi check`'s ✓) rather than as a problem.
+  - **An element whose every child is conditional** — four flyouts in one list, each opening on the state that names
+    it — is conditional too: at rest it shows nothing, and that is it working.
+  - **A carousel that scrolls by itself** (`overflow-x: auto`) is not the page scrolling sideways; the page's own pane
+    still is.
+  - **Templates:** `{{ state.faq ?? -1 }}` — a sign on the right of `??` — reads.
+  - **A plugin attribute named as an element field** (`variant`, `class`, `id`…) is warned about
+    (`plugin-attribute-reserved`): a factory never hands it to the plugin. A `variant` no class or type style declares is
+    `unknown-variant`.
+  - **Lists:** a list with `items` renders as the `<ul>` (or `<ol>`) its `subType` says — it was a `<div>` — with no
+    markers and the same spacing, so a page looks as it did; the builder offers the list type for it too. Its rows are
+    `<li>`s: `list-row-not-li` warns of one that is not — a plain container is made one by `fixSpace`, a link or a button
+    is wrapped — and the recipes, the catalog template and the docs write rows as `listItem`.
+  - **CSS:** `mask-size`, `mask-position`, `mask-repeat`, `mask-composite`, `-webkit-mask-image`,
+    `-webkit-background-clip`, `box-decoration-break` and `-webkit-box-decoration-break`.
+  - **`plitzi shot`:** `--clip <element>`, `--scroll-to <element>` and `--viewport`; `--frames` takes the same framing.
+  - **SVG from files:** `svgFile` and `svgFiles` (`@plitzi/sdk-authoring/node`) read a logo or a folder of them,
+    compacted (`compactSvg`, also on the main entry), instead of strings in the space's source.
+  - The plugin scaffolds say that an inline `style` on `RootElement` outranks the element's classes.
+
 ## 0.38.2
 
 ### Patch Changes

package/dist/authoring/declare.d.ts

@@ -61,6 +61,12 @@ export interface ElementDeclarationData {
      * surface to refuse a value outside it.
      */
     attributeValues?: Record<string, readonly string[]>;
+    /**
+     * Whether the element is behaviour rather than content — a clock that fires a flow, a listener — and draws nothing on
+     * a page (at most a tag in the builder, to have something to select). Read by the page checks (`inspectPage`,
+     * `plitzi check`), which would otherwise wait for it to be on screen and report it hidden.
+     */
+    drawsNothing?: boolean;
     content?: {
         attributes?: Record<string, unknown>;
         definition?: {

package/dist/authoring/elementCallbacks.d.ts

@@ -53,13 +53,13 @@ export declare const SCROLL_CALLBACKS: {
                 type: "select";
                 description: string;
                 default: string;
-                options: ("start" | "center" | "end" | "nearest")[];
+                options: ("end" | "start" | "center" | "nearest")[];
             };
             inline: {
                 type: "select";
                 description: string;
                 default: string;
-                options: ("start" | "center" | "end" | "nearest")[];
+                options: ("end" | "start" | "center" | "nearest")[];
             };
             behavior: BuiltinParam;
         };

package/dist/helpers/twigWrapper/Parser/ExpressionParser.mjs

@@ -234,6 +234,16 @@ var r = (e, t) => {
 			right: this.parsePower()
 		});
 	}
+	parseSignedAtom() {
+		return this.peek() === e.Minus && t(this.at(1)) ? this.maybeTrailingFilters({
+			type: "literal",
+			value: this.scanNumber()
+		}) : this.peek() === e.Minus ? (this.pos++, this.skipWs(), {
+			type: "unary",
+			operator: "-",
+			operand: this.parseSignedAtom()
+		}) : this.parseAtom();
+	}
 	parseDefault() {
 		if (this.skipWs(), this.peek() === e.Minus && t(this.at(1))) return this.maybeTrailingFilters({
 			type: "literal",
@@ -248,7 +258,7 @@ var r = (e, t) => {
 		for (this.skipWs(); this.peek() === e.Question && this.at(1) === e.Question;) this.pos += 2, this.skipWs(), n = {
 			type: "default",
 			value: n,
-			defaultExpr: this.parseAtom()
+			defaultExpr: this.parseSignedAtom()
 		}, this.skipWs();
 		return n;
 	}

package/dist/network/graphql/builder/Queries/InitQuery.d.ts

@@ -9,5 +9,5 @@ export type TInitQuery = {
         style: Style;
     };
 };
-declare const InitQuery = "\n  query InitQuery($environment: String!, $revision: Int) {\n    PlatformFlags\n    Space(environment: $environment, revision: $revision) {\n      definition {\n        name\n        permanentUrl\n      }\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          category\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        id\n        platform\n        variables\n        mode\n        fonts\n        cache\n      }\n    }\n  }\n";
+declare const InitQuery = "\n  query InitQuery($environment: String!, $revision: Int) {\n    PlatformFlags\n    Space(environment: $environment, revision: $revision) {\n      definition {\n        name\n        permanentUrl\n      }\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n            motion {\n              enter\n              on\n              duration\n              delay\n              stagger\n              loop\n            }\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          category\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        id\n        platform\n        variables\n        mode\n        fonts\n        cache\n      }\n    }\n  }\n";
 export default InitQuery;

package/dist/network/graphql/builder/Queries/InitQuery.mjs

@@ -1,4 +1,4 @@
 //#region src/network/graphql/builder/Queries/InitQuery.ts
-var e = "\n  query InitQuery($environment: String!, $revision: Int) {\n    PlatformFlags\n    Space(environment: $environment, revision: $revision) {\n      definition {\n        name\n        permanentUrl\n      }\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          category\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        id\n        platform\n        variables\n        mode\n        fonts\n        cache\n      }\n    }\n  }\n";
+var e = "\n  query InitQuery($environment: String!, $revision: Int) {\n    PlatformFlags\n    Space(environment: $environment, revision: $revision) {\n      definition {\n        name\n        permanentUrl\n      }\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n            motion {\n              enter\n              on\n              duration\n              delay\n              stagger\n              loop\n            }\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          category\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        id\n        platform\n        variables\n        mode\n        fonts\n        cache\n      }\n    }\n  }\n";
 //#endregion
 export { e as default };

package/dist/network/graphql/sdk/Queries/InitQuery.d.ts

@@ -10,5 +10,5 @@ export type TInitQuery = {
         };
     };
 };
-declare const InitQuery = "\n  query InitQuery($environment: String!, $revision: Int) {\n    Space(environment: $environment, revision: $revision) {\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        variables\n        cache\n      }\n      # The schema fetch is the one moment a client-side render hears from the server at all, so the decision it\n      # would have been handed in an SSR bootstrap travels here instead.\n      render {\n        overQuota\n      }\n    }\n  }\n";
+declare const InitQuery = "\n  query InitQuery($environment: String!, $revision: Int) {\n    Space(environment: $environment, revision: $revision) {\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n            motion {\n              enter\n              on\n              duration\n              delay\n              stagger\n              loop\n            }\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        variables\n        cache\n      }\n      # The schema fetch is the one moment a client-side render hears from the server at all, so the decision it\n      # would have been handed in an SSR bootstrap travels here instead.\n      render {\n        overQuota\n      }\n    }\n  }\n";
 export default InitQuery;

package/dist/network/graphql/sdk/Queries/InitQuery.mjs

@@ -1,4 +1,4 @@
 //#region src/network/graphql/sdk/Queries/InitQuery.ts
-var e = "\n  query InitQuery($environment: String!, $revision: Int) {\n    Space(environment: $environment, revision: $revision) {\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        variables\n        cache\n      }\n      # The schema fetch is the one moment a client-side render hears from the server at all, so the decision it\n      # would have been handed in an SSR bootstrap travels here instead.\n      render {\n        overQuota\n      }\n    }\n  }\n";
+var e = "\n  query InitQuery($environment: String!, $revision: Int) {\n    Space(environment: $environment, revision: $revision) {\n      schema {\n        settings\n        rsc\n        flat {\n          id\n          definition {\n            label\n            type\n            initialState\n            styleSelectors\n            bindings\n            interactions\n            parentId\n            rootId\n            items\n            runtime\n            loadStrategy\n            flag {\n              name\n              is\n            }\n            anchor\n            motion {\n              enter\n              on\n              duration\n              delay\n              stagger\n              loop\n            }\n          }\n          attributes\n        }\n        pages\n        components\n        flags\n        pageFolders {\n          id\n          name\n          slug\n          parentId\n        }\n        variables {\n          name\n          type\n          value\n          subValues {\n            when\n            value\n          }\n        }\n      }\n      plugins {\n        type\n        resource\n        settings\n      }\n      style {\n        variables\n        cache\n      }\n      # The schema fetch is the one moment a client-side render hears from the server at all, so the decision it\n      # would have been handed in an SSR bootstrap travels here instead.\n      render {\n        overQuota\n      }\n    }\n  }\n";
 //#endregion
 export { e as default };

package/dist/schema/motion.d.ts

@@ -0,0 +1,77 @@
+/**
+ * An element's declared motion — how it arrives, when, and whether it keeps moving — which the SDK's own stylesheet
+ * plays (`_motion.scss`). Every preset moves only `opacity` and `transform`, which the compositor animates without
+ * laying the page out again, and every one is stilled for a visitor who asked for less motion: the motion good
+ * practices, kept by construction rather than by the author.
+ *
+ * The one description the authoring package, the builder's Motion tab, the MCP and the validator all read; the
+ * stylesheet mirrors its presets and frames, and a test in `apps/sdk` holds the two together.
+ */
+export declare const MOTION_ENTERS: readonly ["fade", "fade-up", "fade-down", "slide-left", "slide-right", "scale"];
+export type MotionEnter = (typeof MOTION_ENTERS)[number];
+/** As the page loads, or as the element scrolls into view — tied to the scroll, so it plays at the reader's pace. */
+export declare const MOTION_TRIGGERS: readonly ["load", "view"];
+export type MotionTrigger = (typeof MOTION_TRIGGERS)[number];
+/** A motion that repeats: a gentle rise and fall, a breath, a turn, a sway. Held until the page is live. */
+export declare const MOTION_LOOPS: readonly ["float", "pulse", "spin", "sway"];
+export type MotionLoop = (typeof MOTION_LOOPS)[number];
+export interface ElementMotion {
+    /** How it arrives. */
+    enter?: MotionEnter;
+    /** When it arrives: `load` (the default) or `view`. */
+    on?: MotionTrigger;
+    /** How long it takes to arrive, in ms (600 by default). Ignored under `view`, which follows the scroll. */
+    duration?: number;
+    /** How long it waits before it does, in ms. */
+    delay?: number;
+    /**
+     * Its CHILDREN arrive one after another, this many ms apart — a grid of cards, a list's rows — rather than the
+     * element itself. Up to the first 24; the rest arrive with the 24th.
+     */
+    stagger?: number;
+    /** Keeps moving after it arrived. */
+    loop?: MotionLoop;
+}
+/** How long an arrival takes when it does not say, and the curve every arrival follows: quick out, gentle in. */
+export declare const MOTION_DEFAULT_DURATION = 600;
+export declare const MOTION_ENTER_EASING = "cubic-bezier(0.2, 0.7, 0.2, 1)";
+/** Where each arrival starts from; it ends where the element is. */
+export declare const MOTION_ENTER_FROM: Record<MotionEnter, {
+    opacity: number;
+    translate?: string;
+    scale?: string;
+}>;
+/**
+ * Each loop's one moving frame — its `transform` halfway through the period and back (`middle`), or at the end of
+ * one that keeps turning (`end`) — and its period and curve.
+ */
+export declare const MOTION_LOOP_FRAMES: Record<MotionLoop, {
+    transform: string;
+    at: 'middle' | 'end';
+    periodMs: number;
+    easing: string;
+}>;
+/** The longest a duration, a delay or a stagger may be: past it, a page is waiting on its decoration. */
+export declare const MOTION_MAX_MS = 10000;
+/** What is wrong with a value given as an element's `motion`, one sentence each — empty when it is one. */
+export declare const motionProblems: (value: unknown) => string[];
+export declare const isMotion: (value: unknown) => value is ElementMotion;
+/**
+ * What an element with `motion` carries in the DOM: the presets as `data-motion-*` — what the stylesheet animates by —
+ * and its timings as custom properties. Nothing at all for an element with none, so its markup stays as it was.
+ */
+export declare const motionAttributes: (motion: ElementMotion | undefined) => {
+    attributes: Record<string, string>;
+    style: Record<string, string>;
+};
+/** Every element the SDK's stylesheet moves: an arrival, a staggered child, a loop. */
+export declare const MOVING_SELECTOR = "[data-motion-enter], [data-motion-stagger] > *, [data-motion-loop]";
+/**
+ * The builder's canvas, held still: what is being edited is shown as it ends up, rather than arriving again on every
+ * change. `MOTION_PLAY_CSS` is the canvas playing — loops included, which a page holds until it is live and an editor
+ * never is.
+ */
+export declare const MOTION_STILL_CSS = "[data-motion-enter], [data-motion-stagger] > *, [data-motion-loop] { animation: none !important; }";
+export declare const MOTION_PLAY_CSS: string;
+/** Whether an animation is one of the declared motion's — what replaying the canvas restarts, and nothing else. */
+export declare const isMotionAnimation: (animation: object) => boolean;

package/dist/schema/motion.mjs

@@ -0,0 +1,95 @@
+import { isRecord as e } from "../helpers/isRecord.mjs";
+//#region src/schema/motion.ts
+var t = [
+	"fade",
+	"fade-up",
+	"fade-down",
+	"slide-left",
+	"slide-right",
+	"scale"
+], n = ["load", "view"], r = [
+	"float",
+	"pulse",
+	"spin",
+	"sway"
+], i = 600, a = "cubic-bezier(0.2, 0.7, 0.2, 1)", o = {
+	fade: { opacity: 0 },
+	"fade-up": {
+		opacity: 0,
+		translate: "0 24px"
+	},
+	"fade-down": {
+		opacity: 0,
+		translate: "0 -24px"
+	},
+	"slide-left": {
+		opacity: 0,
+		translate: "32px 0"
+	},
+	"slide-right": {
+		opacity: 0,
+		translate: "-32px 0"
+	},
+	scale: {
+		opacity: 0,
+		scale: "0.94"
+	}
+}, s = {
+	float: {
+		transform: "translateY(-8px)",
+		at: "middle",
+		periodMs: 6e3,
+		easing: "ease-in-out"
+	},
+	pulse: {
+		transform: "scale(1.04)",
+		at: "middle",
+		periodMs: 3e3,
+		easing: "ease-in-out"
+	},
+	spin: {
+		transform: "rotate(360deg)",
+		at: "end",
+		periodMs: 12e3,
+		easing: "linear"
+	},
+	sway: {
+		transform: "rotate(2deg)",
+		at: "middle",
+		periodMs: 5e3,
+		easing: "ease-in-out"
+	}
+}, c = 1e4, l = (e, t) => typeof t == "string" && e.includes(t), u = /* @__PURE__ */ new Set([
+	"enter",
+	"on",
+	"duration",
+	"delay",
+	"stagger",
+	"loop"
+]), d = (i) => {
+	if (!e(i)) return ["motion is an object: `{ enter: 'fade-up', on: 'view' }`"];
+	let a = [];
+	for (let e of Object.keys(i)) u.has(e) || a.push(`motion has no "${e}" — it takes enter, on, duration, delay, stagger and loop`);
+	i.enter !== void 0 && !l(t, i.enter) && a.push(`motion.enter is one of ${t.join(", ")}`), i.on !== void 0 && !l(n, i.on) && a.push(`motion.on is ${n.join(" or ")}`), i.loop !== void 0 && !l(r, i.loop) && a.push(`motion.loop is one of ${r.join(", ")}`);
+	for (let e of [
+		"duration",
+		"delay",
+		"stagger"
+	]) {
+		let t = i[e];
+		t !== void 0 && (typeof t != "number" || !Number.isFinite(t) || t < 0 || t > 1e4) && a.push(`motion.${e} is a number of ms from 0 to ${String(c)}`);
+	}
+	return i.enter === void 0 && i.loop === void 0 && a.push("motion says nothing to play: give it an `enter`, a `loop`, or both"), i.stagger !== void 0 && i.enter === void 0 && a.push("motion.stagger staggers the children’s `enter`: give it one"), a;
+}, f = (e) => d(e).length === 0, p = (e) => {
+	if (!e) return {
+		attributes: {},
+		style: {}
+	};
+	let t = {}, n = {};
+	return e.enter && (t[e.stagger === void 0 ? "data-motion-enter" : "data-motion-stagger"] = e.enter, t["data-motion-on"] = e.on ?? "load"), e.loop && (t["data-motion-loop"] = e.loop), e.duration !== void 0 && (n["--plitzi-motion-duration"] = `${String(e.duration)}ms`), e.delay !== void 0 && (n["--plitzi-motion-delay"] = `${String(e.delay)}ms`), e.stagger !== void 0 && (n["--plitzi-motion-stagger"] = `${String(e.stagger)}ms`), {
+		attributes: t,
+		style: n
+	};
+}, m = "[data-motion-enter], [data-motion-stagger] > *, [data-motion-loop]", h = `${m} { animation: none !important; }`, g = ["[data-motion-loop] { animation-play-state: running, running !important; }", "[data-motion-on=\"view\"][data-motion-enter], [data-motion-on=\"view\"][data-motion-stagger] > * { animation-timeline: auto, auto !important; }"].join("\n"), _ = (e) => "animationName" in e && typeof e.animationName == "string" && e.animationName.startsWith("plitzi-motion-");
+//#endregion
+export { i as MOTION_DEFAULT_DURATION, t as MOTION_ENTERS, a as MOTION_ENTER_EASING, o as MOTION_ENTER_FROM, r as MOTION_LOOPS, s as MOTION_LOOP_FRAMES, c as MOTION_MAX_MS, g as MOTION_PLAY_CSS, h as MOTION_STILL_CSS, n as MOTION_TRIGGERS, m as MOVING_SELECTOR, f as isMotion, _ as isMotionAnimation, p as motionAttributes, d as motionProblems };

package/dist/schema/wire.mjs

@@ -2,26 +2,34 @@
 var e = (e) => ({
 	...e,
 	flat: Object.values(e.flat)
-}), t = ({ definition: e, ...t }) => {
-	let { parentId: n, items: r, bindings: i, interactions: a, initialState: o, runtime: s, loadStrategy: c, flag: l, anchor: u, ...d } = e;
+}), t = (e) => ({
+	...e.enter ? { enter: e.enter } : {},
+	...e.on ? { on: e.on } : {},
+	...typeof e.duration == "number" ? { duration: e.duration } : {},
+	...typeof e.delay == "number" ? { delay: e.delay } : {},
+	...typeof e.stagger == "number" ? { stagger: e.stagger } : {},
+	...e.loop ? { loop: e.loop } : {}
+}), n = ({ definition: e, ...n }) => {
+	let { parentId: r, items: i, bindings: a, interactions: o, initialState: s, runtime: c, loadStrategy: l, flag: u, anchor: d, motion: f, ...p } = e;
 	return {
-		...t,
+		...n,
 		definition: {
-			...d,
-			...n == null ? {} : { parentId: n },
-			...r == null ? {} : { items: r },
-			...i == null ? {} : { bindings: i },
-			...a == null ? {} : { interactions: a },
-			...o == null ? {} : { initialState: o },
-			...s == null ? {} : { runtime: s },
-			...c == null ? {} : { loadStrategy: c },
-			...l == null ? {} : { flag: l },
-			...u == null ? {} : { anchor: u }
+			...p,
+			...r == null ? {} : { parentId: r },
+			...i == null ? {} : { items: i },
+			...a == null ? {} : { bindings: a },
+			...o == null ? {} : { interactions: o },
+			...s == null ? {} : { initialState: s },
+			...c == null ? {} : { runtime: c },
+			...l == null ? {} : { loadStrategy: l },
+			...u == null ? {} : { flag: u },
+			...d == null ? {} : { anchor: d },
+			...f == null ? {} : { motion: t(f) }
 		}
 	};
-}, n = (e) => ({
+}, r = (e) => ({
 	...e,
-	flat: Object.fromEntries(e.flat.map((e) => [e.id, t(e)]))
+	flat: Object.fromEntries(e.flat.map((e) => [e.id, n(e)]))
 });
 //#endregion
-export { t as elementFromWire, n as schemaFromWire, e as schemaToWire };
+export { n as elementFromWire, r as schemaFromWire, e as schemaToWire };

package/dist/style/styleConstants.d.ts

@@ -42,6 +42,11 @@ declare const styleConstants: {
     readonly BACKGROUND_ATTACHMENT: "background-attachment";
     readonly BACKGROUND_BLEND_MODE: "background-blend-mode";
     readonly MASK_IMAGE: "mask-image";
+    readonly MASK_SIZE: "mask-size";
+    readonly MASK_POSITION: "mask-position";
+    readonly MASK_REPEAT: "mask-repeat";
+    readonly MASK_COMPOSITE: "mask-composite";
+    readonly WEBKIT_MASK_IMAGE: "-webkit-mask-image";
     readonly BORDER_TOP_STYLE: "border-top-style";
     readonly BORDER_TOP_WIDTH: "border-top-width";
     readonly BORDER_TOP_COLOR: "border-top-color";
@@ -176,14 +181,17 @@ declare const styleConstants: {
     readonly WEBKIT_LINE_CLAMP: "-webkit-line-clamp";
     readonly WEBKIT_BOX_ORIENT: "-webkit-box-orient";
     readonly WEBKIT_TEXT_FILL_COLOR: "-webkit-text-fill-color";
+    readonly WEBKIT_BACKGROUND_CLIP: "-webkit-background-clip";
+    readonly BOX_DECORATION_BREAK: "box-decoration-break";
+    readonly WEBKIT_BOX_DECORATION_BREAK: "-webkit-box-decoration-break";
     readonly FILL: "fill";
     readonly STROKE: "stroke";
     readonly STROKE_WIDTH: "stroke-width";
 };
 export declare const inheritableAttributesBase: StyleCategory[];
 export declare const StyleBindingsAllowed: {
-    path: "color" | "cursor" | "filter" | "fill" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "scroll-snap-type" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-padding-top" | "scroll-margin-top" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
-    label: "color" | "cursor" | "filter" | "fill" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "scroll-snap-type" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-padding-top" | "scroll-margin-top" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
+    path: "color" | "cursor" | "filter" | "fill" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "mask-size" | "mask-position" | "mask-repeat" | "mask-composite" | "-webkit-mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "scroll-snap-type" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-padding-top" | "scroll-margin-top" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "-webkit-background-clip" | "box-decoration-break" | "-webkit-box-decoration-break" | "stroke" | "stroke-width";
+    label: "color" | "cursor" | "filter" | "fill" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "mask-size" | "mask-position" | "mask-repeat" | "mask-composite" | "-webkit-mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "scroll-snap-type" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-padding-top" | "scroll-margin-top" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "-webkit-background-clip" | "box-decoration-break" | "-webkit-box-decoration-break" | "stroke" | "stroke-width";
 }[];
 export declare const baseDefaultValue: Record<StyleCategory, StyleValue>;
 export default styleConstants;

package/dist/style/styleConstants.mjs

@@ -55,6 +55,11 @@ var e = {
 	BACKGROUND_ATTACHMENT: "background-attachment",
 	BACKGROUND_BLEND_MODE: "background-blend-mode",
 	MASK_IMAGE: "mask-image",
+	MASK_SIZE: "mask-size",
+	MASK_POSITION: "mask-position",
+	MASK_REPEAT: "mask-repeat",
+	MASK_COMPOSITE: "mask-composite",
+	WEBKIT_MASK_IMAGE: "-webkit-mask-image",
 	BORDER_TOP_STYLE: "border-top-style",
 	BORDER_TOP_WIDTH: "border-top-width",
 	BORDER_TOP_COLOR: "border-top-color",
@@ -189,6 +194,9 @@ var e = {
 	WEBKIT_LINE_CLAMP: "-webkit-line-clamp",
 	WEBKIT_BOX_ORIENT: "-webkit-box-orient",
 	WEBKIT_TEXT_FILL_COLOR: "-webkit-text-fill-color",
+	WEBKIT_BACKGROUND_CLIP: "-webkit-background-clip",
+	BOX_DECORATION_BREAK: "box-decoration-break",
+	WEBKIT_BOX_DECORATION_BREAK: "-webkit-box-decoration-break",
 	FILL: "fill",
 	STROKE: "stroke",
 	STROKE_WIDTH: "stroke-width"
@@ -260,6 +268,11 @@ var e = {
 	[t.BACKGROUND_ATTACHMENT]: "scroll",
 	[t.BACKGROUND_BLEND_MODE]: "normal",
 	[t.MASK_IMAGE]: "none",
+	[t.MASK_SIZE]: "auto",
+	[t.MASK_POSITION]: "0% 0%",
+	[t.MASK_REPEAT]: "repeat",
+	[t.MASK_COMPOSITE]: "add",
+	[t.WEBKIT_MASK_IMAGE]: "none",
 	[t.BORDER_TOP_STYLE]: "solid",
 	[t.BORDER_TOP_WIDTH]: "0px",
 	[t.BORDER_TOP_COLOR]: "#000000",
@@ -394,6 +407,9 @@ var e = {
 	[t.WEBKIT_LINE_CLAMP]: "none",
 	[t.WEBKIT_BOX_ORIENT]: "horizontal",
 	[t.WEBKIT_TEXT_FILL_COLOR]: "currentcolor",
+	[t.WEBKIT_BACKGROUND_CLIP]: "border-box",
+	[t.BOX_DECORATION_BREAK]: "slice",
+	[t.WEBKIT_BOX_DECORATION_BREAK]: "slice",
 	[t.FILL]: "currentColor",
 	[t.STROKE]: "none",
 	[t.STROKE_WIDTH]: "1"

package/dist/types/SchemaTypes.d.ts

@@ -2,6 +2,7 @@ import { InteractionCallbackParamValues, InteractionCallbackType } from './Inter
 import { ChannelDeclarations } from './RealtimeTypes';
 import { SnippetStyle } from './SnippetTypes';
 import { BuiltinParam } from '../authoring/paramSpec';
+import { ElementMotion } from '../schema/motion';
 import { RuleGroup } from '@plitzi/plitzi-ui/QueryBuilder';
 export type ElementRuntime = 'server' | 'client' | 'shared';
 /**
@@ -114,6 +115,8 @@ export type ElementDefinition = {
      * for the platform, this names it for the URL. One per rendered page, layouts included (`isAnchor`).
      */
     anchor?: string;
+    /** How it arrives and whether it keeps moving, played by the SDK's stylesheet. See {@link ElementMotion}. */
+    motion?: ElementMotion;
 };
 /**
  * An element, keyed by the one name it answers to.
@@ -337,14 +340,19 @@ export type SchemaContextValue = {
     schemaUpdateSettings?: (value: string | number | boolean, path?: string, fromSubscriptions?: boolean) => void;
 };
 /** The fields of a definition an element may go without — absent in a document, `null` from GraphQL. */
-type OptionalDefinitionKey = 'parentId' | 'items' | 'bindings' | 'interactions' | 'initialState' | 'runtime' | 'loadStrategy' | 'flag' | 'anchor';
+type OptionalDefinitionKey = 'parentId' | 'items' | 'bindings' | 'interactions' | 'initialState' | 'runtime' | 'loadStrategy' | 'flag' | 'anchor' | 'motion';
 /**
  * An element as it arrives on the wire. GraphQL answers every field a query names, so one the element does not have
  * comes back `null` — where the element itself has nothing. `schemaFromWire` drops them on arrival.
  */
 export type WireElement = Omit<Element, 'definition'> & {
     definition: Omit<ElementDefinition, OptionalDefinitionKey> & {
-        [K in OptionalDefinitionKey]?: ElementDefinition[K] | null;
+        [K in Exclude<OptionalDefinitionKey, 'motion'>]?: ElementDefinition[K] | null;
+    } & {
+        /** Every field the query names, `null` where the motion has none. */
+        motion?: {
+            [K in keyof ElementMotion]?: ElementMotion[K] | null;
+        } | null;
     };
 };
 export type SchemaRaw = {

package/dist/types/ServerTypes.d.ts

@@ -136,6 +136,8 @@ export type SSRTemplateProps = {
     reactCompilerRuntime?: string;
     /** When true the client-side <script> block is omitted — useful for inspecting raw SSR HTML. */
     ssrOnly?: boolean;
+    /** The page listens for the server saying the space changed, and loads again — with `devReload` on (`reloadPages`). */
+    devReload?: boolean;
     debugMode?: boolean;
     /**
      * The theme class this document wears on `<html>` — `dark`, `light`, or nothing at all.
@@ -904,6 +906,12 @@ export type SSRServerConfig = {
     publicDir?: string;
     static?: Record<string, string>;
     devMode?: boolean;
+    /**
+     * Every page this server renders listens for `reloadPages` and loads again — the edit loop of a project that authors
+     * its space in code and re-authors it on save. Off unless asked for, `devMode` included: each open page holds a
+     * connection to the server for it, which a server that never calls `reloadPages` would only pay for.
+     */
+    devReload?: boolean;
     /** Authorizes debugging on the pages this server renders. An SSR page loads the very same SDK, so this is the
      *  server-side face of the SDK's `debugMode` prop: the page decides, and the visitor's 'plitzi_debug' cookie can
      *  only narrow it. Left unset, `devMode` authorizes it — a development server debugs without being told to — and
@@ -1128,6 +1136,11 @@ export type SSRServer = {
     close: () => Promise<void>;
     readonly cache: CacheManager | null;
     readonly plugins: PluginRegistry;
+    /**
+     * With `devReload` on, every page open on this server loads again — what a project that authors its space in code
+     * calls once it wrote the new documents, instead of restarting the server. Nothing otherwise.
+     */
+    reloadPages: () => void;
 };
 /** A key/value store with per-entry expiry, backing the OAuth layer's short-lived protocol state (registered
  *  clients, authorization codes, refresh grants). Values are opaque strings the SDK serialises itself. A

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-shared",
-  "version": "0.38.2",
+  "version": "0.38.3",
   "license": "AGPL-3.0",
   "files": [
     "dist",
@@ -1135,6 +1135,10 @@
       "types": "./dist/schema/layoutChain.d.ts",
       "import": "./dist/schema/layoutChain.mjs"
     },
+    "./schema/motion": {
+      "types": "./dist/schema/motion.d.ts",
+      "import": "./dist/schema/motion.mjs"
+    },
     "./schema/schemaConstants": {
       "types": "./dist/schema/schemaConstants.d.ts",
       "import": "./dist/schema/schemaConstants.mjs"