@plitzi/sdk-elements 0.36.2 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @plitzi/sdk-elements
 
+## 0.37.0
+
+### Minor Changes
+
+- - A `button` takes a `title`: shown as a tooltip, and its accessible name when it has no text of its own — an
+    icon-only button without one was announced as nothing. The builder's settings offer it as "Tooltip". The JSON export
+    is two files, `schema.json` and `style.json`, shown as tabs; each group of changes in the export folds away.
+
+  - `BindingTransformer.params` is `Record<string, string | number | boolean>`: a param the builder draws as a checkbox
+    (`styleVariant`'s `append`) is stored as the boolean it is and read as one, so the type now says so. The MCP compares
+    such a param with its catalog options as text. A `container` may be an `li`, for the rows of a list. The export
+    keeps every element id with `keepIds`, and the header's Publish dialog opens wider.
+
+  - **The builder exports the space on screen — on paid plans.** **Export** in the header opens a wide dialog: the
+    format as tabs (TypeScript in one file, TypeScript with a file per page as a `.zip`, or JSON), generated as soon as
+    it is picked, shown read-only in CodeMirror — beside a file list when there are several — with one row of actions,
+    **Copy** and **Download**. What the export tidied is a one-line note that unfolds into readable groups. On the free
+    plan the dialog explains what export is instead; the server refuses the code with a 402 (`limit: 'spaceExport'`)
+    whatever the builder shows. `useSpaceExport` is the one way into it, for anything else that needs the space as files.
+
+  - **A space document can be read back into code.** `specFromSpace(documents)` turns a `{ schema, style }` pair — a
+    builder export, a seed checked in as JSON — into the `SpaceSpec` that authors it, and `specToSource(spec, { exportName })`
+    writes that spec out as the TypeScript a person would write: one factory call per element, the attributes a type
+    already defaults to left out, the longhands the document stores written back as `padding: 10px 20px`, and every class
+    something names as a `styles()` declaration held in a variable. `split: true` writes one file per page and per layout.
+    `compareSpaces(expected, actual)` proves the round trip: it lists every way two pairs render differently — the tree,
+    the attributes, the rules that apply to each element whatever its selector is called, bindings, flows, pages, layouts
+    and settings — and nothing else. A selector used by one element becomes that element's own `css`; one shared, or
+    spelled out anywhere in the document (a `customCss` rule, a template), stays a class under its own name; an element id
+    nothing refers to is left out and derived again.
+
+    What an older builder left behind is repaired on the way, and every repair is reported in `corrections` rather than
+    made silently: element types that no longer exist (`navbar` → a `list` laid out in a row, `navbarItem` → `listItem`),
+    a hover stored as a class of its own (`card:hover`) folded into the class, fields and attributes no component reads,
+    a setting nothing reads, a link `target` of `_blank` (the component adds the underscore, so it rendered as `__blank`),
+    `null` or an empty list where an attribute is unset, a binding to a source nothing publishes, a flow with a step that
+    runs nothing, and a global callback registered on the wrong module. A CSS property the style editor cannot hold is
+    kept in `customCss` under the same selector, so the page still renders it.
+
+  - **What a spec can say grew to what a document holds.** A selector carries its states and variants beside its rules —
+    `styles('card', { css, states: { hover }, variants: { active } })`, and `states` on an element's own `css` — and the
+    selector cache is now written by `processSelector`, the function the style editor writes it with. An element type's
+    defaults (`elements`) take states, variants, per-breakpoint rules and `slots` for its other selectors (a modal's
+    `rootContainer`). A space declares `layouts` — shells that pages render inside, named by `layout: { id, slot }` on a
+    page or on another layout, with the slot checked to be inside the shell — and a page takes `keepState` and
+    `stateStorage`. `visible: false` starts an element hidden for a flow to reveal, and `loadStrategy` is carried through.
+    An element's own selector never takes the name of a declared class any more, however that class happens to be called.
+
+  - `elementAttributeNames` lists, as data, the attributes each built-in element can be authored with — `null` for one
+    that takes any. It is generated from the elements' attribute types (`yarn generate:attribute-names`) and a type test
+    fails when the two disagree. `defaultAttributes(type)` and `defaultLabel(type)` expose what a factory fills in.
+
+  - `CustomAttributes` accepts any attribute, because the component a custom element's `renderType` names reads its own
+    attributes off it; and `FormControlAttributes` declares `previewError`, which `withFieldValue` reads.
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-auth@0.37.0
+  - @plitzi/sdk-dev-tools@0.37.0
+  - @plitzi/sdk-event-bridge@0.37.0
+  - @plitzi/sdk-interactions@0.37.0
+  - @plitzi/sdk-navigation@0.37.0
+  - @plitzi/sdk-schema@0.37.0
+  - @plitzi/sdk-shared@0.37.0
+
 ## 0.36.2
 
 ### Patch Changes

package/dist/Element/hooks/useElementDataSource.mjs

@@ -8,7 +8,7 @@ var r = ({ source: e, transformers: t }) => {
 		let t = e.indexOf(".");
 		r.push(t > -1 ? e.substring(0, t) : e);
 	}
-	for (let { action: e, params: i } of t ?? []) e === "twigTemplate" && i.template && r.push(...n(i.template));
+	for (let { action: e, params: i } of t ?? []) e === "twigTemplate" && typeof i.template == "string" && i.template && r.push(...n(i.template));
 	return r;
 }, i = ({ bindings: n, sources: i }) => {
 	let a = e(() => {

package/dist/elements/advanced/Custom/declaration.d.ts

@@ -1,7 +1,11 @@
 import { CustomProps } from './Custom';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
-/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
-export type CustomAttributes = AuthorableAttributes<CustomProps>;
+/**
+ * What this element can be authored with — its component's own props, minus what the runtime supplies — and
+ * anything else: the component its `renderType` names reads its own attributes off this element (a chart's
+ * `series`, a map's `height`), so the element carries whatever that component declares.
+ */
+export type CustomAttributes = AuthorableAttributes<CustomProps> & Record<string, unknown>;
 declare const declaration: {
     readonly type: "custom";
     readonly content: {
@@ -53,11 +57,5 @@ declare const declaration: {
         };
         readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    settings?: string | undefined;
-    assets?: string | undefined;
-    renderType?: string | undefined;
-    isPlugin?: boolean | undefined;
-    scriptUrl?: string | undefined;
-}>>;
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<CustomAttributes>;
 export default declaration;

package/dist/elements/advanced/Custom/index.d.ts

@@ -52,11 +52,5 @@ declare const Custom: {
         };
         readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    settings?: string | undefined;
-    assets?: string | undefined;
-    renderType?: string | undefined;
-    isPlugin?: boolean | undefined;
-    scriptUrl?: string | undefined;
-}>>;
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<import('./declaration').CustomAttributes>;
 export default Custom;

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

@@ -16,8 +16,16 @@ 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 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.
+     *
+     * The browser falls back to it by itself, so it is never copied into `aria-label`: an `aria-label` would win over a
+     * visually-hidden label among the children, which is how a button with an empty `content` names itself.
+     */
+    title?: string;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled, ariaExpanded, ariaPressed }: ButtonProps) => import("react").JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled, ariaExpanded, ariaPressed, title }: 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

