forgebook 0.1.8 → 0.3.0

package/dist/src/shell/docPage.css

@@ -0,0 +1,457 @@
+@layer catalogue {
+  .forgebook-docs {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    min-width: 0;
+  }
+  .forgebook-docs__body {
+    flex: 0 1 56rem;
+    min-width: 0;
+    margin: 0;
+  }
+  .forgebook-docs .forgebook-prose,
+  .forgebook-home--written .forgebook-prose {
+    font-size: 0.875rem;
+    line-height: 1.65;
+    color: var(--forgebook-text);
+  }
+  .forgebook-docs .forgebook-prose > p,
+  .forgebook-docs .forgebook-prose > ul,
+  .forgebook-docs .forgebook-prose > ol,
+  .forgebook-docs .forgebook-prose > blockquote,
+  .forgebook-home--written .forgebook-prose > p,
+  .forgebook-home--written .forgebook-prose > ul,
+  .forgebook-home--written .forgebook-prose > ol,
+  .forgebook-home--written .forgebook-prose > blockquote {
+    max-width: 42rem;
+  }
+  .forgebook-docs .forgebook-prose h2,
+  .forgebook-docs .forgebook-prose h3,
+  .forgebook-docs .forgebook-prose h4,
+  .forgebook-home--written .forgebook-prose h2,
+  .forgebook-home--written .forgebook-prose h3,
+  .forgebook-home--written .forgebook-prose h4 {
+    scroll-margin-top: 1rem;
+  }
+  .forgebook-docs .forgebook-prose h2,
+  .forgebook-home--written .forgebook-prose h2 {
+    margin-top: 1.75rem;
+  }
+  .forgebook-docs .forgebook-prose h4,
+  .forgebook-home--written .forgebook-prose h4 {
+    margin: 1rem 0 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .forgebook-docs .forgebook-prose blockquote,
+  .forgebook-home--written .forgebook-prose blockquote {
+    margin: 0 0 0.75rem;
+    padding: 0.25rem 1rem;
+    border-inline-start: 3px solid var(--forgebook-accent);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-docs .forgebook-prose hr,
+  .forgebook-home--written .forgebook-prose hr {
+    margin: 1.5rem 0;
+    border: 0;
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
+    height: 1px;
+  }
+  .forgebook-docs .forgebook-prose img,
+  .forgebook-home--written .forgebook-prose img {
+    display: block;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 20rem;
+    border-radius: var(--forgebook-radius-card);
+  }
+  .forgebook-docs .forgebook-prose table,
+  .forgebook-home--written .forgebook-prose table {
+    display: block;
+    overflow-x: auto;
+  }
+  .forgebook-anchor {
+    position: relative;
+    color: inherit !important;
+    text-decoration: none;
+    border-radius: var(--forgebook-radius-control-small);
+  }
+  .forgebook-anchor::before {
+    content: "#";
+    position: absolute;
+    inset-inline-end: 100%;
+    padding-inline-end: 0.375rem;
+    color: var(--forgebook-text-tertiary);
+    font-weight: 400;
+    opacity: 0;
+    transition: opacity 150ms ease-out;
+  }
+  .forgebook-anchor:hover::before, .forgebook-anchor:focus-visible::before {
+    opacity: 1;
+  }
+  .forgebook-anchor:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-docs__code {
+    position: relative;
+    min-width: 0;
+  }
+  .forgebook-docs__code pre {
+    margin: 0;
+  }
+  .forgebook-docs__code[data-titled=true] pre {
+    padding-top: calc(2rem + 0.75rem);
+  }
+  .forgebook-docs__code[data-wrap=true] pre {
+    padding-inline-end: 5rem;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .forgebook-docs__code-title {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+    margin: 0;
+    padding: 0.5rem 1rem;
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
+    font: 400 0.6875rem/1.6 var(--forgebook-font-mono);
+    color: var(--forgebook-text-secondary);
+    padding-inline-end: 5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .forgebook-docs__code code:has(.forgebook-code-line) {
+    display: inline-block;
+    min-width: 100%;
+  }
+  .forgebook-code-line {
+    display: inline-block;
+    box-sizing: border-box;
+    min-width: calc(100% + 2 * 1rem);
+    margin-inline: calc(-1 * 1rem);
+    padding-inline: 1rem;
+    text-decoration: none;
+  }
+  mark.forgebook-code-line {
+    background: color-mix(in srgb, var(--forgebook-accent) 14%, transparent);
+    color: inherit;
+    box-shadow: inset 3px 0 0 var(--forgebook-accent);
+  }
+  ins.forgebook-code-line,
+  del.forgebook-code-line {
+    position: relative;
+  }
+  ins.forgebook-code-line::before,
+  del.forgebook-code-line::before {
+    position: absolute;
+    inset-inline-start: 0.25rem;
+  }
+  ins.forgebook-code-line {
+    background: color-mix(in srgb, var(--forgebook-code-string) 14%, transparent);
+  }
+  ins.forgebook-code-line::before {
+    content: "+"/"";
+    color: var(--forgebook-code-string);
+  }
+  del.forgebook-code-line {
+    background: color-mix(in srgb, var(--forgebook-danger-text) 12%, transparent);
+  }
+  del.forgebook-code-line::before {
+    content: "-"/"";
+    color: var(--forgebook-danger-text);
+  }
+  .forgebook-aside {
+    --forgebook-tone: var(--forgebook-accent-text);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.5rem;
+    min-width: 0;
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border-radius: var(--forgebook-radius-control);
+    background: color-mix(in srgb, var(--forgebook-tone) 7%, transparent);
+    box-shadow: inset 3px 0 0 var(--forgebook-tone);
+  }
+  .forgebook-aside[data-tone=tip] {
+    --forgebook-tone: var(--forgebook-code-string);
+  }
+  .forgebook-aside[data-tone=important] {
+    --forgebook-tone: var(--forgebook-code-keyword);
+  }
+  .forgebook-aside[data-tone=caution] {
+    --forgebook-tone: var(--forgebook-code-number);
+  }
+  .forgebook-aside[data-tone=danger] {
+    --forgebook-tone: var(--forgebook-danger-text);
+  }
+  .forgebook-aside > .forgebook-prose > :last-child {
+    margin-bottom: 0;
+  }
+  .forgebook-aside__title {
+    margin: 0;
+    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    font-weight: 600;
+    color: var(--forgebook-tone);
+  }
+  .forgebook-tabs {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+    min-width: 0;
+  }
+  .forgebook-tabs__list {
+    display: flex;
+    gap: 0.25rem;
+    overflow-x: auto;
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
+  }
+  .forgebook-tabs__tab {
+    flex: none;
+    padding: 0.375rem 0.625rem;
+    border: 0;
+    border-radius: var(--forgebook-radius-control-small) var(--forgebook-radius-control-small) 0 0;
+    background: none;
+    box-shadow: inset 0 -2px 0 transparent;
+    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+    cursor: pointer;
+    transition: color 150ms ease-out, box-shadow 150ms ease-out;
+  }
+  .forgebook-tabs__tab:hover {
+    color: var(--forgebook-text);
+  }
+  .forgebook-tabs__tab[aria-selected=true] {
+    color: var(--forgebook-accent-text);
+    box-shadow: inset 0 -2px 0 var(--forgebook-accent);
+  }
+  .forgebook-tabs__tab:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-tabs__panel {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
+    min-width: 0;
+  }
+  .forgebook-tabs__panel[hidden] {
+    display: none;
+  }
+  .forgebook-steps {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    counter-reset: forgebook-step;
+  }
+  .forgebook-steps__step {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+    min-width: 0;
+    padding-inline-start: calc(1.75rem + 0.75rem);
+    counter-increment: forgebook-step;
+  }
+  .forgebook-steps__step::before {
+    content: counter(forgebook-step);
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    display: grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
+    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    font-weight: 600;
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-steps__step:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: calc(1.75rem + 0.25rem);
+    bottom: calc(-1 * 1.25rem + 0.25rem);
+    inset-inline-start: calc(0.875rem - 0.5px);
+    width: 1px;
+    background: var(--forgebook-separator);
+  }
+  .forgebook-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+    gap: 0.75rem;
+  }
+  .forgebook-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: 0.75rem 1rem;
+    border-radius: var(--forgebook-radius-card);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+    color: inherit;
+  }
+  .forgebook-card > .forgebook-prose > :last-child {
+    margin-bottom: 0;
+  }
+  .forgebook-card__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0;
+    font: 600 0.875rem/1.3 var(--forgebook-font-sans);
+  }
+  .forgebook-card--link {
+    text-decoration: none;
+    transition: box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .forgebook-card--link .forgebook-card__title {
+    color: var(--forgebook-accent-text);
+  }
+  .forgebook-card--link:hover {
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge-hover), 0 4px 14px var(--forgebook-shadow-lift);
+  }
+  .forgebook-card--link:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent), 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+  }
+  .forgebook-card__description {
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-docs__foot {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
+  .forgebook-docs__around {
+    display: grid;
+    gap: 0.125rem;
+    padding: 0.625rem 0.75rem;
+    border-radius: var(--forgebook-radius-control);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+    color: inherit;
+    text-decoration: none;
+    transition: box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .forgebook-docs__around[data-side=next] {
+    justify-items: end;
+    text-align: end;
+  }
+  .forgebook-docs__around:hover {
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge-hover), 0 4px 14px var(--forgebook-shadow-lift);
+  }
+  .forgebook-docs__around:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent), 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+  }
+  .forgebook-docs__around-label {
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-docs__around-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-accent-text);
+  }
+  .forgebook-contents__title {
+    margin: 0;
+    font: 600 0.6875rem/1.3 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-contents__list {
+    display: grid;
+    gap: 0.125rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .forgebook-contents__list [data-depth="3"] {
+    padding-inline-start: 0.75rem;
+  }
+  .forgebook-contents__link {
+    display: block;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--forgebook-radius-control-small);
+    box-shadow: inset 2px 0 0 transparent;
+    font: 400 0.78125rem/1.4 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+    text-decoration: none;
+    transition: color 150ms ease-out, background-color 150ms ease-out;
+  }
+  .forgebook-contents__link:hover {
+    background: var(--forgebook-hover);
+    color: var(--forgebook-text);
+  }
+  .forgebook-contents__link[aria-current=location] {
+    color: var(--forgebook-accent-text);
+    font-weight: 500;
+  }
+  .forgebook-contents__link:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-contents--column {
+    position: sticky;
+    top: 1.5rem;
+    flex: none;
+    box-sizing: border-box;
+    display: grid;
+    gap: 0.5rem;
+    width: 13rem;
+    max-height: calc(100dvh - 10rem);
+    margin-top: 1.5rem;
+    padding-inline-end: 1rem;
+    overflow-y: auto;
+  }
+  .forgebook-contents--fold {
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--forgebook-radius-control);
+    background: var(--forgebook-fill-quiet);
+  }
+  .forgebook-contents--fold > summary {
+    cursor: pointer;
+    border-radius: var(--forgebook-radius-control-small);
+  }
+  .forgebook-contents--fold > summary:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-contents--fold > nav {
+    margin-top: 0.5rem;
+  }
+  @media (max-width: 40rem) {
+    .forgebook-docs__body {
+      padding-inline: 1rem;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .forgebook-anchor::before,
+    .forgebook-contents__link,
+    .forgebook-docs__around,
+    .forgebook-tabs__tab,
+    .forgebook-card--link {
+      transition: none;
+    }
+  }
+}

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

