@plaudit/gutenberg-api-extensions 2.79.0 → 2.80.0

package/src/lib/gutenberg-api-extensions-state/general-logic.ts

@@ -0,0 +1,41 @@
+import {produce} from "immer";
+
+import {clone} from "../helpers";
+import type {BlockName, RegisterBlockAttrs} from "../useful-types";
+
+export type GeneralLogicActions = {type: 'RECORD_BASELINE_BLOCK_ATTRS', attrs: RegisterBlockAttrs<Record<string, any>>}|{type: "SET_FEATURE_PROP", feature: string, prop: string, value: any};
+export type GeneralLogicState = {
+	baselineBlockAttrs: {[blockName in BlockName]?: RegisterBlockAttrs<Record<string, any>>},
+	features: {[name in string]?: {[prop in string]: any}}
+};
+export function generalLogic(state: GeneralLogicState, action: GeneralLogicActions): typeof state {
+	if (action.type === "RECORD_BASELINE_BLOCK_ATTRS") {
+		return produce(state, (draft: typeof state) => {
+			if (!(action.attrs.name in draft.baselineBlockAttrs)) {
+				draft.baselineBlockAttrs[action.attrs.name] = clone(action.attrs);
+			}
+		});
+	} else if (action.type === "SET_FEATURE_PROP") {
+		return produce(state, (draft: typeof state) => {
+			(draft.features[action.feature] ?? (draft.features[action.feature] = {}))[action.prop] = action.value;
+		});
+	}
+	return state;
+}
+
+export const generalLogicActions = {
+	recordBaselineBlockAttrs(attrs: RegisterBlockAttrs<Record<string, any>>): GeneralLogicActions {
+		return {type: "RECORD_BASELINE_BLOCK_ATTRS", attrs};
+	},
+	setFeatureProp(feature: string, prop: string, value: any): GeneralLogicActions {
+		return {type: "SET_FEATURE_PROP", feature, prop, value};
+	}
+};
+export const generalLogicSelectors = {
+	baselineBlockAttrs(state: GeneralLogicState, blockName: BlockName) {
+		return state.baselineBlockAttrs[blockName];
+	},
+	featureProp(state: GeneralLogicState, feature: string, prop: string) {
+		return state.features[feature]?.[prop];
+	}
+};

package/src/lib/gutenberg-api-extensions-state/layered-block-styles-logic.ts

@@ -0,0 +1,42 @@
+import {produce} from "immer";
+
+import type {PDSimpleNativeProperty} from "../../blocks";
+import type {NamedBlockAction} from "../gutenberg-api-extensions-state";
+import type {BlockName, WordPressMetaActions} from "../useful-types";
+
+export type LayeredBlockStylesLogicActions =
+	NamedBlockAction<'ADD_LAYERED_BLOCK_STYLES', {properties: PDSimpleNativeProperty[]}>|
+	NamedBlockAction<'SET_LAYERED_BLOCK_STYLES', {properties: {[name in string]: PDSimpleNativeProperty}}>;
+export type LayeredBlockStylesLogicState = {
+	layeredBlockStyles: {[blockName in BlockName]?: {[name in string]: PDSimpleNativeProperty}}
+};
+
+export const layeredBlockStylesLogicActions = {
+	addLayeredBlockStyles(blockName: BlockName, properties: PDSimpleNativeProperty[]) {
+		return {type: 'ADD_LAYERED_BLOCK_STYLES', blockName, properties};
+	}
+};
+export const layeredBlockStylesLogicSelectors = {
+	blockStylesLayer(state: LayeredBlockStylesLogicState, blockName: BlockName, layerName: string) {
+		return state.layeredBlockStyles[blockName]?.[layerName];
+	},
+	blockStylesLayers(state: LayeredBlockStylesLogicState, blockName: BlockName) {
+		return state.layeredBlockStyles[blockName];
+	}
+};
+
+export function layeredBlockStylesLogic(state: LayeredBlockStylesLogicState, action: LayeredBlockStylesLogicActions|WordPressMetaActions): typeof state {
+	if (action.type === "ADD_LAYERED_BLOCK_STYLES") {
+		return produce(state, (draft: typeof state) => {
+			const blockLayeredStyles = draft.layeredBlockStyles[action.blockName] ?? (draft.layeredBlockStyles[action.blockName] = {});
+			for (const layer of action.properties) {
+				blockLayeredStyles[layer.name] = layer;
+			}
+		});
+	} else if (action.type === "SET_LAYERED_BLOCK_STYLES") {
+		return produce(state, (draft: typeof state) => {
+			draft.layeredBlockStyles[action.blockName] = action.properties;
+		});
+	}
+	return state;
+}

