@medalsocial/meda 2.0.0 → 2.1.0

package/dist/post-preview/platforms/twitter.js

@@ -0,0 +1,132 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bookmark, Heart, MessageCircle, MoreHorizontal, Repeat2, Share } from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_TWITTER_LABELS = {
+    placeholder: "What's happening?",
+    now: 'now',
+    moreOptions: 'More options',
+    reply: 'Reply',
+    retweet: 'Retweet',
+    like: 'Like',
+    save: 'Save',
+    share: 'Share',
+    viewAnalytics: 'View post analytics',
+};
+function useMentionTrigger(textareaRef, value, onChange) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const triggerStartRef = useRef(null);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setQuery('');
+        triggerStartRef.current = null;
+    }, []);
+    const handleInput = useCallback(() => {
+        const ta = textareaRef.current;
+        if (!ta)
+            return;
+        const cursor = ta.selectionStart ?? 0;
+        const text = ta.value;
+        // Walk back from cursor to find `@` until whitespace or start.
+        let i = cursor - 1;
+        let foundAt = -1;
+        while (i >= 0) {
+            const ch = text[i];
+            if (ch === '@') {
+                // Must be at start or preceded by whitespace
+                if (i === 0 || /\s/.test(text[i - 1])) {
+                    foundAt = i;
+                }
+                break;
+            }
+            if (/\s/.test(ch))
+                break;
+            i -= 1;
+        }
+        if (foundAt === -1) {
+            if (isOpen)
+                close();
+            return;
+        }
+        triggerStartRef.current = foundAt;
+        setQuery(text.slice(foundAt + 1, cursor));
+        setIsOpen(true);
+    }, [textareaRef, isOpen, close]);
+    const insertMention = useCallback((mention) => {
+        const ta = textareaRef.current;
+        if (!ta)
+            return;
+        const start = triggerStartRef.current;
+        if (start === null)
+            return;
+        const cursor = ta.selectionStart ?? 0;
+        const before = value.slice(0, start);
+        const after = value.slice(cursor);
+        const formatted = mention.startsWith('@') ? mention : `@${mention}`;
+        const next = `${before}${formatted} ${after}`;
+        onChange?.(next);
+        close();
+    }, [textareaRef, value, onChange, close]);
+    return { isOpen, query, close, insertMention, handleInput };
+}
+function ContentWithMentions({ text, accent }) {
+    // Build typed parts with stable offsets so keys don't rely on positional index.
+    const segments = [];
+    let offset = 0;
+    for (const part of text.split(/(@[A-Za-z0-9_]+)/g)) {
+        if (!part)
+            continue;
+        segments.push({
+            key: `${offset}-${part}`,
+            isMention: /^@[A-Za-z0-9_]+$/.test(part),
+            value: part,
+        });
+        offset += part.length;
+    }
+    return (_jsx(_Fragment, { children: segments.map((seg) => seg.isMention ? (_jsx("span", { className: accent, children: seg.value }, seg.key)) : (_jsx("span", { children: seg.value }, seg.key))) }));
+}
+const THEME_CLASSES = {
+    light: {
+        surface: 'bg-white',
+        text: 'text-gray-900',
+        muted: 'text-gray-500',
+        border: 'border-gray-200',
+        mention: 'text-blue-500',
+    },
+    dim: {
+        surface: 'bg-[#15202B]',
+        text: 'text-white',
+        muted: 'text-gray-400',
+        border: 'border-[#38444D]',
+        mention: 'text-[#1D9BF0]',
+    },
+    'lights-out': {
+        surface: 'bg-black',
+        text: 'text-white',
+        muted: 'text-gray-500',
+        border: 'border-gray-800',
+        mention: 'text-blue-400',
+    },
+};
+/**
+ * Twitter / X feed-card preview. Supports light, dim, and lights-out
+ * themes plus an optional `@mention` picker render slot.
+ */
+export function TwitterPreview({ displayName, username, avatarUrl, content, mediaUrls, characterLimit, editable = false, onContentChange, className, labels, theme = 'lights-out', renderMentionPicker, }) {
+    const l = { ...DEFAULT_TWITTER_LABELS, ...labels };
+    const t = THEME_CLASSES[theme];
+    const formattedUsername = username.startsWith('@') ? username : `@${username}`;
+    const textareaRef = useRef(null);
+    const mention = useMentionTrigger(textareaRef, content, onContentChange);
+    return (_jsx("div", { "data-slot": "post-preview", "data-platform": "twitter", "data-theme": theme, className: cn('@container p-4 @[420px]:p-5', t.surface, t.text, className), children: _jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-10 w-10 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1 text-[15px]", children: [_jsx("span", { className: cn('truncate font-bold', t.text), children: displayName }), _jsx("span", { className: cn('truncate', t.muted), children: formattedUsername }), _jsx("span", { className: t.muted, children: "\u00B7" }), _jsx("span", { className: t.muted, children: l.now })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: cn('-m-1.5 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1.5', t.muted, theme === 'light' ? 'hover:bg-gray-100' : 'hover:bg-gray-800'), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) })] }), editable ? (_jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: textareaRef, value: content, onChange: (e) => onContentChange?.(e.target.value), onInput: mention.handleInput, onKeyUp: mention.handleInput, placeholder: l.placeholder, className: cn('mt-1 min-h-[60px] text-[15px]', t.text, theme === 'light' ? 'placeholder:text-gray-500' : 'placeholder:text-gray-500') }), renderMentionPicker && mention.isOpen
+                                    ? renderMentionPicker({
+                                        query: mention.query,
+                                        onPick: mention.insertMention,
+                                        onCancel: mention.close,
+                                    })
+                                    : null, characterLimit !== undefined && (_jsxs("div", { "data-slot": "twitter-character-counter", className: cn('mt-1 text-right text-xs', content.length > characterLimit ? 'text-red-500' : t.muted), children: [_jsx("span", { children: characterLimit - content.length }), _jsx("span", { className: "mx-1", children: "/" }), _jsx("span", { children: characterLimit })] }))] })) : (_jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-[15px]", children: _jsx(ContentWithMentions, { text: content, accent: t.mention }) })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: cn('mt-3 overflow-hidden rounded-2xl border', t.border, mediaUrls.length === 1 && 'aspect-video', mediaUrls.length >= 2 && 'grid aspect-video grid-cols-2 gap-0.5'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsx("div", { className: cn('overflow-hidden bg-gray-800', mediaUrls.length === 1 && 'h-full', mediaUrls.length === 3 && i === 0 && 'row-span-2'), children: _jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }, url))) })), _jsxs("div", { className: cn('mt-3 flex max-w-[425px] items-center justify-between @[420px]:max-w-[480px]', t.muted), children: [_jsxs("button", { type: "button", "aria-label": l.reply, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: [_jsx(MessageCircle, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.retweet, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-green-500/10 hover:text-green-400", children: [_jsx(Repeat2, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.like, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-pink-500/10 hover:text-pink-400", children: [_jsx(Heart, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsx("button", { type: "button", "aria-label": l.viewAnalytics, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: _jsx("svg", { className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z" }) }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "aria-label": l.save, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: _jsx(Bookmark, { className: "h-[18px] w-[18px]" }) }), _jsx("button", { type: "button", "aria-label": l.share, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: _jsx(Share, { className: "h-[18px] w-[18px]" }) })] })] })] })] }) }));
+}

