@mittwald/flow-remote-vue-components 0.0.0-stage → 1.5.0-next.35

package/dist/js/remote-vue-components/src/components/LoadingIndicator.mjs

@@ -0,0 +1,34 @@
+import { useRemoteConnection } from "../composables/remoteContext.mjs";
+import { composition } from "../lib/composition.mjs";
+import { defineComponent, onBeforeUnmount, watch } from "vue";
+//#region src/components/LoadingIndicator.ts
+/**
+* Tells the host the extension is still loading, so mStudio shows its own
+* loading state instead of an empty page.
+*
+* The React package calls this `LoadingFallbackTrigger` and re-exports it as
+* `LoadingIndicator` from `@mittwald/mstudio-ext-react-components`.
+*/
+var LoadingIndicator = defineComponent({
+	name: "LoadingIndicator",
+	props: { show: {
+		type: Boolean,
+		default: true
+	} },
+	setup(props) {
+		const connection = useRemoteConnection();
+		watch([connection, () => props.show], ([currentConnection, show]) => currentConnection?.imports.setIsLoading(show), { immediate: true });
+		onBeforeUnmount(() => connection.value?.imports.setIsLoading(false));
+		return () => void 0;
+	}
+});
+/**
+* The name the React package publishes it under. Exported as well so a port
+* does not have to rename an import that means the same thing.
+*/
+var LoadingFallbackTrigger = LoadingIndicator;
+composition(LoadingIndicator);
+//#endregion
+export { LoadingFallbackTrigger, LoadingIndicator, LoadingIndicator as default };
+
+//# sourceMappingURL=LoadingIndicator.mjs.map

package/dist/js/remote-vue-components/src/components/LoadingIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.mjs","names":[],"sources":["../../../../../src/components/LoadingIndicator.ts"],"sourcesContent":["import { useRemoteConnection } from \"@/composables/remoteContext\";\nimport { defineComponent, onBeforeUnmount, watch } from \"vue\";\nimport { composition } from \"@/lib/composition\";\n\n/**\n * Tells the host the extension is still loading, so mStudio shows its own\n * loading state instead of an empty page.\n *\n * The React package calls this `LoadingFallbackTrigger` and re-exports it as\n * `LoadingIndicator` from `@mittwald/mstudio-ext-react-components`.\n */\nexport const LoadingIndicator = defineComponent({\n  name: \"LoadingIndicator\",\n\n  props: {\n    show: { type: Boolean, default: true },\n  },\n\n  setup(props) {\n    const connection = useRemoteConnection();\n\n    watch(\n      [connection, () => props.show],\n      ([currentConnection, show]) =>\n        currentConnection?.imports.setIsLoading(show),\n      { immediate: true },\n    );\n\n    /*\n     * Taken back on unmount: the host has no way of telling a finished load\n     * from an extension that navigated away, so an indicator that disappears\n     * without saying so leaves mStudio loading forever.\n     */\n    onBeforeUnmount(() => connection.value?.imports.setIsLoading(false));\n\n    return () => undefined;\n  },\n});\n\n/**\n * The name the React package publishes it under. Exported as well so a port\n * does not have to rename an import that means the same thing.\n */\nexport const LoadingFallbackTrigger = LoadingIndicator;\n\ncomposition(LoadingIndicator);\n\nexport default LoadingIndicator;\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CAEN,OAAO,EACL,MAAM;EAAE,MAAM;EAAS,SAAS;CAAK,EACvC;CAEA,MAAM,OAAO;EACX,MAAM,aAAa,oBAAoB;EAEvC,MACE,CAAC,kBAAkB,MAAM,IAAI,IAC5B,CAAC,mBAAmB,UACnB,mBAAmB,QAAQ,aAAa,IAAI,GAC9C,EAAE,WAAW,KAAK,CACpB;EAOA,sBAAsB,WAAW,OAAO,QAAQ,aAAa,KAAK,CAAC;EAEnE,aAAa,KAAA;CACf;AACF,CAAC;;;;;AAMD,IAAa,yBAAyB;AAEtC,YAAY,gBAAgB"}

package/dist/js/remote-vue-components/src/components/NotificationProvider.mjs

@@ -0,0 +1,93 @@
+import { composition } from "../lib/composition.mjs";
+import { callHandlers } from "../lib/handlers.mjs";
+import { readBooleanProp } from "../lib/propKeys.mjs";
+import { Fragment, cloneVNode, defineComponent, h, inject, provide, shallowReactive } from "vue";
+//#region src/components/NotificationProvider.ts
+var autoCloseAfter = 1e4;
+/**
+* Holds the notifications an app has raised.
+*
+* Flow's controller is a MobX model; this one is a reactive array. The contract
+* an extension sees is the same: `add()` a notification, get an id back,
+* `remove()` it — and `autoClose` pauses while the pointer or the focus rests
+* on it, which is why the timer is tracked per entry rather than by the host.
+*/
+var NotificationController = class {
+	entries = shallowReactive([]);
+	nextId = 0;
+	get notifications() {
+		return this.entries;
+	}
+	add(notification) {
+		const id = this.nextId++;
+		const entry = {
+			id,
+			element: notification
+		};
+		this.entries.push(entry);
+		if (readBooleanProp(notification.props, "autoClose")) this.startAutoClose(entry, autoCloseAfter);
+		return id;
+	}
+	remove(id) {
+		const index = this.entries.findIndex((entry) => entry.id === id);
+		if (index === -1) return;
+		clearTimeout(this.entries[index]?.autoCloseTimeout);
+		this.entries.splice(index, 1);
+	}
+	pauseAutoClose(entry) {
+		if (entry.autoCloseTimeout === void 0) return;
+		clearTimeout(entry.autoCloseTimeout);
+		entry.autoCloseTimeout = void 0;
+		entry.autoCloseRemaining = Math.max(0, (entry.autoCloseRemaining ?? autoCloseAfter) - (Date.now() - (entry.autoCloseStartedAt ?? Date.now())));
+	}
+	resumeAutoClose(entry) {
+		if (!readBooleanProp(entry.element.props, "autoClose") || entry.autoCloseTimeout) return;
+		this.startAutoClose(entry, entry.autoCloseRemaining ?? autoCloseAfter);
+	}
+	startAutoClose(entry, delay) {
+		entry.autoCloseStartedAt = Date.now();
+		entry.autoCloseRemaining = delay;
+		entry.autoCloseTimeout = setTimeout(() => this.remove(entry.id), delay);
+	}
+};
+var notificationControllerKey = Symbol("flowNotificationController");
+var useNotificationController = () => {
+	const controller = inject(notificationControllerKey, void 0);
+	if (!controller) throw new Error("useNotificationController() must be called inside a <NotificationProvider />");
+	return controller;
+};
+/**
+* Renders the app's notifications and hands its controller to everything below.
+*
+* The container is not a separate element: the notifications are remote
+* `Notification` components, and the host's own container is what positions
+* them.
+*/
+var NotificationProvider = defineComponent({
+	name: "NotificationProvider",
+	setup(_props, { slots }) {
+		const controller = new NotificationController();
+		provide(notificationControllerKey, controller);
+		const renderEntry = (entry) => {
+			const notification = cloneVNode(entry.element, { key: entry.id });
+			notification.props = {
+				...notification.props,
+				onMouseEnter: () => controller.pauseAutoClose(entry),
+				onMouseLeave: () => controller.resumeAutoClose(entry),
+				onFocus: () => controller.pauseAutoClose(entry),
+				onBlur: () => controller.resumeAutoClose(entry),
+				onClose: () => {
+					controller.remove(entry.id);
+					callHandlers(entry.element.props?.onClose);
+				}
+			};
+			return notification;
+		};
+		return () => [h(Fragment, controller.notifications.map(renderEntry)), slots.default?.()];
+	}
+});
+composition(NotificationProvider);
+//#endregion
+export { NotificationController, NotificationProvider, NotificationProvider as default, useNotificationController };
+
+//# sourceMappingURL=NotificationProvider.mjs.map

