@abraca/nuxt 0.1.0

package/dist/runtime/components/renderers/AOutlineRenderer.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { ref, computed, nextTick } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { DEFAULT_LOCALE } from "../../locale";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  labels: { type: Object, required: false }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.outline,
+  ...config.public?.abracadabra?.locale?.renderers?.outline ?? {},
+  ...props.labels ?? {}
+}));
+const { tree } = useRendererBase(props);
+const editingId = ref(null);
+const editValues = ref({});
+const expandedIds = ref(/* @__PURE__ */ new Set());
+function childrenOf(parentId) {
+  return tree.entries.value.filter((e) => e.parentId === (parentId === null ? props.docId : parentId)).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function buildFlat(parentId, depth) {
+  const result = [];
+  for (const entry of childrenOf(parentId)) {
+    const expanded = expandedIds.value.has(entry.id);
+    const hc = tree.entries.value.some((e) => e.parentId === entry.id);
+    result.push({
+      id: entry.id,
+      label: entry.label,
+      depth,
+      parentId: entry.parentId,
+      order: entry.order,
+      hasChildren: hc,
+      isExpanded: expanded
+    });
+    if (expanded || !hc) {
+      result.push(...buildFlat(entry.id, depth + 1));
+    }
+  }
+  return result;
+}
+const flatItems = computed(() => buildFlat(null, 0));
+function startEdit(id, label) {
+  editingId.value = id;
+  editValues.value[id] = label;
+  nextTick(() => {
+    const el = document.getElementById(`outline-${id}`);
+    el?.focus();
+    el?.select();
+  });
+}
+function commitEdit(id) {
+  const val = (editValues.value[id] ?? "").trim();
+  if (val) {
+    const entry = tree.treeMap.get(id);
+    if (entry) tree.treeMap.set(id, { ...entry, label: val, updatedAt: Date.now() });
+  }
+  editingId.value = null;
+}
+function onKeydown(e, item, idx) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    commitEdit(item.id);
+    const newId = tree.createChild(item.parentId === props.docId ? null : item.parentId, "");
+    nextTick(() => startEdit(newId, ""));
+  } else if (e.key === "Tab") {
+    e.preventDefault();
+    const val = (editValues.value[item.id] ?? "").trim();
+    if (val) {
+      const entry = tree.treeMap.get(item.id);
+      if (entry) tree.treeMap.set(item.id, { ...entry, label: val, updatedAt: Date.now() });
+    }
+    if (!e.shiftKey) {
+      const prev = flatItems.value[idx - 1];
+      if (prev && prev.depth <= item.depth) {
+        const entry = tree.treeMap.get(item.id);
+        if (entry) tree.treeMap.set(item.id, { ...entry, parentId: prev.id, order: Date.now(), updatedAt: Date.now() });
+        expandedIds.value.add(prev.id);
+        expandedIds.value = new Set(expandedIds.value);
+      }
+    } else {
+      if (item.depth > 0) {
+        const parentEntry = tree.treeMap.get(item.parentId);
+        const grandParentId = parentEntry?.parentId ?? props.docId;
+        const entry = tree.treeMap.get(item.id);
+        if (entry) tree.treeMap.set(item.id, { ...entry, parentId: grandParentId, order: Date.now(), updatedAt: Date.now() });
+      }
+    }
+  } else if (e.key === "Backspace" && !(editValues.value[item.id] ?? "").length) {
+    e.preventDefault();
+    tree.treeMap.remove(item.id);
+    editingId.value = null;
+    const prev = flatItems.value[idx - 1];
+    if (prev) nextTick(() => startEdit(prev.id, prev.label));
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    commitEdit(item.id);
+    const prev = flatItems.value[idx - 1];
+    if (prev) nextTick(() => startEdit(prev.id, prev.label));
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    commitEdit(item.id);
+    const next = flatItems.value[idx + 1];
+    if (next) nextTick(() => startEdit(next.id, next.label));
+  }
+}
+function addRoot() {
+  const newId = tree.createChild(null, locale.value.addItem);
+  nextTick(() => startEdit(newId, locale.value.addItem));
+}
+</script>
+
+<template>
+  <div class="p-4 max-w-2xl">
+    <div class="space-y-0.5">
+      <div
+        v-for="(item, idx) in flatItems"
+        :key="item.id"
+        :style="{ paddingLeft: `${item.depth * 24}px` }"
+        class="flex items-center gap-2 group py-0.5"
+      >
+        <!-- Expand toggle -->
+        <UButton
+          :icon="item.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          :class="item.hasChildren ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+          @click="() => {
+  const s = new Set(expandedIds);
+  s.has(item.id) ? s.delete(item.id) : s.add(item.id);
+  expandedIds = s;
+}"
+        />
+
+        <UIcon name="i-lucide-circle-dot" class="size-3 text-muted flex-shrink-0" />
+
+        <template v-if="editingId === item.id">
+          <input
+            :id="`outline-${item.id}`"
+            v-model="editValues[item.id]"
+            class="flex-1 bg-transparent border-none outline-none text-sm"
+            @blur="commitEdit(item.id)"
+            @keydown="onKeydown($event, item, idx)"
+          >
+        </template>
+        <span
+          v-else
+          class="flex-1 text-sm cursor-text"
+          :class="!item.label ? 'text-muted italic' : ''"
+          @click="startEdit(item.id, item.label)"
+        >{{ item.label || locale.empty }}</span>
+
+        <UButton
+          icon="i-lucide-trash"
+          variant="ghost"
+          color="error"
+          size="xs"
+          class="opacity-0 group-hover:opacity-100"
+          @click="tree.treeMap.remove(item.id)"
+        />
+      </div>
+    </div>
+
+    <!-- Add root item -->
+    <div class="mt-2">
+      <UButton
+        icon="i-lucide-plus"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :label="locale.addItem"
+        @click="addRoot"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/AOutlineRenderer.vue.d.ts

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['outline']>;
+};
+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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/ATableRenderer.d.vue.ts

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['table']>;
+};
+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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/ATableRenderer.vue

