@nuxt/scripts 1.0.0-beta.7 → 1.0.0-rc.10

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsStaticMap.vue.d.ts

@@ -0,0 +1,200 @@
+export type StaticMapFormat = 'png' | 'jpg' | 'gif' | 'png8' | 'png32' | 'jpg-baseline';
+export type StaticMapType = 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
+import type { ImgHTMLAttributes, ReservedProps } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}, {
+    src: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}> & Readonly<{}>, {
+    loading: "eager" | "lazy";
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    objectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    scale: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        src: string;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/GoogleMaps/bindGoogleMapsEvents.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Bind Google Maps event listeners that forward to Vue emit.
+ *
+ * Two categories:
+ * - `noPayload`: emits with no arguments (state-change events like `position_changed`)
+ * - `withPayload`: forwards the first argument from the listener (mouse events, etc.)
+ */
+export declare function bindGoogleMapsEvents(instance: {
+    addListener: (event: string, handler: (...args: any[]) => void) => void;
+}, emit: (...args: any[]) => void, config: {
+    noPayload?: readonly string[];
+    withPayload?: readonly string[];
+}): void;

package/dist/runtime/components/GoogleMaps/bindGoogleMapsEvents.js

@@ -0,0 +1,8 @@
+export function bindGoogleMapsEvents(instance, emit, config) {
+  config.noPayload?.forEach((event) => {
+    instance.addListener(event, () => emit(event));
+  });
+  config.withPayload?.forEach((event) => {
+    instance.addListener(event, (payload) => emit(event, payload));
+  });
+}

package/dist/runtime/components/GoogleMaps/injectionKeys.d.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue';
+export declare const MAP_INJECTION_KEY: InjectionKey<{
+    map: ShallowRef<google.maps.Map | undefined>;
+    mapsApi: Ref<typeof google.maps | undefined>;
+    /** Close the previously active InfoWindow and register a new one as active */
+    activateInfoWindow: (iw: google.maps.InfoWindow) => void;
+}>;
+export declare const MARKER_INJECTION_KEY: InjectionKey<{
+    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
+}>;

package/dist/runtime/components/GoogleMaps/injectionKeys.js

@@ -0,0 +1,2 @@
+export const MAP_INJECTION_KEY = Symbol("map");
+export const MARKER_INJECTION_KEY = Symbol("marker");

package/dist/runtime/components/GoogleMaps/types.d.ts

@@ -0,0 +1,42 @@
+import type { InjectionKey, ShallowRef } from 'vue';
+export interface MarkerClustererInstance {
+    render: () => void;
+    setMap: (map: google.maps.Map | null) => void;
+    addListener: (event: string, handler: () => void) => void;
+    addMarker: (marker: google.maps.marker.AdvancedMarkerElement | google.maps.Marker, noDraw?: boolean) => void;
+    removeMarker: (marker: google.maps.marker.AdvancedMarkerElement | google.maps.Marker, noDraw?: boolean) => boolean;
+}
+export interface MarkerClustererOptions {
+    markers?: google.maps.marker.AdvancedMarkerElement[];
+    algorithm?: unknown;
+    renderer?: unknown;
+    onClusterClick?: unknown;
+}
+export interface Cluster {
+    marker: google.maps.marker.AdvancedMarkerElement;
+    markers?: google.maps.marker.AdvancedMarkerElement[];
+    position: google.maps.LatLng;
+    bounds: google.maps.LatLngBounds | undefined;
+    count: number;
+}
+export interface ClusterStats {
+    markers: {
+        sum: number;
+    };
+    clusters: {
+        count: number;
+        markers: {
+            min: number;
+            max: number;
+            mean: number;
+            sum: number;
+        };
+    };
+}
+export interface MarkerClustererContext {
+    markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
+    requestRerender: () => void;
+    /** Increments after each clustering cycle; watch to detect cluster membership changes */
+    clusteringVersion: ShallowRef<number>;
+}
+export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<MarkerClustererContext>;

package/dist/runtime/components/GoogleMaps/types.js

@@ -0,0 +1 @@
+export const MARKER_CLUSTERER_INJECTION_KEY = Symbol("marker-clusterer");

package/dist/runtime/components/GoogleMaps/useGoogleMapsResource.d.ts

@@ -0,0 +1,98 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue';
+export declare const MAP_INJECTION_KEY: InjectionKey<{
+    map: ShallowRef<google.maps.Map | undefined>;
+    mapsApi: Ref<typeof google.maps | undefined>;
+    /** Close the previously active InfoWindow and register a new one as active */
+    activateInfoWindow: (iw: google.maps.InfoWindow) => void;
+}>;
+export declare const MARKER_INJECTION_KEY: InjectionKey<{
+    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
+}>;
+/**
+ * Bind Google Maps event listeners that forward to Vue emit.
+ *
+ * Two categories:
+ * - `noPayload`: emits with no arguments (state-change events like `position_changed`)
+ * - `withPayload`: forwards the first argument from the listener (mouse events, etc.)
+ */
+export declare function bindGoogleMapsEvents(instance: {
+    addListener: (event: string, handler: (...args: any[]) => void) => void;
+}, emit: (...args: any[]) => void, config: {
+    noPayload?: readonly string[];
+    withPayload?: readonly string[];
+}): void;
+export interface GoogleMapsResourceContext {
+    map: google.maps.Map;
+    mapsApi: typeof google.maps;
+}
+/**
+ * Normalizes a `LatLng | LatLngLiteral` value into a plain `LatLngLiteral`.
+ *
+ * Google's `LatLng` exposes coordinates via `.lat()`/`.lng()` methods, while
+ * `LatLngLiteral` exposes them as plain `lat`/`lng` numeric properties. The
+ * runtime distinguishes them by checking whether `.lat` is callable; this is
+ * preferred over `instanceof google.maps.LatLng` because mocked APIs in tests
+ * return plain objects rather than real `LatLng` instances.
+ */
+export declare function normalizeLatLng(p: google.maps.LatLng | google.maps.LatLngLiteral): google.maps.LatLngLiteral;
+/**
+ * Defines a deprecated property alias on an exposed object. Reading the alias
+ * returns the value of the canonical key and emits a one-shot
+ * `console.warn` (so repeated reads don't spam the console).
+ *
+ * Used to provide backward-compatible renames on `defineExpose` payloads
+ * without breaking existing template-ref consumers. Call sites should wrap
+ * this in `if (import.meta.dev)` so production builds skip the getter
+ * entirely and the alias stays a plain data property.
+ */
+export declare function defineDeprecatedAlias<T extends object, K extends keyof T>(target: T, alias: string, canonicalKey: K, message: string): T;
+/**
+ * Emits dev-mode deprecation warnings for the legacy top-level `center` and
+ * `zoom` props on `<ScriptGoogleMaps>`. Both props still work, but new code
+ * should pass them via `mapOptions` instead.
+ *
+ * Returns the number of warnings emitted (useful for tests).
+ */
+export declare function warnDeprecatedTopLevelMapProps(props: {
+    center?: unknown;
+    zoom?: unknown;
+}): number;
+/**
+ * Wait until the Google Maps API and a Map instance are both available.
+ *
+ * Triggers script loading via `load()` if not already loaded. Uses an
+ * immediate watcher (matching `importLibrary`'s pattern) to avoid the race
+ * where `load()` resolves synchronously: a non-immediate watcher would miss
+ * the change and the promise would hang forever.
+ *
+ * Rejects if `status` enters an `'error'` state before both refs are populated.
+ * Runs the watcher inside a detached effect scope so it is safe to call from
+ * any context (component setup, exposed methods, tests).
+ */
+export declare function waitForMapsReady({ mapsApi, map, status, load, }: {
+    mapsApi: ShallowRef<typeof google.maps | undefined>;
+    map: ShallowRef<google.maps.Map | undefined>;
+    status: Ref<string>;
+    load: () => Promise<unknown> | unknown;
+}): Promise<void>;
+/**
+ * Composable for safely managing Google Maps resource lifecycle.
+ *
+ * Handles the common pattern: wait for map readiness → async create → cleanup on unmount.
+ *
+ * Safety guarantees:
+ * - No watchers created after `await` (prevents orphaned watchers that leak memory)
+ * - Unmount guard prevents resource creation after component unmount
+ * - Resources created during the async gap are immediately cleaned up
+ * - Resource ref is always nulled on unmount to allow GC
+ */
+export declare function useGoogleMapsResource<T>({ ready, create, cleanup, }: {
+    /** Additional readiness condition beyond map + mapsApi being available */
+    ready?: () => boolean;
+    /** Create the Google Maps resource. Receives map context snapshot. May be async. */
+    create: (ctx: GoogleMapsResourceContext) => Promise<T> | T;
+    /** Clean up the resource. Called on unmount, or immediately if resource was created after unmount. */
+    cleanup?: (resource: T, ctx: {
+        mapsApi: typeof google.maps;
+    }) => void;
+}): ShallowRef<T | undefined>;

package/dist/runtime/components/GoogleMaps/useGoogleMapsResource.js

@@ -0,0 +1,126 @@
+import { whenever } from "@vueuse/core";
+import { effectScope, inject, onUnmounted, ref, shallowRef, watch } from "vue";
+export const MAP_INJECTION_KEY = Symbol("map");
+export const MARKER_INJECTION_KEY = Symbol("marker");
+export function bindGoogleMapsEvents(instance, emit, config) {
+  config.noPayload?.forEach((event) => {
+    instance.addListener(event, () => emit(event));
+  });
+  config.withPayload?.forEach((event) => {
+    instance.addListener(event, (payload) => emit(event, payload));
+  });
+}
+export function normalizeLatLng(p) {
+  if (typeof p.lat === "function") {
+    const ll = p;
+    return { lat: ll.lat(), lng: ll.lng() };
+  }
+  return { lat: p.lat, lng: p.lng };
+}
+export function defineDeprecatedAlias(target, alias, canonicalKey, message) {
+  let warned = false;
+  Object.defineProperty(target, alias, {
+    get() {
+      if (!warned) {
+        warned = true;
+        console.warn(message);
+      }
+      return target[canonicalKey];
+    },
+    enumerable: true,
+    configurable: true
+  });
+  return target;
+}
+export function warnDeprecatedTopLevelMapProps(props) {
+  let warned = 0;
+  if (props.center !== void 0) {
+    warned++;
+    console.warn(
+      '[nuxt-scripts] <ScriptGoogleMaps> prop "center" is deprecated; use `:map-options="{ center: ... }"` instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+    );
+  }
+  if (props.zoom !== void 0) {
+    warned++;
+    console.warn(
+      '[nuxt-scripts] <ScriptGoogleMaps> prop "zoom" is deprecated; use `:map-options="{ zoom: ... }"` instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+    );
+  }
+  return warned;
+}
+export async function waitForMapsReady({
+  mapsApi,
+  map,
+  status,
+  load
+}) {
+  if (mapsApi.value && map.value)
+    return;
+  if (status.value === "error")
+    throw new Error("Google Maps script failed to load");
+  await load();
+  if (mapsApi.value && map.value)
+    return;
+  if (status.value === "error")
+    throw new Error("Google Maps script failed to load");
+  const scope = effectScope(true);
+  try {
+    await new Promise((resolve, reject) => {
+      scope.run(() => {
+        watch(
+          [mapsApi, map, status],
+          ([api, m, s]) => {
+            if (api && m) {
+              resolve();
+              return;
+            }
+            if (s === "error")
+              reject(new Error("Google Maps script failed to load"));
+          },
+          { immediate: true }
+        );
+      });
+    });
+  } finally {
+    scope.stop();
+  }
+}
+export function useGoogleMapsResource({
+  ready,
+  create,
+  cleanup
+}) {
+  const mapContext = inject(MAP_INJECTION_KEY, void 0);
+  const resource = shallowRef(void 0);
+  const isUnmounted = ref(false);
+  whenever(
+    () => mapContext?.map.value && mapContext.mapsApi.value && (!ready || ready()),
+    () => {
+      Promise.resolve(create({
+        map: mapContext.map.value,
+        mapsApi: mapContext.mapsApi.value
+      })).then((result) => {
+        if (isUnmounted.value) {
+          if (cleanup && mapContext?.mapsApi.value) {
+            cleanup(result, { mapsApi: mapContext.mapsApi.value });
+          }
+          return;
+        }
+        resource.value = result;
+      }).catch((err) => {
+        if (import.meta.dev) {
+          console.error("[nuxt-scripts] Google Maps resource creation failed:", err);
+        }
+      });
+    },
+    { immediate: true, once: true }
+  );
+  onUnmounted(() => {
+    isUnmounted.value = true;
+    if (resource.value && cleanup && mapContext?.mapsApi.value) {
+      cleanup(resource.value, { mapsApi: mapContext.mapsApi.value });
+    }
+    resource.value = void 0;
+  });
+  return resource;
+}

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

@@ -0,0 +1,83 @@
+import type { HTMLAttributes } from 'vue';
+import type { BlueskyEmbedPostData } from '../registry/bluesky-embed.js';
+type __VLS_Props = {
+    /**
+     * The Bluesky post URL to embed
+     * @example 'https://bsky.app/profile/bsky.app/post/3mgnwwvj3u22a'
+     */
+    postUrl: string;
+    /**
+     * Custom API endpoint for fetching post data
+     */
+    apiEndpoint?: string;
+    /**
+     * Custom image proxy endpoint
+     */
+    imageProxyEndpoint?: string;
+    /**
+     * Root element attributes
+     */
+    rootAttrs?: HTMLAttributes;
+};
+type __VLS_Slots = {
+    default?: (props: NonNullable<typeof slotProps.value>) => any;
+    loading?: () => any;
+    error?: (props: {
+        error: typeof error.value;
+    }) => any;
+};
+declare const error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
+declare const slotProps: import("vue").ComputedRef<{
+    post: BlueskyEmbedPostData;
+    displayName: string;
+    handle: string;
+    avatar: string;
+    isVerified: boolean;
+    text: string;
+    richText: string;
+    langs: string[] | undefined;
+    datetime: string;
+    createdAt: Date;
+    likes: number;
+    likesFormatted: string;
+    reposts: number;
+    repostsFormatted: string;
+    replies: number;
+    repliesFormatted: string;
+    quotes: number;
+    quotesFormatted: string;
+    images: {
+        thumb: string;
+        fullsize: string;
+        alt: string;
+        aspectRatio: {
+            width: number;
+            height: number;
+        } | undefined;
+    }[] | undefined;
+    externalEmbed: {
+        uri: string;
+        title: string;
+        description: string;
+        thumb: string | undefined;
+    } | undefined;
+    postUrl: string;
+    authorUrl: string;
+    proxyImage: (url: string) => string;
+} | null>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    post: import("vue").Ref<BlueskyEmbedPostData | undefined, BlueskyEmbedPostData | undefined>;
+    status: import("vue").Ref<import("nuxt/app").AsyncDataRequestStatus, import("nuxt/app").AsyncDataRequestStatus>;
+    error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    apiEndpoint: string;
+    imageProxyEndpoint: string;
+}, {}, {}, {}, 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/ScriptBlueskyEmbed.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { useAsyncData } from "nuxt/app";
+import { computed } from "vue";
+import { useScriptProxyUrl } from "../composables/useScriptProxyUrl";
+import { extractBlueskyPostId, facetsToHtml, formatBlueskyDate, formatCount } from "../registry/bluesky-embed";
+import { requireRegistryEndpoint, scriptsPrefix } from "../utils";
+const props = defineProps({
+  postUrl: { type: String, required: true },
+  apiEndpoint: { type: String, required: false, default: void 0 },
+  imageProxyEndpoint: { type: String, required: false, default: void 0 },
+  rootAttrs: { type: Object, required: false }
+});
+defineSlots();
+const prefix = scriptsPrefix();
+const resolvedApiEndpoint = computed(() => props.apiEndpoint || `${prefix}/embed/bluesky`);
+const resolvedImageProxyEndpoint = computed(() => props.imageProxyEndpoint || `${prefix}/embed/bluesky-image`);
+if (!props.apiEndpoint)
+  requireRegistryEndpoint("ScriptBlueskyEmbed", "blueskyEmbed");
+const proxyUrl = useScriptProxyUrl();
+const postId = computed(() => extractBlueskyPostId(props.postUrl));
+const cacheKey = computed(() => `bluesky-embed-${postId.value?.actor}-${postId.value?.rkey}`);
+const { data: post, status, error } = useAsyncData(
+  cacheKey,
+  () => $fetch(proxyUrl(resolvedApiEndpoint.value, { url: props.postUrl }))
+);
+const slotProps = computed(() => {
+  if (!post.value)
+    return null;
+  const p = post.value;
+  return {
+    // Raw data
+    post: p,
+    // Author info
+    displayName: p.author.displayName,
+    handle: p.author.handle,
+    avatar: p.author.avatar,
+    isVerified: p.author.verification?.verifiedStatus === "valid",
+    // Post content
+    text: p.record.text,
+    richText: facetsToHtml(p.record.text, p.record.facets),
+    langs: p.record.langs,
+    // Formatted values
+    datetime: formatBlueskyDate(p.record.createdAt),
+    createdAt: new Date(p.record.createdAt),
+    likes: p.likeCount,
+    likesFormatted: formatCount(p.likeCount),
+    reposts: p.repostCount,
+    repostsFormatted: formatCount(p.repostCount),
+    replies: p.replyCount,
+    repliesFormatted: formatCount(p.replyCount),
+    quotes: p.quoteCount,
+    quotesFormatted: formatCount(p.quoteCount),
+    // Media (already proxied)
+    images: p.embed?.images?.map((img) => ({
+      thumb: img.thumb,
+      fullsize: img.fullsize,
+      alt: img.alt,
+      aspectRatio: img.aspectRatio
+    })),
+    externalEmbed: p.embed?.external ? {
+      uri: p.embed.external.uri,
+      title: p.embed.external.title,
+      description: p.embed.external.description,
+      thumb: p.embed.external.thumb
+    } : void 0,
+    // Links
+    postUrl: props.postUrl,
+    authorUrl: `https://bsky.app/profile/${p.author.handle}`,
+    // Helpers — proxy an arbitrary URL through the image endpoint at runtime.
+    // Uses the page token emitted during SSR so client-generated URLs validate.
+    proxyImage: (url) => proxyUrl(resolvedImageProxyEndpoint.value, { url })
+  };
+});
+defineExpose({
+  post,
+  status,
+  error
+});
+</script>
+
+<template>
+  <div v-bind="rootAttrs">
+    <slot v-if="status === 'pending'" name="loading">
+      <div>Loading Bluesky post...</div>
+    </slot>
+    <slot v-else-if="status === 'error'" name="error" :error="error">
+      <div>Failed to load Bluesky post</div>
+    </slot>
+    <slot v-else-if="slotProps" v-bind="slotProps" />
+  </div>
+</template>