@absolutejs/absolute 0.20.0-beta.177 → 0.20.0-beta.179

package/dist/vue/index.js

@@ -491,6 +491,12 @@ var CONVENTIONS_KEY = "__absoluteConventions", isConventionsMap = (value) => Boo
     logConventionRenderError(framework, "error", renderError);
   }
   return null;
+}, isPageRequest = (request) => {
+  if (request.headers.get("hx-request") === "true")
+    return true;
+  if (request.headers.get("sec-fetch-dest") === "document")
+    return true;
+  return (request.headers.get("accept") ?? "").includes("text/html");
 }, renderConventionError = async (framework, pageName, error) => {
   const errorProps = buildErrorProps(error);
   const frameworkResponse = await tryFrameworkErrorConvention(framework, pageName, errorProps, error);
@@ -502,12 +508,6 @@ var CONVENTIONS_KEY = "__absoluteConventions", isConventionsMap = (value) => Boo
       return htmlResponse;
   }
   return null;
-}, isPageRequest = (request) => {
-  if (request.headers.get("hx-request") === "true")
-    return true;
-  if (request.headers.get("sec-fetch-dest") === "document")
-    return true;
-  return (request.headers.get("accept") ?? "").includes("text/html");
 }, renderStaticRouteError = async (request, error) => {
   if (!isPageRequest(request))
     return null;
@@ -927,7 +927,7 @@ var ISLAND_BOOTSTRAP_MANIFEST_KEY = "AbsoluteIslandBootstrap", LEGACY_ISLAND_BOO
       islands[framework] = entries;
   }
   return islands;
-}, getIslandManifestKey = (framework, component) => `Island${toIslandFrameworkSegment(framework)}${component}`;
+}, getIslandManifestKey = (framework, component) => `Island${toIslandFrameworkSegment(framework)}${component}`, ISLAND_STYLE_PREFIX = "IslandStyle", getIslandStyleManifestEntries = (manifest) => Object.entries(manifest).filter(([key]) => key.startsWith(ISLAND_STYLE_PREFIX)), getIslandStyleManifestKey = (framework, component) => `${ISLAND_STYLE_PREFIX}${toIslandFrameworkSegment(framework)}${component}`;
 
 // src/core/islandPageContext.ts
 var ISLAND_MARKER = 'data-island="true"', MANIFEST_MARKER = "__ABSOLUTE_MANIFEST__", ISLAND_STATE_MARKER = "__ABS_ISLAND_STATE__", CLOSING_HEAD_TAG = "</head>", warnedMissingBootstrap = false, warnIfBootstrapMissing = (manifest) => {
@@ -964,12 +964,27 @@ var ISLAND_MARKER = 'data-island="true"', MANIFEST_MARKER = "__ABSOLUTE_MANIFEST
     browserManifest[key] = value;
   }
   return browserManifest;
