forgebook 0.1.7 → 0.2.0

package/dist/src/shell/lazyTab.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A tab of the story's panel whose module loads the first time it is drawn (`lazyModule.tsx`), with a note until it is
+ * there and the reason when it cannot load.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import { type LazyModule } from "./lazyModule.tsx";
+/** The props of a tab drawn from its module. */
+export type LazyTabProps<TProps> = {
+    /** The tab's module. */
+    readonly module: LazyModule<TProps>;
+    /** The tab's own props. */
+    readonly tabProps: TProps;
+};
+/**
+ * A tab drawn once its module is there.
+ *
+ * @param props - the tab's module and its own props.
+ */
+export declare const LazyTab: <TProps extends object>({ module, tabProps }: LazyTabProps<TProps>) => ReactNode;

package/dist/src/shell/lazyTab.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LazyView } from "./lazyModule.js";
+import { STRINGS } from "./strings.js";
+/**
+ * A tab drawn once its module is there.
+ *
+ * @param props - the tab's module and its own props.
+ */
+export const LazyTab = ({ module, tabProps }) => (_jsx(LazyView, { module: module, props: tabProps, loading: _jsx("p", { className: "forgebook-tab-note", children: STRINGS.tabLoading }), failed: (message) => (_jsxs("p", { className: "forgebook-problems", role: "alert", children: [STRINGS.tabError, ": ", message] })) }));

package/dist/src/shell/logicView.d.ts

@@ -0,0 +1,24 @@
+import { type ViewSwitch } from "../switches.ts";
+import type { ViewState } from "../viewState.ts";
+/**
+ * Whether a toolbar control only changes a story's looks.
+ *
+ * @param id - the control's id.
+ * @param switches - the catalogue's switches.
+ */
+export declare const isLookControl: (id: string, switches: readonly ViewSwitch[]) => boolean;
+/**
+ * The view a story is drawn with: a logic story's never compares.
+ *
+ * @param view - the address's view.
+ * @param isLogic - whether the story is about logic.
+ */
+export declare const logicView: (view: ViewState, isLogic: boolean) => ViewState;
+/**
+ * A change of a logic story's view, back to the address: the address keeps its own compare.
+ *
+ * @param next - the changed view.
+ * @param addressView - the address's view.
+ * @param isLogic - whether the story is about logic.
+ */
+export declare const logicViewChange: (next: ViewState, addressView: ViewState, isLogic: boolean) => ViewState;

package/dist/src/shell/logicView.js

@@ -0,0 +1,39 @@
+/**
+ * What a story about logic (`parameters.logic`) leaves out of the toolbar and the stage: what only changes its looks.
+ *
+ * @remarks
+ * A logic story is a hook's or a function's scene, so the bar puts away the controls that only change how it looks
+ * (the colour scheme, the contrast, the style sheets, the text size, the backdrop), which the View menu still offers,
+ * and Compare, which it does not: the story is drawn once, never compared, while the address keeps its compare for the
+ * other stories.
+ *
+ * @module
+ */
+import { DEVICE_PARAMETER } from "../deviceView.js";
+import { switchWithRole } from "../switches.js";
+/** Forgebook's own controls that only change a story's looks. */
+const LOOK_OWN_CONTROLS = ["backdrop", "sheets", "text", DEVICE_PARAMETER];
+/**
+ * Whether a toolbar control only changes a story's looks.
+ *
+ * @param id - the control's id.
+ * @param switches - the catalogue's switches.
+ */
+export const isLookControl = (id, switches) => LOOK_OWN_CONTROLS.includes(id) ||
+    switchWithRole(switches, "colorScheme")?.id === id ||
+    switchWithRole(switches, "contrast")?.id === id;
+/**
+ * The view a story is drawn with: a logic story's never compares.
+ *
+ * @param view - the address's view.
+ * @param isLogic - whether the story is about logic.
+ */
+export const logicView = (view, isLogic) => isLogic && view.compare.length > 0 ? { ...view, compare: [] } : view;
+/**
+ * A change of a logic story's view, back to the address: the address keeps its own compare.
+ *
+ * @param next - the changed view.
+ * @param addressView - the address's view.
+ * @param isLogic - whether the story is about logic.
+ */
+export const logicViewChange = (next, addressView, isLogic) => isLogic ? { ...next, compare: addressView.compare } : next;

