@kadal/theme-terminal 0.0.0-stage → 0.4.3

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# @kadal/theme-terminal
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Terminal**, a theme for [Kadal Deck](https://deck.kadal.cc). A developer theme for code-heavy talks. Mono-forward: JetBrains Mono for headings, labels and code, IBM Plex Sans for reading text. Dark first (a deck starts dark unless it says `colorScheme: light`) with a light variant made to the same standard; the palette is Ayu's, so the slide and the code colours agree. Code blocks are editor windows: a bar with three lights, line numbers, a lit active line, a clear dim. Headings keep their markdown (`#`), lists use `›`, the table of contents prints like `tree`, callouts read like log lines.
+
+<p>
+  <img src="https://deck.kadal.cc/themes/terminal-light-1.webp" alt="Terminal: the cover, light" width="49%">
+  <img src="https://deck.kadal.cc/themes/terminal-dark-2.webp" alt="Terminal: a content slide, dark" width="49%">
+</p>
+
+[All 16 themes](https://deck.kadal.cc/themes/) · [Themes and backgrounds](https://deck.kadal.cc/docs/themes-and-backgrounds/) · [Writing a theme](https://deck.kadal.cc/docs/writing-a-theme/) · [Source](https://github.com/kadalcc/deck/tree/main/packages/theme-terminal)
+
+## Use it
+
+```bash
+npm install @kadal/theme-terminal
+```
+
+```yaml
+---
+theme: terminal
+themeConfig:            # all optional
+  cursor: true
+  accent: "#aad94c"
+  accentLight: "#477a0b"
+---
+```
+
+The deck plugin brings the stylesheet and the module in; nothing to import. The prebuilt shell (the hosted builder, published decks) bundles this theme already. Schemes: light and dark. Fonts: JetBrains Mono (headings and code), IBM Plex Sans (text), loaded through the theme's `config.fonts`. Code colours: Shiki's ayu-light / ayu-dark. To show it beside other themes in the theme menu (<kbd>T</kbd>), list it: `themes: [terminal, minimal]`.
+
+## themeConfig
+
+Every key arrives on the deck root as a CSS variable (`accentDark` → `--theme-accent-dark`); the theme reads them with fallbacks, so set only what you change.
+
+| key | type | default | what it does |
+| --- | --- | --- | --- |
+| `cursor` | boolean | `true` | The blinking block cursor after the cover's and the last slide's title (still under `prefers-reduced-motion` and in print). |
+| `accent` | colour | `#aad94c` | The dark scheme's prompt green. |
+| `accentLight` | colour | `#477a0b` | The light scheme's. Without it, a set `accent` is darkened for the light page. |
+
+## Layouts
+
+Every built-in layout is styled (`default`, `center`, `cover`, `intro`, `section`, `end`, `fact`, `quote`, `statement`, `full`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`), and the theme adds:
+
+| layout | what |
+| --- | --- |
+| `code` | The heading small and the code block as tall as the slide allows; a `::side::` slot puts notes in a column beside it. |
+| `shell` | The whole slide is a terminal window (`title:` names its bar, default `zsh`); the slide's markdown and code run inside it, in mono. |
+
+## Components
+
+| component | what |
+| --- | --- |
+| `<Terminal title lines prompt />` | A session, line by line: `$ ` starts a command, `# ` a comment, `! ` an error, `✓ ` a success, anything else is output. Lines come from `lines` or the children, one per line. |
+
+## Preview
+
+`preview/deck.mdx` walks through every layout and component (`theme: ../`). In this repository:
+
+```bash
+bun run --filter @kadal/theme-terminal dev       # the preview deck, live
+node tools/theme-shots.mjs terminal               # screenshots in light and dark, contrast and overflow checks
+```
+
+## Accessibility and print
+
+Body and muted text meet WCAG AA (4.5:1) on the page and on cards in every scheme the theme draws (checked by `tools/theme-shots.mjs`). Anything that moves stands still under `prefers-reduced-motion` and on a still copy; printed pages and exports drop shadows and glows.
+
+## Licence
+
+AGPL-3.0-or-later, like the engine (see LICENSE); a commercial licence is available — see [LICENSING](https://github.com/kadalcc/deck/blob/main/LICENSING.md).

package/index.tsx

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+
+import type { LayoutProps } from "@kadal/deck";
+
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Terminal's module: two layouts for live-coding talks, and a session component.
+ *
+ *   layout: code     the heading small and the code block as tall as the slide allows;
+ *                    `::side::` puts notes in a column beside it
+ *   layout: shell    the whole slide is a terminal window (`title:` names its bar, default
+ *                    "zsh"); the slide's markdown and code run inside it, in mono
+ *   <Terminal>       a session, line by line: `lines` (or children, one line each) where
+ *                    `$ ` starts a command, `# ` a comment, `! ` an error, `✓ ` a success,
+ *                    and anything else is output. `title` names the bar, `prompt` the prompt.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+const str = (v: unknown) => (typeof v === "string" && v.trim() ? v.trim() : null);
+
+function Code({ children }: LayoutProps) {
+  return <div className="deck-layout deck-layout-code">{children}</div>;
+}
+
+function Bar({ title }: { title: string }) {
+  return (
+    <div className="terminal-bar" aria-hidden="true">
+      {title}
+    </div>
+  );
+}
+
+function Shell({ children, frontmatter }: LayoutProps) {
+  const title = str(frontmatter.title) ?? "zsh";
+  return (
+    <div className="deck-layout deck-layout-shell">
+      <div className="terminal-window">
+        <Bar title={title} />
+        <div className="terminal-screen">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+/** The text of whatever MDX passed: strings, and the strings inside elements, joined. */
+function textOf(node: ReactNode): string {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  const props = (node as { props?: { children?: ReactNode } }).props;
+  return props ? textOf(props.children) : "";
+}
+
+type Kind = "command" | "comment" | "error" | "ok" | "output";
+
+function parseLine(line: string): { kind: Kind; text: string } {
+  if (line.startsWith("$ ")) return { kind: "command", text: line.slice(2) };
+  if (line.startsWith("# ")) return { kind: "comment", text: line };
+  if (line.startsWith("! ")) return { kind: "error", text: line.slice(2) };
+  if (line.startsWith("✓ ")) return { kind: "ok", text: line };
+  return { kind: "output", text: line };
+}
+
+function Terminal({
+  lines,
+  title = "zsh",
+  prompt = "❯",
+  children,
+}: {
+  lines?: string[];
+  title?: string;
+  prompt?: string;
+  children?: ReactNode;
+}) {
+  const all = lines ?? textOf(children).split("\n");
+  const shown = all
+    .map((l) => l.replace(/\s+$/, ""))
+    .filter((l, i, a) => l || (i > 0 && i < a.length - 1));
+  return (
+    <figure className="terminal-window is-inline" aria-label={`Terminal: ${title}`}>
+      <Bar title={title} />
+      <pre className="terminal-lines">
+        {shown.map((line, i) => {
+          const { kind, text } = parseLine(line);
+          return (
+            <span key={i} className={`terminal-line is-${kind}`}>
+              {kind === "command" ? <span className="terminal-prompt">{prompt} </span> : null}
+              {text || " "}
+            </span>
+          );
+        })}
+      </pre>
+    </figure>
+  );
+}
+
+export default {
+  layouts: { code: Code, shell: Shell },
+  components: { Terminal },
+};

package/package.json

@@ -1,6 +1,103 @@
 {
   "name": "@kadal/theme-terminal",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.3",
+  "description": "Terminal, a theme for Kadal Deck (@kadal/deck). A developer theme for code-heavy talks: mono-forward type, superb code blocks, dark first with a good light variant, and the matching Ayu code colours.",
+  "keywords": [
+    "kadal-theme",
+    "kadal-deck",
+    "presentation",
+    "slides",
+    "theme",
+    "developer",
+    "terminal",
+    "code",
+    "monospace"
+  ],
+  "homepage": "https://deck.kadal.cc/themes/",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/pmithunish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kadalcc/deck.git",
+    "directory": "packages/theme-terminal"
+  },
+  "bugs": {
+    "url": "https://github.com/kadalcc/deck/issues"
+  },
+  "license": "AGPL-3.0-or-later",
+  "author": "Kadal <hello@kadal.cc> (https://kadal.cc)",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "style.css",
+    "index.tsx",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./index.tsx",
+    "./style.css": "./style.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "kadal": {
+    "theme": {
+      "name": "terminal",
+      "title": "Terminal",
+      "description": "A developer theme for code-heavy talks: mono-forward type, superb code blocks, dark first with a good light variant, and the matching Ayu code colours.",
+      "colorScheme": "both",
+      "config": {
+        "transition": "fade",
+        "colorScheme": "dark",
+        "fonts": {
+          "heading": "JetBrains Mono",
+          "sans": "IBM Plex Sans",
+          "mono": "JetBrains Mono",
+          "weights": "400,500,700"
+        }
+      },
+      "themeConfig": {
+        "cursor": true
+      },
+      "shiki": {
+        "light": "ayu-light",
+        "dark": "ayu-dark"
+      },
+      "defaults": {},
+      "layouts": [
+        "code",
+        "shell"
+      ],
+      "components": [
+        "Terminal"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "kadal-deck dev -C preview",
+    "check": "kadal-deck check -C preview",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "peerDependencies": {
+    "@kadal/deck": "^0.4.3",
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@kadal/deck": "workspace:*",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
+}