@forwardimpact/pathway 0.22.0 → 0.23.1

package/src/lib/error-boundary.js

@@ -1,70 +1,7 @@
 /**
  * Error boundary wrapper for page rendering
+ *
+ * Re-exports from @forwardimpact/libui/error-boundary.
  */
 
-import { renderNotFound, renderError } from "../components/error-page.js";
-import { NotFoundError, InvalidCombinationError } from "./errors.js";
-
-/**
- * @typedef {Object} ErrorBoundaryOptions
- * @property {(error: Error) => void} [onError] - Error callback for logging
- * @property {string} [backPath] - Default back path
- * @property {string} [backText] - Default back text
- * @property {(title: string, message: string) => void} [renderErrorFn] - Custom error renderer
- */
-
-/**
- * Wrap a render function with error handling
- * @param {Function} renderFn - Page render function
- * @param {ErrorBoundaryOptions} [options]
- * @returns {Function}
- */
-export function withErrorBoundary(renderFn, options = {}) {
-  const errorRenderer =
-    options.renderErrorFn ||
-    ((title, message) => {
-      renderError({
-        title,
-        message,
-        backPath: options.backPath || "/",
-        backText: options.backText || "← Back to Home",
-      });
-    });
-
-  return (...args) => {
-    try {
-      return renderFn(...args);
-    } catch (error) {
-      console.error("Page render error:", error);
-
-      options.onError?.(error);
-
-      if (error instanceof NotFoundError) {
-        if (options.renderErrorFn) {
-          errorRenderer(
-            `${error.entityType} Not Found`,
-            `No ${error.entityType.toLowerCase()} found with ID: ${error.entityId}`,
-          );
-        } else {
-          renderNotFound({
-            entityType: error.entityType,
-            entityId: error.entityId,
-            backPath: error.backPath,
-            backText: `← Back to ${error.entityType}s`,
-          });
-        }
-        return;
-      }
-
-      if (error instanceof InvalidCombinationError) {
-        errorRenderer("Invalid Combination", error.message);
-        return;
-      }
-
-      errorRenderer(
-        "Something Went Wrong",
-        error.message || "An unexpected error occurred.",
-      );
-    }
-  };
-}
+export { withErrorBoundary } from "@forwardimpact/libui/error-boundary";

package/src/lib/errors.js

@@ -1,49 +1,11 @@
 /**
  * Custom error types for the application
+ *
+ * Re-exports from @forwardimpact/libui/errors.
  */
 
-/**
- * Entity not found error
- */
-export class NotFoundError extends Error {
-  /**
-   * @param {string} entityType - Type of entity (e.g., 'Skill', 'Behaviour')
-   * @param {string} entityId - ID that was not found
-   * @param {string} backPath - Path to navigate back to
-   */
-  constructor(entityType, entityId, backPath) {
-    super(`${entityType} not found: ${entityId}`);
-    this.name = "NotFoundError";
-    this.entityType = entityType;
-    this.entityId = entityId;
-    this.backPath = backPath;
-  }
-}
-
-/**
- * Invalid combination error (e.g., invalid job configuration)
- */
-export class InvalidCombinationError extends Error {
-  /**
-   * @param {string} message - Error message
-   * @param {string} backPath - Path to navigate back to
-   */
-  constructor(message, backPath) {
-    super(message);
-    this.name = "InvalidCombinationError";
-    this.backPath = backPath;
-  }
-}
-
-/**
- * Data loading error
- */
-export class DataLoadError extends Error {
-  /**
-   * @param {string} message - Error message
-   */
-  constructor(message) {
-    super(message);
-    this.name = "DataLoadError";
-  }
-}
+export {
+  NotFoundError,
+  InvalidCombinationError,
+  DataLoadError,
+} from "@forwardimpact/libui/errors";

package/src/lib/job-cache.js

@@ -5,7 +5,7 @@
  * Provides consistent key generation and get-or-create pattern.
  */
 
-import { deriveJob } from "@forwardimpact/libpathway/derivation";
+import { deriveJob } from "@forwardimpact/libskill/derivation";
 
 /** @type {Map<string, Object>} */
 const cache = new Map();

package/src/lib/markdown.js

