@abraca/nuxt 2.0.1 → 2.0.4

package/dist/runtime/components/APasswordResetRequestModal.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false, default: false },
+  sent: { type: Boolean, required: false, default: false },
+  error: { type: [String, null], required: false },
+  title: { type: String, required: false, default: "Reset your password" },
+  subtitle: { type: String, required: false, default: "Enter your username or email and we'll send you a reset link." },
+  showSignInLink: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:open", "submit", "signin"]);
+const open = computed({
+  get: () => !!props.open,
+  set: (v) => emit("update:open", v)
+});
+const identifier = ref("");
+watch(() => props.open, (v) => {
+  if (!v) return;
+  identifier.value = "";
+});
+const canSubmit = computed(
+  () => !!identifier.value.trim() && !props.loading && !props.sent
+);
+function submit() {
+  if (!canSubmit.value) return;
+  emit("submit", { identifier: identifier.value.trim() });
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="title"
+    :ui="{ content: 'sm:max-w-md' }"
+  >
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <UAlert
+          v-if="sent"
+          color="success"
+          variant="soft"
+          icon="i-lucide-mail-check"
+          title="Check your inbox"
+          description="If an account matches that identifier, we've sent a password reset link. The link expires shortly — use it soon."
+        />
+
+        <template v-else>
+          <p class="text-sm text-(--ui-text-muted)">
+            {{ subtitle }}
+          </p>
+
+          <UAlert
+            v-if="error"
+            color="error"
+            variant="soft"
+            icon="i-lucide-triangle-alert"
+            :description="error"
+          />
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-(--ui-text-muted)">Username or email</label>
+            <UInput
+              v-model="identifier"
+              size="md"
+              autofocus
+              autocomplete="username"
+              placeholder="your-handle or you@example.com"
+              icon="i-lucide-mail-question"
+              @keydown.enter="submit"
+            />
+          </div>
+
+          <div
+            v-if="showSignInLink"
+            class="-mt-1 text-xs"
+          >
+            <UButton
+              variant="link"
+              color="neutral"
+              size="xs"
+              label="Back to sign in"
+              @click="emit('signin')"
+            />
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex items-center justify-end gap-2 w-full">
+        <UButton
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          :label="sent ? 'Close' : 'Cancel'"
+          :disabled="loading"
+          @click="open = false"
+        />
+        <UButton
+          v-if="!sent"
+          color="primary"
+          size="sm"
+          icon="i-lucide-mail"
+          label="Send reset link"
+          :loading="loading"
+          :disabled="!canSubmit"
+          @click="submit"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/APasswordResetRequestModal.vue.d.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    open?: boolean;
+    loading?: boolean;
+    /**
+     * Flip to true after the consumer's submit handler resolves; flips the modal to the
+     *  "we sent an email if that account exists" confirmation copy.
+     */
+    sent?: boolean;
+    error?: string | null;
+    title?: string;
+    subtitle?: string;
+    /** Show the "Back to sign in" link in the footer. */
+    showSignInLink?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: {
+        identifier: string;
+    }) => any;
+    "update:open": (v: boolean) => any;
+    signin: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: {
+        identifier: string;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+    onSignin?: (() => any) | undefined;
+}>, {
+    subtitle: string;
+    title: string;
+    loading: boolean;
+    sent: boolean;
+    showSignInLink: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ASetPasswordCard.d.vue.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    loading?: boolean;
+    error?: string | null;
+    /** Flip to true after a successful set — card shows a success state. */
+    success?: boolean;
+    title?: string;
+    subtitle?: string;
+    minLength?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: {
+        password: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: {
+        password: string;
+    }) => any) | undefined;
+}>, {
+    subtitle: string;
+    title: string;
+    success: boolean;
+    minLength: number;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ASetPasswordCard.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  loading: { type: Boolean, required: false, default: false },
+  error: { type: [String, null], required: false },
+  success: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: "Add a password" },
+  subtitle: { type: String, required: false, default: "Your account currently relies on this device's passkey. Adding a password lets you sign in from a second device or recover access if this device is lost." },
+  minLength: { type: Number, required: false, default: 8 }
+});
+const emit = defineEmits(["submit"]);
+const password = ref("");
+const confirm = ref("");
+const showPassword = ref(false);
+watch(() => props.success, (v) => {
+  if (!v) return;
+  password.value = "";
+  confirm.value = "";
+  showPassword.value = false;
+});
+const passwordTooShort = computed(
+  () => password.value.length > 0 && password.value.length < props.minLength
+);
+const confirmMismatch = computed(
+  () => confirm.value.length > 0 && confirm.value !== password.value
+);
+const canSubmit = computed(
+  () => password.value.length >= props.minLength && confirm.value === password.value && !props.loading && !props.success
+);
+function submit() {
+  if (!canSubmit.value) return;
+  emit("submit", { password: password.value });
+}
+</script>
+
+<template>
+  <div class="set-pw-card">
+    <div class="set-pw-head">
+      <UIcon
+        name="i-lucide-key-square"
+        class="size-5 text-(--ui-primary) shrink-0"
+      />
+      <div class="flex-1">
+        <h4 class="set-pw-title">
+          {{ title }}
+        </h4>
+        <p class="set-pw-sub">
+          {{ subtitle }}
+        </p>
+      </div>
+    </div>
+
+    <UAlert
+      v-if="success"
+      color="success"
+      variant="soft"
+      icon="i-lucide-check"
+      title="Password set"
+      description="You can now sign in with your username and password from another device."
+    />
+
+    <UAlert
+      v-else-if="error"
+      color="error"
+      variant="soft"
+      icon="i-lucide-triangle-alert"
+      :description="error"
+    />
+
+    <template v-if="!success">
+      <div class="set-pw-field">
+        <label class="set-pw-label">New password</label>
+        <UInput
+          v-model="password"
+          :type="showPassword ? 'text' : 'password'"
+          size="md"
+          autocomplete="new-password"
+          :placeholder="`${minLength}+ characters`"
+          icon="i-lucide-lock"
+          :ui="{ trailing: 'pe-1' }"
+          @keydown.enter="submit"
+        >
+          <template #trailing>
+            <UButton
+              tabindex="-1"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              :icon="showPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+              :aria-label="showPassword ? 'Hide password' : 'Show password'"
+              @click="showPassword = !showPassword"
+            />
+          </template>
+        </UInput>
+        <p
+          v-if="passwordTooShort"
+          class="set-pw-err"
+        >
+          At least {{ minLength }} characters.
+        </p>
+      </div>
+
+      <div class="set-pw-field">
+        <label class="set-pw-label">Confirm</label>
+        <UInput
+          v-model="confirm"
+          :type="showPassword ? 'text' : 'password'"
+          size="md"
+          autocomplete="new-password"
+          placeholder="Type it again"
+          icon="i-lucide-shield-check"
+          @keydown.enter="submit"
+        />
+        <p
+          v-if="confirmMismatch"
+          class="set-pw-err"
+        >
+          Passwords don't match.
+        </p>
+      </div>
+
+      <div class="set-pw-actions">
+        <UButton
+          color="primary"
+          size="sm"
+          icon="i-lucide-key-round"
+          label="Set password"
+          :loading="loading"
+          :disabled="!canSubmit"
+          @click="submit"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.set-pw-card{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:.6rem;display:flex;flex-direction:column;gap:.75rem;padding:1rem}.set-pw-head{align-items:flex-start;display:flex;gap:.6rem}.set-pw-title{color:var(--ui-text-highlighted);font-size:.875rem;font-weight:600;margin:0}.set-pw-sub{color:var(--ui-text-muted);font-size:.8125rem;line-height:1.5;margin:.2rem 0 0}.set-pw-field{display:flex;flex-direction:column;gap:.25rem}.set-pw-label{color:var(--ui-text-muted);font-size:.7rem;font-weight:500}.set-pw-err{color:var(--ui-color-error-500);font-size:.7rem;margin:0}.set-pw-actions{display:flex;justify-content:flex-end;padding-top:.25rem}
+</style>