@@ -0,0 +1,191 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { DEFAULT_LOCALE } from "../../locale";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  labels: { type: Object, required: false }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.table,
+  ...config.public?.abracadabra?.locale?.renderers?.table ?? {},
+  ...props.labels ?? {}
+}));
+const { tree } = useRendererBase(props);
+const rows = computed(() => tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+const detectedColumns = computed(() => {
+  const keys = /* @__PURE__ */ new Set(["label"]);
+  for (const row of rows.value) {
+    if (row.meta) {
+      for (const key of Object.keys(row.meta)) {
+        if (!["_metaFields", "_metaInitialized", "coverUploadId", "coverDocId", "coverMimeType"].includes(key)) {
+          keys.add(key);
+        }
+      }
+    }
+  }
+  return [...keys];
+});
+const editingCell = ref(null);
+const editValue = ref("");
+function getCellValue(row, col) {
+  if (col === "label") return row.label;
+  const v = row.meta?.[col];
+  if (v === void 0 || v === null) return "";
+  if (Array.isArray(v)) return v.join(", ");
+  return String(v);
+}
+function startEdit(rowId, col, value) {
+  editingCell.value = { rowId, col };
+  editValue.value = value;
+}
+function commitEdit() {
+  if (!editingCell.value) return;
+  const { rowId, col } = editingCell.value;
+  const entry = tree.treeMap.get(rowId);
+  if (!entry) {
+    editingCell.value = null;
+    return;
+  }
+  if (col === "label") {
+    tree.treeMap.set(rowId, { ...entry, label: editValue.value, updatedAt: Date.now() });
+  } else {
+    tree.treeMap.set(rowId, {
+      ...entry,
+      meta: { ...entry.meta ?? {}, [col]: editValue.value },
+      updatedAt: Date.now()
+    });
+  }
+  editingCell.value = null;
+}
+function addRow() {
+  tree.createChild(null, locale.value.untitled);
+}
+function deleteRow(id) {
+  tree.treeMap.remove(id);
+}
+const newColName = ref("");
+const showAddCol = ref(false);
+function addColumn() {
+  const name = newColName.value.trim();
+  if (!name) return;
+  for (const row of rows.value) {
+    const entry = tree.treeMap.get(row.id);
+    if (entry && !entry.meta?.[name]) {
+      tree.treeMap.set(row.id, {
+        ...entry,
+        meta: { ...entry.meta ?? {}, [name]: "" },
+        updatedAt: Date.now()
+      });
+    }
+  }
+  newColName.value = "";
+  showAddCol.value = false;
+}
+</script>
+
+<template>
+  <div class="p-4 overflow-auto">
+    <div class="border border-muted rounded-lg overflow-hidden">
+      <table class="w-full text-sm border-collapse">
+        <!-- Header -->
+        <thead>
+          <tr class="bg-muted/50">
+            <th
+              v-for="col in detectedColumns"
+              :key="col"
+              class="px-3 py-2 text-left font-medium text-muted capitalize border-b border-muted"
+            >
+              {{ col }}
+            </th>
+            <th class="px-2 py-2 border-b border-muted w-8">
+              <UButton
+                icon="i-lucide-plus"
+                variant="ghost"
+                color="neutral"
+                size="xs"
+                @click="showAddCol = !showAddCol"
+              />
+            </th>
+          </tr>
+          <tr v-if="showAddCol">
+            <td
+              :colspan="detectedColumns.length + 1"
+              class="px-3 py-1 border-b border-muted"
+            >
+              <div class="flex gap-2">
+                <UInput
+                  v-model="newColName"
+                  placeholder="Column name"
+                  size="xs"
+                  class="flex-1"
+                  @keydown.enter="addColumn"
+                  @keydown.escape="showAddCol = false"
+                />
+                <UButton
+                  size="xs"
+                  label="Add"
+                  @click="addColumn"
+                />
+              </div>
+            </td>
+          </tr>
+        </thead>
+        <!-- Rows -->
+        <tbody>
+          <tr
+            v-for="row in rows"
+            :key="row.id"
+            class="group hover:bg-muted/30 border-b border-muted last:border-b-0"
+          >
+            <td
+              v-for="col in detectedColumns"
+              :key="col"
+              class="px-3 py-1.5"
+              @dblclick="startEdit(row.id, col, getCellValue(row, col))"
+            >
+              <template v-if="editingCell?.rowId === row.id && editingCell?.col === col">
+                <input
+                  v-model="editValue"
+                  class="w-full bg-transparent border-none outline-none text-sm"
+                  @blur="commitEdit"
+                  @keydown.enter="commitEdit"
+                  @keydown.escape="editingCell = null"
+                >
+              </template>
+              <span
+                v-else
+                class="truncate block"
+              >{{ getCellValue(row, col) }}</span>
+            </td>
+            <td class="px-2 py-1">
+              <UButton
+                icon="i-lucide-trash"
+                variant="ghost"
+                color="error"
+                size="xs"
+                class="opacity-0 group-hover:opacity-100"
+                @click="deleteRow(row.id)"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mt-2">
+      <UButton
+        icon="i-lucide-plus"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :label="locale.addRow"
+        @click="addRow"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/ATableRenderer.vue.d.ts

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['table']>;
+};
+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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useAAField.d.ts