package/dist/post-preview/platforms/youtube.d.ts

@@ -0,0 +1,17 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export interface YouTubeLabels {
+    placeholder: string;
+    justNow: string;
+    like: string;
+    dislike: string;
+    share: string;
+    moreOptions: string;
+}
+export declare const DEFAULT_YOUTUBE_LABELS: YouTubeLabels;
+export interface YouTubePreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<YouTubeLabels>;
+}
+/**
+ * YouTube community-post preview. Honors `.dark` for the dark variant.
+ */
+export declare function YouTubePreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: YouTubePreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/youtube.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreVertical, ThumbsDown, ThumbsUp } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_YOUTUBE_LABELS = {
+    placeholder: 'Create a post...',
+    justNow: 'just now',
+    like: 'Like',
+    dislike: 'Dislike',
+    share: 'Share',
+    moreOptions: 'More options',
+};
+/**
+ * YouTube community-post preview. Honors `.dark` for the dark variant.
+ */
+export function YouTubePreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_YOUTUBE_LABELS, ...labels };
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "youtube", className: cn('@container bg-white p-4 text-gray-900 @[420px]:text-[14px] dark:bg-[#0f0f0f] dark:text-white', className), children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-10 w-10" }), _jsx("div", { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-[14px]", children: displayName }), _jsx("span", { className: "text-[12px] text-gray-500 dark:text-gray-400", children: l.justNow })] }) })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800", children: _jsx(MoreVertical, { className: "h-5 w-5" }) })] }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "mt-3 min-h-[60px] text-[14px] placeholder:text-gray-500" })) : (_jsx("p", { className: "mt-3 whitespace-pre-wrap break-words text-[14px]", children: content })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: "mt-3 overflow-hidden rounded-xl", children: _jsx("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800", children: _jsx("img", { src: mediaUrls[0], alt: "Media 1", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }) })), _jsxs("div", { className: "mt-4 flex items-center gap-2", children: [_jsxs("button", { type: "button", className: "inline-flex min-h-11 items-center gap-1 rounded-full bg-gray-100 px-3 py-1.5 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", "aria-label": l.like, children: [_jsx(ThumbsUp, { className: "h-4 w-4" }), _jsx("span", { className: "font-medium text-[13px]", children: "0" })] }), _jsx("button", { type: "button", "aria-label": l.dislike, className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-gray-100 p-2 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: _jsx(ThumbsDown, { className: "h-4 w-4" }) }), _jsxs("button", { type: "button", "aria-label": l.share, className: "inline-flex min-h-11 items-center gap-1 rounded-full bg-gray-100 px-3 py-1.5 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: [_jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" }) }), _jsx("span", { className: "font-medium text-[13px]", children: "0" })] })] })] }));
+}