package/src/lib/gutenberg-api-extensions-state/snp-logic.ts

@@ -0,0 +1,240 @@
+import {getBlockType} from "@wordpress/blocks";
+import {dispatch} from "@wordpress/data";
+
+import {produce} from "immer";
+
+import type {LaidOutProperties, PropertiesParameter, SimpleNativePanel, SimpleNativeTab} from "../../blocks";
+import {hydrateSimpleNativeProperty, OutsideHydrationInfo} from "../../blocks/common-native-property-constructors";
+import type {
+	ExtraPropTransformsConfig,
+	HydratedInspectorPanelGroupedTabs,
+	HydratedSimpleNativePanel,
+	HydratedSimpleNativeTabItem, PerBlockExtraPropTransforms,
+	PreppedSimpleNativePanelsAndTabs
+} from "../../blocks/simple-native-property-internal-shared";
+import {BareProperties, NamedBlockAction, store} from "../gutenberg-api-extensions-state";
+import {BlockName, isBlockJsonNativePropsConfig, RegisterBlockAttrs, WordPressMetaActions} from "../useful-types";
+
+export type SNPLogicState = {
+	desiccatedProperties: {[blockName in BlockName]?: Array<SimpleNativePanel|SimpleNativeTab>},
+	preppedProperties: {[blockName in BlockName]?: PreppedSimpleNativePanelsAndTabs|false},
+	extraPropTransforms: {[blockName in BlockName]?: ExtraPropTransformsConfig},
+	computedExtraPropTransforms: {[blockName in BlockName]?: PerBlockExtraPropTransforms|false},
+};
+
+export type SNPLogicActions = {type: 'ADD_PROPERTIES', blockName: BlockName|BlockName[], properties: BareProperties}|
+	NamedBlockAction<'SET_PREPPED_PROPERTIES', {properties: PreppedSimpleNativePanelsAndTabs|false}>|
+	NamedBlockAction<'ADD_OR_UPDATE_EXTRA_PROP_TRANSFORM', {propPath: string, extraPropTransform: ExtraPropTransformsConfig[string]}>|
+	NamedBlockAction<'SET_EXTRA_PROP_TRANSFORMS', {extraPropTransforms: ExtraPropTransformsConfig}>|
+	NamedBlockAction<'SET_COMPUTED_EXTRA_PROP_TRANSFORMS', {computedExtraPropTransforms: PerBlockExtraPropTransforms|false|undefined}>;
+
+export const snpLogicActions = {
+	addProperties(blockName: BlockName|BlockName[], properties: BareProperties): SNPLogicActions {
+		return {type: 'ADD_PROPERTIES', blockName, properties};
+	},
+	addOrUpdateExtraPropTransform(blockName: BlockName, propPath: string, extraPropTransform: ExtraPropTransformsConfig[string]): SNPLogicActions {
+		return {type: 'ADD_OR_UPDATE_EXTRA_PROP_TRANSFORM', blockName, propPath, extraPropTransform};
+	},
+	setComputedExtraPropTransforms(blockName: BlockName, computedExtraPropTransforms: PerBlockExtraPropTransforms|false): SNPLogicActions {
+		return {type: 'SET_COMPUTED_EXTRA_PROP_TRANSFORMS', blockName, computedExtraPropTransforms};
+	},
+	setPreppedProperties(blockName: BlockName, properties: PreppedSimpleNativePanelsAndTabs|false): SNPLogicActions {
+		return {type: 'SET_PREPPED_PROPERTIES', blockName, properties};
+	}
+};
+export const snpLogicSelectors = {
+	desiccatedProperties(state: SNPLogicState, blockName: BlockName) {
+		return state.desiccatedProperties[blockName];
+	},
+	preppedProperties(state: SNPLogicState, blockName: BlockName) {
+		let res = state.preppedProperties[blockName];
+		if (res === undefined) {
+			res = prepSimpleNativePanelsAndTabs(blockName, state.desiccatedProperties[blockName]);
+			dispatch(store).setPreppedProperties(blockName, res);
+		}
+		return res;
+	},
+	extraPropTransforms(state: SNPLogicState, blockName: BlockName) {
+		return state.extraPropTransforms[blockName];
+	},
+	computedExtraPropTransforms(state: SNPLogicState, blockName: BlockName) {
+		let res = state.computedExtraPropTransforms[blockName];
+		if (res === undefined) {
+			res = computeExtraPropTransforms(getBlockType(blockName) as RegisterBlockAttrs, state.extraPropTransforms[blockName]);
+			dispatch(store).setComputedExtraPropTransforms(blockName, res);
+		}
+		return res;
+	}
+};
+
+export function snpLogic(state: SNPLogicState, action: SNPLogicActions|WordPressMetaActions) {
+	switch (action.type) {
+		case "ADD_PROPERTIES":
+			return produce(state, (draft: typeof state) => {
+				for (const bn of Array.isArray(action.blockName) ? action.blockName : [action.blockName]) {
+					addProperties(bn, action.properties, draft.desiccatedProperties);
+					draft.preppedProperties[bn] = undefined;
+					draft.extraPropTransforms[bn] = undefined;
+					draft.computedExtraPropTransforms[bn] = undefined;
+				}
+			});
+		case "ADD_OR_UPDATE_EXTRA_PROP_TRANSFORM":
+			return produce(state, (draft: typeof state) => {
+				const blockTransforms = draft.extraPropTransforms[action.blockName] ?? (draft.extraPropTransforms[action.blockName] = {});
+				if (blockTransforms[action.propPath]) {
+					blockTransforms[action.propPath]!.styleProperty = action.extraPropTransform.styleProperty;
+				} else {
+					blockTransforms[action.propPath] = action.extraPropTransform;
+				}
+				draft.computedExtraPropTransforms[action.blockName] = undefined;
+			});
+		case "SET_PREPPED_PROPERTIES":
+			return produce(state, (draft: typeof state) => {
+				draft.preppedProperties[action.blockName] = action.properties;
+			});
+		case "SET_EXTRA_PROP_TRANSFORMS":
+			return produce(state, (draft: typeof state) => {
+				draft.extraPropTransforms[action.blockName] = action.extraPropTransforms;
+			});
+		case "SET_COMPUTED_EXTRA_PROP_TRANSFORMS":
+			return produce(state, (draft: typeof state) => {
+				draft.computedExtraPropTransforms[action.blockName] = action.computedExtraPropTransforms;
+			});
+		default:
+			return state;
+	}
+}
+
+export function addProperties(block: BlockName, properties: PropertiesParameter, simpleNativePanelsAndTabs: SNPLogicState['desiccatedProperties']) {
+	const panels = (simpleNativePanelsAndTabs[block] ?? (simpleNativePanelsAndTabs[block] = []));
+	if ('title' in properties) {
+		panels.push(properties);
+		return;
+	}
+	let rawProperties: LaidOutProperties = [];
+	for (const prop of properties) {
+		if ('title' in prop) {
+			if (rawProperties.length) {
+				panels.push({
+					title: "",
+					properties: rawProperties
+				});
+				rawProperties = [];
+			}
+			panels.push(prop);
+		} else {
+			rawProperties.push(prop);
+		}
+	}
+	if (rawProperties.length) {
+		panels.push({
+			title: "",
+			properties: rawProperties
+		});
+	}
+}
+
+function normalizeTabItems(
+	items: SimpleNativeTab['items'], outsideHydrationInfo: OutsideHydrationInfo
+): HydratedSimpleNativeTabItem[] {
+	let bareProperties: HydratedSimpleNativePanel['properties'] = [];
+	const normalizedItems: HydratedSimpleNativeTabItem[] = [];
+	for (const item of items) {
+		if (Array.isArray(item)) {
+			bareProperties.push(item.map(prp => hydrateSimpleNativeProperty(prp, "", outsideHydrationInfo, [])));
+		} else if ('title' in item && 'properties' in item) {
+			if (bareProperties.length) {
+				normalizedItems.push({title: "", properties: bareProperties, initialOpen: true});
+				bareProperties = [];
+			}
+			normalizedItems.push(hydrateSimpleNativePanel(item, outsideHydrationInfo));
+		} else {
+			bareProperties.push(hydrateSimpleNativeProperty(item, "", outsideHydrationInfo, []));
+		}
+	}
+	if (bareProperties.length) {
+		normalizedItems.push({title: "", properties: bareProperties, initialOpen: true});
+	}
+	return normalizedItems;
+}
+function hydrateSimpleNativePanel(panel: SimpleNativePanel, outsideHydrationInfo: OutsideHydrationInfo): HydratedSimpleNativePanel {
+	return {
+		...panel, properties: panel.properties.map(prop => Array.isArray(prop)
+			? prop.map(prp => hydrateSimpleNativeProperty(prp, "", outsideHydrationInfo, []))
+			: hydrateSimpleNativeProperty(prop, "", outsideHydrationInfo, []))
+	}
+}
+
+/**
+ * This performs the one-time prep for rendering the registered SNP panels and tabs for a Block.
+ *
+ * @param block the name of the block to prep
+ * @param items the properties sourced from the datastore
+ * @returns either false or an object with at least one declared panel or tab.
+ *          This guarantee is made in order to avoid having to perform more convoluted checks in the render methods
+ */
+export function prepSimpleNativePanelsAndTabs(block: BlockName, items: Array<SimpleNativePanel|SimpleNativeTab>|undefined): PreppedSimpleNativePanelsAndTabs|false {
+	if (items === undefined) {
+		return false;
+	}
+
+	const ungroupedTabs: SimpleNativeTab[] = [];
+	const panels: SimpleNativePanel[] = [];
+	for (const item of items) {
+		const isTab = 'items' in item;
+		if (item.group === 'layered-styles') {
+			const props = (isTab
+				? item.items.flatMap(propsOrPanel => 'title' in propsOrPanel ? propsOrPanel.properties : propsOrPanel)
+				: item.properties).flat();
+			
+			dispatch(store).addLayeredBlockStyles(block, props);
+		}
+		if (isTab) {
+			ungroupedTabs.push(item);
+		} else {
+			panels.push(item);
+		}
+	}
+
+	if (!panels.length && !ungroupedTabs.length) {
+		return false;
+	}
+
+	let panelOrTabKeyIndex = 0;
+	const groupedTabs: HydratedInspectorPanelGroupedTabs = {};
+	for (const tab of ungroupedTabs) {
+		const tabGroupName = tab.group ?? 'default';
+		const groupedTabsForName = (groupedTabs[tabGroupName] ?? (groupedTabs[tabGroupName] = [`${block}-${panelOrTabKeyIndex++}`, {}]))[1];
+		// If a tab with that title already exists, we append its properties to the existing ones
+		const existingGroupedTabsForName = groupedTabsForName[tab.title];
+		groupedTabsForName[tab.title] = {
+			title: tab.title, group: tabGroupName,
+			items: existingGroupedTabsForName
+				? [...existingGroupedTabsForName.items, ...normalizeTabItems(tab.items, {forLayeredStyles: tab.group === "layered-styles", blockName: block})]
+				: normalizeTabItems(tab.items, {forLayeredStyles: tab.group === "layered-styles", blockName: block})
+		};
+	}
+
+	return {
+		// Because JavaScript's Array sorting methods are stable, we can just sort once at the end
+		panels: panels
+			.map(panel => hydrateSimpleNativePanel(panel, {forLayeredStyles: panel.group === "layered-styles", blockName: block}))
+			.sort(({position: aPosition = 10}, {position: bPosition = 10}) => aPosition - bPosition)
+			.map(panel => [`${block}-${panelOrTabKeyIndex++}`, panel]),
+		// We sort tab groups by name in order to force SNP styles to be added after layered-styles
+		// We don't need to check for equality in the group comparator because Object-keys are guaranteed to be distinct
+		tabs: Object.fromEntries(Object.entries(groupedTabs)
+			.sort(([aName], [bName]) => aName > bName ? 1 : -1))
+	};
+}
+
+export function computeExtraPropTransforms(blockType: RegisterBlockAttrs, extraPropTransforms: ExtraPropTransformsConfig|undefined): PerBlockExtraPropTransforms|false {
+	if (extraPropTransforms === undefined) {
+		return false;
+	}
+	const rawTransforms = Object.entries(extraPropTransforms);
+	const transforms = rawTransforms.length
+		? rawTransforms.map<PerBlockExtraPropTransforms['transforms'][number]>(transform => [transform[0].split(".") as [string, ...string[]], transform[1]])
+		: false;
+	return transforms ? {transforms, appliesInEditor: !isBlockJsonNativePropsConfig(blockType.plaudit)} : false;
+}

