@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/mdi/layoutStore.ts

@@ -1,99 +1,99 @@
-import { createSettingsStore, type SettingsStore } from "@olenbetong/appframe-react";
-
-import type { MdiLayout } from "./types.js";
-
-const PERSIST_DELAY = 300;
-
-export type MdiLayoutStore = {
-	/** Resolves once every layout of the current article has been read into the cache */
-	loaded: Promise<void>;
-	key(id: string): string;
-	/** The cached layout, or `undefined` on a miss or when the version or format does not match */
-	get(key: string, layoutVersion: string | number): MdiLayout | undefined;
-	/** Caches immediately, writes to storage after a short delay so frequent layout changes coalesce */
-	set(key: string, layout: MdiLayout): void;
-	/** Caches and writes immediately */
-	setNow(key: string, layout: MdiLayout): Promise<void>;
-	remove(key: string): Promise<void>;
-};
-
-function isMdiLayout(value: unknown): value is MdiLayout {
-	return (
-		typeof value === "object" &&
-		value !== null &&
-		(value as MdiLayout).format === 1 &&
-		typeof (value as MdiLayout).documents === "object" &&
-		typeof (value as MdiLayout).dockview === "object"
-	);
-}
-
-/**
- * Same pattern as the grid layouts: one IndexedDB store per user, keys prefixed with the
- * article id, and every key of the article prefetched at module load so the first render
- * can restore synchronously.
- */
-export function createLayoutStore(store: SettingsStore, article: string): MdiLayoutStore {
-	let cache: Record<string, MdiLayout> = {};
-	let timeouts: Record<string, ReturnType<typeof setTimeout>> = {};
-
-	let loaded = store
-		.keys()
-		.then((keys) =>
-			Promise.allSettled(
-				keys
-					.filter((key) => key.startsWith(`${article}.`))
-					.map((key) =>
-						store.getItem<MdiLayout>(key).then((layout) => {
-							if (isMdiLayout(layout) && !cache[key]) {
-								cache[key] = layout;
-							}
-						}),
-					),
-			),
-		)
-		.then(() => undefined);
-
-	function clearPending(key: string) {
-		clearTimeout(timeouts[key]);
-		delete timeouts[key];
-	}
-
-	return {
-		loaded,
-		key: (id) => `${article}.${id}`,
-		get(key, layoutVersion) {
-			let layout = cache[key];
-
-			if (isMdiLayout(layout) && layout.layoutVersion === layoutVersion) {
-				return layout;
-			}
-
-			return undefined;
-		},
-		set(key, layout) {
-			cache[key] = layout;
-			clearPending(key);
-			timeouts[key] = setTimeout(() => {
-				delete timeouts[key];
-				store.setItem(key, layout);
-			}, PERSIST_DELAY);
-		},
-		async setNow(key, layout) {
-			cache[key] = layout;
-			clearPending(key);
-			await store.setItem(key, layout);
-		},
-		async remove(key) {
-			delete cache[key];
-			clearPending(key);
-			await store.removeItem(key);
-		},
-	};
-}
-
-const article = globalThis.af?.article?.id ?? globalThis.window?.location.pathname.substring(1).split("/")[0] ?? "";
-
-export const layoutStore = createLayoutStore(
-	createSettingsStore(`AfMdiLayouts.${globalThis.af?.userSession?.login ?? "anonymous"}`),
-	article,
-);
+import { createSettingsStore, type SettingsStore } from "@olenbetong/appframe-react";
+
+import type { MdiLayout } from "./types.js";
+
+const PERSIST_DELAY = 300;
+
+export type MdiLayoutStore = {
+	/** Resolves once every layout of the current article has been read into the cache */
+	loaded: Promise<void>;
+	key(id: string): string;
+	/** The cached layout, or `undefined` on a miss or when the version or format does not match */
+	get(key: string, layoutVersion: string | number): MdiLayout | undefined;
+	/** Caches immediately, writes to storage after a short delay so frequent layout changes coalesce */
+	set(key: string, layout: MdiLayout): void;
+	/** Caches and writes immediately */
+	setNow(key: string, layout: MdiLayout): Promise<void>;
+	remove(key: string): Promise<void>;
+};
+
+function isMdiLayout(value: unknown): value is MdiLayout {
+	return (
+		typeof value === "object" &&
+		value !== null &&
+		(value as MdiLayout).format === 1 &&
+		typeof (value as MdiLayout).documents === "object" &&
+		typeof (value as MdiLayout).dockview === "object"
+	);
+}
+
+/**
+ * Same pattern as the grid layouts: one IndexedDB store per user, keys prefixed with the
+ * article id, and every key of the article prefetched at module load so the first render
+ * can restore synchronously.
+ */
+export function createLayoutStore(store: SettingsStore, article: string): MdiLayoutStore {
+	let cache: Record<string, MdiLayout> = {};
+	let timeouts: Record<string, ReturnType<typeof setTimeout>> = {};
+
+	let loaded = store
+		.keys()
+		.then((keys) =>
+			Promise.allSettled(
+				keys
+					.filter((key) => key.startsWith(`${article}.`))
+					.map((key) =>
+						store.getItem<MdiLayout>(key).then((layout) => {
+							if (isMdiLayout(layout) && !cache[key]) {
+								cache[key] = layout;
+							}
+						}),
+					),
+			),
+		)
+		.then(() => undefined);
+
+	function clearPending(key: string) {
+		clearTimeout(timeouts[key]);
+		delete timeouts[key];
+	}
+
+	return {
+		loaded,
+		key: (id) => `${article}.${id}`,
+		get(key, layoutVersion) {
+			let layout = cache[key];
+
+			if (isMdiLayout(layout) && layout.layoutVersion === layoutVersion) {
+				return layout;
+			}
+
+			return undefined;
+		},
+		set(key, layout) {
+			cache[key] = layout;
+			clearPending(key);
+			timeouts[key] = setTimeout(() => {
+				delete timeouts[key];
+				store.setItem(key, layout);
+			}, PERSIST_DELAY);
+		},
+		async setNow(key, layout) {
+			cache[key] = layout;
+			clearPending(key);
+			await store.setItem(key, layout);
+		},
+		async remove(key) {
+			delete cache[key];
+			clearPending(key);
+			await store.removeItem(key);
+		},
+	};
+}
+
+const article = globalThis.af?.article?.id ?? globalThis.window?.location.pathname.substring(1).split("/")[0] ?? "";
+
+export const layoutStore = createLayoutStore(
+	createSettingsStore(`AfMdiLayouts.${globalThis.af?.userSession?.login ?? "anonymous"}`),
+	article,
+);