@@ -1,19 +1,25 @@
 /**
  * The tabs a story's panel shows: Props, Events and Parts and styling from its component's docs, Code from its file,
- * Accessibility always; a tab the story has nothing for is left out. A story about logic opens on its hook's Signature
- * and shows no tab of args (`logicTabs`).
+ * the plugins', Accessibility always; a tab the story has nothing for is left out. A story about logic opens on its hook's
+ * Signature and shows no tab of args (`logicTabs`).
+ *
+ * @remarks
+ * The dock draws only the chosen tab's content, and most stories open on Props: the other tabs' modules (Events,
+ * Interactions, Parts and styling, Code, Accessibility) load the first time each is chosen (`lazyModule.tsx`), and a
+ * plugin's the first time it is shown, so a first load fetches none of them. What the row of tabs shows of them (a hint, whether there is one) is in `tabSummaries`.
  *
  * @module
  */
 import type { StoryControlsSetting, StoryFileCode } from "@forgebook/story-format/source";
 import { type PanelArgTypes } from "../argTypes.ts";
-import type { ComponentDocs } from "../componentDocs.ts";
+import { type ComponentDocs } from "../componentDocs.ts";
 import type { ArgValue, PanelArgs } from "../messages.ts";
 import type { NamedValues } from "../namedValues.ts";
 import type { PlayTrace } from "../playTrace.ts";
