@mokly/mokly 0.8.0

package/dist/server/shell/css_workspace.js

@@ -0,0 +1,113 @@
+/** Bounded preview/inspector panes and grouped, aligned view controls. */
+export const SHELL_WORKSPACE_CSS = `
+.mbk-workspace {
+  display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
+}
+.mbk:has(.mbk-workspace) .mbk-topbar [data-mokly-schemeswitch] { display: none; }
+.mbk-workspace [hidden] { display: none !important; }
+.mbk-workspace .mbk-screen-head { align-items: center; }
+.mbk-view-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.mbk-icon-button, .mbk-icon-select {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  flex: none; gap: 5px; width: 34px; height: 34px; padding: 0; border: 1px solid transparent;
+  border-radius: 7px; background: transparent; color: var(--chrome-ink-2); cursor: pointer;
+}
+.mbk-icon-button svg, .mbk-icon-select svg { display: block; flex: none; }
+.mbk-icon-select { width: 48px; }
+.mbk-icon-select svg:last-of-type { width: 12px; }
+.mbk-icon-select select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
+.mbk-icon-button:hover, .mbk-icon-select:hover { background: var(--chrome-bg); }
+.mbk-icon-button:focus-visible, .mbk-icon-select:focus-within, .mbk-inspector-resize:focus-visible {
+  outline: 2px solid var(--mokly-accent); outline-offset: 2px;
+}
+.mbk-icon-button[aria-selected="true"], .mbk-icon-button[aria-pressed="true"] {
+  color: var(--mokly-accent); background: var(--mokly-accent-soft); border-color: var(--chrome-border);
+}
+.mbk-icon-button:disabled { opacity: .42; cursor: default; }
+.mbk-selection-bar {
+  display: flex; align-items: center; flex: none; gap: 12px; padding: 8px 24px;
+  background: var(--chrome-surface); border-bottom: 1px solid var(--chrome-border); font-size: 12px;
+}
+.mbk-selection-bar:has(> [hidden]:only-child) { display: none; }
+.mbk-selection-bar label { display: flex; align-items: center; gap: 10px; color: var(--chrome-muted); }
+.mbk-selection-bar select, .mbk-inspector select {
+  background: var(--chrome-surface); color: var(--chrome-ink); border: 1px solid var(--chrome-border); border-radius: 6px; padding: 6px 28px 6px 8px; font: inherit;
+}
+.mbk-entry-status { border: 1px solid var(--chrome-border); border-radius: 5px; padding: 3px 7px; font-weight: 600; color: var(--chrome-ink-2); }
+.mbk-entry-status[data-status="Added"] { color: #246343; background: #e6f3ea; }
+.mbk-entry-status[data-status="Changed"] { color: #745316; background: #faf1d8; }
+.mbk-entry-status[data-status="Removed"] { color: #873a35; background: #fae9e7; }
+.mbk-variant-status { color: var(--chrome-muted); }
+.mbk-selection-error { margin: 0; padding: 10px 24px; color: var(--chrome-ink); }
+.mbk-workspace-panes { display: flex; flex: 1; flex-direction: column; position: relative; min-height: 0; min-width: 0; }
+.mbk-preview-pane { display: flex; flex: 1; flex-direction: column; min-height: 100px; min-width: 0; overflow: hidden; }
+.mbk-inspector { position: relative; flex: none; display: flex; flex-direction: column; min-height: 45px; background: var(--chrome-surface); border-top: 1px solid var(--chrome-border); z-index: 5; }
+.mbk-inspector[data-open="true"] { height: var(--inspector-height, 260px); max-height: calc(100% - 100px); }
+.mbk-inspector-tabs { display: flex; align-items: center; flex: none; gap: 5px; height: 45px; padding: 5px 16px; }
+.mbk-inspector-title { font-size: 12px; font-weight: 600; margin-left: 6px; flex: 1; }
+.mbk-inspector-content { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; font-size: 13px; }
+.mbk-inspector-content > section { padding: 10px 24px 24px; }
+.mbk-inspector-content .mbk-details-body { padding: 0; }
+.mbk-inspector-content h3 { font-size: 13px; margin: 0 0 12px; }
+.mbk-inspector-content p { line-height: 1.5; }
+.mbk-inspector-content a { color: var(--mokly-accent); }
+.mbk-inspector-resize { position: absolute; top: -8.5px; left: 0; right: 0; height: 16px; cursor: row-resize; touch-action: none; z-index: 2; }
+.mbk-inspector-resize::after { content: ''; position: absolute; width: 42px; height: 3px; border-radius: 9px; background: var(--chrome-muted); left: 50%; top: 6.5px; transform: translateX(-50%); }
+.mbk-inspector:not([data-open="true"]) .mbk-inspector-resize { display: none; }
+.mbk-sheet-grab { display: none; }
+.mbk-component-stage { align-items: flex-start; overflow: auto; }
+.mbk-component-canvas { flex: none; }
+.mbk-component-canvas.mbk-frame-mobile { width: 390px; }
+.mbk-component-canvas.mbk-frame-desktop { width: 1024px; }
+.mbk-component-canvas iframe { width: 100%; height: 520px; display: block; border: 1px solid var(--chrome-border); border-radius: 8px; background: white; }
+.mbk-workspace [data-mokly-stage][data-viewport="mobile"] .mbk-frame-desktop,
+.mbk-workspace [data-mokly-stage][data-viewport="desktop"] .mbk-frame-mobile { display: none; }
+.mbk-diff-screen[data-diff-component] .mb-pane-doc iframe { width: 100%; min-width: 390px; height: 520px; border: 1px solid var(--chrome-border); background: white; }
+.mbk-instance-context { display: inline-block; margin: 0 8px 12px 0; }
+.mbk-instance-tree, .mbk-usage-list { list-style: none; padding: 0; margin: 0; }
+.mbk-instance-tree .mbk-instance-tree { padding-left: 20px; border-left: 1px solid var(--chrome-border); }
+.mbk-instance-tree li { padding: 3px 0; }
+.mbk-instance-tree summary { cursor: pointer; color: var(--chrome-muted); font-size: 12px; padding: 4px 0; }
+.mbk-instance-select { border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 6px 8px; color: var(--chrome-ink); text-align: left; cursor: pointer; font: inherit; }
+.mbk-instance-select[aria-pressed="true"] { background: var(--mokly-accent-soft); color: var(--mokly-accent); border-color: var(--chrome-border); }
+.mbk-props-table { width: 100%; border-collapse: collapse; text-align: left; }
+.mbk-props-table td, .mbk-props-table th { border-bottom: 1px solid var(--chrome-border); padding: 8px; vertical-align: top; }
+.mbk-props-table th { width: 130px; font-size: 12px; }
+.mbk-props-table pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 12px; }
+.mbk-usage-list li { padding: 8px 0; border-bottom: 1px solid var(--chrome-border); }
+.mbk-usage-list small { display: block; margin-top: 4px; color: var(--chrome-muted); }
+.mbk-comparison-evidence { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--chrome-border); }
+.mbk-highlight-layer { position: fixed; pointer-events: none; z-index: 4; overflow: hidden; }
+.mbk-highlight-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.mbk-highlight-label { position: absolute; pointer-events: auto; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 4px; background: #336249; color: white; padding: 3px 7px; font: 11px var(--sans); cursor: pointer; }
+.mbk-control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px; }
+.mbk-control-field { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
+.mbk-control-field > label:not(.mbk-control-supplied) { font-size: 12px; font-weight: 600; }
+.mbk-control-field input:not([type=checkbox]), .mbk-control-field select { min-width: 0; width: 100%; padding: 8px 10px; font: inherit; color: var(--chrome-ink); border: 1px solid var(--chrome-border); border-radius: 6px; background: var(--chrome-surface); }
+.mbk-control-field input[type=checkbox] { align-self: start; accent-color: var(--mokly-accent); width: 16px; height: 16px; }
+.mbk-control-field [aria-invalid=true] { border-color: #a33737; }
+.mbk-control-field input:focus-visible, .mbk-control-field select:focus-visible { outline: 2px solid var(--mokly-accent); outline-offset: 2px; }
+.mbk-control-field :disabled { opacity: .6; cursor: default; }
+.mbk-control-field small { color: var(--chrome-muted); }
+.mbk-control-field .mbk-control-supplied { display: flex; align-items: center; gap: 4px; position: absolute; right: 0; top: -3px; color: var(--chrome-muted); font-size: 11px; }
+.mbk-control-field .mbk-control-error, .mbk-control-error { color: #9b3333; }
+.mbk-control-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
+.mbk-control-actions p { margin: 0 auto 0 0; color: var(--chrome-muted); }
+@media (max-width: 56.25rem) {
+  .mbk-workspace .mbk-screen-head { gap: 8px; padding: 12px; }
+  .mbk-workspace .mbk-title-row { gap: 6px; flex-wrap: wrap; }
+  .mbk-workspace .mbk-title-row h2 { font-size: 17px; }
+  .mbk-selection-bar { padding: 8px 12px; }
+  .mbk-workspace-panes { padding-bottom: 46px; }
+  .mbk-inspector { position: absolute; left: 8px; right: 8px; bottom: 0; border: 1px solid var(--chrome-border); border-bottom: 0; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -5px 20px #0000000a; }
+  .mbk-inspector[data-open="true"] { height: min(42%, 320px); min-height: 190px; max-height: calc(100% - 36px); }
+  .mbk-inspector[data-expanded="true"][data-open="true"] { height: 80%; }
+  .mbk-inspector-resize { display: none; }
+  .mbk-inspector-tabs { padding: 4px 10px; }
+  .mbk-inspector-content > section { padding: 8px 14px 20px; }
+  .mbk-sheet-grab { display: grid; flex: none; place-items: center; height: 22px; padding: 0; border: 0; border-radius: 14px 14px 0 0; background: transparent; touch-action: none; cursor: ns-resize; }
+  .mbk-sheet-grab span { width: 36px; height: 5px; border-radius: 9px; background: var(--chrome-muted); opacity: .5; }
+  .mbk-inspector:not([data-open="true"]) .mbk-sheet-grab { display: none; }
+}
+`;
+//# sourceMappingURL=css_workspace.js.map

