@plitzi/sdk-elements 0.38.3 → 0.38.4

package/CHANGELOG.md

@@ -1,5 +1,207 @@
 # @plitzi/sdk-elements
 
+## 0.38.4
+
+### Patch Changes
+
+- 6ae4161: ## `plitzi push`: a self-hosted project back on its space
+
+  `plitzi create --from` and `plitzi pull` took a space out as a project and kept it in step; nothing put the project's
+  own changes back but a command per part, and no command at all for its pages. `plitzi push` is the way back
+  (`docs/en/projects-from-spaces.md`):
+
+  - **What changed, or what is named.** `plitzi push` sends what changed since the project last had the space — at a
+    terminal, offered as a ticked list to choose from (`↑/↓`, space, Enter); `plitzi push space functions` sends only
+    those parts: `space`, `functions`, `runtime`, `plugins`.
+  - **In order:** each changed plugin packed and uploaded (`pack plugin` + `upload plugin`, `--cdn`/`--bucket`), the
+    functions, the runtime, then the space — `src/space.ts` authored, the actions `src/actions.ts` serves and the manifests
+    in `src/connectors/` — as the space's draft. Never a published environment.
+  - **Never over the builder's work unseen.** The export now carries which state the draft is in (`SpaceExport.draft`),
+    recorded in `.plitzi/space.json` by `create --from` and `pull`; a push names it, and a draft edited since is refused
+    until `--force`. A project that never had the space may take one nobody has worked on; one holding work takes
+    `--force`.
+  - **Then `pull` follows it.** `.plitzi/space.json` records what was sent — only that, so a builder's change to a part
+    not pushed is still the next pull's — and a project that started on its own works with `pull` from then on.
+  - `@plitzi/sdk-shared/source`: `SpaceImport` / `SpaceImportResult` (`SPACE_IMPORT_FORMAT`), the push's one shape for
+    both ends, beside `SpaceExport`, which gains `draft`.
+  - `functions push`, `runtime push` and `upload plugin` keep their behaviour; their cores are what `push` runs.
+
+  ## A project's folders: `tmp/` for what it writes, `.plitzi/` committed, `public/` said to be public
+  - **`tmp/` is what a project writes for itself.** `@plitzi/sdk-server` keeps the plugins it builds in `tmp/.sdk-plugins`
+    and resized pictures in `tmp/images` by default (were `.sdk-plugins` and `.plitzi/images`). A project the CLI writes
+    puts the port it took (`tmp/dev-server.json`), the space as last authored while developing (`tmp/space.json`) and
+    Playwright's output (`tmp/visual`) there too, and its `.gitignore` ignores `tmp` — one line for all of it.
+  - **`.plitzi/` is committed.** The scaffold ignored it whole, so a clone lost `space.json`, `functions.json` and
+    `scaffold.json` — what `pull`, `push`, `functions push` and `upgrade` stand on. Now it holds only what the CLI records.
+    `npx plitzi upgrade --write` brings an existing project's `.gitignore` up.
+  - **No `space/offline-data.json`.** `npm run author` checks the space and writes nothing; the server asks it for the
+    documents with `--out tmp/space.json` while developing. The space is `src/space.ts`, and nothing beside it says
+    otherwise.
+  - **`public/` is on the internet.** The generated `README.md` and `AGENTS.md`, the CLI and authoring skills, the MCP
+    guide, `@plitzi/sdk-server`'s README and the docs now say so where data goes: never a secret, a key or data only
+    some visitors may read — in `public/`, or in a space's documents, which reach every visitor too.
+
+  ## An agent leaves the project clean
+
+  `AGENTS.md` gains **Keep the project clean** — nothing unused left behind, scratch work in `tmp/`, one of everything,
+  files a reader can find, and `author`, `typecheck`, `lint`, `format` and `check` passing — and the authoring skill's
+  review checklist a **Nothing left behind** section.
+
+  ## The dev tools' X-ray is the outlines too
+
+  The QA tab had **Outlines** (every element's box, its type and id when pointed at) and **X-ray** (the same boxes,
+  fainter, with what is wired to each). They are one tool now: the X-ray draws every box with its type and id, and marks
+  the wiring picked — all of it, one kind, or **Boxes only**.
+
+  ## A new space that says where to go
+
+  The space a new account and `plitzi create` start from keeps its welcome, and gains the three ways to change it — the
+  builder, code (with the command to run) and an agent — before the guides, which are shorter. Header, navigation, main
+  and footer are landmarks; the grid behind the top fades out instead of ending at an edge; the footer's line spans the
+  content; the links say their words and icon themselves, with no suggestion left.
+
+  ## Server data reads the same everywhere
+  - **One shape for a provider with a `query`.** A `runtime: 'server'` provider that only reads a JSON file the server
+    serves answered the body itself, while the same provider in the browser publishes `{ status, data }` — so moving it
+    to the server broke every binding. `publicFileResolver` and the builder's mock now answer `{ status, data }` too:
+    `<source>.data.<field>` whichever runtime.
+  - **Server data is on unless a space turns it off.** The page render read a missing `rsc` as on and the connector
+    resolver as off, so a server provider in a space the builder or the MCP made (neither writes `rsc`) resolved to
+    nothing, silently. Both read it as on now; only `rsc: { enabled: false }` turns it off (and is warned with a server
+    element). `authorSpace` writes `enabled: true` for a space that has one.
+  - **Never inside a component.** The page server resolves a page's tree and its layouts only, so a server provider in a
+    component rendered nothing, silently. Refused now (`server-provider-in-component`), with the fix: the provider on
+    the page, the rows handed in as a prop.
+  - **Bindings held to the data.** `authorSpace` takes `data` — what a provider's `query` answers — and
+    `publicData(folder)` (`@plitzi/sdk-authoring/node`) reads it from `public/`. A binding onto a path the file does not
+    have is warned (`path-not-in-data`) with the keys it does have. Generated projects pass it.
+  - **`plitzi check` reads the data too.** A binding that reads a path its provider's answer lacks, a provider that
+    failed (once, not as every element it left empty) and the rows each list rendered (`dataIssues`). `--ssr` names what
+    the server's HTML lacks that the hydrated page has. The dev tools' badge and panel (`data-plitzi-devtools`) are hidden
+    while `check` and `shot` look.
+
+  ## Authoring, clearer where agents tripped
+  - **`controls` on a button** (`aria-controls`): named by the element's id; authoring gives that element the anchor and
+    refuses an id the space lacks (`controls-unknown`); a saved document naming no anchor is warned
+    (`controls-no-anchor`). The accordion recipe uses it.
+  - **`live` on a container** (`aria-live`, `polite` or `assertive`) for words that change while a visitor reads them.
+  - **`subType: 'p'`** for a paragraph made of parts; `span-holds-block` covers it.
+  - **`formControl` types `search`, `url` and `tel`.**
+  - **Images:** no `src` draws the SDK's own placeholder (the CDN one answered 404); `resize: false` keeps a picture as
+    written; an SVG is never resized — `/_plitzi/img` redirects to it (`307`) instead of refusing it.
+  - **Messages:** an id taken by another page or layout names it and the id to write; a hyphenated source in a template
+    (`list_study-plans`) is explained as valid; an unknown CSS property says to write it in `customCss`; an unknown
+    variant on `custom` says it is never a prop of the component it hosts.
+  - **`plitzi explain` knows the helpers** — `bindTemplate`, `visibleWhen`, `variantFrom`, `activeOn`, `activeWhen`,
+    `when`, `named`, `scope`, `source`, `twig` — and `motion`, from the presets the SDK plays (`MOTION_ENTERS`,
+    `MOTION_TRIGGERS`, `MOTION_LOOPS`, now exported). `--list helpers` lists them.
+  - **`plitzi shot`** writes to `tmp/shots/` by default, and a full page shows the arrivals tied to the scroll as they
+    end. `inspectPage` no longer reports an image a hidden ancestor hides.
+  - **Style inspector:** `container-type` in Size.
+  - **New recipes:** `server-data.ts`, `accordion.ts`.
+
+  ## Matching a page to another, measured
+  - **A whole page is the whole page.** The SDK scrolls a pane of its own, so `shot`'s full-page picture was one
+    screen; the pane is unrolled now (`unrollPage`) — the viewport untouched, so a `100vh` hero stays one screen.
+  - **`plitzi shot --compare` says why, not only how much.** Every lazy picture on both pages is loaded before they are
+    taken (`loadImages`), so a section no longer swings between 23 % and 40 % on how many covers had arrived. Each section
+    is compared where it is on the other page (`alignPictures` over row profiles): a page 400 px longer is said once, with
+    the section the drift starts at, instead of a footer with the same styles reading 100 %. And the texts both pages
+    have are paired (`pageTexts`, `compareTexts`), each with what it does differently there —
+    `h1 "Learn CSS" — font-size 68px → 60px · y +19px` — position less the drift of its section. `comparePictures` takes
+    its options as an object now (`{ regions, tolerance, align }`).
+  - **`--scheme` is the space's theme.** A space whose default is dark painted dark under `--scheme light`, and the file
+    said light. `check` and `shot` now set the `theme` cookie a visitor's toggle writes; left out, the space's default is
+    pictured and the file is named by the theme actually painted.
+
+  ## `motion: { on: 'view' }` arrives once
+
+  `view` was tied to the scroll both ways: cards faded out again as the reader scrolled back up. Now it plays once, the
+  first time the element comes into view, with its `duration`, and stays — `revealOnView` (`@plitzi/sdk-shared/schema/
+motionReveal`), one observer under the SDK's root, marks it `data-motion-seen`. The scroll-driven arrival is
+  `on: 'scroll'`. A page read without scripts shows them as they end (`@media (scripting: none)`); the builder's previews
+  and the MCP's local screenshots hold motion at its end. The builder's Motion tab has the three.
+
+  The builder's preview plays motion as the published page does. It held everything at its end, and nothing marked
+  the canvas `data-hydrated`, so neither the loops nor a space's own `[data-hydrated]` animations ever started there.
+  Now an arrival plays as it comes into view, and the loops and keyframes run; **▶** on the canvas being edited runs the
+  space's own `[data-hydrated]` loops too. The motion guide adds the rule this needs from a space: `[data-hydrated]` is for
+  loops; an entrance of its own that plays once (`transform`/`opacity` only) plays from the first paint with
+  `backwards`, as the presets do — gated on hydration it jumps when the page goes live, and a canvas that never goes
+  live holds it on its first frame.
+
+  ## Thirteen ways in, nine loops
+
+  `motion` grows from six arrivals and four loops to thirteen and nine, all still `opacity` and the transforms:
+
+  - **Bold arrivals:** `slide-up` (from well below), `zoom-in` (from 60%), `zoom-out` (settling from 125%), `tilt`
+    (rising as it turns straight), `spin-in` (half a turn as it grows).
+  - **Springy arrivals:** `pop` overshoots and settles; `bounce-in` falls into place and bounces.
+  - **Loops:** `bounce`, `wobble`, `orbit` (a slow circle round where it is), `heartbeat`, `drift`.
+
+  An arrival is now a list of frames (`MOTION_ENTER_FRAMES` in `@plitzi/sdk-shared/schema/motion`; `MOTION_ENTER_FROM`
+  is its first), and so is a loop (`MOTION_LOOP_FRAMES[name].frames`, replacing `transform`/`at`). Arrivals move the
+  individual `translate`, `scale` and `rotate`, so they still compose with an element's own `transform` and with a loop.
+  The builder's Motion tab previews every frame; authoring, the MCP, `explain motion` and GraphQL read the same lists.
+
+  An arrival from the side no longer scrolls the page sideways. `slide-left` starts 32px to the right of where it lands,
+  past a phone's 16px gutter, and until it had played the page could be dragged sideways. The SDK's root clips that way
+  now (`overflow-x: clip`, which keeps the window the scroller: sticky bars and scroll timelines are untouched), and the
+  builder's preview does the same. Content wider than the page is cut rather than scrolling the page — give it a box of
+  its own with `overflow-x: auto`.
+
+  **3D and the transform parts are style properties.** `transform-style`, `perspective-origin`, `backface-visibility`,
+  `translate`, `rotate` and `scale` join the vocabulary (they were refused as `css-property-unknown` and had to go in
+  `customCss`); `scale: 0.94` is a factor, not pixels.
+
+  **The builder's placeholder for an empty element is 24px** (was 50px), one size for every element that has one. It
+  is a minimum, so it also grew empty shapes with a size of their own — a dot, a planet — while editing; 24px is still
+  a box to see, pick and drop into.
+
+  The desktop app's window was blank: authoring, run in the renderer to build the rail, asked Vite's `process` shim for
+  a working directory it does not have. It reads one only where there is one now — and only when a class conflict is
+  reported, rather than for every element of every space it writes.
+
+  ## Authoring advice that knows where and when
+  - **`class-conflict` says where both declarations are:** `styles('md-menu-button') at src/components/dropdown.ts:12,
+used by button at …, and styles('md-menu-button') at src/site/layout.ts:8, used by …` — `styles()` records its line as
+    an element factory does.
+  - **`repeated-shape` leaves controls alone.** Siblings that read different sources or write different state keys — a
+    menu for the language, one for the level — are not offered as a list.
+  - **`quiet: ['repeated-shape']`** on an element says a suggestion was left on purpose, and it is not offered again.
+    Only suggestions' codes (`quiet-unknown`). It is saved on the element (`definition.quiet`), so the builder's problems
+    panel, the MCP's `upsertElement`/`patchElement` and a project pulled back with `plitzi pull` all leave it alone.
+
+  ## What the docs say is what the code does
+
+  A pass across authoring's own messages, the skills, the MCP guide, `docs/en`, the CLI's README and the website, so an
+  agent reading two of them is never told two things:
+
+  - **A binding's `source` is the bound value, and only that.** With no value yet it fell back to the attribute's
+    current one — `sourceTo` — so `{{ source|default('…') }}` never took its default and `{{ source ? … }}` read an
+    element's placeholder ("Text") as an answer. It is `undefined` until the source has a value now; `sourceTo` is still
+    the value before.
+  - **`explain` writes a step the way its builder is called:** `delay(ms)`, `openModal('modal-id', data?)`,
+    `scrollBy('row-id', { x: '80%' })` — not `delay(…)` above the document's param names, which read as `delay({ time })`.
+  - **A page field nobody takes is told what it was probably for** — `seo` → `seoTitle` and `seoDescription` — instead of a
+    hint about keeping state appended to every one.
+  - Docs set straight: an element's id is `data-plitzi-el` in the page (`data-id` is the builder's, with debugging on);
+    a visibility condition writes nothing while its source has no value and is a yes or a no once it has one; `mobile`
+    is up to and including 48rem; `loadStrategy` defaults by type (`lazy` for a modal); the accessibility codes listed
+    in full everywhere (`embed-without-title`, `dropdown-without-control`, `controls-no-anchor`); the generated
+    `AGENTS.md` says a repeated block is a component and rows of data a list, as the skill does; `plitzi runtime` is
+    documented in the CLI's README, its skill and the website, which no longer says state across requests needs a
+    server of your own.
+
+- Updated dependencies [6ae4161]
+  - @plitzi/sdk-auth@0.38.4
+  - @plitzi/sdk-dev-tools@0.38.4
+  - @plitzi/sdk-event-bridge@0.38.4
+  - @plitzi/sdk-interactions@0.38.4
+  - @plitzi/sdk-navigation@0.38.4
+  - @plitzi/sdk-schema@0.38.4
+  - @plitzi/sdk-shared@0.38.4
+
 ## 0.38.3
 
 ### Patch Changes