package/dist/post-preview/post-preview.d.ts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { BlueSkyPreviewProps, DiscordPreviewProps, FacebookPreviewProps, GenericPreviewProps, GoogleBusinessPreviewProps, InstagramPreviewProps, LinkedInPreviewProps, TelegramPreviewProps, ThreadsPreviewProps, TikTokPreviewProps, TwitterPreviewProps, YouTubePreviewProps } from './platforms/index.js';
+import type { PostPreviewSlots } from './types.js';
+export type PostPreviewProps = PostPreviewSlots & (({
+    platform: 'instagram';
+} & InstagramPreviewProps) | ({
+    platform: 'twitter';
+} & TwitterPreviewProps) | ({
+    platform: 'facebook';
+} & FacebookPreviewProps) | ({
+    platform: 'linkedin';
+} & LinkedInPreviewProps) | ({
+    platform: 'tiktok';
+} & TikTokPreviewProps) | ({
+    platform: 'youtube';
+} & YouTubePreviewProps) | ({
+    platform: 'threads';
+} & ThreadsPreviewProps) | ({
+    platform: 'bluesky';
+} & BlueSkyPreviewProps) | ({
+    platform: 'discord';
+} & DiscordPreviewProps) | ({
+    platform: 'telegram';
+} & TelegramPreviewProps) | ({
+    platform: 'google_business';
+} & GoogleBusinessPreviewProps) | ({
+    platform: 'generic';
+} & GenericPreviewProps));
+export declare function PostPreview(props: PostPreviewProps): React.ReactElement;

package/dist/post-preview/post-preview.js

@@ -0,0 +1,70 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { BlueSkyPreview } from './platforms/bluesky.js';
+import { DiscordPreview } from './platforms/discord.js';
+import { FacebookPreview } from './platforms/facebook.js';
+import { GenericPreview } from './platforms/generic.js';
+import { GoogleBusinessPreview } from './platforms/google-business.js';
+import { InstagramPreview } from './platforms/instagram.js';
+import { LinkedInPreview } from './platforms/linkedin.js';
+import { TelegramPreview } from './platforms/telegram.js';
+import { ThreadsPreview } from './platforms/threads.js';
+import { TikTokPreview } from './platforms/tiktok.js';
+import { TwitterPreview } from './platforms/twitter.js';
+import { YouTubePreview } from './platforms/youtube.js';
+export function PostPreview(props) {
+    const { platform, mode, renderEditor, renderMediaPicker, renderEmojiPicker, renderMentionPicker, onMediaUrlsChange, ...rest } = props;
+    const isEdit = mode === 'edit' || rest.editable === true;
+    const showToolbar = isEdit &&
+        (renderMediaPicker !== undefined ||
+            renderEmojiPicker !== undefined ||
+            renderMentionPicker !== undefined);
+    const platformProps = {
+        ...rest,
+        editable: isEdit && renderEditor === undefined,
+    };
+    const editorNode = renderEditor?.({
+        platform,
+        value: rest.content ?? '',
+        onChange: (next) => rest.onContentChange?.(next),
+    });
+    const toolbarNode = showToolbar ? (_jsxs("div", { className: "meda-post-preview__toolbar", role: "toolbar", "aria-label": "Post editor", children: [renderMediaPicker?.({
+                platform,
+                current: rest.mediaUrls,
+                onPick: (next) => onMediaUrlsChange?.(next),
+            }), renderEmojiPicker?.({
+                onSelect: (emoji) => rest.onContentChange?.((rest.content ?? '') + emoji),
+            }), renderMentionPicker?.({ platform })] })) : null;
+    const PreviewElement = renderPlatform(platform, platformProps);
+    if (editorNode === undefined && toolbarNode === null) {
+        return PreviewElement;
+    }
+    return (_jsxs("div", { className: "meda-post-preview", "data-platform": platform, children: [toolbarNode, editorNode, PreviewElement] }));
+}
+function renderPlatform(platform, props) {
+    switch (platform) {
+        case 'instagram':
+            return _jsx(InstagramPreview, { ...props });
+        case 'twitter':
+            return _jsx(TwitterPreview, { ...props });
+        case 'facebook':
+            return _jsx(FacebookPreview, { ...props });
+        case 'linkedin':
+            return _jsx(LinkedInPreview, { ...props });
+        case 'tiktok':
+            return _jsx(TikTokPreview, { ...props });
+        case 'youtube':
+            return _jsx(YouTubePreview, { ...props });
+        case 'threads':
+            return _jsx(ThreadsPreview, { ...props });
+        case 'bluesky':
+            return _jsx(BlueSkyPreview, { ...props });
+        case 'discord':
+            return _jsx(DiscordPreview, { ...props });
+        case 'telegram':
+            return _jsx(TelegramPreview, { ...props });
+        case 'google_business':
+            return _jsx(GoogleBusinessPreview, { ...props });
+        case 'generic':
+            return _jsx(GenericPreview, { ...props });
+    }
+}

