forgebook 0.3.3 → 0.4.1

package/dist/src/shell/shellScheme.js

@@ -9,7 +9,7 @@
  * @module
  */
 import { APPEARANCES } from "../catalogue.js";
-import { switchValueOf, switchWithRole } from "../switches.js";
+import { shownSwitches, switchValueOf, switchWithRole } from "../switches.js";
 /**
  * Whether the shell draws in its dark palette.
  *
@@ -21,7 +21,7 @@ export const shellIsDark = ({ appearance, values, switches, isSystemDark, isComp
     const scheme = switchWithRole(switches, "colorScheme");
     if (appearance === "system" || isComparing || scheme === undefined)
         return isSystemDark;
-    const shown = switchValueOf(scheme, values[scheme.id] ?? scheme.default)?.scheme;
+    const shown = switchValueOf(scheme, shownSwitches(values, switches)[scheme.id])?.scheme;
     return shown === undefined || shown === "system" ? isSystemDark : shown === "dark";
 };
 /**

package/dist/src/shell/shortcutHelp.css

@@ -0,0 +1,64 @@
+@layer catalogue {
+  .forgebook-keys {
+    box-sizing: border-box;
+    width: min(28rem, 100vw - 2rem);
+    max-height: calc(100dvh - 2rem);
+    padding: 0.875rem;
+    border: 0;
+    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);
+    overflow-y: auto;
+  }
+  .forgebook-keys::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+  }
+  .forgebook-keys__title {
+    margin: 0 0 0.375rem;
+    font: var(--forgebook-text-row-compact);
+    font-weight: 600;
+  }
+  .forgebook-keys__note {
+    display: block;
+    margin: 0;
+    font: var(--forgebook-text-row-compact);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-keys__list {
+    margin: 0.75rem 0;
+  }
+  .forgebook-keys__row {
+    display: flex;
+    gap: 0.75rem;
+    align-items: baseline;
+    padding-block: 0.25rem;
+    font: var(--forgebook-text-row-compact);
+  }
+  .forgebook-keys__row dt {
+    display: flex;
+    flex: none;
+    gap: 0.25rem;
+    width: 6rem;
+  }
+  .forgebook-keys__row dd {
+    margin: 0;
+  }
+  .forgebook-keys__key {
+    padding: 0 0.25rem;
+    border-radius: var(--forgebook-radius-control);
+    background: var(--forgebook-fill);
+    font: inherit;
+  }
+  .forgebook-keys__switch {
+    display: flex;
+    gap: 0.375rem;
+    align-items: flex-start;
+    font: var(--forgebook-text-row-compact);
+  }
+  .forgebook-keys__foot {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.75rem;
+  }
+}

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

@@ -0,0 +1,53 @@
+/**
+ * The stage's reading of a story's args: the values shown once the panel's are over the story's own, a change of one
+ * value, and what an embed of the story keeps of them.
+ *
+ * @remarks
+ * What the panel leaves without a value (`UnsetArg`) is no value from here on: only the address and the frames need to say
+ * so. The tab and the code read what the story receives.
+ *
+ * @module
+ */
+import { type ArgValue, type PanelArgs } from "../messages.ts";
+import type { TreeStory } from "../storyTree.ts";
+import type { ViewSwitch } from "../switches.ts";
+import { type ViewState } from "../viewState.ts";
+/** The stage's values. */
+export type PanelValues = {
+    /** The values shown: the story's own, with the panel's over them. */
+    readonly values: PanelArgs;
+    /** Sets one value: `undefined` takes the panel's away, `UNSET_ARG` leaves the prop with none. */
+    readonly change: (name: string, value: ArgValue | undefined) => void;
+};
+/**
+ * The stage's values.
+ *
+ * @param accepted - the panel's values, once checked.
+ * @param own - the story's own args.
+ * @param onChange - sets the panel's values.
+ */
+export declare const usePanelValues: (accepted: PanelArgs, own: PanelArgs, onChange: (args: PanelArgs) => void) => PanelValues;
+/**
+ * Whether a story's args change what it draws: not for a story of fixed examples, nor for one about logic, whose scene
+ * takes none.
+ *
+ * @param story - the story.
+ */
+export declare const takesArgs: (story: Pick<TreeStory, "isLogic" | "controls">) => boolean;
+/**
+ * What an embed of the story keeps of the page: its view and the values set in the panel. An embed draws no device
+ * frame, so the device chosen is left out: the embed is the story at the width its iframe gives it.
+ *
+ * @param view - the reader's view, without what the story fixes, which the story fixes again.
+ * @param panelArgs - the values set in the panel, once checked: typed, and only those the story takes.
+ * @param switches - the catalogue's switches.
+ */
+export declare const embedQuery: (view: ViewState, panelArgs: PanelArgs, switches: readonly ViewSwitch[]) => string;
+/**
+ * The height an embed's iframe starts at: as tall as the frame is on the stage.
+ *
+ * @param view - the view, with the height set on the stage.
+ * @param contentHeight - the story's content, in CSS px.
+ * @param story - the story, with the height its scene declares.
+ */
+export declare const embedHeight: (view: ViewState, contentHeight: number, story: Pick<TreeStory, "height">) => number;

