@plitzi/sdk-elements 0.38.6 → 0.38.8

package/dist/components/MarkdownDocument/helpers/hastText.mjs

@@ -0,0 +1,4 @@
+//#region src/components/MarkdownDocument/helpers/hastText.ts
+var e = (t) => t.type === "text" ? t.value ?? "" : (t.children ?? []).map(e).join("");
+//#endregion
+export { e as hastText };

package/dist/components/MarkdownDocument/helpers/markdownComponents.d.ts

@@ -0,0 +1,10 @@
+import { MarkdownClassNames } from './markdownParts';
+import { Components } from 'react-markdown';
+export type MarkdownComponentsOptions = {
+    classNames: MarkdownClassNames;
+    headingLinks: boolean;
+    wrapLines: boolean;
+    showLineNumbers: boolean;
+};
+/** What each tag of a Markdown source is written as: its parts' classes, the headings' links and the code blocks. */
+export declare const markdownComponents: (options: MarkdownComponentsOptions) => Components;

package/dist/components/MarkdownDocument/helpers/markdownComponents.mjs

@@ -0,0 +1,89 @@
+import { hastText as e } from "./hastText.mjs";
+import { SyntaxHighlighter as t } from "./syntaxHighlighter.mjs";
+import n from "../components/CodeBlock/index.mjs";
+import { createElement as r } from "react";
+import { omit as i } from "@plitzi/plitzi-ui/helpers";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "clsx";
+import c from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
+//#region src/components/MarkdownDocument/helpers/markdownComponents.tsx
+var l = {
+	h1: "heading1",
+	h2: "heading2",
+	h3: "heading3",
+	h4: "heading4",
+	h5: "heading5",
+	h6: "heading6"
+}, u = /language-(\w+)/, d = (e, t) => ({ className: n, ...a }) => r(e, {
+	...i(a, ["node"]),
+	className: s(n, t) || void 0
+}), f = (t, { classNames: n, headingLinks: r }) => ({ children: i, node: c, className: u, ...d }) => /* @__PURE__ */ o(t, {
+	...d,
+	className: s(u, n.heading, n[l[t]]) || void 0,
+	children: [r && d.id && /* @__PURE__ */ a("a", {
+		className: s("anchor", n.anchor),
+		href: `#${d.id}`,
+		"aria-label": `Link to “${c ? e(c) : d.id}”`,
+		children: /* @__PURE__ */ a("span", {
+			className: "octicon octicon-link",
+			"aria-hidden": "true"
+		})
+	}), i]
+}), p = (r) => {
+	let { classNames: o, wrapLines: l, showLineNumbers: p } = r;
+	return {
+		h1: f("h1", r),
+		h2: f("h2", r),
+		h3: f("h3", r),
+		h4: f("h4", r),
+		h5: f("h5", r),
+		h6: f("h6", r),
+		p: d("p", o.paragraph),
+		a: d("a", o.link),
+		strong: d("strong", o.strong),
+		em: d("em", o.emphasis),
+		ul: d("ul", o.list),
+		ol: d("ol", o.list),
+		li: d("li", o.listItem),
+		blockquote: d("blockquote", o.quote),
+		hr: d("hr", o.divider),
+		img: d("img", o.image),
+		table: d("table", o.table),
+		thead: d("thead", o.tableHead),
+		tr: d("tr", o.tableRow),
+		th: d("th", o.tableHeaderCell),
+		td: d("td", o.tableCell),
+		pre: ({ children: t, node: r, className: i, ...c }) => {
+			let l = /* @__PURE__ */ a("pre", {
+				...c,
+				className: s(i, o.codeBlock) || void 0,
+				children: t
+			}), d = r?.children.find((e) => e.type === "element" && e.tagName === "code");
+			if (!d || d.type !== "element") return l;
+			let f = d.properties.className, p = Array.isArray(f) ? f.map(String).map((e) => u.exec(e)?.[1]).find(Boolean) : void 0;
+			return /* @__PURE__ */ a(n, {
+				language: p,
+				code: e(d).replace(/\n$/, ""),
+				classNames: o,
+				children: l
+			});
+		},
+		code: ({ children: e, className: n, ...r }) => {
+			let d = i(r, ["node"]), f = u.exec(n || "");
+			return f ? /* @__PURE__ */ a(t, {
+				PreTag: "div",
+				language: f[1],
+				style: c,
+				wrapLines: l,
+				showLineNumbers: p,
+				children: typeof e == "string" ? e.replace(/\n$/, "") : ""
+			}) : /* @__PURE__ */ a("code", {
+				...d,
+				className: s(n, o.code) || void 0,
+				children: e
+			});
+		}
+	};
+};
+//#endregion
+export { p as markdownComponents };

