@screenbook/ui 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/client/_astro/coverage.BnE2oGo8.css +1 -0
  3. package/dist/client/_astro/coverage.Cb0pX2ic.css +1 -0
  4. package/dist/client/_astro/graph.astro_astro_type_script_index_0_lang.B0fEnVdy.js +1 -0
  5. package/dist/server/_@astrojs-ssr-adapter.mjs +1 -1
  6. package/dist/server/chunks/{_@astrojs-ssr-adapter_DgsYudHz.mjs → _@astrojs-ssr-adapter_BCPoO8PO.mjs} +1 -1
  7. package/dist/server/chunks/{astro-designed-error-pages_BvPhMmw0.mjs → astro-designed-error-pages_7IL58RLD.mjs} +2 -2
  8. package/dist/server/chunks/{impactAnalysis_Bz5lMdmy.mjs → impactAnalysis_LvYEc57d.mjs} +11 -4
  9. package/dist/server/chunks/loadScreens_JhK3F9tC.mjs +39 -0
  10. package/dist/server/chunks/{node_DoTkMCOi.mjs → node_u1SigWFL.mjs} +5 -5
  11. package/dist/server/chunks/{sharp_DHNfMLYY.mjs → sharp_ADxfwDJE.mjs} +1 -1
  12. package/dist/server/entry.mjs +5 -5
  13. package/dist/server/manifest_CicDtuHD.mjs +101 -0
  14. package/dist/server/pages/_image.astro.mjs +1 -1
  15. package/dist/server/pages/coverage.astro.mjs +8 -8
  16. package/dist/server/pages/graph.astro.mjs +8 -8
  17. package/dist/server/pages/impact.astro.mjs +10 -10
  18. package/dist/server/pages/index.astro.mjs +5 -5
  19. package/dist/server/pages/screen/_id_.astro.mjs +9 -9
  20. package/package.json +41 -41
  21. package/src/layouts/Layout.astro +28 -11
  22. package/src/pages/coverage.astro +6 -6
  23. package/src/pages/graph.astro +16 -12
  24. package/src/pages/impact.astro +12 -9
  25. package/src/pages/index.astro +18 -9
  26. package/src/pages/screen/[id].astro +6 -6
  27. package/src/styles/global.css +55 -13
  28. package/src/utils/impactAnalysis.ts +12 -5
  29. package/.astro/data-store.json +0 -1
  30. package/.astro/settings.json +0 -5
  31. package/.screenbook/coverage.json +0 -37
  32. package/.screenbook/screens.json +0 -90
  33. package/LICENSE +0 -21
  34. package/dist/client/_astro/coverage.CKIVg4LY.css +0 -1
  35. package/dist/client/_astro/coverage.DDJMzKCq.css +0 -1
  36. package/dist/client/_astro/graph.astro_astro_type_script_index_0_lang.1HlATQ1g.js +0 -1
  37. package/dist/server/chunks/loadScreens_DJf-tycc.mjs +0 -39
  38. package/dist/server/manifest_-V1HEnR8.mjs +0 -101
package/dist/server/pages/impact.astro.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { e as createComponent, f as createAstro, k as renderComponent, r as renderTemplate, m as maybeRenderHead, n as renderScript, l as Fragment, h as addAttribute } from '../chunks/astro/server_m7yT4wCr.mjs';
2
2
  import 'piccolore';
3
- import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_DJf-tycc.mjs';
4
- import { g as getAllApis, a as analyzeImpact, b as generateImpactMermaid, f as formatImpactMarkdown } from '../chunks/impactAnalysis_Bz5lMdmy.mjs';
3
+ import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_JhK3F9tC.mjs';
4
+ import { g as getAllApis, a as analyzeImpact, b as generateImpactMermaid, f as formatImpactMarkdown } from '../chunks/impactAnalysis_LvYEc57d.mjs';
5
5
  /* empty css */
6
6
  export { renderers } from '../renderers.mjs';
7
7
 
