@omega.js/web 0.1.0

package/core/js/libs/dev.js

@@ -0,0 +1,150 @@
+/**
+ * Development-only utilities and features
+ * This file contains code that should only run in development mode
+ *
+ * The tracking interceptors that used to live here are GONE (#386): they
+ * monkey-patched gtag/fbq/ttq to log what passed through them, which only ever
+ * saw the calls that survived the page's own guards. `@omega.js/analytics` logs
+ * the whole walk itself — one tagged line per fire, per provider, including the
+ * ones that were skipped and why — so there is nothing left to intercept.
+ */
+
+/* @dev-only:start */
+// The palette is the ONE home for dev affordances (#342). These helpers used to
+// be `window.logOpeningTags()` / `window.changeTheme()`, invocable only if you
+// already knew the name to type. The import rides inside the block so a
+// production build strips it with the registration.
+import { registerDevSection } from '__main_assets__/js/core/dev-sections.js';
+/* @dev-only:end */
+
+export default function () {
+  // Main log
+  console.log('⚠️ Enabling development mode features!');
+
+  // Setup handlers
+  setupHandlers();
+
+  // Setup helpers
+  setupHelpers();
+
+  // Setup breakpoint logger
+  setupBreakpointLogger();
+}
+
+function setupHandlers() {
+  // Add development click handler
+  document.addEventListener('click', function (event) {
+    console.log('Click', event.target);
+  });
+}
+
+function setupHelpers() {
+  // Hand the palette a button per helper — the panel is where you FIND them,
+  // instead of having to already know the name (#342).
+  /* @dev-only:start */
+  registerDevSection('tools', {
+    title: 'Tools',
+    buildNode: (doc) => {
+      const wrap = doc.createElement('div');
+      wrap.className = 'omega-devbar__grid';
+
+      [
+        ['Log opening tags', () => logOpeningTags()],
+        ['Toggle theme', () => changeTheme()],
+      ].forEach(([label, run]) => {
+        const button = doc.createElement('button');
+        button.type = 'button';
+        button.className = 'omega-devbar__btn';
+        button.textContent = label;
+        button.addEventListener('click', run);
+        wrap.appendChild(button);
+      });
+
+      return wrap;
+    },
+  });
+  /* @dev-only:end */
+}
+
+// Log opening tags of common HTML elements
+function logOpeningTags(detail) {
+  const tags = ['html', 'body', 'nav', 'main', 'footer'];
+
+  // Convert detail to array if provided
+  const detailTags = detail ? (Array.isArray(detail) ? detail : [detail]) : [];
+
+  // Log opening tags and add innerHTML for matching detail tags
+  const result = tags.map(tag => {
+    const el = document.querySelector(tag);
+    if (!el) return `<!-- ${tag} not found -->`;
+
+    const openingTag = getOpeningTag(tag);
+
+    // If this tag matches detail, include innerHTML
+    if (detailTags.includes(tag)) {
+      const innerHTML = el.innerHTML.trim();
+      return `${openingTag}\n${innerHTML}\n</${el.tagName.toLowerCase()}>`;
+    }
+
+    return openingTag;
+  }).join('\n\n');
+
+  // Log the result
+  console.log('Opening tags:\n', result);
+}
+
+// Change theme to the argument or flip it
+function changeTheme(theme) {
+  const currentTheme = document.documentElement.getAttribute('data-bs-theme');
+  if (theme) {
+    document.documentElement.setAttribute('data-bs-theme', theme);
+  } else {
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-bs-theme', newTheme);
+  }
+  console.log(`Theme changed to: ${document.documentElement.getAttribute('data-bs-theme')}`);
+}
+
+function getOpeningTag(tagName) {
+  const el = document.querySelector(tagName);
+  if (!el) return '';
+  const attrs = Array.from(el.attributes)
+    .map(attr => ` ${attr.name}="${attr.value}"`)
+    .join('');
+  return `<${el.tagName.toLowerCase()}${attrs}>`;
+}
+
+function setupBreakpointLogger() {
+  let lastBreakpoint = null;
+
+  function getCurrentBreakpoint() {
+    const width = window.innerWidth;
+
+    if (width >= 1400) return 'xxl';
+    if (width >= 1200) return 'xl';
+    if (width >= 992) return 'lg';
+    if (width >= 768) return 'md';
+    if (width >= 576) return 'sm';
+    return 'xs';
+  }
+
+  function logBreakpoint() {
+    const breakpoint = getCurrentBreakpoint();
+
+    if (breakpoint !== lastBreakpoint) {
+      const width = window.innerWidth;
+      console.log(`📱 Current breakpoint: ${breakpoint} (${width}px)`);
+      lastBreakpoint = breakpoint;
+    }
+  }
+
+  // Log breakpoint on page load
+  logBreakpoint();
+
+  // Log breakpoint on resize
+  let resizeTimeout;
+  window.addEventListener('resize', function() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(logBreakpoint, 100);
+  });
+}