package/dist/js/remote-vue-components/src/components/NotificationProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationProvider.mjs","names":[],"sources":["../../../../../src/components/NotificationProvider.ts"],"sourcesContent":["import { callHandlers } from \"@/lib/handlers\";\nimport { readBooleanProp } from \"@/lib/propKeys\";\nimport {\n  cloneVNode,\n  defineComponent,\n  Fragment,\n  h,\n  inject,\n  provide,\n  shallowReactive,\n  type InjectionKey,\n  type VNode,\n} from \"vue\";\nimport { composition } from \"@/lib/composition\";\n\ninterface NotificationEntry {\n  id: number;\n  element: VNode;\n  autoCloseTimeout?: ReturnType<typeof setTimeout>;\n  autoCloseRemaining?: number;\n  autoCloseStartedAt?: number;\n}\n\nconst autoCloseAfter = 10_000;\n\n/**\n * Holds the notifications an app has raised.\n *\n * Flow's controller is a MobX model; this one is a reactive array. The contract\n * an extension sees is the same: `add()` a notification, get an id back,\n * `remove()` it — and `autoClose` pauses while the pointer or the focus rests\n * on it, which is why the timer is tracked per entry rather than by the host.\n */\nexport class NotificationController {\n  private readonly entries = shallowReactive<NotificationEntry[]>([]);\n  private nextId = 0;\n\n  public get notifications(): NotificationEntry[] {\n    return this.entries;\n  }\n\n  public add(notification: VNode): number {\n    const id = this.nextId++;\n    const entry: NotificationEntry = { id, element: notification };\n    this.entries.push(entry);\n\n    if (readBooleanProp(notification.props, \"autoClose\")) {\n      this.startAutoClose(entry, autoCloseAfter);\n    }\n\n    return id;\n  }\n\n  public remove(id: number): void {\n    const index = this.entries.findIndex((entry) => entry.id === id);\n    if (index === -1) {\n      return;\n    }\n    clearTimeout(this.entries[index]?.autoCloseTimeout);\n    this.entries.splice(index, 1);\n  }\n\n  public pauseAutoClose(entry: NotificationEntry): void {\n    if (entry.autoCloseTimeout === undefined) {\n      return;\n    }\n    clearTimeout(entry.autoCloseTimeout);\n    entry.autoCloseTimeout = undefined;\n    entry.autoCloseRemaining = Math.max(\n      0,\n      (entry.autoCloseRemaining ?? autoCloseAfter) -\n        (Date.now() - (entry.autoCloseStartedAt ?? Date.now())),\n    );\n  }\n\n  public resumeAutoClose(entry: NotificationEntry): void {\n    if (\n      !readBooleanProp(entry.element.props, \"autoClose\") ||\n      entry.autoCloseTimeout\n    ) {\n      return;\n    }\n    this.startAutoClose(entry, entry.autoCloseRemaining ?? autoCloseAfter);\n  }\n\n  private startAutoClose(entry: NotificationEntry, delay: number): void {\n    entry.autoCloseStartedAt = Date.now();\n    entry.autoCloseRemaining = delay;\n    entry.autoCloseTimeout = setTimeout(() => this.remove(entry.id), delay);\n  }\n}\n\nconst notificationControllerKey: InjectionKey<NotificationController> = Symbol(\n  \"flowNotificationController\",\n);\n\nexport const useNotificationController = (): NotificationController => {\n  const controller = inject(notificationControllerKey, undefined);\n\n  if (!controller) {\n    throw new Error(\n      \"useNotificationController() must be called inside a <NotificationProvider />\",\n    );\n  }\n\n  return controller;\n};\n\n/**\n * Renders the app's notifications and hands its controller to everything below.\n *\n * The container is not a separate element: the notifications are remote\n * `Notification` components, and the host's own container is what positions\n * them.\n */\nexport const NotificationProvider = defineComponent({\n  name: \"NotificationProvider\",\n\n  setup(_props, { slots }) {\n    const controller = new NotificationController();\n    provide(notificationControllerKey, controller);\n\n    /*\n     * Replaced, not merged, like React's `cloneElement`: `cloneVNode` would\n     * chain the app's `onClose` with this one, which calls it as well.\n     */\n    const renderEntry = (entry: NotificationEntry): VNode => {\n      const notification = cloneVNode(entry.element, { key: entry.id });\n      notification.props = {\n        ...notification.props,\n        onMouseEnter: () => controller.pauseAutoClose(entry),\n        onMouseLeave: () => controller.resumeAutoClose(entry),\n        onFocus: () => controller.pauseAutoClose(entry),\n        onBlur: () => controller.resumeAutoClose(entry),\n        onClose: () => {\n          controller.remove(entry.id);\n          callHandlers(entry.element.props?.onClose);\n        },\n      };\n      return notification;\n    };\n\n    return () => [\n      h(Fragment, controller.notifications.map(renderEntry)),\n      slots.default?.(),\n    ];\n  },\n});\n\ncomposition(NotificationProvider);\n\nexport default NotificationProvider;\n"],"mappings":";;;;;AAuBA,IAAM,iBAAiB;;;;;;;;;AAUvB,IAAa,yBAAb,MAAoC;CAClC,UAA2B,gBAAqC,CAAC,CAAC;CAClE,SAAiB;CAEjB,IAAW,gBAAqC;EAC9C,OAAO,KAAK;CACd;CAEA,IAAW,cAA6B;EACtC,MAAM,KAAK,KAAK;EAChB,MAAM,QAA2B;GAAE;GAAI,SAAS;EAAa;EAC7D,KAAK,QAAQ,KAAK,KAAK;EAEvB,IAAI,gBAAgB,aAAa,OAAO,WAAW,GACjD,KAAK,eAAe,OAAO,cAAc;EAG3C,OAAO;CACT;CAEA,OAAc,IAAkB;EAC9B,MAAM,QAAQ,KAAK,QAAQ,WAAW,UAAU,MAAM,OAAO,EAAE;EAC/D,IAAI,UAAU,IACZ;EAEF,aAAa,KAAK,QAAQ,MAAM,EAAE,gBAAgB;EAClD,KAAK,QAAQ,OAAO,OAAO,CAAC;CAC9B;CAEA,eAAsB,OAAgC;EACpD,IAAI,MAAM,qBAAqB,KAAA,GAC7B;EAEF,aAAa,MAAM,gBAAgB;EACnC,MAAM,mBAAmB,KAAA;EACzB,MAAM,qBAAqB,KAAK,IAC9B,IACC,MAAM,sBAAsB,mBAC1B,KAAK,IAAI,KAAK,MAAM,sBAAsB,KAAK,IAAI,GACxD;CACF;CAEA,gBAAuB,OAAgC;EACrD,IACE,CAAC,gBAAgB,MAAM,QAAQ,OAAO,WAAW,KACjD,MAAM,kBAEN;EAEF,KAAK,eAAe,OAAO,MAAM,sBAAsB,cAAc;CACvE;CAEA,eAAuB,OAA0B,OAAqB;EACpE,MAAM,qBAAqB,KAAK,IAAI;EACpC,MAAM,qBAAqB;EAC3B,MAAM,mBAAmB,iBAAiB,KAAK,OAAO,MAAM,EAAE,GAAG,KAAK;CACxE;AACF;AAEA,IAAM,4BAAkE,OACtE,4BACF;AAEA,IAAa,kCAA0D;CACrE,MAAM,aAAa,OAAO,2BAA2B,KAAA,CAAS;CAE9D,IAAI,CAAC,YACH,MAAM,IAAI,MACR,8EACF;CAGF,OAAO;AACT;;;;;;;;AASA,IAAa,uBAAuB,gBAAgB;CAClD,MAAM;CAEN,MAAM,QAAQ,EAAE,SAAS;EACvB,MAAM,aAAa,IAAI,uBAAuB;EAC9C,QAAQ,2BAA2B,UAAU;EAM7C,MAAM,eAAe,UAAoC;GACvD,MAAM,eAAe,WAAW,MAAM,SAAS,EAAE,KAAK,MAAM,GAAG,CAAC;GAChE,aAAa,QAAQ;IACnB,GAAG,aAAa;IAChB,oBAAoB,WAAW,eAAe,KAAK;IACnD,oBAAoB,WAAW,gBAAgB,KAAK;IACpD,eAAe,WAAW,eAAe,KAAK;IAC9C,cAAc,WAAW,gBAAgB,KAAK;IAC9C,eAAe;KACb,WAAW,OAAO,MAAM,EAAE;KAC1B,aAAa,MAAM,QAAQ,OAAO,OAAO;IAC3C;GACF;GACA,OAAO;EACT;EAEA,aAAa,CACX,EAAE,UAAU,WAAW,cAAc,IAAI,WAAW,CAAC,GACrD,MAAM,UAAU,CAClB;CACF;AACF,CAAC;AAED,YAAY,oBAAoB"}