package/src/lib/gutenberg-api-extensions-state.ts

@@ -0,0 +1,69 @@
+import {combineReducers, createReduxStore, register} from "@wordpress/data";
+
+import type {LaidOutProperties, SimpleNativePanel, SimpleNativeTab} from "../blocks";
+import {
+	customBlockBindingsSupportLogic, customBlockBindingsSupportLogicActions, CustomBlockBindingsSupportLogicActions, customBlockBindingsSupportLogicSelectors,
+	CustomBlockBindingsSupportLogicState
+} from "./gutenberg-api-extensions-state/custom-block-bindings-support-logic";
+import {generalLogic, generalLogicActions, GeneralLogicActions, generalLogicSelectors, GeneralLogicState} from "./gutenberg-api-extensions-state/general-logic";
+import {
+	layeredBlockStylesLogic, layeredBlockStylesLogicActions, LayeredBlockStylesLogicActions, layeredBlockStylesLogicSelectors, LayeredBlockStylesLogicState
+} from "./gutenberg-api-extensions-state/layered-block-styles-logic";
+import {snpLogic, snpLogicActions, SNPLogicActions, snpLogicSelectors, SNPLogicState} from "./gutenberg-api-extensions-state/snp-logic";
+import {combineSelectors, withExposedWordpressMetadata} from "./helpers";
+import type {BlockName} from "./useful-types";
+
+export type State = {
+	customBlockBindingsSupportLogic: CustomBlockBindingsSupportLogicState,
+	layeredBlockStylesLogic: LayeredBlockStylesLogicState,
+	snpLogic: SNPLogicState,
+	generalLogic: GeneralLogicState
+};
+export type BareProperties = SimpleNativePanel|SimpleNativeTab|Array<LaidOutProperties[number]|SimpleNativePanel|SimpleNativeTab>;
+export type NamedBlockAction<A extends string, P = {}> = {type: A, blockName: BlockName}&P;
+
+const DEFAULT_STATE: State = {
+	customBlockBindingsSupportLogic: {
+		customBlockBindingsSupport: {}
+	},
+	layeredBlockStylesLogic: {
+		layeredBlockStyles: {}
+	},
+	snpLogic: {
+		desiccatedProperties: {},
+		preppedProperties: {},
+		extraPropTransforms: {},
+		computedExtraPropTransforms: {}
+	},
+	generalLogic: {
+		baselineBlockAttrs: {}, features: {}
+	}
+};
+
+type ReducerActions = CustomBlockBindingsSupportLogicActions|LayeredBlockStylesLogicActions|SNPLogicActions|GeneralLogicActions;
+
+export const store = createReduxStore('plaudit/gutenberg-api-extensions', withExposedWordpressMetadata({
+	initialState: DEFAULT_STATE,
+	reducer: combineReducers({
+		customBlockBindingsSupportLogic,
+		layeredBlockStylesLogic,
+		snpLogic,
+		generalLogic
+	}),
+	actions: {
+		...customBlockBindingsSupportLogicActions,
+		...layeredBlockStylesLogicActions,
+		...snpLogicActions,
+		...generalLogicActions
+	},
+	selectors: combineSelectors({
+		customBlockBindingsSupportLogic: customBlockBindingsSupportLogicSelectors,
+		layeredBlockStylesLogic: layeredBlockStylesLogicSelectors,
+		snpLogic: snpLogicSelectors,
+		generalLogic: generalLogicSelectors
+	})
+}));
+
+export function registerStore() {
+	register(store);
+}