package/dist/src/shell/stageArgs.js

@@ -0,0 +1,64 @@
+/**
+ * The stage's reading of a story's args: the values shown once the panel's are over the story's own, a change of one
+ * value, and what an embed of the story keeps of them.
+ *
+ * @remarks
+ * What the panel leaves without a value (`UnsetArg`) is no value from here on: only the address and the frames need to say
+ * so. The tab and the code read what the story receives.
+ *
+ * @module
+ */
+import { isUnsetArg, panelArgsParam } from "../messages.js";
+import { viewParams } from "../viewState.js";
+/**
+ * The stage's values.
+ *
+ * @param accepted - the panel's values, once checked.
+ * @param own - the story's own args.
+ * @param onChange - sets the panel's values.
+ */
+export const usePanelValues = (accepted, own, onChange) => {
+    return {
+        values: Object.fromEntries(Object.entries({ ...own, ...accepted }).filter(([, value]) => !isUnsetArg(value))),
+        // a change starts from the values the story takes: one the address named and the story does not is let go
+        change: (name, value) => {
+            const { [name]: _removed, ...rest } = accepted;
+            // a prop the story gives nothing has no value already, and the address stays short for it
+            const isNothing = value === undefined || (isUnsetArg(value) && own[name] === undefined);
+            onChange(isNothing ? rest : { ...rest, [name]: value });
+        }
+    };
+};
+/**
+ * Whether a story's args change what it draws: not for a story of fixed examples, nor for one about logic, whose scene
+ * takes none.
+ *
+ * @param story - the story.
+ */
+export const takesArgs = (story) => !story.isLogic && (story.controls === "all" || story.controls.length > 0);
+/**
+ * What an embed of the story keeps of the page: its view and the values set in the panel. An embed draws no device
+ * frame, so the device chosen is left out: the embed is the story at the width its iframe gives it.
+ *
+ * @param view - the reader's view, without what the story fixes, which the story fixes again.
+ * @param panelArgs - the values set in the panel, once checked: typed, and only those the story takes.
+ * @param switches - the catalogue's switches.
+ */
+export const embedQuery = (view, panelArgs, switches) => {
+    const params = viewParams({ ...view, device: "auto", orientation: "auto" }, switches);
+    // said out loud: an embed has no switch to turn on what its catalogue's readers start without
+    if (view.play === "on")
+        params.set("play", "on");
+    const args = panelArgsParam(panelArgs);
+    if (args !== "")
+        params.set("args", args);
+    return params.toString();
+};
+/**
+ * The height an embed's iframe starts at: as tall as the frame is on the stage.
+ *
+ * @param view - the view, with the height set on the stage.
+ * @param contentHeight - the story's content, in CSS px.
+ * @param story - the story, with the height its scene declares.
+ */
+export const embedHeight = (view, contentHeight, story) => (view.height === "auto" ? Math.max(contentHeight, story.height ?? 0) : view.height);

