for-humanity 0.12.0 → 0.13.1

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

@@ -1,484 +0,0 @@
-/*
- * Markdown 본문과 생성 부품의 표현
- * 요소 선택자는 소유 root 안에 한정
- */
-.wg_prose__root {
-    /* stylelint-disable selector-disallowed-list -- Markdown 생성 태그 영역 */
-    & h1 {
-        margin: 0 0 var(--app-space-stack);
-        color: var(--app-color-text-strong);
-        font-size: var(--app-font-size-title);
-        font-weight: var(--app-font-weight-title);
-        line-height: var(--app-line-height-title);
-        letter-spacing: var(--app-letter-spacing-title);
-        text-wrap: balance;
-
-        /* 문서 탐색 라벨과 같은 글자 위쪽 기준 · 글꼴 크기별 내부 여백 제거 */
-        text-box: trim-start cap alphabetic;
-    }
-
-    & p {
-        margin: 0 0 var(--app-space-stack);
-    }
-
-    & img {
-        max-width: 100%;
-        height: auto;
-        vertical-align: middle;
-    }
-
-    /* 제목 아래 첫 문단 · 소개 크기 */
-    & h1 + p {
-        font-size: var(--app-font-size-lead);
-    }
-
-    & h2 {
-        margin: var(--app-space-section) 0 var(--app-space-stack);
-        padding-top: var(--app-space-group);
-        border-top: 1px solid var(--app-color-border);
-        color: var(--app-color-text-strong);
-        font-size: var(--app-font-size-section);
-        font-weight: var(--app-font-weight-strong);
-        line-height: var(--app-line-height-heading);
-        letter-spacing: var(--app-letter-spacing-heading);
-        text-wrap: balance;
-        scroll-margin-top: var(--app-space-anchor);
-    }
-
-    /* 머리 아래 첫 절의 중복 구분선 제거 */
-    & .wg_prose__head + h2 {
-        margin-top: var(--app-space-group);
-        padding-top: 0;
-        border-top: 0;
-    }
-
-    /* 가름 아래 절의 중복 구분선 제거 */
-    & .wg_prose__part + h2 {
-        margin-top: var(--app-space-block);
-        padding-top: 0;
-        border-top: 0;
-    }
-
-    & h3 {
-        margin: var(--app-space-subsection) 0 var(--app-space-inline);
-        color: var(--app-color-text-strong);
-        font-size: var(--app-font-size-lead);
-        font-weight: var(--app-font-weight-strong);
-        line-height: var(--app-line-height-tight);
-        scroll-margin-top: var(--app-space-anchor);
-    }
-
-    & h4 {
-        margin: var(--app-space-group) 0 6px;
-        color: var(--app-color-text-strong);
-        font-size: var(--app-font-size-body);
-        font-weight: var(--app-font-weight-strong);
-    }
-
-    & h5 {
-        margin: var(--app-space-block) 0 6px;
-        color: var(--app-color-text-muted);
-        font-size: var(--app-font-size-dense);
-        font-weight: var(--app-font-weight-strong);
-    }
-
-    & a {
-        color: var(--app-color-link);
-        text-decoration: none;
-        text-underline-offset: 2px;
-    }
-
-    & a:visited {
-        color: var(--app-color-link-visited);
-    }
-
-    & a:hover {
-        color: var(--app-color-link-hover);
-        text-decoration: underline;
-    }
-
-    & a:focus-visible {
-        border-radius: var(--app-radius-mark);
-        outline: var(--app-outline-focus);
-        outline-offset: var(--app-outline-focus-offset);
-    }
-
-    & strong {
-        color: var(--app-color-text-strong);
-        font-weight: var(--app-font-weight-strong);
-    }
-
-    & ul {
-        margin: 0 0 var(--app-space-stack);
-        padding-left: 20px;
-    }
-
-    & ol {
-        margin: 0 0 var(--app-space-stack);
-        padding-left: 22px;
-    }
-
-    & li {
-        margin-bottom: 4px;
-    }
-
-    & li > ul {
-        margin: 4px 0 0;
-    }
-
-    & li > ol {
-        margin: 4px 0 0;
-    }
-
-    & code {
-        padding: 1px 3px;
-        border-radius: var(--app-radius-inline);
-        background: var(--app-color-code);
-        color: var(--app-color-text-strong);
-
-        /* UA monospace 대신 부모 글꼴 · 문단은 본문 정책, 코드 블록은 pre의 고정폭·자간 0 */
-        font-family: inherit;
-        font-size: 1em;
-    }
-
-    /* 코드 블록 · Shiki의 --app-code-* 참조 */
-    & pre {
-        overflow-x: auto;
-        margin: var(--app-space-block) 0;
-        padding: var(--app-space-stack) var(--app-space-block);
-        border: 1px solid var(--app-color-border);
-        border-radius: var(--app-radius-box);
-        background: var(--app-color-code);
-        font-family: var(--app-font-mono);
-        font-size: var(--app-font-size-detail);
-        line-height: var(--app-line-height-code);
-        letter-spacing: 0;
-
-        /* 탭 들여쓰기 코드 · 브라우저 기본 8칸은 좁은 본문에서 너무 넓음 */
-        tab-size: 4;
-    }
-
-    & pre code {
-        padding: 0;
-        background: none;
-        color: inherit;
-        font-size: inherit;
-    }
-
-    /* 인용과 첫머리 안내 */
-    & blockquote {
-        margin: var(--app-space-block) 0;
-        padding: 0 0 0 var(--app-space-block);
-        border-left: 1px solid var(--app-color-border);
-    }
-
-    & blockquote > :last-child {
-        margin-bottom: 0;
-    }
-
-    /* 표 · 코드 상자와 같은 선 색으로 바깥 선과 칸 선 · 머리 행은 바탕 */
-    & table {
-        width: 100%;
-        border: 1px solid var(--app-color-border);
-        border-collapse: collapse;
-        font-size: var(--app-font-size-dense);
-        font-variant-numeric: tabular-nums;
-    }
-
-    & th {
-        padding: var(--app-space-inline) var(--app-space-stack);
-        border: 1px solid var(--app-color-border);
-        background: var(--app-color-code);
-        color: var(--app-color-text-strong);
-        font-weight: var(--app-font-weight-strong);
-        text-align: left;
-        vertical-align: bottom;
-        white-space: nowrap;
-    }
-
-    & td {
-        padding: var(--app-space-inline) var(--app-space-stack);
-        border: 1px solid var(--app-color-border);
-        text-align: left;
-        vertical-align: top;
-    }
-
-    /* 표의 읽는 행 표시 */
-    & tbody tr:hover td {
-        background: var(--app-color-accent-soft);
-    }
-
-    & hr {
-        margin: var(--app-space-section) 0;
-        border: 0;
-        border-top: 1px dotted var(--app-color-border);
-    }
-
-    /* stylelint-disable selector-class-pattern -- Shiki 가 만드는 line·highlighted·diff 클래스 */
-
-    /* 코드 줄 · 바탕을 상자 가로 전체로 · 표기 없는 줄은 보이는 차이 없음 */
-    & pre code .line {
-        display: inline-block;
-        width: calc(100% + 2 * var(--app-space-block));
-        margin: 0 calc(-1 * var(--app-space-block));
-        padding: 0 var(--app-space-block);
-    }
-
-    & pre code .line.highlighted {
-        background: var(--app-color-accent-soft);
-    }
-
-    & pre code .line.highlighted.error {
-        background: var(--app-color-bad-soft);
-    }
-
-    & pre code .line.highlighted.warning {
-        background: var(--app-color-warn-soft);
-    }
-
-    & pre code .line.diff.add {
-        background: var(--app-color-good-soft);
-    }
-
-    & pre code .line.diff.remove {
-        background: var(--app-color-bad-soft);
-        opacity: 0.8;
-    }
-
-    /* 색 블록 위의 줄 표기 · 바탕보다 한 단계 진하게 */
-    & pre.wg_prose__code--bad code .line.highlighted,
-    & pre.wg_prose__code--bad code .line.highlighted.error,
-    & pre.wg_prose__code--bad code .line.diff.remove {
-        background: var(--app-color-bad-mark);
-    }
-
-    & pre.wg_prose__code--good code .line.highlighted,
-    & pre.wg_prose__code--good code .line.diff.add {
-        background: var(--app-color-good-mark);
-    }
-
-    & pre code .highlighted-word {
-        padding: 0 2px;
-        border-radius: var(--app-radius-inline);
-        background: var(--app-color-accent-soft);
-    }
-
-    /* 파일 이름 띠 · 펜스 메타 [파일 이름] · 코드 상자와 한 몸, 여백은 figure 가 맡음 */
-    & .wg_prose__codeFile {
-        margin: var(--app-space-block) 0;
-    }
-
-    & .wg_prose__codeFile pre {
-        margin: 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    & .wg_prose__codeFileTitle {
-        display: flex;
-        gap: var(--app-space-block);
-        justify-content: space-between;
-        padding: var(--app-space-inline) var(--app-space-block);
-        border: 1px solid var(--app-color-border);
-        border-bottom: 0;
-        border-radius: var(--app-radius-box) var(--app-radius-box) 0 0;
-        background: var(--app-code-background);
-        color: var(--app-color-text-muted);
-        font-family: var(--app-font-mono);
-        font-size: var(--app-font-size-dense);
-        letter-spacing: 0;
-    }
-
-    & .wg_prose__codeFileLang {
-        text-transform: uppercase;
-    }
-
-    /* 줄 번호 · 펜스 메타 line-numbers · 복사에 섞이지 않게 content 로 */
-    & pre.wg_prose__lineNumbers code {
-        counter-reset: line;
-    }
-
-    & pre.wg_prose__lineNumbers code .line::before {
-        display: inline-block;
-        width: 2em;
-        margin-right: var(--app-space-stack);
-        color: var(--app-color-text-muted);
-        text-align: right;
-        content: counter(line);
-        counter-increment: line;
-        user-select: none;
-    }
-    /* stylelint-enable selector-class-pattern */
-    /* stylelint-enable selector-disallowed-list */
-}
-
-/* 공통 문서 머리 · 제목·소개 */
-.wg_prose__head {
-    margin-bottom: var(--app-space-inline);
-    padding-bottom: var(--app-space-block);
-    border-bottom: 1px dotted var(--app-color-border);
-
-    /* stylelint-disable-next-line selector-disallowed-list -- Markdown 생성 머리 */
-    & > :last-child {
-        margin-bottom: 0;
-    }
-
-    /* stylelint-disable selector-disallowed-list -- README의 가운데 정렬 HTML 소개 */
-    & [align="center"] {
-        padding: var(--app-space-group) 0;
-        text-align: center;
-    }
-
-    & [align="center"] > h1 {
-        margin-block: var(--app-space-group);
-        font-size: 24px;
-    }
-
-    & [align="center"] > p {
-        margin-bottom: var(--app-space-block);
-    }
-
-    & [align="center"] > img {
-        width: 72px;
-        image-rendering: pixelated;
-    }
-    /* stylelint-enable selector-disallowed-list */
-}
-
-/* 제목 글자만 강조 · 여러 줄에서도 각 줄을 칠하고 문서 배치는 유지 */
-.wg_prose__headingText {
-    box-decoration-break: clone;
-
-    /* 줄바꿈된 글자 뒤의 바탕은 opacity 레이어로 분리할 수 없어 배경색만 전환 */
-    transition: background-color var(--app-motion-duration-highlight-fade) var(--app-motion-easing-out);
-}
-
-.wg_prose__headingText--highlighted {
-    background-color: var(--app-color-anchor-highlight);
-    transition: none;
-}
-
-/* ::part 가름의 공통 표현 */
-.wg_prose__part {
-    margin-top: var(--app-space-section);
-    padding-top: var(--app-space-stack);
-    border-top: 1px dotted var(--app-color-border);
-    color: var(--app-color-text-strong);
-    font-size: var(--app-font-size-part);
-    font-weight: var(--app-font-weight-strong);
-    line-height: var(--app-line-height-heading);
-    letter-spacing: var(--app-letter-spacing-heading);
-}
-
-/* 넓은 표의 내부 가로 스크롤 */
-.wg_prose__table {
-    overflow-x: auto;
-    margin: var(--app-space-block) 0;
-}
-
-/* 상태 표지 · 확인 초록, 미확인 amber */
-.wg_prose__pill {
-    display: inline-block;
-    padding: 0 5px;
-    border-radius: var(--app-radius-inline);
-    font-size: var(--app-font-size-detail);
-    font-weight: var(--app-font-weight-strong);
-    line-height: 1.6;
-    white-space: nowrap;
-}
-
-.wg_prose__pill--verified {
-    background: var(--app-color-verified-soft);
-    color: var(--app-color-verified);
-}
-
-.wg_prose__pill--unverified {
-    background: var(--app-color-unverified-soft);
-    color: var(--app-color-unverified);
-}
-
-/* 인라인 hex 색 칩 · remark-swatch의 CSS 변수 */
-.wg_prose__color {
-    /* 색 칩과 값 사이 줄바꿈 방지 */
-    white-space: nowrap;
-
-    &::before {
-        display: inline-block;
-        width: 0.8em;
-        height: 0.8em;
-        margin-right: 5px;
-        border: 1px solid var(--app-color-border);
-        border-radius: var(--app-radius-mark);
-        background: var(--wg-prose-chip-color, transparent);
-        content: "";
-        vertical-align: -0.05em;
-    }
-}
-
-/* 빌드 시 생성한 격자 SVG 흐름도 */
-.wg_prose__flow {
-    overflow-x: auto;
-    margin: var(--app-space-block) 0;
-    padding: var(--app-space-block);
-    border: 1px solid var(--app-color-border);
-    border-radius: var(--app-radius-box);
-
-    /* 라벨 위치는 자간 0의 격자로 계산 */
-    letter-spacing: 0;
-
-    /* stylelint-disable-next-line selector-disallowed-list -- 외부 렌더러 생성 SVG */
-    & svg {
-        display: block;
-        max-width: 100%;
-        height: auto;
-        margin: 0 auto;
-    }
-}
-
-/* 보충 설명 · 본문과 분리되는 제목·왼쪽 선 */
-.wg_prose__note {
-    margin: var(--app-space-block) 0;
-    padding-left: var(--app-space-block);
-    border-left: 2px solid var(--app-color-border);
-
-    & > :last-child {
-        margin-bottom: 0;
-    }
-}
-
-.wg_prose__noteTitle {
-    display: block;
-    margin-bottom: var(--app-space-inline);
-    color: var(--app-color-text-strong);
-    font-weight: var(--app-font-weight-strong);
-}
-
-/* 구현 상세 · 펼침 상태와 marker는 native Details 소유 */
-.wg_prose__details {
-    margin: var(--app-space-block) 0;
-    padding-bottom: var(--app-space-stack);
-    border-top: 1px dotted var(--app-color-border);
-    border-bottom: 1px dotted var(--app-color-border);
-
-    & > :last-child {
-        margin-bottom: 0;
-    }
-}
-
-.wg_prose__detailsSummary {
-    padding: var(--app-space-inline) 0;
-    color: var(--app-color-link);
-    font-weight: var(--app-font-weight-strong);
-    cursor: pointer;
-
-    &:hover {
-        color: var(--app-color-link-hover);
-        text-decoration: underline;
-        text-underline-offset: 2px;
-    }
-
-    &:focus-visible {
-        outline: var(--app-outline-focus);
-        outline-offset: var(--app-outline-focus-offset);
-    }
-}

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

@@ -1,43 +0,0 @@
-import clsx from "clsx";
-import "./wg-prose.css";
-
-/**
- * Markdown HTML과 본문 부품의 공통 표현 입력
- * remark·rehype 플러그인은 _function 소유
- */
-export interface WgProseProps {
-    /**
-     * 머리를 포함한 렌더링 완료 HTML
-     */
-    html?: string;
-    /**
-     * README가 없을 때의 안내 머리
-     */
-    head?: {
-        /**
-         * 문서 h1 제목
-         */
-        title: string;
-        /**
-         * 제목 아래 소개 · 선택
-         */
-        lead?: string;
-    };
-}
-
-export const WgProse = (props: WgProseProps) => {
-    if (props.html !== undefined) {
-        return <article className={clsx("wg_prose__root")} dangerouslySetInnerHTML={{__html: props.html}} />;
-    }
-
-    return (
-        <article className={clsx("wg_prose__root")}>
-            {props.head !== undefined && (
-                <header className={clsx("wg_prose__head")}>
-                    <h1>{props.head.title}</h1>
-                    {props.head.lead !== undefined && <p>{props.head.lead}</p>}
-                </header>
-            )}
-        </article>
-    );
-};

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

@@ -1,63 +0,0 @@
-/*
- * 넓은 화면은 같은 폭의 양쪽 탐색 사이를 본문이 채움 · 좁은 화면은 문서 탐색만 표시
- */
-.wg_shell__root {
-    display: grid;
-    max-width: var(--app-size-page);
-    margin: 0 auto;
-    padding: 0 var(--app-space-gutter);
-    grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, 1fr) calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap));
-    background: var(--app-color-ground);
-    color: var(--app-color-text);
-    font-family: var(--app-font-body);
-    font-size: var(--app-font-size-body);
-    line-height: var(--app-line-height-body);
-    letter-spacing: var(--app-letter-spacing-body);
-
-    /* 한국어 낱말 단위 줄바꿈 · 긴 식별자만 예외 */
-    word-break: keep-all;
-    overflow-wrap: break-word;
-    text-wrap: pretty;
-    -webkit-font-smoothing: antialiased;
-}
-
-.wg_shell__root--drawerOpen {
-    overflow: hidden;
-}
-
-.wg_shell__browserRoot {
-    /* 브라우저 셸의 마운트 경계 · 자식은 body의 기존 grid에 참여 */
-    display: contents;
-}
-
-.wg_shell__main {
-    grid-area: main;
-    min-width: 0;
-    border-inline: 1px solid var(--app-color-border-layout);
-
-    /* 문서 목록의 시작선 · 마지막 절도 읽는 선까지 이동 가능한 끝 여백 */
-    padding-block: var(--app-size-brand) calc(100vh - var(--app-space-anchor));
-    padding-inline: var(--app-space-column);
-}
-
-/* 본문 최소 약 800px을 남기도록 목차 숨김 · 본문이 오른쪽 여백까지 채움 */
-@media (width < 1360px) {
-    .wg_shell__root {
-        grid-template: "nav main" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, 1fr);
-    }
-}
-
-/* 모바일의 브랜드·본문은 한 열 배치 */
-@media (width < 1024px) {
-    .wg_shell__root {
-        grid-template:
-            "nav" auto
-            "main" 1fr / minmax(0, 1fr);
-    }
-
-    .wg_shell__main {
-        padding-block-start: var(--app-space-page-top);
-        padding-inline: 0;
-        border-inline: 0;
-    }
-}

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

