@xeplr/ui-utils 1.0.0 → 1.0.2

package/src/numberField/useNumberFieldController.js

@@ -0,0 +1,116 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  sanitizeNumberInput,
+  toNumeric,
+  formatDisplay,
+  validateRange,
+  resolveAffixState,
+  NUMBER_TYPES
+} from './numberField.js';
+
+/**
+ * @param {object} props
+ * @param {'float'|'currency'|'units'} [props.type='float']
+ * @param {number|null} [props.value]            — controlled numeric value
+ * @param {number|null} [props.defaultValue]     — uncontrolled initial value
+ * @param {(value, meta) => void} [props.onChange] — called with (numericValue, { affix })
+ * @param {Array} [props.currencies]   — for currency type: [{ code, symbol }]
+ * @param {string} [props.defaultCurrency]
+ * @param {'before'|'after'} [props.currencyPosition='before']
+ * @param {Array} [props.units]        — for units type: [{ value, label }]
+ * @param {string} [props.defaultUnit]
+ * @param {'before'|'after'} [props.unitPosition='after']
+ * @param {number} [props.min]
+ * @param {number} [props.max]
+ * @param {number} [props.decimals]    — display decimals on blur
+ * @param {string} [props.placeholder]
+ * @param {boolean} [props.disabled]
+ */
+export function useNumberFieldController(props) {
+  props = props || {};
+  var type = props.type || 'float';
+  if (NUMBER_TYPES.indexOf(type) === -1) {
+    throw new Error('[xeplr-ui-utils:NumberField] Unknown type: ' + type + '. Expected one of ' + NUMBER_TYPES.join(', '));
+  }
+
+  var affixInit = useMemo(function() {
+    return resolveAffixState(type, props);
+  }, [
+    type,
+    props.currencies, props.defaultCurrency, props.currencyPosition,
+    props.units, props.defaultUnit, props.unitPosition
+  ]);
+
+  var isControlled = props.value !== undefined;
+  var initial = isControlled ? props.value : (props.defaultValue !== undefined ? props.defaultValue : null);
+
+  var [raw, setRaw] = useState(initial === null || initial === undefined ? '' : String(initial));
+  var [affix, setAffix] = useState(affixInit ? affixInit.selected : null);
+  var [error, setError] = useState('');
+
+  useEffect(function() {
+    if (isControlled) {
+      var next = props.value === null || props.value === undefined ? '' : String(props.value);
+      setRaw(next);
+    }
+  }, [props.value, isControlled]);
+
+  useEffect(function() {
+    if (affixInit) setAffix(affixInit.selected);
+  }, [affixInit]);
+
+  function emit(nextRaw, nextAffix) {
+    var numeric = toNumeric(nextRaw);
+    var rangeCheck = validateRange(numeric, props.min, props.max);
+    setError(rangeCheck.valid ? '' : rangeCheck.error);
+    if (props.onChange) {
+      props.onChange(numeric, { affix: nextAffix });
+    }
+  }
+
+  function handleNumberChange(e) {
+    var sanitized = sanitizeNumberInput(e.target.value);
+    if (!isControlled) setRaw(sanitized);
+    emit(sanitized, affix);
+  }
+
+  function handleAffixChange(e) {
+    var nextValue = e.target.value;
+    var next = (affixInit.list).find(function(item) {
+      return item[affixInit.valueKey] === nextValue;
+    });
+    if (!next) return;
+    setAffix(next);
+    emit(raw, next);
+  }
+
+  function handleBlur() {
+    var numeric = toNumeric(raw);
+    if (numeric === null) return;
+    if (typeof props.decimals === 'number') {
+      var fixed = numeric.toFixed(props.decimals);
+      if (!isControlled) setRaw(fixed);
+    }
+  }
+
+  return {
+    type,
+    raw,
+    numeric: toNumeric(raw),
+    error,
+    placeholder: props.placeholder,
+    disabled: !!props.disabled,
+    decimals: props.decimals,
+    formatDisplay: formatDisplay,
+    affix: affixInit ? {
+      list: affixInit.list,
+      selected: affix,
+      position: affixInit.position,
+      labelKey: affixInit.labelKey,
+      valueKey: affixInit.valueKey
+    } : null,
+    handleNumberChange,
+    handleAffixChange,
+    handleBlur
+  };
+}

