qarpeo 0.0.0-alpha.10

package/dist/runtime/ai.d.ts

@@ -0,0 +1,25 @@
+import type { AiBinding, QarpeoAI } from "./types/ai";
+import type { CFEvent } from "./types/index";
+import { generateImage, textToImage, generateSpeech, textToSpeech, transcribeAudio, speechToText, generateText, streamText, embedText } from "./server/utils/ai";
+export type { AiBinding, AiOptions, QarpeoAI, GenerateImageOptions, GenerateImageResult, GenerateSpeechOptions, GenerateSpeechResult, TranscribeAudioInput, TranscribeAudioOptions, TranscribeAudioResult, StreamTextOptions, } from "./types/ai";
+export { generateImage, textToImage, generateSpeech, textToSpeech, transcribeAudio, speechToText, generateText, streamText, embedText, };
+/**
+ * Returns the raw Cloudflare Workers AI binding from the active environment.
+ *
+ * @param bindingName Optional Cloudflare AI binding name (defaults to 'AI')
+ * @param event Optional event context
+ */
+export declare function getAIBinding(bindingName?: string, event?: CFEvent): AiBinding;
+/** Creates a typed Workers AI client for a specific binding and optional event. */
+export declare function createAI(bindingName?: string, event?: CFEvent): QarpeoAI;
+/**
+ * Access a typed Cloudflare Workers AI client.
+ *
+ * @param bindingName Optional Cloudflare AI binding name (defaults to 'AI')
+ * @param event Optional event context
+ */
+export declare const useAI: (bindingName?: string, event?: CFEvent) => QarpeoAI;
+/** Auto-imported `ai` instance for direct Cloudflare Workers AI operations. */
+export declare const ai: QarpeoAI;
+export { useChat, useAgentChat } from "./app/composables/chat";
+export type { UseChatOptions, UseAgentChatOptions } from "./app/composables/chat";

package/dist/runtime/ai.mjs