package/dist/src/shell/mountShell.d.ts

@@ -6,17 +6,19 @@
  */
 import "./shell.scss";
 import type { StoryCodeWriter } from "../frame/renderer.ts";
+import { type FramesPlacement } from "../frameOrigins.ts";
 import { type ShellConfig } from "./Shell.tsx";
-/** What an app passes to the shell: the catalogue's configuration and the framework's code writer. */
+/** What the generated page passes to the shell: the catalogue's configuration and the framework's code writer. */
 export type MountShellConfig = ShellConfig & {
     /** Writes a story drawn from its args in the framework's code (`storyJsx` of `@forgebook/react`). */
     readonly codeOf: StoryCodeWriter;
+    /** Where the frames run: on the catalogue's own origin by default. */
+    readonly frames?: FramesPlacement;
 };
 /**
- * Shows the catalogue in the given element.
+ * Shows the catalogue in the given element, or one story alone when the address asks for it.
  *
  * @param container - the element the page renders into.
  * @param config - the catalogue's name, its logo, its sources, its frame page and the framework's code writer.
  */
 export declare const mountShell: (container: HTMLElement, config: MountShellConfig) => void;
-//# sourceMappingURL=mountShell.d.ts.map

package/dist/src/shell/mountShell.js

@@ -7,33 +7,64 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import "./shell.css";
 import { createRoot } from "react-dom/client";
+import { isEmbedAddress } from "../embed.js";
+import { framePageAddress, pageOrigins, SAME_ORIGIN } from "../frameOrigins.js";
 import { CodeWriterContext } from "./codeWriter.js";
+import { FORGEBOOK_MARK_URL } from "./forgebookMark.js";
+import { setFramesOrigin } from "./framesOrigin.js";
 import { Shell } from "./Shell.js";
-import { configureStrings } from "./strings.js";
+import { configureStrings, STRINGS } from "./strings.js";
 /**
- * The page's icon: the catalogue's logo, replacing any the page declares.
+ * The page's icon: the catalogue's logo, replacing any the page declares; without a logo, Forgebook's mark, unless the
+ * page declares an icon of its own or the catalogue turned the branding off.
  *
- * @param logo - the logo's URL.
+ * @param logo - the logo's URL; none for Forgebook's mark.
+ * @param hasBranding - whether Forgebook's mark may stand in for a logo.
  */
