@duskmoon-dev/components 0.1.2

package/dist/components/dm-layout/index.js

@@ -0,0 +1,1186 @@
+"use client";
+
+// src/components/breadcrumb/Breadcrumb.tsx
+import React, { forwardRef } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/breadcrumb.ts
+var breadcrumbBaseClass = "breadcrumbs";
+var breadcrumbItemClass = "breadcrumb-item";
+var breadcrumbItemActiveClass = "breadcrumb-item-active";
+var breadcrumbItemDisabledClass = "breadcrumb-item-disabled";
+var breadcrumbLinkClass = "breadcrumb-link";
+var breadcrumbSeparatorClass = "breadcrumb-separator";
+var breadcrumbIconClass = "breadcrumb-icon";
+var breadcrumbMenuClass = "breadcrumb-menu";
+var breadcrumbMenuListClass = "breadcrumb-menu-list";
+var breadcrumbMenuItemClass = "breadcrumb-menu-item";
+function getBreadcrumbClasses({ className }) {
+  return cn(breadcrumbBaseClass, className);
+}
+function getBreadcrumbItemClasses({
+  active,
+  disabled,
+  className
+}) {
+  return cn(breadcrumbItemClass, active && breadcrumbItemActiveClass, disabled && breadcrumbItemDisabledClass, className);
+}
+function getBreadcrumbLinkClasses({
+  disabled,
+  className
+}) {
+  return cn(breadcrumbLinkClass, disabled && breadcrumbItemDisabledClass, className);
+}
+
+// src/components/breadcrumb/Breadcrumb.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var defaultSeparator = "/";
+function isSeparatorItem(item) {
+  return "type" in item && item.type === "separator";
+}
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function getItemTitle(item) {
+  if ("breadcrumbName" in item && hasNode(item.breadcrumbName)) {
+    return item.breadcrumbName;
+  }
+  return item.title ?? item.label;
+}
+function replacePathParams(path, params) {
+  return path.replace(/:([^/]+)/g, (token, key) => {
+    const value = params?.[key];
+    return value === undefined ? token : encodeURIComponent(String(value));
+  });
+}
+function normalizePathSegment(path) {
+  return path.replace(/^\/+|\/+$/g, "");
+}
+function buildPaths(routes, routeIndex, params) {
+  return routes.slice(0, routeIndex + 1).reduce((paths, route) => {
+    if (!route.path) {
+      return paths;
+    }
+    const path = normalizePathSegment(replacePathParams(route.path, params));
+    if (path) {
+      paths.push(path);
+    }
+    return paths;
+  }, []);
+}
+function getHref(item, paths) {
+  if (item.href) {
+    return item.href;
+  }
+  if (!item.path || paths.length === 0) {
+    return;
+  }
+  return `/${paths.join("/")}`;
+}
+function activateOnKeyboard(event) {
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+  event.preventDefault();
+  event.currentTarget.click();
+}
+function renderItemBody(item) {
+  const title = getItemTitle(item);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      item.icon ? /* @__PURE__ */ jsx("span", {
+        className: breadcrumbIconClass,
+        "aria-hidden": "true",
+        children: item.icon
+      }) : null,
+      hasNode(title) ? title : null
+    ]
+  });
+}
+function routeChildrenToMenu(children) {
+  if (!children?.length) {
+    return;
+  }
+  return {
+    items: children.map((child, index) => ({
+      key: child.key ?? child.path ?? index,
+      label: getItemTitle(child),
+      href: child.href,
+      path: child.path,
+      icon: child.icon,
+      disabled: child.disabled,
+      onClick: child.onClick,
+      children: child.children?.map((nested, nestedIndex) => ({
+        key: nested.key ?? nested.path ?? nestedIndex,
+        label: getItemTitle(nested),
+        href: nested.href,
+        path: nested.path,
+        icon: nested.icon,
+        disabled: nested.disabled,
+        onClick: nested.onClick
+      }))
+    }))
+  };
+}
+function renderMenuItems(menu, items = []) {
+  return items.map((item, index) => {
+    const key = item.key ?? item.path ?? index;
+    const href = item.href ?? item.path;
+    const label = renderItemBody(item);
+    function handleClick(event) {
+      if (item.disabled) {
+        event.preventDefault();
+        return;
+      }
+      item.onClick?.(event);
+      menu.onClick?.({ key, item, domEvent: event });
+    }
+    const content = item.disabled ? /* @__PURE__ */ jsx("span", {
+      role: "menuitem",
+      "aria-disabled": "true",
+      className: getBreadcrumbLinkClasses({
+        disabled: true,
+        className: breadcrumbMenuItemClass
+      }),
+      children: label
+    }) : href ? /* @__PURE__ */ jsx("a", {
+      role: "menuitem",
+      className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
+      href,
+      onClick: handleClick,
+      children: label
+    }) : /* @__PURE__ */ jsx("button", {
+      type: "button",
+      role: "menuitem",
+      className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
+      onClick: handleClick,
+      children: label
+    });
+    return /* @__PURE__ */ jsxs("li", {
+      children: [
+        content,
+        item.children?.length ? /* @__PURE__ */ jsx("ul", {
+          className: breadcrumbMenuListClass,
+          role: "menu",
+          children: renderMenuItems(menu, item.children)
+        }) : null
+      ]
+    }, key);
+  });
+}
+function renderDefaultItemContent(item, paths, active) {
+  const body = renderItemBody(item);
+  if (item.disabled) {
+    return body;
+  }
+  const href = item.href ?? (!active ? getHref(item, paths) : undefined);
+  if (href) {
+    return /* @__PURE__ */ jsx("a", {
+      className: getBreadcrumbLinkClasses({}),
+      href,
+      onClick: item.onClick,
+      children: body
+    });
+  }
+  if (item.onClick) {
+    return /* @__PURE__ */ jsx("span", {
+      role: "button",
+      tabIndex: 0,
+      className: getBreadcrumbLinkClasses({}),
+      onClick: item.onClick,
+      onKeyDown: activateOnKeyboard,
+      children: body
+    });
+  }
+  return body;
+}
+function renderMenuItem(item, menu, children, disabled) {
+  return /* @__PURE__ */ jsxs("details", {
+    className: getBreadcrumbItemClasses({
+      disabled,
+      className: cn(breadcrumbMenuClass, item.className)
+    }),
+    "aria-disabled": disabled || undefined,
+    children: [
+      /* @__PURE__ */ jsx("summary", {
+        className: getBreadcrumbLinkClasses({ disabled }),
+        children
+      }),
+      /* @__PURE__ */ jsx("ul", {
+        className: breadcrumbMenuListClass,
+        role: "menu",
+        children: renderMenuItems(menu, menu.items)
+      })
+    ]
+  });
+}
+var Breadcrumb = forwardRef(({
+  items,
+  routes,
+  params = {},
+  separator = defaultSeparator,
+  itemRender,
+  className,
+  children,
+  "aria-label": ariaLabel = "Breadcrumb",
+  ...props
+}, ref) => {
+  const entries = items ?? routes;
+  if (!entries?.length) {
+    return /* @__PURE__ */ jsx("nav", {
+      ...props,
+      ref,
+      "aria-label": ariaLabel,
+      className: getBreadcrumbClasses({ className }),
+      children
+    });
+  }
+  const routeEntries = entries.filter((item) => !isSeparatorItem(item));
+  let routeIndex = -1;
+  let previousRenderedItemWasSeparator = true;
+  return /* @__PURE__ */ jsx("nav", {
+    ...props,
+    ref,
+    "aria-label": ariaLabel,
+    className: getBreadcrumbClasses({ className }),
+    children: entries.map((entry, index) => {
+      if (isSeparatorItem(entry)) {
+        previousRenderedItemWasSeparator = true;
+        return /* @__PURE__ */ jsx("span", {
+          className: cn(breadcrumbSeparatorClass, entry.className),
+          "aria-hidden": "true",
+          children: entry.separator ?? separator
+        }, entry.key ?? `separator-${index}`);
+      }
+      routeIndex += 1;
+      const currentRouteIndex = routeIndex;
+      const paths = buildPaths(routeEntries, currentRouteIndex, params);
+      const active = currentRouteIndex === routeEntries.length - 1;
+      const menu = entry.menu ?? routeChildrenToMenu(entry.children);
+      const content = itemRender?.(entry, params, routeEntries, paths) ?? renderDefaultItemContent(entry, paths, active);
+      const applyActiveClass = active && !itemRender && !entry.href && !entry.onClick;
+      const insertSeparator = !previousRenderedItemWasSeparator;
+      previousRenderedItemWasSeparator = false;
+      return /* @__PURE__ */ jsxs(React.Fragment, {
+        children: [
+          insertSeparator ? /* @__PURE__ */ jsx("span", {
+            className: breadcrumbSeparatorClass,
+            "aria-hidden": "true",
+            children: separator
+          }) : null,
+          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx("span", {
+            className: getBreadcrumbItemClasses({
+              active: applyActiveClass,
+              disabled: entry.disabled,
+              className: entry.className
+            }),
+            "aria-current": active ? "page" : undefined,
+            "aria-disabled": entry.disabled || undefined,
+            children: content
+          })
+        ]
+      }, entry.key ?? entry.href ?? entry.path ?? currentRouteIndex);
+    })
+  });
+});
+Breadcrumb.displayName = "Breadcrumb";
+// src/components/dm-breadcrumb/DmBreadcrumb.tsx
+import { forwardRef as forwardRef2, useEffect, useMemo, useState } from "react";
+
+// src/classes/dm-breadcrumb.ts
+var dmBreadcrumbClass = "dm-breadcrumb";
+var dmBreadcrumbCompactClass = "dm-breadcrumb-compact";
+var dmBreadcrumbRecentClass = "dm-breadcrumb-recent";
+var dmBreadcrumbValueClass = "dm-breadcrumb-value";
+function getDmBreadcrumbClasses({
+  compact,
+  recent,
+  className
+}) {
+  return cn(dmBreadcrumbClass, compact && dmBreadcrumbCompactClass, recent && dmBreadcrumbRecentClass, className);
+}
+
+// src/components/dm-breadcrumb/DmBreadcrumb.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultStorageKey = "dm-breadcrumb-history-list";
+var defaultMaxHistoryLength = 10;
+function canUseSessionStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function readHistory(storageKey) {
+  if (!canUseSessionStorage())
+    return [];
+  try {
+    const raw = window.sessionStorage.getItem(storageKey);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+function writeHistory(storageKey, history) {
+  if (!canUseSessionStorage())
+    return;
+  window.sessionStorage.setItem(storageKey, JSON.stringify(history));
+}
+function currentLocation() {
+  if (typeof window === "undefined")
+    return;
+  return {
+    pathname: window.location.pathname,
+    search: window.location.search
+  };
+}
+function upsertHistory(history, item, maxLength) {
+  const nextHistory = history.filter((entry) => entry.pathname !== item.pathname);
+  return [...nextHistory, item].slice(-maxLength);
+}
+function resolveRecentUrl(item, history, isStoragePath) {
+  const baseUrl = item.url ?? item.href ?? "";
+  if (!isStoragePath || !item.url)
+    return baseUrl;
+  const recent = history.find((entry) => entry.pathname === item.url);
+  return recent ? `${recent.pathname}${recent.search ?? ""}` : baseUrl;
+}
+function renderTitle(item, index) {
+  if (item.itemRender)
+    return item.itemRender(item);
+  return /* @__PURE__ */ jsxs2("span", {
+    title: typeof item.title === "string" ? item.title : undefined,
+    children: [
+      item.title,
+      item.value !== undefined && index > 0 ? /* @__PURE__ */ jsxs2("span", {
+        className: dmBreadcrumbValueClass,
+        children: [
+          "(",
+          item.value,
+          ")"
+        ]
+      }) : null
+    ]
+  });
+}
+function collapseItems(items, maxVisibleItems) {
+  if (!maxVisibleItems || items.length <= maxVisibleItems || maxVisibleItems < 3) {
+    return items;
+  }
+  const headCount = 2;
+  const tailCount = Math.max(1, maxVisibleItems - headCount - 1);
+  return [
+    ...items.slice(0, headCount),
+    { type: "separator", key: "__dm-breadcrumb-ellipsis", separator: "..." },
+    ...items.slice(-tailCount)
+  ];
+}
+var DmBreadcrumb = forwardRef2(({
+  items,
+  isStoragePath = true,
+  storageKey = defaultStorageKey,
+  maxHistoryLength = defaultMaxHistoryLength,
+  maxVisibleItems,
+  compact,
+  history,
+  className,
+  separator,
+  ...props
+}, ref) => {
+  const [currentHistory, setCurrentHistory] = useState(() => history ?? readHistory(storageKey));
+  useEffect(() => {
+    if (history) {
+      setCurrentHistory(history);
+    }
+  }, [history]);
+  useEffect(() => {
+    if (!isStoragePath || history)
+      return;
+    const locationItem = currentLocation();
+    if (!locationItem)
+      return;
+    setCurrentHistory((prevHistory) => {
+      const nextHistory = upsertHistory(prevHistory, locationItem, maxHistoryLength);
+      writeHistory(storageKey, nextHistory);
+      return nextHistory;
+    });
+  }, [history, isStoragePath, maxHistoryLength, storageKey]);
+  const breadcrumbItems = useMemo(() => {
+    const mappedItems = items.map((item, index) => {
+      const url = resolveRecentUrl(item, currentHistory, isStoragePath);
+      return {
+        key: item.url ?? item.href ?? index,
+        title: renderTitle(item, index),
+        href: item.onClick ? undefined : url || undefined,
+        menu: item.menu,
+        onClick: item.onClick ? (event) => {
+          event.preventDefault();
+          item.onClick?.(url);
+        } : undefined
+      };
+    });
+    return collapseItems(mappedItems, maxVisibleItems);
+  }, [currentHistory, isStoragePath, items, maxVisibleItems]);
+  return /* @__PURE__ */ jsx2(Breadcrumb, {
+    ...props,
+    ref,
+    items: breadcrumbItems,
+    separator,
+    className: getDmBreadcrumbClasses({
+      compact,
+      recent: isStoragePath,
+      className
+    })
+  });
+});
+DmBreadcrumb.displayName = "DmBreadcrumb";
+// src/components/layout/Layout.tsx
+import { forwardRef as forwardRef3, useState as useState2 } from "react";
+
+// src/classes/layout.ts
+var layoutBaseClass = "layout";
+var layoutHasSiderClass = "layout-has-sider";
+var layoutHeaderClass = "layout-header";
+var layoutSiderClass = "layout-sider";
+var layoutSiderCollapsedClass = "layout-sider-collapsed";
+var layoutContentClass = "layout-content";
+var layoutFooterClass = "layout-footer";
+var layoutTriggerClass = "layout-trigger";
+function getLayoutClasses({
+  hasSider,
+  className
+}) {
+  return cn(layoutBaseClass, hasSider && layoutHasSiderClass, className);
+}
+function getLayoutSiderClasses({
+  collapsed,
+  className
+}) {
+  return cn(layoutSiderClass, collapsed && layoutSiderCollapsedClass, className);
+}
+
+// src/components/layout/Layout.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function toSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Header = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+  ...props,
+  ref,
+  className: cn(layoutHeaderClass, className)
+}));
+Header.displayName = "Layout.Header";
+var Content = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+  ...props,
+  ref,
+  className: cn(layoutContentClass, className)
+}));
+Content.displayName = "Layout.Content";
+var Footer = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+  ...props,
+  ref,
+  className: cn(layoutFooterClass, className)
+}));
+Footer.displayName = "Layout.Footer";
+var Sider = forwardRef3(({
+  children,
+  collapsible,
+  collapsed,
+  defaultCollapsed,
+  onCollapse,
+  width = 200,
+  collapsedWidth = 80,
+  trigger,
+  breakpoint,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const controlled = collapsed !== undefined;
+  const [internalCollapsed, setInternalCollapsed] = useState2(() => defaultCollapsed ?? false);
+  const mergedCollapsed = controlled ? collapsed : internalCollapsed;
+  const siderWidth = toSize(mergedCollapsed ? collapsedWidth : width);
+  function toggleCollapsed() {
+    const nextCollapsed = !mergedCollapsed;
+    if (!controlled) {
+      setInternalCollapsed(nextCollapsed);
+    }
+    onCollapse?.(nextCollapsed, "clickTrigger");
+  }
+  return /* @__PURE__ */ jsxs3("div", {
+    ...props,
+    ref,
+    "data-breakpoint": breakpoint,
+    className: getLayoutSiderClasses({
+      collapsed: mergedCollapsed,
+      className
+    }),
+    style: {
+      flex: `0 0 ${siderWidth}`,
+      maxWidth: siderWidth,
+      minWidth: siderWidth,
+      width: siderWidth,
+      ...style
+    },
+    children: [
+      children,
+      collapsible && trigger !== null ? /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: layoutTriggerClass,
+        "aria-label": mergedCollapsed ? "Expand sider" : "Collapse sider",
+        onClick: toggleCollapsed,
+        children: trigger ?? (mergedCollapsed ? ">" : "<")
+      }) : null
+    ]
+  });
+});
+Sider.displayName = "Layout.Sider";
+var LayoutRoot = forwardRef3(({ hasSider, className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+  ...props,
+  ref,
+  className: getLayoutClasses({ hasSider, className })
+}));
+LayoutRoot.displayName = "Layout";
+LayoutRoot.Header = Header;
+LayoutRoot.Sider = Sider;
+LayoutRoot.Content = Content;
+LayoutRoot.Footer = Footer;
+var Layout = LayoutRoot;
+// src/components/menu/Menu.tsx
+import { forwardRef as forwardRef4, useState as useState3 } from "react";
+
+// src/classes/menu.ts
+var menuBaseClass = "menu";
+var menuShowClass = "menu-show";
+var menuItemClass = "menu-item";
+var menuItemActiveClass = "menu-item-active";
+var menuItemDisabledClass = "menu-item-disabled";
+var menuItemIconClass = "menu-item-icon";
+var menuItemTrailingClass = "menu-item-trailing";
+var menuItemSubmenuClass = "menu-item-submenu";
+var menuDividerClass = "menu-divider";
+var menuLabelClass = "menu-label";
+var menuSubmenuClass = "menu-submenu";
+var menuCompactClass = "menu-compact";
+var menuWideClass = "menu-wide";
+var menuModeClasses = {
+  vertical: "menu-vertical",
+  horizontal: "menu-horizontal",
+  inline: "menu-inline"
+};
+var menuThemeClasses = {
+  light: "",
+  dark: "menu-dark menu-surface-container-highest"
+};
+var menuSizeClasses = {
+  sm: menuCompactClass,
+  md: "",
+  lg: menuWideClass
+};
+function getMenuClasses({
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  inlineCollapsed,
+  disabled,
+  className
+}) {
+  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+}
+function getMenuItemClasses({
+  active,
+  disabled,
+  danger,
+  submenu,
+  className
+}) {
+  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+}
+
+// src/components/menu/Menu.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function normalizeKeys(keys) {
+  return keys?.map(String) ?? [];
+}
+function hasNode2(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function keyForItem(item, indexPath) {
+  return String(item.key ?? indexPath.join("-"));
+}
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
+var MenuItem = forwardRef4(({
+  children,
+  icon,
+  extra,
+  active,
+  disabled,
+  danger,
+  className,
+  role,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs4("li", {
+  ...props,
+  ref,
+  role: role ?? "menuitem",
+  "aria-disabled": disabled || undefined,
+  className: getMenuItemClasses({
+    active,
+    disabled,
+    danger,
+    className
+  }),
+  children: [
+    icon ? /* @__PURE__ */ jsx4("span", {
+      className: menuItemIconClass,
+      children: icon
+    }) : null,
+    /* @__PURE__ */ jsx4("span", {
+      children
+    }),
+    extra ? /* @__PURE__ */ jsx4("span", {
+      className: menuItemTrailingClass,
+      children: extra
+    }) : null
+  ]
+}));
+MenuItem.displayName = "Menu.Item";
+var MenuDivider = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("li", {
+  ...props,
+  ref,
+  role: "separator",
+  className: cn(menuDividerClass, className)
+}));
+MenuDivider.displayName = "Menu.Divider";
+var MenuItemGroup = forwardRef4(({ title, children, className, ...props }, ref) => /* @__PURE__ */ jsxs4("li", {
+  ...props,
+  ref,
+  className: cn("menu-group", className),
+  children: [
+    hasNode2(title) ? /* @__PURE__ */ jsx4("div", {
+      className: menuLabelClass,
+      children: title
+    }) : null,
+    /* @__PURE__ */ jsx4("ul", {
+      className: cn(menuSubmenuClass, "menu-show"),
+      children
+    })
+  ]
+}));
+MenuItemGroup.displayName = "Menu.ItemGroup";
+var MenuRoot = forwardRef4(({
+  items,
+  children,
+  selectedKeys,
+  defaultSelectedKeys,
+  openKeys,
+  defaultOpenKeys,
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  selectable = true,
+  multiple,
+  inlineCollapsed,
+  disabled,
+  onClick,
+  onSelect,
+  onDeselect,
+  onOpenChange,
+  className,
+  ...props
+}, ref) => {
+  const selectedControlled = selectedKeys !== undefined;
+  const openControlled = openKeys !== undefined;
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState3(() => normalizeKeys(defaultSelectedKeys));
+  const [internalOpenKeys, setInternalOpenKeys] = useState3(() => normalizeKeys(defaultOpenKeys));
+  const currentSelectedKeys = selectedControlled ? normalizeKeys(selectedKeys) : internalSelectedKeys;
+  const currentOpenKeys = openControlled ? normalizeKeys(openKeys) : internalOpenKeys;
+  function setNextSelectedKeys(nextSelectedKeys) {
+    if (!selectedControlled) {
+      setInternalSelectedKeys(nextSelectedKeys);
+    }
+  }
+  function setNextOpenKeys(nextOpenKeys) {
+    if (!openControlled) {
+      setInternalOpenKeys(nextOpenKeys);
+    }
+    onOpenChange?.(nextOpenKeys);
+  }
+  function buildInfo(item, key, keyPath, domEvent, nextSelectedKeys = currentSelectedKeys) {
+    return {
+      key,
+      keyPath,
+      item,
+      selectedKeys: nextSelectedKeys,
+      domEvent
+    };
+  }
+  function activateItem(item, key, keyPath, event) {
+    if (disabled || item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    let nextSelectedKeys = currentSelectedKeys;
+    const selected = currentSelectedKeys.includes(key);
+    if (selectable) {
+      if (selected && multiple) {
+        nextSelectedKeys = currentSelectedKeys.filter((selectedKey) => selectedKey !== key);
+        setNextSelectedKeys(nextSelectedKeys);
+        onDeselect?.(buildInfo(item, key, keyPath, event, nextSelectedKeys));
+      } else if (!selected) {
+        nextSelectedKeys = multiple ? [...currentSelectedKeys, key] : [key];
+        setNextSelectedKeys(nextSelectedKeys);
+        onSelect?.(buildInfo(item, key, keyPath, event, nextSelectedKeys));
+      }
+    }
+    onClick?.(buildInfo(item, key, keyPath, event, nextSelectedKeys));
+  }
+  function toggleSubmenu(key) {
+    const open = currentOpenKeys.includes(key);
+    setNextOpenKeys(open ? currentOpenKeys.filter((openKey) => openKey !== key) : [...currentOpenKeys, key]);
+  }
+  function renderItem(item, indexPath, parentKeyPath = []) {
+    if (item.type === "divider") {
+      return /* @__PURE__ */ jsx4(MenuDivider, {}, `divider-${indexPath.join("-")}`);
+    }
+    const key = keyForItem(item, indexPath);
+    const keyPath = [key, ...parentKeyPath];
+    if (item.type === "group") {
+      return /* @__PURE__ */ jsx4(MenuItemGroup, {
+        title: item.label ?? item.title,
+        children: item.children?.map((child, childIndex) => renderItem(child, [...indexPath, childIndex], keyPath))
+      }, key);
+    }
+    const hasChildren = Boolean(item.children?.length);
+    const selected = currentSelectedKeys.includes(key);
+    const open = currentOpenKeys.includes(key);
+    const itemDisabled = disabled || item.disabled;
+    if (hasChildren) {
+      return /* @__PURE__ */ jsxs4("li", {
+        className: cn("menu-submenu-wrapper", item.className),
+        children: [
+          /* @__PURE__ */ jsxs4("button", {
+            type: "button",
+            className: getMenuItemClasses({
+              active: selected,
+              disabled: itemDisabled,
+              danger: item.danger,
+              submenu: true
+            }),
+            disabled: itemDisabled,
+            "aria-expanded": open,
+            onClick: () => toggleSubmenu(key),
+            children: [
+              item.icon ? /* @__PURE__ */ jsx4("span", {
+                className: menuItemIconClass,
+                children: item.icon
+              }) : null,
+              /* @__PURE__ */ jsx4("span", {
+                children: item.label ?? item.title
+              }),
+              item.extra ? /* @__PURE__ */ jsx4("span", {
+                className: menuItemTrailingClass,
+                children: item.extra
+              }) : null
+            ]
+          }),
+          open ? /* @__PURE__ */ jsx4("ul", {
+            className: cn(menuSubmenuClass, "menu-show"),
+            children: item.children?.map((child, childIndex) => renderItem(child, [...indexPath, childIndex], keyPath))
+          }) : null
+        ]
+      }, key);
+    }
+    return /* @__PURE__ */ jsx4(MenuItem, {
+      role: "menuitem",
+      tabIndex: itemDisabled ? undefined : 0,
+      active: selected,
+      disabled: itemDisabled,
+      danger: item.danger,
+      icon: item.icon,
+      extra: item.extra,
+      className: item.className,
+      onClick: (event) => activateItem(item, key, keyPath, event),
+      onKeyDown: (event) => {
+        if (!isActivationKey(event.key)) {
+          return;
+        }
+        event.preventDefault();
+        activateItem(item, key, keyPath, event);
+      },
+      children: item.label
+    }, key);
+  }
+  return /* @__PURE__ */ jsx4("ul", {
+    ...props,
+    ref,
+    role: props.role ?? "menu",
+    className: getMenuClasses({
+      mode,
+      theme,
+      size,
+      inlineCollapsed,
+      disabled,
+      className
+    }),
+    children: items ? items.map((item, index) => renderItem(item, [index])) : children
+  });
+});
+MenuRoot.displayName = "Menu";
+MenuRoot.Item = MenuItem;
+MenuRoot.Divider = MenuDivider;
+MenuRoot.ItemGroup = MenuItemGroup;
+var Menu = MenuRoot;
+// src/components/dm-menu/DmMenu.tsx
+import { forwardRef as forwardRef5, useMemo as useMemo2 } from "react";
+
+// src/classes/dm-menu.ts
+var dmMenuClass = "dm-menu";
+var dmMenuNoHeaderClass = "dm-menu-no-header";
+var dmMenuCollapsedClass = "dm-menu-collapsed";
+var dmMenuHeaderClass = "dm-menu-header";
+var dmMenuProductIconClass = "dm-menu-product-icon";
+var dmMenuContentClass = "dm-menu-content";
+var dmMenuFooterClass = "dm-menu-footer";
+var dmMenuCollapseButtonClass = "dm-menu-collapse-button";
+function getDmMenuClasses({
+  hideProductHeader,
+  inlineCollapsed,
+  className
+}) {
+  return cn(dmMenuClass, hideProductHeader && dmMenuNoHeaderClass, inlineCollapsed && dmMenuCollapsedClass, className);
+}
+
+// src/components/dm-menu/DmMenu.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function getMenuLabel(menu, locale) {
+  return locale === "en-US" && menu.menuNameEn ? menu.menuNameEn : menu.menuName;
+}
+function renderIcon(icon) {
+  if (!icon)
+    return;
+  return typeof icon === "string" ? /* @__PURE__ */ jsx5("span", {
+    className: dmMenuProductIconClass,
+    "aria-hidden": "true",
+    children: icon
+  }) : icon;
+}
+function isEnabled(menu) {
+  return menu.enable !== false;
+}
+function toMenuItems(menus, locale, byKey) {
+  return (menus ?? []).filter((menu) => !menu.subRouter && isEnabled(menu)).sort((a, b) => (a.menuNum ?? 0) - (b.menuNum ?? 0)).map((menu) => {
+    const key = menu.menuUrl || String(menu.menuId ?? menu.menuIdentifier);
+    byKey?.set(key, menu);
+    return {
+      key,
+      label: getMenuLabel(menu, locale),
+      title: getMenuLabel(menu, locale),
+      icon: renderIcon(menu.iconStr),
+      children: toMenuItems(menu.children, locale, byKey)
+    };
+  });
+}
+function createDmMenuItems(menus, locale) {
+  return toMenuItems(menus, locale);
+}
+var DmMenu = forwardRef5(({
+  menus = [],
+  items,
+  hideProductHeader = false,
+  productTitle = "DuskMoon",
+  productIcon,
+  inlineCollapsed,
+  onCollapsed,
+  locale,
+  onClick,
+  className,
+  ...props
+}, ref) => {
+  const menuByKey = useMemo2(() => new Map, []);
+  const schemaItems = useMemo2(() => {
+    menuByKey.clear();
+    return toMenuItems(menus, locale, menuByKey);
+  }, [locale, menuByKey, menus]);
+  const contentItems = items ?? schemaItems;
+  function handleClick(info) {
+    onClick?.({
+      ...info,
+      menu: menuByKey.get(info.key)
+    });
+  }
+  return /* @__PURE__ */ jsxs5("div", {
+    ref,
+    className: getDmMenuClasses({
+      hideProductHeader,
+      inlineCollapsed,
+      className
+    }),
+    children: [
+      hideProductHeader ? null : /* @__PURE__ */ jsx5("div", {
+        className: dmMenuHeaderClass,
+        children: /* @__PURE__ */ jsx5(Menu, {
+          mode: "inline",
+          inlineCollapsed,
+          selectable: false,
+          items: [
+            {
+              key: "__product",
+              label: productTitle,
+              title: productTitle,
+              icon: renderIcon(productIcon)
+            }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx5("div", {
+        className: dmMenuContentClass,
+        children: /* @__PURE__ */ jsx5(Menu, {
+          ...props,
+          mode: props.mode ?? "inline",
+          items: contentItems,
+          inlineCollapsed,
+          onClick: handleClick
+        })
+      }),
+      onCollapsed ? /* @__PURE__ */ jsx5("div", {
+        className: dmMenuFooterClass,
+        children: /* @__PURE__ */ jsx5("button", {
+          type: "button",
+          className: dmMenuCollapseButtonClass,
+          "aria-label": inlineCollapsed ? "Expand menu" : "Collapse menu",
+          onClick: onCollapsed,
+          children: inlineCollapsed ? ">" : "<"
+        })
+      }) : null
+    ]
+  });
+});
+DmMenu.displayName = "DmMenu";
+// src/components/dm-layout/DmLayout.tsx
+import { forwardRef as forwardRef6, useEffect as useEffect2, useMemo as useMemo3, useState as useState4 } from "react";
+
+// src/classes/dm-layout.ts
+var dmLayoutClass = "dm-layout";
+var dmLayoutShellClass = "dm-layout-shell";
+var dmLayoutMainClass = "dm-layout-main";
+var dmLayoutSiderClass = "dm-layout-sider";
+var dmLayoutBodyClass = "dm-layout-body";
+var dmLayoutBreadcrumbClass = "dm-layout-breadcrumb";
+var dmLayoutContentClass = "dm-layout-content";
+var dmLayoutAuxiliaryClass = "dm-layout-auxiliary";
+function getDmLayoutClasses({ className }) {
+  return cn(dmLayoutClass, className);
+}
+
+// src/components/dm-layout/DmLayout.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function getLabel(menu, locale) {
+  return locale === "en-US" && menu.menuNameEn ? menu.menuNameEn : menu.menuName;
+}
+function getAllMenuUrls(menus = [], includeSubRoutes) {
+  const urls = [];
+  function visit(menu) {
+    if (includeSubRoutes || !menu.subRouter) {
+      urls.push(menu.menuUrl);
+    }
+    menu.children?.forEach(visit);
+  }
+  menus.forEach(visit);
+  return urls;
+}
+function findBestPrefix(urls, selectedKey = "") {
+  return urls.filter((url) => url && selectedKey.startsWith(url)).sort((a, b) => b.length - a.length)[0];
+}
+function findMenuPath(menus, key, path = []) {
+  for (const menu of menus ?? []) {
+    const nextPath = [...path, menu];
+    if (menu.menuUrl === key)
+      return nextPath;
+    const childPath = findMenuPath(menu.children, key, nextPath);
+    if (childPath)
+      return childPath;
+  }
+  return;
+}
+function getOpenKeysFromPath(path) {
+  return (path ?? []).slice(0, -1).filter((menu) => !menu.subRouter && menu.menuUrl).map((menu) => menu.menuUrl);
+}
+function getAllTopOpenKeys(menus = []) {
+  return menus.filter((menu) => !menu.subRouter && menu.children?.length && menu.menuUrl).map((menu) => menu.menuUrl);
+}
+function breadcrumbFromPath({
+  path,
+  locale,
+  onBreadcrumbClick
+}) {
+  return (path ?? []).map((menu, index, all) => {
+    const active = index === all.length - 1;
+    return {
+      title: getLabel(menu, locale),
+      url: active ? undefined : menu.menuUrl,
+      onClick: !active && menu.menuUrl && onBreadcrumbClick ? () => onBreadcrumbClick(menu.menuUrl) : undefined
+    };
+  });
+}
+function unique(keys) {
+  return Array.from(new Set(keys.filter(Boolean)));
+}
+function deriveDmLayoutSelection({
+  menus = [],
+  selectedKey = "",
+  openAllKeys,
+  locale,
+  onBreadcrumbClick
+}) {
+  const selectedMenuKey = findBestPrefix(getAllMenuUrls(menus, false), selectedKey) ?? "";
+  const selectedBreadcrumbKey = findBestPrefix(getAllMenuUrls(menus, true), selectedKey) ?? selectedMenuKey;
+  const selectedMenuPath = findMenuPath(menus, selectedMenuKey);
+  const selectedBreadcrumbPath = findMenuPath(menus, selectedBreadcrumbKey);
+  const selectOpenKeys = getOpenKeysFromPath(selectedMenuPath);
+  const openKeys = openAllKeys ? unique([...getAllTopOpenKeys(menus), ...selectOpenKeys]) : selectOpenKeys;
+  const activeMenu = selectedBreadcrumbPath?.[selectedBreadcrumbPath.length - 1];
+  return {
+    selectedMenuKey,
+    selectedBreadcrumbKey,
+    openKeys,
+    breadcrumbItems: breadcrumbFromPath({
+      path: selectedBreadcrumbPath,
+      locale,
+      onBreadcrumbClick
+    }),
+    tips: activeMenu?.tipsEnabled && locale === "en-US" && activeMenu.tipsEn ? activeMenu.tipsEn : activeMenu?.tipsEnabled ? activeMenu.tips : undefined
+  };
+}
+var DmLayout = forwardRef6(({
+  menus = [],
+  selectedKey = "",
+  openAllKeys,
+  collapsed,
+  defaultCollapsed = false,
+  hideProductHeader,
+  productIcon,
+  productTitle,
+  breadcrumbItems,
+  aheadBreadcrumbItems = [],
+  behindBreadcrumbItems = [],
+  tips,
+  locale,
+  menuProps,
+  onCollapse,
+  onMenuClick,
+  onBreadcrumbClick,
+  children,
+  className,
+  ...props
+}, ref) => {
+  const collapsedControlled = collapsed !== undefined;
+  const [internalCollapsed, setInternalCollapsed] = useState4(defaultCollapsed);
+  const [manualOpenKeys, setManualOpenKeys] = useState4();
+  const mergedCollapsed = collapsedControlled ? collapsed : internalCollapsed;
+  const selection = useMemo3(() => deriveDmLayoutSelection({
+    menus,
+    selectedKey,
+    openAllKeys,
+    locale,
+    onBreadcrumbClick
+  }), [locale, menus, onBreadcrumbClick, openAllKeys, selectedKey]);
+  const mergedBreadcrumbItems = breadcrumbItems ?? aheadBreadcrumbItems.concat(selection.breadcrumbItems).concat(behindBreadcrumbItems);
+  const mergedTips = tips ?? selection.tips;
+  useEffect2(() => {
+    setManualOpenKeys(undefined);
+  }, [menus, openAllKeys, selection.selectedMenuKey]);
+  function handleCollapse() {
+    const nextCollapsed = !mergedCollapsed;
+    if (!collapsedControlled) {
+      setInternalCollapsed(nextCollapsed);
+    }
+    onCollapse?.(nextCollapsed);
+  }
+  return /* @__PURE__ */ jsx6(Layout, {
+    ...props,
+    ref,
+    hasSider: true,
+    className: getDmLayoutClasses({ className }),
+    children: /* @__PURE__ */ jsxs6(Layout, {
+      className: dmLayoutShellClass,
+      hasSider: true,
+      children: [
+        /* @__PURE__ */ jsx6(Layout.Sider, {
+          className: dmLayoutSiderClass,
+          collapsible: true,
+          collapsed: mergedCollapsed,
+          collapsedWidth: 60,
+          width: 230,
+          trigger: null,
+          children: /* @__PURE__ */ jsx6(DmMenu, {
+            ...menuProps,
+            hideProductHeader,
+            productTitle,
+            productIcon,
+            menus,
+            selectedKeys: [selection.selectedMenuKey],
+            openKeys: manualOpenKeys ?? selection.openKeys,
+            inlineCollapsed: mergedCollapsed,
+            locale,
+            onCollapsed: handleCollapse,
+            onOpenChange: setManualOpenKeys,
+            onClick: (info) => onMenuClick?.(info.key, info.menu)
+          })
+        }),
+        /* @__PURE__ */ jsxs6(Layout, {
+          className: dmLayoutMainClass,
+          children: [
+            mergedBreadcrumbItems.length ? /* @__PURE__ */ jsx6("div", {
+              className: dmLayoutBreadcrumbClass,
+              children: /* @__PURE__ */ jsx6(DmBreadcrumb, {
+                items: mergedBreadcrumbItems
+              })
+            }) : null,
+            /* @__PURE__ */ jsxs6(Layout.Content, {
+              className: dmLayoutBodyClass,
+              children: [
+                mergedTips ? /* @__PURE__ */ jsx6("div", {
+                  className: dmLayoutAuxiliaryClass,
+                  children: mergedTips
+                }) : null,
+                /* @__PURE__ */ jsx6("div", {
+                  className: dmLayoutContentClass,
+                  children
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+DmLayout.displayName = "DmLayout";
+export {
+  deriveDmLayoutSelection,
+  DmLayout
+};