@mieweb/ui 0.7.1-dev.9 → 0.7.2-dev.0

package/dist/chunk-MJWFNV3L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.tsx"],"names":["cva","React","jsxs","cn","jsx","Fragment"],"mappings":"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","file":"chunk-MJWFNV3L.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst cardVariants = cva(\n  [\n    'rounded-xl bg-card text-card-foreground',\n    'border border-border',\n    'relative overflow-hidden',\n  ],\n  {\n    variants: {\n      padding: {\n        none: 'p-0',\n        sm: 'p-3',\n        md: 'p-4',\n        lg: 'p-6',\n        xl: 'p-8',\n      },\n      variant: {\n        default: 'shadow-card',\n        elevated: 'shadow-lg border-0',\n        outlined: 'shadow-none border-2',\n        ghost: 'shadow-none border-0 bg-transparent',\n        filled: 'shadow-none border-0 bg-muted',\n      },\n      interactive: {\n        true: [\n          'transition-all duration-200',\n          'hover:shadow-md hover:border-primary-200',\n          'dark:hover:border-primary-800',\n          'cursor-pointer',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',\n        ],\n        false: '',\n      },\n      selected: {\n        true: 'ring-2 ring-primary-500 border-primary-500',\n        false: '',\n      },\n      orientation: {\n        vertical: 'flex flex-col',\n        horizontal: 'flex flex-row',\n      },\n    },\n    defaultVariants: {\n      padding: 'md',\n      variant: 'default',\n      interactive: false,\n      selected: false,\n      orientation: 'vertical',\n    },\n  }\n);\n\nconst cardAccentVariants = cva('absolute start-0 top-0 bottom-0 w-1', {\n  variants: {\n    color: {\n      primary: 'bg-primary-800',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      destructive: 'bg-destructive',\n      info: 'bg-primary-200',\n    },\n  },\n});\n\nexport interface CardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {\n  /** Semantic HTML element to render as */\n  as?: 'div' | 'article' | 'section' | 'aside';\n  /** Accent color bar on the start (reading-direction) side */\n  accent?: 'primary' | 'success' | 'warning' | 'destructive' | 'info';\n  /** Loading state - shows skeleton overlay */\n  loading?: boolean;\n}\n\n/**\n * A card container component for grouping related content.\n *\n * @example\n * ```tsx\n * <Card padding=\"lg\" variant=\"elevated\">\n *   <CardHeader>\n *     <CardTitle>Card Title</CardTitle>\n *   </CardHeader>\n *   <CardContent>Card content goes here</CardContent>\n * </Card>\n * ```\n */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      padding,\n      variant,\n      interactive,\n      selected,\n      orientation,\n      accent,\n      loading,\n      as: Component = 'div',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          cardVariants({\n            padding,\n            variant,\n            interactive,\n            selected,\n            orientation,\n          }),\n          accent && 'ps-4',\n          className\n        )}\n        data-slot=\"card\"\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {accent && (\n          <div\n            className={cn(cardAccentVariants({ color: accent }))}\n            aria-hidden=\"true\"\n          />\n        )}\n        {loading && (\n          <div className=\"bg-card/80 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-sm\">\n            <div className=\"flex gap-1\">\n              <div className=\"bg-primary-800 h-2 w-2 animate-bounce rounded-full [animation-delay:-0.3s]\" />\n              <div className=\"bg-primary-800 h-2 w-2 animate-bounce rounded-full [animation-delay:-0.15s]\" />\n              <div className=\"bg-primary-800 h-2 w-2 animate-bounce rounded-full\" />\n            </div>\n          </div>\n        )}\n        {children}\n      </Component>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n/**\n * Header section of a Card\n */\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"card-header\"\n    className={cn('flex flex-col gap-1.5 pb-4', className)}\n    {...props}\n  />\n));\n\nCardHeader.displayName = 'CardHeader';\n\n/**\n * Title for a Card\n */\nexport interface CardTitleProps extends React.HTMLAttributes<globalThis.HTMLHeadingElement> {\n  /** Heading level — defaults to `h3` */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\nconst CardTitle = React.forwardRef<\n  globalThis.HTMLHeadingElement,\n  CardTitleProps\n>(({ className, children, as: Comp = 'h3', ...props }, ref) => (\n  <Comp\n    ref={ref}\n    data-slot=\"card-title\"\n    className={cn(\n      'text-lg leading-none font-semibold tracking-tight',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Comp>\n));\n\nCardTitle.displayName = 'CardTitle';\n\n/**\n * Description text for a Card\n */\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"card-description\"\n    className={cn('text-muted-foreground text-sm', className)}\n    {...props}\n  />\n));\n\nCardDescription.displayName = 'CardDescription';\n\n/**\n * Main content area of a Card\n */\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"card-content\"\n    className={cn('', className)}\n    {...props}\n  />\n));\n\nCardContent.displayName = 'CardContent';\n\n/**\n * Footer section of a Card\n */\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"card-footer\"\n    className={cn('flex items-center pt-4', className)}\n    {...props}\n  />\n));\n\nCardFooter.displayName = 'CardFooter';\n\n/**\n * Image/Media section for a Card - typically used at the top\n */\nexport interface CardMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** Aspect ratio of the media */\n  aspectRatio?: 'video' | 'square' | 'wide' | 'auto';\n  /** Optional overlay content */\n  overlay?: React.ReactNode;\n}\n\nconst CardMedia = React.forwardRef<HTMLDivElement, CardMediaProps>(\n  ({ className, aspectRatio = 'video', overlay, src, alt, ...props }, ref) => {\n    const aspectClasses = {\n      video: 'aspect-video',\n      square: 'aspect-square',\n      wide: 'aspect-[21/9]',\n      auto: '',\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-media\"\n        className={cn(\n          'relative -mx-4 -mt-4 overflow-hidden first:rounded-t-xl',\n          className\n        )}\n      >\n        <img\n          src={src}\n          alt={alt}\n          className={cn('w-full object-cover', aspectClasses[aspectRatio])}\n          {...props}\n        />\n        {overlay && (\n          <div className=\"absolute inset-0 flex items-end bg-gradient-to-t from-neutral-900/60 to-transparent p-4\">\n            {overlay}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCardMedia.displayName = 'CardMedia';\n\n/**\n * Badge/Label component for Cards\n */\nexport interface CardBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Badge color variant */\n  variant?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';\n  /**\n   * Position of the badge. All values are direction-aware (logical):\n   * `*-left`/`*-right` are aliases for `*-start`/`*-end` and mirror in RTL\n   * documents. Prefer `start`/`end` values for clarity; pass a physical\n   * inset via `className` if fixed positioning is required.\n   */\n  position?:\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end';\n}\n\nconst CardBadge = React.forwardRef<HTMLSpanElement, CardBadgeProps>(\n  (\n    {\n      className,\n      variant = 'default',\n      position = 'top-right',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const variantClasses = {\n      default: 'bg-muted text-muted-foreground',\n      primary: 'bg-primary-800 text-white',\n      success: 'bg-success-700 text-success-foreground',\n      warning: 'bg-warning-700 text-warning-foreground',\n      destructive: 'bg-destructive text-destructive-foreground',\n    };\n\n    // Direction-aware (logical) positions: `left`/`right` are aliases for\n    // `start`/`end` and mirror in RTL documents.\n    const positionClasses = {\n      'top-left': 'top-2 start-2',\n      'top-right': 'top-2 end-2',\n      'bottom-left': 'bottom-2 start-2',\n      'bottom-right': 'bottom-2 end-2',\n      'top-start': 'top-2 start-2',\n      'top-end': 'top-2 end-2',\n      'bottom-start': 'bottom-2 start-2',\n      'bottom-end': 'bottom-2 end-2',\n    };\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"card-badge\"\n        className={cn(\n          'absolute z-10 rounded-md px-2 py-1 text-xs font-medium',\n          variantClasses[variant],\n          positionClasses[position],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nCardBadge.displayName = 'CardBadge';\n\n/**\n * Actions area for Card buttons/links\n */\nexport interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Alignment of actions */\n  align?: 'left' | 'center' | 'right' | 'between' | 'around';\n}\n\nconst CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(\n  ({ className, align = 'right', children, ...props }, ref) => {\n    const alignClasses = {\n      left: 'justify-start',\n      center: 'justify-center',\n      right: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-actions\"\n        className={cn(\n          'flex items-center gap-2 pt-4',\n          alignClasses[align],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardActions.displayName = 'CardActions';\n\n/**\n * Divider line within a Card\n */\nconst CardDivider = React.forwardRef<\n  globalThis.HTMLHRElement,\n  React.HTMLAttributes<globalThis.HTMLHRElement>\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    data-slot=\"card-divider\"\n    className={cn('border-border -mx-4 my-4', className)}\n    {...props}\n  />\n));\n\nCardDivider.displayName = 'CardDivider';\n\n/**\n * Collapsible content section for Cards\n */\nexport interface CardCollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the content is expanded */\n  expanded?: boolean;\n  /** Callback when expand state changes */\n  onExpandChange?: (expanded: boolean) => void;\n  /** Trigger element/text for expanding */\n  trigger?: React.ReactNode;\n}\n\nconst CardCollapsible = React.forwardRef<HTMLDivElement, CardCollapsibleProps>(\n  (\n    {\n      className,\n      expanded: controlledExpanded,\n      onExpandChange,\n      trigger = 'Show more',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalExpanded, setInternalExpanded] = React.useState(false);\n    const isControlled = controlledExpanded !== undefined;\n    const expanded = isControlled ? controlledExpanded : internalExpanded;\n\n    const handleToggle = () => {\n      if (isControlled) {\n        onExpandChange?.(!expanded);\n      } else {\n        setInternalExpanded(!expanded);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-collapsible\"\n        className={cn('', className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          className=\"text-primary-800 focus-visible:ring-primary-500 flex items-center gap-1 rounded text-sm hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n          aria-expanded={expanded}\n        >\n          {typeof trigger === 'string' ? (\n            <>\n              {expanded ? 'Show less' : trigger}\n              <svg\n                aria-hidden=\"true\"\n                className={cn(\n                  'h-4 w-4 transition-transform',\n                  expanded && 'rotate-180'\n                )}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </>\n          ) : (\n            trigger\n          )}\n        </button>\n        <div\n          className={cn(\n            'grid transition-all duration-300 ease-in-out',\n            expanded\n              ? 'mt-3 grid-rows-[1fr] opacity-100'\n              : 'grid-rows-[0fr] opacity-0'\n          )}\n        >\n          <div className=\"overflow-hidden\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n);\n\nCardCollapsible.displayName = 'CardCollapsible';\n\n/**\n * Stat/Metric display for Cards\n */\nexport interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The main value/number */\n  value: React.ReactNode;\n  /** Label describing the stat */\n  label: string;\n  /** Trend indicator */\n  trend?: { value: number; label?: string };\n  /** Icon to display */\n  icon?: React.ReactNode;\n}\n\nconst CardStat = React.forwardRef<HTMLDivElement, CardStatProps>(\n  ({ className, value, label, trend, icon, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-stat\"\n        className={cn('flex items-start gap-3', className)}\n        {...props}\n      >\n        {icon && (\n          <div className=\"bg-primary-500/10 text-primary-800 rounded-lg p-2\">\n            {icon}\n          </div>\n        )}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"text-2xl font-bold tracking-tight\">{value}</div>\n          <div className=\"text-muted-foreground text-sm\">{label}</div>\n          {trend && (\n            <div\n              className={cn(\n                'mt-1 flex items-center gap-1 text-sm',\n                trend.value >= 0\n                  ? 'text-success-700 dark:text-success-300'\n                  : 'text-destructive-700 dark:text-destructive-400'\n              )}\n            >\n              <svg\n                aria-hidden=\"true\"\n                className={cn('h-4 w-4', trend.value < 0 && 'rotate-180')}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M5 10l7-7m0 0l7 7m-7-7v18\"\n                />\n              </svg>\n              <span>{Math.abs(trend.value)}%</span>\n              {trend.label && (\n                <span className=\"text-muted-foreground\">{trend.label}</span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nCardStat.displayName = 'CardStat';\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardMedia,\n  CardBadge,\n  CardActions,\n  CardDivider,\n  CardCollapsible,\n  CardStat,\n  cardVariants,\n  cardAccentVariants,\n};\n"]}

package/dist/{chunk-ZDEYV373.cjs → chunk-MYFZYUPR.cjs}

@@ -41,6 +41,8 @@ function useAnchoredPosition({
   matchWidth = false,
   matchMinWidth = false,
   viewportPadding = 8,
+  allowFlip = true,
+  boundaryRef,
   maxHeight
 }) {
   const anchorRef = React__namespace.useRef(null);
@@ -56,18 +58,37 @@ function useAnchoredPosition({
     const rect = anchor.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
+    const boundaryRect = boundaryRef?.current?.getBoundingClientRect();
+    const bounds = boundaryRect ?? {
+      top: 0,
+      right: viewportWidth,
+      bottom: viewportHeight,
+      left: 0
+    };
+    const leftLimit = Math.max(bounds.left + viewportPadding, viewportPadding);
+    const rightLimit = Math.min(
+      bounds.right - viewportPadding,
+      viewportWidth - viewportPadding
+    );
+    const topLimit = Math.max(bounds.top + viewportPadding, viewportPadding);
+    const bottomLimit = Math.min(
+      bounds.bottom - viewportPadding,
+      viewportHeight - viewportPadding
+    );
     const contentHeight = Math.min(
       floating.scrollHeight,
       maxHeight ?? Infinity
     );
     const floatingWidth = matchWidth ? rect.width : Math.max(floating.offsetWidth, matchMinWidth ? rect.width : 0);
-    const spaceBelow = viewportHeight - rect.bottom - offset - viewportPadding;
-    const spaceAbove = rect.top - offset - viewportPadding;
+    const availableWidth = Math.max(rightLimit - leftLimit, 0);
+    const positionedWidth = Math.min(floatingWidth, availableWidth);
+    const spaceBelow = bottomLimit - rect.bottom - offset;
+    const spaceAbove = rect.top - topLimit - offset;
     const preferTop = placement.startsWith("top");
-    let side;
-    if (preferTop) {
+    let side = preferTop ? "top" : "bottom";
+    if (allowFlip && preferTop) {
       side = spaceAbove < contentHeight && spaceBelow > spaceAbove ? "bottom" : "top";
-    } else {
+    } else if (allowFlip) {
       side = spaceBelow < contentHeight && spaceAbove > spaceBelow ? "top" : "bottom";
     }
     const availableHeight = Math.max(
@@ -75,10 +96,10 @@ function useAnchoredPosition({
       0
     );
     const align = placement.endsWith("-start") ? "left" : placement.endsWith("-end") ? "right" : "center";
-    let left = align === "left" ? rect.left : align === "right" ? rect.right - floatingWidth : rect.left + rect.width / 2 - floatingWidth / 2;
+    let left = align === "left" ? rect.left : align === "right" ? rect.right - positionedWidth : rect.left + rect.width / 2 - positionedWidth / 2;
     left = Math.min(
-      Math.max(left, viewportPadding),
-      Math.max(viewportWidth - floatingWidth - viewportPadding, viewportPadding)
+      Math.max(left, leftLimit),
+      Math.max(rightLimit - positionedWidth, leftLimit)
     );
     setActualSide(side);
     setStyle({
@@ -87,6 +108,7 @@ function useAnchoredPosition({
       ...side === "top" ? { bottom: viewportHeight - rect.top + offset } : { top: rect.bottom + offset },
       ...matchWidth ? { width: rect.width } : {},
       ...matchMinWidth ? { minWidth: rect.width } : {},
+      maxWidth: availableWidth,
       maxHeight: Math.min(availableHeight, maxHeight ?? Infinity),
       zIndex: 9999,
       transition: "none"
@@ -97,7 +119,9 @@ function useAnchoredPosition({
     maxHeight,
     offset,
     placement,
-    viewportPadding
+    viewportPadding,
+    allowFlip,
+    boundaryRef
   ]);
   React__namespace.useLayoutEffect(() => {
     if (open) {
@@ -135,5 +159,5 @@ function useAnchoredPosition({
 }
 
 exports.useAnchoredPosition = useAnchoredPosition;
-//# sourceMappingURL=chunk-ZDEYV373.cjs.map
-//# sourceMappingURL=chunk-ZDEYV373.cjs.map
+//# sourceMappingURL=chunk-MYFZYUPR.cjs.map
+//# sourceMappingURL=chunk-MYFZYUPR.cjs.map

package/dist/chunk-MYFZYUPR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useAnchoredPosition.ts"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,YAAA,GAAoC;AAAA,EACxC,QAAA,EAAU,OAAA;AAAA,EACV,GAAA,EAAK,CAAA;AAAA,EACL,IAAA,EAAM,CAAA;AAAA,EACN,UAAA,EAAY,QAAA;AAAA,EACZ,MAAA,EAAQ,IAAA;AAAA;AAAA;AAAA;AAAA,EAIR,UAAA,EAAY;AACd,CAAA;AA6BO,SAAS,mBAAA,CAGd;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,cAAA;AAAA,EACZ,MAAA,GAAS,CAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,aAAA,GAAgB,KAAA;AAAA,EAChB,eAAA,GAAkB,CAAA;AAAA,EAClB,SAAA,GAAY,IAAA;AAAA,EACZ,WAAA;AAAA,EACA;AACF,CAAA,EAA8E;AAC5E,EAAA,MAAM,SAAA,GAAkBA,wBAAuB,IAAI,CAAA;AACnD,EAAA,MAAM,WAAA,GAAoBA,wBAAyB,IAAI,CAAA;AACvD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAUA,0BAA8B,YAAY,CAAA;AAC1E,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAUA,gBAAA,CAAA,QAAA;AAAA,IACxC,SAAA,CAAU,UAAA,CAAW,KAAK,CAAA,GAAI,KAAA,GAAQ;AAAA,GACxC;AAEA,EAAA,MAAM,MAAA,GAAeA,6BAAY,MAAM;AACrC,IAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AACzB,IAAA,MAAM,WAAW,WAAA,CAAY,OAAA;AAC7B,IAAA,IAAI,CAAC,MAAA,IAAU,CAAC,QAAA,EAAU;AAE1B,IAAA,MAAM,IAAA,GAAO,OAAO,qBAAA,EAAsB;AAC1C,IAAA,MAAM,gBAAgB,MAAA,CAAO,UAAA;AAC7B,IAAA,MAAM,iBAAiB,MAAA,CAAO,WAAA;AAC9B,IAAA,MAAM,YAAA,GAAe,WAAA,EAAa,OAAA,EAAS,qBAAA,EAAsB;AACjE,IAAA,MAAM,SAAS,YAAA,IAAgB;AAAA,MAC7B,GAAA,EAAK,CAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR,IAAA,EAAM;AAAA,KACR;AACA,IAAA,MAAM,YAAY,IAAA,CAAK,GAAA,CAAI,MAAA,CAAO,IAAA,GAAO,iBAAiB,eAAe,CAAA;AACzE,IAAA,MAAM,aAAa,IAAA,CAAK,GAAA;AAAA,MACtB,OAAO,KAAA,GAAQ,eAAA;AAAA,MACf,aAAA,GAAgB;AAAA,KAClB;AACA,IAAA,MAAM,WAAW,IAAA,CAAK,GAAA,CAAI,MAAA,CAAO,GAAA,GAAM,iBAAiB,eAAe,CAAA;AACvE,IAAA,MAAM,cAAc,IAAA,CAAK,GAAA;AAAA,MACvB,OAAO,MAAA,GAAS,eAAA;AAAA,MAChB,cAAA,GAAiB;AAAA,KACnB;AAIA,IAAA,MAAM,gBAAgB,IAAA,CAAK,GAAA;AAAA,MACzB,QAAA,CAAS,YAAA;AAAA,MACT,SAAA,IAAa;AAAA,KACf;AAGA,IAAA,MAAM,aAAA,GAAgB,UAAA,GAClB,IAAA,CAAK,KAAA,GACL,IAAA,CAAK,GAAA,CAAI,QAAA,CAAS,WAAA,EAAa,aAAA,GAAgB,IAAA,CAAK,KAAA,GAAQ,CAAC,CAAA;AACjE,IAAA,MAAM,cAAA,GAAiB,IAAA,CAAK,GAAA,CAAI,UAAA,GAAa,WAAW,CAAC,CAAA;AACzD,IAAA,MAAM,eAAA,GAAkB,IAAA,CAAK,GAAA,CAAI,aAAA,EAAe,cAAc,CAAA;AAG9D,IAAA,MAAM,UAAA,GAAa,WAAA,GAAc,IAAA,CAAK,MAAA,GAAS,MAAA;AAC/C,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,GAAM,QAAA,GAAW,MAAA;AACzC,IAAA,MAAM,SAAA,GAAY,SAAA,CAAU,UAAA,CAAW,KAAK,CAAA;AAC5C,IAAA,IAAI,IAAA,GAAyB,YAAY,KAAA,GAAQ,QAAA;AACjD,IAAA,IAAI,aAAa,SAAA,EAAW;AAC1B,MAAA,IAAA,GACE,UAAA,GAAa,aAAA,IAAiB,UAAA,GAAa,UAAA,GACvC,QAAA,GACA,KAAA;AAAA,IACR,WAAW,SAAA,EAAW;AACpB,MAAA,IAAA,GACE,UAAA,GAAa,aAAA,IAAiB,UAAA,GAAa,UAAA,GACvC,KAAA,GACA,QAAA;AAAA,IACR;AACA,IAAA,MAAM,kBAAkB,IAAA,CAAK,GAAA;AAAA,MAC3B,IAAA,KAAS,QAAQ,UAAA,GAAa,UAAA;AAAA,MAC9B;AAAA,KACF;AAGA,IAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,QAAA,CAAS,QAAQ,CAAA,GACrC,SACA,SAAA,CAAU,QAAA,CAAS,MAAM,CAAA,GACvB,OAAA,GACA,QAAA;AACN,IAAA,IAAI,IAAA,GACF,KAAA,KAAU,MAAA,GACN,IAAA,CAAK,OACL,KAAA,KAAU,OAAA,GACR,IAAA,CAAK,KAAA,GAAQ,kBACb,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,KAAA,GAAQ,IAAI,eAAA,GAAkB,CAAA;AACvD,IAAA,IAAA,GAAO,IAAA,CAAK,GAAA;AAAA,MACV,IAAA,CAAK,GAAA,CAAI,IAAA,EAAM,SAAS,CAAA;AAAA,MACxB,IAAA,CAAK,GAAA,CAAI,UAAA,GAAa,eAAA,EAAiB,SAAS;AAAA,KAClD;AAEA,IAAA,aAAA,CAAc,IAAI,CAAA;AAClB,IAAA,QAAA,CAAS;AAAA,MACP,QAAA,EAAU,OAAA;AAAA,MACV,IAAA;AAAA,MACA,GAAI,IAAA,KAAS,KAAA,GACT,EAAE,QAAQ,cAAA,GAAiB,IAAA,CAAK,GAAA,GAAM,MAAA,EAAO,GAC7C,EAAE,GAAA,EAAK,IAAA,CAAK,SAAS,MAAA,EAAO;AAAA,MAChC,GAAI,UAAA,GAAa,EAAE,OAAO,IAAA,CAAK,KAAA,KAAU,EAAC;AAAA,MAC1C,GAAI,aAAA,GAAgB,EAAE,UAAU,IAAA,CAAK,KAAA,KAAU,EAAC;AAAA,MAChD,QAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,IAAA,CAAK,GAAA,CAAI,eAAA,EAAiB,aAAa,QAAQ,CAAA;AAAA,MAC1D,MAAA,EAAQ,IAAA;AAAA,MACR,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,EACH,CAAA,EAAG;AAAA,IACD,aAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGD,EAAMA,iCAAgB,MAAM;AAC1B,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,MAAA,EAAO;AAAA,IACT,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,MAAM,CAAC,CAAA;AAGjB,EAAMA,2BAAU,MAAM;AACpB,IAAA,IAAI,CAAC,IAAA,EAAM;AAIX,IAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,KAAA,EAAO;AACX,MAAA,KAAA,GAAQ,MAAA,CAAO,sBAAsB,MAAM;AACzC,QAAA,KAAA,GAAQ,CAAA;AACR,QAAA,MAAA,EAAO;AAAA,MACT,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,QAAA,EAAU,cAAA,EAAgB,IAAI,CAAA;AACtD,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,cAAc,CAAA;AAEhD,IAAA,IAAI,cAAA;AACJ,IAAA,IAAI,OAAO,UAAA,CAAW,cAAA,KAAmB,WAAA,EAAa;AACpD,MAAA,cAAA,GAAiB,IAAI,UAAA,CAAW,cAAA,CAAe,cAAc,CAAA;AAC7D,MAAA,IAAI,SAAA,CAAU,OAAA,EAAS,cAAA,CAAe,OAAA,CAAQ,UAAU,OAAO,CAAA;AAC/D,MAAA,IAAI,WAAA,CAAY,OAAA,EAAS,cAAA,CAAe,OAAA,CAAQ,YAAY,OAAO,CAAA;AAAA,IACrE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,KAAA,EAAO,MAAA,CAAO,oBAAA,CAAqB,KAAK,CAAA;AAC5C,MAAA,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,cAAA,EAAgB,IAAI,CAAA;AACzD,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,cAAc,CAAA;AACnD,MAAA,cAAA,EAAgB,UAAA,EAAW;AAAA,IAC7B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,MAAM,CAAC,CAAA;AAEjB,EAAA,OAAO,EAAE,SAAA,EAAW,WAAA,EAAa,KAAA,EAAO,YAAY,MAAA,EAAO;AAC7D","file":"chunk-MYFZYUPR.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type AnchoredPlacement =\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'bottom'\n  | 'top-start'\n  | 'top-end'\n  | 'top';\n\nexport interface UseAnchoredPositionOptions {\n  /** Whether the floating element is currently shown */\n  open: boolean;\n  /** Preferred placement relative to the anchor (flips when out of space) */\n  placement?: AnchoredPlacement;\n  /** Gap between the anchor and the floating element, in px */\n  offset?: number;\n  /** Force the floating element to the anchor's width */\n  matchWidth?: boolean;\n  /** Use the anchor's width as the floating element's minimum width */\n  matchMinWidth?: boolean;\n  /** Minimum distance from the viewport edges, in px */\n  viewportPadding?: number;\n  /** Flip to the opposite vertical side when the preferred side is cramped */\n  allowFlip?: boolean;\n  /** Optional element whose visible rectangle also constrains the popup */\n  boundaryRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Additional cap on the floating element's height, in px. The height is\n   * always clamped to the available viewport space; this only lowers that\n   * limit further (omitting it does not remove the viewport constraint).\n   */\n  maxHeight?: number;\n}\n\nexport interface UseAnchoredPositionReturn<\n  TAnchor extends HTMLElement,\n  TFloating extends HTMLElement,\n> {\n  /** Attach to the element the popup is anchored to (trigger/input) */\n  anchorRef: React.RefObject<TAnchor | null>;\n  /** Attach to the floating element (menu/listbox/panel) */\n  floatingRef: React.RefObject<TFloating | null>;\n  /** Fixed-position style for the floating element — spread onto it */\n  style: React.CSSProperties;\n  /** Vertical side in use after flipping ('top' or 'bottom') */\n  actualSide: 'top' | 'bottom';\n  /** Recompute the position (e.g. after async content loads) */\n  update: () => void;\n}\n\nconst HIDDEN_STYLE: React.CSSProperties = {\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  visibility: 'hidden',\n  zIndex: 9999,\n  // Never let `transition-*` utilities animate top/left from the hidden\n  // (0,0) mount position to the computed one (keyframe animations like\n  // `animate-in` are unaffected).\n  transition: 'none',\n};\n\n/**\n * Positions a floating element (dropdown menu, autocomplete listbox,\n * date-picker calendar, …) relative to an anchor using `position: fixed`,\n * so it is never clipped by `overflow: hidden` ancestors.\n *\n * Render the floating element through `createPortal(..., document.body)`\n * and spread the returned `style` onto it. The hook:\n * - flips vertically when there is not enough space on the preferred side\n * - clamps horizontally to the viewport or optional boundary element\n * - constrains `maxHeight` to the available space (add `overflow-auto`)\n * - tracks scroll, resize, and anchor/content size changes while open\n *\n * @example\n * ```tsx\n * const { anchorRef, floatingRef, style } = useAnchoredPosition<\n *   HTMLButtonElement,\n *   HTMLDivElement\n * >({ open, placement: 'bottom-start' });\n *\n * <button ref={anchorRef} onClick={() => setOpen(!open)}>Open</button>\n * {open &&\n *   createPortal(\n *     <div ref={floatingRef} style={style} className=\"overflow-auto …\">…</div>,\n *     document.body\n *   )}\n * ```\n */\nexport function useAnchoredPosition<\n  TAnchor extends HTMLElement = HTMLElement,\n  TFloating extends HTMLElement = HTMLElement,\n>({\n  open,\n  placement = 'bottom-start',\n  offset = 4,\n  matchWidth = false,\n  matchMinWidth = false,\n  viewportPadding = 8,\n  allowFlip = true,\n  boundaryRef,\n  maxHeight,\n}: UseAnchoredPositionOptions): UseAnchoredPositionReturn<TAnchor, TFloating> {\n  const anchorRef = React.useRef<TAnchor | null>(null);\n  const floatingRef = React.useRef<TFloating | null>(null);\n  const [style, setStyle] = React.useState<React.CSSProperties>(HIDDEN_STYLE);\n  const [actualSide, setActualSide] = React.useState<'top' | 'bottom'>(\n    placement.startsWith('top') ? 'top' : 'bottom'\n  );\n\n  const update = React.useCallback(() => {\n    const anchor = anchorRef.current;\n    const floating = floatingRef.current;\n    if (!anchor || !floating) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const boundaryRect = boundaryRef?.current?.getBoundingClientRect();\n    const bounds = boundaryRect ?? {\n      top: 0,\n      right: viewportWidth,\n      bottom: viewportHeight,\n      left: 0,\n    };\n    const leftLimit = Math.max(bounds.left + viewportPadding, viewportPadding);\n    const rightLimit = Math.min(\n      bounds.right - viewportPadding,\n      viewportWidth - viewportPadding\n    );\n    const topLimit = Math.max(bounds.top + viewportPadding, viewportPadding);\n    const bottomLimit = Math.min(\n      bounds.bottom - viewportPadding,\n      viewportHeight - viewportPadding\n    );\n\n    // Natural content size (scrollHeight so a previously applied maxHeight\n    // doesn't skew the flip decision).\n    const contentHeight = Math.min(\n      floating.scrollHeight,\n      maxHeight ?? Infinity\n    );\n    // With matchMinWidth the rendered width is at least the anchor's width,\n    // even if offsetWidth was measured before minWidth applied.\n    const floatingWidth = matchWidth\n      ? rect.width\n      : Math.max(floating.offsetWidth, matchMinWidth ? rect.width : 0);\n    const availableWidth = Math.max(rightLimit - leftLimit, 0);\n    const positionedWidth = Math.min(floatingWidth, availableWidth);\n\n    // --- Vertical: preferred side, flip when out of space -------------------\n    const spaceBelow = bottomLimit - rect.bottom - offset;\n    const spaceAbove = rect.top - topLimit - offset;\n    const preferTop = placement.startsWith('top');\n    let side: 'top' | 'bottom' = preferTop ? 'top' : 'bottom';\n    if (allowFlip && preferTop) {\n      side =\n        spaceAbove < contentHeight && spaceBelow > spaceAbove\n          ? 'bottom'\n          : 'top';\n    } else if (allowFlip) {\n      side =\n        spaceBelow < contentHeight && spaceAbove > spaceBelow\n          ? 'top'\n          : 'bottom';\n    }\n    const availableHeight = Math.max(\n      side === 'top' ? spaceAbove : spaceBelow,\n      0\n    );\n\n    // --- Horizontal: -start aligns left edges, -end aligns right edges ------\n    const align = placement.endsWith('-start')\n      ? 'left'\n      : placement.endsWith('-end')\n        ? 'right'\n        : 'center';\n    let left =\n      align === 'left'\n        ? rect.left\n        : align === 'right'\n          ? rect.right - positionedWidth\n          : rect.left + rect.width / 2 - positionedWidth / 2;\n    left = Math.min(\n      Math.max(left, leftLimit),\n      Math.max(rightLimit - positionedWidth, leftLimit)\n    );\n\n    setActualSide(side);\n    setStyle({\n      position: 'fixed',\n      left,\n      ...(side === 'top'\n        ? { bottom: viewportHeight - rect.top + offset }\n        : { top: rect.bottom + offset }),\n      ...(matchWidth ? { width: rect.width } : {}),\n      ...(matchMinWidth ? { minWidth: rect.width } : {}),\n      maxWidth: availableWidth,\n      maxHeight: Math.min(availableHeight, maxHeight ?? Infinity),\n      zIndex: 9999,\n      transition: 'none',\n    });\n  }, [\n    matchMinWidth,\n    matchWidth,\n    maxHeight,\n    offset,\n    placement,\n    viewportPadding,\n    allowFlip,\n    boundaryRef,\n  ]);\n\n  // Position synchronously before paint when opening / re-rendering open.\n  React.useLayoutEffect(() => {\n    if (open) {\n      update();\n    } else {\n      setStyle(HIDDEN_STYLE);\n    }\n  }, [open, update]);\n\n  // Track scroll/resize and anchor/content size changes while open.\n  React.useEffect(() => {\n    if (!open) return;\n\n    // Coalesce bursts (scroll/resize fire per event) into one layout\n    // read + state update per frame.\n    let frame = 0;\n    const scheduleUpdate = () => {\n      if (frame) return;\n      frame = window.requestAnimationFrame(() => {\n        frame = 0;\n        update();\n      });\n    };\n\n    window.addEventListener('scroll', scheduleUpdate, true);\n    window.addEventListener('resize', scheduleUpdate);\n\n    let resizeObserver: globalThis.ResizeObserver | undefined;\n    if (typeof globalThis.ResizeObserver !== 'undefined') {\n      resizeObserver = new globalThis.ResizeObserver(scheduleUpdate);\n      if (anchorRef.current) resizeObserver.observe(anchorRef.current);\n      if (floatingRef.current) resizeObserver.observe(floatingRef.current);\n    }\n\n    return () => {\n      if (frame) window.cancelAnimationFrame(frame);\n      window.removeEventListener('scroll', scheduleUpdate, true);\n      window.removeEventListener('resize', scheduleUpdate);\n      resizeObserver?.disconnect();\n    };\n  }, [open, update]);\n\n  return { anchorRef, floatingRef, style, actualSide, update };\n}\n"]}

package/dist/{chunk-QNUPTRW7.js → chunk-NGLI2MSM.js}

@@ -1,9 +1,9 @@
 import { Slider } from './chunk-OTQ72WX3.js';
 import { MediaPlayer } from './chunk-PS5INHGC.js';
 import { Checkbox } from './chunk-KFLDXJEE.js';
-import { Select } from './chunk-34LGPMO4.js';
+import { Select } from './chunk-DLBV42JD.js';
 import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-XMCIXHGH.js';
-import { Input } from './chunk-EJPV3QY3.js';
+import { Input } from './chunk-YXCE2HSK.js';
 import { Button } from './chunk-WRYZ2752.js';
 import { useTranscriptEdits, DEFAULT_FILLER_WORDS } from './chunk-UUI7WXI5.js';
 import { isSilenceType, PLAYBACK_SPEEDS } from './chunk-6CGM5H4J.js';
@@ -801,6 +801,22 @@ var mediaEditorVariants = cva(
     }
   }
 );
+function scrollWordIntoTranscript(container, wordIndex) {
+  if (!container) return;
+  if (container.scrollHeight <= container.clientHeight) return;
+  const el = container.querySelector(`[data-word-index="${wordIndex}"]`);
+  if (!el) return;
+  const containerBox = container.getBoundingClientRect();
+  const wordBox = el.getBoundingClientRect();
+  const above = wordBox.top - containerBox.top;
+  const below = wordBox.bottom - containerBox.bottom;
+  const delta = above < 0 ? above : below > 0 ? below : 0;
+  if (delta === 0) return;
+  container.scrollTo({
+    top: container.scrollTop + delta,
+    behavior: "smooth"
+  });
+}
 function formatDuration2(ms) {
   const totalSeconds = Math.round(ms / 1e3);
   if (totalSeconds < 90) {
@@ -1045,13 +1061,10 @@ var MediaEditor = React6.forwardRef(
     }, [activeWordIndex]);
     React6.useEffect(() => {
       if (activeWordIndex === null) return;
-      const el = contentRef.current?.querySelector(
-        `[data-word-index="${activeWordIndex}"]`
-      );
-      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      scrollWordIntoTranscript(contentRef.current, activeWordIndex);
     }, [activeWordIndex]);
     React6.useEffect(() => {
-      contentRef.current?.focus();
+      contentRef.current?.focus({ preventScroll: true });
     }, [transcript]);
     React6.useEffect(() => {
       const player = playerRef.current;
@@ -1575,10 +1588,7 @@ var MediaEditor = React6.forwardRef(
             setSelection(null);
             setSelectionAnchor(null);
           }
-          const wordElement = contentRef.current?.querySelector(
-            `[data-word-index="${newIndex}"]`
-          );
-          wordElement?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+          scrollWordIntoTranscript(contentRef.current, newIndex);
         }
       },
       [
@@ -1692,7 +1702,7 @@ var MediaEditor = React6.forwardRef(
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: `border-border bg-background min-h-0 shrink-0 ${splitLayout === "vertical" ? "md:w-1/2 md:border-r" : "max-h-[50%] border-b"}`,
+                    className: `border-border bg-background flex min-h-0 shrink-0 ${splitLayout === "vertical" ? "max-h-[55dvh] md:max-h-none md:w-1/2 md:border-r" : "max-h-[55dvh] border-b md:max-h-[50%]"}`,
                     children: /* @__PURE__ */ jsx(
                       MediaPlayer,
                       {
@@ -1989,5 +1999,5 @@ var MediaEditor = React6.forwardRef(
 MediaEditor.displayName = "MediaEditor";
 
 export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal };
-//# sourceMappingURL=chunk-QNUPTRW7.js.map
-//# sourceMappingURL=chunk-QNUPTRW7.js.map
+//# sourceMappingURL=chunk-NGLI2MSM.js.map
+//# sourceMappingURL=chunk-NGLI2MSM.js.map