@magland/mochi 0.3.1 → 0.4.1

package/dist/style.js

@@ -60,6 +60,10 @@ exports.CSS = `
   :root { --touch: 42px; }
 }
 * { box-sizing: border-box; }
+/* The hidden attribute always wins, including over a display this sheet set:
+   scripts show and hide parts of a page by toggling it, and a .age-unlock
+   form (display: flex) must actually vanish when unlocking hides it. */
+[hidden] { display: none !important; }
 /* The bar at the top stays put, so an anchored line or heading has to be
    pushed clear of it when the page jumps to one. */
 html { scroll-padding-top: 68px; }
@@ -86,6 +90,7 @@ code, pre, .mono { font-family: var(--font-mono); }
 .topbar {
   position: sticky; top: 0; z-index: 30;
   background: var(--surface); border-bottom: 1px solid var(--border);
+  margin-bottom: 1em;
 }
 .topbar .container { display: flex; align-items: center; gap: var(--s3); height: 52px; }
 /* The brand is the logotype from logo.ts, which inherits the text colour. Its
@@ -107,6 +112,13 @@ code, pre, .mono { font-family: var(--font-mono); }
 .topbar .crumbs a { color: var(--fg-muted); }
 .topbar .crumbs a:hover { color: var(--accent); }
 .userbox { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+/* A square glyph button in the bar, the size the appearance menu's summary is,
+   so the icons beside the account sit on one rhythm. */
+.topbar-icon {
+  display: flex; align-items: center; justify-content: center;
+  width: var(--touch); height: var(--touch); border-radius: var(--radius); color: var(--fg-muted);
+}
+.topbar-icon:hover { background: var(--surface-hover); color: var(--fg); text-decoration: none; }
 .user-menu > summary { display: flex; align-items: center; gap: 2px; }
 .user-menu .dropdown-menu { width: 220px; }
 .user-menu form { margin: 0; }
@@ -163,7 +175,12 @@ kbd {
   display: flex; align-items: center; gap: var(--s2);
   padding: 7px var(--s4); min-height: var(--touch);
   color: var(--fg); font-size: var(--t-sm);
+  min-width: 0;
 }
+/* Both halves of a row stay on their own line, cut with an ellipsis, so a
+   long repository name can never widen the panel or wrap its note. */
+.jump-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.jump-note { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .jump-item:hover { text-decoration: none; }
 /* The highlight follows the keyboard, and the pointer moves the keyboard, so
    there is only ever one selected row however the reader is driving. */
@@ -217,7 +234,7 @@ main { padding: var(--s5) var(--s4) var(--s7); }
    rather than read: an operator checking which build is live wants it to be
    there, and everybody else wants it out of the way. Ordinary inline flow, so
    a narrow screen wraps the line instead of scrolling it. */
-.pagefoot { border-top: 1px solid var(--border); }
+.pagefoot { border-top: 1px solid var(--border); margin-top: 1em;}
 .pagefoot .container { padding-top: var(--s3); padding-bottom: var(--s5); color: var(--fg-subtle); font-size: var(--t-xs); }
 .pagefoot .mono { font-size: 11px; }
 .foot-sep { color: var(--border); }
@@ -326,7 +343,14 @@ h3 { font-family: var(--font-head); font-size: var(--t-lg); line-height: 1.35; }
 }
 .dd-item:first-child { border-top: none; }
 .dd-item:hover { background: var(--surface); text-decoration: none; }
-button.dd-item { width: 100%; background: none; font: inherit; font-size: 13px; cursor: pointer; }
+/* A row that is a button (a theme, signing out) is drawn as a row that is a
+   link: the rule above it, and none of the browser's own button edges. A row
+   under a section's heading has the heading's rule already. */
+button.dd-item {
+  width: 100%; background: none; font: inherit; font-size: 13px; cursor: pointer;
+  border: none; border-top: 1px solid var(--border-soft);
+}
+.dd-section + .dd-item { border-top: none; }
 .dd-item.current { font-weight: 600; }
 .dd-item .dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dd-check { width: 16px; flex: none; color: var(--accent); }
@@ -491,6 +515,43 @@ table.listing.tree td.tree-age { width: 1%; white-space: nowrap; }
 .blob-binary { padding: 32px; text-align: center; color: var(--fg-muted); }
 .rendered { padding: 24px 12px 28px; background: var(--bg); }
 
+/* Age-encrypted files: the unlock card on the blob page and in the editor,
+   the passphrase pair the new-file form reveals for a .age name, the slim
+   bar that stands over decrypted output, and the show/hide eye every
+   passphrase input carries. */
+.age-card { text-align: center; }
+.age-head { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); margin-bottom: 4px; }
+.age-unlock { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
+.age-unlock .age-pass-wrap { width: min(320px, 100%); }
+.age-pass-wrap { position: relative; display: inline-flex; align-items: center; }
+.age-pass-wrap input { width: 100%; padding-right: 36px; }
+.age-eye {
+  position: absolute; right: 3px; display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius);
+  background: none; color: var(--fg-subtle); cursor: pointer;
+}
+.age-eye:hover { color: var(--fg); }
+.age-eye .glyph-eye-off, .age-pass-wrap.showing .glyph-eye { display: none; }
+.age-pass-wrap.showing .glyph-eye-off { display: block; }
+.age-card .form-error { display: inline-block; margin-top: 10px; }
+.age-card .field { max-width: 360px; margin-left: auto; margin-right: auto; text-align: left; }
+.age-card .field .age-pass-wrap { display: flex; }
+.age-bar {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
+  padding: 8px 12px; margin-bottom: 12px;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
+}
+.age-bar-note { display: inline-flex; align-items: baseline; gap: 8px; color: var(--fg-muted); font-size: var(--t-sm); }
+.age-bar-note .glyph, .age-warn .glyph { flex: none; transform: translateY(2px); }
+.age-bar-actions { display: inline-flex; gap: 8px; }
+p.age-bar-note { margin: 0 0 12px; }
+.age-warn { display: flex; align-items: baseline; gap: 6px; color: var(--alert-warning); font-size: var(--t-sm); margin: 4px 0 0; }
+.age-newpass { margin: 12px 0; }
+.age-newpass > summary { cursor: pointer; color: var(--fg-muted); }
+.age-newpass > summary:hover { color: var(--fg); }
+.age-newpass .field { max-width: 360px; margin-top: 10px; }
+.age-output .age-plain { padding: 16px; overflow-x: auto; background: var(--bg); font-size: 13px; line-height: 1.5; }
+
 /* Segmented Preview/Code switch on rendered files. */
 .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
 .seg a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 13px; line-height: 1.5; color: var(--fg-muted); background: var(--surface); }
@@ -647,6 +708,11 @@ table.listing:has(+ .empty-state:not([hidden])) { border-top: none; }
 .signin .form-box { padding: 16px; }
 .signin .btn { width: 100%; justify-content: center; }
 .signin-note { margin: 16px 0 0; text-align: center; }
+/* The passkey button under the token form: a quiet second door. */
+.signin-alt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
+.signin-alt .form-error { margin: 10px 0 0; }
+/* A handoff code is read across a room, so it is set like a heading. */
+.handoff-code { font-size: 28px; letter-spacing: 4px; text-align: center; padding: 16px 0; user-select: all; }
 
 /* Two fields reading as one address, "collection / name". */
 .name-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
@@ -700,6 +766,9 @@ textarea {
 /* News, of either kind: the tint, and a rule down the side it is read from. */
 .flash { background: var(--ok-bg); border-left: 3px solid var(--ok-border); padding: 8px 12px; margin-bottom: 16px; max-width: 620px; }
 .form-error { background: var(--err-bg); border-left: 3px solid var(--err-border); padding: 8px 12px; margin-bottom: 16px; max-width: 620px; }
+/* The amber grade of news: a saved setting the running server has not read
+   yet, waiting for a restart. Not an error, so it takes the surface tint. */
+.restart-note { background: var(--surface); border-left: 3px solid var(--alert-warning); padding: 8px 12px; margin-bottom: 16px; max-width: 620px; }
 /* A section flagged by the colour of the news it carries, as the flashes and
    the merge box are. Two grades, because they are not the same warning: amber
    for what disrupts other people and can be put back, red for what is gone.
@@ -1026,6 +1095,43 @@ table.listing.issues td.issue-cell > span { min-width: 0; }
 .issue-reply textarea { border: none; border-radius: 0; }
 .issue-reply .actions { padding: 10px 12px; justify-content: flex-end; border-top: 1px solid var(--border); }
 
+/* --- the markdown editor: Write and Preview tabs over the field, and a
+   toolbar that writes markdown into it. The tabs read as file tabs into the
+   writing surface, which is why the current one shares its background and
+   sits on the head's border. --- */
+.md-editor { border: 1px solid var(--border); border-radius: var(--radius); background: var(--input-bg); }
+.md-editor:focus-within { outline: 2px solid var(--focus); border-color: var(--accent); }
+.md-head {
+  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap;
+  padding: 6px 8px 0; background: var(--surface); border-bottom: 1px solid var(--border);
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+.md-tabs { display: flex; gap: 2px; }
+.md-tab {
+  border: 1px solid transparent; border-bottom: none; background: none; padding: 6px 12px;
+  font: inherit; font-size: 13px; color: var(--fg-muted); cursor: pointer;
+  border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px;
+}
+.md-tab:hover { color: var(--fg); }
+.md-tab.current { background: var(--input-bg); border-color: var(--border); color: var(--fg); font-weight: 600; }
+.md-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; flex-wrap: wrap; }
+.md-group { display: flex; }
+.md-group + .md-group { border-left: 1px solid var(--border); padding-left: 8px; }
+.md-btn {
+  display: inline-flex; align-items: center; justify-content: center; border: none; background: none;
+  padding: 4px 5px; border-radius: var(--radius); color: var(--fg-muted); cursor: pointer;
+}
+.md-btn:hover { background: var(--surface-hover); color: var(--fg); }
+/* Previewing: the buttons would edit a field that is not on screen. */
+.md-editor.previewing .md-toolbar { visibility: hidden; }
+.md-editor textarea { border: none; border-radius: 0 0 var(--radius) var(--radius); display: block; }
+.md-editor textarea[hidden] { display: none; }
+.md-editor textarea:focus { outline: none; }
+.md-render { padding: 12px; overflow-x: auto; }
+/* Inside a reply card the editor sits borderless: the card is the border. */
+.issue-reply .md-editor, .issue-reply .md-editor:focus-within { border: none; outline: none; border-radius: 0; }
+.issue-reply .md-head { border-radius: 0; }
+
 /* --- releases: notes attached to a tag --- */
 .release { display: flex; gap: 24px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--border-soft); }
 .release:first-of-type { border-top: none; }
@@ -1151,7 +1257,11 @@ a.chip.label:hover { text-decoration: none; filter: brightness(1.1); }
   font-weight: 600;
   font-size: var(--t-base);
   min-width: 0;
-  overflow-wrap: anywhere;
+  /* One line however long the name is: a name that would wrap is cut with an
+     ellipsis, so no card is ever taller than its neighbours because of it. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .rc-name::after { content: ''; position: absolute; inset: 0; }
 /* The collection stays whole, so a narrow column breaks the name at the slash
@@ -1178,6 +1288,38 @@ a.chip.label:hover { text-decoration: none; filter: brightness(1.1); }
   overflow: hidden;
 }
 .rc-meta { margin-top: var(--s2); color: var(--fg-subtle); font-size: var(--t-xs); }
+
+/* --- topics ---
+
+   One look everywhere on purpose: a topic is the same topic on a card, in the
+   About panel, and on its own page, so it wears the accent in a rounded pill
+   rather than a colour of its own the way an issue label does. The tinted
+   background is mixed from the accent so every theme keeps its own hue; the
+   plain chip background underneath is the fallback for a browser without
+   color-mix. */
+.topic-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.chip.topic { background: var(--chip-bg); color: var(--accent); border-radius: 999px; font-weight: 500; }
+.chip.topic { background: color-mix(in srgb, var(--accent) 11%, transparent); }
+a.chip.topic:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); text-decoration: none; }
+.rc-topics { margin-top: var(--s2); }
+.side-topics { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 12px; }
+/* The editor behind the chips: a summary dressed as one more chip, opening
+   the same popover the other menus use. */
+.topic-edit { display: inline-block; }
+.topic-add { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 7px; font-size: 12px; background: var(--chip-bg); color: var(--fg-muted); }
+.topic-add:hover { color: var(--fg); }
+.topic-add .glyph { margin: 0; }
+.topic-edit-menu { padding: 10px 12px; width: 300px; }
+.topic-edit-menu label { display: block; margin-bottom: 4px; }
+.topic-edit-menu input[type="text"] { width: 100%; }
+.topic-edit-menu p { margin: 6px 0; }
+.topic-edit-menu .btn { margin-top: 2px; }
+/* The vault-wide index: each topic once, with how many repositories carry it. */
+.topic-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
+.topic-index li { display: flex; align-items: center; gap: 10px; }
+.topic-title { display: flex; align-items: center; gap: 8px; }
+.topic-title .glyph { color: var(--fg-muted); }
+
 .site-link, .ci-mark { display: inline-flex; color: var(--fg-subtle); }
 .site-link:hover, .ci-mark:hover { color: var(--accent); }
 .ci-success { color: var(--primary); }
@@ -1215,6 +1357,23 @@ a.chip.label:hover { text-decoration: none; filter: brightness(1.1); }
 .profile-box { margin-bottom: var(--s6); }
 .profile-hint { margin: 0 0 var(--s5); }
 
+/* A username linked to its profile page. It keeps the colour and weight of
+   the text around it, so a linked name reads exactly as an unlinked one and
+   only hover says it goes somewhere; the flex is for the identicon some
+   carry. */
+.user-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
+.user-link:hover { color: var(--accent); text-decoration: underline; }
+
+/* The user behind a namespace collection, on their page at /<username>: the
+   username beside the chosen name, then the bio and links under the heading,
+   above the profile README and the repositories. */
+.profile-username { color: var(--fg-muted); font-weight: 400; font-size: var(--t-lg); }
+.profile-bio { margin: calc(-1 * var(--s3)) 0 var(--s4); max-width: 720px; }
+.profile-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: calc(-1 * var(--s3)) 0 var(--s4); font-size: var(--t-sm); }
+.profile-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-muted); }
+.profile-links a:hover { color: var(--accent); }
+.profile-links .icon { margin-right: 0; }
+
 /* --- what a finger has to hit ---
 
    Under a coarse pointer every control grows to --touch, which is the one

package/dist/topics.js

@@ -0,0 +1,165 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOPICS_FILE = exports.MAX_TOPIC_LENGTH = exports.MAX_TOPICS = void 0;
+exports.isValidTopic = isValidTopic;
+exports.checkTopics = checkTopics;
+exports.parseTopicsInput = parseTopicsInput;
+exports.repoTopics = repoTopics;
+exports.setTopics = setTopics;
+exports.countTopics = countTopics;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const atomic_1 = require("./atomic");
+const filecache_1 = require("./filecache");
+const ops_1 = require("./ops");
+// Topics: free-form tags on a repository, the way GitHub carries them. A topic
+// is organizational and nothing else -- it grants nothing, reserves nothing,
+// and exists only because some repository carries it; the set of topics in a
+// vault is whatever its repositories say, with no registry behind it, exactly
+// as issue labels work.
+//
+// They live in a `topics` file in the bare repository's directory, one per
+// line, beside git's own `description` file: plain enough to read and edit by
+// hand, and it moves with the repository when the repository is renamed. A
+// repository with no such file has no topics, which is what every repository
+// had before this existed.
+/** The most topics a repository may carry, matching GitHub's cap. */
+exports.MAX_TOPICS = 20;
+/** The longest a single topic may be, matching GitHub's cap. */
+exports.MAX_TOPIC_LENGTH = 50;
+/**
+ * The GitHub rule, exactly: lowercase letters, digits, and hyphens, starting
+ * with a letter or digit. Lowercase-only is what keeps a topic usable in a URL
+ * with no escaping, and what makes "WebGPU" and "webgpu" one topic rather
+ * than two that each list half the repositories.
+ */
+function isValidTopic(topic) {
+    return topic.length <= exports.MAX_TOPIC_LENGTH && /^[a-z0-9][a-z0-9-]*$/.test(topic);
+}
+/**
+ * Validate a proposed set of topics: trim, drop empties, dedupe, refuse what
+ * the rule refuses. Rejection rather than normalization on purpose -- a
+ * caller who typed "WebGPU" is told what to type instead of having their
+ * input silently rewritten -- but the refusal names the fix when lowercasing
+ * is the fix.
+ */
+function checkTopics(topics) {
+    const out = [];
+    for (const raw of topics) {
+        const topic = raw.trim();
+        if (topic === '')
+            continue;
+        if (!isValidTopic(topic)) {
+            const lowered = topic.toLowerCase();
+            const hint = topic !== lowered && isValidTopic(lowered) ? ` (try "${lowered}")` : '';
+            throw new ops_1.OpError(`"${topic}" is not a usable topic: lowercase letters, digits, and hyphens, starting with a letter or digit, at most ${exports.MAX_TOPIC_LENGTH} characters${hint}`);
+        }
+        if (!out.includes(topic))
+            out.push(topic);
+    }
+    if (out.length > exports.MAX_TOPICS)
+        throw new ops_1.OpError(`A repository may carry at most ${exports.MAX_TOPICS} topics.`);
+    return out;
+}
+/**
+ * Topics as a person types them into one input: separated by spaces, commas,
+ * or both. The web forms parse with this and then validate with checkTopics,
+ * so the two forms and the API refuse the same things.
+ */
+function parseTopicsInput(text) {
+    return text.split(/[\s,]+/).filter((t) => t !== '');
+}
+exports.TOPICS_FILE = 'topics';
+const topicsCache = (0, filecache_1.fileCache)({
+    read: (file) => {
+        let text;
+        try {
+            text = fs.readFileSync(file, 'utf8');
+        }
+        catch {
+            return [];
+        }
+        // Reading stays permissive, as everywhere: a hand-edited file's invalid
+        // lines are skipped rather than the valid ones going unserved, and a
+        // file grown past the cap is capped rather than swelling every listing.
+        const out = [];
+        for (const line of text.split('\n')) {
+            const topic = line.trim();
+            if (topic !== '' && isValidTopic(topic) && !out.includes(topic))
+                out.push(topic);
+            if (out.length === exports.MAX_TOPICS)
+                break;
+        }
+        return out;
+    },
+    missing: () => [],
+});
+/** The topics of the repository whose bare directory this is. */
+function repoTopics(repoDir) {
+    return topicsCache.get(path.join(repoDir, exports.TOPICS_FILE));
+}
+/**
+ * Replace the repository's topics with these, validated. The whole set at
+ * once, as GitHub's API takes them: add-one and remove-one are a caller's
+ * read-modify-write, not a protocol.
+ */
+function setTopics(repoDir, topics) {
+    const checked = checkTopics(topics);
+    const file = path.join(repoDir, exports.TOPICS_FILE);
+    if (checked.length === 0) {
+        fs.rmSync(file, { force: true });
+    }
+    else {
+        (0, atomic_1.writeFileAtomic)(file, checked.join('\n') + '\n');
+    }
+    topicsCache.invalidate(file);
+    return checked;
+}
+/**
+ * The topics a set of repositories carries, with how many carry each, most
+ * used first. Both the listing dropdowns and the topics index are built from
+ * this, always over repositories the viewer could see anyway.
+ */
+function countTopics(topicLists) {
+    const counts = new Map();
+    for (const list of topicLists) {
+        for (const t of list)
+            counts.set(t, (counts.get(t) ?? 0) + 1);
+    }
+    return [...counts.entries()]
+        .map(([topic, count]) => ({ topic, count }))
+        .sort((a, b) => b.count - a.count || a.topic.localeCompare(b.topic));
+}