package/dist/js/remote-vue-components/src/components/SettingsProvider.mjs

@@ -0,0 +1,144 @@
+import { composition } from "../lib/composition.mjs";
+import { Fragment, defineComponent, h, inject, provide, shallowRef, watch } from "vue";
+//#region src/components/SettingsProvider.ts
+/** `LocalStorageSettingsBackend` in packages/components. */
+var LocalStorageSettingsBackend = class {
+	storageKey;
+	constructor(storageKey) {
+		this.storageKey = storageKey;
+	}
+	async load() {
+		if (typeof localStorage === "undefined") return {};
+		const json = localStorage.getItem(this.storageKey);
+		return json === null ? {} : JSON.parse(json);
+	}
+	async store(settings) {
+		if (typeof localStorage !== "undefined") localStorage.setItem(this.storageKey, JSON.stringify(settings));
+	}
+};
+/** Parses a stored value; one that does not parse counts as not stored. */
+var parse = (json) => {
+	try {
+		return JSON.parse(json);
+	} catch {
+		return;
+	}
+};
+/**
+* The settings of one provider, with its parent's behind it — the Vue
+* counterpart of `SettingsStore` in packages/components, with the same
+* middleware and the same defaults: a value is read here, then from the parent;
+* it is written here only.
+*/
+var SettingsStore = class {
+	options;
+	settings = /* @__PURE__ */ new Map();
+	constructor(json, options = {}) {
+		this.options = options;
+		for (const [component, values] of Object.entries(json)) {
+			const componentSettings = /* @__PURE__ */ new Map();
+			for (const [key, value] of Object.entries(values)) {
+				const parsed = typeof value === "string" ? parse(value) : value;
+				if (parsed !== void 0) componentSettings.set(key, parsed);
+			}
+			this.settings.set(component, componentSettings);
+		}
+	}
+	get(component, key) {
+		const current = this.settings.get(component)?.get(key);
+		return (this.options.middleware?.get ?? ((_, __, settings, getParent) => settings ?? getParent()))(component, key, current, () => this.options.parentStore?.get(component, key));
+	}
+	set(component, key, value) {
+		const processed = (this.options.middleware?.set ?? ((_, __, settings) => settings))(component, key, value, (parentValue) => this.options.parentStore?.set(component, key, parentValue));
+		if (processed !== void 0) {
+			const componentSettings = this.settings.get(component) ?? /* @__PURE__ */ new Map();
+			componentSettings.set(key, processed);
+			this.settings.set(component, componentSettings);
+			this.options.onChange?.();
+		}
+	}
+	clear(component, key) {
+		if (this.settings.get(component)?.delete(key)) this.options.onChange?.();
+		this.options.parentStore?.clear(component, key);
+	}
+	get asJson() {
+		return Object.fromEntries([...this.settings].map(([component, values]) => [component, Object.fromEntries([...values].map(([key, value]) => [key, JSON.stringify(value)]))]));
+	}
+};
+var settingsKey = Symbol("flowSettings");
+/**
+* The store of the surrounding `SettingsProvider`, if there is one. Read in
+* `setup()`: a provider renders its children only once a store is loaded, and
+* again from scratch when its `id` changes.
+*/
+var injectSettings = () => inject(settingsKey, void 0)?.value;
+/**
+* Remembers component settings — the `List`'s view settings — in the shape
+* Flow's React `SettingsProvider` does, with the same props:
+* `type="localStorage"` plus a `storageKey`, or `type="custom"` plus a `store`
+* that loads and stores asynchronously.
+*
+* Its children render once the settings are loaded, the way React's suspend.
+* The backend is read per `id`, as in React: change the `id` to switch it.
+*/
+var SettingsProvider = defineComponent({
+	name: "SettingsProvider",
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		/** The `localStorage` key, for `type="localStorage"`. */
+		storageKey: {
+			type: String,
+			default: void 0
+		},
+		/** The backend, for `type="custom"`. */
+		store: {
+			type: Object,
+			default: void 0
+		},
+		/** Identifies the settings; a new one loads them again. */
+		id: {
+			type: String,
+			default: "static"
+		},
+		middleware: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const parentStore = injectSettings();
+		const store = shallowRef();
+		provide(settingsKey, store);
+		const backendFor = () => {
+			if (props.type === "custom" && props.store) return props.store;
+			if (props.type === "localStorage" && props.storageKey !== void 0) return new LocalStorageSettingsBackend(props.storageKey);
+			throw new Error(`Unsupported setting backend: ${props.type} needs ${props.type === "custom" ? "a store" : "a storageKey"}`);
+		};
+		let generation = 0;
+		watch(() => props.id, async () => {
+			const loading = ++generation;
+			store.value = void 0;
+			const backend = backendFor();
+			const json = await backend.load();
+			if (loading !== generation) return;
+			let storing = Promise.resolve();
+			const loaded = new SettingsStore(json, {
+				middleware: props.middleware,
+				parentStore,
+				onChange: () => {
+					storing = storing.then(() => backend.store(loaded.asJson));
+				}
+			});
+			store.value = loaded;
+		}, { immediate: true });
+		return () => store.value ? h(Fragment, { key: props.id }, slots.default?.()) : void 0;
+	}
+});
+composition(SettingsProvider);
+//#endregion
+export { SettingsProvider, SettingsProvider as default, SettingsStore, injectSettings };
+
+//# sourceMappingURL=SettingsProvider.mjs.map

