bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.20

package/dist/composables/useConfig.d.ts

@@ -0,0 +1,59 @@
+import { InjectionKey } from 'vue';
+import { ResolvedConfig } from '../types/Config';
+/**
+ * Per-app runtime config (Q18.2).
+ *
+ * ## The problem this replaces
+ *
+ * `virtual:bitboss-ui/config` is a module-level `reactive({...})` — ONE object
+ * for the whole JS module graph, i.e. one per Node process under SSR. Writing
+ * to it (`setConfig({ locale })`) therefore wrote for every visitor being
+ * served at that moment, not just the one who asked. The victim was never the
+ * person who triggered it, and the damage was visible: every library string —
+ * a table's no-data text, select-all, pagination, close buttons — comes from
+ * this object and is baked into the HTML crawlers and JS-disabled readers get.
+ *
+ * ## The shape now
+ *
+ * The virtual module keeps its job as the **build-time defaults**, which is
+ * what it always was: values resolved from the Vite plugin's options. What
+ * changed is that they are no longer the runtime store. `bitbossUiPlugin`
+ * provides a reactive CLONE per app, and SSR already gives every request its
+ * own app instance — so per-app is per-request for free, with no new concept
+ * for consumers to learn.
+ *
+ * ## Reading it
+ *
+ * `useConfig()` from a component (or from a composable a component calls)
+ * returns that app's config. With no injection context at all there is no app
+ * to ask, so it returns the build-time defaults — the guard is what keeps that
+ * silent instead of tripping Vue's "inject() can only be used inside setup()"
+ * warning.
+ *
+ * The guard is `hasInjectionContext()`, NOT `getCurrentInstance()` (Q20.4).
+ * The two agree inside a component, but they differ in the one place that
+ * matters for SSR: `app.runWithContext(fn)` has an injection context and NO
+ * component instance. That is the shape of a framework plugin — a Nuxt plugin
+ * setting a per-request locale — and under `getCurrentInstance()` such a call
+ * silently resolved to the process-global instead of the app it was made for.
+ * Measured: at module scope both are false; in setup both true; inside
+ * `app.runWithContext` only `hasInjectionContext()` is true.
+ *
+ * A call site that reads a **build-time** value (a media query string, the SSR
+ * viewport seed, plugin-install options) should keep importing the virtual
+ * module directly: those are not per-visitor, they are resolved once at build,
+ * and routing them through an injection would only imply a flexibility that
+ * does not exist.
+ */
+export declare const BB_CONFIG_KEY: InjectionKey<ResolvedConfig>;
+/**
+ * A fresh, independent config for one app. Spread rather than shared, so two
+ * apps in the same process cannot see each other's writes.
+ */
+export declare const createAppConfig: (overrides?: Partial<ResolvedConfig>) => ResolvedConfig;
+/**
+ * The active config: this app's, or the build-time defaults when called
+ * outside an app (module scope, a store created before mount, a plain
+ * function).
+ */
+export declare const useConfig: () => ResolvedConfig;

package/dist/composables/useConfig.js

@@ -0,0 +1,9 @@
+import { hasInjectionContext as e, inject as t, reactive as n } from "vue";
+import { config as r } from "virtual:bitboss-ui/config";
+//#region src/composables/useConfig.ts
+var i = Symbol("bitboss-ui:config"), a = (e) => n({
+	...r,
+	...e
+}), o = () => e() ? t(i, r) : r;
+//#endregion
+export { i as BB_CONFIG_KEY, a as createAppConfig, o as useConfig };

package/dist/composables/useItemsGetter.d.ts

