@gjermundgaraba-designs/simple-rat 0.0.0-stage → 0.7.0

package/dist/src/scrolls/scrolls.d.ts

@@ -0,0 +1,19 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/** What the Mount reports: it is watching. Nothing in a Model follows it. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+    readonly CompletedWatchOverflow: {};
+}>;
+export type Message = typeof Message.Type;
+/** Whether a block is wider than its box and scrolls sideways, checked when it mounts and
+    whenever its own box changes size, as when the window resizes. A font arriving that
+    widens the text but not the box is not noticed. A block that scrolls takes keyboard focus
+    (`tabindex="0"`) so it can be scrolled without a mouse, and with a name (`maybeName`)
+    becomes a `role="region"` called "Code: <name>, scrolls sideways"; one that fits stays out
+    of the tab order. The Mount owns those attributes and takes them away when it is released. */
+export declare const WatchOverflow: Mount.MountDefinitionWithArgs<"WatchOverflow", {
+    maybeName: Schema.Option<Schema.String>;
+}, {
+    readonly _tag: "CompletedWatchOverflow";
+}>;
+//# sourceMappingURL=scrolls.d.ts.map

package/dist/src/scrolls/scrolls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrolls.d.ts","sourceRoot":"","sources":["../../../src/scrolls/scrolls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAIvC,6EAA6E;AAC7E,eAAO,MAAM,OAAO;;EAAqD,CAAC;AAC1E,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;;;;;iGAKiG;AACjG,eAAO,MAAM,aAAa;;;;EAqCxB,CAAC"}

package/dist/src/scrolls/scrolls.js

@@ -0,0 +1,49 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Effect, Option, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import * as Mount from "foldkit/mount";
+// MESSAGE
+/** What the Mount reports: it is watching. Nothing in a Model follows it. */
+export const Message = defineMessageUnion({ CompletedWatchOverflow: {} });
+// MOUNT
+/** Whether a block is wider than its box and scrolls sideways, checked when it mounts and
+    whenever its own box changes size, as when the window resizes. A font arriving that
+    widens the text but not the box is not noticed. A block that scrolls takes keyboard focus
+    (`tabindex="0"`) so it can be scrolled without a mouse, and with a name (`maybeName`)
+    becomes a `role="region"` called "Code: <name>, scrolls sideways"; one that fits stays out
+    of the tab order. The Mount owns those attributes and takes them away when it is released. */
+export const WatchOverflow = Mount.define("WatchOverflow", {
+    args: { maybeName: Schema.Option(Schema.String) },
+    messages: [Message.CompletedWatchOverflow],
+    execute: ({ element, maybeName }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Effect.acquireRelease(Effect.sync(() => {
+            const check = () => {
+                if (element.scrollWidth > element.clientWidth) {
+                    element.setAttribute("tabindex", "0");
+                    if (Option.isSome(maybeName)) {
+                        element.setAttribute("role", "region");
+                        element.setAttribute("aria-label", `Code: ${maybeName.value}, scrolls sideways`);
+                    }
+                }
+                else {
+                    clear();
+                }
+            };
+            const clear = () => {
+                element.removeAttribute("tabindex");
+                if (Option.isSome(maybeName)) {
+                    element.removeAttribute("role");
+                    element.removeAttribute("aria-label");
+                }
+            };
+            const resized = new ResizeObserver(check);
+            resized.observe(element);
+            check();
+            return __foldkitBrandViewResult((() => {
+                resized.disconnect();
+                clear();
+            }), "@gjermundgaraba-designs/simple-rat/src/scrolls/scrolls.js#anonymous~2");
+        }), (stop) => __foldkitBrandViewResult((Effect.sync(stop)), "@gjermundgaraba-designs/simple-rat/src/scrolls/scrolls.js#anonymous~4"));
+        return __foldkitBrandViewResult((Message.CompletedWatchOverflow()), "@gjermundgaraba-designs/simple-rat/src/scrolls/scrolls.js#anonymous");
+    })), "@gjermundgaraba-designs/simple-rat/src/scrolls/scrolls.js#execute"),
+});

