for-humanity 0.6.0 → 0.7.0

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

@@ -1,5 +1,5 @@
 /*
- * 와이드 화면의 오른쪽 목차 · 회색 제목·묶음과 본문 글색의 이동 대상 구분
+ * 와이드 화면의 오른쪽 목차 · 라벨·묶음은 문서 탐색의 묶음과 같은 표현
  */
 .wg_navigationToc__root {
     font-size: var(--app-font-size-dense);
@@ -7,166 +7,55 @@
 }
 
 .wg_navigationToc__label {
-    margin-bottom: var(--app-space-inline);
+    margin: 0 0 var(--app-space-tree-label);
     color: var(--app-color-text-muted);
-    font-size: var(--app-font-size-label);
-    font-weight: var(--app-font-weight-strong);
-    letter-spacing: var(--app-letter-spacing-label);
+    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_navigationToc__group {
-    margin: 0 0 4px;
-    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+    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));
-}
-
-.wg_navigationToc__groupSection {
-    /* 가름 제목과 그 하위 목록을 하나의 접힘 대상으로 연결 */
-    position: relative;
-    display: flow-root;
+    text-box: trim-start cap alphabetic;
 }
 
 .wg_navigationToc__groupSection--named {
-    margin-top: var(--app-space-stack);
+    margin-top: var(--app-space-tree-group);
 }
 
 .wg_navigationToc__list {
-    margin: 0 0 0 var(--app-space-tree-inset);
+    margin: 0;
     padding: 0;
     list-style: none;
 }
 
 .wg_navigationToc__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-text);
     font-size: var(--app-font-size-dense);
     line-height: var(--app-line-height-tight);
     text-decoration: none;
 
-    &::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) {
         color: var(--app-color-text-strong);
         text-decoration: underline;
     }
 
-    &:where(:hover)::before {
-        border-top-color: currentcolor;
-    }
-
-    /* 박스 대신 hover와 같은 진한 글·밑줄·가지선으로 키보드 위치 표시 */
+    /* 박스 대신 hover와 같은 진한 글·밑줄로 키보드 위치 표시 */
     &:where(:focus-visible) {
         outline: none;
         color: var(--app-color-text-strong);
         text-decoration: underline;
     }