@@ -0,0 +1,106 @@
+import { getCloudflareEnv, resolveRuntimeBinding } from "./bindings.mjs";
+import {
+  generateImage,
+  textToImage,
+  generateSpeech,
+  textToSpeech,
+  transcribeAudio,
+  speechToText,
+  generateText,
+  streamText,
+  embedText
+} from "./server/utils/ai.mjs";
+export {
+  generateImage,
+  textToImage,
+  generateSpeech,
+  textToSpeech,
+  transcribeAudio,
+  speechToText,
+  generateText,
+  streamText,
+  embedText
+};
+export function getAIBinding(bindingName, event) {
+  const resolvedBinding = resolveRuntimeBinding("ai", bindingName, "AI");
+  const env = getCloudflareEnv(event);
+  const binding = env[resolvedBinding];
+  if (!binding) {
+    throw new Error(
+      `[qarpeo] Cloudflare Workers AI binding "${resolvedBinding}" was not found. Check your wrangler.json or QARPEO_AI_BINDING environment variable.`
+    );
+  }
+  return binding;
+}
+export function createAI(bindingName, event) {
+  const resolvedBinding = resolveRuntimeBinding("ai", bindingName, "AI");
+  const getAI = () => getAIBinding(resolvedBinding, event);
+  return {
+    run: (model, inputs, options) => {
+      return getAI().run(model, inputs, options);
+    },
+    raw: (bName) => {
+      return getAIBinding(bName || resolvedBinding, event);
+    },
+    generateImage: (options) => {
+      const opts = typeof options === "string" ? { prompt: options } : { ...options };
+      if (!opts.binding) opts.binding = resolvedBinding;
+      if (!opts.event) opts.event = event;
+      return generateImage(opts);
+    },
+    textToImage: (options) => {
+      const opts = typeof options === "string" ? { prompt: options } : { ...options };
+      if (!opts.binding) opts.binding = resolvedBinding;
+      if (!opts.event) opts.event = event;
+      return textToImage(opts);
+    },
+    generateSpeech: (options) => {
+      const opts = typeof options === "string" ? { text: options } : { ...options };
+      if (!opts.binding) opts.binding = resolvedBinding;
+      if (!opts.event) opts.event = event;
+      return generateSpeech(opts);
+    },
+    textToSpeech: (options) => {
+      const opts = typeof options === "string" ? { text: options } : { ...options };
+      if (!opts.binding) opts.binding = resolvedBinding;
+      if (!opts.event) opts.event = event;
+      return textToSpeech(opts);
+    },
+    transcribeAudio: (options) => {
+      const opts = typeof options === "object" && options !== null && "audio" in options && !ArrayBuffer.isView(options) && !(options instanceof ArrayBuffer) && !(typeof Blob !== "undefined" && options instanceof Blob) ? { ...options } : { audio: options };
+      if (!opts.binding) opts.binding = resolvedBinding;
+      if (!opts.event) opts.event = event;
+      return transcribeAudio(opts);
+    },
+    speechToText: (options) => {
+      const opts = typeof options === "object" && options !== null && "audio" in options && !ArrayBuffer.isView(options) && !(options instanceof ArrayBuffer) && !(typeof Blob !== "undefined" && options instanceof Blob) ? { ...options } : { audio: options };
+      if (!opts.binding) opts.binding = resolvedBinding;
+      if (!opts.event) opts.event = event;
+      return speechToText(opts);
+    },
+    generateText: (options) => {
+      return generateText({ binding: resolvedBinding, event, ...options });
+    },
+    streamText: (options) => {
+      return streamText({ binding: resolvedBinding, event, ...options });
+    },
+    embed: (text, options) => {
+      return embedText(text, { binding: resolvedBinding, event, ...options });
+    }
+  };
+}
+export const useAI = createAI;
+export const ai = new Proxy({}, {
+  get(_target, prop) {
+    if (prop === "raw") {
+      return (bindingName) => getAIBinding(bindingName);
+    }
+    const instance = createAI();
+    const val = instance[prop];
+    if (typeof val === "function") {
+      return val.bind(instance);
+    }
+    return val;
+  }
+});
+export { useChat, useAgentChat } from "./app/composables/chat.mjs";

package/dist/runtime/analytics.d.ts

@@ -0,0 +1,24 @@
+import type { AnalyticsEngineDataset, QarpeoAnalytics } from "./types/analytics";
+import type { CFEvent } from "./types/index";
+export type * from "./types/analytics";
+/**
+ * Returns the raw Cloudflare AnalyticsEngineDataset binding from the active environment.
+ *
+ * @param bindingName Optional Cloudflare Analytics Engine binding name (defaults to 'ANALYTICS')
+ * @param event Optional event context
+ */
+export declare function getAnalyticsBinding(bindingName?: string, event?: CFEvent): AnalyticsEngineDataset;
+/** Creates a typed Analytics Engine client for a specific binding and optional event. */
+export declare function createAnalytics(bindingName?: string, event?: CFEvent): QarpeoAnalytics;
+/**
+ * Access a typed Cloudflare Analytics Engine client.
+ *
+ * @param bindingName Optional Analytics Engine binding name (defaults to 'ANALYTICS')
+ * @param event Optional event context
+ */
+export declare const useAnalytics: (bindingName?: string, event?: CFEvent) => QarpeoAnalytics;
+/**
+ * Auto-imported `analytics` instance for direct Cloudflare Analytics Engine operations. Writes are
+ * fire-and-forget — they never block a response.
+ */
+export declare const analytics: QarpeoAnalytics;

package/dist/runtime/analytics.mjs

