@liquiddom/vue 0.2.0-rc.0 → 0.3.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @liquiddom/vue
 
+## 0.3.0-alpha.1
+
+### Minor Changes
+
+- 3bf4a9e: A stopped instance is reported. The new option `onError(err)` is called once when an instance stops for good (a frame that throws, a failed grid allocation for a growth or the first area hint, a failed Canvas2D rebuild after a lost WebGPU device), after its `console.error`; it is never called for a `create()` rejection, a fallback or after `destroy()`. The React and Vue providers (and the Vue plugin) now destroy a stopped instance and expose the reason through the new `useLiquidError()` (Vue also exports `LiquidErrorKey`); a `create()` rejection sets it too, and `config.onError` is still called. `<LiquidElement drag={false}>` and `useLiquidRef({ drag: false })` pass the drag opt-out to `observe()`. An app that observes its elements after `create()` (every adapter app, or `autoObserve: false`) now gets the same grid resolution as `autoObserve`: the first observed elements set the area hint once. A Vue example joins the React one, and both are smoke-tested from the published packages.
+- 1a68179: **liquiddom 0.3 (alpha): the soft-body engine is retired and replaced by an MLS-MPM fluid engine.** This first alpha ships the liquid _at rest_: each observed element is drawn as crisp liquid behind its real DOM text, with reduced motion and print handled. Splash, shake and the pointer field arrive in the next alpha. This is a breaking release; 0.2 code does not run unchanged. The 0.2 engine is preserved at the git tag `softbody-final`.
+
+  ### Old → new
+
+  | 0.2                                                                                                                                          | 0.3                                                                                                                                                                     |
+  | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | option `capacity`                                                                                                                            | `maxElements` (fixed; `observe()` beyond it throws `RangeError`)                                                                                                        |
+  | option `physics` (`LiquidPhysicsConfig`)                                                                                                     | `material: { viscosity, cohesion, recovery }`                                                                                                                           |
+  | export `presets` (goo/jelly/firm)                                                                                                            | removed; material presets `water`/`honey`/`jelly` arrive in the next alpha                                                                                              |
+  | options `colorDefault`, `colorHover`, `colorSource`, `theme`, `refraction`, `preserveBackgrounds`, `snapDurationMs`, `canvasZIndex`, `maxDt` | removed; `create()` throws a `TypeError` naming the replacement                                                                                                         |
+  | `observe(el, liquidType)`                                                                                                                    | `observe(el, { viscosity?, recovery? })`                                                                                                                                |
+  | `grow()`, `tween()`, `getBuffer()`, `spawnDroplet()`, `despawnDroplet()`, `setBackgroundTexture()`                                           | removed                                                                                                                                                                 |
+  | `impulse()`                                                                                                                                  | removed; `splash(el, opts)` arrives in the next alpha                                                                                                                   |
+  | `setPhysicsConfig()`, `getPhysicsConfig()`, `validatePhysicsConfig`                                                                          | removed; `setMaterial()` / `getMaterial()` arrive in the next alpha; `validateMaterial` (@internal)                                                                     |
+  | `refreshTheme()`, `refreshShadow()`                                                                                                          | `refresh(el)`                                                                                                                                                           |
+  | instance property `capacity`                                                                                                                 | `elementCapacity`, plus the new `particleCapacity`                                                                                                                      |
+  | `isReducedMotion`, `isScrolling`, `pointerActive`, `pointerX`, `pointerY`, `preserveBackgrounds`, `isScrollSnapping`                         | removed                                                                                                                                                                 |
+  | `LiquidInstancePanicDetail`, the `liquiddom:instance-panic` event, `SpawnDropletOptions`                                                     | removed (WASM init is single-flight; there is nothing to recover from)                                                                                                  |
+  | React/Vue `useLiquidRef({ liquidType })`, `<LiquidElement liquidType>`                                                                       | `useLiquidRef({ viscosity?, recovery? })`, `<LiquidElement viscosity recovery>` (type names `UseLiquidRefOptions` / `LiquidElementProps` are kept, their shape changed) |
+
+  ### `SplashOptions` changed shape
+
+  In 0.2, `SplashOptions` was `{ threshold, count, jitter?, speedScale?, lifetimeMs?, radius? }` and configured droplet spawning inside `impulse()`. That type is gone in this alpha. The next alpha adds a **different** `SplashOptions`, `{ strength?: number /* 0–2, default 1 */, at?: { x: number; y: number } /* client px */ }`, for `instance.splash(el, opts)`. Code that imports `SplashOptions` must be rewritten, not just recompiled.
+
+  ### Known regression: colours no longer auto-refresh
+
+  0.2 watched every observed element with a MutationObserver and re-read its background colour and box-shadow on `style`/`class` changes. 0.3 snapshots `background-color` and `color` once at `observe()`. Until the extended MutationObserver lands (slice 4), call `instance.refresh(el)` after you change an element's colours (theme switch, class toggle, inline style).
+
+  ### Other behaviour changes
+
+  - `LiquidDOM.create()` rejects with `LiquidWasmLoadError` when the WASM fails to load. The silent mock mode is gone.
+  - Observed elements get `class="liquid-element"` (and `data-liquid-stack` when they need stacking). One `<style id="liquiddom-styles">` is injected per document. `unobserve()` restores the element exactly. Borders and box-shadows of observed elements are not drawn.
+  - The canvas is `aria-hidden="true"`, sits below the observed elements (focus rings stay visible), and is hidden in print and forced-colors.
+  - `renderer: 'auto'` uses Canvas2D until the WebGPU fluid renderer lands. `renderer: 'webgpu'` initialises WebGPU but draws nothing yet (one `console.warn`).
+  - `gravity` is accepted and validated but has no effect yet.
+  - `pause()` is no longer undone when a hidden tab becomes visible again.
+
 ## 0.2.0-rc.0
 
 ### Minor Changes
