@kenlo/sds-design-system 0.9.9

package/components/TextEditor/TextEditor.css

@@ -0,0 +1,78 @@
+/* SDS TextEditor.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/TextEditor/TextEditor.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS TextEditor
+   ============================================================ */
+
+.sds-text-editor {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background: var(--component-bg-color);
+  font-family: var(--font-family-base);
+  overflow: hidden;
+}
+/* ── Toolbar ── */
+.sds-text-editor__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-bottom: 1px solid var(--border-interactive-color);
+  flex-wrap: wrap;
+}
+/* ── Divider ── */
+.sds-text-editor__divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border-interactive-color);
+  margin: 0 var(--spacing-1);
+  flex-shrink: 0;
+}
+/* ── Content area ── */
+.sds-text-editor__body {
+  padding: var(--spacing-4);
+  outline: none;
+  color: var(--body-color);
+  font-size: var(--font-size-body-md);
+  line-height: var(--lh-body-md);
+  min-height: var(--te-min-height, 200px);
+  word-break: break-word;
+}
+.sds-text-editor__body:empty::before {
+  content: attr(data-placeholder);
+  color: var(--placeholder-color);
+  pointer-events: none;
+}
+/* Images and videos inside editor */
+.sds-text-editor__body img,
+.sds-text-editor__body iframe {
+  max-width: 100%;
+  border-radius: var(--radius-sm);
+  display: block;
+  margin: var(--spacing-2) 0;
+}
+/* Links inside editor */
+.sds-text-editor__body a {
+  color: var(--color-primary-50-solid);
+  text-decoration: underline;
+}
+/* Lists inside editor */
+.sds-text-editor__body ul,
+.sds-text-editor__body ol {
+  padding-left: var(--spacing-5);
+  margin: var(--spacing-2) 0;
+}
+
+
+/* The writing area takes focus and is the main thing on the component, so it shows it.
+   KDLS gives it no focus style: a contenteditable div with no ring is a control a keyboard
+   user cannot tell they have reached. */
+.sds-text-editor__body:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
+  outline-offset: -2px;
+}
+
+/* The toolbar's own buttons are sds-icon-button and sds-menu, which carry their own. */

package/components/TextEditor/safe-url.js

@@ -0,0 +1,50 @@
+/**
+ * Is this URL safe to put in a document?
+ *
+ * KDLS's TextEditor asks the visitor for a URL and builds HTML from the answer:
+ *
+ *     exec('insertHTML', `<img src="${url}" style="max-width:100%" />`)
+ *
+ * Nothing checks the string. An answer that closes the src attribute and opens an event
+ * handler instead — `x" onerror="...` — is handed to onChange, stored, and rendered on a
+ * public page for every later visitor. That is stored XSS, and a design system for public
+ * sites is the last place it belongs. The same hole is in the video insert, and in
+ * createLink, where the scheme `javascript:` on its own is enough.
+ *
+ * So a URL is checked before it is used, and the HTML is built through the DOM rather than
+ * by string concatenation — see text-editor.marko.
+ */
+
+/** Schemes that execute rather than fetch. `data:` is here because an SVG can carry script. */
+const DANGEROUS = /^(javascript|data|vbscript|file|blob):/i;
+
+/** Everything a browser strips before it parses a scheme, which is how `java\nscript:` gets in. */
+const IGNORED = /[\u0000-\u0020]+/g;
+
+/**
+ * A URL the editor will accept, or null.
+ *
+ * Relative URLs and fragments pass: they name no scheme, so they cannot name a dangerous
+ * one. Everything absolute must be http or https.
+ */
+export function safeUrl(raw) {
+  if (typeof raw !== 'string') return null;
+
+  const url = raw.replace(IGNORED, '');
+  if (!url) return null;
+  if (DANGEROUS.test(url)) return null;
+
+  // A scheme is letters, digits, +, - or . before a colon. Anything else is relative.
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url);
+  if (!scheme) return url;
+
+  return /^https?$/i.test(scheme[1]) ? url : null;
+}
+
+/** True when the URL can be the source of an embedded frame. */
+export function safeEmbedUrl(raw) {
+  const url = safeUrl(raw);
+  if (!url) return null;
+  // An embed must be absolute: a relative one frames the page inside itself.
+  return /^https?:/i.test(url) ? url : null;
+}