package/dist/components/MarkdownDocument/helpers/markdownParts.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The parts of the HTML a Markdown source is written as, each of which can carry a class of the consumer's own.
+ *
+ * - `heading` is every heading, `h1`–`h6`; `heading1`…`heading6` is the one of that level, beside it.
+ * - `paragraph` (`p`), `link` (`a`), `strong` (`strong`), `emphasis` (`em`), `list` (`ul`/`ol`), `listItem` (`li`),
+ *   `quote` (`blockquote`), `divider` (`hr`), `image` (`img`).
+ * - `code` is inline `code`; `codeBlock` the `pre` of a fenced block, inside its frame (`div.markdown-code`,
+ *   `codeBlockFrame`) under a header (`div.markdown-code-header`, `codeBlockHeader`) that holds its language
+ *   (`span.markdown-code-language`, `codeBlockLanguage`) and its copy button (`button.markdown-code-copy`,
+ *   `codeBlockCopy`).
+ * - `table`, `tableHead` (`thead`), `tableRow` (`tr`), `tableHeaderCell` (`th`), `tableCell` (`td`).
+ * - `anchor` is the link a heading offers to itself.
+ */
+export declare const MARKDOWN_PARTS: readonly ["heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "paragraph", "link", "strong", "emphasis", "list", "listItem", "quote", "divider", "code", "codeBlock", "codeBlockFrame", "codeBlockHeader", "codeBlockLanguage", "codeBlockCopy", "image", "table", "tableHead", "tableRow", "tableHeaderCell", "tableCell", "anchor"];
+export type MarkdownPart = (typeof MARKDOWN_PARTS)[number];
+export type MarkdownClassNames = Partial<Record<MarkdownPart, string>>;

package/dist/components/MarkdownDocument/helpers/markdownParts.mjs

@@ -0,0 +1,4 @@
+//#region src/components/MarkdownDocument/helpers/markdownParts.ts
+var e = /* @__PURE__ */ "heading.heading1.heading2.heading3.heading4.heading5.heading6.paragraph.link.strong.emphasis.list.listItem.quote.divider.code.codeBlock.codeBlockFrame.codeBlockHeader.codeBlockLanguage.codeBlockCopy.image.table.tableHead.tableRow.tableHeaderCell.tableCell.anchor".split(".");
+//#endregion
+export { e as MARKDOWN_PARTS };

package/dist/components/MarkdownDocument/helpers/rehypeHeadingAnchors.d.ts

@@ -0,0 +1,8 @@
+import { HastNode } from './hastText';
+/** What decides a heading's id: its words, and the ids the document has already given. */
+export type HeadingAnchor = (text: string, taken: Set<string>) => string;
+/**
+ * Gives every heading the id `anchor` answers for its words, in document order — once per parse, so a heading keeps its
+ * id however many times React renders it.
+ */
+export declare const rehypeHeadingAnchors: (anchor: HeadingAnchor) => () => (tree: HastNode) => void;

package/dist/components/MarkdownDocument/helpers/rehypeHeadingAnchors.mjs

@@ -0,0 +1,20 @@
+import { hastText as e } from "./hastText.mjs";
+//#region src/components/MarkdownDocument/helpers/rehypeHeadingAnchors.ts
+var t = /* @__PURE__ */ new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+]), n = (n) => () => (r) => {
+	let i = /* @__PURE__ */ new Set(), a = (r) => {
+		r.type === "element" && r.tagName && t.has(r.tagName) && (r.properties = {
+			...r.properties,
+			id: n(e(r).trim(), i)
+		}), r.children?.forEach(a);
+	};
+	a(r);
+};
+//#endregion
+export { n as rehypeHeadingAnchors };

package/dist/components/MarkdownDocument/helpers/syntaxHighlighter.d.ts

@@ -0,0 +1,3 @@
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+/** The highlighter a fenced block is drawn with, its languages registered once — the light build carries no others. */
+export { SyntaxHighlighter };

package/dist/components/MarkdownDocument/helpers/syntaxHighlighter.mjs