@@ -7,6 +49,7 @@
 Initial public release. Vue 3.4+ bindings for [`liquiddom`](https://www.npmjs.com/package/liquiddom).
 
 **Exports:**
+
 - `<LiquidProvider :config>` — owns a `LiquidDOMInstance` via provide/inject
 - `LiquidPlugin` — alternative install via `app.use(LiquidPlugin, config?)`
 - `useLiquid()` — returns `Ref<LiquidDOMInstance | null>` (reactive)
@@ -14,6 +57,7 @@ Initial public release. Vue 3.4+ bindings for [`liquiddom`](https://www.npmjs.co
 - `<LiquidElement :as :liquid-type ...attrs>` — drop-in tag wrapping `useLiquidRef`
 
 **Behavior:**
+
 - SSR-safe (provider effect gated on `typeof window`)
 - Pure TypeScript with `h()` render functions — no `.vue` SFC dependency in the published package
 - `liquidType` is captured once on first attach (not reactive)

package/README.md

@@ -1,15 +1,13 @@
 # @liquiddom/vue
 
-Vue 3.4+ bindings for [`liquiddom`](https://www.npmjs.com/package/liquiddom) — WASM-driven soft-body physics on real DOM elements.
+Vue 3.4+ bindings for [`liquiddom`](https://www.npmjs.com/package/liquiddom): WASM-driven fluid dynamics on real DOM elements.
 
 ## Install
 
 ```bash
-npm install liquiddom @liquiddom/vue vue
+npm install liquiddom@alpha @liquiddom/vue@alpha
 ```
 
-`liquiddom` is a peer dependency so a single WASM instance is shared across your app.
-
 ## Quickstart
 
 ```vue
@@ -18,98 +16,66 @@ import { LiquidProvider, LiquidElement } from "@liquiddom/vue";
 </script>
 
 <template>
-  <LiquidProvider :config="{ capacity: 16, theme: { fusionRadius: 50 } }">
-    <LiquidElement as="button">Click me</LiquidElement>
-    <LiquidElement as="a" href="#">Also liquid</LiquidElement>
+  <LiquidProvider :config="{ material: { viscosity: 0.6, cohesion: 0.85, recovery: 0.4 } }">
+    <LiquidElement as="button" :viscosity="0.3">Splash</LiquidElement>
   </LiquidProvider>
 </template>
 ```
 
-## Three usage patterns
-
-### 1. `<LiquidElement>` — drop-in tag
+## API
 
-Easiest. Wraps `useLiquidRef` and observes on mount.
+| Export | Purpose |
+|---|---|
+| `<LiquidProvider :config>` | Owns one `LiquidDOMInstance` via provide/inject; `config` is read once on mount |
+| `LiquidPlugin` | Alternative install: `app.use(LiquidPlugin, config?)` |
+| `LiquidKey`, `LiquidErrorKey` | The injection keys (instance, error) |
+| `useLiquid()` | `Ref<LiquidDOMInstance \| null>`; `null` before init and after the instance stopped |
+| `useLiquidError()` | `Ref<unknown>`: the stop's error or the `create()` rejection; `null` otherwise |
+| `useLiquidRef<T>({ viscosity?, recovery?, drag? }?)` | Template ref that observes once mounted; options are read once at setup |
+| `<LiquidElement :as :viscosity :recovery :drag>` | Convenience tag; attrs, class, style and events are forwarded |
 
-```vue
-<LiquidElement as="button" :liquid-type="4 /* Shake */">
-  Shaky
-</LiquidElement>
-```
+SSR-safe: nothing runs on the server.
 
-### 2. `useLiquidRef` — template ref on your own element
+## When the liquid stops
 
-When you need full control over the element.
+If the instance stops for good (a frame that throws, for example), the provider (or the plugin) destroys it: the elements are restored, `useLiquid().value` is `null` and `useLiquidError().value` is the error. A `create()` that rejects sets the same error. There is no automatic retry; remount the provider (`v-if` or a new `key`) to try again. Your own `config.onError` is still called.
 
 ```vue
 <script setup lang="ts">
-import { useLiquidRef } from "@liquiddom/vue";
-
-const cardRef = useLiquidRef<HTMLDivElement>({ liquidType: 3 /* Dragged */ });
+import { useLiquidError } from "@liquiddom/vue";
+const error = useLiquidError();
 </script>
 
 <template>
-  <div ref="cardRef" class="my-card">Drag me</div>
+  <p v-if="error" role="alert">Liquid stopped: {{ String(error) }}</p>
 </template>
 ```
 
-### 3. `useLiquid` — imperative access
+`<LiquidElement :drag="false">` (or `useLiquidRef({ drag: false })`) opts an element out of every drag; like `viscosity`, it is read once.
+
+## Material
 
-For one-off actions like `impulse()`, `tween()`, `spawnDroplet()`.
+`config` is read once on mount, so changing `config.material` later does nothing. Change the material live through the instance, for example with one of the core's `presets` (`water`, `honey`, `jelly`). `useLiquid()` returns a `Ref`, so read `.value`:
 
 ```vue
 <script setup lang="ts">
-import { useLiquid, useLiquidRef } from "@liquiddom/vue";
+import { presets } from "liquiddom";
+import { useLiquid } from "@liquiddom/vue";
 
 const liquid = useLiquid();
-const buttonRef = useLiquidRef<HTMLButtonElement>();
-
-function splash() {
-  if (liquid.value && buttonRef.value) {
-    liquid.value.impulse(buttonRef.value, { magnitude: 20 });
-  }
-}
 </script>
 
 <template>
-  <button ref="buttonRef" @click="splash">Splash me</button>
+  <button @click="liquid?.setMaterial(presets.honey)">Honey</button>
 </template>
 ```
 
-## Plugin install (alternative to `<LiquidProvider>`)
-
-```ts
-import { createApp } from "vue";
-import { LiquidPlugin } from "@liquiddom/vue";
-import App from "./App.vue";
-
-createApp(App)
-  .use(LiquidPlugin, { capacity: 16 })
-  .mount("#app");
-```
-
-The plugin attaches the instance app-wide; `useLiquid()` works without a surrounding `<LiquidProvider>`. The plugin monkey-patches `app.unmount` for cleanup.
-
-## API
-
-| Export | Description |
-|--------|-------------|
-| `<LiquidProvider :config>` | Owns a `LiquidDOMInstance` via provide/inject. `config` captured once on mount. |
-| `LiquidPlugin` | Alternative install via `app.use(LiquidPlugin, config?)`. |
-| `useLiquid()` | Returns `Ref<LiquidDOMInstance \| null>`. Reactive — updates when async create resolves. |
-| `useLiquidRef<T>(opts?)` | Template ref that auto-observes / unobserves across lifecycle. Internal watch uses `flush: "post"` so the element is mounted before observe fires. |
-| `<LiquidElement :as :liquid-type ...attrs>` | Convenience tag. Uses `inheritAttrs: false` + manual spread so class/style/events/data-* forward correctly. |
-
-## Notes
-
-- **SSR-safe** — provider effect gated on `typeof window`; `useLiquidRef`'s watch doesn't fire on the server.
-- **No `.vue` SFC dependency in the package** — adapter is pure TypeScript using `h()` render functions, so it can be consumed without `vite-plugin-vue` configured for `node_modules`.
-- **`liquidType` is captured at first attach** — `:liquid-type="reactive"` looks reactive but is read once. Change requires re-mount.
+In a template the ref is unwrapped; in script use `useLiquid().value?.setMaterial(...)`. `getMaterial()` returns the resolved material. A preset also works at create time: `<LiquidProvider :config="{ material: presets.jelly }">`.
 
-## Full options + imperative API
+## Migrating from 0.2
 
-All options and methods exposed via `:config` and `useLiquid()` come straight from [`liquiddom`'s core API](https://www.npmjs.com/package/liquiddom).
+`useLiquidRef({ liquidType })` and `<LiquidElement :liquidType>` are gone; use `{ viscosity?, recovery? }`.
 
 ## License
 
-[MIT](./LICENSE) © Dennis Schmock
+MIT

package/dist/index.d.ts

@@ -2,9 +2,11 @@
  * @liquiddom/vue — Vue 3.4+ bindings.
  */
 import { type InjectionKey, type Plugin, type PropType, type Ref } from "vue";
-import { type LiquidDOMInstance, type LiquidOptions } from "liquiddom";
+import { type ElementOptions, type LiquidDOMInstance, type LiquidOptions } from "liquiddom";
 /** Injection key used by both `<LiquidProvider>` and `LiquidPlugin`. */
 export declare const LiquidKey: InjectionKey<Ref<LiquidDOMInstance | null>>;
+/** W85 (D85-2): injection key of the error that left the provider (or the plugin) without an instance. */
+export declare const LiquidErrorKey: InjectionKey<Ref<unknown>>;
 export declare const LiquidProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     config: {
         type: PropType<LiquidOptions>;
@@ -17,17 +19,20 @@ export declare const LiquidProvider: import("vue").DefineComponent<import("vue")
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const LiquidPlugin: Plugin<[LiquidOptions?]>;
-/** Read the live instance from injection. Null ref outside a provider/plugin. */
+/** Read the live instance from injection. Null ref outside a provider/plugin and once the instance stopped. */
 export declare function useLiquid(): Ref<LiquidDOMInstance | null>;
-export interface UseLiquidRefOptions {
-    liquidType?: number;
-}
+/**
+ * W85 (D85-2): `Ref` of the error that left the provider (or the plugin) without an instance: a
+ * stop's error (the instance is destroyed) or the create() rejection; null otherwise and outside a
+ * provider. No retry: remount the provider (`v-if`, `key`) to create a new instance.
+ */
+export declare function useLiquidError(): Ref<unknown>;
+/** Element options (viscosity, recovery, drag), captured once at setup (D66-4). */
+export type UseLiquidRefOptions = ElementOptions;
 /**
  * Template-ref composable: auto-observes when both element and instance are ready.
- *
- * `flush: "post"` is required so the watch fires AFTER Vue's DOM commit — observing
- * earlier would miss the mounted node. `liquidType` is captured once at setup;
- * changes to a `:liquidType="..."` binding after mount are NOT reactive (v1 limitation).
+ * `flush: "post"` so the watch fires after Vue's DOM commit. Options are read
+ * once at setup; changing a bound prop later has no effect (v1 limitation).
  */
 export declare function useLiquidRef<T extends HTMLElement = HTMLElement>(opts?: UseLiquidRefOptions): Ref<T | null>;
 export declare const LiquidElement: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -35,10 +40,18 @@ export declare const LiquidElement: import("vue").DefineComponent<import("vue").
         type: StringConstructor;
         default: string;
     };
-    liquidType: {
+    viscosity: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    recovery: {
         type: NumberConstructor;
         default: undefined;
     };
+    drag: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -46,11 +59,21 @@ export declare const LiquidElement: import("vue").DefineComponent<import("vue").
         type: StringConstructor;
         default: string;
     };
-    liquidType: {
+    viscosity: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    recovery: {
         type: NumberConstructor;
         default: undefined;
     };
+    drag: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
+    viscosity: number;
+    recovery: number;
+    drag: boolean;
     as: string;
-    liquidType: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/index.js

@@ -1,33 +1,78 @@
 /**
  * @liquiddom/vue — Vue 3.4+ bindings.
  */
-import { defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, watch, } from "vue";
+import { defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch, } from "vue";
 import { LiquidDOM } from "liquiddom";
 /** Injection key used by both `<LiquidProvider>` and `LiquidPlugin`. */
 export const LiquidKey = Symbol("LiquidDOM");
+/** W85 (D85-2): injection key of the error that left the provider (or the plugin) without an instance. */
+export const LiquidErrorKey = Symbol("LiquidDOMError");
+/**
+ * Kept identical to withOnError in packages/react/src/index.tsx.
+ * W85 (D85-2): `config` with the adapter's handler chained in front of `config.onError`, which is
+ * still called, after it. An `onError` that is not a function is passed on unchanged, so create()
+ * rejects with core's TypeError (design resolution 9).
+ */
+function withOnError(config, own) {
+    const theirs = config?.onError;
+    if (theirs !== undefined && typeof theirs !== "function")
+        return { ...config };
+    const chained = theirs;
+    return {
+        ...config,
+        onError: (err) => {
+            own(err);
+            chained?.(err);
+        },
+    };
+}
+/**
+ * W85 (D85-2): creates the instance of a provider or the plugin into its refs. On a stop (core's
+ * onError; synchronous, design resolution 2) the instance is destroyed, `instance` becomes null and
+ * `error` the stop's error; a create() rejection sets `error` too (its console.error stays). No
+ * retry. Once `gone()` (unmounted) a resolving instance is destroyed on arrival, as is one that
+ * stopped while create() still ran (design resolution 11).
+ */
+function createInto(config, instance, error, gone, owner) {
+    let stopped = false;
+    const onStop = (err) => {
+        if (gone() || stopped)
+            return;
+        stopped = true;
+        const inst = instance.value;
+        instance.value = null;
+        inst?.destroy();
+        error.value = err;
+    };
+    // A then pair, not then/catch: a throw inside the resolve body (a user's flush:"sync" watcher)
+    // must not be reported as a create failure while the instance stays live.
+    LiquidDOM.create(withOnError(config, onStop)).then((inst) => {
+        if (gone() || stopped) {
+            // Race path: the owner unmounted before create() resolved — instance.value was never
+            // assigned, so this branch owns the destroy (also for an instance that stopped meanwhile).
+            inst.destroy();
+            return;
+        }
+        instance.value = inst;
+    }, (err) => {
+        console.error(`[liquiddom/vue] ${owner} failed to create instance:`, err);
+        if (!gone())
+            error.value = err;
+    });
+}
 export const LiquidProvider = defineComponent({
     name: "LiquidProvider",
     props: { config: { type: Object } },
     setup(props, { slots }) {
         const instance = ref(null);
+        const error = shallowRef(null);
         provide(LiquidKey, instance);
+        provide(LiquidErrorKey, error);
         let cancelled = false;
-        onMounted(async () => {
+        onMounted(() => {
             if (typeof window === "undefined")
                 return;
-            try {
-                const inst = await LiquidDOM.create(props.config);
-                if (cancelled) {
-                    // Race path: unmount fired before create resolved — instance.value
-                    // was never assigned, so this branch owns the destroy.
-                    inst.destroy();
-                    return;
-                }
-                instance.value = inst;
-            }
-            catch (err) {
-                console.error("[liquiddom/vue] LiquidProvider failed to create instance:", err);
-            }
+            createInto(props.config, instance, error, () => cancelled, "LiquidProvider");
         });
         onBeforeUnmount(() => {
             cancelled = true;
@@ -40,29 +85,19 @@ export const LiquidProvider = defineComponent({
 export const LiquidPlugin = {
     install(app, config) {
         const instance = ref(null);
+        const error = shallowRef(null);
         app.provide(LiquidKey, instance);
+        app.provide(LiquidErrorKey, error);
         if (typeof window === "undefined")
             return;
         let unmounted = false;
-        LiquidDOM.create(config)
-            .then((inst) => {
-            if (unmounted) {
-                // Race path: app.unmount() fired before create() resolved.
-                // The unmount wrapper below could not destroy because instance.value was still null,
-                // so this branch owns the destroy. Do NOT delete without restoring the symmetric guard.
-                inst.destroy();
-                return;
-            }
-            instance.value = inst;
-        })
-            .catch((err) => {
-            console.error("[liquiddom/vue] LiquidPlugin failed to create instance:", err);
-        });
+        // The "app.unmount() BEFORE create() resolved" path is handled in createInto (destroy on arrival).
+        createInto(config, instance, error, () => unmounted, "LiquidPlugin");
         const origUnmount = app.unmount.bind(app);
         app.unmount = () => {
             unmounted = true;
             // Race-symmetric destroy: handles "app.unmount() AFTER create() resolved".
-            // The "BEFORE create() resolved" path is handled in the .then() above. Both
+            // The "BEFORE create() resolved" path is handled in createInto. Both
             // branches are required for full cleanup coverage.
             instance.value?.destroy();
             instance.value = null;
@@ -70,28 +105,41 @@ export const LiquidPlugin = {
         };
     },
 };
-/** Read the live instance from injection. Null ref outside a provider/plugin. */
+/** Read the live instance from injection. Null ref outside a provider/plugin and once the instance stopped. */
 export function useLiquid() {
     return inject(LiquidKey, () => ref(null), true);
 }
+/**
+ * W85 (D85-2): `Ref` of the error that left the provider (or the plugin) without an instance: a
+ * stop's error (the instance is destroyed) or the create() rejection; null otherwise and outside a
+ * provider. No retry: remount the provider (`v-if`, `key`) to create a new instance.
+ */
+export function useLiquidError() {
+    return inject(LiquidErrorKey, () => shallowRef(null), true);
+}
+/** Kept identical to pickElementOptions in packages/react/src/index.tsx. W85 (D85-3, design resolution 8): every own key whose value is defined; none → undefined. */
+function pickElementOptions(opts) {
+    if (!opts)
+        return undefined;
+    const out = {};
+    for (const [key, value] of Object.entries(opts))
+        if (value !== undefined)
+            out[key] = value;
+    return Object.keys(out).length === 0 ? undefined : out;
+}
 /**
  * Template-ref composable: auto-observes when both element and instance are ready.
- *
- * `flush: "post"` is required so the watch fires AFTER Vue's DOM commit — observing
- * earlier would miss the mounted node. `liquidType` is captured once at setup;
- * changes to a `:liquidType="..."` binding after mount are NOT reactive (v1 limitation).
+ * `flush: "post"` so the watch fires after Vue's DOM commit. Options are read
+ * once at setup; changing a bound prop later has no effect (v1 limitation).
  */
 export function useLiquidRef(opts) {
     const instance = useLiquid();
-    // Vue's generic Ref<T> erases to Ref<UnwrapRef<T> | null> through `ref()`,
-    // which doesn't structurally match the function signature `Ref<T | null>`.
-    // Casting at the type-construction site keeps the public API contract clean.
     const elRef = ref(null);
-    const liquidType = opts?.liquidType;
+    const elementOptions = pickElementOptions(opts);
     watch([elRef, instance], ([el, inst], _prev, onCleanup) => {
         if (!el || !inst)
             return;
-        inst.observe(el, liquidType);
+        inst.observe(el, elementOptions);
         onCleanup(() => {
             inst.unobserve(el);
         });
@@ -103,10 +151,13 @@ export const LiquidElement = defineComponent({
     inheritAttrs: false,
     props: {
         as: { type: String, default: "div" },
-        liquidType: { type: Number, default: undefined },
+        viscosity: { type: Number, default: undefined },
+        recovery: { type: Number, default: undefined },
+        // W85 (D85-3): `default: undefined`, since Vue casts an absent Boolean prop to false.
+        drag: { type: Boolean, default: undefined },
     },
     setup(props, { slots, attrs }) {
-        const elRef = useLiquidRef({ liquidType: props.liquidType });
+        const elRef = useLiquidRef({ viscosity: props.viscosity, recovery: props.recovery, drag: props.drag });
         return () => h(props.as, { ...attrs, ref: elRef }, slots.default?.());
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liquiddom/vue",
-  "version": "0.2.0-rc.0",
+  "version": "0.3.0-alpha.1",
   "description": "Vue 3 bindings for liquiddom",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,7 +24,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "liquiddom": "^0.2.0-rc.0",
+    "liquiddom": "^0.3.0-alpha.0",
     "vue": "^3.4.0"
   },
   "author": "Dennis Schmock",