@@ -0,0 +1,42 @@
+import type { MaybeRef } from 'vue';
+import type { AwarenessPeer } from '../types.js';
+/**
+ * Per-element interaction awareness.
+ *
+ * Associates a UI element with a unique fieldKey so remote users' hover,
+ * press, and focus states are visible on that element. Each user broadcasts
+ * at most ONE hover, press, and focus key at any moment.
+ *
+ * Usage:
+ *   const { hoverers, pressers, focusers, handlers } = useAAField('toolbar:bold')
+ *   <UButton v-on="handlers" />
+ *
+ * Or per-event:
+ *   <div @mouseenter="onMouseenter" @mouseleave="onMouseleave" />
+ *
+ * Field convention: "{scope}:{element-id}", e.g. "doc:toolbar:bold", "settings:save-btn"
+ */
+export declare function useAAField(key: MaybeRef<string>): {
+    hoverers: import("vue").ComputedRef<AwarenessPeer[]>;
+    pressers: import("vue").ComputedRef<AwarenessPeer[]>;
+    focusers: import("vue").ComputedRef<AwarenessPeer[]>;
+    hasRemoteActivity: import("vue").ComputedRef<boolean>;
+    handlers: {
+        mouseenter: () => void;
+        mouseleave: () => void;
+        mousedown: () => void;
+        mouseup: () => void;
+        focus: () => void;
+        blur: () => void;
+    };
+    hoverHandlers: {
+        mouseenter: () => void;
+        mouseleave: () => void;
+    };
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+    onMousedown: () => void;
+    onMouseup: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+};

