@djangocfg/ui-tools 2.1.394 → 2.1.397

package/src/tools/Chat/notifier/titleRotator.ts

@@ -0,0 +1,119 @@
+import type { ChatMessage } from '../types';
+
+export type TitleMode = 'rotate' | 'prefix';
+
+export interface TitleRotatorOptions {
+  /** Snapshot taken on first `start()` if omitted. */
+  base?: string;
+  /**
+   * Build the alert string for the current unread state.
+   * Only used in `rotate` mode. Default: `"(N) Base"` — same shape as
+   * the prefix mode, so the two modes differ only in *whether* the
+   * title rotates, not in what it says.
+   */
+  template?: (count: number, latest?: ChatMessage | null, base?: string) => string;
+  /** Only used in `rotate` mode. Default 2000ms — gentle, not nervous. */
+  intervalMs?: number;
+  /**
+   * - `prefix` (default): render `"(N) Base"` once, no interval. The
+   *   restrained Facebook-style cue: rely on the favicon dot for
+   *   attention, keep the title readable.
+   * - `rotate`: swap between base and `template(...)` every
+   *   `intervalMs`. Use when the host has no favicon (or the user
+   *   pinned the tab and favicons are hidden).
+   */
+  mode?: TitleMode;
+}
+
+interface RotatorHandle {
+  start(count: number, latest?: ChatMessage | null): void;
+  update(count: number, latest?: ChatMessage | null): void;
+  stop(): void;
+}
+
+const DEFAULT_TEMPLATE = (count: number, _latest?: ChatMessage | null, base?: string) =>
+  base ? `(${count}) ${base}` : `(${count})`;
+
+/**
+ * Mutates `document.title`. SSR-safe (returns no-op handle).
+ *
+ * Invariants:
+ *   - `stop()` always restores the base title.
+ *   - Multiple `start()` calls without an intervening `stop()` are
+ *     equivalent to `update()`; we never stack timers.
+ *   - In `rotate` mode the timer only ticks when the page is hidden
+ *     (the caller is expected to gate this; see `useChatUnreadNotifier`).
+ */
+export function createTitleRotator(opts: TitleRotatorOptions = {}): RotatorHandle {
+  if (typeof document === 'undefined') {
+    return { start() {}, update() {}, stop() {} };
+  }
+
+  const template = opts.template ?? DEFAULT_TEMPLATE;
+  const intervalMs = opts.intervalMs ?? 2000;
+  const mode: TitleMode = opts.mode ?? 'prefix';
+
+  let baseTitle: string | null = null;
+  let alertTitle = '';
+  let phase: 'base' | 'alert' = 'base';
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  const captureBaseOnce = () => {
+    if (baseTitle !== null) return;
+    baseTitle = opts.base ?? document.title;
+  };
+
+  const render = () => {
+    if (baseTitle === null) return;
+    document.title = phase === 'alert' ? alertTitle : baseTitle;
+  };
+
+  const tick = () => {
+    phase = phase === 'alert' ? 'base' : 'alert';
+    render();
+  };
+
+  const prefixTitle = (count: number) =>
+    baseTitle ? `(${count}) ${baseTitle}` : `(${count})`;
+
+  return {
+    start(count, latest) {
+      captureBaseOnce();
+      alertTitle = template(count, latest, baseTitle ?? undefined);
+
+      if (mode === 'prefix') {
+        document.title = prefixTitle(count);
+        return;
+      }
+
+      phase = 'alert';
+      render();
+      if (timer === null) {
+        timer = setInterval(tick, intervalMs);
+      }
+    },
+
+    update(count, latest) {
+      // Same path as start — base title is already captured, just refresh
+      // the alert string and re-render in case we're in alert phase.
+      captureBaseOnce();
+      alertTitle = template(count, latest, baseTitle ?? undefined);
+      if (mode === 'prefix') {
+        document.title = prefixTitle(count);
+      } else if (phase === 'alert') {
+        render();
+      }
+    },
+
+    stop() {
+      if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+      }
+      if (baseTitle !== null) {
+        document.title = baseTitle;
+      }
+      phase = 'base';
+    },
+  };
+}

package/src/tools/Chat/notifier/types.ts