package/src/lib/helpers.ts

@@ -0,0 +1,114 @@
+import {resolveSelect, type select} from "@wordpress/data";
+import type {ActionCreator, ReduxStoreConfig} from "@wordpress/data/types";
+import type * as MetaActions from "@wordpress/data/redux-store/metadata/actions";
+import type * as MetaSelectors from "@wordpress/data/redux-store/metadata/selectors";
+
+import type {store as apiStore} from "./gutenberg-api-extensions-state";
+import type {store as endpointsStore} from "../editor/simple-gutenberg-endpoints-impl";
+import type {PromisifyFunctionReturns, SubsequentArgsOfFunc} from "./useful-types";
+
+export function clone<T>(value: T): T {
+	if (value === null || value === undefined) {
+		return value;
+	} else if (Array.isArray(value)) {
+		return value.map(v => clone(v)) as T;
+	}
+	return typeof value === 'object' ? Object.fromEntries(Object.entries(value).map(([k, v]) => [k, clone(v)])) as T : value;
+}
+
+type Mapping<K> = K extends 'plaudit/gutenberg-api-extensions'|(typeof apiStore)
+	? PromisifyFunctionReturns<ReturnType<typeof select<typeof apiStore>>>
+	: K extends 'plaudit/simple-gutenberg-apis'|(typeof endpointsStore)
+		? PromisifyFunctionReturns<ReturnType<typeof select<typeof endpointsStore>>>
+		: never;
+export const fixedResolveSelect:
+	(<K extends 'plaudit/gutenberg-api-extensions'|(typeof apiStore)|'plaudit/simple-gutenberg-apis'|(typeof endpointsStore)>(key: K) => Mapping<K>) = resolveSelect;
+
+// This is madness. I do not know why it works, only that it does.
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends ((x: infer I) => void) ? I : never;
+
+// This forcibly overwrites the selectors' expected states to be the root state
+type SelectorsForT<S, ST> = S extends {[SELECTOR in string]: (state: any, ...args: any[]) => any}
+	? {[SL in keyof S]: (state: ST, ...args: SubsequentArgsOfFunc<S[SL]>) => ReturnType<S[SL]>}
+	: never;
+
+// This unifies the partial states declared via SelectorArgs into the full state
+type StateFromSelectorsArg<S extends SelectorsArg<any>> = {[K in keyof S]: Parameters<S[K][keyof S[K]]>[0]};
+
+// This handles the, "normalize state and flatten" step
+type CombinedSelectors<S extends SelectorsArg<any>> = UnionToIntersection<{[K in keyof S]: SelectorsForT<S[K], StateFromSelectorsArg<S>>}[keyof S]>;
+
+// Defines the shape of the argument in such a way that its shape can be derived from the state and vice versa
+type SelectorsArg<S extends {}> = {[K in keyof S]: {[SELECTOR in string]: (state: S[K], ...args: any[]) => any}};
+
+export function combineSelectors<S extends SelectorsArg<any>>(selectors: S) {
+	return Object.fromEntries((Object.entries(selectors) as [keyof S, S[keyof S]][]).flatMap(sel => {
+		const key = sel[0];
+		return (Object.entries(sel[1])).map(nestedSel => {
+			return [nestedSel[0], (state: StateFromSelectorsArg<S>, ...args: SubsequentArgsOfFunc<typeof nestedSel[1]>) => {
+				return nestedSel[1](state[key], ...args);
+			}];
+		});
+	})) as CombinedSelectors<typeof selectors>;
+}
+
+export function withExposedWordpressMetadata<
+	State, Actions extends Record<Exclude<string, keyof typeof MetaActions>, ActionCreator>, Selectors extends Omit<Selectors, keyof typeof MetaSelectors>
+>(
+	options: ReduxStoreConfig<State, Actions, Selectors>
+): Omit<typeof options, 'actions'|'selectors'>&{actions: (typeof MetaActions)&(typeof options)['actions'], selectors: (typeof MetaSelectors)&(typeof options)['selectors']} {
+	return options as any;
+}
+
+export class TemporalLRUCache<K, V extends NonNullable<any>|undefined> {
+	private readonly cache: Map<K, [V, number]> = new Map();
+	private timeout?: ReturnType<Window['setTimeout']>;
+
+	public constructor(
+		private readonly capacity: number,
+		private readonly minDroppableAccessTime = 10_000
+	) {}
+
+	get(key: K) {
+		const val = this.cache.get(key);
+		if (val !== undefined) {
+			val[1] = Date.now();
+			return val[0];
+		}
+		return null;
+	}
+
+	set(key: K, value: V) {
+		this.cache.set(key, [value, Date.now()]);
+		if (this.cache.size >= this.capacity && this.timeout === undefined) {
+			this.beginTimeout();
+		}
+	}
+
+	has(key: K) {
+		return this.cache.has(key);
+	}
+
+	cancelTimeout() {
+		if (this.timeout !== undefined) {
+			window.clearTimeout(this.timeout);
+			this.timeout = undefined;
+		}
+	}
+	private beginTimeout() {
+		this.timeout = window.setTimeout(() => {
+			const now = Date.now();
+			const droppableItems = [...this.cache.entries()]
+				.filter(([_, v]) => now - v[1] >= this.minDroppableAccessTime)
+				.sort(([_a, [_a0, mraA]], [_b, [_b0, mraB]]) => mraA - mraB)
+				.slice(0, this.cache.size - this.capacity);
+			for (const [key] of droppableItems) {
+				this.cache.delete(key);
+			}
+			this.timeout = undefined;
+			if (this.cache.size > this.capacity) {
+				this.beginTimeout();
+			}
+		}, this.minDroppableAccessTime);
+	}
+}

