@plitzi/sdk-style 0.33.2 → 0.34.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @plitzi/sdk-style
 
+## 0.34.1
+
+### Patch Changes
+
+- v0.34.1
+- Updated dependencies [cba7b8b]
+- Updated dependencies
+  - @plitzi/sdk-variables@0.34.1
+  - @plitzi/sdk-plugins@0.34.1
+  - @plitzi/sdk-shared@0.34.1
+
+## 0.34.0
+
+### Minor Changes
+
+- v0.34.0
+
+### Patch Changes
+
+- Updated dependencies [5aceda0]
+- Updated dependencies
+- Updated dependencies [5aceda0]
+  - @plitzi/sdk-shared@0.34.0
+  - @plitzi/sdk-plugins@0.34.0
+  - @plitzi/sdk-variables@0.34.0
+
 ## 0.33.2
 
 ### Patch Changes

package/dist/BuilderStyleContextProvider.d.ts

@@ -1,12 +1,21 @@
 import { default as React } from 'react';
 import { StyleReducerActions } from './StyleReducer';
-import { ReducerMiddlewareCallback } from '@plitzi/plitzi-ui/hooks/useReducerWithMiddleware';
+import { ReducerFilterCallback, ReducerMiddlewareCallback } from '@plitzi/plitzi-ui/hooks/useReducerWithMiddleware';
 import { Style } from '@plitzi/sdk-shared';
+/**
+ * A middleware and what it is shown. The filter belongs to the caller, not here: a save queue must never see another
+ * session's edit, and an undo history has to see it — it is how it learns its snapshots no longer describe the space.
+ * This provider deciding for both is what silently taught the history to ignore them.
+ */
+export type BuilderStyleMiddleware = {
+    middleware: ReducerMiddlewareCallback<Style, [action: StyleReducerActions]>;
+    filterCallback?: ReducerFilterCallback<[action: StyleReducerActions]>;
+};
 export type BuilderStyleContextProviderProps = {
     children: React.ReactNode;
     style?: Style;
     includeSubscriptions?: boolean;
-    middlewares?: ReducerMiddlewareCallback<Style, [action: StyleReducerActions]>[];
+    middlewares?: BuilderStyleMiddleware[];
 };
 declare const BuilderStyleContextProvider: ({ children, style: styleProp, includeSubscriptions, middlewares: middlewaresProp }: BuilderStyleContextProviderProps) => React.JSX.Element;
 export default BuilderStyleContextProvider;

package/dist/BuilderStyleContextProvider.mjs

@@ -1,28 +1,25 @@
-import { makeSelector as e } from "./StyleHelper.mjs";
-import t from "./StyleContext.mjs";
+import e from "./StyleContext.mjs";
+import { makeSelector as t } from "./StyleHelper.mjs";
 import n, { StyleActions as r } from "./StyleReducer.mjs";