@@ -0,0 +1,38 @@
+import { getCloudflareEnv, resolveRuntimeBinding } from "./bindings.mjs";
+export function getAnalyticsBinding(bindingName, event) {
+  const resolvedBinding = resolveRuntimeBinding("analytics", bindingName, "ANALYTICS");
+  const env = getCloudflareEnv(event);
+  const binding = env[resolvedBinding];
+  if (!binding) {
+    throw new Error(
+      `[qarpeo] Cloudflare Analytics Engine binding "${resolvedBinding}" was not found. Check your wrangler.json or QARPEO_ANALYTICS_BINDING environment variable.`
+    );
+  }
+  return binding;
+}
+export function createAnalytics(bindingName, event) {
+  const resolvedBinding = resolveRuntimeBinding("analytics", bindingName, "ANALYTICS");
+  const getDataset = () => getAnalyticsBinding(resolvedBinding, event);
+  return {
+    writeDataPoint: (data) => {
+      getDataset().writeDataPoint(data);
+    },
+    raw: (bName) => {
+      return getAnalyticsBinding(bName || resolvedBinding, event);
+    }
+  };
+}
+export const useAnalytics = createAnalytics;
+export const analytics = new Proxy({}, {
+  get(_target, prop) {
+    if (prop === "raw") {
+      return (bindingName) => getAnalyticsBinding(bindingName);
+    }
+    const instance = createAnalytics();
+    const val = instance[prop];
+    if (typeof val === "function") {
+      return val.bind(instance);
+    }
+    return val;
+  }
+});

package/dist/runtime/app/components/BlobImage.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useStorage } from "../composables/storage"
+
+/**
+ * `<BlobImage>` — Renders an optimized image stored in Qarpeo R2 blob storage.
+ * Supports named presets, on-the-fly resizing, format conversion, and responsive srcset generation.
+ */
+const props = withDefaults(defineProps<{
+  /** Storage key or pathname (e.g. "avatars/user-1.jpg") or absolute URL. */
+  src: string
+  /** Named transformation preset configured in `qarpeo.storage.presets`. */
+  preset?: string
+  /** Output image width in pixels. */
+  width?: number | string
+  /** Output image height in pixels. */
+  height?: number | string
+  /** Compression quality (1-100). */
+  quality?: number | string
+  /** Output format. */
+  format?: "webp" | "avif" | "jpeg" | "png"
+  /** Fit mode for resizing. */
+  fit?: "cover" | "contain" | "scale-down" | "crop" | "pad"
+  /** Image alternative text for accessibility. */
+  alt?: string
+  /** Image loading strategy. */
+  loading?: "lazy" | "eager"
+  /** Auto-generate responsive srcset (true) or provide a custom srcset string. */
+  srcset?: boolean | string
+  /** HTML sizes attribute for responsive layouts. */
+  sizes?: string
+}>(), {
+  alt: "",
+  loading: "lazy",
+  srcset: false,
+})
+
+const { getOptimizedImageUrl } = useStorage()
+
+const resolvedSrc = computed(() => {
+  if (!props.src) return ""
+  if ((props.src.startsWith("http://") || props.src.startsWith("https://")) && !props.preset) {
+    return props.src
+  }
+  return getOptimizedImageUrl(props.src, {
+    preset: props.preset,
+    width: props.width ? Number(props.width) : undefined,
+    height: props.height ? Number(props.height) : undefined,
+    quality: props.quality ? Number(props.quality) : undefined,
+    format: props.format,
+    fit: props.fit,
+  })
+})
+
+const resolvedSrcset = computed(() => {
+  if (!props.src || !props.srcset) return undefined
+  if (typeof props.srcset === "string") return props.srcset
+
+  const numWidth = props.width ? Number(props.width) : undefined
+  if (numWidth) {
+    const src1x = resolvedSrc.value
+    const src2x = getOptimizedImageUrl(props.src, {
+      preset: props.preset,
+      width: numWidth * 2,
+      height: props.height ? Number(props.height) * 2 : undefined,
+      quality: props.quality ? Number(props.quality) : undefined,
+      format: props.format,
+      fit: props.fit,
+    })
+    return `${src1x} 1x, ${src2x} 2x`
+  }
+
+  // Default responsive breakpoints
+  return [320, 640, 960, 1280]
+    .map((w) => {
+      const url = getOptimizedImageUrl(props.src, {
+        preset: props.preset,
+        width: w,
+        quality: props.quality ? Number(props.quality) : undefined,
+        format: props.format,
+        fit: props.fit,
+      })
+      return `${url} ${w}w`
+    })
+    .join(", ")
+})
+</script>
+
+<template>
+  <img
+    :src="resolvedSrc"
+    :srcset="resolvedSrcset"
+    :sizes="sizes"
+    :width="width"
+    :height="height"
+    :alt="alt"
+    :loading="loading"
+    decoding="async"
+  />
+</template>

