@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

package/dist/js/packages/components/src/components/List/model/loading/IncrementalLoaderState.mjs

@@ -2,87 +2,39 @@
 /* */
 import useSelector from "../../../../lib/mobx/useSelector.mjs";
 import { useStatic } from "../../../../lib/hooks/useStatic.mjs";
-import { uniqueBy } from "remeda";
-import { action, computed, makeObservable, observable } from "mobx";
+import { ListLoaderState } from "../../../../../../components-base/src/list/loading/ListLoaderState.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/loading/IncrementalLoaderState.ts
-var IncrementalLoaderState = class IncrementalLoaderState {
-	dataBatches = [];
-	prevDataBatches = [];
-	batchLoadingStates = ["void"];
-	metadata = void 0;
+/**
+* React's view of the list's loading state.
+*
+* Everything the state _is_ — the batches, the deduplication, what counts as
+* loading — lives in `ListLoaderState` in `@mittwald/flow-components-base`, so
+* the Vue binding runs the same rules rather than a second implementation of
+* them. What is left here is the subscription: MobX is framework-agnostic,
+* reading it in a component is not.
+*/
+var IncrementalLoaderState = class IncrementalLoaderState extends ListLoaderState {
 	list;
-	isInitiallyLoading = true;
 	constructor(list) {
+		super({ getItemId: list.getItemId });
 		this.list = list;
-		makeObservable(this, {
-			prevDataBatches: false,
-			useMergedData: false,
-			useIsLoading: false,
-			useIsLoadingMore: false,
-			dataBatches: observable.shallow,
-			batchLoadingStates: observable.shallow,
-			metadata: observable,
-			mergedData: computed,
-			isLoading: computed,
-			isLoadingMore: computed,
-			isInitiallyLoading: observable,
-			setIsInitiallyLoading: action.bound,
-			reset: action.bound,
-			setDataBatch: action.bound,
-			setBatchLoadingState: action.bound,
-			setMetadata: action.bound
-		});
 	}
 	static useNew(list) {
 		return useStatic(() => new IncrementalLoaderState(list));
 	}
-	reset() {
-		this.batchLoadingStates = [];
-		this.dataBatches = [];
-	}
-	setDataBatch(index, data) {
-		if (this.dataBatches.length === 0) this.prevDataBatches = [];
-		if (this.dataBatches[index] !== data) {
-			this.dataBatches[index] = data;
-			this.prevDataBatches[index] = data;
-		}
-	}
-	setBatchLoadingState(index, state) {
-		if (state === "error" || state === "loaded") this.setIsInitiallyLoading(false);
-		if (this.batchLoadingStates[index] !== state) this.batchLoadingStates[index] = state;
-	}
-	setMetadata(metadata) {
-		this.metadata = metadata;
-	}
-	setIsInitiallyLoading(isInitiallyLoading) {
-		this.isInitiallyLoading = isInitiallyLoading;
-	}
-	get mergedData() {
-		const merged = (this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches).flatMap((d) => d);
-		if (this.list.getItemId) return uniqueBy(merged, this.list.getItemId);
-		else return merged;
-	}
 	useMergedData() {
 		return useSelector(() => this.mergedData, [this.prevDataBatches]);
 	}
-	get isLoading() {
-		return this.batchLoadingStates.some((s) => s === "loading" || s === "void");
-	}
 	useIsLoading() {
 		return useSelector(() => this.isLoading);
 	}
-	get isLoadingMore() {
-		return this.isLoading && this.dataBatches.length > 0;
-	}
 	useIsLoadingMore() {
 		return useSelector(() => this.isLoadingMore);
 	}
 	useIsInitiallyLoading() {
 		return useSelector(() => this.isInitiallyLoading);
 	}
-	isBatchLoaded(batchIndex) {
-		return batchIndex in this.dataBatches;
-	}
 };
 //#endregion
 export { IncrementalLoaderState };

package/dist/js/packages/components/src/components/List/model/loading/IncrementalLoaderState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IncrementalLoaderState.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoaderState.ts"],"sourcesContent":["import type { ListData } from \"@/components/List/model/loading/types\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport type { AsyncResource } from \"@mittwald/react-use-promise\";\nimport { action, computed, makeObservable, observable } from \"mobx\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport type List from \"@/components/List/model/List\";\nimport { uniqueBy } from \"remeda\";\n\ntype AsyncResourceLoadingState = AsyncResource[\"state\"][\"value\"];\ntype DataBatches<T> = ListData<T>[];\ntype BatchesLoadingState = AsyncResourceLoadingState[];\n\nexport class IncrementalLoaderState<T> {\n  public dataBatches: DataBatches<T> = [];\n  public prevDataBatches: DataBatches<T> = [];\n  public batchLoadingStates: BatchesLoadingState = [\"void\"];\n  public metadata?: unknown = undefined;\n  public readonly list: List<T>;\n  public isInitiallyLoading = true;\n\n  private constructor(list: List<T>) {\n    this.list = list;\n    makeObservable(this, {\n      prevDataBatches: false,\n      useMergedData: false,\n      useIsLoading: false,\n      useIsLoadingMore: false,\n      dataBatches: observable.shallow,\n      batchLoadingStates: observable.shallow,\n      metadata: observable,\n      mergedData: computed,\n      isLoading: computed,\n      isLoadingMore: computed,\n      isInitiallyLoading: observable,\n      setIsInitiallyLoading: action.bound,\n      reset: action.bound,\n      setDataBatch: action.bound,\n      setBatchLoadingState: action.bound,\n      setMetadata: action.bound,\n    });\n  }\n\n  public static useNew<T>(list: List<T>): IncrementalLoaderState<T> {\n    return useStatic(() => new IncrementalLoaderState<T>(list));\n  }\n\n  public reset(): void {\n    this.batchLoadingStates = [];\n    this.dataBatches = [];\n  }\n\n  public setDataBatch(index: number, data: ListData<T>): void {\n    if (this.dataBatches.length === 0) {\n      this.prevDataBatches = [];\n    }\n\n    if (this.dataBatches[index] !== data) {\n      this.dataBatches[index] = data;\n      this.prevDataBatches[index] = data;\n    }\n  }\n\n  public setBatchLoadingState(\n    index: number,\n    state: AsyncResourceLoadingState,\n  ): void {\n    if (state === \"error\" || state === \"loaded\") {\n      this.setIsInitiallyLoading(false);\n    }\n    if (this.batchLoadingStates[index] !== state) {\n      this.batchLoadingStates[index] = state;\n    }\n  }\n\n  public setMetadata(metadata?: unknown): void {\n    this.metadata = metadata;\n  }\n\n  public setIsInitiallyLoading(isInitiallyLoading: boolean): void {\n    this.isInitiallyLoading = isInitiallyLoading;\n  }\n\n  public get mergedData(): T[] {\n    const dataBatches =\n      this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches;\n\n    const merged = dataBatches.flatMap((d) => d);\n    if (this.list.getItemId) {\n      return uniqueBy(merged, this.list.getItemId);\n    } else {\n      return merged;\n    }\n  }\n\n  public useMergedData(): T[] {\n    return useSelector(() => this.mergedData, [this.prevDataBatches]);\n  }\n\n  public get isLoading(): boolean {\n    return this.batchLoadingStates.some((s) => s === \"loading\" || s === \"void\");\n  }\n\n  public useIsLoading(): boolean {\n    return useSelector(() => this.isLoading);\n  }\n\n  public get isLoadingMore(): boolean {\n    return this.isLoading && this.dataBatches.length > 0;\n  }\n\n  public useIsLoadingMore(): boolean {\n    return useSelector(() => this.isLoadingMore);\n  }\n\n  public useIsInitiallyLoading(): boolean {\n    return useSelector(() => this.isInitiallyLoading);\n  }\n\n  public isBatchLoaded(batchIndex: number) {\n    return batchIndex in this.dataBatches;\n  }\n}\n"],"mappings":";;;;;;;AAYA,IAAa,yBAAb,MAAa,uBAA0B;CACrC,cAAqC,CAAC;CACtC,kBAAyC,CAAC;CAC1C,qBAAiD,CAAC,MAAM;CACxD,WAA4B,KAAA;CAC5B;CACA,qBAA4B;CAE5B,YAAoB,MAAe;EACjC,KAAK,OAAO;EACZ,eAAe,MAAM;GACnB,iBAAiB;GACjB,eAAe;GACf,cAAc;GACd,kBAAkB;GAClB,aAAa,WAAW;GACxB,oBAAoB,WAAW;GAC/B,UAAU;GACV,YAAY;GACZ,WAAW;GACX,eAAe;GACf,oBAAoB;GACpB,uBAAuB,OAAO;GAC9B,OAAO,OAAO;GACd,cAAc,OAAO;GACrB,sBAAsB,OAAO;GAC7B,aAAa,OAAO;EACtB,CAAC;CACH;CAEA,OAAc,OAAU,MAA0C;EAChE,OAAO,gBAAgB,IAAI,uBAA0B,IAAI,CAAC;CAC5D;CAEA,QAAqB;EACnB,KAAK,qBAAqB,CAAC;EAC3B,KAAK,cAAc,CAAC;CACtB;CAEA,aAAoB,OAAe,MAAyB;EAC1D,IAAI,KAAK,YAAY,WAAW,GAC9B,KAAK,kBAAkB,CAAC;EAG1B,IAAI,KAAK,YAAY,WAAW,MAAM;GACpC,KAAK,YAAY,SAAS;GAC1B,KAAK,gBAAgB,SAAS;EAChC;CACF;CAEA,qBACE,OACA,OACM;EACN,IAAI,UAAU,WAAW,UAAU,UACjC,KAAK,sBAAsB,KAAK;EAElC,IAAI,KAAK,mBAAmB,WAAW,OACrC,KAAK,mBAAmB,SAAS;CAErC;CAEA,YAAmB,UAA0B;EAC3C,KAAK,WAAW;CAClB;CAEA,sBAA6B,oBAAmC;EAC9D,KAAK,qBAAqB;CAC5B;CAEA,IAAW,aAAkB;EAI3B,MAAM,UAFJ,KAAK,YAAY,WAAW,IAAI,KAAK,kBAAkB,KAAK,YAAA,CAEnC,SAAS,MAAM,CAAC;EAC3C,IAAI,KAAK,KAAK,WACZ,OAAO,SAAS,QAAQ,KAAK,KAAK,SAAS;OAE3C,OAAO;CAEX;CAEA,gBAA4B;EAC1B,OAAO,kBAAkB,KAAK,YAAY,CAAC,KAAK,eAAe,CAAC;CAClE;CAEA,IAAW,YAAqB;EAC9B,OAAO,KAAK,mBAAmB,MAAM,MAAM,MAAM,aAAa,MAAM,MAAM;CAC5E;CAEA,eAA+B;EAC7B,OAAO,kBAAkB,KAAK,SAAS;CACzC;CAEA,IAAW,gBAAyB;EAClC,OAAO,KAAK,aAAa,KAAK,YAAY,SAAS;CACrD;CAEA,mBAAmC;EACjC,OAAO,kBAAkB,KAAK,aAAa;CAC7C;CAEA,wBAAwC;EACtC,OAAO,kBAAkB,KAAK,kBAAkB;CAClD;CAEA,cAAqB,YAAoB;EACvC,OAAO,cAAc,KAAK;CAC5B;AACF"}
+{"version":3,"file":"IncrementalLoaderState.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoaderState.ts"],"sourcesContent":["import useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport type List from \"@/components/List/model/List\";\nimport { ListLoaderState } from \"@mittwald/flow-components-base\";\n\n/**\n * React's view of the list's loading state.\n *\n * Everything the state _is_ — the batches, the deduplication, what counts as\n * loading — lives in `ListLoaderState` in `@mittwald/flow-components-base`, so\n * the Vue binding runs the same rules rather than a second implementation of\n * them. What is left here is the subscription: MobX is framework-agnostic,\n * reading it in a component is not.\n */\nexport class IncrementalLoaderState<T> extends ListLoaderState<T> {\n  public readonly list: List<T>;\n\n  private constructor(list: List<T>) {\n    super({ getItemId: list.getItemId });\n    this.list = list;\n  }\n\n  public static useNew<T>(list: List<T>): IncrementalLoaderState<T> {\n    return useStatic(() => new IncrementalLoaderState<T>(list));\n  }\n\n  public useMergedData(): T[] {\n    return useSelector(() => this.mergedData, [this.prevDataBatches]);\n  }\n\n  public useIsLoading(): boolean {\n    return useSelector(() => this.isLoading);\n  }\n\n  public useIsLoadingMore(): boolean {\n    return useSelector(() => this.isLoadingMore);\n  }\n\n  public useIsInitiallyLoading(): boolean {\n    return useSelector(() => this.isInitiallyLoading);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAa,yBAAb,MAAa,+BAAkC,gBAAmB;CAChE;CAEA,YAAoB,MAAe;EACjC,MAAM,EAAE,WAAW,KAAK,UAAU,CAAC;EACnC,KAAK,OAAO;CACd;CAEA,OAAc,OAAU,MAA0C;EAChE,OAAO,gBAAgB,IAAI,uBAA0B,IAAI,CAAC;CAC5D;CAEA,gBAA4B;EAC1B,OAAO,kBAAkB,KAAK,YAAY,CAAC,KAAK,eAAe,CAAC;CAClE;CAEA,eAA+B;EAC7B,OAAO,kBAAkB,KAAK,SAAS;CACzC;CAEA,mBAAmC;EACjC,OAAO,kBAAkB,KAAK,aAAa;CAC7C;CAEA,wBAAwC;EACtC,OAAO,kBAAkB,KAAK,kBAAkB;CAClD;AACF"}

