qarpeo 0.0.0-alpha.10

package/dist/runtime/app/composables/realtime.mjs

@@ -0,0 +1,432 @@
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onScopeDispose,
+  toValue
+} from "vue";
+export function useRealtime(room, options = {}) {
+  const connected = ref(false);
+  const connecting = ref(false);
+  const error = ref(null);
+  const presence = ref([]);
+  const history = ref([]);
+  const state = ref({});
+  const ws = ref(null);
+  if (typeof window === "undefined") {
+    return {
+      connected,
+      connecting,
+      error,
+      presence,
+      history,
+      state,
+      ws,
+      on: () => () => {
+      },
+      off: () => {
+      },
+      send: () => {
+      },
+      updatePresence: () => {
+      },
+      setState: () => {
+      },
+      patchState: () => {
+      },
+      connect: () => {
+      },
+      disconnect: () => {
+      }
+    };
+  }
+  const {
+    path = "/api/realtime/ws",
+    heartbeatInterval = options.heartbeat ?? 3e4,
+    autoReconnect = options.reconnect ?? true,
+    maxReconnectAttempts = 10,
+    reconnectBaseDelay = 1e3,
+    reconnectMaxDelay = 15e3,
+    replayOnReconnect = options.replayOnReconnect ?? true,
+    historyLimit: clientHistoryLimit = options.historyLimit ?? 100
+  } = options;
+  let lastSeq = null;
+  let lastMessageId = null;
+  const listeners = /* @__PURE__ */ new Map();
+  let heartbeatTimer = null;
+  let reconnectTimer = null;
+  let reconnectAttempts = 0;
+  let isIntentionallyClosed = false;
+  function clearTimers() {
+    if (heartbeatTimer) {
+      clearInterval(heartbeatTimer);
+      heartbeatTimer = null;
+    }
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+  }
+  function startHeartbeat() {
+    clearTimers();
+    if (heartbeatInterval <= 0) return;
+    heartbeatTimer = setInterval(() => {
+      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+        try {
+          ws.value.send(JSON.stringify({ type: "ping" }));
+        } catch {
+        }
+      }
+    }, heartbeatInterval);
+  }
+  function buildWebSocketUrl() {
+    const currentRoom = toValue(room) || "general";
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const host = window.location.host;
+    const url = new URL(`${protocol}//${host}${path}`);
+    url.searchParams.set("room", currentRoom);
+    if (options.user?.id) url.searchParams.set("userId", options.user.id);
+    if (options.user?.name) url.searchParams.set("name", options.user.name);
+    if (options.user?.avatar) url.searchParams.set("avatar", options.user.avatar);
+    if (options.user?.metadata) {
+      url.searchParams.set("meta", JSON.stringify(options.user.metadata));
+    }
+    if (options.presence) {
+      url.searchParams.set("presence", JSON.stringify(options.presence));
+    }
+    if (replayOnReconnect) {
+      if (lastSeq !== null) url.searchParams.set("lastSeq", String(lastSeq));
+      if (lastMessageId !== null) url.searchParams.set("lastMessageId", lastMessageId);
+    }
+    return url.toString();
+  }
+  function connect() {
+    if (ws.value && (ws.value.readyState === WebSocket.OPEN || ws.value.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    isIntentionallyClosed = false;
+    connecting.value = true;
+    error.value = null;
+    try {
+      const url = buildWebSocketUrl();
+      const socket = new WebSocket(url);
+      ws.value = socket;
+      socket.onopen = () => {
+        connected.value = true;
+        connecting.value = false;
+        reconnectAttempts = 0;
+        startHeartbeat();
+      };
+      socket.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === "history:sync") {
+            const incoming = Array.isArray(msg.history) ? msg.history : [];
+            if (incoming.length > 0) {
+              const latest = incoming[incoming.length - 1];
+              if (latest.seq != null) lastSeq = latest.seq;
+              if (latest.id != null) lastMessageId = latest.id;
+            }
+            if (msg.replay) {
+              const existingIds = new Set(history.value.map((m) => m.id).filter(Boolean));
+              const existingSeqs = new Set(history.value.map((m) => m.seq).filter(Boolean));
+              const newMessages = incoming.filter(
+                (m) => (!m.id || !existingIds.has(m.id)) && (!m.seq || !existingSeqs.has(m.seq))
+              );
+              if (newMessages.length > 0) {
+                history.value = [...history.value, ...newMessages].slice(-clientHistoryLimit);
+                for (const m of newMessages) {
+                  if (m.event) {
+                    const handlers = listeners.get(m.event);
+                    if (handlers) {
+                      for (const handler of handlers) {
+                        handler(m.payload, m);
+                      }
+                    }
+                  }
+                }
+              }
+            } else {
+              history.value = incoming.slice(-clientHistoryLimit);
+            }
+            return;
+          }
+          if (msg.type === "presence:sync" && Array.isArray(msg.presence)) {
+            presence.value = msg.presence;
+            return;
+          }
+          if (msg.type === "presence:join" && msg.user) {
+            const exists = presence.value.some((u) => u.id === msg.user.id);
+            if (!exists) {
+              presence.value = [...presence.value, msg.user];
+            } else {
+              presence.value = presence.value.map((u) => u.id === msg.user.id ? msg.user : u);
+            }
+            return;
+          }
+          if (msg.type === "presence:leave" && msg.user) {
+            presence.value = presence.value.filter((u) => u.id !== msg.user.id);
+            return;
+          }
+          if (msg.type === "presence:update" && msg.user) {
+            presence.value = presence.value.map((u) => u.id === msg.user.id ? msg.user : u);
+            return;
+          }
+          if (msg.type === "state:sync" && msg.state) {
+            state.value = msg.state;
+            return;
+          }
+          if (msg.type === "state:patch" && msg.state) {
+            state.value = msg.state;
+            return;
+          }
+          if (msg.type === "state:set" && msg.state) {
+            state.value = msg.state;
+            return;
+          }
+          if (msg.type === "message" && msg.event) {
+            if (msg.seq != null) lastSeq = msg.seq;
+            if (msg.id != null) lastMessageId = msg.id;
+            history.value = [...history.value, msg].slice(-clientHistoryLimit);
+            const handlers = listeners.get(msg.event);
+            if (handlers) {
+              for (const handler of handlers) {
+                handler(msg.payload, msg);
+              }
+            }
+          }
+        } catch {
+        }
+      };
+      socket.onerror = (_evt) => {
+        error.value = new Error("WebSocket encountered an error");
+      };
+      socket.onclose = (_evt) => {
+        connected.value = false;
+        connecting.value = false;
+        ws.value = null;
+        clearTimers();
+        if (!isIntentionallyClosed && autoReconnect && reconnectAttempts < maxReconnectAttempts) {
+          reconnectAttempts++;
+          const delay = Math.min(
+            reconnectBaseDelay * 2 ** (reconnectAttempts - 1) + Math.random() * 500,
+            reconnectMaxDelay
+          );
+          reconnectTimer = setTimeout(() => {
+            connect();
+          }, delay);
+        }
+      };
+    } catch (err) {
+      connecting.value = false;
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  }
+  function disconnect() {
+    isIntentionallyClosed = true;
+    clearTimers();
+    if (ws.value) {
+      try {
+        ws.value.close(1e3, "Normal closure");
+      } catch {
+      }
+      ws.value = null;
+    }
+    connected.value = false;
+    connecting.value = false;
+    presence.value = [];
+  }
+  function on(event, handler) {
+    let handlers = listeners.get(event);
+    if (!handlers) {
+      handlers = /* @__PURE__ */ new Set();
+      listeners.set(event, handlers);
+    }
+    handlers.add(handler);
+    return () => {
+      handlers?.delete(handler);
+      if (handlers && handlers.size === 0) {
+        listeners.delete(event);
+      }
+    };
+  }
+  function off(event, handler) {
+    if (handler === void 0) {
+      listeners.delete(event);
+    } else {
+      const handlers = listeners.get(event);
+      if (handlers) {
+        handlers.delete(handler);
+        if (handlers.size === 0) {
+          listeners.delete(event);
+        }
+      }
+    }
+  }
+  function send(event, payload, sendOptions = {}) {
+    if (!ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      console.warn(`[qarpeo.realtime] Cannot send event "${event}": WebSocket is not connected.`);
+      return;
+    }
+    const message = {
+      type: "message",
+      event,
+      payload,
+      self: sendOptions.self ?? true
+    };
+    try {
+      ws.value.send(JSON.stringify(message));
+    } catch (err) {
+      console.error(`[qarpeo.realtime] Failed to send message:`, err);
+    }
+  }
+  function updatePresence(presenceData) {
+    if (!ws.value || ws.value.readyState !== WebSocket.OPEN) return;
+    try {
+      ws.value.send(
+        JSON.stringify({
+          type: "presence:update",
+          presence: presenceData
+        })
+      );
+    } catch (err) {
+      console.error("[qarpeo.realtime] Failed to update presence:", err);
+    }
+  }
+  function setState(newState) {
+    state.value = newState;
+    if (!ws.value || ws.value.readyState !== WebSocket.OPEN) return;
+    try {
+      ws.value.send(
+        JSON.stringify({
+          type: "state:set",
+          state: newState
+        })
+      );
+    } catch (err) {
+      console.error("[qarpeo.realtime] Failed to set room state:", err);
+    }
+  }
+  function patchState(patch) {
+    state.value = { ...state.value, ...patch };
+    if (!ws.value || ws.value.readyState !== WebSocket.OPEN) return;
+    try {
+      ws.value.send(
+        JSON.stringify({
+          type: "state:patch",
+          patch
+        })
+      );
+    } catch (err) {
+      console.error("[qarpeo.realtime] Failed to patch room state:", err);
+    }
+  }
+  watch(
+    () => toValue(room),
+    (newRoom, oldRoom) => {
+      if (newRoom !== oldRoom && connected.value) {
+        disconnect();
+        connect();
+      }
+    }
+  );
+  onMounted(() => {
+    connect();
+  });
+  onScopeDispose(() => {
+    disconnect();
+  });
+  return {
+    connected,
+    connecting,
+    error,
+    presence,
+    history,
+    state,
+    ws,
+    on,
+    off,
+    send,
+    updatePresence,
+    setState,
+    patchState,
+    connect,
+    disconnect
+  };
+}
+export function usePresence(room, options = {}) {
+  const realtime = useRealtime(room, { presence: options.initial });
+  const myPresence = ref({ ...options.initial || {} });
+  const throttleMs = options.throttle ?? 50;
+  let throttleTimer = null;
+  let pendingUpdate = null;
+  function flushPresence() {
+    if (pendingUpdate && realtime.ws.value?.readyState === WebSocket.OPEN) {
+      realtime.updatePresence(pendingUpdate);
+      pendingUpdate = null;
+    }
+  }
+  function updatePresence(partial) {
+    myPresence.value = { ...myPresence.value, ...partial };
+    pendingUpdate = { ...pendingUpdate || {}, ...partial };
+    if (!throttleTimer) {
+      flushPresence();
+      throttleTimer = setTimeout(() => {
+        throttleTimer = null;
+        if (pendingUpdate) {
+          flushPresence();
+        }
+      }, throttleMs);
+    }
+  }
+  const peers = computed(() => {
+    return (realtime.presence.value || []).map((u) => ({
+      ...u,
+      presence: u.presence || {}
+    }));
+  });
+  const onlineCount = computed(() => realtime.presence.value.length);
+  function onCursorMove(e) {
+    updatePresence({
+      cursor: { x: Math.round(e.clientX), y: Math.round(e.clientY) }
+    });
+  }
+  return {
+    myPresence,
+    updatePresence,
+    peers,
+    onlineCount,
+    presence: realtime.presence,
+    onCursorMove
+  };
+}
+export function useRoomState(room, initialState = {}) {
+  const realtime = useRealtime(room);
+  const state = ref({ ...initialState });
+  const synced = ref(false);
+  watch(
+    () => realtime.state.value,
+    (newState) => {
+      if (newState && Object.keys(newState).length > 0) {
+        state.value = { ...state.value, ...newState };
+        synced.value = true;
+      }
+    },
+    { deep: true }
+  );
+  function setState(newState) {
+    state.value = newState;
+    realtime.setState(newState);
+  }
+  function patchState(partial) {
+    state.value = { ...state.value, ...partial };
+    realtime.patchState(partial);
+  }
+  return {
+    state,
+    setState,
+    patchState,
+    synced
+  };
+}

