@nuxt/scripts 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useAsyncData, useHead } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptVimeoPlayer } from "../registry/vimeo-player";
 import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
@@ -12,7 +12,9 @@ const props = defineProps({
   aboveTheFold: { type: Boolean, required: false },
   vimeoOptions: { type: Object, required: false },
   id: { type: null, required: false },
-  url: { type: null, required: false }
+  url: { type: null, required: false },
+  ratio: { type: String, required: false, default: "16/9" },
+  placeholderObjectFit: { type: String, required: false, default: "contain" }
 });
 const emits = defineEmits(["play", "playing", "pause", "ended", "timeupdate", "progress", "seeking", "seeked", "texttrackchange", "chapterchange", "cuechange", "cuepoint", "volumechange", "playbackratechange", "bufferstart", "bufferend", "error", "loaded", "durationchange", "fullscreenchange", "qualitychange", "camerachange", "resize", "enterpictureinpicture", "leavepictureinpicture"]);
 const events = [
@@ -153,12 +155,13 @@ const rootAttrs = computed(() => {
     "aria-live": "polite",
     "role": "application",
     "style": {
-      maxWidth: "100%",
-      width: `auto`,
-      height: "auto",
-      aspectRatio: `16/9`,
-      position: "relative",
-      backgroundColor: "black"
+      "--vimeo-ratio": props.ratio,
+      "maxWidth": "100%",
+      "width": `auto`,
+      "height": "auto",
+      "aspectRatio": props.ratio,
+      "position": "relative",
+      "backgroundColor": "black"
     },
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
@@ -173,7 +176,7 @@ const placeholderAttrs = computed(() => {
     style: {
       cursor: "pointer",
       width: "100%",
-      objectFit: "contain",
+      objectFit: props.placeholderObjectFit,
       height: "100%"
     }
   });
@@ -197,5 +200,5 @@ onBeforeUnmount(() => player?.unload());
 </template>
 
 <style>
-.vimeo-player iframe{aspect-ratio:16/9;height:auto;max-width:100%!important;width:100%}
+.vimeo-player iframe{aspect-ratio:var(--vimeo-ratio,16/9);height:auto;max-width:100%!important;width:100%}
 </style>

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

@@ -36,6 +36,13 @@ type __VLS_Props = {
     vimeoOptions?: VimeoOptions;
     id?: number | undefined;
     url?: string | undefined;
+    ratio?: string;
+    /**
+     * Object-fit for the placeholder image.
+     *
+     * @default 'contain'
+     */
+    placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
 declare var __VLS_1: any, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
@@ -117,6 +124,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onLeavepictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
+    ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -7,12 +7,12 @@ type __VLS_Props = {
     tweetId: string;
     /**
      * Custom API endpoint for fetching tweet data
-     * @default '/_scripts/x-embed'
+     * @default '/_scripts/embed/x'
      */
     apiEndpoint?: string;
     /**
      * Custom image proxy endpoint
-     * @default '/_scripts/x-embed-image'
+     * @default '/_scripts/embed/x-image'
      */
     imageProxyEndpoint?: string;
     /**

package/dist/runtime/components/ScriptXEmbed.vue

@@ -1,13 +1,16 @@
 <script setup>
-import { computed } from "vue";
 import { useAsyncData } from "nuxt/app";
+import { computed } from "vue";
 import { formatCount, formatTweetDate, proxyXImageUrl } from "../registry/x-embed";
+import { requireRegistryEndpoint } from "../utils";
 const props = defineProps({
   tweetId: { type: String, required: true },
-  apiEndpoint: { type: String, required: false, default: "/api/_scripts/x-embed" },
-  imageProxyEndpoint: { type: String, required: false, default: "/api/_scripts/x-embed-image" },
+  apiEndpoint: { type: String, required: false, default: "/_scripts/embed/x" },
+  imageProxyEndpoint: { type: String, required: false, default: "/_scripts/embed/x-image" },
   rootAttrs: { type: Object, required: false }
 });
+if (!props.apiEndpoint || props.apiEndpoint === "/_scripts/embed/x")
+  requireRegistryEndpoint("ScriptXEmbed", "xEmbed");
 const cacheKey = computed(() => `x-embed-${props.tweetId}`);
 const { data: tweet, status, error } = useAsyncData(
   cacheKey,

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

@@ -7,12 +7,12 @@ type __VLS_Props = {
     tweetId: string;
     /**
      * Custom API endpoint for fetching tweet data
-     * @default '/_scripts/x-embed'
+     * @default '/_scripts/embed/x'
      */
     apiEndpoint?: string;
     /**
      * Custom image proxy endpoint
-     * @default '/_scripts/x-embed-image'
+     * @default '/_scripts/embed/x-image'
      */
     imageProxyEndpoint?: string;
     /**

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

@@ -61,12 +61,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
-    playerVars: YT.PlayerVars;
     ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    playerVars: YT.PlayerVars;
     cookies: boolean;
     thumbnailSize: YoutubeThumbnailSize;
     webp: boolean;
-    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useHead } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptYouTubePlayer } from "../registry/youtube-player";
 import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
@@ -30,6 +30,7 @@ const events = [
   "onError",
   "onApiChange"
 ];
+const CAMEL_CASE_RE = /([A-Z])/g;
 const rootEl = ref();
 const youtubeEl = ref();
 const ready = ref(false);
@@ -70,9 +71,11 @@ onMounted(() => {
   onLoaded(async (instance) => {
     if (!isTriggered.value && trigger instanceof Promise) {
       const triggered = await trigger;
-      if (!triggered) return;
+      if (!triggered)
+        return;
     }
-    if (!youtubeEl.value) return;
+    if (!youtubeEl.value)
+      return;
     const YouTube = instance.YT instanceof Promise ? await instance.YT : instance.YT;
     await new Promise((resolve) => {
       if (typeof YT.Player === "undefined")
@@ -80,7 +83,8 @@ onMounted(() => {
       else
         resolve();
     });
-    if (!youtubeEl.value) return;
+    if (!youtubeEl.value)
+      return;
     player.value = new YT.Player(youtubeEl.value, {
       host: !props.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com",
       videoId: props.videoId,
@@ -89,7 +93,7 @@ onMounted(() => {
       playerVars: props.playerVars,
       ...props.playerOptions,
       events: Object.fromEntries(events.map((event) => [event, (e) => {
-        const emitEventName = event.replace(/([A-Z])/g, "-$1").replace("on-", "").toLowerCase();
+        const emitEventName = event.replace(CAMEL_CASE_RE, "-$1").replace("on-", "").toLowerCase();
         emits(emitEventName, e);
         if (event === "onReady") {
           ready.value = true;
@@ -151,6 +155,8 @@ const placeholderAttrs = computed(() => {
     src: isFallbackPlaceHolder.value ? fallbackPlaceHolder.value : placeholder.value,
     alt: "",
     loading: props.aboveTheFold ? "eager" : "lazy",
+    // @ts-expect-error untyped
+    fetchpriority: props.aboveTheFold ? "high" : void 0,
     style: {
       width: "100%",
       objectFit: props.placeholderObjectFit,

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

@@ -61,12 +61,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
-    playerVars: YT.PlayerVars;
     ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    playerVars: YT.PlayerVars;
     cookies: boolean;
     thumbnailSize: YoutubeThumbnailSize;
     webp: boolean;
-    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/useScript.js

@@ -1,9 +1,14 @@
-import { defu } from "defu";
+import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
 import { useScript as _useScript } from "@unhead/vue/scripts";
-import { reactive, ref } from "vue";
-import { onNuxtReady, useNuxtApp, useRuntimeConfig, injectHead, useHead } from "nuxt/app";
+import { defu } from "defu";
+import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { markRaw, ref } from "vue";
 import { logger } from "../logger.js";
-import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
+function ensureScripts(nuxtApp) {
+  if (!nuxtApp.$scripts) {
+    nuxtApp.$scripts = {};
+  }
+}
 function useNuxtScriptRuntimeConfig() {
   return useRuntimeConfig().public["nuxt-scripts"];
 }
@@ -22,7 +27,7 @@ export function useScript(input, options) {
       script: [{ src, type: "text/partytown" }]
     });
     const nuxtApp2 = useNuxtApp();
-    nuxtApp2.$scripts = nuxtApp2.$scripts || reactive({});
+    ensureScripts(nuxtApp2);
     const status = ref("loaded");
     const stub = {
       id: src,
@@ -50,7 +55,7 @@ export function useScript(input, options) {
   if (!options.head) {
     throw new Error("useScript() has been called without Nuxt context.");
   }
-  nuxtApp.$scripts = nuxtApp.$scripts || reactive({});
+  ensureScripts(nuxtApp);
   const exists = !!nuxtApp.$scripts?.[id];
   const err = options._validate?.();
   if (import.meta.dev && import.meta.client && err) {
@@ -152,5 +157,7 @@ export function useScript(input, options) {
       syncScripts();
     }
   }
+  markRaw(instance);
+  instance.toJSON = () => ({ id: instance.id, status: instance.status.value });
   return instance;
 }

package/dist/runtime/composables/useScriptEventPage.js

@@ -1,5 +1,5 @@
-import { useNuxtApp, useRoute, injectHead } from "nuxt/app";
-import { ref, onScopeDispose } from "vue";
+import { injectHead, useNuxtApp, useRoute } from "nuxt/app";
+import { onScopeDispose, ref } from "vue";
 export function useScriptEventPage(onChange) {
   const nuxt = useNuxtApp();
   const route = useRoute();

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

@@ -1,12 +1,22 @@
+import type { Ref } from 'vue';
 import type { ConsentScriptTriggerOptions } from '../types.js';
 interface UseConsentScriptTriggerApi extends Promise<void> {
     /**
      * A function that can be called to accept the consent and load the script.
      */
     accept: () => void;
+    /**
+     * A function that can be called to revoke consent and signal the script should be unloaded.
+     */
+    revoke: () => void;
+    /**
+     * Reactive reference to the consent state
+     */
+    consented: Ref<boolean>;
 }
 /**
  * Load a script once consent has been provided either through a resolvable `consent` or calling the `accept` method.
+ * Supports revoking consent via the reactive `consented` ref. Consumers should watch `consented` to react to revocation.
  * @param options
  */
 export declare function useScriptTriggerConsent(options?: ConsentScriptTriggerOptions): UseConsentScriptTriggerApi;

package/dist/runtime/composables/useScriptTriggerConsent.js

@@ -1,14 +1,37 @@
+import { onNuxtReady, requestIdleCallback, tryUseNuxtApp } from "nuxt/app";
 import { isRef, ref, toValue, watch } from "vue";
-import { tryUseNuxtApp, onNuxtReady, requestIdleCallback } from "nuxt/app";
 export function useScriptTriggerConsent(options) {
-  if (import.meta.server)
-    return new Promise(() => {
+  if (import.meta.server) {
+    const p = new Promise(() => {
     });
+    p.accept = () => {
+    };
+    p.revoke = () => {
+    };
+    p.consented = ref(false);
+    return p;
+  }
   const consented = ref(false);
   const nuxtApp = tryUseNuxtApp();
+  if (options?.consent) {
+    if (isRef(options?.consent)) {
+      watch(options.consent, (_val) => {
+        const val = toValue(_val);
+        consented.value = Boolean(val);
+      }, { immediate: true });
+    } else if (typeof options?.consent === "boolean") {
+      consented.value = options?.consent;
+    } else if (options?.consent instanceof Promise) {
+      options.consent.then((res) => {
+        consented.value = typeof res === "boolean" ? res : true;
+      }).catch(() => {
+        consented.value = false;
+      });
+    }
+  }
   const promise = new Promise((resolve) => {
-    watch(consented, (ready) => {
-      if (ready) {
+    watch(consented, (newValue, oldValue) => {
+      if (newValue && !oldValue) {
         const runner = nuxtApp?.runWithContext || ((cb) => cb());
         if (options?.postConsentTrigger instanceof Promise) {
           options.postConsentTrigger.then(() => runner(resolve));
@@ -32,24 +55,14 @@ export function useScriptTriggerConsent(options) {
         }
         runner(resolve);
       }
-    });
-    if (options?.consent) {
-      if (isRef(options?.consent)) {
-        watch(options.consent, (_val) => {
-          const val = toValue(_val);
-          consented.value = Boolean(val);
-        }, { immediate: true });
-      } else if (typeof options?.consent === "boolean") {
-        consented.value = options?.consent;
-      } else if (options?.consent instanceof Promise) {
-        options?.consent.then((res) => {
-          consented.value = typeof res === "boolean" ? res : true;
-        });
-      }
-    }
+    }, { immediate: true });
   });
   promise.accept = () => {
     consented.value = true;
   };
+  promise.revoke = () => {
+    consented.value = false;
+  };
+  promise.consented = consented;
   return promise;
 }

package/dist/runtime/composables/useScriptTriggerElement.js

@@ -2,7 +2,7 @@ import {
   useEventListener,
   useIntersectionObserver
 } from "@vueuse/core";
-import { tryOnScopeDispose, tryOnMounted } from "@vueuse/shared";
+import { tryOnMounted, tryOnScopeDispose } from "@vueuse/shared";
 import { watch } from "vue";
 function useElementVisibilityPromise(element) {
   let observer;

package/dist/runtime/composables/useScriptTriggerIdleTimeout.js

@@ -1,5 +1,5 @@
-import { tryOnScopeDispose } from "@vueuse/shared";
 import { useTimeoutFn } from "@vueuse/core";
+import { tryOnScopeDispose } from "@vueuse/shared";
 import { onNuxtReady } from "nuxt/app";
 export function useScriptTriggerIdleTimeout(options) {
   if (import.meta.server) {

package/dist/runtime/registry/bing-uet.d.ts

@@ -0,0 +1,20 @@
+import type { RegistryScriptInput } from '#nuxt-scripts/types';
+import { BingUetOptions } from './schemas.js';
+export { BingUetOptions };
+export type BingUetInput = RegistryScriptInput<typeof BingUetOptions, true, false>;
+export interface BingUetApi {
+    uetq: {
+        push: (event: string | Record<string, any>) => void;
+    };
+}
+declare global {
+    interface Window {
+        UET: new (options: {
+            ti: string;
+            enableAutoSpaTracking?: boolean;
+            q?: any[];
+        }) => BingUetApi['uetq'];
+        uetq: any[] | BingUetApi['uetq'];
+    }
+}
+export declare function useScriptBingUet<T extends BingUetApi>(_options?: BingUetInput): import("#nuxt-scripts/types").UseScriptContext<T>;

package/dist/runtime/registry/bing-uet.js

@@ -0,0 +1,29 @@
+import { useRegistryScript } from "../utils.js";
+import { BingUetOptions } from "./schemas.js";
+export { BingUetOptions };
+export function useScriptBingUet(_options) {
+  return useRegistryScript("bingUet", (options) => ({
+    scriptInput: {
+      src: "https://bat.bing.com/bat.js",
+      crossorigin: false
+    },
+    schema: import.meta.dev ? BingUetOptions : void 0,
+    scriptOptions: {
+      use() {
+        if (options?.id && typeof window.UET === "function" && Array.isArray(window.uetq)) {
+          const uetOptions = {
+            ti: options.id,
+            enableAutoSpaTracking: options.enableAutoSpaTracking ?? true,
+            q: window.uetq
+          };
+          window.uetq = new window.UET(uetOptions);
+          window.uetq.push("pageLoad");
+        }
+        return { uetq: window.uetq };
+      }
+    },
+    clientInit: import.meta.server ? void 0 : () => {
+      window.uetq = window.uetq || [];
+    }
+  }), _options);
+}

package/dist/runtime/registry/bluesky-embed.d.ts

@@ -0,0 +1,116 @@
+import type { RegistryScriptInput } from '#nuxt-scripts/types';
+import { BlueskyEmbedOptions } from './schemas.js';
+export { BlueskyEmbedOptions };
+export interface BlueskyEmbedPostData {
+    uri: string;
+    cid: string;
+    author: {
+        did: string;
+        handle: string;
+        displayName: string;
+        avatar: string;
+        labels: Array<{
+            val: string;
+        }>;
+        verification?: {
+            verifiedStatus: string;
+        };
+    };
+    record: {
+        $type: string;
+        createdAt: string;
+        text: string;
+        langs?: string[];
+        facets?: Array<{
+            features: Array<{
+                $type: string;
+                uri?: string;
+                did?: string;
+                tag?: string;
+            }>;
+            index: {
+                byteStart: number;
+                byteEnd: number;
+            };
+        }>;
+        embed?: {
+            $type: string;
+            images?: Array<{
+                alt: string;
+                image: {
+                    ref: {
+                        $link: string;
+                    };
+                    mimeType: string;
+                    size: number;
+                };
+                aspectRatio?: {
+                    width: number;
+                    height: number;
+                };
+            }>;
+            external?: {
+                uri: string;
+                title: string;
+                description: string;
+                thumb?: {
+                    ref: {
+                        $link: string;
+                    };
+                    mimeType: string;
+                    size: number;
+                };
+            };
+        };
+    };
+    embed?: {
+        $type: string;
+        images?: Array<{
+            thumb: string;
+            fullsize: string;
+            alt: string;
+            aspectRatio?: {
+                width: number;
+                height: number;
+            };
+        }>;
+        external?: {
+            uri: string;
+            title: string;
+            description: string;
+            thumb?: string;
+        };
+    };
+    likeCount: number;
+    repostCount: number;
+    replyCount: number;
+    quoteCount: number;
+    indexedAt: string;
+    labels: Array<{
+        val: string;
+    }>;
+}
+export type BlueskyEmbedInput = RegistryScriptInput<typeof BlueskyEmbedOptions, false, false>;
+/**
+ * Extract the handle/DID and post rkey from a Bluesky post URL
+ */
+export declare function extractBlueskyPostId(url: string): {
+    actor: string;
+    rkey: string;
+} | undefined;
+/**
+ * Proxy a Bluesky image URL through the server
+ */
+export declare function proxyBlueskyImageUrl(url: string, proxyEndpoint?: string): string;
+/**
+ * Format a Bluesky post date for display
+ */
+export declare function formatBlueskyDate(dateString: string): string;
+/**
+ * Format a number for display (e.g., 1234 -> 1.2K)
+ */
+export declare function formatCount(count: number): string;
+/**
+ * Convert Bluesky facets (byte-range rich text annotations) to HTML
+ */
+export declare function facetsToHtml(text: string, facets?: BlueskyEmbedPostData['record']['facets']): string;

package/dist/runtime/registry/bluesky-embed.js

@@ -0,0 +1,72 @@
+import { BlueskyEmbedOptions } from "./schemas.js";
+export { BlueskyEmbedOptions };
+const BSKY_POST_URL_RE = /bsky\.app\/profile\/([^/]+)\/post\/([^/?]+)/;
+export function extractBlueskyPostId(url) {
+  const match = url.match(BSKY_POST_URL_RE);
+  if (!match)
+    return void 0;
+  return { actor: match[1], rkey: match[2] };
+}
+export function proxyBlueskyImageUrl(url, proxyEndpoint = "/_scripts/embed/bluesky-image") {
+  const separator = proxyEndpoint.includes("?") ? "&" : "?";
+  return `${proxyEndpoint}${separator}url=${encodeURIComponent(url)}`;
+}
+export function formatBlueskyDate(dateString) {
+  const date = new Date(dateString);
+  const time = date.toLocaleString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+    timeZone: "UTC"
+  });
+  const month = date.toLocaleString("en-US", { month: "short", timeZone: "UTC" });
+  return `${time} \xB7 ${month} ${date.getUTCDate()}, ${date.getUTCFullYear()}`;
+}
+export function formatCount(count) {
+  if (count >= 1e6) {
+    return `${(count / 1e6).toFixed(1)}M`;
+  }
+  if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}K`;
+  }
+  return count.toString();
+}
+export function facetsToHtml(text, facets) {
+  if (!facets?.length)
+    return escapeHtml(text);
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+  const bytes = encoder.encode(text);
+  const sorted = facets.toSorted((a, b) => a.index.byteStart - b.index.byteStart);
+  const parts = [];
+  let lastEnd = 0;
+  for (const facet of sorted) {
+    if (facet.index.byteStart > lastEnd) {
+      parts.push(escapeHtml(decoder.decode(bytes.slice(lastEnd, facet.index.byteStart))));
+    }
+    const facetText = escapeHtml(decoder.decode(bytes.slice(facet.index.byteStart, facet.index.byteEnd)));
+    for (const feature of facet.features) {
+      if (feature.$type === "app.bsky.richtext.facet#link" && feature.uri) {
+        parts.push(`<a href="${escapeHtml(feature.uri)}" target="_blank" rel="noopener noreferrer">${facetText}</a>`);
+      } else if (feature.$type === "app.bsky.richtext.facet#mention" && feature.did) {
+        parts.push(`<a href="https://bsky.app/profile/${escapeHtml(feature.did)}" target="_blank" rel="noopener noreferrer">${facetText}</a>`);
+      } else if (feature.$type === "app.bsky.richtext.facet#tag" && feature.tag) {
+        parts.push(`<a href="https://bsky.app/hashtag/${escapeHtml(feature.tag)}" target="_blank" rel="noopener noreferrer">${facetText}</a>`);
+      } else {
+        parts.push(facetText);
+      }
+    }
+    lastEnd = facet.index.byteEnd;
+  }
+  if (lastEnd < bytes.length) {
+    parts.push(escapeHtml(decoder.decode(bytes.slice(lastEnd))));
+  }
+  return parts.join("");
+}
+const AMP_RE = /&/g;
+const LT_RE = /</g;
+const GT_RE = />/g;
+const QUOT_RE = /"/g;
+function escapeHtml(str) {
+  return str.replace(AMP_RE, "&amp;").replace(LT_RE, "&lt;").replace(GT_RE, "&gt;").replace(QUOT_RE, "&quot;");
+}