(null);\n\tconst [value, setValue] = useState(\"\");\n\n\tfunction insert(emoji: string) {\n\t\tconst el = ref.current;\n\t\tif (!el) return setValue((v) => v + emoji);\n\t\tconst start = el.selectionStart ?? value.length;\n\t\tconst end = el.selectionEnd ?? value.length;\n\t\tsetValue(value.slice(0, start) + emoji + value.slice(end));\n\t}\n\n\treturn (\n\t\t\n\t\t\t setValue(e.target.value)}\n\t\t\t/>\n\t\t\t\n\t\t
\n\t);\n}\n```\n\nUse the standalone panel when you want to place it inside your own anchor:\n\n```tsx\nimport { EmojiPicker } from \"@algenium/blocks\";\n\n insert(emoji)} />;\n```\n\n**Props (`EmojiPicker`):**\n\n```typescript\ninterface EmojiPickerProps {\n\tonSelect: (emoji: string) => void;\n\tlocale?: \"en\" | \"es\"; // Section titles + skin-tone names. Default \"en\"\n\tlabels?: EmojiPickerLabels; // Overrides individual strings / category titles\n\tclassName?: string;\n\trecentLimit?: number; // Default 24\n\tstorageKey?: string | null; // localStorage namespace; null disables persistence\n}\n```\n\n`EmojiPickerPopover` accepts every `EmojiPicker` prop plus `triggerLabel`,\n`triggerClassName`, `side`, `align`, `open`/`onOpenChange` (controlled), and\n`keepOpenOnSelect`.\n\n---\n\n### VideoPlayer\n\nA standardized HLS video player with a fully custom control bar (no native\n`controls`), for both live streams and on-demand recordings. `hls.js` is an\n**optional peer dependency** loaded on demand via dynamic import — apps that\nalready depend on it (`app`, `admin`, `media`) bundle nothing new, and Safari\nfalls back to native HLS.\n\n**Features:**\n\n- Click-to-play poster (attaches HLS only after the user gesture)\n- Play/pause, mute + hover volume slider, keyboard shortcuts\n- Resolution picker (Auto + hls.js levels), playback speed (VOD)\n- Picture-in-Picture and fullscreen (menus stay usable in fullscreen)\n- VOD: seekbar with buffered ranges + current/total time\n- Live: red pulsing badge, **no seekbar**, and a \"go live\" affordance when the\n playhead drifts behind the edge\n- `stats` prop renders live viewer / VOD reproduction counts\n- Loading / waiting / error states with retry; errors surfaced via `onError`\n (no bundled reporting) and localized via `labels`\n\n**Usage:**\n\n```tsx\nimport { VideoPlayer, usePlaybackStats } from \"@algenium/blocks\";\n\nfunction Recording({ mediaId, src, poster }: Props) {\n\tconst stats = usePlaybackStats(\n\t\t`https://media.example.com/playback/${mediaId}/stats`,\n\t);\n\n\treturn (\n\t\t `${n} reproducciones` }}\n\t\t\tonFirstPlay={() => {\n\t\t\t\tvoid fetch(`https://media.example.com/playback/${mediaId}/view`, {\n\t\t\t\t\tmethod: \"POST\",\n\t\t\t\t});\n\t\t\t}}\n\t\t\tonError={(e) => reportToSentry(e)}\n\t\t/>\n\t);\n}\n```\n\nFor live playback pass `mode=\"live\"` and, typically, `autoPlay muted`.\n\n**Props:**\n\n```typescript\ninterface VideoPlayerProps {\n\tsrc: string;\n\tmode: \"live\" | \"vod\";\n\tposter?: string;\n\tautoPlay?: boolean;\n\tmuted?: boolean;\n\tstats?: { viewers?: number; views?: number };\n\tlabels?: VideoPlayerLabels;\n\tshowQualitySelector?: boolean; // Default true\n\tonPlayingChange?: (playing: boolean) => void;\n\tonFirstPlay?: () => void; // Fires once — wire your view beacon here\n\tonError?: (error: DescribedPlaybackError) => void;\n\tclassName?: string;\n}\n```\n\nAlso exported: `useHlsPlayback` (the attach/detach hook), `usePlaybackStats`\n(polls a stats endpoint), `createLiveHlsConfig` / `createVodHlsConfig`, and\n`describePlaybackError`.\n\n---\n\n## UI Primitives\n\nThe package also exports underlying UI primitives that can be used independently:\n\n### Button\n\n```tsx\nimport { Button } from \"@algenium/blocks\";\n\n;\n;\n;\n```\n\n### Dialog\n\n```tsx\nimport {\n\tDialog,\n\tDialogTrigger,\n\tDialogContent,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogDescription,\n\tDialogFooter,\n} from \"@algenium/blocks\";\n\n;\n```\n\n### Drawer\n\n```tsx\nimport {\n\tDrawer,\n\tDrawerTrigger,\n\tDrawerContent,\n\tDrawerHeader,\n\tDrawerTitle,\n} from \"@algenium/blocks\";\n\n\n\tOpen\n\t\n\t\t\n\t\t\tTitle\n\t\t\n\t\t{/* Content */}\n\t\n;\n```\n\n### DropdownMenu\n\n```tsx\nimport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n} from \"@algenium/blocks\";\n\n\n\tOpen\n\t\n\t\tItem 1\n\t\tItem 2\n\t\n;\n```\n\n### Popover\n\n```tsx\nimport { Popover, PopoverTrigger, PopoverContent } from \"@algenium/blocks\";\n\n\n\tOpen\n\tContent here\n;\n```\n\n### ScrollArea\n\n```tsx\nimport { ScrollArea } from \"@algenium/blocks\";\n\n{/* Scrollable content */};\n```\n\n### Slider\n\n```tsx\nimport { Slider } from \"@algenium/blocks\";\n\n setValue(value[0])}\n\tmax={100}\n\tstep={1}\n/>;\n```\n\n### Toggle\n\n```tsx\nimport { Toggle } from \"@algenium/blocks\";\n\n\n\tToggle me\n;\n```\n\n### Tooltip\n\n```tsx\nimport {\n\tTooltip,\n\tTooltipTrigger,\n\tTooltipContent,\n\tTooltipProvider,\n} from \"@algenium/blocks\";\n\n\n\t\n\t\tHover me\n\t\tTooltip text\n\t\n;\n```\n\n---\n\n## Utilities\n\n### cn (Class Name utility)\n\nA utility function for conditionally merging Tailwind CSS classes.\n\n```tsx\nimport { cn } from \"@algenium/blocks\";\n\nconst className = cn(\"base-class\", condition && \"conditional-class\", {\n\t\"another-class\": someCondition,\n});\n```\n\n---\n\n## TypeScript Support\n\nAll components are fully typed with TypeScript. Import types as needed:\n\n```tsx\nimport type {\n\tThemeSwitcherProps,\n\tLanguageSwitcherProps,\n\tLanguage,\n\tAvatarEditorProps,\n\tAvatarEditorDialogProps,\n\tNotificationsWidgetProps,\n\tNotification,\n\tNotificationType,\n} from \"@algenium/blocks\";\n```\n\n---\n\n## Best Practices\n\n### Internationalization\n\nAll text-based components accept label props for i18n:\n\n```tsx\nimport { useTranslation } from \"your-i18n-library\";\n\nconst { t } = useTranslation();\n\n;\n```\n\n### Theme Integration\n\nComponents use CSS variables for theming. Ensure your app provides these variables:\n\n```css\n:root {\n\t--background: 0 0% 100%;\n\t--foreground: 222.2 84% 4.9%;\n\t--primary: 222.2 47.4% 11.2%;\n\t--muted: 210 40% 96.1%;\n\t--border: 214.3 31.8% 91.4%;\n\t/* ... other variables */\n}\n```\n\n### Notification Management\n\nFor `NotificationsWidget`, implement a notification management system:\n\n```tsx\n// Example notification manager\nconst [notifications, setNotifications] = useState([]);\n\nconst markAsRead = (id: string) => {\n\tsetNotifications((prev) =>\n\t\tprev.map((n) => (n.id === id ? { ...n, read: true } : n)),\n\t);\n};\n\nconst dismiss = (id: string) => {\n\tsetNotifications((prev) => prev.filter((n) => n.id !== id));\n};\n\nconst addNotification = (notification: Omit) => {\n\tconst id = crypto.randomUUID();\n\tsetNotifications((prev) => [{ ...notification, id }, ...prev]);\n};\n```\n\n---\n\n## Contributing\n\nThis package is maintained as part of the Algenium monorepo. See the main repository for contribution guidelines.\n\n## License\n\nProprietary - Algenium © 2026\n\n## Version\n\nCurrent version: `1.0.0-rc.4`\n\n## Support\n\nFor issues or questions, contact the Algenium development team or open an issue in the repository.\n","readmeFilename":"README.md"}