@usemote/vue 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,46 @@
-# Temporary Holding Version
+# @usemote/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 binding for [Mote](https://mote.hearvie.dev). **799 B** brotlied.
+
+```bash
+pnpm add @usemote/core @usemote/vue
+```
+
+```vue
+<script setup>
+import { FloatingField } from '@usemote/vue';
+</script>
+
+<template>
+  <section style="position: relative; overflow: hidden">
+    <FloatingField mode="bob" set="geo" :count="12" avoid="center" depth />
+    <h1 style="position: relative">Your headline</h1>
+  </section>
+</template>
+```
+
+**The field is a layer.** It fills its nearest positioned ancestor, so that
+parent needs `position: relative`, and content above it needs
+`position: relative` too — otherwise the shapes cover it.
+
+Props match `FieldOptions` exactly, and match `@usemote/react` name for name.
+Unset props fall through to core's defaults.
+
+Written as a render function, not an SFC, so the package needs no Vue compiler
+and stays a plain dependency.
+
+## SSR
+
+Nuxt and `@vue/server-renderer` both work. The server renders frame 0 and the
+client renders identical markup, so there is no hydration mismatch.
+
+## Inspiration
+
+Architecturally modelled on **[Navii](https://github.com/uxderrick/navii)** by
+**[Derrick Tsorme](https://github.com/uxderrick)** — a deterministic avatar
+engine, and the reason this project exists. No code is shared; the debt is
+architectural. If you need avatars, use Navii.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@usemote/core');
+var vue = require('vue');
+
+// src/FloatingField.ts
+var FloatingField = vue.defineComponent({
+  name: "FloatingField",
+  props: {
+    mode: { type: [String, Object], default: void 0 },
+    set: { type: String, default: void 0 },
+    shapes: { type: [String, Array], default: void 0 },
+    packs: { type: Array, default: void 0 },
+    count: { type: Number, default: void 0 },
+    size: { type: Number, default: void 0 },
+    seed: { type: [Number, String], default: void 0 },
+    theme: { type: [String, Array], default: void 0 },
+    depth: { type: Boolean, default: void 0 },
+    avoid: { type: [String, Object], default: void 0 },
+    speed: { type: Number, default: void 0 },
+    interactive: { type: Boolean, default: void 0 },
+    direction: { type: String, default: void 0 },
+    paused: { type: Boolean, default: void 0 },
+    ssrWidth: { type: Number, default: 1200 },
+    ssrHeight: { type: Number, default: 600 }
+  },
+  setup(props) {
+    const el = vue.ref(null);
+    let handle = null;
+    const options = () => {
+      const o = {};
+      if (props.mode !== void 0) o.mode = props.mode;
+      if (props.set !== void 0) o.set = props.set;
+      if (props.shapes !== void 0) o.shapes = props.shapes;
+      if (props.packs !== void 0) o.packs = props.packs;
+      if (props.count !== void 0) o.count = props.count;
+      if (props.size !== void 0) o.size = props.size;
+      if (props.seed !== void 0) o.seed = props.seed;
+      if (props.theme !== void 0) o.theme = props.theme;
+      if (props.depth !== void 0) o.depth = props.depth;
+      if (props.avoid !== void 0) o.avoid = props.avoid;
+      if (props.speed !== void 0) o.speed = props.speed;
+      if (props.interactive !== void 0) o.interactive = props.interactive;
+      if (props.direction !== void 0) o.direction = props.direction;
+      if (props.paused !== void 0) o.paused = props.paused;
+      return o;
+    };
+    const poolKey = vue.computed(
+      () => JSON.stringify([
+        props.packs?.map((p) => `${p.id}@${p.version}`) ?? null,
+        props.shapes ?? null,
+        props.theme ?? null
+      ])
+    );
+    const ssrHTML = vue.computed(
+      () => core.renderFieldHTML({ ...options(), width: props.ssrWidth, height: props.ssrHeight })
+    );
+    const rebuild = () => {
+      if (!el.value) return;
+      handle?.destroy();
+      handle = core.createField(el.value, options());
+    };
+    vue.onMounted(rebuild);
+    vue.onBeforeUnmount(() => {
+      handle?.destroy();
+      handle = null;
+    });
+    vue.watch(
+      () => [
+        poolKey.value,
+        props.seed,
+        props.count,
+        props.size,
+        props.set,
+        props.depth,
+        props.direction,
+        typeof props.mode === "object" ? "custom" : props.mode
+      ],
+      rebuild
+    );
+    vue.watch(
+      () => [props.speed, props.interactive, props.avoid, props.paused],
+      () => {
+        const live = {};
+        if (props.speed !== void 0) live.speed = props.speed;
+        if (props.interactive !== void 0) live.interactive = props.interactive;
+        if (props.avoid !== void 0) live.avoid = props.avoid;
+        if (props.paused !== void 0) live.paused = props.paused;
+        handle?.update(live);
+      }
+    );
+    return () => vue.h("div", {
+      ref: el,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      innerHTML: ssrHTML.value
+    });
+  }
+});
+var FloatingField_default = FloatingField;
+
+exports.FloatingField = FloatingField;
+exports.default = FloatingField_default;

package/dist/index.d.cts

@@ -0,0 +1,157 @@
+import * as _usemote_core from '@usemote/core';
+import { FieldOptions } from '@usemote/core';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare const FloatingField: vue.DefineComponent<vue.ExtractPropTypes<{
+    mode: {
+        type: PropType<FieldOptions["mode"]>;
+        default: undefined;
+    };
+    set: {
+        type: PropType<FieldOptions["set"]>;
+        default: undefined;
+    };
+    shapes: {
+        type: PropType<FieldOptions["shapes"]>;
+        default: undefined;
+    };
+    packs: {
+        type: PropType<FieldOptions["packs"]>;
+        default: undefined;
+    };
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    seed: {
+        type: PropType<FieldOptions["seed"]>;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<FieldOptions["theme"]>;
+        default: undefined;
+    };
+    depth: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    avoid: {
+        type: PropType<FieldOptions["avoid"]>;
+        default: undefined;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    direction: {
+        type: PropType<FieldOptions["direction"]>;
+        default: undefined;
+    };
+    paused: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    ssrWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ssrHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: PropType<FieldOptions["mode"]>;
+        default: undefined;
+    };
+    set: {
+        type: PropType<FieldOptions["set"]>;
+        default: undefined;
+    };
+    shapes: {
+        type: PropType<FieldOptions["shapes"]>;
+        default: undefined;
+    };
+    packs: {
+        type: PropType<FieldOptions["packs"]>;
+        default: undefined;
+    };
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    seed: {
+        type: PropType<FieldOptions["seed"]>;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<FieldOptions["theme"]>;
+        default: undefined;
+    };
+    depth: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    avoid: {
+        type: PropType<FieldOptions["avoid"]>;
+        default: undefined;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    direction: {
+        type: PropType<FieldOptions["direction"]>;
+        default: undefined;
+    };
+    paused: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    ssrWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ssrHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    mode: _usemote_core.MotionId | _usemote_core.MotionPreset | undefined;
+    set: _usemote_core.SetId | undefined;
+    shapes: string | string[] | undefined;
+    packs: _usemote_core.ShapePack[] | undefined;
+    seed: string | number | undefined;
+    theme: string | _usemote_core.ThemeStop[] | undefined;
+    avoid: _usemote_core.AvoidId | _usemote_core.Rect | undefined;
+    direction: _usemote_core.Direction | undefined;
+    count: number;
+    size: number;
+    depth: boolean;
+    speed: number;
+    interactive: boolean;
+    paused: boolean;
+    ssrWidth: number;
+    ssrHeight: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloatingField, FloatingField as default };

package/dist/index.d.ts

@@ -0,0 +1,157 @@
+import * as _usemote_core from '@usemote/core';
+import { FieldOptions } from '@usemote/core';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare const FloatingField: vue.DefineComponent<vue.ExtractPropTypes<{
+    mode: {
+        type: PropType<FieldOptions["mode"]>;
+        default: undefined;
+    };
+    set: {
+        type: PropType<FieldOptions["set"]>;
+        default: undefined;
+    };
+    shapes: {
+        type: PropType<FieldOptions["shapes"]>;
+        default: undefined;
+    };
+    packs: {
+        type: PropType<FieldOptions["packs"]>;
+        default: undefined;
+    };
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    seed: {
+        type: PropType<FieldOptions["seed"]>;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<FieldOptions["theme"]>;
+        default: undefined;
+    };
+    depth: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    avoid: {
+        type: PropType<FieldOptions["avoid"]>;
+        default: undefined;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    direction: {
+        type: PropType<FieldOptions["direction"]>;
+        default: undefined;
+    };
+    paused: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    ssrWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ssrHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: PropType<FieldOptions["mode"]>;
+        default: undefined;
+    };
+    set: {
+        type: PropType<FieldOptions["set"]>;
+        default: undefined;
+    };
+    shapes: {
+        type: PropType<FieldOptions["shapes"]>;
+        default: undefined;
+    };
+    packs: {
+        type: PropType<FieldOptions["packs"]>;
+        default: undefined;
+    };
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    seed: {
+        type: PropType<FieldOptions["seed"]>;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<FieldOptions["theme"]>;
+        default: undefined;
+    };
+    depth: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    avoid: {
+        type: PropType<FieldOptions["avoid"]>;
+        default: undefined;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    direction: {
+        type: PropType<FieldOptions["direction"]>;
+        default: undefined;
+    };
+    paused: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    ssrWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ssrHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    mode: _usemote_core.MotionId | _usemote_core.MotionPreset | undefined;
+    set: _usemote_core.SetId | undefined;
+    shapes: string | string[] | undefined;
+    packs: _usemote_core.ShapePack[] | undefined;
+    seed: string | number | undefined;
+    theme: string | _usemote_core.ThemeStop[] | undefined;
+    avoid: _usemote_core.AvoidId | _usemote_core.Rect | undefined;
+    direction: _usemote_core.Direction | undefined;
+    count: number;
+    size: number;
+    depth: boolean;
+    speed: number;
+    interactive: boolean;
+    paused: boolean;
+    ssrWidth: number;
+    ssrHeight: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloatingField, FloatingField as default };

package/dist/index.js

@@ -0,0 +1,105 @@
+import { renderFieldHTML, createField } from '@usemote/core';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, h } from 'vue';
+
+// src/FloatingField.ts
+var FloatingField = defineComponent({
+  name: "FloatingField",
+  props: {
+    mode: { type: [String, Object], default: void 0 },
+    set: { type: String, default: void 0 },
+    shapes: { type: [String, Array], default: void 0 },
+    packs: { type: Array, default: void 0 },
+    count: { type: Number, default: void 0 },
+    size: { type: Number, default: void 0 },
+    seed: { type: [Number, String], default: void 0 },
+    theme: { type: [String, Array], default: void 0 },
+    depth: { type: Boolean, default: void 0 },
+    avoid: { type: [String, Object], default: void 0 },
+    speed: { type: Number, default: void 0 },
+    interactive: { type: Boolean, default: void 0 },
+    direction: { type: String, default: void 0 },
+    paused: { type: Boolean, default: void 0 },
+    ssrWidth: { type: Number, default: 1200 },
+    ssrHeight: { type: Number, default: 600 }
+  },
+  setup(props) {
+    const el = ref(null);
+    let handle = null;
+    const options = () => {
+      const o = {};
+      if (props.mode !== void 0) o.mode = props.mode;
+      if (props.set !== void 0) o.set = props.set;
+      if (props.shapes !== void 0) o.shapes = props.shapes;
+      if (props.packs !== void 0) o.packs = props.packs;
+      if (props.count !== void 0) o.count = props.count;
+      if (props.size !== void 0) o.size = props.size;
+      if (props.seed !== void 0) o.seed = props.seed;
+      if (props.theme !== void 0) o.theme = props.theme;
+      if (props.depth !== void 0) o.depth = props.depth;
+      if (props.avoid !== void 0) o.avoid = props.avoid;
+      if (props.speed !== void 0) o.speed = props.speed;
+      if (props.interactive !== void 0) o.interactive = props.interactive;
+      if (props.direction !== void 0) o.direction = props.direction;
+      if (props.paused !== void 0) o.paused = props.paused;
+      return o;
+    };
+    const poolKey = computed(
+      () => JSON.stringify([
+        props.packs?.map((p) => `${p.id}@${p.version}`) ?? null,
+        props.shapes ?? null,
+        props.theme ?? null
+      ])
+    );
+    const ssrHTML = computed(
+      () => renderFieldHTML({ ...options(), width: props.ssrWidth, height: props.ssrHeight })
+    );
+    const rebuild = () => {
+      if (!el.value) return;
+      handle?.destroy();
+      handle = createField(el.value, options());
+    };
+    onMounted(rebuild);
+    onBeforeUnmount(() => {
+      handle?.destroy();
+      handle = null;
+    });
+    watch(
+      () => [
+        poolKey.value,
+        props.seed,
+        props.count,
+        props.size,
+        props.set,
+        props.depth,
+        props.direction,
+        typeof props.mode === "object" ? "custom" : props.mode
+      ],
+      rebuild
+    );
+    watch(
+      () => [props.speed, props.interactive, props.avoid, props.paused],
+      () => {
+        const live = {};
+        if (props.speed !== void 0) live.speed = props.speed;
+        if (props.interactive !== void 0) live.interactive = props.interactive;
+        if (props.avoid !== void 0) live.avoid = props.avoid;
+        if (props.paused !== void 0) live.paused = props.paused;
+        handle?.update(live);
+      }
+    );
+    return () => h("div", {
+      ref: el,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      innerHTML: ssrHTML.value
+    });
+  }
+});
+var FloatingField_default = FloatingField;
+
+export { FloatingField, FloatingField_default as default };

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@usemote/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Vue 3 component for Mote — deterministic floating-shape background fields.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oti-adjei/mote.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://mote.hearvie.dev",
+  "bugs": "https://github.com/oti-adjei/mote/issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "size": "size-limit"
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "3 kB"
+    }
+  ],
+  "peerDependencies": {
+    "@usemote/core": "workspace:^0.1.0",
+    "vue": ">=3.4"
+  },
+  "devDependencies": {
+    "@usemote/core": "workspace:*",
+    "vue": "^3.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/server-renderer": "^3.5.0",
+    "happy-dom": "^20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}