package/dist/js/remote-vue-components/src/components/SettingsProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsProvider.mjs","names":[],"sources":["../../../../../src/components/SettingsProvider.ts"],"sourcesContent":["import {\n  defineComponent,\n  Fragment,\n  h,\n  inject,\n  provide,\n  shallowRef,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\nimport { composition } from \"@/lib/composition\";\n\n/**\n * What a backend loads and stores: per component, per key, the value as a JSON\n * string — `{\"List\":{\"crew.sorting.autosave\":\"{\\\"property\\\":\\\"name\\\",…}\"}}`.\n * Flow's React `SettingsProvider` writes the same shape, so the two bindings\n * read each other's settings.\n */\nexport type SettingsJson = Record<string, Record<string, string>>;\n\nexport interface SettingsBackend {\n  load(): Promise<SettingsJson>;\n  store(settings: SettingsJson): Promise<void>;\n}\n\nexport type GetSettingsMiddleware = (\n  component: string,\n  key: string,\n  settings: unknown,\n  getParent: () => unknown,\n) => unknown;\n\nexport type SetSettingsMiddleware = (\n  component: string,\n  key: string,\n  settings: unknown,\n  setParent: (settings: unknown) => void,\n) => unknown;\n\nexport interface SettingsMiddleware {\n  get?: GetSettingsMiddleware;\n  set?: SetSettingsMiddleware;\n}\n\n/** `LocalStorageSettingsBackend` in packages/components. */\nclass LocalStorageSettingsBackend implements SettingsBackend {\n  public constructor(private readonly storageKey: string) {}\n\n  public async load(): Promise<SettingsJson> {\n    if (typeof localStorage === \"undefined\") {\n      return {};\n    }\n    const json = localStorage.getItem(this.storageKey);\n    return json === null ? {} : (JSON.parse(json) as SettingsJson);\n  }\n\n  public async store(settings: SettingsJson): Promise<void> {\n    if (typeof localStorage !== \"undefined\") {\n      localStorage.setItem(this.storageKey, JSON.stringify(settings));\n    }\n  }\n}\n\n/** Parses a stored value; one that does not parse counts as not stored. */\nconst parse = (json: string): unknown => {\n  try {\n    return JSON.parse(json);\n  } catch {\n    return undefined;\n  }\n};\n\n/**\n * The settings of one provider, with its parent's behind it — the Vue\n * counterpart of `SettingsStore` in packages/components, with the same\n * middleware and the same defaults: a value is read here, then from the parent;\n * it is written here only.\n */\nexport class SettingsStore {\n  private readonly settings = new Map<string, Map<string, unknown>>();\n\n  public constructor(\n    json: SettingsJson,\n    private readonly options: {\n      middleware?: SettingsMiddleware;\n      parentStore?: SettingsStore;\n      onChange?: () => void;\n    } = {},\n  ) {\n    for (const [component, values] of Object.entries(json)) {\n      const componentSettings = new Map<string, unknown>();\n      for (const [key, value] of Object.entries(values)) {\n        const parsed = typeof value === \"string\" ? parse(value) : value;\n        if (parsed !== undefined) {\n          componentSettings.set(key, parsed);\n        }\n      }\n      this.settings.set(component, componentSettings);\n    }\n  }\n\n  public get(component: string, key: string): unknown {\n    const current = this.settings.get(component)?.get(key);\n    const middleware =\n      this.options.middleware?.get ??\n      ((_, __, settings, getParent) => settings ?? getParent());\n\n    return middleware(component, key, current, () =>\n      this.options.parentStore?.get(component, key),\n    );\n  }\n\n  public set(component: string, key: string, value: unknown): void {\n    const middleware =\n      this.options.middleware?.set ?? ((_, __, settings) => settings);\n\n    const processed = middleware(component, key, value, (parentValue) =>\n      this.options.parentStore?.set(component, key, parentValue),\n    );\n\n    if (processed !== undefined) {\n      const componentSettings =\n        this.settings.get(component) ?? new Map<string, unknown>();\n      componentSettings.set(key, processed);\n      this.settings.set(component, componentSettings);\n      this.options.onChange?.();\n    }\n  }\n\n  public clear(component: string, key: string): void {\n    if (this.settings.get(component)?.delete(key)) {\n      this.options.onChange?.();\n    }\n    this.options.parentStore?.clear(component, key);\n  }\n\n  public get asJson(): SettingsJson {\n    return Object.fromEntries(\n      [...this.settings].map(([component, values]) => [\n        component,\n        Object.fromEntries(\n          [...values].map(([key, value]) => [key, JSON.stringify(value)]),\n        ),\n      ]),\n    );\n  }\n}\n\nconst settingsKey: InjectionKey<ShallowRef<SettingsStore | undefined>> =\n  Symbol(\"flowSettings\");\n\n/**\n * The store of the surrounding `SettingsProvider`, if there is one. Read in\n * `setup()`: a provider renders its children only once a store is loaded, and\n * again from scratch when its `id` changes.\n */\nexport const injectSettings = (): SettingsStore | undefined =>\n  inject(settingsKey, undefined)?.value;\n\n/**\n * Remembers component settings — the `List`'s view settings — in the shape\n * Flow's React `SettingsProvider` does, with the same props:\n * `type=\"localStorage\"` plus a `storageKey`, or `type=\"custom\"` plus a `store`\n * that loads and stores asynchronously.\n *\n * Its children render once the settings are loaded, the way React's suspend.\n * The backend is read per `id`, as in React: change the `id` to switch it.\n */\nexport const SettingsProvider = defineComponent({\n  name: \"SettingsProvider\",\n\n  props: {\n    type: {\n      type: String as PropType<\"localStorage\" | \"custom\">,\n      required: true,\n    },\n    /** The `localStorage` key, for `type=\"localStorage\"`. */\n    storageKey: { type: String, default: undefined },\n    /** The backend, for `type=\"custom\"`. */\n    store: { type: Object as PropType<SettingsBackend>, default: undefined },\n    /** Identifies the settings; a new one loads them again. */\n    id: { type: String, default: \"static\" },\n    middleware: {\n      type: Object as PropType<SettingsMiddleware>,\n      default: undefined,\n    },\n  },\n\n  setup(props, { slots }) {\n    const parentStore = injectSettings();\n    const store = shallowRef<SettingsStore>();\n    provide(settingsKey, store);\n\n    const backendFor = (): SettingsBackend => {\n      if (props.type === \"custom\" && props.store) {\n        return props.store;\n      }\n      if (props.type === \"localStorage\" && props.storageKey !== undefined) {\n        return new LocalStorageSettingsBackend(props.storageKey);\n      }\n      throw new Error(\n        `Unsupported setting backend: ${props.type} needs ${props.type === \"custom\" ? \"a store\" : \"a storageKey\"}`,\n      );\n    };\n\n    let generation = 0;\n\n    watch(\n      () => props.id,\n      async () => {\n        const loading = ++generation;\n        store.value = undefined;\n\n        const backend = backendFor();\n        const json = await backend.load();\n        if (loading !== generation) {\n          return;\n        }\n\n        /* Written in order, one at a time, like React's `storingPromise`. */\n        let storing = Promise.resolve();\n        const loaded: SettingsStore = new SettingsStore(json, {\n          middleware: props.middleware,\n          parentStore,\n          onChange: () => {\n            storing = storing.then(() => backend.store(loaded.asJson));\n          },\n        });\n        store.value = loaded;\n      },\n      { immediate: true },\n    );\n\n    return () =>\n      store.value\n        ? h(Fragment, { key: props.id }, slots.default?.())\n        : undefined;\n  },\n});\n\ncomposition(SettingsProvider);\n\nexport default SettingsProvider;\n"],"mappings":"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"}