package/dist/js/packages/components/src/components/List/model/search/Search.mjs

@@ -1,55 +1,27 @@
 "use client"
 /* */
+import { ListSearch } from "../../../../../../components-base/src/list/search/ListSearch.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/search/Search.ts
-var Search = class {
-	list;
+/**
+* React's search: the shared one plus how the field is rendered.
+*
+* The term, its initial value and its persistence are `ListSearch` in
+* `@mittwald/flow-components-base`. `render` and `textFieldProps` stay here — a
+* component type and Flow's `SearchField` props are React, and a binding brings
+* its own.
+*/
+var Search = class extends ListSearch {
 	render;
 	textFieldProps;
-	onUpdateCallbacks = /* @__PURE__ */ new Set();
-	initialValue;
-	defaultValue;
-	autosave;
-	constructor(list, searchShape) {
-		const { autosave = list.settingsStorageDefaults?.search?.autosave ?? false, render, textFieldProps, defaultValue } = searchShape;
-		this.autosave = autosave;
-		this.list = list;
-		this.render = render;
-		this.textFieldProps = textFieldProps;
-		this.defaultValue = defaultValue;
-		this.initialValue = this.getInitialValue();
-	}
-	get value() {
-		return this.list.reactTable.searchString;
-	}
-	get isSet() {
-		return this.value !== void 0;
-	}
-	callOnUpdateCallbacks() {
-		this.onUpdateCallbacks.forEach((cb) => cb());
-	}
-	getInitialValue() {
-		return this.list.settingsStorage?.get("search", { autosave: this.autosave })?.value ?? this.defaultValue;
-	}
-	updateInitialState(initialState) {
-		initialState.globalFilter = this.initialValue;
-	}
-	setValue(value) {
-		if (value === void 0 || value.trim() === "") {
-			if (this.list.reactTable.table.getState().globalFilter) {
-				this.list.reactTable.table.setGlobalFilter(void 0);
-				this.callOnUpdateCallbacks();
-			}
-		} else {
-			this.list.reactTable.table.setGlobalFilter(value);
-			this.callOnUpdateCallbacks();
-		}
-		this.list.settingsStorage?.store("search", { value }, { autosave: this.autosave });
-	}
-	clear() {
-		this.setValue(void 0);
-	}
-	onUpdated(cb) {
-		this.onUpdateCallbacks.add(cb);
+	constructor(context, shape) {
+		super(context, shape);
+		this.render = shape.render;
+		this.textFieldProps = shape.textFieldProps;
+	}
+	/** The list this search belongs to — `context`, typed as React's `List`. */
+	get list() {
+		return this.context;
 	}
 };
 //#endregion

package/dist/js/packages/components/src/components/List/model/search/Search.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Search.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/search/Search.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n  SearchFieldRenderComponent,\n  SearchShape,\n  SearchValue,\n} from \"@/components/List/model/search/types\";\nimport type { InitialTableState } from \"@tanstack/react-table\";\n\nexport class Search<T> {\n  public readonly list: List<T>;\n  public readonly render?: SearchFieldRenderComponent;\n  public readonly textFieldProps: SearchShape<T>[\"textFieldProps\"];\n  private onUpdateCallbacks = new Set<() => unknown>();\n  private readonly initialValue?: string;\n  private readonly defaultValue?: string;\n  private readonly autosave: boolean;\n\n  public constructor(list: List<T>, searchShape: SearchShape<T>) {\n    const {\n      autosave = list.settingsStorageDefaults?.search?.autosave ?? false,\n      render,\n      textFieldProps,\n      defaultValue,\n    } = searchShape;\n\n    this.autosave = autosave;\n    this.list = list;\n    this.render = render;\n    this.textFieldProps = textFieldProps;\n    this.defaultValue = defaultValue;\n\n    this.initialValue = this.getInitialValue();\n  }\n\n  public get value(): SearchValue {\n    return this.list.reactTable.searchString;\n  }\n\n  public get isSet() {\n    return this.value !== undefined;\n  }\n\n  private callOnUpdateCallbacks(): void {\n    this.onUpdateCallbacks.forEach((cb) => cb());\n  }\n\n  private getInitialValue() {\n    return (\n      this.list.settingsStorage?.get(\"search\", { autosave: this.autosave })\n        ?.value ?? this.defaultValue\n    );\n  }\n\n  public updateInitialState(initialState: InitialTableState) {\n    initialState.globalFilter = this.initialValue;\n  }\n\n  public setValue(value: SearchValue): void {\n    if (value === undefined || value.trim() === \"\") {\n      if (this.list.reactTable.table.getState().globalFilter) {\n        this.list.reactTable.table.setGlobalFilter(undefined);\n        this.callOnUpdateCallbacks();\n      }\n    } else {\n      this.list.reactTable.table.setGlobalFilter(value);\n      this.callOnUpdateCallbacks();\n    }\n\n    this.list.settingsStorage?.store(\n      \"search\",\n      { value },\n      { autosave: this.autosave },\n    );\n  }\n\n  public clear(): void {\n    this.setValue(undefined);\n  }\n\n  public onUpdated(cb: () => unknown): void {\n    this.onUpdateCallbacks.add(cb);\n  }\n}\n"],"mappings":";;;AAQA,IAAa,SAAb,MAAuB;CACrB;CACA;CACA;CACA,oCAA4B,IAAI,IAAmB;CACnD;CACA;CACA;CAEA,YAAmB,MAAe,aAA6B;EAC7D,MAAM,EACJ,WAAW,KAAK,yBAAyB,QAAQ,YAAY,OAC7D,QACA,gBACA,iBACE;EAEJ,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,iBAAiB;EACtB,KAAK,eAAe;EAEpB,KAAK,eAAe,KAAK,gBAAgB;CAC3C;CAEA,IAAW,QAAqB;EAC9B,OAAO,KAAK,KAAK,WAAW;CAC9B;CAEA,IAAW,QAAQ;EACjB,OAAO,KAAK,UAAU,KAAA;CACxB;CAEA,wBAAsC;EACpC,KAAK,kBAAkB,SAAS,OAAO,GAAG,CAAC;CAC7C;CAEA,kBAA0B;EACxB,OACE,KAAK,KAAK,iBAAiB,IAAI,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,EACjE,SAAS,KAAK;CAEtB;CAEA,mBAA0B,cAAiC;EACzD,aAAa,eAAe,KAAK;CACnC;CAEA,SAAgB,OAA0B;EACxC,IAAI,UAAU,KAAA,KAAa,MAAM,KAAK,MAAM,IACtC;OAAA,KAAK,KAAK,WAAW,MAAM,SAAS,CAAC,CAAC,cAAc;IACtD,KAAK,KAAK,WAAW,MAAM,gBAAgB,KAAA,CAAS;IACpD,KAAK,sBAAsB;GAC7B;SACK;GACL,KAAK,KAAK,WAAW,MAAM,gBAAgB,KAAK;GAChD,KAAK,sBAAsB;EAC7B;EAEA,KAAK,KAAK,iBAAiB,MACzB,UACA,EAAE,MAAM,GACR,EAAE,UAAU,KAAK,SAAS,CAC5B;CACF;CAEA,QAAqB;EACnB,KAAK,SAAS,KAAA,CAAS;CACzB;CAEA,UAAiB,IAAyB;EACxC,KAAK,kBAAkB,IAAI,EAAE;CAC/B;AACF"}
+{"version":3,"file":"Search.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/search/Search.ts"],"sourcesContent":["import type { SearchShape } from \"@/components/List/model/search/types\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport { ListSearch } from \"@mittwald/flow-components-base\";\nimport type { List } from \"@/components/List/model/List\";\n\n/**\n * React's search: the shared one plus how the field is rendered.\n *\n * The term, its initial value and its persistence are `ListSearch` in\n * `@mittwald/flow-components-base`. `render` and `textFieldProps` stay here — a\n * component type and Flow's `SearchField` props are React, and a binding brings\n * its own.\n */\nexport class Search<T> extends ListSearch<T> {\n  public readonly render?: SearchShape<T>[\"render\"];\n  public readonly textFieldProps: SearchShape<T>[\"textFieldProps\"];\n\n  public constructor(context: ListModelContext<T>, shape: SearchShape<T>) {\n    super(context, shape);\n    this.render = shape.render;\n    this.textFieldProps = shape.textFieldProps;\n  }\n\n  /** The list this search belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,SAAb,cAA+B,WAAc;CAC3C;CACA;CAEA,YAAmB,SAA8B,OAAuB;EACtE,MAAM,SAAS,KAAK;EACpB,KAAK,SAAS,MAAM;EACpB,KAAK,iBAAiB,MAAM;CAC9B;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;AACF"}

