@mieweb/ui 0.9.0 → 0.10.0-dev.0

package/MIGRATION.md

@@ -0,0 +1,112 @@
+# Migration guide
+
+Breaking-change recipes for `@mieweb/ui` consumers. Each section is anchored
+so release notes and dev-console notices can deep-link to it.
+
+## Chat composer
+
+**`MessageComposer` was retired in 0.10.0.** The shared **`ChatComposer`** is
+the single composer across the library — `SuperChat`, `AIChat`, and
+`MessageThread` all mount it internally. If you only used those surfaces, no
+code changes are required (their public props are unchanged); the notes below
+about DOM/selector changes still apply to any CSS or tests that reached into
+the composer.
+
+### Removed exports
+
+| Removed in 0.10.0                            | Replacement                                                                     |
+| -------------------------------------------- | ------------------------------------------------------------------------------- |
+| `MessageComposer`                            | `ChatComposer`                                                                   |
+| `MessageComposerProps`                       | `ChatComposerProps`                                                              |
+| `CharacterCounter`, `CharacterCounterProps`  | none — internal to the retired component (ChatComposer renders its own counter)  |
+| `SendButton`, `SendButtonProps`, `sendButtonVariants` | none — internal to the retired component                                |
+
+Still exported and unchanged: `MentionOption`, `NewMessage`,
+`AttachmentPicker`, `DragDropZone`, `CameraButton`, and the Messaging hooks.
+
+### Prop mapping
+
+Most props transfer 1:1 — `onSend(NewMessage)`, `value` / `onValueChange`,
+`placeholder`, `disabled`, `isSending`, `autoFocus`, `maxLength`,
+`showCharacterCount`, `acceptedFileTypes`, `maxFileSize`, `maxAttachments`,
+`replyTo` / `onCancelReply`, `mentionOptions`, `className`.
+
+| MessageComposer                  | ChatComposer                                                                                                   |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `showAttachmentPicker` (default `true`) | `allowAttachments` (default `true`)                                                                       |
+| `showCameraButton`               | none built in — pass `micSlot={<CameraButton onCapture={(f) => ref.current?.addFiles([f])} />}` (MessageThread's pattern; `addFiles` works even with `allowAttachments={false}`) |
+| `onTypingStart` / `onTypingStop` | none built in — drive them from `useTypingEmulation({ value, onTypingStart, onTypingStop })` (exported from the Messaging module; same 2s-idle state machine) |
+| `inputTrailing` slot             | `micSlot` (rendered in the icon row; `micBehavior` controls visibility)                                         |
+| `variant="minimal"`              | none — ChatComposer has a single card presentation                                                              |
+| `onError(message: string)`       | `onError(message, context?)` — `context.reason` is a stable machine key: `'file-type' \| 'file-size' \| 'attachment-limit' \| 'send-failed'` |
+| `maxLength` default `1600`       | no default cap — pass `maxLength={1600}` to keep the old limit                                                  |
+
+### Failed-send restore semantics (behavior change)
+
+`MessageComposer` restored the typed text itself when `onSend` threw or
+rejected. **`ChatComposer` clears the draft optimistically and delegates
+restore to the host**: a rejection is reported through
+`onError(sendFailedLabel, { reason: 'send-failed' })` and the host restores
+the draft via controlled `value` / `onValueChange`. See `MessageThread.tsx`
+for the reference implementation (epoch-guarded so a stale failure never
+overwrites newer typed input). In both old and new worlds, attachments are
+**not** restaged after a failure.
+
+### Attach flow: paperclip → `+` menu
+
+The inline paperclip button is gone; attaching is behind the `+` menu.
+
+```ts
+// Before — one click on the paperclip:
+page.getByRole('button', { name: 'Attach files' }).click();
+
+// After — open the + menu, then pick the item:
+page.getByRole('button', { name: 'Add to message' }).click(); // + button
+page.getByRole('menuitem', { name: 'Attach files' }).click();
+```
+
+Paste-to-attach still works, and drag-and-drop is now **built in**: the whole
+composer card is a drop target (overlay text "Drop files here"). Hosts no
+longer need their own `DragDropZone` around the composer — page-level drop
+zones can forward files through `ChatComposerHandle.addFiles()`.
+
+### DOM / selector anchors
+
+`data-slot` renames (old rows without a counterpart were internal wrappers
+with no replacement):
+
+| MessageComposer slot        | ChatComposer slot              |
+| --------------------------- | ------------------------------ |
+| `message-composer` (root)   | `chat-composer` (root)         |
+| `composer-input`            | `chat-composer-input`          |
+| `composer-send-button`      | `chat-composer-send-button`    |
+| `composer-attachments`      | `chat-composer-attachments`    |
+| `composer-reply-preview`    | `chat-composer-reply-preview`  |
+| `composer-char-count`       | `chat-composer-char-count`     |
+| `composer-input-trailing`   | `chat-composer-mic-slot`       |
+| `composer-input-area`, `composer-input-wrapper` | — (card layout: `chat-composer-card`) |
+
+New slots without an old counterpart: `chat-composer-add-button`,
+`chat-composer-cancel-reply`, `chat-composer-mic-button`,
+`chat-composer-stop-button`, `chat-composer-readonly`,
+`chat-composer-selectors`, `chat-composer-agent-trigger`.
+
+The shared @mention listbox keeps its `composer-mention-list` default slot in
+standalone use; ChatComposer renders it as `chat-composer-mention-list`.
+
+Accessible-name changes (all overridable via label props):
+
+| Element        | Before               | After (default)                          |
+| -------------- | -------------------- | ---------------------------------------- |
+| Textarea       | `Message`            | `Message input` (`inputLabel`)           |
+| Send button    | `Send message` / `Sending message` | `Send message` / `Sending message…` (`sendLabel` / `sendingLabel`) |
+| Attach control | `Attach files` (paperclip) | `Add to message` (+ menu) → `Attach files` (menu item) |
+
+### `composerProps` on AIChat
+
+`AIChat`'s `composerProps` is now `Partial<ChatComposerProps>` (it forwards to
+the internal `ChatComposer`). Legacy `MessageComposerProps`-era keys —
+`showAttachmentPicker`, `showCameraButton`, `onTypingStart` / `onTypingStop`,
+`inputTrailing`, `onSend`, controlled `value` / `onValueChange` — are still
+accepted and mapped for compatibility, but new code should use the
+`ChatComposerProps` names directly.

