@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/helpers/richText.js

@@ -0,0 +1,197 @@
+import DOMPurify from "dompurify";
+const MENTION_TAG = "user";
+const RICH_TEXT_COLORS = [
+  "default",
+  "brand",
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "accent",
+  "secondary",
+  "muted"
+];
+const RICH_TEXT_COLOR_CLASS = {
+  brand: "rt-color-brand",
+  secondary: "rt-color-secondary",
+  accent: "rt-color-accent",
+  success: "rt-color-success",
+  warning: "rt-color-warning",
+  danger: "rt-color-danger",
+  info: "rt-color-info",
+  muted: "rt-color-muted"
+};
+const RICH_TEXT_COLOR_SWATCH_CLASS = {
+  default: "bg-foreground",
+  brand: "bg-brand",
+  secondary: "bg-secondary",
+  accent: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  muted: "bg-foreground-faint"
+};
+const RICH_TEXT_FILE_CLASS = "rt-file";
+const RICH_TEXT_IMAGE_CLASS = "rt-image";
+const RICH_TEXT_IMAGE_LINK_CLASS = "rt-image-link";
+const COLOR_CLASS_LIST = Object.values(RICH_TEXT_COLOR_CLASS);
+const ALLOWED_CLASSES = /* @__PURE__ */ new Set([
+  ...COLOR_CLASS_LIST,
+  RICH_TEXT_FILE_CLASS,
+  RICH_TEXT_IMAGE_CLASS,
+  RICH_TEXT_IMAGE_LINK_CLASS
+]);
+const ALLOWED_TAGS = [
+  MENTION_TAG,
+  "p",
+  "br",
+  "div",
+  "span",
+  "b",
+  "strong",
+  "i",
+  "em",
+  "s",
+  "strike",
+  "u",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "a",
+  "img"
+];
+const ALLOWED_ATTR = ["href", "target", "rel", "class", "src", "alt", "width", "height"];
+let hookRegistered = false;
+const registerSanitizerHooks = () => {
+  if (hookRegistered) return;
+  hookRegistered = true;
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    const element = node;
+    if (element.tagName === "A") {
+      element.setAttribute("target", "_blank");
+      element.setAttribute("rel", "noopener noreferrer");
+    }
+    if (!element.getAttribute?.("class")) return;
+    const kept = (element.getAttribute("class") ?? "").split(/\s+/).filter((className) => ALLOWED_CLASSES.has(className));
+    if (kept.length) element.setAttribute("class", kept.join(" "));
+    else element.removeAttribute("class");
+  });
+};
+const isPlainTextBody = (html) => {
+  if (!html) return true;
+  return !/<(?!\/?user\b)[a-z][^>]*>/i.test(html);
+};
+const sanitizeRichText = (html) => {
+  if (!html) return "";
+  registerSanitizerHooks();
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOW_DATA_ATTR: false
+  });
+};
+const richTextToPlainText = (html) => {
+  if (!html) return "";
+  const parsed = new DOMParser().parseFromString(sanitizeRichText(html), "text/html");
+  return (parsed.body.textContent ?? "").trim();
+};
+const isRichTextEmpty = (html) => {
+  if (richTextToPlainText(html).length > 0) return false;
+  const parsed = new DOMParser().parseFromString(sanitizeRichText(html), "text/html");
+  return parsed.body.querySelector(`img, .${RICH_TEXT_FILE_CLASS}`) === null;
+};
+const HTML_ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;"
+};
+const plainTextToRichHtml = (text) => {
+  if (!text) return "";
+  return text.replace(/[&<>]/g, (character) => HTML_ESCAPES[character] ?? character).replace(/\n/g, "<br>");
+};
+const toEditableRichHtml = (value) => isPlainTextBody(value) ? plainTextToRichHtml(value) : value ?? "";
+const COLOR_SENTINEL_HEX = "#010203";
+const COLOR_SENTINEL_RGB = "rgb(1,2,3)";
+const stripColorClasses = (element) => {
+  COLOR_CLASS_LIST.forEach((className) => element.classList.remove(className));
+  if (!element.classList.length) element.removeAttribute("class");
+};
+const unwrapIfBare = (element) => {
+  if (element.tagName !== "SPAN" || element.attributes.length > 0) return;
+  const parent = element.parentNode;
+  if (!parent) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+const normalizeRichTextColorNodes = (editor, color) => {
+  const targetClass = color === "default" ? "" : RICH_TEXT_COLOR_CLASS[color];
+  editor.querySelectorAll('[style*="color"]').forEach((node) => {
+    if (node.style.color.replace(/\s/g, "") !== COLOR_SENTINEL_RGB) return;
+    node.style.removeProperty("color");
+    if (!node.getAttribute("style")) node.removeAttribute("style");
+    node.querySelectorAll("[class]").forEach(stripColorClasses);
+    stripColorClasses(node);
+    if (targetClass) node.classList.add(targetClass);
+    else unwrapIfBare(node);
+  });
+};
+const applyRichTextColor = (editor, color) => {
+  document.execCommand("styleWithCSS", false, "true");
+  document.execCommand("foreColor", false, COLOR_SENTINEL_HEX);
+  normalizeRichTextColorNodes(editor, color);
+};
+const activeRichTextColor = (editor) => {
+  const selection = window.getSelection();
+  const anchor = selection?.anchorNode;
+  if (!anchor) return "default";
+  const element = anchor.nodeType === Node.ELEMENT_NODE ? anchor : anchor.parentElement;
+  if (!element || !editor.contains(element)) return "default";
+  const colored = element.closest(COLOR_CLASS_LIST.map((className) => `.${className}`).join(","));
+  if (!colored || !editor.contains(colored)) return "default";
+  const match = Object.entries(RICH_TEXT_COLOR_CLASS).find(
+    ([, className]) => colored.classList.contains(className)
+  );
+  return match?.[0] ?? "default";
+};
+const isImageAttachment = (attachment) => attachment.kind === "image" || attachment.mimeType?.startsWith("image/") === true;
+const buildFileChipMarkup = (attachment) => {
+  const link = document.createElement("a");
+  link.setAttribute("href", attachment.url);
+  link.setAttribute("target", "_blank");
+  link.setAttribute("rel", "noopener noreferrer");
+  if (!isImageAttachment(attachment)) {
+    link.setAttribute("class", RICH_TEXT_FILE_CLASS);
+    link.textContent = attachment.name;
+    return link.outerHTML;
+  }
+  const image = document.createElement("img");
+  image.setAttribute("src", attachment.url);
+  image.setAttribute("alt", attachment.name);
+  image.setAttribute("class", RICH_TEXT_IMAGE_CLASS);
+  if (attachment.width) image.setAttribute("width", String(attachment.width));
+  if (attachment.height) image.setAttribute("height", String(attachment.height));
+  link.setAttribute("class", RICH_TEXT_IMAGE_LINK_CLASS);
+  link.appendChild(image);
+  return link.outerHTML;
+};
+export {
+  RICH_TEXT_COLORS,
+  RICH_TEXT_COLOR_CLASS,
+  RICH_TEXT_COLOR_SWATCH_CLASS,
+  RICH_TEXT_FILE_CLASS,
+  RICH_TEXT_IMAGE_CLASS,
+  RICH_TEXT_IMAGE_LINK_CLASS,
+  activeRichTextColor,
+  applyRichTextColor,
+  buildFileChipMarkup,
+  isPlainTextBody,
+  isRichTextEmpty,
+  normalizeRichTextColorNodes,
+  plainTextToRichHtml,
+  richTextToPlainText,
+  sanitizeRichText,
+  toEditableRichHtml
+};
+//# sourceMappingURL=richText.js.map

package/dist/helpers/richText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richText.js","sources":["../../src/helpers/richText.ts"],"sourcesContent":["import DOMPurify from 'dompurify';\n\nimport { IFileAttachment } from '../interfaces/IFileAttachment';\n\n/**\n * Rich text authored in this app is HTML written by a user, so nothing here reaches the DOM\n * without passing through the sanitizer first, and nothing the editor writes may carry a\n * literal colour: a hex picked under the light theme is unreadable under the dark one. Colour\n * travels as one of these class names and the theme resolves it, so the same stored string\n * stays legible in both.\n */\nconst MENTION_TAG = 'user';\n\nexport type TRichTextColor =\n  'default' | 'brand' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'muted';\n\nexport const RICH_TEXT_COLORS: Array<TRichTextColor> = [\n  'default',\n  'brand',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'accent',\n  'secondary',\n  'muted',\n];\n\nexport const RICH_TEXT_COLOR_CLASS: Record<Exclude<TRichTextColor, 'default'>, string> = {\n  brand: 'rt-color-brand',\n  secondary: 'rt-color-secondary',\n  accent: 'rt-color-accent',\n  success: 'rt-color-success',\n  warning: 'rt-color-warning',\n  danger: 'rt-color-danger',\n  info: 'rt-color-info',\n  muted: 'rt-color-muted',\n};\n\n/** The swatch shown in the palette: a token-driven background, never the stored value. */\nexport const RICH_TEXT_COLOR_SWATCH_CLASS: Record<TRichTextColor, string> = {\n  default: 'bg-foreground',\n  brand: 'bg-brand',\n  secondary: 'bg-secondary',\n  accent: 'bg-accent',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n  info: 'bg-info',\n  muted: 'bg-foreground-faint',\n};\n\nexport const RICH_TEXT_FILE_CLASS = 'rt-file';\n/** An image written INTO the body, as opposed to a file referenced by name. */\nexport const RICH_TEXT_IMAGE_CLASS = 'rt-image';\nexport const RICH_TEXT_IMAGE_LINK_CLASS = 'rt-image-link';\n\nconst COLOR_CLASS_LIST = Object.values(RICH_TEXT_COLOR_CLASS);\nconst ALLOWED_CLASSES = new Set<string>([\n  ...COLOR_CLASS_LIST,\n  RICH_TEXT_FILE_CLASS,\n  RICH_TEXT_IMAGE_CLASS,\n  RICH_TEXT_IMAGE_LINK_CLASS,\n]);\n\nconst ALLOWED_TAGS = [\n  MENTION_TAG,\n  'p',\n  'br',\n  'div',\n  'span',\n  'b',\n  'strong',\n  'i',\n  'em',\n  's',\n  'strike',\n  'u',\n  'ul',\n  'ol',\n  'li',\n  'blockquote',\n  'a',\n  'img',\n];\n\nconst ALLOWED_ATTR = ['href', 'target', 'rel', 'class', 'src', 'alt', 'width', 'height'];\n\nlet hookRegistered = false;\n\nconst registerSanitizerHooks = (): void => {\n  if (hookRegistered) return;\n  hookRegistered = true;\n\n  DOMPurify.addHook('afterSanitizeAttributes', (node) => {\n    const element = node as HTMLElement;\n\n    // A link authored by someone else must not be able to reach back into this tab.\n    if (element.tagName === 'A') {\n      element.setAttribute('target', '_blank');\n      element.setAttribute('rel', 'noopener noreferrer');\n    }\n\n    if (!element.getAttribute?.('class')) return;\n\n    const kept = (element.getAttribute('class') ?? '')\n      .split(/\\s+/)\n      .filter((className) => ALLOWED_CLASSES.has(className));\n\n    if (kept.length) element.setAttribute('class', kept.join(' '));\n    else element.removeAttribute('class');\n  });\n};\n\n/**\n * Text written before the rich editor existed is plain text with real line breaks. Rendered as\n * HTML those breaks collapse, so the renderer needs to know which format it is looking at.\n */\nexport const isPlainTextBody = (html?: string): boolean => {\n  if (!html) return true;\n\n  return !/<(?!\\/?user\\b)[a-z][^>]*>/i.test(html);\n};\n\nexport const sanitizeRichText = (html?: string): string => {\n  if (!html) return '';\n\n  registerSanitizerHooks();\n\n  return DOMPurify.sanitize(html, {\n    ALLOWED_TAGS,\n    ALLOWED_ATTR,\n    ALLOW_DATA_ATTR: false,\n  });\n};\n\n/** Emptiness has to be measured on the text: an editor the user only clicked into holds `<br>`. */\nexport const richTextToPlainText = (html?: string): string => {\n  if (!html) return '';\n\n  const parsed = new DOMParser().parseFromString(sanitizeRichText(html), 'text/html');\n  return (parsed.body.textContent ?? '').trim();\n};\n\n/**\n * A body whose only content is an attachment has no text at all, so measuring emptiness on the\n * text alone would throw away the picture the user just wrote into the field.\n */\nexport const isRichTextEmpty = (html?: string): boolean => {\n  if (richTextToPlainText(html).length > 0) return false;\n\n  const parsed = new DOMParser().parseFromString(sanitizeRichText(html), 'text/html');\n  return parsed.body.querySelector(`img, .${RICH_TEXT_FILE_CLASS}`) === null;\n};\n\nconst HTML_ESCAPES: Record<string, string> = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n};\n\n/**\n * Seeds the editor from a value stored before the field became rich text. The line structure is\n * preserved and the text is escaped, so nothing in it is read as markup.\n */\nexport const plainTextToRichHtml = (text?: string): string => {\n  if (!text) return '';\n\n  return text.replace(/[&<>]/g, (character) => HTML_ESCAPES[character] ?? character).replace(/\\n/g, '<br>');\n};\n\n/** The value as the editor should receive it, whichever format it was stored in. */\nexport const toEditableRichHtml = (value?: string): string =>\n  isPlainTextBody(value) ? plainTextToRichHtml(value) : (value ?? '');\n\n/**\n * `foreColor` is the only command that knows how to split a partial selection, so the colour is\n * applied through it with a value nothing else in the app uses, and the nodes it just produced\n * are then rewritten to the theme class. Nothing keeps the literal colour.\n */\nconst COLOR_SENTINEL_HEX = '#010203';\nconst COLOR_SENTINEL_RGB = 'rgb(1,2,3)';\n\nconst stripColorClasses = (element: HTMLElement): void => {\n  COLOR_CLASS_LIST.forEach((className) => element.classList.remove(className));\n  if (!element.classList.length) element.removeAttribute('class');\n};\n\nconst unwrapIfBare = (element: HTMLElement): void => {\n  if (element.tagName !== 'SPAN' || element.attributes.length > 0) return;\n\n  const parent = element.parentNode;\n  if (!parent) return;\n\n  while (element.firstChild) parent.insertBefore(element.firstChild, element);\n  parent.removeChild(element);\n};\n\n/**\n * Rewrites whatever `foreColor` just produced. Called again on every input because a colour\n * chosen with no selection only materialises on the next typed character: without this pass\n * that character would keep the literal sentinel colour, which the sanitizer drops.\n */\nexport const normalizeRichTextColorNodes = (editor: HTMLElement, color: TRichTextColor): void => {\n  const targetClass = color === 'default' ? '' : RICH_TEXT_COLOR_CLASS[color];\n\n  editor.querySelectorAll<HTMLElement>('[style*=\"color\"]').forEach((node) => {\n    if (node.style.color.replace(/\\s/g, '') !== COLOR_SENTINEL_RGB) return;\n\n    node.style.removeProperty('color');\n    if (!node.getAttribute('style')) node.removeAttribute('style');\n\n    node.querySelectorAll<HTMLElement>('[class]').forEach(stripColorClasses);\n    stripColorClasses(node);\n\n    if (targetClass) node.classList.add(targetClass);\n    else unwrapIfBare(node);\n  });\n};\n\nexport const applyRichTextColor = (editor: HTMLElement, color: TRichTextColor): void => {\n  document.execCommand('styleWithCSS', false, 'true');\n  document.execCommand('foreColor', false, COLOR_SENTINEL_HEX);\n  normalizeRichTextColorNodes(editor, color);\n};\n\n/** The colour of the text under the caret, so the palette can show what is currently applied. */\nexport const activeRichTextColor = (editor: HTMLElement): TRichTextColor => {\n  const selection = window.getSelection();\n  const anchor = selection?.anchorNode;\n  if (!anchor) return 'default';\n\n  const element = anchor.nodeType === Node.ELEMENT_NODE ? (anchor as HTMLElement) : anchor.parentElement;\n  if (!element || !editor.contains(element)) return 'default';\n\n  const colored = element.closest<HTMLElement>(COLOR_CLASS_LIST.map((className) => `.${className}`).join(','));\n  if (!colored || !editor.contains(colored)) return 'default';\n\n  const match = (Object.entries(RICH_TEXT_COLOR_CLASS) as Array<[Exclude<TRichTextColor, 'default'>, string]>).find(\n    ([, className]) => colored.classList.contains(className),\n  );\n\n  return match?.[0] ?? 'default';\n};\n\nconst isImageAttachment = (attachment: IFileAttachment): boolean =>\n  attachment.kind === 'image' || attachment.mimeType?.startsWith('image/') === true;\n\n/**\n * An uploaded file referenced from inside the body. Hosts that have no attachment field of\n * their own still keep the reference, because it travels in the same string the text does.\n * An image is written as the picture itself, wrapped in the link that opens it at full size:\n * a name-only chip hides what was attached, and the reader has no way to look at it.\n */\nexport const buildFileChipMarkup = (attachment: IFileAttachment): string => {\n  const link = document.createElement('a');\n  link.setAttribute('href', attachment.url);\n  link.setAttribute('target', '_blank');\n  link.setAttribute('rel', 'noopener noreferrer');\n\n  if (!isImageAttachment(attachment)) {\n    link.setAttribute('class', RICH_TEXT_FILE_CLASS);\n    link.textContent = attachment.name;\n    return link.outerHTML;\n  }\n\n  const image = document.createElement('img');\n  image.setAttribute('src', attachment.url);\n  image.setAttribute('alt', attachment.name);\n  image.setAttribute('class', RICH_TEXT_IMAGE_CLASS);\n  if (attachment.width) image.setAttribute('width', String(attachment.width));\n  if (attachment.height) image.setAttribute('height', String(attachment.height));\n\n  link.setAttribute('class', RICH_TEXT_IMAGE_LINK_CLASS);\n  link.appendChild(image);\n  return link.outerHTML;\n};\n"],"names":[],"mappings":"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"}

package/dist/helpers/stringHelpers.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Truncate text to a specified length and append ellipsis
+ * @param value - The text to truncate
+ * @param length - Maximum length before truncation (default: 100)
+ * @returns Truncated text with ellipsis or original text if shorter than limit
+ */
+export declare const sliceText: (value: string, length?: number) => string;
+/**
+ * Capitalize the first letter of a string and lowercase the rest
+ * @param str - The string to capitalize
+ * @param allWords - If true, capitalizes the first letter of each word
+ * @returns Capitalized string or empty string if invalid input
+ */
+export declare const capitalize: (str?: string, allWords?: boolean) => string;
+/**
+ * Capitalize the first letter of each word in a string
+ * @param str - The string to capitalize
+ * @returns String with each word capitalized or empty string if invalid input
+ */
+export declare const capitalizeAllLetters: (str?: string) => string;
+/**
+ * Normalize text by removing accents and converting to lowercase
+ * @param text - The text to normalize
+ * @returns Normalized text without accents in lowercase
+ */
+export declare function normalizeText(text: string): string;
+/**
+ * Check if a parameter contains a search term (case and accent insensitive)
+ * @param param - The text to search in
+ * @param search - The search term
+ * @returns True if the search term is found in the parameter
+ */
+export declare const formatFilter: (param: string | undefined | null, search: string | number) => boolean;
+/**
+ * Extract the first name from a full name
+ * @param name - The full name string
+ * @returns The first word/name from the full name
+ */
+export declare const getFirstName: (name: string) => string;
+/**
+ * Generate avatar letters from a user's name
+ * @param name - The user's full name
+ * @returns 1-2 uppercase letters for avatar display (first + last name initials)
+ */
+export declare const getUserAvatarLetters: (name: string) => string;

package/dist/helpers/stringHelpers.js

@@ -0,0 +1,57 @@
+const sliceText = (value, length = 100) => {
+  if (value === void 0 || value.length < length) return value;
+  return `${value.slice(0, length)}...`;
+};
+const LOWERCASE_LETTER_PATTERN = /\p{Ll}/u;
+const UPPERCASE_LETTER_PATTERN = /\p{Lu}/u;
+const hasDeliberateCasing = (word) => LOWERCASE_LETTER_PATTERN.test(word) && UPPERCASE_LETTER_PATTERN.test(word.slice(1));
+const capitalizeWord = (word) => hasDeliberateCasing(word) ? word : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+const capitalize = (str, allWords = false) => {
+  if (!str || typeof str !== "string") return "";
+  if (allWords) return str.split(" ").map(capitalizeWord).join(" ");
+  const [firstWord, ...otherWords] = str.split(" ");
+  return [
+    capitalizeWord(firstWord),
+    ...otherWords.map((word) => hasDeliberateCasing(word) ? word : word.toLowerCase())
+  ].join(" ");
+};
+const capitalizeAllLetters = (str) => {
+  if (!str || typeof str !== "string") return "";
+  return str.split(" ").map(capitalizeWord).join(" ");
+};
+function normalizeText(text) {
+  if (text === void 0 || text === null) return "";
+  text = text.toLowerCase();
+  text = text.replace(/[áàãâä]/g, "a");
+  text = text.replace(/[éèêë]/g, "e");
+  text = text.replace(/[íìîï]/g, "i");
+  text = text.replace(/[óòõôö]/g, "o");
+  text = text.replace(/[úùûü]/g, "u");
+  text = text.replace(/[ç]/g, "c");
+  return text;
+}
+const formatFilter = (param, search) => normalizeText(param || "").includes(normalizeText(String(search)));
+const getFirstName = (name) => {
+  return (name ?? "").split(" ")[0];
+};
+const getUserAvatarLetters = (name) => {
+  if (!name) return "";
+  if (typeof name !== "string") return "";
+  if (!name.includes(" ")) {
+    return name.substring(0, 2).toUpperCase();
+  }
+  const words = name.split(" ");
+  const ret = [words[0]];
+  if (words.length > 1) ret.push(words.slice(-1)[0]);
+  return ret.map((word) => word[0]).join("").toUpperCase();
+};
+export {
+  capitalize,
+  capitalizeAllLetters,
+  formatFilter,
+  getFirstName,
+  getUserAvatarLetters,
+  normalizeText,
+  sliceText
+};
+//# sourceMappingURL=stringHelpers.js.map

package/dist/helpers/stringHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringHelpers.js","sources":["../../src/helpers/stringHelpers.ts"],"sourcesContent":["/**\n * Truncate text to a specified length and append ellipsis\n * @param value - The text to truncate\n * @param length - Maximum length before truncation (default: 100)\n * @returns Truncated text with ellipsis or original text if shorter than limit\n */\nexport const sliceText = (value: string, length = 100) => {\n  if (value === undefined || value.length < length) return value;\n\n  return `${value.slice(0, length)}...`;\n};\n\nconst LOWERCASE_LETTER_PATTERN = /\\p{Ll}/u;\nconst UPPERCASE_LETTER_PATTERN = /\\p{Lu}/u;\n\n/**\n * A word that mixes cases after its first letter (`uMode`, `iPhone`, `McDonald`) carries a\n * deliberate spelling, so capitalization must leave it untouched instead of flattening it\n * to `Umode`. All-caps and all-lowercase words are still normalized.\n */\nconst hasDeliberateCasing = (word: string) =>\n  LOWERCASE_LETTER_PATTERN.test(word) && UPPERCASE_LETTER_PATTERN.test(word.slice(1));\n\nconst capitalizeWord = (word: string) =>\n  hasDeliberateCasing(word) ? word : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();\n\n/**\n * Capitalize the first letter of a string and lowercase the rest\n * @param str - The string to capitalize\n * @param allWords - If true, capitalizes the first letter of each word\n * @returns Capitalized string or empty string if invalid input\n */\nexport const capitalize = (str?: string, allWords = false) => {\n  if (!str || typeof str !== 'string') return '';\n\n  if (allWords) return str.split(' ').map(capitalizeWord).join(' ');\n\n  const [firstWord, ...otherWords] = str.split(' ');\n  return [\n    capitalizeWord(firstWord),\n    ...otherWords.map((word) => (hasDeliberateCasing(word) ? word : word.toLowerCase())),\n  ].join(' ');\n};\n\n/**\n * Capitalize the first letter of each word in a string\n * @param str - The string to capitalize\n * @returns String with each word capitalized or empty string if invalid input\n */\nexport const capitalizeAllLetters = (str?: string) => {\n  if (!str || typeof str !== 'string') return '';\n  return str.split(' ').map(capitalizeWord).join(' ');\n};\n\n/**\n * Normalize text by removing accents and converting to lowercase\n * @param text - The text to normalize\n * @returns Normalized text without accents in lowercase\n */\nexport function normalizeText(text: string): string {\n  if (text === undefined || text === null) return '';\n\n  text = text.toLowerCase();\n  text = text.replace(/[áàãâä]/g, 'a');\n  text = text.replace(/[éèêë]/g, 'e');\n  text = text.replace(/[íìîï]/g, 'i');\n  text = text.replace(/[óòõôö]/g, 'o');\n  text = text.replace(/[úùûü]/g, 'u');\n  text = text.replace(/[ç]/g, 'c');\n  return text;\n}\n\n/**\n * Check if a parameter contains a search term (case and accent insensitive)\n * @param param - The text to search in\n * @param search - The search term\n * @returns True if the search term is found in the parameter\n */\nexport const formatFilter = (param: string | undefined | null, search: string | number) =>\n  normalizeText(param || '').includes(normalizeText(String(search)));\n\n/**\n * Extract the first name from a full name\n * @param name - The full name string\n * @returns The first word/name from the full name\n */\nexport const getFirstName = (name: string): string => {\n  return (name ?? '').split(' ')[0];\n};\n\n/**\n * Generate avatar letters from a user's name\n * @param name - The user's full name\n * @returns 1-2 uppercase letters for avatar display (first + last name initials)\n */\nexport const getUserAvatarLetters = (name: string) => {\n  if (!name) return '';\n  if (typeof name !== 'string') return '';\n  if (!name.includes(' ')) {\n    return name.substring(0, 2).toUpperCase();\n  }\n\n  const words = name.split(' ');\n  const ret: Array<string> = [words[0]];\n\n  if (words.length > 1) ret.push(words.slice(-1)[0]);\n\n  return ret\n    .map((word) => word[0])\n    .join('')\n    .toUpperCase();\n};\n"],"names":[],"mappings":"AAMO,MAAM,YAAY,CAAC,OAAe,SAAS,QAAQ;AACxD,MAAI,UAAU,UAAa,MAAM,SAAS,OAAQ,QAAO;AAEzD,SAAO,GAAG,MAAM,MAAM,GAAG,MAAM,CAAC;AAClC;AAEA,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAOjC,MAAM,sBAAsB,CAAC,SAC3B,yBAAyB,KAAK,IAAI,KAAK,yBAAyB,KAAK,KAAK,MAAM,CAAC,CAAC;AAEpF,MAAM,iBAAiB,CAAC,SACtB,oBAAoB,IAAI,IAAI,OAAO,KAAK,OAAO,CAAC,EAAE,YAAA,IAAgB,KAAK,MAAM,CAAC,EAAE,YAAA;AAQ3E,MAAM,aAAa,CAAC,KAAc,WAAW,UAAU;AAC5D,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAE5C,MAAI,SAAU,QAAO,IAAI,MAAM,GAAG,EAAE,IAAI,cAAc,EAAE,KAAK,GAAG;AAEhE,QAAM,CAAC,WAAW,GAAG,UAAU,IAAI,IAAI,MAAM,GAAG;AAChD,SAAO;AAAA,IACL,eAAe,SAAS;AAAA,IACxB,GAAG,WAAW,IAAI,CAAC,SAAU,oBAAoB,IAAI,IAAI,OAAO,KAAK,YAAA,CAAc;AAAA,EAAA,EACnF,KAAK,GAAG;AACZ;AAOO,MAAM,uBAAuB,CAAC,QAAiB;AACpD,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,SAAO,IAAI,MAAM,GAAG,EAAE,IAAI,cAAc,EAAE,KAAK,GAAG;AACpD;AAOO,SAAS,cAAc,MAAsB;AAClD,MAAI,SAAS,UAAa,SAAS,KAAM,QAAO;AAEhD,SAAO,KAAK,YAAA;AACZ,SAAO,KAAK,QAAQ,YAAY,GAAG;AACnC,SAAO,KAAK,QAAQ,WAAW,GAAG;AAClC,SAAO,KAAK,QAAQ,WAAW,GAAG;AAClC,SAAO,KAAK,QAAQ,YAAY,GAAG;AACnC,SAAO,KAAK,QAAQ,WAAW,GAAG;AAClC,SAAO,KAAK,QAAQ,QAAQ,GAAG;AAC/B,SAAO;AACT;AAQO,MAAM,eAAe,CAAC,OAAkC,WAC7D,cAAc,SAAS,EAAE,EAAE,SAAS,cAAc,OAAO,MAAM,CAAC,CAAC;AAO5D,MAAM,eAAe,CAAC,SAAyB;AACpD,UAAQ,QAAQ,IAAI,MAAM,GAAG,EAAE,CAAC;AAClC;AAOO,MAAM,uBAAuB,CAAC,SAAiB;AACpD,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,CAAC,KAAK,SAAS,GAAG,GAAG;AACvB,WAAO,KAAK,UAAU,GAAG,CAAC,EAAE,YAAA;AAAA,EAC9B;AAEA,QAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,QAAM,MAAqB,CAAC,MAAM,CAAC,CAAC;AAEpC,MAAI,MAAM,SAAS,EAAG,KAAI,KAAK,MAAM,MAAM,EAAE,EAAE,CAAC,CAAC;AAEjD,SAAO,IACJ,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,YAAA;AACL;"}

package/dist/helpers/themeSkins.d.ts

@@ -0,0 +1,12 @@
+export declare const UI_THEME_SKIN_ATTRIBUTE = "data-theme-skin";
+/**
+ * A skin re-colours exactly ONE scheme (see the Skins block in theme.css). The host paints it
+ * by writing that scheme to `data-theme` and the skin name to `data-theme-skin`, so everything
+ * that only understands light and dark keeps working untouched.
+ */
+export declare const UI_THEME_SKIN_SCHEMES: {
+    readonly halloween: "dark";
+};
+export type TUiThemeSkin = keyof typeof UI_THEME_SKIN_SCHEMES;
+export declare const UI_THEME_SKINS: Array<TUiThemeSkin>;
+export declare const isUiThemeSkin: (value: unknown) => value is TUiThemeSkin;

package/dist/helpers/themeSkins.js

@@ -0,0 +1,13 @@
+const UI_THEME_SKIN_ATTRIBUTE = "data-theme-skin";
+const UI_THEME_SKIN_SCHEMES = {
+  halloween: "dark"
+};
+const UI_THEME_SKINS = Object.keys(UI_THEME_SKIN_SCHEMES);
+const isUiThemeSkin = (value) => typeof value === "string" && UI_THEME_SKINS.includes(value);
+export {
+  UI_THEME_SKINS,
+  UI_THEME_SKIN_ATTRIBUTE,
+  UI_THEME_SKIN_SCHEMES,
+  isUiThemeSkin
+};
+//# sourceMappingURL=themeSkins.js.map

package/dist/helpers/themeSkins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeSkins.js","sources":["../../src/helpers/themeSkins.ts"],"sourcesContent":["import type { TUiResolvedTheme } from '../hooks/useResolvedTheme';\n\nexport const UI_THEME_SKIN_ATTRIBUTE = 'data-theme-skin';\n\n/**\n * A skin re-colours exactly ONE scheme (see the Skins block in theme.css). The host paints it\n * by writing that scheme to `data-theme` and the skin name to `data-theme-skin`, so everything\n * that only understands light and dark keeps working untouched.\n */\nexport const UI_THEME_SKIN_SCHEMES = {\n  halloween: 'dark',\n} as const satisfies Record<string, TUiResolvedTheme>;\n\nexport type TUiThemeSkin = keyof typeof UI_THEME_SKIN_SCHEMES;\n\nexport const UI_THEME_SKINS = Object.keys(UI_THEME_SKIN_SCHEMES) as Array<TUiThemeSkin>;\n\nexport const isUiThemeSkin = (value: unknown): value is TUiThemeSkin =>\n  typeof value === 'string' && (UI_THEME_SKINS as Array<string>).includes(value);\n"],"names":[],"mappings":"AAEO,MAAM,0BAA0B;AAOhC,MAAM,wBAAwB;AAAA,EACnC,WAAW;AACb;AAIO,MAAM,iBAAiB,OAAO,KAAK,qBAAqB;AAExD,MAAM,gBAAgB,CAAC,UAC5B,OAAO,UAAU,YAAa,eAAiC,SAAS,KAAK;"}

package/dist/helpers/themeTokens.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Reads a design token as a concrete colour, for the few consumers that cannot use a CSS
+ * class: canvas rendering, and third-party libraries that take colours as JS strings
+ * (ApexCharts, Excalidraw exports).
+ *
+ * Reading from the stylesheet instead of duplicating the palette in TypeScript is what
+ * keeps a single source of truth: change theme.css and every chart follows.
+ */
+export declare const readThemeToken: (name: string, fallback?: string) => string;
+export interface IThemeChartTokens {
+    /** Qualitative series palette, hue- and luminance-separated, validated for every theme. */
+    series: Array<string>;
+    grid: string;
+    axis: string;
+    /** Text drawn INSIDE a bar or slice, i.e. on top of a series colour. */
+    label: string;
+    foreground: string;
+    foregroundMuted: string;
+    surface: string;
+    border: string;
+    /** Feeds ApexCharts' own `theme.mode`, which drives its tooltip and legend defaults. */
+    mode: 'light' | 'dark';
+}
+/**
+ * Recomputed whenever the resolved theme or its skin changes: the CSS variables have already
+ * been swapped by then, so `getComputedStyle` returns the new values.
+ */
+export declare const useThemeChartTokens: () => IThemeChartTokens;

package/dist/helpers/themeTokens.js

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { useResolvedTheme } from "../hooks/useResolvedTheme.js";
+import { useThemeSkin } from "../hooks/useThemeSkin.js";
+const readThemeToken = (name, fallback = "#000000") => {
+  if (typeof window === "undefined") return fallback;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(`--color-${name}`).trim();
+  if (!raw) return fallback;
+  if (raw.startsWith("#") || raw.startsWith("rgb")) return raw;
+  const [r, g, b] = raw.split(/\s+/);
+  return `rgb(${r}, ${g}, ${b})`;
+};
+const SERIES_TOKENS = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "chart-6", "chart-7", "chart-8"];
+const useThemeChartTokens = () => {
+  const resolvedTheme = useResolvedTheme();
+  const themeSkin = useThemeSkin();
+  return useMemo(
+    () => ({
+      series: SERIES_TOKENS.map((token) => readThemeToken(token)),
+      grid: readThemeToken("chart-grid"),
+      axis: readThemeToken("chart-axis"),
+      label: readThemeToken("chart-label"),
+      foreground: readThemeToken("foreground"),
+      foregroundMuted: readThemeToken("foreground-muted"),
+      surface: readThemeToken("surface"),
+      border: readThemeToken("border"),
+      mode: resolvedTheme
+    }),
+    [resolvedTheme, themeSkin]
+  );
+};
+export {
+  readThemeToken,
+  useThemeChartTokens
+};
+//# sourceMappingURL=themeTokens.js.map

package/dist/helpers/themeTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeTokens.js","sources":["../../src/helpers/themeTokens.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useResolvedTheme } from '../hooks/useResolvedTheme';\nimport { useThemeSkin } from '../hooks/useThemeSkin';\n\n/**\n * Reads a design token as a concrete colour, for the few consumers that cannot use a CSS\n * class: canvas rendering, and third-party libraries that take colours as JS strings\n * (ApexCharts, Excalidraw exports).\n *\n * Reading from the stylesheet instead of duplicating the palette in TypeScript is what\n * keeps a single source of truth: change theme.css and every chart follows.\n */\nexport const readThemeToken = (name: string, fallback = '#000000'): string => {\n  if (typeof window === 'undefined') return fallback;\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(`--color-${name}`).trim();\n  if (!raw) return fallback;\n  if (raw.startsWith('#') || raw.startsWith('rgb')) return raw;\n  const [r, g, b] = raw.split(/\\s+/);\n  return `rgb(${r}, ${g}, ${b})`;\n};\n\nexport interface IThemeChartTokens {\n  /** Qualitative series palette, hue- and luminance-separated, validated for every theme. */\n  series: Array<string>;\n  grid: string;\n  axis: string;\n  /** Text drawn INSIDE a bar or slice, i.e. on top of a series colour. */\n  label: string;\n  foreground: string;\n  foregroundMuted: string;\n  surface: string;\n  border: string;\n  /** Feeds ApexCharts' own `theme.mode`, which drives its tooltip and legend defaults. */\n  mode: 'light' | 'dark';\n}\n\nconst SERIES_TOKENS = ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5', 'chart-6', 'chart-7', 'chart-8'];\n\n/**\n * Recomputed whenever the resolved theme or its skin changes: the CSS variables have already\n * been swapped by then, so `getComputedStyle` returns the new values.\n */\nexport const useThemeChartTokens = (): IThemeChartTokens => {\n  const resolvedTheme = useResolvedTheme();\n  const themeSkin = useThemeSkin();\n\n  return useMemo(\n    () => ({\n      series: SERIES_TOKENS.map((token) => readThemeToken(token)),\n      grid: readThemeToken('chart-grid'),\n      axis: readThemeToken('chart-axis'),\n      label: readThemeToken('chart-label'),\n      foreground: readThemeToken('foreground'),\n      foregroundMuted: readThemeToken('foreground-muted'),\n      surface: readThemeToken('surface'),\n      border: readThemeToken('border'),\n      mode: resolvedTheme,\n    }),\n    [resolvedTheme, themeSkin],\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC,MAAc,WAAW,cAAsB;AAC5E,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,MAAM,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,WAAW,IAAI,EAAE,EAAE,KAAA;AAC3F,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,IAAI,WAAW,GAAG,KAAK,IAAI,WAAW,KAAK,EAAG,QAAO;AACzD,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,MAAM,KAAK;AACjC,SAAO,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAC7B;AAiBA,MAAM,gBAAgB,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAMtG,MAAM,sBAAsB,MAAyB;AAC1D,QAAM,gBAAgB,iBAAA;AACtB,QAAM,YAAY,aAAA;AAElB,SAAO;AAAA,IACL,OAAO;AAAA,MACL,QAAQ,cAAc,IAAI,CAAC,UAAU,eAAe,KAAK,CAAC;AAAA,MAC1D,MAAM,eAAe,YAAY;AAAA,MACjC,MAAM,eAAe,YAAY;AAAA,MACjC,OAAO,eAAe,aAAa;AAAA,MACnC,YAAY,eAAe,YAAY;AAAA,MACvC,iBAAiB,eAAe,kBAAkB;AAAA,MAClD,SAAS,eAAe,SAAS;AAAA,MACjC,QAAQ,eAAe,QAAQ;AAAA,MAC/B,MAAM;AAAA,IAAA;AAAA,IAER,CAAC,eAAe,SAAS;AAAA,EAAA;AAE7B;"}

package/dist/helpers/uiErrorPresenter.d.ts

@@ -0,0 +1,21 @@
+export type TUiErrorVariant = 'error' | 'permission' | 'not-found' | 'offline';
+export interface IUiErrorPresentation {
+    variant: TUiErrorVariant;
+    /** Key in the `common` namespace, resolved by the surface that renders it. */
+    titleKey: string;
+    descriptionKey: string;
+    /** False when asking again cannot change the answer (a denial, a missing record). */
+    isRetryable: boolean;
+}
+/**
+ * Port: the UI layer knows a request failed, never why. The app registers the classifier at boot
+ * (see `UiLayerBridge`), so a shared surface like the table can say "you do not have permission"
+ * instead of painting every failure as a system error.
+ *
+ * Returns null when nothing was registered or the cause is not recognisable, and the caller keeps
+ * whatever copy it already had.
+ */
+type TUiErrorPresenter = (error: unknown) => IUiErrorPresentation | null;
+export declare const configureUiErrorPresenter: (presenter: TUiErrorPresenter) => void;
+export declare const describeUiError: (error: unknown) => IUiErrorPresentation | null;
+export {};

package/dist/helpers/uiErrorPresenter.js

@@ -0,0 +1,10 @@
+let presentError = () => null;
+const configureUiErrorPresenter = (presenter) => {
+  presentError = presenter;
+};
+const describeUiError = (error) => error === null || error === void 0 ? null : presentError(error);
+export {
+  configureUiErrorPresenter,
+  describeUiError
+};
+//# sourceMappingURL=uiErrorPresenter.js.map

package/dist/helpers/uiErrorPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiErrorPresenter.js","sources":["../../src/helpers/uiErrorPresenter.ts"],"sourcesContent":["export type TUiErrorVariant = 'error' | 'permission' | 'not-found' | 'offline';\n\nexport interface IUiErrorPresentation {\n  variant: TUiErrorVariant;\n  /** Key in the `common` namespace, resolved by the surface that renders it. */\n  titleKey: string;\n  descriptionKey: string;\n  /** False when asking again cannot change the answer (a denial, a missing record). */\n  isRetryable: boolean;\n}\n\n/**\n * Port: the UI layer knows a request failed, never why. The app registers the classifier at boot\n * (see `UiLayerBridge`), so a shared surface like the table can say \"you do not have permission\"\n * instead of painting every failure as a system error.\n *\n * Returns null when nothing was registered or the cause is not recognisable, and the caller keeps\n * whatever copy it already had.\n */\ntype TUiErrorPresenter = (error: unknown) => IUiErrorPresentation | null;\n\nlet presentError: TUiErrorPresenter = () => null;\n\nexport const configureUiErrorPresenter = (presenter: TUiErrorPresenter): void => {\n  presentError = presenter;\n};\n\nexport const describeUiError = (error: unknown): IUiErrorPresentation | null =>\n  error === null || error === undefined ? null : presentError(error);\n"],"names":[],"mappings":"AAqBA,IAAI,eAAkC,MAAM;AAErC,MAAM,4BAA4B,CAAC,cAAuC;AAC/E,iBAAe;AACjB;AAEO,MAAM,kBAAkB,CAAC,UAC9B,UAAU,QAAQ,UAAU,SAAY,OAAO,aAAa,KAAK;"}

package/dist/helpers/uiLogger.d.ts

@@ -0,0 +1,8 @@
+export interface IUiLogger {
+    debug: (...args: Array<unknown>) => void;
+    info: (...args: Array<unknown>) => void;
+    warn: (...args: Array<unknown>) => void;
+    error: (...args: Array<unknown>) => void;
+}
+export declare const configureUiLogger: (nextLogger: IUiLogger | null) => void;
+export declare const uiLogger: IUiLogger;

package/dist/helpers/uiLogger.js

@@ -0,0 +1,16 @@
+let configuredLogger = null;
+const configureUiLogger = (nextLogger) => {
+  configuredLogger = nextLogger;
+};
+const resolveLogger = () => configuredLogger ?? globalThis.logger ?? console;
+const uiLogger = {
+  debug: (...args) => resolveLogger().debug(...args),
+  info: (...args) => resolveLogger().info(...args),
+  warn: (...args) => resolveLogger().warn(...args),
+  error: (...args) => resolveLogger().error(...args)
+};
+export {
+  configureUiLogger,
+  uiLogger
+};
+//# sourceMappingURL=uiLogger.js.map

package/dist/helpers/uiLogger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiLogger.js","sources":["../../src/helpers/uiLogger.ts"],"sourcesContent":["export interface IUiLogger {\n  debug: (...args: Array<unknown>) => void;\n  info: (...args: Array<unknown>) => void;\n  warn: (...args: Array<unknown>) => void;\n  error: (...args: Array<unknown>) => void;\n}\n\nlet configuredLogger: IUiLogger | null = null;\n\nexport const configureUiLogger = (nextLogger: IUiLogger | null): void => {\n  configuredLogger = nextLogger;\n};\n\n// The ambient `logger` is the dashboard's sink; this is the only UI file allowed to read it.\nconst resolveLogger = (): IUiLogger =>\n  configuredLogger ?? (globalThis as { logger?: IUiLogger }).logger ?? (console as IUiLogger);\n\nexport const uiLogger: IUiLogger = {\n  debug: (...args) => resolveLogger().debug(...args),\n  info: (...args) => resolveLogger().info(...args),\n  warn: (...args) => resolveLogger().warn(...args),\n  error: (...args) => resolveLogger().error(...args),\n};\n"],"names":[],"mappings":"AAOA,IAAI,mBAAqC;AAElC,MAAM,oBAAoB,CAAC,eAAuC;AACvE,qBAAmB;AACrB;AAGA,MAAM,gBAAgB,MACpB,oBAAqB,WAAsC,UAAW;AAEjE,MAAM,WAAsB;AAAA,EACjC,OAAO,IAAI,SAAS,gBAAgB,MAAM,GAAG,IAAI;AAAA,EACjD,MAAM,IAAI,SAAS,gBAAgB,KAAK,GAAG,IAAI;AAAA,EAC/C,MAAM,IAAI,SAAS,gBAAgB,KAAK,GAAG,IAAI;AAAA,EAC/C,OAAO,IAAI,SAAS,gBAAgB,MAAM,GAAG,IAAI;AACnD;"}

package/dist/helpers/uiPreferences.d.ts

@@ -0,0 +1,13 @@
+export interface IUiPreferencesStorage {
+    read: <T>(key: string) => T | null;
+    write: <T>(key: string, value: T) => void;
+}
+export interface IUiPreferencesConfig {
+    storage?: IUiPreferencesStorage;
+    /** Identifies whom a preference belongs to on a shared browser; null keeps it unscoped. */
+    resolveScopeId?: () => string | null;
+}
+export declare const configureUiPreferences: ({ storage, resolveScopeId }: IUiPreferencesConfig) => void;
+export declare const readUiPreference: <T>(key: string) => T | null;
+export declare const writeUiPreference: <T>(key: string, value: T) => void;
+export declare const resolveUiPreferenceScopeId: () => string | null;

package/dist/helpers/uiPreferences.js

@@ -0,0 +1,35 @@
+import { uiLogger } from "./uiLogger.js";
+const browserStorage = {
+  read: (key) => {
+    try {
+      const raw = window.localStorage.getItem(key);
+      return raw === null ? null : JSON.parse(raw);
+    } catch (error) {
+      uiLogger.debug("[uiPreferences] unreadable entry", key, error);
+      return null;
+    }
+  },
+  write: (key, value) => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      uiLogger.debug("[uiPreferences] write failed", key, error);
+    }
+  }
+};
+let activeStorage = browserStorage;
+let activeScopeResolver = () => null;
+const configureUiPreferences = ({ storage, resolveScopeId }) => {
+  if (storage) activeStorage = storage;
+  if (resolveScopeId) activeScopeResolver = resolveScopeId;
+};
+const readUiPreference = (key) => activeStorage.read(key);
+const writeUiPreference = (key, value) => activeStorage.write(key, value);
+const resolveUiPreferenceScopeId = () => activeScopeResolver();
+export {
+  configureUiPreferences,
+  readUiPreference,
+  resolveUiPreferenceScopeId,
+  writeUiPreference
+};
+//# sourceMappingURL=uiPreferences.js.map

