@simplysm/solid 13.0.41 → 13.0.43

package/docs/styling.md

@@ -110,26 +110,45 @@ import {
 
 ```typescript
 import {
-  type FieldSize,              // "sm" | "lg" | "xl"
-  getFieldWrapperClass,        // Utility to build field wrapper class string
-  getTextareaWrapperClass,     // Utility to build textarea wrapper class string
-  fieldInputClass,             // Base classes for field <input> element
-  fieldGapClasses,             // Gap classes per size (with prefix icon)
+  type FieldSize,                    // "sm" | "lg" | "xl"
+  fieldBaseClass,                    // Base wrapper classes (inline-flex, field surface, h-field)
+  fieldSizeClasses,                  // Size variant classes per FieldSize
+  fieldInsetClass,                   // Inset mode wrapper classes
+  fieldInsetHeightClass,             // Inset height class (h-field-inset, excludes border)
+  fieldInsetSizeHeightClasses,       // Inset height classes per size
+  fieldDisabledClass,                // Disabled state classes
+  textAreaBaseClass,                 // Base textarea wrapper classes
+  textAreaSizeClasses,               // Textarea size classes per FieldSize
+  fieldInputClass,                   // Base classes for field <input> element
+  fieldGapClasses,                   // Gap classes per size (with prefix icon)
+  getFieldWrapperClass,              // Utility to build field wrapper class string
+  getTextareaWrapperClass,           // Utility to build textarea wrapper class string
 } from "@simplysm/solid";
 ```
 
+**`getFieldWrapperClass` options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `size` | `FieldSize` | Size variant |
+| `disabled` | `boolean` | Apply disabled styles |
+| `inset` | `boolean` | Apply inset styles |
+| `includeCustomClass` | `string \| false` | Additional CSS class (or `false` to skip) |
+| `extra` | `string \| false` | Extra classes inserted before size/disabled/inset |
+
 ### Checkbox.styles
 
 ```typescript
 import {
-  type CheckboxSize,           // "sm" | "lg" | "xl"
-  checkboxBaseClass,           // Base wrapper classes
-  indicatorBaseClass,          // Base indicator (box) classes
-  checkedClass,                // Checked state classes (primary color)
-  checkboxSizeClasses,         // Size variant classes
-  checkboxInsetClass,          // Inset mode classes
-  checkboxInlineClass,         // Inline display classes
-  checkboxDisabledClass,       // Disabled state classes
+  type CheckboxSize,               // "sm" | "lg" | "xl"
+  checkboxBaseClass,               // Base wrapper classes
+  indicatorBaseClass,              // Base indicator (box) classes
+  checkedClass,                    // Checked state classes (primary color)
+  checkboxSizeClasses,             // Size variant classes
+  checkboxInsetClass,              // Inset mode classes
+  checkboxInsetSizeHeightClasses,  // Inset height classes per size (excludes border)
+  checkboxInlineClass,             // Inline display classes
+  checkboxDisabledClass,           // Disabled state classes
 } from "@simplysm/solid";
 ```
 
@@ -142,8 +161,11 @@ import {
   sortableThClass, sortIconClass, toolbarClass, fixedClass, fixedLastClass,
   resizerClass, resizeIndicatorClass, featureThClass, featureTdClass,
   expandIndentGuideClass, expandIndentGuideLineClass, expandToggleClass,
+  selectSingleClass, selectSingleSelectedClass, selectSingleUnselectedClass,
   reorderHandleClass, reorderIndicatorClass, configButtonClass,
-  // etc.
+  featureCellWrapperClass, featureCellBodyWrapperClass,
+  featureCellClickableClass, featureCellBodyClickableClass,
+  reorderCellWrapperClass,
 } from "@simplysm/solid";
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.41",
+  "version": "13.0.43",
   "description": "심플리즘 패키지 - SolidJS 라이브러리",
   "author": "김석래",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "solid-tiptap": "^0.8.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-common": "13.0.41",
-    "@simplysm/core-browser": "13.0.41"
+    "@simplysm/core-common": "13.0.43",
+    "@simplysm/core-browser": "13.0.43"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/permission-table/PermissionTable.tsx

@@ -14,6 +14,7 @@ import { twMerge } from "tailwind-merge";
 import { DataSheet } from "../sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
+import type { AppPerm } from "../../../helpers/createAppStructure";
 
 const titleCellClass = clsx("flex items-stretch", "px-2");
 const indentGuideWrapperClass = clsx("mr-1 flex w-3", "justify-center");
@@ -21,16 +22,8 @@ const indentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault)
 
 // --- 타입 ---
 