package/dist/runtime/components/ASetPasswordCard.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    loading?: boolean;
+    error?: string | null;
+    /** Flip to true after a successful set — card shows a success state. */
+    success?: boolean;
+    title?: string;
+    subtitle?: string;
+    minLength?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: {
+        password: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: {
+        password: string;
+    }) => any) | undefined;
+}>, {
+    subtitle: string;
+    title: string;
+    success: boolean;
+    minLength: number;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/AAccordion.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
@@ -13,6 +14,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/AAccordion.vue

@@ -2,6 +2,7 @@
 import { computed, ref, useAttrs, watch } from "vue";
 import { useAAField } from "../../composables/useAAField";
 import { useAAUIState } from "../../composables/useAAUIState";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
 import AHoverItem from "./AHoverItem.vue";
 function itemId(item) {
   if (item == null) return "";
@@ -18,10 +19,12 @@ const props = defineProps({
   fieldKey: { type: String, required: true },
   awareness: { type: Boolean, required: false, default: true },
   live: { type: Boolean, required: false, default: false },
+  followOnly: { type: Boolean, required: false, default: false },
   total: { type: Boolean, required: false, default: false }
 });
+const { isFollowing } = useAAFollowPeer();
 const enableAwareness = computed(() => props.awareness || props.total);
-const enableLive = computed(() => props.live || props.total);
+const enableLive = computed(() => props.live || props.total || props.followOnly && isFollowing.value);
 const attrs = useAttrs();
 const { hoverers, focusers, hoverHandlers } = useAAField(() => props.fieldKey);
 const liveExpanded = useAAUIState(() => `${props.fieldKey}:expanded`, { defaultValue: "" });
@@ -37,6 +40,13 @@ watch(local, (val) => {
   if (!enableLive.value) return;
   if (JSON.stringify(liveExpanded.value) !== JSON.stringify(val)) liveExpanded.value = val;
 });
+watch(enableLive, (now, prev) => {
+  if (!now || prev) return;
+  const incoming = liveExpanded.value;
+  if (incoming != null && JSON.stringify(local.value) !== JSON.stringify(incoming)) {
+    local.value = incoming;
+  }
+});
 const ringStyle = computed(() => {
   if (!enableAwareness.value) return void 0;
   const focusColor = focusers.value[0]?.user?.color;

package/dist/runtime/components/aware/AAccordion.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
@@ -13,6 +14,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/AButton.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   fieldKey: { type: String, required: true },
   max: { type: Number, required: false, default: 3 }
 });
-const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const { hoverers, focusers, pressers, isPressed, localPress, handlers } = useAAField(() => props.fieldKey);
 const ringStyle = computed(() => awareRingStyle({
   hover: hoverers.value[0]?.user?.color,
   focus: focusers.value[0]?.user?.color,
@@ -31,7 +31,7 @@ const overlayPeers = computed(() => {
   return out;
 });
 const pulseKey = ref(0);
-watch(isPressed, (val, prev) => {
+watch(localPress, (val, prev) => {
   if (val && !prev) pulseKey.value++;
 });
 const pulseColor = computed(
@@ -72,5 +72,5 @@ const pulseColor = computed(
 </template>
 
 <style scoped>
-.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--inline{display:inline-flex}.aa-host--pressed{filter:brightness(.88)}.aa-press-pulse{animation:aa-press-pulse .26s ease-out forwards;border-radius:inherit;inset:0;pointer-events:none;position:absolute}@keyframes aa-press-pulse{0%{box-shadow:0 0 0 0 var(--aa-pulse-color);opacity:.45}to{box-shadow:0 0 0 12px var(--aa-pulse-color);opacity:0}}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter var(--aa-state-fade-filter),box-shadow var(--aa-state-fade-shadow)}.aa-host--inline{display:inline-flex}.aa-host--pressed{filter:brightness(.88)}.aa-press-pulse{animation:aa-press-pulse var(--aa-pulse-duration) var(--aa-pulse-easing) forwards;border-radius:inherit;inset:0;pointer-events:none;position:absolute}@keyframes aa-press-pulse{0%{box-shadow:0 0 0 0 var(--aa-pulse-color);opacity:var(--aa-pulse-opacity-start-button)}to{box-shadow:0 0 0 var(--aa-pulse-radius-button) var(--aa-pulse-color);opacity:0}}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity var(--aa-peer-fade-duration) var(--aa-peer-fade-easing)}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
 </style>

package/dist/runtime/components/aware/ACollapsible.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_10: string, __VLS_11: any, __VLS_22: string, __VLS_23: any;
@@ -13,6 +14,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/ACollapsible.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { computed, ref, useAttrs, watch } from "vue";
 import { useAAUIState } from "../../composables/useAAUIState";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   fieldKey: { type: String, required: true },
   awareness: { type: Boolean, required: false, default: true },
   live: { type: Boolean, required: false, default: false },
+  followOnly: { type: Boolean, required: false, default: false },
   total: { type: Boolean, required: false, default: false }
 });
-const enableLive = computed(() => props.live || props.total);
+const { isFollowing } = useAAFollowPeer();
+const enableLive = computed(() => props.live || props.total || props.followOnly && isFollowing.value);
 const attrs = useAttrs();
 const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
 const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
@@ -22,6 +25,11 @@ watch(local, (val) => {
   if (!enableLive.value) return;
   if (!!liveOpen.value !== val) liveOpen.value = val;
 });
+watch(enableLive, (now, prev) => {
+  if (!now || prev) return;
+  const incoming = !!liveOpen.value;
+  if (local.value !== incoming) local.value = incoming;
+});
 </script>
 
 <template>

package/dist/runtime/components/aware/ACollapsible.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_10: string, __VLS_11: any, __VLS_22: string, __VLS_23: any;
@@ -13,6 +14,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/AGlobalFocusLayer.vue

@@ -73,7 +73,7 @@ function nameFor(p) {
 }"
       />
       <span
-        v-if="p.rects.length"
+        v-if="p.rects[0]"
         class="aa-global-focus-layer__flag"
         :style="{
   top: p.rects[0].top + 'px',

package/dist/runtime/components/aware/AHoverItem.vue

@@ -8,7 +8,7 @@ const props = defineProps({
   showFlag: { type: Boolean, required: false, default: true },
   tinted: { type: Boolean, required: false, default: true }
 });
-const { hoverers, focusers, pressers, isPressed, onMouseenter, onMouseleave, onMousedown, onMouseup } = useAAField(() => props.fieldKey);
+const { hoverers, focusers, pressers, localPress, onMouseenter, onMouseleave, onMousedown, onMouseup } = useAAField(() => props.fieldKey);
 const wrapperRef = ref(null);
 const rowEl = ref(null);
 const ROW_SELECTOR = [
@@ -23,6 +23,20 @@ const ROW_SELECTOR = [
   ".aa-row-target"
 ].join(", ");
 let savedStyle = { background: "", boxShadow: "", position: "" };
+let kbHighlighted = false;
+let kbObserver = null;
+function isKeyboardHighlighted(row) {
+  return row.hasAttribute("data-highlighted") || row.getAttribute("data-state") === "checked" || row.getAttribute("aria-selected") === "true";
+}
+function syncKeyboardHighlight() {
+  const row = rowEl.value;
+  if (!row) return;
+  const next = isKeyboardHighlighted(row);
+  if (next === kbHighlighted) return;
+  kbHighlighted = next;
+  if (next) onMouseenter();
+  else onMouseleave();
+}
 function attachToRow() {
   const wrapper = wrapperRef.value;
   if (!wrapper) return;
@@ -39,6 +53,13 @@ function attachToRow() {
   row.addEventListener("mouseleave", onMouseleave);
   row.addEventListener("mousedown", onMousedown);
   row.addEventListener("mouseup", onMouseup);
+  kbObserver?.disconnect();
+  kbObserver = new MutationObserver(syncKeyboardHighlight);
+  kbObserver.observe(row, {
+    attributes: true,
+    attributeFilter: ["data-highlighted", "data-state", "aria-selected"]
+  });
+  syncKeyboardHighlight();
 }
 function detachFromRow() {
   const row = rowEl.value;
@@ -49,6 +70,10 @@ function detachFromRow() {
   row.removeEventListener("mouseup", onMouseup);
   row.style.backgroundColor = savedStyle.background;
   row.style.boxShadow = savedStyle.boxShadow;
+  if (kbHighlighted) onMouseleave();
+  kbHighlighted = false;
+  kbObserver?.disconnect();
+  kbObserver = null;
   rowEl.value = null;
 }
 onMounted(attachToRow);
@@ -90,7 +115,7 @@ const flagPeer = computed(
   () => pressers.value[0] ?? focusers.value[0] ?? hoverers.value[0]
 );
 const pulseKey = ref(0);
-watch(isPressed, (val, prev) => {
+watch(localPress, (val, prev) => {
   if (val && !prev) pulseKey.value++;
 });
 const pulseColor = computed(() => pressers.value[0]?.user?.color ?? "currentColor");
@@ -120,5 +145,5 @@ const pulseColor = computed(() => pressers.value[0]?.user?.color ?? "currentColo
 </template>
 
 <style scoped>
-.aa-item{border-radius:inherit;display:contents;position:relative}.aa-item--inline{align-items:center;display:inline-flex}.aa-item__pulse{animation:aa-item-pulse .35s ease-out forwards;border-radius:inherit;inset:0;pointer-events:none;position:absolute}@keyframes aa-item-pulse{0%{box-shadow:0 0 0 0 var(--aa-pulse-color);opacity:.5}to{box-shadow:0 0 0 14px var(--aa-pulse-color);opacity:0}}.aa-item__flag{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.55rem;font-weight:500;line-height:1;padding:.18rem .35rem;pointer-events:none;position:absolute;right:.25rem;top:-.55rem;white-space:nowrap;z-index:5}.aa-flag-enter-active,.aa-flag-leave-active{transition:opacity .12s ease,transform .12s ease}.aa-flag-enter-from,.aa-flag-leave-to{opacity:0;transform:translateY(2px)}
+.aa-item{border-radius:inherit;display:contents;position:relative}.aa-item--inline{align-items:center;display:inline-flex}.aa-item__pulse{animation:aa-item-pulse var(--aa-pulse-duration) var(--aa-pulse-easing) forwards;border-radius:inherit;inset:0;pointer-events:none;position:absolute}@keyframes aa-item-pulse{0%{box-shadow:0 0 0 0 var(--aa-pulse-color);opacity:var(--aa-pulse-opacity-start-item)}to{box-shadow:0 0 0 var(--aa-pulse-radius-item) var(--aa-pulse-color);opacity:0}}.aa-item__flag{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.55rem;font-weight:500;line-height:1;padding:.18rem .35rem;pointer-events:none;position:absolute;right:.25rem;top:-.55rem;white-space:nowrap;z-index:5}.aa-flag-enter-active,.aa-flag-leave-active{transition:opacity var(--aa-flag-fade-duration) var(--aa-flag-fade-easing),transform var(--aa-flag-fade-duration) var(--aa-flag-fade-easing)}.aa-flag-enter-from,.aa-flag-leave-to{opacity:0;transform:translateY(2px)}
 </style>

package/dist/runtime/components/aware/AMedia.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    total: boolean;
     controls: boolean;
+    total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AMedia.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    total: boolean;
     controls: boolean;
+    total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AModal.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
@@ -21,6 +22,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/AModal.vue

@@ -1,15 +1,18 @@
 <script setup>
 import { computed, ref, useAttrs, watch } from "vue";
 import { useAAUIState, useAAUIStateAuthor } from "../../composables/useAAUIState";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
 import { useAwareness } from "../../composables/useAwareness";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   fieldKey: { type: String, required: true },
   awareness: { type: Boolean, required: false, default: true },
   live: { type: Boolean, required: false, default: false },
+  followOnly: { type: Boolean, required: false, default: false },
   total: { type: Boolean, required: false, default: false }
 });
-const enableLive = computed(() => props.live || props.total);
+const { isFollowing } = useAAFollowPeer();
+const enableLive = computed(() => props.live || props.total || props.followOnly && isFollowing.value);
 const attrs = useAttrs();
 const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
 const author = useAAUIStateAuthor(() => `${props.fieldKey}:open`);
@@ -25,6 +28,11 @@ watch(local, (val) => {
   if (!enableLive.value) return;
   if (!!liveOpen.value !== val) liveOpen.value = val;
 });
+watch(enableLive, (now, prev) => {
+  if (!now || prev) return;
+  const incoming = !!liveOpen.value;
+  if (local.value !== incoming) local.value = incoming;
+});
 const openedByUser = computed(() => {
   if (!enableLive.value || !local.value || author.value == null) return null;
   const state = states.value.get(author.value);