package/dist/js/remote-vue-components/src/components/Wrap.mjs

@@ -0,0 +1,27 @@
+import { composition } from "../lib/composition.mjs";
+import { defaultSlotOf, flattenChildren } from "../overlays/childProps.mjs";
+import { defineComponent } from "vue";
+//#region src/components/Wrap.ts
+/**
+* Renders its child when `if` holds, and that child's own children otherwise —
+* a wrapper you can switch off without branching the tree around it.
+*/
+var Wrap = defineComponent({
+	name: "Wrap",
+	props: { if: {
+		type: null,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => {
+			const [child] = flattenChildren(slots.default?.());
+			if (props.if || !child) return child;
+			return flattenChildren(defaultSlotOf(child.children)?.());
+		};
+	}
+});
+composition(Wrap);
+//#endregion
+export { Wrap, Wrap as default };
+
+//# sourceMappingURL=Wrap.mjs.map

package/dist/js/remote-vue-components/src/components/Wrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wrap.mjs","names":[],"sources":["../../../../../src/components/Wrap.ts"],"sourcesContent":["import { defaultSlotOf, flattenChildren } from \"@/overlays/childProps\";\nimport { defineComponent } from \"vue\";\nimport { composition } from \"@/lib/composition\";\n\n/**\n * Renders its child when `if` holds, and that child's own children otherwise —\n * a wrapper you can switch off without branching the tree around it.\n */\nexport const Wrap = defineComponent({\n  name: \"Wrap\",\n\n  props: {\n    if: { type: null, required: true },\n  },\n\n  setup(props, { slots }) {\n    return () => {\n      const [child] = flattenChildren(slots.default?.());\n\n      if (props.if || !child) {\n        return child;\n      }\n\n      /* Unwrapping means rendering what the child was given, in any form. */\n      return flattenChildren(defaultSlotOf(child.children)?.());\n    };\n  },\n});\n\ncomposition(Wrap);\n\nexport default Wrap;\n"],"mappings":";;;;;;;;AAQA,IAAa,OAAO,gBAAgB;CAClC,MAAM;CAEN,OAAO,EACL,IAAI;EAAE,MAAM;EAAM,UAAU;CAAK,EACnC;CAEA,MAAM,OAAO,EAAE,SAAS;EACtB,aAAa;GACX,MAAM,CAAC,SAAS,gBAAgB,MAAM,UAAU,CAAC;GAEjD,IAAI,MAAM,MAAM,CAAC,OACf,OAAO;GAIT,OAAO,gBAAgB,cAAc,MAAM,QAAQ,CAAC,GAAG,CAAC;EAC1D;CACF;AACF,CAAC;AAED,YAAY,IAAI"}

package/dist/js/remote-vue-components/src/composables/remoteContext.mjs

@@ -0,0 +1,29 @@
+import { inject, provide } from "vue";
+//#region src/composables/remoteContext.ts
+var remoteContextKey = Symbol("flowRemoteContext");
+var provideRemoteContext = (context) => provide(remoteContextKey, context);
+/**
+* The connection to the host, for the imperative half of the bridge (host
+* config, navigation, notifications). `undefined` until the host has answered.
+*/
+var useRemoteConnection = () => {
+	const context = inject(remoteContextKey, void 0);
+	if (!context) throw new Error("useRemoteConnection() must be called inside a <RemoteRoot />");
+	return context.connection;
+};
+/**
+* The language the host renders in.
+*
+* Flow's React `useLanguage()` reads react-aria's locale, which a local
+* `IntlProvider` sets. A Vue app renders nothing locally, so the only locale
+* that exists is the host's — which is why this package has no `IntlProvider`.
+*/
+var useLanguage = () => {
+	const context = inject(remoteContextKey, void 0);
+	if (!context) throw new Error("useLanguage() must be called inside a <RemoteRoot />");
+	return context.language;
+};
+//#endregion
+export { provideRemoteContext, remoteContextKey, useLanguage, useRemoteConnection };
+
+//# sourceMappingURL=remoteContext.mjs.map

package/dist/js/remote-vue-components/src/composables/remoteContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"remoteContext.mjs","names":[],"sources":["../../../../../src/composables/remoteContext.ts"],"sourcesContent":["import type { RemoteToHostConnection } from \"@mittwald/flow-remote-core\";\nimport { inject, provide, type InjectionKey, type Ref } from \"vue\";\n\nexport interface RemoteContext {\n  connection: Ref<RemoteToHostConnection | undefined>;\n  /** The backoffice's language, once the host has reported its config. */\n  language: Ref<string | undefined>;\n  reportComponentUsage: (component: string) => void;\n}\n\nexport const remoteContextKey: InjectionKey<RemoteContext> =\n  Symbol(\"flowRemoteContext\");\n\nexport const provideRemoteContext = (context: RemoteContext): void =>\n  provide(remoteContextKey, context);\n\n/**\n * The connection to the host, for the imperative half of the bridge (host\n * config, navigation, notifications). `undefined` until the host has answered.\n */\nexport const useRemoteConnection = (): Ref<\n  RemoteToHostConnection | undefined\n> => {\n  const context = inject(remoteContextKey, undefined);\n\n  if (!context) {\n    throw new Error(\n      \"useRemoteConnection() must be called inside a <RemoteRoot />\",\n    );\n  }\n\n  return context.connection;\n};\n\n/**\n * The language the host renders in.\n *\n * Flow's React `useLanguage()` reads react-aria's locale, which a local\n * `IntlProvider` sets. A Vue app renders nothing locally, so the only locale\n * that exists is the host's — which is why this package has no `IntlProvider`.\n */\nexport const useLanguage = (): Ref<string | undefined> => {\n  const context = inject(remoteContextKey, undefined);\n\n  if (!context) {\n    throw new Error(\"useLanguage() must be called inside a <RemoteRoot />\");\n  }\n\n  return context.language;\n};\n"],"mappings":";;AAUA,IAAa,mBACX,OAAO,mBAAmB;AAE5B,IAAa,wBAAwB,YACnC,QAAQ,kBAAkB,OAAO;;;;;AAMnC,IAAa,4BAER;CACH,MAAM,UAAU,OAAO,kBAAkB,KAAA,CAAS;CAElD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,8DACF;CAGF,OAAO,QAAQ;AACjB;;;;;;;;AASA,IAAa,oBAA6C;CACxD,MAAM,UAAU,OAAO,kBAAkB,KAAA,CAAS;CAElD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,sDAAsD;CAGxE,OAAO,QAAQ;AACjB"}

package/dist/js/remote-vue-components/src/composables/useComponentUsage.mjs