package/core/js/libs/graph.js

@@ -0,0 +1,201 @@
+// Graphs — the framework's mermaid, drawn in the theme's own colors.
+//
+// The dependency is the FRAMEWORK's: mermaid is a dependency of @omega.js/web,
+// never a CDN load at runtime, and a page reaches it ONLY through this module.
+// Consumers import these helpers and never name the library, so its version and
+// delivery stay ours to change — the charts helper's contract, for diagrams.
+//
+// It is still lazy: the import below is dynamic, and the bundle is ESM with
+// splitting (src/assets.js), so mermaid lands in its own chunk that a page
+// fetches the moment it asks for a graph — a page with no graph pays nothing.
+//
+// This module takes a DEFINITION in and puts an SVG out: composing the mermaid
+// text is the page's business, because the shapes and the words in a diagram
+// are content, not framework.
+//
+// The colors come off the token sheet (docs/shared/theming.md), which is what
+// makes a diagram follow the brand ramp and dark mode without knowing either
+// exists — and its categorical slots read the SAME ramp (--omega-chart-1…6) a
+// chart series and an `.omega-badge-tone` chip do, so one thing is one color
+// wherever it is drawn. Like charts, the tokens are read at DRAW time and
+// nothing listens for a theme flip: a light/dark switch takes effect on the
+// consumer's next redraw.
+//
+// `drawGraph` is not unit-tested (test/graph.test.js pins everything around
+// it): mermaid renders against a real DOM, which node has none of — the same
+// line the four chart builders sit on.
+
+// Element ids are authored — a graph is drawn into a slot the page wrote — so
+// the slot never escapes, it REFUSES anything that is not a plain id.
+const ID_SHAPE = /^[a-z][\w-]*$/i;
+
+// The graph library, once it is here. Set by loadGraph, read by every draw.
+let mermaid = null;
+let pending = null;
+
+/**
+ * Load mermaid once. Idempotent and safe to call on every poll.
+ *
+ * The one cost of a split chunk: it is a network fetch, so a page loaded
+ * offline has no diagrams. `graphSlot` says so in place of the host rather
+ * than leaving a hole.
+ *
+ * @returns {Promise<boolean>} whether mermaid is available
+ */
+export async function loadGraph() {
+  if (mermaid) {
+    return true;
+  }
+
+  if (!pending) {
+    pending = (async () => {
+      try {
+        const module = await import('mermaid');
+        mermaid = module.default;
+        return true;
+      } catch (e) {
+        pending = null; // a later poll may find the network back
+        console.warn('Failed to load mermaid:', e);
+        return false;
+      }
+    })();
+  }
+
+  return pending;
+}
+
+/**
+ * Whether a graph can be drawn right now — synchronous, for render paths.
+ * @returns {boolean}
+ */
+export const graphReady = () => Boolean(mermaid);
+
+/**
+ * The theme's diagram colors, read off :root as mermaid themeVariables.
+ *
+ * Mermaid paints with literal colors, never `var()` strings, so every token is
+ * resolved here — the charts helper's `resolveColor` idiom, applied to a whole
+ * theme at once. Fallbacks run token → Bootstrap variable → hardcoded, so a
+ * surface that carries neither sheet still draws something legible.
+ *
+ * @returns {object} mermaid themeVariables for the `base` theme
+ */
+export function graphTheme() {
+  const style = getComputedStyle(document.documentElement);
+  const token = (name) => style.getPropertyValue(name).trim();
+  const ink = token('--omega-ink') || token('--bs-body-color') || '#212529';
+  const surface = token('--omega-surface') || '#ffffff';
+  const surface2 = token('--omega-surface-2') || '#f1f1f0';
+  const line = token('--omega-line') || token('--bs-border-color') || '#dee2e6';
+  const accent = token('--omega-accent') || '#2563eb';
+
+  const theme = {
+    background: surface,
+    // A node is the recessed well on the page surface, outlined in the accent
+    // — the one place the brand color lands in a diagram.
+    mainBkg: surface2,
+    primaryColor: surface2,
+    primaryTextColor: ink,
+    primaryBorderColor: accent,
+    secondaryColor: surface,
+    tertiaryColor: surface2,
+    nodeBorder: accent,
+    clusterBkg: surface,
+    clusterBorder: line,
+    edgeLabelBackground: surface,
+    // Edges and their labels are hairlines and body ink, like every other
+    // divider and line of text on the page.
+    lineColor: line,
+    textColor: ink,
+    titleColor: ink,
+    fontFamily: token('--omega-font-ui') || 'inherit',
+  };
+
+  // The categorical ramp, under both names mermaid takes per-item colors by:
+  // cScale for the class/state/journey slots, pie for pie slices. An unset
+  // slot is left out so mermaid derives its own rather than painting empty.
+  [1, 2, 3, 4, 5, 6].forEach((slot) => {
+    const color = token(`--omega-chart-${slot}`);
+    if (color) {
+      theme[`cScale${slot - 1}`] = color;
+      theme[`pie${slot}`] = color;
+    }
+  });
+
+  return theme;
+}
+
+/** Escape a definition for the attribute it is stamped into. */
+const escapeAttribute = (value) => String(value)
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;');
+
+/**
+ * The markup a graph is drawn into. The host is empty until the render lands,
+ * so the box carries a height FLOOR — it reserves the space instead of letting
+ * the page jump, and a taller diagram still grows past it. When the library
+ * did not load, the slot says so rather than leaving a hole.
+ *
+ * `definition` is the mermaid text the graph will draw, stamped onto the host:
+ * a live page only redraws when `swap` wrote (@omega.js/client/modules/live-page),
+ * and the host carries no data of its own, so without the stamp a
+ * definition-only change leaves the old picture standing.
+ *
+ * @param {string} id - the host id the draw call will name
+ * @param {number} [height] - the box height floor in px
+ * @param {string} [definition] - the mermaid definition the graph will draw
+ * @returns {string} markup
+ */
+export function graphSlot(id, height = 320, definition = '') {
+  // An id is authored, never user input — a bad one is a programmer error.
+  if (!ID_SHAPE.test(id)) {
+    throw new Error(`[graph] graphSlot: "${id}" is not a usable element id`);
+  }
+
+  if (!graphReady()) {
+    return '<p class="omega-micro text-body-secondary mb-0">graph library unavailable; the diagram could not be drawn</p>';
+  }
+
+  return `<div id="${id}" style="min-height: ${Number(height)}px;" data-series="${escapeAttribute(definition)}"></div>`;
+}
+
+/**
+ * Draw a mermaid definition into `id`, replacing whatever was there (every
+ * poll repaints).
+ *
+ * The theme is applied per render because the tokens are read per render — one
+ * initialize, then the render that uses it. A definition that does not parse
+ * throws: like the id, the diagram text is authored, so a syntax error in it
+ * is a programmer error and says so instead of quietly drawing nothing.
+ *
+ * @param {string} id - the host id from `graphSlot`
+ * @param {string} definition - the mermaid definition to render
+ * @returns {Promise<string|null>} the SVG that was drawn, or null when nothing was
+ */
+export async function drawGraph(id, definition) {
+  if (!mermaid) {
+    return null;
+  }
+
+  const host = document.getElementById(id);
+  if (!host) {
+    return null;
+  }
+
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: 'strict',
+    // Still throws on a bad definition, but mermaid cleans up its scratch
+    // node first — without this it leaves its error diagram on document.body.
+    suppressErrorRendering: true,
+    theme: 'base',
+    themeVariables: graphTheme(),
+  });
+
+  const { svg } = await mermaid.render(`${id}-svg`, definition);
+  host.innerHTML = svg;
+
+  return svg;
+}