package/dist/src/skipLink/index.d.ts

@@ -0,0 +1,2 @@
+export { view } from "./skipLink.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/skipLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/skipLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/skipLink/index.js

@@ -0,0 +1 @@
+export { view } from "./skipLink.js";

package/dist/src/skipLink/skipLink.d.ts

@@ -0,0 +1,7 @@
+import type { Html, HtmlBuilder } from "foldkit/html";
+/** "Skip to content", first in the page and shown only when it has keyboard focus. It lands
+    on `<main id="main">`. A Foldkit application routes every link click through its own
+    update, so it must hand a fragment on the page being read back to the browser:
+    `load(href)` from `foldkit/navigation`. */
+export declare const view: <Message>(h: HtmlBuilder<Message>) => Html;
+//# sourceMappingURL=skipLink.d.ts.map

package/dist/src/skipLink/skipLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skipLink.d.ts","sourceRoot":"","sources":["../../../src/skipLink/skipLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD;;;8CAG8C;AAC9C,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IACM,CAAC"}

package/dist/src/skipLink/skipLink.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+/** "Skip to content", first in the page and shown only when it has keyboard focus. It lands
+    on `<main id="main">`. A Foldkit application routes every link click through its own
+    update, so it must hand a fragment on the page being read back to the browser:
+    `load(href)` from `foldkit/navigation`. */
+export const view = (h) => __foldkitBrandViewResult((h.a([h.Class("skip"), h.Href("#main")], ["Skip to content"])), "@gjermundgaraba-designs/simple-rat/src/skipLink/skipLink.js#view");

package/dist/src/swatch/index.d.ts

@@ -0,0 +1,2 @@
+export { view } from "./swatch.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/swatch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/swatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/swatch/index.js

@@ -0,0 +1 @@
+export { view } from "./swatch.js";

package/dist/src/swatch/swatch.d.ts

@@ -0,0 +1,4 @@
+import type { Html, HtmlBuilder } from "foldkit/html";
+/** A small square of colour before a colour value in a table cell. */
+export declare const view: <Message>(color: string, h: HtmlBuilder<Message>) => Html;
+//# sourceMappingURL=swatch.d.ts.map

package/dist/src/swatch/swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch.d.ts","sourceRoot":"","sources":["../../../src/swatch/swatch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,sEAAsE;AACtE,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,MAAM,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IACV,CAAC"}

package/dist/src/swatch/swatch.js

@@ -0,0 +1,3 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+/** A small square of colour before a colour value in a table cell. */
+export const view = (color, h) => __foldkitBrandViewResult((h.span([h.Class("swatch"), h.Style({ background: color })])), "@gjermundgaraba-designs/simple-rat/src/swatch/swatch.js#view");

package/dist/src/table/index.d.ts

@@ -0,0 +1,3 @@
+export { view } from "./table.ts";
+export type { ViewConfig } from "./table.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/table/index.js

@@ -0,0 +1 @@
+export { view } from "./table.js";

package/dist/src/table/table.d.ts