@@ -1,28 +1,27 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import t from "../../../Element/hooks/useElement.mjs";
-import { RootElement as n } from "../../../Element/RootElement.mjs";
-import { useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsxs as a } from "react/jsx-runtime";
-import o from "clsx";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var s = ({ ref: e, className: s = "", children: c, contentPlacement: l = "after", content: u = "Button", subType: d = "button", disabled: f = !1, ariaExpanded: p, ariaPressed: m }) => {
-	let { definition: { label: h } } = t(), { settings: { previewMode: g } } = i(), _ = r(() => typeof u == "string" ? u : h, [u, h]);
-	return /* @__PURE__ */ a(n, {
+var a = ({ ref: e, className: a = "", children: o, contentPlacement: s = "after", content: c = "Button", subType: l = "button", disabled: u = !1, ariaExpanded: d, ariaPressed: f, title: p }) => {
+	let { settings: { previewMode: m } } = n();
+	return /* @__PURE__ */ r(t, {
 		ref: e,
 		tag: "button",
-		type: g ? d : "button",
-		className: o("plitzi-component__button", s, { "container--empty--skip": !g && !c && u }),
-		disabled: f,
-		"aria-label": _,
-		"aria-expanded": p,
-		"aria-pressed": m,
+		type: m ? l : "button",
+		className: i("plitzi-component__button", a, { "container--empty--skip": !m && !o && c }),
+		disabled: u,
+		"aria-label": c || void 0,
+		title: p || void 0,
+		"aria-expanded": d,
+		"aria-pressed": f,
 		children: [
-			l === "before" && u,
-			c,
-			l === "after" && u
+			s === "before" && c,
+			o,
+			s === "after" && c
 		]
 	});
-}, c = e(s);
+}, o = e(a);
 //#endregion
-export { s as Button, c as default };
+export { a as Button, o as default };

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

@@ -3,7 +3,8 @@ type SettingsProps = {
     contentPlacement?: 'before' | 'after' | 'elements';
     subType?: 'button' | 'reset' | 'submit';
     disabled?: boolean;
+    title?: string;
     onUpdate?: (key: string, value: string | number | boolean) => void;
 };
-declare const Settings: ({ content, contentPlacement, subType, disabled, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ content, contentPlacement, subType, disabled, title, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

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

@@ -4,21 +4,28 @@ import r from "@plitzi/plitzi-ui/Checkbox";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Button/Settings.tsx
-var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, onUpdate: u }) => {
-	let d = e((e) => u?.("content", e), [u]), f = e((e) => u?.("contentPlacement", e), [u]), p = e((e) => u?.("subType", e), [u]), m = e((e) => u?.("disabled", e.target.checked), [u]);
+var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, title: u = "", onUpdate: d }) => {
+	let f = e((e) => d?.("content", e), [d]), p = e((e) => d?.("contentPlacement", e), [d]), m = e((e) => d?.("subType", e), [d]), h = e((e) => d?.("title", e), [d]), g = e((e) => d?.("disabled", e.target.checked), [d]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ t(i, {
 				value: o,
 				label: "Content",
-				onChange: d,
+				onChange: f,
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				value: u,
+				label: "Tooltip",
+				placeholder: "What the button does, for an icon-only one",
+				onChange: h,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(a, {
 				value: s,
 				label: "Mode",
-				onChange: f,
+				onChange: p,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ t("option", {
@@ -38,7 +45,7 @@ var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "b
 			/* @__PURE__ */ n(a, {
 				value: c,
 				label: "Button Type",
-				onChange: p,
+				onChange: m,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ t("option", {
@@ -58,7 +65,7 @@ var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "b
 			/* @__PURE__ */ t(r, {
 				checked: l,
 				label: "Is Disabled",
-				onChange: m,
+				onChange: g,
 				size: "xs"
 			})
 		]

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

@@ -119,6 +119,7 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
     subType?: "button" | "submit" | "reset" | undefined;

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

@@ -118,6 +118,7 @@ declare const Button: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
     subType?: "button" | "submit" | "reset" | undefined;

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

@@ -319,6 +319,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
         subType?: "button" | "submit" | "reset" | undefined;
@@ -376,7 +377,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
     }>>;
     readonly Custom: {
         readonly type: "custom";
@@ -429,13 +430,7 @@ export declare const elementDeclarations: {
             };
             readonly settings: {};
         };
-    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        settings?: string | undefined;
-        assets?: string | undefined;
-        renderType?: string | undefined;
-        isPlugin?: boolean | undefined;
-        scriptUrl?: string | undefined;
-    }>>;
+    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<import('../advanced/Custom/declaration').CustomAttributes>;
     readonly DialogContainer: {
         readonly type: "dialogContainer";
         readonly sourceType: "dialogContainer";

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

@@ -3,6 +3,8 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type FormControlAttributes = AuthorableAttributes<FormControlProps, 'value' | 'error' | 'handleChange' | 'handleValidate'> & {
     defaultValue?: string;
+    /** Read by `withFieldValue`, not by the component: shows the control in its error state while editing. */
+    previewError?: boolean;
 };
 declare const declaration: {
     readonly type: "formControl";

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';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li';
     children?: ReactNode;
 };
 declare const Container: ({ ref, className, subType, children }: ContainerProps) => import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 type SettingsProps = {
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li';
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
 declare const Settings: ({ subType, onUpdate }: SettingsProps) => import("react").JSX.Element;

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

@@ -63,6 +63,10 @@ var i = ({ subType: i = "div", onUpdate: a }) => {
 				/* @__PURE__ */ t("option", {
 					value: "dd",
 					children: "DD"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "li",
+					children: "LI"
 				})
 			]
 		})

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

@@ -52,6 +52,6 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
 }>>;
 export default declaration;

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

@@ -51,6 +51,6 @@ declare const Container: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
 }>>;
 export default Container;

package/dist/index.d.ts

@@ -309,13 +309,7 @@ export declare const defaultElements: {
             };
             readonly settings: {};
         };
-    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        settings?: string | undefined;
-        assets?: string | undefined;
-        renderType?: string | undefined;
-        isPlugin?: boolean | undefined;
-        scriptUrl?: string | undefined;
-    }>>;
+    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<import('./elements/advanced/Custom/declaration').CustomAttributes>;
     reference: {
         (props: import('./Element/hocs/withElement').WithElementProps<import('./elements/advanced/Reference/Reference').ReferenceProps>): import("react").JSX.Element;
         displayName: string;
@@ -956,7 +950,7 @@ export declare const defaultElements: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
     }>>;
     layoutContainer: {
         (props: import('./Element/hocs/withElement').WithElementProps<import('./elements/internal/LayoutContainer/LayoutContainer').LayoutContainerProps>): import("react").JSX.Element;
@@ -1977,6 +1971,7 @@ export declare const defaultElements: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
         subType?: "button" | "submit" | "reset" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-elements",
-  "version": "0.36.2",
+  "version": "0.37.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -1014,13 +1014,13 @@
   "dependencies": {
     "@plitzi/nexus": "^1.2.2",
     "@plitzi/plitzi-ui": "^1.6.21",
-    "@plitzi/sdk-auth": "0.36.2",
-    "@plitzi/sdk-dev-tools": "0.36.2",
-    "@plitzi/sdk-event-bridge": "0.36.2",
-    "@plitzi/sdk-interactions": "0.36.2",
-    "@plitzi/sdk-navigation": "0.36.2",
-    "@plitzi/sdk-schema": "0.36.2",
-    "@plitzi/sdk-shared": "0.36.2",
+    "@plitzi/sdk-auth": "0.37.0",
+    "@plitzi/sdk-dev-tools": "0.37.0",
+    "@plitzi/sdk-event-bridge": "0.37.0",
+    "@plitzi/sdk-interactions": "0.37.0",
+    "@plitzi/sdk-navigation": "0.37.0",
+    "@plitzi/sdk-schema": "0.37.0",
+    "@plitzi/sdk-shared": "0.37.0",
     "clsx": "^2.1.1",
     "immer": "^11.1.18"
   },