package/components/TextEditor/text-editor-commands.js

@@ -0,0 +1,22 @@
+/**
+ * What the toolbar can do.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/TextEditor/TextEditor.tsx,
+ * where the same two lists sit at module scope. Pulled into their own file so the portal
+ * and the tests can name a command without reaching into the template.
+ */
+
+export const FONT_SIZES = ['12', '14', '16', '18', '20', '24', '32'];
+
+export const ALIGNMENTS = [
+  { label: 'Esquerda', command: 'justifyLeft' },
+  { label: 'Centro', command: 'justifyCenter' },
+  { label: 'Direita', command: 'justifyRight' },
+];
+
+/** What each prompt asks for. Separated so a caller can replace the prompts entirely. */
+export const PROMPTS = {
+  image: 'URL da imagem:',
+  video: 'URL do vídeo (YouTube embed):',
+  link: 'URL do link:',
+};

package/components/TextEditor/text-editor.marko

@@ -0,0 +1,253 @@
+<!-- sds-text-editor — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/TextEditor/TextEditor.tsx.
+
+     A contenteditable area with a toolbar: sizes, bold, italic, alignment, images, video,
+     links and lists. It uses document.execCommand, as KDLS does — the API is deprecated
+     and has no replacement that does not mean adopting a whole editor library, which is a
+     decision about dependencies rather than a port.
+
+     THE DIVERGENCE THAT MATTERS. KDLS builds HTML by concatenating a string the visitor
+     typed into a prompt:
+
+         exec('insertHTML', `<img src="${url}" style="max-width:100%" />`)
+
+     Nothing checks the string, so an answer that closes the src attribute and opens an
+     event handler instead is inserted as written, handed to onChange, stored, and rendered
+     on a public page for every later visitor. That is stored XSS in a design system for
+     public sites. The same hole is in the video insert and in createLink, where the scheme
+     `javascript:` alone is enough.
+
+     Two things fix it here. Every URL goes through safeUrl or safeEmbedUrl first — see
+     safe-url.js, which is tested on its own including the control-character tricks. And
+     the element is built with createElement and setAttribute rather than assembled as a
+     string, so there is no attribute for a quote to escape out of even if the check is
+     ever wrong.
+
+     The other divergence: the toolbar's state follows the selection. KDLS keeps `fontSize`
+     and `alignment` in React state and never reads them back from the document, so putting
+     the caret in a centred paragraph leaves the toolbar claiming the text is
+     left-aligned — the control describes the last button pressed rather than the text the
+     visitor is looking at. -->
+
+import { safeUrl, safeEmbedUrl } from "./safe-url.js";
+import { FONT_SIZES, ALIGNMENTS, PROMPTS } from "./text-editor-commands.js";
+import fontSizeIcon from "../../icons/generated/fluent-text-font-size-regular.marko";
+import boldIcon from "../../icons/generated/fluent-text-bold-regular.marko";
+import italicIcon from "../../icons/generated/fluent-text-italic-regular.marko";
+import alignLeftIcon from "../../icons/generated/fluent-text-align-left-regular.marko";
+import alignCenterIcon from "../../icons/generated/fluent-text-align-center-regular.marko";
+import alignRightIcon from "../../icons/generated/fluent-text-align-right-regular.marko";
+import imageIcon from "../../icons/generated/fluent-image-regular.marko";
+import videoIcon from "../../icons/generated/fluent-video-regular.marko";
+import linkIcon from "../../icons/generated/fluent-link-regular.marko";
+import bulletListIcon from "../../icons/generated/fluent-text-bullet-list-regular.marko";
+import numberListIcon from "../../icons/generated/fluent-text-number-list-ltr-regular.marko";
+
+class {
+  onCreate(input) {
+    this.state = { fontSize: "16", alignment: 0 };
+  }
+
+  onMount() {
+    const body = this.getEl("body");
+    if (body && this.input.defaultValue) body.innerHTML = this.input.defaultValue;
+
+    // The toolbar follows the caret. KDLS never reads the document back, so the buttons
+    // describe the last thing pressed instead of the text the visitor is looking at.
+    this.onSelectionChange = () => {
+      const editor = this.getEl("body");
+      if (!editor || !editor.contains(document.getSelection()?.anchorNode)) return;
+      const index = ALIGNMENTS.findIndex((a) => document.queryCommandState?.(a.command));
+      if (index !== -1) this.state.alignment = index;
+    };
+    document.addEventListener("selectionchange", this.onSelectionChange);
+  }
+
+  onDestroy() {
+    document.removeEventListener("selectionchange", this.onSelectionChange);
+  }
+
+  report() {
+    this.input.onChange?.(this.getEl("body")?.innerHTML ?? "");
+  }
+
+  exec(command, value) {
+    const body = this.getEl("body");
+    body?.focus();
+    document.execCommand(command, false, value);
+    this.report();
+  }
+
+  /**
+   * Puts a node where the caret is.
+   *
+   * Built through the DOM rather than as a string: there is no attribute for a quote to
+   * escape out of, whatever the URL turns out to contain.
+   */
+  insertNode(node) {
+    const body = this.getEl("body");
+    if (!body) return;
+    body.focus();
+    const selection = document.getSelection();
+    if (selection?.rangeCount && body.contains(selection.anchorNode)) {
+      const range = selection.getRangeAt(0);
+      range.deleteContents();
+      range.insertNode(node);
+      range.setStartAfter(node);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    } else {
+      body.appendChild(node);
+    }
+    this.report();
+  }
+
+  setFontSize(size) {
+    this.state.fontSize = size;
+    // execCommand's fontSize only understands 1 to 7, so the size is applied by finding
+    // what it produced and restyling it. Carried from KDLS, which is the usual workaround.
+    this.exec("fontSize", "7");
+    const body = this.getEl("body");
+    if (!body) return;
+    for (const font of body.querySelectorAll('font[size="7"]')) {
+      font.removeAttribute("size");
+      font.style.fontSize = `${size}px`;
+    }
+    this.report();
+  }
+
+  setAlignment(index) {
+    this.state.alignment = index;
+    this.exec(ALIGNMENTS[index].command);
+  }
+
+  /** Asks for a URL and refuses one that would execute. */
+  askFor(kind) {
+    const asked = this.input.promptFor
+      ? this.input.promptFor(kind)
+      : window.prompt(PROMPTS[kind]);
+    const url = kind === "video" ? safeEmbedUrl(asked) : safeUrl(asked);
+    if (asked && !url) this.input.onRejectedUrl?.(asked);
+    return url;
+  }
+
+  insertImage() {
+    const url = this.askFor("image");
+    if (!url) return;
+    const image = document.createElement("img");
+    image.setAttribute("src", url);
+    image.setAttribute("alt", "");
+    image.style.maxWidth = "100%";
+    this.insertNode(image);
+  }
+
+  insertVideo() {
+    const url = this.askFor("video");
+    if (!url) return;
+    const frame = document.createElement("iframe");
+    frame.setAttribute("src", url);
+    frame.setAttribute("width", "100%");
+    frame.setAttribute("height", "315");
+    frame.setAttribute("allowfullscreen", "");
+    frame.setAttribute("frameborder", "0");
+    frame.style.display = "block";
+    this.insertNode(frame);
+  }
+
+  insertLink() {
+    const url = this.askFor("link");
+    if (url) this.exec("createLink", url);
+  }
+}
+
+$ {
+  const {
+    placeholder = "Digite aqui...",
+    minHeight = 200,
+    label = "Editor de texto",
+    class: extraClass = "",
+  } = input;
+
+  const alignmentIcons = [alignLeftIcon, alignCenterIcon, alignRightIcon];
+  const current = ALIGNMENTS[state.alignment];
+}
+
+<div class=`sds-text-editor ${extraClass}`.trim()>
+  <div class="sds-text-editor__toolbar" role="toolbar" aria-label="Formatação de texto">
+    <sds-menu
+      trigger="navButton"
+      label=state.fontSize
+      icon=fontSizeIcon
+      placement="bottomLeft"
+      aria-label="Tamanho do texto"
+      items=FONT_SIZES.map((size) => ({
+        label: `${size}px`,
+        value: size,
+        active: state.fontSize === size,
+        onClick: () => component.setFontSize(size),
+      }))
+    />
+
+    <div class="sds-text-editor__divider"/>
+
+    <sds-icon-button aria-label="Negrito" onClick=() => component.exec("bold")>
+      <@icon><${boldIcon}/></@icon>
+    </sds-icon-button>
+    <sds-icon-button aria-label="Itálico" onClick=() => component.exec("italic")>
+      <@icon><${italicIcon}/></@icon>
+    </sds-icon-button>
+
+    <div class="sds-text-editor__divider"/>
+
+    <sds-menu
+      trigger="navButton"
+      icon=alignmentIcons[state.alignment]
+      placement="bottomLeft"
+      aria-label=`Alinhamento: ${current.label}`
+      items=ALIGNMENTS.map((alignment, index) => ({
+        label: alignment.label,
+        value: alignment.command,
+        icon: alignmentIcons[index],
+        active: state.alignment === index,
+        onClick: () => component.setAlignment(index),
+      }))
+    />
+
+    <div class="sds-text-editor__divider"/>
+
+    <sds-icon-button aria-label="Inserir imagem" onClick=() => component.insertImage()>
+      <@icon><${imageIcon}/></@icon>
+    </sds-icon-button>
+    <sds-icon-button aria-label="Inserir vídeo" onClick=() => component.insertVideo()>
+      <@icon><${videoIcon}/></@icon>
+    </sds-icon-button>
+    <sds-icon-button aria-label="Inserir link" onClick=() => component.insertLink()>
+      <@icon><${linkIcon}/></@icon>
+    </sds-icon-button>
+
+    <div class="sds-text-editor__divider"/>
+
+    <sds-icon-button aria-label="Lista" onClick=() => component.exec("insertUnorderedList")>
+      <@icon><${bulletListIcon}/></@icon>
+    </sds-icon-button>
+    <sds-icon-button aria-label="Lista numerada" onClick=() => component.exec("insertOrderedList")>
+      <@icon><${numberListIcon}/></@icon>
+    </sds-icon-button>
+  </div>
+
+  <!-- The initial HTML is written in onMount rather than rendered, so the server never
+       serialises markup it was handed by a caller. -->
+  <div
+    key="body"
+    class="sds-text-editor__body"
+    contenteditable="true"
+    role="textbox"
+    aria-multiline="true"
+    aria-label=label
+    tabindex="0"
+    style=`--te-min-height:${minHeight}px`
+    data-placeholder=placeholder
+    on-input("report")
+  />
+</div>

