@takazudo/zudo-doc 5.28.2 → 6.0.0

package/dist/site-tree-nav/normalize-island-props.js

@@ -0,0 +1,122 @@
+function normalizeSiteTreeNavProps(input) {
+  const tree = normalizeNodeArray(input.tree, /* @__PURE__ */ new Set());
+  const normalized = {
+    tree,
+    categoryOrder: normalizeStringArray(input.categoryOrder, "categoryOrder"),
+    locale: requireString(input.locale, "locale"),
+    dateFormats: normalizeDateFormats(input.dateFormats)
+  };
+  if (input.categoryIgnore !== void 0) {
+    normalized.categoryIgnore = normalizeStringArray(
+      input.categoryIgnore,
+      "categoryIgnore"
+    );
+  }
+  if (input.ariaLabel !== void 0) {
+    normalized.ariaLabel = requireString(input.ariaLabel, "ariaLabel");
+  }
+  return normalized;
+}
+function normalizeNodeArray(nodes, ancestors) {
+  if (!Array.isArray(nodes)) {
+    throw new TypeError("[zudo-doc] SiteTreeNav island tree must be an array.");
+  }
+  return Array.from(nodes, (node) => normalizeNode(node, ancestors));
+}
+function normalizeNode(node, ancestors) {
+  if (typeof node !== "object" || node === null || Array.isArray(node) || Object.getPrototypeOf(node) !== Object.prototype && Object.getPrototypeOf(node) !== null) {
+    throw new TypeError("[zudo-doc] SiteTreeNav island node must be a plain object.");
+  }
+  if (ancestors.has(node)) {
+    throw new TypeError("[zudo-doc] SiteTreeNav island tree must not contain cycles.");
+  }
+  if (typeof node.slug !== "string" || typeof node.label !== "string") {
+    throw new TypeError("[zudo-doc] SiteTreeNav island node slug and label must be strings.");
+  }
+  if (typeof node.hasPage !== "boolean") {
+    throw new TypeError("[zudo-doc] SiteTreeNav island node hasPage must be boolean.");
+  }
+  if (!Array.isArray(node.children)) {
+    throw new TypeError("[zudo-doc] SiteTreeNav island node children must be an array.");
+  }
+  if (!Number.isFinite(node.position)) {
+    throw new TypeError("[zudo-doc] SiteTreeNav island node position must be finite.");
+  }
+  if (node.rank !== void 0 && !Number.isFinite(node.rank)) {
+    throw new TypeError("[zudo-doc] SiteTreeNav island node rank must be finite.");
+  }
+  ancestors.add(node);
+  try {
+    const normalized = {
+      slug: node.slug,
+      label: node.label,
+      position: node.position,
+      hasPage: node.hasPage,
+      children: normalizeNodeArray(node.children, ancestors)
+    };
+    if (node.description !== void 0) {
+      normalized.description = requireString(node.description, "description");
+    }
+    if (node.href !== void 0) normalized.href = requireString(node.href, "href");
+    if (node.sortOrder !== void 0) {
+      if (node.sortOrder !== "asc" && node.sortOrder !== "desc") {
+        throw new TypeError("[zudo-doc] SiteTreeNav island node sortOrder is invalid.");
+      }
+      normalized.sortOrder = node.sortOrder;
+    }
+    if (node.collapsed !== void 0) {
+      normalized.collapsed = requireBoolean(node.collapsed, "collapsed");
+    }
+    if (node.shape !== void 0) {
+      if (node.shape !== "note-tray") {
+        throw new TypeError("[zudo-doc] SiteTreeNav island node shape is invalid.");
+      }
+      normalized.shape = node.shape;
+    }
+    if (node.noteTrayDated !== void 0) {
+      normalized.noteTrayDated = requireBoolean(node.noteTrayDated, "noteTrayDated");
+    }
+    if (node.noteTraySidebar !== void 0) {
+      if (node.noteTraySidebar !== "index" && node.noteTraySidebar !== "year" && node.noteTraySidebar !== "month") {
+        throw new TypeError("[zudo-doc] SiteTreeNav island node noteTraySidebar is invalid.");
+      }
+      normalized.noteTraySidebar = node.noteTraySidebar;
+    }
+    if (node.date !== void 0) normalized.date = requireString(node.date, "date");
+    if (node.updated !== void 0) normalized.updated = requireString(node.updated, "updated");
+    if (node.rank !== void 0) normalized.rank = node.rank;
+    return normalized;
+  } finally {
+    ancestors.delete(node);
+  }
+}
+function normalizeStringArray(values, name) {
+  if (!Array.isArray(values)) {
+    throw new TypeError(`[zudo-doc] SiteTreeNav island ${name} must be an array.`);
+  }
+  return Array.from(values, (value) => requireString(value, name));
+}
+function normalizeDateFormats(value) {
+  return {
+    full: requireString(value.full, "dateFormats.full"),
+    monthDay: requireString(value.monthDay, "dateFormats.monthDay"),
+    year: requireString(value.year, "dateFormats.year"),
+    yearMonth: requireString(value.yearMonth, "dateFormats.yearMonth"),
+    numericMonthDay: requireString(value.numericMonthDay, "dateFormats.numericMonthDay")
+  };
+}
+function requireString(value, name) {
+  if (typeof value !== "string") {
+    throw new TypeError(`[zudo-doc] SiteTreeNav island ${name} must be a string.`);
+  }
+  return value;
+}
+function requireBoolean(value, name) {
+  if (typeof value !== "boolean") {
+    throw new TypeError(`[zudo-doc] SiteTreeNav island ${name} must be boolean.`);
+  }
+  return value;
+}
+export {
+  normalizeSiteTreeNavProps
+};