package/dist/js/packages/components/src/components/List/model/sorting/Sorting.mjs

@@ -1,62 +1,23 @@
 "use client"
 /* */
+import { ListSorting } from "../../../../../../components-base/src/list/sorting/ListSorting.mjs";
+import "../../../../../../components-base/src/index.mjs";
 //#region src/components/List/model/sorting/Sorting.ts
-var Sorting = class {
-	list;
-	property;
-	name;
-	directionName;
-	direction;
-	initialEnabled;
-	customSortingFn;
-	autosave;
-	constructor(list, shape) {
-		const { property, name, directionName, direction = "asc", customSortingFn, autosave = list.settingsStorageDefaults?.sorting?.autosave ?? true } = shape;
-		this.autosave = autosave;
-		this.list = list;
-		this.property = property;
-		this.name = name;
-		this.directionName = directionName;
-		this.direction = direction;
-		this.customSortingFn = customSortingFn;
-		this.initialEnabled = this.getInitialEnabled(shape);
-	}
-	getInitialEnabled(shape) {
-		if (shape.defaultEnabled === "hidden") return "hidden";
-		const storedSorting = this.list.settingsStorage?.get("sorting", { autosave: this.autosave });
-		return (storedSorting ? storedSorting.property === this.property && storedSorting.direction === this.direction : void 0) ?? shape.defaultEnabled ?? false;
-	}
-	updateTableColumnDef(def) {
-		def.enableSorting = true;
-		if (this.customSortingFn) def.sortingFn = this.customSortingFn;
-	}
-	getReactTableColumnSort() {
-		return {
-			id: this.property,
-			desc: this.direction === "desc"
-		};
-	}
-	isSorted() {
-		return this.getTableColumn().getIsSorted() == this.direction;
-	}
-	getTableColumn() {
-		return this.list.reactTable.getTableColumn(this.property);
-	}
-	enable() {
-		this.list.reactTable.getTableColumn(this.property).toggleSorting(this.direction === "desc", false);
-		this.list.settingsStorage?.store("sorting", {
-			property: this.property,
-			direction: this.direction
-		}, { autosave: this.autosave });
-	}
-	clear() {
-		this.list.reactTable.getTableColumn(this.property).clearSorting();
-	}
-	get id() {
-		return `${this.getTableColumn().id}:${this.direction}`;
+/**
+* React's sorting: the shared one, plus the list it belongs to.
+*
+* A sorting only translates between the TanStack table and the settings store,
+* and both are frameworkless, so everything it does is `ListSorting` in
+* `@mittwald/flow-components-base`. What is left here is `list` — the shared
+* class calls its list `context` and types it as the model's port, while
+* React's API has always handed out the `List` itself.
+*/
+var Sorting = class extends ListSorting {
+	get list() {
+		return this.context;
 	}
 };
 //#endregion
-export { Sorting };
+export { Sorting, Sorting as default };
 
 //# sourceMappingURL=Sorting.mjs.map

package/dist/js/packages/components/src/components/List/model/sorting/Sorting.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sorting.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/sorting/Sorting.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n  SortingDefaultMode,\n  SortingShape,\n} from \"@/components/List/model/sorting/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type {\n  Column,\n  ColumnDef,\n  ColumnSort,\n  SortDirection,\n  SortingFn,\n} from \"@tanstack/react-table\";\n\nexport class Sorting<T> {\n  public readonly list: List<T>;\n  public readonly property: PropertyName<T>;\n  public readonly name?: string;\n  public readonly directionName?: string;\n  public readonly direction: SortDirection;\n  public readonly initialEnabled: SortingDefaultMode;\n  public readonly customSortingFn?: SortingFn<T>;\n  public readonly autosave: boolean;\n\n  public constructor(list: List<T>, shape: SortingShape<T>) {\n    const {\n      property,\n      name,\n      directionName,\n      direction = \"asc\",\n      customSortingFn,\n      autosave = list.settingsStorageDefaults?.sorting?.autosave ?? true,\n    } = shape;\n\n    this.autosave = autosave;\n    this.list = list;\n    this.property = property;\n    this.name = name;\n    this.directionName = directionName;\n    this.direction = direction;\n    this.customSortingFn = customSortingFn;\n    this.initialEnabled = this.getInitialEnabled(shape);\n  }\n\n  private getInitialEnabled(shape: SortingShape<T>): SortingDefaultMode {\n    if (shape.defaultEnabled === \"hidden\") {\n      return \"hidden\";\n    }\n\n    const storedSorting = this.list.settingsStorage?.get(\"sorting\", {\n      autosave: this.autosave,\n    });\n\n    const storedEnabled = storedSorting\n      ? storedSorting.property === this.property &&\n        storedSorting.direction === this.direction\n      : undefined;\n\n    return storedEnabled ?? shape.defaultEnabled ?? false;\n  }\n\n  public updateTableColumnDef(def: ColumnDef<T>): void {\n    def.enableSorting = true;\n    if (this.customSortingFn) {\n      def.sortingFn = this.customSortingFn;\n    }\n  }\n\n  public getReactTableColumnSort(): ColumnSort {\n    return {\n      id: this.property as string,\n      desc: this.direction === \"desc\",\n    };\n  }\n\n  public isSorted(): boolean {\n    const col = this.getTableColumn();\n    return col.getIsSorted() == this.direction;\n  }\n\n  public getTableColumn(): Column<T> {\n    return this.list.reactTable.getTableColumn(this.property);\n  }\n\n  public enable(): void {\n    this.list.reactTable\n      .getTableColumn(this.property)\n      .toggleSorting(this.direction === \"desc\", false);\n\n    this.list.settingsStorage?.store(\n      \"sorting\",\n      {\n        property: this.property,\n        direction: this.direction,\n      },\n      {\n        autosave: this.autosave,\n      },\n    );\n  }\n\n  public clear(): void {\n    this.list.reactTable.getTableColumn(this.property).clearSorting();\n  }\n\n  public get id(): string {\n    return `${this.getTableColumn().id}:${this.direction}`;\n  }\n}\n"],"mappings":";;;AAcA,IAAa,UAAb,MAAwB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,OAAwB;EACxD,MAAM,EACJ,UACA,MACA,eACA,YAAY,OACZ,iBACA,WAAW,KAAK,yBAAyB,SAAS,YAAY,SAC5D;EAEJ,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,gBAAgB;EACrB,KAAK,YAAY;EACjB,KAAK,kBAAkB;EACvB,KAAK,iBAAiB,KAAK,kBAAkB,KAAK;CACpD;CAEA,kBAA0B,OAA4C;EACpE,IAAI,MAAM,mBAAmB,UAC3B,OAAO;EAGT,MAAM,gBAAgB,KAAK,KAAK,iBAAiB,IAAI,WAAW,EAC9D,UAAU,KAAK,SACjB,CAAC;EAOD,QALsB,gBAClB,cAAc,aAAa,KAAK,YAChC,cAAc,cAAc,KAAK,YACjC,KAAA,MAEoB,MAAM,kBAAkB;CAClD;CAEA,qBAA4B,KAAyB;EACnD,IAAI,gBAAgB;EACpB,IAAI,KAAK,iBACP,IAAI,YAAY,KAAK;CAEzB;CAEA,0BAA6C;EAC3C,OAAO;GACL,IAAI,KAAK;GACT,MAAM,KAAK,cAAc;EAC3B;CACF;CAEA,WAA2B;EAEzB,OADY,KAAK,eACV,CAAA,CAAI,YAAY,KAAK,KAAK;CACnC;CAEA,iBAAmC;EACjC,OAAO,KAAK,KAAK,WAAW,eAAe,KAAK,QAAQ;CAC1D;CAEA,SAAsB;EACpB,KAAK,KAAK,WACP,eAAe,KAAK,QAAQ,CAAC,CAC7B,cAAc,KAAK,cAAc,QAAQ,KAAK;EAEjD,KAAK,KAAK,iBAAiB,MACzB,WACA;GACE,UAAU,KAAK;GACf,WAAW,KAAK;EAClB,GACA,EACE,UAAU,KAAK,SACjB,CACF;CACF;CAEA,QAAqB;EACnB,KAAK,KAAK,WAAW,eAAe,KAAK,QAAQ,CAAC,CAAC,aAAa;CAClE;CAEA,IAAW,KAAa;EACtB,OAAO,GAAG,KAAK,eAAe,CAAC,CAAC,GAAG,GAAG,KAAK;CAC7C;AACF"}
+{"version":3,"file":"Sorting.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/sorting/Sorting.ts"],"sourcesContent":["import { ListSorting } from \"@mittwald/flow-components-base\";\nimport type { List } from \"@/components/List/model/List\";\n\n/**\n * React's sorting: the shared one, plus the list it belongs to.\n *\n * A sorting only translates between the TanStack table and the settings store,\n * and both are frameworkless, so everything it does is `ListSorting` in\n * `@mittwald/flow-components-base`. What is left here is `list` — the shared\n * class calls its list `context` and types it as the model's port, while\n * React's API has always handed out the `List` itself.\n */\nexport class Sorting<T> extends ListSorting<T> {\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n}\n\nexport default Sorting;\n"],"mappings":";;;;;;;;;;;;;;AAYA,IAAa,UAAb,cAAgC,YAAe;CAC7C,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;AACF"}