package/core/js/libs/initialize-tooltips.js

@@ -0,0 +1,31 @@
+/**
+ * Initialize Bootstrap Tooltips
+ * Finds all elements with data-bs-toggle="tooltip" and initializes them
+ *
+ * The ONE home ([#99](https://github.com/Omega-JS-Stack/omega/issues/99)):
+ * every theme shipped a byte-identical copy under its own `js/`, so a fix
+ * had to be made three times. Themes import it off the core layer
+ * (`__main_assets__/js/libs/initialize-tooltips.js`) — same lane as the
+ * chart helper beside it — and `window.bootstrap` is already global by the
+ * time a theme's DOM-ready handler calls this.
+ *
+ * @param {ParentNode} [$root] - the subtree to scan; markup injected AFTER the
+ *   page-load pass (the change-plan modal's feature bullets) passes its own
+ *   container so only the new triggers are wired.
+ */
+export default function initializeTooltips($root = document) {
+  const $tooltipTriggers = $root.querySelectorAll('[data-bs-toggle="tooltip"]');
+
+  // If no tooltips found, exit early
+  if ($tooltipTriggers.length === 0) {
+    return;
+  }
+
+  // Log the number of tooltips being initialized
+  console.log(`Initializing ${$tooltipTriggers.length} tooltips`);
+
+  // Initialize each tooltip
+  $tooltipTriggers.forEach(($el) => {
+    new bootstrap.Tooltip($el);
+  });
+}