@@ -0,0 +1,15 @@
+import type { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a table with `view`. */
+export type ViewConfig = Readonly<{
+    columns: ReadonlyArray<string>;
+    rows: ReadonlyArray<ReadonlyArray<Html | string>>;
+    /** Under 40rem each row becomes a card, its cells labelled with their column. Without it
+        the table stays a table on a phone and scrolls sideways. */
+    isStacked?: boolean;
+}>;
+/** A ruled table in a `div.table-scroll`, which scrolls it sideways when it is wider than the
+    column. A stacked table also writes `data-label` on each cell and the ARIA table roles,
+    which keep it announced as a table in browsers that drop the table semantics once CSS
+    changes its display, as the stacked cards do. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+//# sourceMappingURL=table.d.ts.map

package/dist/src/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC;IAClD;mEAC+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH;;;oDAGoD;AACpD,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAkC3E,CAAC"}

package/dist/src/table/table.js

@@ -0,0 +1,23 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+/** A ruled table in a `div.table-scroll`, which scrolls it sideways when it is wider than the
+    column. A stacked table also writes `data-label` on each cell and the ARIA table roles,
+    which keep it announced as a table in browsers that drop the table semantics once CSS
+    changes its display, as the stacked cards do. */
+export const view = (config, h) => {
+    const { columns, rows, isStacked = false } = config;
+    const role = (name) => (__foldkitBrandViewResult((isStacked ? [h.Role(name)] : []), "@gjermundgaraba-designs/simple-rat/src/table/table.js#role"));
+    return __foldkitBrandViewResult((h.div([h.Class("table-scroll")], [
+        h.table(role("table"), [
+            h.thead(role("rowgroup"), [
+                h.tr(role("row"), columns.map((column) => __foldkitBrandViewResult((h.keyed("th")(column, role("columnheader"), [column])), "@gjermundgaraba-designs/simple-rat/src/table/table.js#anonymous"))),
+            ]),
+            h.tbody(role("rowgroup"), rows.map((row) => __foldkitBrandViewResult((h.tr(role("row"), row.map((cell, index) => {
+                const label = columns[index];
+                return __foldkitBrandViewResult((h.td([
+                    ...role("cell"),
+                    ...(isStacked && label !== undefined ? [h.DataAttribute("label", label)] : []),
+                ], [cell])), "@gjermundgaraba-designs/simple-rat/src/table/table.js#anonymous~3");
+            }))), "@gjermundgaraba-designs/simple-rat/src/table/table.js#anonymous~2"))),
+        ]),
+    ])), "@gjermundgaraba-designs/simple-rat/src/table/table.js#view");
+};

package/highlight/highlight.ts

@@ -0,0 +1,128 @@
+// Syntax colours for code blocks, by Shiki, for a build to run: the theme maps TextMate
+// scopes to the --t-* tokens in tokens.css (Catppuccin: Latte in light, darkened for AA;
+// Mocha in dark), so the colours switch with the page. It sits outside src/, which never
+// imports it: a page is given the lines `highlight` made (vite.ts makes them of a file).
+import { createHighlighterCoreSync, type ThemeRegistration } from "shiki/core";
+import { createJavaScriptRawEngine } from "shiki/engine/javascript";
+import css from "@shikijs/langs-precompiled/css";
+import diff from "@shikijs/langs-precompiled/diff";
+import html from "@shikijs/langs-precompiled/html";
+import json from "@shikijs/langs-precompiled/json";
+import shellscript from "@shikijs/langs-precompiled/shellscript";
+import tsx from "@shikijs/langs-precompiled/tsx";
+
+import type { Language, Lines } from "../src/code/code.ts";
+
+const t = (token: string) => `var(--t-${token})`;
+
+const codeTheme: ThemeRegistration = {
+  name: "simple-rat",
+  type: "light",
+  colors: { "editor.foreground": "var(--code-ink)", "editor.background": "var(--code-fill)" },
+  tokenColors: [
+    {
+      scope: ["comment", "punctuation.definition.comment", "meta.diff.header"],
+      settings: { foreground: t("com"), fontStyle: "italic" },
+    },
+    {
+      scope: [
+        "string",
+        "punctuation.definition.string",
+        "string.unquoted.argument",
+        "markup.inserted",
+      ],
+      settings: { foreground: t("str") },
+    },
+    {
+      scope: [
+        "constant.numeric",
+        "constant.language",
+        "constant.character",
+        "constant.other.color",
+        "keyword.other.unit",
+        "support.constant.property-value",
+        "variable.language.this",
+      ],
+      settings: { foreground: t("num") },
+    },
+    {
+      scope: [
+        "keyword",
+        "storage.type",
+        "storage.modifier",
+        "keyword.control.at-rule",
+        "support.function.misc.css",
+        "support.function.transform.css",
+        "meta.diff.range",
+      ],
+      settings: { foreground: t("kw") },
+    },
+    {
+      scope: [
+        "keyword.operator",
+        "punctuation.definition.tag",
+        "storage.type.function.arrow",
+        "punctuation.separator.pipe",
+      ],
+      settings: { foreground: t("op") },
+    },
+    {
+      scope: [
+        "entity.name.type",
+        "support.type.primitive",
+        "support.class",
+        "entity.other.inherited-class",
+        "entity.other.attribute-name",
+        "entity.name.tag.css",
+        "support.type.builtin",
+      ],
+      settings: { foreground: t("ty") },
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "entity.name.tag",
+        "support.class.component",
+        "support.type.property-name",
+        "variable.css",
+      ],
+      settings: { foreground: t("fn") },
+    },
+    {
+      scope: ["entity.name.command", "support.function.builtin.shell"],
+      settings: { foreground: t("fn"), fontStyle: "italic" },
+    },
+    {
+      scope: [
+        "variable.other.property",
+        "variable.other.object.property",
+        "meta.object-literal.key",
+        "variable.argument.css",
+      ],
+      settings: { foreground: t("prop") },
+    },
+    { scope: "markup.deleted", settings: { foreground: t("del") } },
+  ],
+};
+
+// Built once, when a build first imports this file. The grammars come precompiled, so
+// nothing translates their patterns. TypeScript is read with the TSX grammar.
+const highlighter = createHighlighterCoreSync({
+  themes: [codeTheme],
+  langs: [css, diff, html, json, shellscript, tsx],
+  langAlias: { ts: "tsx" },
+  engine: createJavaScriptRawEngine(),
+});
+
+/** A block's runs, line by line, for `CodeBlock`'s `lines`. A run in the plain code ink,
+    upright, has no colour. */
+export const highlight = (code: string, lang: Language): Lines =>
+  highlighter.codeToTokens(code, { lang, theme: "simple-rat" }).tokens.map((line) =>
+    line.map((token) => {
+      // Italic is bit 1 of Shiki's font style.
+      const isItalic = ((token.fontStyle ?? 0) & 1) === 1;
+      const isPlain = token.color === "var(--code-ink)" && !isItalic;
+      return { content: token.content, color: isPlain ? undefined : token.color, isItalic };
+    }),
+  );

