patram 0.11.0 → 0.12.0

package/lib/output/rich-source/render.js

@@ -162,7 +162,7 @@ async function renderBlockNode(node, render_state, indent_level) {
   }
 
   if (node_tag === 'table') {
-    return renderTable(node_children);
+    return renderTable(node_children, render_state);
   }
 
   return renderInlineNodes(node_children, render_state);
@@ -252,6 +252,7 @@ async function renderListBlock(
   /** @type {ComarkElement | null} */
   let previous_item = null;
   let rendered_item_count = 0;
+  const ordered_marker_width = getOrderedListMarkerWidth(nodes_type, nodes);
 
   for (let item_index = 0; item_index < nodes.length; item_index += 1) {
     const node = nodes[item_index];
@@ -276,6 +277,7 @@ async function renderListBlock(
         node,
         item_index + 1,
         nodes_type === 'ol',
+        ordered_marker_width,
         render_state,
         indent_level,
       ),
@@ -291,6 +293,7 @@ async function renderListBlock(
  * @param {ComarkElement} node
  * @param {number} item_number
  * @param {boolean} is_ordered
+ * @param {number} ordered_marker_width
  * @param {RichSourceRenderState} render_state
  * @param {number} indent_level
  * @returns {Promise<string>}
@@ -299,10 +302,11 @@ async function renderListItem(
   node,
   item_number,
   is_ordered,
+  ordered_marker_width,
   render_state,
   indent_level,
 ) {
-  const item_prefix = `${'  '.repeat(indent_level)}${is_ordered ? `${item_number}.` : '•'} `;
+  const item_prefix = `${'  '.repeat(indent_level)}${renderListMarker(item_number, is_ordered, ordered_marker_width)} `;
   const followup_prefix = '  '.repeat(indent_level);
   const { block_nodes, lead_text } = collectListItemParts(node, render_state);
 
@@ -368,36 +372,50 @@ async function renderBlockquote(nodes, render_state, indent_level) {
 
 /**
  * @param {ComarkNode[]} nodes
+ * @param {RichSourceRenderState} render_state
  * @returns {string}
  */
-function renderTable(nodes) {
-  const table_rows = extractTableRows(nodes);
+function renderTable(nodes, render_state) {
+  const table_rows = extractTableRows(nodes, render_state);
 
   if (table_rows.length === 0) {
     return '';
   }
 
-  /** @type {number[]} */
-  const column_widths = [];
-
-  for (const row of table_rows) {
-    for (let column_index = 0; column_index < row.length; column_index += 1) {
-      const cell_text = row[column_index];
-      const current_width = column_widths[column_index] ?? 0;
-
-      column_widths[column_index] = Math.max(current_width, cell_text.length);
-    }
-  }
+  const { column_alignments, column_widths } = measureTableColumns(table_rows);
 
   /** @type {string[]} */
-  const rendered_lines = [formatTableRow(table_rows[0], column_widths)];
-
-  rendered_lines.push(formatTableDivider(column_widths));
+  const rendered_lines = [
+    formatTableBorderLine('┌', '┬', '┐', column_widths, render_state.ansi),
+    formatTableRow(
+      table_rows[0],
+      column_widths,
+      column_alignments,
+      render_state.ansi,
+    ),
+  ];
+
+  if (table_rows.length > 1) {
+    rendered_lines.push(
+      formatTableBorderLine('├', '┼', '┤', column_widths, render_state.ansi),
+    );
+  }
 
   for (let row_index = 1; row_index < table_rows.length; row_index += 1) {
-    rendered_lines.push(formatTableRow(table_rows[row_index], column_widths));
+    rendered_lines.push(
+      formatTableRow(
+        table_rows[row_index],
+        column_widths,
+        column_alignments,
+        render_state.ansi,
+      ),
+    );
   }
 
+  rendered_lines.push(
+    formatTableBorderLine('└', '┴', '┘', column_widths, render_state.ansi),
+  );
+
   return rendered_lines.join('\n');
 }
 
@@ -702,10 +720,11 @@ function renderCodeBlock(
 
 /**
  * @param {ComarkNode[]} nodes
- * @returns {string[][]}
+ * @param {RichSourceRenderState} render_state
+ * @returns {Array<{ cells: Array<{ align: 'center' | 'left' | 'right', text: string }>, is_header: boolean }>}
  */
-function extractTableRows(nodes) {
-  /** @type {string[][]} */
+function extractTableRows(nodes, render_state) {
+  /** @type {Array<{ cells: Array<{ align: 'center' | 'left' | 'right', text: string }>, is_header: boolean }>} */
   const table_rows = [];
 
   for (const node of nodes) {
@@ -724,7 +743,10 @@ function extractTableRows(nodes) {
         continue;
       }
 
-      table_rows.push(extractTableRowCells(row_node));
+      table_rows.push({
+        cells: extractTableRowCells(row_node, render_state),
+        is_header: node_tag === 'thead',
+      });
     }
   }
 
@@ -732,11 +754,50 @@ function extractTableRows(nodes) {
 }
 
 /**
- * @param {string[]} row_cells
+ * @param {Array<{ cells: Array<{ align: 'center' | 'left' | 'right', text: string }>, is_header: boolean }>} table_rows
+ * @returns {{ column_alignments: ('center' | 'left' | 'right')[], column_widths: number[] }}
+ */
+function measureTableColumns(table_rows) {
+  /** @type {number[]} */
+  const column_widths = [];
+  /** @type {('center' | 'left' | 'right')[]} */
+  const column_alignments = [];
+
+  for (const row of table_rows) {
+    for (
+      let column_index = 0;
+      column_index < row.cells.length;
+      column_index += 1
+    ) {
+      const table_cell = row.cells[column_index];
+      const cell_text = table_cell?.text ?? '';
+      const current_width = column_widths[column_index] ?? 0;
+
+      column_widths[column_index] = Math.max(
+        current_width,
+        stringWidth(cell_text),
+      );
+
+      if (!column_alignments[column_index]) {
+        column_alignments[column_index] = table_cell?.align ?? 'left';
+      }
+    }
+  }
+
+  return {
+    column_alignments,
+    column_widths,
+  };
+}
+
+/**
+ * @param {{ cells: Array<{ align: 'center' | 'left' | 'right', text: string }>, is_header: boolean }} row
  * @param {number[]} column_widths
+ * @param {('center' | 'left' | 'right')[]} column_alignments
+ * @param {Ansis} ansi
  * @returns {string}
  */
-function formatTableRow(row_cells, column_widths) {
+function formatTableRow(row, column_widths, column_alignments, ansi) {
   /** @type {string[]} */
   const padded_cells = [];
 
@@ -745,27 +806,47 @@ function formatTableRow(row_cells, column_widths) {
     column_index < column_widths.length;
     column_index += 1
   ) {
-    const cell_text = row_cells[column_index] ?? '';
+    const table_cell = row.cells[column_index] ?? {
+      align: column_alignments[column_index] ?? 'left',
+      text: '',
+    };
+    const aligned_text = alignTableCell(
+      table_cell.text,
+      column_widths[column_index],
+      table_cell.align ?? column_alignments[column_index] ?? 'left',
+    );
 
-    padded_cells.push(cell_text.padEnd(column_widths[column_index], ' '));
+    padded_cells.push(row.is_header ? ansi.red(aligned_text) : aligned_text);
   }
 
-  return `| ${padded_cells.join(' | ')} |`;
+  return `${ansi.gray('│')} ${padded_cells.join(ansi.gray(' │ '))} ${ansi.gray('│')}`;
 }
 
 /**
+ * @param {'┌' | '├' | '└'} left_border
+ * @param {'┬' | '┼' | '┴'} join_border
+ * @param {'┐' | '┤' | '┘'} right_border
  * @param {number[]} column_widths
+ * @param {Ansis} ansi
  * @returns {string}
  */
-function formatTableDivider(column_widths) {
+function formatTableBorderLine(
+  left_border,
+  join_border,
+  right_border,
+  column_widths,
+  ansi,
+) {
   /** @type {string[]} */
   const divider_cells = [];
 
   for (const column_width of column_widths) {
-    divider_cells.push('-'.repeat(column_width));
+    divider_cells.push('─'.repeat(column_width + 2));
   }
 
-  return `|-${divider_cells.join('-|-')}-|`;
+  return ansi.gray(
+    `${left_border}${divider_cells.join(join_border)}${right_border}`,
+  );
 }
 
 /**
@@ -803,10 +884,11 @@ function renderInlineCode(nodes, ansi) {
 
 /**
  * @param {ComarkElement} row_node
- * @returns {string[]}
+ * @param {RichSourceRenderState} render_state
+ * @returns {Array<{ align: 'center' | 'left' | 'right', text: string }>}
  */
-function extractTableRowCells(row_node) {
-  /** @type {string[]} */
+function extractTableRowCells(row_node, render_state) {
+  /** @type {Array<{ align: 'center' | 'left' | 'right', text: string }>} */
   const row_cells = [];
 
   for (const cell_node of getElementChildren(row_node)) {
@@ -814,12 +896,53 @@ function extractTableRowCells(row_node) {
       continue;
     }
 
-    row_cells.push(extractInlineText(getElementChildren(cell_node)));
+    row_cells.push({
+      align: getTableCellAlignment(cell_node),
+      text: renderInlineNodes(getElementChildren(cell_node), render_state),
+    });
   }
 
   return row_cells;
 }
 
+/**
+ * @param {string} text
+ * @param {number} content_width
+ * @param {'center' | 'left' | 'right'} alignment
+ * @returns {string}
+ */
+function alignTableCell(text, content_width, alignment) {
+  const current_width = stringWidth(text);
+  const missing_width = Math.max(content_width - current_width, 0);
+
+  if (alignment === 'right') {
+    return `${' '.repeat(missing_width)}${text}`;
+  }
+
+  if (alignment === 'center') {
+    const left_padding = Math.floor(missing_width / 2);
+    const right_padding = missing_width - left_padding;
+
+    return `${' '.repeat(left_padding)}${text}${' '.repeat(right_padding)}`;
+  }
+
+  return `${text}${' '.repeat(missing_width)}`;
+}
+
+/**
+ * @param {ComarkElement} node
+ * @returns {'center' | 'left' | 'right'}
+ */
+function getTableCellAlignment(node) {
+  const node_props = getElementProps(node);
+
+  if (node_props.align === 'center' || node_props.align === 'right') {
+    return node_props.align;
+  }
+
+  return 'left';
+}
+
 /**
  * @param {ComarkElement} node
  * @param {RichSourceRenderState} render_state
@@ -1084,6 +1207,41 @@ function renderParagraphLines(text, prefix) {
   return renderWrappedPrefixedLines(text, prefix, prefix, prefix);
 }
 
+/**
+ * @param {'ol' | 'ul'} nodes_type
+ * @param {ComarkNode[]} nodes
+ * @returns {number}
+ */
+function getOrderedListMarkerWidth(nodes_type, nodes) {
+  if (nodes_type !== 'ol') {
+    return 0;
+  }
+
+  let item_count = 0;
+
+  for (const node of nodes) {
+    if (typeof node !== 'string' && getElementTag(node) === 'li') {
+      item_count += 1;
+    }
+  }
+
+  return item_count === 0 ? 0 : `${item_count}.`.length;
+}
+
+/**
+ * @param {number} item_number
+ * @param {boolean} is_ordered
+ * @param {number} ordered_marker_width
+ * @returns {string}
+ */
+function renderListMarker(item_number, is_ordered, ordered_marker_width) {
+  if (!is_ordered) {
+    return '•';
+  }
+
+  return `${item_number}.`.padStart(ordered_marker_width, ' ');
+}
+
 /**
  * @param {string} value
  * @param {number} indent_level

package/lib/output/show-document.js

@@ -9,6 +9,11 @@ import { readFile } from 'node:fs/promises';
 import { posix, relative, resolve } from 'node:path';
 
 import { resolveDocumentNodeId } from '../graph/build-graph-identity.js';
+import {
+  getGraphNodeClassName,
+  getGraphNodeMetadataValue,
+  getGraphNodePath,
+} from '../graph/graph-node.js';
 import { inspectReverseReferences } from '../graph/inspect-reverse-references.js';
 import { parseSourceFile } from '../parse/parse-claims.js';
 
@@ -18,11 +23,11 @@ import { parseSourceFile } from '../parse/parse-claims.js';
  * Loads one source file, resolves indexed links, and builds the shared show
  * output model.
  *
- * Kind: output
- * Status: active
- * Tracked in: ../../docs/plans/v0/source-anchor-dogfooding.md
- * Decided by: ../../docs/decisions/show-output.md
- * Decided by: ../../docs/decisions/source-rendering.md
+ * kind: output
+ * status: active
+ * tracked_in: ../../docs/plans/v0/source-anchor-dogfooding.md
+ * decided_by: ../../docs/decisions/show-output.md
+ * decided_by: ../../docs/decisions/source-rendering.md
  * @patram
  * @see {@link ./render-output-view.js}
  * @see {@link ../../docs/decisions/show-output.md}
@@ -96,7 +101,7 @@ export async function loadShowOutput(
       source_text,
       parse_result.claims,
       graph,
-      graph.document_node_ids,
+      graph.document_path_ids,
       graph.nodes,
     ),
   };
@@ -107,7 +112,7 @@ export async function loadShowOutput(
  * @param {string} source_text
  * @param {PatramClaim[]} claims
  * @param {BuildGraphResult} graph
- * @param {import('../graph/build-graph.types.ts').BuildGraphResult['document_node_ids']} document_node_ids
+ * @param {import('../graph/build-graph.types.ts').BuildGraphResult['document_path_ids']} document_path_ids
  * @param {Record<string, GraphNode>} graph_nodes
  * @returns {{ incoming_summary: Record<string, number>, path: string, rendered_source: string, resolved_links: Array<{ label: string, reference: number, target: { kind?: string, path: string, status?: string, title: string } }>, source: string }}
  */
@@ -116,7 +121,7 @@ function createShowOutput(
   source_text,
   claims,
   graph,
-  document_node_ids,
+  document_path_ids,
   graph_nodes,
 ) {
   const link_claims = claims.filter(isResolvedLinkClaim);
@@ -126,7 +131,7 @@ function createShowOutput(
       source_file_path,
       claim,
       claim_index + 1,
-      document_node_ids,
+      document_path_ids,
       graph_nodes,
     ),
   );
@@ -219,7 +224,7 @@ function renderResolvedSourceLine(
  * @param {string} source_file_path
  * @param {PatramClaim} claim
  * @param {number} reference
- * @param {import('../graph/build-graph.types.ts').BuildGraphResult['document_node_ids']} document_node_ids
+ * @param {import('../graph/build-graph.types.ts').BuildGraphResult['document_path_ids']} document_path_ids
  * @param {Record<string, GraphNode>} graph_nodes
  * @returns {{ label: string, reference: number, target: { kind?: string, path: string, status?: string, title: string } }}
  */
@@ -227,7 +232,7 @@ function createResolvedLinkSummary(
   source_file_path,
   claim,
   reference,
-  document_node_ids,
+  document_path_ids,
   graph_nodes,
 ) {
   const claim_value = getLinkClaimValue(claim);
@@ -236,7 +241,7 @@ function createResolvedLinkSummary(
     claim_value.target,
   );
   const target_node =
-    graph_nodes[resolveDocumentNodeId(document_node_ids, target_path)];
+    graph_nodes[resolveDocumentNodeId(document_path_ids, target_path)];
 
   return {
     label: claim_value.text,
@@ -284,10 +289,14 @@ function createResolvedLinkTarget(target_node, target_path, fallback_title) {
   /** @type {{ kind?: string, path: string, status?: string, title: string }} */
   const resolved_target = {
     path: getResolvedLinkTargetPath(target_node, target_path),
-    title: getScalarGraphField(target_node?.title) ?? fallback_title,
+    title:
+      getScalarGraphField(getGraphNodeMetadataValue(target_node, 'title')) ??
+      fallback_title,
   };
   const target_kind = getResolvedLinkTargetKind(target_node);
-  const target_status = getScalarGraphField(target_node?.status);
+  const target_status = getScalarGraphField(
+    getGraphNodeMetadataValue(target_node, 'status'),
+  );
 
   if (target_kind) {
     resolved_target.kind = target_kind;
@@ -305,7 +314,7 @@ function createResolvedLinkTarget(target_node, target_path, fallback_title) {
  * @returns {string | undefined}
  */
 function getResolvedLinkTargetKind(target_node) {
-  return getScalarGraphField(target_node?.$class ?? target_node?.kind);
+  return getScalarGraphField(getGraphNodeClassName(target_node));
 }
 
 /**
@@ -314,9 +323,7 @@ function getResolvedLinkTargetKind(target_node) {
  * @returns {string}
  */
 function getResolvedLinkTargetPath(target_node, target_path) {
-  return (
-    getScalarGraphField(target_node?.$path ?? target_node?.path) ?? target_path
-  );
+  return getScalarGraphField(getGraphNodePath(target_node)) ?? target_path;
 }
 
 /**