package/src/lib/plaudit-icons/column-1.tsx

@@ -0,0 +1,6 @@
+export const iconColumn1 = <svg width={34} height={24} viewBox="0 0 34 24">
+	<path
+		d="M32 2H2v20h30V2zM2 0C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2H2z"
+		fillRule="evenodd" clipRule="evenodd"
+	/>
+</svg>;

package/src/lib/plaudit-icons/column-2.tsx

@@ -0,0 +1,6 @@
+export const iconColumn2 = <svg width={34} height={24} viewBox="0 0 34 24">
+	<path
+		d="M32 0c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V2C0 .9.9 0 2 0h30zm0 22V2H18v20h14zm-16 0H2V2h14v20z"
+		fillRule="evenodd" clipRule="evenodd"
+	/>
+</svg>;

package/src/lib/plaudit-icons/column-3.tsx

@@ -0,0 +1,6 @@
+export const iconColumn3 = <svg width={34} height={24} viewBox="0 0 34 24">
+	<path
+		d="M34 2c0-1.1-.9-2-2-2H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2zM21.5 22h-9V2h9v20zm2 0V2H32v20h-8.5zm-13 0H2V2h8.5v20z"
+		fillRule="evenodd" clipRule="evenodd"
+	/>
+</svg>;

package/src/lib/plaudit-icons/placement-center.tsx

