@haruhimemoe/ui 0.7.0 → 0.8.0

package/dist/components/palette/recents.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @file src/components/palette/recents.ts
+ * @desc Which commands get used, in localStorage under "haruhime:palette:<key>": run count and
+ *       last-use time per command id, pruned to the 50 most recent. Every read and write is
+ *       guarded, so a blocked or full store means no recents, never an error.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/** Per command id: how many runs and when the last one was (ms since epoch). */
+export type Recents = Record<string, {
+    n: number;
+    t: number;
+}>;
+/**
+ * @function storageKeyFor
+ * @param key {string} the app's namespace (CommandPalette's `storageKey`)
+ * @returns {string} the localStorage key
+ */
+export declare const storageKeyFor: (key: string) => string;
+/**
+ * @function readRecents
+ * @param key {string} the app's namespace
+ * @returns {Recents} the stored recents, dropping entries that aren't `{ n, t }`; empty when
+ *          storage is missing, throws, or holds something that isn't JSON
+ */
+export declare function readRecents(key: string): Recents;
+/**
+ * @function recordRecent
+ * @param key {string} the app's namespace
+ * @param id {string} the command that ran
+ * @param now {number} the time, default Date.now()
+ * @returns {Recents} the recents after the write (empty when storage is unavailable)
+ */
+export declare function recordRecent(key: string, id: string, now?: number): Recents;
+/**
+ * @function recentIds
+ * @param recents {Recents} the stored recents
+ * @param limit {number} how many, default 5
+ * @returns {string[]} ids by last use, newest first
+ */
+export declare const recentIds: (recents: Recents, limit?: number) => string[];
+/**
+ * @function boostFrom
+ * @param recents {Recents} the stored recents
+ * @returns {(id: string) => number} the run count per id, 0 for unknown ids (rankResults' boost)
+ */
+export declare const boostFrom: (recents: Recents) => (id: string) => number;

package/dist/components/palette/recents.js