package/core/js/libs/logger.js

@@ -0,0 +1,38 @@
+/**
+ * The web runtime's log tag — the ONE identity tag every OMEGA surface prints:
+ * `[@omega.js/web:<module>]` ([#12](https://github.com/Omega-JS-Stack/omega/issues/12)).
+ *
+ * No timestamp: devtools already stamps runtime lines. The build-time twin
+ * (`@omega.js/devkit/logger`, used by src/) prefixes `[HH:MM:SS]` before the
+ * same tag.
+ *
+ * Web's OWN file on purpose — the API mirrors @omega.js/client's
+ * `createLogger`, but the client's copy would stamp the wrong package segment,
+ * and core/js resolves through the `__main_assets__` layer alias rather than
+ * the package graph.
+ */
+
+// The package segment — this file IS @omega.js/web, so it is a literal.
+const PACKAGE = '@omega.js/web';
+
+// Create a tagged console for one module, e.g. createLogger('auth').
+export function createLogger(module) {
+  const tag = `[${PACKAGE}:${module}]`;
+
+  // GETTERS returning a BOUND console method, not wrapper arrows: devtools
+  // attributes a line to the frame that called console, so a wrapper would make
+  // every line in the app read as coming from this file. Binding hands the real
+  // call site back. Resolution stays at ACCESS time, so a test (or a consumer)
+  // that swaps console[method] still sees its own stub.
+  const logger = { tag };
+  for (const method of ['log', 'info', 'warn', 'error', 'debug']) {
+    Object.defineProperty(logger, method, {
+      get: () => console[method].bind(console, tag),
+      enumerable: true,
+    });
+  }
+
+  return logger;
+}
+
+export default createLogger;