@@ -7,6 +7,17 @@ export declare const useItemsGetter: (options: Options) => {
     getter: (...args: any[]) => Promise<void>;
     debouncedGetter: (...args: any[]) => Promise<void>;
     items: import('vue').ShallowRef<any[], any[]>;
+    /**
+     * Can the client rebuild this load unaided? True for a plain ARRAY source:
+     * it arrives as a prop, so the server may resolve it even where no
+     * SSR-state adapter exists. Consumers hand it to `usePrefill`.
+     */
+    clientReproducible: import('vue').ComputedRef<boolean>;
+    /**
+     * Plain boolean, not a ref: it is decided once, in setup, before the first
+     * render, and nothing can flip it afterwards.
+     */
+    hydratedFromSsr: boolean;
     loading: import('vue').ComputedRef<boolean>;
 };
 export {};

package/dist/composables/useItemsGetter.js

@@ -1,30 +1,56 @@
-import { computed as e, ref as t, shallowRef as n, unref as r } from "vue";
-import { useDebounceFn as i } from "@vueuse/core";
+import { useHydrated as e } from "./useHydrated.js";
+import { isServerRender as t, useSsrState as n } from "./useSsrState.js";
+import { computed as r, ref as i, shallowRef as a, unref as o, useId as s } from "vue";
+import { useDebounceFn as c } from "@vueuse/core";
 //#region src/composables/useItemsGetter.ts