package/dist/server/shell/css_workspace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_workspace.js","sourceRoot":"","sources":["../../../src/server/shell/css_workspace.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GlC,CAAC"}

package/dist/server/shell/details.d.ts

@@ -0,0 +1,12 @@
+import type { Catalogue } from "../catalogue.js";
+import type { RoutedEntry, RouteTarget } from "./target.js";
+export declare function EntryDetailsBody(props: {
+    catalogue: Catalogue;
+    entry: RoutedEntry;
+}): import("react").JSX.Element;
+/** The collapsed-by-default details panel for the selected route. */
+export declare function DetailsPanel(props: {
+    catalogue: Catalogue;
+    target: RouteTarget;
+}): import("react").JSX.Element;
+//# sourceMappingURL=details.d.ts.map

package/dist/server/shell/details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../../../src/server/shell/details.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2F5D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACpB,+BA8DA;AAED,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,WAAW,CAAC;CACrB,+BAoBA"}

package/dist/server/shell/details.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { catalogueViewHref } from "../../navigation/delivery.js";
+import { ChevronIcon, FlowIcon } from "./icons.js";
+import { TagChip } from "./tags.js";
+function MetaRow(props) {
+    return (_jsxs("div", { className: "mbk-meta-row", children: [_jsx("span", { className: "mbk-meta-k", children: props.label }), _jsx("span", { className: "mbk-meta-v", children: props.children })] }));
+}
+function PathChips(props) {
+    return (_jsx("span", { className: "mbk-chips", children: props.values.map((value) => (_jsx("code", { className: "mbk-code", children: value }, value))) }));
+}
+/** Generated fragment routes for a screen, dark renders after the light ones. */
+function generatedPaths(screen) {
+    const paths = [screen.fragments.mobile, screen.fragments.desktop];
+    if (screen.darkFragments) {
+        paths.push(screen.darkFragments.mobile, screen.darkFragments.desktop);
+    }
+    return paths;
+}
+/** The schemes a screen renders in, named for the reader. */
+function schemeNames(screen) {
+    const schemes = screen.darkFragments
+        ? ["light", "dark"]
+        : ["light"];
+    return schemes.join(", ");
+}
+/**
+ * The tags an entry declares. Each chip is a control: the Browse client enters
+ * `tag:<tag>` in the search field for it, so an unenhanced page still reads the
+ * tags as text.
+ */
+function TagChips(props) {
+    if (props.values.length === 0) {
+        return null;
+    }
+    return (_jsx(MetaRow, { label: "Tags", children: _jsx("span", { className: "mbk-chips", children: props.values.map((tag) => (_jsx(TagChip, { tag: tag }, tag))) }) }));
+}
+function UsedByChips(props) {
+    const useCases = props.useCaseIds
+        .map((id) => props.catalogue.byId.get(id))
+        .filter((entry) => entry !== undefined && entry.kind === "use-case");
+    if (useCases.length === 0) {
+        return null;
+    }
+    return (_jsx(MetaRow, { label: "Used by", children: _jsx("span", { className: "mbk-chips", children: useCases.map((useCase) => (_jsxs("a", { className: "mbk-chip flow", href: catalogueViewHref(useCase.route), children: [_jsx(FlowIcon, { size: 11 }), useCase.title] }, useCase.id))) }) }));
+}
+export function EntryDetailsBody(props) {
+    const entry = props.entry;
+    return (_jsxs("div", { className: "mbk-details-body", children: [_jsxs("div", { children: [_jsx("p", { className: "mbk-details-desc", children: entry.description }), entry.rationale ? (_jsxs("p", { className: "mbk-details-rationale", children: [_jsxs("span", { className: "k", children: ["Why this ", entry.kind === "use-case" ? "flow" : entry.kind, " \u2014", " "] }), entry.rationale] })) : null] }), _jsxs("div", { className: "mbk-meta", children: [_jsx(MetaRow, { label: "Source", children: _jsx("code", { className: "mbk-code", children: entry.sourcePath }) }), entry.kind === "screen" ? (_jsx(MetaRow, { label: "Generated", children: _jsx(PathChips, { values: generatedPaths(entry) }) })) : null, entry.kind === "page" ? (_jsx(MetaRow, { label: "Generated", children: _jsx(PathChips, { values: [entry.route] }) })) : null, entry.kind === "screen" && props.catalogue.hasDarkFragments ? (_jsx(MetaRow, { label: "Schemes", children: schemeNames(entry) })) : null, props.catalogue.removedEntries.find((removed) => removed.entry.route === entry.route) ? (_jsx(MetaRow, { label: "Location", children: props.catalogue.removedEntries
+                            .find((removed) => removed.entry.route === entry.route)
+                            ?.ancestors.map(({ title }) => title)
+                            .join(" › ") })) : null, _jsx(TagChips, { values: entry.tags ?? [] }), entry.relatedDocs.length > 0 ? (_jsx(MetaRow, { label: "Related docs", children: _jsx(PathChips, { values: entry.relatedDocs }) })) : null, entry.dependencies.length > 0 ? (_jsx(MetaRow, { label: "Dependencies", children: _jsx(PathChips, { values: entry.dependencies }) })) : null, entry.kind === "screen" ? (_jsx(UsedByChips, { catalogue: props.catalogue, useCaseIds: entry.useCaseIds })) : null] })] }));
+}
+/** The collapsed-by-default details panel for the selected route. */
+export function DetailsPanel(props) {
+    return (_jsxs("details", { className: "mbk-details", "data-mokly-details": "", children: [_jsxs("summary", { className: "mbk-details-bar", children: [_jsx("span", { className: "chev", children: _jsx(ChevronIcon, { size: 12 }) }), "Details", _jsx("span", { className: "mbk-details-hint", children: "Description, rationale, source, related docs, and use cases" })] }), _jsx(EntryDetailsBody, { catalogue: props.catalogue, entry: props.target.entry })] }));
+}
+//# sourceMappingURL=details.js.map