@@ -0,0 +1,38 @@
+import type { ChatMessage } from '../types';
+
+/**
+ * Transport-agnostic surface for surfacing "you have new messages" to the
+ * user when they're not actively watching the chat.
+ *
+ * Two reference implementations ship with ui-tools:
+ *   - `createBrowserNotifier` — Facebook-style document.title rotation +
+ *     favicon badge, suitable for browser tabs.
+ *   - `createNoopNotifier` — does nothing; default when no DOM is around
+ *     and the safe pick inside Wails / Electron, where the host wires
+ *     its own native dock-badge bridge instead.
+ *
+ * Hosts that want native badges (Wails dock, macOS notification dot)
+ * implement this interface themselves and pass the instance into
+ * `useChatUnreadNotifier({ notifier })`.
+ */
+export interface ChatNotifier {
+  /**
+   * Called whenever the unread count is non-zero AND the page is not
+   * visible to the user. Implementations must be idempotent — they may
+   * be called repeatedly with the same count.
+   */
+  setUnread(count: number, latest?: ChatMessage | null): void;
+
+  /**
+   * Called when the user is back (page visible, or dock opened) OR when
+   * unread drops to zero. Implementations must fully restore any state
+   * they mutated (title, favicon).
+   */
+  clear(): void;
+
+  /**
+   * Optional: release any resources (DOM listeners, cached canvases).
+   * Called on hook unmount. Safe to omit.
+   */
+  dispose?(): void;
+}

package/src/tools/Chat/notifier/visibility.ts

@@ -0,0 +1,47 @@
+/**
+ * Page-visibility helpers. SSR-safe — every entry point guards on
+ * `typeof document`.
+ *
+ * Why `hidden || !hasFocus` instead of just `hidden`:
+ *   - `document.hidden` flips true only when the tab is fully
+ *     backgrounded (other tab, minimised window).
+ *   - A focused window in the foreground with the chat tab visible but
+ *     the user typing into a different app still counts as "watching"
+ *     for Chrome's purposes. We treat that as away too, so unread
+ *     notifications kick in when you alt-tab to your editor.
+ *
+ * Inside Wails / Electron with a single window, `document.hidden` is
+ * always false and `document.hasFocus()` tracks the OS window — which
+ * is exactly what we want for a desktop dock badge if a host ever
+ * decides to reuse the browser notifier (most won't; they'll ship
+ * their own ChatNotifier).
+ */
+
+export function isPageHidden(): boolean {
+  if (typeof document === 'undefined') return false;
+  if (document.hidden) return true;
+  if (typeof document.hasFocus === 'function' && !document.hasFocus()) return true;
+  return false;
+}
+
+/**
+ * Subscribe to visibility/focus changes. Returns an unsubscribe fn.
+ * No-op in SSR.
+ */
+export function onVisibilityChange(cb: (hidden: boolean) => void): () => void {
+  if (typeof document === 'undefined') return () => {};
+
+  const fire = () => cb(isPageHidden());
+  document.addEventListener('visibilitychange', fire);
+  // `focus` / `blur` on window catch alt-tab-without-visibility-change
+  // (Chrome on macOS notably keeps `visibilityState === 'visible'` for
+  // background-but-on-screen tabs).
+  window.addEventListener('focus', fire);
+  window.addEventListener('blur', fire);
+
+  return () => {
+    document.removeEventListener('visibilitychange', fire);
+    window.removeEventListener('focus', fire);
+    window.removeEventListener('blur', fire);
+  };
+}

package/src/tools/ImageViewer/components/ImageViewer.tsx

