@astryxdesign/cli 0.1.1 → 0.1.2-canary.043f3fd

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @xds/cli
 
+# 0.1.2
+
+#### Breaking Changes
+
+- `Text`, `Heading`, `Link`, and `Timestamp` rename the `color="active"` value to `color="accent"`, now mapping to the dedicated `--color-text-accent` token (legible accent text ink) instead of `--color-accent`. Run `astryx upgrade` to migrate call sites automatically. (#2863)
+
+#### New Features
+
+- Let `astryx.config.mjs` integrations contribute package docs, gap-report hooks, template fetching hooks, upgrade codemods, and post-codemod hooks.
+- Add `astryx theme add <slug> [path]` (and `astryx theme list`) to scaffold a theme's source into your project as editable files you own, with theme sources bundled into the CLI
+
+#### Fixes
+
+- align `astryx init` theme instructions with the runtime built-theme recommendation (#3080)
+  `astryx init` now points users at the pre-built theme path (`@astryxdesign/theme-neutral/built` + `theme.css`) and the base CSS imports, matching the runtime `<Theme>` console guidance, instead of the slower runtime style-injection import that left apps unstyled.
+- `astryx theme build` now derives every output file (.css/.js/.d.ts) from the theme name so they share one naming scheme, shows import paths as bare `./<name>` specifiers (instead of a cwd-rooted `./src/...` path that was wrong when your file already lives under src/), and no longer warns about the `variant` prop on `card`
+
+#### Documentation
+
+- Rename the ClickableCard and SelectableCard examples to follow the "Component — Variant" title convention (`Clickable Card — Nested Button`, `Selectable Card — Multi-select`), and add playground defaults to both card docs so their docsite previews show realistic card content (#2877)
+- Declare playground scaffolds for the Chat sub-components so they preview at a realistic width (ChatComposer and ChatComposerDrawer wrap in a sized container, and the drawer seeds default content), and drop the redundant visible value label from the ChatComposerDrawer "With Progress" example while keeping the accessible label (#2877)
+- Rename the DateInput "Date Range" example to "Min/Max Constraints" — it demos a single input constrained to a min/max window, not a date-range picker (#2692)
+- Wire local state into more showcase examples that were frozen (static value + no-op onChange): TextInput, TextArea, NumberInput, SegmentedControl, RadioList, Tab, TabList, and TabMenu. Follows the same fix as the Slider/Selector/MultiSelector showcases so the docsite previews are actually interactive
+- Wire local state into the Typeahead, Tokenizer, and FileInput showcase examples (static value + no-op onChange → frozen previews). Completes the interactive-showcase fixes started for Slider/Selector/MultiSelector (#3187-#3189) and the input/tab batch
+- Wire local state into the Slider, Selector, and MultiSelector showcase examples so they are interactive — they were controlled components with a static value and a no-op/missing onChange, so the docsite previews appeared frozen (#3187, #3188, #3189)
+- Add a LinkProvider example block showing how to swap in a framework router link (e.g. Next.js Link) for client-side routing (#2733)
+- Add a showcase block for Outline so its docs page has a hero preview, alongside the existing example blocks (#2871)
+- Remove the "MoreMenu — In Toolbar" example block — it rendered incorrectly and was redundant with the other MoreMenu examples (#2870)
+- Add rendered example blocks for the two column-axis Table plugin hooks,
+  shown on their own subcomponent pages:
+- Move the "ToggleButton — Group" example to the ToggleButtonGroup page, where it belongs (it demonstrates grouped toggle behavior) (#2842)
+- Make the Toolbar "Table Filter" example use real Selector controls for its Status and Priority filters instead of buttons styled to look like dropdowns, and add meaningful playground defaults plus richer slot options (buttons, icon buttons, tabs, segmented controls, selectors) to the Toolbar docs (#2877).
+
+#### Other Changes
+
+- `useTableStickyColumns — Pinned Columns` (on /components/useTableStickyColumns)
+- `useTableColumnResize — Draggable Columns` (on /components/useTableColumnResize)
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @cixzhang
+- @durvesh1992
+- @ejhammond
+- @humbertovirtudes
+- @rubyycheung
+
+---
+
 # 0.1.1
 
 #### New Features

package/docs/theme.doc.mjs

@@ -53,7 +53,7 @@ function App() {
         },
         {
           type: 'prose',
-          text: 'Each theme ships as its own npm package. Install the one you want, then wrap your app in `<Theme>` — the same pattern works for every theme; just swap the package and import name.',
+          text: 'Each theme ships as its own npm package. Install the one you want, then wrap your app in `<Theme>`. The same pattern works for every theme; just swap the package and import name.',
         },
         {
           type: 'prose',
@@ -261,7 +261,7 @@ const brandTheme = defineTheme({
       content: [
         {
           type: 'prose',
-          text: 'The `components` field in defineTheme uses semantic component keys and style keys — not raw CSS selectors. Use `base` for all instances, `variant:value` or `stateName` for specific props/states, and let the theme pipeline choose the underlying selector. For raw external CSS escape hatches, prefer the data-attribute selector surface documented in `astryx docs styling`.',
+          text: 'The `components` field in defineTheme uses semantic component keys and style keys, not raw CSS selectors. Use `base` for all instances, `variant:value` or `stateName` for specific props/states, and let the theme pipeline choose the underlying selector. For raw external CSS escape hatches, prefer the data-attribute selector surface documented in `astryx docs styling`.',
         },
         {
           type: 'code',

package/docs/working-with-ai.doc.mjs

@@ -34,11 +34,11 @@ export const docs = {
           type: 'code',
           lang: 'text',
           label: 'Paste this into your AI',
-          code: 'Install @astryxdesign/cli and run `npx astryx agent-docs` to set up your Astryx context. Read the generated file.',
+          code: 'Install @astryxdesign/cli and run `npx astryx init --features agents` to set up your Astryx context. Read the generated file.',
         },
         {
           type: 'prose',
-          text: 'That\'s it. The agent-docs command generates everything your AI needs (component index, behavioral rules, CLI reference) pulled from your installed version. After a version bump, run it again to update in place.',
+          text: 'That\'s it. The `init --features agents` command generates everything your AI needs (component index, behavioral rules, CLI reference) pulled from your installed version. After a version bump, run it again to update in place.',
         },
         {
           type: 'prose',
@@ -48,9 +48,9 @@ export const docs = {
           type: 'code',
           lang: 'bash',
           label: 'Manual options',
-          code: `npx astryx agent-docs --agent claude    # CLAUDE.md
-npx astryx agent-docs --agent cursor    # .cursorrules
-npx astryx agent-docs --agent codex     # AGENTS.md (Copilot, Codex, etc.)`,
+          code: `npx astryx init --features agents --agent claude    # CLAUDE.md
+npx astryx init --features agents --agent cursor    # .cursorrules
+npx astryx init --features agents --agent codex     # AGENTS.md (Copilot, Codex, etc.)`,
         },
       ],
     },
@@ -88,7 +88,7 @@ npx astryx agent-docs --agent codex     # AGENTS.md (Copilot, Codex, etc.)`,
           lang: 'bash',
           label: 'Install as a Cursor user rule',
           code: `mkdir -p ~/.cursor/rules
-npx astryx agent-docs --agent-docs-path ~/.cursor/rules/xds.mdc`,
+npx astryx init --features agents --agent-docs-path ~/.cursor/rules/xds.mdc`,
         },
       ],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.1",
+  "version": "0.1.2-canary.043f3fd",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -38,6 +38,26 @@
     "./api": {
       "types": "./src/types/api.d.ts",
       "import": "./src/api/index.mjs"
+    },
+    "./config": {
+      "types": "./src/types/config.d.ts",
+      "import": "./src/config.mjs"
+    },
+    "./integration": {
+      "types": "./src/types/integration.d.ts",
+      "import": "./src/integration.mjs"
+    },
+    "./template": {
+      "types": "./src/types/template-api.d.ts",
+      "import": "./src/template.mjs"
+    },
+    "./codemod": {
+      "types": "./src/types/codemod.d.ts",
+      "import": "./src/codemod.mjs"
+    },
+    "./xle": {
+      "types": "./src/lib/xle/browser.d.ts",
+      "import": "./src/lib/xle/browser.mjs"
     }
   },
   "files": [
@@ -51,12 +71,14 @@
     "@clack/prompts": "^1.5.1",
     "commander": "^12.1.0",
     "jiti": "^2.7.0",
-    "jscodeshift": "^17.3.0"
+    "jscodeshift": "^17.3.0",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "*",
-    "@astryxdesign/lab": "*",
-    "@astryxdesign/theme-neutral": "*"
+    "@astryxdesign/core": "0.1.2-canary.043f3fd",
+    "@astryxdesign/lab": "0.1.2-canary.043f3fd",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.043f3fd",
+    "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -70,9 +92,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "*",
-    "@astryxdesign/lab": "*",
-    "@astryxdesign/theme-neutral": "*"
+    "@astryxdesign/core": "0.1.2-canary.043f3fd",
+    "@astryxdesign/lab": "0.1.2-canary.043f3fd",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.043f3fd",
+    "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/api/component.mjs

@@ -11,18 +11,48 @@ import * as fs from 'node:fs';
 import {ERROR_CODES} from '../lib/error-codes.mjs';
 import {findCoreDir, discoverExternalPackages} from '../utils/paths.mjs';
 import {
+  CORE_PACKAGE,
   discoverComponents,
   discoverExternalComponentsGrouped,
+  discoverIntegrationComponents,
   findComponentReadme,
   findComponentSource,
   findExternalComponentDoc,
+  findIntegrationComponentDoc,
+  findIntegrationComponentSource,
   resolveImportPath,
 } from '../lib/component-discovery.mjs';
+import {Project} from '../lib/project.mjs';
 import {loadDocs} from '../lib/component-loader.mjs';
 import {searchComponents} from '../lib/string-utils.mjs';
 import {AstryxError} from './error.mjs';
 import {findShowcase, findRelatedBlocks} from './template.mjs';
 
+/**
+ * Load the configured integrations for `cwd`, swallowing any config errors so
+ * component discovery never hard-fails on a malformed/absent integration. An
+ * empty list means "core only".
+ * @param {string} cwd
+ * @returns {Promise<Array<{name: string, components?: string, issuesUrl?: string}>>}
+ */
+async function loadIntegrationsSafely(cwd) {
+  try {
+    const project = await Project.load(cwd);
+    return project.loadedIntegrations;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Resolve a loaded integration by package name.
+ * @param {Array<{name: string}>} loadedIntegrations
+ * @param {string} packageName
+ */
+function findLoadedIntegration(loadedIntegrations, packageName) {
+  return loadedIntegrations.find(i => i.name === packageName) ?? null;
+}
+
 /**
  * Resolve an external package by name from the discovered externals list.
  * @param {string} packageName - e.g. '@acme/xds-widgets'
@@ -131,8 +161,13 @@ export async function component(name, options = {}) {
         return {type: 'component.full', data: {[match[0]]: entries}};
       }
 
-      // Default: brief — names only
-      return {type: 'component.list', data: {[match[0]]: match[1]}};
+      // Default: brief — package-qualified object list for the category.
+      // Pre-1.0 JSON contract: members are {name, package} objects, not bare
+      // strings, so consumers can disambiguate ownership.
+      return {
+        type: 'component.list',
+        data: {[match[0]]: match[1].map(n => ({name: n, package: CORE_PACKAGE}))},
+      };
     }
 
     // All components — merge core + external packages with grouped subcategories
@@ -179,43 +214,189 @@ export async function component(name, options = {}) {
       return {type: 'component.full', data: result};
     }
 
-    // Default: brief — names only (with externals merged in)
+    // Default: brief — package-qualified object list (core + integrations).
+    // Pre-1.0 JSON contract: each group's members are {name, package} objects.
+    /** @type {Record<string, Array<{name: string, package: string}>>} */
+    const listData = {};
+    for (const [cat, comps] of Object.entries(components)) {
+      listData[cat] = comps.map(n => ({name: n, package: CORE_PACKAGE}));
+    }
+
+    // Integration components (authoritative source: loadedIntegrations).
+    const loadedIntegrations = await loadIntegrationsSafely(cwd);
+    const seenIntegration = new Set();
+    for (const integration of loadedIntegrations) {
+      seenIntegration.add(integration.name);
+      const owned = discoverIntegrationComponents(integration);
+      // Group integration components by their doc `group`, falling back to the
+      // package name. Keys are package-qualified so they never collide with
+      // core groups or each other.
+      /** @type {Map<string, Array<{name: string, package: string}>>} */
+      const byGroup = new Map();
+      for (const rec of owned) {
+        const groupLabel = rec.group ?? integration.name;
+        const key = `${groupLabel} (${integration.name})`;
+        if (!byGroup.has(key)) byGroup.set(key, []);
+        byGroup.get(key).push({name: rec.name, package: integration.name});
+      }
+      for (const [key, members] of byGroup) {
+        members.sort((a, b) => a.name.localeCompare(b.name));
+        listData[key] = members;
+      }
+    }
+
+    // Back-compat: node_modules-scanned external packages (pkg.astryx.docs)
+    // that are NOT configured integrations. Preserves existing discovery for
+    // consumers that haven't adopted the config-integration flow.
     const externals = discoverExternalPackages(cwd);
     for (const ext of externals) {
+      if (seenIntegration.has(ext.name)) continue;
       const grouped = discoverExternalComponentsGrouped(ext.docsDir);
       const groupKeys = Object.keys(grouped);
       if (groupKeys.length === 0) continue;
 
-      // If the package has subcategories (groups), emit each as a separate key.
-      // If no groups exist, fall back to the flat list under one key.
       const hasGroups = groupKeys.some(
         k => grouped[k].length > 1 || grouped[k][0] !== k,
       );
 
       if (hasGroups) {
         for (const [group, members] of Object.entries(grouped)) {
-          components[`${group} (${ext.name})`] = members;
+          listData[`${group} (${ext.name})`] = members.map(n => ({
+            name: n,
+            package: ext.name,
+          }));
         }
       } else {
-        // All ungrouped — single flat list under the package category
         const allComps = Object.values(grouped).flat().sort();
         if (allComps.length > 0) {
-          components[`${ext.category} (${ext.name})`] = allComps;
+          listData[`${ext.category} (${ext.name})`] = allComps.map(n => ({
+            name: n,
+            package: ext.name,
+          }));
         }
       }
     }
-    return {type: 'component.list', data: components};
+    return {type: 'component.list', data: listData};
   }
 
   // ── Single component ───────────────────────────────────────────
 
+  if (typeof name !== 'string') {
+    throw new AstryxError(
+      `No component named "${String(name)}"`,
+      undefined,
+      ERROR_CODES.ERR_UNKNOWN_COMPONENT,
+    );
+  }
+
   const dirName = name.replace(/^XDS/, '');
 
+  // Ownership-aware resolution. Build the set of OWNER packages that provide a
+  // component with this name across core + every loaded integration. This is
+  // what lets the CLI disambiguate by package and expose the owner's source +
+  // issuesUrl (the inputs the future integration-component swizzle needs).
+  const loadedIntegrations = await loadIntegrationsSafely(cwd);
+  const coreDocPath = findComponentReadme(coreDir, dirName);
+  /**
+   * @type {Array<{
+   *   package: string,
+   *   docPath: string,
+   *   sourcePath: string|null,
+   *   issuesUrl: string|undefined,
+   *   integration: object|null,
+   * }>}
+   */
+  const owners = [];
+  if (coreDocPath) {
+    owners.push({
+      package: CORE_PACKAGE,
+      docPath: coreDocPath,
+      sourcePath: findComponentSource(coreDir, dirName),
+      issuesUrl: undefined,
+      integration: null,
+    });
+  }
+  for (const integration of loadedIntegrations) {
+    const docPath = findIntegrationComponentDoc(integration, dirName);
+    if (!docPath) continue;
+    owners.push({
+      package: integration.name,
+      docPath,
+      sourcePath: findIntegrationComponentSource(integration, dirName),
+      issuesUrl: integration.issuesUrl,
+      integration,
+    });
+  }
+
+  /**
+   * Augment a loaded `component.detail` doc with ownership metadata. Adds
+   * `package`, the resolved `import` specifier, and `sourceAvailable` (whether
+   * a swizzleable source file exists for the owner). Existing doc fields
+   * (name, usage, props, …) are preserved.
+   * @param {object} docs
+   * @param {{package: string, sourcePath: string|null}} owner
+   * @param {string} componentName
+   */
+  function withOwnership(docs, owner, componentName) {
+    const importSpec =
+      owner.package === CORE_PACKAGE
+        ? resolveImportPath(coreDir, componentName)
+        : `${owner.package}/${componentName}`;
+    return {
+      ...docs,
+      package: owner.package,
+      import: importSpec,
+      sourceAvailable: owner.sourcePath != null,
+    };
+  }
+
   // When scoped to a specific package, search that package first.
   // This is critical for components that exist in both core and an external
   // package (e.g. AppShell, Button, SideNav) — the package scope ensures
   // the external package's docs are returned, not core's.
   if (packageScope) {
+    // Core scope: resolve from core directly.
+    if (packageScope === CORE_PACKAGE) {
+      const owner = owners.find(o => o.package === CORE_PACKAGE);
+      if (!owner) {
+        throw new AstryxError(`No component "${name}" in package "${packageScope}"`, undefined, ERROR_CODES.ERR_UNKNOWN_COMPONENT);
+      }
+      if (source) {
+        if (!owner.sourcePath) {
+          throw new AstryxError(`Source for "${name}" not found`, undefined, ERROR_CODES.ERR_NO_SOURCE);
+        }
+        return {type: 'component.detail.source', data: {component: dirName, source: fs.readFileSync(owner.sourcePath, 'utf-8')}};
+      }
+      const docs = await loadDocs(owner.docPath, {zh, dense, lang});
+      if (props) {
+        const p = docs.props || (docs.components ? docs.components.flatMap(c => c.props || []) : []);
+        return {type: 'component.detail.props', data: p};
+      }
+      return {type: 'component.detail', data: withOwnership(docs, owner, dirName)};
+    }
+
+    // Integration scope (authoritative): resolve from the loaded integration.
+    const integration = findLoadedIntegration(loadedIntegrations, packageScope);
+    if (integration) {
+      const owner = owners.find(o => o.package === packageScope);
+      if (!owner) {
+        throw new AstryxError(`No component "${name}" in package "${packageScope}"`, undefined, ERROR_CODES.ERR_UNKNOWN_COMPONENT);
+      }
+      if (source) {
+        if (!owner.sourcePath) {
+          throw new AstryxError(`Source for "${name}" not found in package "${packageScope}"`, undefined, ERROR_CODES.ERR_NO_SOURCE);
+        }
+        return {type: 'component.detail.source', data: {component: dirName, source: fs.readFileSync(owner.sourcePath, 'utf-8')}};
+      }
+      const docs = await loadDocs(owner.docPath, {zh, dense, lang});
+      if (props) {
+        const p = docs.props || (docs.components ? docs.components.flatMap(c => c.props || []) : []);
+        return {type: 'component.detail.props', data: p};
+      }
+      return {type: 'component.detail', data: withOwnership(docs, owner, dirName)};
+    }
+
+    // Legacy fallback: node_modules `pkg.astryx.docs` external package.
     const ext = resolveExternalPackage(packageScope, cwd);
     if (!ext) {
       throw new AstryxError(`External package "${packageScope}" not found`, undefined, ERROR_CODES.ERR_UNKNOWN_PACKAGE);
@@ -244,11 +425,49 @@ export async function component(name, options = {}) {
         const p = docs.props || (docs.components ? docs.components.flatMap(c => c.props || []) : []);
         return {type: 'component.detail.props', data: p};
       }
-      return {type: 'component.detail', data: docs};
+      return {
+        type: 'component.detail',
+        data: withOwnership(docs, {package: ext.name, sourcePath: null}, dirName),
+      };
     }
     throw new AstryxError(`No component "${name}" in package "${packageScope}"`, undefined, ERROR_CODES.ERR_UNKNOWN_COMPONENT);
   }
 
+  // Ambiguity: when the name is owned by MORE THAN ONE package (core and/or
+  // integrations) and the caller did not scope with --package, refuse to guess.
+  // NOTE: legacy `pkg.astryx.docs` externals are intentionally NOT part of this
+  // ambiguity set — they retain their historical core-first fallback below so
+  // existing consumers (and tests) keep working. Only config-driven integration
+  // ownership participates here.
+  if (owners.length > 1) {
+    throw new AstryxError(
+      `Component "${dirName}" is provided by multiple packages. Re-run with --package <pkg> to choose one.`,
+      owners.map(o => ({name: o.package, reason: 'provides this component'})),
+      ERROR_CODES.ERR_UNKNOWN_COMPONENT,
+    );
+  }
+
+  // Single non-core owner (an integration provides it, core does not) — resolve
+  // from that integration so the integration component is authoritative.
+  if (owners.length === 1 && owners[0].package !== CORE_PACKAGE) {
+    const owner = owners[0];
+    if (source) {
+      if (!owner.sourcePath) {
+        throw new AstryxError(`Source for "${name}" not found`, undefined, ERROR_CODES.ERR_NO_SOURCE);
+      }
+      return {type: 'component.detail.source', data: {component: dirName, source: fs.readFileSync(owner.sourcePath, 'utf-8')}};
+    }
+    if (showcase) {
+      throw new AstryxError(`No showcase found for "${name}"`, undefined, ERROR_CODES.ERR_NO_SHOWCASE);
+    }
+    const docs = await loadDocs(owner.docPath, {zh, dense, lang});
+    if (props) {
+      const p = docs.props || (docs.components ? docs.components.flatMap(c => c.props || []) : []);
+      return {type: 'component.detail.props', data: p};
+    }
+    return {type: 'component.detail', data: withOwnership(docs, owner, dirName)};
+  }
+
   if (source) {
     const sourcePath = findComponentSource(coreDir, dirName);
     if (!sourcePath) {
@@ -274,6 +493,10 @@ export async function component(name, options = {}) {
 
   let readmePath = findComponentReadme(coreDir, dirName);
   let resolvedName = dirName;
+  // Track the resolving owner so the detail payload can carry ownership info.
+  // Defaults to core; the legacy-external fallback below may reassign it.
+  let resolvedOwnerPackage = CORE_PACKAGE;
+  let resolvedSourcePath = readmePath ? findComponentSource(coreDir, dirName) : null;
 
   if (!readmePath) {
     const externals = discoverExternalPackages(cwd);
@@ -281,6 +504,8 @@ export async function component(name, options = {}) {
       const extDocPath = findExternalComponentDoc(ext.docsDir, dirName);
       if (extDocPath) {
         readmePath = extDocPath;
+        resolvedOwnerPackage = ext.name;
+        resolvedSourcePath = null;
         break;
       }
     }
@@ -299,6 +524,8 @@ export async function component(name, options = {}) {
       if (topScore >= 90 && topTied.length === 1 && gap >= 20) {
         resolvedName = topTied[0].name;
         readmePath = findComponentReadme(coreDir, resolvedName);
+        resolvedOwnerPackage = CORE_PACKAGE;
+        resolvedSourcePath = findComponentSource(coreDir, resolvedName);
       } else {
         const threshold = Math.max(topScore - 20, 1);
         const candidates = results.filter(r => r.score >= threshold).slice(0, 5);
@@ -382,7 +609,14 @@ export async function component(name, options = {}) {
     if (props) {
       return {type: 'component.detail.props', data: matchingComponent.props || []};
     }
-    return {type: 'component.detail', data: scoped};
+    return {
+      type: 'component.detail',
+      data: withOwnership(
+        scoped,
+        {package: resolvedOwnerPackage, sourcePath: resolvedSourcePath},
+        dirName,
+      ),
+    };
   }
 
   if (props) {
@@ -390,5 +624,12 @@ export async function component(name, options = {}) {
     return {type: 'component.detail.props', data: p};
   }
 
-  return {type: 'component.detail', data: docs};
+  return {
+    type: 'component.detail',
+    data: withOwnership(
+      docs,
+      {package: resolvedOwnerPackage, sourcePath: resolvedSourcePath},
+      resolvedName,
+    ),
+  };
 }