package/src/numberField/validateDesign.js

@@ -0,0 +1,3 @@
+export var NUMBER_FIELD_RULES = [
+  { selector: 'input[inputmode="decimal"], input.xeplr-numberfield-input', label: 'Numeric input element' }
+];

package/src/progress/ProgressNotifier.jsx

@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from 'react';
+import { subscribeToProgress, describeProgress, describeComplete } from './progressSource.js';
+import './designs/progressNotifier.css';
+
+// PROGRESS NOTIFIER — a small moving bar and a line of text, driven by an
+// event key. Mount it next to anything that starts long-running work.
+//
+// ── A NOTIFIER, NOT A PROGRESS BAR ───────────────────────────────────────
+//
+// The bar is INDETERMINATE and always will be. Almost nothing this reports on
+// can honestly say how far through it is: a GROUP BY over twenty million rows
+// knows it is running and nothing else, and a bar creeping to 60% would be a
+// number invented to look reassuring. What moves says "this is alive"; what is
+// TRUE is in the text beside it, which is the count the server actually has.
+//
+// So it is not measuring the work. It is telling you the work exists, and
+// repeating what it last said about itself.
+//
+// ── IT LISTENS, IT DOES NOT ASK ──────────────────────────────────────────
+//
+// No polling and no fetching. The app attaches its stream once with
+// attachProgressSource, and this subscribes to one key on it. A screen shows a
+// notifier for a job it did not start — one already running when the page
+// loaded, or started by somebody else — with no extra wiring, because the key
+// is the thing it is about rather than a handle handed back to whoever
+// launched it.
+
+export default function ProgressNotifier({
+  eventKey,
+  noun,
+  // Shown before anything has been heard. Usually nothing — a notifier for
+  // work that is not running should take up no room at all.
+  idle = null,
+  // Keep the finished line on screen instead of clearing it. Worth it where
+  // there is nothing else to show the result (a card with no numbers on it);
+  // not worth it where the result itself is about to appear underneath.
+  keepFinal = false,
+  // How long the finished line stays before it clears, when it does.
+  finalMs = 4000,
+  onComplete,
+  onError,
+  className = ''
+}) {
+  const [state, setState] = useState(null);   // { status, message }
+
+  // THE CALLBACKS LIVE IN A REF, AND THE SUBSCRIPTION DEPENDS ONLY ON THE KEY.
+  //
+  // They arrive as inline arrows — `onComplete={() => refresh()}` — which are
+  // a new function identity on every render of the host. With them in the
+  // effect's dependency list, every render tore the subscription down and
+  // rebuilt it; and because a stream with no listeners left is CLOSED, and its
+  // ticket is single-use, each rebuild opened a new connection and spent a new
+  // ticket. Pressing Build produced three of each: one for the busy state, one
+  // for the completion, one for the refresh that followed it.
+  //
+  // A ref keeps the latest callbacks reachable without making the subscription
+  // depend on their identity — so the stream is opened once and stays open
+  // while the key is unchanged, which is the entire point of sharing it.
+  const handlers = useRef({ onComplete: onComplete, onError: onError });
+  handlers.current = { onComplete: onComplete, onError: onError };
+
+  useEffect(() => {
+    if (!eventKey) return undefined;
+    let alive = true;
+    let timer = null;
+
+    const stop = subscribeToProgress(eventKey, (evt) => {
+      if (!alive) return;
+
+      if (evt.state === 'complete') {
+        setState({ status: 'complete', message: describeComplete(evt.data, noun) });
+        handlers.current.onComplete?.(evt.data);
+        // Cleared after a moment unless asked to stay: a finished line that
+        // never goes reads, an hour later, as if it were still happening.
+        if (!keepFinal) timer = setTimeout(() => { if (alive) setState(null); }, finalMs);
+        return;
+      }
+
+      if (evt.state === 'error') {
+        // The REASON, kept on screen. An error that clears itself is one the
+        // user is told about only if they happened to be looking.
+        setState({
+          status: 'error',
+          message: (evt.data && (evt.data.error || evt.data.message)) ||
+                   ('The ' + (noun || 'task') + ' could not be finished')
+        });
+        handlers.current.onError?.(evt.data);
+        return;
+      }
+
+      setState({ status: 'running', message: describeProgress(evt.data, noun) });
+    });
+
+    return () => {
+      alive = false;
+      if (timer) clearTimeout(timer);
+      stop();
+    };
+  // ONLY the key and the presentation options. Not the callbacks — see above.
+  }, [eventKey, noun, keepFinal, finalMs]);
+
+  if (!state) return idle;
+
+  return (
+    <div
+      className={`xpn xpn--${state.status} ${className}`.trim()}
+      // Announced to a screen reader as it changes, but politely — this is
+      // status, not an alert, and it must not interrupt what is being read.
+      role="status"
+      aria-live="polite"
+    >
+      {state.status === 'running' && (
+        <div className="xpn-bar" aria-hidden="true"><span /></div>
+      )}
+      <p className="xpn-text">{state.message}</p>
+    </div>
+  );
+}