package/highlight/vite.ts

@@ -0,0 +1,42 @@
+import { readFile } from "node:fs/promises";
+
+import { LANGUAGES, type Language } from "../src/code/code.ts";
+import { highlight } from "./highlight.ts";
+
+type Plugin = ReturnType<typeof import("@foldkit/vite-plugin").foldkitViewIdentity>;
+
+// A file's path, then `lines=<lang>` anywhere in its query.
+const LINES_IMPORT = /^([^?]+)\?(?:.*&)?lines=([^&]*)/;
+
+const isLanguage = (lang: string): lang is Language => LANGUAGES.some((known) => known === lang);
+
+/**
+ * Colours code while the site is built, so no page loads the highlighter. An import with the
+ * query `?lines=<lang>` (one of `LANGUAGES`) is the file's text and its coloured lines,
+ * which `CodeBlock` takes as `code` and `lines`:
+ *
+ * ```ts
+ * import retry from "./code/retry.txt?lines=ts";
+ *
+ * CodeBlock.view({ lang: "ts", ...retry, toParentMessage }, h);
+ * ```
+ *
+ * Add it to the build's plugins, beside `foldkit()`. The file is watched, so a change to it
+ * colours it again. A `.txt` holds code the toolchain should leave alone; a source file can
+ * be imported twice, to run and to show.
+ */
+export const codeLines = (): Plugin => ({
+  name: "simple-rat:code-lines",
+  // Before Vite's own loaders, which would take a .txt for an asset.
+  enforce: "pre",
+  async load(id) {
+    const [, file, lang] = LINES_IMPORT.exec(id) ?? [];
+    if (file === undefined || lang === undefined) return null;
+    if (!isLanguage(lang)) {
+      return this.error(`simple-rat: ?lines=${lang} is none of ${LANGUAGES.join(", ")}`);
+    }
+    this.addWatchFile(file);
+    const code = await readFile(file, "utf8");
+    return `export default ${JSON.stringify({ code, lines: highlight(code, lang) })};`;
+  },
+});

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@gjermundgaraba-designs/simple-rat",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.7.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gjermundgaraba/my-designs.git",
+    "directory": "designs/simple-rat"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "highlight",
+    "!highlight/**/*.test.ts",
+    "DESIGN.md",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./scheme": {
+      "types": "./dist/src/scheme/script.d.ts",
+      "default": "./dist/src/scheme/script.js"
+    },
+    "./highlight": {
+      "types": "./dist/highlight/highlight.d.ts",
+      "default": "./dist/highlight/highlight.js"
+    },
+    "./highlight/vite": {
+      "types": "./dist/highlight/vite.d.ts",
+      "default": "./dist/highlight/vite.js"
+    },
+    "./tokens.css": "./src/tokens.css",
+    "./simple-rat.css": "./src/simple-rat.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@shikijs/langs-precompiled": "^4.4.3",
+    "shiki": "^4.4.3"
+  },
+  "devDependencies": {
+    "@effect/platform-browser": "4.0.2",
+    "@foldkit/ui": "0.168.0",
+    "@foldkit/vite-plugin": "0.27.1",
+    "@my-designs/specimen": "0.0.0",
+    "@types/node": "^26.6.2",
+    "effect": "4.0.2",
+    "foldkit": "0.168.0",
+    "happy-dom": "^20.14.5",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
+    "vite-plus": "1.0.0"
+  },
+  "peerDependencies": {
+    "@effect/platform-browser": "^4.0.0",
+    "@foldkit/ui": "^0.168.0",
+    "@foldkit/vite-plugin": "^0.27.0",
+    "effect": "^4.0.0",
+    "foldkit": "^0.168.0"
+  },
+  "peerDependenciesMeta": {
+    "@foldkit/vite-plugin": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "dev": "vp dev",
+    "preview": "vp preview"
+  }
 }