package/dist/site-tree-nav-island/index.d.ts

@@ -10,16 +10,16 @@ export interface SiteTreeNavProps {
     /** Locale used by dated note-tray rows. */
     locale?: string;
     /**
-     * Per-role date patterns already resolved for this page's locale, serialized
+     * Per-role date patterns already resolved for the page's locale, serialized
      * into the island's `data-props` by the SSR wrapper (`site-tree-nav`,
      * `home-page`). Optional and absent-safe: an omitted value means every role
-     * behaves as `"locale"` — today's `Intl` output (#4075).
+     * behaves as "locale" — today's `Intl` output (#4075).
      */
     dateFormats?: ResolvedDateFormats;
     /** @deprecated — no longer rendered (created date only). */
     updatedLabel?: string;
 }
-export declare function SiteTreeNav({ tree, ariaLabel, categoryOrder, categoryIgnore, initiallyCollapsedCategorySlugs, locale, dateFormats, updatedLabel, }: SiteTreeNavProps): import("preact").JSX.Element;
+export declare function SiteTreeNav({ tree, ariaLabel, categoryOrder, categoryIgnore, initiallyCollapsedCategorySlugs, locale, dateFormats, updatedLabel, }: SiteTreeNavProps): import("@takazudo/zfb").Description;
 export declare namespace SiteTreeNav {
     var displayName: string;
 }

package/dist/site-tree-nav-island/index.js