@@ -0,0 +1,85 @@
+/**
+ * @file src/components/palette/recents.ts
+ * @desc Which commands get used, in localStorage under "haruhime:palette:<key>": run count and
+ *       last-use time per command id, pruned to the 50 most recent. Every read and write is
+ *       guarded, so a blocked or full store means no recents, never an error.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+const LIMIT = 50;
+/**
+ * @function storageKeyFor
+ * @param key {string} the app's namespace (CommandPalette's `storageKey`)
+ * @returns {string} the localStorage key
+ */
+export const storageKeyFor = (key) => `haruhime:palette:${key}`;
+const isEntry = (value) => typeof value === "object" &&
+    value !== null &&
+    typeof value.n === "number" &&
+    typeof value.t === "number";
+/**
+ * @function readRecents
+ * @param key {string} the app's namespace
+ * @returns {Recents} the stored recents, dropping entries that aren't `{ n, t }`; empty when
+ *          storage is missing, throws, or holds something that isn't JSON
+ */
+export function readRecents(key) {
+    try {
+        const raw = localStorage.getItem(storageKeyFor(key));
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== "object" || parsed === null)
+            return {};
+        return Object.fromEntries(Object.entries(parsed).filter(([, value]) => isEntry(value)));
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * @function recordRecent
+ * @param key {string} the app's namespace
+ * @param id {string} the command that ran
+ * @param now {number} the time, default Date.now()
+ * @returns {Recents} the recents after the write (empty when storage is unavailable)
+ */
+export function recordRecent(key, id, now = Date.now()) {
+    // Storage that can't be read is treated as absent: nothing is written over it either.
+    try {
+        localStorage.getItem(storageKeyFor(key));
+    }
+    catch {
+        return {};
+    }
+    const recents = readRecents(key);
+    const entry = recents[id];
+    recents[id] = { n: (entry?.n ?? 0) + 1, t: now };
+    const kept = Object.fromEntries(Object.entries(recents)
+        .sort(([, a], [, b]) => b.t - a.t)
+        .slice(0, LIMIT));
+    try {
+        localStorage.setItem(storageKeyFor(key), JSON.stringify(kept));
+        return kept;
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * @function recentIds
+ * @param recents {Recents} the stored recents
+ * @param limit {number} how many, default 5
+ * @returns {string[]} ids by last use, newest first
+ */
+export const recentIds = (recents, limit = 5) => Object.entries(recents)
+    .sort(([, a], [, b]) => b.t - a.t)
+    .slice(0, limit)
+    .map(([id]) => id);
+/**
+ * @function boostFrom
+ * @param recents {Recents} the stored recents
+ * @returns {(id: string) => number} the run count per id, 0 for unknown ids (rankResults' boost)
+ */
+export const boostFrom = (recents) => (id) => recents[id]?.n ?? 0;

package/dist/components/palette/rows.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @file src/components/palette/rows.ts
+ * @desc What the list shows for a state, pure: option rows (a command under a group heading,
+ *       with the title's matched spans) and hint rows (not selectable: provider states, no
+ *       matches). Empty query: Recent, then every group in declaration order. A query: the
+ *       calculator row at the root, the ranked static matches, then each provider's rows or its
+ *       state. In a choice prompt: the choices, fuzzy-filtered.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type FuzzyMatch } from "./fuzzy.js";
+import type { ArgState, ProviderResult } from "./store.js";
+import type { Command, PaletteContext, Provider } from "./types.js";
+/** One list entry. Options are selectable; hints are text. */
+export type Row = {
+    kind: "option";
+    id: string;
+    command: Command;
+    ranges: FuzzyMatch["ranges"];
+    group: string;
+} | {
+    kind: "hint";
+    id: string;
+    text: string;
+};
+/** What buildRows needs from the palette. */
+export type RowsInput = {
+    query: string;
+    commands: readonly Command[];
+    providers: readonly Provider[];
+    providerResults: Record<string, ProviderResult>;
+    recentIds: readonly string[];
+    boost: (id: string) => number;
+    isRoot: boolean;
+    calculator: boolean;
+    arg: ArgState | null;
+    ctx: PaletteContext;
+};
+/** The id of the calculator's row and command. */
+export declare const CALC_ID = "calc";
+/**
+ * @function buildRows
+ * @param input {RowsInput} the query, commands, providers and their results, recents, and the
+ *        argument prompt in progress
+ * @returns {Row[]} the list, top to bottom
+ */
+export declare function buildRows(input: RowsInput): Row[];
+/**
+ * @function optionCount
+ * @param rows {readonly Row[]} the list
+ * @returns {number} how many rows can be selected
+ */
+export declare const optionCount: (rows: readonly Row[]) => number;
+/**
+ * @function optionAt
+ * @param rows {readonly Row[]} the list
+ * @param index {number} the active index, counting options only
+ * @returns {Extract<Row, { kind: "option" }> | undefined} that option
+ */
+export declare const optionAt: (rows: readonly Row[], index: number) => Extract<Row, {
+    kind: "option";
+}> | undefined;

package/dist/components/palette/rows.js

@@ -0,0 +1,136 @@
+/**
+ * @file src/components/palette/rows.ts
+ * @desc What the list shows for a state, pure: option rows (a command under a group heading,
+ *       with the title's matched spans) and hint rows (not selectable: provider states, no
+ *       matches). Empty query: Recent, then every group in declaration order. A query: the
+ *       calculator row at the root, the ranked static matches, then each provider's rows or its
+ *       state. In a choice prompt: the choices, fuzzy-filtered.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { evaluate, formatResult, isBareNumber } from "./calc.js";
+import { rankResults } from "./fuzzy.js";
+/** The id of the calculator's row and command. */
+export const CALC_ID = "calc";
+const DEFAULT_GROUP = "Commands";
+const DEFAULT_MIN = 2;
+const option = (command, group, ranges = [], prefix = "") => ({
+    kind: "option",
+    id: `${prefix}${group}/${command.id}`,
+    command,
+    ranges,
+    group,
+});
+const hint = (text, scope = "") => ({
+    kind: "hint",
+    id: `hint:${scope}${text}`,
+    text,
+});
+const visible = (commands, ctx) => commands.filter((command) => {
+    if (!command.when)
+        return true;
+    try {
+        return command.when(ctx);
+    }
+    catch (error) {
+        console.error(`CommandPalette: "${command.id}" when() threw`, error);
+        return false;
+    }
+});
+const choiceRows = (arg) => {
+    const spec = arg.command.args?.[arg.index];
+    if (spec?.type !== "choice")
+        return [];
+    const group = spec.label;
+    const rows = (spec.choices ?? []).map((choice) => ({
+        id: choice.value,
+        title: choice.label,
+        subtitle: choice.subtitle,
+    }));
+    if (arg.query.trim() === "")
+        return rows.map((row) => option(row, group));
+    return rankResults(arg.query, rows, () => 0).map((scored) => option(scored.command, group, scored.ranges));
+};
+// A bare word ("e", "pi") is a search, not a sum, even though the calculator knows it.
+const BARE_WORD = /^[a-z]+$/i;
+const calcRow = (query) => {
+    if (isBareNumber(query) || BARE_WORD.test(query))
+        return null;
+    const value = evaluate(query);
+    if (value === null)
+        return null;
+    const text = formatResult(value);
+    const command = {
+        id: CALC_ID,
+        title: `= ${text}`,
+        subtitle: "Enter to copy",
+        closeOnRun: false,
+        run: (ctx) => ctx.copy(text),
+    };
+    return option(command, "Calculator");
+};
+const providerRows = (input) => input.providers.flatMap((provider) => {
+    const group = provider.group ?? "Results";
+    const min = provider.minLength ?? DEFAULT_MIN;
+    const scope = `${provider.id}:`;
+    if (input.query.trim().length < min)
+        return [hint(`Type ${min} characters to search`, scope)];
+    const result = input.providerResults[provider.id];
+    const rows = (result?.rows ?? []).map((command) => option(command, group, [], scope));
+    // Searching: the last rows stay under the hint, so the list doesn't flash per keystroke.
+    if (!result || result.state === "loading")
+        return [hint("Searching…", scope), ...rows];
+    if (result.state === "error")
+        return [hint("Couldn't search, try again", scope)];
+    if (rows.length === 0)
+        return [hint(`No results for “${input.query.trim()}”`, scope)];
+    return rows;
+});
+/**
+ * @function buildRows
+ * @param input {RowsInput} the query, commands, providers and their results, recents, and the
+ *        argument prompt in progress
+ * @returns {Row[]} the list, top to bottom
+ */
+export function buildRows(input) {
+    if (input.arg)
+        return choiceRows(input.arg);
+    const commands = visible(input.commands, input.ctx);
+    const query = input.query.trim();
+    if (query === "") {
+        const recent = input.recentIds
+            .map((id) => commands.find((command) => command.id === id))
+            .filter((command) => command !== undefined)
+            .map((command) => option(command, "Recent", [], "recent:"));
+        return [
+            ...recent,
+            ...commands.map((command) => option(command, command.group ?? DEFAULT_GROUP)),
+        ];
+    }
+    const rows = [];
+    const calc = input.isRoot && input.calculator ? calcRow(query) : null;
+    if (calc)
+        rows.push(calc);
+    for (const scored of rankResults(query, commands, input.boost)) {
+        rows.push(option(scored.command, scored.command.group ?? DEFAULT_GROUP, scored.ranges));
+    }
+    rows.push(...providerRows(input));
+    if (!rows.some((row) => row.kind === "option") && input.providers.length === 0) {
+        rows.push(hint("No matching commands"));
+    }
+    return rows;
+}
+/**
+ * @function optionCount
+ * @param rows {readonly Row[]} the list
+ * @returns {number} how many rows can be selected
+ */
+export const optionCount = (rows) => rows.filter((row) => row.kind === "option").length;
+/**
+ * @function optionAt
+ * @param rows {readonly Row[]} the list
+ * @param index {number} the active index, counting options only
+ * @returns {Extract<Row, { kind: "option" }> | undefined} that option
+ */
+export const optionAt = (rows, index) => rows.filter((row) => row.kind === "option")[index];

package/dist/components/palette/siteCommands.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @file src/components/palette/siteCommands.ts
+ * @desc The default command set every tool gets: "Go to <page>" from the nav items, "Open
+ *       <tool>" from HARUHIME_TOOLS, page actions (copy URL, back, top, reload, GitHub), account
+ *       (sign in, my account, sign out by signedIn), and help (the shortcuts page, report a bug).
+ *       Ids are stable ("site.copy-url") so recents survive relabeling. Client-only: it opens
+ *       tabs and scrolls.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type HaruhimeToolId } from "../shell/haruhimeTools.js";
+import type { SiteLinkItem } from "../shell/links.js";
+import type { Command } from "./types.js";
+/** Which default groups to build and what they need. */
+export type SiteCommandsOptions = {
+    /** The nav items the app passes to SiteHeader; one "Go to <label>" per linked item. */
+    pages?: readonly SiteLinkItem[] | undefined;
+    /** "Open <tool>" for every other live tool plus haruhime.moe. The current tool is skipped. false leaves them out. */
+    tools?: HaruhimeToolId | false | undefined;
+    /** The app's repo URL: "Open on GitHub" and "Report a bug". */
+    repo?: string | undefined;
+    account?: {
+        signedIn: boolean;
+        signInHref: string;
+        accountHref?: string | undefined;
+        /** Navigated, not fetched (next-kit's sign-out route). */
+        signOutHref?: string | undefined;
+    } | undefined;
+    /** Default: every group. */
+    include?: readonly ("navigate" | "page" | "account" | "help")[] | undefined;
+};
+/**
+ * @function siteCommands
+ * @param options {SiteCommandsOptions} pages, tools, repo, account and which groups to include
+ * @returns {Command[]} the defaults in order: Navigate, Page, Account, Help
+ */
+export declare function siteCommands(options?: SiteCommandsOptions): Command[];

package/dist/components/palette/siteCommands.js

@@ -0,0 +1,152 @@
+/**
+ * @file src/components/palette/siteCommands.ts
+ * @desc The default command set every tool gets: "Go to <page>" from the nav items, "Open
+ *       <tool>" from HARUHIME_TOOLS, page actions (copy URL, back, top, reload, GitHub), account
+ *       (sign in, my account, sign out by signedIn), and help (the shortcuts page, report a bug).
+ *       Ids are stable ("site.copy-url") so recents survive relabeling. Client-only: it opens
+ *       tabs and scrolls.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+"use client";
+import { isExternalHref } from "../../utils/href.js";
+import { HARUHIME_TOOLS } from "../shell/haruhimeTools.js";
+const slug = (label) => label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "") || "page";
+const openTab = (href) => {
+    window.open(href, "_blank", "noopener");
+};
+const go = (href, ctx) => isExternalHref(href) ? openTab(href) : ctx.navigate(href);
+const reducedMotion = () => typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const navigate = (options) => {
+    const pages = (options.pages ?? []).flatMap((item) => {
+        const href = item.href;
+        if (!href)
+            return [];
+        return [
+            {
+                id: `site.go.${slug(item.label)}`,
+                title: `Go to ${item.label}`,
+                group: "Navigate",
+                keywords: [href],
+                run: (ctx) => go(href, ctx),
+            },
+        ];
+    });
+    if (options.tools === false)
+        return pages;
+    const tools = HARUHIME_TOOLS.filter((tool) => tool.id !== options.tools).map((tool) => ({
+        id: `site.tool.${tool.id}`,
+        title: `Open ${tool.name}`,
+        subtitle: tool.blurb,
+        group: "Navigate",
+        run: () => openTab(tool.href),
+    }));
+    tools.push({
+        id: "site.tool.home",
+        title: "Open haruhime.moe",
+        subtitle: "all tools",
+        group: "Navigate",
+        run: () => openTab("https://www.haruhime.moe"),
+    });
+    return [...pages, ...tools];
+};
+const page = (options) => {
+    const list = [
+        {
+            id: "site.copy-url",
+            title: "Copy page URL",
+            group: "Page",
+            shortcut: "mod+shift+c",
+            closeOnRun: false,
+            run: (ctx) => ctx.copy(location.href),
+        },
+        { id: "site.back", title: "Go back", group: "Page", run: () => history.back() },
+        {
+            id: "site.top",
+            title: "Scroll to top",
+            group: "Page",
+            run: () => window.scrollTo({ top: 0, behavior: reducedMotion() ? "auto" : "smooth" }),
+        },
+        { id: "site.reload", title: "Reload page", group: "Page", run: () => location.reload() },
+    ];
+    if (options.repo)
+        list.push({
+            id: "site.github",
+            title: "Open on GitHub",
+            group: "Page",
+            keywords: ["source", "repo"],
+            run: () => openTab(options.repo),
+        });
+    return list;
+};
+const account = (options) => {
+    const acct = options.account;
+    if (!acct)
+        return [];
+    const list = [
+        {
+            id: "site.sign-in",
+            title: "Sign in",
+            group: "Account",
+            when: () => !acct.signedIn,
+            run: (ctx) => ctx.navigate(acct.signInHref),
+        },
+    ];
+    if (acct.accountHref)
+        list.push({
+            id: "site.account",
+            title: "My account",
+            group: "Account",
+            when: () => acct.signedIn,
+            run: (ctx) => ctx.navigate(acct.accountHref),
+        });
+    if (acct.signOutHref)
+        list.push({
+            id: "site.sign-out",
+            title: "Sign out",
+            group: "Account",
+            when: () => acct.signedIn,
+            run: (ctx) => ctx.navigate(acct.signOutHref),
+        });
+    return list;
+};
+const help = (options) => {
+    const list = [
+        {
+            id: "site.shortcuts",
+            title: "Keyboard shortcuts",
+            group: "Help",
+            shortcut: "?",
+            closeOnRun: false,
+            run: (ctx) => ctx.push({
+                title: "Keyboard shortcuts",
+                placeholder: "Filter shortcuts…",
+                commands: ctx.commands.filter((c) => c.shortcut && c.id !== "site.shortcuts"),
+            }),
+        },
+    ];
+    if (options.repo)
+        list.push({
+            id: "site.report",
+            title: "Report a bug",
+            group: "Help",
+            keywords: ["issue", "feedback"],
+            run: () => openTab(`${options.repo}/issues/new`),
+        });
+    return list;
+};
+const BUILDERS = { navigate, page, account, help };
+/**
+ * @function siteCommands
+ * @param options {SiteCommandsOptions} pages, tools, repo, account and which groups to include
+ * @returns {Command[]} the defaults in order: Navigate, Page, Account, Help
+ */
+export function siteCommands(options = {}) {
+    const include = options.include ?? ["navigate", "page", "account", "help"];
+    return include.flatMap((group) => BUILDERS[group](options));
+}

package/dist/components/palette/store.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @file src/components/palette/store.ts
+ * @desc The palette's state and reducer, pure: open or closed, a stack of page frames (each with
+ *       its own query, active row and provider results, so popping back restores where you
+ *       were), and the argument prompt in progress. Every key the palette handles is an action
+ *       here, so the rules test without a DOM. CommandPalette owns it through useReducer.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import type { Command, Page } from "./types.js";
+/** One provider's rows on a frame and where its search is. */
+export type ProviderResult = {
+    state: "loading" | "done" | "error";
+    rows: readonly Command[];
+};
+/** One page on the stack. */
+export type Frame = {
+    page: Page;
+    query: string;
+    active: number;
+    providers: Record<string, ProviderResult>;
+};
+/** The argument prompt in progress. */
+export type ArgState = {
+    command: Command;
+    index: number;
+    values: Record<string, string>;
+    query: string;
+    active: number;
+    error?: string | undefined;
+};
+export type PaletteState = {
+    open: boolean;
+    stack: Frame[];
+    arg: ArgState | null;
+};
+export type PaletteAction = {
+    type: "open";
+    root: Page;
+    page?: Page | undefined;
+} | {
+    type: "close";
+} | {
+    type: "query";
+    value: string;
+} | {
+    type: "active";
+    index: number;
+    count: number;
+} | {
+    type: "move";
+    delta: Delta;
+    count: number;
+} | {
+    type: "push";
+    page: Page;
+} | {
+    type: "pop";
+} | {
+    type: "beginArgs";
+    command: Command;
+} | {
+    type: "argAccept";
+    value: string;
+} | {
+    type: "argError";
+    message: string;
+} | {
+    type: "provided";
+    depth: number;
+    providerId: string;
+    result: ProviderResult;
+};
+/**
+ * @function initialState
+ * @returns {PaletteState} closed, empty
+ */
+export declare const initialState: () => PaletteState;
+/**
+ * @function topFrame
+ * @param state {PaletteState} the state
+ * @returns {Frame | undefined} the page on top, undefined while closed
+ */
+export declare const topFrame: (state: PaletteState) => Frame | undefined;
+type Delta = 1 | -1 | "home" | "end";
+/**
+ * @function reduce
+ * @param state {PaletteState} the state before
+ * @param action {PaletteAction} what happened
+ * @returns {PaletteState} the state after; the same object when nothing changes
+ */
+export declare function reduce(state: PaletteState, action: PaletteAction): PaletteState;
+export {};