package/dist/js/packages/components/src/components/List/model/sorting/SortingFunctions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortingFunctions.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/sorting/SortingFunctions.ts"],"sourcesContent":["import type { Row, SortingFn } from \"@tanstack/react-table\";\nimport invariant from \"invariant\";\n\nexport const SortingFunctions = {\n  bigInt: ((rowA: Row<bigint>, rowB: Row<bigint>, columnId) => {\n    const valueA = rowA.getValue(columnId);\n    const valueB = rowB.getValue(columnId);\n\n    if (valueA == null) return valueB == null ? 0 : -1;\n    if (valueB == null) return 1;\n\n    try {\n      invariant(\n        typeof valueA === \"bigint\" && typeof valueB === \"bigint\",\n        `Expected BigInt values, got ${typeof valueA} and ${typeof valueB}`,\n      );\n\n      return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;\n    } catch (error) {\n      console.error(`Error in BigInt comparison: ${error}`);\n    }\n  }) as SortingFn<unknown>,\n\n  alphanumeric: \"alphanumeric\" as const,\n};\n"],"mappings":";;;;AAGA,IAAa,mBAAmB;CAC9B,UAAU,MAAmB,MAAmB,aAAa;EAC3D,MAAM,SAAS,KAAK,SAAS,QAAQ;EACrC,MAAM,SAAS,KAAK,SAAS,QAAQ;EAErC,IAAI,UAAU,MAAM,OAAO,UAAU,OAAO,IAAI;EAChD,IAAI,UAAU,MAAM,OAAO;EAE3B,IAAI;GACF,UACE,OAAO,WAAW,YAAY,OAAO,WAAW,UAChD,+BAA+B,OAAO,OAAO,OAAO,OAAO,QAC7D;GAEA,OAAO,SAAS,SAAS,KAAK,SAAS,SAAS,IAAI;EACtD,SAAS,OAAO;GACd,QAAQ,MAAM,+BAA+B,OAAO;EACtD;CACF;CAEA,cAAc;AAChB"}
+{"version":3,"file":"SortingFunctions.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/sorting/SortingFunctions.ts"],"sourcesContent":["import type { Row, SortingFn } from \"@tanstack/table-core\";\nimport invariant from \"invariant\";\n\nexport const SortingFunctions = {\n  bigInt: ((rowA: Row<bigint>, rowB: Row<bigint>, columnId) => {\n    const valueA = rowA.getValue(columnId);\n    const valueB = rowB.getValue(columnId);\n\n    if (valueA == null) return valueB == null ? 0 : -1;\n    if (valueB == null) return 1;\n\n    try {\n      invariant(\n        typeof valueA === \"bigint\" && typeof valueB === \"bigint\",\n        `Expected BigInt values, got ${typeof valueA} and ${typeof valueB}`,\n      );\n\n      return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;\n    } catch (error) {\n      console.error(`Error in BigInt comparison: ${error}`);\n    }\n  }) as SortingFn<unknown>,\n\n  alphanumeric: \"alphanumeric\" as const,\n};\n"],"mappings":";;;;AAGA,IAAa,mBAAmB;CAC9B,UAAU,MAAmB,MAAmB,aAAa;EAC3D,MAAM,SAAS,KAAK,SAAS,QAAQ;EACrC,MAAM,SAAS,KAAK,SAAS,QAAQ;EAErC,IAAI,UAAU,MAAM,OAAO,UAAU,OAAO,IAAI;EAChD,IAAI,UAAU,MAAM,OAAO;EAE3B,IAAI;GACF,UACE,OAAO,WAAW,YAAY,OAAO,WAAW,UAChD,+BAA+B,OAAO,OAAO,OAAO,OAAO,QAC7D;GAEA,OAAO,SAAS,SAAS,KAAK,SAAS,SAAS,IAAI;EACtD,SAAS,OAAO;GACd,QAAQ,MAAM,+BAA+B,OAAO;EACtD;CACF;CAEA,cAAc;AAChB"}