@@ -0,0 +1,3 @@
+export const placementCenter = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
+	<path d="M20,11h-5V4H9v7H4v1.5h5V20h6v-7.5h5V11z" />
+</svg>;

package/src/lib/plaudit-icons/placement-end.tsx

@@ -0,0 +1,3 @@
+export const placementEnd = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
+	<path d="M15,4H9v11h6V4z M4,18.5V20h16v-1.5H4z" />
+</svg>;

package/src/lib/plaudit-icons/placement-start.tsx

@@ -0,0 +1,3 @@
+export const placementStart = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
+	<path d="M9,20h6V9H9V20z M4,4v1.5h16V4H4z" />
+</svg>;

package/src/lib/plaudit-icons/placement-stretch.tsx

@@ -0,0 +1,3 @@
+export const placementStretch = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
+	<path d="M8.8,6.5h6v11h-6V6.5z M4,18.5h16V20H4V18.5z M4,4h16v1.5H4V4z" />
+</svg>;

package/src/lib/plaudit-icons/plaudit-icon.tsx

@@ -0,0 +1,4 @@
+export const plauditIcon = <svg width={24} height={24} viewBox="0 0 139 157.6">
+	<path fill="#d20000"
+	      d="M83.3 39.1L101.6 9c2-3.2.9-7.1-2.4-8.5s-6.9.4-7.9 4l-9.7 33.9c-1.1 3.6-.3 4 1.7.7zm-43.9 19L9 40.5c-3.3-1.9-7.1-.7-8.5 2.6s.5 6.8 4.2 7.8l34.1 8.9c3.7 1 4 .2.6-1.7zm16.3-19c2 3.2 2.7 2.9 1.7-.7L47.6 4.5C46.5.8 43-1 39.7.5S35.3 5.8 37.3 9l18.4 30.1zm82.8 4c-1.4-3.3-5.2-4.5-8.5-2.6L99.5 58.1c-3.3 1.9-3 2.7.7 1.7l34.1-8.9c3.7-1 5.6-4.5 4.2-7.8zM88.8 57.7c-10.6-18.3-28-18.3-38.7 0l-38.7 66.6c-10.6 18.3-1.9 33.3 19.3 33.3h77.4c21.3 0 30-15 19.3-33.3L88.8 57.7zm-19.3 1c7.1 0 12.8 5.8 12.7 12.9s-5.8 12.8-12.9 12.7c-7 0-12.7-5.8-12.8-12.8.1-7.1 5.8-12.9 13-12.8zm32 91.2h-64c-17.6 0-24.8-8.1-16-18l32-35.9c8.8-9.9 23.2-9.9 32 0l32 35.9c8.8 9.9 1.6 17.9-16 18z" />
+</svg>;