-export interface PermissionItem<TModule = string> {
-  title: string;
-  href?: string;
-  modules?: TModule[];
-  perms?: string[];
-  children?: PermissionItem<TModule>[];
-}
-
 export interface PermissionTableProps<TModule = string> {
-  items?: PermissionItem<TModule>[];
+  items?: AppPerm<TModule>[];
   value?: Record<string, boolean>;
   onValueChange?: (value: Record<string, boolean>) => void;
   modules?: TModule[];
@@ -42,9 +35,9 @@ export interface PermissionTableProps<TModule = string> {
 // --- 유틸리티 (테스트에서도 사용) ---
 
 /** 트리에서 모든 고유 perm 타입을 수집 */
-export function collectAllPerms<TModule>(items: PermissionItem<TModule>[]): string[] {
+export function collectAllPerms<TModule>(items: AppPerm<TModule>[]): string[] {
   const set = new Set<string>();
-  const walk = (list: PermissionItem<TModule>[]) => {
+  const walk = (list: AppPerm<TModule>[]) => {
     for (const item of list) {
       if (item.perms) {
         for (const p of item.perms) set.add(p);
@@ -58,12 +51,12 @@ export function collectAllPerms<TModule>(items: PermissionItem<TModule>[]): stri
 
 /** modules 필터: 활성 모듈과 교차가 있는 아이템만 남김 */
 export function filterByModules<TModule>(
-  items: PermissionItem<TModule>[],
+  items: AppPerm<TModule>[],
   modules: TModule[] | undefined,
-): PermissionItem<TModule>[] {
+): AppPerm<TModule>[] {
   if (!modules || modules.length === 0) return items;
 
-  const result: PermissionItem<TModule>[] = [];
+  const result: AppPerm<TModule>[] = [];
 
   for (const item of items) {
     if (item.modules && !item.modules.some((m) => modules.includes(m))) {
@@ -82,13 +75,13 @@ export function filterByModules<TModule>(
 /** 체크 변경 시 cascading 처리 */
 export function changePermCheck<TModule>(
   value: Record<string, boolean>,
-  item: PermissionItem<TModule>,
+  item: AppPerm<TModule>,
   perm: string,
   checked: boolean,
 ): Record<string, boolean> {
   const result = { ...value };
 
-  const apply = (target: PermissionItem<TModule>) => {
+  const apply = (target: AppPerm<TModule>) => {
     if (target.perms && target.href != null && target.href !== "") {
       const permIndex = target.perms.indexOf(perm);
 
@@ -122,10 +115,7 @@ export function changePermCheck<TModule>(
 // --- 내부 헬퍼 ---
 
 /** 모듈 필터에 의해 보이는지 확인 (객체 참조 유지) */
-function isItemVisible<TModule>(
-  item: PermissionItem<TModule>,
-  modules: TModule[] | undefined,
-): boolean {
+function isItemVisible<TModule>(item: AppPerm<TModule>, modules: TModule[] | undefined): boolean {
   if (!modules || modules.length === 0) return true;
   if (item.modules && !item.modules.some((m) => modules.includes(m))) return false;
   if (!item.perms && item.children) {
@@ -136,12 +126,12 @@ function isItemVisible<TModule>(
 
 /** 보이는 아이템에서만 고유 perm 타입 수집 */
 function collectVisiblePerms<TModule>(
-  items: PermissionItem<TModule>[],
+  items: AppPerm<TModule>[],
   modules: TModule[] | undefined,
 ): string[] {
   const set = new Set<string>();
 
-  function walk(list: PermissionItem<TModule>[]) {
+  function walk(list: AppPerm<TModule>[]) {
     for (const item of list) {
       if (!isItemVisible(item, modules)) continue;
       if (item.perms) {
@@ -157,7 +147,7 @@ function collectVisiblePerms<TModule>(
 
 /** 그룹 노드의 체크 상태: 하위 중 하나라도 체크면 true */
 function isGroupPermChecked<TModule>(
-  item: PermissionItem<TModule>,
+  item: AppPerm<TModule>,
   perm: string,
   value: Record<string, boolean>,
 ): boolean {
@@ -171,7 +161,7 @@ function isGroupPermChecked<TModule>(
 }
 
 /** 하위에 특정 perm이 하나라도 있으면 true */
-function hasPermInTree<TModule>(item: PermissionItem<TModule>, perm: string): boolean {
+function hasPermInTree<TModule>(item: AppPerm<TModule>, perm: string): boolean {
   if (item.perms?.includes(perm)) return true;
   if (item.children) {
     return item.children.some((child) => hasPermInTree(child, perm));
@@ -181,7 +171,7 @@ function hasPermInTree<TModule>(item: PermissionItem<TModule>, perm: string): bo
 
 /** 기본 권한(perms[0])이 꺼져 있어서 비활성화해야 하는지 */
 function isPermDisabled<TModule>(
-  item: PermissionItem<TModule>,
+  item: AppPerm<TModule>,
   perm: string,
   value: Record<string, boolean>,
 ): boolean {
@@ -193,12 +183,12 @@ function isPermDisabled<TModule>(
 
 /** 확장 가능한 모든 아이템 수집 (객체 참조 유지) */
 function collectExpandable<TModule>(
-  items: PermissionItem<TModule>[],
-  getChildren: (item: PermissionItem<TModule>) => PermissionItem<TModule>[] | undefined,
-): PermissionItem<TModule>[] {
-  const result: PermissionItem<TModule>[] = [];
+  items: AppPerm<TModule>[],
+  getChildren: (item: AppPerm<TModule>) => AppPerm<TModule>[] | undefined,
+): AppPerm<TModule>[] {
+  const result: AppPerm<TModule>[] = [];
 
-  function walk(list: PermissionItem<TModule>[]) {
+  function walk(list: AppPerm<TModule>[]) {
     for (const item of list) {
       const children = getChildren(item);
       if (children && children.length > 0) {
@@ -233,7 +223,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
   });
 
   // Sheet의 getChildren — 모듈 필터 적용, 객체 참조 유지
-  const getChildren = (item: PermissionItem): PermissionItem[] | undefined => {
+  const getChildren = (item: AppPerm): AppPerm[] | undefined => {
     if (!item.children || item.children.length === 0) return undefined;
     const modules = local.modules;
     if (!modules || modules.length === 0) return item.children;
@@ -249,7 +239,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
   // 확장 상태 — 기본적으로 모두 펼침
   const getAllExpandable = () => collectExpandable(visibleItems(), getChildren);
 
-  const [expandedItems, setExpandedItems] = createSignal<PermissionItem[]>(getAllExpandable());
+  const [expandedItems, setExpandedItems] = createSignal<AppPerm[]>(getAllExpandable());
 
   // 트리 구조 변경 시 모두 다시 펼침 (모듈 필터 변경 등)
   createEffect(
@@ -262,7 +252,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     ),
   );
 
-  const handlePermChange = (item: PermissionItem, perm: string, checked: boolean) => {
+  const handlePermChange = (item: AppPerm, perm: string, checked: boolean) => {
     const newValue = changePermCheck(currentValue(), item, perm, checked);
     local.onValueChange?.(newValue);
   };
@@ -278,7 +268,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
       >
         <DataSheet.Column key="title" header="권한 항목" sortable={false} resizable={false}>
           {(ctx) => {
-            const item = ctx.item as PermissionItem;
+            const item = ctx.item as AppPerm;
             return (
               <div class={titleCellClass}>
                 <For each={Array.from({ length: ctx.depth })}>
@@ -297,7 +287,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
           {(perm) => (
             <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
               {(ctx) => {
-                const item = ctx.item as PermissionItem;
+                const item = ctx.item as AppPerm;
                 return (
                   <Show when={hasPermInTree(item, perm)}>
                     <Checkbox

package/src/components/layout/sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ import { SidebarMenu } from "./SidebarMenu";
 import { SidebarUser } from "./SidebarUser";
 
 export type { SidebarContainerProps } from "./SidebarContainer";
-export type { SidebarMenuItem, SidebarMenuProps } from "./SidebarMenu";
+export type { SidebarMenuProps } from "./SidebarMenu";
 export type { SidebarUserMenu, SidebarUserProps } from "./SidebarUser";
 
 const baseClass = clsx(

package/src/components/layout/sidebar/SidebarMenu.tsx

@@ -14,8 +14,8 @@ import {
 import { useLocation, useNavigate } from "@solidjs/router";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import type { IconProps } from "@tabler/icons-solidjs";
 import type { ComponentSize } from "../../../styles/tokens.styles";
+import type { AppMenu } from "../../../helpers/createAppStructure";
 import { Icon } from "../../display/Icon";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
@@ -31,23 +31,16 @@ const headerClass = clsx(
   "tracking-wider",
 );
 
-export interface SidebarMenuItem {
-  title: string;
-  href?: string;
-  icon?: Component<IconProps>;
-  children?: SidebarMenuItem[];
-}
-
 export interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   /**
    * 메뉴 아이템 배열
    */
-  menus: SidebarMenuItem[];
+  menus: AppMenu[];
 }
 
 // 내부 Context: 초기 펼침 상태 공유
 interface MenuContextValue {
-  initialOpenItems: Accessor<Set<SidebarMenuItem>>;
+  initialOpenItems: Accessor<Set<AppMenu>>;
 }
 
 const MenuContext = createContext<MenuContextValue>();
@@ -84,10 +77,10 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
 
   // 현재 pathname과 일치하는 메뉴의 부모들을 찾아 펼침 상태 계산
   const findSelectedPath = (
-    menus: SidebarMenuItem[],
+    menus: AppMenu[],
     pathname: string,
-    path: SidebarMenuItem[] = [],
-  ): SidebarMenuItem[] | null => {
+    path: AppMenu[] = [],
+  ): AppMenu[] | null => {
     for (const menu of menus) {
       const currentPath = [...path, menu];
       if (menu.href === pathname) {
@@ -106,7 +99,7 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
     const selectedPath = findSelectedPath(local.menus, location.pathname);
     return selectedPath
       ? new Set(selectedPath.slice(0, -1)) // 마지막 항목(선택된 메뉴)은 제외하고 부모들만 펼침
-      : new Set<SidebarMenuItem>();
+      : new Set<AppMenu>();
   });
 
   const getClassName = () => twMerge("flex-1 overflow-y-auto", local.class);
@@ -124,7 +117,7 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
 };
 
 interface MenuItemProps {
-  menu: SidebarMenuItem;
+  menu: AppMenu;
   size?: ComponentSize;
 }
 

package/src/helpers/createAppStructure.ts

@@ -1,7 +1,6 @@
 import { type Accessor, createMemo, createRoot } from "solid-js";
 import type { Component } from "solid-js";
 import type { IconProps } from "@tabler/icons-solidjs";
-import type { SidebarMenuItem } from "../components/layout/sidebar/SidebarMenu";
 
 // ── 입력 타입 ──
 
@@ -40,6 +39,27 @@ export interface AppStructureSubPerm<TModule> {
 
 // ── 출력 타입 ──
 
+export interface AppMenu {
+  title: string;
+  href?: string;
+  icon?: Component<IconProps>;
+  children?: AppMenu[];
+}
+
+export interface AppPerm<TModule = string> {
+  title: string;
+  href?: string;
+  modules?: TModule[];
+  perms?: string[];
+  children?: AppPerm<TModule>[];
+}
+
+export interface AppFlatPerm<TModule = string> {
+  titleChain: string[];
+  code: string;
+  modulesChain: TModule[][];
+}
+
 export interface AppRoute {
   path: string;
   component: Component;
@@ -52,10 +72,11 @@ export interface AppFlatMenu {
 
 export interface AppStructure<TModule> {
   items: AppStructureItem<TModule>[];
-  routes: AppRoute[];
-  usableMenus: Accessor<SidebarMenuItem[]>;
+  usableRoutes: Accessor<AppRoute[]>;
+  usableMenus: Accessor<AppMenu[]>;
   usableFlatMenus: Accessor<AppFlatMenu[]>;
-  permRecord: Accessor<Record<string, boolean>>;
+  usablePerms: Accessor<AppPerm<TModule>[]>;
+  flatPerms: AppFlatPerm<TModule>[];
   getTitleChainByHref(href: string): string[];
 }
 
@@ -85,42 +106,46 @@ function checkModules<TModule>(
   return true;
 }
 
-function collectRoutes<TModule>(
+// ── Routes ──
+
+function buildUsableRoutes<TModule>(
   items: AppStructureItem<TModule>[],
-  parentCodes: string[],
-  routes: AppRoute[],
-): void {
+  routeBasePath: string,
+  permBasePath: string,
+  usableModules: TModule[] | undefined,
+  permRecord: Record<string, boolean> | undefined,
+): AppRoute[] {
+  const result: AppRoute[] = [];
+
   for (const item of items) {
-    const codes = [...parentCodes, item.code];
+    if (!checkModules(item.modules, item.requiredModules, usableModules)) continue;
+
+    const routePath = routeBasePath + "/" + item.code;
+    const permPath = permBasePath + "/" + item.code;
 
     if (isGroupItem(item)) {
-      collectRoutes(item.children, codes, routes);
+      result.push(
+        ...buildUsableRoutes(item.children, routePath, permPath, usableModules, permRecord),
+      );
     } else if (item.component !== undefined) {
-      routes.push({
-        path: "/" + codes.join("/"),
-        component: item.component,
-      });
+      if (permRecord !== undefined && item.perms?.includes("use") && !permRecord[permPath + "/use"])
+        continue;
+      result.push({ path: routePath, component: item.component });
     }
   }
-}
 
-function extractRoutes<TModule>(items: AppStructureItem<TModule>[]): AppRoute[] {
-  const routes: AppRoute[] = [];
-  for (const top of items) {
-    if (isGroupItem(top)) {
-      collectRoutes(top.children, [], routes);
-    }
-  }
-  return routes;
+  return result;
 }
 
+// ── Menus ──
+
 function buildMenus<TModule>(
   items: AppStructureItem<TModule>[],
   basePath: string,
   usableModules: TModule[] | undefined,
-  permRecord: Record<string, boolean>,
-): SidebarMenuItem[] {
-  const result: SidebarMenuItem[] = [];
+  permRecord: Record<string, boolean> | undefined,
+): AppMenu[] {
+  const result: AppMenu[] = [];
 
   for (const item of items) {
     if (!checkModules(item.modules, item.requiredModules, usableModules)) continue;
@@ -134,7 +159,7 @@ function buildMenus<TModule>(
       }
     } else {
       if (item.isNotMenu) continue;
-      if (item.perms?.includes("use") && !permRecord[href + "/use"]) continue;
+      if (item.perms?.includes("use") && !permRecord?.[href + "/use"]) continue;
 
       result.push({ title: item.title, href, icon: item.icon });
     }
@@ -143,7 +168,7 @@ function buildMenus<TModule>(
   return result;
 }
 
-function flattenMenus(menus: SidebarMenuItem[], titleChain: string[] = []): AppFlatMenu[] {
+function flattenMenus(menus: AppMenu[], titleChain: string[] = []): AppFlatMenu[] {
   const result: AppFlatMenu[] = [];
 
   for (const menu of menus) {
@@ -159,6 +184,117 @@ function flattenMenus(menus: SidebarMenuItem[], titleChain: string[] = []): AppF
   return result;
 }
 
+// ── Perms ──
+
+function buildPerms<TModule>(
+  items: AppStructureItem<TModule>[],
+  basePath: string,
+  usableModules: TModule[] | undefined,
+): AppPerm<TModule>[] {
+  const result: AppPerm<TModule>[] = [];
+
+  for (const item of items) {
+    if (!checkModules(item.modules, item.requiredModules, usableModules)) continue;
+
+    const href = basePath + "/" + item.code;
+
+    if (isGroupItem(item)) {
+      const children = buildPerms(item.children, href, usableModules);
+      result.push({
+        title: item.title,
+        modules: item.modules,
+        children,
+      });
+    } else {
+      result.push({
+        title: item.title,
+        href,
+        modules: item.modules,
+        perms: item.perms,
+        children: item.subPerms
+          ?.filter((sp) => checkModules(sp.modules, sp.requiredModules, usableModules))
+          .map((sp) => ({
+            title: sp.title,
+            href: href + "/" + sp.code,
+            modules: sp.modules,
+            perms: sp.perms as string[],
+          })),
+      });
+    }
+  }
+
+  return result;
+}
+
+function collectFlatPerms<TModule>(items: AppStructureItem<TModule>[]): AppFlatPerm<TModule>[] {
+  const results: AppFlatPerm<TModule>[] = [];
+
+  interface QueueItem {
+    item: AppStructureItem<TModule>;
+    titleChain: string[];
+    codePath: string;
+    modulesChain: TModule[][];
+  }
+
+  const queue: QueueItem[] = items.map((item) => ({
+    item,
+    titleChain: [],
+    codePath: "",
+    modulesChain: [],
+  }));
+
+  while (queue.length > 0) {
+    const { item, titleChain, codePath, modulesChain } = queue.shift()!;
+
+    const currTitleChain = [...titleChain, item.title];
+    const currCodePath = codePath + "/" + item.code;
+    const currModulesChain: TModule[][] = item.modules
+      ? [...modulesChain, item.modules]
+      : modulesChain;
+
+    if (isGroupItem(item)) {
+      for (const child of item.children) {
+        queue.push({
+          item: child,
+          titleChain: currTitleChain,
+          codePath: currCodePath,
+          modulesChain: currModulesChain,
+        });
+      }
+    } else {
+      if (item.perms) {
+        for (const perm of item.perms) {
+          results.push({
+            titleChain: currTitleChain,
+            code: currCodePath + "/" + perm,
+            modulesChain: currModulesChain,
+          });
+        }
+      }
+
+      if (item.subPerms) {
+        for (const subPerm of item.subPerms) {
+          const subModulesChain: TModule[][] = subPerm.modules
+            ? [...currModulesChain, subPerm.modules]
+            : currModulesChain;
+
+          for (const perm of subPerm.perms) {
+            results.push({
+              titleChain: currTitleChain,
+              code: currCodePath + "/" + subPerm.code + "/" + perm,
+              modulesChain: subModulesChain,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  return results;
+}
+
+// ── Info ──
+
 function findItemChainByCodes<TModule>(
   items: AppStructureItem<TModule>[],
   codes: string[],
@@ -183,17 +319,38 @@ export function createAppStructure<TModule>(opts: {
   usableModules?: Accessor<TModule[] | undefined>;
   permRecord?: Accessor<Record<string, boolean>>;
 }): AppStructure<TModule> {
-  const permRecord = () => opts.permRecord?.() ?? {};
-
-  const routes = extractRoutes(opts.items);
+  const flatPerms = collectFlatPerms(opts.items);
 
   const memos = createRoot(() => {
+    const usableRoutes = createMemo(() => {
+      const routes: AppRoute[] = [];
+      for (const top of opts.items) {
+        if (isGroupItem(top)) {
+          routes.push(
+            ...buildUsableRoutes(
+              top.children,
+              "",
+              "/" + top.code,
+              opts.usableModules?.(),
+              opts.permRecord?.(),
+            ),
+          );
+        }
+      }
+      return routes;
+    });
+
     const usableMenus = createMemo(() => {
-      const menus: SidebarMenuItem[] = [];
+      const menus: AppMenu[] = [];
       for (const top of opts.items) {
         if (isGroupItem(top)) {
           menus.push(
-            ...buildMenus(top.children, "/" + top.code, opts.usableModules?.(), permRecord()),
+            ...buildMenus(
+              top.children,
+              "/" + top.code,
+              opts.usableModules?.(),
+              opts.permRecord?.(),
+            ),
           );
         }
       }
@@ -202,15 +359,18 @@ export function createAppStructure<TModule>(opts: {
 
     const usableFlatMenus = createMemo(() => flattenMenus(usableMenus()));
 
-    return { usableMenus, usableFlatMenus };
+    const usablePerms = createMemo(() => buildPerms(opts.items, "", opts.usableModules?.()));
+
+    return { usableRoutes, usableMenus, usableFlatMenus, usablePerms };
   });
 
   return {
     items: opts.items,
-    routes,
+    usableRoutes: memos.usableRoutes,
     usableMenus: memos.usableMenus,
     usableFlatMenus: memos.usableFlatMenus,
-    permRecord,
+    usablePerms: memos.usablePerms,
+    flatPerms,
     getTitleChainByHref(href: string): string[] {
       const codes = href.split("/").filter(Boolean);
       return findItemChainByCodes(opts.items, codes).map((item) => item.title);

package/src/index.ts

@@ -185,6 +185,9 @@ export type {
   AppStructureSubPerm,
   AppRoute,
   AppFlatMenu,
+  AppMenu,
+  AppPerm,
+  AppFlatPerm,
   AppStructure,
 } from "./helpers/createAppStructure";