@jarenjs/calc 0.34.0

package/src/render/error.js

@@ -0,0 +1,25 @@
+//@ts-check
+/**
+ * @file The error vnode. The render path is total — it emits this
+ * instead of throwing. A small standalone `<svg>` that
+ * states the parse/eval error with its line/column when known.
+ */
+
+import { svgRoot, textAt } from '@jarenjs/view/helpers';
+import { createTheme } from '../theme.js';
+
+/**
+ * @param {{ message: string, line?: number, column?: number }} error
+ * @param {{ theme?: any, width?: number, height?: number }} [options]
+ * @returns {any}
+ */
+export function errorToVnode(error, options = {}) {
+  const theme = createTheme(options.theme ?? 'default');
+  const width = options.width ?? 480;
+  const height = options.height ?? 80;
+  const where = error.line !== undefined ? ` (line ${error.line}, col ${error.column})` : '';
+  return svgRoot('calc-plot', width, height, theme, [
+    textAt(12, 28, 'Expression error', 13, { fill: theme.tokens.errorText, 'font-weight': 'bold', class: 'calc-error-title' }),
+    textAt(12, 48, String(error.message) + where, 11, { fill: theme.tokens.text, class: 'calc-error-msg' }),
+  ], 'err:' + String(error.message));
+}

package/src/theme.js

@@ -0,0 +1,76 @@
+//@ts-check
+/**
+ * @file Plot theme tokens (mirrors `@jarenjs/mermaid`'s theme). Resolves a
+ * name (or overrides) into concrete colors (written as SVG presentation
+ * attributes so `toSvgString()` is a valid standalone image) plus a
+ * matching `--calc-*` CSS variable set stamped inline on the root `<svg>`.
+ * The inline stamp beats every stylesheet rule, so the stamp itself is the
+ * re-theming hook: the `'host'` theme stamps linked variables as
+ * `var(--<host-token>, <concrete>)` (see `HOST_VARS`), making plots follow
+ * a host's light/dark tokens live without a re-render. Only the token
+ * tables live here; the resolution mechanics are shared
+ * (`@jarenjs/view/helpers` `resolveTheme`).
+ */
+
+import { resolveTheme } from '@jarenjs/view/helpers';
+
+/** @type {Record<string, Record<string, string>>} */
+const THEMES = {
+  default: {
+    background: 'transparent',
+    axis: '#64748b',
+    grid: '#e2e8f0',
+    text: '#334155',
+    series1: '#2563eb',
+    series2: '#0891b2',
+    series3: '#d97706',
+    surfaceLo: '#1e3a8a',
+    surfaceHi: '#93c5fd',
+    wire: '#172554',
+    errorText: '#b91c1c',
+    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+  },
+  dark: {
+    background: 'transparent',
+    axis: '#94a3b8',
+    grid: '#334155',
+    text: '#cbd5e1',
+    series1: '#60a5fa',
+    series2: '#22d3ee',
+    series3: '#fbbf24',
+    surfaceLo: '#1e40af',
+    surfaceHi: '#bfdbfe',
+    wire: '#0b1020',
+    errorText: '#f87171',
+    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+  },
+};
+
+/**
+ * Host custom-property links for the `'host'` theme: token key → the host
+ * token it should follow (the site token vocabulary, docs/DESIGN.md §2). The
+ * default theme's concrete colors remain as `var()` fallbacks, so the
+ * same SVG is standalone-valid outside any host. Tokens with no host
+ * equivalent (series2, the 3-D surface shades, wire) stay concrete.
+ * @type {Record<string, string>}
+ */
+export const HOST_VARS = {
+  axis: '--muted',
+  grid: '--border',
+  text: '--fg',
+  series1: '--accent',
+  series3: '--warn',
+  errorText: '--fail',
+};
+
+/**
+ * Resolve a theme name or override object. The name `'host'` resolves the
+ * default tokens linked to the host token vocabulary via {@link HOST_VARS}.
+ * @param {string | Record<string, any>} [nameOrOverrides]
+ * @returns {{ name: string, tokens: Record<string, string>, cssVars: Record<string, string> }}
+ */
+export function createTheme(nameOrOverrides = 'default') {
+  return resolveTheme(THEMES, 'calc', nameOrOverrides, HOST_VARS);
+}
+
+export { THEMES };

package/src/to-expr.js