package/dist/runtime/app/composables/site.d.ts

@@ -0,0 +1,35 @@
+import { type ComputedRef } from "vue";
+import type { QarpeoSiteConfig } from "../../../types";
+/**
+ * Access the project's site metadata (name, canonical URL, description, SEO defaults).
+ *
+ * @example
+ *   const site = useSite()
+ *   console.log(site.name, site.url)
+ */
+export declare function useSite(): QarpeoSiteConfig;
+/** Alias for useSite() */
+export declare const useSiteConfig: typeof useSite;
+/**
+ * Returns a reactive computed reference to the current page's absolute canonical URL.
+ *
+ * @example
+ *   const canonicalUrl = useCanonicalUrl()
+ *   // Returns "https://myapp.com/docs/getting-started"
+ */
+export declare function useCanonicalUrl(): ComputedRef<string>;
+export interface BreadcrumbItem {
+    name: string;
+    item: string;
+}
+/**
+ * Injects a Schema.org `BreadcrumbList` structured data script into the head.
+ *
+ * @example
+ *   defineBreadcrumbs([
+ *     { name: "Home", item: "/" },
+ *     { name: "Docs", item: "/docs" },
+ *     { name: "Getting Started", item: "/docs/getting-started" },
+ *   ])
+ */
+export declare function defineBreadcrumbs(items: BreadcrumbItem[]): void;