package/dist/runtime/composables/useAAField.js

@@ -0,0 +1,62 @@
+import { computed, isRef } from "vue";
+export function useAAField(key) {
+  const { setField } = useAwareness();
+  const { peers } = useAwarenessPeers();
+  const fieldKey = computed(() => isRef(key) ? key.value : key);
+  const hoverers = computed(
+    () => peers.value.filter((p) => p.hover === fieldKey.value)
+  );
+  const pressers = computed(
+    () => peers.value.filter((p) => p.press === fieldKey.value)
+  );
+  const focusers = computed(
+    () => peers.value.filter((p) => p.focus === fieldKey.value)
+  );
+  const hasRemoteActivity = computed(
+    () => hoverers.value.length > 0 || pressers.value.length > 0 || focusers.value.length > 0
+  );
+  function onMouseenter() {
+    setField("hover", fieldKey.value);
+  }
+  function onMouseleave() {
+    setField("hover", null);
+  }
+  function onMousedown() {
+    setField("press", fieldKey.value);
+  }
+  function onMouseup() {
+    setField("press", null);
+  }
+  function onFocus() {
+    setField("focus", fieldKey.value);
+  }
+  function onBlur() {
+    setField("focus", null);
+  }
+  const handlers = {
+    mouseenter: onMouseenter,
+    mouseleave: onMouseleave,
+    mousedown: onMousedown,
+    mouseup: onMouseup,
+    focus: onFocus,
+    blur: onBlur
+  };
+  const hoverHandlers = {
+    mouseenter: onMouseenter,
+    mouseleave: onMouseleave
+  };
+  return {
+    hoverers,
+    pressers,
+    focusers,
+    hasRemoteActivity,
+    handlers,
+    hoverHandlers,
+    onMouseenter,
+    onMouseleave,
+    onMousedown,
+    onMouseup,
+    onFocus,
+    onBlur
+  };
+}

package/dist/runtime/composables/useAbraLocale.d.ts

@@ -0,0 +1,14 @@
+import { type AbracadabraLocale } from '../locale.js';
+/**
+ * Resolve locale strings for a specific component section.
+ *
+ * Priority (highest wins):
+ *   1. per-component `overrides` prop
+ *   2. module-level `locale` option (runtimeConfig.public.abracadabra.locale)
+ *   3. DEFAULT_LOCALE (built-in English)
+ *
+ * Usage in a component:
+ *   const locale = useAbraLocale('documentTree', props.labels)
+ *   // template: {{ locale.newDocument }}
+ */
+export declare function useAbraLocale<K extends keyof AbracadabraLocale>(section: K, overrides?: Partial<AbracadabraLocale[K]> | null): AbracadabraLocale[K];

package/dist/runtime/composables/useAbraLocale.js

@@ -0,0 +1,11 @@
+import { DEFAULT_LOCALE } from "../locale.js";
+export function useAbraLocale(section, overrides) {
+  const config = useRuntimeConfig();
+  const moduleLocale = config.public?.abracadabra?.locale;
+  const base = {
+    ...DEFAULT_LOCALE[section],
+    ...moduleLocale?.[section] ?? {}
+  };
+  if (!overrides) return base;
+  return { ...base, ...overrides };
+}

package/dist/runtime/composables/useAbracadabra.d.ts

@@ -0,0 +1,11 @@
+import type { AbracadabraState } from '../types.js';
+/**
+ * Core Abracadabra composable.
+ *
+ * Returns the full state object injected by the main client plugin.
+ * All CRDT objects (provider, doc, client) are shallowRef — do NOT deep-watch them.
+ *
+ * On first call inside a Vue component, auto-imports are resolved.
+ * The actual SDK init happens in the plugin — this is a zero-logic accessor.
+ */
+export declare function useAbracadabra(): AbracadabraState;

package/dist/runtime/composables/useAbracadabra.js

@@ -0,0 +1,3 @@
+export function useAbracadabra() {
+  return useNuxtApp().$abracadabra;
+}