-var a = (a) => {
-	let o = e(() => r(a.items)), s = n([]), c = t(0), l = 0, u = async (...e) => {
-		if (Array.isArray(o.value)) {
-			++l, s.value = o.value;
+var l = (e) => {
+	if (!Array.isArray(e)) return !1;
+	let t = e.find((e) => e && typeof e == "object");
+	return !t || !Object.values(t).some((e) => typeof e == "function" || typeof e == "symbol");
+}, u = (u) => {
+	let d = r(() => o(u.items)), f = a([]), p = i(0), m = 0, h = n(), g = `bb-items:${s()}`, _ = !1, v = null;
+	if (h.enabled && !t) {
+		let e = h.get(g);
+		Array.isArray(e) && (f.value = e, v = e, _ = !0);
+	}
+	let y = (e) => {
+		if (!(!h.enabled || !t)) {
+			if (!l(e)) {
+				process.env.NODE_ENV !== "production" && console.warn("[bitboss-ui] An `items` provider resolved rows that cannot be serialized into the SSR payload (a row carries a function or a symbol — a class instance or an ORM model, most likely). The server-rendered options were dropped so hydration still matches; the client will fetch them again. Return plain objects to keep the server-side resolution."), f.value = [];
+				return;
+			}
+			h.set(g, e);
+		}
+	}, b = async (...e) => {
+		if (Array.isArray(d.value)) {
+			++m, f.value = d.value;
+			return;
+		}
+		if (typeof d.value != "function") return;
+		if (v) {
+			let e = v;
+			v = null, ++m, f.value = e;
 			return;
 		}
-		if (typeof o.value != "function") return;
-		let t = ++l;
-		c.value++;
+		let t = ++m;
+		p.value++;
 		try {
-			let n = await o.value(...e);
-			t === l && (s.value = n);
+			let n = await d.value(...e);
+			t === m && (f.value = n, y(n));
 		} catch (e) {
 			console.error(e);
 		} finally {
-			c.value--;
+			p.value--;
 		}
-	}, d = i(u, a.debounce || 0);
+	}, x = c(b, u.debounce || 0), S = (...e) => Array.isArray(d.value) ? b(...e) : x(...e), { isHydrated: C } = e();
 	return {
-		getter: u,
-		debouncedGetter: (...e) => Array.isArray(o.value) ? u(...e) : d(...e),
-		items: s,
-		loading: e(() => c.value > 0)
+		getter: b,
+		debouncedGetter: S,
+		items: f,
+		clientReproducible: r(() => Array.isArray(d.value)),
+		hydratedFromSsr: _,
+		loading: r(() => C.value ? p.value > 0 : !1)
 	};
 };
 //#endregion
-export { a as useItemsGetter };
+export { u as useItemsGetter };

package/dist/composables/useLocale.js

@@ -1,11 +1,14 @@
-import { get as e } from "../utilities/functions/get.js";
-import { config as t } from "virtual:bitboss-ui/config";
+import { useConfig as e } from "./useConfig.js";
+import { get as t } from "../utilities/functions/get.js";
 import { computed as n, readonly as r } from "vue";
 import { locales as i } from "virtual:bitboss-ui/locales";
 //#region src/composables/useLocale.ts
-var a = (a, ...o) => r(n(() => {
-	let n = i[t.locale] ?? {}, r = i[t.defaultLocale] ?? {}, s = e(n, a) ?? e(r, a) ?? a;
-	return String(s).replace(/\{(\d+)\}/g, (e, t) => o[Number(t)]);
-})), o = () => ({ t: a });
+var a = () => {
+	let a = e();
+	return { t: (e, ...o) => r(n(() => {
+		let n = i[a.locale] ?? {}, r = i[a.defaultLocale] ?? {}, s = t(n, e) ?? t(r, e) ?? e;
+		return String(s).replace(/\{(\d+)\}/g, (e, t) => o[Number(t)]);
+	})) };
+};
 //#endregion
-export { o as useLocale };
+export { a as useLocale };

package/dist/composables/useMobile.js

@@ -1,14 +1,14 @@
-import { config as e } from "virtual:bitboss-ui/config";
-import { computed as t, ref as n } from "vue";
+import { computed as e, ref as t } from "vue";
+import { config as n } from "virtual:bitboss-ui/config";
 //#region src/composables/useMobile.ts
-var r = `(max-width: ${e.mobileMaxWidth - .02}px)`, i = typeof window < "u" && typeof window.matchMedia == "function", a = e.ssrViewportWidth < e.mobileMaxWidth, o = n(i ? window.matchMedia(r).matches : a);
+var r = `(max-width: ${n.mobileMaxWidth - .02}px)`, i = typeof window < "u" && typeof window.matchMedia == "function", a = n.ssrViewportWidth < n.mobileMaxWidth, o = t(i ? window.matchMedia(r).matches : a);
 i && window.matchMedia(r).addEventListener("change", (e) => {
 	o.value = e.matches;
 });
-var s = n(!i);
+var s = t(!i);
 i && queueMicrotask(() => {
 	s.value = !0;
 });
-var c = n(null), l = n(null), u = t(() => c.value == null ? l.value ?? s.value ? o.value : a : c.value), d = () => ({ isMobile: u });
+var c = t(null), l = t(null), u = e(() => c.value == null ? l.value ?? s.value ? o.value : a : c.value), d = () => ({ isMobile: u });
 //#endregion
 export { d as useMobile };

package/dist/composables/usePrefill.d.ts

@@ -12,9 +12,28 @@ type Options = {
     trigger?: MaybeRefOrGetter<boolean>;
     multiple?: boolean;
     currentValue?: MaybeRefOrGetter<any>;
+    /**
+     * "The first load already happened — don't do it again."
+     *
+     * Set by consumers from `useItemsGetter`'s `hydratedFromSsr`: the server
+     * resolved the provider and the result travelled in the SSR payload, so the
+     * options are already in hand before the first client render. Read ONCE, in
+     * setup — it describes how this instance started, and nothing later changes
+     * that.
+     */
+    alreadyLoaded?: MaybeRefOrGetter<boolean>;
+    /**
+     * "The client can rebuild this load without help."
+     *
+     * True for a plain `items` ARRAY: it arrives as a prop, so a server render of
+     * it is reproduced exactly on the client with no transfer. Such a source may
+     * resolve during SSR even on a host with no SSR-state adapter. An async
+     * provider is the opposite case and needs the adapter.
+     */
+    clientReproducible?: MaybeRefOrGetter<boolean>;
 };
-export declare const usePrefill: ({ fn, trigger, multiple, currentValue, }: Options) => {
-    isPrefilling: import('vue').Ref<boolean, boolean>;
+export declare const usePrefill: ({ fn, trigger, multiple, currentValue, alreadyLoaded, clientReproducible, }: Options) => {
+    isPrefilling: import('vue').ComputedRef<boolean>;
     hasPrefilled: import('vue').Ref<boolean, boolean>;
     canLoad: import('vue').ComputedRef<boolean>;
     prefill: () => Promise<void>;

package/dist/composables/usePrefill.js

@@ -1,24 +1,30 @@
-import { isNotNil as e } from "../utilities/functions/isNotNil.js";
-import { computed as t, onBeforeMount as n, onServerPrefetch as r, ref as i, toValue as a } from "vue";
+import { useHydrated as e } from "./useHydrated.js";
+import { useSsrState as t } from "./useSsrState.js";
+import { isNotNil as n } from "../utilities/functions/isNotNil.js";
+import { computed as r, onBeforeMount as i, onServerPrefetch as a, ref as o, toValue as s } from "vue";
 //#region src/composables/usePrefill.ts
-var o = ({ fn: o, trigger: s = !1, multiple: c, currentValue: l }) => {
-	let u = t(() => {
-		let t = a(l);
-		return c ? !!t?.length : e(t);
-	}), d = t(() => !!a(s) || u.value), f = i(!1), p = i(!1), m = t(() => d.value || p.value), h = async () => {
-		f.value || p.value || (f.value = !0, await o(!0), f.value = !1, p.value = !0);
-	};
-	return d.value && (r(h), n(async () => {
-		p.value || await h();
-	})), {
-		isPrefilling: f,
-		hasPrefilled: p,
-		canLoad: m,
-		prefill: h,
-		markPrefilled: () => {
-			p.value = !0;
+var c = ({ fn: c, trigger: l = !1, multiple: u, currentValue: d, alreadyLoaded: f, clientReproducible: p }) => {
+	let m = r(() => {
+		let e = s(d);
+		return u ? !!e?.length : n(e);
+	}), h = r(() => !!s(l) || m.value), g = o(!1), { isHydrated: _ } = e(), v = r(() => _.value ? g.value : !1), y = o(s(f) === !0), b = r(() => h.value || y.value), x = async () => {
+		g.value || y.value || (g.value = !0, await c(!0), g.value = !1, y.value = !0);
+	}, S = () => {
+		y.value = !0;
+	}, C = t();
+	return h.value && ((C.enabled || s(p) === !0) && a(x), i(async () => {
+		if (y.value) {
+			s(f) === !0 && await c(!0);
+			return;
 		}
+		await x();
+	})), {
+		isPrefilling: v,
+		hasPrefilled: y,
+		canLoad: b,
+		prefill: x,
+		markPrefilled: S
 	};
 };
 //#endregion
-export { o as usePrefill };
+export { c as usePrefill };

package/dist/composables/useSsrState.d.ts

@@ -0,0 +1,20 @@
+/** True while rendering on a server (no DOM). */
+export declare const isServerRender: boolean;
+/**
+ * Read the host's SSR-state adapter, if it installed one.
+ *
+ * `enabled` is the load-bearing part of the return: it is what lets the library
+ * decide whether it is ALLOWED to resolve async data on the server. Rendering
+ * resolved content the client cannot reproduce is worse than rendering a cold
+ * placeholder — the client repaints either way, but the mismatched version also
+ * logs a hydration error and, in production, keeps the stale server HTML.
+ *
+ * Must be called from a component `setup()` (it injects). Safe to call in an
+ * app with no SSR at all: `enabled` is then false and both methods are no-ops.
+ */
+export declare const useSsrState: () => {
+    /** Did the host install an adapter? Gates all server-side prefetching. */
+    enabled: boolean;
+    get: <T>(key: string) => T | undefined;
+    set: <T>(key: string, value: T) => void;
+};

package/dist/composables/useSsrState.js

@@ -0,0 +1,13 @@
+import { SSR_STATE_INJECTION_KEY as e } from "../utilities/misc/ssrStateInjectionKey.js";
+import { inject as t } from "vue";
+//#region src/composables/useSsrState.ts
+var n = typeof window > "u", r = () => {
+	let n = t(e, null);
+	return {
+		enabled: !!n,
+		get: (e) => n?.get(e),
+		set: (e, t) => n?.set(e, t)
+	};
+};
+//#endregion
+export { n as isServerRender, r as useSsrState };

package/dist/composables/useToast.js

@@ -1,13 +1,13 @@
 import { wait as e } from "../utilities/functions/wait.js";
-import { config as t } from "virtual:bitboss-ui/config";
-import { reactive as n } from "vue";
+import { reactive as t } from "vue";
+import { config as n } from "virtual:bitboss-ui/config";
 //#region src/composables/useToast.ts
 var r = 300, i = /* @__PURE__ */ new Set([
 	"success",
 	"info",
 	"warning",
 	"destructive"
-]), a = n({ toasts: [] }), o = 0, s = !1, c = !1, l = () => {
+]), a = t({ toasts: [] }), o = 0, s = !1, c = !1, l = () => {
 	o++, s = !0;
 	let e = !1;
 	return {
@@ -16,7 +16,7 @@ var r = 300, i = /* @__PURE__ */ new Set([
 			e || (e = !0, o--);
 		}
 	};
-}, u = n(/* @__PURE__ */ new Map()), d = (e, t) => (u.set(e, t), () => u.delete(e)), f = 0, p = (e) => {
+}, u = t(/* @__PURE__ */ new Map()), d = (e, t) => (u.set(e, t), () => u.delete(e)), f = 0, p = (e) => {
 	if (e.duration !== void 0 && e.duration <= 0) throw Error("Toast duration must be a positive number of milliseconds.");
 	let t = e.id ?? `bb-toast-${++f}`, n = Date.now(), r = a.toasts.find((e) => e.id === t), i = e.loading ?? r?.loading ?? !1, o = e.persistent ?? i, s, c;
 	o ? (s = Infinity, c = Number.isFinite(r?.duration) ? r?.duration : r?.preLoadingDuration) : e.duration === void 0 ? r && Number.isFinite(r.duration) ? s = r.duration : r && Number.isFinite(r.preLoadingDuration) && (s = r.preLoadingDuration) : s = e.duration;
@@ -53,7 +53,7 @@ var r = 300, i = /* @__PURE__ */ new Set([
 }) : e, _ = (e) => {
 	let t = typeof e == "string" ? { title: e } : e;
 	return typeof window > "u" ? (process.env.NODE_ENV !== "production" && console.warn("[BbToast] toast() was called during server-side rendering — ignored. Trigger toasts from client-side code (onMounted, event handlers)."), t.id ?? "") : (process.env.NODE_ENV !== "production" && !s && !c && (c = !0, console.warn("[BbToast] toast() was called but no <BbToast> host has ever mounted — the toast is queued but nothing will render or expire it. Mount exactly one <BbToast /> at the app root.")), process.env.NODE_ENV !== "production" && !t.title && !t.text && !t.portal && console.warn("[BbToast] A toast was created with no title, text, or portal — it will render empty."), process.env.NODE_ENV !== "production" && t.portal && t.actions && console.warn("[BbToast] A toast carries both `portal` and `actions` — portal content owns the body, so the actions are not rendered. Render the buttons inside the portal instead."), process.env.NODE_ENV !== "production" && t.variant && t.variant !== "default" && i.has(t.variant) && !t.icon && !t.loading && !t.portal && console.warn(`[BbToast] A "${t.variant}" toast was created with no \`icon\` — the variant tints the icon and sets announcement priority, nothing else, so this renders identically to a default toast. Pass a matching \`icon\` (e.g. lucide:circle-check / lucide:circle-x) when the tone should be visible.`), p(t));
-}, v = (e, n) => e.position ?? n ?? t.toastPosition ?? "bottom-right", y = () => ({
+}, v = (e, t) => e.position ?? t ?? n.toastPosition ?? "bottom-right", y = () => ({
 	toast: _,
 	dismiss: h,
 	update: g

package/dist/deprecation/ai-deprecations.json.d.ts

@@ -109,6 +109,17 @@ declare const _default: [
 			"kind": "manual"
 		}
 	},
+	{
+		"component": "BbCheckboxGroup",
+		"old": "color",
+		"new": null,
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-checkbox-group.md",
+		"fix": {
+			"kind": "manual"
+		}
+	},
 	{
 		"component": "BbCheckboxGroup",
 		"old": "labelPosition",
@@ -269,17 +280,6 @@ declare const _default: [
 			"kind": "manual"
 		}
 	},
-	{
-		"component": "BbDialog",
-		"old": "description",
-		"new": null,
-		"since": "3.0.0-unreleased",
-		"silent": true,
-		"migration": "ai/guides/migration/components/bb-dialog.md",
-		"fix": {
-			"kind": "manual"
-		}
-	},
 	{
 		"component": "BbDialog",
 		"old": "hideHeader",
@@ -368,6 +368,17 @@ declare const _default: [
 			"kind": "invert"
 		}
 	},
+	{
+		"component": "BbDropdownButton",
+		"old": "theme",
+		"new": "variant",
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-dropdown-button.md",
+		"fix": {
+			"kind": "rename"
+		}
+	},
 	{
 		"component": "BbIcon",
 		"old": "color",
@@ -390,6 +401,17 @@ declare const _default: [
 			"kind": "rename"
 		}
 	},
+	{
+		"component": "BbOffCanvas",
+		"old": "compact",
+		"new": null,
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-offcanvas.md",
+		"fix": {
+			"kind": "manual"
+		}
+	},
 	{
 		"component": "BbOffCanvas",
 		"old": "direction",
@@ -533,6 +555,28 @@ declare const _default: [
 			"kind": "manual"
 		}
 	},
+	{
+		"component": "BbRadio",
+		"old": "color",
+		"new": null,
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-checkbox.md",
+		"fix": {
+			"kind": "manual"
+		}
+	},
+	{
+		"component": "BbRadioGroup",
+		"old": "color",
+		"new": null,
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-checkbox-group.md",
+		"fix": {
+			"kind": "manual"
+		}
+	},
 	{
 		"component": "BbRadioGroup",
 		"old": "labelPosition",
@@ -682,6 +726,28 @@ declare const _default: [
 			"kind": "manual"
 		}
 	},
+	{
+		"component": "BbSwitch",
+		"old": "color",
+		"new": null,
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-checkbox.md",
+		"fix": {
+			"kind": "manual"
+		}
+	},
+	{
+		"component": "BbSwitchGroup",
+		"old": "color",
+		"new": null,
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-checkbox-group.md",
+		"fix": {
+			"kind": "manual"
+		}
+	},
 	{
 		"component": "BbSwitchGroup",
 		"old": "labelPosition",
@@ -748,6 +814,28 @@ declare const _default: [
 			"kind": "rename"
 		}
 	},
+	{
+		"component": "BbTabsRoot",
+		"old": "animateX",
+		"new": "disableAnimateX",
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-tabs.md",
+		"fix": {
+			"kind": "invert"
+		}
+	},
+	{
+		"component": "BbTabsRoot",
+		"old": "animateY",
+		"new": "disableAnimateY",
+		"since": "3.0.0-unreleased",
+		"silent": true,
+		"migration": "ai/guides/migration/components/bb-tabs.md",
+		"fix": {
+			"kind": "invert"
+		}
+	},
 	{
 		"component": "BbTabsRoot",
 		"old": "querykey",