package/dist/helpers/uiPreferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiPreferences.js","sources":["../../src/helpers/uiPreferences.ts"],"sourcesContent":["import { uiLogger } from './uiLogger';\n\nexport interface IUiPreferencesStorage {\n  read: <T>(key: string) => T | null;\n  write: <T>(key: string, value: T) => void;\n}\n\nexport interface IUiPreferencesConfig {\n  storage?: IUiPreferencesStorage;\n  /** Identifies whom a preference belongs to on a shared browser; null keeps it unscoped. */\n  resolveScopeId?: () => string | null;\n}\n\nconst browserStorage: IUiPreferencesStorage = {\n  read: <T>(key: string): T | null => {\n    try {\n      const raw = window.localStorage.getItem(key);\n      return raw === null ? null : (JSON.parse(raw) as T);\n    } catch (error) {\n      uiLogger.debug('[uiPreferences] unreadable entry', key, error);\n      return null;\n    }\n  },\n  write: <T>(key: string, value: T): void => {\n    try {\n      window.localStorage.setItem(key, JSON.stringify(value));\n    } catch (error) {\n      uiLogger.debug('[uiPreferences] write failed', key, error);\n    }\n  },\n};\n\nlet activeStorage: IUiPreferencesStorage = browserStorage;\nlet activeScopeResolver: () => string | null = () => null;\n\nexport const configureUiPreferences = ({ storage, resolveScopeId }: IUiPreferencesConfig): void => {\n  if (storage) activeStorage = storage;\n  if (resolveScopeId) activeScopeResolver = resolveScopeId;\n};\n\nexport const readUiPreference = <T>(key: string): T | null => activeStorage.read<T>(key);\n\nexport const writeUiPreference = <T>(key: string, value: T): void => activeStorage.write(key, value);\n\nexport const resolveUiPreferenceScopeId = (): string | null => activeScopeResolver();\n"],"names":[],"mappings":";AAaA,MAAM,iBAAwC;AAAA,EAC5C,MAAM,CAAI,QAA0B;AAClC,QAAI;AACF,YAAM,MAAM,OAAO,aAAa,QAAQ,GAAG;AAC3C,aAAO,QAAQ,OAAO,OAAQ,KAAK,MAAM,GAAG;AAAA,IAC9C,SAAS,OAAO;AACd,eAAS,MAAM,oCAAoC,KAAK,KAAK;AAC7D,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,OAAO,CAAI,KAAa,UAAmB;AACzC,QAAI;AACF,aAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,IACxD,SAAS,OAAO;AACd,eAAS,MAAM,gCAAgC,KAAK,KAAK;AAAA,IAC3D;AAAA,EACF;AACF;AAEA,IAAI,gBAAuC;AAC3C,IAAI,sBAA2C,MAAM;AAE9C,MAAM,yBAAyB,CAAC,EAAE,SAAS,qBAAiD;AACjG,MAAI,QAAS,iBAAgB;AAC7B,MAAI,eAAgB,uBAAsB;AAC5C;AAEO,MAAM,mBAAmB,CAAI,QAA0B,cAAc,KAAQ,GAAG;AAEhF,MAAM,oBAAoB,CAAI,KAAa,UAAmB,cAAc,MAAM,KAAK,KAAK;AAE5F,MAAM,6BAA6B,MAAqB,oBAAA;"}