package/components/Toast/Toast.css

@@ -0,0 +1,88 @@
+/* SDS Toast.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/Toast.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS Toast
+   Light: --color-neutral-90 bg (#1A1A1A) + --color-neutral-00 text (#FFFFFF)
+   Dark:  tokens auto-invert → light bg + dark text
+   ============================================================ */
+
+.sds-toast {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3) var(--spacing-4);
+  min-height: 56px;
+  width: 360px;
+  /* Divergence: KDLS caps this at a flat 360px, which is wider than a 375px phone once
+     anything around it has padding — the toast then pushes the page sideways. The design
+     width is kept; what changes is that it gives way rather than overflow. */
+  max-width: min(360px, 100%);
+  background: var(--color-neutral-90);
+  color: var(--component-bg-color);
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  line-height: var(--lh-body-md);
+  box-shadow: var(--shadow-drop-md);
+  /* Enter: slides in from the left + fade, decelerating (no bounce) */
+  animation: sds-toast-enter 350ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
+}
+/* Exit: slides back to the left + fade, accelerating */
+.sds-toast--leaving {
+  animation: sds-toast-exit 220ms cubic-bezier(0.3, 0, 0.8, 0.15) both;
+}
+@keyframes sds-toast-enter {
+  from { opacity: 0; transform: translateX(-110%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes sds-toast-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(-110%); }
+}
+/* ── Toaster: fixed container in the bottom-left corner (via portal) ── */
+.sds-toaster {
+  position: fixed;
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
+  z-index: var(--z-notice);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  pointer-events: none;
+}
+.sds-toaster > * {
+  pointer-events: auto;
+}
+.sds-toast__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.sds-toast__message {
+  flex: 1;
+}
+.sds-toast__dismiss {
+  flex-shrink: 0;
+  color: inherit; /* <button> resets color; force inheritance from .sds-toast */
+}
+/* .sds-toast parent adds specificity 0,4,0 — beats neutral variant + dark mode overrides */
+.sds-toast .sds-toast__dismiss.sds-icon-button .sds-icon-button__icon {
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 120ms ease;
+}
+.sds-toast .sds-toast__dismiss.sds-icon-button:hover .sds-icon-button__icon {
+  opacity: 1;
+}
+.sds-toast__dismiss.sds-icon-button--sm:hover:not(:disabled) {
+  background-color: var(--color-opacity-inverse-10);
+}
+.sds-toast__dismiss.sds-icon-button--sm:active:not(:disabled) {
+  background-color: var(--color-opacity-inverse-20);
+}
+/* The dark-theme values now live in the token itself — see --color-opacity-inverse-* in
+   tokens.css, which carries KDLS's lower alphas for the dark case. */

package/components/Toast/toast-api.js

@@ -0,0 +1,19 @@
+/**
+ * Firing a toast from anywhere.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/toast-api.ts. Mount
+ * <sds-toaster/> once at the root of the page and call toast(...) from wherever — including
+ * from a catch block that knows nothing about components, which is the whole reason this is
+ * an imperative API rather than a prop.
+ */
+import { addToast, dismissToast } from './toast-store.js';
+
+export function toast(message, opts) {
+  return addToast(message, opts);
+}
+
+toast.success = (message, opts) => addToast(message, { ...opts, feedback: 'success' });
+toast.error = (message, opts) => addToast(message, { ...opts, feedback: 'error' });
+toast.alert = (message, opts) => addToast(message, { ...opts, feedback: 'alert' });
+toast.neutral = (message, opts) => addToast(message, { ...opts, feedback: 'neutral' });
+toast.dismiss = (id) => dismissToast(id);

package/components/Toast/toast-store.js

@@ -0,0 +1,118 @@
+/**
+ * The list of live toasts, their timers, and who to tell when it changes.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/toast-store.ts, which is
+ * already framework-free — a module-level list and a set of listeners. That is what lets
+ * `toast(...)` be called from anywhere, including from a catch block that is nowhere near a
+ * component, and it survives the move from React to Marko untouched in behaviour.
+ *
+ * The only change is the class name in the comment below, because the exit animation it
+ * points at is now sds-toast--leaving.
+ */
+
+/** Fixed by the design system: 4s, or 8s when the visitor needs time to read a failure. */
+const DURATION_DEFAULT = 4000;
+const DURATION_ERROR = 8000;
+
+/** Must match the exit animation in Toast.css (.sds-toast--leaving). */
+export const TOAST_EXIT_MS = 220;
+
+let toasts = [];
+let seq = 0;
+const listeners = new Set();
+const running = new Map();
+
+function emit() {
+  const snapshot = [...toasts];
+  listeners.forEach((listener) => listener(snapshot));
+}
+
+/**
+ * Subscribes to list changes. Calls back immediately with the current state, so a listener
+ * that arrives after a toast was fired still sees it. Returns the unsubscribe function.
+ */
+export function subscribe(listener) {
+  listeners.add(listener);
+  listener([...toasts]);
+  return () => { listeners.delete(listener); };
+}
+
+function arm(id, ms) {
+  const timeout = setTimeout(() => startLeaving(id), ms);
+  running.set(id, { timeout, startedAt: Date.now(), remaining: ms });
+}
+
+function startLeaving(id) {
+  const item = toasts.find((t) => t.id === id);
+  if (!item || item.leaving) return;
+  const timer = running.get(id);
+  if (timer) {
+    clearTimeout(timer.timeout);
+    running.delete(id);
+  }
+  toasts = toasts.map((t) => (t.id === id ? { ...t, leaving: true } : t));
+  emit();
+  setTimeout(() => remove(id), TOAST_EXIT_MS);
+}
+
+function remove(id) {
+  toasts = toasts.filter((t) => t.id !== id);
+  emit();
+}
+
+/** Adds a toast and schedules its own dismissal. Returns the id. */
+export function addToast(message, opts = {}) {
+  const id = ++seq;
+  const feedback = opts.feedback ?? 'neutral';
+  const duration = feedback === 'error' ? DURATION_ERROR : DURATION_DEFAULT;
+  const item = {
+    id,
+    message,
+    feedback,
+    actionLabel: opts.actionLabel,
+    onAction: opts.onAction,
+    actionDisabled: opts.actionDisabled,
+    actionDisabledTooltip: opts.actionDisabledTooltip,
+    actionDisabledTooltipPosition: opts.actionDisabledTooltipPosition,
+    showDismiss: opts.showDismiss ?? true,
+    leaving: false,
+  };
+  toasts = [...toasts, item];
+  emit();
+  arm(id, duration);
+  return id;
+}
+
+/** Closes a toast by hand, through the same exit animation. */
+export function dismissToast(id) {
+  startLeaving(id);
+}
+
+/**
+ * Holds every timer where it is. The container calls this on hover: a toast that vanishes
+ * while someone is reaching for its action is a toast that wasted their time.
+ */
+export function pauseAll() {
+  running.forEach((timer) => {
+    clearTimeout(timer.timeout);
+    const elapsed = Date.now() - timer.startedAt;
+    timer.remaining = Math.max(0, timer.remaining - elapsed);
+  });
+}
+
+/** Starts them again with whatever time they had left. */
+export function resumeAll() {
+  running.forEach((timer, id) => {
+    timer.timeout = setTimeout(() => startLeaving(id), timer.remaining);
+    timer.startedAt = Date.now();
+  });
+}
+
+/** Tests only: the list is module state and outlives them. */
+export function resetToasts() {
+  running.forEach((timer) => clearTimeout(timer.timeout));
+  running.clear();
+  toasts = [];
+  seq = 0;
+  emit();
+}

package/components/Toast/toast-variants.js

@@ -0,0 +1,16 @@
+/**
+ * The Toast's vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/Toast.tsx, where it was
+ * a TypeScript union that disappears at build time. Checked at render here, or an unknown
+ * value renders an unstyled panel with no icon and nobody finds out until a customer does.
+ */
+
+export const TOAST_FEEDBACK = ['neutral', 'success', 'alert', 'error'];
+
+export function assertToastFeedback(value) {
+  if (!TOAST_FEEDBACK.includes(value)) {
+    throw new Error(`Unknown toast feedback: "${value}". Allowed: ${TOAST_FEEDBACK.join(', ')}`);
+  }
+  return value;
+}