package/dist/{Animated-Cs-naa2g.d.cts → Animated-XmH6k8pZ.d.cts}

@@ -17,7 +17,17 @@ import * as React from 'react';
  *   exiting back to `closed` (a modal).
  */
 /** Named animation recipes shared by components. */
-type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel';
+type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel' | 'menu' | 'collapse' | 'toast' | 'fade' | 'pop';
+/**
+ * A physical edge, already resolved from any logical (`start`/`end`) position
+ * and from writing direction.
+ *
+ * Presets that move an element along an axis take one of these as `custom`.
+ * Resolution is the component's job, not the preset's: only the component knows
+ * whether its `end` means right or left, and — for anything anchored — which
+ * side it actually landed on after flipping away from a viewport edge.
+ */
+type MotionEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * A variant value. Either a plain target object or a function of the element's
  * `custom` value — the latter lets a single preset adapt to context, e.g. a
@@ -35,7 +45,10 @@ interface MotionPresetDefinition {
  * `custom` contract per preset:
  *
  * - `drawerStart` — `boolean`, whether the document direction is RTL.
- * - `overlay`, `modalContent`, `sidebarLabel` — unused.
+ * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical
+ *   position and writing direction by the component.
+ * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —
+ *   unused.
  */
 declare const motionPresets: Record<MotionPreset, MotionPresetDefinition>;
 
@@ -172,4 +185,4 @@ declare namespace AnimatedPresence {
     var displayName: string;
 }
 
-export { Animated as A, type MotionPreset as M, AnimatedPresence as a, type AnimatedProps as b, type MotionRuntime as c, type MotionPresenceProps as d, type MotionPresetDefinition as e, type MotionVariant as f, motionPresets as m, useMotionRuntime as u };
+export { Animated as A, type MotionEdge as M, AnimatedPresence as a, type AnimatedProps as b, type MotionPreset as c, type MotionRuntime as d, type MotionPresenceProps as e, type MotionPresetDefinition as f, type MotionVariant as g, motionPresets as m, useMotionRuntime as u };

package/dist/{Animated-Cs-naa2g.d.ts → Animated-XmH6k8pZ.d.ts}

@@ -17,7 +17,17 @@ import * as React from 'react';
  *   exiting back to `closed` (a modal).
  */
 /** Named animation recipes shared by components. */
-type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel';
+type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel' | 'menu' | 'collapse' | 'toast' | 'fade' | 'pop';
+/**
+ * A physical edge, already resolved from any logical (`start`/`end`) position
+ * and from writing direction.
+ *
+ * Presets that move an element along an axis take one of these as `custom`.
+ * Resolution is the component's job, not the preset's: only the component knows
+ * whether its `end` means right or left, and — for anything anchored — which
+ * side it actually landed on after flipping away from a viewport edge.
+ */
+type MotionEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * A variant value. Either a plain target object or a function of the element's
  * `custom` value — the latter lets a single preset adapt to context, e.g. a
@@ -35,7 +45,10 @@ interface MotionPresetDefinition {
  * `custom` contract per preset:
  *
  * - `drawerStart` — `boolean`, whether the document direction is RTL.
- * - `overlay`, `modalContent`, `sidebarLabel` — unused.
+ * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical
+ *   position and writing direction by the component.
+ * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —
+ *   unused.
  */
 declare const motionPresets: Record<MotionPreset, MotionPresetDefinition>;
 
@@ -172,4 +185,4 @@ declare namespace AnimatedPresence {
     var displayName: string;
 }
 
-export { Animated as A, type MotionPreset as M, AnimatedPresence as a, type AnimatedProps as b, type MotionRuntime as c, type MotionPresenceProps as d, type MotionPresetDefinition as e, type MotionVariant as f, motionPresets as m, useMotionRuntime as u };
+export { Animated as A, type MotionEdge as M, AnimatedPresence as a, type AnimatedProps as b, type MotionPreset as c, type MotionRuntime as d, type MotionPresenceProps as e, type MotionPresetDefinition as f, type MotionVariant as g, motionPresets as m, useMotionRuntime as u };

package/dist/{chunk-XUVEF2RQ.js → chunk-24SEAAOH.js}

@@ -126,5 +126,5 @@ function useIsMobileOrTablet() {
 }
 
 export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery };
-//# sourceMappingURL=chunk-XUVEF2RQ.js.map
-//# sourceMappingURL=chunk-XUVEF2RQ.js.map
+//# sourceMappingURL=chunk-24SEAAOH.js.map
+//# sourceMappingURL=chunk-24SEAAOH.js.map

package/dist/{chunk-XUVEF2RQ.js.map → chunk-24SEAAOH.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useEffect","useState"],"mappings":"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","file":"chunk-XUVEF2RQ.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}
+{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useEffect","useState"],"mappings":"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","file":"chunk-24SEAAOH.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}

package/dist/{chunk-FUFBRKOG.cjs → chunk-2WBPNXO2.cjs}

@@ -4,7 +4,7 @@ var chunkMYAU2ZUC_cjs = require('./chunk-MYAU2ZUC.cjs');
 var chunkIFDC4TXM_cjs = require('./chunk-IFDC4TXM.cjs');
 var chunk7AECNMYV_cjs = require('./chunk-7AECNMYV.cjs');
 var chunkXEEVDZDK_cjs = require('./chunk-XEEVDZDK.cjs');
-var chunkL52N6BEN_cjs = require('./chunk-L52N6BEN.cjs');
+var chunkAUOTJQGO_cjs = require('./chunk-AUOTJQGO.cjs');
 var chunkZ5S5JEJD_cjs = require('./chunk-Z5S5JEJD.cjs');
 var chunkIINZWUGK_cjs = require('./chunk-IINZWUGK.cjs');
 var chunkNPKPCYAT_cjs = require('./chunk-NPKPCYAT.cjs');
@@ -166,7 +166,7 @@ var FillerWordsModal = ({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkL52N6BEN_cjs.Modal,
+    chunkAUOTJQGO_cjs.Modal,
     {
       open: isOpen,
       onOpenChange: (open) => {
@@ -174,11 +174,11 @@ var FillerWordsModal = ({
       },
       size: "lg",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalTitle, { children: "Remove Filler Words" }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalClose, { "aria-label": "Close modal" })
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalTitle, { children: "Remove Filler Words" }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalClose, { "aria-label": "Close modal" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalBody, { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalBody, { className: "flex flex-col gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkZ5S5JEJD_cjs.Input,
             {
@@ -258,7 +258,7 @@ var FillerWordsModal = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalFooter, { className: "justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalFooter, { className: "justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground text-sm", children: [
             totalMatches,
             " items \u2022 saves ",
@@ -372,7 +372,7 @@ var WordEditorModal = ({
   const preview = isSilence ? parseSilenceSplit(inputValue) : null;
   const applyDisabled = isSilence ? !inputValue.trim() || !!preview?.error || !preview || preview.durations.length === 0 : !inputValue.trim();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkL52N6BEN_cjs.Modal,
+    chunkAUOTJQGO_cjs.Modal,
     {
       open: isOpen && editableWord !== null,
       onOpenChange: (open) => {
@@ -380,11 +380,11 @@ var WordEditorModal = ({
       },
       size: "md",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalTitle, { children: isSilence ? "Split Silence" : "Edit Word" }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalClose, { "aria-label": "Close editor" })
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalTitle, { children: isSilence ? "Split Silence" : "Edit Word" }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalClose, { "aria-label": "Close editor" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalBody, { className: "flex flex-col gap-2", children: isSilence ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalBody, { className: "flex flex-col gap-2", children: isSilence ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-foreground m-0 text-sm", children: [
             "Silence duration:",
             " ",
@@ -430,7 +430,7 @@ var WordEditorModal = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalFooter, { className: "justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalFooter, { className: "justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkIINZWUGK_cjs.Button,
             {
@@ -487,7 +487,7 @@ var SilenceSettingsModal = ({
   };
   const formatSeconds = (v) => `${v.toFixed(1)}s`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkL52N6BEN_cjs.Modal,
+    chunkAUOTJQGO_cjs.Modal,
     {
       open: isOpen,
       onOpenChange: (open) => {
@@ -495,11 +495,11 @@ var SilenceSettingsModal = ({
       },
       size: "md",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalTitle, { children: "Silence Settings" }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkL52N6BEN_cjs.ModalClose, { "aria-label": "Close modal" })
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalTitle, { children: "Silence Settings" }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAUOTJQGO_cjs.ModalClose, { "aria-label": "Close modal" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalBody, { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalBody, { className: "flex flex-col gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               chunkMYAU2ZUC_cjs.Slider,
@@ -535,7 +535,7 @@ var SilenceSettingsModal = ({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground m-0 text-xs", children: "Silences longer than this will create paragraph breaks." })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkL52N6BEN_cjs.ModalFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAUOTJQGO_cjs.ModalFooter, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(chunkIINZWUGK_cjs.Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }),
           /* @__PURE__ */ jsxRuntime.jsx(chunkIINZWUGK_cjs.Button, { variant: "primary", size: "sm", onClick: handleApply, children: "Apply" })
         ] })
@@ -2025,5 +2025,5 @@ exports.MediaEditor = MediaEditor;
 exports.SilenceSettingsModal = SilenceSettingsModal;
 exports.SpeedMarkerMenu = SpeedMarkerMenu;
 exports.WordEditorModal = WordEditorModal;
-//# sourceMappingURL=chunk-FUFBRKOG.cjs.map
-//# sourceMappingURL=chunk-FUFBRKOG.cjs.map
+//# sourceMappingURL=chunk-2WBPNXO2.cjs.map
+//# sourceMappingURL=chunk-2WBPNXO2.cjs.map