-import { use as i, useCallback as a, useEffect as o, useMemo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-import { useCommonStoreSync as l } from "@plitzi/sdk-shared/store";
-import u from "@plitzi/plitzi-ui/hooks/useReducerWithMiddleware";
-import d from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
-import f from "@plitzi/sdk-shared/network/NetworkContext";
-import { EMPTY_STYLE_SCHEMA as p } from "@plitzi/sdk-shared/style/styleConstants";
+import i from "@plitzi/plitzi-ui/hooks/useReducerWithMiddleware";
+import { use as a, useCallback as o, useEffect as s, useMemo as c } from "react";
+import l from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
+import u from "@plitzi/sdk-shared/network/NetworkContext";
+import { useCommonStoreSync as d } from "@plitzi/sdk-shared/store";
+import { EMPTY_STYLE_SCHEMA as f } from "@plitzi/sdk-shared/style/styleConstants";
+import { jsx as p } from "react/jsx-runtime";
 //#region src/BuilderStyleContextProvider.tsx
 var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ = [] }) => {
-	let { subscriptionManager: v } = i(f), y = s(() => _.map((e) => ({
-		middleware: e,
-		filterCallback: (e) => !e.fromSubscriptions
-	})), [_]), [b, x] = u(n, h ?? p, y);
-	l("style", b);
-	let S = a((e, t = !1) => x({
+	let { subscriptionManager: v } = a(u), [y, b] = i(n, h ?? f, _);
+	d("style", y);
+	let x = o((e, t = !1) => b({
 		type: r.STYLE_UPDATE,
 		style: e,
 		fromSubscriptions: t
-	}), [x]), C = a((t, n, i, a, o, s, c = !1) => {
-		n ||= e(i), x({
+	}), [b]), S = o((e, n, i, a, o, s, c = !1) => {
+		n ||= t(i), b({
 			type: r.STYLE_ADD_SELECTOR,
-			displayMode: t,
+			displayMode: e,
 			selector: n,
 			selectorType: i,
 			path: a,
@@ -30,7 +27,7 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 			params: s,
 			fromSubscriptions: c
 		});
-	}, [x]), w = a((e, t, n, i, a, o = !1) => x({
+	}, [b]), C = o((e, t, n, i, a, o = !1) => b({
 		type: r.STYLE_UPDATE_SELECTOR,
 		displayMode: e,
 		selector: t,
@@ -38,18 +35,18 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 		value: i,
 		params: a,
 		fromSubscriptions: o
-	}), [x]), T = a((e, t, n = !1) => x({
+	}), [b]), w = o((e, t, n = !1) => b({
 		type: r.STYLE_REMOVE_SELECTOR,
 		displayMode: e,
 		selector: t,
 		fromSubscriptions: n
-	}), [x]), E = a((e, t, n = !1) => x({
+	}), [b]), T = o((e, t, n = !1) => b({
 		type: r.STYLE_REMOVE_SELECTORS,
 		displayMode: e,
 		selectors: t,
 		fromSubscriptions: n
-	}), [x]), D = a((e, t, n, i, a, o = !1) => {
-		x({
+	}), [b]), E = o((e, t, n, i, a, o = !1) => {
+		b({
 			type: r.STYLE_ADD_SELECTOR_VARIABLE,
 			displayMode: e,
 			selector: t,
@@ -58,8 +55,8 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [x]), O = a((e, t, n, i, a, o = !1) => {
-		x({
+	}, [b]), D = o((e, t, n, i, a, o = !1) => {
+		b({
 			type: r.STYLE_UPDATE_SELECTOR_VARIABLE,
 			displayMode: e,
 			selector: t,
@@ -68,8 +65,8 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [x]), k = a((e, t, n, i, a = !1) => {
-		x({
+	}, [b]), O = o((e, t, n, i, a = !1) => {
+		b({
 			type: r.STYLE_REMOVE_SELECTOR_VARIABLE,
 			displayMode: e,
 			selector: t,
@@ -77,37 +74,50 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 			name: i,
 			fromSubscriptions: a
 		});
-	}, [x]), A = a((e, t, n, i = !1) => x({
+	}, [b]), k = o((e, t, n, i = !1) => b({
 		type: r.STYLE_ADD_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [x]), j = a((e, t, n, i = !1) => x({
+	}), [b]), A = o((e, t, n, i = !1) => b({
 		type: r.STYLE_UPDATE_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [x]), M = a((e, t, n = !1) => x({
+	}), [b]), j = o((e, t, n = !1) => b({
 		type: r.STYLE_REMOVE_VARIABLE,
 		category: e,
 		name: t,
 		fromSubscriptions: n
-	}), [x]), N = a((e, t = !1) => x({
+	}), [b]), M = o((e, t = !1) => b({
+		type: r.STYLE_ADD_FONT,
+		font: e,
+		fromSubscriptions: t
+	}), [b]), N = o((e, t, n = !1) => b({
+		type: r.STYLE_UPDATE_FONT,
+		family: e,
+		font: t,
+		fromSubscriptions: n
+	}), [b]), P = o((e, t = !1) => b({
+		type: r.STYLE_REMOVE_FONT,
+		family: e,
+		fromSubscriptions: t
+	}), [b]), F = o((e, t = !1) => b({
 		type: r.STYLE_ADD_TEMPLATE,
 		platform: e,
 		fromSubscriptions: t
-	}), [x]), P = a((e, t, n = !1) => {
-		x({
+	}), [b]), I = o((e, t, n = !1) => {
+		b({
 			type: r.STYLE_UPDATE_SETTINGS,
 			path: e,
 			value: t,
 			fromSubscriptions: n
 		});
-	}, [x]);
-	o(() => {
-		if (g) return v.subscribe("STYLE_UPDATED", (e) => S(e, !0)), v.subscribe("STYLE_ADD_SELECTOR", ({ displayMode: e, selector: t, type: n, path: r, style: i, params: a }) => C(e, t, n, r, i, a, !0)), v.subscribe("STYLE_UPDATE_SELECTOR", ({ displayMode: e, selector: t, path: n, style: r, params: i }) => w(e, t, n, r, i, !0)), v.subscribe("STYLE_REMOVE_SELECTOR", ({ displayMode: e, selector: t }) => T(e, t, !0)), v.subscribe("STYLE_REMOVE_SELECTORS", ({ displayMode: e, selectors: t }) => E(e, t, !0)), v.subscribe("STYLE_ADD_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r, value: i }) => D(e, t, n, r, i, !0)), v.subscribe("STYLE_UPDATE_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r, value: i }) => O(e, t, n, r, i, !0)), v.subscribe("STYLE_REMOVE_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r }) => k(e, t, n, r, !0)), v.subscribe("STYLE_ADD_VARIABLE", ({ category: e, name: t, value: n }) => A(e, t, n, !0)), v.subscribe("STYLE_UPDATE_VARIABLE", ({ category: e, name: t, value: n }) => j(e, t, n, !0)), v.subscribe("STYLE_REMOVE_VARIABLE", ({ category: e, name: t }) => M(e, t, !0)), v.subscribe("STYLE_UPDATE_SETTINGS", ({ path: e, value: t }) => P(e, t, !0)), () => v.unsubscribe([
+	}, [b]);
+	s(() => {
+		if (g) return v.subscribe("STYLE_UPDATED", (e) => x(e, !0)), v.subscribe("STYLE_ADD_SELECTOR", ({ displayMode: e, selector: t, type: n, path: r, style: i, params: a }) => S(e, t, n, r, i, a, !0)), v.subscribe("STYLE_UPDATE_SELECTOR", ({ displayMode: e, selector: t, path: n, style: r, params: i }) => C(e, t, n, r, i, !0)), v.subscribe("STYLE_REMOVE_SELECTOR", ({ displayMode: e, selector: t }) => w(e, t, !0)), v.subscribe("STYLE_REMOVE_SELECTORS", ({ displayMode: e, selectors: t }) => T(e, t, !0)), v.subscribe("STYLE_ADD_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r, value: i }) => E(e, t, n, r, i, !0)), v.subscribe("STYLE_UPDATE_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r, value: i }) => D(e, t, n, r, i, !0)), v.subscribe("STYLE_REMOVE_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r }) => O(e, t, n, r, !0)), v.subscribe("STYLE_ADD_VARIABLE", ({ category: e, name: t, value: n }) => k(e, t, n, !0)), v.subscribe("STYLE_UPDATE_VARIABLE", ({ category: e, name: t, value: n }) => A(e, t, n, !0)), v.subscribe("STYLE_REMOVE_VARIABLE", ({ category: e, name: t }) => j(e, t, !0)), v.subscribe("STYLE_ADD_FONT", ({ font: e }) => M(e, !0)), v.subscribe("STYLE_UPDATE_FONT", ({ family: e, font: t }) => N(e, t, !0)), v.subscribe("STYLE_REMOVE_FONT", ({ family: e }) => P(e, !0)), v.subscribe("STYLE_UPDATE_SETTINGS", ({ path: e, value: t }) => I(e, t, !0)), () => v.unsubscribe([
 			"STYLE_UPDATED",
 			"STYLE_ADD_SELECTOR",
 			"STYLE_UPDATE_SELECTOR",
@@ -119,11 +129,15 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 			"STYLE_ADD_VARIABLE",
 			"STYLE_UPDATE_VARIABLE",
 			"STYLE_REMOVE_VARIABLE",
+			"STYLE_ADD_FONT",
+			"STYLE_UPDATE_FONT",
+			"STYLE_REMOVE_FONT",
 			"STYLE_UPDATE_SETTINGS"
 		], !0);
 	}, [
 		v,
 		g,
+		x,
 		S,
 		C,
 		w,
@@ -135,23 +149,29 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 		A,
 		j,
 		M,
-		P
+		N,
+		P,
+		I
 	]);
-	let F = s(() => ({
-		styleUpdate: S,
-		styleAddSelector: C,
-		styleUpdateSelector: w,
-		styleRemoveSelector: T,
-		styleRemoveSelectors: E,
-		styleAddSelectorVariable: D,
-		styleUpdateSelectorVariable: O,
-		styleRemoveSelectorVariable: k,
-		styleAddVariable: A,
-		styleUpdateVariable: j,
-		styleRemoveVariable: M,
-		styleAddTemplate: N,
-		styleUpdateSettings: P
+	let L = c(() => ({
+		styleUpdate: x,
+		styleAddSelector: S,
+		styleUpdateSelector: C,
+		styleRemoveSelector: w,
+		styleRemoveSelectors: T,
+		styleAddSelectorVariable: E,
+		styleUpdateSelectorVariable: D,
+		styleRemoveSelectorVariable: O,
+		styleAddVariable: k,
+		styleUpdateVariable: A,
+		styleRemoveVariable: j,
+		styleAddFont: M,
+		styleUpdateFont: N,
+		styleRemoveFont: P,
+		styleAddTemplate: F,
+		styleUpdateSettings: I
 	}), [
+		x,
 		S,
 		C,
 		w,
@@ -164,10 +184,12 @@ var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ =
 		j,
 		M,
 		N,
-		P
+		P,
+		F,
+		I
 	]);
-	return d("main", F), /* @__PURE__ */ c(t, {
-		value: F,
+	return l("main", L), /* @__PURE__ */ p(e, {
+		value: L,
 		children: m
 	});
 };

package/dist/SdkStyleContextProvider.mjs

@@ -1,13 +1,13 @@
 import e from "./StyleContext.mjs";
 import { use as t, useMemo as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { useBuilderStoreSync as i } from "@plitzi/sdk-shared/store";
-import { EMPTY_STYLE_SCHEMA as a } from "@plitzi/sdk-shared/style/styleConstants";
+import { useBuilderStoreSync as r } from "@plitzi/sdk-shared/store";
+import { EMPTY_STYLE_SCHEMA as i } from "@plitzi/sdk-shared/style/styleConstants";
+import { jsx as a } from "react/jsx-runtime";
 import o from "@plitzi/sdk-shared/network/NetworkInternalContext";
 //#region src/SdkStyleContextProvider.tsx
 var s = ({ children: s, style: c }) => {
 	let { style: l } = t(o), u = n(() => ({}), []);
-	return i("style", c ?? (l || a)), /* @__PURE__ */ r(e, {
+	return r("style", c ?? (l || i)), /* @__PURE__ */ a(e, {
 		value: u,
 		children: s
 	});

package/dist/StyleAdvanceEditor.mjs

@@ -1,80 +1,80 @@
-import { debounce as e, get as t } from "@plitzi/plitzi-ui/helpers";
-import { use as n, useCallback as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "@plitzi/plitzi-ui/ContainerFloating";
-import l from "@plitzi/plitzi-ui/Button";
-import { useCommonStore as u } from "@plitzi/sdk-shared/store";
+import { use as e, useCallback as t, useMemo as n, useState as r } from "react";
+import i from "@plitzi/sdk-shared/network/NetworkContext";
+import { useCommonStore as a } from "@plitzi/sdk-shared/store";
+import { debounce as o, get as s } from "@plitzi/plitzi-ui/helpers";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@plitzi/plitzi-ui/Button";
 import d from "@plitzi/plitzi-ui/CodeMirror";
-import { ThemeContext as f } from "@plitzi/sdk-shared/theme/ThemeProvider";
-import p from "@plitzi/sdk-shared/network/NetworkContext";
-import m from "@plitzi/sdk-shared/hooks/useNetwork";
-import h from "@plitzi/sdk-shared/schema/SchemaContext";
+import f from "@plitzi/plitzi-ui/ContainerFloating";
+import p from "@plitzi/sdk-shared/hooks/useNetwork";
+import m from "@plitzi/sdk-shared/schema/SchemaContext";
+import h from "@plitzi/sdk-shared/theme/useTheme";
 //#region src/StyleAdvanceEditor.tsx
 var g = () => {
-	let { theme: g } = n(f), [[_ = "", v = void 0]] = u(["schema.settings.customCss", "style.variables"]), { schemaUpdateSettings: y } = n(h), [b, x] = a(() => typeof _ == "string" ? _ : ""), S = i(() => y && e(y, 500), [y]), { server: C, webKey: w } = n(p), { networkQuery: T, networkLoading: E } = m({
+	let { resolvedTheme: g } = h(), [[_ = "", v = void 0]] = a(["schema.settings.customCss", "style.variables"]), { schemaUpdateSettings: y } = e(m), [b, x] = r(() => typeof _ == "string" ? _ : ""), S = n(() => y && o(y, 500), [y]), { server: C, webKey: w } = e(i), { networkQuery: T, networkLoading: E } = p({
 		initLoading: !1,
 		server: C,
 		webKey: w
-	}), D = r((e) => {
+	}), D = t((e) => {
 		S?.(e, "customCss"), x(e);
-	}, [x, S]), O = r(async () => {
+	}, [x, S]), O = t(async () => {
 		let e = await T("/utils/prettier-parser", {
 			data: b,
 			parser: "css"
 		}, "post");
 		if (!e || !e.data) return;
-		let n = t(e, "data", b);
-		n !== b && (x(n), S?.(n, "customCss"));
+		let t = s(e, "data", b);
+		t !== b && (x(t), S?.(t, "customCss"));
 	}, [
 		T,
 		b,
 		S
-	]), k = i(() => v ? Object.keys(v).flatMap((e) => Object.keys(v[e] ?? {})).map((e) => ({
+	]), k = n(() => v ? Object.keys(v).flatMap((e) => Object.keys(v[e] ?? {})).map((e) => ({
 		type: "css-token",
 		value: e
 	})) : [], [v]);
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ l("div", {
 		className: "relative flex h-full w-full flex-col",
-		children: [/* @__PURE__ */ o(d, {
+		children: [/* @__PURE__ */ c(d, {
 			className: "h-full",
 			value: b,
 			autoComplete: k,
-			theme: g === "dark" ? "dark" : "light",
+			theme: g,
 			lineWrapping: !0,
 			onChange: D
-		}), /* @__PURE__ */ s("div", {
+		}), /* @__PURE__ */ l("div", {
 			className: "absolute top-3 right-3 flex",
-			children: [/* @__PURE__ */ o(l, {
+			children: [/* @__PURE__ */ c(u, {
 				intent: "custom",
 				size: "custom",
 				className: "mr-2 rounded-sm bg-white p-2 text-zinc-800 shadow dark:bg-zinc-700 dark:text-zinc-200",
 				onClick: O,
 				title: "Auto format",
 				disabled: E,
-				children: /* @__PURE__ */ o("i", { className: "fa-solid fa-wand-magic-sparkles" })
-			}), /* @__PURE__ */ s(c, {
+				children: /* @__PURE__ */ c("i", { className: "fa-solid fa-wand-magic-sparkles" })
+			}), /* @__PURE__ */ l(f, {
 				containerLeftOffset: -208,
 				containerTopOffset: 4,
-				children: [/* @__PURE__ */ o(c.Trigger, { children: /* @__PURE__ */ o(l, {
+				children: [/* @__PURE__ */ c(f.Trigger, { children: /* @__PURE__ */ c(u, {
 					intent: "custom",
 					size: "custom",
 					className: "rounded-sm bg-white p-2 text-zinc-800 shadow dark:bg-zinc-700 dark:text-zinc-200",
-					children: /* @__PURE__ */ o("i", { className: "fa-solid fa-circle-info" })
-				}) }), /* @__PURE__ */ o(c.Content, { children: /* @__PURE__ */ s("div", {
+					children: /* @__PURE__ */ c("i", { className: "fa-solid fa-circle-info" })
+				}) }), /* @__PURE__ */ c(f.Content, { children: /* @__PURE__ */ l("div", {
 					className: "flex w-60 flex-col items-center justify-center p-4 text-center text-zinc-700 dark:text-zinc-300",
 					children: [
-						/* @__PURE__ */ o("p", { children: "Add your own CSS code here to customize the appearance and layout of your site." }),
-						/* @__PURE__ */ s("a", {
+						/* @__PURE__ */ c("p", { children: "Add your own CSS code here to customize the appearance and layout of your site." }),
+						/* @__PURE__ */ l("a", {
 							href: "https://codex.wordpress.org/CSS",
 							target: "_blank",
 							rel: "noopener noreferrer",
 							className: "text-blue-400 underline",
-							children: ["Learn more about CSS", /* @__PURE__ */ o("span", {
+							children: ["Learn more about CSS", /* @__PURE__ */ c("span", {
 								className: "text-sm",
 								children: " (opens in a new tab)"
 							})]
 						}),
-						/* @__PURE__ */ s("p", { children: [/* @__PURE__ */ o("span", {
+						/* @__PURE__ */ l("p", { children: [/* @__PURE__ */ c("span", {
 							className: "font-bold",
 							children: "Ctrl + Space"
 						}), " to autocomplete."] })

package/dist/StyleMap/StyleMap.d.ts

@@ -1,11 +1,13 @@
-import { DisplayMode, Style, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
+import { DisplayMode, SpaceFont, Style, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
 export type StyleMapProps = {
     platform: Style['platform'];
     variables?: Style['variables'];
+    fonts?: Style['fonts'];
 };
 declare class StyleMap {
     platform: Style['platform'];
     variables: Style['variables'];
+    fonts: SpaceFont[];
     constructor(props: StyleMapProps);
     static getInstance: (props: StyleMapProps) => StyleMap;
     addSelector(displayMode: DisplayMode, selector: string, type: TagType, path: StyleCategory | undefined, value: StyleItem['attributes'] | Partial<StyleObject> | StyleValue | undefined, params: {
@@ -48,5 +50,16 @@ declare class StyleMap {
     static updateVariable: (style: Pick<Style, "platform" | "variables">, category: StyleVariableCategory, name: string, value: StyleVariableValue) => boolean;
     removeVariable: (category: StyleVariableCategory, name: string) => boolean;
     static removeVariable: (style: Pick<Style, "platform" | "variables">, category: StyleVariableCategory, name: string) => boolean;
+    /** A family is the key: it is what `font-family` names, so a space cannot hold two of the same. */
+    addFont: (font: SpaceFont) => boolean;
+    /**
+     * The write-back is what makes this work on a document that predates the manifest: there was no array to mutate,
+     * so the instance made one, and without this line the font would be added to something nobody holds.
+     */
+    static addFont: (style: Pick<Style, "platform" | "variables" | "fonts">, font: SpaceFont) => boolean;
+    updateFont: (family: string, font: SpaceFont) => boolean;
+    static updateFont: (style: Pick<Style, "platform" | "variables" | "fonts">, family: string, font: SpaceFont) => boolean;
+    removeFont: (family: string) => boolean;
+    static removeFont: (style: Pick<Style, "platform" | "variables" | "fonts">, family: string) => boolean;
 }
 export default StyleMap;

package/dist/StyleMap/StyleMap.mjs

@@ -7,10 +7,11 @@ import { get as i, set as a } from "@plitzi/plitzi-ui/helpers";
 var o = class {
 	platform;
 	variables;
+	fonts;
 	constructor(e) {
-		let { platform: t, variables: n } = e;
+		let { platform: t, variables: n, fonts: r } = e;
 		if (!t) throw Error("Platform Required");
-		this.platform = t, this.variables = n ?? {};
+		this.platform = t, this.variables = n ?? {}, this.fonts = r ?? [];
 	}
 	static getInstance = (e) => new this(e);
 	addSelector(e, t, r, i, a, o) {
@@ -56,6 +57,27 @@ var o = class {
 	static updateVariable = (e, t, n, r) => this.getInstance(e).updateVariable(t, n, r);
 	removeVariable = (e, t) => !this.variables[e] || !this.variables[e][t] ? !1 : (delete this.variables[e][t], Object.keys(this.variables[e]).length === 0 && delete this.variables[e], !0);
 	static removeVariable = (e, t, n) => this.getInstance(e).removeVariable(t, n);
+	addFont = (e) => !this.fonts.some((t) => t.family === e.family) && (this.fonts.push(e), !0);
+	static addFont = (e, t) => {
+		let n = this.getInstance(e), r = n.addFont(t);
+		return e.fonts = n.fonts, r;
+	};
+	updateFont = (e, t) => {
+		let n = this.fonts.findIndex((t) => t.family === e);
+		return n === -1 || t.family !== e && this.fonts.some((e) => e.family === t.family) ? !1 : (this.fonts[n] = t, !0);
+	};
+	static updateFont = (e, t, n) => {
+		let r = this.getInstance(e), i = r.updateFont(t, n);
+		return e.fonts = r.fonts, i;
+	};
+	removeFont = (e) => {
+		let t = this.fonts.findIndex((t) => t.family === e);
+		return t !== -1 && (this.fonts.splice(t, 1), !0);
+	};
+	static removeFont = (e, t) => {
+		let n = this.getInstance(e), r = n.removeFont(t);
+		return e.fonts = n.fonts, r;
+	};
 };
 //#endregion
 export { o as default };

package/dist/StyleMap/helpers/isValueValid.mjs

@@ -1,7 +1,7 @@
 //#region src/StyleMap/helpers/isValueValid.ts
 var e = (e) => typeof e == "string" || typeof e == "number" || e === void 0, t = (e) => typeof e == "object" && !!e && !Array.isArray(e), n = (n) => t(n) && Object.values(n).every(e), r = (e) => t(e) && Object.values(e).every(n), i = (e) => t(e) && Object.values(e).every((e) => !(!t(e) || "variants" in e || "default" in e && e.default && !n(e.default) || "states" in e && e.states && !r(e.states))), a = (e) => !(!t(e) || !e.default || !n(e.default) || e.states && !r(e.states) || e.variants && !i(e.variants)), o = (e) => e === void 0 || t(e) && !Object.keys(e).length || t(e) && "base" in e && Object.values(e).every(a), s = (s, c, l) => {
 	let { styleSelector: u, styleVariant: d, styleState: f } = l ?? {};
-	return !s && !u && !d && !f ? o(c) : !s && !u && d && f ? !1 : !s && !u && d ? i(c) : !s && !u && f ? r(c) : s ? e(c) : u ? c === void 0 ? !0 : e(c) || !t(c) ? !1 : n(c) || a(c) : !1;
+	return !s && !u && !d && !f ? o(c) : !s && !u && d && f ? !1 : !s && !u && d ? i(c) : !s && !u && f ? r(c) : s ? e(c) : u ? c === void 0 ? !0 : e(c) || !t(c) ? !1 : n(c) || a(c) || a(c[u]) : !1;
 };
 //#endregion
 export { s as default, o as isStyleAttributes, a as isStyleBlock, n as isStyleObject, r as isStyleStates, i as isStyleVariants };

package/dist/StyleReducer.d.ts

@@ -1,4 +1,4 @@
-import { DisplayMode, Style, StyleCategory, StyleItem, StyleState, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
+import { DisplayMode, ReducerActionOrigin, Style, StyleCategory, StyleItem, StyleState, SpaceFont, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
 export declare const StyleActions: {
     readonly STYLE_UPDATE: "STYLE_UPDATE";
     readonly STYLE_ADD_SELECTOR: "STYLE_ADD_SELECTOR";
@@ -11,12 +11,13 @@ export declare const StyleActions: {
     readonly STYLE_ADD_VARIABLE: "STYLE_ADD_VARIABLE";
     readonly STYLE_UPDATE_VARIABLE: "STYLE_UPDATE_VARIABLE";
     readonly STYLE_REMOVE_VARIABLE: "STYLE_REMOVE_VARIABLE";
+    readonly STYLE_ADD_FONT: "STYLE_ADD_FONT";
+    readonly STYLE_UPDATE_FONT: "STYLE_UPDATE_FONT";
+    readonly STYLE_REMOVE_FONT: "STYLE_REMOVE_FONT";
     readonly STYLE_ADD_TEMPLATE: "STYLE_ADD_TEMPLATE";
     readonly STYLE_UPDATE_SETTINGS: "STYLE_UPDATE_SETTINGS";
 };
-export type StyleReducerActionsBase = {
-    fromSubscriptions?: boolean;
-};
+export type StyleReducerActionsBase = ReducerActionOrigin;
 export type StyleReducerActions = StyleReducerActionsBase & ({
     type: 'STYLE_UPDATE';
     style: Partial<Style>;
@@ -75,6 +76,16 @@ export type StyleReducerActions = StyleReducerActionsBase & ({
     type: 'STYLE_REMOVE_VARIABLE';
     category: StyleVariableCategory;
     name: string;
+} | {
+    type: 'STYLE_ADD_FONT';
+    font: SpaceFont;
+} | {
+    type: 'STYLE_UPDATE_FONT';
+    family: string;
+    font: SpaceFont;
+} | {
+    type: 'STYLE_REMOVE_FONT';
+    family: string;
 } | {
     type: 'STYLE_ADD_TEMPLATE';
     platform: Style['platform'];