@@ -23,21 +23,21 @@ const $$Impact = createComponent(async ($$result, $$props, $$slots) => {
23
23
  }
24
24
  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Impact Analysis", "currentPage": "impact", "data-astro-cid-kf663cba": true }, { "default": async ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container" data-astro-cid-kf663cba> <div class="page-header" data-astro-cid-kf663cba> <h1 class="page-title" data-astro-cid-kf663cba>Impact Analysis</h1> <p class="page-description" data-astro-cid-kf663cba>
25
25
  Analyze which screens are affected when an API changes.
26
- </p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state" data-astro-cid-kf663cba> <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" data-astro-cid-kf663cba></path> </svg> <h2 class="empty-state-title" data-astro-cid-kf663cba>No screen data</h2> <p class="empty-state-description" data-astro-cid-kf663cba>
26
+ </p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state" data-astro-cid-kf663cba> <svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" data-astro-cid-kf663cba></path> </svg> <h2 class="empty-state-title" data-astro-cid-kf663cba>No screen data</h2> <p class="empty-state-description" data-astro-cid-kf663cba>
27
27
  Run the build command to generate screen metadata.
28
28
  </p> <code class="empty-state-code" data-astro-cid-kf663cba> <span class="prompt" data-astro-cid-kf663cba>$</span> screenbook build
29
- </code> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "data-astro-cid-kf663cba": true }, { "default": async ($$result3) => renderTemplate` <div class="impact-search" data-astro-cid-kf663cba> <form method="get" class="search-form" data-astro-cid-kf663cba> <div class="search-wrapper impact-search-wrapper" data-astro-cid-kf663cba> <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" data-astro-cid-kf663cba></path> </svg> <input type="text" name="api" class="search-input" placeholder="Enter API name (e.g., InvoiceAPI.getDetail)"${addAttribute(apiQuery, "value")} list="api-suggestions" data-astro-cid-kf663cba> <datalist id="api-suggestions" data-astro-cid-kf663cba> ${allApis.map((api) => renderTemplate`<option${addAttribute(api, "value")} data-astro-cid-kf663cba></option>`)} </datalist> <button type="submit" class="search-button" data-astro-cid-kf663cba>
29
+ </code> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "data-astro-cid-kf663cba": true }, { "default": async ($$result3) => renderTemplate` <div class="impact-search" data-astro-cid-kf663cba> <form method="get" class="search-form" role="search" data-astro-cid-kf663cba> <div class="search-wrapper impact-search-wrapper" data-astro-cid-kf663cba> <svg class="search-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" data-astro-cid-kf663cba></path> </svg> <label for="api-input" class="sr-only" data-astro-cid-kf663cba>API name to analyze</label> <input type="text" id="api-input" name="api" class="search-input" placeholder="Enter API name (e.g., InvoiceAPI.getDetail)"${addAttribute(apiQuery, "value")} list="api-suggestions" data-astro-cid-kf663cba> <datalist id="api-suggestions" data-astro-cid-kf663cba> ${allApis.map((api) => renderTemplate`<option${addAttribute(api, "value")} data-astro-cid-kf663cba></option>`)} </datalist> <button type="submit" class="search-button" data-astro-cid-kf663cba>
30
30
  Analyze
31
- </button> </div> </form> ${allApis.length > 0 && !apiQuery && renderTemplate`<div class="api-suggestions" data-astro-cid-kf663cba> <p class="suggestions-label" data-astro-cid-kf663cba>Available APIs:</p> <div class="tags" data-astro-cid-kf663cba> ${allApis.slice(0, 10).map((api) => renderTemplate`<a${addAttribute(`/impact?api=${encodeURIComponent(api)}`, "href")} class="tag" data-astro-cid-kf663cba> ${api} </a>`)} ${allApis.length > 10 && renderTemplate`<span class="tag tag-more" data-astro-cid-kf663cba>+${allApis.length - 10} more</span>`} </div> </div>`} </div> ${result && renderTemplate`<div class="impact-results" data-astro-cid-kf663cba> <div class="impact-summary" data-astro-cid-kf663cba> <div class="stats" data-astro-cid-kf663cba> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-total" data-astro-cid-kf663cba>${result.totalCount}</div> <div class="stat-label" data-astro-cid-kf663cba>Total Affected</div> </div> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-direct" data-astro-cid-kf663cba>${result.direct.length}</div> <div class="stat-label" data-astro-cid-kf663cba>Direct</div> </div> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-transitive" data-astro-cid-kf663cba>${result.transitive.length}</div> <div class="stat-label" data-astro-cid-kf663cba>Transitive</div> </div> </div> <button id="copy-markdown" class="copy-button"${addAttribute(markdown, "data-markdown")} data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" data-astro-cid-kf663cba></path> </svg>
31
+ </button> </div> </form> ${allApis.length > 0 && !apiQuery && renderTemplate`<div class="api-suggestions" data-astro-cid-kf663cba> <p class="suggestions-label" data-astro-cid-kf663cba>Available APIs:</p> <div class="tags" data-astro-cid-kf663cba> ${allApis.slice(0, 10).map((api) => renderTemplate`<a${addAttribute(`/impact?api=${encodeURIComponent(api)}`, "href")} class="tag" data-astro-cid-kf663cba> ${api} </a>`)} ${allApis.length > 10 && renderTemplate`<span class="tag tag-more" data-astro-cid-kf663cba>+${allApis.length - 10} more</span>`} </div> </div>`} </div> ${result && renderTemplate`<div class="impact-results" data-astro-cid-kf663cba> <div class="impact-summary" data-astro-cid-kf663cba> <div class="stats" data-astro-cid-kf663cba> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-total" data-astro-cid-kf663cba>${result.totalCount}</div> <div class="stat-label" data-astro-cid-kf663cba>Total Affected</div> </div> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-direct" data-astro-cid-kf663cba>${result.direct.length}</div> <div class="stat-label" data-astro-cid-kf663cba>Direct</div> </div> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-transitive" data-astro-cid-kf663cba>${result.transitive.length}</div> <div class="stat-label" data-astro-cid-kf663cba>Transitive</div> </div> </div> <button id="copy-markdown" class="copy-button"${addAttribute(markdown, "data-markdown")} aria-label="Copy impact analysis as Markdown" data-astro-cid-kf663cba> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" data-astro-cid-kf663cba></path> </svg>
32
32
  Copy as Markdown
33
- </button> </div> ${result.totalCount === 0 ? renderTemplate`<div class="no-impact" data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-kf663cba></path> </svg> <p data-astro-cid-kf663cba>No screens depend on <code data-astro-cid-kf663cba>${apiQuery}</code></p> </div>` : renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "data-astro-cid-kf663cba": true }, { "default": async ($$result4) => renderTemplate` <div class="impact-graph" data-astro-cid-kf663cba> <div class="graph-container" data-astro-cid-kf663cba> <pre class="mermaid" data-astro-cid-kf663cba>${mermaidGraph}</pre> </div> <div class="graph-legend" data-astro-cid-kf663cba> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node legend-direct" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Direct dependency</span> </div> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node legend-transitive" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Transitive</span> </div> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Not affected</span> </div> </div> </div> <div class="impact-details" data-astro-cid-kf663cba> ${result.direct.length > 0 && renderTemplate`<div class="section" data-astro-cid-kf663cba> <h3 class="section-title" data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" data-astro-cid-kf663cba></path> </svg>
33
+ </button> </div> ${result.totalCount === 0 ? renderTemplate`<div class="no-impact" data-astro-cid-kf663cba> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-kf663cba></path> </svg> <p data-astro-cid-kf663cba>No screens depend on <code data-astro-cid-kf663cba>${apiQuery}</code></p> </div>` : renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "data-astro-cid-kf663cba": true }, { "default": async ($$result4) => renderTemplate` <div class="impact-graph" role="img"${addAttribute(`Impact analysis graph showing ${result.direct.length} direct and ${result.transitive.length} transitive dependencies for ${apiQuery}`, "aria-label")} data-astro-cid-kf663cba> <div class="graph-container" data-astro-cid-kf663cba> <pre class="mermaid" aria-hidden="true" data-astro-cid-kf663cba>${mermaidGraph}</pre> </div> <div class="graph-legend" data-astro-cid-kf663cba> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node legend-direct" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Direct dependency</span> </div> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node legend-transitive" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Transitive</span> </div> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Not affected</span> </div> </div> </div> <div class="impact-details" data-astro-cid-kf663cba> ${result.direct.length > 0 && renderTemplate`<div class="section" data-astro-cid-kf663cba> <h3 class="section-title" data-astro-cid-kf663cba> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" data-astro-cid-kf663cba></path> </svg>
34
34
  Direct Dependencies (${result.direct.length})
35
- </h3> <div class="screen-link-list" data-astro-cid-kf663cba> ${result.direct.map((screen) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="screen-link impact-screen direct" data-astro-cid-kf663cba> <div class="screen-link-info" data-astro-cid-kf663cba> <div class="screen-link-title" data-astro-cid-kf663cba>${screen.title}</div> <div class="screen-link-id" data-astro-cid-kf663cba>${screen.route}</div> </div> ${screen.owner && screen.owner.length > 0 && renderTemplate`<div class="screen-link-owner" data-astro-cid-kf663cba> ${screen.owner.join(", ")} </div>`} </a>`)} </div> </div>`} ${result.transitive.length > 0 && renderTemplate`<div class="section" data-astro-cid-kf663cba> <h3 class="section-title" data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" data-astro-cid-kf663cba></path> </svg>
35
+ </h3> <div class="screen-link-list" data-astro-cid-kf663cba> ${result.direct.map((screen) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="screen-link impact-screen direct" data-astro-cid-kf663cba> <div class="screen-link-info" data-astro-cid-kf663cba> <div class="screen-link-title" data-astro-cid-kf663cba>${screen.title}</div> <div class="screen-link-id" data-astro-cid-kf663cba>${screen.route}</div> </div> ${screen.owner && screen.owner.length > 0 && renderTemplate`<div class="screen-link-owner" data-astro-cid-kf663cba> ${screen.owner.join(", ")} </div>`} </a>`)} </div> </div>`} ${result.transitive.length > 0 && renderTemplate`<div class="section" data-astro-cid-kf663cba> <h3 class="section-title" data-astro-cid-kf663cba> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" data-astro-cid-kf663cba></path> </svg>
36
36
  Transitive Dependencies (${result.transitive.length})
37
- </h3> <div class="screen-link-list" data-astro-cid-kf663cba> ${result.transitive.map(({ screen, path }) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="screen-link impact-screen transitive" data-astro-cid-kf663cba> <div class="screen-link-info" data-astro-cid-kf663cba> <div class="screen-link-title" data-astro-cid-kf663cba>${screen.title}</div> <div class="screen-link-path" data-astro-cid-kf663cba> ${path.join(" \u2192 ")} </div> </div> </a>`)} </div> </div>`} </div> ` })}`} </div>`}` })}`} </div> ${renderScript($$result2, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/impact.astro?astro&type=script&index=0&lang.ts")} ` })} `;
38
- }, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/impact.astro", void 0);
37
+ </h3> <div class="screen-link-list" data-astro-cid-kf663cba> ${result.transitive.map(({ screen, path }) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="screen-link impact-screen transitive" data-astro-cid-kf663cba> <div class="screen-link-info" data-astro-cid-kf663cba> <div class="screen-link-title" data-astro-cid-kf663cba>${screen.title}</div> <div class="screen-link-path" data-astro-cid-kf663cba> ${path.join(" \u2192 ")} </div> </div> </a>`)} </div> </div>`} </div> ` })}`} </div>`}` })}`} </div> ${renderScript($$result2, "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/impact.astro?astro&type=script&index=0&lang.ts")} ` })} `;
38
+ }, "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/impact.astro", void 0);
39
39
 