package/dist/runtime/app/components/CMSBlocks.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { resolveDynamicComponent, h } from "vue"
+import type { CMSBlockData } from "../../../types"
+
+/**
+ * `<CMSBlocks>` / `<CMSPageBuilder>` — Renders an array of typed CMS block objects.
+ * Resolves each block to a matching Vue component (`<BlockHero>`, `<Hero>`, etc.),
+ * falls back to scoped slots (`#hero="{ block, index }"`), or a generic `#default` slot.
+ */
+const props = withDefaults(defineProps<{
+  blocks?: CMSBlockData[]
+  prefix?: string
+  as?: string
+}>(), {
+  blocks: () => [],
+  prefix: "Block",
+  as: "div",
+})
+
+const slots = defineSlots<{
+  default?(props: { block: CMSBlockData; index: number }): any
+  [key: string]: ((props: { block: CMSBlockData; index: number }) => any) | undefined
+}>()
+
+function toPascalCase(str: string): string {
+  return str
+    .replace(/[-_](\w)/g, (_, c) => c.toUpperCase())
+    .replace(/^\w/, (c) => c.toUpperCase())
+}
+
+function renderBlock(block: CMSBlockData, index: number) {
+  const type = block._type || "unknown"
+  const key = block._id || `${type}-${index}`
+
+  // 1. Scoped slot for this exact block type
+  if (slots[type]) {
+    return h("div", { key, class: `qarpeo-block qarpeo-block-${type}` }, slots[type]!({ block, index }))
+  }
+
+  // 2. Generic default slot
+  if (slots.default) {
+    return h("div", { key, class: `qarpeo-block qarpeo-block-${type}` }, slots.default({ block, index }))
+  }
+
+  // 3. Dynamic component resolution: <BlockHero /> or <Hero />
+  const pascalType = toPascalCase(type)
+  const prefixedName = props.prefix ? `${props.prefix}${pascalType}` : pascalType
+
+  let component: any = null
+  try {
+    component = resolveDynamicComponent(prefixedName)
+    if (typeof component === "string" && component === prefixedName) {
+      if (props.prefix) {
+        const fallback = resolveDynamicComponent(pascalType)
+        component = typeof fallback !== "string" || fallback !== pascalType ? fallback : null
+      } else {
+        component = null
+      }
+    }
+  } catch {
+    component = null
+  }
+
+  if (component) {
+    return h(component, { key, ...block, block, index, class: `qarpeo-block qarpeo-block-${type}` })
+  }
+
+  // 4. Dev fallback warning
+  if (import.meta.dev) {
+    return h(
+      "div",
+      {
+        key,
+        class: "rounded-lg border border-dashed border-amber-400 bg-amber-50/50 p-4 my-2 font-mono text-xs text-amber-700",
+      },
+      [
+        h("strong", `[CMSBlocks] Missing component for block "_type: ${type}"`),
+        h("p", { class: "mt-1 opacity-80" }, `Create <${prefixedName} /> or use slot #${type}`),
+      ],
+    )
+  }
+
+  return null
+}
+</script>
+
+<template>
+  <component :is="as" class="qarpeo-cms-blocks">
+    <template v-for="(block, index) in blocks" :key="block._id || `${block._type}-${index}`">
+      <component :is="() => renderBlock(block, index)" />
+    </template>
+  </component>
+</template>