@@ -1,88 +0,0 @@
-import clsx from "clsx";
-import type {Child} from "hono/jsx";
-import {toNavigationData} from "@/component/widget/navigation/_function/to-navigation-data/to-navigation-data";
-import {toNavigationJson} from "@/component/widget/navigation/_function/to-navigation-json";
-import {WgShellControls} from "@/component/widget/shell-controls/wg-shell-controls";
-import {asset_favicon_path} from "@/constant/asset";
-import type {Doc} from "@/type/doc";
-import type {DocOutline} from "@/type/doc-outline";
-import type {SiteAssets} from "@/type/site-assets";
-import type {SiteConfig} from "@/type/site-config";
-import "@/style/base.css";
-import "@/style/token.css";
-import "./wg-shell.css";
-
-/**
- * 공통 HTML 틀의 입력 · 문서 탐색·현재 목차·본문
- */
-export interface WgShellProps {
-    /**
-     * 사이트 이름 · 탭과 사이드바
-     */
-    site: SiteConfig;
-    /**
-     * 사이드바 전체 문서 목록
-     */
-    docs: Doc[];
-    /**
-     * HTML 머리의 글꼴·dev 스크립트
-     */
-    assets: SiteAssets;
-    /**
-     * 탭 제목의 문서 이름 · 첫 화면 생략
-     */
-    title?: string;
-    /**
-     * 현재 문서 id · 첫 화면 생략
-     */
-    current?: string;
-    /**
-     * 현재 문서 또는 README 홈의 목차
-     */
-    outline?: DocOutline;
-    /**
-     * 현재 페이지 본문
-     */
-    children: Child;
-}
-
-export const WgShell = (props: WgShellProps) => {
-    const navigationData = toNavigationData({site: props.site, docs: props.docs, current: props.current, outline: props.outline});
-
-    return (
-        <html lang="ko">
-            {/**
-             * 공통 자원 · 브라우저 동작은 WgShellControls의 생명주기에서 연결
-             */}
-            <head>
-                <meta charSet="utf-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                {props.site.description !== undefined && <meta name="description" content={props.site.description} />}
-                <title>{props.title === undefined ? props.site.title : `${props.title} · ${props.site.title}`}</title>
-                <link rel="icon" href={asset_favicon_path} type="image/svg+xml" />
-                <style dangerouslySetInnerHTML={{__html: props.assets.fontCss}} />
-                {props.assets.preload.map((href) => (
-                    <link key={href} rel="preload" href={href} as="font" type="font/woff2" crossOrigin="" />
-                ))}
-                <link rel="stylesheet" href={props.assets.stylePath} />
-            </head>
-            {/**
-             * 문서 탐색·현재 목차·본문 · 브라우저 동작 연결
-             */}
-            <body className={clsx("wg_shell__root")}>
-                {/**
-                 * 서버·브라우저의 공통 셸 조립 · 본문 HTML은 마운트 범위에서 제외
-                 */}
-                <div className={clsx("wg_shell__browserRoot")} data-shell-browser-root="" data-shell-reload={props.assets.reload ? "" : undefined}>
-                    <WgShellControls data={navigationData} reload={props.assets.reload} />
-                </div>
-                {/**
-                 * 최소 탐색 자료와 단일 JSX 번들 · 본문 전 상태·스크롤 복원
-                 */}
-                <script type="application/json" id="fh-navigation-data" dangerouslySetInnerHTML={{__html: toNavigationJson(navigationData)}} />
-                <script dangerouslySetInnerHTML={{__html: props.assets.browserScript}} />
-                <main className={clsx("wg_shell__main")}>{props.children}</main>
-            </body>
-        </html>
-    );
-};

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

@@ -1,4 +0,0 @@
-.wg_shellControls__navigation {
-    /* Hono 갱신의 DOM 경계 · 탐색 자식은 기존 body grid에 참여 */
-    display: contents;
-}