for-humanity 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "for-humanity",
-    "version": "0.6.0",
+    "version": "0.7.1",
     "description": "Documents written for humans to read: a docs kit with a sidebar, parts, sections and flowcharts, built on Hono JSX",
     "keywords": [
         "docs",
@@ -11,7 +11,7 @@
         "korean"
     ],
     "license": "MIT",
-    "author": "\ud558\ubbfc\uc6b0",
+    "author": "nomeehej",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/minu-ha/for-humanity.git"
@@ -86,5 +86,6 @@
         "stylelint": "^17.15.0",
         "stylelint-config-standard": "^40.0.0",
         "typescript": "^7.0.2"
-    }
+    },
+    "packageManager": "pnpm@12.9.1+sha512.06b055fff5cd20dc12781de173ced3310ce0951bf2ec620211a16045d5444d5c93a663210764ef29a653a610459ba0368f0e74f84d80c54723cf95aae7bc0d6d"
 }

package/src/asset/font/{pretendard → ibm-plex-sans-kr}/LICENSE.txt

@@ -1,9 +1,8 @@
-Copyright (c) 2021, Kil Hyung-jin (https://github.com/orioncactus/pretendard),
-with Reserved Font Name Pretendard.
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://scripts.sil.org/OFL
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
 
 
 -----------------------------------------------------------
@@ -19,7 +18,7 @@ with others.
 
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
+fonts, including any derivative works, can be bundled, embedded,
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The

package/src/asset/font/ibm-plex-sans-kr/ibm-plex-sans-kr.css

@@ -0,0 +1,22 @@
+/*
+ * IBM Plex Sans KR 1.003 · npm @ibm/plex-sans-kr 1.1.0 · https://github.com/IBM/plex
+ * 배포 WOFF2(fonts/complete/woff2/hinted) 원본 그대로 · 라이선스는 옆의 LICENSE.txt
+ * 본문의 한글 음절·호환 자모만 담당 · Monoplex KR 한글과 같은 글자의 원래 폭
+ */
+@font-face {
+    font-family: "IBM Plex Sans KR";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: url(./IBMPlexSansKR-Regular.woff2) format("woff2");
+    unicode-range: U+3131-318E, U+AC00-D7A3;
+}
+
+@font-face {
+    font-family: "IBM Plex Sans KR";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: url(./IBMPlexSansKR-SemiBold.woff2) format("woff2");
+    unicode-range: U+3131-318E, U+AC00-D7A3;
+}

package/src/asset/font/{jetbrains-mono/LICENSE → monoplex-kr/LICENSE.md}

@@ -1,13 +1,42 @@
-Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+Copyright (c) 2021, Kim Yangsu with Reserved Font Name "Monoplex"
 
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
+Monoplex Font Software is licensed under the SIL Open Font License, Version 1.1.
+The build recipe (https://github.com/y-kim/monoplex) and the build tool it drives,
+hapchija (https://github.com/y-kim/hapchija), are licensed under the MIT License.
 
+The fonts carry the copyrights below. Every one of them is licensed under the
+SIL Open Font License, Version 1.1.
 
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
+- Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+  https://github.com/IBM/plex/
+  IBM Plex Mono, IBM Plex Sans KR, IBM Plex Sans JP, IBM Plex Sans TC and
+  IBM Plex Sans SC. Nearly every glyph comes from these.
+
+- Copyright (c) 2021, Yuko Otawara with Reserved Font Name "PlemolJP"
+  https://github.com/yuru7/PlemolJP
+  The half-width box drawing and block glyphs, U+2500-U+259F. These were drawn
+  for PlemolJP; they are not IBM Plex outlines. The .sfd file that holds them
+  (source/AdjustedGlyphs/Box_Drawing_half.sfd) still names IBM Plex Sans JP in
+  its header because it was saved out of a working copy of that font, but the
+  outlines in it are original work.
+
+- Copyright (c) 2014, Ryan L McIntyre (https://ryanlmcintyre.com)
+  https://github.com/ryanoasis/nerd-fonts
+  Nerd Font variants only. Those variants take icon glyphs, and nothing else,
+  from Blex Mono Nerd Font. The icon sets are the work of their own authors and
+  keep their own licenses; the upstream release does not restate them.
+  Pomicons (U+E000-E00A) are not included.
+
+IBM Plex® is a trademark of IBM Corp, registered in many jurisdictions
+worldwide. This notice is carried in the fonts' name table, as OFL FAQ 3.7 asks.
+
+Special thanks to PlemolJP (https://github.com/yuru7/PlemolJP). Monoplex began
+as a fork of its generate script, and this repository's history still starts
+there. hapchija has since been rewritten and carries no PlemolJP code.
+
+## SIL Open Font License
+
+Version 1.1 - 26 February 2007
 
 PREAMBLE
 The goals of the Open Font License (OFL) are to stimulate worldwide
@@ -37,7 +66,7 @@ copyright statement(s).
 distributed by the Copyright Holder(s).
 
 "Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
+or substituting — in part or in whole — any of the components of the
 Original Version, by changing formats or by porting the Font Software to a
 new environment.
 
@@ -91,3 +120,27 @@ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
+
+
+## MIT License
+
+Copyright (c) 2021 Kim Yangsu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

package/src/asset/font/monoplex-kr/monoplex-kr.css

@@ -0,0 +1,20 @@
+/*
+ * Monoplex KR 1.1.0 · https://github.com/y-kim/monoplex/releases/tag/monoplex-kr-1.1.0
+ * 릴리스 TTF를 서브셋 없이 WOFF2로만 압축 · OFL FAQ의 이름 유지 조건 · 라이선스는 옆의 LICENSE.md
+ * fonttools ttLib.woff2 compress MonoplexKR-Regular.ttf
+ */
+@font-face {
+    font-family: "Monoplex KR";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: url(./MonoplexKR-Regular.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: "Monoplex KR";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: url(./MonoplexKR-SemiBold.woff2) format("woff2");
+}

package/src/component/widget/navigation/_constant/navigation-data-schema.ts

@@ -6,13 +6,11 @@ const navigationDocSchema: ZodMiniType<NavigationDoc> = object({
     name: string(),
     label: string(),
     active: boolean(),
-    current: boolean(),
     children: lazy(() => array(navigationDocSchema)),
 });
 const navigationGroupSchema: ZodMiniType<NavigationGroup> = object({
     name: string(),
     path: array(string()),
-    current: boolean(),
     docs: array(navigationDocSchema),
     groups: lazy(() => array(navigationGroupSchema)),
 });
@@ -30,6 +28,5 @@ export const navigationDataSchema: ZodMiniType<NavigationData> = object({
             sections: array(object({heading: headingSchema, part: optional(string()), subs: array(object({heading: headingSchema}))})).check(minLength(1)),
         }),
     ),
-    pageId: string(),
     home: boolean(),
 });

package/src/component/widget/navigation/_constant/navigation.ts

@@ -4,6 +4,6 @@
 export const navigation_mobile_query = "(width < 1024px)";
 
 /**
- * 양쪽 240px 탐색·본문 900px·간격 120px와 스크롤바가 들어가는 3열 기준
+ * 양쪽 200px 탐색·간격 120px·최소 800px 본문과 스크롤바가 들어가는 3열 기준
  */
-export const navigation_wide_query = "(width >= 1536px)";
+export const navigation_wide_query = "(width >= 1360px)";

package/src/component/widget/navigation/_function/to-navigation-data/_to-navigation-document.ts

@@ -2,13 +2,12 @@ import type {DocBranch} from "@/component/widget/navigation/_type/doc-branch";
 import type {NavigationDoc} from "@/component/widget/navigation/_type/navigation-data";
 
 /**
- * 本문 없는 문서 가지 · 재귀에서도 현재 페이지와 조상 경로만 유지
+ * 본문 없는 문서 가지 · 재귀에서도 현재 페이지 한 항목만 표시
  */
-export const toNavigationDocument = (options: {doc: DocBranch; current?: string; ancestors: Set<string>}): NavigationDoc => ({
+export const toNavigationDocument = (options: {doc: DocBranch; current?: string}): NavigationDoc => ({
     id: options.doc.id,
     name: options.doc.data.name,
     label: options.doc.data.label,
     active: options.doc.id === options.current,
-    current: options.doc.id === options.current || options.ancestors.has(options.doc.id),
     children: options.doc.children === undefined ? [] : options.doc.children.map((doc) => toNavigationDocument({...options, doc})),
 });

package/src/component/widget/navigation/_function/to-navigation-data/_to-navigation-group.ts

@@ -3,12 +3,11 @@ import type {DocGroup} from "@/component/widget/navigation/_type/doc-group";
 import type {NavigationGroup} from "@/component/widget/navigation/_type/navigation-data";
 
 /**
- * 전체 묶음 경로와 본문 없는 하위 가지 · 현재 문서의 경로만 트리선으로 연결
+ * 전체 묶음 경로와 본문 없는 하위 가지
  */
-export const toNavigationGroup = (options: {group: DocGroup; current?: string; ancestors: Set<string>; currentGroup?: string[]}): NavigationGroup => ({
+export const toNavigationGroup = (options: {group: DocGroup; current?: string}): NavigationGroup => ({
     name: options.group.name,
     path: options.group.path,
-    current: options.group.path.every((name, index) => name === options.currentGroup?.[index]),
-    docs: options.group.docs.map((doc) => toNavigationDocument({doc, current: options.current, ancestors: options.ancestors})),
+    docs: options.group.docs.map((doc) => toNavigationDocument({doc, current: options.current})),
     groups: options.group.groups.map((group) => toNavigationGroup({...options, group})),
 });

package/src/component/widget/navigation/_function/to-navigation-data/to-navigation-data.ts

@@ -9,17 +9,9 @@ import type {SiteConfig} from "@/type/site-config";
 /**
  * 현재 문서의 이름·계층·목차만 전송 · 다른 문서 본문은 브라우저 탐색 입력에서 제외
  */
-export const toNavigationData = (options: {site: SiteConfig; docs: Doc[]; current?: string; outline?: DocOutline}): NavigationData => {
-    const currentDoc = options.docs.find((doc) => doc.id === options.current);
-    const ancestors = new Set(currentDoc?.ancestors);
-
-    return {
-        title: options.site.title,
-        groups: toDocGroups({docs: options.docs, navigation: options.site.navigation}).map((group) =>
-            toNavigationGroup({group, current: options.current, ancestors, currentGroup: currentDoc?.data.group}),
-        ),
-        outline: options.outline === undefined ? [] : toTocGroups(options.outline),
-        pageId: options.current === undefined ? "/" : options.current,
-        home: options.current === undefined,
-    };
-};
+export const toNavigationData = (options: {site: SiteConfig; docs: Doc[]; current?: string; outline?: DocOutline}): NavigationData => ({
+    title: options.site.title,
+    groups: toDocGroups({docs: options.docs, navigation: options.site.navigation}).map((group) => toNavigationGroup({group, current: options.current})),
+    outline: options.outline === undefined ? [] : toTocGroups(options.outline),
+    home: options.current === undefined,
+});

package/src/component/widget/navigation/_type/navigation-data.ts

@@ -20,10 +20,6 @@ export interface NavigationDoc {
      * 현재 페이지 한 항목만 강조
      */
     active: boolean;
-    /**
-     * 현재 문서와 조상의 트리 경로
-     */
-    current: boolean;
     /**
      * 클릭 가능한 하위 문서
      */
@@ -42,10 +38,6 @@ export interface NavigationGroup {
      * 최상위부터 현재 묶음까지
      */
     path: string[];
-    /**
-     * 현재 페이지가 속한 묶음 경로
-     */
-    current: boolean;
     /**
      * 현재 단계의 문서
      */
@@ -72,10 +64,6 @@ export interface NavigationData {
      * 현재 페이지의 목차
      */
     outline: TocGroup[];
-    /**
-     * 목차의 접힘 상태를 구분할 문서 id
-     */
-    pageId: string;
     /**
      * README 홈 여부
      */

package/src/component/widget/navigation/_type/navigation-focus-snapshot.ts

@@ -10,10 +10,6 @@ export interface NavigationFocusSnapshot {
      * 메뉴 진입·닫기 버튼에서 데스크톱 브랜드로 돌아갈 위치인지 구분
      */
     drawer: boolean;
-    /**
-     * 하위 문서·묶음 접힘 버튼의 안정된 식별자
-     */
-    branch: string | null;
     /**
      * 문서 이동 링크의 안정된 식별자
      */

package/src/component/widget/navigation/_wg-navigation-nav-list.css

@@ -1,179 +1,48 @@
 /*
- * 재귀 문서 목록 · 단계별 가지와 조상 경로의 1px 트리
+ * 재귀 문서 목록 · 단계별 들여쓰기
  */
 .wg_navigationNavList__root {
-    margin: 0 0 0 var(--app-space-tree-inset);
+    margin: 0;
     padding: 0;
     list-style: none;
 }
 
 .wg_navigationNavList__branch {
-    /* 하위 묶음도 문서와 같은 첫 줄 기준으로 가지 연결 */
-    position: relative;
     display: block;
-    padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+    padding: var(--app-space-tree-row) 0;
     color: var(--app-color-text-muted);
     font-size: var(--app-font-size-group);
     line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
     overflow-wrap: anywhere;
-
-    &::before {
-        position: absolute;
-        top: calc(0.5lh + var(--app-space-tree-row));
-        left: 0;
-        width: var(--app-space-tree-indent);
-        border-top: 1px solid var(--app-color-border-soft);
-        content: "";
-        pointer-events: none;
-    }
 }
 
 .wg_navigationNavList__link {
-    /* 가로 가지는 링크 첫 줄 기준 · 여러 줄 제목에서도 연결 위치 유지 */
-    position: relative;
     display: block;
-    padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+    padding: var(--app-space-tree-row) 0;
     color: var(--app-color-link);
     font-size: var(--app-font-size-dense);
     line-height: var(--app-line-height-tight);
     text-decoration: none;
     overflow-wrap: anywhere;
 
-    &::before {
-        position: absolute;
-        top: calc(0.5lh + var(--app-space-tree-row));
-        left: 0;
-        width: var(--app-space-tree-indent);
-        border-top: 1px solid var(--app-color-border-soft);
-        content: "";
-        pointer-events: none;
-    }
-
     &:where(:hover) {
         text-decoration: underline;
     }
 
-    &:where(:hover)::before {
-        border-top-color: currentcolor;
-    }
-
-    /* hover와 같은 밑줄·가지선으로 키보드 위치 표시 */
+    /* hover와 같은 밑줄로 키보드 위치 표시 */
     &:where(:focus-visible) {
         outline: none;
         text-decoration: underline;
     }
-
-    &:where(:focus-visible)::before {
-        border-top-color: currentcolor;
-    }
 }
 
 .wg_navigationNavList__link--active {
     color: var(--app-color-link);
     font-weight: var(--app-font-weight-active);
-
-    &::before {
-        border-top-color: currentcolor;
-    }
 }
 
 .wg_navigationNavList__item {
-    /* 하위 목록을 포함해 다음 형제까지 줄기 연결 */
-    display: flow-root;
-
-    /* 세로 줄기는 각 항목 기준 · 마지막 항목의 첫 줄 가운데에서 종료 */
-    position: relative;
-
-    &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__link {
-        padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-    }
-
-    &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__branch {
-        padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-    }
-
-    &::before {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        border-left: 1px solid var(--app-color-border-soft);
-        content: "";
-        pointer-events: none;
-    }
-
-    &:where(:last-child)::before {
-        bottom: auto;
-        height: calc(0.5lh + var(--app-space-tree-row));
-    }
-
-    /* hover·키보드 포커스의 도착점 · 첫 줄 아래는 기본 줄기 유지 */
-    &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: calc(0.5lh + var(--app-space-tree-row));
-        border-left: 1px solid transparent;
-        content: "";
-        pointer-events: none;
-    }
-
-    &:where(:hover)::after {
-        border-left-color: var(--app-color-link);
-    }
-
-    &:where(:has(:focus-visible))::after {
-        border-left-color: var(--app-color-link);
-    }
-
-    /* 뒤 항목까지의 세로 경로 · 같은 목록의 형제 안에서만 연결 */
-    &:where(:has(~ .wg_navigationNavList__item:hover))::before {
-        border-left-color: var(--app-color-link);
-    }
-
-    &:where(:has(~ .wg_navigationNavList__item :focus-visible))::before {
-        border-left-color: var(--app-color-link);
-    }
-
     & > .wg_navigationNavList__root {
         margin-left: var(--app-space-tree-indent);
     }
-
-    /* 하위 문서를 탐색할 때 조상 묶음의 가지도 함께 연결 */
-    &:where(:hover) > .wg_navigationNavList__branch::before {
-        border-top-color: var(--app-color-link);
-    }
-
-    &:where(:has(:focus-visible)) > .wg_navigationNavList__branch::before {
-        border-top-color: var(--app-color-link);
-    }
-
-    /* 자식 문서를 탐색할 때 클릭 가능한 부모 문서의 가지도 연결 */
-    &:where(:hover) > .wg_navigationNavList__link::before {
-        border-top-color: var(--app-color-link);
-    }
-
-    &:where(:has(:focus-visible)) > .wg_navigationNavList__link::before {
-        border-top-color: var(--app-color-link);
-    }
-}
-
-.wg_navigationNavList__item--trail {
-    &::before {
-        border-left-color: var(--app-color-link);
-    }
-}
-
-.wg_navigationNavList__item--current {
-    &::after {
-        border-left-color: var(--app-color-link);
-    }
-
-    & > .wg_navigationNavList__branch::before {
-        border-top-color: var(--app-color-link);
-    }
-
-    & > .wg_navigationNavList__link::before {
-        border-top-color: var(--app-color-link);
-    }
 }

package/src/component/widget/navigation/_wg-navigation-nav-list.tsx

@@ -1,8 +1,6 @@
 import clsx from "clsx";
 import {Fragment} from "hono/jsx";
-import {toNavigationBranchId} from "@/component/widget/navigation/_function/to-navigation-branch-id";
 import type {NavigationGroup} from "@/component/widget/navigation/_type/navigation-data";
-import {WgNavigationBranchToggle} from "@/component/widget/navigation/_wg-navigation-branch-toggle";
 import "./_wg-navigation-nav-list.css";
 
 /**
@@ -13,80 +11,38 @@ export interface WgNavigationNavListProps {
      * 현재 단계의 문서와 하위 묶음
      */
     group: NavigationGroup;
-    /**
-     * 사용자가 접은 가지
-     */
-    collapsed: Record<string, boolean>;
-    /**
-     * 브라우저에서 가지 선택 변경
-     */
-    onToggle?: (key: string) => void;
-    /**
-     * 부모 버튼과 연결할 가지 키 · 루트 묶음·문서 모두 같은 규칙 사용
-     */
-    branchKey: string;
 }
 
 export const WgNavigationNavList = (props: WgNavigationNavListProps) => {
     const entries = [
-        ...props.group.docs.map((doc) => {
-            const active = doc.active;
-            return {kind: "document" as const, key: `doc:${doc.id}`, doc, active, current: doc.current};
-        }),
-        ...props.group.groups.map((group) => ({
-            kind: "group" as const,
-            key: `group:${JSON.stringify(group.path)}`,
-            group,
-            current: group.current,
-        })),
+        ...props.group.docs.map((doc) => ({kind: "document" as const, key: `doc:${doc.id}`, doc})),
+        ...props.group.groups.map((group) => ({kind: "group" as const, key: `group:${JSON.stringify(group.path)}`, group})),
     ];
-    const currentIndex = entries.findIndex((entry) => entry.current);
 
     return (
-        <ul
-            className={clsx("wg_navigationNavList__root")}
-            aria-label={props.group.name}
-            id={toNavigationBranchId(props.branchKey)}
-            hidden={props.collapsed[props.branchKey] === true}
-        >
+        <ul className={clsx("wg_navigationNavList__root")} aria-label={props.group.name}>
             {/**
-             * 현재 경로 앞의 줄기와 도착 가지 · 문서 링크는 원래 파일 URL 사용
+             * 문서 링크는 원래 파일 URL 사용
              */}
-            {entries.map((entry, index) => (
-                <li
-                    className={clsx("wg_navigationNavList__item", {
-                        "wg_navigationNavList__item--trail": index < currentIndex,
-                        "wg_navigationNavList__item--current": entry.current,
-                    })}
-                    key={entry.key}
-                >
+            {entries.map((entry) => (
+                <li className={clsx("wg_navigationNavList__item")} key={entry.key}>
                     {/**
                      * 문서 링크 · 부모도 독립 페이지, 현재 한 문서에만 페이지 상태 부여
                      */}
                     {entry.kind === "document" && (
                         <Fragment>
                             <a
-                                className={clsx("wg_navigationNavList__link", {"wg_navigationNavList__link--active": entry.active})}
+                                className={clsx("wg_navigationNavList__link", {"wg_navigationNavList__link--active": entry.doc.active})}
                                 href={`/${entry.doc.id}/`}
                                 title={entry.doc.label}
-                                aria-current={entry.active ? "page" : undefined}
+                                aria-current={entry.doc.active ? "page" : undefined}
                             >
                                 {entry.doc.name}
                             </a>
                             {/**
                              * 하위 문서 · 부모 아래에서도 기존 목록의 들여쓰기와 키보드 이동 유지
                              */}
-                            {entry.doc.children.length > 0 && (
-                                <WgNavigationBranchToggle branchKey={entry.key} label={entry.doc.name} collapsed={props.collapsed} onToggle={props.onToggle} />
-                            )}
-                            {entry.doc.children.length > 0 && (
-                                <WgNavigationNavList
-                                    group={{name: entry.doc.name, path: props.group.path, current: entry.current, docs: entry.doc.children, groups: []}}
-                                    collapsed={props.collapsed}
-                                    onToggle={props.onToggle}
-                                    branchKey={entry.key}
-                                />
-                            )}
+                            {entry.doc.children.length > 0 && <WgNavigationNavList group={{name: entry.doc.name, path: props.group.path, docs: entry.doc.children, groups: []}} />}
                         </Fragment>
                     )}
                     {/**
@@ -95,8 +51,7 @@ export const WgNavigationNavList = (props: WgNavigationNavListProps) => {
                     {entry.kind === "group" && (
                         <Fragment>
                             <span className={clsx("wg_navigationNavList__branch")}>{entry.group.name}</span>
-                            <WgNavigationBranchToggle branchKey={entry.key} label={entry.group.name} collapsed={props.collapsed} onToggle={props.onToggle} />
-                            <WgNavigationNavList group={entry.group} collapsed={props.collapsed} onToggle={props.onToggle} branchKey={entry.key} />
+                            <WgNavigationNavList group={entry.group} />
                         </Fragment>
                     )}
                 </li>

package/src/component/widget/navigation/_wg-navigation-nav.css

@@ -9,19 +9,13 @@
 .wg_navigationNav__docs {
     display: flex;
     flex-direction: column;
-    gap: var(--app-space-stack);
+    gap: var(--app-space-tree-group);
 }
 
 .wg_navigationNav__group {
-    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-    margin: 0 0 4px;
+    margin: 0 0 var(--app-space-tree-label);
     color: var(--app-color-text-muted);
     font-size: var(--app-font-size-group);
     line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
     text-box: trim-start cap alphabetic;
 }
-
-.wg_navigationNav__docGroup {
-    /* 묶음 접기 버튼의 첫 행 기준 */
-    position: relative;
-}