@xyd-js/framework 0.1.0-build.189

package/dist/react.js

@@ -0,0 +1,1367 @@
+// packages/react/components/FwBanner.tsx
+import React3 from "react";
+import { Banner as Banner2 } from "@xyd-js/components/writer";
+
+// packages/react/contexts/framework.tsx
+import React2, { createContext as createContext2, useContext as useContext2, useEffect, useState } from "react";
+import { useNavigation } from "react-router";
+import { Banner } from "@xyd-js/components/writer";
+import { ProgressBar } from "@xyd-js/ui";
+
+// packages/react/components/Surfaces.tsx
+import React, { createContext, useContext } from "react";
+var SurfaceContext = createContext({
+  surfaces: void 0
+});
+function Surface(props) {
+  const { target } = props;
+  const registry = useContext(SurfaceContext);
+  if (!registry.surfaces) {
+    return null;
+  }
+  const components = registry.surfaces.get(target);
+  if (!components) {
+    return null;
+  }
+  if (!Array.isArray(components)) {
+    if (typeof components === "function") {
+      const Component = components;
+      return /* @__PURE__ */ React.createElement(Component, { ...props.props });
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, components);
+  }
+  if (!components.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, components.map((Component, index) => {
+    if (typeof Component === "function") {
+      const Comp = Component;
+      return /* @__PURE__ */ React.createElement(Comp, { key: index, ...props.props });
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, Component);
+  }));
+}
+
+// packages/react/contexts/framework.tsx
+var framework = {
+  settings: {},
+  metadata: {
+    title: ""
+  },
+  sidebarGroups: [],
+  setMetadata: () => {
+  },
+  components: {},
+  BannerContent: null
+};
+var FrameworkContext = createContext2(framework);
+function Framework(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const navigation = useNavigation();
+  const [metadata, setMetadata] = useState(props.metadata);
+  const BannerContent = props.BannerContent || null;
+  const BannerComponent = ((_c = (_b = (_a = props == null ? void 0 : props.settings) == null ? void 0 : _a.components) == null ? void 0 : _b.banner) == null ? void 0 : _c.kind) === "secondary" ? Banner.Secondary : Banner;
+  const appearance = (_d = props.settings.theme) == null ? void 0 : _d.appearance;
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(FrameworkContext, { value: {
+    settings: Object.freeze({ ...props.settings }),
+    sidebarGroups: Object.freeze([...props.sidebarGroups]),
+    metadata: Object.freeze({ ...metadata, title: (metadata == null ? void 0 : metadata.title) || "" }),
+    setMetadata,
+    components: Object.freeze(props.components || {}),
+    BannerContent: props.BannerContent || null
+  } }, /* @__PURE__ */ React2.createElement(SurfaceContext, { value: {
+    surfaces: props.surfaces
+  } }, /* @__PURE__ */ React2.createElement(ProgressBar, { isActive: navigation.state === "loading" }), BannerContent && !((_e = appearance == null ? void 0 : appearance.banner) == null ? void 0 : _e.fixed) ? /* @__PURE__ */ React2.createElement(
+    BannerComponent,
+    {
+      label: (_h = (_g = (_f = props.settings) == null ? void 0 : _f.components) == null ? void 0 : _g.banner) == null ? void 0 : _h.label,
+      icon: (_k = (_j = (_i = props.settings) == null ? void 0 : _i.components) == null ? void 0 : _j.banner) == null ? void 0 : _k.icon,
+      href: (_n = (_m = (_l = props.settings) == null ? void 0 : _l.components) == null ? void 0 : _m.banner) == null ? void 0 : _n.href
+    },
+    /* @__PURE__ */ React2.createElement(BannerContent, null)
+  ) : null, props.children)));
+}
+var FrameworkPageContext = createContext2({
+  ContentComponent: () => /* @__PURE__ */ React2.createElement(React2.Fragment, null),
+  ContentOriginal: () => /* @__PURE__ */ React2.createElement(React2.Fragment, null),
+  metadata: {
+    title: ""
+  }
+});
+function FrameworkPage(props) {
+  const { setMetadata } = useContext2(FrameworkContext);
+  useEffect(() => {
+    setMetadata(props.metadata);
+  }, []);
+  return /* @__PURE__ */ React2.createElement(FrameworkPageContext, { value: {
+    ContentComponent: props.ContentComponent || (() => /* @__PURE__ */ React2.createElement(React2.Fragment, null)),
+    ContentOriginal: props.ContentOriginal || (() => /* @__PURE__ */ React2.createElement(React2.Fragment, null)),
+    metadata: Object.freeze(props.metadata),
+    breadcrumbs: Object.freeze(props.breadcrumbs),
+    rawPage: Object.freeze(props.rawPage),
+    toc: Object.freeze(props.toc || []),
+    navlinks: Object.freeze(props.navlinks)
+  } }, props.children);
+}
+function useSidebarGroups() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.sidebarGroups;
+}
+function useSettings() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.settings;
+}
+function useMetadata() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.metadata;
+}
+function useComponents() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.components;
+}
+function useToC() {
+  const ctx = useContext2(FrameworkPageContext);
+  const toc = ctx.toc || [];
+  return toc;
+}
+function useBreadcrumbs() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.breadcrumbs;
+}
+function useNavLinks() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.navlinks;
+}
+function useRawPage() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.rawPage;
+}
+function useContentComponent() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.ContentComponent;
+}
+function useContentOriginal() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.ContentOriginal;
+}
+function useAppearance() {
+  var _a;
+  const ctx = useContext2(FrameworkContext);
+  return (_a = ctx.settings.theme) == null ? void 0 : _a.appearance;
+}
+function useBannerContent() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.BannerContent;
+}
+
+// packages/react/components/FwBanner.tsx
+function FwBanner() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const BannerContent = useBannerContent();
+  const settings = useSettings();
+  const BannerComponent = ((_b = (_a = settings == null ? void 0 : settings.components) == null ? void 0 : _a.banner) == null ? void 0 : _b.kind) === "secondary" ? Banner2.Secondary : Banner2;
+  if (!BannerContent) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    BannerComponent,
+    {
+      label: (_d = (_c = settings == null ? void 0 : settings.components) == null ? void 0 : _c.banner) == null ? void 0 : _d.label,
+      icon: (_f = (_e = settings == null ? void 0 : settings.components) == null ? void 0 : _e.banner) == null ? void 0 : _f.icon,
+      href: (_h = (_g = settings == null ? void 0 : settings.components) == null ? void 0 : _g.banner) == null ? void 0 : _h.href
+    },
+    /* @__PURE__ */ React3.createElement(BannerContent, null)
+  );
+}
+
+// packages/react/components/FwBreadcrumbs.tsx
+import React4 from "react";
+import { Breadcrumbs } from "@xyd-js/components/writer";
+function FwBreadcrumbs() {
+  const fwBreadcrumbs = useBreadcrumbs();
+  const breadcrumbs = fwBreadcrumbs == null ? void 0 : fwBreadcrumbs.map((item) => ({
+    title: item.title,
+    href: item.href
+  }));
+  return /* @__PURE__ */ React4.createElement(
+    Breadcrumbs,
+    {
+      items: breadcrumbs || []
+    }
+  );
+}
+
+// packages/react/components/FwCopyPage.tsx
+import React5, { useState as useState2 } from "react";
+import { Button, Icon } from "@xyd-js/components/writer";
+import { useUXEvents } from "@xyd-js/analytics";
+function FwCopyPage() {
+  const [isCopied, setIsCopied] = useState2(false);
+  const rawPage = useRawPage();
+  const ux = useUXEvents();
+  const handleCopy = () => {
+    navigator.clipboard.writeText(rawPage || "");
+    setIsCopied(true);
+    ux.docs.copy_page({});
+    setTimeout(() => setIsCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ React5.createElement(
+    Button,
+    {
+      icon: isCopied ? /* @__PURE__ */ React5.createElement(Icon, { name: "check", size: 12 }) : /* @__PURE__ */ React5.createElement(Icon, { name: "copy", size: 12 }),
+      onClick: handleCopy
+    },
+    "Copy page"
+  );
+}
+
+// packages/react/components/FwJsonComponent.tsx
+import React6 from "react";
+import * as WriterComponents from "@xyd-js/components/writer";
+import * as CoderComponents from "@xyd-js/components/coder";
+import * as SystemComponents from "@xyd-js/components/system";
+function FwJsonComponent(args) {
+  const components = useJsonComponents();
+  if (!args) {
+    return null;
+  }
+  if (React6.isValidElement(args)) {
+    return args;
+  }
+  if (typeof args === "string") {
+    return args;
+  }
+  if (!args || typeof args !== "object") {
+    return null;
+  }
+  if (!("component" in args)) {
+    return null;
+  }
+  const { component, props: { children, ...props } = {} } = args;
+  if (!component) {
+    return null;
+  }
+  let Component = resolveComponent(component, components);
+  if (Component) {
+    return /* @__PURE__ */ React6.createElement(Component, { ...props }, renderChildren(children));
+  }
+  Component = component;
+  return /* @__PURE__ */ React6.createElement(Component, { ...props }, renderChildren(children));
+}
+function useJsonComponents() {
+  const customComponents = useComponents();
+  const componentSources = /* @__PURE__ */ new Map();
+  const components = {};
+  const componentSets = [
+    {
+      group: "Writer",
+      components: WriterComponents
+    },
+    {
+      group: "Coder",
+      components: CoderComponents
+    },
+    {
+      group: "System",
+      components: SystemComponents
+    },
+    {
+      group: "Custom",
+      components: customComponents || {}
+    }
+  ];
+  componentSets.forEach((componentSet) => {
+    Object.entries(componentSet.components).forEach(([name, component]) => {
+      if (name.charAt(0) !== name.charAt(0).toUpperCase()) {
+        return;
+      }
+      if (typeof component !== "function") {
+        return;
+      }
+      if (name in components) {
+        const existingComponent = components[name];
+        const existingGroup = componentSources.get(name) || "Custom";
+        delete components[name];
+        components[`${existingGroup}.${name}`] = existingComponent;
+        components[`${componentSet.group}.${name}`] = component;
+        console.debug(`Component name conflict resolved: ${name} -> ${existingGroup}.${name} and ${componentSet.group}.${name}`);
+      } else {
+        components[name] = component;
+        componentSources.set(name, componentSet.group);
+      }
+    });
+  });
+  return components;
+}
+function renderChildren(children) {
+  if (!children) {
+    return null;
+  }
+  if (Array.isArray(children)) {
+    return children.map((child, index) => /* @__PURE__ */ React6.createElement(FwJsonComponent, { key: index, ...child }));
+  }
+  if (typeof children === "object" && children !== null && "component" in children) {
+    return /* @__PURE__ */ React6.createElement(FwJsonComponent, { ...children });
+  }
+  return children;
+}
+function resolveComponent(componentName, components) {
+  if (!componentName || typeof componentName !== "string") {
+    return null;
+  }
+  if (componentName.includes(".")) {
+    const parts = componentName.split(".");
+    let current = components;
+    for (const part of parts) {
+      if (current && typeof current === "object" && part in current) {
+        current = current[part];
+      } else {
+        return null;
+      }
+    }
+    return current;
+  }
+  return components[componentName] || null;
+}
+
+// packages/react/components/FwLink.tsx
+import React7 from "react";
+import { Link } from "react-router";
+import { Anchor } from "@xyd-js/components/writer";
+
+// packages/react/utils/isExternal.ts
+function isExternal(filePath) {
+  return filePath.startsWith("http://") || filePath.startsWith("https://");
+}
+
+// packages/react/utils/pageLink.ts
+function pageLink(page) {
+  if (page === "index" || page === "/index") {
+    return "/";
+  }
+  if (!page) {
+    return "";
+  }
+  if (page.startsWith("http://") || page.startsWith("https://")) {
+    return page;
+  }
+  return page.startsWith("/") ? page : `/${page}`;
+}
+
+// packages/react/utils/trailingSlash.ts
+function trailingSlash(path) {
+  return path.endsWith("/") ? path.slice(0, -1) : path;
+}
+
+// packages/react/components/FwLink.tsx
+function FwLink({ children, ...rest }) {
+  let to = "";
+  let external = false;
+  if (rest.href) {
+    try {
+      new URL(rest.href);
+      to = rest.href;
+      external = isExternal(rest.href);
+    } catch (error) {
+      if (rest.href.startsWith("/")) {
+        const url = new URL(`https://example.com${rest.href}`);
+        to = {
+          pathname: url.pathname,
+          search: url.search,
+          hash: url.hash
+        };
+      } else {
+        return /* @__PURE__ */ React7.createElement(Anchor, { as: "button" }, children);
+        return /* @__PURE__ */ React7.createElement(Anchor, { as: "button", onClick: () => {
+          const url = new URL(window.location.href);
+          const currentParams = url.searchParams;
+          new URLSearchParams(rest.href).forEach((value, key) => {
+            currentParams.set(key, value);
+          });
+          url.search = currentParams.toString();
+          history.replaceState(null, "", url);
+        } }, children);
+      }
+    }
+  }
+  let pathname = typeof to === "string" ? to : to.pathname || "";
+  if (pathname.startsWith("/mailto:")) {
+    pathname = fixMailTo(pathname);
+    to = pathname;
+  }
+  if ((rest.href || "").startsWith("/mailto:")) {
+    rest.href = fixMailTo(rest.href);
+  }
+  return /* @__PURE__ */ React7.createElement(
+    Anchor,
+    {
+      as: $Link,
+      ...rest,
+      to,
+      target: external ? "_blank" : rest.target
+    },
+    children
+  );
+}
+function fixMailTo(href) {
+  if (href.startsWith("/mailto:")) {
+    return href.replace("/mailto:", "mailto:");
+  }
+  return href;
+}
+function $Link(props) {
+  return /* @__PURE__ */ React7.createElement(
+    Link,
+    {
+      ...props
+    },
+    props.children
+  );
+}
+
+// packages/react/components/FwLogo.tsx
+import React8, { isValidElement } from "react";
+import { Link as Link2 } from "react-router";
+import {
+  useColorScheme
+} from "@xyd-js/components/writer";
+
+// packages/react/hooks/useActiveMatchedSubNav.ts
+import { useLocation, useMatches as useMatches2 } from "react-router";
+
+// packages/react/hooks/useMatchedSegment.ts
+import { useMatches } from "react-router";
+function useMatchedSegment() {
+  var _a, _b, _c;
+  const settings = useSettings();
+  const matches = useMatches();
+  const lastMatchId = (_a = matches[matches.length - 1]) == null ? void 0 : _a.id;
+  const matchedSegment = (_c = (_b = settings.navigation) == null ? void 0 : _b.segments) == null ? void 0 : _c.find((item) => {
+    var _a2;
+    return (_a2 = item.pages) == null ? void 0 : _a2.find((page) => {
+      return sanitizeUrl(page.page || "") === sanitizeUrl(lastMatchId);
+    });
+  });
+  return matchedSegment || null;
+}
+function sanitizeUrl(url) {
+  if (url.startsWith("/")) {
+    return url;
+  }
+  return `/${url}`;
+}
+
+// packages/react/hooks/useTabSegments.ts
+function useTabSegments() {
+  var _a;
+  const settings = useSettings();
+  const tabs = ((_a = settings.navigation) == null ? void 0 : _a.tabs) || [];
+  if (tabs == null ? void 0 : tabs.length) {
+    return {
+      route: "",
+      title: "",
+      pages: tabs
+    };
+  }
+  return null;
+}
+
+// packages/react/hooks/useMatchedSubNav.ts
+function useMatchedSubNav() {
+  var _a, _b;
+  const matchedSegment = useMatchedSegment();
+  const tabSegments = useTabSegments();
+  const appearance = useAppearance();
+  if ((((_a = appearance == null ? void 0 : appearance.tabs) == null ? void 0 : _a.surface) === "center" || ((_b = appearance == null ? void 0 : appearance.tabs) == null ? void 0 : _b.surface) === "sidebar") && !matchedSegment) {
+    return null;
+  }
+  if (!matchedSegment || matchedSegment.appearance === "sidebarDropdown") {
+    return tabSegments;
+  }
+  return matchedSegment || null;
+}
+
+// packages/react/hooks/useActiveMatchedSubNav.ts
+function useActiveMatchedSubNav() {
+  var _a;
+  const location = useLocation();
+  const matchedSubnav = useMatchedSubNav();
+  const matches = useMatches2();
+  const pathname = trailingSlash(location.pathname);
+  const lastMatch = matches[matches.length - 1];
+  const isIndex = (lastMatch == null ? void 0 : lastMatch.pathname) === "/";
+  return (_a = matchedSubnav == null ? void 0 : matchedSubnav.pages) == null ? void 0 : _a.filter((p) => typeof p.page === "string").findLast((item) => {
+    if (isIndex) {
+      return item.page === "index";
+    }
+    return pathname.startsWith(pageLink(item.page || ""));
+  });
+}
+
+// packages/react/hooks/useActivePage.ts
+import { useMatches as useMatches3 } from "react-router";
+function useActivePage(match = false) {
+  var _a, _b, _c;
+  const matches = useMatches3();
+  const matchedSubnav = useMatchedSubNav();
+  const settings = useSettings();
+  const lastMatch = matches[matches.length - 1];
+  const navigationItems = [
+    ...((_a = settings == null ? void 0 : settings.navigation) == null ? void 0 : _a.tabs) || [],
+    ...((_b = settings == null ? void 0 : settings.navigation) == null ? void 0 : _b.sidebarDropdown) || [],
+    ...((_c = settings == null ? void 0 : settings.webeditor) == null ? void 0 : _c.header) || []
+  ];
+  const isIndex = (lastMatch == null ? void 0 : lastMatch.pathname) === "/";
+  let active = navigationItems.find((item) => {
+    if (isIndex) {
+      return item.page === "index";
+    }
+    if (matchedSubnav) {
+      const routeMatch = pageLink(item.page || "") === pageLink(matchedSubnav == null ? void 0 : matchedSubnav.route);
+      if (routeMatch) {
+        return routeMatch;
+      }
+      if (match) {
+        const pageMatch = matchedSubnav == null ? void 0 : matchedSubnav.pages.findLast((page) => {
+          if (!page.page) {
+            return false;
+          }
+          return pageLink(lastMatch == null ? void 0 : lastMatch.id).startsWith(pageLink(page.page || ""));
+        });
+        return pageLink((pageMatch == null ? void 0 : pageMatch.page) || "") === pageLink(item.page || "");
+      }
+      return false;
+    }
+    return pageLink(item.page || "") === (lastMatch == null ? void 0 : lastMatch.id);
+  });
+  if (!active && !matchedSubnav && match) {
+    active = navigationItems.findLast((item) => {
+      if (!item.page) {
+        return false;
+      }
+      return pageLink(lastMatch == null ? void 0 : lastMatch.id).startsWith(pageLink(item.page || ""));
+    });
+  }
+  return (active == null ? void 0 : active.page) || "";
+}
+
+// packages/react/hooks/useActivePageRoute.ts
+import { useMatches as useMatches4 } from "react-router";
+function useActivePageRoute(match = false) {
+  var _a;
+  const matches = useMatches4();
+  const matchedSubnav = useMatchedSubNav();
+  const settings = useSettings();
+  const lastMatch = matches[matches.length - 1];
+  const sidebarRoutes = extractSidebarRoutes(((_a = settings == null ? void 0 : settings.navigation) == null ? void 0 : _a.sidebar) || []);
+  let active = sidebarRoutes.find((item) => {
+    if (matchedSubnav) {
+      const routeMatch = pageLink(item.route || "") === pageLink(matchedSubnav == null ? void 0 : matchedSubnav.route);
+      if (routeMatch) {
+        return routeMatch;
+      }
+      if (match) {
+        const pageMatch = matchedSubnav == null ? void 0 : matchedSubnav.pages.findLast((page) => {
+          if (!page.page) {
+            return false;
+          }
+          return pageLink(lastMatch == null ? void 0 : lastMatch.id).startsWith(pageLink(page.page || ""));
+        });
+        return pageLink((pageMatch == null ? void 0 : pageMatch.page) || "") === pageLink(item.route || "");
+      }
+      return false;
+    }
+    return pageLink(item.route || "") === (lastMatch == null ? void 0 : lastMatch.id);
+  });
+  if (!active && !matchedSubnav && match) {
+    active = sidebarRoutes.findLast((item) => {
+      if (!item.route) {
+        return false;
+      }
+      return pageLink(lastMatch == null ? void 0 : lastMatch.id).startsWith(pageLink(item.route || ""));
+    });
+  }
+  return active || null;
+}
+function extractSidebarRoutes(sidebar) {
+  const items = [];
+  if (!sidebar) return items;
+  for (const sidebarItem of sidebar) {
+    if (typeof sidebarItem === "object" && "pages" in sidebarItem) {
+      const wrapper = sidebarItem;
+      for (const page of wrapper.pages) {
+        if (typeof page === "object" && "route" in page && "pages" in page) {
+          items.push(page);
+        }
+      }
+    }
+  }
+  return items;
+}
+
+// packages/react/hooks/useActiveRoute.ts
+import { useMatches as useMatches5 } from "react-router";
+function useActiveRoute() {
+  var _a, _b;
+  const matches = useMatches5();
+  const settings = useSettings();
+  const lastMatch = matches[matches.length - 1];
+  const activeRoute = (_b = (_a = settings == null ? void 0 : settings.navigation) == null ? void 0 : _a.sidebar) == null ? void 0 : _b.find((item) => {
+    if (typeof item === "object" && "route" in item) {
+      return pageLink((lastMatch == null ? void 0 : lastMatch.id) || "") === pageLink(item.route || "");
+    }
+    return false;
+  });
+  if (typeof activeRoute === "object" && "route" in activeRoute) {
+    return activeRoute;
+  }
+  return null;
+}
+
+// packages/react/hooks/useActiveSegment.ts
+import { useLocation as useLocation2 } from "react-router";
+function useActiveSegment() {
+  var _a;
+  const location = useLocation2();
+  const pathname = trailingSlash(location.pathname);
+  const matchedSegment = useMatchedSegment();
+  const active = (_a = matchedSegment == null ? void 0 : matchedSegment.pages) == null ? void 0 : _a.findLast((item) => {
+    return pathname.startsWith(pageLink(item.page || ""));
+  });
+  return (active == null ? void 0 : active.page) || "";
+}
+
+// packages/react/hooks/useHeaderItems.ts
+function useHeaderItems() {
+  var _a;
+  const settings = useSettings();
+  const header = ((_a = settings == null ? void 0 : settings.webeditor) == null ? void 0 : _a.header) || [];
+  const headerMap = header.reduce((acc, item) => {
+    const float = item.float || "default";
+    return {
+      ...acc,
+      [float]: [...acc[float] || [], item]
+    };
+  }, {});
+  return {
+    default: headerMap["default"] || [],
+    center: headerMap["center"] || [],
+    right: headerMap["right"] || []
+  };
+}
+
+// packages/react/hooks/useDefaultHeaderItems.ts
+function useDefaultHeaderItems() {
+  const headerItems = useHeaderItems();
+  return headerItems.default;
+}
+
+// packages/react/hooks/useLogoLink.ts
+function useLogoLink() {
+  var _a;
+  const settings = useSettings();
+  const logo = (_a = settings == null ? void 0 : settings.theme) == null ? void 0 : _a.logo;
+  if (!logo) {
+    return "/";
+  }
+  let to = "/";
+  if (typeof logo === "object" && ("page" in logo || "href" in logo)) {
+    return pageLink(logo.href || logo.page || "/");
+  }
+  return to;
+}
+
+// packages/react/hooks/useMatchedSegmentSidebarDropdown.ts
+function useMatchedSegmentSidebarDropdown() {
+  const matchedSegment = useMatchedSegment();
+  if (!matchedSegment) {
+    return null;
+  }
+  if (matchedSegment.appearance === "sidebarDropdown") {
+    return matchedSegment;
+  }
+  return null;
+}
+
+// packages/react/components/FwLogo.tsx
+function FwLogo() {
+  var _a, _b, _c;
+  const settings = useSettings();
+  const [clientColorScheme] = useColorScheme();
+  const colorScheme = clientColorScheme || ((_b = (_a = settings == null ? void 0 : settings.theme) == null ? void 0 : _a.appearance) == null ? void 0 : _b.colorScheme) || "light";
+  const logo = (_c = settings == null ? void 0 : settings.theme) == null ? void 0 : _c.logo;
+  if (typeof logo === "string") {
+    return /* @__PURE__ */ React8.createElement($Logo, { src: logo });
+  }
+  if (isValidElement(logo)) {
+    return /* @__PURE__ */ React8.createElement($Logo, null, logo);
+  }
+  if (typeof logo === "object") {
+    return /* @__PURE__ */ React8.createElement($Logo, { src: logo[colorScheme] });
+  }
+  return null;
+}
+function $Logo({ src, children }) {
+  const logoLink = useLogoLink();
+  return /* @__PURE__ */ React8.createElement("span", { part: "logo" }, /* @__PURE__ */ React8.createElement(Link2, { to: logoLink }, src ? /* @__PURE__ */ React8.createElement("img", { src }) : children));
+}
+
+// packages/react/components/FwNav.tsx
+import React11 from "react";
+import { Nav as Nav3 } from "@xyd-js/ui";
+import {
+  ColorSchemeButton
+} from "@xyd-js/components/writer";
+import { LayoutPrimary } from "@xyd-js/components/layouts";
+
+// packages/react/components/FwHeaderItems.tsx
+import React10 from "react";
+import { Icon as Icon2 } from "@xyd-js/components/writer";
+import { Nav as Nav2 } from "@xyd-js/ui";
+
+// packages/react/components/WebEditorComponent.tsx
+import React9 from "react";
+import { Nav, UISidebar } from "@xyd-js/ui";
+function WebEditorComponent(Component, componentProps, defaultValue) {
+  return function WebEditorComponentInner(props) {
+    var _a;
+    let dataTags = {};
+    if (props.device === "mobile" || props.mobile && !props.desktop) {
+      dataTags["data-mobile"] = true;
+    }
+    if (props.device === "desktop" || props.desktop && !props.mobile) {
+      dataTags["data-desktop"] = true;
+    }
+    const content = /* @__PURE__ */ React9.createElement(
+      Component,
+      {
+        ...componentProps,
+        ...dataTags
+      },
+      props.component ? /* @__PURE__ */ React9.createElement(
+        FwJsonComponent,
+        {
+          component: props.component || "",
+          props: {
+            ...props.props,
+            children: (_a = props.props) == null ? void 0 : _a.children
+          }
+        }
+      ) : defaultValue,
+      props.children
+    );
+    return Object.keys(dataTags).length > 0 ? /* @__PURE__ */ React9.createElement("div", { ...dataTags }, content) : content;
+  };
+}
+WebEditorComponent.SidebarItem = WebEditorComponent(UISidebar.Item, { button: false, ghost: true });
+WebEditorComponent.NavItemRaw = WebEditorComponent(Nav.ItemRaw);
+WebEditorComponent.SidebarItemButton = WebEditorComponent(UISidebar.Item, { button: true, ghost: true });
+
+// packages/react/components/FwHeaderItems.tsx
+function FwHeaderItems() {
+  const headerItems = useHeaderItems();
+  return Object.entries(headerItems).reduce((acc, [key, value]) => {
+    const headerItems2 = value.map(FwHeaderItem);
+    return {
+      ...acc,
+      [key]: headerItems2
+    };
+  }, {
+    default: [],
+    center: [],
+    right: []
+  });
+}
+function FwHeaderItem(props) {
+  var _a;
+  const appearance = useAppearance();
+  let href = null;
+  if (typeof props.href === "string") {
+    href = pageLink(props.href);
+  }
+  if (!href && typeof props.page === "string") {
+    href = pageLink(props.page);
+  }
+  const isExternalArrow = !props.component && ((_a = appearance == null ? void 0 : appearance.header) == null ? void 0 : _a.externalArrow) && isExternal(href || "") ? true : false;
+  const WebEditorHeader = WebEditorComponent(Nav2.Item, {
+    key: props.page || "",
+    href,
+    value: props.href ? void 0 : props.page,
+    as: FwLink
+  }, props.title);
+  return /* @__PURE__ */ React10.createElement(
+    WebEditorHeader,
+    {
+      ...props,
+      key: keyId(props)
+    },
+    isExternalArrow ? /* @__PURE__ */ React10.createElement(Icon2.ExternalArrow, null) : null
+  );
+}
+function keyId(props) {
+  return `${(props == null ? void 0 : props.component) || "."}-${(props == null ? void 0 : props.title) || (props == null ? void 0 : props.href) || "."}`;
+}
+
+// packages/react/components/FwNav.tsx
+function FwNav() {
+  var _a, _b, _c, _d, _e;
+  const activeHeaderPage = useActivePage();
+  const appearance = useAppearance();
+  const Header = FwHeaderItems();
+  const logo = ((_a = appearance == null ? void 0 : appearance.logo) == null ? void 0 : _a.header) ? /* @__PURE__ */ React11.createElement(
+    WebEditorComponent.NavItemRaw,
+    {
+      device: (_b = appearance == null ? void 0 : appearance.logo) == null ? void 0 : _b.header
+    },
+    /* @__PURE__ */ React11.createElement(FwLogo, null)
+  ) : null;
+  return /* @__PURE__ */ React11.createElement(
+    Nav3,
+    {
+      appearance: {
+        separator: ((_c = appearance == null ? void 0 : appearance.header) == null ? void 0 : _c.separator) || void 0
+      },
+      logo,
+      centerSurface: ((_d = Header == null ? void 0 : Header.center) == null ? void 0 : _d.length) ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+        Nav3.Tabs,
+        {
+          value: activeHeaderPage
+        },
+        Header.center
+      )) : null,
+      rightSurface: /* @__PURE__ */ React11.createElement(React11.Fragment, null, ((_e = Header == null ? void 0 : Header.right) == null ? void 0 : _e.length) ? /* @__PURE__ */ React11.createElement(
+        Nav3.Tabs,
+        {
+          value: activeHeaderPage
+        },
+        Header.right
+      ) : null, /* @__PURE__ */ React11.createElement(Surface, { target: "nav.right" /* NavRight */ })),
+      floatRightSurface: /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Nav3.ItemRaw, null, /* @__PURE__ */ React11.createElement(ColorSchemeButton, null)), /* @__PURE__ */ React11.createElement(Nav3.ItemRaw, null, /* @__PURE__ */ React11.createElement(LayoutPrimary.Hamburger, null)))
+    },
+    /* @__PURE__ */ React11.createElement(FwNav.DefaultItems, null)
+  );
+}
+FwNav.DefaultItems = function DefaultItems() {
+  const activeHeaderPage = useActivePage();
+  const defaultItems = useDefaultHeaderItems();
+  const items = defaultItems.map(FwHeaderItem);
+  return /* @__PURE__ */ React11.createElement(
+    Nav3.Tabs,
+    {
+      value: activeHeaderPage
+    },
+    items
+  );
+};
+
+// packages/react/components/FwNavLinks.tsx
+import React12 from "react";
+import { NavLinks } from "@xyd-js/components/writer";
+function FwNavLinks() {
+  const navlinks = useNavLinks();
+  if ((navlinks == null ? void 0 : navlinks.prev) || (navlinks == null ? void 0 : navlinks.next)) {
+    return /* @__PURE__ */ React12.createElement(
+      NavLinks,
+      {
+        prev: navlinks.prev,
+        next: navlinks.next,
+        as: FwLink
+      }
+    );
+  }
+  return null;
+}
+
+// packages/react/components/FwSidebar.tsx
+import React20 from "react";
+import { UISidebar as UISidebar5 } from "@xyd-js/ui";
+
+// packages/react/lib/FooSidebar.tsx
+import React13, { createContext as createContext3, useContext as useContext3, useState as useState3, useEffect as useEffect2 } from "react";
+import { useNavigation as useNavigation2 } from "react-router";
+var FooSidebarContext = createContext3({
+  active: () => [false, () => {
+  }]
+});
+function FooSidebar(props) {
+  const { children, initialActiveItems } = props;
+  const groupBehaviour = useDefaultBehaviour(initialActiveItems);
+  return /* @__PURE__ */ React13.createElement(FooSidebarContext, { value: {
+    active: groupBehaviour
+  } }, children);
+}
+function useFooSidebar() {
+  return useContext3(FooSidebarContext);
+}
+function useDefaultBehaviour(initialActiveItems) {
+  const navigation = useNavigation2();
+  const [activeItems, setActiveItems] = useState3(() => createItemsMap(initialActiveItems));
+  const [, setForceUpdate] = useState3(0);
+  const forceUpdate = () => setForceUpdate((prev) => prev + 1);
+  useEffect2(() => {
+    if (navigation.state !== "loading") {
+      setActiveItems(createItemsMap(initialActiveItems));
+      forceUpdate();
+    }
+  }, [initialActiveItems, navigation.state]);
+  function addItem(item) {
+    const key = itemId(item);
+    setActiveItems((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(key, true);
+      return newMap;
+    });
+    forceUpdate();
+  }
+  function deleteItem(item) {
+    const key = itemId(item);
+    setActiveItems((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(key);
+      return newMap;
+    });
+    forceUpdate();
+  }
+  function hasItem(item) {
+    const key = itemId(item);
+    return activeItems.get(key) || false;
+  }
+  return (item) => {
+    return [
+      hasItem(item) || false,
+      () => {
+        if (!hasItem(item)) {
+          addItem(item);
+          return;
+        }
+        deleteItem(item);
+      }
+    ];
+  };
+}
+function itemId(item) {
+  const id = `${item.uniqIndex}:${item.groupIndex}-${item.level}-${item.itemIndex}`;
+  return id;
+}
+function createItemsMap(items) {
+  const map = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const key = itemId(item);
+    map.set(key, true);
+  });
+  return map;
+}
+
+// packages/react/components/FwSidebarNavigationItem.tsx
+import React14 from "react";
+import { Icon as Icon3 } from "@xyd-js/components/writer";
+import { UISidebar as UISidebar2 } from "@xyd-js/ui";
+function FwSidebarNavigationItem(item) {
+  var _a;
+  const appearance = useAppearance();
+  return /* @__PURE__ */ React14.createElement(
+    UISidebar2.Item,
+    {
+      href: item.page || item.href,
+      icon: React14.isValidElement(item.icon) ? item.icon : /* @__PURE__ */ React14.createElement(Icon3, { name: item.icon || "" }),
+      key: keyId2(item)
+    },
+    /* @__PURE__ */ React14.createElement(
+      UISidebar2.ItemBody,
+      {
+        title: item.title,
+        right: ((_a = appearance == null ? void 0 : appearance.sidebar) == null ? void 0 : _a.externalArrow) && /* @__PURE__ */ React14.createElement(Icon3.ExternalArrow, null)
+      }
+    )
+  );
+}
+function keyId2(props) {
+  return `${(props == null ? void 0 : props.title) || (props == null ? void 0 : props.href) || "."}-${props.page || ""}`;
+}
+
+// packages/react/components/FwSidebarTabsDropdown.tsx
+import React15 from "react";
+import { Icon as Icon4 } from "@xyd-js/components/writer";
+import { SidebarTabsDropdown, UISidebar as UISidebar3 } from "@xyd-js/ui";
+function FwSidebarTabsDropdown() {
+  var _a;
+  const settings = useSettings();
+  const activeSegment = useActiveSegment();
+  const matchedSegmentSidebarDropdown = useMatchedSegmentSidebarDropdown();
+  const activePage = useActivePage(true);
+  const sidebarDropdown = ((_a = settings.navigation) == null ? void 0 : _a.sidebarDropdown) || [];
+  return /* @__PURE__ */ React15.createElement(UISidebar3.ItemGroup, null, /* @__PURE__ */ React15.createElement(
+    $NavigationItemsSidebarTabs,
+    {
+      active: activePage || "",
+      items: sidebarDropdown || []
+    }
+  ), /* @__PURE__ */ React15.createElement(
+    $NavigationItemsSidebarTabs,
+    {
+      active: activeSegment || "",
+      items: (matchedSegmentSidebarDropdown == null ? void 0 : matchedSegmentSidebarDropdown.pages) || []
+    }
+  ));
+}
+function $NavigationItemsSidebarTabs({ items, active }) {
+  if (!(items == null ? void 0 : items.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ React15.createElement(
+    SidebarTabsDropdown,
+    {
+      options: items.map((item) => ({
+        label: item.title ?? "",
+        description: item.description,
+        value: item.page || item.href || "",
+        icon: item.icon ? /* @__PURE__ */ React15.createElement(Icon4, { name: item.icon, size: 18 }) : null
+      })),
+      value: active || ""
+    }
+  );
+}
+
+// packages/react/components/FwSidebarTopAnchors.tsx
+function FwSidebarTopAnchors() {
+  var _a, _b, _c, _d;
+  const settings = useSettings();
+  const sidebarTopAnchors = (_d = (_c = (_b = (_a = settings == null ? void 0 : settings.navigation) == null ? void 0 : _a.anchors) == null ? void 0 : _b.sidebar) == null ? void 0 : _c.top) == null ? void 0 : _d.map(FwSidebarNavigationItem);
+  return sidebarTopAnchors;
+}
+
+// packages/react/components/FwWebEditorSidebarTop.tsx
+import React16 from "react";
+function FwWebEditorSidebarTop() {
+  var _a, _b;
+  const settings = useSettings();
+  const webEditorSidebarTop = (_b = (_a = settings == null ? void 0 : settings.webeditor) == null ? void 0 : _a.sidebarTop) == null ? void 0 : _b.map((props, index) => {
+    if (props.component) {
+      return /* @__PURE__ */ React16.createElement(
+        WebEditorComponent.SidebarItemButton,
+        {
+          key: keyId3(props, index),
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ React16.createElement(
+      WebEditorComponent.SidebarItem,
+      {
+        key: keyId3(props, index),
+        ...props
+      }
+    );
+  });
+  return webEditorSidebarTop;
+}
+function keyId3(props, index) {
+  return `${(props == null ? void 0 : props.component) || "."}-${(props == null ? void 0 : props.title) || (props == null ? void 0 : props.href) || "."}-${index}`;
+}
+
+// packages/react/components/FwSidebarMobileHeaderItems.tsx
+import React17 from "react";
+function FwSidebarMobileHeaderItems() {
+  var _a, _b;
+  const headerItems = useHeaderItems();
+  const headerLeftItems = (_a = headerItems == null ? void 0 : headerItems.default) == null ? void 0 : _a.map(FwSidebarNavigationItem);
+  const headerRightItems = (_b = headerItems == null ? void 0 : headerItems.right) == null ? void 0 : _b.map(FwSidebarNavigationItem);
+  const mergedHeaderItems = [...headerLeftItems, ...headerRightItems];
+  if (!(mergedHeaderItems == null ? void 0 : mergedHeaderItems.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ React17.createElement("div", { "data-mobile": true }, mergedHeaderItems);
+}
+
+// packages/react/components/FwSidebarTree.tsx
+import React19 from "react";
+import { useLocation as useLocation3 } from "react-router";
+
+// packages/react/components/FwSidebarItem.tsx
+import React18 from "react";
+import { Icon as Icon5 } from "@xyd-js/components/writer";
+import { UISidebar as UISidebar4 } from "@xyd-js/ui";
+function FwSidebarItem(props) {
+  const icon = props.icon ? /* @__PURE__ */ React18.createElement(Icon5, { name: props.icon || "", size: 16 }) : null;
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, props.group && /* @__PURE__ */ React18.createElement(UISidebar4.ItemHeader, { icon }, props.group), props.items.map((item, index) => /* @__PURE__ */ React18.createElement(
+    FwSidebarItem.Item,
+    {
+      uniqIndex: item.uniqIndex,
+      group: item.group,
+      groupIndex: props.groupIndex,
+      level: 0,
+      itemIndex: index,
+      key: index + item.href,
+      title: item.title,
+      sidebarTitle: item.sidebarTitle,
+      url: item.url,
+      pageMeta: item.pageMeta,
+      href: item.href,
+      items: item.items,
+      active: item.active,
+      icon: item.icon
+    }
+  )));
+}
+FwSidebarItem.Item = function FwSidebarItem2(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { active } = useFooSidebar();
+  const [isActive, setActive] = active(props);
+  const title = props.sidebarTitle || props.title || "";
+  const nested = !!((_a = props.items) == null ? void 0 : _a.length);
+  function handleClick() {
+    if (!nested) {
+      return;
+    }
+    setActive();
+  }
+  const hasActiveChild = (_b = props.items) == null ? void 0 : _b.some((item) => {
+    var _a2;
+    const [itemActive] = active(item);
+    return itemActive && item.href || ((_a2 = item.items) == null ? void 0 : _a2.some((subItem) => {
+      const [subItemActive] = active(subItem);
+      return subItemActive && subItem.href;
+    }));
+  });
+  const isActiveItem = !!(isActive && props.href);
+  const isParentActive = hasActiveChild;
+  const icon = /* @__PURE__ */ React18.createElement(Icon5, { name: props.icon || "", size: 16 });
+  return /* @__PURE__ */ React18.createElement(
+    UISidebar4.Item,
+    {
+      button: nested,
+      href: props.url || props.href,
+      active: isActiveItem,
+      isParentActive,
+      onClick: handleClick,
+      icon,
+      group: props.group
+    },
+    /* @__PURE__ */ React18.createElement("div", { part: "item-title-container" }, /* @__PURE__ */ React18.createElement(
+      Surface,
+      {
+        target: "sidebar.item.left",
+        props: {
+          active: isActiveItem,
+          pageMeta: props.pageMeta
+        }
+      }
+    ), /* @__PURE__ */ React18.createElement("div", { part: "item-title" }, title), props.url && /* @__PURE__ */ React18.createElement(Icon5.ExternalArrow, null), /* @__PURE__ */ React18.createElement(
+      Surface,
+      {
+        target: "sidebar.item.right",
+        props: {
+          active: isActiveItem,
+          pageMeta: props.pageMeta
+        }
+      }
+    )),
+    props.group === false && ((_c = props.items) == null ? void 0 : _c.length) && /* @__PURE__ */ React18.createElement(React18.Fragment, null, (_d = props.items) == null ? void 0 : _d.map((item, index) => /* @__PURE__ */ React18.createElement(
+      FwSidebarItem2,
+      {
+        uniqIndex: item.uniqIndex,
+        group: item.group,
+        groupIndex: props.groupIndex,
+        level: (props.level || 0) + 1,
+        itemIndex: index,
+        key: index + item.href,
+        title: item.title,
+        href: item.href,
+        items: item.items,
+        active: active(item)[0],
+        icon: item.icon,
+        pageMeta: item.pageMeta
+      }
+    ))),
+    props.group !== false && ((_e = props.items) == null ? void 0 : _e.length) && /* @__PURE__ */ React18.createElement(UISidebar4.SubTree, { isOpen: isActive }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, (_f = props.items) == null ? void 0 : _f.map((item, index) => /* @__PURE__ */ React18.createElement(
+      FwSidebarItem2,
+      {
+        uniqIndex: item.uniqIndex,
+        group: item.group,
+        groupIndex: props.groupIndex,
+        level: (props.level || 0) + 1,
+        itemIndex: index,
+        key: index + item.href,
+        title: item.title,
+        href: item.href,
+        items: item.items,
+        active: active(item)[0],
+        icon: item.icon,
+        pageMeta: item.pageMeta
+      }
+    ))))
+  );
+};
+
+// packages/react/components/FwSidebarTree.tsx
+function useSidebarTree() {
+  const location = useLocation3();
+  const groups = useSidebarGroups();
+  const pathname = trailingSlash(location.pathname);
+  const initialActiveItems = [];
+  groups.forEach((group, groupIndex) => {
+    const activeLevels = recursiveSearch(group.items, pathname) || [];
+    activeLevels.reduce((acc, index, level) => {
+      initialActiveItems.push({
+        ...acc[index],
+        groupIndex,
+        level,
+        itemIndex: index
+      });
+      acc[index].active = true;
+      return acc[index].items;
+    }, group.items);
+    return group;
+  });
+  const sidebarTree = (groups == null ? void 0 : groups.map((group, index) => /* @__PURE__ */ React19.createElement(
+    FwSidebarItem,
+    {
+      key: index + group.group,
+      ...group,
+      groupIndex: index
+    }
+  ))) || [];
+  return [sidebarTree, { initialActiveItems }];
+}
+function recursiveSearch(items, href, levels = []) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.href === href) {
+      return [...levels, i];
+    }
+    if (item.items) {
+      const result = recursiveSearch(item.items, href, [...levels, i]);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+// packages/react/components/FwSidebar.tsx
+var Sidebar = withSidebar(UISidebar5);
+function FwSidebar(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const settings = useSettings();
+  const appearance = useAppearance();
+  const sidebarFooterAnchors = (_d = (_c = (_b = (_a = settings.navigation) == null ? void 0 : _a.anchors) == null ? void 0 : _b.sidebar) == null ? void 0 : _c.bottom) == null ? void 0 : _d.map(FwSidebarNavigationItem);
+  return /* @__PURE__ */ React20.createElement(
+    Sidebar,
+    {
+      footerItems: sidebarFooterAnchors && sidebarFooterAnchors,
+      scrollShadow: (_e = appearance == null ? void 0 : appearance.sidebar) == null ? void 0 : _e.scrollShadow,
+      scrollTransition: (_f = appearance == null ? void 0 : appearance.sidebar) == null ? void 0 : _f.scrollTransition
+    },
+    /* @__PURE__ */ React20.createElement(Surface, { target: "sidebar.top" /* SidebarTop */ }),
+    /* @__PURE__ */ React20.createElement(FwSidebarTopAnchors, null),
+    /* @__PURE__ */ React20.createElement(FwWebEditorSidebarTop, null),
+    /* @__PURE__ */ React20.createElement(FwSidebarMobileHeaderItems, null),
+    /* @__PURE__ */ React20.createElement(FwSidebarTabsDropdown, null)
+  );
+}
+function withSidebar(Component) {
+  return function WithSidebarContent(props) {
+    const [sidebarTree, sidebarTreeFlags] = useSidebarTree();
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ React20.createElement(
+      FooSidebar,
+      {
+        initialActiveItems: sidebarTreeFlags.initialActiveItems
+      },
+      /* @__PURE__ */ React20.createElement(Component, { ...rest }, children, sidebarTree)
+    );
+  };
+}
+
+// packages/react/components/FwSubNav.tsx
+import React21 from "react";
+import { SubNav } from "@xyd-js/ui";
+function FwSubNav() {
+  var _a;
+  const matchedSubnav = useMatchedSubNav();
+  const active = useActiveMatchedSubNav();
+  if (!matchedSubnav) {
+    return null;
+  }
+  return /* @__PURE__ */ React21.createElement(
+    SubNav,
+    {
+      title: (matchedSubnav == null ? void 0 : matchedSubnav.title) || "",
+      value: (active == null ? void 0 : active.page) || "",
+      onChange: () => {
+      }
+    },
+    (_a = matchedSubnav == null ? void 0 : matchedSubnav.pages) == null ? void 0 : _a.map((item, index) => {
+      let href = null;
+      if (typeof item.href === "string") {
+        href = pageLink(item.href);
+      }
+      if (!href && typeof item.page === "string") {
+        href = pageLink(item.page);
+      }
+      return /* @__PURE__ */ React21.createElement(
+        SubNav.Item,
+        {
+          value: typeof item.page !== "string" && href ? href : item.page || "",
+          href: href || item.page || "",
+          as: FwLink
+        },
+        item.title
+      );
+    })
+  );
+}
+
+// packages/react/components/FwToc.tsx
+import React22 from "react";
+import { Toc } from "@xyd-js/ui";
+function FwToc() {
+  var _a, _b;
+  const metadata = useMetadata();
+  const settings = useSettings();
+  const toc = useToC();
+  if (!toc) {
+    return null;
+  }
+  const maxDepth = (metadata == null ? void 0 : metadata.maxTocDepth) || ((_b = (_a = settings == null ? void 0 : settings.theme) == null ? void 0 : _a.writer) == null ? void 0 : _b.maxTocDepth) || 2;
+  const renderTocItems = (items, uiDepth = 0) => {
+    return items.map((item) => /* @__PURE__ */ React22.createElement(React22.Fragment, { key: item.id }, /* @__PURE__ */ React22.createElement(
+      Toc.Item,
+      {
+        id: item.id,
+        depth: uiDepth
+      },
+      item.value
+    ), item.children && item.children.length > 0 && renderTocItems(item.children, uiDepth + 1)));
+  };
+  return /* @__PURE__ */ React22.createElement(Toc, { maxDepth }, renderTocItems(toc));
+}
+export {
+  Framework,
+  FrameworkPage,
+  FwBanner,
+  FwBreadcrumbs,
+  FwCopyPage,
+  FwJsonComponent,
+  FwLink,
+  FwLogo,
+  FwNav,
+  FwNavLinks,
+  FwSidebar,
+  FwSubNav,
+  FwToc,
+  Surface,
+  SurfaceContext,
+  useActivePage,
+  useActivePageRoute,
+  useActiveRoute,
+  useAppearance,
+  useComponents,
+  useContentComponent,
+  useContentOriginal,
+  useMatchedSubNav,
+  useMetadata,
+  useSettings
+};
+//# sourceMappingURL=react.js.map