@abraca/nuxt 1.9.1 → 2.0.0

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

@@ -1,7 +1,17 @@
 type __VLS_Props = {
-    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
     fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: boolean;
+    total?: boolean;
+    max?: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    awareness: boolean;
+    max: number;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    awareness: boolean;
+    max: number;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+import AHoverItem from "./AHoverItem.vue";
+function itemId(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.value ?? item.id ?? item.label ?? "");
+}
+function itemLabel(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.label ?? item.value ?? item.id ?? "");
+}
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
+const liveQuery = useAAUIState(() => `${props.fieldKey}:query`, { defaultValue: "" });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
+const hasExternalQuery = computed(() => "searchTerm" in attrs || "onUpdate:searchTerm" in attrs);
+const localOpen = ref(enableLive.value ? !!liveOpen.value : false);
+watch(liveOpen, (val) => {
+  if (enableLive.value && localOpen.value !== !!val) localOpen.value = !!val;
+});
+watch(localOpen, (val) => {
+  if (enableLive.value && !!liveOpen.value !== val) liveOpen.value = val;
+});
+const localQuery = ref(enableLive.value ? liveQuery.value ?? "" : "");
+watch(liveQuery, (val) => {
+  if (enableLive.value && localQuery.value !== (val ?? "")) localQuery.value = val ?? "";
+});
+watch(localQuery, (val) => {
+  if (enableLive.value && (liveQuery.value ?? "") !== val) liveQuery.value = val;
+});
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
+});
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <USelectMenu
+      v-if="enableSync && !hasExternalModel && enableLive && !hasExternalOpen"
+      v-model="synced"
+      v-model:open="localOpen"
+      v-model:search-term="localQuery"
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </USelectMenu>
+    <USelectMenu
+      v-else-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </USelectMenu>
+    <USelectMenu
+      v-else-if="enableLive && !hasExternalOpen"
+      v-model:open="localOpen"
+      v-model:search-term="localQuery"
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </USelectMenu>
+    <USelectMenu
+      v-else
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </USelectMenu>
+    <Transition name="aa-peer">
+      <span v-if="overlayPeers.length" class="aa-overlay">
+        <AAvatar v-for="p in overlayPeers.slice(0, max)" :key="p.clientId" :user="p" size="2xs" :show-status="false" :show-tooltip="true" />
+      </span>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.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}
+</style>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    awareness: boolean;
+    max: number;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    header?: (props: typeof __VLS_11) => any;
+} & {
+    body?: (props: typeof __VLS_14) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_20) => any;
+};
+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;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAUIState, useAAUIStateAuthor } from "../../composables/useAAUIState";
+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 },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
+const author = useAAUIStateAuthor(() => `${props.fieldKey}:open`);
+const { states } = useAwareness();
+const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
+const local = ref(enableLive.value ? !!liveOpen.value : false);
+watch(liveOpen, (val) => {
+  if (!enableLive.value) return;
+  const next = !!val;
+  if (local.value !== next) local.value = next;
+});
+watch(local, (val) => {
+  if (!enableLive.value) return;
+  if (!!liveOpen.value !== val) liveOpen.value = val;
+});
+const openedByUser = computed(() => {
+  if (!enableLive.value || !local.value || author.value == null) return null;
+  const state = states.value.get(author.value);
+  return state?.user ?? null;
+});
+</script>
+
+<template>
+  <USlideover
+    v-if="enableLive && !hasExternalOpen"
+    v-model:open="local"
+    v-bind="attrs"
+  >
+    <slot />
+
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
+
+    <template
+      v-if="$slots.body || openedByUser"
+      #body
+    >
+      <div
+        v-if="openedByUser"
+        class="aa-attribution"
+      >
+        <span
+          class="aa-attribution__dot"
+          :style="{ background: openedByUser.color ?? 'var(--ui-text-muted)' }"
+        />
+        Opened by {{ openedByUser.name }}
+      </div>
+      <slot name="body" />
+    </template>
+
+    <template
+      v-if="$slots.footer"
+      #footer
+    >
+      <slot name="footer" />
+    </template>
+
+    <template
+      v-if="$slots.content"
+      #content
+    >
+      <div
+        v-if="openedByUser"
+        class="aa-attribution"
+      >
+        <span
+          class="aa-attribution__dot"
+          :style="{ background: openedByUser.color ?? 'var(--ui-text-muted)' }"
+        />
+        Opened by {{ openedByUser.name }}
+      </div>
+      <slot name="content" />
+    </template>
+  </USlideover>
+
+  <USlideover
+    v-else
+    v-bind="attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData ?? {}"
+      />
+    </template>
+  </USlideover>
+</template>
+
+<style scoped>
+.aa-attribution{align-items:center;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text-muted);display:inline-flex;font-size:.6875rem;font-weight:500;gap:.4rem;margin-bottom:.5rem;padding:.25rem .6rem}.aa-attribution__dot{border-radius:999px;height:.5rem;width:.5rem}
+</style>

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    header?: (props: typeof __VLS_11) => any;
+} & {
+    body?: (props: typeof __VLS_14) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_20) => any;
+};
+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;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    peers?: boolean;
+    total?: boolean;
+    min?: number;
+    max?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    min: number;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,77 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  peers: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 100 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey, { debounceMs: 16 });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const { peers: thumbPeers, setLocal: setThumb } = useAAEphemeral(() => `${props.fieldKey}:thumb`);
+const range = computed(() => Math.max(1e-4, props.max - props.min));
+function publishThumb(val) {
+  if (!enablePeers.value || val == null) return;
+  const single = Array.isArray(val) ? val[0] : val;
+  const norm = (single - props.min) / range.value;
+  setThumb(Math.max(0, Math.min(1, norm)));
+}
+watch(synced, (v) => publishThumb(v));
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <USlider
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      :min="min"
+      :max="max"
+      v-bind="attrs"
+    />
+    <USlider
+      v-else
+      :min="min"
+      :max="max"
+      v-bind="attrs"
+    />
+    <div v-if="enablePeers" class="aa-slider-thumbs" aria-hidden="true">
+      <span
+        v-for="p in thumbPeers"
+        :key="p.clientId"
+        class="aa-slider-thumb"
+        :style="{ left: p.value * 100 + '%', background: p.user?.color ?? 'var(--ui-text-muted)' }"
+        :title="p.user?.name || 'Anonymous'"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);padding:.5rem 0;position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.aa-slider-thumbs{inset:0;pointer-events:none;position:absolute}.aa-slider-thumb{border-radius:999px;box-shadow:0 0 0 2px var(--ui-bg-elevated);height:.55rem;position:absolute;top:50%;transform:translate(-50%,-50%);transition:left 80ms linear;width:.55rem}
+</style>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    peers?: boolean;
+    total?: boolean;
+    min?: number;
+    max?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    min: number;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+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;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,82 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+import AHoverItem from "./AHoverItem.vue";
+function stepId(item, idx) {
+  if (item == null) return String(idx);
+  if (typeof item === "string") return item;
+  return String(item.value ?? item.id ?? item.title ?? item.label ?? idx);
+}
+function stepLabel(item, idx) {
+  if (item == null) return `Step ${idx + 1}`;
+  if (typeof item === "string") return item;
+  return String(item.title ?? item.label ?? item.value ?? `Step ${idx + 1}`);
+}
+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 },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
+const liveStep = useAAUIState(() => `${props.fieldKey}:step`, { defaultValue: 0 });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const local = ref(enableLive.value ? liveStep.value ?? 0 : 0);
+watch(liveStep, (val) => {
+  if (enableLive.value && local.value !== (val ?? 0)) local.value = val ?? 0;
+});
+watch(local, (val) => {
+  if (enableLive.value && (liveStep.value ?? 0) !== val) liveStep.value = val;
+});
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="enableAwareness ? hoverHandlers : {}"
+  >
+    <UStepper
+      v-if="enableLive && !hasExternalModel"
+      v-model="local"
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+      <template #title="{ item, index }">
+        <AHoverItem :field-key="`${fieldKey}:item:${stepId(item, index)}`" variant="block" :show-flag="false">
+          {{ stepLabel(item, index) }}
+        </AHoverItem>
+      </template>
+    </UStepper>
+    <UStepper v-else v-bind="attrs">
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+      <template #title="{ item, index }">
+        <AHoverItem :field-key="`${fieldKey}:item:${stepId(item, index)}`" variant="block" :show-flag="false">
+          {{ stepLabel(item, index) }}
+        </AHoverItem>
+      </template>
+    </UStepper>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.94)}
+</style>

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+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;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    fieldKey: string;
+    sync?: boolean;
+    max?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;