@homepages/template-kit 0.8.0 → 0.8.1-dev-20260718020735

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @homepages/template-kit
 
+## 0.8.1-dev-20260718020735
+
+### Patch Changes
+
+- 1c4c7dd: Island hydration is now nesting-safe: `hydrateIslands` skips any island marker
+  nested inside another marker, so an island can render another island without the
+  child being hydrated twice (once by its parent root, once independently). Enables
+  interactive islands (accordion, card-slider, carousel) to wrap existing leaf
+  islands (expandable-text) on published pages.
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/island-runtime.js

@@ -17,7 +17,7 @@ function createEditorPropsBridge(react) {
 }
 async function hydrateIslands(options) {
 	const root = options.root ?? document;
-	const markers = Array.from(root.querySelectorAll(`[${ATTR_ISLAND_KEY}]`)).filter((element) => !roots.has(element));
+	const markers = Array.from(root.querySelectorAll(`[${ATTR_ISLAND_KEY}]`)).filter((element) => !roots.has(element) && element.parentElement?.closest(`[${"data-tr-island"}]`) == null);
 	if (markers.length === 0) return [];
 	const payloads = /* @__PURE__ */ new Map();
 	const duplicateIds = /* @__PURE__ */ new Set();

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.8.0";
+var version = "0.8.1-dev-20260718020735";
 
 //#endregion
 export { version };

package/guide/islands.md

@@ -2,7 +2,7 @@
 purpose: How interactivity works in a template — client components ("islands"), their props contract, and their editor options.
 status: living
 related: [INDEX.md, eslint.md, dev.md]
-updated: 2026-07-16
+updated: 2026-07-18
 ---
 
 # Islands: interactivity in a template
@@ -141,6 +141,24 @@ hydrates:
 The marker is layout-invisible (`display:contents`), so an island can sit directly
 inside a grid or flex container without adding a box.
 
+## Nesting one island inside another
+
+An island can render another island — for example, an accordion island whose expanded
+content is itself an existing expandable-text island. Because the build wraps every
+`"use client"` module in a marker, the nested island's marker ends up inside the parent
+island's server-rendered output.
+
+A nested marker is not hydrated as its own root. It is left to the marker that contains
+it, which already renders — and hydrates — it as part of its own React tree. The nested
+component still runs and stays interactive, but it loses its own root and its own editor
+treatment:
+
+- Its `editor.live`/`shieldMode`/`liveSurface`/`props` declaration has no independent
+  effect in the canvas — the parent island's declaration governs the whole subtree, since
+  there is no separate root for the editor to select or shield.
+- Its props `<script>` still renders in the DOM (harmless) but goes unread; props reach
+  the nested component through the parent's own render instead.
+
 ## Hosting islands yourself
 
 `@homepages/template-kit/island-runtime` is the loader. It is not something a template
@@ -153,9 +171,10 @@ await hydrateIslands({ load: (key) => ISLANDS[key]() });  // ISLANDS: the build'
 unmountIslands(sectionEl);  // before replacing sectionEl's HTML
 ```
 
-Each island is an independent React root: one island's state, re-renders, and errors
-never touch another's. Hydration is idempotent, so calling `hydrateIslands` again after
-injecting new markup is safe.
+Each top-level island is an independent React root: one island's state, re-renders, and
+errors never touch another's. An island nested inside another (see above) hydrates as
+part of its parent's root instead. Hydration is idempotent, so calling `hydrateIslands`
+again after injecting new markup is safe.
 
 ## Talking to HomePages from an island
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homepages/template-kit",
-  "version": "0.8.0",
+  "version": "0.8.1-dev-20260718020735",
   "description": "Authoring kit for HomePages marketing-section templates: schema system, contract primitives, theme tokens, and the template-kit CLI.",
   "license": "UNLICENSED",
   "type": "module",