-import { type CheckState } from "./A11yTab.tsx";
+import type { TreeStory } from "../storyTree.ts";
+import type { CheckState } from "./A11yTab.tsx";
 import type { DockTab } from "./Dock.tsx";
-import { type TextArgNote } from "./PropsTab.tsx";
+import type { TextArgNote } from "./PropRows.tsx";
 import type { EventCall } from "./useFrameMessages.ts";
 import type { Loaded } from "./useLoaded.ts";
 import type { WorstCaseState } from "./worstArgs.ts";
@@ -23,10 +29,11 @@ export type DockTabsInput = {
     readonly docs: Loaded<ComponentDocs>;
     /** The story file's code, as loaded. */
     readonly code: Loaded<StoryFileCode>;
-    /** The story's export name. */
-    readonly exportName: string;
-    /** Whether the story is about logic: its hook's signature comes first. */
-    readonly isLogic: boolean;
+    /**
+     * The story: its export name, whether it is about logic (its hook's signature comes first), and where it puts the
+     * required props (none for the catalogue's).
+     */
+    readonly story: Pick<TreeStory, "exportName" | "isLogic" | "requiredFirst">;
     /** The component's name from the sidebar, for the JSX when the docs have none. */
     readonly componentName: string;
     /** The props the story lets the panel set. */
@@ -47,6 +54,8 @@ export type DockTabsInput = {
     readonly namedValues: NamedValues | undefined;
     /** The props the story gives a text by its key, by name. */
     readonly textArgs: Readonly<Record<string, TextArgNote>>;
+    /** The prop groups the component's meta lists first, in order (`parameters.propGroups`); empty when none. */
+    readonly propGroups: readonly string[];
     /** The story's calls, newest first. */
     readonly calls: readonly EventCall[];
     /** Clears the calls. */
@@ -59,6 +68,8 @@ export type DockTabsInput = {
     readonly check: CheckState;
     /** Runs it; none when it cannot run. */
     readonly onCheck: (() => void) | undefined;
+    /** The plugins' tabs the story has something for. */
+    readonly pluginTabs: readonly DockTab[];
 };
 /**
  * The tabs of a story's panel, in order.
@@ -66,4 +77,3 @@ export type DockTabsInput = {
  * @param input - the docs, the code, the values, the calls, the check and their setters.
  */
 export declare const dockTabs: (input: DockTabsInput) => DockTab[];
-//# sourceMappingURL=dockTabs.d.ts.map

package/dist/src/shell/dockTabs.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { panelProps } from "../argTypes.js";
-import { A11yTab, a11yHint } from "./A11yTab.js";
-import { CodeTab } from "./CodeTab.js";
-import { EventsTab } from "./EventsTab.js";
-import { InteractionsTab, interactionsHint } from "./InteractionsTab.js";
-import { PartsTab, styleHooks } from "./PartsTab.js";
+import { codeNameOf } from "../componentDocs.js";
+import { lazyModule } from "./lazyModule.js";
+import { LazyTab } from "./lazyTab.js";
 import { PropsTab } from "./PropsTab.js";
 import { SignatureReference } from "./SignatureReference.js";
 import { STRINGS } from "./strings.js";
+import { a11yHint, interactionsHint, styleHooks } from "./tabSummaries.js";
+/** The Events tab, its module, loaded when the tab is first chosen. */
+const EVENTS_TAB = lazyModule(() => import("./EventsTab.js").then((module) => module.EventsTab));
+/** The Interactions tab, its module, loaded when the tab is first chosen. */
+const INTERACTIONS_TAB = lazyModule(() => import("./InteractionsTab.js").then((module) => module.InteractionsTab));
+/** The Parts and styling tab, its module, loaded when the tab is first chosen. */
+const PARTS_TAB = lazyModule(() => import("./PartsTab.js").then((module) => module.PartsTab));
+/** The Code tab, its module, loaded when the tab is first chosen. */
+const CODE_TAB = lazyModule(() => import("./CodeTab.js").then((module) => module.CodeTab));
+/** The Accessibility tab, its module, loaded when the tab is first chosen. */
+const A11Y_TAB = lazyModule(() => import("./A11yTab.js").then((module) => module.A11yTab));
 /** A message in place of a tab's content: the docs or the code are loading or could not be read. */
 const notice = (text, isProblem) => (_jsx("p", { className: isProblem ? "forgebook-problems" : "forgebook-tab-note", role: isProblem ? "alert" : undefined, children: text }));
 /**
@@ -21,7 +30,7 @@ const propsTab = (input, props) => props.some((prop) => prop.kind !== "event")
         {
             id: "props",
             label: STRINGS.tabs.props,
-            content: (_jsx(PropsTab, { props: props, values: input.values, controls: input.controls, onValueChange: input.onValueChange, onReset: input.onReset, worstCase: input.worstCase, namedValues: input.namedValues, textArgs: input.textArgs }))
+            content: (_jsx(PropsTab, { props: props, values: input.values, controls: input.controls, onValueChange: input.onValueChange, onReset: input.onReset, worstCase: input.worstCase, namedValues: input.namedValues, textArgs: input.textArgs, componentGroups: input.propGroups, requiredFirst: input.story.requiredFirst }))
         }
     ]
     : [];
@@ -42,19 +51,19 @@ const eventsOf = (props, actions) => {
     ];
 };
 /**
- * The Events tab, when the story has an event or an action.
+ * The Events tab, when the story has an event or an action, or made a call a framework reports (a router's `push`).
  *
  * @param input - what the tabs are built from.
  * @param events - the events and actions.
  */
-const eventsTab = (input, events) => events.length === 0
+const eventsTab = (input, events) => events.length === 0 && input.calls.length === 0
     ? []
     : [
         {
             id: "events",
             label: STRINGS.tabs.events,
             hint: input.calls.length === 0 ? undefined : String(input.calls.length),
-            content: _jsx(EventsTab, { events: events, calls: input.calls, onClearCalls: input.onClearCalls })
+            content: (_jsx(LazyTab, { module: EVENTS_TAB, tabProps: { events, calls: input.calls, onClearCalls: input.onClearCalls } }))
         }
     ];
 /** The tabs read from the component's docs: Props, Events, Parts and styling. */
@@ -69,17 +78,20 @@ const docsTabs = (input) => {
         ];
     }
     // the docs' place while they load or fail: the tab the story opens on once they are read
-    const docsTab = input.isLogic
+    const docsTab = input.story.isLogic
         ? { id: "signature", label: STRINGS.tabs.signature }
         : { id: "props", label: STRINGS.tabs.props };
+    // the play's trace comes from the frame, not from the docs: a first read of a project's docs can take seconds, and a
+    // play that finished meanwhile is shown without waiting for them, or when they fail
+    const played = input.trace === undefined ? [] : [interactionsTab(input.trace, input.onPlayAgain)];
     if (docs.status === "loading")
-        return [{ ...docsTab, content: notice(STRINGS.docsLoading, false) }];
+        return [{ ...docsTab, content: notice(STRINGS.docsLoading, false) }, ...played];
     if (docs.status === "error") {
-        return [{ ...docsTab, content: notice(`${STRINGS.docsError}: ${docs.message}`, true) }];
+        return [{ ...docsTab, content: notice(`${STRINGS.docsError}: ${docs.message}`, true) }, ...played];
     }
     const component = docs.value;
     const events = eventsOf(component.props, input.actions);
-    if (input.isLogic)
+    if (input.story.isLogic)
         return logicTabs(input, component);
     const tabs = [];
     tabs.push(...propsTab(input, panelProps(component.props, input.argTypes)));
@@ -91,7 +103,7 @@ const docsTabs = (input) => {
             id: "parts",
             label: STRINGS.tabs.parts,
             hint: component.parts.length === 0 ? undefined : STRINGS.partCount(component.parts.length),
-            content: _jsx(PartsTab, { docs: component })
+            content: _jsx(LazyTab, { module: PARTS_TAB, tabProps: { docs: component } })
         });
     }
     return tabs;