package/dist/runtime/app/components/CMSContent.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+/**
+ * `<CMSContent>` — Renders raw HTML CMS content safely via innerHTML.
+ */
+withDefaults(defineProps<{
+  content?: string
+  value?: Record<string, any> | null
+  as?: string
+}>(), {
+  content: "",
+  value: null,
+  as: "div",
+})
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <component
+    :is="as"
+    class="qarpeo-cms-content"
+    v-html="content || (value as any)?.contentHtml || ''"
+  />
+</template>

package/dist/runtime/app/components/CMSImage.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useStorage } from "../composables/storage"
+
+/**
+ * `<CMSImage>` — Renders an optimized CMS-managed image via Qarpeo blob storage.
+ * Similar to `<BlobImage>` but focused on CMS content images.
+ */
+const props = withDefaults(defineProps<{
+  src?: string
+  preset?: string
+  width?: number | string
+  height?: number | string
+  quality?: number | string
+  format?: string
+  fit?: string
+  alt?: string
+  loading?: "lazy" | "eager"
+}>(), {
+  src: "",
+  alt: "",
+  loading: "lazy",
+})
+
+const { getOptimizedImageUrl } = useStorage()
+
+const resolvedUrl = computed(() => {
+  if (!props.src) return ""
+  if ((props.src.startsWith("http://") || props.src.startsWith("https://")) && !props.preset) {
+    return props.src
+  }
+  return getOptimizedImageUrl(props.src, {
+    preset: props.preset,
+    width: props.width ? Number(props.width) : undefined,
+    height: props.height ? Number(props.height) : undefined,
+    quality: props.quality ? Number(props.quality) : undefined,
+    format: props.format as any,
+    fit: props.fit as any,
+  })
+})
+</script>
+
+<template>
+  <img
+    :src="resolvedUrl"
+    :alt="alt"
+    :loading="loading"
+  />
+</template>

package/dist/runtime/app/components/CMSLocaleSwitcher.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useCMSLocale } from "../composables/cms"
+
+/**
+ * `<CMSLocaleSwitcher>` — Nuxt UI selector for switching between configured CMS content locales.
+ * Updates `useCMSLocale()` state, persists preference in cookie, and updates page content.
+ */
+const props = withDefaults(
+  defineProps<{
+    variant?: "dropdown" | "select" | "buttons"
+    size?: "xs" | "sm" | "md"
+    color?: "neutral" | "primary"
+    showFlags?: boolean
+    class?: string
+  }>(),
+  {
+    variant: "dropdown",
+    size: "xs",
+    color: "neutral",
+    showFlags: true,
+    class: "",
+  },
+)
+
+const { locale, localeConfigs, setLocale } = useCMSLocale()
+
+const activeConfig = computed(
+  () => localeConfigs.value?.find((c) => c.code === locale.value) || localeConfigs.value?.[0],
+)
+
+const dropdownItems = computed(() => [
+  (localeConfigs.value || []).map((c) => ({
+    label: `${props.showFlags && c.flag ? `${c.flag} ` : ""}${c.name}`,
+    icon: c.code === locale.value ? "i-lucide-check" : undefined,
+    onSelect: () => setLocale(c.code),
+  })),
+])
+
+const selectItems = computed(() =>
+  (localeConfigs.value || []).map((c) => ({
+    label: `${props.showFlags && c.flag ? `${c.flag} ` : ""}${c.name}`,
+    value: c.code,
+  })),
+)
+</script>
+
+<template>
+  <template v-if="localeConfigs && localeConfigs.length > 1">
+    <!-- Buttons variant -->
+    <div
+      v-if="variant === 'buttons'"
+      :class="['inline-flex items-center gap-1 rounded-lg border border-gray-200 dark:border-gray-800 p-1 bg-gray-50/50 dark:bg-gray-900/50 text-xs font-medium', props.class]"
+      role="group"
+      aria-label="Language switcher"
+    >
+      <UButton
+        v-for="c in localeConfigs"
+        :key="c.code"
+        :size="size"
+        :variant="c.code === locale ? 'solid' : 'ghost'"
+        :color="color"
+        :label="c.name"
+        :class="[
+          'flex items-center gap-1.5',
+          c.code === locale
+            ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-xs font-semibold'
+            : 'text-gray-600 dark:text-gray-400',
+        ]"
+        @click="setLocale(c.code)"
+      >
+        <template v-if="showFlags && c.flag" #leading>
+          <span class="text-sm leading-none">{{ c.flag }}</span>
+        </template>
+      </UButton>
+    </div>
+
+    <!-- Select variant: Nuxt UI USelect -->
+    <USelect
+      v-else-if="variant === 'select'"
+      :model-value="locale"
+      :items="selectItems"
+      :size="size"
+      :color="color"
+      variant="subtle"
+      :class="props.class"
+      @update:model-value="setLocale($event)"
+    />
+
+    <!-- Dropdown variant (DEFAULT): Nuxt UI UDropdownMenu -->
+    <UDropdownMenu
+      v-else
+      :items="dropdownItems"
+      :content="{ align: 'start' }"
+    >
+      <UButton
+        :size="size"
+        variant="outline"
+        :color="color"
+        :label="activeConfig?.name"
+        trailing-icon="i-lucide-chevron-down"
+        :class="props.class"
+      >
+        <template v-if="showFlags && activeConfig?.flag" #leading>
+          <span class="text-sm leading-none">{{ activeConfig.flag }}</span>
+        </template>
+      </UButton>
+    </UDropdownMenu>
+  </template>
+</template>

