toolroll 0.9.86 → 0.9.87

package/dist/server/kit-standalone.js

@@ -0,0 +1,69 @@
+/**
+ * The kit's behaviour for a server page the workspace bundle doesn't place (src/design/KIT.md): a chromed page
+ * answered without the React workspace (a bearer or link session, or a build without browser assets). It is the
+ * same behaviour src/browser/kit/behavior.ts gives kit markup inside the workspace, kept small and dependency-free so
+ * it can ride the page's one nonce'd script (serve.ts sendScreen):
+ *
+ * - the composer grows from its rows to its max rows and then scrolls, and keeps "has text" and a gated send in step;
+ * - a gated send does nothing while the box is empty;
+ * - an idea (`data-k-draft`) adds its words to its composer in place;
+ * - the composer's project chip and + open a small menu;
+ * - overlays (`data-k-open`, `data-k-close`): the page behind inert, Tab kept inside, Escape, Close and the scrim close
+ *   it, focus returns to the trigger; a popover or menu becomes a bottom sheet on a phone;
+ * - a button switch (`button.k-switch[role=switch][data-k-switch]`) flips and says its new state;
+ * - the phone keyboard: html.kb-open and --kb from the visual viewport.
+ *
+ * It reads no field but a composer's own text, posts nothing and fetches nothing: every control still works as plain
+ * HTML without it. It never rides a sensitive page (one that asks for a password or shows a secret), where the page
+ * carries no chrome additions.
+ */
+export const KIT_STANDALONE_SCRIPT = `(function(){
+if(window.__kitStandalone)return;window.__kitStandalone=1;var d=document;
+var PHONE="(max-width: 760px)";var FOCUSABLE='a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function phone(){return window.matchMedia(PHONE).matches;}
+function sync(t){var box=t.closest(".k-composer");if(!box)return;var st=getComputedStyle(t);var line=parseFloat(st.lineHeight)||21;
+var pad=(parseFloat(st.paddingTop)||0)+(parseFloat(st.paddingBottom)||0);var max=line*(Number(t.getAttribute("data-max"))||8)+pad;var min=line*(Number(t.getAttribute("data-min"))||1)+pad;
+t.style.height="auto";t.style.height=Math.max(min,Math.min(t.scrollHeight,max))+"px";t.style.overflowY=t.scrollHeight>max+1?"auto":"hidden";
+var on=t.value.trim()!=="";box.classList.toggle("has-text",on);var sends=box.querySelectorAll(".k-send[data-gate]:not(:disabled)");for(var i=0;i<sends.length;i++)sends[i].setAttribute("aria-disabled",String(!on));}
+function syncAll(){var all=d.querySelectorAll(".k-composer-ta");for(var i=0;i<all.length;i++)sync(all[i]);}
+var stack=[];
+function visible(el){return !!el&&el.isConnected&&el.getClientRects().length>0;}
+function openPanel(panel,trigger,onClose){if(stack.length)closeTop("close");var floating=panel.classList.contains("k-pop");var ph=phone();
+if(!panel.isConnected)d.body.appendChild(panel);var scrim=d.createElement("div");scrim.className="k-scrim"+(!floating||ph?" dim":"");panel.parentNode.insertBefore(scrim,panel);
+panel.hidden=false;panel.setAttribute("aria-modal","true");if(!panel.hasAttribute("tabindex"))panel.tabIndex=-1;panel.classList.toggle("as-sheet",floating&&ph);
+if(floating&&!ph&&trigger){var at=trigger.getBoundingClientRect();var w=panel.offsetWidth||336,h=panel.offsetHeight||200;var left=Math.min(Math.max(8,at.right-w),window.innerWidth-w-8);var below=at.bottom+6;var top=below+h>window.innerHeight-8?Math.max(8,at.top-h-6):below;panel.style.left=Math.round(left)+"px";panel.style.top=Math.round(top)+"px";}
+var inerted=[];for(var node=panel;node!==d.body&&node.parentElement;node=node.parentElement){var kids=node.parentElement.children;for(var i=0;i<kids.length;i++){var s=kids[i];if(s===node||s===scrim||s.inert)continue;s.inert=true;inerted.push(s);}}
+var entry={panel:panel,scrim:scrim,trigger:trigger,inerted:inerted,onClose:onClose};stack.push(entry);scrim.addEventListener("click",function(){closeEntry(entry);});
+var first=panel.querySelector("[autofocus]")||panel.querySelector('input:not([type="hidden"]), textarea, select')||panel;first.focus();}
+function closeEntry(entry){var at=stack.indexOf(entry);if(at<0)return;stack.splice(at,1);for(var i=0;i<entry.inerted.length;i++)entry.inerted[i].inert=false;
+entry.scrim.remove();entry.panel.hidden=true;entry.panel.classList.remove("as-sheet");if(visible(entry.trigger))entry.trigger.focus();if(entry.onClose)entry.onClose();}
+function closeTop(){var top=stack[stack.length-1];if(top)closeEntry(top);}
+function menu(trigger,title,items){var ph=phone();var panel=d.createElement("div");panel.className=ph?"k-sheet":"k-pop k-pop-menu";panel.setAttribute("role","dialog");
+var id="k-menu-"+Math.random().toString(36).slice(2,8);panel.setAttribute("aria-labelledby",id);var head=d.createElement("div");head.className=ph?"k-sheet-h":"k-pop-h";
+var h=d.createElement(ph?"h2":"h3");h.id=id;h.textContent=title;var x=d.createElement("button");x.type="button";x.className="k-btn k-btn-ghost k-btn-sm k-btn-icon";x.setAttribute("aria-label","Close");x.setAttribute("data-k-close","");x.textContent="\\u00d7";
+head.appendChild(h);head.appendChild(x);var list=d.createElement("div");list.className="k-menu";var entry;
+items.forEach(function(item){var b=d.createElement("button");b.type="button";b.textContent=item.current?item.label+" \\u00b7 current":item.label;if(item.current)b.setAttribute("aria-current","true");b.addEventListener("click",function(){closeTop();item.act();});list.appendChild(b);});
+panel.appendChild(head);panel.appendChild(list);openPanel(panel,trigger,function(){panel.remove();});}
+function composerMenu(target){var chip=target.closest("[data-k-composer-project]");var plus=target.closest("[data-k-composer-plus]");var id=chip?chip.getAttribute("data-k-composer-project"):plus?plus.getAttribute("data-k-composer-plus"):null;if(id===null)return false;
+var hidden=d.getElementById(id+"-project");function choose(trigger){if(!hidden)return;var items=[];try{var parsed=JSON.parse(hidden.getAttribute("data-items")||"[]");if(Array.isArray(parsed))items=parsed.filter(function(one){return typeof one==="string";});}catch(e){items=[];}
+menu(trigger,"Project",items.map(function(name){return{label:name,current:name===hidden.value,act:function(){hidden.value=name;var c=d.querySelector('[data-k-composer-project="'+CSS.escape(id)+'"]');if(c){var l=c.querySelector("[data-k-project-name]");if(l)l.textContent=name;c.setAttribute("aria-label","Project: "+name+". Change");}hidden.dispatchEvent(new Event("change",{bubbles:true}));}};}));}
+if(chip){choose(chip);return true;}var attach=d.querySelector('input[type="file"][data-k-attach="'+CSS.escape(id)+'"]');var items=[];if(attach)items.push({label:"Attach a file",act:function(){attach.click();}});
+if(hidden)items.push({label:"Choose project",act:function(){choose(d.querySelector('[data-k-composer-project="'+CSS.escape(id)+'"]')||plus);}});if(items.length)menu(plus,"Add to your message",items);return true;}
+d.addEventListener("input",function(e){var t=e.target;if(t&&t.classList&&t.classList.contains("k-composer-ta"))sync(t);});
+d.addEventListener("click",function(e){var t=e.target;if(!t||!t.closest)return;
+if(t.closest('.k-send[data-gate][aria-disabled="true"]')){e.preventDefault();return;}
+var draft=t.closest("[data-k-draft]");if(draft){var box=d.getElementById((draft.getAttribute("data-k-into")||"")+"-text");if(box&&!box.disabled){e.preventDefault();var words=draft.getAttribute("data-k-draft")||"";var typed=box.value;
+box.value=typed.trim()===""?words:typed.indexOf(words)>=0?typed:typed.replace(/\\s+$/,"")+"\\n"+words;sync(box);box.focus();}return;}
+if((t.closest("[data-k-composer-project]")||t.closest("[data-k-composer-plus]"))&&composerMenu(t)){e.preventDefault();return;}
+var opener=t.closest("[data-k-open]");if(opener){var panel=d.getElementById(opener.getAttribute("data-k-open")||"");if(panel){e.preventDefault();openPanel(panel,opener);}return;}
+if(t.closest("[data-k-close]")){var top=stack[stack.length-1];if(top&&top.panel.contains(t)){e.preventDefault();closeEntry(top);}return;}
+var sw=t.closest("button.k-switch[role=switch][data-k-switch]");if(sw){var on=sw.getAttribute("aria-checked")!=="true";sw.setAttribute("aria-checked",String(on));var w=(sw.getAttribute("data-k-switch")||"On|Off").split("|");var s=sw.querySelector("[data-k-words]");if(s)s.textContent=(on?w[0]:w[1])||"";sw.dispatchEvent(new CustomEvent("k-switch",{bubbles:true,detail:{on:on}}));}});
+d.addEventListener("keydown",function(e){var top=stack[stack.length-1];if(!top)return;if(e.key==="Escape"){e.preventDefault();closeEntry(top);return;}if(e.key!=="Tab")return;
+var items=Array.prototype.filter.call(top.panel.querySelectorAll(FOCUSABLE),visible);if(!items.length){e.preventDefault();top.panel.focus();return;}var first=items[0],last=items[items.length-1];
+if(e.shiftKey&&(d.activeElement===first||d.activeElement===top.panel)){e.preventDefault();last.focus();}else if(!e.shiftKey&&d.activeElement===last){e.preventDefault();first.focus();}},true);
+function kb(){var v=window.visualViewport;if(!v)return;var covered=Math.max(0,Math.round(window.innerHeight-v.height-v.offsetTop));d.documentElement.style.setProperty("--kb",covered+"px");d.documentElement.classList.toggle("kb-open",covered>80);}
+if(window.visualViewport){window.visualViewport.addEventListener("resize",kb);window.visualViewport.addEventListener("scroll",kb);}
+if(d.readyState==="loading")d.addEventListener("DOMContentLoaded",syncAll);else syncAll();
+})();`;
+/** Whether a page's markup has kit pieces the standalone behaviour wires (a composer, an overlay, a button switch, an idea). */
+export const KIT_BEHAVIOR_MARKUP = /class="k-composer[ "]|data-k-open=|data-k-switch=|data-k-draft=/;

