@simplr-ai/vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Simplr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,261 @@
+# @simplr-ai/vue
+
+Idiomatic **Vue 3** adapter for the [Simplr](https://docs.simplr.so/docs/sdks/) platform.
+
+This package is a **thin adapter** over the browser core SDK
+[`@simplr-ai/js`](../simplr-js-sdk). It does **not** reimplement any
+feature — it exposes the core SDK's full surface through Vue primitives: a
+plugin, composables, components and a directive. Every client feature of the
+core SDK has an idiomatic Vue binding:
+
+| Feature | Vue binding |
+| --- | --- |
+| Device fingerprint | `useDeviceSignals()`, `useSimplr().collectDeviceSignals()` |
+| Behavioral biometrics | `useSimplr()`, `<SimplrProtectedInput>`, `v-simplr-protect` |
+| Fraud/identity collect | `useSimplr().collect()`, `<SimplrProtectedForm>` |
+| Feature flags (local eval) | `useFeatureFlag()`, `useFeatureFlags()` |
+| Profiles / identify | `useProfiles().identify()` |
+| Order scoring | `useProfiles().submitOrder()` |
+| RUM (full) | `useRum()`, `useTrackView()`, `useTrackAction()`, `useTrackError()`, `useRumUser()`, `useRumAttributes()`, `useRumLogger()`, `useTrackAsync()`, `<RumView>`, `<RumErrorBoundary>`, `installRumErrorHandler()` |
+| AI delegation | `useAIDelegation()`, `useDelegations()` |
+
+## Install
+
+```bash
+npm i @simplr-ai/vue @simplr-ai/js vue
+```
+
+`vue` (`^3.3`) and `@simplr-ai/js` are **peer dependencies**.
+
+## Plugin setup
+
+Create the plugin with `createSimplr(config)` and install it with `app.use()`.
+It builds the configured core SDK instances (`SimplrFraud`, `SimplrFlags`,
+`SimplrProfiles`, `SimplrRUM`, `SimplrAI`) and provides them via Vue's
+`provide`/`inject`.
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { createSimplr, installRumErrorHandler } from "@simplr-ai/vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(
+  createSimplr({
+    apiKey: "pk_live_…",          // public key — safe for the client
+    flags: true,                  // enable feature flags (initialize() runs automatically)
+    profiles: true,               // enable anonymous profiles + order scoring
+    rum: { apiKey: "pk_live_…", applicationId: "my-web-app" },
+    ai: true,                     // enable AI delegation
+  }),
+);
+
+// Optional: forward uncaught Vue errors to RUM.
+installRumErrorHandler(app);
+
+app.mount("#app");
+```
+
+Any sub-feature you omit simply isn't created — `createSimplr({ apiKey })`
+gives you just the core fraud client.
+
+The plugin also registers the global `v-simplr-protect` directive.
+
+---
+
+## Device signals
+
+```vue
+<script setup lang="ts">
+import { useDeviceSignals } from "@simplr-ai/vue";
+
+const { signals, loading, error, refresh } = useDeviceSignals();
+</script>
+
+<template>
+  <pre v-if="signals">{{ signals.fingerprint }}</pre>
+  <button @click="refresh" :disabled="loading">Re-collect</button>
+</template>
+```
+
+`useSimplr()` gives you the raw client plus `collect()`, `reset()`,
+`startTracking()`, `stopTracking()` and `trackInput()`.
+
+## Feature flags
+
+Flags are evaluated **locally** with the same murmurhash bucketing as every
+other Simplr SDK. The composables re-evaluate reactively as flags load/refresh.
+
+```vue
+<script setup lang="ts">
+import { useFeatureFlag, useFeatureFlags } from "@simplr-ai/vue";
+
+const { enabled, isReady } = useFeatureFlag("new-checkout", {
+  userId: "user_123",
+  attributes: { plan: "pro" },
+});
+
+// Or the whole map:
+const { flags, isEnabled, setUser } = useFeatureFlags();
+</script>
+
+<template>
+  <NewCheckout v-if="enabled" />
+</template>
+```
+
+## Profiles & order scoring
+
+Device fingerprint auto-attach is wired for you by the plugin.
+
+```vue
+<script setup lang="ts">
+import { useProfiles } from "@simplr-ai/vue";
+
+const { identify, submitOrder, getProfileRisk, reportOutcome, loading } =
+  useProfiles();
+
+async function checkout() {
+  await identify("user_123");
+  const result = await submitOrder({
+    external_order_id: "ord_1",
+    external_id: "user_123",
+    amount_cents: 4999,
+    currency: "USD",
+  });
+  if (result.risk.flagged_for_review) {
+    await reportOutcome("user_123", "fraud");
+  }
+}
+</script>
+```
+
+## RUM (Real User Monitoring)
+
+```vue
+<script setup lang="ts">
+import {
+  useTrackView,
+  useTrackAction,
+  useTrackError,
+  useRumUser,
+  useRumLogger,
+} from "@simplr-ai/vue";
+
+useTrackView("Dashboard");           // tracks a view on mount
+
+const track = useTrackAction();
+const trackError = useTrackError();
+const { setUser } = useRumUser();
+const log = useRumLogger();
+
+setUser("user_123", { plan: "pro" });
+log.info("dashboard loaded");
+
+function onBuy() {
+  track("Buy clicked", "click");
+}
+</script>
+```
+
+Declarative helpers:
+
+```vue
+<template>
+  <RumView name="Checkout">
+    <RumErrorBoundary @error="report">
+      <template #fallback="{ error }">Oops: {{ error.message }}</template>
+      <CheckoutForm />
+    </RumErrorBoundary>
+  </RumView>
+</template>
+
+<script setup lang="ts">
+import { RumView, RumErrorBoundary } from "@simplr-ai/vue";
+function report(e: Error) { /* … */ }
+</script>
+```
+
+## AI delegation
+
+OAuth-like AI authentication.
+
+```vue
+<script setup lang="ts">
+import { useAIDelegation, useDelegations } from "@simplr-ai/vue";
+
+const { connect, createDelegation, validate, revoke, stats } = useAIDelegation();
+const { delegations, refresh, revoke: revokeOne } = useDelegations(undefined, "user_123");
+
+async function link() {
+  const res = await connect({ userId: "user_123", binding: "verified_device" });
+  if (res.success) console.log(res.delegationId);
+}
+</script>
+```
+
+## Protected form & input
+
+`<SimplrProtectedForm>` collects device + behavioral signals on submit and
+emits them; `<SimplrProtectedInput>` auto-attaches keystroke tracking.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  SimplrProtectedForm,
+  SimplrProtectedInput,
+} from "@simplr-ai/vue";
+import type { CollectedSignals } from "@simplr-ai/vue";
+
+const email = ref("");
+
+async function onSubmit(signals: CollectedSignals) {
+  await fetch("/api/signup", {
+    method: "POST",
+    body: JSON.stringify({ email: email.value, signals }),
+  });
+}
+</script>
+
+<template>
+  <SimplrProtectedForm @submit="onSubmit">
+    <SimplrProtectedInput v-model="email" field="email" type="email" />
+    <button type="submit">Sign up</button>
+  </SimplrProtectedForm>
+</template>
+```
+
+The `v-simplr-protect` directive marks any input with `data-simplr-field` and
+(when given a `trackInput` factory) attaches keystroke handlers:
+
+```vue
+<template>
+  <input v-simplr-protect="'email'" />
+  <!-- or wire the core tracker explicitly: -->
+  <input v-simplr-protect="{ field: 'email', trackInput }" />
+</template>
+
+<script setup lang="ts">
+import { useSimplr } from "@simplr-ai/vue";
+const { trackInput } = useSimplr();
+</script>
+```
+
+## What this package wraps
+
+Everything here delegates to `@simplr-ai/js`. The full core surface —
+`SimplrFraud`, `SimplrFlags`, `SimplrProfiles`, `SimplrRUM`, `SimplrAI`, plus
+helpers like `getDeviceId`, `murmurHash3`, `createFingerprintHash` and all
+types — is **re-exported** from `@simplr-ai/vue` so you can import everything
+from one place.
+
+## Docs
+
+Full documentation: <https://docs.simplr.so/docs/sdks/> (see the **Vue** page).
+
+## License
+
+MIT