@@ -122,14 +134,19 @@ const interactionsTab = (trace, onPlayAgain) => ({
     id: "play",
     label: STRINGS.tabs.play,
     hint: interactionsHint(trace),
-    content: _jsx(InteractionsTab, { trace: trace, onPlayAgain: onPlayAgain })
+    content: _jsx(LazyTab, { module: INTERACTIONS_TAB, tabProps: { trace, onPlayAgain } })
 });
-/** The Code tab, when the story file's code is loaded or failed to load. */
+/** The Code tab, when the story file has code: loading, loaded, or failed to load. */
 const codeTabs = (input) => {
     const { code, docs } = input;
     // without the file's code, a story with a render would show the JSX of its args, which is not what it draws
-    if (code.status === "loading" || code.status === "none")
+    if (code.status === "none")
         return [];
+    // the code's place while it loads: a story without props opens on the first tab, and without this one the first
+    // would be the next (a plugin's), opened and its module loaded, before the code arrives and takes its place
+    if (code.status === "loading") {
+        return [{ id: "code", label: STRINGS.tabs.code, content: notice(STRINGS.codeLoading, false) }];
+    }
     if (code.status === "error") {
         return [
             { id: "code", label: STRINGS.tabs.code, content: notice(`${STRINGS.codeError}: ${code.message}`, true) }
@@ -139,7 +156,12 @@ const codeTabs = (input) => {
         {
             id: "code",
             label: STRINGS.tabs.code,
-            content: (_jsx(CodeTab, { code: code.value, exportName: input.exportName, componentName: docs.status === "ready" ? docs.value.name : input.componentName, args: input.values }))
+            content: (_jsx(LazyTab, { module: CODE_TAB, tabProps: {
+                    code: code.value,
+                    exportName: input.story.exportName,
+                    componentName: docs.status === "ready" ? codeNameOf(docs.value) : input.componentName,
+                    args: input.values
+                } }))
         }
     ];
 };
@@ -151,11 +173,11 @@ const codeTabs = (input) => {
 export const dockTabs = (input) => [
     ...docsTabs(input),
     ...codeTabs(input),
+    ...input.pluginTabs,
     {
         id: "a11y",
         label: STRINGS.tabs.a11y,
         hint: a11yHint(input.check),
-        content: _jsx(A11yTab, { check: input.check, onCheck: input.onCheck })
+        content: _jsx(LazyTab, { module: A11Y_TAB, tabProps: { check: input.check, onCheck: input.onCheck } })
     }
 ];
-//# sourceMappingURL=dockTabs.js.map