package/core/js/libs/omega-copy.js

@@ -0,0 +1,89 @@
+// Declarative copy-to-clipboard — an element carrying `data-omega-copy` IS a
+// copy control ([#709](https://github.com/Omega-JS-Stack/omega/issues/709)).
+//
+// Every copy button was hand-wired before this: the account page's api-keys
+// section wrote `clipboardCopy` + `showNotification` three times over, and
+// each brand that wanted a copy row wrote the same handler again. Marking the
+// control is now the whole job — no page JS at all.
+//
+// Delegated off `document` (the alert-dismiss lane), registered ONCE from the
+// global module (core/js/main.js), so a row rendered after boot is a copy
+// control too, with nothing to rewire.
+//
+// What gets copied is RESOLVED, in this order:
+//   1. an explicit value — the `omegaCopyValue` property a page module set, or
+//      a `data-omega-copy-value` attribute. Load-bearing, not sugar: a
+//      key-bearing row DISPLAYS a mask and must COPY the real credential, so
+//      display and clipboard are allowed to differ.
+//   2. `data-omega-copy` holding a selector → that target's value (an input)
+//      or its text (a `<pre>` block).
+//   3. the sibling input in the same `.input-group` — the bare
+//      `<input><button data-omega-copy>` row, which needs no value at all.
+
+import omega from '@omega.js/client';
+
+const CONTROL_SELECTOR = '[data-omega-copy]';
+const GROUP_SELECTOR = '.input-group';
+const FIELD_SELECTOR = 'input, textarea';
+
+export function setupCopy() {
+  document.addEventListener('click', async (event) => {
+    const $control = event.target.closest(CONTROL_SELECTOR);
+
+    if (!$control) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const value = resolveValue($control);
+
+    // An empty field is the account page's "still loading" case, not a
+    // failure — and never a silently emptied clipboard.
+    if (!value) {
+      omega.utilities().showNotification('Nothing to copy', 'warning');
+      return;
+    }
+
+    try {
+      await omega.utilities().clipboardCopy(value);
+      omega.utilities().showNotification('Copied!', 'success');
+    } catch (e) {
+      // Reachable since #726 — `clipboardCopy` rejects on a real refusal, so
+      // this notification stopped being dead code and the reason belongs in
+      // the console, not only in a toast.
+      console.error('Failed to copy to clipboard:', e);
+      omega.utilities().showNotification('Failed to copy', 'danger');
+    }
+  });
+}
+
+// The resolution order above, first answer wins.
+function resolveValue($control) {
+  if (typeof $control.omegaCopyValue === 'string') {
+    return $control.omegaCopyValue;
+  }
+
+  const explicit = $control.getAttribute('data-omega-copy-value');
+
+  if (explicit !== null) {
+    return explicit;
+  }
+
+  const selector = $control.getAttribute('data-omega-copy');
+
+  if (selector) {
+    const $target = document.querySelector(selector);
+
+    return $target ? readValue($target) : null;
+  }
+
+  const $field = $control.closest(GROUP_SELECTOR)?.querySelector(FIELD_SELECTOR);
+
+  return $field ? readValue($field) : null;
+}
+
+// A field answers with its value, anything else (a `<pre>` snippet) with its text.
+function readValue($target) {
+  return typeof $target.value === 'string' ? $target.value : $target.textContent;
+}

package/core/js/libs/path-prefix.js