40
- const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/impact.astro";
40
+ const $$file = "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/impact.astro";
41
41
  const $$url = "/impact";
42
42
 
43
43
  const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
package/dist/server/pages/index.astro.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { e as createComponent, k as renderComponent, r as renderTemplate, m as maybeRenderHead, n as renderScript, l as Fragment, h as addAttribute } from '../chunks/astro/server_m7yT4wCr.mjs';
2
2
  import 'piccolore';
3
- import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_DJf-tycc.mjs';
3
+ import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_JhK3F9tC.mjs';
4
4
  export { renderers } from '../renderers.mjs';
5
5
 
6
6
  const $$Index = createComponent(($$result, $$props, $$slots) => {
@@ -8,12 +8,12 @@ const $$Index = createComponent(($$result, $$props, $$slots) => {
8
8
  const allTags = [...new Set(screens.flatMap((s) => s.tags ?? []))];
9
9
  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Screens", "currentPage": "screens" }, { "default": ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container"> <div class="page-header"> <h1 class="page-title">Screens</h1> <p class="page-description">
10
10
  Browse all screens in your application. Click on a screen to see details and navigation flows.
11
- </p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state"> <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path> </svg> <h2 class="empty-state-title">No screens found</h2> <p class="empty-state-description">
11
+ </p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state"> <svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path> </svg> <h2 class="empty-state-title">No screens found</h2> <p class="empty-state-description">
12
12
  Get started by generating screen metadata from your routes.
13
- </p> <div class="empty-state-steps"> <div class="empty-state-step"> <span class="step-number">1</span> <div class="step-content"> <div class="step-title">Generate screen.meta.ts files</div> <code class="step-code">screenbook generate</code> </div> </div> <div class="empty-state-step"> <span class="step-number">2</span> <div class="step-content"> <div class="step-title">Build the screen catalog</div> <code class="step-code">screenbook build</code> </div> </div> <div class="empty-state-step"> <span class="step-number">3</span> <div class="step-content"> <div class="step-title">Restart the dev server</div> <code class="step-code">screenbook dev</code> </div> </div> </div> <div class="empty-state-features"> <p class="features-title">What you'll get:</p> <ul class="features-list"> <li>Screen catalog with search & filter</li> <li>Navigation graph visualization</li> <li>Impact analysis for API changes</li> <li>CI lint for documentation coverage</li> </ul> </div> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate` <div class="search-wrapper"> <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="search" placeholder="Search screens..." class="search-input"> </div> ${allTags.length > 0 && renderTemplate`<div class="tags"> ${allTags.map((tag) => renderTemplate`<button class="tag"${addAttribute(tag, "data-tag")}>${tag}</button>`)} </div>`}<div class="screen-grid" id="screen-list"> ${screens.map((screen) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="card-link"${addAttribute(screen.tags?.join(",") ?? "", "data-tags")}${addAttribute(screen.title.toLowerCase(), "data-title")}${addAttribute(screen.id.toLowerCase(), "data-id")}> <div class="card"> <h3 class="card-title">${screen.title}</h3> <div class="card-route">${screen.route}</div> <div class="card-meta"> <span class="card-meta-item"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"></path> </svg> ${screen.id} </span> ${screen.owner && screen.owner.length > 0 && renderTemplate`<span class="card-meta-item"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"></path> </svg> ${screen.owner.join(", ")} </span>`} </div> ${screen.tags && screen.tags.length > 0 && renderTemplate`<div class="card-tags"> ${screen.tags.map((tag) => renderTemplate`<span class="card-tag">${tag}</span>`)} </div>`} </div> </a>`)} </div> ` })}`} </div> ${renderScript($$result2, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/index.astro?astro&type=script&index=0&lang.ts")} ` })}`;
14
- }, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/index.astro", void 0);
13
+ </p> <div class="empty-state-steps"> <div class="empty-state-step"> <span class="step-number">1</span> <div class="step-content"> <div class="step-title">Generate screen.meta.ts files</div> <code class="step-code">screenbook generate</code> </div> </div> <div class="empty-state-step"> <span class="step-number">2</span> <div class="step-content"> <div class="step-title">Build the screen catalog</div> <code class="step-code">screenbook build</code> </div> </div> <div class="empty-state-step"> <span class="step-number">3</span> <div class="step-content"> <div class="step-title">Restart the dev server</div> <code class="step-code">screenbook dev</code> </div> </div> </div> <div class="empty-state-features"> <p class="features-title">What you'll get:</p> <ul class="features-list"> <li>Screen catalog with search & filter</li> <li>Navigation graph visualization</li> <li>Impact analysis for API changes</li> <li>CI lint for documentation coverage</li> </ul> </div> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate` <div class="search-wrapper"> <svg class="search-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <label for="search" class="sr-only">Search screens</label> <input type="text" id="search" placeholder="Search screens..." class="search-input"> </div> ${allTags.length > 0 && renderTemplate`<div class="tags" role="group" aria-label="Filter by tag"> ${allTags.map((tag) => renderTemplate`<button class="tag"${addAttribute(tag, "data-tag")} aria-pressed="false">${tag}</button>`)} </div>`}<h2 class="sr-only">All Screens</h2> <div class="screen-grid" id="screen-list" aria-live="polite"> ${screens.map((screen) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="card-link"${addAttribute(screen.tags?.join(",") ?? "", "data-tags")}${addAttribute(screen.title.toLowerCase(), "data-title")}${addAttribute(screen.id.toLowerCase(), "data-id")}> <div class="card"> <h3 class="card-title">${screen.title}</h3> <div class="card-route">${screen.route}</div> <div class="card-meta"> <span class="card-meta-item"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"></path> </svg> ${screen.id} </span> ${screen.owner && screen.owner.length > 0 && renderTemplate`<span class="card-meta-item"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"></path> </svg> ${screen.owner.join(", ")} </span>`} </div> ${screen.tags && screen.tags.length > 0 && renderTemplate`<div class="card-tags"> ${screen.tags.map((tag) => renderTemplate`<span class="card-tag">${tag}</span>`)} </div>`} </div> </a>`)} </div> ` })}`} </div> ${renderScript($$result2, "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/index.astro?astro&type=script&index=0&lang.ts")} ` })}`;
14
+ }, "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/index.astro", void 0);
15
15
 
16
- const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/index.astro";
16
+ const $$file = "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/index.astro";
17
17
  const $$url = "";
18
18
 
19
19
  const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
package/dist/server/pages/screen/_id_.astro.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { e as createComponent, f as createAstro, k as renderComponent, r as renderTemplate, m as maybeRenderHead, h as addAttribute } from '../../chunks/astro/server_m7yT4wCr.mjs';
2
2
  import 'piccolore';
3
- import { l as loadScreens, $ as $$Layout } from '../../chunks/loadScreens_DJf-tycc.mjs';
4
- import { c as getApiDependencyCount } from '../../chunks/impactAnalysis_Bz5lMdmy.mjs';
3
+ import { l as loadScreens, $ as $$Layout } from '../../chunks/loadScreens_JhK3F9tC.mjs';
4
+ import { c as getApiDependencyCount } from '../../chunks/impactAnalysis_LvYEc57d.mjs';
5
5
  export { renderers } from '../../renderers.mjs';
6
6
 
7
7
  const $$Astro = createAstro();
@@ -23,20 +23,20 @@ const $$id = createComponent(($$result, $$props, $$slots) => {
23
23
  }
24
24
  const entryScreens = screens.filter((s) => screen.entryPoints?.includes(s.id));
25
25
  const nextScreens = screens.filter((s) => screen.next?.includes(s.id));
26
- return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": screen.title }, { "default": ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container"> <a href="/" class="back-link"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path> </svg>
26
+ return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": screen.title }, { "default": ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container"> <a href="/" class="back-link"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path> </svg>
27
27
  Back to screens
28
- </a> <div class="detail-header"> <h1 class="detail-title">${screen.title}</h1> <div class="detail-route"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"></path> </svg> ${screen.route} </div> </div> <div class="detail-content"> <div> <!-- Information --> <div class="section"> <h2 class="section-title">Information</h2> <div class="info-list"> <div class="info-item"> <span class="info-label">ID</span> <span class="info-value"><code>${screen.id}</code></span> </div> ${screen.owner && screen.owner.length > 0 && renderTemplate`<div class="info-item"> <span class="info-label">Owner</span> <span class="info-value">${screen.owner.join(", ")}</span> </div>`} ${screen.tags && screen.tags.length > 0 && renderTemplate`<div class="info-item"> <span class="info-label">Tags</span> <span class="info-value"> <div class="card-tags"> ${screen.tags.map((tag) => renderTemplate`<span class="card-tag">${tag}</span>`)} </div> </span> </div>`} ${screen.description && renderTemplate`<div class="info-item"> <span class="info-label">Description</span> <span class="info-value">${screen.description}</span> </div>`} </div> </div> <!-- Dependencies --> ${screen.dependsOn && screen.dependsOn.length > 0 && renderTemplate`<div class="section"> <h2 class="section-title">Dependencies</h2> <div class="dep-list"> ${screen.dependsOn.map((dep) => {
28
+ </a> <div class="detail-header"> <h1 class="detail-title">${screen.title}</h1> <div class="detail-route"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"></path> </svg> ${screen.route} </div> </div> <div class="detail-content"> <div> <!-- Information --> <div class="section"> <h2 class="section-title">Information</h2> <div class="info-list"> <div class="info-item"> <span class="info-label">ID</span> <span class="info-value"><code>${screen.id}</code></span> </div> ${screen.owner && screen.owner.length > 0 && renderTemplate`<div class="info-item"> <span class="info-label">Owner</span> <span class="info-value">${screen.owner.join(", ")}</span> </div>`} ${screen.tags && screen.tags.length > 0 && renderTemplate`<div class="info-item"> <span class="info-label">Tags</span> <span class="info-value"> <div class="card-tags"> ${screen.tags.map((tag) => renderTemplate`<span class="card-tag">${tag}</span>`)} </div> </span> </div>`} ${screen.description && renderTemplate`<div class="info-item"> <span class="info-label">Description</span> <span class="info-value">${screen.description}</span> </div>`} </div> </div> <!-- Dependencies --> ${screen.dependsOn && screen.dependsOn.length > 0 && renderTemplate`<div class="section"> <h2 class="section-title">Dependencies</h2> <div class="dep-list"> ${screen.dependsOn.map((dep) => {
29
29
  const count = apiCounts.get(dep) || 1;
30
30
  const otherCount = count - 1;
31
- return renderTemplate`<a${addAttribute(`/impact?api=${encodeURIComponent(dep)}`, "href")} class="dep-item dep-item-link"> <div class="dep-item-main"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path> </svg> <span>${dep}</span> </div> <div class="dep-item-meta"> ${otherCount > 0 && renderTemplate`<span class="dep-count">+${otherCount} other${otherCount > 1 ? "s" : ""}</span>`} <svg class="dep-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path> </svg> </div> </a>`;
32
- })} </div> </div>`} <!-- External Links --> ${screen.links && screen.links.length > 0 && renderTemplate`<div class="section"> <h2 class="section-title">Links</h2> <div class="dep-list"> ${screen.links.map((link) => renderTemplate`<a${addAttribute(link.url, "href")} target="_blank" rel="noopener noreferrer" class="dep-item"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path> </svg> ${link.label} </a>`)} </div> </div>`} </div> <div> <!-- Entry Points --> ${entryScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"></path> </svg>
31
+ return renderTemplate`<a${addAttribute(`/impact?api=${encodeURIComponent(dep)}`, "href")} class="dep-item dep-item-link"> <div class="dep-item-main"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path> </svg> <span>${dep}</span> </div> <div class="dep-item-meta"> ${otherCount > 0 && renderTemplate`<span class="dep-count">+${otherCount} other${otherCount > 1 ? "s" : ""}</span>`} <svg class="dep-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path> </svg> </div> </a>`;
32
+ })} </div> </div>`} <!-- External Links --> ${screen.links && screen.links.length > 0 && renderTemplate`<div class="section"> <h2 class="section-title">Links</h2> <div class="dep-list"> ${screen.links.map((link) => renderTemplate`<a${addAttribute(link.url, "href")} target="_blank" rel="noopener noreferrer" class="dep-item"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path> </svg> ${link.label} </a>`)} </div> </div>`} </div> <div> <!-- Entry Points --> ${entryScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"></path> </svg>
33
33
  Entry Points
34
- </h3> <div class="screen-link-list"> ${entryScreens.map((s) => renderTemplate`<a${addAttribute(`/screen/${s.id}`, "href")} class="screen-link"> <div class="screen-link-info"> <span class="screen-link-title">${s.title}</span> <span class="screen-link-id">${s.id}</span> </div> <svg class="screen-link-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path> </svg> </a>`)} </div> </div>`} <!-- Next Screens --> ${nextScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path> </svg>
34
+ </h3> <div class="screen-link-list"> ${entryScreens.map((s) => renderTemplate`<a${addAttribute(`/screen/${s.id}`, "href")} class="screen-link"> <div class="screen-link-info"> <span class="screen-link-title">${s.title}</span> <span class="screen-link-id">${s.id}</span> </div> <svg class="screen-link-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path> </svg> </a>`)} </div> </div>`} <!-- Next Screens --> ${nextScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path> </svg>
35
35
  Next Screens
36
36
  </h3> <div class="screen-link-list"> ${nextScreens.map((s) => renderTemplate`<a${addAttribute(`/screen/${s.id}`, "href")} class="screen-link"> <div class="screen-link-info"> <span class="screen-link-title">${s.title}</span> <span class="screen-link-id">${s.id}</span> </div> <svg class="screen-link-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path> </svg> </a>`)} </div> </div>`} </div> </div> </div> ` })}`;