package/dist/js/packages/components/src/components/List/views/EmptyView/EmptyView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/views/EmptyView/EmptyView.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { IconSearch } from \"@/components/Icon/components/icons\";\nimport { Heading } from \"@/components/Heading\";\nimport { Text } from \"@/components/Text\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport styles from \"../../components/Items/Items.module.scss\";\n\nexport type EmptyViewProps = Record<string, never>;\n\n/**\n * @flr-generate all\n *\n * Keep this unused component for backwards compatibility!\n */\nexport const EmptyView: FC<EmptyViewProps> = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <IllustratedMessage className={styles.emptyView}>\n      <IconSearch />\n      <Heading>{stringFormatter.format(\"noResult.heading\")}</Heading>\n      <Text>{stringFormatter.format(\"noResult.text\")}</Text>\n    </IllustratedMessage>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,kBAAsC;CACjD,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,OACE,qBAAC,oBAAD;EAAoB,WAAW,qBAAO;EAAtC,UAAA;GACE,oBAAC,YAAD,CAAa,CAAA;GACb,oBAAC,SAAD,EAAA,UAAU,gBAAgB,OAAO,kBAAkB,EAAW,CAAA;GAC9D,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,eAAe,EAAQ,CAAA;EACnC;;AAExB"}
+{"version":3,"file":"EmptyView.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/List/views/EmptyView/EmptyView.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { IconSearch } from \"@/components/Icon/components/icons\";\nimport { Heading } from \"@/components/Heading\";\nimport { Text } from \"@/components/Text\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport styles from \"../../components/Items/Items.module.scss\";\n\nexport type EmptyViewProps = Record<string, never>;\n\n/**\n * @flr-generate all\n *\n * Keep this unused component for backwards compatibility!\n */\nexport const EmptyView: FC<EmptyViewProps> = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <IllustratedMessage className={styles.emptyView}>\n      <IconSearch />\n      <Heading>{stringFormatter.format(\"noResult.heading\")}</Heading>\n      <Text>{stringFormatter.format(\"noResult.text\")}</Text>\n    </IllustratedMessage>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,kBAAsC;CACjD,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,oBAAD;EAAoB,WAAWC,qBAAO;EAAtC,UAAA;GACE,oBAAC,YAAD,CAAa,CAAA;GACb,oBAAC,SAAD,EAAA,UAAU,gBAAgB,OAAO,kBAAkB,EAAW,CAAA;GAC9D,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,eAAe,EAAQ,CAAA;EACnC;;AAExB"}

package/dist/js/packages/components/src/components/List/views/EmptyViewContainer/EmptyViewContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyViewContainer.mjs","names":[],"sources":["../../../../../../../../../src/components/List/views/EmptyViewContainer/EmptyViewContainer.tsx"],"sourcesContent":["import DivView from \"@/views/DivView\";\nimport type { FC, ReactNode } from \"react\";\nimport styles from \"../../components/Items/Items.module.scss\";\nimport type { EmptyViewType } from \"../../model/types\";\nimport { EmptySearchResultView } from \"../../components/EmptySearchResultView\";\nimport { EmptyView } from \"../../components/EmptyView\";\n\nexport interface EmptyViewContainerProps {\n  emptyView?: ReactNode;\n  emptySearchResultView?: ReactNode;\n  viewType: EmptyViewType;\n}\n\n/** @flr-generate all */\nexport const EmptyViewContainer: FC<EmptyViewContainerProps> = (props) => {\n  const emptyView = props.emptyView ?? <EmptyView />;\n  const emptySearchResultView = props.emptySearchResultView ?? (\n    <EmptySearchResultView />\n  );\n  return (\n    <DivView className={styles.emptyView}>\n      {props.viewType === \"search\" ? emptySearchResultView : emptyView}\n    </DivView>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,IAAa,sBAAmD,UAAU;CACxE,MAAM,YAAY,MAAM,aAAa,oBAAC,WAAD,CAAY,CAAA;CACjD,MAAM,wBAAwB,MAAM,yBAClC,oBAAC,uBAAD,CAAwB,CAAA;CAE1B,OACE,oBAAC,SAAD;EAAS,WAAW,qBAAO;EACxB,UAAA,MAAM,aAAa,WAAW,wBAAwB;CAChD,CAAA;AAEb"}
+{"version":3,"file":"EmptyViewContainer.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/views/EmptyViewContainer/EmptyViewContainer.tsx"],"sourcesContent":["import DivView from \"@/views/DivView\";\nimport type { FC, ReactNode } from \"react\";\nimport styles from \"../../components/Items/Items.module.scss\";\nimport type { EmptyViewType } from \"../../model/types\";\nimport { EmptySearchResultView } from \"../../components/EmptySearchResultView\";\nimport { EmptyView } from \"../../components/EmptyView\";\n\nexport interface EmptyViewContainerProps {\n  emptyView?: ReactNode;\n  emptySearchResultView?: ReactNode;\n  viewType: EmptyViewType;\n}\n\n/** @flr-generate all */\nexport const EmptyViewContainer: FC<EmptyViewContainerProps> = (props) => {\n  const emptyView = props.emptyView ?? <EmptyView />;\n  const emptySearchResultView = props.emptySearchResultView ?? (\n    <EmptySearchResultView />\n  );\n  return (\n    <DivView className={styles.emptyView}>\n      {props.viewType === \"search\" ? emptySearchResultView : emptyView}\n    </DivView>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,IAAa,sBAAmD,UAAU;CACxE,MAAM,YAAY,MAAM,aAAa,oBAAC,WAAD,CAAY,CAAA;CACjD,MAAM,wBAAwB,MAAM,yBAClC,oBAAC,uBAAD,CAAwB,CAAA;CAE1B,OACE,oBAAC,SAAD;EAAS,WAAWA,qBAAO;EACxB,UAAA,MAAM,aAAa,WAAW,wBAAwB;CAChD,CAAA;AAEb"}

package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs

@@ -1,9 +1,11 @@
 "use client"
 /* */
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconPending } from "../Icon/components/icons/IconPending.mjs";
 import LoadingSpinner_module_default from "./LoadingSpinner.module.mjs";
 import { useDesignTokens } from "../../lib/theming/hooks/useDesignTokens.mjs";
