@memoreco/ui 0.2.12 → 0.2.13

package/dist/ui/src/components/avatar-with-thumbhash.d.ts

@@ -0,0 +1,23 @@
+export interface AvatarWithThumbhashProps {
+    src?: string | null;
+    /** Base64 ThumbHash string */
+    thumbhash?: string | null;
+    alt?: string;
+    title?: string;
+    className?: string;
+    imgClassName?: string;
+    /** Used when there is no image (or it errors) */
+    fallbackText?: string;
+    /** Optional srcset for responsive image loading (CDN-transformed variants) */
+    srcSet?: string;
+    /** Optional sizes hint for responsive image selection */
+    sizes?: string;
+}
+/**
+ * Avatar that renders instantly from ThumbHash and fades the real image in.
+ *
+ * - Shows a ThumbHash placeholder immediately (if provided)
+ * - Cross-fades the real image in once it has loaded (works even when cached)
+ * - Falls back to initials when no src is available
+ */
+export declare function AvatarWithThumbhash({ src, thumbhash, alt, title, className, fallbackText, imgClassName, srcSet, sizes, }: AvatarWithThumbhashProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/src/components/chat/ChatPanel.d.ts

@@ -1,4 +1,4 @@
 import { ChatPanelProps } from './types';
 
-export declare function ChatPanel({ transport, language, storageKey, persist, playerReady, onPlayMoment, onAddToNotes, followUps, emptyStateTitle, emptyStateSubtitle, inputPlaceholder, variant, className, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPanel({ transport, language, storageKey, persist, playerReady, onPlayMoment, activeMomentInstanceId, isPlaying, activeMomentCurrentSeconds, isSegmentEnded, onHoverMoment, onHoverMomentEnd, onAddToNotes, followUps, emptyStateTitle, emptyStateSubtitle, inputPlaceholder, variant, className, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 export default ChatPanel;

package/dist/ui/src/components/chat/MarkdownText.d.ts

@@ -1,10 +1,22 @@
 export interface MarkdownTextProps {
     /** Markdown content to render */
     markdown: string;
-    /** Callback when a time reference is clicked */
-    onSeekToMoment: (seconds: number, endSeconds?: number) => void;
+    /** Callback when a time reference is clicked — includes optional instanceId */
+    onSeekToMoment: (seconds: number, endSeconds?: number, instanceId?: string) => void;
+    /** Instance id of the currently active pill (only that exact pill highlights) */
+    activeMomentInstanceId?: string | null;
+    /** Whether media is currently playing (paired with `activeMomentInstanceId`) */
+    isPlaying?: boolean;
+    /** Current playback time in seconds for the active pill */
+    activeMomentCurrentSeconds?: number | null;
+    /** Whether the active segment has ended (shows replay icon on the active pill) */
+    isSegmentEnded?: boolean;
+    /** Called when the user hovers over a pill (for segment hint preview) */
+    onHoverMoment?: (startSeconds: number, endSeconds?: number) => void;
+    /** Called when the user stops hovering over a pill */
+    onHoverMomentEnd?: () => void;
     /** Size variant */
     size?: "sm" | "md";
 }
-export declare function MarkdownText({ markdown, onSeekToMoment, size, }: MarkdownTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownText({ markdown, onSeekToMoment, activeMomentInstanceId, isPlaying, activeMomentCurrentSeconds, isSegmentEnded, onHoverMoment, onHoverMomentEnd, size, }: MarkdownTextProps): import("react/jsx-runtime").JSX.Element;
 export default MarkdownText;

package/dist/ui/src/components/chat/TimecodeTag.d.ts

@@ -1,5 +1,5 @@
 export interface TimecodeTagProps {
-    /** Display label (formatted timecode) */
+    /** Display label (original markdown label) */
     label: string;
     /** Start time in seconds */
     seconds: number;
@@ -7,10 +7,24 @@ export interface TimecodeTagProps {
     endSeconds?: number;
     /** Whether the tag is disabled */
     disabled?: boolean;
-    /** Click handler */
-    onClick: (seconds: number, endSeconds?: number) => void;
+    /** Click handler — receives seconds, endSeconds, and optional instance id */
+    onClick: (seconds: number, endSeconds?: number, instanceId?: string) => void;
     /** Size variant */
     size?: "sm" | "md";
+    /** Whether this tag represents the currently playing moment (solid blue + pause icon) */
+    isActive?: boolean;
+    /** Whether media is currently playing (used with `isActive` to show pause icon) */
+    isPlaying?: boolean;
+    /** Current playback time for this active pill (used for live start-time display) */
+    activeMomentCurrentSeconds?: number | null;
+    /** Whether the active segment has ended (shows replay icon instead of play) */
+    isSegmentEnded?: boolean;
+    /** Unique instance id for this pill (distinguishes duplicates with same times) */
+    instanceId?: string;
+    /** Called when the user hovers over the pill (for segment hint preview) */
+    onHoverStart?: (seconds: number, endSeconds?: number) => void;
+    /** Called when the user stops hovering over the pill */
+    onHoverEnd?: () => void;
 }
-export declare function TimecodeTag({ label, seconds, endSeconds, disabled, onClick, size, }: TimecodeTagProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimecodeTag({ label, seconds, endSeconds, disabled, onClick, size, isActive, isPlaying, activeMomentCurrentSeconds, isSegmentEnded, instanceId, onHoverStart, onHoverEnd, }: TimecodeTagProps): import("react/jsx-runtime").JSX.Element;
 export default TimecodeTag;

package/dist/ui/src/components/chat/types.d.ts

@@ -91,12 +91,46 @@ export interface ChatPanelProps {
     playerReady?: boolean;
     /**
      * Callback when a time moment is clicked.
-     * Receives the start time in seconds.
+     * Receives the start time in seconds plus an optional unique instanceId.
      */
     onPlayMoment?: (params: {
         startSeconds: number;
         endSeconds?: number;
+        instanceId?: string;
     }) => void;
+    /**
+     * Instance id of the currently active pill.
+     * Only the pill with this exact id will be styled as "selected".
+     */
+    activeMomentInstanceId?: string | null;
+    /**
+     * Whether media is currently playing.
+     * Used with `activeMomentInstanceId` to show a pause icon on the selected tag.
+     */
+    isPlaying?: boolean;
+    /**
+     * Current playback time in seconds for the active moment.
+     * Used to show a live-advancing start time on the active pill while playing.
+     */
+    activeMomentCurrentSeconds?: number | null;
+    /**
+     * Whether the active segment has ended (reached its end boundary).
+     * Shows a replay icon on the active pill instead of a play icon.
+     */
+    isSegmentEnded?: boolean;
+    /**
+     * Keep the active pill visually highlighted even while paused.
+     * Useful for persistent "segment selected" UX.
+     */
+    keepActiveMomentHighlighted?: boolean;
+    /**
+     * Called when the user hovers over a time pill (for segment hint preview on the player).
+     */
+    onHoverMoment?: (startSeconds: number, endSeconds?: number) => void;
+    /**
+     * Called when the user stops hovering over a time pill.
+     */
+    onHoverMomentEnd?: () => void;
     /**
      * Optional callback to add answer text to notes.
      * If provided, shows "Add to notes" button.

package/dist/ui/src/components/squircle.d.ts

@@ -1,10 +1,26 @@
 import { default as React } from 'react';
+import { RadiusInput } from '../lib/squircle-path';
 
 export interface SquircleProps extends React.HTMLAttributes<HTMLDivElement> {
-    cornerRadius?: number;
+    /** Corner radius in px (uniform or per-corner). Default 12. */
+    cornerRadius?: RadiusInput;
+    /** @deprecated Ignored — kept for API compatibility. Native smoothing is always applied. */
     cornerSmoothing?: number;
     borderWidth?: number;
     borderColor?: string;
+    /** @deprecated Ignored — kept for API compatibility. */
     asChild?: boolean;
 }
+/**
+ * A div whose corners use squircle (Apple-like superellipse) rounding.
+ *
+ * Prefers native `corner-shape: squircle` when the browser supports it
+ * (Chrome 138+).  Falls back to an SVG `clip-path` generated from the
+ * OrgPad 3-Bézier-per-corner approximation.
+ *
+ * Usage:
+ *   <Squircle cornerRadius={24} className="bg-blue-500 w-32 h-32">
+ *     ...
+ *   </Squircle>
+ */
 export declare const Squircle: React.ForwardRefExoticComponent<SquircleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/src/index.d.ts

@@ -22,6 +22,10 @@ export { ThumbnailCard } from './components/thumbnail-card';
 export { ThumbnailPreviewOverlay } from './components/thumbnail-preview';
 export { ThumbnailStrip } from './components/thumbnail-strip';
 export { Squircle } from './components/squircle';
+export type { SquircleProps } from './components/squircle';
+export { buildSquircleRoundedRectPath, buildSquircleOBBPath, supportsCornerShapeSquircle, applyNativeSquircleStyle, removeNativeSquircleStyle, } from './lib/squircle-path';
+export type { SquirclePathOptions, SquircleOBBPathOptions, PerCornerRadii as SquirclePerCornerRadii, RadiusInput as SquircleRadiusInput, } from './lib/squircle-path';
+export { AvatarWithThumbhash } from './components/avatar-with-thumbhash';
 export { ChatPanel, TimecodeTag, MarkdownText, safeReadChatFromStorage, safeWriteChatToStorage, safeRemoveChatFromStorage, messagesToStored, storedToMessages, parseSseEvent, readSseStream, parseTimecodeToSeconds, formatSecondsAsTimecode, linkifyTimeReferencesInMarkdown, getDefaultSuggestions, getBrowserLanguage, DEFAULT_SUGGESTIONS, } from './components/chat';
 export type { ButtonProps } from './components/button';
 export type { CardProps } from './components/card';
@@ -38,4 +42,4 @@ export type { ThumbnailPreviewOverlayProps } from './components/thumbnail-previe
 export type { ThumbnailStripProps, ThumbnailData as UIThumbnailData } from './components/thumbnail-strip';
 export type { ChatPanelProps, ChatTransport, ChatStreamRequest, ChatMessage, ChatResponse, ChatAnswerItem, ChatMoment, ChatSuggestion, StoredChatMessage, TimecodeTagProps, MarkdownTextProps, SSEEvent, SSEChunkEvent, SSECompleteEvent, SSEErrorEvent, } from './components/chat';
 export { cn } from './lib/utils';
-export declare const UI_LIBRARY_VERSION = "0.2.12";
+export declare const UI_LIBRARY_VERSION = "0.2.13";

package/dist/ui/src/lib/squircle-path.d.ts

@@ -0,0 +1,63 @@
+/**
+ * OrgPad-style squircle path generator.
+ *
+ * Uses 3 cubic Bézier curves per corner (12 total) to approximate a
+ * superellipse rounded rectangle.  This produces the smooth, Apple-like
+ * "squircle" corners that CSS `border-radius` alone cannot achieve.
+ *
+ * Reference: https://orgpad.info/blog/squircles
+ *
+ * Usage:
+ *   const d = buildSquircleRoundedRectPath({ width: 200, height: 100, radius: 24 });
+ *   // → SVG path `d` string in px coordinates
+ *
+ * For browsers that support `corner-shape: squircle` (Chrome 138+), you can
+ * skip the path entirely and use native CSS.  Use `supportsCornerShapeSquircle()`
+ * to check.
+ */
+export interface PerCornerRadii {
+    nw: number;
+    ne: number;
+    se: number;
+    sw: number;
+}
+export type RadiusInput = number | PerCornerRadii;
+export interface SquirclePathOptions {
+    width: number;
+    height: number;
+    /** Corner radius in px — single value or per-corner. Clamped to half the shorter side. */
+    radius: RadiusInput;
+}
+/**
+ * Generate an SVG path `d` string for a squircle-rounded rectangle.
+ *
+ * Coordinates are in user-space px matching the element's width/height.
+ * Use in an SVG `<clipPath clipPathUnits="userSpaceOnUse">` or directly
+ * as a CSS `clip-path: path(...)`.
+ */
+export declare function buildSquircleRoundedRectPath(opts: SquirclePathOptions): string;
+export interface SquircleOBBPathOptions {
+    /**
+     * Corner radius as a fraction of the shorter dimension (0..0.5).
+     * 0 = sharp rectangle, 0.5 = maximum rounding.
+     */
+    radiusFraction: RadiusInput;
+}
+/**
+ * Generate a squircle path in objectBoundingBox coordinates (0..1).
+ * Use with `<clipPath clipPathUnits="objectBoundingBox">`.
+ */
+export declare function buildSquircleOBBPath(opts: SquircleOBBPathOptions): string;
+/**
+ * Returns true if the browser supports `corner-shape: squircle` natively.
+ * Result is cached after the first call.
+ */
+export declare function supportsCornerShapeSquircle(): boolean;
+/**
+ * Apply `corner-shape: squircle` to an element (bypasses TS CSSStyleDeclaration typing).
+ */
+export declare function applyNativeSquircleStyle(el: HTMLElement, radiusPx: string): void;
+/**
+ * Remove native squircle styling from an element.
+ */
+export declare function removeNativeSquircleStyle(el: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memoreco/ui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Memoreco shared UI components with Shadcn",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,7 +17,7 @@
     "dist"
   ],
   "dependencies": {
-    "@monokai/monoco": "^0.3.2",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -31,7 +31,8 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "thumbhash": "^0.1.1"
   },
   "devDependencies": {
     "@types/node": "^22.19.0",
@@ -48,8 +49,8 @@
     "vite": "^5.0.12",
     "vite-plugin-dts": "^3.7.2",
     "vitest": "^1.2.2",
-    "@memoreco/utils": "0.2.0",
-    "@memoreco/types": "0.2.0"
+    "@memoreco/types": "0.2.0",
+    "@memoreco/utils": "0.2.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",