package/dist/helpers/urlParamSync.d.ts

@@ -0,0 +1,19 @@
+export type TUrlParamSetter = (updater: (previousParams: URLSearchParams) => URLSearchParams, options?: {
+    replace?: boolean;
+}) => void;
+/** Reservado ao `ControlledTabs`: nenhum outro controle pode assumir esse parâmetro. */
+export declare const TABS_URL_PARAM = "activeTab";
+/**
+ * Quem manda no parâmetro quando dois controles pedem a mesma chave. Abas são navegação e ficam
+ * acima de um seletor de visualização, então assumem a chave mesmo montando depois.
+ */
+export declare const URL_PARAM_PRIORITY: {
+    readonly viewToggle: 1;
+    readonly tabs: 2;
+};
+export type TUrlParamPriority = (typeof URL_PARAM_PRIORITY)[keyof typeof URL_PARAM_PRIORITY];
+export declare const claimUrlParam: (key: string, ownerId: object, priority: TUrlParamPriority) => boolean;
+export declare const releaseUrlParam: (key: string, ownerId: object) => void;
+export declare const ownsUrlParam: (key: string, ownerId: object) => boolean;
+/** Agenda a gravação de um parâmetro, preservando os demais. Valor vazio remove o parâmetro. */
+export declare const queueUrlParamUpdate: (key: string, value: string, setSearchParams: TUrlParamSetter) => void;