-}, buildIslandsHeadMarkup = (manifest) => {
+}, ISLAND_MARKER_TAG, ISLAND_FRAMEWORKS, readMarkerAttribute = (tag, name) => new RegExp(`\\b${name}="([^"]*)"`).exec(tag)?.[1]?.replaceAll("&quot;", '"').replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&amp;", "&"), toIslandFramework = (value) => ISLAND_FRAMEWORKS.find((framework) => framework === value), collectRenderedIslandStyleKeys = (html) => {
+  const keys = new Set;
+  for (const [tag] of html.matchAll(ISLAND_MARKER_TAG)) {
+    const framework = toIslandFramework(readMarkerAttribute(tag, "data-framework"));
+    const component = readMarkerAttribute(tag, "data-component");
+    if (framework && component)
+      keys.add(getIslandStyleManifestKey(framework, component));
+  }
+  return keys;
+}, buildIslandStyleLinks = (manifest, html) => {
+  if (html === undefined)
+    return "";
+  const renderedKeys = collectRenderedIslandStyleKeys(html);
+  return getIslandStyleManifestEntries(manifest).filter(([key]) => renderedKeys.has(key)).filter(([, href]) => !html.includes(`href="${href}"`)).map(([key, href]) => `<link rel="stylesheet" href="${href}" data-island-style="${key}"${nonceAttr()}>`).join("");
+}, buildIslandsHeadMarkup = (manifest, html) => {
+  const styleLinks = buildIslandStyleLinks(manifest, html);
   const manifestScript = `<script${nonceAttr()}>window.__ABSOLUTE_MANIFEST__ = ${escapeScriptContent(JSON.stringify(toBrowserManifest(manifest)))}</script>`;
   const islandStateScript = `<script${nonceAttr()}>window.__ABS_ISLAND_STATE__ = ${escapeScriptContent(JSON.stringify(globalThis.__ABS_ISLAND_STATE__ ?? {}))}</script>`;
   const bootstrapPath = getIslandBootstrapPath(manifest);
   const bootstrapScript = bootstrapPath ? `<script${nonceAttr()} type="module" src="${bootstrapPath}"></script>` : "";
-  return `${manifestScript}${islandStateScript}${bootstrapScript}`;
+  return `${styleLinks}${manifestScript}${islandStateScript}${bootstrapScript}`;
 }, injectHeadMarkup = (html, markup) => {
   const closingHeadIndex = html.indexOf("</head>");
   if (closingHeadIndex >= 0) {
@@ -1151,7 +1166,7 @@ var ISLAND_MARKER = 'data-island="true"', MANIFEST_MARKER = "__ABSOLUTE_MANIFEST
     return html;
   }
   warnIfBootstrapMissing(manifest);
-  return injectHeadMarkup(html, buildIslandsHeadMarkup(manifest));
+  return injectHeadMarkup(html, buildIslandsHeadMarkup(manifest, html));
 }, injectIslandPageContextStream = (stream, options) => {
   const manifest = globalThis.__absoluteManifest;
   if (!manifest)
@@ -1175,6 +1190,13 @@ var init_islandPageContext = __esm(() => {
   init_logger();
   MANIFEST_BUILD_DIR_KEY = Symbol.for("absolutejs.islandManifestBuildDir");
   WINDOWS_ABSOLUTE_PATH = /^[A-Za-z]:[\\/]|^\\\\/;
+  ISLAND_MARKER_TAG = /<[^>]*\bdata-island="true"[^>]*>/g;
+  ISLAND_FRAMEWORKS = [
+    "react",
+    "svelte",
+    "vue",
+    "angular"
+  ];
 });
 
 // src/core/devRouteRegistrationCallsite.ts
@@ -4730,7 +4752,7 @@ import { basename as basename4, dirname as dirname6, extname as extname2, join a
 var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandGeneration, transpiler, ensureRelativeImportPath = (from, target) => {
   const importPath = relative3(dirname6(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
-}, processDirectoryEntries = (entries, dir, targetFileName, stack) => {
+}, escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), replaceQuotedSpecifier = (code, spec, target) => code.replace(new RegExp(`(['"])${escapeRegExp(spec)}\\1`, "g"), (_match, quote) => `${quote}${target}${quote}`), processDirectoryEntries = (entries, dir, targetFileName, stack) => {
   for (const entry of entries) {
     const entryPath = join8(dir, entry.name);
     if (entry.isDirectory())
@@ -4775,18 +4797,21 @@ var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandG
     return null;
   }
   const basePath = resolve6(dirname6(from), spec);
+  const extensions = [
+    ".ts",
+    ".tsx",
+    ".mts",
+    ".cts",
+    ".js",
+    ".jsx",
+    ".mjs",
+    ".cjs",
+    ".json"
+  ];
   const candidates = [
     basePath,
-    `${basePath}.ts`,
-    `${basePath}.js`,
-    `${basePath}.mjs`,
-    `${basePath}.cjs`,
-    `${basePath}.json`,
-    join8(basePath, "index.ts"),
-    join8(basePath, "index.js"),
-    join8(basePath, "index.mjs"),
-    join8(basePath, "index.cjs"),
-    join8(basePath, "index.json")
+    ...extensions.map((extension) => `${basePath}${extension}`),
+    ...extensions.map((extension) => join8(basePath, `index${extension}`))
   ];
   const existResults = await Promise.all(candidates.map((candidate) => Bun.file(candidate).exists()));
   const foundIndex = existResults.indexOf(true);
@@ -4871,7 +4896,7 @@ var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandG
     rewrittenModulePaths.set(spec, ensureRelativeImportPath(getCachedModulePath2(sourcePath), resolvedModuleImport));
   }
   for (const [spec, resolvedModuleImport] of rewrittenModulePaths) {
-    transpiled = transpiled.replaceAll(spec, resolvedModuleImport);
+    transpiled = replaceQuotedSpecifier(transpiled, spec, resolvedModuleImport);
   }
   let compiledCode = compile(transpiled, {
     css: "injected",
@@ -4883,10 +4908,10 @@ var serverCacheRoot2, compiledModuleCache2, originalSourcePathCache, syncIslandG
     hmr: isDevelopmentRuntime()
   }).js.code;
   for (const [spec, compiledChildPath] of childModulePaths) {
-    compiledCode = compiledCode.replaceAll(spec, ensureRelativeImportPath(getCachedModulePath2(sourcePath), compiledChildPath));
+    compiledCode = replaceQuotedSpecifier(compiledCode, spec, ensureRelativeImportPath(getCachedModulePath2(sourcePath), compiledChildPath));
   }
   for (const [spec, resolvedModuleImport] of rewrittenModulePaths) {
-    compiledCode = compiledCode.replaceAll(spec, resolvedModuleImport);
+    compiledCode = replaceQuotedSpecifier(compiledCode, spec, resolvedModuleImport);
   }
   const sourceId = JSON.stringify(relative3(process.cwd(), resolutionSourcePath).replace(/\\/g, "/"));
   const componentName = /export default function ([\w$]+)\s*\(/.exec(compiledCode)?.[1];
@@ -4946,9 +4971,9 @@ var createVueCompiler = async () => {
 // src/core/vueServerModule.ts
 import { readFileSync as readFileSync7, realpathSync } from "fs";
 import { mkdir as mkdir3 } from "fs/promises";
-import { dirname as dirname7, join as join9, relative as relative4, resolve as resolve7 } from "path";
+import { basename as basename5, dirname as dirname7, join as join9, relative as relative4, resolve as resolve7 } from "path";
 var {Transpiler } = globalThis.Bun;
-var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, syncIslandGeneration2, transpiler2, ensureRelativeImportPath2 = (from, target) => {
+var serverCacheRoot3, compiledModuleCache3, syncIslandGeneration2, transpiler2, ensureRelativeImportPath2 = (from, target) => {
   const importPath = relative4(dirname7(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
 }, getCachedModulePath3 = (sourcePath) => {
@@ -4982,7 +5007,13 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   ].join(`
 `) : nonVueLines.join(`
 `);
-}, extractRelativeVueImports = (sourceCode) => Array.from(sourceCode.matchAll(/import\s+[\s\S]+?['"]([^'"]+)['"]/g)).map((match) => match[1]).filter((importPath) => typeof importPath === "string" && importPath.startsWith(".") && importPath.endsWith(".vue")), compileVueServerModule = async (sourcePath) => {
+}, RELATIVE_SPECIFIER_PATTERN, extractRelativeImports = (code) => Array.from(new Set(Array.from(code.matchAll(RELATIVE_SPECIFIER_PATTERN), (match) => match.groups?.spec).filter((spec) => spec !== undefined))), resolveFromSource = (spec, sourcePath) => {
+  try {
+    return Bun.resolveSync(spec, dirname7(sourcePath));
+  } catch {
+    return null;
+  }
+}, compileVueServerModule = async (sourcePath) => {
   syncIslandGeneration2();
   const cachedModulePath = compiledModuleCache3.get(sourcePath);
   if (cachedModulePath)
@@ -4990,7 +5021,7 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   const compiler = await loadVueCompiler();
   const source = await Bun.file(sourcePath).text();
   const { descriptor } = compiler.parse(source, { filename: sourcePath });
-  const componentId = Bun.hash(sourcePath).toString(BASE_36_RADIX).slice(0, ISLAND_COMPONENT_ID_LENGTH);
+  const componentId = toKebab(basename5(sourcePath, ".vue"));
   const hasScript = descriptor.script || descriptor.scriptSetup;
   const compiledScript = hasScript ? compiler.compileScript(descriptor, {
     fs: {
@@ -5015,10 +5046,10 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
     ssr: true,
     ssrCssVars: descriptor.cssVars
   }).code : "const ssrRender = () => {};";
-  const childImportPaths = extractRelativeVueImports(compiledScript.content);
-  const compiledChildren = await Promise.all(childImportPaths.map(async (relativeImport) => ({
-    compiledPath: await compileVueServerModule(resolve7(dirname7(sourcePath), relativeImport)),
-    spec: relativeImport
+  const relativeImports = extractRelativeImports(compiledScript.content);
+  const compiledChildren = await Promise.all(relativeImports.filter((spec) => spec.endsWith(".vue")).map(async (spec) => ({
+    compiledPath: await compileVueServerModule(resolve7(dirname7(sourcePath), spec)),
+    spec
   })));
   const strippedScript = stripExports(compiledScript.content);
   const transpiledScript = transpiler2.transformSync(strippedScript);
@@ -5030,17 +5061,28 @@ var ISLAND_COMPONENT_ID_LENGTH = 8, serverCacheRoot3, compiledModuleCache3, sync
   ].join(`
 `));
   const compiledModulePath = getCachedModulePath3(sourcePath);
-  let rewritten = assembled;
+  const rewrittenSpecifiers = new Map;
   for (const child of compiledChildren) {
-    rewritten = rewritten.replaceAll(child.spec, ensureRelativeImportPath2(compiledModulePath, child.compiledPath));
+    rewrittenSpecifiers.set(child.spec, ensureRelativeImportPath2(compiledModulePath, child.compiledPath));
   }
+  for (const spec of extractRelativeImports(assembled)) {
+    if (rewrittenSpecifiers.has(spec))
+      continue;
+    const resolvedImport = resolveFromSource(spec, sourcePath);
+    if (!resolvedImport)
+      continue;
+    rewrittenSpecifiers.set(spec, ensureRelativeImportPath2(compiledModulePath, resolvedImport));
+  }
+  const rewritten = assembled.replace(RELATIVE_SPECIFIER_PATTERN, (match, prefix, quote, spec) => {
+    const target = rewrittenSpecifiers.get(spec);
+    return target ? `${prefix}${quote}${target}${quote}` : match;
+  });
   await mkdir3(dirname7(compiledModulePath), { recursive: true });
   await writeIfChanged2(compiledModulePath, rewritten);
   compiledModuleCache3.set(sourcePath, compiledModulePath);
   return compiledModulePath;
 };
 var init_vueServerModule = __esm(() => {
-  init_constants();
   init_isFile();
   serverCacheRoot3 = join9(process.cwd(), ".absolutejs", "islands", "vue");
   compiledModuleCache3 = new Map;
@@ -5048,6 +5090,7 @@ var init_vueServerModule = __esm(() => {
     compiledModuleCache3.clear();
   });
   transpiler2 = new Transpiler({ loader: "ts", target: "browser" });
+  RELATIVE_SPECIFIER_PATTERN = /(\bfrom\s*|\bimport\s*\(\s*|\bimport\s+)(['"])(?<spec>\.{1,2}\/[^'"]*)\2/g;
 });
 
 // src/core/renderIslandMarkup.ts
@@ -5209,6 +5252,18 @@ var init_renderIslandMarkup = __esm(() => {
   });
 });
 
+// src/utils/requestRenderUrl.ts
+var requestRenderUrl = (request) => {
+  if (!request)
+    return;
+  try {
+    const parsed = new URL(request.url);
+    return `${parsed.pathname.replace(/\/{2,}/g, "/")}${parsed.search}`;
+  } catch {
+    return;
+  }
+};
+
 // src/vue/pageHandler.ts
 init_escapeScriptContent();
 init_cspNonceRef();
@@ -5216,6 +5271,38 @@ init_inlinePageCss();
 init_spaRouteCss();
 init_spaRouteManifest();
 init_islandPageContext();
+
+// src/core/islandStylesheet.ts
+init_cspNonceRef();
+var INLINE_ISLAND_STYLES_CONTEXT_KEY = "__absoluteInlineIslandStyles";
+var ISLAND_STYLE_PRECEDENCE = "absolute-islands";
+var ISLAND_FRAMEWORKS2 = [
+  "react",
+  "svelte",
+  "vue",
+  "angular"
+];
+var toIslandFramework2 = (value) => ISLAND_FRAMEWORKS2.find((framework) => framework === value);
+var readIslandManifest = () => {
+  const manifest = typeof window === "undefined" ? Reflect.get(globalThis, "__absoluteManifest") : Reflect.get(window, "__ABSOLUTE_MANIFEST__");
+  return typeof manifest === "object" && manifest !== null ? manifest : undefined;
+};
+var findIslandStylesheet = (framework, component) => {
+  const islandFramework = toIslandFramework2(framework);
+  const manifest = readIslandManifest();
+  if (!islandFramework || !manifest)
+    return;
+  const key = getIslandStyleManifestKey(islandFramework, component);
+  const href = Reflect.get(manifest, key);
+  return typeof href === "string" ? { href, key } : undefined;
+};
+var readIslandStyleNonce = () => {
+  if (typeof document === "undefined")
+    return readCspNonce() ?? "";
+  return Array.from(document.querySelectorAll("script[nonce]")).find((element) => element.nonce)?.nonce ?? "";
+};
+
+// src/vue/pageHandler.ts
 init_devRouteRegistrationCallsite();
 init_requestContext();
 init_pageProtocol();
@@ -5618,16 +5705,7 @@ var readSetupAppHook = (value) => {
 };
 var readHasSpaRoutes = (value) => isRecord4(value) && Array.isArray(value["routes"]);
 var readDefaultExport = (value) => isRecord4(value) ? value.default : undefined;
-var resolveRequestRenderUrl = (request) => {
-  if (!request)
-    return "/";
-  try {
-    const parsed = new URL(request.url);
-    return `${parsed.pathname}${parsed.search}`;
-  } catch {
-    return "/";
-  }
-};
+var resolveRequestRenderUrl = (request) => requestRenderUrl(request) ?? "/";
 var primeVueStream = async (stream) => {
   const reader = stream.getReader();
   const firstChunk = await reader.read();
@@ -5783,10 +5861,12 @@ var handleVuePageRequest = async (input) => {
       }
       if (resolvedOptions?.collectStreamingSlots !== true) {
         const body = await renderToString(app, ssrContext);
-        return new Response(`${head}${body}${buildTail()}`, {
+        const html = injectIslandPageContext(`${head}${body}${buildTail()}`, { hasIslands: resolvedPage.hasIslands ? true : undefined });
+        return new Response(html, {
           headers: streamingPageHeaders()
         });
       }
+      ssrContext[INLINE_ISLAND_STYLES_CONTEXT_KEY] = new Set;
       const bodyStream = renderToWebStream(app, ssrContext);
       const { firstChunk, reader } = await primeVueStream(bodyStream);
       const stream = new ReadableStream({
@@ -5856,7 +5936,12 @@ var applyVueRouterRedirect = (router, requestedUrl, setRedirect, status = DEFAUL
 var defineRoutes = (routes) => routes;
 var defineVueSetupApp = (hook) => hook;
 // src/vue/Island.ts
-import { defineComponent, h, onServerPrefetch } from "vue";
+import {
+  defineComponent,
+  h as h2,
+  onServerPrefetch,
+  useSSRContext
+} from "vue";
 
 // src/client/preserveIslandMarkup.ts
 init_islandMarkupAttributes();
@@ -5910,6 +5995,21 @@ var preserveIslandMarkup = (props) => {
     innerHTML: liveCandidate.innerHTML
   };
 };
+var claimedServerIslands = new WeakSet;
+var claimServerIslandStyleLink = (props) => {
+  if (typeof document === "undefined")
+    return null;
+  const element = Array.from(document.querySelectorAll('[data-island="true"]')).find((candidate) => !claimedServerIslands.has(candidate) && isMatchingIslandElement(candidate, props));
+  if (!element)
+    return null;
+  claimedServerIslands.add(element);
+  const previous = element.previousSibling;
+  if (!(previous instanceof HTMLLinkElement))
+    return null;
+  const key = previous.dataset.islandStyle;
+  const href = previous.getAttribute("href");
+  return key && href ? { href, key } : null;
+};
 var innerHtmlObjects = new Map;
 var getStableInnerHtml = (html) => {
   const existing = innerHtmlObjects.get(html);
@@ -5925,7 +6025,7 @@ init_islandMarkupAttributes();
 
 // src/core/normalizeIslandProps.ts
 var EMPTY_PROPS = {};
-var ISLAND_FRAMEWORKS = [
+var ISLAND_FRAMEWORKS3 = [
   "react",
   "svelte",
   "vue",
@@ -5938,7 +6038,7 @@ var ISLAND_HYDRATE_MODES = [
   "visible",
   "none"
 ];
-var isIslandFramework = (value) => ISLAND_FRAMEWORKS.some((framework) => framework === value);
+var isIslandFramework = (value) => ISLAND_FRAMEWORKS3.some((framework) => framework === value);
 var isIslandHydrate = (value) => ISLAND_HYDRATE_MODES.some((mode) => mode === value);
 var normalizeRuntimeIslandRenderProps = (raw) => {
   const { component, framework, hydrate, props } = raw;
@@ -5977,6 +6077,40 @@ var normalizeIslandProps = (value) => {
 
 // src/vue/Island.ts
 init_renderIslandMarkup();
+
+// src/vue/islandStyleLink.ts
+import { h } from "vue";
+var readInlineStyleKeys = (ssrContext) => {
+  if (typeof ssrContext !== "object" || ssrContext === null)
+    return;
+  const keys = Reflect.get(ssrContext, INLINE_ISLAND_STYLES_CONTEXT_KEY);
+  return keys instanceof Set ? keys : undefined;
+};
+var claimInlineIslandStyleLink = (ssrContext, props) => {
+  const claimed = readInlineStyleKeys(ssrContext);
+  const stylesheet = claimed ? findIslandStylesheet(props.framework, props.component) : undefined;
+  if (!claimed || !stylesheet || claimed.has(stylesheet.key))
+    return null;
+  claimed.add(stylesheet.key);
+  const nonce = readIslandStyleNonce();
+  return {
+    "data-island-style": stylesheet.key,
+    href: stylesheet.href,
+    ...nonce ? { nonce } : {},
+    rel: "stylesheet"
+  };
+};
+var hydratedIslandStyleLink = (props) => {
+  const link = claimServerIslandStyleLink(props);
+  return link ? {
+    "data-island-style": link.key,
+    href: link.href,
+    rel: "stylesheet"
+  } : null;
+};
+var withIslandStyleLink = (link, island) => link ? [h("link", link), island] : island;
+
+// src/vue/Island.ts
 var defineRuntimeIslandComponent = (setup) => defineComponent({
   name: "AbsoluteIsland",
   props: {
@@ -6001,25 +6135,33 @@ var defineRuntimeIslandComponent = (setup) => defineComponent({
 });
 var Island = defineRuntimeIslandComponent((props) => {
   const isBrowser = typeof window !== "undefined";
+  const ssrContext = isBrowser ? undefined : useSSRContext();
   let markerAttributes = getIslandMarkerAttributes(props);
   let html = "";
+  let styleLink = isBrowser ? hydratedIslandStyleLink(props) : null;
   onServerPrefetch(async () => {
     const result = await renderIslandResult(requireCurrentIslandRegistry(), props);
     ({ attributes: markerAttributes, html } = result);
+    styleLink = claimInlineIslandStyleLink(ssrContext, props);
   });
   return () => {
     const preserved = isBrowser ? preserveIslandMarkup(props) : null;
-    return h("div", {
+    return withIslandStyleLink(styleLink, h2("div", {
       ...preserved?.attributes ?? markerAttributes,
       "data-allow-mismatch": "",
       innerHTML: isBrowser ? preserved?.innerHTML : html
-    });
+    }));
   };
 });
 // src/vue/createIsland.ts
 init_islandMarkupAttributes();
 init_renderIslandMarkup();
-import { defineComponent as defineComponent2, h as h2, onServerPrefetch as onServerPrefetch2 } from "vue";
+import {
+  defineComponent as defineComponent2,
+  h as h3,
+  onServerPrefetch as onServerPrefetch2,
+  useSSRContext as useSSRContext2
+} from "vue";
 var defineRuntimeIslandComponent2 = (setup) => defineComponent2({
   name: "AbsoluteIsland",
   props: {
@@ -6044,17 +6186,20 @@ var defineRuntimeIslandComponent2 = (setup) => defineComponent2({
 });
 var createTypedIsland = (registry) => defineRuntimeIslandComponent2((props) => {
   const isBrowser = typeof window !== "undefined";
+  const ssrContext = isBrowser ? undefined : useSSRContext2();
   let markerAttributes = getIslandMarkerAttributes(props);
   let html = "";
+  let styleLink = isBrowser ? hydratedIslandStyleLink(props) : null;
   onServerPrefetch2(async () => {
     const result = await renderIslandResult(registry, props);
     ({ attributes: markerAttributes, html } = result);
+    styleLink = claimInlineIslandStyleLink(ssrContext, props);
   });
-  return () => h2("div", {
+  return () => withIslandStyleLink(styleLink, h3("div", {
     ...markerAttributes,
     "data-allow-mismatch": "",
     innerHTML: isBrowser ? undefined : html
-  });
+  }));
 });
 // src/vue/useIslandStore.ts
 import { customRef, onBeforeUnmount } from "vue";
@@ -6334,7 +6479,7 @@ var preserveBrowserTranslation = (strategy) => {
   return translatedStrategy;
 };
 // src/vue/components/Image.ts
-import { computed, defineComponent as defineComponent3, h as h3, ref } from "vue";
+import { computed, defineComponent as defineComponent3, h as h4, ref } from "vue";
 
 // src/utils/imageClient.ts
 init_constants();
@@ -6471,7 +6616,7 @@ var Image = defineComponent3({
       props.onError?.(event);
     };
     return () => {
-      const imgNode = h3("img", {
+      const imgNode = h4("img", {
         alt: props.alt,
         class: props.className,
         crossorigin: props.crossOrigin,
@@ -6488,7 +6633,7 @@ var Image = defineComponent3({
         style: imgStyle.value,
         width: props.fill ? undefined : props.width
       });
-      return props.fill ? h3("span", { style: fillWrapperStyle }, [imgNode]) : imgNode;
+      return props.fill ? h4("span", { style: fillWrapperStyle }, [imgNode]) : imgNode;
     };
   }
 });
@@ -6496,12 +6641,12 @@ var Image = defineComponent3({
 import {
   cloneVNode,
   defineComponent as defineComponent4,
-  h as h4,
+  h as h5,
   isVNode,
   onMounted,
   onBeforeUnmount as onBeforeUnmount2,
   ref as ref2,
-  useSSRContext
+  useSSRContext as useSSRContext3
 } from "vue";
 var renderVueNodesToHtml = async (nodes) => {
   const { createSSRApp, h: createVNode } = await import("vue");
@@ -6644,7 +6789,7 @@ var SuspenseSlot = defineComponent4({
     const hasError = ref2(false);
     const hasPatchedDom = ref2(readPatchedDomState());
     const usesFrameworkSlots = hasFrameworkSlots(slots.default, slots.fallback, slots.error, props.promise);
-    const isSsrRender = useSSRContext() !== undefined;
+    const isSsrRender = useSSRContext3() !== undefined;
     if (isSsrRender) {
       registerSuspenseSlotForSsr(props, slots, usesFrameworkSlots);
     }
@@ -6694,14 +6839,14 @@ var SuspenseSlot = defineComponent4({
     };
     return () => {
       if (!usesFrameworkSlots) {
-        return h4("div", {
+        return h5("div", {
           class: props.className,
           "data-absolute-slot": "true",
           id: props.id,
           innerHTML: props.fallbackHtml
         });
       }
-      return h4("div", {
+      return h5("div", {
         class: props.className,
         "data-absolute-slot": "true",
         "data-allow-mismatch": "",
@@ -6711,7 +6856,7 @@ var SuspenseSlot = defineComponent4({
   }
 });
 // src/vue/components/StreamSlot.ts
-import { defineComponent as defineComponent5, h as h5, useSSRContext as useSSRContext2 } from "vue";
+import { defineComponent as defineComponent5, h as h6, useSSRContext as useSSRContext4 } from "vue";
 var StreamSlot = defineComponent5({
   name: "AbsoluteStreamSlot",
   props: {
@@ -6726,10 +6871,10 @@ var StreamSlot = defineComponent5({
     timeoutMs: { default: undefined, type: Number }
   },
   setup(props) {
-    if (useSSRContext2() !== undefined) {
+    if (useSSRContext4() !== undefined) {
       registerStreamSlotForSsr(props);
     }
-    return () => h5("div", {
+    return () => h6("div", {
       class: props.className,
       "data-absolute-slot": "true",
       id: props.id,
@@ -6914,7 +7059,7 @@ var useServerData = (key, fetcher, options = {}) => {
   return state;
 };
 // src/vue/router/Link.ts
-import { defineComponent as defineComponent6, getCurrentInstance as getCurrentInstance2, h as h6 } from "vue";
+import { defineComponent as defineComponent6, getCurrentInstance as getCurrentInstance2, h as h7 } from "vue";
 
 // src/client/prefetch.ts
 var PREFETCH_CACHE_LIMIT = 16;
@@ -7382,7 +7527,7 @@ var Link = defineComponent6({
         router.push(props.href);
       }
     };
-    return () => h6("a", {
+    return () => h7("a", {
       download: props.download,
       href: props.href,
       onBlur,
@@ -7418,5 +7563,5 @@ export {
   useServerData
 };
 
-//# debugId=BD21CC972FDF821C64756E2164756E21
+//# debugId=9F5483EBA9A0E22964756E2164756E21
 //# sourceMappingURL=index.js.map