@kitlangton/knobs 0.4.0-next.7 → 0.4.0-next.8

package/README.md

@@ -1370,7 +1370,7 @@ Media is a bare URL (a video or picture), or `compare`, `video`, `image`, `diff`
   "more": "A mock provider answers 410 Gone.\n\n**Pick another model** opens the picker." }
 ```
 
-**Pull requests** read as small chips: an icon for their state, the number, the title and state on hover, in a quiet tint (open green, merged violet, draft and closed neutral). A section's PR `link` shows as its chip on the meta line ("PR 3 of 9 · ⟨#57158⟩"), and in titles, captions, summaries and `more`, a link to a pull request whose words are its number, and a bare `#57148` the page can resolve, become chips too. The doc's `prs` gives their state and title by number (`{ "57148": { state: "merged", title: "…" } }`), and `repo: "owner/name"` links bare numbers it doesn't list. So a caption needn't spell out "#57158 (Draft · Green)".
+**Pull requests and issues** read as capsules: their state's icon (merge, pull request, draft, closed; a circle-dot for an issue) and number in a quiet tint of the state (open green, merged violet, draft and closed faint, unknown neutral), a faint check where its checks pass, the title and state on hover. Every ref becomes one: a section's PR `link` on the meta line ("PR 3 of 9 · ⟨#57158⟩"), and in titles, captions, summaries, `more` and table cells, a link to a pull request or issue whose words are its number, inline code that's just a ref, and a bare `#57148` (`issue:#123` for an issue). The state comes from the doc's `prs` by number (`{ "57148": { state: "merged", title: "…" } }`, `kind: "issue"` for an issue), else a `stack` on the page (an item's title and the first word of its `status`), else the section whose `link` is that PR. A ref needs no `repo` to be a chip; `repo: "owner/name"` only links the ones whose text has no URL. So a caption needn't spell out "#57158 (Draft · Green)".
 
 **The feed** (`updates` and `qa`, newest first) is a calm list a group's room apart, a hairline between items and no boxes: a meta line (when · the step's PR, and `status` with review on), the question in text colour (or the update), its answer in dim prose, and its `trail` (what Kit did before asking, `"0:04 · Played the compare"`) folded under a small faint **Context** toggle whose height springs open on the state spring (.3 s) while the lines fade in place under a soft bottom edge. `status: "shipped"` reads Shipped, `"changes"` reads Changes queued.
 