package/dist/runtime/app/composables/site.mjs

@@ -0,0 +1,36 @@
+import { computed } from "vue";
+export function useSite() {
+  const runtimeConfig = useRuntimeConfig();
+  return runtimeConfig.public?.qarpeo?.site || {};
+}
+export const useSiteConfig = useSite;
+export function useCanonicalUrl() {
+  const site = useSite();
+  const route = useRoute();
+  const base = (site.url || "").replace(/\/$/, "");
+  return computed(() => {
+    const cleanPath = route.path === "/" ? "" : route.path;
+    return `${base}${cleanPath}`;
+  });
+}
+export function defineBreadcrumbs(items) {
+  const site = useSite();
+  const base = (site.url || "").replace(/\/$/, "");
+  useHead({
+    script: [
+      {
+        type: "application/ld+json",
+        innerHTML: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "BreadcrumbList",
+          itemListElement: items.map((item, index) => ({
+            "@type": "ListItem",
+            position: index + 1,
+            name: item.name,
+            item: item.item.startsWith("http") ? item.item : `${base}${item.item.startsWith("/") ? "" : "/"}${item.item}`
+          }))
+        })
+      }
+    ]
+  });
+}

package/dist/runtime/app/composables/storage.d.ts

@@ -0,0 +1,60 @@
+import { type Ref, type ComputedRef } from "vue";
+import type { StorageImagePreset, BlobAccessTier } from "../../../types";
+export interface UploadedFile {
+    key: string;
+    pathname: string;
+    url: string;
+    size: number;
+    type: string;
+    etag: string;
+    access?: BlobAccessTier;
+    customMetadata?: Record<string, string>;
+}
+export interface UploadOptions {
+    filename?: string;
+    customMetadata?: Record<string, string>;
+    /** Access tier for file: 'public' | 'unlisted' | 'private' */
+    access?: BlobAccessTier;
+    /** Use presigned URL upload directly to R2 */
+    presigned?: boolean;
+}
+export declare function useStorage(): {
+    isUploading: Ref<boolean, boolean>;
+    progress: Ref<number, number>;
+    error: Ref<Error | null, Error | null>;
+    upload: (file: File | Blob, options?: UploadOptions) => Promise<UploadedFile>;
+    uploadMultiple: (files: FileList | File[], options?: {
+        customMetadata?: Record<string, string>;
+        access?: BlobAccessTier;
+    }) => Promise<UploadedFile[]>;
+    deleteFile: (key: string) => Promise<{
+        success: boolean;
+    }>;
+    getDownloadUrl: (key: string, options?: {
+        expiresIn?: string | number;
+        download?: boolean;
+        filename?: string;
+    }) => Promise<string>;
+    getOptimizedImageUrl: (key: string, transform?: StorageImagePreset & {
+        preset?: string;
+    }) => string;
+    reset: () => void;
+    abort: () => void;
+};
+/** Primary composable for file uploads. */
+export declare const useUpload: typeof useStorage;
+/**
+ * Composable to resolve an R2 blob URL with optional image transforms or presets. Accepts string,
+ * ref, or getter for full Vue reactivity.
+ */
+export declare function useBlobUrl(key: string | Ref<string> | (() => string), transform?: (StorageImagePreset & {
+    preset?: string;
+}) | Ref<(StorageImagePreset & {
+    preset?: string;
+}) | undefined> | (() => (StorageImagePreset & {
+    preset?: string;
+}) | undefined)): ComputedRef<string>;
+/** Helper to get a direct URL from an R2 key or pathname. */
+export declare function getBlobUrl(key: string, transform?: StorageImagePreset & {
+    preset?: string;
+}): string;