@takazudo/zudo-doc 6.1.1 → 7.0.0

package/dist/sidebar-tree-island/index.js

@@ -25,7 +25,7 @@ import {
   CURRENT_PATH_DATASET_KEY,
   readCurrentPath
 } from "../current-path/index.js";
-import { ensureSidebarScrollPreserve } from "./sidebar-scroll-preserve.js";
+import { ensureSidebarScrollPreserve, notifySidebarScrollReady } from "./sidebar-scroll-preserve.js";
 import {
   formatYearLabel,
   formatYearMonthLabel,
@@ -237,6 +237,13 @@ function SidebarTree({
   const filteredNodes = computed(
     () => query.value ? filterTree(selectedNodes.value, query.value) : selectedNodes.value
   );
+  scope.effect(() => {
+    void selected.value;
+    void selectedNodes.value;
+    void query.value;
+    const nav = navRef.current;
+    if (nav) notifySidebarScrollReady(nav);
+  });
   const locale = localeProp ?? localeLinks?.find((link) => link.active)?.code ?? "en";
   const footer = /* @__PURE__ */ jsx(
     SidebarFooter,
@@ -258,97 +265,106 @@ function SidebarTree({
           when: computed(
             () => activeSlug.value === void 0 && !!rootMenuItems
           ),
-          fallback: () => /* @__PURE__ */ jsxs("nav", { ref: navRef, tabindex: -1, children: [
-            rootMenuItems ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                "on:click": () => {
-                  showingRootMenu.value = true;
-                },
-                class: "lg:hidden flex w-full items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-left text-small text-muted hover:text-fg border-b border-muted",
-                children: [
-                  /* @__PURE__ */ jsx(ChevronLeft, { class: "h-icon-sm w-icon-sm shrink-0" }),
-                  backToMenuLabel ?? "Back to main menu"
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ jsx("div", { class: "px-hsp-sm py-vsp-xs border-b border-muted", "data-sidebar-filter-region": true, children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-hsp-xs bg-surface rounded px-hsp-sm py-vsp-2xs", children: [
-              /* @__PURE__ */ jsx(Search, { class: "h-[14px] w-[14px] text-muted shrink-0" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: filterRef,
-                  type: "text",
-                  "aria-label": "Filter navigation",
-                  placeholder: filterPlaceholder,
-                  modelValue: query,
-                  "on:input": (event) => {
-                    query.value = event.target.value;
-                    save();
-                  },
-                  class: "bg-transparent text-small outline-none w-full text-fg placeholder:text-muted focus-visible:outline-2 focus-visible:outline-accent",
-                  style: "outline-offset:-4px"
-                }
-              )
-            ] }) }),
-            navigation ? /* @__PURE__ */ jsx(Show, { when: computed(() => broader.value !== null), children: () => /* @__PURE__ */ jsx("div", { class: "border-b border-muted px-hsp-md py-vsp-2xs text-small", "data-sidebar-scope-toolbar": true, children: /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between gap-hsp-xs", "data-sidebar-scope-actions": true, children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  "data-sidebar-broaden": true,
-                  disabled: computed(() => broader.value === null),
-                  "on:click": () => {
-                    if (broader.value !== null) changeScope(broader.value);
-                  },
-                  style: "min-height:40px",
-                  class: "flex items-center gap-hsp-sm px-hsp-xs font-medium rounded text-fg hover:bg-surface focus-visible:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:text-muted disabled:opacity-50",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" }),
-                    labels.broaden
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Show, { when: canRestore, children: () => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "data-sidebar-restore": true,
-                  "on:click": () => changeScope(null),
-                  title: labels.restore,
-                  "aria-label": labels.restore,
-                  style: "width:40px;height:40px",
-                  class: "grid place-items-center shrink-0 rounded text-muted hover:text-fg focus-visible:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-                  children: /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true", children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
-                  ] })
-                }
-              ) })
-            ] }) }) }) : null,
-            /* @__PURE__ */ jsx("div", { "data-sidebar-tree-root": true, children: /* @__PURE__ */ jsx(
-              Show,
-              {
-                when: computed(() => selectedNodes.value.length === 1 && selectedNodes.value[0]?.shape === "note-tray"),
-                fallback: () => /* @__PURE__ */ jsx(NodeList, { nodes: filteredNodes, currentSlug: activeSlug, depth: 0, forceOpen: computed(() => !!query.value), scopeControls }),
-                children: () => /* @__PURE__ */ jsx(Show, { when: computed(() => !!filteredNodes.value[0]), children: () => /* @__PURE__ */ jsx(
-                  TrayList,
+          fallback: () => /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              ref: navRef,
+              tabindex: -1,
+              "data-sidebar-context": navigation?.id,
+              "data-sidebar-scope": computed(() => selected.value ?? ""),
+              children: [
+                rootMenuItems ? /* @__PURE__ */ jsxs(
+                  "button",
                   {
-                    tray: computed(() => filteredNodes.value[0]),
-                    itemCount: getNoteTrayItems(selectedNodes.value[0]).length,
-                    currentSlug: activeSlug,
-                    forceOpen: computed(() => !!query.value),
-                    locale,
-                    dateFormats,
-                    scopeControls
+                    type: "button",
+                    "on:click": () => {
+                      showingRootMenu.value = true;
+                    },
+                    class: "lg:hidden flex w-full items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-left text-small text-muted hover:text-fg border-b border-muted",
+                    children: [
+                      /* @__PURE__ */ jsx(ChevronLeft, { class: "h-icon-sm w-icon-sm shrink-0" }),
+                      backToMenuLabel ?? "Back to main menu"
+                    ]
                   }
-                ) })
-              }
-            ) }),
-            footer
-          ] }),
+                ) : null,
+                /* @__PURE__ */ jsx("div", { class: "px-hsp-sm py-vsp-xs border-b border-muted", "data-sidebar-filter-region": true, children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-hsp-xs bg-surface rounded px-hsp-sm py-vsp-2xs", children: [
+                  /* @__PURE__ */ jsx(Search, { class: "h-[14px] w-[14px] text-muted shrink-0" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: filterRef,
+                      type: "text",
+                      "aria-label": "Filter navigation",
+                      placeholder: filterPlaceholder,
+                      modelValue: query,
+                      "on:input": (event) => {
+                        query.value = event.target.value;
+                        save();
+                      },
+                      class: "bg-transparent text-small outline-none w-full text-fg placeholder:text-muted focus-visible:outline-2 focus-visible:outline-accent",
+                      style: "outline-offset:-4px"
+                    }
+                  )
+                ] }) }),
+                navigation ? /* @__PURE__ */ jsx(Show, { when: computed(() => broader.value !== null), children: () => /* @__PURE__ */ jsx("div", { class: "border-b border-muted px-hsp-md py-vsp-2xs text-small", "data-sidebar-scope-toolbar": true, children: /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between gap-hsp-xs", "data-sidebar-scope-actions": true, children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "data-sidebar-broaden": true,
+                      disabled: computed(() => broader.value === null),
+                      "on:click": () => {
+                        if (broader.value !== null) changeScope(broader.value);
+                      },
+                      style: "min-height:40px",
+                      class: "flex items-center gap-hsp-sm px-hsp-xs font-medium rounded text-fg hover:bg-surface focus-visible:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:text-muted disabled:opacity-50",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" }),
+                        labels.broaden
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Show, { when: canRestore, children: () => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-sidebar-restore": true,
+                      "on:click": () => changeScope(null),
+                      title: labels.restore,
+                      "aria-label": labels.restore,
+                      style: "width:40px;height:40px",
+                      class: "grid place-items-center shrink-0 rounded text-muted hover:text-fg focus-visible:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                      children: /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true", children: [
+                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
+                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
+                      ] })
+                    }
+                  ) })
+                ] }) }) }) : null,
+                /* @__PURE__ */ jsx("div", { "data-sidebar-tree-root": true, children: /* @__PURE__ */ jsx(
+                  Show,
+                  {
+                    when: computed(() => selectedNodes.value.length === 1 && selectedNodes.value[0]?.shape === "note-tray"),
+                    fallback: () => /* @__PURE__ */ jsx(NodeList, { nodes: filteredNodes, currentSlug: activeSlug, depth: 0, forceOpen: computed(() => !!query.value), scopeControls }),
+                    children: () => /* @__PURE__ */ jsx(Show, { when: computed(() => !!filteredNodes.value[0]), children: () => /* @__PURE__ */ jsx(
+                      TrayList,
+                      {
+                        tray: computed(() => filteredNodes.value[0]),
+                        itemCount: getNoteTrayItems(selectedNodes.value[0]).length,
+                        currentSlug: activeSlug,
+                        forceOpen: computed(() => !!query.value),
+                        locale,
+                        dateFormats,
+                        scopeControls
+                      }
+                    ) })
+                  }
+                ) }),
+                footer
+              ]
+            }
+          ),
           children: () => /* @__PURE__ */ jsxs("nav", { children: [
             menu,
             footer

package/dist/sidebar-tree-island/sidebar-scroll-preserve.d.ts

@@ -2,20 +2,22 @@ interface SidebarScrollPreserveOptions {
     document: Document;
     requestAnimationFrame: (callback: FrameRequestCallback) => number;
     cancelAnimationFrame: (handle: number) => void;
+    ResizeObserver?: typeof ResizeObserver;
 }
 /**
  * Install the scroll-preservation state machine on a document.
  *
- * This low-level entrypoint owns an explicit cleanup for focused tests and
- * non-singleton hosts. The sidebar's browser module uses the durable,
- * duplicate-safe `ensureSidebarScrollPreserve` wrapper below instead.
- */
-export declare function installSidebarScrollPreserve({ document, requestAnimationFrame, cancelAnimationFrame, }: SidebarScrollPreserveOptions): () => void;
-/**
- * Install exactly one module-lifetime controller for a browser document.
- * Repeated calls from component renders or duplicate boot paths are no-ops.
+ * The desktop aside is replaced when sidebar island props change: preparation
+ * drops `data-zfb-transition-persist`, so element identity is not enough for
+ * the same logical tree. A saved offset is applied only after the destination
+ * can hold it. Chromium clamps a write that happens while `scrollHeight` is
+ * still too small, and that clamped 0 would stick.
  */
+export declare function installSidebarScrollPreserve({ document, requestAnimationFrame, cancelAnimationFrame, ResizeObserver: ResizeObserverImpl, }: SidebarScrollPreserveOptions): () => void;
+/** Install exactly one module-lifetime controller for a browser document. */
 export declare function ensureSidebarScrollPreserve(options?: SidebarScrollPreserveOptions): void;
+/** The sidebar island calls this after the destination tree has committed. */
+export declare function notifySidebarScrollReady(root: Element): void;
 /** Test/HMR teardown for a controller installed through the singleton wrapper. */
 export declare function disposeSidebarScrollPreserve(document: Document): void;
 export {};