package/src/mdi/memorySettingsStore.ts

@@ -1,21 +1,21 @@
-import type { SettingsStore } from "@olenbetong/appframe-react";
-
-/** An in-memory SettingsStore for tests */
-export function createMemorySettingsStore(
-	initial: Record<string, unknown> = {},
-): SettingsStore & { data: Map<string, unknown> } {
-	let data = new Map<string, unknown>(Object.entries(initial));
-
-	return {
-		data,
-		getItem: async <T>(key: string) => (data.get(key) as T) ?? null,
-		setItem: async <T>(key: string, value: T) => {
-			data.set(key, value);
-			return value;
-		},
-		removeItem: async (key: string) => {
-			data.delete(key);
-		},
-		keys: async () => [...data.keys()],
-	};
-}
+import type { SettingsStore } from "@olenbetong/appframe-react";
+
+/** An in-memory SettingsStore for tests */
+export function createMemorySettingsStore(
+	initial: Record<string, unknown> = {},
+): SettingsStore & { data: Map<string, unknown> } {
+	let data = new Map<string, unknown>(Object.entries(initial));
+
+	return {
+		data,
+		getItem: async <T>(key: string) => (data.get(key) as T) ?? null,
+		setItem: async <T>(key: string, value: T) => {
+			data.set(key, value);
+			return value;
+		},
+		removeItem: async (key: string) => {
+			data.delete(key);
+		},
+		keys: async () => [...data.keys()],
+	};
+}

package/src/mdi/registry.ts

@@ -1,34 +1,34 @@
-import { panelId } from "./ids.js";
-import type { MdiDocumentType, MdiDocumentTypes, MdiParams } from "./types.js";
-
-export function resolveType(types: MdiDocumentTypes, type: string): MdiDocumentType {
-	if (type.includes(":")) {
-		throw new Error(`Mdi: document type "${type}" must not contain ":" (it separates type and key in panel ids).`);
-	}
-
-	let definition = types[type];
-
-	if (!definition) {
-		throw new Error(`Mdi: unknown document type "${type}". Register it in the \`types\` of MdiProvider.`);
-	}
-
-	return definition;
-}
-
-/** The panel id a document of this type/key gets. Singleton types ignore the key. */
-export function resolveDocumentId(types: MdiDocumentTypes, type: string, key?: string): string {
-	let definition = resolveType(types, type);
-	return panelId(type, definition.singleton ? undefined : key);
-}
-
-export function resolveTitle(definition: MdiDocumentType, type: string, params: MdiParams, key?: string): string {
-	if (typeof definition.title === "function") {
-		return definition.title(params, key);
-	}
-
-	return definition.title ?? type;
-}
-
-export function resolveClosable(definition: MdiDocumentType, override?: boolean): boolean {
-	return override ?? definition.closable ?? true;
-}
+import { panelId } from "./ids.js";
+import type { MdiDocumentType, MdiDocumentTypes, MdiParams } from "./types.js";
+
+export function resolveType(types: MdiDocumentTypes, type: string): MdiDocumentType {
+	if (type.includes(":")) {
+		throw new Error(`Mdi: document type "${type}" must not contain ":" (it separates type and key in panel ids).`);
+	}
+
+	let definition = types[type];
+
+	if (!definition) {
+		throw new Error(`Mdi: unknown document type "${type}". Register it in the \`types\` of MdiProvider.`);
+	}
+
+	return definition;
+}
+
+/** The panel id a document of this type/key gets. Singleton types ignore the key. */
+export function resolveDocumentId(types: MdiDocumentTypes, type: string, key?: string): string {
+	let definition = resolveType(types, type);
+	return panelId(type, definition.singleton ? undefined : key);
+}
+
+export function resolveTitle(definition: MdiDocumentType, type: string, params: MdiParams, key?: string): string {
+	if (typeof definition.title === "function") {
+		return definition.title(params, key);
+	}
+
+	return definition.title ?? type;
+}
+
+export function resolveClosable(definition: MdiDocumentType, override?: boolean): boolean {
+	return override ?? definition.closable ?? true;
+}

