@kamishibai/sdk 0.1.1

package/templates/kami/long-form/styles.css

@@ -0,0 +1,481 @@
+:root {
+  --paper: #f5f4ed;
+  --surface: #faf9f5;
+  --accent: #1B365D;
+  --accent-soft: #dbe2ec;
+  --rule: #ddd9cc;
+  --text-primary: #23201a;
+  --text-secondary: #5c574c;
+  --text-muted: #8a8371;
+  --code-bg: #efece1;
+  --warn: #8a5a12;
+  /* ksb:measure --measure */
+  /* ksb:maxWidth --max-width */
+  /* ksb:railWidth --rail-width */
+  /* Decoration, not geometry: the sum that makes --max-width work lives in
+     manifest.js (rail + gap + measure + the paper's own padding). */
+  --rail-gap: 44px;
+  /* 宣告即內嵌（CONTRACT A4）：只列真的隨產物出貨的具名字族，
+     其餘一律交給 generic 關鍵字，避免宣告一個產物裡不存在的字族。
+     等寬字族的內嵌延至 S3，故 S1 等寬僅用 generic monospace。 */
+  --serif: 'Noto Serif TC', serif;
+  --mono: monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--paper);
+  color: var(--text-primary);
+  font-family: var(--serif);
+  font-size: 17px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.paper {
+  max-width: var(--measure);
+  margin: 0 auto;
+  padding: 72px 28px 96px;
+  background: var(--surface);
+  min-height: 100vh;
+  box-shadow: 0 0 0 1px var(--rule);
+}
+
+/* The rail: the `article` layout's side region, switched on by this template's
+   manifest. An ordinary two-column page -- masthead across the top, rail beside
+   the body, colophon across the bottom -- and the tracks are the applied state
+   of the layout's knobs, so nothing here is a number this file invented. */
+.paper[data-rail] {
+  max-width: var(--max-width);
+  display: grid;
+  grid-template-columns: var(--rail-width) minmax(0, 1fr);
+  column-gap: var(--rail-gap);
+  align-items: start;
+}
+
+.paper[data-rail="end"] {
+  grid-template-columns: minmax(0, 1fr) var(--rail-width);
+}
+
+.paper[data-rail] > .masthead,
+.paper[data-rail] > .colophon {
+  grid-column: 1 / -1;
+}
+
+.paper[data-rail="end"] > .doc-rail {
+  grid-column: 2;
+}
+
+.paper[data-rail="end"] > .doc-body {
+  grid-column: 1;
+}
+
+/* An empty rail is a document with no headings under a template whose applied
+   state is "rail on". The region stays in the markup (it is the template's
+   state, not the document's) and the page simply goes back to one column --
+   collapsing it here rather than in the markup is what keeps the two answers
+   from disagreeing. */
+.doc-rail:empty {
+  display: none;
+}
+
+.paper[data-rail]:has(> .doc-rail:empty) {
+  display: block;
+  max-width: var(--measure);
+}
+
+/* Sticky, because the whole point of a rail on a long document is that it is
+   still there on page nine. It scrolls on its own once it outgrows the window. */
+.doc-rail {
+  position: sticky;
+  top: 40px;
+  align-self: start;
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.doc-toc .toc-heading {
+  margin: 0 0 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--rule);
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.doc-toc .toc-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.doc-toc .toc-list .toc-list {
+  margin: 6px 0 0;
+  padding-left: 12px;
+  border-left: 1px solid var(--rule);
+}
+
+.doc-toc .toc-item {
+  margin: 0 0 8px;
+}
+
+.doc-toc .toc-item:last-child {
+  margin-bottom: 0;
+}
+
+.doc-toc .toc-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  text-underline-offset: 3px;
+}
+
+.doc-toc .toc-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.masthead {
+  border-bottom: 2px solid var(--accent);
+  padding-bottom: 20px;
+  margin-bottom: 48px;
+}
+
+.masthead .kicker {
+  font-size: 12px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 10px;
+}
+
+.masthead .doc-title {
+  font-size: 34px;
+  line-height: 1.3;
+  font-weight: 700;
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.masthead .byline {
+  margin: 12px 0 0;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.section {
+  margin: 0 0 40px;
+}
+
+.section > .section-title {
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1.35;
+}
+
+.section-l1 > .section-title {
+  font-size: 26px;
+  margin: 56px 0 20px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.section-l2 > .section-title {
+  font-size: 21px;
+  margin: 36px 0 14px;
+}
+
+.section-l3 > .section-title,
+.section-l4 > .section-title,
+.section-l5 > .section-title,
+.section-l6 > .section-title {
+  font-size: 18px;
+  margin: 28px 0 12px;
+  color: var(--text-primary);
+}
+
+.prose {
+  margin: 0 0 18px;
+  line-height: 1.55;
+}
+
+.prose a {
+  color: var(--accent);
+  text-underline-offset: 3px;
+}
+
+/* 清單有兩種來路：list block 的 <ul|ol class="list">（S3a 起的正路），
+   以及 raw 島嶼等塞進 prose 的清單 HTML（<p> 不能包 block-level，故承載於
+   <div class="prose">）。兩者共用同一組規則——行高與段距與 .prose 一致，
+   縮排剛好讓標記懸在欄寬外緣；否則同一份語料會依來路長得不一樣。 */
+.prose ul,
+.prose ol,
+.list {
+  margin: 0 0 18px;
+  padding-left: 1.4em;
+  line-height: 1.55;
+}
+
+.prose li,
+.list li {
+  margin: 0 0 6px;
+  line-height: 1.55;
+}
+
+.prose li:last-child,
+.list li:last-child {
+  margin-bottom: 0;
+}
+
+.prose li::marker,
+.list li::marker {
+  color: var(--text-muted);
+}
+
+.prose ul ul,
+.prose ul ol,
+.prose ol ul,
+.prose ol ol,
+.list .list {
+  margin: 6px 0 0;
+}
+
+/* 項目內容是真的子 block（prose / callout / code …），各自帶著自己的段距。
+   在 li 裡那些段距會把每一項撐成一大塊，故於此收斂。 */
+.list li > .prose {
+  margin: 0;
+}
+
+.list li > .prose + * {
+  margin-top: 8px;
+}
+
+.list li > .callout,
+.list li > .quote,
+.list li > .code,
+.list li > .table-wrap,
+.list li > .island {
+  margin: 8px 0 0;
+}
+
+.prose code,
+.callout code,
+.quote code,
+.table code {
+  font-family: var(--mono);
+  font-size: 0.9em;
+  background: var(--code-bg);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+.quote {
+  margin: 0 0 22px;
+  padding: 6px 0 6px 20px;
+  border-left: 3px solid var(--accent-soft);
+  color: var(--text-secondary);
+}
+
+.quote > .prose:last-child {
+  margin-bottom: 0;
+}
+
+.callout {
+  margin: 0 0 22px;
+  padding: 16px 20px;
+  background: var(--paper);
+  border-left: 4px solid var(--accent);
+  border-radius: 2px;
+}
+
+.callout-warn {
+  border-left-color: var(--warn);
+}
+
+.callout .callout-label {
+  display: block;
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 6px;
+}
+
+.callout-warn .callout-label {
+  color: var(--warn);
+}
+
+.callout > .prose:last-child {
+  margin-bottom: 0;
+}
+
+.code {
+  margin: 0 0 22px;
+  padding: 16px 18px;
+  background: var(--code-bg);
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.code code {
+  font-family: inherit;
+}
+
+.table-wrap {
+  margin: 0 0 22px;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+}
+
+.table th,
+.table td {
+  border-bottom: 1px solid var(--rule);
+  padding: 9px 12px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.table th {
+  color: var(--accent);
+  font-weight: 700;
+  border-bottom: 2px solid var(--accent-soft);
+}
+
+/* 密集表（五欄以上，如錯字修改表的六欄 findings）：欄寬一旦被 --measure
+   均分就窄到中文一字一行。寧可撐出下界、讓 .table-wrap 橫向捲動，
+   也不要把可讀性押在欄數上。以欄數選取而非新增 class——Table 元件
+   只吐 .table-wrap / .table 兩個 hook，模板樣式不得要求 IR 多帶資訊。 */
+.table:has(thead th:nth-child(5)) {
+  min-width: 660px;
+  font-size: 14px;
+}
+
+.table:has(thead th:nth-child(5)) th,
+.table:has(thead th:nth-child(5)) td {
+  padding: 8px 10px;
+}
+
+/* 第一欄常是頁碼／編號一類的短鍵，讓它不要被長文欄拉開。 */
+.table:has(thead th:nth-child(5)) th:first-child,
+.table:has(thead th:nth-child(5)) td:first-child {
+  white-space: nowrap;
+  width: 1%;
+  color: var(--text-secondary);
+}
+
+.island {
+  margin: 0 0 22px;
+}
+
+/* diagram（CONTRACT D1）——幾何由 core/diagram.js 算出，樣式只上色。
+   這段在兩套模板中逐字相同，且只用兩邊取值一致的變數（--accent /
+   --accent-soft / --text-primary / --text-secondary），所以同一份 spec
+   在長文與簡報下畫出的是同一張圖，不是「看起來很像」的兩張。 */
+.diagram {
+  margin: 0 0 22px;
+  overflow-x: auto;
+}
+
+.diagram-svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  font-family: var(--serif);
+}
+
+.diagram-node-box {
+  fill: var(--accent-soft);
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+
+.diagram-node-label {
+  fill: var(--text-primary);
+  font-size: 15px;
+}
+
+.diagram-edge-line {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+
+.diagram-arrow {
+  fill: var(--accent);
+}
+
+.diagram-edge-label {
+  fill: var(--text-secondary);
+  font-size: 12px;
+}
+
+.colophon {
+  margin-top: 64px;
+  padding-top: 16px;
+  border-top: 1px solid var(--rule);
+  font-size: 12px;
+  color: var(--text-muted);
+  letter-spacing: 0.06em;
+}
+
+/* Narrow window: the rail steps out of the way rather than squeezing the text.
+   It is first in the DOM, so going back to one column moves it above the body --
+   a table of contents at the top of the page, which is what a phone wants.
+   The flowing 文體 stays flowing: no fixed canvas, no scaling, measure intact. */
+@media (max-width: 900px) {
+  .paper[data-rail] {
+    display: block;
+    max-width: var(--measure);
+  }
+
+  .doc-rail {
+    position: static;
+    max-height: none;
+    overflow-y: visible;
+    margin-bottom: 40px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--rule);
+  }
+}
+
+@media print {
+  body {
+    background: #fff;
+  }
+
+  .paper {
+    box-shadow: none;
+  }
+
+  /* On paper a table of contents is navigation for a device nobody is holding,
+     and its links cannot be followed. The column goes; the text keeps its
+     measure. */
+  .paper[data-rail] {
+    display: block;
+    max-width: var(--measure);
+  }
+
+  .doc-rail {
+    display: none;
+  }
+}

package/templates/kami/one-page/components.js

@@ -0,0 +1,48 @@
+import { el } from '../../../src/blocks/element.js'
+import { manifest } from './manifest.js'
+
+/**
+ * Chrome of the Kami one-page template.
+ *
+ * The shape of the page — the screens, their fixed logical canvas, which
+ * top-level blocks join the opening screen — is the `one-page` 文體's, and every
+ * template on that layout gets the same one (CONTRACT C1). What is left here is
+ * exactly this template's own business: the masthead, the colophon, and every
+ * word of them.
+ *
+ * Nothing here is a component: each slot returns the same neutral element tree a
+ * block module returns, so this file is data with a little arithmetic in it and
+ * imports no rendering library at all (CONTRACT A1).
+ *
+ * The masthead goes into `page-lead`, which the 文體 draws **inside the opening
+ * screen** rather than above the site — on a bounded 文體 anything outside a
+ * canvas is unscaled, so a masthead floating above the first screen would be the
+ * one element that ignores the window. There is deliberately no computed chrome
+ * (unlike `kami/long-form`'s table of contents): on a site you scroll, the
+ * screens are the navigation.
+ */
+
+const TEMPLATE_LABEL = `${manifest.namespace}/${manifest.name}`
+
+const masthead = (meta) =>
+  el('header', { class: 'masthead' }, [
+    meta.kicker ? el('p', { class: 'kicker' }, [meta.kicker]) : null,
+    el('h1', { class: 'doc-title' }, [meta.title]),
+    meta.author || meta.date
+      ? el('p', { class: 'byline' }, [[meta.author, meta.date].filter(Boolean).join(' · ')])
+      : null,
+  ])
+
+export const chrome = Object.freeze({
+  /** The opening screen: who wrote this and what it is called. */
+  'page-lead': (meta) => [masthead(meta)],
+
+  /**
+   * Below the last screen: the engine and skin that drew the page, in this
+   * template's words. Outside every canvas on purpose — a colophon is the one
+   * thing on a site that is allowed to be small.
+   */
+  'page-foot': () => [
+    el('footer', { class: 'colophon' }, [`kamishibai · ${TEMPLATE_LABEL}@${manifest.version}`]),
+  ],
+})

package/templates/kami/one-page/index.js

@@ -0,0 +1,27 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { manifest, templateKey } from './manifest.js'
+import { chrome } from './components.js'
+
+const STYLES_PATH = fileURLToPath(new URL('./styles.css', import.meta.url))
+
+/**
+ * Template package as consumed by the render layer.
+ *
+ * No `root`: the shape of the page belongs to the `one-page` layout this
+ * manifest names, and this package supplies only skin (`styles`), config
+ * (`manifest`) and chrome (CONTRACT C1). The scale-to-fit behaviour is not here
+ * either — it is skeleton, keyed on the bounded canvas, so a third-party skin on
+ * this 文體 inherits it and cannot decline it (`src/render/skeleton.js`).
+ */
+export default Object.freeze({
+  manifest,
+  key: templateKey,
+  chrome,
+  language: manifest.language,
+  /** Fonts subset into the artifact (SPEC §7.2 出廠字體堆疊). */
+  fonts: Object.freeze([
+    Object.freeze({ package: '@fontsource/noto-serif-tc', weights: Object.freeze(['400', '700']) }),
+  ]),
+  styles: () => readFileSync(STYLES_PATH, 'utf8'),
+})

package/templates/kami/one-page/manifest.js

@@ -0,0 +1,65 @@
+/**
+ * Template package descriptor (SPEC §5.2 `[template]` section) — the built-in
+ * generic skin of the `one-page` 文體.
+ */
+export const manifest = Object.freeze({
+  namespace: 'kami',
+  name: 'one-page',
+  version: '0.1.0',
+  description: 'Kami 一頁式模板 — 一屏一畫布的通用靜態站台版面',
+  language: 'zh-TW',
+  /**
+   * The 文體 this skin is a skin *of* (CONTRACT C1). The frame, the screens,
+   * the fixed logical canvas and the two chrome slots all come from there; this
+   * package only decides what they look like.
+   */
+  layout: 'one-page',
+  /** No required root form: this template renders whatever sits under `doc`. */
+  root: null,
+  blocks: Object.freeze([
+    'doc',
+    'section',
+    'prose',
+    'list',
+    'quote',
+    'callout',
+    'code',
+    'table',
+    'raw',
+    'diagram',
+    // F6a 四型資料 block（11 號票 P1「資料」）。五張 Kami 皮一起宣告：
+    // 詞彙表是准入規則，一張皮少宣告一種，同一份文件在它底下就會被
+    // KSB_TEMPLATE_BLOCK_UNSUPPORTED 擋掉——而那不是守門，是缺角。
+    'stat',
+    'timeline',
+    'board',
+    'graph',
+  ]),
+  /**
+   * 轉子/<型別>/config — the callout labels are *wording*, and wording is this
+   * template's answer rather than the SDK's (CONTRACT A7). Identical to the
+   * other Kami skins on purpose: they are one family, and a site that said
+   * 「注意」 while the long-form page said `NOTE` would read as two products.
+   */
+  blockConfig: Object.freeze({
+    callout: Object.freeze({ labels: Object.freeze({ note: 'NOTE', warn: 'WARNING' }) }),
+  }),
+  /**
+   * The applied state of the `one-page` layout's geometry, in CSS pixels.
+   *
+   * The logical canvas (1440×900) is **not** here: it belongs to the 文體 and
+   * arrives with the layout, exactly as the deck's 1280×720 does. What this
+   * template supplies is the pair every 文體 has — `maxWidth` 1200 is how wide
+   * the content region inside a screen may grow, and `measure` 740 is still the
+   * width of a line of text (CONTRACT C3). Collapsing them would either squeeze
+   * a full-bleed screen into a column of prose or stretch every line across the
+   * whole canvas.
+   *
+   * `styles.css` holds neither number; it declares where they go and the render
+   * layer writes them in (`src/render/styles.js`).
+   */
+  maxWidth: 1200,
+  measure: 740,
+})
+
+export const templateKey = `${manifest.namespace}/${manifest.name}`