package/src/progress/designs/progressNotifier.css

@@ -0,0 +1,73 @@
+/* Progress notifier. Namespaced xpn-* so it cannot collide with a host app's
+   own rules, and self-contained so mounting it never depends on the host
+   having loaded some other stylesheet first.
+
+   var(--xeplr-*, fallback) throughout — picks up @xeplr/ui-account's theme
+   tokens when that stylesheet is present, and looks right without it. */
+
+.xpn {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  /* Zero height when it renders nothing: the component returns null while
+     idle, and this keeps the visible state from adding margin a host did not
+     ask for. */
+  margin: 0;
+}
+
+.xpn-text {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--xeplr-muted, #6b7280);
+  /* A driver's error is one long line with no spaces in it more often than
+     not, and must not stretch whatever it is sitting in. */
+  overflow-wrap: anywhere;
+}
+
+.xpn--error .xpn-text { color: var(--xeplr-danger, #c2372e); }
+.xpn--complete .xpn-text { color: var(--xeplr-success, #059669); }
+
+/* ── the bar ─────────────────────────────────────────────────────────────
+
+   INDETERMINATE, always. Nothing this reports on can honestly say how far
+   through it is — a GROUP BY over twenty million rows knows only that it is
+   running — so the movement says "alive" and the text beside it carries what
+   is actually true. A bar creeping toward 60% would be an invented number. */
+
+.xpn-bar {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  border-radius: 2px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--xeplr-accent, #2563eb) 18%, transparent);
+}
+
+.xpn-bar span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 40%;
+  height: 100%;
+  border-radius: 2px;
+  background: var(--xeplr-accent, #2563eb);
+  animation: xpn-slide 1.1s ease-in-out infinite;
+}
+
+@keyframes xpn-slide {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+
+/* Motion is the only thing carrying "still going" here, so it is not simply
+   removed — it is replaced with a filled, dimmed bar that still reads as a
+   state rather than as a finished one. */
+@media (prefers-reduced-motion: reduce) {
+  .xpn-bar span {
+    animation: none;
+    width: 100%;
+    opacity: 0.55;
+  }
+}

package/src/progress/progressSource.js

@@ -0,0 +1,168 @@
+// PROGRESS NOTIFIER — the model.
+//
+// Long-running work on the server must never be silent on the client. Not a
+// spinner that means "something, somewhere" — the actual thing it is doing,
+// updated as it does it, until it says it is finished.
+//
+// ── WHY THIS PACKAGE AND NOT EACH APP ────────────────────────────────────
+//
+// Because it kept being rebuilt. A report had one, a dashboard widget had one,
+// and the next screen that needed one wrote a third with its own bar, its own
+// keyframes and its own idea of what "running" looks like. They drift, and the
+// drift is visible: the same operation reports differently depending on which
+// screen you started it from.
+//
+// ── THE EVENT SHAPE, AND WHY IT IS NOT THE APP'S ─────────────────────────
+//
+// This module knows nothing about SSE, tickets, topics or run stores. An app
+// attaches its own stream once, adapting whatever it publishes into:
+//
+//     { key, continue: true|false, status?, data }
+//
+//   key      — what the work is ABOUT, chosen by the back end: a cube id, a
+//              move run id, a report id. A notifier is mounted with the same
+//              key, so a screen listens using an id it already has rather than
+//              one it has to be handed back.
+//   continue — TRUE while the work is still going. This is the whole of the
+//              visibility rule: a notifier shows itself when it hears `true`
+//              for its key and is otherwise invisible. Nothing on the client
+//              decides when to appear.
+//   status   — optional, and only interesting for how it ENDED: 'error' when
+//              it failed. Absent means the ordinary case.
+//   data     — whatever the work knows about itself. Free-form, deliberately:
+//              the server sends what it has, and the SENTENCE is made here. A
+//              server that formats prose cannot be re-worded without a
+//              deployment, and cannot be translated at all.
+//
+// ── HIDDEN UNTIL TOLD OTHERWISE ──────────────────────────────────────────
+//
+// A notifier renders nothing until an event for its key arrives. That is what
+// makes it safe to put on ten components: they all sit at zero height, and the
+// one whose work is running — or all of them, if they share a key — appear
+// together. Nothing needs to know which screen started the job, and a screen
+// opened halfway through a build shows it without asking anybody.
+
+var _subscribe = null;
+
+/**
+ * Point the notifier at this app's event stream. Called ONCE at startup.
+ *
+ * `subscribe(handler)` must call `handler({ key, status, data })` for every
+ * event and return an unsubscribe function.
+ *
+ * Nothing here opens a connection: an app already has one stream and should
+ * not grow a second for this. The adapter is where its own event shape is
+ * translated — see the notes on the contract above.
+ */
+export function attachProgressSource(subscribe) {
+  _subscribe = typeof subscribe === 'function' ? subscribe : null;
+}
+
+/** Whether an app has attached a stream. False means every notifier is inert. */
+export function progressSourceAttached() {
+  return Boolean(_subscribe);
+}
+
+/**
+ * Listen for events about one key.
+ *
+ * Returns an unsubscribe function, always — including when no source is
+ * attached, so a component's cleanup never has to check. A notifier mounted in
+ * an app that never attached one simply shows nothing, rather than throwing in
+ * a render.
+ */
+export function subscribeToProgress(key, handler) {
+  if (!_subscribe || !key) return function() {};
+  return _subscribe(function(evt) {
+    if (!evt || evt.key !== key) return;
+    handler(normalize(evt));
+  }) || function() {};
+}
+
+/**
+ * One shape for the component, whichever way the app phrased it.
+ *
+ * `continue` is the field the back end sends and the one the contract is
+ * written around, but it cannot be a variable name in JavaScript — so it is
+ * turned into a plain state here, once, rather than being read as
+ * `evt['continue']` at four call sites.
+ *
+ * An event with neither `continue` nor a status is treated as STILL RUNNING.
+ * Being wrong that way leaves a bar spinning until the next event; being wrong
+ * the other way hides a job that is still going, which is the failure this
+ * whole component exists to prevent.
+ */
+function normalize(evt) {
+  var state = 'running';
+  if (evt.status === 'error') state = 'error';
+  else if (evt.continue === false) state = 'complete';
+  else if (evt.status === 'complete') state = 'complete';
+
+  return { key: evt.key, state: state, data: evt.data || {} };
+}
+
+// ── turning `data` into a sentence ───────────────────────────────────────
+
+/** Thousands separators, because 5022241 is not a number anybody reads. */
+function count(n) {
+  return Number(n).toLocaleString();
+}
+
+/**
+ * What to SAY about a piece of work, from whatever it reported.
+ *
+ * The order is deliberate. An explicit `message` wins, because work that knows
+ * its own phase ("Rolling the rows up…") says it better than anything derived.
+ * Failing that, the counters are assembled — and counters are the honest thing
+ * to show, since almost nothing here can report a percentage: a GROUP BY does
+ * not know how far through it is, and a bar claiming 60% would be invented.
+ *
+ * The last resort is a plain sentence rather than an empty string. "Working…"
+ * next to a moving bar is a true statement; a blank line beside it looks like
+ * the thing has stalled.
+ *
+ * A SAMPLE, in the sense that these are the fields our work happens to send
+ * today. Adding one is a line here, not a change to any server.
+ */
+export function describeProgress(data, noun) {
+  var d = data || {};
+  if (d.message) return d.message;
+
+  var parts = [];
+  // Read vs loaded, kept separate: a move that read 50,000 rows and wrote none
+  // is the failure most worth seeing, and one merged number hides it.
+  if (d.rowsRead != null) parts.push(count(d.rowsRead) + ' rows read');
+  if (d.rowsLoaded != null) parts.push(count(d.rowsLoaded) + ' loaded');
+  if (d.rowsScanned != null) parts.push(count(d.rowsScanned) + ' rows scanned');
+  if (d.groupCount != null) parts.push(count(d.groupCount) + ' groups');
+  if (d.batches != null) parts.push(count(d.batches) + ' batches');
+  if (d.cubeRows != null) parts.push(count(d.cubeRows) + ' rows');
+
+  if (parts.length) return parts.join(' · ') + '…';
+  return 'Working on the ' + (noun || 'task') + '…';
+}
+
+/**
+ * What to say once it has finished — the part people actually wait for.
+ *
+ * Separate from the running text because the tense and the content differ: a
+ * finished job reports a RESULT and how long it took, not what it was doing.
+ */
+export function describeComplete(data, noun) {
+  var d = data || {};
+  if (d.message) return d.message;
+
+  var what = null;
+  if (d.cubeRows != null) what = count(d.cubeRows) + ' rows';
+  else if (d.rowsLoaded != null) what = count(d.rowsLoaded) + ' rows';
+  else if (d.groupCount != null) what = count(d.groupCount) + ' groups';
+
+  var took = d.durationMs != null
+    ? ' in ' + (d.durationMs < 1000
+        ? d.durationMs + 'ms'
+        : (d.durationMs / 1000).toFixed(1) + 's')
+    : '';
+
+  if (what) return 'Finished — ' + what + took;
+  return 'Finished' + (took || '') + (noun ? ' — ' + noun : '');
+}

package/src/rangeField/designs/RangeFieldSample.jsx

@@ -0,0 +1,25 @@
+import DateFieldSample from '../../dateField/designs/DateFieldSample.jsx';
+import './rangeField.css';
+
+/**
+ * RangeField — design. From and To rendered as ONE field, side by side,
+ * sharing a row — not two independent fields that happen to sit near each
+ * other. That's the actual point of this component: a caller reaching for
+ * "start" and "end" as two separate labeled boxes gets visual distance
+ * between two things that are really one idea; this gives them the one idea.
+ */
+export default function RangeFieldSample({ fromLabel, toLabel, from, to }) {
+  return (
+    <div className="xeplr-rangefield">
+      <div className="xeplr-rangefield-field">
+        <span className="xeplr-rangefield-label">{fromLabel}</span>
+        <DateFieldSample {...from} />
+      </div>
+      <span className="xeplr-rangefield-sep" aria-hidden="true">→</span>
+      <div className="xeplr-rangefield-field">
+        <span className="xeplr-rangefield-label">{toLabel}</span>
+        <DateFieldSample {...to} />
+      </div>
+    </div>
+  );
+}

package/src/rangeField/designs/index.js

@@ -0,0 +1 @@
+export { default as RangeFieldSample } from './RangeFieldSample.jsx';

package/src/rangeField/designs/rangeField.css

@@ -0,0 +1,26 @@
+/* Namespaced xeplr-rangefield-* so a host's own styles can't collide with it. */
+.xeplr-rangefield {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.xeplr-rangefield-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 160px;
+}
+.xeplr-rangefield-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--xeplr-muted, #6b7280);
+}
+/* Purely a visual hint that these two boxes are one idea, not a real
+   separator — hidden from assistive tech via aria-hidden in the design. */
+.xeplr-rangefield-sep {
+  padding-bottom: 10px;
+  color: var(--xeplr-muted-2, #9aa1ad);
+  font-size: 13px;
+}

package/src/rangeField/pages.jsx

@@ -0,0 +1,10 @@
+import { useRangeFieldController } from './useRangeFieldController.js';
+import RangeFieldSample from './designs/RangeFieldSample.jsx';
+import { useDesignValidator } from '../fileUpload/validateDesign.js';
+import { RANGE_FIELD_RULES } from './validateDesign.js';
+
+export function RangeFieldPage(props) {
+  var controller = useRangeFieldController(props);
+  var ref = useDesignValidator('RangeFieldPage', RANGE_FIELD_RULES);
+  return <div ref={ref}><RangeFieldSample {...controller} /></div>;
+}

package/src/rangeField/rangeField.js

@@ -0,0 +1,29 @@
+/**
+ * RangeField — pure model. No React.
+ *
+ * NOT DateRange (see ../dateRange) — that's a full quick-preset/range/single
+ * POPOVER picker, built for a report filter that also needs to remember "the
+ * last 30 days" as a living selection. This is just the two-input pair
+ * itself: a From and a To, rendered as one field, for a caller that already
+ * knows it wants an explicit range and has nowhere to put a popover (a
+ * wizard step, a form section) — DateRange's own Range tab is exactly this
+ * shape internally and could sit on top of this instead of duplicating it.
+ *
+ * Two flavours, mirroring dateField's (minus 'age' — a range of ages isn't
+ * a thing):
+ *   - 'date'     → ISO date strings (YYYY-MM-DD)
+ *   - 'datetime' → ISO datetime strings (YYYY-MM-DDTHH:mm)
+ */
+export var RANGE_TYPES = ['date', 'datetime'];
+
+export function emptyRange() {
+  return { from: '', to: '' };
+}
+
+export function normalizeRange(range) {
+  return { from: (range && range.from) || '', to: (range && range.to) || '' };
+}
+
+export function rangeIsSet(range) {
+  return Boolean(range && (range.from || range.to));
+}

package/src/rangeField/useRangeFieldController.js

@@ -0,0 +1,52 @@
+import { useDateFieldController } from '../dateField/useDateFieldController.js';
+import { normalizeRange } from './rangeField.js';
+
+/**
+ * Two DateField controllers, cross-bounded — From can't be set past To, To
+ * can't be set before From, each side gets that for free rather than the
+ * caller re-deriving it. Composition over reimplementation: this is not a
+ * second date-input implementation, it's dateField's, called twice.
+ *
+ * @param {object} props
+ * @param {'date'|'datetime'} [props.type='date']
+ * @param {{from, to}} [props.value] — controlled; {from:'', to:''} if absent
+ * @param {(value: {from, to}) => void} [props.onChange]
+ * @param {Date|string} [props.min] — floor for From (and, absent an explicit To, for To too)
+ * @param {Date|string} [props.max] — ceiling for To (and, absent an explicit From, for From too)
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.fromLabel='From']
+ * @param {string} [props.toLabel='To']
+ * @param {string} [props.toPlaceholder] — e.g. "Now", for an open-ended end
+ */
+export function useRangeFieldController(props) {
+  props = props || {};
+  var type = props.type || 'date';
+  var range = normalizeRange(props.value);
+
+  var from = useDateFieldController({
+    type: type,
+    value: range.from || null,
+    onChange: function(v) { if (props.onChange) props.onChange({ from: v || '', to: range.to }); },
+    min: props.min,
+    max: range.to || props.max,
+    disabled: props.disabled,
+    placeholder: props.fromPlaceholder
+  });
+
+  var to = useDateFieldController({
+    type: type,
+    value: range.to || null,
+    onChange: function(v) { if (props.onChange) props.onChange({ from: range.from, to: v || '' }); },
+    min: range.from || props.min,
+    max: props.max,
+    disabled: props.disabled,
+    placeholder: props.toPlaceholder
+  });
+
+  return {
+    fromLabel: props.fromLabel || 'From',
+    toLabel: props.toLabel || 'To',
+    from: from,
+    to: to
+  };
+}

package/src/rangeField/validateDesign.js

@@ -0,0 +1,3 @@
+export var RANGE_FIELD_RULES = [
+  { selector: '.xeplr-rangefield-field', label: 'Range field wrapper (from/to)' }
+];

package/src/snackbar/snackbar.js

@@ -2,10 +2,13 @@ var _container = null;
 var _queue = [];
 var _timer = null;
 
+// var(--xeplr-*, fallback) — picks up @xeplr/ui-account's theme tokens
+// (light/dark) when that stylesheet is loaded, falls back to these original
+// colors otherwise.
 var DESIGNS = {
-  success: { bg: '#059669', color: '#fff' },
-  error: { bg: '#dc2626', color: '#fff' },
-  default: { bg: '#2563eb', color: '#fff' }
+  success: { bg: 'var(--xeplr-success, #059669)', color: 'var(--xeplr-accent-text, #fff)' },
+  error: { bg: 'var(--xeplr-danger, #dc2626)', color: 'var(--xeplr-accent-text, #fff)' },
+  default: { bg: 'var(--xeplr-accent, #2563eb)', color: 'var(--xeplr-accent-text, #fff)' }
 };
 
 var DEFAULT_DURATION = 3000;