@@ -0,0 +1,44 @@
+/**
+ * The browser half of base-path support (#355) — where the runtime builds a
+ * same-site URL, it builds it under the path the site is actually mounted at.
+ *
+ * The value is a BUILD fact (the publisher's `OMEGA_PATH_PREFIX`, normalized by
+ * src/path-prefix.js), stamped on `<html data-omega-path-prefix>` by the
+ * build's HTML pass. Read from the DOM rather than baked into the bundle so
+ * there is exactly ONE mechanism: the same emit step that mounts every href and
+ * src hands the value to the runtime, and a site served at the domain root
+ * ships no stamp at all — hence the `/` fallback.
+ *
+ * Page IDENTITY is a different thing and stays unprefixed: `data-page-path` is
+ * the site-relative route, which is what route comparisons (/signin, /pricing)
+ * are written against.
+ */
+
+/**
+ * The base path this page is mounted under.
+ * @returns {string} '/workkit'-shaped (no trailing slash), or '/' at the domain root
+ */
+export function pathPrefix() {
+  // Every absence means the same thing — a site at the domain root: no stamp,
+  // no document (a worker scope), or a surface whose DOM has no <html> yet.
+  const stamped = typeof document === 'undefined'
+    ? ''
+    : document.documentElement?.dataset?.omegaPathPrefix;
+
+  return stamped || '/';
+}
+
+/**
+ * Mount a root-relative site path under the base path. Anything else — an
+ * absolute or protocol-relative URL, a bare-relative path, an anchor — already
+ * resolves correctly and passes through.
+ * @param {string} path - e.g. '/assets/icons/solid/star.svg'
+ * @returns {string}
+ */
+export function siteUrl(path) {
+  const prefix = pathPrefix();
+  if (prefix === '/' || typeof path !== 'string') return path;
+  if (!path.startsWith('/') || path.startsWith('//')) return path;
+
+  return `${prefix}${path}`;
+}

package/core/js/libs/payment-config.js

@@ -0,0 +1,76 @@
+/**
+ * Payment Config Library
+ *
+ * Reads payment configuration (products, providers, prices, feature values)
+ * from omega.config.payment, and the FEATURES CATALOG from omega.config.features
+ * — both populated by the build. This eliminates the need to fetch
+ * /omega/brand at runtime.
+ *
+ * A feature is DEFINED once, in the catalog (name, icon, definition, and a
+ * `usage` block on the metered ones); a product names only its VALUE
+ * ([#647](https://github.com/Omega-JS-Stack/omega/issues/647)).
+ */
+
+import omega from '@omega.js/client';
+import { isCountedFeature } from '@omega.js/client/modules/features.js';
+
+// Get the full payment config object
+export function getPaymentConfig() {
+  return omega.config?.payment || {};
+}
+
+// Get payment providers
+export function getProviders() {
+  return getPaymentConfig().providers || {};
+}
+
+// Get all products
+export function getProducts() {
+  return getPaymentConfig().products || [];
+}
+
+// Find a product by ID
+export function getProductById(productId) {
+  return getProducts().find(p => p.id === productId) || null;
+}
+
+// The feature catalog: feature id → { name, icon, definition, usage? }
+export function getFeatureCatalog() {
+  return omega.config?.features || {};
+}
+
+// One catalog entry, or null when the catalog does not define it
+export function getFeature(featureId) {
+  return getFeatureCatalog()[featureId] || null;
+}
+
+// A product's values map: feature id → number (counted) / true / a string (perk)
+export function getProductFeatures(productId) {
+  return getProductById(productId)?.features || {};
+}
+
+// A product's LIMITS: only the counted features it names a number for. The
+// catalog is what decides which those are, so a perk can never be read as one.
+export function getProductLimits(productId) {
+  const catalog = getFeatureCatalog();
+  const values = getProductFeatures(productId);
+  const limits = {};
+
+  for (const id of Object.keys(values)) {
+    if (isCountedFeature(catalog[id]) && typeof values[id] === 'number') {
+      limits[id] = values[id];
+    }
+  }
+
+  return limits;
+}
+
+// Get a product's prices
+export function getProductPrices(productId) {
+  return getProductById(productId)?.prices || {};
+}
+
+// Get payment currency
+export function getCurrency() {
+  return getPaymentConfig().currency || 'USD';
+}