package/dist/elements/basic/Button/Button.d.ts

@@ -24,6 +24,11 @@ export type ButtonProps = {
     ariaExpanded?: boolean;
     /** For a button that stays on or off — a filter, a mode: `true` while it is on. Left out, it is a plain button. */
     ariaPressed?: boolean;
+    /**
+     * What the button shows and hides — an accordion's panel, a menu — by its anchor (`aria-controls`), so a screen
+     * reader can go from one to the other. Authoring takes the element's id and gives that element the anchor.
+     */
+    controls?: string;
     /**
      * What the button does, in words — shown as a tooltip on hover, and the button's accessible name when it has no text
      * of its own. An icon-only button without one is announced as nothing at all.
@@ -40,7 +45,7 @@ export type ButtonProps = {
      */
     label?: string;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, title, label }: ButtonProps) => import('react').JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, controls, title, label }: ButtonProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Button/Button.mjs

@@ -6,31 +6,32 @@ import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, title: v, label: y }) => {
-	let { settings: { previewMode: b } } = i(), { definition: { styleSelectors: x } } = t();
+var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, controls: v, title: y, label: b }) => {
+	let { settings: { previewMode: x } } = i(), { definition: { styleSelectors: S } } = t();
 	return /* @__PURE__ */ o(n, {
 		ref: e,
 		tag: "button",
-		type: b ? m : "button",
-		className: s("plitzi-component__button", c, { "container--empty--skip": !b && !l && (d || f) }),
+		type: x ? m : "button",
+		className: s("plitzi-component__button", c, { "container--empty--skip": !x && !l && (d || f) }),
 		disabled: h,
-		title: v || void 0,
-		"aria-label": y || void 0,
+		title: y || void 0,
+		"aria-label": b || void 0,
 		"aria-expanded": g,
 		"aria-pressed": _,
+		"aria-controls": v || void 0,
 		children: [
 			u === "before" && /* @__PURE__ */ a(r, {
 				content: d,
 				icon: f,
 				iconPlacement: p,
-				iconClassName: x.icon
+				iconClassName: S.icon
 			}),
 			l,
 			u === "after" && /* @__PURE__ */ a(r, {
 				content: d,
 				icon: f,
 				iconPlacement: p,
-				iconClassName: x.icon
+				iconClassName: S.icon
 			})
 		]
 	});

package/dist/elements/basic/Button/declaration.d.ts

@@ -131,6 +131,7 @@ declare const declaration: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    controls?: string | undefined;
     icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
     iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;

package/dist/elements/basic/Button/index.d.ts

@@ -130,6 +130,7 @@ declare const Button: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    controls?: string | undefined;
     icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
     iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;

package/dist/elements/declarations/index.d.ts

@@ -424,6 +424,7 @@ export declare const elementDeclarations: {
         title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
+        controls?: string | undefined;
         icon?: string | undefined;
         subType?: "button" | "submit" | "reset" | undefined;
         iconPlacement?: import('../../Element/ElementWords').IconPlacement | undefined;
@@ -742,6 +743,7 @@ export declare const elementDeclarations: {
         readonly type: "container";
         readonly attributeValues: {
             readonly subType: readonly string[];
+            readonly live: readonly string[];
         };
         readonly content: {
             readonly attributes: {
@@ -792,7 +794,8 @@ export declare const elementDeclarations: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         label?: string | undefined;
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
+        live?: "polite" | "assertive" | "" | undefined;
         decorative?: boolean | undefined;
     }>>;
     readonly Custom: {
@@ -2135,7 +2138,7 @@ export declare const elementDeclarations: {
         };
         readonly content: {
             readonly attributes: {
-                readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+                readonly src: "";
                 readonly alt: "";
                 readonly decorative: false;
                 readonly fetchPriority: "auto";
@@ -2187,6 +2190,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        resize?: boolean | undefined;
         height?: number | undefined;
         width?: number | undefined;
         fetchPriority?: "high" | "low" | "auto" | undefined;

package/dist/elements/form/FormControl/FormControl.d.ts

@@ -2,7 +2,11 @@ import { ChangeEvent, RefObject } from 'react';
 export type FormControlProps = {
     ref: RefObject<HTMLElement>;
     className: string;
-    subType: 'text' | 'number' | 'email' | 'password' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden'
+    subType: 'text' | 'number' | 'email' | 'password'
+    /** A search box: the browser draws its clear button, and a phone shows its search key. */
+     | 'search' | 'url'
+    /** A phone number: a phone shows its dial pad. */
+     | 'tel' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden'
     /** The browser's own colour picker: its value is `#rrggbb`. */
      | 'color';
     name: string;

package/dist/elements/form/FormControl/FormControl.mjs

@@ -97,6 +97,9 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 				"number",
 				"email",
 				"password",
+				"search",
+				"url",
+				"tel",
 				"date",
 				"time",
 				"color"

package/dist/elements/form/FormControl/Settings.d.ts

@@ -1,5 +1,5 @@
 type SettingsProps = {
-    subType?: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
+    subType?: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
     name?: string;
     label?: string;
     hideLabel?: boolean;

package/dist/elements/form/FormControl/Settings.mjs

@@ -15,7 +15,10 @@ var l = (e) => {
 		"textarea",
 		"number",
 		"email",
-		"password"
+		"password",
+		"search",
+		"url",
+		"tel"
 	].includes(u), F = t((e) => N?.("name", e), [N]), I = t((e) => N?.("label", e), [N]), L = t((e) => N?.("hideLabel", e.target.checked), [N]), ee = t((e) => N?.("placeholder", e), [N]), R = t((e) => {
 		N?.("subType", e), N?.("defaultValue", "");
 	}, [N]), z = t((e) => N?.("defaultValue", e), [N]), B = t((e) => N?.("autoFocus", e.target.checked), [N]), V = t((e) => N?.("autoComplete", e.target.checked), [N]), H = t((e) => N?.("required", e.target.checked), [N]), U = t((e) => N?.("requiredMessage", e), [N]), W = t((e) => N?.("minLength", l(e)), [N]), G = t((e) => N?.("minLengthMessage", e), [N]), K = t((e) => N?.("maxLength", l(e)), [N]), q = t((e) => N?.("maxLengthMessage", e), [N]), J = t((e) => N?.("formatMessage", e), [N]), Y = t((e) => N?.("pattern", e), [N]), X = t((e) => N?.("patternMessage", e), [N]), Z = t((e) => N?.("matches", e), [N]), Q = t((e) => N?.("matchesMessage", e), [N]), $ = t((e) => N?.("readOnly", e.target.checked), [N]), te = t((e) => N?.("disabled", e.target.checked), [N]), ne = t((e) => N?.("previewError", e.target.checked), [N]), re = t((e) => {
@@ -78,6 +81,18 @@ var l = (e) => {
 						value: "email",
 						children: "Email"
 					}),
+					/* @__PURE__ */ r("option", {
+						value: "search",
+						children: "Search"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "url",
+						children: "URL"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "tel",
+						children: "Phone"
+					}),
 					/* @__PURE__ */ r("option", {
 						value: "password",
 						children: "Password"

package/dist/elements/form/FormControl/declaration.mjs

@@ -51,6 +51,9 @@ var n = {
 		"number",
 		"email",
 		"password",
+		"search",
+		"url",
+		"tel",
 		"date",
 		"time",
 		"checkbox",

package/dist/elements/media/Image/Image.d.ts

@@ -27,8 +27,14 @@ export type ImageProps = {
      *  so nothing jumps. */
     width?: number;
     height?: number;
+    /**
+     * Whether the page server may make sizes of the picture, when it does (`images` in its configuration). `false` keeps
+     * this one as it is — a picture already sized for where it sits, or one its host must serve itself. A vector (SVG) is
+     * never resized.
+     */
+    resize?: boolean;
 };
-declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode, sizes, width, height }: ImageProps) => import('react').JSX.Element;
+declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode, sizes, width, height, resize }: ImageProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/media/Image/Image.mjs

@@ -6,16 +6,16 @@ import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { useCommonStore as o } from "@plitzi/sdk-shared/store";
 import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";
-import { imageSrcSet as l, imageUrl as u, isRemoteImage as d } from "@plitzi/sdk-shared/helpers/images";
+import { imageSrcSet as l, imageUrl as u, isResizableImage as d } from "@plitzi/sdk-shared/helpers/images";
 //#region src/elements/media/Image/Image.tsx
-var f = 1280, p = n(), m = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", h = ({ ref: e, className: n = "", src: h, alt: g = "", decorative: _ = !1, fetchPriority: v = "auto", loadMode: y, sizes: b = "100vw", width: x, height: S }) => {
-	let { settings: { previewMode: C } } = a(), w = h || m, T = _ ? "" : g, [E, D] = i(void 0), O = E === w, k = r(() => D(w), [w]), A = O ? p : w, j = O ? { "data-plitzi-failed": w } : {}, M = y === "auto" ? void 0 : y, [N] = o("images.endpoint"), P = C && N && !O && d(w) ? {
+var f = 1280, p = n(), m = ({ ref: e, className: n = "", src: m, alt: h = "", decorative: g = !1, fetchPriority: _ = "auto", loadMode: v, sizes: y = "100vw", width: b, height: x, resize: S = !0 }) => {
+	let { settings: { previewMode: C } } = a(), w = m || p, T = g ? "" : h, [E, D] = i(void 0), O = E === w, k = r(() => D(w), [w]), A = O ? p : w, j = O ? { "data-plitzi-failed": w } : {}, M = v === "auto" ? void 0 : v, [N] = o("images.endpoint"), P = C && N && S && !O && d(w) ? {
 		src: u(N, w, f),
 		srcSet: l(N, w),
-		sizes: b
+		sizes: y
 	} : { src: A }, F = {
-		...x ? { width: x } : {},
-		...S ? { height: S } : {}
+		...b ? { width: b } : {},
+		...x ? { height: x } : {}
 	};
 	return C ? /* @__PURE__ */ s(t, {
 		tag: "img",
@@ -26,7 +26,7 @@ var f = 1280, p = n(), m = "https://cdn.plitzi.com/resources/img/placeholder-img
 		...F,
 		alt: T,
 		loading: M,
-		fetchPriority: v,
+		fetchPriority: _,
 		onError: O ? void 0 : k,
 		...j
 	}) : /* @__PURE__ */ s(t, {
@@ -37,11 +37,11 @@ var f = 1280, p = n(), m = "https://cdn.plitzi.com/resources/img/placeholder-img
 			src: A,
 			alt: T,
 			loading: M,
-			fetchPriority: v,
+			fetchPriority: _,
 			onError: O ? void 0 : k,
 			...j
 		})
 	});
-}, g = e(h);
+}, h = e(m);
 //#endregion
-export { h as Image, g as default };
+export { m as Image, h as default };

package/dist/elements/media/Image/declaration.d.ts

@@ -10,7 +10,7 @@ declare const declaration: {
     };
     readonly content: {
         readonly attributes: {
-            readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+            readonly src: "";
             readonly alt: "";
             readonly decorative: false;
             readonly fetchPriority: "auto";
@@ -62,6 +62,7 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    resize?: boolean | undefined;
     height?: number | undefined;
     width?: number | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;

package/dist/elements/media/Image/declaration.mjs

@@ -16,7 +16,7 @@ var n = e()({
 	},
 	content: {
 		attributes: {
-			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
+			src: "",
 			alt: "",
 			decorative: !1,
 			fetchPriority: "auto",

package/dist/elements/media/Image/index.d.ts

@@ -9,7 +9,7 @@ declare const Image: {
     };
     readonly content: {
         readonly attributes: {
-            readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+            readonly src: "";
             readonly alt: "";
             readonly decorative: false;
             readonly fetchPriority: "auto";
@@ -61,6 +61,7 @@ declare const Image: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    resize?: boolean | undefined;
     height?: number | undefined;
     width?: number | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;

package/dist/elements/provider/ApiContainer/ApiContainer.d.ts

@@ -75,7 +75,7 @@ export type ApiContainerProps = {
      */
     refreshSeconds?: number | string;
 };
-declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds }: ApiContainerProps) => import('react').JSX.Element;
+declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds, connector, action }: ApiContainerProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/provider/ApiContainer/ApiContainer.mjs

@@ -7,132 +7,124 @@ import { isEmptyAnswer as ne } from "./helpers/isEmptyAnswer.mjs";
 import { childrenWhile as re } from "./helpers/loadingSlot.mjs";
 import ie from "./helpers/providerOutcome.mjs";
 import { queryInputOf as ae } from "./helpers/queryInput.mjs";
+import { serverMock as oe } from "./helpers/serverMock.mjs";
 import r from "./hooks/useApi.mjs";
-import i from "./hooks/useAutoRefresh.mjs";
-import oe from "./hooks/useProviderPagination.mjs";
-import se from "./hooks/useProviderWrite.mjs";
-import ce from "../../../dataSource/pathFields.mjs";
-import { use as le, useCallback as a, useEffect as ue, useMemo as o, useRef as de } from "react";
-import fe from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as pe } from "@plitzi/sdk-shared/store";
-import { StoreProvider as s } from "@plitzi/nexus/react";
-import { emptyObject as c } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as l } from "react/jsx-runtime";
-import { currentRscLocation as me } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
-import he from "clsx";
-import ge from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import _e from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-import { QueryBuilderEvaluator as ve } from "@plitzi/plitzi-ui/QueryBuilder";
+import se from "./hooks/useAutoRefresh.mjs";
+import ce from "./hooks/useProviderPagination.mjs";
+import le from "./hooks/useProviderWrite.mjs";
+import ue from "../../../dataSource/pathFields.mjs";
+import { use as de, useCallback as i, useEffect as fe, useMemo as a, useRef as pe } from "react";
+import me from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as he } from "@plitzi/sdk-shared/store";
+import { StoreProvider as ge } from "@plitzi/nexus/react";
+import { emptyObject as o } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as s } from "react/jsx-runtime";
+import { currentRscLocation as _e } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
+import ve from "clsx";
+import ye from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import be from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import { QueryBuilderEvaluator as xe } from "@plitzi/plitzi-ui/QueryBuilder";
 //#region src/elements/provider/ApiContainer/ApiContainer.tsx
-var u = ({ ref: e, className: u = "", children: d, query: f = "", method: p = "get", accessToken: m = "", when: h = c, headers: g = c, mockData: _ = "{}", subType: ye = "", credentials: be = "same-origin", singleRecord: v = !1, pagination: xe = "none", pageParam: Se = "page", renderWhileLoading: Ce = !1, loadingSlot: y = "", cache: we = !1, staleTime: Te = 30, gcTime: Ee = 300, refreshSeconds: De = 0 }) => {
-	let { id: b, visible: x, definition: { label: S = "Api Container", runtime: Oe, items: ke } } = t(), C = Oe === "server", { loaded: w, stale: T, location: E, elementData: D, refresh: O } = ee(), k = ge(n.sourceType, b), { settings: { previewMode: A }, contexts: { InteractionsContext: Ae } } = fe(), { interactionsManager: j } = le(Ae), [[M, N, je]] = pe([
+var c = ({ ref: e, className: c = "", children: l, query: u = "", method: d = "get", accessToken: f = "", when: p = o, headers: m = o, mockData: h = "{}", subType: Se = "", credentials: Ce = "same-origin", singleRecord: g = !1, pagination: we = "none", pageParam: Te = "page", renderWhileLoading: Ee = !1, loadingSlot: _ = "", cache: De = !1, staleTime: Oe = 30, gcTime: ke = 300, refreshSeconds: Ae = 0, connector: je = "", action: Me = "" }) => {
+	let { id: v, visible: y, definition: { label: b = "Api Container", runtime: x, items: Ne } } = t(), S = x === "server", { loaded: C, stale: w, location: T, elementData: E, refresh: D } = ee(), O = ye(n.sourceType, v), { settings: { previewMode: k }, contexts: { InteractionsContext: Pe } } = me(), { interactionsManager: A } = de(Pe), [[j, M, Fe]] = he([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.navigate"
-	]), Me = o(() => m ? {
-		...g,
-		Authorization: `Bearer ${m}`
-	} : g, [g, m]), P = o(() => C || !x ? !1 : !!(A && f && (h === c || ve(h, {
-		...M,
-		...N
-	})) || !A && (f || _ && _ !== "{}" && _ !== c)), [
-		C,
-		x,
-		A,
-		f,
-		h,
+	]), Ie = a(() => f ? {
+		...m,
+		Authorization: `Bearer ${f}`
+	} : m, [m, f]), N = a(() => S || !y ? !1 : !!(k && u && (p === o || xe(p, {
+		...j,
+		...M
+	})) || !k && (u || h && h !== "{}" && h !== o)), [
+		S,
+		y,
+		k,
+		u,
+		p,
+		j,
 		M,
-		N,
-		_
-	]), Ne = o(() => [b], [b]), { isLoading: Pe, isFetching: Fe, data: F, refetch: I, isSuccess: Ie, isError: Le } = r({
-		url: f,
-		method: p,
-		credentials: be,
-		mock: A ? void 0 : _,
-		customHeaders: Me,
-		enabled: P,
-		cache: we,
-		staleTime: Te,
-		gcTime: Ee,
-		tags: Ne
-	}), L = C && !!E && E !== me(), R = C && w && !L && D === null, z = o(() => {
-		if (!C) return F ?? c;
-		if (D) return D;
-		if (w) return c;
-		if (typeof _ != "string") return _;
-		try {
-			return JSON.parse(_ || "{}");
-		} catch {
-			return c;
-		}
-	}, [
+		h
+	]), Le = a(() => [v], [v]), { isLoading: Re, isFetching: ze, data: P, refetch: F, isSuccess: Be, isError: Ve } = r({
+		url: u,
+		method: d,
+		credentials: Ce,
+		mock: k ? void 0 : h,
+		customHeaders: Ie,
+		enabled: N,
+		cache: De,
+		staleTime: Oe,
+		gcTime: ke,
+		tags: Le
+	}), I = S && !!T && T !== _e(), L = S && C && !I && E === null, R = S && !je && !Me, z = a(() => S ? E || (C ? o : oe(h, R)) : P ?? o, [
+		S,
+		P,
+		E,
 		C,
-		F,
-		D,
-		w,
-		_
-	]), B = C ? L : Fe, V = C ? L : Pe, H = de({}), U = a((e, t) => O(e, {
+		h,
+		R
+	]), B = S ? I : ze, V = S ? I : Re, H = pe({}), U = i((e, t) => D(e, {
 		...H.current,
 		...t
-	}), [O]), W = a(async () => {
-		if (!C) {
-			I();
+	}), [D]), W = i(async () => {
+		if (!S) {
+			F();
 			return;
 		}
-		await U([b]);
+		await U([v]);
 	}, [
-		C,
-		I,
+		S,
+		F,
 		U,
-		b
-	]), G = a(async ({ input: e } = {}) => {
+		v
+	]), G = i(async ({ input: e } = {}) => {
 		let t = ae(e);
 		t && (H.current = t), await W();
 	}, [W]);
-	i({
-		seconds: De,
-		enabled: x && (C ? w && !L : P),
+	se({
+		seconds: Ae,
+		enabled: y && (S ? C && !I : N),
 		refresh: W
 	});
-	let K = z, Re = o(() => Array.isArray(K.records) ? K.records : [], [K.records]), { records: q, isLoadingMore: J, goToPage: Y, loadMore: X } = oe({
-		elementId: b,
-		mode: xe,
-		pageParam: Se,
-		records: Re,
+	let K = z, He = a(() => Array.isArray(K.records) ? K.records : [], [K.records]), { records: q, isLoadingMore: J, goToPage: Y, loadMore: X } = ce({
+		elementId: v,
+		mode: we,
+		pageParam: Te,
+		records: He,
 		page: K.pageInfo?.page ?? 1,
 		refresh: U,
-		navigate: je
+		navigate: Fe
 	}), Z = ie({
-		serverMode: C,
-		isSuccess: Ie,
-		isError: Le,
-		rscResolved: w,
-		rscPending: L,
-		elementData: D
+		serverMode: S,
+		isSuccess: Be,
+		isError: Ve,
+		rscResolved: C,
+		rscPending: I,
+		elementData: E
 	});
-	ue(() => {
-		!B && b && Z && j.interactionTrigger(b, Z === "success" ? "onApiSuccess" : "onApiError", {
-			url: f,
-			method: p,
+	fe(() => {
+		!B && v && Z && A.interactionTrigger(v, Z === "success" ? "onApiSuccess" : "onApiError", {
+			url: u,
+			method: d,
 			...z
 		});
 	}, [
 		z,
-		b,
-		j,
+		v,
+		A,
 		B,
-		p,
+		d,
 		Z,
-		f
+		u
 	]);
-	let Q = o(() => ({
+	let Q = a(() => ({
 		...z,
-		...Array.isArray(K.records) ? { records: q } : c,
+		...Array.isArray(K.records) ? { records: q } : o,
 		isLoading: B || J,
-		isEmpty: ne(K, q, v),
-		hasError: R,
-		errorMessage: R ? "The data provider could not be reached" : "",
-		isStale: C && T
+		isEmpty: ne(K, q, g),
+		hasError: L,
+		errorMessage: L ? "The data provider could not be reached" : "",
+		isStale: S && w
 	}), [
 		z,
 		K.records,
@@ -140,70 +132,70 @@ var u = ({ ref: e, className: u = "", children: d, query: f = "", method: p = "g
 		q,
 		B,
 		J,
-		v,
-		R,
-		C,
-		T
-	]), ze = a(() => ce(Q), [Q]);
-	_e({
-		id: b,
-		source: k,
-		name: S || `API - ${b}`,
-		fields: ze
+		g,
+		L,
+		S,
+		w
+	]), Ue = i(() => ue(Q), [Q]);
+	be({
+		id: v,
+		source: O,
+		name: b || `API - ${v}`,
+		fields: Ue
 	});
-	let { writeRecord: $ } = se({
-		elementId: b,
-		enabled: C,
+	let { writeRecord: $ } = le({
+		elementId: v,
+		enabled: S,
 		onDone: W
-	}), Be = o(() => {
+	}), We = a(() => {
 		let e = {
 			performQuery: {
 				...n.callbacks.performQuery,
-				title: `Perform Query ${S}`,
+				title: `Perform Query ${b}`,
 				callback: G
 			},
 			loadMore: {
 				...n.callbacks.loadMore,
-				title: `Load More ${S}`,
+				title: `Load More ${b}`,
 				callback: X
 			},
 			goToPage: {
 				...n.callbacks.goToPage,
-				title: `Go To Page ${S}`,
+				title: `Go To Page ${b}`,
 				callback: ({ page: e }) => Y(Number(e) || 1)
 			}
 		};
-		return C && (e.writeRecord = {
+		return S && (e.writeRecord = {
 			...n.callbacks.writeRecord,
-			title: `Write Record ${S}`,
+			title: `Write Record ${b}`,
 			callback: $
 		}), e;
 	}, [
-		S,
+		b,
 		G,
 		X,
 		Y,
-		C,
+		S,
 		$
-	]), Ve = o(() => y && A ? re(d, y, V) : d, [
-		d,
+	]), Ge = a(() => _ && k ? re(l, _, V) : l, [
+		l,
 		V,
-		y,
-		A
-	]), He = o(() => k ? { runtime: { sources: { [k]: Q } } } : c, [Q, k]);
-	return /* @__PURE__ */ l(te, {
+		_,
+		k
+	]), Ke = a(() => O ? { runtime: { sources: { [O]: Q } } } : o, [Q, O]);
+	return /* @__PURE__ */ s(te, {
 		ref: e,
-		tag: !A && !ke?.length ? "div" : ye,
-		className: he("plitzi-component__api-container", u),
+		tag: !k && !Ne?.length ? "div" : Se,
+		className: ve("plitzi-component__api-container", c),
 		interactionTriggers: n.triggers,
-		interactionCallbacks: Be,
-		children: (!V || Ce || y) && /* @__PURE__ */ l(s, {
+		interactionCallbacks: We,
+		children: (!V || Ee || _) && /* @__PURE__ */ s(ge, {
 			inherit: "live",
-			name: `Api:${b}`,
-			value: He,
-			children: Ve
+			name: `Api:${v}`,
+			value: Ke,
+			children: Ge
 		})
 	});
-}, d = e(u);
+}, l = e(c);
 //#endregion
-export { u as ApiContainer, d as default };
+export { c as ApiContainer, l as default };

package/dist/elements/provider/ApiContainer/helpers/serverMock.d.ts

@@ -0,0 +1,10 @@
+/**
+ * What a server provider renders from in the builder, which has no `/_rsc` to ask: its mock data, in the shape the
+ * server answers it with.
+ *
+ * A provider that only has a `query` is answered as a browser request publishes — `{ status, data }`, the body under
+ * `data` — so its mock is that body under `data` too: `<source>.data.<field>` in the browser, on the server and in the
+ * builder alike. A connector's or an action's answer is its own slice (`records`, an action's output), and so is its
+ * mock. Mock data that is not JSON renders nothing, as an empty answer would.
+ */
+export declare const serverMock: (mockData: Record<string, unknown> | string, queryShaped: boolean) => Record<string, unknown>;

package/dist/elements/provider/ApiContainer/helpers/serverMock.mjs

@@ -0,0 +1,17 @@
+import { emptyObject as e } from "@plitzi/sdk-shared/helpers/utils";
+//#region src/elements/provider/ApiContainer/helpers/serverMock.ts
+var t = (t, n) => {
+	let r;
+	if (typeof t != "string") r = t;
+	else try {
+		r = JSON.parse(t || "{}");
+	} catch {
+		return e;
+	}
+	return n ? {
+		status: 200,
+		data: r
+	} : r;
+};
+//#endregion
+export { t as serverMock };

package/dist/elements/structure/Container/Container.d.ts

@@ -2,7 +2,7 @@ import { ReactNode, RefObject } from 'react';
 export type ContainerProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
     /**
      * The name of the part of the page this is — "Main navigation", "Search results", "Your cart" — for screen readers
      * and browser agents, which list the page by its landmarks and regions and jump between them.
@@ -17,9 +17,15 @@ export type ContainerProps = {
      * control inside it can still be tabbed to, and is then announced as nothing.
      */
     decorative?: boolean;
+    /**
+     * A part of the page whose words change while somebody is on it — a count, a total, a status — said aloud when they
+     * do (`aria-live`): `polite` once the reader is idle, `assertive` at once, for what cannot wait. Left out, a change is
+     * silent to a screen reader, which reads only what it is moved to.
+     */
+    live?: 'polite' | 'assertive' | '';
     children?: ReactNode;
 };
-declare const Container: ({ ref, className, subType, label, decorative, children }: ContainerProps) => import('react').JSX.Element;
+declare const Container: ({ ref, className, subType, label, decorative, live, children }: ContainerProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ContainerProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/structure/Container/Container.mjs

@@ -4,18 +4,19 @@ import { NAMEABLE_CONTAINER_TAGS as n } from "./declaration.mjs";
 import { jsx as r } from "react/jsx-runtime";
 import i from "clsx";
 //#region src/elements/structure/Container/Container.tsx
-var a = ({ ref: e, className: a = "", subType: o = "div", label: s = "", decorative: c = !1, children: l }) => {
-	let u = !c && s && n.includes(o) ? {
+var a = ({ ref: e, className: a = "", subType: o = "div", label: s = "", decorative: c = !1, live: l = "", children: u }) => {
+	let d = !c && s && n.includes(o) ? {
 		"aria-label": s,
 		...o === "div" ? { role: "group" } : {}
-	} : {}, d = c ? { "aria-hidden": !0 } : {};
+	} : {}, f = c ? { "aria-hidden": !0 } : {}, p = l ? { "aria-live": l } : {};
 	return /* @__PURE__ */ r(t, {
 		ref: e,
 		tag: o,
 		className: i(`plitzi-component__container plitzi-component__container-${o}`, a),
-		...u,
 		...d,
-		children: l
+		...f,
+		...p,
+		children: u
 	});
 }, o = e(a);
 //#endregion

package/dist/elements/structure/Container/declaration.d.ts

@@ -12,6 +12,7 @@ declare const declaration: {
     readonly type: "container";
     readonly attributeValues: {
         readonly subType: readonly string[];
+        readonly live: readonly string[];
     };
     readonly content: {
         readonly attributes: {
@@ -62,7 +63,8 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     label?: string | undefined;
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
+    live?: "polite" | "assertive" | "" | undefined;
     decorative?: boolean | undefined;
 }>>;
 export default declaration;

package/dist/elements/structure/Container/declaration.mjs

@@ -12,29 +12,37 @@ var n = [
 	"figure"
 ], r = e()({
 	type: "container",
-	attributeValues: { subType: t()([
-		"div",
-		"header",
-		"footer",
-		"nav",
-		"main",
-		"section",
-		"article",
-		"aside",
-		"address",
-		"figure",
-		"dl",
-		"dt",
-		"dd",
-		"li",
-		"h1",
-		"h2",
-		"h3",
-		"h4",
-		"h5",
-		"h6",
-		"span"
-	]) },
+	attributeValues: {
+		subType: t()([
+			"div",
+			"header",
+			"footer",
+			"nav",
+			"main",
+			"section",
+			"article",
+			"aside",
+			"address",
+			"figure",
+			"dl",
+			"dt",
+			"dd",
+			"li",
+			"h1",
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6",
+			"p",
+			"span"
+		]),
+		live: t()([
+			"",
+			"polite",
+			"assertive"
+		])
+	},
 	content: {
 		attributes: { subType: "div" },
 		definition: {

package/dist/elements/structure/Container/index.d.ts

@@ -5,6 +5,7 @@ declare const Container: {
     readonly type: "container";
     readonly attributeValues: {
         readonly subType: readonly string[];
+        readonly live: readonly string[];
     };
     readonly content: {
         readonly attributes: {
@@ -55,7 +56,8 @@ declare const Container: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     label?: string | undefined;
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
+    live?: "polite" | "assertive" | "" | undefined;
     decorative?: boolean | undefined;
 }>>;
 export default Container;

package/dist/index.d.ts

@@ -919,6 +919,7 @@ export declare const defaultElements: {
         readonly type: "container";
         readonly attributeValues: {
             readonly subType: readonly string[];
+            readonly live: readonly string[];
         };
         readonly content: {
             readonly attributes: {
@@ -969,7 +970,8 @@ export declare const defaultElements: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         label?: string | undefined;
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
+        live?: "polite" | "assertive" | "" | undefined;
         decorative?: boolean | undefined;
     }>>;
     layoutContainer: {
@@ -2012,7 +2014,7 @@ export declare const defaultElements: {
         };
         readonly content: {
             readonly attributes: {
-                readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+                readonly src: "";
                 readonly alt: "";
                 readonly decorative: false;
                 readonly fetchPriority: "auto";
@@ -2064,6 +2066,7 @@ export declare const defaultElements: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        resize?: boolean | undefined;
         height?: number | undefined;
         width?: number | undefined;
         fetchPriority?: "high" | "low" | "auto" | undefined;
@@ -2458,6 +2461,7 @@ export declare const defaultElements: {
         title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
+        controls?: string | undefined;
         icon?: string | undefined;
         subType?: "button" | "submit" | "reset" | undefined;
         iconPlacement?: import('./Element/ElementWords').IconPlacement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-elements",
-  "version": "0.38.3",
+  "version": "0.38.4",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -898,6 +898,10 @@
       "types": "./dist/elements/provider/ApiContainer/helpers/queryInput.d.ts",
       "import": "./dist/elements/provider/ApiContainer/helpers/queryInput.mjs"
     },
+    "./elements/provider/ApiContainer/helpers/serverMock": {
+      "types": "./dist/elements/provider/ApiContainer/helpers/serverMock.d.ts",
+      "import": "./dist/elements/provider/ApiContainer/helpers/serverMock.mjs"
+    },
     "./elements/provider/ApiContainer/hooks/useApi": {
       "types": "./dist/elements/provider/ApiContainer/hooks/useApi.d.ts",
       "import": "./dist/elements/provider/ApiContainer/hooks/useApi.mjs"
@@ -1294,13 +1298,13 @@
   "dependencies": {
     "@plitzi/nexus": "^1.4.0",
     "@plitzi/plitzi-ui": "^1.6.29",
-    "@plitzi/sdk-auth": "0.38.3",
-    "@plitzi/sdk-dev-tools": "0.38.3",
-    "@plitzi/sdk-event-bridge": "0.38.3",
-    "@plitzi/sdk-interactions": "0.38.3",
-    "@plitzi/sdk-navigation": "0.38.3",
-    "@plitzi/sdk-schema": "0.38.3",
-    "@plitzi/sdk-shared": "0.38.3",
+    "@plitzi/sdk-auth": "0.38.4",
+    "@plitzi/sdk-dev-tools": "0.38.4",
+    "@plitzi/sdk-event-bridge": "0.38.4",
+    "@plitzi/sdk-interactions": "0.38.4",
+    "@plitzi/sdk-navigation": "0.38.4",
+    "@plitzi/sdk-schema": "0.38.4",
+    "@plitzi/sdk-shared": "0.38.4",
     "clsx": "^2.1.1",
     "immer": "^11.1.21"
   },