package/src/lib/plaudit-icons/reusable-block-marker.tsx

@@ -0,0 +1,3 @@
+export const reusableBlockMarker = <svg viewBox="0 0 24 24">
+	<path d="M21.3 10.8l-5.6-5.6c-.7-.7-1.8-.7-2.5 0l-5.6 5.6c-.7.7-.7 1.8 0 2.5l5.6 5.6c.3.3.8.5 1.2.5s.9-.2 1.2-.5l5.6-5.6c.8-.7.8-1.9.1-2.5zm-1 1.4l-5.6 5.6c-.1.1-.3.1-.4 0l-5.6-5.6c-.1-.1-.1-.3 0-.4l5.6-5.6s.1-.1.2-.1.1 0 .2.1l5.6 5.6c.1.1.1.3 0 .4zm-16.6-.4L10 5.5l-1-1-6.3 6.3c-.7.7-.7 1.8 0 2.5L9 19.5l1.1-1.1-6.3-6.3c-.2 0-.2-.2-.1-.3z" />
+</svg>

package/{build/lib/plaudit-icons.js → src/lib/plaudit-icons.ts}

@@ -1,6 +1,7 @@
 // =============================================
 // Allows sharing of assets in block configurations
 // =============================================
+
 export * from './plaudit-icons/column-1';
 export * from './plaudit-icons/column-2';
 export * from './plaudit-icons/column-3';