@@ -1,114 +1,7 @@
 /**
  * Simple Markdown to HTML converter
  *
- * Converts common markdown syntax to HTML. Designed for job descriptions
- * with headings, lists, bold text, and paragraphs.
+ * Re-exports from @forwardimpact/libui/markdown.
  */
 
-/**
- * Convert markdown text to HTML
- * @param {string} markdown - The markdown text to convert
- * @returns {string} HTML string
- */
-export function markdownToHtml(markdown) {
-  const lines = markdown.split("\n");
-  const htmlLines = [];
-  let inList = false;
-
-  for (let i = 0; i < lines.length; i++) {
-    let line = lines[i];
-
-    // Skip empty lines but close list if open
-    if (line.trim() === "") {
-      if (inList) {
-        htmlLines.push("</ul>");
-        inList = false;
-      }
-      continue;
-    }
-
-    // H1 heading
-    if (line.startsWith("# ")) {
-      if (inList) {
-        htmlLines.push("</ul>");
-        inList = false;
-      }
-      htmlLines.push(`<h1>${escapeHtml(line.slice(2))}</h1>`);
-      continue;
-    }
-
-    // H2 heading
-    if (line.startsWith("## ")) {
-      if (inList) {
-        htmlLines.push("</ul>");
-        inList = false;
-      }
-      htmlLines.push(`<h2>${escapeHtml(line.slice(3))}</h2>`);
-      continue;
-    }
-
-    // H3 heading
-    if (line.startsWith("### ")) {
-      if (inList) {
-        htmlLines.push("</ul>");
-        inList = false;
-      }
-      htmlLines.push(`<h3>${escapeHtml(line.slice(4))}</h3>`);
-      continue;
-    }
-
-    // List item
-    if (line.startsWith("- ")) {
-      if (!inList) {
-        htmlLines.push("<ul>");
-        inList = true;
-      }
-      const content = formatInlineMarkdown(line.slice(2));
-      htmlLines.push(`<li>${content}</li>`);
-      continue;
-    }
-
-    // Regular paragraph
-    if (inList) {
-      htmlLines.push("</ul>");
-      inList = false;
-    }
-    htmlLines.push(`<p>${formatInlineMarkdown(line)}</p>`);
-  }
-
-  // Close any open list
-  if (inList) {
-    htmlLines.push("</ul>");
-  }
-
-  return htmlLines.join("\n");
-}
-
-/**
- * Escape HTML special characters
- * @param {string} text - Text to escape
- * @returns {string} Escaped text
- */
-function escapeHtml(text) {
-  return text
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-}
-
-/**
- * Format inline markdown (bold text)
- * @param {string} text - Text to format
- * @returns {string} HTML formatted text
- */
-function formatInlineMarkdown(text) {
-  // First escape HTML
-  let result = escapeHtml(text);
-
-  // Convert **bold** to <strong>bold</strong>
-  result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-
-  return result;
-}
+export { markdownToHtml } from "@forwardimpact/libui/markdown";

package/src/lib/reactive.js

@@ -1,77 +1,11 @@
 /**
  * Reactive state utilities for local component state
+ *
+ * Re-exports from @forwardimpact/libui/reactive.
  */
 
-/**
- * @template T
- * @typedef {Object} Reactive
- * @property {() => T} get - Get current value
- * @property {(value: T) => void} set - Set new value
- * @property {(fn: (prev: T) => T) => void} update - Update value with function
- * @property {(fn: (value: T) => void) => () => void} subscribe - Subscribe to changes
- */
-
-/**
- * Create a reactive state container
- * @template T
- * @param {T} initial - Initial value
- * @returns {Reactive<T>}
- */
-export function createReactive(initial) {
-  let state = initial;
-  const subscribers = new Set();
-
-  return {
-    get: () => state,
-
-    set: (next) => {
-      state = next;
-      subscribers.forEach((fn) => fn(state));
-    },
-
-    update: (fn) => {
-      state = fn(state);
-      subscribers.forEach((sub) => sub(state));
-    },
-
-    subscribe: (fn) => {
-      subscribers.add(fn);
-      return () => subscribers.delete(fn);
-    },
-  };
-}
-
-/**
- * Create a computed value that updates when dependencies change
- * @template T
- * @param {() => T} compute - Computation function
- * @param {Reactive<*>[]} deps - Dependencies
- * @returns {Reactive<T>}
- */
-export function createComputed(compute, deps) {
-  const computed = createReactive(compute());
-
-  deps.forEach((dep) => {
-    dep.subscribe(() => {
-      computed.set(compute());
-    });
-  });
-
-  return computed;
-}
-
-/**
- * Bind a reactive value to an element attribute
- * @template T
- * @param {Reactive<T>} reactive - Reactive state
- * @param {HTMLElement} element - Element to bind
- * @param {string} attribute - Attribute name
- * @param {(value: T) => *} [transform] - Transform function
- */
-export function bind(reactive, element, attribute, transform = (v) => v) {
-  const update = (value) => {
-    element[attribute] = transform(value);
-  };
-  update(reactive.get());
-  reactive.subscribe(update);
-}
+export {
+  createReactive,
+  createComputed,
+  bind,
+} from "@forwardimpact/libui/reactive";