@@ -0,0 +1,24 @@
+import { PrismLight as e } from "react-syntax-highlighter";
+import t from "react-syntax-highlighter/dist/esm/languages/prism/bash";
+import n from "react-syntax-highlighter/dist/esm/languages/prism/css";
+import r from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
+import i from "react-syntax-highlighter/dist/esm/languages/prism/json";
+import a from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
+import o from "react-syntax-highlighter/dist/esm/languages/prism/markup";
+import s from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import c from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
+//#region src/components/MarkdownDocument/helpers/syntaxHighlighter.ts
+var l = (e) => typeof e == "object" && e && "default" in e ? e.default : e, u = {
+	javascript: r,
+	typescript: c,
+	jsx: a,
+	tsx: s,
+	bash: t,
+	json: i,
+	css: n,
+	html: o,
+	markdown: o
+};
+for (let [t, n] of Object.entries(u)) e.registerLanguage(t, l(n));
+//#endregion
+export { e as SyntaxHighlighter };

package/dist/components/MarkdownDocument/index.d.ts

@@ -0,0 +1,5 @@
+import { default as MarkdownDocument } from './MarkdownDocument';
+export * from './MarkdownDocument';
+export * from './helpers/markdownParts';
+export type { HeadingAnchor } from './helpers/rehypeHeadingAnchors';
+export default MarkdownDocument;

package/dist/components/MarkdownDocument/index.mjs

@@ -0,0 +1,6 @@
+import e from "./MarkdownDocument.mjs";
+import { MARKDOWN_PARTS as t } from "./helpers/markdownParts.mjs";
+//#region src/components/MarkdownDocument/index.ts
+var n = e;
+//#endregion
+export { t as MARKDOWN_PARTS, n as default };

package/dist/dataSource/GlobalSources.mjs

@@ -1,68 +1,56 @@
 import { use as e, useCallback as t, useEffect as n, useMemo as r, useRef as i } from "react";