@@ -1416,6 +1416,8 @@ The demo is `examples/walkthrough.html`.
 
 **`annotations`** on an `image`, a `video` or a `compare` draw the eye to what matters: `[{ x, y, w?, h?, label?, at?: [start, end], shape?: "box" | "dot" | "arrow" }]`, in 0–1 of the picture (a box's top-left, or the point). A box takes a calm ring, a point a dot (or an arrow pointing at it), each with a small label; on a video or compare one shows only between its `at` seconds, fading in and out with a small blur. On a compare they're drawn on both sides and stay on their spot through a zoom. They're on by default; the eye button on the picture, or `a`, hides or shows every one on the page.
 
+A **`video`** plays in **`player()`**, the same look as a compare: the picture, then one thin line under it to seek on, its chapters as segments.
+
 **`chapters`** on a `video` (or a `compare`): a readout list under it, a row each (number · label · start). A click selects the chapter at once while the media seeks there and plays, and goes in the note's log; the selection pill slides to the chapter playing (the last that started at or before the playhead) and fades out in place outside them, and a note's `media` names it (`chapter`). A chapter ends at `end`, else `start + duration`, else the next one's start. On a compare they're also its timeline's markers. A video's `captions` (or `captionsSrc`) is a WebVTT URL, shown by default.
 
 ```json

package/dist/types/ui/walkthrough-blocks.d.ts

@@ -1,4 +1,4 @@
-import { type ContextEvent, type WalkChapter, type WalkMedia } from "./walkthrough-model.js";
+import { type ContextEvent, type WalkChapter, type WalkMedia, prStatus, type PRState } from "./walkthrough-model.js";
 /** The glyphs the blocks draw. */
 export declare const GLYPH: {
     caret: string;
@@ -61,34 +61,27 @@ export declare function disclosure(host: HTMLElement, options: {
     open?: boolean;
     content: HTMLElement;
 }): Disclosure;
-declare const PR_STATE: {
-    readonly merged: "Merged";
-    readonly open: "Open";
-    readonly draft: "Draft";
-    readonly closed: "Closed";
-};
-export type PRState = keyof typeof PR_STATE;
-/**
- * A stack row's pull-request state from its `status` words: the first word when it's merged,
- * draft, open or closed (any case), and whether they say its checks pass ("green", "passing",
- * "CI"). The state comes from the words, never the tone.
- */
-export declare function prStatus(status: string | undefined): {
-    state: PRState | null;
-    checks: boolean;
-};
+export { prStatus, type PRState };
 /** A pull request's state as GitHub shows it: its glyph and word, quietly tinted; a check after. */
 export declare function prStateLabel(doc: Document, state: PRState, checks: boolean, title?: string): HTMLSpanElement;
 export interface PRInfo {
     readonly state?: PRState;
+    readonly kind?: "pr" | "issue";
+    readonly checks?: boolean;
     readonly title?: string;
     readonly href?: string;
 }
-/** A pull request as a small chip: its state's icon and number, the title and state on hover. */
+/**
+ * A pull request (or an issue) as a capsule: its state's glyph and number, tinted quietly by state
+ * (neutral where none is known), a faint check where its checks pass, title and state on hover.
+ */
 export declare function prChip(doc: Document, n: string, pr: PRInfo): HTMLElement;
+/** What the page knows of a pull request or issue by number (null when nothing). */
+export type FindPR = (n: string, kind: "pr" | "issue") => PRInfo | null;
 /**
- * Turns the pull requests in some rendered prose into chips: links to one whose words are its
- * number or URL, and bare `#57148`s the page can resolve. Code, buttons and media stay as they are.
+ * Turns every pull request and issue ref in some rendered prose into a capsule: links to one
+ * whose words are its number or URL, inline code that's just a ref, and bare `#57148`s
+ * (`issue:#123` for an issue). One the page knows nothing of is a neutral chip, linked only where
+ * the page has a repo.
  */
-export declare function linkPRs(root: HTMLElement, find: (n: string) => PRInfo | null): void;
-export {};
+export declare function linkPRs(root: HTMLElement, find: FindPR): void;

package/dist/types/ui/walkthrough-model.d.ts

@@ -352,6 +352,10 @@ export interface WalkthroughDoc {
 }
 export interface WalkthroughPR {
     readonly state?: "merged" | "open" | "draft" | "closed";
+    /** An issue rather than a pull request (`issue:` refs and `/issues/` links are). */
+    readonly kind?: "pr" | "issue";
+    /** Its checks pass (a stack item's status saying green, passing or CI). */
+    readonly checks?: boolean;
     readonly title?: string;
     /** Its URL, when neither `repo` nor a link on the page gives it. */
     readonly href?: string;
@@ -580,8 +584,23 @@ export declare function linkLabel(href: string): string;
 export declare function normalizeWalkthrough(doc: WalkthroughDoc): WalkPage;
 /** The number in a pull request's URL (`…/pull/57148`), or null. */
 export declare const prNumber: (href: string) => string | null;
-/** A pull request by number: what the page knows, or (with a repo) its URL. */
-export declare function findPR(prs: Readonly<Record<string, WalkthroughPR>>, n: string, repo?: string): WalkthroughPR | null;
+export type PRState = NonNullable<WalkthroughPR["state"]>;
+/**
+ * A pull request's state from some status words: the first word when it's merged, draft, open or
+ * closed (any case; shipped and done read as merged), and whether they say its checks pass
+ * ("green", "passing", "CI"). The state comes from the words, never a tone.
+ */
+export declare function prStatus(status: string | undefined): {
+    state: PRState | null;
+    checks: boolean;
+};
+/**
+ * A pull request (or an issue) by number: what the page knows, or (with a repo) its URL; null
+ * when it knows nothing. An issue takes only what `prs` says of it as an issue.
+ */
+export declare function findPR(prs: Readonly<Record<string, WalkthroughPR>>, n: string, repo?: string, kind?: "pr" | "issue"): WalkthroughPR | null;
+/** The number in an issue's URL (`…/issues/123`), or null. */
+export declare const issueNumber: (href: string) => string | null;
 /** Whether a link is a pull (or merge) request: GitHub's `/pull/123`, GitLab's merge requests. */
 export declare const isPullRequest: (href: string) => boolean;
 /**