@plitzi/sdk-elements 0.37.8 → 0.37.10

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

@@ -32,7 +32,7 @@ declare const Image: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -61,7 +61,10 @@ declare const Image: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    height?: number | undefined;
+    width?: number | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;
+    sizes?: string | undefined;
     src?: string | undefined;
     alt?: string | undefined;
     decorative?: boolean | undefined;

package/dist/elements/media/Svg/Settings.d.ts

@@ -0,0 +1,7 @@
+type SettingsProps = {
+    content?: string;
+    label?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ content, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
+export default Settings;

package/dist/elements/media/Svg/Settings.mjs

@@ -0,0 +1,24 @@
+import e from "../../../components/ElementAdvancedEditor.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Input";
+//#region src/elements/media/Svg/Settings.tsx
+var a = ({ content: a = "", label: o = "", onUpdate: s }) => {
+	let c = t((e) => (t) => s?.(e, t), [s]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [/* @__PURE__ */ n(i, {
+			value: o,
+			label: "Label",
+			placeholder: "What it means — empty for decoration",
+			onChange: c("label")
+		}), /* @__PURE__ */ n(e, {
+			className: "grow",
+			value: a,
+			mode: "html",
+			onChange: c("content")
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export type SvgProps = {
+    ref?: RefObject<HTMLElement>;
+    /** The drawing: one `<svg>…</svg>`, filling the box its class sizes; with `currentColor`, it takes the class's colour. */
+    content?: string;
+    /** What the drawing means, for one that means something; without it the drawing is decoration, hidden from readers. */
+    label?: string;
+    className?: string;
+};
+declare const Svg: ({ ref, content, label, className }: SvgProps) => import('react').JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<SvgProps>): import('react').JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Svg };

package/dist/elements/media/Svg/Svg.mjs

@@ -0,0 +1,31 @@
+import e from "../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import { fitSvg as n, isSvgMarkup as r, sanitizeSvg as i } from "./sanitizeSvg.mjs";
+import { useMemo as a } from "react";
+import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "clsx";
+//#region src/elements/media/Svg/Svg.tsx
+var u = ({ ref: e, content: u = "", label: d = "", className: f = "" }) => {
+	let { settings: { previewMode: p } } = o(), m = a(() => r(u) ? n(i(u)) : "", [u]), h = d ? {
+		role: "img",
+		"aria-label": d
+	} : { "aria-hidden": !0 };
+	return !m && !p ? /* @__PURE__ */ c(t, {
+		ref: e,
+		className: l("plitzi-component__svg svg--empty", f),
+		children: [
+			"Paste one ",
+			"<svg>…</svg>",
+			" here"
+		]
+	}) : /* @__PURE__ */ s(t, {
+		tag: "span",
+		ref: e,
+		className: l("plitzi-component__svg", f),
+		...h,
+		dangerouslySetInnerHTML: { __html: m }
+	});
+}, d = e(u);
+//#endregion
+export { u as Svg, d as default };

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

@@ -0,0 +1,61 @@
+import { SvgProps } from './Svg';
+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 SvgAttributes = AuthorableAttributes<SvgProps>;
+declare const declaration: {
+    readonly type: "svg";
+    readonly content: {
+        readonly attributes: {
+            readonly content: "";
+            readonly label: "";
+        };
+        readonly definition: {
+            readonly label: "SVG";
+            readonly type: "svg";
+            readonly description: "A drawing written as SVG markup, coloured by its class.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canSnippet: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-bezier-curve";
+        };
+        readonly defaultStyle: {
+            readonly name: "Svg";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-flex";
+                        readonly width: "24px";
+                        readonly height: "24px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    label?: string | undefined;
+    content?: string | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,49 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/media/Svg/declaration.ts
+var t = e()({
+	type: "svg",
+	content: {
+		attributes: {
+			content: "",
+			label: ""
+		},
+		definition: {
+			label: "SVG",
+			type: "svg",
+			description: "A drawing written as SVG markup, coloured by its class.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-bezier-curve"
+		},
+		defaultStyle: {
+			name: "Svg",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "inline-flex",
+				width: "24px",
+				height: "24px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

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

@@ -0,0 +1,60 @@
+declare const Svg: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Svg').SvgProps>): import('react').JSX.Element;
+    displayName: string;
+} & {
+    readonly type: "svg";
+    readonly content: {
+        readonly attributes: {
+            readonly content: "";
+            readonly label: "";
+        };
+        readonly definition: {
+            readonly label: "SVG";
+            readonly type: "svg";
+            readonly description: "A drawing written as SVG markup, coloured by its class.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canSnippet: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-bezier-curve";
+        };
+        readonly defaultStyle: {
+            readonly name: "Svg";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-flex";
+                        readonly width: "24px";
+                        readonly height: "24px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    label?: string | undefined;
+    content?: string | undefined;
+}>>;
+export default Svg;

package/dist/elements/media/Svg/index.mjs

@@ -0,0 +1,6 @@
+import e from "./declaration.mjs";
+import t from "./Svg.mjs";
+//#region src/elements/media/Svg/index.ts
+var n = Object.assign(t, e);
+//#endregion
+export { n as default };

package/dist/elements/media/Svg/sanitizeSvg.d.ts

@@ -0,0 +1,13 @@
+/** Whether the markup is an SVG at all — what the element refuses to draw otherwise. */
+export declare const isSvgMarkup: (markup: string) => boolean;
+/**
+ * The SVG with everything that runs taken out: what `sanitizeHtml` takes out of rich text — scripts, handlers,
+ * `javascript:` and `data:` URLs — and what only SVG has, HTML inside a `foreignObject` and animations that write a
+ * script into a link. An SVG is drawing; nothing in one needs to run.
+ */
+export declare const sanitizeSvg: (markup: string) => string;
+/**
+ * The drawing sized by its box: the root fills the element, so the element's class says how big it is. A `width` or
+ * `height` on the root would say otherwise — or, absent with only a `viewBox`, let it grow to the whole line.
+ */
+export declare const fitSvg: (markup: string) => string;

package/dist/elements/media/Svg/sanitizeSvg.mjs

@@ -0,0 +1,5 @@
+import { sanitizeHtml as e } from "../../basic/RichText/sanitizeHtml.mjs";
+//#region src/elements/media/Svg/sanitizeSvg.ts
+var t = /<\s*foreignObject\b[\s\S]*?<\s*\/\s*foreignObject\s*>|<\s*\/?\s*foreignObject\b[^>]*>/gi, n = /\s(to|from|values|by)\s*=\s*(?:"[^"]*javascript\s*:[^"]*"|'[^']*javascript\s*:[^']*')/gi, r = /^\s*(?:<!--[\s\S]*?-->\s*)*<svg\b[\s\S]*<\/svg>\s*$/i, i = (e) => r.test(e), a = (r) => e(r).replace(t, "").replace(n, ""), o = /<svg\b[^>]*>/i, s = (e) => e.replace(o, (e) => e.replace(/\s(width|height)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/^<svg\b/i, "<svg width=\"100%\" height=\"100%\""));
+//#endregion
+export { s as fitSvg, i as isSvgMarkup, a as sanitizeSvg };

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

@@ -29,7 +29,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -23,7 +23,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -28,7 +28,7 @@ declare const Video: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -48,6 +48,11 @@ export type ApiContainerProps = {
     pageParam?: string;
     /** Renders children while the first client-side request is still in flight, so a loading state can be bound. */
     renderWhileLoading?: boolean;
+    /**
+     * The id of a child shown in place of the others until the first answer arrives — a skeleton of what is coming — and
+     * gone after it. In the builder every child shows, so the slot can be edited beside what it stands for.
+     */
+    loadingSlot?: string;
     /**
      * Keep a browser request's answer in the page's query cache, shared with every provider asking the same thing.
      * Off by default: an author opts in knowing the page may show an answer up to `staleTime` old.
@@ -70,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, 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 }: ApiContainerProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import('react').JSX.Element;
     displayName: string;