package/src/code/code.ts

@@ -0,0 +1,23 @@
+// The `?lines=<lang>` imports are declared for every program that reaches this file, which
+// is every one that imports the package: an ambient declaration has no import to travel by.
+// oxlint-disable-next-line typescript/triple-slash-reference
+/// <reference path="./lines.d.ts" />
+
+// A code block's colours as data, with no highlighter: what `CodeBlock` renders and what a
+// build makes with `highlight` (highlight/highlight.ts), so a page carries the colours and
+// not Shiki.
+
+/** The languages a block can be coloured in. */
+export const LANGUAGES = ["ts", "tsx", "sh", "json", "css", "html", "diff"] as const;
+export type Language = (typeof LANGUAGES)[number];
+
+/** One coloured run of a line: its text, the `--t-*` colour Shiki gave it, and whether it
+    is italic. */
+type Run = Readonly<{ content: string; color: string | undefined; isItalic: boolean }>;
+
+/** A block's runs, line by line. A run in the plain code ink, upright, has no colour. */
+export type Lines = ReadonlyArray<ReadonlyArray<Run>>;
+
+/** A file's text and its coloured lines: what an import with `?lines=<lang>` gives (see
+    lines.d.ts). */
+export type Highlighted = Readonly<{ code: string; lines: Lines }>;

package/src/code/index.ts

@@ -0,0 +1,2 @@
+export { LANGUAGES } from "./code.ts";
+export type { Highlighted, Language, Lines } from "./code.ts";

package/src/code/lines.d.ts

@@ -0,0 +1,39 @@
+// A file imported with `?lines=<lang>`, one of `LANGUAGES`: its text, and its lines coloured
+// at build by `codeLines()` (highlight/vite.ts, the package's `./highlight/vite`). code.ts
+// refers to this file, so every program that imports the package has these declarations. A
+// module pattern takes one wildcard, so there is a declaration for each language.
+
+declare module "*?lines=ts" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}
+
+declare module "*?lines=tsx" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}
+
+declare module "*?lines=sh" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}
+
+declare module "*?lines=json" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}
+
+declare module "*?lines=css" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}
+
+declare module "*?lines=html" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}
+
+declare module "*?lines=diff" {
+  const highlighted: import("./code.ts").Highlighted;
+  export default highlighted;
+}