-const setPageIcon = (logo) => {
-    for (const link of document.querySelectorAll('link[rel~="icon"]'))
+const setPageIcon = (logo, hasBranding) => {
+    const declared = document.querySelectorAll('link[rel~="icon"]');
+    if (logo === undefined && (declared.length > 0 || !hasBranding))
+        return;
+    for (const link of declared)
         link.remove();
     const icon = document.createElement("link");
     icon.rel = "icon";
-    icon.href = logo;
+    icon.href = logo ?? FORGEBOOK_MARK_URL;
     document.head.append(icon);
 };
 /**
- * Shows the catalogue in the given element.
+ * Shows one story alone in the given element, what `?embed` asks for; the shell is not drawn at all.
+ *
+ * @param root - the page's root.
+ * @param shell - the catalogue's configuration.
+ */
+const mountEmbed = (root, shell) => {
+    import("./EmbedPage.js")
+        .then(({ EmbedPage }) => root.render(_jsx(EmbedPage, { ...shell })))
+        // a stale page after a new deployment: a text, since a blank box in someone's wiki says nothing
+        .catch(() => root.render(_jsx("p", { role: "alert", children: STRINGS.embedFailed })));
+};
+/**
+ * Shows the catalogue in the given element, or one story alone when the address asks for it.
  *
  * @param container - the element the page renders into.
  * @param config - the catalogue's name, its logo, its sources, its frame page and the framework's code writer.
  */
 export const mountShell = (container, config) => {
-    if (config.logo !== undefined)
-        setPageIcon(config.logo);
+    setPageIcon(config.logo, config.hasBranding ?? true);
     configureStrings(config.lists?.strings ?? {});
-    const { codeOf, ...shell } = config;
-    createRoot(container).render(_jsx(CodeWriterContext.Provider, { value: codeOf, children: _jsx(Shell, { ...shell }) }));
+    const { codeOf, frames = SAME_ORIGIN, ...page } = config;
+    // set before anything renders, the embed included: its story's frame runs on the frames' origin too
+    const origins = pageOrigins(frames, window.location, "catalogue");
+    setFramesOrigin(origins.frames);
+    const shell = {
+        ...page,
+        frameUrl: framePageAddress(page.frameUrl, origins.frames, window.location.pathname)
+    };
+    const root = createRoot(container);
+    if (isEmbedAddress(window.location.search)) {
+        mountEmbed(root, shell);
+        return;
+    }
+    root.render(_jsx(CodeWriterContext.Provider, { value: codeOf, children: _jsx(Shell, { ...shell }) }));
 };
-//# sourceMappingURL=mountShell.js.map

package/dist/src/shell/pageStrings.d.ts

@@ -0,0 +1,24 @@
+/** The texts of the home and the docs pages, the catalogue's replacements applied. */
+export declare const PAGE_STRINGS: {
+    homeEmpty: string;
+    homeSummary: (components: number, sources: number) => string;
+    homeIntroError: string;
+    recentlyOpened: string;
+    componentsCount: (count: number) => string;
+    showAll: (count: number) => string;
+    showFewer: string;
+    pageContents: string;
+    previousPage: string;
+    nextPage: string;
+    docPageError: string;
+    homeError: string;
+    homeProblems: string;
+    unknownSource: (id: string) => string;
+    asides: {
+        note: string;
+        tip: string;
+        important: string;
+        caution: string;
+        danger: string;
+    };
+};

package/dist/src/shell/pageStrings.js

@@ -0,0 +1,26 @@
+/**
+ * The texts of the pages loaded on first use (the home, generated or written, and the docs pages): loaded with them, so
+ * a story's or a component's first load does not carry them. A catalogue replaces them by the same names as the shell's
+ * other texts (`strings: { "asides.tip": "Hint" }`).
+ *
+ * @module
+ */
+import { lateStrings } from "./strings.js";
+/** The texts of the home and the docs pages, the catalogue's replacements applied. */
+export const PAGE_STRINGS = lateStrings({
+    homeEmpty: "No stories yet: a source with story files shows its families here.",
+    homeSummary: (components, sources) => `${components} ${components === 1 ? "component" : "components"} in ${sources} ${sources === 1 ? "library" : "libraries"}.`,
+    homeIntroError: "The library's introduction could not be read",
+    recentlyOpened: "Recently opened",
+    componentsCount: (count) => `${count} ${count === 1 ? "component" : "components"}`,
+    showAll: (count) => `Show all ${count}`,
+    showFewer: "Show fewer",
+    pageContents: "On this page",
+    previousPage: "Previous",
+    nextPage: "Next",
+    docPageError: "The page could not be read",
+    homeError: "The home could not be read",
+    homeProblems: "The home's file has problems",
+    unknownSource: (id) => `No library "${id}": the home names one the catalogue does not have.`,
+    asides: { note: "Note", tip: "Tip", important: "Important", caution: "Caution", danger: "Danger" }
+});

package/dist/src/shell/pluginHosts.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The code that draws the plugins' views: their tabs in a story's panel and their docs blocks. The generated page
+ * imports it (`forgebook/shell/plugin-hosts`) only for a catalogue that lists a plugin with views.
+ *
+ * @module
+ */
+import type { PluginHosts } from "./pluginHostsContext.ts";
+/** The plugins' hosts. */
+export declare const pluginHosts: PluginHosts;

package/dist/src/shell/pluginHosts.js

@@ -0,0 +1,6 @@
+import { pluginTabsFor } from "./pluginTabs.js";
+/** The plugins' hosts. */
+export const pluginHosts = {
+    tabsFor: pluginTabsFor,
+    loadBlockHost: async () => (await import("./PluginBlockHost.js")).PluginBlockHost
+};

package/dist/src/shell/pluginHostsContext.d.ts

@@ -0,0 +1,20 @@
+import type { PluginBlockHost } from "./PluginBlockHost.tsx";
+import type { pluginTabsFor } from "./pluginTabs.tsx";
+/** The code that draws the plugins' views (`pluginHosts.ts`). */
+export type PluginHosts = {
+    /** Builds a story's plugin tabs. */
+    readonly tabsFor: typeof pluginTabsFor;
+    /** Loads the host of a plugin's docs block, apart: a page with a block need not be a story's page. */
+    readonly loadBlockHost: () => Promise<typeof PluginBlockHost>;
+};
+/** Loads the code that draws the plugins' views. */
+export type LoadPluginHosts = () => Promise<PluginHosts>;
+/** The loader of the plugins' hosts; none in a catalogue that lists no plugin with views. */
+export declare const PluginHostsContext: import("react").Context<LoadPluginHosts | undefined>;
+/**
+ * What a plugin's view reports when the page lists plugins without the code that draws them: a shell configured by
+ * hand that left `pluginHosts` out, said rather than drawn as no plugin.
+ */
+export declare const MISSING_PLUGIN_HOSTS = "The page lists plugins without pluginHosts, the code that draws their views";
+/** Reads the loader of the plugins' hosts the page provides; none in a catalogue without a plugin with views. */
+export declare const usePluginHosts: () => LoadPluginHosts | undefined;

package/dist/src/shell/pluginHostsContext.js

@@ -0,0 +1,16 @@
+/**
+ * How the shell's parts reach the code that draws the plugins' views: a loader the generated page gives only to a
+ * catalogue that lists a plugin with views, so a catalogue without one ships none of that code.
+ *
+ * @module
+ */
+import { createContext, useContext } from "react";
+/** The loader of the plugins' hosts; none in a catalogue that lists no plugin with views. */
+export const PluginHostsContext = createContext(undefined);
+/**
+ * What a plugin's view reports when the page lists plugins without the code that draws them: a shell configured by
+ * hand that left `pluginHosts` out, said rather than drawn as no plugin.
+ */
+export const MISSING_PLUGIN_HOSTS = "The page lists plugins without pluginHosts, the code that draws their views";
+/** Reads the loader of the plugins' hosts the page provides; none in a catalogue without a plugin with views. */
+export const usePluginHosts = () => useContext(PluginHostsContext);

package/dist/src/shell/pluginTabs.d.ts

@@ -0,0 +1,63 @@
+import type { JsonValue, PluginDocBlock, PluginDocBlockContext, PluginStory, PluginTab, PluginTabContext, PluginView } from "../plugin.ts";
+import type { AsideStory } from "./asideStory.ts";
+import type { DockTab } from "./Dock.tsx";
+/** A plugin's tab as the generated page hands it over: its declaration, and the import of its view. */
+export type ShellPluginTab = Pick<PluginTab, "id" | "label"> & {
+    /** When it is offered; for every story without one. */
+    readonly when: PluginTab["when"] | undefined;
+    /** Loads the module that draws it. */
+    readonly load: () => Promise<{
+        readonly view: PluginView<PluginTabContext>;
+    }>;
+};
+/** A plugin's docs block as the generated page hands it over. */
+export type ShellPluginBlock = Pick<PluginDocBlock, "fence"> & {
+    /** Loads the module that draws it. */
+    readonly load: () => Promise<{
+        readonly view: PluginView<PluginDocBlockContext>;
+    }>;
+};
+/** A plugin with views, as the generated page hands it over. */
+export type ShellPlugin = {
+    /** The plugin's id. */
+    readonly id: string;
+    /** Its tabs. */
+    readonly tabs: readonly ShellPluginTab[];
+    /** Its docs blocks. */
+    readonly docBlocks: readonly ShellPluginBlock[];
+};
+/** What a plugin's frame module last said for a story. */
+type PluginReport = {
+    /** What its tabs receive. */
+    readonly value: JsonValue;
+    /** The note beside a tab's name; none shows nothing. */
+    readonly hint: string | null;
+    /** The tab the note is for; none for the plugin's first. */
+    readonly tab: string | null;
+};
+/** The plugins' reports, by `<story>|<plugin>`. */
+export type PluginReports = ReadonlyMap<string, PluginReport>;
+/** What the plugins' tabs are built from. */
+export type PluginTabsInput = {
+    /** The plugins. */
+    readonly plugins: readonly ShellPlugin[];
+    /** The texts the catalogue replaces, by name. */
+    readonly strings: Readonly<Record<string, string>>;
+    /** The story shown. */
+    readonly story: PluginStory;
+    /** The names of the parameters its frame reported; none before it ran. */
+    readonly parameters: readonly string[];
+    /** The plugins' reports. */
+    readonly reports: PluginReports;
+    /** Whether the compare view is shown: its frames each report, and none of them is the story's. */
+    readonly isComparing: boolean;
+    /** What draws the story again for a tab, with the view's live part. */
+    readonly aside: AsideStory;
+};
+/**
+ * The plugins' tabs the story has something for, in the order of `plugins`.
+ *
+ * @param input - the plugins, the story and what it reported.
+ */
+export declare const pluginTabsFor: (input: PluginTabsInput) => DockTab[];
+export {};

package/dist/src/shell/pluginTabs.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LazyHost } from "./LazyHost.js";
+/** Loads the host of a tab. */
+const loadHost = async () => (await import("./PluginTabHost.js")).PluginTabHost;
+/**
+ * Whether a tab is offered for a story.
+ *
+ * @param tab - the tab.
+ * @param story - the story.
+ * @param parameters - the names of the parameters its frame reported.
+ */
+const isOffered = (tab, story, parameters) => {
+    if (tab.when === undefined)
+        return true;
+    return "design" in tab.when ? story.design.figma !== undefined : parameters.includes(tab.when.parameter);
+};
+/**
+ * A tab's content: its host, once loaded.
+ *
+ * @param plugin - the tab's plugin.
+ * @param tab - the tab.
+ * @param input - what it is told.
+ */
+const pluginTabContent = (plugin, tab, { strings, story, reports, isComparing, aside }) => (_jsx(LazyHost
+// a view lives for one story: it holds what it drew for it (a viewer's position, a dialog)
+, { loadHost: loadHost, props: {
+        load: tab.load,
+        pluginId: plugin.id,
+        strings,
+        story,
+        report: isComparing ? undefined : reports.get(`${story.id}|${plugin.id}`)?.value,
+        // the compare view's address already says the whole view
+        aside: isComparing ? { ...aside, view: undefined } : aside
+    } }, `${tab.id}|${story.id}`));
+/**
+ * The note beside a tab's name.
+ *
+ * @param plugin - the tab's plugin.
+ * @param tab - the tab.
+ * @param input - the reports.
+ */
+const hintOf = (plugin, tab, input) => {
+    const report = input.reports.get(`${input.story.id}|${plugin.id}`);
+    if (input.isComparing || report === undefined)
+        return undefined;
+    return (report.tab ?? plugin.tabs[0]?.id) === tab.id ? (report.hint ?? undefined) : undefined;
+};
+/**
+ * The plugins' tabs the story has something for, in the order of `plugins`.
+ *
+ * @param input - the plugins, the story and what it reported.
+ */
+export const pluginTabsFor = (input) => input.plugins.flatMap((plugin) => plugin.tabs
+    .filter((tab) => isOffered(tab, input.story, input.parameters))
+    .map((tab) => ({
+    id: tab.id,
+    label: input.strings[`tabs.${tab.id}`] ?? tab.label,
+    hint: hintOf(plugin, tab, input),
+    content: pluginTabContent(plugin, tab, input)
+})));