package/dist/post-preview/public.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/post-preview/public.js

@@ -0,0 +1,6 @@
+// open/meda/src/post-preview/public.ts
+//
+// Re-exported into `src/index.ts` so consumers can import from the
+// package root as well as the subpath. Subpath import is preferred
+// for tree-shaking; root import is provided for convenience.
+export * from './index.js';

package/dist/post-preview/types.d.ts

@@ -0,0 +1,82 @@
+import type * as React from 'react';
+/**
+ * Public types for the post-preview surface.
+ *
+ * These types are framework-neutral and intentionally free of
+ * Convex / app-specific identifiers. Platform-specific extras
+ * (Telegram poll, Discord embeds, LinkedIn mentions) live next to
+ * their platform module.
+ */
+/**
+ * Platforms with a dedicated preview component. Any platform not in
+ * this list should use `GenericPreview` as a fallback.
+ */
+export type PlatformId = 'instagram' | 'twitter' | 'facebook' | 'linkedin' | 'tiktok' | 'youtube' | 'threads' | 'bluesky' | 'discord' | 'telegram' | 'google_business' | 'generic';
+export interface PostPreviewSlots {
+    /** When 'edit', enables editable mode. Sugar for `editable: true`. */
+    mode?: 'preview' | 'edit';
+    /** Replaces the platform's content textarea when in edit mode. */
+    renderEditor?: (ctx: {
+        platform: PlatformId;
+        value: string;
+        onChange: (next: string) => void;
+    }) => React.ReactNode;
+    /** Renders a media picker trigger in the edit toolbar. */
+    renderMediaPicker?: (ctx: {
+        platform: PlatformId;
+        current: string[] | undefined;
+        onPick: (next: string[]) => void;
+    }) => React.ReactNode;
+    /** Renders an emoji picker trigger in the edit toolbar. */
+    renderEmojiPicker?: (ctx: {
+        onSelect: (emoji: string) => void;
+    }) => React.ReactNode;
+    /**
+     * Renders a mention picker trigger in the edit toolbar. The consumer owns
+     * the mention search state and content insertion; the slot only receives
+     * the active platform so it can scope its own data source. Use
+     * `renderEditor` together with platform-specific mention props (e.g.
+     * `LinkedInMentionPickerContext`) to wire selection back into content.
+     */
+    renderMentionPicker?: (ctx: {
+        platform: PlatformId;
+    }) => React.ReactNode;
+    /** Called when renderMediaPicker invokes onPick. */
+    onMediaUrlsChange?: (mediaUrls: string[]) => void;
+}
+/**
+ * Visual frame mode for any platform preview.
+ * - `card` (default): fluid feed-card layout. Fits container width.
+ * - `device`: wraps in a phone shell with status bar / tab bar at
+ *   a native phone aspect ratio.
+ */
+export type PostPreviewFrame = 'card' | 'device';
+/**
+ * Shared props for every platform preview.
+ *
+ * Per-platform components extend this with their own optional extras
+ * (e.g. `TelegramPreviewProps` adds `poll`, `pinMessage`, `replyMarkup`).
+ */
+export interface PostPreviewBaseProps {
+    /** Channel display name (e.g. "Acme Studios"). */
+    displayName: string;
+    /** Channel handle/username; leading `@` is optional and stripped. */
+    username: string;
+    /** Channel avatar URL. Falls back to initials when omitted. */
+    avatarUrl?: string;
+    /** Post body text. Plain text; per-platform formatting (mentions,
+     * hashtags) is applied at render time. */
+    content: string;
+    /** Image / video URLs for the post media. */
+    mediaUrls?: string[];
+    /** Optional override for the per-platform character limit display. */
+    characterLimit?: number;
+    /** Visual frame mode. See `PostPreviewFrame`. */
+    frame?: PostPreviewFrame;
+    /** Enable inline editing of `content`. Requires `onContentChange`. */
+    editable?: boolean;
+    /** Called on every keystroke when `editable` is true. */
+    onContentChange?: (content: string) => void;
+    /** Class applied to the outer wrapper element. */
+    className?: string;
+}