-
-    &:where(:focus-visible)::before {
-        border-top-color: currentcolor;
-    }
 }
 
 .wg_navigationToc__link--active {
     color: var(--app-color-text-strong);
     font-weight: var(--app-font-weight-active);
-
-    &::before {
-        border-top-color: currentcolor;
-    }
-}
-
-.wg_navigationToc__item {
-    /* 하위 목록의 margin을 포함해 다음 항목까지 줄기 연결 */
-    display: flow-root;
-
-    /* 세로 줄기는 항목 전체 기준 · 중간 항목의 소제목 옆에서도 연결 */
-    position: relative;
-
-    &:has(> .wg_navigationBranchToggle__root) > .wg_navigationToc__link {
-        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-text-strong);
-    }
-
-    &:where(:has(:focus-visible))::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    /* 뒤 항목까지의 세로 경로 · 같은 목록의 형제 안에서만 연결 */
-    &:where(:has(~ .wg_navigationToc__item:hover))::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    &:where(:has(~ .wg_navigationToc__item :focus-visible))::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    /* 하위 제목을 탐색할 때 상위 절의 가지도 연결 */
-    &:where(:hover) > .wg_navigationToc__link::before {
-        border-top-color: var(--app-color-text-strong);
-    }
-
-    &:where(:has(:focus-visible)) > .wg_navigationToc__link::before {
-        border-top-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_navigationToc__item--trail {
-    &::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_navigationToc__item--current {
-    &::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    /* 현재 소제목의 상위 절은 글 강조 없이 경로의 가로 가지 연결 */
-    & > .wg_navigationToc__link::before {
-        border-top-color: var(--app-color-text-strong);
-    }
 }
 
 .wg_navigationToc__sub {
@@ -175,112 +64,28 @@
     list-style: none;
 }
 
-.wg_navigationToc__subItem {
-    /* 하위 줄기는 소제목 항목 기준 · 마지막 소제목 첫 줄에서 종료 */
-    position: relative;
-
-    &::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-text-strong);
-    }
-
-    &:where(:has(:focus-visible))::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    /* 뒤 항목까지의 세로 경로 · 같은 목록의 형제 안에서만 연결 */
-    &:where(:has(~ .wg_navigationToc__subItem:hover))::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    &:where(:has(~ .wg_navigationToc__subItem :focus-visible))::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_navigationToc__subItem--trail {
-    &::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_navigationToc__subItem--current {
-    &::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
 .wg_navigationToc__subLink {
-    /* 하위 가지도 링크 첫 줄 기준 · 줄바꿈된 제목 옆으로 선이 늘어나지 않음 */
-    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);
     font-size: var(--app-font-size-detail);
     line-height: var(--app-line-height-tight);
     text-decoration: none;
 
-    &::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) {
         color: var(--app-color-text-strong);
         text-decoration: underline;
     }
 
-    &:where(:hover)::before {
-        border-top-color: currentcolor;
-    }
-
     /* 상위 목차와 같은 키보드 표현 */
     &:where(:focus-visible) {
         outline: none;
         color: var(--app-color-text-strong);
         text-decoration: underline;
     }
-
-    &:where(:focus-visible)::before {
-        border-top-color: currentcolor;
-    }
 }
 
 .wg_navigationToc__subLink--active {
     color: var(--app-color-text-strong);
     font-weight: var(--app-font-weight-active);
-
-    &::before {
-        border-top-color: currentcolor;
-    }
 }

package/src/component/widget/navigation/_wg-navigation-toc.tsx

@@ -1,33 +1,19 @@
 import clsx from "clsx";
 import {useLayoutEffect, useState} from "hono/jsx";
 import {reading_line_slack_px} from "@/component/widget/navigation/_constant/reading-line";
-import {toNavigationBranchId} from "@/component/widget/navigation/_function/to-navigation-branch-id";
 import type {TocGroup} from "@/component/widget/navigation/_type/toc-group";
-import {WgNavigationBranchToggle} from "@/component/widget/navigation/_wg-navigation-branch-toggle";
 import {copy_nav_toc_label} from "@/constant/copy";
 import {findHashTarget} from "@/util/dom/find-hash-target";
 import "./_wg-navigation-toc.css";
 
 /**
- * 현재 문서의 목차 · 읽는 제목 한 항목과 조상 트리선 구분
+ * 현재 문서의 목차 · 읽는 제목 한 항목만 강조
  */
 export interface WgNavigationTocProps {
     /**
      * 본문 순서의 가름·절·소제목
      */
     groups: TocGroup[];
-    /**
-     * 문서별 접힘 상태의 키
-     */
-    pageId: string;
-    /**
-     * 사용자가 접은 가지
-     */
-    collapsed: Record<string, boolean>;
-    /**
-     * 브라우저에서만 제공하는 가지 변경 동작
-     */
-    onToggle?: (key: string) => void;
 }
 
 export const WgNavigationToc = (props: WgNavigationTocProps) => {
@@ -85,71 +71,44 @@ export const WgNavigationToc = (props: WgNavigationTocProps) => {
             {/**
              * 가름별 제목 이동 · 하위 제목이 현재 위치여도 부모 글씨는 강조하지 않음
              */}
-            {props.groups.map((group) => {
-                const currentIndex = group.sections.findIndex((section) => section.heading.slug === currentSlug || section.subs.some((sub) => sub.heading.slug === currentSlug));
-                const partKey = `outline:${props.pageId}:part:${group.sections[0].heading.slug}`;
-                return (
-                    <div
-                        className={clsx("wg_navigationToc__groupSection", {"wg_navigationToc__groupSection--named": group.part !== undefined})}
-                        key={group.sections[0].heading.slug}
-                    >
-                        {group.part !== undefined && <div className={clsx("wg_navigationToc__group")}>{group.part}</div>}
-                        {group.part !== undefined && <WgNavigationBranchToggle branchKey={partKey} label={group.part} collapsed={props.collapsed} onToggle={props.onToggle} />}
-                        <ul className={clsx("wg_navigationToc__list")} id={toNavigationBranchId(partKey)} hidden={props.collapsed[partKey] === true}>
-                            {group.sections.map((section, index) => {
-                                const currentSubIndex = section.subs.findIndex((sub) => sub.heading.slug === currentSlug);
-                                const sectionKey = `outline:${props.pageId}:heading:${section.heading.slug}`;
-                                return (
-                                    <li
-                                        className={clsx("wg_navigationToc__item", {
-                                            "wg_navigationToc__item--trail": index < currentIndex,
-                                            "wg_navigationToc__item--current": index === currentIndex,
-                                        })}
-                                        key={section.heading.slug}
-                                    >
-                                        <a
-                                            className={clsx("wg_navigationToc__link", {"wg_navigationToc__link--active": section.heading.slug === currentSlug})}
-                                            href={`#${section.heading.slug}`}
-                                            data-toc-link=""
-                                            aria-current={section.heading.slug === currentSlug ? "location" : undefined}
-                                        >
-                                            {section.heading.text}
-                                        </a>
-                                        {section.subs.length > 0 && (
-                                            <WgNavigationBranchToggle branchKey={sectionKey} label={section.heading.text} collapsed={props.collapsed} onToggle={props.onToggle} />
-                                        )}
-                                        {/**
-                                         * 조상과 이전 형제의 트리선은 연결 · 활성 링크는 한 제목만
-                                         */}
-                                        {section.subs.length > 0 && (
-                                            <ul className={clsx("wg_navigationToc__sub")} id={toNavigationBranchId(sectionKey)} hidden={props.collapsed[sectionKey] === true}>
-                                                {section.subs.map((sub, subIndex) => (
-                                                    <li
-                                                        className={clsx("wg_navigationToc__subItem", {
-                                                            "wg_navigationToc__subItem--trail": subIndex < currentSubIndex,
-                                                            "wg_navigationToc__subItem--current": subIndex === currentSubIndex,
-                                                        })}
-                                                        key={sub.heading.slug}
-                                                    >
-                                                        <a
-                                                            className={clsx("wg_navigationToc__subLink", {"wg_navigationToc__subLink--active": sub.heading.slug === currentSlug})}
-                                                            href={`#${sub.heading.slug}`}
-                                                            data-toc-sub-link=""
-                                                            aria-current={sub.heading.slug === currentSlug ? "location" : undefined}
-                                                        >
-                                                            {sub.heading.text}
-                                                        </a>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        )}
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    </div>
-                );
-            })}
+            {props.groups.map((group) => (
+                <div className={clsx("wg_navigationToc__groupSection", {"wg_navigationToc__groupSection--named": group.part !== undefined})} key={group.sections[0].heading.slug}>
+                    {group.part !== undefined && <div className={clsx("wg_navigationToc__group")}>{group.part}</div>}
+                    <ul className={clsx("wg_navigationToc__list")}>
+                        {group.sections.map((section) => (
+                            <li className={clsx("wg_navigationToc__item")} key={section.heading.slug}>
+                                <a
+                                    className={clsx("wg_navigationToc__link", {"wg_navigationToc__link--active": section.heading.slug === currentSlug})}
+                                    href={`#${section.heading.slug}`}
+                                    data-toc-link=""
+                                    aria-current={section.heading.slug === currentSlug ? "location" : undefined}
+                                >
+                                    {section.heading.text}
+                                </a>
+                                {/**
+                                 * 하위 제목 · 활성 링크는 한 제목만
+                                 */}
+                                {section.subs.length > 0 && (
+                                    <ul className={clsx("wg_navigationToc__sub")}>
+                                        {section.subs.map((sub) => (
+                                            <li className={clsx("wg_navigationToc__subItem")} key={sub.heading.slug}>
+                                                <a
+                                                    className={clsx("wg_navigationToc__subLink", {"wg_navigationToc__subLink--active": sub.heading.slug === currentSlug})}
+                                                    href={`#${sub.heading.slug}`}
+                                                    data-toc-sub-link=""
+                                                    aria-current={sub.heading.slug === currentSlug ? "location" : undefined}
+                                                >
+                                                    {sub.heading.text}
+                                                </a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
         </nav>
     );
 };

package/src/component/widget/navigation/wg-navigation.tsx

@@ -10,10 +10,9 @@ import {WgNavigationScroll} from "@/component/widget/navigation/_wg-navigation-s
 import {WgNavigationToc} from "@/component/widget/navigation/_wg-navigation-toc";
 import {copy_nav_close, copy_nav_open, copy_nav_title} from "@/constant/copy";
 import type {createNavigationStores} from "@/store/navigation/create-navigation-stores";
-import type {NavigationLayout, NavigationPosition, NavigationTreeState} from "@/store/navigation/navigation-state";
-import {navigation_scroll_storage_key, navigation_storage_version, navigation_tree_storage_key} from "@/store/navigation/navigation-storage";
+import type {NavigationLayout, NavigationPosition} from "@/store/navigation/navigation-state";
+import {navigation_scroll_storage_key, navigation_storage_version} from "@/store/navigation/navigation-storage";
 import {toNavigationScrollState} from "@/store/navigation/to-navigation-scroll-state";
-import {useNavigationTreeStore} from "@/store/navigation/use-navigation-tree-store";
 import {revealHashTarget} from "@/util/dom/reveal-hash-target";
 import "./wg-navigation.css";
 
@@ -32,7 +31,6 @@ export interface WgNavigationProps {
 }
 
 export const WgNavigation = (props: WgNavigationProps) => {
-    const navigationTreeStore = useNavigationTreeStore(props.stores?.tree);
     const [layout, setLayout] = useState<NavigationLayout>(() => {
         if (props.stores === undefined) return "desktop";
         if (matchMedia(navigation_mobile_query).matches) return "drawer";
@@ -77,7 +75,7 @@ export const WgNavigation = (props: WgNavigationProps) => {
     };
 
     /**
-     * 접힘과 무관한 모든 링크의 URL·표시명으로 사이트 공통 문서 목록의 동일성 판정
+     * 모든 링크의 URL·표시명으로 사이트 공통 문서 목록의 동일성 판정
      */
     const getNavigationSignature = () => {
         const navigation = getNavigationPort();
@@ -144,13 +142,6 @@ export const WgNavigation = (props: WgNavigationProps) => {
         outlineRef.current.dispatchEvent(new Event("scroll"));
     };
 
-    /**
-     * 선택 순간의 최신 스토어로 반전 · 직접 클릭과 다른 탭의 선택을 같은 자료로 유지
-     */
-    const handleBranchToggle = (key: string) => {
-        props.stores?.tree.setState((state) => ({collapsed: {...state.collapsed, [key]: state.collapsed[key] !== true}}));
-    };
-
     /**
      * 네이티브 close가 이전 열기 이벤트보다 늦게 도착해도 새 모달을 잠금 해제하지 않음
      */
@@ -241,7 +232,6 @@ export const WgNavigation = (props: WgNavigationProps) => {
             focusRef.current = {
                 navigation: document.activeElement.closest("[data-navigation]") !== null,
                 drawer: document.activeElement === openButtonRef.current || document.activeElement.closest("[data-navigation-drawer]") !== null,
-                branch: document.activeElement.getAttribute("data-navigation-toggle"),
                 href: document.activeElement.getAttribute("href"),
             };
         }
@@ -252,42 +242,16 @@ export const WgNavigation = (props: WgNavigationProps) => {
     };
 
     /**
-     * BFCache의 이전 메모리가 다음 문서의 선택·좌표를 덮지 않도록 렌더까지 동기 갱신 후 복원
+     * BFCache의 이전 메모리가 다음 문서의 좌표를 덮지 않도록 렌더까지 동기 갱신 후 복원
      */
     const handlePageShow = (event: PageTransitionEvent) => {
         if (!event.persisted || props.stores === undefined) return;
         restorePendingRef.current = true;
-        flushSync(() => {
-            props.stores?.tree.persist.rehydrate();
-            props.stores?.scroll.persist.rehydrate();
-        });
+        flushSync(() => props.stores?.scroll.persist.rehydrate());
         handleLayoutChange();
         restoreScroll();
     };
 
-    /**
-     * 같은 origin의 다른 탭에서 바꾼 접힘 선택과 저장소 초기화 반영
-     */
-    const handleStorageChange = (event: StorageEvent) => {
-        if (event.key === navigation_tree_storage_key || event.key === null) {
-            flushSync(() => props.stores?.tree.persist.rehydrate());
-        }
-    };
-
-    /**
-     * 다른 탭·BFCache의 선택이 현재 키보드 위치를 숨기기 전에 가장 바깥 접힘 버튼으로 복원
-     */
-    const handleTreeChange = (state: NavigationTreeState) => {
-        if (!(document.activeElement instanceof HTMLElement)) return;
-        for (const button of document.querySelectorAll<HTMLButtonElement>("[data-navigation-toggle]")) {
-            const key = button.dataset.navigationToggle;
-            const controls = button.getAttribute("aria-controls");
-            if (key === undefined || controls === null || state.collapsed[key] !== true) continue;
-            const branch = document.getElementById(controls);
-            if (branch?.contains(document.activeElement)) button.focus({preventScroll: true});
-        }
-    };
-
     /**
      * Hono 탐색이 전역 구독의 설치·정리를 소유 · 서버 렌더에서는 실행하지 않음
      */
@@ -299,8 +263,6 @@ export const WgNavigation = (props: WgNavigationProps) => {
         wideRef.current.addEventListener("change", handleLayoutChange);
         addEventListener("pagehide", saveScroll);
         addEventListener("pageshow", handlePageShow);
-        addEventListener("storage", handleStorageChange);
-        const unsubscribeTree = props.stores.tree.subscribe(handleTreeChange);
         return () => {
             mobileRef.current?.removeEventListener("change", handleLayoutChange);
             wideRef.current?.removeEventListener("change", handleLayoutChange);
@@ -308,8 +270,6 @@ export const WgNavigation = (props: WgNavigationProps) => {
             wideRef.current = null;
             removeEventListener("pagehide", saveScroll);
             removeEventListener("pageshow", handlePageShow);
-            removeEventListener("storage", handleStorageChange);
-            unsubscribeTree();
             document.body.classList.remove("wg_shell__root--drawerOpen");
         };
     }, [props.stores]);
@@ -328,12 +288,8 @@ export const WgNavigation = (props: WgNavigationProps) => {
             if (layout === "drawer") {
                 if (focusRef.current.navigation) openButtonRef.current?.focus({preventScroll: true});
             } else if (focusRef.current.navigation && navigation !== null) {
-                const target = [...navigation.querySelectorAll<HTMLElement>("a[href], button")].find((element) => {
-                    if (focusRef.current === null) return false;
-                    return focusRef.current.branch !== null
-                        ? element.getAttribute("data-navigation-toggle") === focusRef.current.branch
-                        : focusRef.current.href !== null && element.getAttribute("href") === focusRef.current.href;
-                });
+                const href = focusRef.current.href;
+                const target = [...navigation.querySelectorAll<HTMLElement>("a[href]")].find((element) => element.getAttribute("href") === href);
                 target?.focus({preventScroll: true});
             } else if (focusRef.current.drawer) {
                 brandRef.current?.focus({preventScroll: true});
@@ -393,11 +349,7 @@ export const WgNavigation = (props: WgNavigationProps) => {
                 {layout !== "drawer" && (
                     <div ref={props.stores === undefined ? undefined : navigationRef} className={clsx("wg_navigation__navigation")} data-navigation="">
                         <WgNavigationScroll portRef={documentsRef} kind="documents" ready={props.stores !== undefined} onScroll={saveScroll} onClick={handleNavigationClick}>
-                            <WgNavigationNav
-                                groups={props.data.groups}
-                                collapsed={navigationTreeStore.collapsed}
-                                onToggle={props.stores === undefined ? undefined : handleBranchToggle}
-                            />
+                            <WgNavigationNav groups={props.data.groups} />
                         </WgNavigationScroll>
                     </div>
                 )}
@@ -408,14 +360,7 @@ export const WgNavigation = (props: WgNavigationProps) => {
             <aside className={clsx("wg_navigation__tocRail")} data-navigation-rail="">
                 <div className={clsx("wg_navigation__outline")} data-navigation-outline="">
                     <WgNavigationScroll portRef={outlineRef} kind="outline" ready={props.stores !== undefined} onScroll={saveScroll} onClick={handleNavigationClick}>
-                        {props.data.outline.length > 0 && (
-                            <WgNavigationToc
-                                groups={props.data.outline}
-                                pageId={props.data.pageId}
-                                collapsed={navigationTreeStore.collapsed}
-                                onToggle={props.stores === undefined ? undefined : handleBranchToggle}
-                            />
-                        )}
+                        {props.data.outline.length > 0 && <WgNavigationToc groups={props.data.outline} />}
                     </WgNavigationScroll>
                 </div>
             </aside>
@@ -464,11 +409,7 @@ export const WgNavigation = (props: WgNavigationProps) => {
                                 onScroll={saveScroll}
                                 onClick={handleNavigationClick}
                             >
-                                <WgNavigationNav
-                                    groups={props.data.groups}
-                                    collapsed={navigationTreeStore.collapsed}
-                                    onToggle={props.stores === undefined ? undefined : handleBranchToggle}
-                                />
+                                <WgNavigationNav groups={props.data.groups} />
                             </WgNavigationScroll>
                         </div>
                     )}

package/src/component/widget/prose/wg-prose.css

@@ -130,7 +130,6 @@
         margin: 4px 0 0;
     }
 
-    /* JetBrains Mono 합자 비활성 · >=, != 원문 구분 */
     & code {
         padding: 1px 3px;
         border-radius: var(--app-radius-inline);
@@ -138,7 +137,6 @@
         color: var(--app-color-text-strong);
         font-family: var(--app-font-mono);
         font-size: 1em;
-        font-variant-ligatures: none;
     }
 
     /* 코드 블록 · Shiki의 --app-code-* 참조 */
@@ -151,7 +149,6 @@
         background: var(--app-color-code);
         font-family: var(--app-font-mono);
         font-size: var(--app-font-size-detail);
-        font-variant-ligatures: none;
         line-height: var(--app-line-height-code);
     }
 

package/src/component/widget/shell/wg-shell.css

@@ -12,7 +12,7 @@
         );
     background: var(--app-color-ground);
     color: var(--app-color-text);
-    font-family: var(--app-font-sans);
+    font-family: var(--app-font-mono);
     font-size: var(--app-font-size-body);
     line-height: var(--app-line-height-body);
 

package/src/constant/copy.ts

@@ -47,11 +47,6 @@ export const copy_error_home_clash = "홈 README가 겹친다";
  */
 export const copy_error_prefix = "for-humanity";
 
-/**
- * 내장 본문 글꼴의 공통 조각이 누락된 패키지 오류
- */
-export const copy_error_font_preload = "Missing bundled font for preload";
-
 /**
  * 미지원 명령 오류
  */