@kamishibai/sdk 0.1.1

package/templates/kami/one-page/styles.css

@@ -0,0 +1,375 @@
+:root {
+  --paper: #14161c;
+  --surface: #faf9f5;
+  --surface-alt: #f2efe6;
+  --accent: #1B365D;
+  --accent-soft: #dbe2ec;
+  --rule: #ddd9cc;
+  --text-primary: #23201a;
+  --text-secondary: #5c574c;
+  --text-muted: #8a8371;
+  --code-bg: #efece1;
+  --warn: #8a5a12;
+  /* Page geometry is the `one-page` layout's logical screen, shipped on the
+     markup as data-ksb-canvas (src/layouts/one-page.js). Not restated here: a
+     second copy of a size is a copy free to drift from the one that decides
+     anything. Comments in this file are ASCII on purpose -- every distinct
+     character in a stylesheet pulls a font subset into every artifact. */
+  /* ksb:maxWidth --max-width */
+  /* ksb:measure --measure */
+  /* Declared means embedded (CONTRACT A4): only families that really ship with
+     the artifact are named here; the rest fall back to generic keywords. */
+  --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: 18px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The site: a scrollable sequence of screens. Its width is not capped here --
+   a screen carries its own fixed logical width inline, so a narrower window
+   scrolls sideways rather than squeezing a canvas that is not allowed to
+   reflow. */
+.one-page {
+  margin: 0 auto;
+  overflow-x: auto;
+}
+
+/* One screen *is* the bounded canvas: its size arrives inline and the
+   skeleton's scale-to-fit asset scales it (src/render/scale-to-fit.client.js).
+   Only the skin lives here. Content is centred vertically, because a screen is
+   a fixed frame rather than a column that grows. */
+.screen {
+  margin: 0 auto;
+  padding: 76px 88px;
+  background: var(--surface);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Alternating tone, so scrolling past a screen boundary is visible even when
+   two neighbours happen to start with the same kind of block. */
+.screen:nth-child(even) {
+  background: var(--surface-alt);
+}
+
+/* Content region: capped by the page width and centred. A screen that let type
+   run the full canvas would have no margin at all. */
+.screen-inner {
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  overflow-y: auto;
+  max-height: 100%;
+}
+
+/* Running text keeps the measure even though the screen is far wider: the page
+   and the column are two numbers (CONTRACT C3). */
+.prose,
+.list,
+.quote,
+.callout {
+  max-width: var(--measure);
+}
+
+.masthead {
+  border-bottom: 2px solid var(--accent);
+  padding-bottom: 24px;
+  margin-bottom: 32px;
+}
+
+.masthead .kicker {
+  font-size: 13px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 12px;
+}
+
+.masthead .doc-title {
+  font-size: 52px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.masthead .byline {
+  margin: 16px 0 0;
+  font-size: 15px;
+  color: var(--text-secondary);
+}
+
+/* A screen holds exactly one chapter, so the section gives up its outer margins
+   and keeps only its inner rhythm. */
+.screen-inner > .section {
+  margin: 0;
+}
+
+.section {
+  margin: 0 0 24px;
+}
+
+.section > .section-title {
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1.3;
+}
+
+.section-l1 > .section-title,
+.section-l2 > .section-title {
+  font-size: 40px;
+  margin: 0 0 28px;
+}
+
+.section .section-l2 > .section-title,
+.section .section-l3 > .section-title {
+  font-size: 24px;
+  margin: 32px 0 12px;
+}
+
+.section-l4 > .section-title,
+.section-l5 > .section-title,
+.section-l6 > .section-title {
+  font-size: 19px;
+  margin: 24px 0 10px;
+  color: var(--text-primary);
+}
+
+.prose {
+  margin: 0 0 16px;
+}
+
+.prose:last-child {
+  margin-bottom: 0;
+}
+
+.prose a {
+  color: var(--accent);
+  text-underline-offset: 3px;
+}
+
+/* Lists arrive two ways -- a list block, and list markup pushed into prose by a
+   raw island -- and both get the same rules, or the same source would look
+   different depending on which door it came through. */
+.prose ul,
+.prose ol,
+.list {
+  margin: 0 0 16px;
+  padding-left: 1.4em;
+}
+
+.prose li,
+.list li {
+  margin: 0 0 8px;
+}
+
+.prose li:last-child,
+.list li:last-child {
+  margin-bottom: 0;
+}
+
+.prose li::marker,
+.list li::marker {
+  color: var(--text-muted);
+}
+
+.list .list {
+  margin: 8px 0 0;
+}
+
+.list li > .prose {
+  margin: 0;
+}
+
+.list li > .prose + * {
+  margin-top: 8px;
+}
+
+.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 18px;
+  padding: 4px 0 4px 18px;
+  border-left: 3px solid var(--accent-soft);
+  color: var(--text-secondary);
+}
+
+.quote > .prose:last-child {
+  margin-bottom: 0;
+}
+
+.callout {
+  margin: 0 0 18px;
+  padding: 16px 18px;
+  background: var(--code-bg);
+  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 18px;
+  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 18px;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+}
+
+.table th,
+.table td {
+  border-bottom: 1px solid var(--rule);
+  padding: 8px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.table th {
+  color: var(--accent);
+  font-weight: 700;
+  border-bottom: 2px solid var(--accent-soft);
+}
+
+.island {
+  margin: 0 0 18px;
+}
+
+/* diagram (CONTRACT D1) -- the geometry is computed by core/diagram.js and the
+   skin only colours it, with variables every Kami skin agrees on, so one spec
+   draws one picture rather than several that look alike. */
+.diagram {
+  margin: 0 0 18px;
+  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;
+}
+
+/* Outside every canvas, and deliberately so: a colophon is the one thing on a
+   site that is allowed to be small and unscaled. */
+.colophon {
+  padding: 28px;
+  font-size: 12px;
+  color: var(--text-muted);
+  letter-spacing: 0.06em;
+  text-align: center;
+}
+
+@media print {
+  body {
+    background: #fff;
+  }
+
+  /* scale-to-fit is a screen affordance. On paper (and in `export`, which asks
+     for the print form) the inline transform would shrink every screen into a
+     corner of its page. */
+  .screen {
+    transform: none !important;
+    break-inside: avoid;
+    background: #fff;
+  }
+
+  .screen:nth-child(even) {
+    background: #fff;
+  }
+
+  .colophon {
+    color: #555;
+  }
+}

package/templates/kami/resume/components.js

@@ -0,0 +1,51 @@
+import { el } from '../../../src/blocks/element.js'
+import { manifest } from './manifest.js'
+
+/**
+ * Chrome of the Kami résumé template.
+ *
+ * The shape of the artifact — the sheets, their A4 canvas, which top-level
+ * blocks join the first sheet — is the `resume` 文體'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).
+ *
+ * Both slots land **inside** a sheet — the head on the first, the foot on the
+ * last — because this 文體 is printed. Anything outside a canvas is laid onto a
+ * page of its own, so a colophon floating below the last sheet would cost every
+ * résumé an extra printed page carrying one line of small type.
+ */
+
+const TEMPLATE_LABEL = `${manifest.namespace}/${manifest.name}`
+
+/**
+ * Name, one line of positioning, and the contact line.
+ *
+ * `kicker` reads as the role someone is applying with and `author`/`date` as the
+ * contact line, exactly as they do on the other Kami skins — the same
+ * frontmatter draws in every 文體, which is what 「換皮不換文體」 promises.
+ */
+const masthead = (meta) =>
+  el('header', { class: 'masthead' }, [
+    el('h1', { class: 'doc-title' }, [meta.title]),
+    meta.kicker ? el('p', { class: 'kicker' }, [meta.kicker]) : null,
+    meta.author || meta.date
+      ? el('p', { class: 'byline' }, [[meta.author, meta.date].filter(Boolean).join(' · ')])
+      : null,
+  ])
+
+export const chrome = Object.freeze({
+  /** The top of the first sheet: who this is and how to reach them. */
+  'resume-head': (meta) => [masthead(meta)],
+
+  /**
+   * The foot of the last sheet: the engine and skin that drew it, in this
+   * template's words. Inside the canvas on purpose — see the file header.
+   */
+  'resume-foot': () => [
+    el('footer', { class: 'colophon' }, [`kamishibai · ${TEMPLATE_LABEL}@${manifest.version}`]),
+  ],
+})

package/templates/kami/resume/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 artifact belongs to the `resume` 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/resume/manifest.js

@@ -0,0 +1,65 @@
+/**
+ * Template package descriptor (SPEC §5.2 `[template]` section) — the built-in
+ * generic skin of the `resume` 文體.
+ */
+export const manifest = Object.freeze({
+  namespace: 'kami',
+  name: 'resume',
+  version: '0.1.0',
+  description: 'Kami 履歷模板 — 一張紙一塊 A4 畫布的列印優先版面',
+  language: 'zh-TW',
+  /**
+   * The 文體 this skin is a skin *of* (CONTRACT C1). The frame, the sheets, the
+   * fixed A4 canvas and the two chrome slots all come from there; this package
+   * only decides what they look like.
+   */
+  layout: 'resume',
+  /** 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.
+   */
+  blockConfig: Object.freeze({
+    callout: Object.freeze({ labels: Object.freeze({ note: 'NOTE', warn: 'WARNING' }) }),
+  }),
+  /**
+   * The applied state of the `resume` layout's geometry, in CSS pixels.
+   *
+   * The logical canvas (794×1123, one A4 sheet) is **not** here: it belongs to
+   * the 文體 and arrives with the layout. What this template supplies is the
+   * pair every 文體 has — `maxWidth` 660 is how wide the content region inside a
+   * sheet may grow (the sheet minus a printer-safe margin on each side), and
+   * `measure` 620 is the width of a line of text on paper. This is the one 文體
+   * where that number is not 740: a 740px column plus any margin at all is
+   * wider than A4 (CONTRACT C3 is about keeping the two numbers apart, not
+   * about the value of either).
+   *
+   * `styles.css` holds neither number; it declares where they go and the render
+   * layer writes them in (`src/render/styles.js`).
+   */
+  maxWidth: 660,
+  measure: 620,
+})
+
+export const templateKey = `${manifest.namespace}/${manifest.name}`