37
- }, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/screen/[id].astro", void 0);
37
+ }, "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/screen/[id].astro", void 0);
38
38
 
39
- const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/screen/[id].astro";
39
+ const $$file = "/home/runner/work/screenbook/screenbook/packages/ui/src/pages/screen/[id].astro";
40
40
  const $$url = "/screen/[id]";
41
41
 
42
42
  const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
package/package.json CHANGED
@@ -1,42 +1,42 @@
1
1
  {
2
- "name": "@screenbook/ui",
3
- "version": "0.0.1",
4
- "description": "UI for Screenbook - screen catalog and navigation graph viewer",
5
- "type": "module",
6
- "dependencies": {
7
- "@astrojs/node": "^9.5.1",
8
- "@tailwindcss/vite": "^4.0.0",
9
- "astro": "^5.16.0",
10
- "mermaid": "^11.4.0",
11
- "tailwindcss": "^4.0.0",
12
- "@screenbook/core": "0.0.1"
13
- },
14
- "keywords": [
15
- "screenbook",
16
- "ui",
17
- "screen",
18
- "catalog",
19
- "navigation"
20
- ],
21
- "license": "MIT",
22
- "repository": {
23
- "type": "git",
24
- "url": "https://github.com/wadakatu/screenbook.git",
25
- "directory": "packages/ui"
26
- },
27
- "homepage": "https://github.com/wadakatu/screenbook#readme",
28
- "bugs": {
29
- "url": "https://github.com/wadakatu/screenbook/issues"
30
- },
31
- "devDependencies": {
32
- "prettier": "^3.7.4",
33
- "prettier-plugin-astro": "^0.14.1"
34
- },
35
- "scripts": {
36
- "dev": "astro dev",
37
- "build": "astro build",
38
- "preview": "astro preview",
39
- "format": "prettier --write \"**/*.astro\"",
40
- "format:check": "prettier --check \"**/*.astro\""
41
- }
42
- }
2
+ "name": "@screenbook/ui",
3
+ "version": "0.1.0",
4
+ "description": "UI for Screenbook - screen catalog and navigation graph viewer",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "astro dev",
8
+ "build": "astro build",
9
+ "preview": "astro preview",
10
+ "format": "prettier --write \"**/*.astro\"",
11
+ "format:check": "prettier --check \"**/*.astro\""
12
+ },
13
+ "dependencies": {
14
+ "@astrojs/node": "^9.5.1",
15
+ "@screenbook/core": "workspace:*",
16
+ "@tailwindcss/vite": "^4.0.0",
17
+ "astro": "^5.16.0",
18
+ "mermaid": "^11.4.0",
19
+ "tailwindcss": "^4.0.0"
20
+ },
21
+ "keywords": [
22
+ "screenbook",
23
+ "ui",
24
+ "screen",
25
+ "catalog",
26
+ "navigation"
27
+ ],
28
+ "license": "MIT",
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "https://github.com/wadakatu/screenbook.git",
32
+ "directory": "packages/ui"
33
+ },
34
+ "homepage": "https://github.com/wadakatu/screenbook#readme",
35
+ "bugs": {
36
+ "url": "https://github.com/wadakatu/screenbook/issues"
37
+ },
38
+ "devDependencies": {
39
+ "prettier": "^3.7.4",
40
+ "prettier-plugin-astro": "^0.14.1"
41
+ }
42
+ }
package/src/layouts/Layout.astro CHANGED
@@ -17,34 +17,51 @@ const { title, currentPage } = Astro.props
17
17
  <title>{title} | Screenbook</title>
