@jxsuite/studio 8.0.1 → 8.1.0

package/src/canvas/preview-placeholder.ts

@@ -0,0 +1,120 @@
+/// <reference lib="dom" />
+/**
+ * A stand-in picture for an image a component preview has no source for.
+ *
+ * Component previews draw a definition with only its own declared `examples` (`browse/
+ * component-examples.ts`), never with data borrowed from the project. A card component whose image
+ * prop defaults to `""` therefore drew a broken-image glyph — or, worse, an `<img src="">`, which
+ * resolves to the document's own url and fails as an image. Previews show the component's SHAPE, so
+ * an empty image is drawn as a neutral placeholder of a typical photo's proportions instead.
+ *
+ * Used by the two surfaces that draw components on their own: the parent-realm previews
+ * (`panels/component-preview.ts`: the Library, the Site panel's component cards, the palette) and
+ * the Stylebook's specimen render in the canvas frame (`canvas/iframe-render.ts`). Never the page
+ * canvas: an empty image on a page is something its author should see.
+ *
+ * Plain DOM with no realm-specific imports, so the frame and the editor share one definition.
+ */
+
+/**
+ * A neutral landscape glyph: the canvas's one structural gray (`#808080`, as `STYLEBOOK_CSS` uses
+ * it) at low opacity, so it reads as a quiet tint on a light card and a dark one alike. A `data:`
+ * image is a document of its own, which no theme token or custom property can reach into.
+ */
+export const PREVIEW_IMAGE_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180" viewBox="0 0 320 180">' +
+    '<rect width="320" height="180" fill="#808080" fill-opacity="0.16"/>' +
+    '<g fill="#808080" fill-opacity="0.38">' +
+    '<circle cx="118" cy="64" r="14"/>' +
+    '<path d="M60 140l52-50 34 30 38-46 76 66z"/>' +
+    "</g></svg>",
+)}`;
+
+/** Marks an `<img>` whose source is the placeholder, so a later real source is told apart. */
+export const PLACEHOLDER_ATTR = "data-jx-image-placeholder";
+
+/** Whether an image names no source at all: a blank `src` (or none) and a blank `srcset`. */
+export function hasNoImageSource(img: HTMLImageElement): boolean {
+  const src = img.getAttribute("src")?.trim() ?? "";
+  const srcset = img.getAttribute("srcset")?.trim() ?? "";
+  if (src !== "" || srcset !== "") {
+    return false;
+  }
+  // A <picture>'s <source srcset> picks the image even when the <img> itself names none.
+  const picture = img.parentElement?.localName === "picture" ? img.parentElement : null;
+  return !picture?.querySelector("source[srcset]:not([srcset=''])");
+}
+
+/** Give one image the placeholder when it has no source; clear the mark once it has a real one. */
+function fill(img: HTMLImageElement): void {
+  if (hasNoImageSource(img)) {
+    img.setAttribute(PLACEHOLDER_ATTR, "");
+    img.setAttribute("src", PREVIEW_IMAGE_PLACEHOLDER);
+  } else if (
+    img.hasAttribute(PLACEHOLDER_ATTR) &&
+    img.getAttribute("src") !== PREVIEW_IMAGE_PLACEHOLDER
+  ) {
+    img.removeAttribute(PLACEHOLDER_ATTR);
+  }
+}
+
+/**
+ * Whether an element is an `<img>`. By tag name rather than `instanceof`: the Stylebook's frame is
+ * another realm, whose `HTMLImageElement` is not this module's.
+ */
+function isImage(element: Element): element is HTMLImageElement {
+  return element.localName === "img";
+}
+
+/** Every `<img>` at or under `node`. */
+function imagesIn(node: Node): HTMLImageElement[] {
+  if (node.nodeType !== node.ELEMENT_NODE || !("querySelectorAll" in node)) {
+    return [];
+  }
+  // SAFETY: an ELEMENT_NODE with `querySelectorAll` is an Element, in whichever realm it lives.
+  const element = node as Element;
+  const found = [...element.querySelectorAll("img")];
+  return isImage(element) ? [element, ...found] : found;
+}
+
+/**
+ * Fill every source-less image under `root` with {@link PREVIEW_IMAGE_PLACEHOLDER}, now and as the
+ * tree changes: a component draws its own children in its `connectedCallback`, after the preview
+ * element is created, and a binding can clear an image's source later. A real source always wins —
+ * the placeholder only ever replaces nothing. Returns a function that stops watching.
+ */
+export function fillPreviewImages(root: Element): () => void {
+  for (const img of imagesIn(root)) {
+    fill(img);
+  }
+  /* The root's own realm's observer where it has one (the Stylebook's frame); this realm's for a
+     document with no window, such as a parsed one — an observer watches any same-origin node. */
+  const Observer = root.ownerDocument.defaultView?.MutationObserver ?? MutationObserver;
+  const observer = new Observer((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") {
+        const { target } = record;
+        if (target.nodeType === target.ELEMENT_NODE && "localName" in target) {
+          // SAFETY: an ELEMENT_NODE target with `localName` is an Element (attributes only land on elements).
+          const element = target as Element;
+          if (isImage(element)) {
+            fill(element);
+          }
+        }
+        continue;
+      }
+      for (const added of record.addedNodes) {
+        for (const img of imagesIn(added)) {
+          fill(img);
+        }
+      }
+    }
+  });
+  observer.observe(root, {
+    attributeFilter: ["src", "srcset"],
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+  return () => observer.disconnect();
+}

package/src/editor/shortcuts.ts

@@ -1010,6 +1010,9 @@ const SELF_SCROLLING_MODES: ReadonlySet<string> = new Set([
   "media-home",
   "preview",
   "publish-home",
+  /* The Styles workspace's Variables view — `style/variables-view.ts`. An `overflow-y: auto`
+     column over the stage; without it here the wheel panned an artboard that does not exist. */
+  "tokens",
 ]);
 
 /**

package/src/panels/component-preview.ts

@@ -8,6 +8,7 @@
 
 import { defineElement, setSkipServerFunctions } from "@jxsuite/runtime";
 import { projectState } from "../store";
+import { fillPreviewImages } from "../canvas/preview-placeholder";
 import type { ComponentEntry } from "../files/components";
 import type { JsonValue } from "@jxsuite/schema/types";
 
@@ -43,6 +44,10 @@ export async function renderComponentPreview(
     for (const [name, value] of props) {
       properties[name] = value;
     }
+    /* Watched from now on: the instance draws its children when it connects, after this returns.
+       A preview shows the component's shape, so an image it has no source for is a placeholder,
+       not a broken glyph (`canvas/preview-placeholder.ts`). */
+    fillPreviewImages(el);
     return el;
   } catch (error) {
     console.warn("Component preview failed:", comp.tagName, error);

package/src/panels/pane-context.ts

@@ -105,6 +105,7 @@ import { componentPropEntries, isComponentDoc } from "../component-props";
 import { mediaDisplayName } from "./shared";
 import type { CanvasView, FitMode } from "../canvas/canvas-utils";
 import { EDITOR_KIND_LABELS } from "../commands/context";
+import type { EditorKind } from "../commands/context";
 import type { ParamValues } from "../page-params";
 import type { CommandArgValues } from "../commands/command-args";
 import type { Tab } from "../tabs/tab";
@@ -781,22 +782,40 @@ function lensSummary(paneId: string): string {
 
 // ─── Axis 1 · Editor kind ────────────────────────────────────────────────────
 
+/**
+ * Editor kinds that are entered by a gesture elsewhere and never offered as a choice.
+ *
+ * A comparison (`diff`) is opened from Publish's changed files or its version history, which says
+ * what it is compared against; a Diff segment on every document would compare whatever is open
+ * against whatever HEAD is, and was a third way into a view two browsers already own. While a tab
+ * is IN one, the axis names it and offers nothing: the way out is Back, beside it.
+ */
+const IMPLICIT_EDITOR_KINDS: ReadonlySet<EditorKind> = new Set(["diff"]);
+
 function editorAxis(tab: Tab): Partial<PaneContextView> {
   /* What the DOCUMENT declares, and nothing else. This read `hostableKindsOf` — the declared kinds
      narrowed by what the tab's pane was allowed to host — so a page in the side pane was offered
      Code and not Design. The pane cap is gone; a control that cannot go anywhere is still the
      defect this axis exists to remove, and one declared kind still renders as text. */
-  const kinds = editorKindsOf(tab);
   const current = editorKindOf(tab);
+  const kinds = IMPLICIT_EDITOR_KINDS.has(current)
+    ? [current]
+    : editorKindsOf(tab).filter((kind) => !IMPLICIT_EDITOR_KINDS.has(kind));
   if (kinds.length < 2) {
-    // One kind is not a choice. Rendering it as a dropdown would be a control that cannot move —
+    // One kind is not a choice. Rendering it as a segmented group would be a control that cannot move —
     // Which is the defect this axis exists to remove, in miniature.
-    return { editorLabel: EDITOR_KIND_LABELS[current], editorMode: "static" };
+    return { editorLabel: EDITOR_KIND_LABELS[current], editorMode: "static", editorState: "shown" };
   }
   return {
     editorMode: "picker",
-    editorOptions: kinds.map((kind) => ({ label: EDITOR_KIND_LABELS[kind], value: kind })),
-    editorValue: current,
+    editorState: "shown",
+    editors: kinds.map((kind) => ({
+      checked: kind === current ? "true" : "false",
+      hint: `Open this document in ${EDITOR_KIND_LABELS[kind]}`,
+      key: kind,
+      label: EDITOR_KIND_LABELS[kind],
+      value: kind,
+    })),
   };
 }
 
@@ -895,25 +914,26 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
   const plainQueries = featureQueries.filter(({ query }) => !isSchemeQuery(query));
   const scheme = ui.previewColorScheme;
   const { activeMedia } = ui;
-  const sizeLabel = activeMedia ? mediaDisplayName(activeMedia) : "Base";
-  const schemeLabel = SCHEMES.find(([value]) => value === scheme)?.[1] ?? "Auto";
   const locale = localeOf(tab);
-  /* The language joins the trigger ONLY when the pane is not drawing the document's own — a French
-     page open in a French pane is not a rendering context worth three more characters, and a bar
-     that grew a third term in every multilingual project would stop reading as a state. */
-  const contextSummary = [
-    sizeLabel,
-    schemeQueries.length > 0 ? schemeLabel : null,
-    locale?.overridden ? localeLabel(locale.effective) : null,
-  ]
-    .filter((part) => part !== null)
-    .join(" · ");
   /* An entry written on the canvas is wrapped in its template's layout like a page (§22.5), so it
      offers the same "show layout" choice. Whether a layout resolves for it is read asynchronously
      by the canvas; the project default is the answer this bar can give synchronously. */
   const hasLayout =
     (isPageDoc(tab) && Boolean(getEffectiveLayoutPath(tab.doc.document.$layout))) ||
     (Boolean(projectState?.isSiteProject) && writesEntryOnCanvas(tab.documentPath));
+  /* The trigger names only what its popover holds and is NOT at rest. Size and scheme are on the bar
+     as groups now, so repeating them here would print the same state twice; and a trigger that read
+     "Base · Auto" over a popover that no longer offers either would be describing another control.
+     The language joins ONLY when the pane is not drawing the document's own — a French page open in
+     a French pane is not a rendering context worth three more characters. */
+  const featuresOn = plainQueries.filter(({ name }) => ui.featureToggles[name]).length;
+  const contextSummary = [
+    locale?.overridden ? localeLabel(locale.effective) : null,
+    featuresOn > 0 ? `${featuresOn} ${featuresOn === 1 ? "query" : "queries"}` : null,
+    hasLayout && ui.showLayout === false ? "No layout" : null,
+  ]
+    .filter((part) => part !== null)
+    .join(" · ");
   const page = isPageDoc(tab);
   const params = page ? paramRows(tab) : [];
   const props = page ? [] : propRows(tab, paneId);
@@ -952,6 +972,8 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
     })) satisfies PaneContextChoice[],
     schemeState: schemeQueries.length > 0 ? "shown" : "hidden",
     sizes: sizeRows(sizeBreakpoints, activeMedia),
+    // Base alone is not a choice: a one-segment group would be a control that cannot move.
+    sizesState: sizeBreakpoints.length > 0 ? "shown" : "hidden",
   };
 }
 
@@ -1134,7 +1156,10 @@ function actionsFor(paneId: string, ctx: PaneContextCtx): PaneContextActions {
       if (!tab) {
         return;
       }
-      const editorKind = editorKindsOf(tab).find((candidate) => candidate === kind);
+      // An implicit kind is refused like an undeclared one: the axis never offers it.
+      const editorKind = editorKindsOf(tab).find(
+        (candidate) => candidate === kind && !IMPLICIT_EDITOR_KINDS.has(candidate),
+      );
       const mode = editorKind && modeForEditorKind(tab, editorKind);
       if (!mode) {
         return;

package/src/panels/site-model.ts

@@ -3,8 +3,8 @@
  *
  * The panel lists the project as an author thinks of it: pages by address, then the templates,
  * components and media pages are made of. Everything here turns facts the flow has already gathered
- * (paths, `$paths.contentType`, entry counts, usage counts) into the rows the surface draws, so the
- * ordering, the nesting, the labels and the filter are testable without a project.
+ * (paths, `$paths.contentType`, entry counts) into the rows the surface draws, so the ordering, the
+ * nesting, the labels and the filter are testable without a project.
  *
  * **Routes come from the router.** Rows are ordered and labelled with `fileToRoute` and
  * `compareRoutes` from `@jxsuite/site/routes` — the functions the build's page discovery sorts with
@@ -64,7 +64,7 @@ export interface SiteTemplateRow {
   key: string;
   path: string;
   label: string;
-  /** "used by N pages", or empty where the host has no reference index (the count is omitted). */
+  /** "default layout" for the project's `defaults.layout`, else empty. */
   detail: string;
   selected: SiteSelected;
 }
@@ -320,28 +320,16 @@ export function filterPageRows(rows: readonly SitePageRow[], needle: string): Si
   return kept;
 }
 
-/** "used by 3 pages", "used by 1 page", "not used yet", or "" when the count is unknown. */
-export function usedByLabel(pages: number | null): string {
-  if (pages === null) {
-    return "";
-  }
-  if (pages === 0) {
-    return "not used yet";
-  }
-  return `used by ${pages} ${pages === 1 ? "page" : "pages"}`;
-}
-
 /**
  * The Templates section's rows: every JSON layout under `layouts/`, by path. Layouts are JSON only
  * (the layout resolver parses nothing else), so a non-JSON file there is not a template.
  *
- * The project's default layout (`defaults.layout`) says so instead of a count: every page that
- * names no layout uses it without referencing it, so the reference index's count would read "not
- * used yet" for the layout most pages are poured into.
+ * The project's default layout (`defaults.layout`) says so. No row says how many pages use it:
+ * counting would ask the reference index once per template on every paint, which is a project-wide
+ * sweep per row (`specs/studio.md` §5.7).
  */
 export function templateRows(
   paths: readonly string[],
-  usedBy: (path: string) => number | null,
   activePath: string | null,
   needle: string,
   defaultPath: string | null = null,
@@ -356,7 +344,7 @@ export function templateRows(
       }
       return [
         {
-          detail: path === defaultPath ? "default layout" : usedByLabel(usedBy(path)),
+          detail: path === defaultPath ? "default layout" : "",
           key: path,
           label,
           path,

package/src/panels/site-panel.ts

@@ -48,7 +48,6 @@ import { previewFileSrc } from "../files/media-paths";
 import { elementForAsset } from "../editor/file-drop-action";
 import { readPageFacts } from "../content/collection-pages";
 import { listCollectionEntryIds } from "../grid/sources/content-source";
-import { loadUsages, onUsagesInvalidated, peekUsages, splitUsages } from "../services/references";
 import { projectMediaFiles } from "../ui/media-picker";
 import { runActiveReported } from "../commands/run-reported";
 import { emptySitePanelValues, mountSitePanelSurface } from "../surfaces/site-panel";
@@ -312,16 +311,6 @@ function defaultLayoutPath(): string | null {
   return isString(layout) ? layout.replace(/^\.\//, "") : null;
 }
 
-/** How many pages use a template, from the reference index — `null` where it cannot say yet. */
-function templateUsage(path: string): number | null {
-  const state = peekUsages({ path });
-  if (state === null) {
-    void loadUsages({ path }).then(repaint);
-    return null;
-  }
-  return state.status === "ready" ? splitUsages(state.result).pages : null;
-}
-
 // ─── The view ────────────────────────────────────────────────────────────────
 
 /** The filter, as typed. One per window: the panel is project-level and there is one project. */
@@ -366,12 +355,8 @@ export function sitePanelValues(): SitePanelValues {
     : [];
   const pages = filterPageRows(allPages, needle);
   const defaultLayout = defaultLayoutPath();
-  const allTemplates = index
-    ? templateRows(index.layouts, templateUsage, activePath, "", defaultLayout)
-    : [];
-  const templates = index
-    ? templateRows(index.layouts, templateUsage, activePath, needle, defaultLayout)
-    : [];
+  const allTemplates = index ? templateRows(index.layouts, activePath, "", defaultLayout) : [];
+  const templates = index ? templateRows(index.layouts, activePath, needle, defaultLayout) : [];
   const registryLoading = !_componentRegistryLoaded;
   const allComponents = componentRows("", activePath);
   const components = componentRows(needle, activePath);
@@ -537,9 +522,6 @@ export function mediaDragData(path: string): BlockDragData | null {
 
 /** Mount the surface into `host`, or bring the one already there up to date. */
 function mountInto(host: HTMLElement): void {
-  /* A page created, saved or deleted changes how many pages use a template, and the usage cache is
-     dropped for it: the Templates rows ask again on the repaint this asks for. */
-  _usagesUnlisten ??= onUsagesInvalidated(repaint);
   if (_standing && (_standing.host !== host || _standing.handle?.connected() === false)) {
     dispose(_standing);
     _standing = null;
@@ -585,9 +567,6 @@ function mountInto(host: HTMLElement): void {
   });
 }
 
-/** The usage-invalidation subscription, taken once the panel first mounts. */
-let _usagesUnlisten: (() => void) | null = null;
-
 /** Repaint the Navigator, which repaints this panel when it is the one showing. */
 function repaint(): void {
   renderOnly("leftPanel");
@@ -625,8 +604,6 @@ export function resetSitePanel(): void {
     dispose(_standing);
   }
   _standing = null;
-  _usagesUnlisten?.();
-  _usagesUnlisten = null;
   _filter = "";
   _epoch += 1;
   _index = null;

package/src/panels/stylebook-doc.ts

@@ -21,15 +21,9 @@ import { isKeyframesAtRule } from "@jxsuite/runtime/css";
 import type { StylebookEntry } from "./stylebook-panel";
 import type { ComponentEntry } from "../files/components";
 import type { JxPath } from "../state";
-import { isNonNullObject, isRef } from "@jxsuite/schema/guards";
+import { isNonNullObject } from "@jxsuite/schema/guards";
 import type { StylebookSpecimens } from "../style/stylebook-specimens";
-import type {
-  JxDocument,
-  JxHeadEntry,
-  JxMutableNode,
-  JxStateDefinition,
-  JxStyle,
-} from "@jxsuite/schema/types";
+import type { JxHeadEntry, JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 export interface StylebookDocResult {
   /** The specimen document (plain JSON — safe to post over the bridge). */
@@ -210,40 +204,6 @@ export function catalogueRows(
   return out;
 }
 
-/**
- * A card's specimen for a component drawn as the first row of a list
- * (`style/stylebook-specimens.ts`): the list's repeater, reading its row from `rootState[key]` so
- * two cards' lists cannot collide, and the rest of the page state the row was drawn in, the first
- * card's value winning a shared name (`$page`, `$site`). Null when the sample is not a repeater
- * over a state list.
- */
-export function sampleRowSpecimen(
-  sample: JxDocument,
-  key: string,
-  rootState: Record<string, JxStateDefinition>,
-): JxMutableNode | null {
-  const [list] = Array.isArray(sample.children) ? sample.children : [];
-  if (!isNonNullObject(list) || Array.isArray(list) || !isRef(list.items)) {
-    return null;
-  }
-  const { $ref } = list.items;
-  const listKey = $ref.startsWith("#/state/") ? $ref.slice("#/state/".length) : "";
-  const rows = sample.state?.[listKey];
-  if (!Array.isArray(rows)) {
-    return null;
-  }
-  rootState[key] = rows;
-  for (const [name, value] of Object.entries(sample.state ?? {})) {
-    if (name !== listKey && !(name in rootState)) {
-      rootState[name] = value;
-    }
-  }
-  /* SAFETY: `list` is the repeater object a page's `children` held; only its `items` is replaced,
-     with a ref of the same shape. */
-  const repeater = { ...list, items: { $ref: `#/state/${key}` } } as JxMutableNode;
-  return { children: [repeater], tagName: "div" };
-}
-
 /** Options for {@link buildStylebookDoc}. */
 export interface BuildStylebookDocOpts {
   meta: { $sections: { label: string; elements: StylebookEntry[] }[] };
@@ -374,8 +334,6 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
 
   // Custom components from the registry — live custom elements registered via $elements.
   const $elements: (string | { $ref: string })[] = [];
-  // The data the sample-row cards read: each row's list, and the page context it was drawn in.
-  const rootState: Record<string, JxStateDefinition> = {};
   {
     let comps = opts.components;
     if (filter) {
@@ -404,12 +362,6 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
             const specimen: JxMutableNode = { $props: drawn.props, tagName: comp.tagName };
             return cardNode(comp.tagName, `<${comp.tagName}>`, specimen, cardPath, null);
           }
-          if (drawn?.kind === "row") {
-            const row = sampleRowSpecimen(drawn.sample.doc, `stylebookRow${ci}`, rootState);
-            if (row) {
-              return cardNode(comp.tagName, `<${comp.tagName}>`, row, cardPath, null);
-            }
-          }
           if (drawn?.kind !== "none") {
             const attributes: Record<string, string> = {};
             for (const p of comp.props ?? []) {
@@ -455,9 +407,6 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
     doc.$head = opts.effectiveHead;
   }
   doc.$media = opts.effectiveMedia;
-  if (Object.keys(rootState).length > 0) {
-    doc.state = rootState;
-  }
   doc.attributes = { class: "sb-root" };
   doc.children = sections;
   doc.style = transposeStylebookStyle(opts.effectiveStyle);

package/src/style/stylebook-specimens.ts

@@ -5,14 +5,17 @@
  * component is rarely drawable that way: the museum starter's `<mu-exhibition-card>` formats a
  * `date` that defaults to `""`, so its card stayed empty and the canvas logged "was not rendered:
  * RangeError: Invalid time value" for it on every paint (`spec.md` §16.4). The Site panel's
- * previews already know where a component's sample props live (`browse/component-examples.ts`), so
- * a card asks the same three sources, in the same order, and draws:
+ * previews already know where a component's sample props live (`browse/component-examples.ts`: the
+ * definition's own `examples`), so a card asks the same source and draws:
  *
  * - `props`: an instance given its sample props, when the definition renders with them;
- * - `row`: the first row of a list that draws it, when it is only ever used as a list row;
- * - `bare`: the bare instance, when it renders with its defaults and nothing better was found;
- * - `none`: no live instance at all (the catalogue's placeholder box), when it renders with none of
- *   the above, because an instance that throws draws nothing and reports an error nobody can fix.
+ * - `bare`: the bare instance, when it renders with its defaults and has no sample props it renders
+ *   with;
+ * - `none`: no live instance at all (the catalogue's placeholder box), when it renders with neither,
+ *   because an instance that throws draws nothing and reports an error nobody can fix.
+ *
+ * Nothing here reads the rest of the project, so a catalogue of N components costs N definition
+ * reads and no usage queries.
  *
  * Answers are cached per component registry: the registry is replaced whenever the project's
  * components are re-read, so a changed definition is asked again.
@@ -20,17 +23,14 @@
  * @docs studio/design/stylebook
  */
 
-import { componentExampleProps, componentSampleRow } from "../browse/component-examples";
-import type { SampleRow } from "../browse/component-examples";
+import { componentExampleProps } from "../browse/component-examples";
 import { readDefinition, rendersWith } from "../browse/library-preview";
-import { defineComponent } from "../panels/component-preview";
 import type { ComponentEntry } from "../files/components";
 import type { JsonValue } from "@jxsuite/schema/types";
 
 /** How one component card is drawn; see the module comment. */
 export type StylebookSpecimen =
   | { kind: "props"; props: Record<string, JsonValue> }
-  | { kind: "row"; sample: SampleRow }
   | { kind: "bare" }
   | { kind: "none" };
 
@@ -49,14 +49,10 @@ export async function componentSpecimen(component: ComponentEntry): Promise<Styl
   if (!definition) {
     return { kind: "bare" };
   }
-  const props = await componentExampleProps(definition, path);
+  const props = componentExampleProps(definition);
   if (props.size > 0 && (await rendersWith(definition, path, props))) {
     return { kind: "props", props: Object.fromEntries(props) };
   }
-  const sample = await componentSampleRow(definition, path);
-  if (sample && (await defineComponent(component))) {
-    return { kind: "row", sample };
-  }
   return (await rendersWith(definition, path, new Map())) ? { kind: "bare" } : { kind: "none" };
 }