package/dist/runtime/app/components/CMSPreviewBanner.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useCMSPreview } from "../composables/cms-preview"
+
+/**
+ * `<CMSPreviewBanner>` / `<DocsPreviewBanner>` — Warning banner displayed when a user
+ * is viewing an unpublished CMS entry in Preview Mode. Provides an expiry notice and
+ * a one-click button to exit preview mode.
+ */
+withDefaults(defineProps<{
+  class?: string
+  adminUrl?: string
+}>(), {
+  class: "",
+  adminUrl: "/admin",
+})
+
+const { isPreview, expires, disable } = useCMSPreview()
+
+const remainingTime = computed(() => {
+  if (!expires.value) return null
+  const exp = Number(expires.value)
+  if (isNaN(exp)) return null
+  const diffMs = exp - Date.now()
+  if (diffMs <= 0) return "expired"
+  const hours = Math.floor(diffMs / (1000 * 60 * 60))
+  const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
+  if (hours > 0) return `${hours}h ${minutes}m remaining`
+  return `${minutes}m remaining`
+})
+</script>
+
+<template>
+  <div
+    v-if="isPreview"
+    :class="[
+      'rounded-lg border border-amber-400/80 dark:border-amber-600/60 bg-amber-50/95 dark:bg-amber-950/40 p-3.5 text-xs text-amber-950 dark:text-amber-200 mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 shadow-xs',
+      $props.class,
+    ]"
+    role="status"
+    aria-live="polite"
+  >
+    <div class="flex items-center gap-2.5 flex-wrap">
+      <UBadge
+        color="warning"
+        variant="solid"
+        size="xs"
+        class="text-[10px] font-bold tracking-wide uppercase"
+        label="Draft Preview"
+      />
+      <span class="font-medium">You are viewing an unpublished preview.</span>
+      <span v-if="remainingTime" class="text-amber-800 dark:text-amber-300/80">
+        ({{ remainingTime }})
+      </span>
+    </div>
+    <div class="flex items-center gap-2 shrink-0 w-full sm:w-auto justify-end">
+      <UButton
+        v-if="adminUrl"
+        :to="adminUrl"
+        size="xs"
+        color="warning"
+        variant="ghost"
+        class="font-semibold"
+      >
+        Open in CMS
+      </UButton>
+      <UButton
+        size="xs"
+        color="warning"
+        variant="subtle"
+        class="font-semibold"
+        trailing-icon="i-lucide-x"
+        @click="disable()"
+      >
+        Exit Preview
+      </UButton>
+    </div>
+  </div>
+</template>