18
18
  </head>
19
19
  <body>
20
+ <a href="#main-content" class="skip-link">Skip to main content</a>
20
21
  <header class="header">
21
22
  <div class="container">
22
23
  <div class="header-content">
23
24
  <a href="/" class="logo">
24
- <img src="/logo.svg" alt="" class="logo-icon" width="24" height="24" />
25
+ <img src="/logo.svg" alt="Screenbook home" class="logo-icon" width="24" height="24" />
25
26
  Screenbook
26
27
  </a>
27
- <nav class="nav">
28
- <a href="/" class:list={["nav-link", { active: currentPage === "screens" }]}>
29
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
28
+ <nav class="nav" aria-label="Main navigation">
29
+ <a
30
+ href="/"
31
+ class:list={["nav-link", { active: currentPage === "screens" }]}
32
+ aria-current={currentPage === "screens" ? "page" : undefined}
33
+ >
34
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
30
35
  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
31
36
  </svg>
32
37
  Screens
33
38
  </a>
34
- <a href="/graph" class:list={["nav-link", { active: currentPage === "graph" }]}>
35
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
39
+ <a
40
+ href="/graph"
41
+ class:list={["nav-link", { active: currentPage === "graph" }]}
42
+ aria-current={currentPage === "graph" ? "page" : undefined}
43
+ >
44
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
36
45
  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