package/dist/src/shell/statusBadges.css

@@ -0,0 +1,51 @@
+@layer catalogue {
+  .forgebook-status-badges {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .forgebook-status {
+    --forgebook-status-tone: var(--forgebook-text-secondary);
+    display: inline-block;
+    max-width: 7rem;
+    padding: 0 0.375rem;
+    overflow: hidden;
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--forgebook-status-tone) 45%, transparent);
+    background: color-mix(in srgb, var(--forgebook-status-tone) 9%, transparent);
+    font: var(--forgebook-text-caption);
+    font-weight: 500;
+    color: var(--forgebook-status-tone);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .forgebook-status[data-tone=info] {
+    --forgebook-status-tone: var(--forgebook-accent-text);
+  }
+  .forgebook-status[data-tone=positive] {
+    --forgebook-status-tone: var(--forgebook-positive-text);
+  }
+  .forgebook-status[data-tone=caution] {
+    --forgebook-status-tone: var(--forgebook-caution-text);
+  }
+  .forgebook-status[data-tone=critical] {
+    --forgebook-status-tone: var(--forgebook-danger-text);
+  }
+  .forgebook-status-badges--page {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .forgebook-status-badges--page .forgebook-status {
+    max-width: none;
+    line-height: 1.6;
+  }
+  .forgebook-status-badges--story {
+    margin-inline-start: 0.5rem;
+    vertical-align: middle;
+  }
+  .forgebook-tag-filter__name .forgebook-status {
+    vertical-align: middle;
+  }
+}

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

@@ -20,7 +20,6 @@ declare const shellStrings: {
     searchPlaceholder: string;
     searchLabel: string;
     componentsNav: string;
-    docsNav: string;
     sidebarWidth: string;
     hideSidebar: string;
     showSidebar: string;
@@ -37,7 +36,6 @@ declare const shellStrings: {
     compareError: string;
     controlChanged: (control: string) => string;
     cycleKey: (control: string, key: string) => string;
-    aboutControl: (control: string) => string;
     backdrop: string;
     backdropPlain: string;
     sheets: string;
@@ -48,10 +46,6 @@ declare const shellStrings: {
     };
     text: string;
     textScale: (scale: TextScale) => string;
-    controlMenu: (label: string) => string;
-    unpinControl: string;
-    hideInView: string;
-    showInView: string;
     compare: string;
     compareOff: string;
     compareText: string;
@@ -65,6 +59,7 @@ declare const shellStrings: {
     embedFailed: string;
     embedPanelFailed: string;
     clearSearch: string;
+    keys: string;
     fromTexts: string;
     backToText: string;
     widthTyped: string;
@@ -106,13 +101,11 @@ declare const shellStrings: {
     openInFigma: string;
     logic: string;
     logicHint: string;
-    signatureParameter: string;
-    signatureReturns: string;
-    signatureNone: string;
     playStatus: {
         running: string;
         passed: string;
         failed: string;
+        off: string;
     };
     fixedExamples: string;
     allProps: string;
@@ -129,8 +122,6 @@ declare const shellStrings: {
     a11yCount: (count: number) => string;
     replay: string;
     loadingStory: string;
-    apiType: string;
-    apiWhat: string;
     propCount: (count: number) => string;
     audience: string;
     audiences: {
@@ -147,18 +138,18 @@ declare const shellStrings: {
     unknownPage: (id: string) => string;
     unknownComponent: (id: string) => string;
     props: string;
-    propGroups: {
-        choice: string;
-        text: string;
-        toggle: string;
-    };
     otherProps: string;
     unset: string;
+    unsetProp: (prop: string) => string;
+    resetProp: (prop: string) => string;
+    stateUnset: string;
+    stateEmpty: string;
     unsetDefault: (value: string) => string;
     defaultIs: string;
     pickColor: (prop: string) => string;
     rangeValue: (prop: string) => string;
     setByStory: string;
+    setBy: string;
     required: string;
     requiredFirst: string;
     requiredFirstHint: string;

package/dist/src/shell/strings.js

@@ -4,7 +4,6 @@ const shellStrings = {
     searchPlaceholder: "Search",
     searchLabel: "Search components, stories, props and docs",
     componentsNav: "Components",
-    docsNav: "Docs",
     sidebarWidth: "Sidebar width",
     hideSidebar: "Hide the sidebar",
     showSidebar: "Show the sidebar",
@@ -21,17 +20,12 @@ const shellStrings = {
     compareError: "The comparison could not be loaded",
     controlChanged: (control) => `${control}: changed`,
     cycleKey: (control, key) => `${control}: press ${key} for the next value, Shift+${key} for the one before`,
-    aboutControl: (control) => `About ${control}`,
     backdrop: "Background",
     backdropPlain: "Plain",
     sheets: "Styles",
     sheetChoices: { full: "Full", structure: "Structure only", restyled: "Restyled" },
     text: "Text",
     textScale: (scale) => `${scale}%`,
-    controlMenu: (label) => `${label} on the toolbar`,
-    unpinControl: "Remove from the toolbar",
-    hideInView: "Hide in View",
-    showInView: "Show in View",
     compare: "Compare",
     compareOff: "Off",
     compareText: "Text sizes",
@@ -45,6 +39,7 @@ const shellStrings = {
     embedFailed: "This story could not be shown.",
     embedPanelFailed: "This could not load: reload the page to try again.",
     clearSearch: "Clear the search",
+    keys: "Keyboard keys",
     fromTexts: "From the story's texts:",
     backToText: "Back to the text",
     widthTyped: "Width in px",
@@ -86,10 +81,7 @@ const shellStrings = {
     openInFigma: "Open in Figma",
     logic: "Logic",
     logicHint: "About logic, not looks: a scene that uses the hook or the function",
-    signatureParameter: "Parameter",
-    signatureReturns: "Returns",
-    signatureNone: "It takes no parameters.",
-    playStatus: { running: "running", passed: "passed", failed: "failed" },
+    playStatus: { running: "running", passed: "passed", failed: "failed", off: "not run" },
     fixedExamples: "This story draws fixed examples: its props are not set from here. Every prop, for reading:",
     allProps: "Props",
     openFrame: "Open in a new tab",
@@ -105,8 +97,6 @@ const shellStrings = {
     a11yCount: (count) => `${count} ${count === 1 ? "problem" : "problems"}`,
     replay: "Replay",
     loadingStory: "Loading the story…",
-    apiType: "Type",
-    apiWhat: "What it does",
     propCount: (count) => `${count} ${count === 1 ? "prop" : "props"}`,
     audience: "Reading for",
     audiences: { everyone: "Everyone", designer: "Designers", coder: "Coders", tester: "Testers" },
@@ -118,20 +108,25 @@ const shellStrings = {
     unknownPage: (id) => `No page "${id}": it may have been renamed. Pick one in the sidebar.`,
     unknownComponent: (id) => `No component "${id}": it may have been renamed. Pick one in the sidebar.`,
     props: "Props",
-    propGroups: { choice: "Choices", text: "Text and numbers", toggle: "Toggles" },
     otherProps: "Other props",
     unset: "—",
+    unsetProp: (prop) => `${prop}: leave without a value`,
+    resetProp: (prop) => `${prop}: back to the story's value`,
+    stateUnset: "no value",
+    stateEmpty: "empty text",
     unsetDefault: (value) => `— (${value})`,
     defaultIs: "Default:",
     pickColor: (prop) => `${prop}: pick a colour`,
     rangeValue: (prop) => `${prop}: value`,
     setByStory: "Set by the story",
+    setBy: "Set by {value}",
     required: "Required",
     requiredFirst: "Required first",
     requiredFirstHint: "Every component's required props before the others; kept in this browser",
     resetArgs: "Reset",
-    appearance: "Appearance",
-    appearanceOf: (name) => `Appearance: ${name}`,
+    // not "Appearance": a catalogue's own switch may bear that name, and this one colours the catalogue, never the story
+    appearance: "Interface",
+    appearanceOf: (name) => `${STRINGS.appearance}: ${name}`,
     appearances: { light: "Light", dark: "Dark", system: "System", story: "Follow the story" },
     worstCase: "Worst case",
     worstCaseHint: "Long texts with a word too long to break, huge numbers: the elements that spill are outlined",
@@ -146,9 +141,9 @@ const shellStrings = {
     docsLoading: "Reading the component…",
     tabLoading: "Loading the tab…",
     tabError: "The tab could not be loaded",
-    pageLoadError: "The page could not be loaded",
+    pageLoadError: "The page could not be loaded: reload the page to try again",
     docsError: "The component could not be read",
-    indexProblems: "Some story files could not be placed"
+    indexProblems: "Some story files could not be read or placed"
 };
 /** The shell's texts, as shown. */
 export const STRINGS = shellStrings;

package/dist/src/shell/switchGallery.css

@@ -0,0 +1,104 @@
+@layer catalogue {
+  .forgebook-gallery {
+    position: fixed;
+    inset: auto;
+    box-sizing: border-box;
+    width: min(24rem, 100vw - 0.75rem);
+    max-height: min(32rem, 100vh - 0.75rem);
+    margin: 0;
+    padding: 0.5rem;
+    overflow: auto;
+    border: 0;
+    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);
+    white-space: normal;
+  }
+  .forgebook-gallery__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .forgebook-gallery__item {
+    position: relative;
+    display: grid;
+    gap: 0.25rem;
+    padding: 0.25rem;
+    border-radius: var(--forgebook-radius-control);
+    cursor: pointer;
+  }
+  .forgebook-gallery__item:hover {
+    background: var(--forgebook-hover);
+  }
+  .forgebook-gallery__item:has(input:checked) .forgebook-gallery__preview {
+    box-shadow: 0 0 0 2px var(--forgebook-accent);
+  }
+  .forgebook-gallery__item:has(input:focus-visible) {
+    outline: 2px solid var(--forgebook-accent);
+    outline-offset: 1px;
+  }
+  .forgebook-gallery__preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    aspect-ratio: 16/9;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    overflow: hidden;
+    border-radius: var(--forgebook-radius-control-small);
+    background: var(--forgebook-hover);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
+  }
+  .forgebook-gallery__preview:has(.forgebook-gallery__image) {
+    padding: 0;
+  }
+  .forgebook-gallery__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .forgebook-gallery__swatches {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: var(--forgebook-radius-control-small);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
+  }
+  .forgebook-gallery__swatches span {
+    flex: 1;
+  }
+  .forgebook-gallery__font {
+    overflow: hidden;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    color: var(--forgebook-text-secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .forgebook-gallery__letter {
+    margin: auto;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-gallery__name {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1rem;
+    font: var(--forgebook-text-control);
+    color: var(--forgebook-text);
+    overflow-wrap: anywhere;
+  }
+  .forgebook-gallery__name svg {
+    flex: none;
+    color: var(--forgebook-accent-text);
+  }
+}

package/dist/src/shell/tagFilter.css

@@ -0,0 +1,46 @@
+@layer catalogue {
+  .forgebook-tag-filter {
+    flex: none;
+  }
+  .forgebook-tag-filter .forgebook-icon-button[data-on] {
+    width: auto;
+    min-width: 1.625rem;
+    padding-inline: 0.25rem;
+    color: var(--forgebook-accent-text);
+  }
+  .forgebook-tag-filter__count {
+    margin-inline-start: 0.125rem;
+    font: var(--forgebook-text-row-compact);
+  }
+  .forgebook-tag-filter__panel {
+    right: 0;
+    white-space: normal;
+  }
+  .forgebook-tag-filter__list {
+    margin: 0 0 0.375rem;
+    padding: 0;
+    max-height: 18rem;
+    overflow-y: auto;
+    list-style: none;
+  }
+  .forgebook-tag-filter__row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+  .forgebook-tag-filter__tag {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+    min-height: 1.75rem;
+    font: var(--forgebook-text-row-compact);
+    color: var(--forgebook-text);
+  }
+  .forgebook-tag-filter__name {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Where a story's tags draw something: the sidebar's tag filter, a status's badges in a component's entry and beside a
+ * page's title. Their code and styles load the first time one is drawn, which only a catalogue whose stories have tags
+ * does (`TagViews.tsx`).
+ *
+ * @remarks
+ * A status is a tag (`storyStatuses.ts`), so a catalogue with no tags has neither filter nor badges, and its first
+ * load carries these few lines and not their code. Until it arrives nothing is drawn: each comes last on its row, so
+ * nothing beside it moves. A chunk gone after a new deployment leaves them out.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { TagViewProps } from "./TagViews.tsx";
+/**
+ * What the tags draw in one place, once its code is there.
+ *
+ * @param props - the place, and what it reads.
+ */
+export declare const TagViewSlot: (props: TagViewProps) => ReactNode;

package/dist/src/shell/tagView.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LazyView, lazyModule } from "./lazyModule.js";
+/** What the tags draw, loaded on first use; not through `Suspense`, which would hold it back 300 ms (`lazyModule.tsx`). */
+const TAG_VIEW = lazyModule(() => import("./TagViews.js").then((module) => module.TagView));
+/**
+ * What the tags draw in one place, once its code is there.
+ *
+ * @param props - the place, and what it reads.
+ */
+export const TagViewSlot = (props) => (_jsx(LazyView, { module: TAG_VIEW, props: props, loading: null, failed: () => null }));

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

@@ -11,9 +11,12 @@
  */
 import { type RefObject } from "react";
 import { type AcceptedArgs, type ArgDeclaration, type DroppedArg } from "../addressArgs.ts";
+import type { AddressLink } from "../addressArgsParam.ts";
 import type { ComponentDocs } from "../componentDocs.ts";
 import { type PanelArgs } from "../messages.ts";
 import type { NamedValues } from "../namedValues.ts";
+import type { LoadedChecks } from "./argChecks.ts";
+import type { ArgControlLoaders } from "./customControls.ts";
 import type { ReadyMessage } from "./useFrameMessages.ts";
 import type { Loaded } from "./useLoaded.ts";
 /** What the story's frame reported that the check reads: its own args, its `argTypes` and its controls. */
@@ -31,6 +34,8 @@ export declare const declarationOf: (docs: Loaded<ComponentDocs>, ready: ReadyDe
 export type AddressArgsInput = {
     /** The values the address names. */
     readonly panelArgs: PanelArgs;
+    /** What else the address says of them: how to type them, and which could not be read. */
+    readonly link: AddressLink | undefined;
     /** The component's docs. */
     readonly docs: Loaded<ComponentDocs>;
     /** The story's own args its frame reported; none before it is ready. */
@@ -41,6 +46,8 @@ export type AddressArgsInput = {
     readonly controls: ReadyDeclaration["controls"];
     /** The source's named values; none when it has none. */
     readonly namedValues: NamedValues | undefined;
+    /** The catalogue's custom controls; none when it has none. */
+    readonly argControls: ArgControlLoaders | undefined;
     /** The element that holds the story's frames, which hear each change of the checked values. */
     readonly frames: RefObject<HTMLElement | null>;
 };
@@ -62,6 +69,8 @@ export type AddressArgs = {
      * updates after; none while the docs load.
      */
     readonly acceptedFor: (ready: ReadyDeclaration) => AcceptedArgs | undefined;
+    /** Gives a prop with a shape its worst value, once a prop that needs the checks asked for them. */
+    readonly worstOfShape: LoadedChecks["worstOfShape"] | undefined;
 };
 /**
  * The address's values, checked against what the story declares.