@@ -1,6 +1,11 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useState } from "preact/hooks";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import {
+  computed,
+  For,
+  Show,
+  signal
+} from "@takazudo/zfb/zudo-react";
 import {
   INDENT,
   connectorLeft,
@@ -56,58 +61,66 @@ function SiteTreeNav({
   if (categoryOrder) {
     processedTree = reorderTree(processedTree, categoryOrder);
   }
+  const roots = signal(processedTree);
   const initiallyCollapsed = new Set(initiallyCollapsedCategorySlugs);
   return /* @__PURE__ */ jsx(
     "nav",
     {
       "aria-label": ariaLabel,
       "data-site-nav": true,
-      className: "grid gap-vsp-md",
+      class: "grid gap-vsp-md",
       style: {
-        gridTemplateColumns: "repeat(auto-fill, minmax(min(18rem, 100%), 1fr))"
+        "grid-template-columns": "repeat(auto-fill, minmax(min(18rem, 100%), 1fr))"
       },
-      children: processedTree.map((node) => {
-        if (node.shape === "note-tray" && getNoteTrayItems(node).length === 0) {
-          return null;
-        }
-        return /* @__PURE__ */ jsx("div", { className: "min-w-0 border border-muted pl-hsp-sm py-vsp-2xs", children: node.children.length > 0 ? /* @__PURE__ */ jsx(
-          CategoryNode,
+      children: /* @__PURE__ */ jsx(For, { each: roots, by: (node) => node.slug, children: (node, index) => {
+        const isLast = computed(() => index.value === roots.value.length - 1);
+        return /* @__PURE__ */ jsx(
+          Show,
           {
-            node,
-            depth: 0,
-            isLast: true,
-            initiallyCollapsed: initiallyCollapsed.has(node.slug),
-            locale,
-            dateFormats,
-            updatedLabel
+            when: computed(
+              () => node.value.shape !== "note-tray" || getNoteTrayItems(node.value).length > 0
+            ),
+            children: () => /* @__PURE__ */ jsx("div", { class: "min-w-0 border border-muted pl-hsp-sm py-vsp-2xs", children: /* @__PURE__ */ jsx(
+              Show,
+              {
+                when: computed(() => node.value.children.length > 0),
+                fallback: () => /* @__PURE__ */ jsx(LeafNode, { node, depth: 0, isLast }),
+                children: () => /* @__PURE__ */ jsx(
+                  CategoryNode,
+                  {
+                    node,
+                    depth: 0,
+                    isLast,
+                    initiallyCollapsed: initiallyCollapsed.has(node.value.slug),
+                    locale,
+                    dateFormats,
+                    updatedLabel
+                  }
+                )
+              }
+            ) })
           }
-        ) : /* @__PURE__ */ jsx(LeafNode, { node, depth: 0, isLast: true }) }, node.slug);
-      })
+        );
+      } })
     }
   );
 }
 SiteTreeNav.displayName = "SiteTreeNav";
-function NodeList({ nodes, depth }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node, index) => {
-    const isLast = index === nodes.length - 1;
-    return node.children.length > 0 ? /* @__PURE__ */ jsx(
-      CategoryNode,
-      {
-        node,
-        depth,
-        isLast
-      },
-      node.slug
-    ) : /* @__PURE__ */ jsx(
-      LeafNode,
+function NodeList({
+  nodes,
+  depth
+}) {
+  return /* @__PURE__ */ jsx(For, { each: nodes, by: (node) => node.slug, children: (node, index) => {
+    const isLast = computed(() => index.value === nodes.value.length - 1);
+    return /* @__PURE__ */ jsx(
+      Show,
       {
-        node,
-        depth,
-        isLast
-      },
-      node.slug
+        when: computed(() => node.value.children.length > 0),
+        fallback: () => /* @__PURE__ */ jsx(LeafNode, { node, depth, isLast }),
+        children: () => /* @__PURE__ */ jsx(CategoryNode, { node, depth, isLast })
+      }
     );
-  }) });
+  } });
 }
 function CategoryNode({
   node,
@@ -118,80 +131,121 @@ function CategoryNode({
   dateFormats,
   updatedLabel = "Updated"
 }) {
-  const [open, setOpen] = useState(() => initialCategoryOpenState(initiallyCollapsed));
-  const toggle = () => setOpen(toggleCategoryOpenState);
+  const open = signal(initialCategoryOpenState(initiallyCollapsed));
+  const toggle = () => {
+    open.value = toggleCategoryOpenState(open.value);
+  };
+  const label = computed(() => node.value.label);
+  const href = computed(() => node.value.href);
+  const children = computed(() => node.value.children);
   const paddingLeft = padLeft(depth);
-  return /* @__PURE__ */ jsxs("div", { className: `${depth >= 1 && !isLast ? "relative" : ""}`, children: [
-    depth >= 1 && !isLast && open && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { class: computed(() => depth >= 1 && !isLast.value ? "relative" : ""), children: [
+    /* @__PURE__ */ jsx(Show, { when: computed(() => depth >= 1 && !isLast.value && open.value), children: () => /* @__PURE__ */ jsx(
       "div",
       {
-        className: "absolute border-l border-dashed border-muted z-local-1",
+        class: "absolute border-l border-dashed border-muted z-local-1",
         style: {
           left: connectorLeft(depth),
-          top: 0,
-          bottom: 0
+          top: "0px",
+          bottom: "0px"
         }
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
+    ) }),
+    /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+      /* @__PURE__ */ jsx(Show, { when: isLast, children: () => /* @__PURE__ */ jsx(
         ConnectorLines,
         {
           depth,
-          isLast,
+          isLast: true,
           widthScale: 2,
           topPad: "calc(0.15rem + var(--spacing-vsp-xs))"
         }
-      ),
+      ) }),
+      /* @__PURE__ */ jsx(Show, { when: computed(() => !isLast.value), children: () => /* @__PURE__ */ jsx(
+        ConnectorLines,
+        {
+          depth,
+          isLast: false,
+          widthScale: 2,
+          topPad: "calc(0.15rem + var(--spacing-vsp-xs))"
+        }
+      ) }),
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex w-full items-center justify-between text-small font-semibold pt-[0.15rem] text-fg",
-          style: { paddingLeft },
+          class: "flex w-full items-center justify-between text-small font-semibold pt-[0.15rem] text-fg",
+          style: { "padding-left": paddingLeft },
           children: [
-            node.href ? /* @__PURE__ */ jsxs(
-              "a",
-              {
-                href: node.href,
-                className: "flex-1 flex items-start gap-hsp-xs py-vsp-xs text-fg hover:text-accent hover:underline focus:underline focus-visible:text-accent",
-                children: [
-                  depth === 0 && /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { className: "w-[18px] 2xl:w-[24px]" }) }),
-                  node.label
-                ]
-              }
-            ) : /* @__PURE__ */ jsx(
-              "button",
+            /* @__PURE__ */ jsx(
+              Show,
               {
-                type: "button",
-                onClick: toggle,
-                className: "flex-1 min-w-0 break-words py-vsp-xs text-left hover:text-accent hover:underline focus:underline",
-                children: node.label
+                when: computed(() => Boolean(href.value)),
+                fallback: () => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "on:click": toggle,
+                    class: "flex-1 min-w-0 break-words py-vsp-xs text-left hover:text-accent hover:underline focus:underline",
+                    children: label
+                  }
+                ),
+                children: () => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: computed(() => href.value ?? ""),
+                    class: "flex-1 flex items-start gap-hsp-xs py-vsp-xs text-fg hover:text-accent hover:underline focus:underline focus-visible:text-accent",
+                    children: [
+                      depth === 0 && /* @__PURE__ */ jsx("span", { class: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { class: "w-[18px]" }) }),
+                      label
+                    ]
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                onClick: toggle,
-                className: "aspect-square flex items-center justify-center w-[1.75rem] border-y border-l border-muted hover:underline focus:underline",
-                "aria-expanded": open,
-                "aria-label": open ? `Collapse ${node.label}` : `Expand ${node.label}`,
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-icon-xs w-icon-xs transition-transform duration-150 ${open ? "rotate-90" : ""} text-muted` })
+                "on:click": toggle,
+                class: "aspect-square flex items-center justify-center w-[1.75rem] border-y border-l border-muted hover:underline focus:underline",
+                "aria-expanded": computed(() => open.value ? "true" : "false"),
+                "aria-label": computed(
+                  () => `${open.value ? "Collapse" : "Expand"} ${label.value}`
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    class: "inline-flex transition-transform duration-150",
+                    style: computed(
+                      () => `transform:rotate(${open.value ? "90deg" : "0deg"})`
+                    ),
+                    children: /* @__PURE__ */ jsx(ChevronRight, { class: "h-icon-xs w-icon-xs text-muted" })
+                  }
+                )
               }
             )
           ]
         }
       )
     ] }),
-    open && /* @__PURE__ */ jsx("div", { children: node.shape === "note-tray" && depth === 0 ? /* @__PURE__ */ jsx(
-      NoteTrayNodeList,
+    /* @__PURE__ */ jsx(Show, { when: open, children: () => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      Show,
       {
-        node,
-        locale,
-        dateFormats,
-        updatedLabel
+        when: computed(
+          () => node.value.shape === "note-tray" && depth === 0
+        ),
+        fallback: () => /* @__PURE__ */ jsx(NodeList, { nodes: children, depth: depth + 1 }),
+        children: () => /* @__PURE__ */ jsx(
+          NoteTrayNodeList,
+          {
+            node,
+            locale,
+            dateFormats,
+            updatedLabel
+          }
+        )
       }
-    ) : /* @__PURE__ */ jsx(NodeList, { nodes: node.children, depth: depth + 1 }) })
+    ) }) })
   ] });
 }
 function NoteTrayNodeList({
@@ -200,104 +254,149 @@ function NoteTrayNodeList({
   dateFormats,
   updatedLabel
 }) {
-  const items = getNoteTrayItems(node);
-  const width = rankWidth(items);
-  const showDate = node.noteTrayDated === true;
-  const grouping = showDate && node.noteTraySidebar !== "index" ? node.noteTraySidebar : void 0;
-  if (grouping === "year" || grouping === "month") {
-    return /* @__PURE__ */ jsx("div", { className: "pl-hsp-md pr-hsp-sm", children: groupItems(items, grouping, node.sortOrder ?? "asc").map((group) => /* @__PURE__ */ jsxs("div", { "data-note-tray-group": group.key, children: [
-      /* @__PURE__ */ jsx("div", { className: "pt-vsp-sm pb-vsp-2xs text-micro tracking-wide uppercase text-muted", children: grouping === "year" ? formatYearLabel(group.key, locale, dateFormats?.year) : formatYearMonthLabel(group.key, locale, dateFormats?.yearMonth) }),
-      group.items.map((item) => /* @__PURE__ */ jsx(
-        NoteTrayRow,
-        {
-          item,
-          locale,
-          dateFormats,
-          updatedLabel,
-          rankWidth: width,
-          showDate,
-          groupedDate: true
-        },
-        item.slug
-      ))
-    ] }, group.key)) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "pl-hsp-md pr-hsp-sm", children: items.map((item) => /* @__PURE__ */ jsx(
-    NoteTrayRow,
-    {
-      item,
-      locale,
-      dateFormats,
-      updatedLabel,
-      rankWidth: width,
-      showDate,
-      groupedDate: false
-    },
-    item.slug
-  )) });
+  const items = computed(() => getNoteTrayItems(node.value));
+  const width = computed(() => rankWidth(items.value));
+  const showDate = computed(() => node.value.noteTrayDated === true);
+  const grouping = computed(() => {
+    const mode = node.value.noteTraySidebar;
+    return showDate.value && mode !== "index" ? mode : void 0;
+  });
+  const groups = computed(() => {
+    const mode = grouping.value;
+    if (mode !== "year" && mode !== "month") return [];
+    return groupItems(items.value, mode, node.value.sortOrder ?? "asc");
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Show, { when: computed(() => grouping.value === "year" || grouping.value === "month"), children: () => /* @__PURE__ */ jsx("div", { class: "pl-hsp-md pr-hsp-sm", children: /* @__PURE__ */ jsx(For, { each: groups, by: (group) => group.key, children: (group) => {
+      const groupItemsSignal = computed(() => group.value.items);
+      const heading = computed(() => {
+        const mode = grouping.value;
+        return mode === "year" ? formatYearLabel(group.value.key, locale, dateFormats?.year) : formatYearMonthLabel(group.value.key, locale, dateFormats?.yearMonth);
+      });
+      return /* @__PURE__ */ jsxs("div", { "data-note-tray-group": computed(() => group.value.key), children: [
+        /* @__PURE__ */ jsx("div", { class: "pt-vsp-sm pb-vsp-2xs text-micro tracking-wide uppercase text-muted", children: heading }),
+        /* @__PURE__ */ jsx(For, { each: groupItemsSignal, by: (item) => item.slug, children: (item) => /* @__PURE__ */ jsx(
+          NoteTrayRow,
+          {
+            item,
+            locale,
+            dateFormats,
+            updatedLabel,
+            rankWidth: width,
+            showDate,
+            groupedDate: true
+          }
+        ) })
+      ] });
+    } }) }) }),
+    /* @__PURE__ */ jsx(Show, { when: computed(() => grouping.value !== "year" && grouping.value !== "month"), children: () => /* @__PURE__ */ jsx("div", { class: "pl-hsp-md pr-hsp-sm", children: /* @__PURE__ */ jsx(For, { each: items, by: (item) => item.slug, children: (item) => /* @__PURE__ */ jsx(
+      NoteTrayRow,
+      {
+        item,
+        locale,
+        dateFormats,
+        updatedLabel,
+        rankWidth: width,
+        showDate,
+        groupedDate: false
+      }
+    ) }) }) })
+  ] });
 }
 function NoteTrayRow({
   item,
   locale,
   dateFormats,
-  updatedLabel,
   rankWidth: width,
   showDate,
   groupedDate
 }) {
-  if (!item.href) return null;
-  const dateLabel = showDate && item.date ? groupedDate ? formatMonthDay(item.date, dateFormats?.numericMonthDay, locale) : formatDate(item.date, locale, dateFormats?.full) : void 0;
-  return /* @__PURE__ */ jsxs(
+  const href = computed(() => item.value.href);
+  const dateLabel = computed(() => {
+    if (!showDate.value || !item.value.date) return void 0;
+    return groupedDate ? formatMonthDay(item.value.date, dateFormats?.numericMonthDay, locale) : formatDate(item.value.date, locale, dateFormats?.full);
+  });
+  const rankLabel = computed(
+    () => item.value.rank === void 0 ? "" : String(item.value.rank).padStart(width.value, "0")
+  );
+  return /* @__PURE__ */ jsx(Show, { when: computed(() => Boolean(href.value)), children: () => /* @__PURE__ */ jsxs(
     "a",
     {
-      href: item.href,
+      href: computed(() => href.value ?? ""),
       "data-note-tray-row": true,
-      className: "flex items-start gap-hsp-sm py-vsp-2xs text-small text-fg hover:text-accent hover:underline focus:underline focus-visible:text-accent",
+      class: "flex items-start gap-hsp-sm py-vsp-2xs text-small text-fg hover:text-accent hover:underline focus:underline focus-visible:text-accent",
       children: [
-        dateLabel ? /* @__PURE__ */ jsx(
-          "time",
+        /* @__PURE__ */ jsx(
+          Show,
           {
-            dateTime: item.date,
-            className: "shrink-0 font-mono tabular-nums text-caption text-muted",
-            children: dateLabel
-          }
-        ) : /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "shrink-0 font-mono tabular-nums text-caption text-muted",
-            style: { width: `${width}ch` },
-            children: item.rank === void 0 ? "" : String(item.rank).padStart(width, "0")
+            when: computed(() => Boolean(dateLabel.value)),
+            fallback: () => /* @__PURE__ */ jsx(
+              "span",
+              {
+                class: "shrink-0 font-mono tabular-nums text-caption text-muted",
+                style: computed(() => ({ width: `${width.value}ch` })),
+                children: rankLabel
+              }
+            ),
+            children: () => /* @__PURE__ */ jsx(
+              "time",
+              {
+                datetime: computed(() => item.value.date ?? ""),
+                class: "shrink-0 font-mono tabular-nums text-caption text-muted",
+                children: computed(() => dateLabel.value ?? "")
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: /* @__PURE__ */ jsx("span", { children: item.label }) })
+        /* @__PURE__ */ jsx("span", { class: "min-w-0 break-words", children: /* @__PURE__ */ jsx("span", { children: computed(() => item.value.label) }) })
       ]
     }
-  );
+  ) });
 }
 function LeafNode({
   node,
   depth,
   isLast
 }) {
-  if (!node.href) return null;
+  const href = computed(() => node.value.href);
+  const label = computed(() => node.value.label);
   const isRoot = depth === 0;
   const paddingLeft = padLeft(depth);
   const topPad = isRoot ? "calc(var(--spacing-vsp-xs) + 0.15rem)" : "var(--spacing-vsp-2xs)";
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx(ConnectorLines, { depth, isLast, widthScale: 2, topPad }),
+  return /* @__PURE__ */ jsx(Show, { when: computed(() => Boolean(href.value)), children: () => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+    /* @__PURE__ */ jsx(Show, { when: isLast, children: () => /* @__PURE__ */ jsx(
+      ConnectorLines,
+      {
+        depth,
+        isLast: true,
+        widthScale: 2,
+        topPad
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Show, { when: computed(() => !isLast.value), children: () => /* @__PURE__ */ jsx(
+      ConnectorLines,
+      {
+        depth,
+        isLast: false,
+        widthScale: 2,
+        topPad
+      }
+    ) }),
     /* @__PURE__ */ jsxs(
       "a",
       {
-        href: node.href,
-        className: isRoot ? "flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)+0.15rem)] pr-hsp-sm text-small font-semibold text-fg break-words hover:text-accent hover:underline focus:underline focus-visible:text-accent" : `block py-vsp-2xs pr-hsp-sm ${isLast ? "pb-vsp-xs" : ""} text-small text-fg break-words hover:text-accent hover:underline focus:underline focus-visible:text-accent`,
-        style: { paddingLeft },
+        href: computed(() => href.value ?? ""),
+        class: computed(
+          () => isRoot ? "flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)_+_0.15rem)] pr-hsp-sm text-small font-semibold text-fg break-words hover:text-accent hover:underline focus:underline focus-visible:text-accent" : `block py-vsp-2xs pr-hsp-sm ${isLast.value ? "pb-vsp-xs" : ""} text-small text-fg break-words hover:text-accent hover:underline focus:underline focus-visible:text-accent`
+        ),
+        style: { "padding-left": paddingLeft },
         children: [
-          isRoot && /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { className: "w-[18px] 2xl:w-[24px]" }) }),
-          isRoot ? /* @__PURE__ */ jsx("span", { className: "min-w-0", children: node.label }) : node.label
+          isRoot && /* @__PURE__ */ jsx("span", { class: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { class: "w-[18px]" }) }),
+          isRoot ? /* @__PURE__ */ jsx("span", { class: "min-w-0", children: label }) : label
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 export {
   SiteTreeNav