@nxgt/material-vue 0.20.0 → 0.21.0

package/README.md

@@ -32,6 +32,7 @@ the [catalogue](#components) lists the React equivalent for each entry.
 - [Setup](#setup): styles, Pinia and router, icons, Nuxt
 - [Subpaths](#subpaths)
 - [Usage](#usage)
+- [Maps](#maps)
 - [Components](#components)
 - [Helpers](#helpers)
 - [SSR](#ssr)
@@ -173,6 +174,7 @@ It does **not** add the stylesheet. Import it yourself as shown in
 | --- | --- |
 | `@nxgt/material-vue` | every barrel below, plus the compiled `style` condition (`dist/material-vue.css`, for apps without Tailwind) |
 | `@nxgt/material-vue/components` | UI components and `*FormField` wrappers |
+| `@nxgt/material-vue/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel** ([Maps](#maps)) |
 | `@nxgt/material-vue/composables` | `useTheme`, `useIsClient`, `useIsMobile`, `useSearchParam`, … |
 | `@nxgt/material-vue/dnd` | drag-and-drop primitives |
 | `@nxgt/material-vue/i18n` | `I18nProvider`, `mergeResources`, `createTranslator`, … |
@@ -180,6 +182,7 @@ It does **not** add the stylesheet. Import it yourself as shown in
 | `@nxgt/material-vue/models` | `Status<T>` |
 | `@nxgt/material-vue/types` | shared function types |
 | `@nxgt/material-vue/styles.css` | source Tailwind v4 tokens: **this** is what a Tailwind app imports |
+| `@nxgt/material-vue/map.css` | leaflet's stylesheet, for the apps that use `./map`. Not part of `styles.css` |
 | `@nxgt/material-vue/nuxt` | Nuxt module |
 
 ## Usage
@@ -333,6 +336,78 @@ export const useCounterStore = defineLocalStore<{ count: number }>('counter', {
 // in setup(): const store = useCounterStore({ count: 5 });
 ```
 
+## Maps
+
+`@nxgt/material-vue/map` mirrors the React package's `@nxgt/material/map`:
+`Map`, `Marker`, `LocationMarker`, `LocationPreview`, `MapActions`, the
+`LocationField` / `LocationFormField` pair, and the `useGeolocation` composable
+they share.
+
+```sh
+bun add leaflet @vue-leaflet/vue-leaflet
+```
+
+```vue
+<script setup lang="ts">
+import '@nxgt/material-vue/map.css';
+import { LocationFormField } from '@nxgt/material-vue/map';
+</script>
+
+<template>
+  <LocationFormField name="address" label="Address" />
+</template>
+```
+
+Both are **optional peers**: an app that renders no map never has leaflet in its
+tree. `useGeolocation` wraps `@vueuse/core`'s, a peer this package already
+requires, rather than adding a second geolocation dependency.
+
+### What `Map` does when you pass nothing
+
+```vue
+<Map class="size-96">
+  <Marker :position="[48.8566, 2.3522]" />
+</Map>
+```
+
+An `LMap` with an OpenStreetMap tile layer and a zoom control, `use-global-leaflet`
+off so it uses the copy it `import()`s itself. The defaults match the React
+entry's, and are not neutral:
+
+| Prop | Default | Why it matters |
+| --- | --- | --- |
+| `center` | the visitor's geolocation, falling back to `[5.44087, 10.06843]` (Yaoundé) | **omitting it asks the browser for location permission** — `Map` calls `useGeolocation` itself. Pass a `center` for a map that must not prompt. |
+| `zoom` | `13` | |
+| `scrollWheelZoom` | `false` | a map inside a scrolling page does not capture the wheel |
+| `zoomControl` | `false` | leaflet's *own* control, off because the component renders an `LControlZoom` at `topleft`. Passing `true` gives you two. |
+
+`useGeolocation` passes `enableHighAccuracy: false` and a 5 s timeout to
+`@vueuse/core`, and returns `coords` as `{ latitude, longitude } | null` — null
+until the first fix, rather than the two `NaN`s vueuse starts with.
+
+**This entry is not auto-registered by the Nuxt module.** Every other component
+is; this one is imported explicitly, because auto-registration would make
+leaflet resolvable from an app that never renders a map.
+
+**Rendering.** `@vue-leaflet/vue-leaflet` loads leaflet with `import()` when a
+component mounts, so — unlike the React mirror, where `react-leaflet` imports it
+statically — this entry *can* be imported in a server process without throwing.
+Leaflet still only initialises in a browser, so the container renders empty until
+it mounts: under Nuxt, wrap it in `<ClientOnly>`.
+
+`MinimapControl` is the one thing the React entry has and this one does not: it
+is built on `@react-leaflet/core`'s internals, which have no counterpart here.
+The React `Marker`'s component-marker dependency has none either — here an
+arbitrary marker is `LIcon`'s slot, which is the Vue-native way:
+
+```vue
+<Marker :position="[5.44, 10.07]">
+  <template #icon><MyPin /></template>
+  <template #tooltip>Warehouse</template>
+</Marker>
+```
+
+
 ## Components
 
 All components are exported from `@nxgt/material-vue/components` and from the
@@ -739,6 +814,9 @@ renders the component.
   three servers answered nothing at all, on every route, with every check green.
   It is fixed there by a separate `@nxgt/material/print` entry. If you add a
   dependency of that kind here, it gets its own entry too.
+- **Maps are their own entry, for the same reason.** `@nxgt/material-vue/map` is
+  the only entry that reaches `leaflet`, which reads `window` while it is
+  evaluated. `bun run build` fails if another one does. See [Maps](#maps).
 - **Language on first render.** Pass `initial-language` (from a cookie or
   `Accept-Language`) to `I18nProvider` so the server and the client agree.
 - **Never `<svg><title>`.** Some SSR frameworks hoist `<title>` into the
@@ -756,6 +834,9 @@ renders the component.
 | `useI18nContext must be used within an I18nProvider` | your `useTranslation()` runs outside the provider | mount `I18nProvider` above the component |
 | `ReferenceError: DOMMatrix` at server boot | a static `pdfjs-dist` import in your own code | `import()` + `clientOnly` |
 | Built server answers nothing (`curl` → `000`) on every route, log names a module it cannot find | a bundled dependency whose own loader resolves paths at runtime — pdfkit's `#standard-fonts/*` is the known one, through `@react-pdf/renderer` | do not import such a dependency from a barrel; take it from its own entry (`@nxgt/material/print` in the React package) or leave the library external in your server build |
+| Map renders as an empty box under SSR | leaflet initialises in the browser only | wrap it in `<ClientOnly>`; it is not an error ([Maps](#maps)) |
+| `Cannot find package 'leaflet'` | the map peers are optional | `bun add leaflet @vue-leaflet/vue-leaflet` |
+| Map tiles render with no controls or broken layout | leaflet's CSS missing | `import '@nxgt/material-vue/map.css'` — it is not part of `styles.css` |
 | `jsbarcode` has no default export (Vite, no Nuxt) | CommonJS dependency not pre-bundled | `optimizeDeps.include: ['@nxgt/material-vue > jsbarcode']` |
 | Both CSS files loaded, duplicated tokens | `styles.css` and the root `style` export imported together | keep one: `styles.css` with Tailwind, the compiled CSS without |
 

package/dist/HoverCardTrigger-CftN4TfW.js

@@ -0,0 +1,415 @@
+import { t as e } from "./utils-Cy-ByIEo.js";
+import { r as t } from "./icon-button-Ghucx7Ah.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, isRef as u, mergeProps as d, normalizeClass as f, normalizeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, vModelText as y, withCtx as b, withDirectives as x } from "vue";
+import { DialogClose as S, DialogContent as C, DialogDescription as w, DialogOverlay as T, DialogPortal as E, DialogRoot as D, DialogTitle as O, DialogTrigger as k, HoverCardContent as A, HoverCardPortal as j, HoverCardRoot as M, HoverCardTrigger as N, Label as P, useForwardProps as F, useForwardPropsEmits as I } from "reka-ui";
+import { reactiveOmit as L, useVModel as R } from "@vueuse/core";
+import { X as z } from "@lucide/vue";
+//#endregion
+//#region lib/components/ui/helper-text/helper-text.vue
+var B = /* @__PURE__ */ c({
+	__name: "helper-text",
+	props: {
+		error: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t;
+		return (r, a) => (m(), i("div", {
+			"data-slot": "helper-text",
+			"data-test": "typogaphy",
+			class: f(_(e)("overflow-auto in-[[data-state=selected]]:text-primary-foreground text-[10px] text-muted-foreground flex pl-0.5 truncate text-wrap", { "text-error": t.error }, n.class))
+		}, [h(r.$slots, "default")], 2));
+	}
+}), V = {
+	key: 0,
+	class: "inline-flex"
+}, H = /* @__PURE__ */ c({
+	__name: "Label",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		withAsterisk: { type: Boolean }
+	},
+	setup(t) {
+		let r = t, o = L(r, "class");
+		return (s, c) => (m(), n(_(P), d({ "data-slot": "label" }, _(o), { class: _(e)("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", r.class) }), {
+			default: b(() => [t.withAsterisk ? (m(), i("span", V, [h(s.$slots, "default"), c[0] ||= a("span", { class: "text-error" }, "*", -1)])) : h(s.$slots, "default", {}, void 0, void 0, 1)]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), U = ["data-slot"], W = /* @__PURE__ */ c({
+	__name: "Input",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let r = t, a = R(r, "modelValue", n, {
+			passive: !0,
+			defaultValue: r.defaultValue
+		});
+		return (t, n) => x((m(), i("input", {
+			"onUpdate:modelValue": n[0] ||= (e) => u(a) ? a.value = e : null,
+			"data-slot": t.$attrs["data-slot"] ?? "input",
+			class: f(_(e)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", r.class))
+		}, null, 10, U)), [[y, _(a)]]);
+	}
+}), G = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "text-field",
+	props: {
+		label: {},
+		helperText: {},
+		error: { type: Boolean },
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		name: {},
+		placeholder: {},
+		type: {},
+		modelValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: c }) {
+		let l = t, u = c, p = v(), y = () => l.id ?? p;
+		return (c, p) => (m(), i("div", {
+			"data-slot": "text-field",
+			class: f(_(e)("grid w-full gap-1.5", l.class))
+		}, [
+			t.label ? (m(), n(H, {
+				key: 0,
+				"with-asterisk": t.required,
+				for: y()
+			}, {
+				default: b(() => [o(g(t.label), 1)]),
+				_: 1
+			}, 8, ["with-asterisk", "for"])) : r("", !0),
+			a("div", { class: f(_(e)("relative", {
+				"*:first:size-8 *:first:absolute *:first:top-[calc(50%-16px)] *:first:left-1.5 [&_input]:pl-10 *:first:bg-muted/80 *:first:text-muted-foreground": !!c.$slots.leading,
+				"*:last:size-8 *:last:absolute *:last:top-[calc(50%-16px)] *:last:right-1.5 [&_input]:pr-10 *:last:bg-muted/80 *:last:text-muted-foreground": !!c.$slots.trailing
+			})) }, [
+				h(c.$slots, "leading"),
+				s(W, d({ id: y() }, c.$attrs, {
+					name: t.name,
+					type: t.type,
+					placeholder: t.placeholder,
+					disabled: t.disabled,
+					required: t.required,
+					"model-value": t.modelValue,
+					"aria-invalid": t.error || void 0,
+					class: "transition-all hover:border-primary hover:ring-[2px] hover:ring-primary/25",
+					"onUpdate:modelValue": p[0] ||= (e) => u("update:modelValue", e)
+				}), null, 16, [
+					"id",
+					"name",
+					"type",
+					"placeholder",
+					"disabled",
+					"required",
+					"model-value",
+					"aria-invalid"
+				]),
+				h(c.$slots, "trailing")
+			], 2),
+			t.helperText ? (m(), n(B, {
+				key: 1,
+				error: t.error
+			}, {
+				default: b(() => [o(g(t.helperText), 1)]),
+				_: 1
+			}, 8, ["error"])) : r("", !0)
+		], 2));
+	}
+}), K = /* @__PURE__ */ c({
+	__name: "Dialog",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean },
+		unmountOnHide: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let r = I(e, t);
+		return (e, t) => (m(), n(_(D), d({ "data-slot": "dialog" }, _(r)), {
+			default: b((t) => [h(e.$slots, "default", p(l(t)))]),
+			_: 3
+		}, 16));
+	}
+}), q = /* @__PURE__ */ c({
+	__name: "DialogClose",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (m(), n(_(S), d({ "data-slot": "dialog-close" }, t), {
+			default: b(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), J = /* @__PURE__ */ c({
+	__name: "DialogOverlay",
+	props: {
+		forceMount: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let r = t, i = L(r, "class");
+		return (t, a) => (m(), n(_(T), d({ "data-slot": "dialog-overlay" }, _(i), { class: _(e)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", r.class) }), {
+			default: b(() => [h(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), Y = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		showCloseButton: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(t, { emit: i }) {
+		let o = t, c = i, l = I(L(o, "class"), c);
+		return (i, c) => (m(), n(_(E), null, {
+			default: b(() => [s(J), s(_(C), d({ "data-slot": "dialog-content" }, {
+				...i.$attrs,
+				..._(l)
+			}, { class: _(e)("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", o.class) }), {
+				default: b(() => [h(i.$slots, "default"), t.showCloseButton ? (m(), n(_(S), {
+					key: 0,
+					"data-slot": "dialog-close",
+					class: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+				}, {
+					default: b(() => [s(_(z)), c[0] ||= a("span", { class: "sr-only" }, "Close", -1)]),
+					_: 1
+				})) : r("", !0)]),
+				_: 3
+			}, 16, ["class"])]),
+			_: 3
+		}));
+	}
+}), X = /* @__PURE__ */ c({
+	__name: "DialogDescription",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let r = t, i = F(L(r, "class"));
+		return (t, a) => (m(), n(_(w), d({ "data-slot": "dialog-description" }, _(i), { class: _(e)("text-muted-foreground text-sm", r.class) }), {
+			default: b(() => [h(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), Z = /* @__PURE__ */ c({
+	__name: "DialogFooter",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		showCloseButton: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(a) {
+		let c = a;
+		return (l, u) => (m(), i("div", {
+			"data-slot": "dialog-footer",
+			class: f(_(e)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", c.class))
+		}, [h(l.$slots, "default"), a.showCloseButton ? (m(), n(_(S), {
+			key: 0,
+			"as-child": ""
+		}, {
+			default: b(() => [s(_(t), { variant: "outlined" }, {
+				default: b(() => [...u[0] ||= [o(" Close ", -1)]]),
+				_: 1
+			})]),
+			_: 1
+		})) : r("", !0)], 2));
+	}
+}), Q = /* @__PURE__ */ c({
+	__name: "DialogTitle",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let r = t, i = F(L(r, "class"));
+		return (t, a) => (m(), n(_(O), d({ "data-slot": "dialog-title" }, _(i), { class: _(e)("text-lg leading-none font-semibold", r.class) }), {
+			default: b(() => [h(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), $ = /* @__PURE__ */ c({
+	__name: "DialogTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (m(), n(_(k), d({ "data-slot": "dialog-trigger" }, t), {
+			default: b(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), ee = /* @__PURE__ */ c({
+	__name: "HoverCard",
+	props: {
+		defaultOpen: { type: Boolean },
+		open: { type: Boolean },
+		openDelay: {},
+		closeDelay: {},
+		enableTouch: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let r = I(e, t);
+		return (e, t) => (m(), n(_(M), d({ "data-slot": "hover-card" }, _(r)), {
+			default: b((t) => [h(e.$slots, "default", p(l(t)))]),
+			_: 3
+		}, 16));
+	}
+}), te = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "HoverCardContent",
+	props: {
+		forceMount: { type: Boolean },
+		memoDependencies: {},
+		side: {},
+		sideOffset: { default: 4 },
+		sideFlip: { type: Boolean },
+		align: {},
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		dir: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let r = t, i = F(L(r, "class"));
+		return (t, a) => (m(), n(_(j), null, {
+			default: b(() => [s(_(A), d({ "data-slot": "hover-card-content" }, {
+				...t.$attrs,
+				..._(i)
+			}, { class: _(e)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden", r.class) }), {
+				default: b(() => [h(t.$slots, "default")]),
+				_: 3
+			}, 16, ["class"])]),
+			_: 3
+		}));
+	}
+}), ne = /* @__PURE__ */ c({
+	__name: "HoverCardTrigger",
+	props: {
+		reference: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (m(), n(_(N), d({ "data-slot": "hover-card-trigger" }, t), {
+			default: b(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { Q as a, Y as c, K as d, G as f, B as h, $ as i, J as l, H as m, te as n, Z as o, W as p, ee as r, X as s, ne as t, q as u };

package/dist/{camera-D_lnXyR3.js → camera-Cfp_DpaN.js}

@@ -1,4 +1,4 @@
-import { Ku as e, Yu as t, qu as n } from "./components-DPA7UcWP.js";
+import { Ku as e, Uu as t, Wu as n } from "./components-Do7bPo_-.js";
 import { t as r } from "./utils-Cy-ByIEo.js";
 import { r as i, t as a } from "./icon-button-Ghucx7Ah.js";
 import { n as o } from "./i18n-B7nNF_hw.js";
@@ -15,8 +15,8 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 		Object,
 		Array
 	] } },
-	setup(t) {
-		let n = t, { t: p } = o(), { videoRef: g, state: _, actions: v } = e();
+	setup(e) {
+		let n = e, { t: p } = o(), { videoRef: g, state: _, actions: v } = t();
 		function D(e) {
 			g.value = e instanceof HTMLVideoElement ? e : null;
 		}
@@ -56,8 +56,8 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 	}
 }), O = /* @__PURE__ */ p({
 	__name: "camera-provider",
-	setup(e) {
-		let r = g(null), i = g(null), a = v(null), o = t();
+	setup(t) {
+		let r = g(null), i = g(null), a = v(null), o = e();
 		return n({
 			videoRef: r,
 			canvasRef: i,