for-humanity 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 0.9.1 — 2026-10-13
+
+- Draw tables with an outer border and cell borders, box flowcharts with a border, and separate sections with a solid rule and 64px of space.
+- Tint the whole code block of a `bad` or `good` label instead of relying on the caption, so a label can carry its reason as a code comment.
+
 ## 0.9.0 — 2026-10-13
 
 - Add code labels: a fence meta of `bad` or `good` with an optional title renders the code block with a colored left stripe and a caption, keeping Shiki highlighting.

package/README.md

@@ -33,7 +33,7 @@ Write Markdown. Keep the context. Share a static site.
 Node.js 22 or later and pnpm. Install the CLI in your document project:
 
 ```sh
-pnpm add -D --save-exact for-humanity@0.9.0
+pnpm add -D --save-exact for-humanity@0.9.1
 mkdir docs
 ```
 
@@ -52,7 +52,7 @@ pnpm exec for-humanity preview docs
 
 If your Markdown files are in the project root, use `.` instead of `docs`. The root `README.md` becomes the home page; root `AGENTS.md` and `CLAUDE.md` stay out of the site.
 
-Version `0.9.0` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
+Version `0.9.1` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
 Cloudflare Pages can host the generated site. See [Deployment](https://github.com/minu-ha/for-humanity/blob/main/templates/document/deployment.md) for the build settings.
 Set an optional public root `url` in the site configuration to generate `robots.txt` and `sitemap.xml`; projects without a URL emit neither file. See [Crawling](https://github.com/minu-ha/for-humanity/blob/main/templates/document/crawling.md).
 
@@ -75,7 +75,7 @@ pnpm preview    # Preview the static site
 pnpm build:pages # Add Cloudflare Pages headers and a 404 page
 ```
 
-Changes pushed to `main` update the documentation site. A stable version tag such as `v0.9.0` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
+Changes pushed to `main` update the documentation site. A stable version tag such as `v0.9.1` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
 The npm README updates with each package release. See [Maintenance](https://github.com/minu-ha/for-humanity/blob/main/templates/document/maintenance.md#packaging-and-release) for the release steps.
 
 ## Make it yours

package/dist/cli.css

@@ -23,8 +23,8 @@
   }
   & h2 {
     margin: var(--app-space-section) 0 var(--app-space-stack);
-    padding-top: var(--app-space-block);
-    border-top: 1px dotted var(--app-color-border);
+    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);
@@ -138,13 +138,15 @@
   }
   & table {
     width: 100%;
+    border: 1px solid var(--app-color-border-soft);
     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-bottom: 1px solid var(--app-color-border);
+    border: 1px solid var(--app-color-border-soft);
+    border-bottom-color: var(--app-color-border);
     background: var(--app-color-code);
     color: var(--app-color-text-strong);
     font-weight: var(--app-font-weight-strong);
@@ -154,13 +156,10 @@
   }
   & td {
     padding: var(--app-space-inline) var(--app-space-stack);
-    border-bottom: 1px solid var(--app-color-border-soft);
+    border: 1px solid var(--app-color-border-soft);
     text-align: left;
     vertical-align: top;
   }
-  & tbody tr:last-child td {
-    border-bottom: 0;
-  }
   & tbody tr:hover td {
     background: var(--app-color-accent-soft);
   }
@@ -272,7 +271,9 @@
 .wg_prose__flow {
   overflow-x: auto;
   margin: var(--app-space-block) 0;
-  padding: var(--app-space-block) 0;
+  padding: var(--app-space-block);
+  border: 1px solid var(--app-color-border-soft);
+  border-radius: var(--app-radius-box);
   letter-spacing: 0;
   & svg {
     display: block;
@@ -804,7 +805,7 @@
   --app-space-block: 14px;
   --app-space-group: 20px;
   --app-space-subsection: 28px;
-  --app-space-section: 44px;
+  --app-space-section: 64px;
   --app-space-tree-row: 0px;
   --app-space-tree-group: 16px;
   --app-space-tree-label: 2px;
@@ -856,6 +857,12 @@
     --app-space-gutter: 16px;
   }
 }
+.wg_prose__codeLabel--bad {
+  --app-code-background: var(--app-color-bad-soft);
+}
+.wg_prose__codeLabel--good {
+  --app-code-background: var(--app-color-good-soft);
+}
 
 /* src/component/widget/shell/wg-shell.css */
 .wg_shell__root {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "for-humanity",
-    "version": "0.9.0",
+    "version": "0.9.1",
     "description": "Documents written for humans to read: a docs kit with a sidebar, parts, sections and flowcharts, built on Hono JSX",
     "keywords": [
         "docs",

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

@@ -34,8 +34,8 @@
 
     & h2 {
         margin: var(--app-space-section) 0 var(--app-space-stack);
-        padding-top: var(--app-space-block);
-        border-top: 1px dotted var(--app-color-border);
+        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);
@@ -176,8 +176,10 @@
         margin-bottom: 0;
     }
 
+    /* 표 · 코드 상자처럼 바깥 선과 칸 선 · 머리 행은 바탕과 진한 밑선 */
     & table {
         width: 100%;
+        border: 1px solid var(--app-color-border-soft);
         border-collapse: collapse;
         font-size: var(--app-font-size-dense);
         font-variant-numeric: tabular-nums;
@@ -185,7 +187,8 @@
 
     & th {
         padding: var(--app-space-inline) var(--app-space-stack);
-        border-bottom: 1px solid var(--app-color-border);
+        border: 1px solid var(--app-color-border-soft);
+        border-bottom-color: var(--app-color-border);
         background: var(--app-color-code);
         color: var(--app-color-text-strong);
         font-weight: var(--app-font-weight-strong);
@@ -196,15 +199,11 @@
 
     & td {
         padding: var(--app-space-inline) var(--app-space-stack);
-        border-bottom: 1px solid var(--app-color-border-soft);
+        border: 1px solid var(--app-color-border-soft);
         text-align: left;
         vertical-align: top;
     }
 
-    & tbody tr:last-child td {
-        border-bottom: 0;
-    }
-
     /* 표의 읽는 행 표시 */
     & tbody tr:hover td {
         background: var(--app-color-accent-soft);
@@ -354,7 +353,9 @@
 .wg_prose__flow {
     overflow-x: auto;
     margin: var(--app-space-block) 0;
-    padding: var(--app-space-block) 0;
+    padding: var(--app-space-block);
+    border: 1px solid var(--app-color-border-soft);
+    border-radius: var(--app-radius-box);
 
     /* 라벨 위치는 자간 0의 격자로 계산 */
     letter-spacing: 0;

package/src/style/token.css

@@ -97,7 +97,7 @@
     --app-space-block: 14px;
     --app-space-group: 20px;
     --app-space-subsection: 28px;
-    --app-space-section: 44px;
+    --app-space-section: 64px;
 
     /* 탐색 트리 · 항목 위아래 여백·묶음 사이·묶음 라벨 아래·중첩 들여쓰기 */
     --app-space-tree-row: 0px;
@@ -171,3 +171,12 @@
         --app-space-gutter: 16px;
     }
 }
+
+/* 라벨 코드 · Shiki 가 pre 에 인라인으로 쓰는 코드 바탕을 figure 색으로 바꿈 */
+.wg_prose__codeLabel--bad {
+    --app-code-background: var(--app-color-bad-soft);
+}
+
+.wg_prose__codeLabel--good {
+    --app-code-background: var(--app-color-good-soft);
+}