package/dist/post-preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/filter-rail.js

@@ -7,8 +7,23 @@ function FilterRailGroup({ title, description, children, className, ...props })
 }
 function FilterRailRoot({ title, description, search, actions, footer, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
     const titleId = useId();
-    const label = ariaLabel ?? (ariaLabelledBy ? undefined : typeof title === 'string' ? title : undefined);
-    const labelledBy = ariaLabelledBy ?? (label ? undefined : title ? titleId : undefined);
+    // Use `!== undefined` (not truthy) so that callers passing an explicit
+    // empty string clear the attribute instead of falling through to the
+    // title-derived fallback.
+    let label;
+    if (ariaLabel !== undefined) {
+        label = ariaLabel;
+    }
+    else if (ariaLabelledBy === undefined && typeof title === 'string') {
+        label = title;
+    }
+    let labelledBy;
+    if (ariaLabelledBy !== undefined) {
+        labelledBy = ariaLabelledBy;
+    }
+    else if (label === undefined && title) {
+        labelledBy = titleId;
+    }
     return (_jsxs("aside", { "data-slot": "filter-rail", "aria-label": label, "aria-labelledby": labelledBy, className: cn('flex min-h-0 w-full flex-col border-border bg-card text-card-foreground', className), ...props, children: [title || description || actions ? (_jsxs("div", { "data-slot": "filter-rail-header", className: "flex shrink-0 items-start justify-between gap-3 border-b border-border px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [title ? (_jsx("h2", { id: titleId, "data-slot": "filter-rail-title", className: "text-sm font-semibold text-foreground", children: title })) : null, description ? (_jsx("p", { "data-slot": "filter-rail-description", className: "mt-0.5 text-xs text-muted-foreground", children: description })) : null] }), actions ? (_jsx("div", { "data-slot": "filter-rail-actions", className: "shrink-0", children: actions })) : null] })) : null, search ? (_jsx("div", { "data-slot": "filter-rail-search", className: "shrink-0 border-b border-border p-3", children: search })) : null, _jsx("div", { "data-slot": "filter-rail-content", className: "min-h-0 flex-1 space-y-5 overflow-y-auto p-4", children: children }), footer ? (_jsx("div", { "data-slot": "filter-rail-footer", className: "shrink-0 border-t border-border p-3", children: footer })) : null] }));
 }
 export const FilterRail = Object.assign(FilterRailRoot, {

package/dist/shell/extras/shell-scrollable-content.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function joinClasses(...values) {
     return values.filter(Boolean).join(' ');
 }
 export function ShellScrollableContent({ children, desktopDockOffset = 0, layout, maxWidth, }) {
-    return (_jsx("main", { "data-testid": "shell-workspace-viewport", className: "shell-scrollbar-hidden absolute inset-0 min-w-0 overflow-y-auto overflow-x-hidden pb-[var(--bottom-nav-height)] transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] md:pb-0", style: desktopDockOffset > 0 ? { paddingRight: `${desktopDockOffset}px` } : undefined, children: layout === 'centered' ? (_jsx("div", { "data-testid": "shell-content-centered", className: "flex min-h-full items-center justify-center px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", children: _jsx("div", { className: "flex w-full max-w-3xl items-center justify-center", children: children }) })) : layout === 'fullbleed' ? (_jsx("div", { "data-testid": "shell-content-fullbleed", className: "mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })) : (_jsx("div", { "data-testid": "shell-content-workspace", className: joinClasses('mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10'), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })) }));
+    return (_jsxs("main", { "data-testid": "shell-workspace-viewport", className: "shell-scrollbar-hidden absolute inset-0 min-w-0 overflow-y-auto overflow-x-hidden pb-[var(--bottom-nav-height)] transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] md:pb-0", style: desktopDockOffset > 0 ? { paddingRight: `${desktopDockOffset}px` } : undefined, children: [layout === 'centered' && (_jsx("div", { "data-testid": "shell-content-centered", className: "flex min-h-full items-center justify-center px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", children: _jsx("div", { className: "flex w-full max-w-3xl items-center justify-center", children: children }) })), layout === 'fullbleed' && (_jsx("div", { "data-testid": "shell-content-fullbleed", className: "mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })), layout !== 'centered' && layout !== 'fullbleed' && (_jsx("div", { "data-testid": "shell-content-workspace", className: joinClasses('mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10'), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children }))] }));
 }

package/dist/shell/extras/workbench-layout.js

@@ -13,17 +13,28 @@ function getWorkbenchMaxWidth(viewportBand) {
 }
 export function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }) {
     const maxWidth = getWorkbenchMaxWidth(viewportBand);
-    const layout = !aside
-        ? 'single'
-        : viewportBand === 'mobile' || viewportBand === 'tablet'
-            ? 'stacked'
-            : viewportBand === 'desktop'
-                ? 'split'
-                : 'multi-zone';
-    const columnStyle = layout === 'split'
-        ? { gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 320px)' }
-        : layout === 'multi-zone'
-            ? { gridTemplateColumns: 'minmax(0, 1fr) minmax(300px, 360px)' }
-            : undefined;
-    return (_jsxs("section", { "data-testid": "workbench-layout", "data-band": viewportBand, className: joinClasses('mx-auto flex w-full flex-col gap-6', className), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: [toolbar ? _jsx("div", { "data-testid": "workbench-toolbar", children: toolbar }) : null, _jsxs("div", { "data-testid": "workbench-columns", "data-layout": layout, className: joinClasses('w-full gap-5', layout === 'stacked' ? 'flex flex-col' : layout === 'single' ? 'flex flex-col' : 'grid'), style: columnStyle, children: [_jsx("div", { "data-testid": "workbench-main", className: "min-w-0", children: main }), aside ? (_jsx("aside", { "data-testid": "workbench-aside", className: "min-w-0", children: aside })) : null] })] }));
+    let layout;
+    if (!aside) {
+        layout = 'single';
+    }
+    else if (viewportBand === 'mobile' || viewportBand === 'tablet') {
+        layout = 'stacked';
+    }
+    else if (viewportBand === 'desktop') {
+        layout = 'split';
+    }
+    else {
+        layout = 'multi-zone';
+    }
+    let columnStyle;
+    if (layout === 'split') {
+        columnStyle = { gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 320px)' };
+    }
+    else if (layout === 'multi-zone') {
+        columnStyle = { gridTemplateColumns: 'minmax(0, 1fr) minmax(300px, 360px)' };
+    }
+    else {
+        columnStyle = undefined;
+    }
+    return (_jsxs("section", { "data-testid": "workbench-layout", "data-band": viewportBand, className: joinClasses('mx-auto flex w-full flex-col gap-6', className), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: [toolbar ? _jsx("div", { "data-testid": "workbench-toolbar", children: toolbar }) : null, _jsxs("div", { "data-testid": "workbench-columns", "data-layout": layout, className: joinClasses('w-full gap-5', layout === 'stacked' || layout === 'single' ? 'flex flex-col' : 'grid'), style: columnStyle, children: [_jsx("div", { "data-testid": "workbench-main", className: "min-w-0", children: main }), aside ? (_jsx("aside", { "data-testid": "workbench-aside", className: "min-w-0", children: aside })) : null] })] }));
 }

package/dist/shell/right-panel.js

@@ -123,7 +123,16 @@ export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes
     // Z-index escalation: fullscreen covers header + rails
     const zIndexClass = mode === 'fullscreen' ? 'z-[var(--z-shell-fullscreen)]' : 'z-[var(--z-shell-panel)]';
     const activePanelView = resolvedPanelViews.find((v) => v.id === activeView);
-    const cycleAriaLabel = mode === 'panel' ? 'Expand panel' : mode === 'expanded' ? 'Maximize panel' : 'Restore panel';
+    let cycleAriaLabel;
+    if (mode === 'panel') {
+        cycleAriaLabel = 'Expand panel';
+    }
+    else if (mode === 'expanded') {
+        cycleAriaLabel = 'Maximize panel';
+    }
+    else {
+        cycleAriaLabel = 'Restore panel';
+    }
     const handleResize = (w) => setDisplayWidth(w);
     const handleCommit = (w) => {
         setDisplayWidth(null);

package/dist/shell/shell-header.js

@@ -83,7 +83,7 @@ export function AppTabs({ renderLink } = {}) {
                         },
                     }) }, app.id));
             }
-            return (_jsx("button", { type: "button", "aria-current": isActive ? 'page' : undefined, onClick: handleClick, onMouseEnter: () => { }, className: className, children: children }, app.id));
+            return (_jsx("button", { type: "button", "aria-current": isActive ? 'page' : undefined, onClick: handleClick, onMouseEnter: () => undefined, className: className, children: children }, app.id));
         }) }));
 }
 // ---------------------------------------------------------------------------

package/dist/shell/theme-next-themes.js

@@ -46,7 +46,7 @@ function getClientThemeSnapshot() {
 }
 function subscribeToSystemTheme(mql, listener) {
     if (!mql)
-        return () => { };
+        return () => undefined;
     if (typeof mql.addEventListener === 'function') {
         mql.addEventListener('change', listener);
         return () => mql.removeEventListener('change', listener);
@@ -55,7 +55,7 @@ function subscribeToSystemTheme(mql, listener) {
         mql.addListener(listener);
         return () => mql.removeListener?.(listener);
     }
-    return () => { };
+    return () => undefined;
 }
 export function NextThemesAdapter({ children }) {
     const [theme, setThemeState] = useState('system');

package/dist/shell/theme.js

@@ -31,7 +31,13 @@ export function DefaultThemeProvider({ children }) {
     useEffect(() => {
         const mq = window.matchMedia('(prefers-color-scheme: dark)');
         const apply = () => {
-            const resolved = theme === 'system' ? (mq.matches ? 'dark' : 'light') : theme;
+            let resolved;
+            if (theme !== 'system') {
+                resolved = theme;
+            }
+            else {
+                resolved = mq.matches ? 'dark' : 'light';
+            }
             setResolvedTheme(resolved);
             document.documentElement.classList.toggle('dark', resolved === 'dark');
         };

package/dist/timeline/lane-timeline.js

@@ -65,7 +65,7 @@ function formatTime(d) {
 }
 function buildTicks(start, end, range) {
     const span = end.getTime() - start.getTime();
-    const tickCount = range === '7d' ? 7 : range === '24h' ? 8 : 7;
+    const tickCount = range === '24h' ? 8 : 7;
     const out = [];
     for (let i = 0; i <= tickCount; i++) {
         const t = new Date(start.getTime() + (span * i) / tickCount);

package/dist/timeline/scrub-bar.js

@@ -34,7 +34,7 @@ export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek
             onSeek(Math.min(durationMs, positionMs + step));
         }
     };
-    return (_jsxs("div", { className: cn('rounded-2xl border border-border bg-card p-3.5', className), children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Timeline \u00B7 this call" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "px-1.5 text-[11px] tabular-nums text-muted-foreground", children: [formatDuration(positionMs), isLive ? ' / live' : ` / ${formatDuration(durationMs)}`] }), onSkipBack && (_jsx(TransportBtn, { label: "Skip back", onClick: onSkipBack, children: _jsx(SkipBack, { className: "size-3.5" }) })), showPlayPause && (_jsx(TransportBtn, { label: isPlayingValue ? 'Pause' : 'Play', variant: "primary", onClick: onPlayPause ?? (() => { }), children: isPlayingValue ? _jsx(Pause, { className: "size-3.5" }) : _jsx(Play, { className: "size-3.5" }) })), onSkipForward && (_jsx(TransportBtn, { label: "Skip forward", onClick: onSkipForward, children: _jsx(SkipForward, { className: "size-3.5" }) }))] })] }), _jsxs("div", { ref: trackRef, role: "slider", "aria-label": "Conversation position", "aria-valuemin": 0, "aria-valuemax": durationMs, "aria-valuenow": positionMs, onClick: handleSeek, onKeyDown: handleKeyDown, tabIndex: 0, className: "relative h-8 cursor-pointer overflow-hidden rounded-md bg-muted focus:outline-none focus:ring-2 focus:ring-primary/50", children: [_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-primary/10", style: { width: `${fillPct}%` } }), marks.map((m) => (_jsx("span", { "data-mark-kind": m.kind, title: m.label ?? m.kind, className: cn('absolute inset-y-1 w-0.5 rounded-sm', KIND_COLOR[m.kind]), style: { left: `${m.positionPct}%` } }, m.id))), _jsx("span", { "aria-hidden": "true", "data-chromatic": "ignore", className: "absolute -inset-y-0.5 w-0.5 bg-foreground", style: { left: `${fillPct}%` } })] }), _jsxs("div", { className: "flex justify-between pt-2 text-[10px] tabular-nums text-muted-foreground", children: [_jsx("span", { children: "0:00" }), _jsx("span", { children: isLive ? 'now' : formatDuration(durationMs) })] })] }));
+    return (_jsxs("div", { className: cn('rounded-2xl border border-border bg-card p-3.5', className), children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Timeline \u00B7 this call" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "px-1.5 text-[11px] tabular-nums text-muted-foreground", children: [formatDuration(positionMs), isLive ? ' / live' : ` / ${formatDuration(durationMs)}`] }), onSkipBack && (_jsx(TransportBtn, { label: "Skip back", onClick: onSkipBack, children: _jsx(SkipBack, { className: "size-3.5" }) })), showPlayPause && (_jsx(TransportBtn, { label: isPlayingValue ? 'Pause' : 'Play', variant: "primary", onClick: onPlayPause ?? (() => undefined), children: isPlayingValue ? _jsx(Pause, { className: "size-3.5" }) : _jsx(Play, { className: "size-3.5" }) })), onSkipForward && (_jsx(TransportBtn, { label: "Skip forward", onClick: onSkipForward, children: _jsx(SkipForward, { className: "size-3.5" }) }))] })] }), _jsxs("div", { ref: trackRef, role: "slider", "aria-label": "Conversation position", "aria-valuemin": 0, "aria-valuemax": durationMs, "aria-valuenow": positionMs, onClick: handleSeek, onKeyDown: handleKeyDown, tabIndex: 0, className: "relative h-8 cursor-pointer overflow-hidden rounded-md bg-muted focus:outline-none focus:ring-2 focus:ring-primary/50", children: [_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-primary/10", style: { width: `${fillPct}%` } }), marks.map((m) => (_jsx("span", { "data-mark-kind": m.kind, title: m.label ?? m.kind, className: cn('absolute inset-y-1 w-0.5 rounded-sm', KIND_COLOR[m.kind]), style: { left: `${m.positionPct}%` } }, m.id))), _jsx("span", { "aria-hidden": "true", "data-chromatic": "ignore", className: "absolute -inset-y-0.5 w-0.5 bg-foreground", style: { left: `${fillPct}%` } })] }), _jsxs("div", { className: "flex justify-between pt-2 text-[10px] tabular-nums text-muted-foreground", children: [_jsx("span", { children: "0:00" }), _jsx("span", { children: isLive ? 'now' : formatDuration(durationMs) })] })] }));
 }
 function TransportBtn({ label, onClick, variant, children, }) {
     return (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: cn('inline-flex size-6 items-center justify-center rounded', variant === 'primary'

package/dist/timeline/timeline-tape.js

@@ -6,6 +6,13 @@ import { EventCard } from './event-card.js';
 const DEFAULT_PX_PER_SEC = 1.2;
 const DEFAULT_FUTURE_PAD_SEC = 300;
 const DEFAULT_PAST_SPAN_SEC = 6 * 60 * 60;
+function getSegmentColorClass(event) {
+    if (event.isLive)
+        return 'bg-success-600 shadow-[0_0_12px_rgba(16,185,129,0.5)]';
+    if (event.kind === 'error')
+        return 'bg-destructive';
+    return 'bg-info-500 shadow-[0_0_8px_rgba(56,189,248,0.35)]';
+}
 /** Convert a unix-ms instant to canvas y (px). y=0 at canvas top. */
 function instantToY(instantMs, nowMs, pxPerSec, futurePadSec) {
     const secsAfterNow = (instantMs - nowMs) / 1000;
@@ -53,11 +60,7 @@ export function TimelineTape({ now, events, pxPerSec = DEFAULT_PX_PER_SEC, futur
         const height = Math.max(2, Math.abs(endY - startY));
         return { event: e, top, height };
     });
-    return (_jsxs("div", { className: cn('relative ml-3.5 mr-3', className), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: cn('absolute w-1 rounded-sm', event.isLive
-                    ? 'bg-success-600 shadow-[0_0_12px_rgba(16,185,129,0.5)]'
-                    : event.kind === 'error'
-                        ? 'bg-destructive'
-                        : 'bg-info-500 shadow-[0_0_8px_rgba(56,189,248,0.35)]'), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
+    return (_jsxs("div", { className: cn('relative ml-3.5 mr-3', className), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: cn('absolute w-1 rounded-sm', getSegmentColorClass(event)), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
                 const startY = instantToY(event.startedAt, nowMs, pxPerSec, futurePadSec);
                 const isSubEvent = event.kind === 'sub-event';
                 return (_jsx("div", { "data-event-id": event.id, className: "absolute", style: { top: `${startY}px`, left: 56, right: 0 }, children: _jsx(EventCard, { event: event, size: isSubEvent ? 'tiny' : 'default', onSelect: onSelect }) }, event.id));

package/dist/voice/voice-orb-scene.js

@@ -23,13 +23,13 @@ const PHASE_TARGET = {
 function splitmix32(seed) {
     let a = seed;
     return () => {
-        a = (a + 0x9e3779b9) | 0;
+        a = (a + 0x9e_37_79_b9) | 0;
         let t = a ^ (a >>> 16);
-        t = Math.imul(t, 0x21f0aaad);
+        t = Math.imul(t, 0x21_f0_aa_ad);
         t = t ^ (t >>> 15);
-        t = Math.imul(t, 0x735a2d97);
+        t = Math.imul(t, 0x73_5a_2d_97);
         t = t ^ (t >>> 15);
-        return (t >>> 0) / 4294967296;
+        return (t >>> 0) / 4_294_967_296;
     };
 }
 export function Scene({ level = 0, outputLevel = 0, phase = 'idle', colors, reducedMotion = false, pressed = false, variant = 'aurora', }) {