package/src/mdi/testTypes.ts

@@ -1,37 +1,37 @@
-import type { MdiDocumentTypes, MdiLayoutSpec } from "./types.js";
-
-function Placeholder() {
-	return null;
-}
-
-/** A registry shaped like the ElementsProjectsSetup app: two fixed panes, one keyed editor, one singleton. */
-export const testTypes: MdiDocumentTypes = {
-	explorer: { component: Placeholder, singleton: true, closable: false, title: "Explorer" },
-	properties: { component: Placeholder, singleton: true, closable: false, title: "Properties" },
-	editor: { component: Placeholder, title: (params, key) => `Editor ${(params.name as string) ?? key}` },
-	settings: { component: Placeholder, singleton: true, title: "Settings" },
-};
-
-export const testSpec: MdiLayoutSpec = {
-	root: {
-		direction: "horizontal",
-		children: [
-			{ tabs: [{ type: "explorer" }], hideHeader: true, locked: true, size: 1 },
-			{
-				direction: "vertical",
-				size: 3,
-				children: [
-					{
-						tabs: [
-							{ type: "editor", key: "a", params: { name: "A" } },
-							{ type: "editor", key: "b", params: { name: "B" } },
-						],
-						active: "editor:b",
-						size: 3,
-					},
-					{ tabs: [{ type: "properties" }], size: 1 },
-				],
-			},
-		],
-	},
-};
+import type { MdiDocumentTypes, MdiLayoutSpec } from "./types.js";
+
+function Placeholder() {
+	return null;
+}
+
+/** A registry shaped like the ElementsProjectsSetup app: two fixed panes, one keyed editor, one singleton. */
+export const testTypes: MdiDocumentTypes = {
+	explorer: { component: Placeholder, singleton: true, closable: false, title: "Explorer" },
+	properties: { component: Placeholder, singleton: true, closable: false, title: "Properties" },
+	editor: { component: Placeholder, title: (params, key) => `Editor ${(params.name as string) ?? key}` },
+	settings: { component: Placeholder, singleton: true, title: "Settings" },
+};
+
+export const testSpec: MdiLayoutSpec = {
+	root: {
+		direction: "horizontal",
+		children: [
+			{ tabs: [{ type: "explorer" }], hideHeader: true, locked: true, size: 1 },
+			{
+				direction: "vertical",
+				size: 3,
+				children: [
+					{
+						tabs: [
+							{ type: "editor", key: "a", params: { name: "A" } },
+							{ type: "editor", key: "b", params: { name: "B" } },
+						],
+						active: "editor:b",
+						size: 3,
+					},
+					{ tabs: [{ type: "properties" }], size: 1 },
+				],
+			},
+		],
+	},
+};

package/src/mdi/theme.ts

@@ -1,22 +1,22 @@
-import type { DockviewTheme } from "dockview-react";
-
-/**
- * Both themes share the `ObMdi-theme` class, whose variables resolve to
- * Designsystemet tokens and therefore follow `data-color-scheme` on their own.
- * `colorScheme` only tells dockview which of its own defaults to use.
- */
-export const mdiThemeLight: DockviewTheme = {
-	name: "ob-light",
-	className: "ObMdi-theme",
-	colorScheme: "light",
-	gap: 0,
-	dndOverlayMounting: "absolute",
-	dndPanelOverlay: "group",
-	dndTabIndicator: "line",
-};
-
-export const mdiThemeDark: DockviewTheme = {
-	...mdiThemeLight,
-	name: "ob-dark",
-	colorScheme: "dark",
-};
+import type { DockviewTheme } from "dockview-react";
+
+/**
+ * Both themes share the `ObMdi-theme` class, whose variables resolve to
+ * Designsystemet tokens and therefore follow `data-color-scheme` on their own.
+ * `colorScheme` only tells dockview which of its own defaults to use.
+ */
+export const mdiThemeLight: DockviewTheme = {
+	name: "ob-light",
+	className: "ObMdi-theme",
+	colorScheme: "light",
+	gap: 0,
+	dndOverlayMounting: "absolute",
+	dndPanelOverlay: "group",
+	dndTabIndicator: "line",
+};
+
+export const mdiThemeDark: DockviewTheme = {
+	...mdiThemeLight,
+	name: "ob-dark",
+	colorScheme: "dark",
+};