@@ -0,0 +1,25 @@
+import { remoteContextKey } from "./remoteContext.mjs";
+import { isRenderedByComposition } from "../lib/composition.mjs";
+import { inject } from "vue";
+//#region src/composables/useComponentUsage.ts
+/**
+* Reports that a component was rendered, so the host can tell which parts of
+* Flow an extension actually uses.
+*
+* Only what the extension wrote counts. An element one of this package's
+* compositions renders for itself — the `OverlayContent` of a `Modal`, the
+* `ItemsGridList` of a `List` — reports nothing, and the composition reports
+* its own name instead. That is what Flow's React binding reports: a
+* `flowComponent` under its name, the views it composes not at all.
+*/
+var useComponentUsage = (component) => {
+	const context = inject(remoteContextKey, void 0);
+	const isInternal = isRenderedByComposition();
+	return () => {
+		if (!isInternal) context?.reportComponentUsage(component);
+	};
+};
+//#endregion
+export { useComponentUsage };
+
+//# sourceMappingURL=useComponentUsage.mjs.map

package/dist/js/remote-vue-components/src/composables/useComponentUsage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentUsage.mjs","names":[],"sources":["../../../../../src/composables/useComponentUsage.ts"],"sourcesContent":["import { remoteContextKey } from \"@/composables/remoteContext\";\nimport { isRenderedByComposition } from \"@/lib/composition\";\nimport { inject } from \"vue\";\n\n/**\n * Reports that a component was rendered, so the host can tell which parts of\n * Flow an extension actually uses.\n *\n * Only what the extension wrote counts. An element one of this package's\n * compositions renders for itself — the `OverlayContent` of a `Modal`, the\n * `ItemsGridList` of a `List` — reports nothing, and the composition reports\n * its own name instead. That is what Flow's React binding reports: a\n * `flowComponent` under its name, the views it composes not at all.\n */\nexport const useComponentUsage = (component: string): (() => void) => {\n  const context = inject(remoteContextKey, undefined);\n  const isInternal = isRenderedByComposition();\n  return () => {\n    if (!isInternal) {\n      context?.reportComponentUsage(component);\n    }\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,qBAAqB,cAAoC;CACpE,MAAM,UAAU,OAAO,kBAAkB,KAAA,CAAS;CAClD,MAAM,aAAa,wBAAwB;CAC3C,aAAa;EACX,IAAI,CAAC,YACH,SAAS,qBAAqB,SAAS;CAE3C;AACF"}

package/dist/js/remote-vue-components/src/composables/useIsMounted.mjs

@@ -0,0 +1,12 @@
+import { onMounted, readonly, ref } from "vue";
+//#region src/composables/useIsMounted.ts
+/** Whether the component has mounted — the client-only guard. */
+var useIsMounted = () => {
+	const isMounted = ref(false);
+	onMounted(() => isMounted.value = true);
+	return readonly(isMounted);
+};
+//#endregion
+export { useIsMounted };
+
+//# sourceMappingURL=useIsMounted.mjs.map

package/dist/js/remote-vue-components/src/composables/useIsMounted.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.mjs","names":[],"sources":["../../../../../src/composables/useIsMounted.ts"],"sourcesContent":["import { onMounted, readonly, ref, type Ref } from \"vue\";\n\n/** Whether the component has mounted — the client-only guard. */\nexport const useIsMounted = (): Readonly<Ref<boolean>> => {\n  const isMounted = ref(false);\n  onMounted(() => (isMounted.value = true));\n  return readonly(isMounted);\n};\n"],"mappings":";;;AAGA,IAAa,qBAA6C;CACxD,MAAM,YAAY,IAAI,KAAK;CAC3B,gBAAiB,UAAU,QAAQ,IAAK;CACxC,OAAO,SAAS,SAAS;AAC3B"}

package/dist/js/remote-vue-components/src/composables/useOnChange.mjs

@@ -0,0 +1,14 @@
+import { watch } from "vue";
+//#region src/composables/useOnChange.ts
+/**
+* Runs `callback` when `source` changes — Flow's `useOnChange`, which exists
+* because an effect with a dependency array also runs on the first render.
+* Vue's `watch` is lazy by default, so this is a thin naming layer.
+*/
+var useOnChange = (source, callback) => {
+	watch(source, (value, previousValue) => callback(value, previousValue));
+};
+//#endregion
+export { useOnChange };
+
+//# sourceMappingURL=useOnChange.mjs.map

package/dist/js/remote-vue-components/src/composables/useOnChange.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnChange.mjs","names":[],"sources":["../../../../../src/composables/useOnChange.ts"],"sourcesContent":["import { watch, type WatchSource } from \"vue\";\n\n/**\n * Runs `callback` when `source` changes — Flow's `useOnChange`, which exists\n * because an effect with a dependency array also runs on the first render.\n * Vue's `watch` is lazy by default, so this is a thin naming layer.\n */\nexport const useOnChange = <T>(\n  source: WatchSource<T>,\n  callback: (value: T, previousValue: T) => void,\n): void => {\n  watch(source, (value, previousValue) => callback(value, previousValue));\n};\n"],"mappings":";;;;;;;AAOA,IAAa,eACX,QACA,aACS;CACT,MAAM,SAAS,OAAO,kBAAkB,SAAS,OAAO,aAAa,CAAC;AACxE"}

package/dist/js/remote-vue-components/src/composables/useWatchPathname.mjs

@@ -0,0 +1,29 @@
+import { onBeforeUnmount, onMounted } from "vue";
+//#region src/composables/useWatchPathname.ts
+/**
+* Reports the remote app's own pathname to the host, so the backoffice URL
+* follows the extension's navigation.
+*
+* Polled, like the React counterpart: no browser API fires on a `pushState` the
+* app performs itself.
+*/
+var useWatchPathname = (callback) => {
+	let storedHref = typeof location === "undefined" ? void 0 : location.href;
+	let checker;
+	onMounted(() => {
+		if (typeof location === "undefined") return;
+		checker = setInterval(() => {
+			const href = location.href;
+			if (href !== storedHref) {
+				const url = new URL(href);
+				callback(url.pathname + url.search);
+				storedHref = href;
+			}
+		}, 50);
+	});
+	onBeforeUnmount(() => clearInterval(checker));
+};
+//#endregion
+export { useWatchPathname };
+
+//# sourceMappingURL=useWatchPathname.mjs.map

package/dist/js/remote-vue-components/src/composables/useWatchPathname.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWatchPathname.mjs","names":[],"sources":["../../../../../src/composables/useWatchPathname.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted } from \"vue\";\n\n/**\n * Reports the remote app's own pathname to the host, so the backoffice URL\n * follows the extension's navigation.\n *\n * Polled, like the React counterpart: no browser API fires on a `pushState` the\n * app performs itself.\n */\nexport const useWatchPathname = (\n  callback: (pathname: string) => void,\n): void => {\n  let storedHref = typeof location === \"undefined\" ? undefined : location.href;\n  let checker: ReturnType<typeof setInterval> | undefined;\n\n  onMounted(() => {\n    if (typeof location === \"undefined\") {\n      return;\n    }\n\n    checker = setInterval(() => {\n      const href = location.href;\n      if (href !== storedHref) {\n        const url = new URL(href);\n        callback(url.pathname + url.search);\n        storedHref = href;\n      }\n    }, 50);\n  });\n\n  onBeforeUnmount(() => clearInterval(checker));\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,oBACX,aACS;CACT,IAAI,aAAa,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;CACxE,IAAI;CAEJ,gBAAgB;EACd,IAAI,OAAO,aAAa,aACtB;EAGF,UAAU,kBAAkB;GAC1B,MAAM,OAAO,SAAS;GACtB,IAAI,SAAS,YAAY;IACvB,MAAM,MAAM,IAAI,IAAI,IAAI;IACxB,SAAS,IAAI,WAAW,IAAI,MAAM;IAClC,aAAa;GACf;EACF,GAAG,EAAE;CACP,CAAC;CAED,sBAAsB,cAAc,OAAO,CAAC;AAC9C"}