@@ -0,0 +1,84 @@
+//@ts-check
+/**
+ * @file `toExpression(ast)` — the canonical printer. It is a **round-trip
+ * fixed point**: `parseExpression(toExpression(ast))` deep-equals
+ * `ast` for every AST the parser can produce. Parentheses are emitted
+ * from operator precedence/associativity only where removing them would
+ * change the parse; numbers print in canonical decimal (the AST never
+ * carried their original radix).
+ */
+
+/** Printing precedence per node, matching the grammar in parser/index.js. */
+const PREC = {
+  '|': 10, '&': 20, '<<': 30, '>>': 30,
+  '+': 40, '-': 40, '*': 50, '/': 50,
+  unary: 70, '^': 80, postfix: 90, atom: 100,
+};
+
+/**
+ * @param {any} node
+ * @returns {number}
+ */
+function precOf(node) {
+  switch (node.type) {
+    case 'binary': return PREC[node.op];
+    case 'unary': return PREC.unary;
+    case 'postfix': return PREC.postfix;
+    default: return PREC.atom;
+  }
+}
+
+/**
+ * Print a number canonically (finite → `String`, non-finite → the named
+ * constants the parser recognizes).
+ * @param {number} v
+ * @returns {string}
+ */
+function printNum(v) {
+  if (Number.isNaN(v)) return 'nan';
+  if (v === Infinity) return 'inf';
+  if (v === -Infinity) return '-inf';
+  return String(v);
+}
+
+/**
+ * @param {any} node
+ * @returns {string}
+ */
+export function toExpression(node) {
+  if (node === null || typeof node !== 'object') {
+    throw new TypeError('toExpression: not an AST node');
+  }
+  switch (node.type) {
+    case 'num': return printNum(node.value);
+    case 'const': return node.name;
+    case 'var': return node.name;
+    case 'call':
+      return `${node.name}(${node.args.map(toExpression).join(', ')})`;
+    case 'unary': {
+      const argP = precOf(node.arg);
+      const inner = toExpression(node.arg);
+      return `${node.op}${argP < PREC.unary ? `(${inner})` : inner}`;
+    }
+    case 'postfix': {
+      const argP = precOf(node.arg);
+      const inner = toExpression(node.arg);
+      return `${argP < PREC.postfix ? `(${inner})` : inner}${node.op}`;
+    }
+    case 'binary': {
+      const p = PREC[node.op];
+      const rightAssoc = node.op === '^';
+      const lp = precOf(node.left);
+      const rp = precOf(node.right);
+      // left needs parens when strictly lower, or equal-and-right-assoc
+      const leftParen = lp < p || (lp === p && rightAssoc);
+      // right needs parens when strictly lower, or equal-and-left-assoc
+      const rightParen = rp < p || (rp === p && !rightAssoc);
+      const l = toExpression(node.left);
+      const r = toExpression(node.right);
+      return `${leftParen ? `(${l})` : l} ${node.op} ${rightParen ? `(${r})` : r}`;
+    }
+    default:
+      throw new TypeError(`toExpression: unknown node type '${node.type}'`);
+  }
+}

package/src/utils.js

@@ -0,0 +1,11 @@
+//@ts-check
+/**
+ * @file Small shared helpers for the calc engine.
+ *
+ * The content hash is the suite's single fingerprint primitive, so calc
+ * re-exports the one implementation from `@jarenjs/core` rather than
+ * carrying its own copy: equal content hits the same O(1) fast path
+ * (vnode `key`, memo key) everywhere downstream.
+ */
+
+export { hashContent } from '@jarenjs/core/string';

package/styles/calc.css