@@ -10,4 +11,3 @@ export * from './plaudit-icons/placement-end';
 export * from './plaudit-icons/placement-stretch';
 export * from './plaudit-icons/plaudit-icon';
 export * from './plaudit-icons/reusable-block-marker';
-//# sourceMappingURL=plaudit-icons.js.map

package/src/lib/suspense/promise-handlers.ts

@@ -0,0 +1,72 @@
+type WrappedPromiseEnhancements<T> = {value: T, status: 'fulfilled'}|{reason: unknown, status: 'rejected'};
+export type WrappedPromise<T> = Promise<T>&({status: 'pending'}|WrappedPromiseEnhancements<T>);
+export type PartiallyWrappedPromise<T> = Promise<T>&({status?: 'pending'}|WrappedPromiseEnhancements<T>);
+export function isWrappedPromise<T>(promise: Promise<T>): promise is WrappedPromise<T> {
+	return 'status' in promise
+		&& (promise.status === 'pending' || (promise.status === 'fulfilled' && 'value' in promise) || (promise.status === 'rejected' && 'reason' in promise));
+}
+
+export function use<T>(promise: PartiallyWrappedPromise<T>): T {
+	switch (promise.status) {
+		case "pending":
+			throw promise;
+		case "fulfilled":
+			return promise.value;
+		case "rejected":
+			throw promise.reason;
+		default:
+			return use(actuallyWrapPromise(promise));
+	}
+}
+
+export function useImmediately<T>(promise: PartiallyWrappedPromise<T>): T|undefined {
+	switch (promise.status) {
+		case "pending":
+			return undefined;
+		case "fulfilled":
+			return promise.value;
+		case "rejected":
+			throw promise.reason;
+		default:
+			return useImmediately(actuallyWrapPromise(promise));
+	}
+}
+
+export function useToPromise<T>(promise: PartiallyWrappedPromise<T>): Promise<T> {
+	switch (promise.status) {
+		case "pending":
+			throw promise;
+		case "fulfilled":
+			return Promise.resolve(promise.value);
+		case "rejected":
+			throw promise.reason;
+		default:
+			return useToPromise(actuallyWrapPromise(promise));
+	}
+}
+
+export function wrapPromise<T>(promise: PartiallyWrappedPromise<T>): WrappedPromise<T> {
+	return isWrappedPromise(promise) ? promise : actuallyWrapPromise(promise);
+}
+function actuallyWrapPromise<T>(promise: PartiallyWrappedPromise<T>): WrappedPromise<T> {
+	promise.status = 'pending';
+	promise.then(
+		value => {
+			(promise as PartiallyWrappedPromise<T>).status = 'fulfilled';
+			(promise as any).value = value;
+		},
+		reason => {
+			(promise as PartiallyWrappedPromise<T>).status = 'rejected';
+			(promise as any).reason = reason;
+		}
+	);
+	return promise as WrappedPromise<T>;
+}
+
+export function getPromiseState(promise: PartiallyWrappedPromise<any>) {
+	return wrapPromise(promise).status;
+}
+
+export function isPromise<T>(value: any): value is Promise<T> {
+	return typeof value === 'object' && !!value && ('then' in value) && typeof value['then'] === 'function';
+}

package/src/lib/suspense.tsx

@@ -0,0 +1,18 @@
+import {Spinner} from "@wordpress/components";
+
+import {InspectorPanel} from "../controls";
+
+export * from "./suspense/promise-handlers";
+
+import {type ReactNode, Suspense, type SuspenseProps} from "react";
+
+type OptionallySuspensefulProps = Omit<SuspenseProps, 'children'>&{children: ReactNode|(() => ReactNode), hasSuspensefulOptions: (() => boolean)|boolean};
+export function OptionallySuspenseful({children: Children, hasSuspensefulOptions, ...props}: OptionallySuspensefulProps) {
+	if (typeof hasSuspensefulOptions === 'function' ? hasSuspensefulOptions() : hasSuspensefulOptions) {
+		return <Suspense fallback={<InspectorPanel opened initialOpen><Spinner/> Loading options</InspectorPanel>} {...props}>{
+			typeof Children === 'function' ? <Children/> : Children
+		}</Suspense>;
+	} else {
+		return typeof Children === 'function' ? <Children/> : Children;
+	}
+}