package/dist/server/shell/details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/server/shell/details.tsx"],"names":[],"mappings":"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"}

package/dist/server/shell/diffs.d.ts

@@ -0,0 +1,10 @@
+/** On-demand screen comparison controls inside the catalogue. */
+import type { ReactNode } from "react";
+/** Keep the live screen available while a requested comparison loads. */
+export declare function DiffScreen(props: {
+    children: ReactNode;
+    route: string;
+    eligible?: boolean;
+    component?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=diffs.d.ts.map

package/dist/server/shell/diffs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diffs.d.ts","sourceRoot":"","sources":["../../../src/server/shell/diffs.tsx"],"names":[],"mappings":"AAAA,iEAAiE;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,+BAyDA"}

package/dist/server/shell/diffs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BrowserFrame, PhoneFrame } from "./frames.js";
+/** Keep the live screen available while a requested comparison loads. */
+export function DiffScreen(props) {
+    return (_jsxs("section", { className: "mbk-diff-screen", "data-diff-screen": props.route, "data-diff-component": props.component ? "" : undefined, children: [_jsxs("div", { className: "mbk-diff-toolbar", hidden: props.eligible === false, children: [_jsx("span", { "aria-label": "Comparison mode", className: "mbk-seg", role: "group", children: [
+                            ["current", "Current"],
+                            ["side", "Side by side"],
+                            ["overlay", "Overlay"],
+                            ["difference", "Difference"],
+                        ].map(([mode, label]) => (_jsx("button", { "aria-pressed": mode === "current", "data-diff-mode": mode, type: "button", children: label }, mode))) }), _jsx("button", { "aria-label": "Refresh comparison", className: "mbk-diff-refresh", "data-diff-refresh": "", hidden: true, title: "Refresh comparison", type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u21BB" }) })] }), _jsx("div", { className: "mbk-current-screen", "data-current-screen": "", children: props.children }), _jsx("div", { "aria-live": "polite", className: "mbk-diff-stage", "data-diff-stage": "", hidden: true }), !props.component ? (_jsxs(_Fragment, { children: [_jsx("template", { "data-diff-template": "mobile", children: _jsx(PhoneFrame, {}) }), _jsx("template", { "data-diff-template": "desktop", children: _jsx(BrowserFrame, { address: props.route, expandable: false }) })] })) : null] }));
+}
+//# sourceMappingURL=diffs.js.map

package/dist/server/shell/diffs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diffs.js","sourceRoot":"","sources":["../../../src/server/shell/diffs.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,yEAAyE;AACzE,MAAM,UAAU,UAAU,CAAC,KAK1B;IACC,OAAO,CACL,mBACE,SAAS,EAAC,iBAAiB,sBACT,KAAK,CAAC,KAAK,yBACR,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAErD,eAAK,SAAS,EAAC,kBAAkB,EAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,KAAK,KAAK,aAChE,6BAAiB,iBAAiB,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,YAChE;4BACC,CAAC,SAAS,EAAE,SAAS,CAAC;4BACtB,CAAC,MAAM,EAAE,cAAc,CAAC;4BACxB,CAAC,SAAS,EAAE,SAAS,CAAC;4BACtB,CAAC,YAAY,EAAE,YAAY,CAAC;yBAC7B,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACvB,iCACgB,IAAI,KAAK,SAAS,oBAChB,IAAI,EAEpB,IAAI,EAAC,QAAQ,YAEZ,KAAK,IAHD,IAAI,CAIF,CACV,CAAC,GACG,EACP,+BACa,oBAAoB,EAC/B,SAAS,EAAC,kBAAkB,uBACV,EAAE,EACpB,MAAM,QACN,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,QAAQ,YAEb,8BAAkB,MAAM,uBAAS,GAC1B,IACL,EACN,cAAK,SAAS,EAAC,oBAAoB,yBAAqB,EAAE,YACvD,KAAK,CAAC,QAAQ,GACX,EACN,2BACY,QAAQ,EAClB,SAAS,EAAC,gBAAgB,qBACV,EAAE,EAClB,MAAM,SACN,EACD,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAClB,8BACE,yCAA6B,QAAQ,YACnC,KAAC,UAAU,KAAG,GACL,EACX,yCAA6B,SAAS,YACpC,KAAC,YAAY,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,GAChD,IACV,CACJ,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAC;AACJ,CAAC"}

package/dist/server/shell/document.d.ts

@@ -0,0 +1,6 @@
+import type { Catalogue } from "../catalogue.js";
+import type { ShellContext } from "./context.js";
+import type { ShellView } from "./views.js";
+/** Render one full Mokly shell page to an HTML document string. */
+export declare function renderShellPage(catalogue: Catalogue, view: ShellView, context: ShellContext): string;
+//# sourceMappingURL=document.d.ts.map

package/dist/server/shell/document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../src/server/shell/document.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAMjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAuC5C,mEAAmE;AACnE,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,YAAY,GACpB,MAAM,CA+CR"}

package/dist/server/shell/document.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Server-side full-document rendering for the served Mokly shell. Full
+// pages keep one persistent frame — top bar, catalogue navigation, and status
+// region — around the route-owned main view that progressive navigation
+// replaces.
+import { renderToStaticMarkup } from "react-dom/server";
+import { SchemeSwitch } from "./head.js";
+import { BrandIcon, IconSvg, SearchIcon } from "./icons.js";
+import { CatalogueNav } from "./nav.js";
+import { SearchTagPicker } from "./tags.js";
+import { ShellMain, viewTitle } from "./views.js";
+/** The shared 48px catalogue header keeps search available at every width. */
+function TopBar(props) {
+    return (_jsxs("header", { className: "mbk-topbar", "data-search": "", children: [_jsx("button", { "aria-controls": "mb-nav", "aria-expanded": "false", "aria-label": "Open catalogue navigation", className: "mbk-menu", "data-mokly-menu": "", type: "button", children: _jsx(IconSvg, { size: 16, children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }), _jsxs("a", { "aria-label": "Mokly", className: "mbk-brand", href: "/", children: [_jsx("span", { "aria-hidden": "true", className: "mbk-mark", children: _jsx(BrandIcon, {}) }), _jsx("span", { className: "mbk-name", children: "Mokly" })] }), _jsxs("div", { className: "mbk-search", children: [_jsx(SearchIcon, {}), _jsx("input", { "aria-label": "Search catalogue", "data-mokly-search": "", placeholder: "Search catalogue\u2026", type: "search" }), _jsx(SearchTagPicker, { tags: props.catalogue.tags })] }), props.catalogue.hasDarkFragments ? _jsx(SchemeSwitch, {}) : null] }));
+}
+/** Render one full Mokly shell page to an HTML document string. */
+export function renderShellPage(catalogue, view, context) {
+    const markup = renderToStaticMarkup(_jsxs("html", { "data-mokly-base": context.base, "data-mokly-static": context.delivery ? "" : undefined, "data-mokly-delivery": context.delivery ? JSON.stringify(context.delivery) : undefined, "data-mokly-update-version": context.updateVersion, "data-mokly-content-version": context.delivery ? undefined : context.contentVersion, lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { content: "width=device-width, initial-scale=1", name: "viewport" }), _jsx("title", { children: viewTitle(catalogue, view) }), _jsx("link", { href: "/__mokly/shell.css", rel: "stylesheet" })] }), _jsxs("body", { className: "mbk-fs", children: [_jsxs("div", { className: "mbk", "data-drawer": "closed", "data-mokly-shell": "", children: [_jsx("a", { className: "mbk-skip-link", href: "#mb-main", children: "Skip to content" }), _jsx(TopBar, { catalogue: catalogue }), _jsxs("div", { className: "mbk-body", children: [_jsx(CatalogueNav, { catalogue: catalogue, context: context }), _jsx(ShellMain, { catalogue: catalogue, context: context, view: view })] }), _jsx("p", { "aria-atomic": "true", "aria-live": "polite", className: "mbk-route-status", id: "mb-status", role: "status" })] }), _jsx("script", { src: "/__mokly/client/navigation-resize.js" }), _jsx("script", { src: "/__mokly/client/browse.js", type: "module" }), !context.delivery ? (_jsx("script", { src: "/__mokly/client/browser.js", type: "module" })) : null] })] }));
+    return `<!doctype html>\n${markup}\n`;
+}
+//# sourceMappingURL=document.js.map

package/dist/server/shell/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","sourceRoot":"","sources":["../../../src/server/shell/document.tsx"],"names":[],"mappings":"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"}

package/dist/server/shell/frames.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/** A 390×844 phone body whose screen area hosts the mobile fragment. */
+export declare function PhoneFrame(props: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A desktop browser window whose viewport hosts the desktop fragment. */
+export declare function BrowserFrame(props: {
+    address: string;
+    children?: ReactNode;
+    expandable?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=frames.d.ts.map

package/dist/server/shell/frames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../../src/server/shell/frames.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAWzD;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BAmCA"}

package/dist/server/shell/frames.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapseIcon, CopyIcon, ExpandIcon } from "./icons.js";
+import { PhoneStatusBar } from "./status_bar.js";
+/** A 390×844 phone body whose screen area hosts the mobile fragment. */
+export function PhoneFrame(props) {
+    return (_jsxs("div", { className: "phone-frame", children: [_jsx("div", { className: "phone-notch", "aria-hidden": "true" }), _jsxs("div", { className: "phone-screen", children: [_jsx(PhoneStatusBar, {}), props.children] }), _jsx("div", { className: "phone-home", "aria-hidden": "true" })] }));
+}
+/** A desktop browser window whose viewport hosts the desktop fragment. */
+export function BrowserFrame(props) {
+    return (_jsxs("div", { className: "browser-frame", children: [_jsxs("div", { className: "browser-bar", children: [_jsxs("span", { className: "lights", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), _jsxs("span", { className: "address", children: [_jsx("span", { className: "address-url", children: props.address }), _jsx("span", { "aria-hidden": "true", className: "address-copy", children: _jsx(CopyIcon, {}) })] }), props.expandable !== false ? (_jsxs("button", { "aria-expanded": "false", "aria-label": "Expand to a wider viewport", className: "browser-expand", title: "Expand to a wider viewport", type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "i-expand", children: _jsx(ExpandIcon, {}) }), _jsx("span", { "aria-hidden": "true", className: "i-collapse", children: _jsx(CollapseIcon, {}) })] })) : null] }), _jsx("div", { className: "browser-viewport", children: props.children })] }));
+}
+//# sourceMappingURL=frames.js.map

package/dist/server/shell/frames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.js","sourceRoot":"","sources":["../../../src/server/shell/frames.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,wEAAwE;AACxE,MAAM,UAAU,UAAU,CAAC,KAA+B;IACxD,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,cAAK,SAAS,EAAC,aAAa,iBAAa,MAAM,GAAG,EAClD,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,cAAc,KAAG,EACjB,KAAK,CAAC,QAAQ,IACX,EACN,cAAK,SAAS,EAAC,YAAY,iBAAa,MAAM,GAAG,IAC7C,CACP,CAAC;AACJ,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,YAAY,CAAC,KAI5B;IACC,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,eAAK,SAAS,EAAC,aAAa,aAC1B,gBAAM,SAAS,EAAC,QAAQ,aACtB,aAAK,EACL,aAAK,EACL,aAAK,IACA,EACP,gBAAM,SAAS,EAAC,SAAS,aACvB,eAAM,SAAS,EAAC,aAAa,YAAE,KAAK,CAAC,OAAO,GAAQ,EACpD,8BAAkB,MAAM,EAAC,SAAS,EAAC,cAAc,YAC/C,KAAC,QAAQ,KAAG,GACP,IACF,EACN,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,CAC5B,mCACgB,OAAO,gBACV,4BAA4B,EACvC,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,QAAQ,aAEb,8BAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3C,KAAC,UAAU,KAAG,GACT,EACP,8BAAkB,MAAM,EAAC,SAAS,EAAC,YAAY,YAC7C,KAAC,YAAY,KAAG,GACX,IACA,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,EACN,cAAK,SAAS,EAAC,kBAAkB,YAAE,KAAK,CAAC,QAAQ,GAAO,IACpD,CACP,CAAC;AACJ,CAAC"}

package/dist/server/shell/head.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { Catalogue } from "../catalogue.js";
+import type { CatalogueCrumb } from "./nav_tree.js";
+import type { RouteTarget } from "./target.js";
+/** Viewport selection shown in the header of a screen route. */
+export declare function ViewportSwitch(): import("react").JSX.Element;
+/**
+ * Color scheme selection for catalogues that render dark fragments. The shell
+ * renders one instance in the top bar and one in the screen head band; the
+ * stylesheet reveals whichever fits the current width.
+ */
+export declare function SchemeSwitch(): import("react").JSX.Element;
+/** The breadcrumb, title, and optional action rendered above a target view. */
+export declare function ScreenHead(props: {
+    action?: ReactNode;
+    status?: ReactNode;
+    crumbs: readonly CatalogueCrumb[];
+    heading: string;
+    id?: string | undefined;
+}): import("react").JSX.Element;
+/** The breadcrumb trail, id, and title for one resolved route target. */
+export declare function targetHead(catalogue: Catalogue, target: RouteTarget): {
+    crumbs: CatalogueCrumb[];
+    id?: string;
+    title: string;
+};
+//# sourceMappingURL=head.d.ts.map

package/dist/server/shell/head.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"head.d.ts","sourceRoot":"","sources":["../../../src/server/shell/head.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAe/C,gEAAgE;AAChE,wBAAgB,cAAc,gCAyB7B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,gCAwB3B;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,SAAS,cAAc,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzB,+BAuBA;AAED,yEAAyE;AACzE,wBAAgB,UAAU,CACxB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,WAAW,GAClB;IAAE,MAAM,EAAE,cAAc,EAAE,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAU1D"}

package/dist/server/shell/head.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { structuredCrumbTrail } from "./nav_tree.js";
+function Crumbs(props) {
+    return (_jsx("p", { "aria-label": "Catalogue location", className: "mbk-crumbs", children: props.items.map((item, index) => (_jsxs("span", { children: [index > 0 ? _jsx("span", { className: "sep", children: "\u203A" }) : null, item.label] }, `${item.label}-${index}`))) }));
+}
+/** Viewport selection shown in the header of a screen route. */
+export function ViewportSwitch() {
+    const options = [
+        ["mobile", "Mobile"],
+        ["desktop", "Desktop"],
+        ["both", "Both"],
+    ];
+    return (_jsx("span", { "aria-label": "Viewport", className: "mbk-seg", "data-mokly-viewswitch": "", role: "group", children: options.map(([value, label]) => (_jsx("button", { "aria-pressed": value === "both" ? "true" : "false", "data-viewport-option": value, type: "button", children: label }, value))) }));
+}
+/**
+ * Color scheme selection for catalogues that render dark fragments. The shell
+ * renders one instance in the top bar and one in the screen head band; the
+ * stylesheet reveals whichever fits the current width.
+ */
+export function SchemeSwitch() {
+    const options = [
+        ["light", "Light"],
+        ["dark", "Dark"],
+    ];
+    return (_jsx("span", { "aria-label": "Color scheme", className: "mbk-seg", "data-mokly-schemeswitch": "", role: "group", children: options.map(([value, label]) => (_jsx("button", { "aria-pressed": value === "light" ? "true" : "false", "data-color-scheme-option": value, type: "button", children: label }, value))) }));
+}
+/** The breadcrumb, title, and optional action rendered above a target view. */
+export function ScreenHead(props) {
+    return (_jsxs("div", { className: "mbk-screen-head", children: [_jsxs("div", { className: "mbk-screen-head-copy", children: [_jsx(Crumbs, { items: props.crumbs }), _jsxs("div", { className: "mbk-title-row", children: [_jsx("h2", { children: props.heading }), props.status, props.id ? (_jsxs("button", { "aria-label": `Copy ID ${props.id}`, className: "mbk-idchip", "data-copy-id": props.id, type: "button", children: ["#", props.id] })) : null] })] }), props.action] }));
+}
+/** The breadcrumb trail, id, and title for one resolved route target. */
+export function targetHead(catalogue, target) {
+    return {
+        crumbs: catalogue.removedEntries
+            .find(({ entry }) => entry.route === target.entry.route)
+            ?.ancestors.map(({ title }) => ({ label: title })) ??
+            structuredCrumbTrail(catalogue.hierarchy, target.entry.id),
+        id: target.entry.id,
+        title: target.entry.title,
+    };
+}
+//# sourceMappingURL=head.js.map

package/dist/server/shell/head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"head.js","sourceRoot":"","sources":["../../../src/server/shell/head.tsx"],"names":[],"mappings":"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"}

package/dist/server/shell/icons.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+export declare function IconSvg(props: {
+    children: ReactNode;
+    size: number;
+}): import("react").JSX.Element;
+/** Overlapping mobile and desktop screens in Mokly's brand mark. */
+export declare function BrandIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** Disclosure chevron for collapsible groups and the details bar. */
+export declare function ChevronIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** A collapsed collection: a closed folder that groups child screens/pages. */
+export declare function FolderIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** An expanded collection: an open folder revealing its contents. */
+export declare function FolderOpenIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** A structured screen: one product state in a browser window. */
+export declare function ScreenIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** The search affordance at the leading edge of the top bar's search field. */
+export declare function SearchIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** The copy affordance at the trailing edge of a browser bar's address pill. */
+export declare function CopyIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** Outward arrows on the browser bar's toggle while the frame is inline. */
+export declare function ExpandIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** Inward arrows on the browser bar's toggle while the frame is expanded. */
+export declare function CollapseIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** A complete catalogue page: a document that may hold several states. */
+export declare function PageIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** A declared classification tag, drawn on the details inspector's tag chips. */
+export declare function TagIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+/** A use case: connected steps through canonical screens. */
+export declare function FlowIcon(props: {
+    size?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/server/shell/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/server/shell/icons.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,+BAgBnE;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAUjD;AAED,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMnD;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMlD;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMtD;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOlD;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOlD;AAED,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOhD;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BASlD;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BASpD;AAED,0EAA0E;AAC1E,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOhD;AAED,iFAAiF;AACjF,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO/C;AAED,6DAA6D;AAC7D,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAQhD"}

package/dist/server/shell/icons.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function IconSvg(props) {
+    return (_jsx("svg", { "aria-hidden": "true", fill: "none", height: props.size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", width: props.size, children: props.children }));
+}
+/** Overlapping mobile and desktop screens in Mokly's brand mark. */
+export function BrandIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 17, children: [_jsx("path", { d: "M6.5 5.5V5a2 2 0 0 1 2-2H20a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2h-8", strokeLinecap: "butt" }), _jsx("rect", { height: 13, rx: 1.75, width: 8.5, x: 1.5, y: 7 })] }));
+}
+/** Disclosure chevron for collapsible groups and the details bar. */
+export function ChevronIcon(props) {
+    return (_jsx(IconSvg, { size: props.size ?? 13, children: _jsx("polyline", { points: "9 6 15 12 9 18" }) }));
+}
+/** A collapsed collection: a closed folder that groups child screens/pages. */
+export function FolderIcon(props) {
+    return (_jsx(IconSvg, { size: props.size ?? 13, children: _jsx("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }) }));
+}
+/** An expanded collection: an open folder revealing its contents. */
+export function FolderOpenIcon(props) {
+    return (_jsx(IconSvg, { size: props.size ?? 13, children: _jsx("path", { d: "M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" }) }));
+}
+/** A structured screen: one product state in a browser window. */
+export function ScreenIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("rect", { height: 16, rx: 2, width: 18, x: 3, y: 4 }), _jsx("path", { d: "M3 9h18" })] }));
+}
+/** The search affordance at the leading edge of the top bar's search field. */
+export function SearchIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 15, children: [_jsx("circle", { cx: 11, cy: 11, r: 7 }), _jsx("path", { d: "M20 20l-3.9-3.9" })] }));
+}
+/** The copy affordance at the trailing edge of a browser bar's address pill. */
+export function CopyIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("rect", { height: 13, rx: 2, width: 13, x: 9, y: 9 }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }));
+}
+/** Outward arrows on the browser bar's toggle while the frame is inline. */
+export function ExpandIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("polyline", { points: "9 21 3 21 3 15" }), _jsx("path", { d: "M21 3l-7 7" }), _jsx("path", { d: "M3 21l7-7" })] }));
+}
+/** Inward arrows on the browser bar's toggle while the frame is expanded. */
+export function CollapseIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("polyline", { points: "4 14 10 14 10 20" }), _jsx("polyline", { points: "20 10 14 10 14 4" }), _jsx("path", { d: "M14 10l7-7" }), _jsx("path", { d: "M3 21l7-7" })] }));
+}
+/** A complete catalogue page: a document that may hold several states. */
+export function PageIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }));
+}
+/** A declared classification tag, drawn on the details inspector's tag chips. */
+export function TagIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("path", { d: "M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0l-7.4-7.4A2 2 0 0 1 2.6 12V5a2 2 0 0 1 2-2h7a2 2 0 0 1 1.4.6l7.6 7.6a2 2 0 0 1 0 2.8z" }), _jsx("path", { d: "M7.6 7.6h.01" })] }));
+}
+/** A use case: connected steps through canonical screens. */
+export function FlowIcon(props) {
+    return (_jsxs(IconSvg, { size: props.size ?? 13, children: [_jsx("rect", { height: 8, rx: 2, width: 8, x: 3, y: 3 }), _jsx("path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }), _jsx("rect", { height: 8, rx: 2, width: 8, x: 13, y: 13 })] }));
+}
+//# sourceMappingURL=icons.js.map

package/dist/server/shell/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/server/shell/icons.tsx"],"names":[],"mappings":"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"}

package/dist/server/shell/inspector.d.ts

@@ -0,0 +1,8 @@
+/** Shared tabbed inspector, kept outside the scrolling preview. */
+import type { Catalogue } from "../catalogue.js";
+import type { WorkspaceData } from "./workspace_data.js";
+export declare function Inspector({ catalogue, data, }: {
+    catalogue: Catalogue;
+    data: WorkspaceData;
+}): import("react").JSX.Element;
+//# sourceMappingURL=inspector.d.ts.map

package/dist/server/shell/inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../src/server/shell/inspector.tsx"],"names":[],"mappings":"AAAA,mEAAmE;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,IAAI,GACL,EAAE;IACD,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;CACrB,+BA+GA"}

package/dist/server/shell/inspector.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EntryDetailsBody } from "./details.js";
+import { WorkspaceIcon } from "./workspace_icons.js";
+export function Inspector({ catalogue, data, }) {
+    const nested = data.previewGeneration !== undefined ||
+        data.entry.kind === "screen" ||
+        data.views.some((view) => view.usage?.instances.length);
+    const tabs = [
+        { id: "details", title: "Details" },
+        ...(nested
+            ? [
+                {
+                    id: "components",
+                    title: data.entry.kind === "component"
+                        ? "Nested components"
+                        : "Components",
+                },
+            ]
+            : []),
+        { id: "props", title: "Props" },
+        { id: "usage", title: "Usage" },
+    ];
+    return (_jsxs("section", { className: "mbk-inspector", "data-workspace-inspector": "", "aria-label": "Inspector", children: [_jsx("div", { className: "mbk-inspector-resize", "data-inspector-resize": "", role: "separator", "aria-label": "Resize inspector", "aria-orientation": "horizontal", "aria-controls": "mb-inspector-content", "aria-valuemin": 160, "aria-valuemax": 600, "aria-valuenow": 260, tabIndex: 0 }), _jsx("button", { className: "mbk-sheet-grab", type: "button", "data-inspector-size": "", "aria-label": "Expand inspector", "aria-expanded": "false", children: _jsx("span", {}) }), _jsxs("div", { className: "mbk-inspector-tabs", role: "tablist", "aria-label": "Inspector panels", children: [tabs.map((tab) => (_jsx("button", { type: "button", className: "mbk-icon-button", role: "tab", id: `mb-tab-${tab.id}`, "aria-label": tab.title, title: tab.title, "aria-selected": "false", "aria-controls": `mb-panel-${tab.id}`, "data-inspector-tab": tab.id, children: _jsx(WorkspaceIcon, { name: tab.id }) }, tab.id))), _jsx("span", { className: "mbk-inspector-title", "data-inspector-title": "" }), _jsx("button", { className: "mbk-icon-button", type: "button", "data-inspector-close": "", "aria-label": "Close inspector", title: "Close inspector", hidden: true, children: _jsx(WorkspaceIcon, { name: "close" }) })] }), _jsx("div", { className: "mbk-inspector-content", id: "mb-inspector-content", "data-mokly-scroll": "inspector", hidden: true, children: tabs.map((tab) => (_jsx("section", { role: "tabpanel", id: `mb-panel-${tab.id}`, "aria-labelledby": `mb-tab-${tab.id}`, "data-inspector-panel": tab.id, hidden: true, children: tab.id === "details" ? (_jsxs(_Fragment, { children: [_jsx(EntryDetailsBody, { catalogue: catalogue, entry: data.entry }), _jsx("section", { className: "mbk-comparison-evidence", "data-workspace-evidence": "", hidden: true })] })) : null }, tab.id))) })] }));
+}
+//# sourceMappingURL=inspector.js.map

package/dist/server/shell/inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../src/server/shell/inspector.tsx"],"names":[],"mappings":"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"}

package/dist/server/shell/nav.d.ts

@@ -0,0 +1,8 @@
+import type { Catalogue } from "../catalogue.js";
+import type { ShellContext } from "./context.js";
+/** The served catalogue navigation column. */
+export declare function CatalogueNav(props: {
+    catalogue: Catalogue;
+    context: ShellContext;
+}): import("react").JSX.Element;
+//# sourceMappingURL=nav.d.ts.map