package/dist/server/kit.d.ts

@@ -0,0 +1,405 @@
+/**
+ * The revamp kit for server pages: the same markup the React kit (src/browser/kit/) renders, as `Html`, so a
+ * server page and a React view built from the kit look and behave alike. Rules: src/design/KIT.md. Look:
+ * src/design/kit.css (served with console.css). Words and approval rules: src/design/kit.ts.
+ *
+ * Everything here escapes by construction (html.ts): strings are text, only `Html` is markup. Behaviour (the
+ * composer growing, Stop, the keyboard, overlays, switches) comes from the workspace bundle's kit behaviour
+ * (src/browser/kit/behavior.ts), which wires any kit markup the workspace places; every control here still works
+ * as plain HTML without it.
+ */
+import { type AttributeValue, type Html, type HtmlValue, type PostFormOptions } from "../html.js";
+import { type ApprovalFacts, type ApprovalKind, type ChipTone, type KitIcon, type StatusKey, type StepItem, type TimingRow } from "../design/kit.js";
+import type { Headline } from "../task-status.js";
+type Attrs = Readonly<Record<string, AttributeValue>>;
+export declare function icon(name: KitIcon, small?: boolean): Html;
+export type BtnVariant = "primary" | "outline" | "ghost" | "danger";
+export type BtnOptions = {
+    variant?: BtnVariant;
+    sm?: boolean;
+    /** Icon-only: give it `label` (read aloud and shown as the tooltip). */
+    iconOnly?: KitIcon;
+    lead?: KitIcon;
+    /** A link styled as a button (navigation is never the primary act). */
+    href?: string;
+    type?: "button" | "submit";
+    /** The screen's one primary, which the phone dock also carries: hidden in the card on a phone. */
+    docked?: boolean;
+    attrs?: Attrs;
+    className?: string;
+};
+export declare function btn(label: string, options?: BtnOptions): Html;
+export declare function chip(word: string, tone?: ChipTone, options?: {
+    dot?: boolean;
+}): Html;
+/** One of the five status words in its tone. */
+export declare const status: (key: StatusKey) => Html;
+/** A task's headline (task-status.ts) as its chip. */
+export declare function headlineChip(headline: Headline): Html;
+/** A count pill: ink only for a Needs-you count; zero is muted. */
+export declare function count(n: number, options?: {
+    ink?: boolean;
+}): Html;
+export type TabItem = {
+    key: string;
+    label: string;
+    href: string;
+    count?: Html;
+};
+/** Sections of one object as addresses: a <nav> of links, the current one aria-current="page". */
+export declare function linkTabs(label: string, current: string, items: readonly TabItem[]): Html;
+/** Filters or views of a list as addresses: the segmented track. */
+export declare function segLinks(label: string, current: string, items: readonly TabItem[]): Html;
+/** Filters or views as addresses with icons (List / Board): each item an icon, its label read aloud. */
+export declare function iconSegLinks(label: string, current: string, items: ReadonlyArray<{
+    key: string;
+    label: string;
+    href: string;
+    icon: KitIcon;
+}>): Html;
+/** A list's text filter (the workspace narrows the rows on the page as it is typed; without it, a GET form). */
+export declare function filterInput(options: {
+    label: string;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+}): Html;
+/** A field: label, control, one hint line, and the error slot tied to the control (aria-describedby). */
+export declare function field(options: {
+    id: string;
+    label: string;
+    control: Html;
+    hint?: string;
+    error?: string | null;
+}): Html;
+/** A text input; `error` marks it invalid and points it at its error line. */
+export declare function input(options: {
+    id: string;
+    name: string;
+    value?: string;
+    type?: "text" | "number" | "url" | "email" | "search" | "password" | "time";
+    error?: boolean;
+    hint?: boolean;
+    attrs?: Attrs;
+}): Html;
+export declare function textarea(options: {
+    id: string;
+    name: string;
+    value?: string;
+    rows?: number;
+    error?: boolean;
+    attrs?: Attrs;
+}): Html;
+/** A native select with the kit's chevron: 32px, `sm` 28px in a toolbar, 44px and 16px text on a phone. */
+export declare function select(options: {
+    id?: string;
+    name?: string;
+    label?: string;
+    items: ReadonlyArray<readonly [value: string, label: string] | string>;
+    current?: string;
+    sm?: boolean;
+    wide?: boolean;
+    attrs?: Attrs;
+}): Html;
+/** An on/off setting in a form: a checkbox with role=switch and a visible label (posts `name=on` when on). */
+export declare function switchInput(options: {
+    id: string;
+    name: string;
+    label: string;
+    on: boolean;
+    attrs?: Attrs;
+}): Html;
+/** Two columns: label and one muted line | the control. `inline` keeps the control beside the label on a phone. */
+export declare function formRow(label: string, hint: string | null, control: Html, variant?: "" | "inline" | "top" | "wide"): Html;
+/** Radio cards: one choice from a few, each with a bold label and one muted line. */
+export declare function radios(options: {
+    name: string;
+    legend: string;
+    current: string;
+    items: ReadonlyArray<{
+        value: string;
+        label: string;
+        text?: string;
+        tag?: Html;
+    }>;
+}): Html;
+export declare const acts: (...buttons: HtmlValue[]) => Html;
+export declare function facts(rows: ReadonlyArray<readonly [key: string, value: HtmlValue]>): Html;
+export declare const note: (text: HtmlValue) => Html;
+/** A refusal or problem, where it happened (role=alert): what went wrong and what didn't change. */
+export declare const notice: (text: HtmlValue) => Html;
+/** One neutral system line (a builder offline, an update): not a failure, never amber. */
+export declare const infoLine: (text: HtmlValue) => Html;
+export declare function empty(options: {
+    title: string;
+    text?: string;
+    action?: Html;
+}): Html;
+/** A disclosure for secondary detail. */
+export declare const disclose: (summary: string, body: HtmlValue, open?: boolean) => Html;
+/** A group heading with its count; `right` puts one quiet tool at its end. */
+export declare const group: (label: string, n?: Html, right?: Html) => Html;
+/** A list row: chip · title (the whole row is the link) · one muted line · meta · one action, always in one column. */
+export declare function row(options: {
+    href?: string;
+    chip: Html;
+    title: string;
+    desc?: HtmlValue;
+    meta?: HtmlValue;
+    action?: Html;
+    wait?: boolean;
+    message?: Html;
+    attrs?: Attrs;
+}): Html;
+/** The phone header: back (or nothing), the title, one trailing action. Hidden at a desk. */
+export declare function phoneHeader(title: string, options?: {
+    back?: string;
+    trailing?: Html;
+}): Html;
+/** A list page's header: the phone header and the desk top bar (title · muted context · spacer · tools). */
+export declare function pageHeader(title: string, options?: {
+    ctx?: HtmlValue;
+    right?: Html;
+    back?: string;
+    phoneTitle?: string;
+    trailing?: Html;
+}): Html;
+/** A reading page's header: a back link, the one h1, a meta line. `same` when the phone header already shows the
+ * title: the h1 stays for assistive tech and is drawn once. */
+export declare function docHeader(options: {
+    title: string;
+    back?: readonly [href: string, label: string];
+    meta?: HtmlValue;
+    right?: Html;
+    same?: boolean;
+}): Html;
+export declare const doc: (...parts: HtmlValue[]) => Html;
+/** The four fixed slots: status (chip + heading) · supporting text · actions · terms, plus the error slot. The same
+ * slots in every state (waiting, approved, automatic, refused), so nothing moves. `body`: the choice the act takes
+ * (radio cards, a note), between the text and the actions. */
+export declare function slots(options: {
+    wait?: boolean;
+    status: Html;
+    text: HtmlValue;
+    body?: HtmlValue;
+    acts: HtmlValue;
+    terms: HtmlValue;
+    err?: HtmlValue;
+    attrs?: Attrs;
+}): Html;
+/** This request's approval facts: Passwordless as the request sees it, plus what the page read for this act. */
+export declare function approvalFactsNow(read?: Omit<ApprovalFacts, "passwordless">): ApprovalFacts;
+/**
+ * The control that approves one act, inside its slots: a POST form with the act's button and, only when the rules
+ * say so, the password field (name `token`, as every ceremony reads it). Automatic approval renders nothing to
+ * press. The page decides only what it shows: the server proves the person, the freshness and the scope again
+ * when the form arrives.
+ */
+export declare function approveForm(options: {
+    action: string;
+    kind: ApprovalKind;
+    facts: ApprovalFacts;
+    label: string;
+    /** The screen's one primary (ink); otherwise outline. */
+    primary?: boolean;
+    docked?: boolean;
+    /** Hidden fields, return path, project revision, extra attributes. Never `signedOut`: an approval always carries the
+     * request's CSRF field. Extra classes are added to `k-approve`, never instead of it. */
+    form?: Omit<PostFormOptions, "signedOut">;
+    /** Extra controls before the button (a note field, a confirm checkbox). */
+    before?: Html;
+}): Html;
+/** The terms line for an act, from the same rules. */
+export declare const approvalTerms: (kind: ApprovalKind, facts: ApprovalFacts) => string;
+/** Waits that aren't tasks, on their own page (a spend limit, a failed backup): one amber outline, a count, items
+ * split by hairlines, each with its one action. They never join the global Needs-you count. */
+export declare function needsPanel(items: ReadonlyArray<{
+    title: string;
+    text?: string;
+    action?: Html;
+}>, label?: string): Html;
+/** A run's steps on one elapsed-time axis (Release, a flow's run, a pull request's checks). */
+export declare function timing(options: {
+    label?: string;
+    chip?: Html;
+    rows: readonly TimingRow[];
+    scale?: number;
+    foot?: HtmlValue;
+    head?: string;
+}): Html;
+/** A few named steps on one line, filled up to where the work is. */
+export declare function steps(items: readonly StepItem[], label?: string): Html;
+/** The board's columns; on a phone one at a time (`on`). */
+export declare const board: (label: string, ...columns: HtmlValue[]) => Html;
+export declare function boardCol(options: {
+    label: string;
+    count?: Html;
+    needs?: boolean;
+    on?: boolean;
+    empty: string;
+    cards: readonly Html[];
+}): Html;
+export declare const card: (options: {
+    href: string;
+    title: string;
+    meta: HtmlValue;
+}) => Html;
+/** The not-found page, inside the shell: what was asked for and two ways on. */
+export declare function notFound(path: string, options?: {
+    title?: string;
+    text?: string;
+}): Html;
+/** The Settings frame: Overview and the eight groups, a desk breadcrumb, a phone back header, one column. */
+export declare function settingsShell(options: {
+    group: string;
+    title: string;
+    lead?: string;
+    body: HtmlValue;
+    sub?: boolean;
+    back?: string;
+    flags?: Readonly<Record<string, boolean>>;
+}): Html;
+/** The round send, an arrow up; with `stop` it carries its Stop twin (the composer's .working class swaps them).
+ * `gate` (a message box) marks it aria-disabled while the box is empty. */
+export declare function sendButton(options?: {
+    label?: string;
+    name?: string;
+    gate?: boolean;
+    empty?: boolean;
+    stop?: {
+        label?: string;
+        attrs?: Attrs;
+    };
+    attrs?: Attrs;
+}): Html;
+/**
+ * The message box: one soft rounded container, the textarea grows from `rows` to `maxRows` lines then scrolls,
+ * one bottom row inside (+ menu, the project as a quiet chip, small controls, the round send). Textarea
+ * `<id>-text` (named `name`), refusal slot `<id>-err`, chosen project a hidden input `<id>-project` (named
+ * `projectName`). A refused send keeps the words in the box with the reason in the error slot.
+ */
+export declare function composer(options: {
+    id: string;
+    name: string;
+    label: string;
+    placeholder?: string;
+    value?: string;
+    rows?: number;
+    maxRows?: number;
+    plus?: boolean;
+    project?: {
+        current: string;
+        items: readonly string[];
+        name?: string;
+    };
+    before?: Html;
+    send: Html;
+    note?: HtmlValue;
+    error?: string | null;
+    disabled?: boolean;
+    line?: boolean;
+    working?: boolean;
+    /** Extra attributes for the textarea (maxlength, required, autofocus). */
+    textAttrs?: Attrs;
+}): Html;
+export type OverlayKind = "popover" | "drawer" | "sheet" | "menu";
+/** A floating panel, hidden until its trigger (`overlayTrigger`) opens it: role=dialog, a labelled Close, Escape
+ * and the scrim close it, Tab stays inside, focus returns to the trigger. A popover and a menu become a bottom
+ * sheet on a phone. */
+export declare function overlay(options: {
+    id: string;
+    kind: OverlayKind;
+    title: string;
+    sub?: string;
+    body: HtmlValue;
+}): Html;
+/** The button that opens an overlay. */
+export declare function overlayTrigger(label: string, overlayId: string, options?: Omit<BtnOptions, "href" | "type">): Html;
+/** The phone dock: this screen's one primary (the same act the card hides on a phone). */
+export declare function dock(primary: Html | null): Html;
+/** Several kit parts joined. */
+export declare const parts: (...values: HtmlValue[]) => Html;
+/**
+ * A page outside the shell (sign in, the first account, an invite, signed out, an error): the brand, one narrow
+ * column with the one h1, then an optional foot line under a hairline. `brand` is the product mark (chrome.ts
+ * BRAND_HTML). These pages carry no script: everything on them works as plain HTML.
+ */
+export declare function outPage(options: {
+    brand: Html;
+    brandHref?: string;
+    title: string;
+    sub?: HtmlValue;
+    note?: HtmlValue;
+    body?: HtmlValue;
+    foot?: HtmlValue;
+}): Html;
+/** A form field outside the shell: label, input, one hint line, and its error line (the field is aria-invalid, described
+ * by both and focused when the error is about it). The error is a server's refusal; nothing here validates. */
+export declare function outField(options: {
+    id: string;
+    label: string;
+    name: string;
+    type?: "text" | "password";
+    value?: string;
+    hint?: string;
+    error?: string | null;
+    attrs?: Attrs;
+}): Html;
+export type CheckStep = {
+    key: string;
+    title: string;
+    text: HtmlValue;
+    state: "done" | "open" | "checking";
+    action?: Html | null;
+};
+/** A short list of steps: a mark, the step and one line, its one action. Done steps read muted with a check; a step
+ * being checked shows a static ring (running state never animates). The state is also said in words. */
+export declare function checklist(steps: readonly CheckStep[], label?: string): Html;
+/** Ideas that draft words into a composer: each is a link that opens the page with the words in the box (no script),
+ * and with the kit behaviour it adds them to the box in place (`data-k-draft`, `data-k-into` = the composer id). */
+export declare function ideas(options: {
+    label: HtmlValue;
+    into: string;
+    items: ReadonlyArray<{
+        label: string;
+        draft: string;
+        href: string;
+    }>;
+}): Html;
+/** A settings section: its heading (with an optional muted state after it), one muted lead line, then its rows.
+ * No nested wells. `id` is also the anchor other pages link to. */
+export declare function settingsSection(options: {
+    id: string;
+    title: string;
+    state?: HtmlValue;
+    lead?: HtmlValue;
+    right?: Html;
+    body: HtmlValue;
+}): Html;
+/** One row that opens a settings page: icon, title (with "1 item needs you" when something waits), one status line,
+ * anything on the right, a chevron. The whole row is the link. */
+export declare function settingsLink(options: {
+    href: string;
+    title: string;
+    status?: HtmlValue;
+    icon?: KitIcon;
+    needs?: number;
+    right?: Html;
+}): Html;
+/** A list of settings links under a section heading ("In this group"), or the overview's unlabelled list. */
+export declare function settingsLinks(title: string | null, links: readonly Html[], options?: {
+    label?: string;
+}): Html;
+/** A record row (a session, a token, a person, a device, a provider): title and one muted line · when · one action,
+ * and anything opened under it (a form, a refusal). */
+export declare function settingsRecord(options: {
+    title: HtmlValue;
+    sub?: HtmlValue;
+    when?: HtmlValue;
+    action?: HtmlValue;
+    more?: HtmlValue;
+    attrs?: Attrs;
+}): Html;
+/** A command or path to copy by hand: monospace, selectable. */
+export declare const codeLine: (text: string) => Html;
+export {};