@@ -0,0 +1,128 @@
+/**
+ * @jarenjs/calc component stylesheet. `--calc-*` design tokens with a
+ * `.dark` override (mirrors mermaid.css). These tokens theme the HTML
+ * chrome (keypad, panels), which hosts may override in their own sheet
+ * (higher specificity than the `.dark .calc` block here). The plot SVG
+ * carries concrete presentation colors (valid standalone) plus inline
+ * `--calc-*` stamps that beat this stylesheet — a live plot follows a
+ * host's tokens via the `'host'` theme (`src/theme.js` `HOST_VARS`).
+ */
+
+.calc {
+  --calc-bg: #ffffff;
+  --calc-panel: #f8fafc;
+  --calc-border: #e2e8f0;
+  --calc-text: #1e293b;
+  --calc-muted: #64748b;
+  --calc-key: #f1f5f9;
+  --calc-key-hover: #e2e8f0;
+  --calc-op: #dbeafe;
+  --calc-fn: #e0f2fe;
+  --calc-equals: #2563eb;
+  --calc-equals-text: #ffffff;
+  --calc-clear: #fee2e2;
+  --calc-accent: #2563eb;
+  --calc-accent-text: #ffffff;
+
+  display: grid;
+  gap: 12px;
+  max-width: 720px;
+  color: var(--calc-text);
+  font-family: "trebuchet ms", verdana, arial, sans-serif;
+}
+
+.dark .calc,
+.calc.dark {
+  --calc-bg: #0f172a;
+  --calc-panel: #1e293b;
+  --calc-border: #334155;
+  --calc-text: #e2e8f0;
+  --calc-muted: #94a3b8;
+  --calc-key: #1e293b;
+  --calc-key-hover: #334155;
+  --calc-op: #1e3a8a;
+  --calc-fn: #0c4a6e;
+  --calc-equals: #3b82f6;
+  --calc-equals-text: #ffffff;
+  --calc-clear: #7f1d1d;
+  --calc-accent: #60a5fa;
+  --calc-accent-text: #0b1020;
+}
+
+.calc-modes { display: flex; flex-wrap: wrap; gap: 6px; }
+/* narrow hosts: the five mode tabs become one scroll strip instead of
+   wrapping to a second row; the edge fade hints that the row scrolls */
+@media (max-width: 480px) {
+  .calc-modes {
+    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
+    mask-image: linear-gradient(90deg, #000 92%, transparent);
+  }
+  .calc-mode { white-space: nowrap; flex: none; }
+}
+.calc-mode {
+  padding: 6px 12px; border: 1px solid var(--calc-border); border-radius: 8px;
+  background: var(--calc-panel); color: var(--calc-text); cursor: pointer; font-size: 13px;
+}
+.calc-mode-active { background: var(--calc-accent); color: var(--calc-accent-text); border-color: var(--calc-accent); }
+
+.calc-display {
+  background: var(--calc-panel); border: 1px solid var(--calc-border); border-radius: 10px;
+  padding: 12px 14px; text-align: right; min-height: 56px;
+}
+.calc-entry { color: var(--calc-muted); font-size: 15px; word-break: break-all; }
+.calc-result { font-size: 28px; font-weight: 700; }
+.calc-err { color: #dc2626; font-size: 13px; text-align: left; }
+
+.calc-keypad { display: grid; gap: 6px; }
+.calc-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
+.calc-key {
+  padding: 12px; border: 1px solid var(--calc-border); border-radius: 8px;
+  background: var(--calc-key); color: var(--calc-text); cursor: pointer; font-size: 16px;
+}
+.calc-key:hover { background: var(--calc-key-hover); }
+.calc-key-op { background: var(--calc-op); }
+.calc-key-fn { background: var(--calc-fn); font-size: 13px; }
+.calc-key-const { background: var(--calc-fn); }
+.calc-key-clear { background: var(--calc-clear); }
+.calc-key-equals { background: var(--calc-equals); color: var(--calc-equals-text); font-weight: 700; }
+.calc-key-span2 { grid-column: span 2; }
+.calc-key-mem { font-size: 13px; }
+
+.calc-mem { display: flex; align-items: center; gap: 8px; }
+/* the readout keeps a breath of air off the host's right edge */
+.calc-memval { color: var(--calc-muted); font-size: 13px; margin-left: auto; padding-right: 4px; }
+
+.calc-bases { display: grid; gap: 4px; background: var(--calc-panel); border: 1px solid var(--calc-border); border-radius: 10px; padding: 10px; font-family: ui-monospace, monospace; }
+.calc-baserow { display: flex; justify-content: space-between; gap: 12px; }
+.calc-baselabel { color: var(--calc-muted); }
+.calc-baseval { font-weight: 600; word-break: break-all; }
+.calc-wordopts, .calc-angle { display: flex; gap: 6px; flex-wrap: wrap; }
+.calc-word, .calc-angle-btn {
+  padding: 4px 10px; border: 1px solid var(--calc-border); border-radius: 6px;
+  background: var(--calc-key); color: var(--calc-text); cursor: pointer; font-size: 12px;
+}
+.calc-word.active, .calc-angle-btn.active { background: var(--calc-accent); color: var(--calc-accent-text); }
+
+.calc-financial, .calc-converter, .calc-plot-panel {
+  background: var(--calc-panel); border: 1px solid var(--calc-border);
+  border-radius: 10px; padding: 12px; display: grid; gap: 10px;
+}
+.calc-fin-result, .calc-conv-result { font-size: 18px; }
+.calc-conv-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.calc-conv-input { flex: 1 1 100px; padding: 8px; border: 1px solid var(--calc-border); border-radius: 6px; background: var(--calc-bg); color: var(--calc-text); }
+.calc-dim, .calc-conv-from, .calc-conv-to { padding: 8px; border: 1px solid var(--calc-border); border-radius: 6px; background: var(--calc-bg); color: var(--calc-text); }
+.calc-swap, .calc-rates-refresh { padding: 8px 10px; border: 1px solid var(--calc-border); border-radius: 6px; background: var(--calc-key); cursor: pointer; }
+.calc-rates { color: var(--calc-muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
+.calc-rates-stale { color: #d97706; }
+
+.calc-plot-kinds { display: flex; gap: 6px; }
+.calc-plotkind { padding: 4px 12px; border: 1px solid var(--calc-border); border-radius: 6px; background: var(--calc-key); color: var(--calc-text); cursor: pointer; font-size: 13px; }
+.calc-plotkind.active { background: var(--calc-accent); color: var(--calc-accent-text); }
+.calc-plot-expr { padding: 8px; border: 1px solid var(--calc-border); border-radius: 6px; background: var(--calc-bg); color: var(--calc-text); font-family: ui-monospace, monospace; }
+.calc-plot-svg { display: flex; justify-content: center; }
+.calc-plot { background: var(--calc-bg); border-radius: 8px; }
+.calc-grid { stroke: var(--calc-border); }
+
+.calc-tape { display: grid; gap: 2px; font-family: ui-monospace, monospace; font-size: 13px; color: var(--calc-muted); max-height: 120px; overflow: auto; }
+.calc-tape-row { display: flex; gap: 6px; }
+.calc-tape-res { color: var(--calc-text); font-weight: 600; }