package/dist/runtime/composables/useAbracadabraAuth.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Focused auth composable — a subset of useAbracadabra() for components
+ * that only need identity/auth state without importing the entire surface.
+ */
+export declare function useAbracadabraAuth(): {
+    isClaimed: any;
+    identityLost: any;
+    needsReauth: any;
+    isConnectionBlocked: any;
+    requirePasskeyOnLogin: any;
+    publicKeyB64: any;
+    userName: any;
+    userColor: any;
+    userColorName: any;
+    userNeutralColorName: any;
+    claimAccount: any;
+    loginWithHardware: any;
+    logout: any;
+    setUserName: any;
+    setUserColor: any;
+    setNeutralColor: any;
+    setRequirePasskey: any;
+};

package/dist/runtime/composables/useAbracadabraAuth.js

@@ -0,0 +1,22 @@
+export function useAbracadabraAuth() {
+  const abra = useNuxtApp().$abracadabra;
+  return {
+    isClaimed: abra.isClaimed,
+    identityLost: abra.identityLost,
+    needsReauth: abra.needsReauth,
+    isConnectionBlocked: abra.isConnectionBlocked,
+    requirePasskeyOnLogin: abra.requirePasskeyOnLogin,
+    publicKeyB64: abra.publicKeyB64,
+    userName: abra.userName,
+    userColor: abra.userColor,
+    userColorName: abra.userColorName,
+    userNeutralColorName: abra.userNeutralColorName,
+    claimAccount: abra.claimAccount,
+    loginWithHardware: abra.loginWithHardware,
+    logout: abra.logout,
+    setUserName: abra.setUserName,
+    setUserColor: abra.setUserColor,
+    setNeutralColor: abra.setNeutralColor,
+    setRequirePasskey: abra.setRequirePasskey
+  };
+}

package/dist/runtime/composables/useAwareness.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Reactive wrapper around the Abracadabra provider's Y.js awareness object.
+ *
+ * Exposes all connected users' awareness states as a reactive Map, and provides
+ * helpers to read/write the local user's state fields — without needing to
+ * access Y.js awareness directly.
+ *
+ * Usage:
+ *   const { states, localState, setField } = useAwareness()
+ *   setField('cursor', { docId, x, y })
+ *   // states.value is a Map<clientId, { user, cursor, ... }>
+ */
+export declare function useAwareness(): {
+    states: import("vue").ShallowRef<Map<number, Record<string, unknown>>, Map<number, Record<string, unknown>>>;
+    localState: import("vue").ComputedRef<Record<string, unknown>>;
+    setField: (key: string, value: unknown) => void;
+    onChange: (cb: (changed: {
+        added: number[];
+        updated: number[];
+        removed: number[];
+    }) => void) => () => void;
+};

package/dist/runtime/composables/useAwareness.js

@@ -0,0 +1,48 @@
+import { shallowRef, computed, watch } from "vue";
+export function useAwareness() {
+  const { provider } = useAbracadabra();
+  const states = shallowRef(/* @__PURE__ */ new Map());
+  function _syncStates() {
+    const awareness = provider.value?.awareness;
+    if (!awareness) {
+      states.value = /* @__PURE__ */ new Map();
+      return;
+    }
+    states.value = new Map(awareness.getStates());
+  }
+  let _unsub = null;
+  function _subscribe() {
+    _unsub?.();
+    _unsub = null;
+    const awareness = provider.value?.awareness;
+    if (!awareness) return;
+    _syncStates();
+    const handler = () => _syncStates();
+    awareness.on("change", handler);
+    _unsub = () => awareness.off("change", handler);
+  }
+  watch(provider, () => _subscribe(), { immediate: true });
+  const localState = computed(() => {
+    const awareness = provider.value?.awareness;
+    if (!awareness) return {};
+    return awareness.getLocalState() ?? {};
+  });
+  function setField(key, value) {
+    const awareness = provider.value?.awareness;
+    if (!awareness) return;
+    awareness.setLocalStateField(key, value);
+  }
+  function onChange(cb) {
+    const awareness = provider.value?.awareness;
+    if (!awareness) return () => {
+    };
+    awareness.on("change", cb);
+    return () => awareness.off("change", cb);
+  }
+  return {
+    states,
+    localState,
+    setField,
+    onChange
+  };
+}