+import { SkeletonIconSurface } from "../SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs";
 import clsx from "clsx";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -14,9 +16,14 @@ var globalSpinnerTime = performance.now();
 var LoadingSpinner = (props) => {
 	const { className, color = "default", ...rest } = props;
 	const preferReducedMotion = useReducedMotion();
+	const isSkeleton = useSkeletonMode();
 	const loadingSpinnerTokens = useDesignTokens()["loading-spinner"];
 	const animationDurationMs = preferReducedMotion ? parseInt(loadingSpinnerTokens["transition-duration-slow"].value) : parseInt(loadingSpinnerTokens["transition-duration"].value);
 	const rootClassName = clsx(LoadingSpinner_module_default.loadingSpinner, isAlphaColor(color) && LoadingSpinner_module_default[color], className);
+	if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonIconSurface, {
+		className,
+		children: /* @__PURE__ */ jsx(IconPending, { ...rest })
+	});
 	return /* @__PURE__ */ jsx(IconPending, {
 		className: rootClassName,
 		ref: (element) => {

package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.mjs","names":[],"sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n  const { className, color = \"default\", ...rest } = props;\n\n  const preferReducedMotion = useReducedMotion();\n\n  const designTokens = useDesignTokens();\n  const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n  const animationDurationMs = preferReducedMotion\n    ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n    : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n  const rootClassName = clsx(\n    styles.loadingSpinner,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  return (\n    <IconPending\n      className={rootClassName}\n      ref={(element) => {\n        if (element) {\n          const elapsedMs = performance.now() - globalSpinnerTime;\n          const phaseMs = elapsedMs % animationDurationMs;\n\n          element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,oBAAoB,YAAY,IAAI;;AAG1C,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,sBAAsB,iBAAiB;CAG7C,MAAM,uBADe,gBACQ,CAAA,CAAa;CAE1C,MAAM,sBAAsB,sBACxB,SAAS,qBAAqB,2BAA2B,CAAC,KAAK,IAC/D,SAAS,qBAAqB,sBAAsB,CAAC,KAAK;CAE9D,MAAM,gBAAgB,KACpB,8BAAO,gBACP,aAAa,KAAK,KAAK,8BAAO,QAC9B,SACF;CAEA,OACE,oBAAC,aAAD;EACE,WAAW;EACX,MAAM,YAAY;GAChB,IAAI,SAAS;IAEX,MAAM,WADY,YAAY,IAAI,IAAI,qBACV;IAE5B,QAAQ,MAAM,YAAY,qBAAqB,GAAG,CAAC,QAAQ,GAAG;GAChE;EACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"LoadingSpinner.mjs","names":["styles"],"sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { SkeletonIconSurface } from \"@/components/SkeletonMode/components/SkeletonIconSurface\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n  const { className, color = \"default\", ...rest } = props;\n\n  const preferReducedMotion = useReducedMotion();\n  const isSkeleton = useSkeletonMode();\n\n  const designTokens = useDesignTokens();\n  const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n  const animationDurationMs = preferReducedMotion\n    ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n    : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n  const rootClassName = clsx(\n    styles.loadingSpinner,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  /* A round surface in the spinner's size, without the spinning. */\n  if (isSkeleton) {\n    return (\n      <SkeletonIconSurface className={className}>\n        <IconPending {...rest} />\n      </SkeletonIconSurface>\n    );\n  }\n\n  return (\n    <IconPending\n      className={rootClassName}\n      ref={(element) => {\n        if (element) {\n          const elapsedMs = performance.now() - globalSpinnerTime;\n          const phaseMs = elapsedMs % animationDurationMs;\n\n          element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,oBAAoB,YAAY,IAAI;;AAG1C,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,sBAAsB,iBAAiB;CAC7C,MAAM,aAAa,gBAAgB;CAGnC,MAAM,uBADe,gBACQ,CAAA,CAAa;CAE1C,MAAM,sBAAsB,sBACxB,SAAS,qBAAqB,2BAA2B,CAAC,KAAK,IAC/D,SAAS,qBAAqB,sBAAsB,CAAC,KAAK;CAE9D,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,aAAa,KAAK,KAAKA,8BAAO,QAC9B,SACF;CAGA,IAAI,YACF,OACE,oBAAC,qBAAD;EAAgC;EAC9B,UAAA,oBAAC,aAAD,EAAa,GAAI,KAAO,CAAA;CACL,CAAA;CAIzB,OACE,oBAAC,aAAD;EACE,WAAW;EACX,MAAM,YAAY;GAChB,IAAI,SAAS;IAEX,MAAM,WADY,YAAY,IAAI,IAAI,qBACV;IAE5B,QAAQ,MAAM,YAAY,qBAAqB,GAAG,CAAC,QAAQ,GAAG;GAChE;EACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/js/packages/components/src/components/Markdown/Markdown.mjs

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { Text } from "../Text/Text.mjs";
 import { Separator } from "../Separator/Separator.mjs";
 import { Heading } from "../Heading/Heading.mjs";
@@ -9,6 +10,7 @@ import { Link } from "../Link/Link.mjs";
 import { InlineCode } from "../InlineCode/InlineCode.mjs";
 import Markdown_module_default from "./Markdown.module.mjs";
 import { getHeadingLevelWithOffset } from "./lib/getHeadingLevelWithOffset.mjs";
+import { SkeletonBlockText, SkeletonInlineContent } from "./components/SkeletonBlocks.mjs";
 import clsx from "clsx";
 import { Children, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -21,6 +23,7 @@ import remarkGfm from "remark-gfm";
 */
 var Markdown = (props) => {
 	const { children, color = "default", className, headingOffset = 0, components: customComponents, ref, allowElement, allowedElements, disallowedElements, rehypePlugins, remarkPlugins, remarkRehypeOptions, skipHtml, unwrapDisallowed, urlTransform, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const defaultComponents = {
 		a: (props) => /* @__PURE__ */ jsx(Link, {
 			target: "_blank",
@@ -76,15 +79,28 @@ var Markdown = (props) => {
 				code: String(isValidElement(preElementContent) ? preElementContent.props.children : preElementContent).trim()
 			});
 		},
-		ul: (props) => /* @__PURE__ */ jsx(Text, {
+		ul: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
 			color,
 			children: /* @__PURE__ */ jsx("ul", { children: props.children })
 		}),
-		ol: (props) => /* @__PURE__ */ jsx(Text, {
+		ol: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
 			color,
 			children: /* @__PURE__ */ jsx("ol", { children: props.children })
 		}),
-		blockquote: (props) => /* @__PURE__ */ jsx(Text, {
+		li: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("li", {
+			...props,
+			children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
+		}),
+		th: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("th", {
+			...props,
+			children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
+		}),
+		td: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("td", {
+			...props,
+			children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
+		}),
+		img: ({ node: ignoredNode, ...props }) => isSkeleton ? null : /* @__PURE__ */ jsx("img", { ...props }),
+		blockquote: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
 			color,
 			children: /* @__PURE__ */ jsx("blockquote", { children: props.children })
 		})

package/dist/js/packages/components/src/components/Markdown/Markdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode, Ref } from \"react\";\nimport { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName, Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** Allows overriding markdown element renderers from outside. */\n  components?: Components;\n  /** @internal */\n  style?: CSSProperties;\n  /** A ref to the elements root. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    components: customComponents,\n    ref,\n    allowElement,\n    allowedElements,\n    disallowedElements,\n    rehypePlugins,\n    remarkPlugins,\n    remarkRehypeOptions,\n    skipHtml,\n    unwrapDisallowed,\n    urlTransform,\n    ...rest\n  } = props;\n\n  const defaultComponents: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={color} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={color}>\n        {props.children}\n      </Text>\n    ),\n    code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n    h1: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(1, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    hr: () => <Separator />,\n    pre: (props) => {\n      const preElementContent = Children.toArray(props.children)[0];\n\n      return (\n        <CodeBlock\n          copyable={false}\n          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? (preElementContent.props.className.replace(\n                  \"language-\",\n                  \"\",\n                ) as CodeEditorLanguage)\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          ).trim()}\n        />\n      );\n    },\n    ul: (props) => (\n      <Text color={color}>\n        <ul>{props.children as ReactNode}</ul>\n      </Text>\n    ),\n    ol: (props) => (\n      <Text color={color}>\n        <ol>{props.children as ReactNode}</ol>\n      </Text>\n    ),\n    blockquote: (props) => (\n      <Text color={color}>\n        <blockquote>{props.children}</blockquote>\n      </Text>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n  const mergedComponents: Components = {\n    ...defaultComponents,\n    ...customComponents,\n  };\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n      <ReactMarkdown\n        allowElement={allowElement}\n        allowedElements={allowedElements}\n        disallowedElements={disallowedElements}\n        rehypePlugins={rehypePlugins}\n        remarkPlugins={remarkPlugins ?? [remarkGfm]}\n        remarkRehypeOptions={remarkRehypeOptions}\n        skipHtml={skipHtml}\n        unwrapDisallowed={unwrapDisallowed}\n        urlTransform={urlTransform}\n        components={mergedComponents}\n      >\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UACA,QAAQ,WACR,WACA,gBAAgB,GAChB,YAAY,kBACZ,KACA,cACA,iBACA,oBACA,eACA,eACA,qBACA,UACA,kBACA,cACA,GAAG,SACD;CAEJ,MAAM,oBAAgC;EACpC,IAAI,UACF,oBAAC,MAAD;GAAM,QAAO;GAAgB;GAAO,MAAM,MAAM;GAC7C,UAAA,MAAM;EACH,CAAA;EAER,IAAI,UACF,oBAAC,MAAD;GAAM,aAAY;GAAW;GAC1B,UAAA,MAAM;EACH,CAAA;EAER,OAAO,UAAU,oBAAC,YAAD;GAAmB;GAAQ,UAAA,MAAM;EAAqB,CAAA;EACvE,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,MAAM,UAAU;GACd,MAAM,oBAAoB,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC;GAE3D,OACE,oBAAC,WAAD;IACE,UAAU;IACV,UACE,eAAuC,iBAAiB,KACxD,kBAAkB,MAAM,YACnB,kBAAkB,MAAM,UAAU,QACjC,aACA,EACF,IACA,KAAA;IAEN,MAAM,OACJ,eAAqC,iBAAiB,IAClD,kBAAkB,MAAM,WACxB,iBACN,CAAC,CAAC,KAAK;GACR,CAAA;EAEL;EACA,KAAK,UACH,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACjC,CAAA;EAER,KAAK,UACH,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACjC,CAAA;EAER,aAAa,UACX,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,cAAD,EAAA,UAAa,MAAM,SAAqB,CAAA;EACpC,CAAA;CAEV;CAEA,MAAM,cAAc,0BAA0B,QAAQ;CACtD,MAAM,mBAA+B;EACnC,GAAG;EACH,GAAG;CACL;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,wBAAO,UAAU,SAAS;EAAG,GAAI;EAAW;EAC/D,UAAA,oBAAC,eAAD;GACgB;GACG;GACG;GACL;GACf,eAAe,iBAAiB,CAAC,SAAS;GACrB;GACX;GACQ;GACJ;GACd,YAAY;GAEX,UAAA;EACY,CAAA;CACZ,CAAA;AAET"}
+{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode, Ref } from \"react\";\nimport { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n  SkeletonBlockText,\n  SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName, Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** Allows overriding markdown element renderers from outside. */\n  components?: Components;\n  /** @internal */\n  style?: CSSProperties;\n  /** A ref to the elements root. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    components: customComponents,\n    ref,\n    allowElement,\n    allowedElements,\n    disallowedElements,\n    rehypePlugins,\n    remarkPlugins,\n    remarkRehypeOptions,\n    skipHtml,\n    unwrapDisallowed,\n    urlTransform,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const defaultComponents: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={color} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={color}>\n        {props.children}\n      </Text>\n    ),\n    code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n    h1: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(1, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    hr: () => <Separator />,\n    pre: (props) => {\n      const preElementContent = Children.toArray(props.children)[0];\n\n      return (\n        <CodeBlock\n          copyable={false}\n          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? (preElementContent.props.className.replace(\n                  \"language-\",\n                  \"\",\n                ) as CodeEditorLanguage)\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          ).trim()}\n        />\n      );\n    },\n    ul: (props) => (\n      <SkeletonBlockText color={color}>\n        <ul>{props.children as ReactNode}</ul>\n      </SkeletonBlockText>\n    ),\n    ol: (props) => (\n      <SkeletonBlockText color={color}>\n        <ol>{props.children as ReactNode}</ol>\n      </SkeletonBlockText>\n    ),\n    li: ({ node: ignoredNode, children, ...props }) => (\n      <li {...props}>\n        <SkeletonInlineContent>{children}</SkeletonInlineContent>\n      </li>\n    ),\n    th: ({ node: ignoredNode, children, ...props }) => (\n      <th {...props}>\n        <SkeletonInlineContent>{children}</SkeletonInlineContent>\n      </th>\n    ),\n    td: ({ node: ignoredNode, children, ...props }) => (\n      <td {...props}>\n        <SkeletonInlineContent>{children}</SkeletonInlineContent>\n      </td>\n    ),\n    /* A text bar resets the mode for its content, so the image reads it\n       from here. A skeleton issues no request. */\n    img: ({ node: ignoredNode, ...props }) =>\n      isSkeleton ? null : <img {...props} />,\n    blockquote: (props) => (\n      <SkeletonBlockText color={color}>\n        <blockquote>{props.children}</blockquote>\n      </SkeletonBlockText>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n  const mergedComponents: Components = {\n    ...defaultComponents,\n    ...customComponents,\n  };\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n      <ReactMarkdown\n        allowElement={allowElement}\n        allowedElements={allowedElements}\n        disallowedElements={disallowedElements}\n        rehypePlugins={rehypePlugins}\n        remarkPlugins={remarkPlugins ?? [remarkGfm]}\n        remarkRehypeOptions={remarkRehypeOptions}\n        skipHtml={skipHtml}\n        unwrapDisallowed={unwrapDisallowed}\n        urlTransform={urlTransform}\n        components={mergedComponents}\n      >\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyCA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UACA,QAAQ,WACR,WACA,gBAAgB,GAChB,YAAY,kBACZ,KACA,cACA,iBACA,oBACA,eACA,eACA,qBACA,UACA,kBACA,cACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,oBAAgC;EACpC,IAAI,UACF,oBAAC,MAAD;GAAM,QAAO;GAAgB;GAAO,MAAM,MAAM;GAC7C,UAAA,MAAM;EACH,CAAA;EAER,IAAI,UACF,oBAAC,MAAD;GAAM,aAAY;GAAW;GAC1B,UAAA,MAAM;EACH,CAAA;EAER,OAAO,UAAU,oBAAC,YAAD;GAAmB;GAAQ,UAAA,MAAM;EAAqB,CAAA;EACvE,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,MAAM,UAAU;GACd,MAAM,oBAAoB,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC;GAE3D,OACE,oBAAC,WAAD;IACE,UAAU;IACV,UACE,eAAuC,iBAAiB,KACxD,kBAAkB,MAAM,YACnB,kBAAkB,MAAM,UAAU,QACjC,aACA,EACF,IACA,KAAA;IAEN,MAAM,OACJ,eAAqC,iBAAiB,IAClD,kBAAkB,MAAM,WACxB,iBACN,CAAC,CAAC,KAAK;GACR,CAAA;EAEL;EACA,KAAK,UACH,oBAAC,mBAAD;GAA0B;GACxB,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACpB,CAAA;EAErB,KAAK,UACH,oBAAC,mBAAD;GAA0B;GACxB,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACpB,CAAA;EAErB,KAAK,EAAE,MAAM,aAAa,UAAU,GAAG,YACrC,oBAAC,MAAD;GAAI,GAAI;GACN,UAAA,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACtD,CAAA;EAEN,KAAK,EAAE,MAAM,aAAa,UAAU,GAAG,YACrC,oBAAC,MAAD;GAAI,GAAI;GACN,UAAA,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACtD,CAAA;EAEN,KAAK,EAAE,MAAM,aAAa,UAAU,GAAG,YACrC,oBAAC,MAAD;GAAI,GAAI;GACN,UAAA,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACtD,CAAA;EAIN,MAAM,EAAE,MAAM,aAAa,GAAG,YAC5B,aAAa,OAAO,oBAAC,OAAD,EAAK,GAAI,MAAQ,CAAA;EACvC,aAAa,UACX,oBAAC,mBAAD;GAA0B;GACxB,UAAA,oBAAC,cAAD,EAAA,UAAa,MAAM,SAAqB,CAAA;EACvB,CAAA;CAEvB;CAEA,MAAM,cAAc,0BAA0B,QAAQ;CACtD,MAAM,mBAA+B;EACnC,GAAG;EACH,GAAG;CACL;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,KAAKA,wBAAO,UAAU,SAAS;EAAG,GAAI;EAAW;EAC/D,UAAA,oBAAC,eAAD;GACgB;GACG;GACG;GACL;GACf,eAAe,iBAAiB,CAAC,SAAS;GACrB;GACX;GACQ;GACJ;GACd,YAAY;GAEX,UAAA;EACY,CAAA;CACZ,CAAA;AAET"}

package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs

@@ -2,8 +2,12 @@
 /* */
 //#region src/components/Markdown/Markdown.module.scss
 var markdown = "flow--markdown";
-var Markdown_module_default = { markdown };
+var skeletonBlock = "flow--markdown--skeleton-block";
+var Markdown_module_default = {
+	markdown,
+	skeletonBlock
+};
 //#endregion
-export { Markdown_module_default as default, markdown };
+export { Markdown_module_default as default, markdown, skeletonBlock };
 
 //# sourceMappingURL=Markdown.module.mjs.map

package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  /* Everything below styles react-markdown's output. Consumers can replace any\n     renderer through the `components` prop, so these rules have to match the\n     element, not a Flow class that a replacement would not carry. */\n  // stylelint-disable-next-line selector-max-type -- react-markdown output\n  p {\n    white-space: break-spaces;\n  }\n\n  // remark-gfm renders the table markup itself — Markdown overrides no table\n  // renderer, so none of these elements carries a class.\n  // stylelint-disable selector-max-type -- react-markdown table output\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\n    border-width: var(--table--border-width);\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-spacing: 0;\n    background-color: var(--table--background-color);\n\n    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n"],"mappings":""}
+{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  /* Everything below styles react-markdown's output. Consumers can replace any\n     renderer through the `components` prop, so these rules have to match the\n     element, not a Flow class that a replacement would not carry. */\n  // stylelint-disable-next-line selector-max-type -- react-markdown output\n  p {\n    white-space: break-spaces;\n  }\n\n  // remark-gfm renders the table markup itself — Markdown overrides no table\n  // renderer, so none of these elements carries a class.\n  // stylelint-disable selector-max-type -- react-markdown table output\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\n    border-width: var(--table--border-width);\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-spacing: 0;\n    background-color: var(--table--background-color);\n\n    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n\n/* SkeletonMode: a list or quote whose items became bars. The bullets take the\n   bar color, so no real glyph shows. */\n.skeletonBlock ::marker {\n  color: skeleton.$background-color;\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Markdown/components/SkeletonBlocks.mjs

@@ -0,0 +1,82 @@
+"use client"
+/* */
+import { SkeletonModeReset, skeletonModeContext, useSkeletonMode } from "../../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
+import { Text } from "../../Text/Text.mjs";
+import Markdown_module_default from "../Markdown.module.mjs";
+import clsx from "clsx";
+import { Children, isValidElement, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Markdown/components/SkeletonBlocks.tsx
+/**
+* A text bar is an inline element and cannot wrap blocks. Markdown puts lists
+* and quotes into a `Text`, so in `SkeletonMode` this `Text` renders as real
+* text, and the blocks inside follow the skeleton rules on their own.
+*/
+var SkeletonBlockText = (props) => {
+	const { children, className, ...rest } = props;
+	const outerState = useContext(skeletonModeContext);
+	return /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(Text, {
+		...rest,
+		className: clsx(className, outerState.isEnabled && Markdown_module_default.skeletonBlock),
+		children: /* @__PURE__ */ jsx(skeletonModeContext.Provider, {
+			value: outerState,
+			children
+		})
+	}) });
+};
+var blockTagNames = /* @__PURE__ */ new Set([
+	"blockquote",
+	"div",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"hr",
+	"ol",
+	"p",
+	"pre",
+	"table",
+	"ul"
+]);
+/** Whether a rendered markdown element is a block — a nested list, a paragraph. */
+var isBlock = (child) => {
+	if (!isValidElement(child)) return false;
+	const tagName = typeof child.type === "string" ? child.type : child.props.node?.tagName;
+	return tagName !== void 0 && blockTagNames.has(tagName);
+};
+var isBlank = (child) => typeof child === "string" && child.trim() === "";
+/**
+* The content of a list item or a table cell: each run of inline content
+* becomes one text bar, blocks inside — a nested list, the paragraphs of a
+* loose list — keep their own skeleton rules. Outside an enabled `SkeletonMode`
+* it renders its children unchanged.
+*/
+var SkeletonInlineContent = (props) => {
+	const { children } = props;
+	if (!useSkeletonMode()) return children;
+	const content = [];
+	let run = [];
+	const endRun = () => {
+		const start = run.findIndex((child) => !isBlank(child));
+		const end = run.findLastIndex((child) => !isBlank(child)) + 1;
+		if (start === -1) content.push(...run);
+		else content.push(...run.slice(0, start), /* @__PURE__ */ jsx(SkeletonTextContent, {
+			defaultWidth: "8em",
+			children: run.slice(start, end)
+		}, content.length), ...run.slice(end));
+		run = [];
+	};
+	for (const child of Children.toArray(children)) if (isBlock(child)) {
+		endRun();
+		content.push(child);
+	} else run.push(child);
+	endRun();
+	return content;
+};
+//#endregion
+export { SkeletonBlockText, SkeletonInlineContent };
+
+//# sourceMappingURL=SkeletonBlocks.mjs.map

package/dist/js/packages/components/src/components/Markdown/components/SkeletonBlocks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonBlocks.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Markdown/components/SkeletonBlocks.tsx"],"sourcesContent":["import {\n  Children,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Text, type TextProps } from \"@/components/Text\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport {\n  SkeletonModeReset,\n  skeletonModeContext,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"../Markdown.module.scss\";\n\n/**\n * A text bar is an inline element and cannot wrap blocks. Markdown puts lists\n * and quotes into a `Text`, so in `SkeletonMode` this `Text` renders as real\n * text, and the blocks inside follow the skeleton rules on their own.\n */\nexport const SkeletonBlockText: FC<TextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const outerState = useContext(skeletonModeContext);\n\n  return (\n    <SkeletonModeReset>\n      <Text\n        {...rest}\n        className={clsx(\n          className,\n          outerState.isEnabled && styles.skeletonBlock,\n        )}\n      >\n        <skeletonModeContext.Provider value={outerState}>\n          {children}\n        </skeletonModeContext.Provider>\n      </Text>\n    </SkeletonModeReset>\n  );\n};\n\nconst blockTagNames = new Set([\n  \"blockquote\",\n  \"div\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"hr\",\n  \"ol\",\n  \"p\",\n  \"pre\",\n  \"table\",\n  \"ul\",\n]);\n\n/** Whether a rendered markdown element is a block — a nested list, a paragraph. */\nconst isBlock = (child: ReactNode): boolean => {\n  if (!isValidElement<{ node?: { tagName?: string } }>(child)) {\n    return false;\n  }\n\n  const tagName =\n    typeof child.type === \"string\" ? child.type : child.props.node?.tagName;\n\n  return tagName !== undefined && blockTagNames.has(tagName);\n};\n\nconst isBlank = (child: ReactNode) =>\n  typeof child === \"string\" && child.trim() === \"\";\n\n/**\n * The content of a list item or a table cell: each run of inline content\n * becomes one text bar, blocks inside — a nested list, the paragraphs of a\n * loose list — keep their own skeleton rules. Outside an enabled `SkeletonMode`\n * it renders its children unchanged.\n */\nexport const SkeletonInlineContent: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  const content: ReactNode[] = [];\n  let run: ReactNode[] = [];\n\n  /* The line breaks around a nested list stay outside the bar. */\n  const endRun = () => {\n    const start = run.findIndex((child) => !isBlank(child));\n    const end = run.findLastIndex((child) => !isBlank(child)) + 1;\n\n    if (start === -1) {\n      content.push(...run);\n    } else {\n      content.push(\n        ...run.slice(0, start),\n        <SkeletonTextContent key={content.length} defaultWidth=\"8em\">\n          {run.slice(start, end)}\n        </SkeletonTextContent>,\n        ...run.slice(end),\n      );\n    }\n\n    run = [];\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isBlock(child)) {\n      endRun();\n      content.push(child);\n    } else {\n      run.push(child);\n    }\n  }\n\n  endRun();\n\n  return content;\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,qBAAoC,UAAU;CACzD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,aAAa,WAAW,mBAAmB;CAEjD,OACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,KACT,WACA,WAAW,aAAaA,wBAAO,aACjC;EAEA,UAAA,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAClC;EAC2B,CAAA;CAC1B,CAAA,EACW,CAAA;AAEvB;AAEA,IAAM,gCAAgB,IAAI,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,IAAM,WAAW,UAA8B;CAC7C,IAAI,CAAC,eAAgD,KAAK,GACxD,OAAO;CAGT,MAAM,UACJ,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,MAAM,MAAM,MAAM;CAElE,OAAO,YAAY,KAAA,KAAa,cAAc,IAAI,OAAO;AAC3D;AAEA,IAAM,WAAW,UACf,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM;;;;;;;AAQhD,IAAa,yBAAgD,UAAU;CACrE,MAAM,EAAE,aAAa;CAIrB,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,MAAM,UAAuB,CAAC;CAC9B,IAAI,MAAmB,CAAC;CAGxB,MAAM,eAAe;EACnB,MAAM,QAAQ,IAAI,WAAW,UAAU,CAAC,QAAQ,KAAK,CAAC;EACtD,MAAM,MAAM,IAAI,eAAe,UAAU,CAAC,QAAQ,KAAK,CAAC,IAAI;EAE5D,IAAI,UAAU,IACZ,QAAQ,KAAK,GAAG,GAAG;OAEnB,QAAQ,KACN,GAAG,IAAI,MAAM,GAAG,KAAK,GACrB,oBAAC,qBAAD;GAA0C,cAAa;GACpD,UAAA,IAAI,MAAM,OAAO,GAAG;EACF,GAFK,QAAQ,MAEb,GACrB,GAAG,IAAI,MAAM,GAAG,CAClB;EAGF,MAAM,CAAC;CACT;CAEA,KAAK,MAAM,SAAS,SAAS,QAAQ,QAAQ,GAC3C,IAAI,QAAQ,KAAK,GAAG;EAClB,OAAO;EACP,QAAQ,KAAK,KAAK;CACpB,OACE,IAAI,KAAK,KAAK;CAIlB,OAAO;CAEP,OAAO;AACT"}