@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,124 @@
+/**
+ * @streamsai/ui — public barrel.
+ *
+ * Every component in src/components/ui/ must appear here exactly once.
+ * The lint:stories gate (tooling/scripts/lint-story-coverage.ts) enforces this.
+ *
+ * Rules:
+ *  - Type-only members use the inline `type` modifier so this file stays a single
+ *    import per component and verbatimModuleSyntax + consistent-type-imports are happy.
+ *  - Icons are re-exported as the `Icons` namespace.
+ *  - Platform provider and hook live outside components/ui/ so they may have
+ *    separate export lines without conflicting with rule 3.
+ *  - prettier-ignore is used on lines that exceed the 100-char print width but must
+ *    stay on one line for the story-coverage gate (which matches by line prefix).
+ */
+export { ThemeProvider, useTheme, THEME_STORAGE_KEY, THEME_INIT_SCRIPT } from './theme/index.js';
+export { DirectionProvider, useDirection, useTextDirection } from './direction/index.js';
+// ── Icons ────────────────────────────────────────────────────────────────────
+export * as Icons from './icons/index.js';
+export { PlatformProvider, usePlatform } from './platform/index.js';
+// ── Motion (motion.dev; tune in motion/config.ts) ─────────────────────────────
+// prettier-ignore
+export { AnimatePresence, LayoutGroup, animate, motion, useMotionValue, useReducedMotion, useTransform } from './motion/index.js';
+// prettier-ignore
+export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, edgeReveal, stepSwap, staggerDelay } from './motion/index.js';
+// prettier-ignore
+export { MotionProvider, disableMotion, enableMotion, enablePresenceExits, disablePresenceExits, PageTransition, Collapse, AutoHeight, usePrefersReducedMotion, useAnyModalOpen, Swap, swapVariants, StaggerItem } from './motion/index.js';
+// ── Components ───────────────────────────────────────────────────────────────
+export { AgentAvatar, } from './components/ui/agent-avatar.js';
+export { AGENT_AVATAR_SIZE, AGENT_AVATAR_RADIUS, AGENT_AVATAR_PX, } from './components/ui/avatar-frame.js';
+export { Alert, AlertTitle, AlertDescription, AlertAction } from './components/ui/alert.js';
+// prettier-ignore
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge } from './components/ui/avatar.js';
+export { ProviderBadge, PROVIDER_BADGE_MARKS, providerBadgeMarkOf, } from './components/ui/provider-badge.js';
+export { Badge, badgeVariants } from './components/ui/badge.js';
+// prettier-ignore
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './components/ui/button-group.js';
+export { Button, buttonVariants } from './components/ui/button.js';
+export { cn } from './lib/utils.js';
+export { HOME_TILE_COUNT, homeTileIndex } from './lib/home-tile.js';
+export { detectTextDirection, hasStrongCharacter, isNeutralToken } from './lib/text-direction.js';
+export { Checkbox } from './components/ui/checkbox.js';
+export { Clickable, clickableVariants } from './components/ui/clickable.js';
+// prettier-ignore
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/dialog.js';
+// prettier-ignore
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from './components/ui/dropdown-menu.js';
+// prettier-ignore
+export { EditableText, editableTextVariants } from './components/ui/editable-text.js';
+// prettier-ignore
+export { Heading, headingVariants } from './components/ui/heading.js';
+export { IconButton, iconButtonVariants } from './components/ui/icon-button.js';
+export { Input } from './components/ui/input.js';
+export { Label } from './components/ui/label.js';
+// prettier-ignore
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from './components/ui/popover.js';
+// prettier-ignore
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/select.js';
+export { Separator } from './components/ui/separator.js';
+export { Skeleton } from './components/ui/skeleton.js';
+export { ShimmerText } from './components/ui/shimmer-text.js';
+export { Spinner } from './components/ui/spinner.js';
+export { Loader, } from './components/ui/loader.js';
+export { Switch } from './components/ui/switch.js';
+export { Text, textVariants } from './components/ui/text.js';
+export { Truncate } from './components/ui/truncate.js';
+export { Textarea } from './components/ui/textarea.js';
+export { DisabledReason } from './components/ui/disabled-reason.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/ui/tooltip.js';
+export { VisuallyHidden, visuallyHiddenVariants } from './components/ui/visually-hidden.js';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/tabs.js';
+// prettier-ignore
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './components/ui/sheet.js';
+// prettier-ignore
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './components/ui/sidebar.js';
+export { Toaster, toast } from './components/ui/sonner.js';
+// prettier-ignore
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList } from './components/ui/combobox.js';
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, CommandDialog, } from './components/ui/command.js';
+export { ScrollArea, ScrollBar } from './components/ui/scroll-area.js';
+export { Kbd, KbdGroup } from './components/ui/kbd.js';
+// prettier-ignore
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from './components/ui/card.js';
+// prettier-ignore
+export { Modal, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter } from './components/ui/modal.js';
+// prettier-ignore
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './components/ui/alert-dialog.js';
+export { RadioGroup, RadioGroupItem } from './components/ui/radio-group.js';
+export { Progress } from './components/ui/progress.js';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './components/ui/collapsible.js';
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './components/ui/resizable.js';
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './components/ui/hover-card.js';
+// prettier-ignore
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from './components/ui/context-menu.js';
+export { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group.js';
+// prettier-ignore
+export { RichTextEditor, INSERT_CYCLE_TRIGGER_COMMAND, INSERT_CUSTOM_EMOJI_COMMAND, MENTION_PAGE_SIZE, EMOJI_TYPEAHEAD_LIMIT, STREAM_TYPEAHEAD_LIMIT, isAllMentionCandidate } from './components/ui/rich-text-editor.js';
+export { VirtualList, } from './components/ui/virtual-list.js';
+export { TrendLine, TrendLineSkeleton, } from './components/ui/trend-line.js';
+export { BarList, BarListSkeleton, } from './components/ui/bar-list.js';
+export { StackedBar, StackedBarSkeleton, stackedBarWidths, } from './components/ui/stacked-bar.js';
+export { SparkBars } from './components/ui/spark-bars.js';
+export { RunningIndicator } from './components/ui/running-indicator.js';
+export { StatusDot, statusDotVariants } from './components/ui/status-dot.js';
+export { Counter, counterVariants } from './components/ui/counter.js';
+export { Chip, chipVariants } from './components/ui/chip.js';
+export { SectionHeader } from './components/ui/section-header.js';
+export { NavItem } from './components/ui/nav-item.js';
+export { ReplySummary } from './components/ui/reply-summary.js';
+export { MessageToolbar, MessageToolbarButton } from './components/ui/message-toolbar.js';
+export { PanelSection } from './components/ui/panel-section.js';
+// prettier-ignore
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb.js';
+export { SandboxedFrame, sandboxFor, } from './components/ui/sandboxed-frame.js';
+export { CodeView } from './components/ui/code-view.js';
+// prettier-ignore
+export { CodeBlock, CodeBlockHeader, CodeBlockTitle, CodeBlockActions, CodeBlockCopyButton, CodeBlockContent, CodeBlockLine, CodeBlockLines, CodeBlockFooter } from './components/ui/code-block.js';
+// prettier-ignore
+export { Trace, TraceItem, TraceLine, TraceIcon, TraceStatusIcon, TraceTitle, TraceDescription, TraceCollapsible, TraceCollapsibleTrigger, TraceCollapsibleContent } from './components/ui/trace.js';
+export { useCodeHighlighting } from './hooks/use-code-highlighting.js';
+export { codeLanguageForFence, codeLanguageForFileName, } from './lib/code-language.js';
+export { copyText } from './lib/copy-text.js';
+export { ViewerShell, } from './components/ui/viewer-shell.js';
+export { ThemeToggle } from './components/ui/theme-toggle.js';

package/dist/lib/code-highlighter.d.ts

@@ -0,0 +1,9 @@
+import type { CodeLanguage } from './code-language.js';
+export type CodeToken = {
+    content: string;
+    color?: string;
+    fontStyle?: number;
+};
+export type CodeLines = CodeToken[][];
+/** Tokenises `code` line by line. Rejects if the highlighter or the grammar cannot load. */
+export declare const highlightCode: (code: string, lang: CodeLanguage) => Promise<CodeLines>;

package/dist/lib/code-highlighter.js

@@ -0,0 +1,65 @@
+/**
+ * The Shiki highlighter, loaded on demand. Nothing outside this file imports `shiki`, and this
+ * file is only ever reached through a dynamic `import()`, so the core, the regex engine and every
+ * grammar land in their own chunks and the main bundle does not grow.
+ *
+ * Uses the JavaScript regex engine (no Oniguruma wasm) and a CSS-variables theme: token colours
+ * are `var(--code-token-*)` references that `tokens.css` maps to the design tokens for light and
+ * dark, so switching theme never re-highlights.
+ */
+import { createHighlighterCore, createCssVariablesTheme } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+const THEME_NAME = 'streams-code';
+// One static import per grammar so the bundler emits one chunk each. A grammar that embeds others
+// (php -> html/css/js/sql, scss -> css) pulls them in through its own default export.
+const GRAMMARS = {
+    typescript: () => import('shiki/langs/typescript.mjs'),
+    tsx: () => import('shiki/langs/tsx.mjs'),
+    javascript: () => import('shiki/langs/javascript.mjs'),
+    jsx: () => import('shiki/langs/jsx.mjs'),
+    json: () => import('shiki/langs/json.mjs'),
+    jsonl: () => import('shiki/langs/jsonl.mjs'),
+    yaml: () => import('shiki/langs/yaml.mjs'),
+    python: () => import('shiki/langs/python.mjs'),
+    sql: () => import('shiki/langs/sql.mjs'),
+    go: () => import('shiki/langs/go.mjs'),
+    ruby: () => import('shiki/langs/ruby.mjs'),
+    java: () => import('shiki/langs/java.mjs'),
+    kotlin: () => import('shiki/langs/kotlin.mjs'),
+    swift: () => import('shiki/langs/swift.mjs'),
+    rust: () => import('shiki/langs/rust.mjs'),
+    c: () => import('shiki/langs/c.mjs'),
+    cpp: () => import('shiki/langs/cpp.mjs'),
+    csharp: () => import('shiki/langs/csharp.mjs'),
+    php: () => import('shiki/langs/php.mjs'),
+    css: () => import('shiki/langs/css.mjs'),
+    scss: () => import('shiki/langs/scss.mjs'),
+    xml: () => import('shiki/langs/xml.mjs'),
+    toml: () => import('shiki/langs/toml.mjs'),
+    ini: () => import('shiki/langs/ini.mjs'),
+    diff: () => import('shiki/langs/diff.mjs'),
+    shellscript: () => import('shiki/langs/shellscript.mjs'),
+};
+let highlighter;
+const getHighlighter = () => {
+    highlighter ??= createHighlighterCore({
+        themes: [createCssVariablesTheme({ name: THEME_NAME, variablePrefix: '--code-' })],
+        langs: [],
+        // Forgiving: a grammar pattern the JS engine cannot translate matches nothing instead of throwing.
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+    }).catch((error) => {
+        highlighter = undefined; // let a later open retry
+        throw error;
+    });
+    return highlighter;
+};
+/** Tokenises `code` line by line. Rejects if the highlighter or the grammar cannot load. */
+export const highlightCode = async (code, lang) => {
+    const core = await getHighlighter();
+    if (!core.getLoadedLanguages().includes(lang)) {
+        const grammar = await GRAMMARS[lang]();
+        await core.loadLanguage(grammar.default);
+    }
+    const { tokens } = core.codeToTokens(code, { lang, theme: THEME_NAME });
+    return tokens.map((line) => line.map(({ content, color, fontStyle }) => ({ content, color, fontStyle })));
+};

package/dist/lib/code-language.d.ts

@@ -0,0 +1,13 @@
+/**
+ * File name -> highlight language, with no highlighter import so it stays in the main bundle.
+ * An unknown extension (txt, log, conf, cfg, none) maps to `null` and the viewer never loads
+ * the highlighter for it.
+ */
+export type CodeLanguage = 'typescript' | 'tsx' | 'javascript' | 'jsx' | 'json' | 'jsonl' | 'yaml' | 'python' | 'sql' | 'go' | 'ruby' | 'java' | 'kotlin' | 'swift' | 'rust' | 'c' | 'cpp' | 'csharp' | 'php' | 'css' | 'scss' | 'xml' | 'toml' | 'ini' | 'diff' | 'shellscript';
+export declare const codeLanguageForFileName: (fileName: string | undefined) => CodeLanguage | null;
+/**
+ * Markdown fence label (```ts) -> highlight language. Only an allowlist resolves: an unsupported
+ * or hostile label returns `null`, so it can never pick a grammar import path. Callers keep the
+ * raw label for the visible header.
+ */
+export declare const codeLanguageForFence: (label: string | undefined) => CodeLanguage | null;

package/dist/lib/code-language.js

@@ -0,0 +1,103 @@
+const EXTENSIONS = {
+    ts: 'typescript',
+    mts: 'typescript',
+    cts: 'typescript',
+    tsx: 'tsx',
+    js: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    jsx: 'jsx',
+    json: 'json',
+    jsonl: 'jsonl',
+    ndjson: 'jsonl',
+    yaml: 'yaml',
+    yml: 'yaml',
+    py: 'python',
+    sql: 'sql',
+    go: 'go',
+    rb: 'ruby',
+    java: 'java',
+    kt: 'kotlin',
+    kts: 'kotlin',
+    swift: 'swift',
+    rs: 'rust',
+    c: 'c',
+    h: 'c',
+    cpp: 'cpp',
+    cc: 'cpp',
+    cxx: 'cpp',
+    hpp: 'cpp',
+    hh: 'cpp',
+    hxx: 'cpp',
+    cs: 'csharp',
+    php: 'php',
+    css: 'css',
+    scss: 'scss',
+    xml: 'xml',
+    toml: 'toml',
+    ini: 'ini',
+    diff: 'diff',
+    patch: 'diff',
+    sh: 'shellscript',
+    bash: 'shellscript',
+    zsh: 'shellscript',
+};
+export const codeLanguageForFileName = (fileName) => {
+    if (!fileName)
+        return null;
+    const dot = fileName.lastIndexOf('.');
+    if (dot < 0)
+        return null;
+    // Own-property check: "constructor" or "__proto__" after a dot must not resolve to a prototype member.
+    const ext = fileName.slice(dot + 1).toLowerCase();
+    return Object.hasOwn(EXTENSIONS, ext) ? EXTENSIONS[ext] : null;
+};
+const FENCE_LABELS = {
+    ...Object.fromEntries([
+        'typescript',
+        'tsx',
+        'javascript',
+        'jsx',
+        'json',
+        'jsonl',
+        'yaml',
+        'python',
+        'sql',
+        'go',
+        'ruby',
+        'java',
+        'kotlin',
+        'swift',
+        'rust',
+        'c',
+        'cpp',
+        'csharp',
+        'php',
+        'css',
+        'scss',
+        'xml',
+        'toml',
+        'ini',
+        'diff',
+        'shellscript',
+    ].map((name) => [name, name])),
+    ...EXTENSIONS,
+    golang: 'go',
+    'c++': 'cpp',
+    'c#': 'csharp',
+    python3: 'python',
+    node: 'javascript',
+    shell: 'shellscript',
+    console: 'shellscript',
+};
+/**
+ * Markdown fence label (```ts) -> highlight language. Only an allowlist resolves: an unsupported
+ * or hostile label returns `null`, so it can never pick a grammar import path. Callers keep the
+ * raw label for the visible header.
+ */
+export const codeLanguageForFence = (label) => {
+    const key = label?.trim().split(/\s+/)[0]?.toLowerCase();
+    if (!key)
+        return null;
+    return Object.hasOwn(FENCE_LABELS, key) ? FENCE_LABELS[key] : null;
+};

package/dist/lib/code-tokens.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { CodeToken } from './code-highlighter.js';
+/** One line of highlighter tokens as `<span>` text nodes. Token content is never markup. */
+export declare const renderCodeTokens: (line: CodeToken[]) => ReactNode;
+/**
+ * The lines to draw for `code`: split on newline, minus the one empty line a trailing newline
+ * would add. Display only; copy always uses the original string.
+ */
+export declare const codeDisplayLines: (code: string) => string[];

package/dist/lib/code-tokens.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+const FONT_ITALIC = 1;
+const FONT_BOLD = 2;
+const FONT_UNDERLINE = 4;
+const styleOf = (color, fontStyle) => {
+    if (!color && !fontStyle)
+        return undefined;
+    return {
+        color,
+        fontStyle: fontStyle && fontStyle & FONT_ITALIC ? 'italic' : undefined,
+        fontWeight: fontStyle && fontStyle & FONT_BOLD ? 700 : undefined,
+        textDecoration: fontStyle && fontStyle & FONT_UNDERLINE ? 'underline' : undefined,
+    };
+};
+/** One line of highlighter tokens as `<span>` text nodes. Token content is never markup. */
+export const renderCodeTokens = (line) => (_jsx(Fragment, { children: line.map((token, index) => (_jsx("span", { style: styleOf(token.color, token.fontStyle), children: token.content }, index))) }));
+/**
+ * The lines to draw for `code`: split on newline, minus the one empty line a trailing newline
+ * would add. Display only; copy always uses the original string.
+ */
+export const codeDisplayLines = (code) => {
+    const lines = code.split('\n');
+    if (lines.length > 1 && lines[lines.length - 1] === '')
+        lines.pop();
+    return lines;
+};

package/dist/lib/copy-text.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Writes `text` to the clipboard exactly as given. Resolves true only when the browser
+ * reports success: the async Clipboard API first, then a hidden-textarea selection copy for
+ * webviews where the API is missing or rejects. Never reads the clipboard.
+ */
+export declare const copyText: (text: string) => Promise<boolean>;

package/dist/lib/copy-text.js

@@ -0,0 +1,46 @@
+const copyWithSelection = (text) => {
+    if (typeof document === 'undefined' || typeof document.execCommand !== 'function')
+        return false;
+    const field = document.createElement('textarea');
+    field.value = text;
+    field.setAttribute('readonly', '');
+    field.setAttribute('aria-hidden', 'true');
+    field.style.position = 'fixed';
+    field.style.top = '0';
+    field.style.opacity = '0';
+    const selection = document.getSelection();
+    const saved = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+    document.body.appendChild(field);
+    let copied = false;
+    try {
+        field.select();
+        field.setSelectionRange(0, text.length);
+        copied = document.execCommand('copy');
+    }
+    catch {
+        copied = false;
+    }
+    field.remove();
+    if (saved && selection) {
+        selection.removeAllRanges();
+        selection.addRange(saved);
+    }
+    return copied;
+};
+/**
+ * Writes `text` to the clipboard exactly as given. Resolves true only when the browser
+ * reports success: the async Clipboard API first, then a hidden-textarea selection copy for
+ * webviews where the API is missing or rejects. Never reads the clipboard.
+ */
+export const copyText = async (text) => {
+    try {
+        if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+    }
+    catch {
+        // fall through to the selection copy
+    }
+    return copyWithSelection(text);
+};

package/dist/lib/home-tile.d.ts

@@ -0,0 +1,12 @@
+/** Number of stream tile colours (`--home-tile-1` … `--home-tile-4`). Append-only, see tokens.mjs. */
+export declare const HOME_TILE_COUNT = 4;
+/**
+ * Which tile colour (1-based) a stream gets. Rendezvous (highest-random-weight) hashing: every
+ * colour scores the stream id independently and the highest score wins. Appending colour N+1
+ * therefore only moves the streams that now score highest on it (about 1/(N+1) of them), where
+ * `hash % N` would recolour almost everything. Never reorder or insert colours, only append.
+ * iOS computes the same function (`HomeTileColor`); both test suites check the same fixed ids,
+ * so the two clients never disagree.
+ */
+export declare const pickHomeTile: (streamId: string, count: number) => number;
+export declare const homeTileIndex: (streamId: string) => number;

package/dist/lib/home-tile.js

@@ -0,0 +1,45 @@
+/** Number of stream tile colours (`--home-tile-1` … `--home-tile-4`). Append-only, see tokens.mjs. */
+export const HOME_TILE_COUNT = 4;
+const FNV_OFFSET = 0x811c9dc5;
+const FNV_PRIME = 0x01000193;
+const INDEX_SALT = 0x9e3779b1;
+const fnv1a = (text) => {
+    let hash = FNV_OFFSET;
+    for (const byte of new TextEncoder().encode(text)) {
+        hash ^= byte;
+        hash = Math.imul(hash, FNV_PRIME) >>> 0;
+    }
+    return hash;
+};
+// murmur3 finaliser: spreads the bits so every colour gets an independent score.
+const mix = (value) => {
+    let h = value >>> 0;
+    h ^= h >>> 16;
+    h = Math.imul(h, 0x85ebca6b) >>> 0;
+    h ^= h >>> 13;
+    h = Math.imul(h, 0xc2b2ae35) >>> 0;
+    h ^= h >>> 16;
+    return h >>> 0;
+};
+/**
+ * Which tile colour (1-based) a stream gets. Rendezvous (highest-random-weight) hashing: every
+ * colour scores the stream id independently and the highest score wins. Appending colour N+1
+ * therefore only moves the streams that now score highest on it (about 1/(N+1) of them), where
+ * `hash % N` would recolour almost everything. Never reorder or insert colours, only append.
+ * iOS computes the same function (`HomeTileColor`); both test suites check the same fixed ids,
+ * so the two clients never disagree.
+ */
+export const pickHomeTile = (streamId, count) => {
+    const base = fnv1a(streamId.toLowerCase());
+    let best = 1;
+    let bestScore = -1;
+    for (let index = 1; index <= count; index += 1) {
+        const score = mix((base ^ Math.imul(index, INDEX_SALT)) >>> 0);
+        if (score > bestScore) {
+            best = index;
+            bestScore = score;
+        }
+    }
+    return best;
+};
+export const homeTileIndex = (streamId) => pickHomeTile(streamId, HOME_TILE_COUNT);

package/dist/lib/reveal-mask.d.ts

@@ -0,0 +1,9 @@
+/** Width of the soft edge a clipped one-line label fades out over, instead of an ellipsis. */
+export declare const REVEAL_FADE_PX = 24;
+/**
+ * `mask-image` for a one-line label clipped by `hiddenPx` and slid `offsetPx` toward its end
+ * (`NavItem`'s hover reveal). The leading edge fades in as text leaves it; the trailing fade melts
+ * away as the last letters arrive, so a fully revealed title ends crisp. `none` when nothing is
+ * clipped. `rtl` puts the start on the right.
+ */
+export declare function revealMask(offsetPx: number, hiddenPx: number, rtl?: boolean): string;

package/dist/lib/reveal-mask.js

@@ -0,0 +1,16 @@
+/** Width of the soft edge a clipped one-line label fades out over, instead of an ellipsis. */
+export const REVEAL_FADE_PX = 24;
+/**
+ * `mask-image` for a one-line label clipped by `hiddenPx` and slid `offsetPx` toward its end
+ * (`NavItem`'s hover reveal). The leading edge fades in as text leaves it; the trailing fade melts
+ * away as the last letters arrive, so a fully revealed title ends crisp. `none` when nothing is
+ * clipped. `rtl` puts the start on the right.
+ */
+export function revealMask(offsetPx, hiddenPx, rtl = false) {
+    const moved = Math.abs(offsetPx);
+    const lead = Math.min(REVEAL_FADE_PX, moved);
+    const tail = Math.min(REVEAL_FADE_PX, Math.max(0, hiddenPx - moved));
+    if (lead === 0 && tail === 0)
+        return 'none';
+    return `linear-gradient(to ${rtl ? 'left' : 'right'}, transparent, #000 ${lead}px, #000 calc(100% - ${tail}px), transparent)`;
+}

package/dist/lib/text-direction.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Mixed-script text direction — faithful port of HAC #1045
+ * (`packages/chat-ui-components/src/utils/textDirection.ts`).
+ *
+ * Word-votes Hebrew vs English *prose*; product labels, acronyms, camelCase and
+ * URL-shaped tokens are neutral so e.g. `"monday יצר…"` stays RTL. Ordinary
+ * lowercase English words (`hello`, `please`) **do** vote LTR — only technical
+ * shapes are excluded. Falls back to UAX #9 first-strong + 70% dominant-script.
+ * BOM (U+FEFF) never counts as RTL.
+ */
+export type TextDirection = 'ltr' | 'rtl';
+/**
+ * Technical / product-label runs must not tip the prose vote.
+ * Ordinary lowercase English (`hello`, `please`) is **not** neutral — only
+ * acronyms, camelCase, and tokens with technical punctuation.
+ */
+export declare const isNeutralToken: (token: string) => boolean;
+/** Whether `text` contains any character that can decide a direction. */
+export declare const hasStrongCharacter: (text: string) => boolean;
+/**
+ * Resolve the base direction of a run of text.
+ *
+ * Hebrew and English prose words vote first. Product labels, acronyms and
+ * code-shaped tokens are neutral. A prose tie uses its first non-technical
+ * word; content with no recognized prose falls back to UAX #9 first-strong
+ * with a dominant-script override.
+ */
+export declare const detectTextDirection: (text: string) => TextDirection;

package/dist/lib/text-direction.js

@@ -0,0 +1,119 @@
+/**
+ * Mixed-script text direction — faithful port of HAC #1045
+ * (`packages/chat-ui-components/src/utils/textDirection.ts`).
+ *
+ * Word-votes Hebrew vs English *prose*; product labels, acronyms, camelCase and
+ * URL-shaped tokens are neutral so e.g. `"monday יצר…"` stays RTL. Ordinary
+ * lowercase English words (`hello`, `please`) **do** vote LTR — only technical
+ * shapes are excluded. Falls back to UAX #9 first-strong + 70% dominant-script.
+ * BOM (U+FEFF) never counts as RTL.
+ */
+/**
+ * Hebrew and its presentation forms — the RTL script chat users write in.
+ * Other RTL blocks are listed so switching from `dir="auto"` does not drop
+ * support those scripts already had.
+ */
+const RTL_LETTER = /[\u0590-\u05FF\uFB1D-\uFB4F\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u0780-\u07BF\u07C0-\u07FF\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFE]/;
+/**
+ * Strong LTR letters. Enumerated (not `\p{L}`) to stay compatible with older
+ * targets; Latin / Greek / Cyrillic / CJK cover what chat sees.
+ */
+const LTR_LETTER = /[A-Za-z\u00C0-\u024F\u0370-\u03FF\u0400-\u04FF\u3040-\u30FF\u4E00-\u9FFF]/;
+/** Hebrew words are the prose signal this chat is tuned to recognize. */
+const HEBREW_WORD = /^[\u0590-\u05FF\uFB1D-\uFB4F]+$/;
+/**
+ * A broad Latin token captures product names, prose words, URLs, commands and
+ * identifiers. Wider than a dictionary word so technical text can be excluded.
+ */
+const LATIN_TOKEN = /^[A-Za-z][A-Za-z0-9_./:@?&=+#%~-]*$/;
+/**
+ * Technical / product-label runs must not tip the prose vote.
+ * Ordinary lowercase English (`hello`, `please`) is **not** neutral — only
+ * acronyms, camelCase, and tokens with technical punctuation.
+ */
+export const isNeutralToken = (token) => {
+    if (!token)
+        return true;
+    if (/^[A-Z0-9]{2,}$/.test(token))
+        return true;
+    return /[_./:@?&=+#%~-]/.test(token) || /[a-z][A-Z]/.test(token);
+};
+/**
+ * Count Hebrew and ordinary English *words*, excluding identifiers / labels.
+ * Character counts over-weight a short English product name; word voting mirrors
+ * what people perceive as prose.
+ */
+const proseDirection = (text) => {
+    let rtlWords = 0;
+    let ltrWords = 0;
+    let firstProseDirection = null;
+    const tokens = text.match(/[\u0590-\u05FF\uFB1D-\uFB4F]+|[A-Za-z][A-Za-z0-9_./:@?&=+#%~-]*/g) ?? [];
+    for (const token of tokens) {
+        if (HEBREW_WORD.test(token)) {
+            rtlWords += 1;
+            if (firstProseDirection === null)
+                firstProseDirection = 'rtl';
+        }
+        else if (LATIN_TOKEN.test(token) && !isNeutralToken(token)) {
+            ltrWords += 1;
+            if (firstProseDirection === null)
+                firstProseDirection = 'ltr';
+        }
+    }
+    if (rtlWords === 0 && ltrWords === 0)
+        return null;
+    if (rtlWords === ltrWords)
+        return firstProseDirection;
+    return rtlWords > ltrWords ? 'rtl' : 'ltr';
+};
+const strengthOf = (character) => {
+    if (RTL_LETTER.test(character))
+        return 'rtl';
+    if (LTR_LETTER.test(character))
+        return 'ltr';
+    return null;
+};
+/** Whether `text` contains any character that can decide a direction. */
+export const hasStrongCharacter = (text) => {
+    for (const character of text) {
+        if (strengthOf(character) !== null)
+            return true;
+    }
+    return false;
+};
+const DOMINANT_SCRIPT_SHARE = 0.7;
+/**
+ * Resolve the base direction of a run of text.
+ *
+ * Hebrew and English prose words vote first. Product labels, acronyms and
+ * code-shaped tokens are neutral. A prose tie uses its first non-technical
+ * word; content with no recognized prose falls back to UAX #9 first-strong
+ * with a dominant-script override.
+ */
+export const detectTextDirection = (text) => {
+    const prose = proseDirection(text);
+    if (prose !== null)
+        return prose;
+    let rtlCount = 0;
+    let ltrCount = 0;
+    let firstStrong = null;
+    for (const character of text) {
+        const strength = strengthOf(character);
+        if (strength === null)
+            continue;
+        if (firstStrong === null)
+            firstStrong = strength;
+        if (strength === 'rtl')
+            rtlCount += 1;
+        else
+            ltrCount += 1;
+    }
+    if (firstStrong === null)
+        return 'ltr';
+    const total = rtlCount + ltrCount;
+    if (rtlCount / total >= DOMINANT_SCRIPT_SHARE)
+        return 'rtl';
+    if (ltrCount / total >= DOMINANT_SCRIPT_SHARE)
+        return 'ltr';
+    return firstStrong;
+};