@forwardimpact/pathway 0.21.0 → 0.23.0

package/src/pages/interview-builder.js

@@ -17,7 +17,7 @@ export function renderInterviewPrep() {
     createBuilder({
       title: "Interview Prep",
       description:
-        "Select a discipline, track, and grade to generate tailored interview questions " +
+        "Select a discipline, track, and level to generate tailored interview questions " +
         "based on the role's skill requirements and expected behaviours.",
       formTitle: "Select Role",
       emptyPreviewText: "Select all three components to preview the interview.",
@@ -26,21 +26,21 @@ export function renderInterviewPrep() {
         prepareInterviewBuilderPreview({
           ...selection,
           behaviourCount: data.behaviours.length,
-          grades: data.grades,
+          levels: data.levels,
         }),
       detailPath: (sel) =>
         sel.track
-          ? `/interview/${sel.discipline}/${sel.grade}/${sel.track}`
-          : `/interview/${sel.discipline}/${sel.grade}`,
+          ? `/interview/${sel.discipline}/${sel.level}/${sel.track}`
+          : `/interview/${sel.discipline}/${sel.level}`,
       renderPreview: createStandardPreview,
       helpItems: [
         {
           label: "Role Selection",
-          text: "Choose a discipline, track, and grade to define the target role for the interview.",
+          text: "Choose a discipline, track, and level to define the target role for the interview.",
         },
         {
           label: "Skill Questions",
-          text: "Questions are generated based on the required skill levels for the role.",
+          text: "Questions are generated based on the required skill proficiencies for the role.",
         },
         {
           label: "Behaviour Questions",

package/src/pages/interview.js

@@ -32,18 +32,18 @@ import {
  * @param {Object} params - Route params
  */
 export function renderInterviewDetail(params) {
-  const { discipline: disciplineId, grade: gradeId, track: trackId } = params;
+  const { discipline: disciplineId, level: levelId, track: trackId } = params;
   const { data } = getState();
 
   // Find the components
   const discipline = data.disciplines.find((d) => d.id === disciplineId);
-  const grade = data.grades.find((g) => g.id === gradeId);
+  const level = data.levels.find((g) => g.id === levelId);
   const track = trackId ? data.tracks.find((t) => t.id === trackId) : null;
 
-  if (!discipline || !grade) {
+  if (!discipline || !level) {
     renderError({
       title: "Interview Not Found",
-      message: "Invalid combination. Discipline or grade not found.",
+      message: "Invalid combination. Discipline or level not found.",
       backPath: "/interview-prep",
       backText: "← Back to Interview Prep",
     });
@@ -64,7 +64,7 @@ export function renderInterviewDetail(params) {
   // Use formatter shared module to get all interview types
   const interviewsView = prepareAllInterviews({
     discipline,
-    grade,
+    level,
     track,
     skills: data.skills,
     behaviours: data.behaviours,
@@ -74,7 +74,7 @@ export function renderInterviewDetail(params) {
   if (!interviewsView) {
     renderError({
       title: "Invalid Combination",
-      message: "This discipline, track, and grade combination is not valid.",
+      message: "This discipline, track, and level combination is not valid.",
       backPath: "/interview-prep",
       backText: "← Back to Interview Prep",
     });
@@ -100,8 +100,8 @@ export function renderInterviewDetail(params) {
         ),
         " × ",
         a(
-          { href: `#/grade/${interviewsView.gradeId}` },
-          interviewsView.gradeId,
+          { href: `#/level/${interviewsView.levelId}` },
+          interviewsView.levelId,
         ),
         " × ",
         a(

package/src/pages/job-builder.js

@@ -5,7 +5,7 @@
 import { render } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { createBuilder, createStandardPreview } from "../components/builder.js";
-import { prepareJobBuilderPreview } from "@forwardimpact/libpathway/job";
+import { prepareJobBuilderPreview } from "@forwardimpact/libskill/job";
 
 /**
  * Render job builder page
@@ -17,7 +17,7 @@ export function renderJobBuilder() {
     createBuilder({
       title: "Job Builder",
       description:
-        "Combine a discipline, track, and grade to generate a complete job definition " +
+        "Combine a discipline, track, and level to generate a complete job definition " +
         "with skill matrix and behaviour profile.",
       formTitle: "Select Components",
       emptyPreviewText:
@@ -27,12 +27,12 @@ export function renderJobBuilder() {
         prepareJobBuilderPreview({
           ...selection,
           behaviourCount: data.behaviours.length,
-          grades: data.grades,
+          levels: data.levels,
         }),
       detailPath: (sel) =>
         sel.track
-          ? `/job/${sel.discipline}/${sel.grade}/${sel.track}`
-          : `/job/${sel.discipline}/${sel.grade}`,
+          ? `/job/${sel.discipline}/${sel.level}/${sel.track}`
+          : `/job/${sel.discipline}/${sel.level}`,
       renderPreview: createStandardPreview,
       helpItems: [
         {
@@ -40,8 +40,8 @@ export function renderJobBuilder() {
           text: "Defines the T-shaped skill profile with primary, secondary, and broad skills.",
         },
         {
-          label: "Grade",
-          text: "Sets base skill levels and behaviour maturity expectations for career level.",
+          label: "Level",
+          text: "Sets base skill proficiencies and behaviour maturity expectations for career level.",
         },
         {
           label: "Track",

package/src/pages/job.js

@@ -5,7 +5,7 @@
 import { render, div, p } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { renderError } from "../components/error-page.js";
-import { prepareJobDetail } from "@forwardimpact/libpathway/job";
+import { prepareJobDetail } from "@forwardimpact/libskill/job";
 import { jobToDOM } from "../formatters/job/dom.js";
 
 /** @type {string|null} Cached job template */
@@ -28,18 +28,18 @@ async function getJobTemplate() {
  * @param {Object} params - Route params
  */
 export async function renderJobDetail(params) {
-  const { discipline: disciplineId, grade: gradeId, track: trackId } = params;
+  const { discipline: disciplineId, level: levelId, track: trackId } = params;
   const { data } = getState();
 
   // Find the components
   const discipline = data.disciplines.find((d) => d.id === disciplineId);
-  const grade = data.grades.find((g) => g.id === gradeId);
+  const level = data.levels.find((g) => g.id === levelId);
   const track = trackId ? data.tracks.find((t) => t.id === trackId) : null;
 
-  if (!discipline || !grade) {
+  if (!discipline || !level) {
     renderError({
       title: "Job Not Found",
-      message: "Invalid job combination. Discipline or grade not found.",
+      message: "Invalid job combination. Discipline or level not found.",
       backPath: "/job-builder",
       backText: "← Back to Job Builder",
     });
@@ -60,7 +60,7 @@ export async function renderJobDetail(params) {
   // Use formatter shared module to get job detail view
   const jobView = prepareJobDetail({
     discipline,
-    grade,
+    level,
     track,
     skills: data.skills,
     behaviours: data.behaviours,
@@ -72,7 +72,7 @@ export async function renderJobDetail(params) {
   if (!jobView) {
     renderError({
       title: "Invalid Combination",
-      message: "This discipline, track, and grade combination is not valid.",
+      message: "This discipline, track, and level combination is not valid.",
       backPath: "/job-builder",
       backText: "← Back to Job Builder",
     });
@@ -89,6 +89,6 @@ export async function renderJobDetail(params) {
 
   // Load template and format
   const jobTemplate = await getJobTemplate();
-  const page = jobToDOM(jobView, { discipline, grade, track, jobTemplate });
+  const page = jobToDOM(jobView, { discipline, level, track, jobTemplate });
   render(page);
 }

package/src/pages/landing.js

@@ -105,9 +105,9 @@ export function renderLanding() {
         href: "/discipline",
       }),
       createStatCard({
-        value: data.grades.length,
-        label: "Grades",
-        href: "/grade",
+        value: data.levels.length,
+        label: "Levels",
+        href: "/level",
       }),
       createStatCard({
         value: data.tracks.length,
@@ -169,9 +169,9 @@ export function renderLanding() {
           "/discipline",
         ),
         createQuickLinkCard(
-          `${getConceptEmoji(framework, "grade")} ${framework.entityDefinitions.grade.title}`,
-          `${data.grades.length} ${framework.entityDefinitions.grade.title.toLowerCase()} — ${framework.entityDefinitions.grade.description.trim().split("\n")[0]}`,
-          "/grade",
+          `${getConceptEmoji(framework, "level")} ${framework.entityDefinitions.level.title}`,
+          `${data.levels.length} ${framework.entityDefinitions.level.title.toLowerCase()} — ${framework.entityDefinitions.level.description.trim().split("\n")[0]}`,
+          "/level",
         ),
         createQuickLinkCard(
           `${getConceptEmoji(framework, "track")} ${framework.entityDefinitions.track.title}`,
@@ -220,7 +220,7 @@ export function renderLanding() {
           h2({}, "🔨 Build a Job Definition"),
           p(
             {},
-            "Combine a discipline, track, and grade to generate a complete job definition " +
+            "Combine a discipline, track, and level to generate a complete job definition " +
               "with skill matrices and behaviour profiles.",
           ),
           div(
@@ -256,7 +256,7 @@ export function renderLanding() {
           h2({}, "📈 Plan Your Career"),
           p(
             {},
-            "Visualize your progression to the next grade and compare expectations " +
+            "Visualize your progression to the next level and compare expectations " +
               "across different tracks to plan your career development.",
           ),
           div(

package/src/pages/level.js

@@ -0,0 +1,122 @@
+/**
+ * Levels pages
+ */
+
+import { render, div, h1, h3, p, formatLevel } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createBadge } from "../components/card.js";
+import { renderNotFound } from "../components/error-page.js";
+import { prepareLevelsList } from "../formatters/level/shared.js";
+import { levelToDOM } from "../formatters/level/dom.js";
+import { getConceptEmoji } from "@forwardimpact/map/levels";
+
+/**
+ * Render levels list page
+ */
+export function renderLevelsList() {
+  const { data } = getState();
+  const { framework } = data;
+  const levelEmoji = getConceptEmoji(framework, "level");
+
+  // Transform data for list view
+  const { items } = prepareLevelsList(data.levels);
+
+  const page = div(
+    { className: "levels-page" },
+    // Header
+    div(
+      { className: "page-header" },
+      h1(
+        { className: "page-title" },
+        `${levelEmoji} ${framework.entityDefinitions.level.title}`,
+      ),
+      p(
+        { className: "page-description" },
+        framework.entityDefinitions.level.description.trim(),
+      ),
+    ),
+
+    // Levels timeline
+    div(
+      { className: "levels-timeline" },
+      ...items.map((level) => createLevelTimelineItem(level)),
+    ),
+  );
+
+  render(page);
+}
+
+/**
+ * Create a level timeline item
+ * @param {Object} level
+ * @returns {HTMLElement}
+ */
+function createLevelTimelineItem(level) {
+  const item = div(
+    { className: "level-timeline-item" },
+    div({ className: "level-level-marker" }, String(level.ordinalRank)),
+    div(
+      { className: "level-timeline-content card card-clickable" },
+      div(
+        { className: "card-header" },
+        h3({ className: "card-title" }, level.displayName),
+        createBadge(level.id, "default"),
+      ),
+      level.typicalExperienceRange
+        ? p(
+            { className: "text-muted", style: "margin: 0.25rem 0" },
+            `${level.typicalExperienceRange} experience`,
+          )
+        : null,
+      div(
+        { className: "card-meta", style: "margin-top: 0.5rem" },
+        createBadge(
+          `Primary: ${formatLevel(level.baseSkillProficiencies?.primary)}`,
+          "primary",
+        ),
+        createBadge(
+          `Secondary: ${formatLevel(level.baseSkillProficiencies?.secondary)}`,
+          "secondary",
+        ),
+        createBadge(
+          `Broad: ${formatLevel(level.baseSkillProficiencies?.broad)}`,
+          "broad",
+        ),
+      ),
+      level.scope
+        ? p(
+            { className: "card-description", style: "margin-top: 0.75rem" },
+            `Scope: ${level.scope}`,
+          )
+        : null,
+    ),
+  );
+
+  item.querySelector(".card").addEventListener("click", () => {
+    window.location.hash = `/level/${level.id}`;
+  });
+
+  return item;
+}
+
+/**
+ * Render level detail page
+ * @param {Object} params - Route params
+ */
+export function renderLevelDetail(params) {
+  const { data } = getState();
+  const level = data.levels.find((g) => g.id === params.id);
+
+  if (!level) {
+    renderNotFound({
+      entityType: "Level",
+      entityId: params.id,
+      backPath: "/level",
+      backText: "← Back to Levels",
+    });
+    return;
+  }
+
+  // Use DOM formatter - it handles transformation internally
+  render(levelToDOM(level, { framework: data.framework }));
+}

package/src/pages/progress-builder.js

@@ -18,7 +18,7 @@ export function renderCareerProgress() {
       title: "Career Progress",
       description:
         "Select your current role to visualize career progression. See what skills and behaviours " +
-        "change as you advance to the next grade, or compare expectations across different tracks.",
+        "change as you advance to the next level, or compare expectations across different tracks.",
       formTitle: "Select Your Current Role",
       emptyPreviewText:
         "Select all three components to preview progression paths.",
@@ -26,25 +26,25 @@ export function renderCareerProgress() {
       previewPresenter: (selection) =>
         prepareCareerProgressPreview({
           ...selection,
-          grades: data.grades,
+          levels: data.levels,
           tracks: data.tracks,
         }),
       detailPath: (sel) =>
         sel.track
-          ? `/progress/${sel.discipline}/${sel.grade}/${sel.track}`
-          : `/progress/${sel.discipline}/${sel.grade}`,
+          ? `/progress/${sel.discipline}/${sel.level}/${sel.track}`
+          : `/progress/${sel.discipline}/${sel.level}`,
       renderPreview: createProgressPreview,
       labels: {
-        grade: "Current Grade",
+        level: "Current Level",
       },
       helpItems: [
         {
-          label: "📈 Grade Progression",
-          text: "See exactly which skills and behaviours need to grow to advance to the next grade level.",
+          label: "📈 Level Progression",
+          text: "See exactly which skills and behaviours need to grow to advance to the next level rank.",
         },
         {
           label: "🔀 Track Comparison",
-          text: "Compare how expectations differ across tracks at the same grade - useful for exploring lateral moves.",
+          text: "Compare how expectations differ across tracks at the same level - useful for exploring lateral moves.",
         },
         {
           label: "🎯 Development Focus",