package/src/codeBlock/codeBlock.ts

@@ -0,0 +1,83 @@
+import { Option } from "effect";
+import type { Html, HtmlBuilder } from "foldkit/html";
+import * as Mount from "foldkit/mount";
+
+import type { Language, Lines } from "../code/code.ts";
+import type { ViewInputs as CopyInputs } from "../copyTab/copyTab.ts";
+import * as Scrolls from "../scrolls/scrolls.ts";
+
+/** Configuration for rendering a code block with `view`. */
+export type ViewConfig<ParentMessage> = Readonly<{
+  code: string;
+  /** The code's language, named on the `code` element. A block without one, with a copy
+      tab, is a prose block that wraps at text size, like a prompt. */
+  lang?: Language;
+  /** The code's coloured lines, made at build: an import with `?lines=<lang>` gives them
+      with the `code` (the package's `./highlight/vite`), or `highlight` makes them (its
+      `./highlight`). Without them the block is plain. */
+  lines?: Lines;
+  /** A file name, shown in a tab on the block's top-left edge. */
+  file?: string;
+  /** A `copy` tab on the block's top-right edge: the page's `CopyTab`, rendered with
+      `copyInputs`. The tab wraps the block, so it is given the block's view to render as its
+      `toBlockView`. */
+  copy?: ((toBlockView: () => Html) => Html) | undefined;
+  /** The overflow Mount's report, lifted into the page's Messages, which may ignore it. */
+  toParentMessage: (message: Scrolls.Message) => ParentMessage;
+}>;
+
+/** The block's name for assistive technology: its file, or its first line. */
+export const nameOf = (code: string, file?: string): string => {
+  const firstLine = code.trim().split("\n")[0] ?? "";
+  return file ?? (firstLine.length > 40 ? `${firstLine.slice(0, 40)}…` : firstLine);
+};
+
+/** What a block's `CopyTab` is given: the block's name and its code, without a trailing
+    newline. */
+export const copyInputs = (code: string, file?: string): Omit<CopyInputs, "toBlockView"> => ({
+  name: nameOf(code, file),
+  text: code.trimEnd(),
+});
+
+const linesView = <Message>(lines: Lines, h: HtmlBuilder<Message>): ReadonlyArray<Html | string> =>
+  lines.flatMap((line, index) => [
+    ...(index > 0 ? ["\n"] : []),
+    ...line.map((run) =>
+      run.color === undefined
+        ? run.content
+        : h.span(
+            [h.Style({ color: run.color, ...(run.isItalic ? { fontStyle: "italic" } : {}) })],
+            [run.content],
+          ),
+    ),
+  ]);
+
+/** A code block: coloured where it is given its lines, optionally with a file tab and a
+    copy tab. Only a block that overflows takes focus, through `Scrolls.WatchOverflow`. */
+export const view = <ParentMessage>(
+  config: ViewConfig<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>,
+): Html => {
+  const { code, lang, lines, file, copy, toParentMessage } = config;
+  const name = nameOf(code, file);
+  const toBlockView = (): Html =>
+    h.pre(
+      [
+        ...(copy === undefined ? [] : [h.DataAttribute("copy", "")]),
+        h.OnMount(
+          Mount.mapMessage(
+            Scrolls.WatchOverflow({ maybeName: Option.some(name) }),
+            toParentMessage,
+          ),
+        ),
+      ],
+      [
+        h.code(
+          lang === undefined ? [] : [h.Class(`language-${lang}`)],
+          lines === undefined ? [code] : linesView(lines, h),
+        ),
+      ],
+    );
+  const body = copy === undefined ? toBlockView() : copy(toBlockView);
+  return file === undefined ? body : h.figure([h.Class("file")], [h.figcaption([], [file]), body]);
+};

package/src/codeBlock/index.ts

@@ -0,0 +1,2 @@
+export { copyInputs, view } from "./codeBlock.ts";
+export type { ViewConfig } from "./codeBlock.ts";