-import { useCommonStore as a, useCommonStoreSync as o, useRenderSettings as s } from "@plitzi/sdk-shared/store";
-import { get as c } from "@plitzi/plitzi-ui/helpers";
-import { flagValues as l, undeclaredFlagOverrides as u } from "@plitzi/sdk-shared/flags";
-import { getPathsFromObeject as d } from "@plitzi/sdk-shared/helpers/utils";
-import { evaluateComputed as ee, resolveVariables as te } from "@plitzi/sdk-shared/dataSource";
-import ne, { SPACE_THEME_AREA as re } from "@plitzi/sdk-shared/theme/useTheme";
-import f from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-import p from "@plitzi/sdk-auth/AuthContext";
-import m from "@plitzi/sdk-shared/flags/useFlagResolution";
-import h from "@plitzi/sdk-shared/hooks/useStableValue";
+import { useCommonStore as a, useCommonStoreSync as o } from "@plitzi/sdk-shared/store";
+import { get as s } from "@plitzi/plitzi-ui/helpers";
+import { flagValues as c, undeclaredFlagOverrides as l } from "@plitzi/sdk-shared/flags";
+import { getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
+import { evaluateComputed as ee } from "@plitzi/sdk-shared/dataSource";
+import te from "@plitzi/sdk-shared/hooks/useStableValue";
+import d, { SPACE_THEME_AREA as f } from "@plitzi/sdk-shared/theme/useTheme";
+import p from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import m from "@plitzi/sdk-auth/AuthContext";
+import h from "@plitzi/sdk-shared/dataSource/hooks/useResolvedVariables";
+import g from "@plitzi/sdk-shared/flags/useFlagResolution";
 //#region src/dataSource/GlobalSources.tsx
-var g = ({ children: g }) => {
-	let { environment: _ } = s(), [[v, y, b, x, S, C, w, T = ""]] = a([
-		"schema.variables",
+var _ = ({ children: _ }) => {
+	let [[v, y, b, x, S, C = ""]] = a([
 		"navigation.routeParams",
 		"navigation.queryParams",
-		"navigation.hostname",
 		"navigation.origin",
 		"navigation.href",
 		"navigation.currentPageId",
 		"navigation.pendingLocation"
-	]), E = h(r(() => te(v, {
-		routeParams: y,
-		queryParams: b,
-		hostname: x,
-		environment: _
-	}), [
-		_,
-		x,
-		b,
-		y,
-		v
-	])), ie = t(() => d(E).map((e) => ({
+	]), w = h(), T = t(() => u(w).map((e) => ({
 		path: e,
 		name: `variables.${e}`
-	})), [E]);
-	f({
+	})), [w]);
+	p({
 		id: "global",
 		source: "variables",
 		name: "Variables",
-		fields: ie
-	}), o("runtime.sources.variables", E);
-	let [D = {}] = a("pageDefinitions"), O = r(() => Object.values(D).map((e) => ({
+		fields: T
+	}), o("runtime.sources.variables", w);
+	let [E = {}] = a("pageDefinitions"), D = r(() => Object.values(E).map((e) => ({
 		value: e.id,
-		label: c(e, "attributes.name", e.id)
-	})), [D]), k = r(() => ({
-		routeParams: y,
-		queryParams: b,
-		origin: S,
-		href: C,
-		currentPageId: w,
-		pending: T !== "",
-		pendingLocation: T
+		label: s(e, "attributes.name", e.id)
+	})), [E]), O = r(() => ({
+		routeParams: v,
+		queryParams: y,
+		origin: b,
+		href: x,
+		currentPageId: S,
+		pending: C !== "",
+		pendingLocation: C
 	}), [
+		v,
 		y,
 		b,
+		x,
 		S,
-		C,
-		w,
-		T
-	]), A = t(() => {
-		let e = d({
-			routeParams: y,
-			queryParams: b
+		C
+	]), k = t(() => {
+		let e = u({
+			routeParams: v,
+			queryParams: y
 		}).map((e) => ({
 			path: e,
 			name: `navigation.${e}`
@@ -78,11 +66,11 @@ var g = ({ children: g }) => {
 		}, {
 			path: "pendingLocation",
 			name: "Where a navigation is going"
-		}], i = O.length > 0 ? {
+		}], i = D.length > 0 ? {
 			path: "currentPageId",
 			name: "Current Page",
 			inputType: "select",
-			values: O
+			values: D
 		} : {
 			path: "currentPageId",
 			name: "Current Page"
@@ -95,120 +83,120 @@ var g = ({ children: g }) => {
 			i
 		];
 	}, [
+		v,
 		y,
-		b,
-		O
+		D
 	]);
-	f({
+	p({
 		id: "global",
 		source: "navigation",
 		name: "Navigation",
-		fields: A
-	}), o("runtime.sources.navigation", k);
-	let j = e(p), { user: M, authenticated: N, state: P } = j, [F = "basic"] = a("schema.settings.userProvider"), I = r(() => F === "" ? {} : {
-		isAuthenticated: N,
-		...P === void 0 ? {} : { status: P },
-		accessToken: M?.accessToken ?? "",
+		fields: k
+	}), o("runtime.sources.navigation", O);
+	let A = e(m), { user: j, authenticated: M, state: N, provider: P } = A, F = r(() => P ? {
+		isAuthenticated: M,
+		...N === void 0 ? {} : { status: N },
+		accessToken: j?.accessToken ?? "",
 		details: {
 			username: "",
 			email: "",
 			roles: "",
 			permissions: "",
 			verified: "",
-			...M?.details ?? {}
+			...j?.details ?? {}
 		}
-	}, [
-		F,
+	} : {}, [
+		P,
+		j,
 		M,
-		N,
-		P
-	]), L = t(() => d(I).map((e) => ({
+		N
+	]), I = t(() => u(F).map((e) => ({
 		path: e,
 		name: `user.${e}`
-	})), [I]);
-	f({
+	})), [F]);
+	p({
 		id: "global",
 		source: "auth",
 		name: "Auth State",
-		fields: L
-	}), o("runtime.sources.auth", I);
-	let R = m(j), z = r(() => l(R), [R]), B = t(() => Object.keys(z).map((e) => ({
+		fields: I
+	}), o("runtime.sources.auth", F);
+	let L = g(A), R = r(() => c(L), [L]), z = t(() => Object.keys(R).map((e) => ({
 		path: e,
 		name: `flags.${e}`,
 		inputType: "checkbox"
-	})), [z]);
-	f({
+	})), [R]);
+	p({
 		id: "global",
 		source: "flags",
 		name: "Feature Flags",
-		fields: B
-	}), o("runtime.sources.flags", z), o("flags.resolved", R);
-	let [V, H] = a(["schema.flags", "flags.overrides"])[0], U = h(u(V, H ?? {}));
+		fields: z
+	}), o("runtime.sources.flags", R), o("flags.resolved", L);
+	let [B, V] = a(["schema.flags", "flags.overrides"])[0], H = te(l(B, V ?? {}));
 	n(() => {
-		U.forEach(({ layer: e, name: t }) => console.warn(`[plitzi] The ${e} sets the feature flag "${t}", which this space does not declare: the override is ignored. Declare the flag in the space, or remove the override.`));
-	}, [U]);
-	let [W] = a("runtime.state"), G = t(() => d(W).map((e) => ({
+		H.forEach(({ layer: e, name: t }) => console.warn(`[plitzi] The ${e} sets the feature flag "${t}", which this space does not declare: the override is ignored. Declare the flag in the space, or remove the override.`));
+	}, [H]);
+	let [U] = a("runtime.state"), W = t(() => u(U).map((e) => ({
 		path: e,
 		name: `state.${e}`
-	})), [W]);
-	f({
+	})), [U]);
+	p({
 		id: "global",
 		source: "state",
 		name: "State",
-		fields: G
-	}), o("runtime.sources.state", W);
-	let [K] = a("runtime.host"), q = t(() => d(K).map((e) => ({
+		fields: W
+	}), o("runtime.sources.state", U);
+	let [G] = a("runtime.host"), K = t(() => u(G).map((e) => ({
 		path: e,
 		name: `host.${e}`
-	})), [K]);
-	f({
+	})), [G]);
+	p({
 		id: "global",
 		source: "host",
 		name: "Host",
-		fields: q
-	}), o("runtime.sources.host", K);
-	let { theme: J, resolvedTheme: Y } = ne(re), X = r(() => ({
-		mode: J,
-		resolved: Y
-	}), [J, Y]), ae = t(() => d(X).map((e) => ({
+		fields: K
+	}), o("runtime.sources.host", G);
+	let { theme: q, resolvedTheme: J } = d(f), Y = r(() => ({
+		mode: q,
+		resolved: J
+	}), [q, J]), X = t(() => u(Y).map((e) => ({
 		path: e,
 		name: `theme.${e}`
-	})), [X]);
-	f({
+	})), [Y]);
+	p({
 		id: "global",
 		source: "theme",
 		name: "Theme",
-		fields: ae
-	}), o("runtime.sources.theme", X);
+		fields: X
+	}), o("runtime.sources.theme", Y);
 	let [Z] = a("schema.settings.computed"), Q = i(void 0), $ = r(() => ee(Z ?? {}, {
-		variables: E,
-		navigation: k,
-		auth: I,
-		state: W ?? {},
-		host: K ?? {},
-		theme: X,
-		flags: z
+		variables: w,
+		navigation: O,
+		auth: F,
+		state: U ?? {},
+		host: G ?? {},
+		theme: Y,
+		flags: R
 	}, Q.current), [
 		Z,
-		E,
-		k,
-		I,
-		W,
-		K,
-		X,
-		z
+		w,
+		O,
+		F,
+		U,
+		G,
+		Y,
+		R
 	]);
 	Q.current = $;
-	let oe = t(() => d($).map((e) => ({
+	let ne = t(() => u($).map((e) => ({
 		path: e,
 		name: `computed.${e}`
 	})), [$]);
-	return f({
+	return p({
 		id: "global",
 		source: "computed",
 		name: "Computed",
-		fields: oe
-	}), o("runtime.sources.computed", $), g;
+		fields: ne
+	}), o("runtime.sources.computed", $), _;
 };
 //#endregion
-export { g as default };
+export { _ as default };

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

@@ -51,7 +51,11 @@ declare const declaration: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {};
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'justify-content': "center";
+                        readonly 'align-items': "center";
+                    };
                 };
             };
         };

package/dist/elements/advanced/Custom/declaration.mjs

@@ -39,7 +39,11 @@ var t = e()({
 		defaultStyle: {
 			name: "Custom Element",
 			displayMode: "desktop",
-			style: { base: { default: {} } }
+			style: { base: { default: {
+				display: "flex",
+				"justify-content": "center",
+				"align-items": "center"
+			} } }
 		},
 		settings: {}
 	}

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

@@ -46,7 +46,11 @@ declare const Custom: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {};
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'justify-content': "center";
+                        readonly 'align-items': "center";
+                    };
                 };
             };
         };