package/dist/js/remote-vue-components/src/icons/IconSetProvider.mjs

@@ -0,0 +1,35 @@
+import { computed, defineComponent, inject, provide } from "vue";
+//#region src/icons/IconSetProvider.ts
+var iconSetKey = Symbol("flowIconSet");
+/** The replacement for one icon, if a surrounding set has one. */
+var injectContextIcon = (name) => {
+	const set = inject(iconSetKey, void 0);
+	return computed(() => set?.value?.[name]);
+};
+/**
+* Swaps Flow's icons for another set, below this component.
+*
+* Unlike the rest of this package, it has no counterpart in
+* `@mittwald/flow-remote-react-components`: React's `IconSetProvider` is
+* exported from `@mittwald/flow-react-components` and not from the remote
+* surface. It earns its place here because there is no Vue build of the pro set
+* — an app that licenses FontAwesome Pro, or wants its own icons, has this and
+* nothing else.
+*/
+var IconSetProvider = defineComponent({
+	name: "IconSetProvider",
+	props: { 
+	/** The icons to use instead. Omitting one keeps Flow's. */
+set: {
+		type: Object,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		provide(iconSetKey, computed(() => props.set));
+		return () => slots.default?.();
+	}
+});
+//#endregion
+export { IconSetProvider, IconSetProvider as default, injectContextIcon };
+
+//# sourceMappingURL=IconSetProvider.mjs.map

package/dist/js/remote-vue-components/src/icons/IconSetProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSetProvider.mjs","names":[],"sources":["../../../../../src/icons/IconSetProvider.ts"],"sourcesContent":["import type { IconName } from \"@/icons/iconNames\";\nimport {\n  computed,\n  defineComponent,\n  inject,\n  provide,\n  type Component,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type Ref,\n} from \"vue\";\n\n/**\n * Icons to render instead of Flow's own.\n *\n * Each entry is a component rendering an `<svg>` — Flow's `Icon` still supplies\n * the sizing, the colour and the ARIA around it, exactly as for a built-in\n * icon.\n *\n * Partial, unlike React's `IconSet`, which is `typeof defaultIconSet` and so\n * demands every icon. That works there because `@mittwald/flow-icons-pro` is a\n * complete second set to hand it; there is no Vue build of it, so a set here is\n * something an app assembles, and an icon it leaves out keeps Flow's.\n */\nexport type IconSet = Partial<Record<IconName, Component>>;\n\nconst iconSetKey: InjectionKey<Ref<IconSet | undefined>> =\n  Symbol(\"flowIconSet\");\n\n/** The replacement for one icon, if a surrounding set has one. */\nexport const injectContextIcon = (\n  name: IconName,\n): ComputedRef<Component | undefined> => {\n  const set = inject(iconSetKey, undefined);\n  return computed(() => set?.value?.[name]);\n};\n\n/**\n * Swaps Flow's icons for another set, below this component.\n *\n * Unlike the rest of this package, it has no counterpart in\n * `@mittwald/flow-remote-react-components`: React's `IconSetProvider` is\n * exported from `@mittwald/flow-react-components` and not from the remote\n * surface. It earns its place here because there is no Vue build of the pro set\n * — an app that licenses FontAwesome Pro, or wants its own icons, has this and\n * nothing else.\n */\nexport const IconSetProvider = defineComponent({\n  name: \"IconSetProvider\",\n\n  props: {\n    /** The icons to use instead. Omitting one keeps Flow's. */\n    set: { type: Object as PropType<IconSet>, default: undefined },\n  },\n\n  setup(props, { slots }) {\n    /*\n     * A computed rather than the prop itself: `provide` runs once, and a set\n     * that is swapped later would otherwise never reach the icons below.\n     */\n    provide(\n      iconSetKey,\n      computed(() => props.set),\n    );\n\n    return () => slots.default?.();\n  },\n});\n\nexport default IconSetProvider;\n"],"mappings":";;AA2BA,IAAM,aACJ,OAAO,aAAa;;AAGtB,IAAa,qBACX,SACuC;CACvC,MAAM,MAAM,OAAO,YAAY,KAAA,CAAS;CACxC,OAAO,eAAe,KAAK,QAAQ,KAAK;AAC1C;;;;;;;;;;;AAYA,IAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CAEN,OAAO;;AAEL,KAAK;EAAE,MAAM;EAA6B,SAAS,KAAA;CAAU,EAC/D;CAEA,MAAM,OAAO,EAAE,SAAS;EAKtB,QACE,YACA,eAAe,MAAM,GAAG,CAC1B;EAEA,aAAa,MAAM,UAAU;CAC/B;AACF,CAAC"}

package/dist/js/remote-vue-components/src/icons/components/IconAI.mjs

@@ -0,0 +1,7 @@
+import { tablerIcon } from "../lib/createIcon.mjs";
+//#region src/icons/components/IconAI.ts
+var IconAI = tablerIcon("AI", "outline", "sparkles", [["path", { d: "M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6" }]]);
+//#endregion
+export { IconAI, IconAI as default };
+
+//# sourceMappingURL=IconAI.mjs.map

package/dist/js/remote-vue-components/src/icons/components/IconAI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAI.mjs","names":[],"sources":["../../../../../../src/icons/components/IconAI.ts"],"sourcesContent":["/* auto-generated file */\n/* Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. See LICENSE. */\nimport { tablerIcon } from \"../lib/createIcon\";\n\nexport const IconAI = tablerIcon(\"AI\", \"outline\", \"sparkles\", [\n  [\n    \"path\",\n    {\n      d: \"M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6\",\n    },\n  ],\n]);\n\nexport default IconAI;\n"],"mappings":";;AAIA,IAAa,SAAS,WAAW,MAAM,WAAW,YAAY,CAC5D,CACE,QACA,EACE,GAAG,yMACL,CACF,CACF,CAAC"}

package/dist/js/remote-vue-components/src/icons/components/IconAIHosting.mjs

@@ -0,0 +1,18 @@
+import { tablerIcon } from "../lib/createIcon.mjs";
+//#region src/icons/components/IconAIHosting.ts
+var IconAIHosting = tablerIcon("AIHosting", "outline", "cpu", [
+	["path", { d: "M5 6a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1l0 -12" }],
+	["path", { d: "M9 9h6v6h-6l0 -6" }],
+	["path", { d: "M3 10h2" }],
+	["path", { d: "M3 14h2" }],
+	["path", { d: "M10 3v2" }],
+	["path", { d: "M14 3v2" }],
+	["path", { d: "M21 10h-2" }],
+	["path", { d: "M21 14h-2" }],
+	["path", { d: "M14 21v-2" }],
+	["path", { d: "M10 21v-2" }]
+]);
+//#endregion
+export { IconAIHosting, IconAIHosting as default };
+
+//# sourceMappingURL=IconAIHosting.mjs.map

