@forwardimpact/pathway 0.22.0 → 0.23.1

package/src/commands/tool.js

@@ -9,6 +9,7 @@
  *   npx pathway tool <name>       # Detail view for specific tool
  */
 
+import { truncate } from "../formatters/shared.js";
 import { prepareToolsList } from "../formatters/tool/shared.js";
 import {
   formatTable,
@@ -27,10 +28,10 @@ export async function runToolCommand({ data, args, options }) {
   const [name] = args;
   const { tools, totalCount } = prepareToolsList(data.skills);
 
-  // --list: Output clean newline-separated tool names for piping
+  // --list: Output descriptive comma-separated tool lines for piping
   if (options.list) {
     for (const tool of tools) {
-      console.log(tool.name);
+      console.log(`${tool.name}, ${truncate(tool.description, 60)}`);
     }
     return;
   }
@@ -87,7 +88,9 @@ function formatSummary(tools, totalCount) {
   if (sorted.length > 15) {
     console.log(`(showing top 15 by usage)`);
   }
-  console.log(`\nRun 'npx pathway tool --list' for all tool names`);
+  console.log(
+    `\nRun 'npx pathway tool --list' for all tool names and descriptions`,
+  );
   console.log(`Run 'npx pathway tool <name>' for details\n`);
 }
 

package/src/commands/track.js

@@ -16,25 +16,40 @@ import { sortTracksByName } from "../formatters/track/shared.js";
 import { formatTable } from "../lib/cli-output.js";
 import { getConceptEmoji } from "@forwardimpact/map/levels";
 
+/**
+ * Format track list item for --list output
+ * @param {Object} track - Track entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(track) {
+  return `${track.id}, ${track.name}`;
+}
+
 /**
  * Format track summary output
  * @param {Array} tracks - Raw track entities
  * @param {Object} data - Full data context
  */
 function formatSummary(tracks, data) {
-  const { framework } = data;
+  const { framework, disciplines } = data;
   const emoji = framework ? getConceptEmoji(framework, "track") : "🛤️";
 
   console.log(`\n${emoji} Tracks\n`);
 
   const rows = tracks.map((t) => {
     const modCount = Object.keys(t.skillModifiers || {}).length;
-    return [t.id, t.name, modCount];
+    const usedBy = disciplines
+      ? disciplines.filter((d) => d.validTracks && d.validTracks.includes(t.id))
+      : [];
+    const disciplineNames = usedBy
+      .map((d) => d.specialization || d.id)
+      .join(", ");
+    return [t.id, t.name, modCount, disciplineNames || "—"];
   });
 
-  console.log(formatTable(["ID", "Name", "Modifiers"], rows));
+  console.log(formatTable(["ID", "Name", "Modifiers", "Disciplines"], rows));
   console.log(`\nTotal: ${tracks.length} tracks`);
-  console.log(`\nRun 'npx pathway track --list' for IDs`);
+  console.log(`\nRun 'npx pathway track --list' for IDs and names`);
   console.log(`Run 'npx pathway track <id>' for details\n`);
 }
 
@@ -63,5 +78,6 @@ export const runTrackCommand = createEntityCommand({
   sortItems: sortTracksByName,
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "🛤️",
 });

package/src/components/card.js

@@ -1,108 +1,12 @@
 /**
  * Reusable card component
+ *
+ * Re-exports from @forwardimpact/libui/components/card.
  */
 
-import { div, h3, p, span } from "../lib/render.js";
-
-/**
- * Create a card component
- * @param {Object} options
- * @param {string} options.title - Card title
- * @param {string} [options.description] - Card description
- * @param {string} [options.href] - Link destination (makes card clickable)
- * @param {HTMLElement[]} [options.badges] - Badges to display
- * @param {HTMLElement[]} [options.meta] - Meta information
- * @param {HTMLElement} [options.content] - Additional content
- * @param {HTMLElement} [options.icon] - Icon element to display
- * @param {string} [options.className] - Additional CSS class
- * @returns {HTMLElement}
- */
-export function createCard({
-  title,
-  description,
-  href,
-  badges = [],
-  meta = [],
-  content,
-  icon,
-  className = "",
-}) {
-  const isClickable = !!href;
-
-  const titleContent = icon
-    ? div(
-        { className: "card-title-with-icon" },
-        icon,
-        h3({ className: "card-title" }, title),
-      )
-    : h3({ className: "card-title" }, title);
-
-  const cardHeader = div(
-    { className: "card-header" },
-    titleContent,
-    badges.length > 0 ? div({ className: "card-badges" }, ...badges) : null,
-  );
-
-  const card = div(
-    {
-      className:
-        `card ${isClickable ? "card-clickable" : ""} ${className}`.trim(),
-    },
-    cardHeader,
-    description ? p({ className: "card-description" }, description) : null,
-    content || null,
-    meta.length > 0 ? div({ className: "card-meta" }, ...meta) : null,
-  );
-
-  if (isClickable) {
-    card.addEventListener("click", () => {
-      window.location.hash = href;
-    });
-  }
-
-  return card;
-}
-
-/**
- * Create a stat card for the landing page
- * @param {Object} options
- * @param {number|string} options.value - The stat value
- * @param {string} options.label - The stat label
- * @param {string} [options.href] - Optional link
- * @returns {HTMLElement}
- */
-export function createStatCard({ value, label, href }) {
-  const card = div(
-    { className: "stat-card" },
-    div({ className: "stat-value" }, String(value)),
-    div({ className: "stat-label" }, label),
-  );
-
-  if (href) {
-    card.style.cursor = "pointer";
-    card.addEventListener("click", () => {
-      window.location.hash = href;
-    });
-  }
-
-  return card;
-}
-
-/**
- * Create a badge element
- * @param {string} text - Badge text
- * @param {string} [type] - Badge type (default, primary, secondary, broad, technical, ai, etc.)
- * @returns {HTMLElement}
- */
-export function createBadge(text, type = "default") {
-  return span({ className: `badge badge-${type}` }, text);
-}
-
-/**
- * Create a tag element
- * @param {string} text
- * @returns {HTMLElement}
- */
-export function createTag(text) {
-  return span({ className: "info-tag" }, text);
-}
+export {
+  createCard,
+  createStatCard,
+  createBadge,
+  createTag,
+} from "@forwardimpact/libui/components/card";

package/src/components/comparison-radar.js

@@ -13,7 +13,7 @@ import {
   getBehaviourMaturityIndex,
   formatLevel,
 } from "../lib/render.js";
-import { compareByCapability } from "@forwardimpact/libpathway/policies";
+import { compareByCapability } from "@forwardimpact/libskill/policies";
 
 /**
  * Create a comparison skill radar chart

package/src/components/detail.js

@@ -1,13 +1,20 @@
 /**
- * Reusable detail view component
+ * Detail view components
+ *
+ * Re-exports generic components from @forwardimpact/libui/components/detail
+ * and provides domain-specific level display components.
  */
 
+export {
+  createDetailHeader,
+  createDetailSection,
+  createLinksList,
+  createTagsList,
+  createDetailItem,
+} from "@forwardimpact/libui/components/detail";
+
 import {
   div,
-  h1,
-  h2,
-  p,
-  a,
   span,
   table,
   thead,
@@ -15,63 +22,13 @@ import {
   tr,
   th,
   td,
-  section,
-} from "../lib/render.js";
-import { createBackLink } from "./nav.js";
-import { createTag } from "./card.js";
-import { formatLevel } from "../lib/render.js";
+  formatLevel,
+} from "@forwardimpact/libui/render";
 import {
   SKILL_PROFICIENCY_ORDER,
   BEHAVIOUR_MATURITY_ORDER,
 } from "@forwardimpact/map/levels";
 
-/**
- * Create a detail page header
- * @param {Object} options
- * @param {string} options.title
- * @param {string} [options.description]
- * @param {string} options.backLink - Path to go back to
- * @param {string} [options.backText] - Back link text
- * @param {HTMLElement[]} [options.badges]
- * @param {HTMLElement[]} [options.actions] - Action buttons
- * @returns {HTMLElement}
- */
-export function createDetailHeader({
-  title,
-  description,
-  backLink,
-  backText = "← Back to list",
-  badges = [],
-  actions = [],
-}) {
-  return div(
-    { className: "page-header" },
-    createBackLink(backLink, backText),
-    div(
-      { className: "card-header" },
-      h1({ className: "page-title" }, title),
-      badges.length > 0 ? div({ className: "page-meta" }, ...badges) : null,
-    ),
-    description ? p({ className: "page-description" }, description) : null,
-    actions.length > 0 ? div({ className: "page-actions" }, ...actions) : null,
-  );
-}
-
-/**
- * Create a detail section
- * @param {Object} options
- * @param {string} options.title
- * @param {HTMLElement} options.content
- * @returns {HTMLElement}
- */
-export function createDetailSection({ title, content }) {
-  return section(
-    { className: "section section-detail" },
-    h2({ className: "section-title" }, title),
-    content,
-  );
-}
-
 /**
  * Create a level descriptions table
  * @param {Object} descriptions - Level descriptions object
@@ -89,7 +46,7 @@ export function createLevelTable(descriptions, type = "skill") {
   const maxLevels = levels.length;
 
   const rows = levels.map((level) => {
-    const description = descriptions?.[level] || "—";
+    const description = descriptions?.[level] || "\u2014";
     const levelIndex = parseInt(levelLabels[level]);
     return tr(
       {},
@@ -147,66 +104,7 @@ export function createLevelCell(levelIndex, maxLevels, levelName) {
 export function createEmptyLevelCell() {
   return td(
     { className: "level-cell" },
-    span({ className: "level-label text-muted" }, "—"),
-  );
-}
-
-/**
- * Create a links list
- * @param {Array<{id: string, name: string}>} items
- * @param {string} basePath - Base path for links (e.g., '/skill')
- * @param {string} [emptyMessage='None']
- * @param {Function} [getDisplayName] - Optional function to get display name
- * @returns {HTMLElement}
- */
-export function createLinksList(
-  items,
-  basePath,
-  emptyMessage = "None",
-  getDisplayName,
-) {
-  if (!items || items.length === 0) {
-    return p({ className: "text-muted" }, emptyMessage);
-  }
-
-  const displayFn = getDisplayName || ((item) => item.name);
-  const links = items.map((item) =>
-    a({ href: `#${basePath}/${item.id}` }, displayFn(item)),
-  );
-
-  return div({ className: "links-list" }, ...links);
-}
-
-/**
- * Create a tags list
- * @param {string[]} tags
- * @param {string} [emptyMessage='None']
- * @returns {HTMLElement}
- */
-export function createTagsList(tags, emptyMessage = "None") {
-  if (!tags || tags.length === 0) {
-    return p({ className: "text-muted" }, emptyMessage);
-  }
-
-  return div({ className: "info-tags" }, ...tags.map((tag) => createTag(tag)));
-}
-
-/**
- * Create a detail grid item
- * @param {string} label
- * @param {string|HTMLElement} value
- * @returns {HTMLElement}
- */
-export function createDetailItem(label, value) {
-  const valueEl =
-    typeof value === "string"
-      ? div({ className: "detail-item-value" }, value)
-      : value;
-
-  return div(
-    { className: "detail-item" },
-    div({ className: "detail-item-label" }, label),
-    valueEl,
+    span({ className: "level-label text-muted" }, "\u2014"),
   );
 }
 

package/src/components/error-page.js

@@ -1,72 +1,12 @@
 /**
  * Error page components
+ *
+ * Re-exports from @forwardimpact/libui/components/error-page.
  */
 
-import { render, div, h1, p, a } from "../lib/render.js";
-
-/**
- * Render a not found error page
- * @param {Object} options - Configuration options
- * @param {string} options.entityType - Type of entity not found (e.g., 'Skill', 'Behaviour')
- * @param {string} options.entityId - ID that was not found
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- */
-export function renderNotFound({ entityType, entityId, backPath, backText }) {
-  render(
-    div(
-      { className: "error-message" },
-      h1({}, `${entityType} Not Found`),
-      p({}, `No ${entityType.toLowerCase()} found with ID: ${entityId}`),
-      a({ href: `#${backPath}` }, backText),
-    ),
-  );
-}
-
-/**
- * Create a not found error element (without rendering)
- * @param {Object} options - Configuration options
- * @param {string} options.entityType - Type of entity not found
- * @param {string} options.entityId - ID that was not found
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- * @returns {HTMLElement}
- */
-export function createNotFound({ entityType, entityId, backPath, backText }) {
-  return div(
-    { className: "error-message" },
-    h1({}, `${entityType} Not Found`),
-    p({}, `No ${entityType.toLowerCase()} found with ID: ${entityId}`),
-    a({ href: `#${backPath}` }, backText),
-  );
-}
-
-/**
- * Create an invalid state error element
- * @param {Object} options - Configuration options
- * @param {string} options.title - Error title
- * @param {string} options.message - Error message
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- * @returns {HTMLElement}
- */
-export function createErrorMessage({ title, message, backPath, backText }) {
-  return div(
-    { className: "error-message" },
-    h1({}, title),
-    p({}, message),
-    a({ href: `#${backPath}` }, backText),
-  );
-}
-
-/**
- * Render an invalid state error page
- * @param {Object} options - Configuration options
- * @param {string} options.title - Error title
- * @param {string} options.message - Error message
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- */
-export function renderError({ title, message, backPath, backText }) {
-  render(createErrorMessage({ title, message, backPath, backText }));
-}
+export {
+  renderNotFound,
+  createNotFound,
+  createErrorMessage,
+  renderError,
+} from "@forwardimpact/libui/components/error-page";

package/src/components/grid.js

@@ -1,109 +1,15 @@
 /**
  * Grid components and utilities
  *
- * This module provides reusable grid components that wrap the CSS grid utilities.
- * All grids use the unified CSS classes: auto-grid-xs, auto-grid-sm, auto-grid-md, auto-grid-lg
- *
- * Grid sizes:
- * - xs: 150px min column width (compact stats, small cards)
- * - sm: 200px min column width (form controls, medium cards)
- * - md: 300px min column width (detail items, content cards)
- * - lg: 400px min column width (large content like radar charts)
- */
-
-import { div } from "../lib/render.js";
-
-/**
- * Grid size options
- * @typedef {'xs' | 'sm' | 'md' | 'lg'} GridSize
- */
-
-/**
- * Gap size options
- * @typedef {'sm' | 'md' | 'lg' | 'xl'} GapSize
- */
-
-/**
- * Create an auto-fit grid container
- * @param {GridSize} size - Grid size variant (xs, sm, md, lg)
- * @param {HTMLElement[]} children - Child elements to place in grid
- * @param {Object} [options] - Optional configuration
- * @param {string} [options.className] - Additional CSS classes
- * @param {GapSize} [options.gap] - Override default gap (sm, md, lg, xl)
- * @returns {HTMLElement}
- */
-export function createAutoGrid(size, children, options = {}) {
-  const { className = "", gap } = options;
-  const classes = [`auto-grid-${size}`, gap ? `gap-${gap}` : "", className]
-    .filter(Boolean)
-    .join(" ");
-
-  return div({ className: classes }, ...children);
-}
-
-/**
- * Create a fixed-column grid container
- * @param {2 | 3 | 6} columns - Number of columns
- * @param {HTMLElement[]} children - Child elements to place in grid
- * @param {Object} [options] - Optional configuration
- * @param {string} [options.className] - Additional CSS classes
- * @returns {HTMLElement}
- */
-export function createFixedGrid(columns, children, options = {}) {
-  const { className = "" } = options;
-  const classes = ["grid", `grid-${columns}`, className]
-    .filter(Boolean)
-    .join(" ");
-
-  return div({ className: classes }, ...children);
-}
-
-/**
- * Create a grid for form selectors (discipline/level/track dropdowns)
- * Uses auto-grid-sm (200px min)
- * @param {HTMLElement[]} children - Form control elements
- * @returns {HTMLElement}
- */
-export function createSelectorGrid(children) {
-  return createAutoGrid("sm", children, { gap: "lg" });
-}
-
-/**
- * Create a grid for detail items (key-value pairs)
- * Uses auto-grid-md (300px min)
- * @param {HTMLElement[]} children - Detail item elements
- * @returns {HTMLElement}
- */
-export function createDetailGrid(children) {
-  return createAutoGrid("md", children);
-}
-
-/**
- * Create a grid for radar charts or large content
- * Uses auto-grid-lg (400px min)
- * @param {HTMLElement[]} children - Large content elements
- * @returns {HTMLElement}
- */
-export function createRadarGrid(children) {
-  return createAutoGrid("lg", children);
-}
-
-/**
- * Create a grid for compact stats
- * Uses auto-grid-xs (150px min)
- * @param {HTMLElement[]} children - Stat elements
- * @returns {HTMLElement}
- */
-export function createStatsGrid(children) {
-  return createAutoGrid("xs", children);
-}
-
-/**
- * Create a grid for card-like items (tips, expectations)
- * Uses auto-grid-sm (200px min)
- * @param {HTMLElement[]} children - Card elements
- * @returns {HTMLElement}
- */
-export function createCardGrid(children) {
-  return createAutoGrid("sm", children);
-}
+ * Re-exports from @forwardimpact/libui/components/grid.
+ */
+
+export {
+  createAutoGrid,
+  createFixedGrid,
+  createSelectorGrid,
+  createDetailGrid,
+  createRadarGrid,
+  createStatsGrid,
+  createCardGrid,
+} from "@forwardimpact/libui/components/grid";