@@ -156,8 +156,8 @@ export function ImageViewer({
       className={cn(
         'flex-1 h-full relative overflow-hidden outline-none',
         'bg-[length:16px_16px]',
-        '[background-color:hsl(var(--muted)/0.2)]',
-        '[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]',
+        '[background-color:color-mix(in_oklab,var(--muted)_20%,transparent)]',
+        '[background-image:linear-gradient(45deg,color-mix(in_oklab,var(--muted)_40%,transparent)_25%,transparent_25%),linear-gradient(-45deg,color-mix(in_oklab,var(--muted)_40%,transparent)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,color-mix(in_oklab,var(--muted)_40%,transparent)_75%),linear-gradient(-45deg,transparent_75%,color-mix(in_oklab,var(--muted)_40%,transparent)_75%)]',
         '[background-position:0_0,0_8px,8px_-8px,-8px_0px]'
       )}
     >

package/src/tools/MarkdownEditor/styles.css

@@ -88,13 +88,13 @@
 
 /* Focus ring */
 .markdown-editor:focus-within {
-  border-color: var(--color-ring, hsl(var(--ring, 0 0% 60%)));
-  box-shadow: 0 0 0 2px var(--color-ring, hsl(var(--ring, 0 0% 60%) / 0.3));
+  border-color: var(--color-ring, var(--ring));
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-ring, var(--ring)) 30%, transparent);
 }
 
 /* Mention inline chip */
 .markdown-mention {
-  background: var(--color-primary, hsl(var(--primary)));
+  background: var(--color-primary, var(--primary));
   color: var(--color-primary-foreground, #fff);
   padding: 1px 6px;
   border-radius: 4px;
@@ -105,9 +105,9 @@
 
 /* Mention dropdown */
 .markdown-mention-list {
-  background: var(--color-popover, hsl(var(--popover, 0 0% 8%)));
-  color: var(--color-popover-foreground, hsl(var(--popover-foreground, 0 0% 98%)));
-  border: 1px solid var(--color-border, hsl(var(--border, 0 0% 15%)));
+  background: var(--color-popover, var(--popover));
+  color: var(--color-popover-foreground, var(--popover-foreground));
+  border: 1px solid var(--color-border, var(--border));
   border-radius: 8px;
   padding: 4px;
   min-width: 220px;
@@ -133,7 +133,7 @@
 
 .markdown-mention-item:hover,
 .markdown-mention-item.selected {
-  background: var(--color-muted, hsl(var(--muted, 0 0% 15%)));
+  background: var(--color-muted, var(--muted));
 }
 
 .markdown-mention-avatar {

package/src/tools/Mermaid/hooks/useMermaidRenderer.ts

@@ -15,7 +15,7 @@ interface UseMermaidRendererProps {
 }
 
 interface MermaidRenderResult {
-    mermaidRef: React.RefObject<HTMLDivElement>;
+    mermaidRef: React.RefObject<HTMLDivElement | null>;
     svgContent: string;
     isVertical: boolean;
     isRendering: boolean;

package/src/tools/SpeechRecognition/core/languages-catalog.ts

@@ -223,7 +223,7 @@ export function countryFromTag(tag: string | null | undefined): string | null {
   const parts = tag.split('-');
   for (let i = parts.length - 1; i >= 0; i -= 1) {
     const p = parts[i];
-    if (p.length === 2 && /^[A-Za-z]{2}$/.test(p)) return p.toUpperCase();
+    if (p && p.length === 2 && /^[A-Za-z]{2}$/.test(p)) return p.toUpperCase();
   }
   return null;
 }

package/src/tools/SpeechRecognition/hooks/useMicLevel.ts

@@ -31,7 +31,7 @@ export function useMicLevel(stream: MediaStream | null): number {
     const tick = (): void => {
       analyser.getFloatTimeDomainData(buf);
       let sum = 0;
-      for (let i = 0; i < buf.length; i += 1) sum += buf[i] * buf[i];
+      for (let i = 0; i < buf.length; i += 1) sum += buf[i]! * buf[i]!;
       const rms = Math.sqrt(sum / buf.length);
       // soft compression so loud peaks don't dominate the meter
       setLevel(Math.min(1, rms * 2.5));

package/src/tools/SpeechRecognition/hooks/useSpeechLanguageInfo.ts

@@ -97,7 +97,7 @@ export function useSpeechLanguageInfo(): SpeechLanguageInfo {
     const found = findSpeechLanguage(tag);
     return {
       tag,
-      iso: found?.language.iso ?? tag.split('-')[0].toLowerCase(),
+      iso: found?.language.iso ?? (tag.split('-')[0] ?? tag).toLowerCase(),
       country: countryFromTag(tag),
       name: found?.language.name ?? null,
       englishName: found?.language.englishName ?? null,