package/dist/js/remote-vue-components/src/icons/components/IconAIHosting.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAIHosting.mjs","names":[],"sources":["../../../../../../src/icons/components/IconAIHosting.ts"],"sourcesContent":["/* auto-generated file */\n/* Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. See LICENSE. */\nimport { tablerIcon } from \"../lib/createIcon\";\n\nexport const IconAIHosting = tablerIcon(\"AIHosting\", \"outline\", \"cpu\", [\n  [\n    \"path\",\n    {\n      d: \"M5 6a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1l0 -12\",\n    },\n  ],\n  [\"path\", { d: \"M9 9h6v6h-6l0 -6\" }],\n  [\"path\", { d: \"M3 10h2\" }],\n  [\"path\", { d: \"M3 14h2\" }],\n  [\"path\", { d: \"M10 3v2\" }],\n  [\"path\", { d: \"M14 3v2\" }],\n  [\"path\", { d: \"M21 10h-2\" }],\n  [\"path\", { d: \"M21 14h-2\" }],\n  [\"path\", { d: \"M14 21v-2\" }],\n  [\"path\", { d: \"M10 21v-2\" }],\n]);\n\nexport default IconAIHosting;\n"],"mappings":";;AAIA,IAAa,gBAAgB,WAAW,aAAa,WAAW,OAAO;CACrE,CACE,QACA,EACE,GAAG,mFACL,CACF;CACA,CAAC,QAAQ,EAAE,GAAG,mBAAmB,CAAC;CAClC,CAAC,QAAQ,EAAE,GAAG,UAAU,CAAC;CACzB,CAAC,QAAQ,EAAE,GAAG,UAAU,CAAC;CACzB,CAAC,QAAQ,EAAE,GAAG,UAAU,CAAC;CACzB,CAAC,QAAQ,EAAE,GAAG,UAAU,CAAC;CACzB,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC3B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC3B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC3B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;AAC7B,CAAC"}

package/dist/js/remote-vue-components/src/icons/components/IconAnalytics.mjs

@@ -0,0 +1,7 @@
+import { tablerIcon } from "../lib/createIcon.mjs";
+//#region src/icons/components/IconAnalytics.ts
+var IconAnalytics = tablerIcon("Analytics", "outline", "brand-speedtest", [["path", { d: "M5.636 19.364a9 9 0 1 1 12.728 0" }], ["path", { d: "M16 9l-4 4" }]]);
+//#endregion
+export { IconAnalytics, IconAnalytics as default };
+
+//# sourceMappingURL=IconAnalytics.mjs.map

package/dist/js/remote-vue-components/src/icons/components/IconAnalytics.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAnalytics.mjs","names":[],"sources":["../../../../../../src/icons/components/IconAnalytics.ts"],"sourcesContent":["/* auto-generated file */\n/* Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. See LICENSE. */\nimport { tablerIcon } from \"../lib/createIcon\";\n\nexport const IconAnalytics = tablerIcon(\n  \"Analytics\",\n  \"outline\",\n  \"brand-speedtest\",\n  [\n    [\"path\", { d: \"M5.636 19.364a9 9 0 1 1 12.728 0\" }],\n    [\"path\", { d: \"M16 9l-4 4\" }],\n  ],\n);\n\nexport default IconAnalytics;\n"],"mappings":";;AAIA,IAAa,gBAAgB,WAC3B,aACA,WACA,mBACA,CACE,CAAC,QAAQ,EAAE,GAAG,mCAAmC,CAAC,GAClD,CAAC,QAAQ,EAAE,GAAG,aAAa,CAAC,CAC9B,CACF"}

package/dist/js/remote-vue-components/src/icons/components/IconApp.mjs

@@ -0,0 +1,11 @@
+import { tablerIcon } from "../lib/createIcon.mjs";
+//#region src/icons/components/IconApp.ts
+var IconApp = tablerIcon("App", "outline", "app-window", [
+	["path", { d: "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" }],
+	["path", { d: "M6 8h.01" }],
+	["path", { d: "M9 8h.01" }]
+]);
+//#endregion
+export { IconApp, IconApp as default };
+
+//# sourceMappingURL=IconApp.mjs.map

package/dist/js/remote-vue-components/src/icons/components/IconApp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconApp.mjs","names":[],"sources":["../../../../../../src/icons/components/IconApp.ts"],"sourcesContent":["/* auto-generated file */\n/* Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. See LICENSE. */\nimport { tablerIcon } from \"../lib/createIcon\";\n\nexport const IconApp = tablerIcon(\"App\", \"outline\", \"app-window\", [\n  [\n    \"path\",\n    {\n      d: \"M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10\",\n    },\n  ],\n  [\"path\", { d: \"M6 8h.01\" }],\n  [\"path\", { d: \"M9 8h.01\" }],\n]);\n\nexport default IconApp;\n"],"mappings":";;AAIA,IAAa,UAAU,WAAW,OAAO,WAAW,cAAc;CAChE,CACE,QACA,EACE,GAAG,iFACL,CACF;CACA,CAAC,QAAQ,EAAE,GAAG,WAAW,CAAC;CAC1B,CAAC,QAAQ,EAAE,GAAG,WAAW,CAAC;AAC5B,CAAC"}

package/dist/js/remote-vue-components/src/icons/components/IconAscending.mjs

@@ -0,0 +1,13 @@
+import { tablerIcon } from "../lib/createIcon.mjs";
+//#region src/icons/components/IconAscending.ts
+var IconAscending = tablerIcon("Ascending", "outline", "sort-ascending", [
+	["path", { d: "M4 6l7 0" }],
+	["path", { d: "M4 12l7 0" }],
+	["path", { d: "M4 18l9 0" }],
+	["path", { d: "M15 9l3 -3l3 3" }],
+	["path", { d: "M18 6l0 12" }]
+]);
+//#endregion
+export { IconAscending, IconAscending as default };
+
+//# sourceMappingURL=IconAscending.mjs.map

package/dist/js/remote-vue-components/src/icons/components/IconAscending.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAscending.mjs","names":[],"sources":["../../../../../../src/icons/components/IconAscending.ts"],"sourcesContent":["/* auto-generated file */\n/* Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. See LICENSE. */\nimport { tablerIcon } from \"../lib/createIcon\";\n\nexport const IconAscending = tablerIcon(\n  \"Ascending\",\n  \"outline\",\n  \"sort-ascending\",\n  [\n    [\"path\", { d: \"M4 6l7 0\" }],\n    [\"path\", { d: \"M4 12l7 0\" }],\n    [\"path\", { d: \"M4 18l9 0\" }],\n    [\"path\", { d: \"M15 9l3 -3l3 3\" }],\n    [\"path\", { d: \"M18 6l0 12\" }],\n  ],\n);\n\nexport default IconAscending;\n"],"mappings":";;AAIA,IAAa,gBAAgB,WAC3B,aACA,WACA,kBACA;CACE,CAAC,QAAQ,EAAE,GAAG,WAAW,CAAC;CAC1B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC3B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC3B,CAAC,QAAQ,EAAE,GAAG,iBAAiB,CAAC;CAChC,CAAC,QAAQ,EAAE,GAAG,aAAa,CAAC;AAC9B,CACF"}