37
46
  </svg>
38
47
  Graph
39
48
  </a>
40
- <a href="/impact" class:list={["nav-link", { active: currentPage === "impact" }]}>
41
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
49
+ <a
50
+ href="/impact"
51
+ class:list={["nav-link", { active: currentPage === "impact" }]}
52
+ aria-current={currentPage === "impact" ? "page" : undefined}
53
+ >
54
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
42
55
  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
43
56
  </svg>
44
57
  Impact
45
58
  </a>
46
- <a href="/coverage" class:list={["nav-link", { active: currentPage === "coverage" }]}>
47
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
59
+ <a
60
+ href="/coverage"
61
+ class:list={["nav-link", { active: currentPage === "coverage" }]}
62
+ aria-current={currentPage === "coverage" ? "page" : undefined}
63
+ >
64
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
48
65
  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
49
66
  </svg>
50
67
  Coverage
@@ -53,7 +70,7 @@ const { title, currentPage } = Astro.props
53
70
  </div>
54
71
  </div>
55
72
  </header>
56
- <main>
73
+ <main id="main-content">
57
74
  <slot />
58
75
  </main>
59
76
  </body>
package/src/pages/coverage.astro CHANGED
@@ -31,7 +31,7 @@ function getPercentageBg(percentage: number): string {
31
31
 
32
32
  {!coverage ? (
33
33
  <div class="empty-state">
34
- <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
34
+ <svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
35
35
  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
36
36
  </svg>
37
37
  <h2 class="empty-state-title">No coverage data</h2>
@@ -72,7 +72,7 @@ function getPercentageBg(percentage: number): string {
72
72
  {/* By Owner */}
73
73
  <div class="coverage-section">
74
74
  <h2 class="section-title">
75
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
75
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
76
76
  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
77
77
  </svg>
78
78
  By Owner
@@ -98,7 +98,7 @@ function getPercentageBg(percentage: number): string {
98
98
  {/* By Tag */}
99
99
  <div class="coverage-section">
100
100
  <h2 class="section-title">
101
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
101
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
102
102
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
103
103
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
104
104
  </svg>
@@ -121,7 +121,7 @@ function getPercentageBg(percentage: number): string {
121
121
  {coverage.missing.length > 0 && (
122
122
  <div class="coverage-section missing-section">
123
123
  <h2 class="section-title">
124
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
124
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
125
125
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
126
126
  </svg>
127
127
  Missing Documentation ({coverage.missing.length})
@@ -133,7 +133,7 @@ function getPercentageBg(percentage: number): string {
133
133
  {coverage.missing.map((item) => (
134
134
  <div class="missing-item">
135
135
  <div class="missing-route">
136
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
136
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
137
137
  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
138
138
  </svg>
139
139
  <span>{item.route}</span>
@@ -185,7 +185,7 @@ function getPercentageBg(percentage: number): string {
185
185
 
186
186
  .percentage-label {
187
187
  font-size: var(--text-sm);
188
- color: var(--color-text-muted);
188
+ color: var(--color-text-secondary);
189
189
  margin-top: 4px;
190
190
  }
191
191
 
package/src/pages/graph.astro CHANGED
@@ -114,7 +114,7 @@ const apiCount = new Set(
114
114
 
115
115
  {screens.length === 0 ? (
116
116
  <div class="empty-state">
117
- <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
117
+ <svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
118
118
  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
119
119
  </svg>
120
120
  <h2 class="empty-state-title">No graph data</h2>
@@ -128,15 +128,15 @@ const apiCount = new Set(
128
128
  ) : (
129
129
  <>
130
130
  <div class="graph-controls">
131
- <div class="view-toggle">
132
- <button class="toggle-btn active" data-view="navigation">
133
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
131
+ <div class="view-toggle" role="group" aria-label="Graph view">
132
+ <button class="toggle-btn active" data-view="navigation" aria-pressed="true">
133
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
134
134
  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
135
135
  </svg>
136
136
  Navigation
137
137
  </button>
138
- <button class="toggle-btn" data-view="api">
139
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
138
+ <button class="toggle-btn" data-view="api" aria-pressed="false">
139
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
140
140
  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
141
141
  </svg>
142
142
  API Dependencies
@@ -148,12 +148,12 @@ const apiCount = new Set(
148
148
  </div>
149
149
  </div>
150
150
 
151
- <div class="graph-container" id="navigation-graph">
152
- <pre class="mermaid" data-graph="navigation">{navigationGraph}</pre>
151
+ <div class="graph-container" id="navigation-graph" role="img" aria-label={`Navigation graph showing ${screens.length} screens and their navigation relationships`}>
152
+ <pre class="mermaid" data-graph="navigation" aria-hidden="true">{navigationGraph}</pre>
153
153
  </div>
154
154
 
155
- <div class="graph-container hidden" id="api-graph">
156
- <pre class="mermaid" data-graph="api">{apiGraph}</pre>
155
+ <div class="graph-container hidden" id="api-graph" role="img" aria-label={`API dependency graph showing ${screens.length} screens and ${apiCount} APIs`}>
156
+ <pre class="mermaid" data-graph="api" aria-hidden="true">{apiGraph}</pre>
157
157
  </div>
158
158
 
159
159
  <div class="graph-legend" id="navigation-legend">
@@ -240,9 +240,13 @@ const apiCount = new Set(
240
240
  btn.addEventListener("click", () => {
241
241
  const view = btn.getAttribute("data-view")
242
242
 
243
- // Update active button
244
- toggleBtns.forEach((b) => b.classList.remove("active"))
243
+ // Update active button and aria-pressed
244
+ toggleBtns.forEach((b) => {
245
+ b.classList.remove("active")
246
+ b.setAttribute("aria-pressed", "false")
247
+ })
245
248
  btn.classList.add("active")
249
+ btn.setAttribute("aria-pressed", "true")
246
250
 
247
251
  // Toggle graph visibility
248
252
  if (view === "navigation") {
package/src/pages/impact.astro CHANGED
@@ -36,7 +36,7 @@ if (apiQuery && screens.length > 0) {
36
36
 
37
37
  {screens.length === 0 ? (
38
38
  <div class="empty-state">
39
- <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
39
+ <svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
40
40
  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
41
41
  </svg>
42
42
  <h2 class="empty-state-title">No screen data</h2>
@@ -50,13 +50,15 @@ if (apiQuery && screens.length > 0) {
50
50
  ) : (
51
51
  <>
52
52
  <div class="impact-search">
53
- <form method="get" class="search-form">
53
+ <form method="get" class="search-form" role="search">
54
54
  <div class="search-wrapper impact-search-wrapper">
55
- <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
55
+ <svg class="search-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
56
56
  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
57
57
  </svg>
58
+ <label for="api-input" class="sr-only">API name to analyze</label>
58
59
  <input
59
60
  type="text"
61
+ id="api-input"
60
62
  name="api"
61
63
  class="search-input"
62
64
  placeholder="Enter API name (e.g., InvoiceAPI.getDetail)"
@@ -113,8 +115,9 @@ if (apiQuery && screens.length > 0) {
113
115
  id="copy-markdown"
114
116
  class="copy-button"
115
117
  data-markdown={markdown}
118
+ aria-label="Copy impact analysis as Markdown"
116
119
  >
117
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
120
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
118
121
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
119
122
  </svg>
120
123
  Copy as Markdown
@@ -123,16 +126,16 @@ if (apiQuery && screens.length > 0) {
123
126
 
124
127
  {result.totalCount === 0 ? (
125
128
  <div class="no-impact">
126
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
129
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
127
130
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
128
131
  </svg>
129
132
  <p>No screens depend on <code>{apiQuery}</code></p>
130
133
  </div>
131
134
  ) : (
132
135
  <>
133
- <div class="impact-graph">
136
+ <div class="impact-graph" role="img" aria-label={`Impact analysis graph showing ${result.direct.length} direct and ${result.transitive.length} transitive dependencies for ${apiQuery}`}>
134
137
  <div class="graph-container">
135
- <pre class="mermaid">{mermaidGraph}</pre>
138
+ <pre class="mermaid" aria-hidden="true">{mermaidGraph}</pre>
136
139
  </div>
137
140
  <div class="graph-legend">
138
141
  <div class="graph-legend-item">
@@ -154,7 +157,7 @@ if (apiQuery && screens.length > 0) {
154
157
  {result.direct.length > 0 && (
155
158
  <div class="section">
156
159
  <h3 class="section-title">
157
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
160
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
158
161
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
159
162
  </svg>
160
163
  Direct Dependencies ({result.direct.length})
@@ -180,7 +183,7 @@ if (apiQuery && screens.length > 0) {
180
183
  {result.transitive.length > 0 && (
181
184
  <div class="section">
182
185
  <h3 class="section-title">
183
- <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
186
+ <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
184
187
  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
185
188
  </svg>
186
189
  Transitive Dependencies ({result.transitive.length})