package/dist/src/shell/search.css

@@ -0,0 +1,172 @@
+@layer catalogue {
+  .forgebook-search-panel {
+    position: fixed;
+    inset: auto;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    max-height: min(44rem, 100vh - 2rem);
+    overflow: hidden;
+    border-radius: var(--forgebook-radius-card);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
+    color: var(--forgebook-text);
+    animation: forgebook-search-in 150ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  @media (max-width: 719px) {
+    .forgebook-search-panel {
+      max-height: calc(100vh - 7rem);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .forgebook-search-panel {
+      animation: none;
+    }
+  }
+  @keyframes forgebook-search-in {
+    from {
+      opacity: 0;
+      transform: translateX(-0.25rem);
+    }
+  }
+  .forgebook-search-panel__status {
+    display: flex;
+    flex: none;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
+  }
+  .forgebook-search-panel__status:empty {
+    display: none;
+  }
+  .forgebook-search-panel__list {
+    flex: 1;
+    min-height: 0;
+    padding: 0.25rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .forgebook-search-panel__list:empty {
+    display: none;
+  }
+  .forgebook-search-panel__keys {
+    flex: none;
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
+  }
+  .forgebook-search-panel__keys kbd {
+    padding: 0 0.25rem;
+    border-radius: var(--forgebook-radius-control-small);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
+    font: 400 0.6875rem/1.6 var(--forgebook-font-mono);
+  }
+  @media (hover: none) {
+    .forgebook-search-panel__keys {
+      display: none;
+    }
+  }
+  .forgebook-result + .forgebook-result {
+    margin-top: 0.25rem;
+  }
+  .forgebook-result__own,
+  .forgebook-result__hit {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--forgebook-radius-control);
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .forgebook-result__own[data-active],
+  .forgebook-result__hit[data-active] {
+    background: color-mix(in srgb, var(--forgebook-accent) 12%, transparent);
+  }
+  .forgebook-result__own {
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+  .forgebook-result__hit {
+    align-items: flex-start;
+    margin-inline-start: 0.75rem;
+  }
+  .forgebook-result__name {
+    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+  }
+  .forgebook-result__place {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .forgebook-result__kind {
+    flex: none;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-result__why {
+    flex: none;
+    min-width: 3.5rem;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-result__own .forgebook-result__why {
+    min-width: 0;
+    padding: 0 0.25rem;
+    border-radius: var(--forgebook-radius-control-small);
+    background: var(--forgebook-fill);
+  }
+  .forgebook-result__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .forgebook-result__label {
+    font: 400 0.78125rem/1.4 var(--forgebook-font-sans);
+    overflow-wrap: anywhere;
+  }
+  .forgebook-result__label[data-code] {
+    font: 400 0.71875rem/1.4 var(--forgebook-font-mono);
+  }
+  .forgebook-result__snippet {
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+    overflow-wrap: anywhere;
+  }
+  .forgebook-result__note {
+    display: flex;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0 0.5rem 0.25rem calc(0.75rem + 0.5rem);
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-search-panel mark {
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--forgebook-accent) 22%, transparent);
+    color: inherit;
+  }
+  [data-found] {
+    border-radius: var(--forgebook-radius-control-small);
+    outline: none;
+    animation: forgebook-found 1.6s ease-out;
+  }
+  @keyframes forgebook-found {
+    0%, 45% {
+      background-color: color-mix(in srgb, var(--forgebook-accent) 22%, transparent);
+    }
+  }
+}

package/dist/src/shell/searchStrings.d.ts

@@ -0,0 +1,24 @@
+/** The search's texts, as shown: Forgebook's, with the catalogue's replacements. */
+export declare const SEARCH_STRINGS: {
+    results: string;
+    count: (count: number) => string;
+    reading: string;
+    unreadable: string;
+    nothing: (query: string) => string;
+    missing: (words: string) => string;
+    more: (count: number) => string;
+    means: (word: string) => string;
+    kindComponent: string;
+    kindPage: string;
+    hitProp: string;
+    hitEvent: string;
+    hitStory: string;
+    hitHeading: string;
+    hitText: string;
+    hitDescription: string;
+    reasonKeyword: string;
+    reasonPlace: string;
+    keyMove: string;
+    keyOpen: string;
+    keyClear: string;
+};

package/dist/src/shell/searchStrings.js

@@ -0,0 +1,31 @@
+/**
+ * The words of the search's results, loaded with them: a reader who never searches pays for neither. A catalogue
+ * replaces them as any other text of the shell (`strings: { "search.kindPage": "Guides" }`).
+ *
+ * @module
+ */
+import { textsOfGroup } from "./strings.js";
+/** The search's texts, as shown: Forgebook's, with the catalogue's replacements. */
+export const SEARCH_STRINGS = textsOfGroup("search", {
+    results: "Search results",
+    count: (count) => (count === 1 ? "1 result" : `${count} results`),
+    reading: "Reading the docs…",
+    unreadable: "Part of the docs could not be read",
+    nothing: (query) => `Nothing found for “${query}”`,
+    missing: (words) => `Without: ${words}`,
+    more: (count) => `${count} more inside`,
+    means: (word) => `means ${word}`,
+    kindComponent: "Component",
+    kindPage: "Docs",
+    hitProp: "Prop",
+    hitEvent: "Event",
+    hitStory: "Story",
+    hitHeading: "Heading",
+    hitText: "Text",
+    hitDescription: "About",
+    reasonKeyword: "Keyword",
+    reasonPlace: "Place",
+    keyMove: "to move",
+    keyOpen: "to open",
+    keyClear: "to clear"
+});