package/src/lib/render.js

@@ -1,209 +1,61 @@
 /**
  * DOM rendering utilities
+ *
+ * Re-exports generic utilities from @forwardimpact/libui/render
+ * and adds domain-specific display helpers.
  */
 
+export {
+  getContainer,
+  render,
+  createElement,
+  div,
+  span,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  a,
+  ul,
+  li,
+  table,
+  thead,
+  tbody,
+  tr,
+  th,
+  td,
+  pre,
+  code,
+  button,
+  input,
+  select,
+  option,
+  optgroup,
+  label,
+  form,
+  section,
+  article,
+  header,
+  footer,
+  nav,
+  main,
+  details,
+  summary,
+  heading1,
+  heading2,
+  heading3,
+  fragment,
+  showLoading,
+  showError,
+  formatLevel,
+} from "@forwardimpact/libui/render";
+
 import {
   SKILL_PROFICIENCY_ORDER,
   BEHAVIOUR_MATURITY_ORDER,
 } from "@forwardimpact/map/levels";
 
-/**
- * Get the main content container
- * @returns {HTMLElement}
- */
-export function getContainer() {
-  return document.getElementById("app-content");
-}
-
-/**
- * Clear and render content to the main container
- * @param {HTMLElement|string} content
- */
-export function render(content) {
-  const container = getContainer();
-  container.innerHTML = "";
-
-  if (typeof content === "string") {
-    container.innerHTML = content;
-  } else if (content instanceof HTMLElement) {
-    container.appendChild(content);
-  }
-}
-
-/**
- * Create an element with attributes and children
- * @param {string} tag - HTML tag name
- * @param {Object} [attrs] - Attributes and properties
- * @param {...(HTMLElement|string)} children - Child elements or text
- * @returns {HTMLElement}
- */
-export function createElement(tag, attrs = {}, ...children) {
-  const element = document.createElement(tag);
-
-  for (const [key, value] of Object.entries(attrs)) {
-    if (key === "className") {
-      element.className = value;
-    } else if (key === "style" && typeof value === "object") {
-      Object.assign(element.style, value);
-    } else if (key.startsWith("on") && typeof value === "function") {
-      element.addEventListener(key.slice(2).toLowerCase(), value);
-    } else if (key === "dataset" && typeof value === "object") {
-      Object.assign(element.dataset, value);
-    } else if (typeof value === "boolean") {
-      // Handle boolean attributes - only set if true, skip if false
-      if (value) {
-        element.setAttribute(key, "");
-      }
-    } else {
-      element.setAttribute(key, value);
-    }
-  }
-
-  for (const child of children) {
-    if (child == null || child === false) continue;
-    if (typeof child === "string" || typeof child === "number") {
-      element.appendChild(document.createTextNode(String(child)));
-    } else if (child instanceof HTMLElement) {
-      element.appendChild(child);
-    } else if (Array.isArray(child)) {
-      child.forEach((c) => {
-        if (c == null || c === false) return;
-        if (c instanceof HTMLElement) {
-          element.appendChild(c);
-        } else if (typeof c === "string" || typeof c === "number") {
-          element.appendChild(document.createTextNode(String(c)));
-        }
-      });
-    }
-  }
-
-  return element;
-}
-
-// Shorthand element creators
-export const div = (attrs, ...children) =>
-  createElement("div", attrs, ...children);
-export const span = (attrs, ...children) =>
-  createElement("span", attrs, ...children);
-export const h1 = (attrs, ...children) =>
-  createElement("h1", attrs, ...children);
-export const h2 = (attrs, ...children) =>
-  createElement("h2", attrs, ...children);
-export const h3 = (attrs, ...children) =>
-  createElement("h3", attrs, ...children);
-export const h4 = (attrs, ...children) =>
-  createElement("h4", attrs, ...children);
-export const p = (attrs, ...children) => createElement("p", attrs, ...children);
-export const a = (attrs, ...children) => createElement("a", attrs, ...children);
-export const ul = (attrs, ...children) =>
-  createElement("ul", attrs, ...children);
-export const li = (attrs, ...children) =>
-  createElement("li", attrs, ...children);
-export const table = (attrs, ...children) =>
-  createElement("table", attrs, ...children);
-export const thead = (attrs, ...children) =>
-  createElement("thead", attrs, ...children);
-export const tbody = (attrs, ...children) =>
-  createElement("tbody", attrs, ...children);
-export const tr = (attrs, ...children) =>
-  createElement("tr", attrs, ...children);
-export const th = (attrs, ...children) =>
-  createElement("th", attrs, ...children);
-export const td = (attrs, ...children) =>
-  createElement("td", attrs, ...children);
-export const pre = (attrs, ...children) =>
-  createElement("pre", attrs, ...children);
-export const code = (attrs, ...children) =>
-  createElement("code", attrs, ...children);
-export const button = (attrs, ...children) =>
-  createElement("button", attrs, ...children);
-export const input = (attrs) => createElement("input", attrs);
-export const select = (attrs, ...children) =>
-  createElement("select", attrs, ...children);
-export const option = (attrs, ...children) =>
-  createElement("option", attrs, ...children);
-export const optgroup = (attrs, ...children) =>
-  createElement("optgroup", attrs, ...children);
-export const label = (attrs, ...children) =>
-  createElement("label", attrs, ...children);
-export const form = (attrs, ...children) =>
-  createElement("form", attrs, ...children);
-export const section = (attrs, ...children) =>
-  createElement("section", attrs, ...children);
-export const article = (attrs, ...children) =>
-  createElement("article", attrs, ...children);
-export const header = (attrs, ...children) =>
-  createElement("header", attrs, ...children);
-export const footer = (attrs, ...children) =>
-  createElement("footer", attrs, ...children);
-export const nav = (attrs, ...children) =>
-  createElement("nav", attrs, ...children);
-export const main = (attrs, ...children) =>
-  createElement("main", attrs, ...children);
-export const details = (attrs, ...children) =>
-  createElement("details", attrs, ...children);
-export const summary = (attrs, ...children) =>
-  createElement("summary", attrs, ...children);
-
-/**
- * Semantic heading aliases that match heading levels
- * Use these instead of h1/h2/h3 for clarity in slides and formatters
- */
-export const heading1 = h1;
-export const heading2 = h2;
-export const heading3 = h3;
-
-/**
- * Create a fragment from multiple elements
- * @param {...HTMLElement} children
- * @returns {DocumentFragment}
- */
-export function fragment(...children) {
-  const frag = document.createDocumentFragment();
-  children.forEach((child) => {
-    if (child instanceof HTMLElement) {
-      frag.appendChild(child);
-    }
-  });
-  return frag;
-}
-
-/**
- * Show a loading state
- */
-export function showLoading() {
-  render(
-    div(
-      { className: "loading" },
-      div({ className: "loading-spinner" }),
-      p({}, "Loading..."),
-    ),
-  );
-}
-
-/**
- * Show an error message
- * @param {string} message
- */
-export function showError(message) {
-  render(div({ className: "error-message" }, h2({}, "Error"), p({}, message)));
-}
-
-/**
- * Format a skill proficiency or behaviour maturity for display
- * Handles both snake_case and camelCase
- * @param {string} value - The level/maturity value
- * @returns {string}
- */
-export function formatLevel(value) {
-  if (!value) return "";
-  // Insert space before uppercase letters (for camelCase), then handle snake_case
-  return value
-    .replace(/([a-z])([A-Z])/g, "$1 $2")
-    .replace(/_/g, " ")
-    .replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
 /**
  * Get the index for a skill proficiency (1-5)
  * @param {string} level