@djangocfg/ui-tools 2.1.91

package/dist/index.mjs

@@ -0,0 +1,4941 @@
+export { useLottie } from './chunk-YFRNE2IR.mjs';
+import { PlaygroundProvider, PrettyCode_default } from './chunk-M6P2FU7L.mjs';
+export { JsonTree_default as JsonTree, PrettyCode_default as PrettyCode } from './chunk-M6P2FU7L.mjs';
+import { __name, __require } from './chunk-37ZI6VD4.mjs';
+import React17, { lazy, forwardRef, useRef, useState, useMemo, useEffect, useCallback, useImperativeHandle, createContext, memo, Suspense, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import consola from 'consola';
+import { Loader2, RotateCcw, SkipBack, Pause, Play, SkipForward, VolumeX, Volume2, Repeat, ChevronDown, Plus, AlertCircle, Minimize, Maximize, FileVideo, RefreshCw, ZoomOut, ZoomIn, Maximize2, FlipHorizontal, FlipVertical, RotateCw, Expand, ImageIcon, Music } from 'lucide-react';
+import { Button, Slider, Label, Collapsible, CollapsibleTrigger, CollapsibleContent, Alert, AlertTitle, AlertDescription, Input, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch, DownloadButton, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, CopyButton } from '@djangocfg/ui-core/components';
+import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+import { createLogger, createMediaLogger, generateOgImageUrl, cn } from '@djangocfg/ui-core/lib';
+import { getUiOptions, getTemplate, getInputProps } from '@rjsf/utils';
+import '@vidstack/react/player/styles/base.css';
+import '@vidstack/react/player/styles/default/theme.css';
+import '@vidstack/react/player/styles/default/layouts/video.css';
+import { MediaPlayer, MediaProvider, Poster, useMediaStore, useMediaRemote } from '@vidstack/react';
+import { DefaultVideoLayout, defaultLayoutIcons } from '@vidstack/react/player/layouts/default';
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { useShallow } from 'zustand/react/shallow';
+import { Preloader, AspectRatio, cn as cn$1, Alert as Alert$1, AlertDescription as AlertDescription$1, Dialog, DialogContent, DialogTitle } from '@djangocfg/ui-core';
+import { useLocalStorage, useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { useControls, TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+var MermaidClient = lazy(() => import('./Mermaid.client-4TU2TSH3.mjs'));
+var LoadingFallback = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs("div", { className: "relative bg-card rounded-sm border border-border overflow-hidden", children: [
+  /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-border bg-muted/50", children: [
+    /* @__PURE__ */ jsx("h6", { className: "text-sm font-semibold text-foreground", children: "Diagram" }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Loading..." })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center min-h-[200px]", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }) }) })
+] }), "LoadingFallback");
+var Mermaid = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback, {}), children: /* @__PURE__ */ jsx(MermaidClient, { ...props }) });
+}, "Mermaid");
+var Mermaid_default = Mermaid;
+var LottiePlayerClient = lazy(
+  () => import('./LottiePlayer.client-LBEC2JKY.mjs').then((mod) => ({ default: mod.LottiePlayer }))
+);
+var LoadingFallback2 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" }),
+  /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading player..." })
+] }) }), "LoadingFallback");
+function LottiePlayer(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback2, {}), children: /* @__PURE__ */ jsx(LottiePlayerClient, { ...props }) });
+}
+__name(LottiePlayer, "LottiePlayer");
+function FieldTemplate(props) {
+  const {
+    id,
+    classNames,
+    style,
+    label,
+    help,
+    required,
+    description,
+    errors,
+    children,
+    displayLabel,
+    hidden,
+    rawErrors
+  } = props;
+  if (hidden) {
+    return /* @__PURE__ */ jsx("div", { className: "hidden", children });
+  }
+  const hasError = rawErrors && rawErrors.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("space-y-2", classNames),
+      style,
+      children: [
+        displayLabel && label && /* @__PURE__ */ jsxs(Label, { htmlFor: id, className: cn(hasError && "text-destructive"), children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsx("div", { children }),
+        errors && /* @__PURE__ */ jsx("div", { className: "text-sm text-destructive", children: errors }),
+        help && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: help })
+      ]
+    }
+  );
+}
+__name(FieldTemplate, "FieldTemplate");
+function ObjectFieldTemplate(props) {
+  const {
+    title,
+    description,
+    properties,
+    required,
+    uiSchema
+  } = props;
+  const isCollapsible = uiSchema?.["ui:collapsible"] === true;
+  const defaultCollapsed = uiSchema?.["ui:collapsed"] === true;
+  const gridCols = uiSchema?.["ui:grid"];
+  const className = uiSchema?.["ui:className"];
+  const [isOpen, setIsOpen] = useState(!defaultCollapsed);
+  const isRoot = !title;
+  const gridClass = gridCols ? `grid gap-4 grid-cols-${gridCols}` : "space-y-4";
+  const content = /* @__PURE__ */ jsx("div", { className: cn(gridClass, className), children: properties.map((element) => /* @__PURE__ */ jsx("div", { className: "property-wrapper", children: element.content }, element.name)) });
+  if (isRoot) {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: content });
+  }
+  if (isCollapsible) {
+    return /* @__PURE__ */ jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex w-full items-center justify-between rounded-lg border bg-muted/50 px-4 py-3 text-left hover:bg-muted transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold", children: [
+            title,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "h-4 w-4 text-muted-foreground transition-transform duration-200",
+              isOpen && "rotate-180"
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(CollapsibleContent, { className: "pl-1 pr-1 pt-2", children: content })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    title && /* @__PURE__ */ jsxs("div", { className: "border-b pb-2", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold", children: [
+        title,
+        required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: description })
+    ] }),
+    content
+  ] });
+}
+__name(ObjectFieldTemplate, "ObjectFieldTemplate");
+function ArrayFieldTemplate(props) {
+  const {
+    title,
+    items,
+    canAdd,
+    onAddClick,
+    required
+  } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold", children: [
+        title,
+        required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      canAdd && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: onAddClick,
+          className: "gap-2",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            "Add Item"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: items }),
+    items.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground border-2 border-dashed rounded-md", children: [
+      "No items added yet.",
+      canAdd && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: onAddClick,
+          className: "mt-2 gap-2",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            "Add First Item"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+__name(ArrayFieldTemplate, "ArrayFieldTemplate");
+function ArrayFieldItemTemplate(props) {
+  const {
+    children,
+    className,
+    buttonsProps,
+    hasToolbar,
+    registry,
+    uiSchema
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate(
+    "ArrayFieldItemButtonsTemplate",
+    registry,
+    uiOptions
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-2 items-start p-4 rounded-md border bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+        hasToolbar && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
+      ]
+    }
+  );
+}
+__name(ArrayFieldItemTemplate, "ArrayFieldItemTemplate");
+function ErrorListTemplate(props) {
+  const { errors } = props;
+  if (!errors || errors.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "mb-6", children: [
+    /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx(AlertTitle, { children: "Validation Errors" }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1 mt-2", children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { className: "text-sm", children: error.stack }, index)) }) })
+  ] });
+}
+__name(ErrorListTemplate, "ErrorListTemplate");
+function BaseInputTemplate(props) {
+  const {
+    id,
+    type,
+    value,
+    readonly,
+    disabled,
+    autofocus,
+    onBlur,
+    onFocus,
+    onChange,
+    options,
+    schema,
+    rawErrors,
+    placeholder
+  } = props;
+  const inputProps = useMemo(() => {
+    return getInputProps(schema, type, options);
+  }, [schema, type, options]);
+  const safeValue = useMemo(() => {
+    if (value === null || value === void 0) return "";
+    return String(value);
+  }, [value]);
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+  const handleChange = useCallback((event) => {
+    const val = event.target.value;
+    if (val === "") {
+      onChange(options?.emptyValue ?? "");
+      return;
+    }
+    if (inputProps.type === "number" || schema.type === "number" || schema.type === "integer") {
+      const num = Number(val);
+      onChange(isNaN(num) ? val : num);
+      return;
+    }
+    onChange(val);
+  }, [onChange, inputProps.type, schema.type, options?.emptyValue]);
+  const handleBlur = useCallback((event) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+  const handleFocus = useCallback((event) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+  const inputType = useMemo(() => {
+    if (inputProps.type) return inputProps.type;
+    if (schema.type === "number" || schema.type === "integer") return "number";
+    return "text";
+  }, [inputProps.type, schema.type]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: inputType,
+      value: safeValue,
+      disabled,
+      readOnly: readonly,
+      autoFocus: autofocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      placeholder,
+      className: hasError ? "border-destructive" : "",
+      step: inputProps.step,
+      min: inputProps.min,
+      max: inputProps.max
+    }
+  );
+}
+__name(BaseInputTemplate, "BaseInputTemplate");
+function validateSchema(schema) {
+  if (!schema || typeof schema !== "object") {
+    {
+      consola.error("[JsonSchemaForm] Invalid schema: must be an object", schema);
+    }
+    return null;
+  }
+  const hasValidStructure = schema.type || schema.properties || schema.$ref || schema.$schema;
+  if (!hasValidStructure) {
+    {
+      consola.error("[JsonSchemaForm] Invalid schema: missing type, properties, $ref, or $schema", schema);
+    }
+    return null;
+  }
+  {
+    consola.success("[JsonSchemaForm] Schema validated successfully:", {
+      type: schema.type,
+      title: schema.title,
+      hasProperties: !!schema.properties,
+      hasRequired: !!schema.required
+    });
+  }
+  return schema;
+}
+__name(validateSchema, "validateSchema");
+function normalizeFormData(formData, schema) {
+  if (formData === null || formData === void 0) {
+    return schema.type === "object" ? {} : schema.type === "array" ? [] : null;
+  }
+  const normalized = JSON.parse(JSON.stringify(formData));
+  return removeUndefined(normalized);
+}
+__name(normalizeFormData, "normalizeFormData");
+function removeUndefined(obj) {
+  if (obj === null || obj === void 0) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(removeUndefined).filter((item) => item !== void 0);
+  }
+  if (typeof obj === "object") {
+    const cleaned = {};
+    for (const key in obj) {
+      if (obj[key] !== void 0) {
+        cleaned[key] = removeUndefined(obj[key]);
+      }
+    }
+    return cleaned;
+  }
+  return obj;
+}
+__name(removeUndefined, "removeUndefined");
+function mergeDefaults(formData, schema) {
+  if (!schema) return formData;
+  const result = { ...formData };
+  if (schema.type === "object" && schema.properties) {
+    for (const [key, propSchema] of Object.entries(schema.properties)) {
+      const prop = propSchema;
+      if (result[key] === void 0 && prop.default !== void 0) {
+        result[key] = prop.default;
+      }
+      if (prop.type === "object" && result[key]) {
+        result[key] = mergeDefaults(result[key], prop);
+      }
+    }
+  }
+  return result;
+}
+__name(mergeDefaults, "mergeDefaults");
+function safeJsonParse(jsonString, fallback) {
+  try {
+    return JSON.parse(jsonString);
+  } catch (error) {
+    consola.error("[JsonSchemaForm] JSON parse error:", error);
+    return fallback;
+  }
+}
+__name(safeJsonParse, "safeJsonParse");
+function safeJsonStringify(obj, pretty = true) {
+  try {
+    return JSON.stringify(obj, null, pretty ? 2 : 0);
+  } catch (error) {
+    consola.error("[JsonSchemaForm] JSON stringify error:", error);
+    return "{}";
+  }
+}
+__name(safeJsonStringify, "safeJsonStringify");
+function hasRequiredFields(schema) {
+  return Array.isArray(schema.required) && schema.required.length > 0;
+}
+__name(hasRequiredFields, "hasRequiredFields");
+function getRequiredFields(schema, prefix = "") {
+  const required = [];
+  if (schema.required && Array.isArray(schema.required)) {
+    required.push(...schema.required.map(
+      (field) => prefix ? `${prefix}.${field}` : field
+    ));
+  }
+  if (schema.type === "object" && schema.properties) {
+    for (const [key, propSchema] of Object.entries(schema.properties)) {
+      const prop = propSchema;
+      const fieldPath = prefix ? `${prefix}.${key}` : key;
+      required.push(...getRequiredFields(prop, fieldPath));
+    }
+  }
+  return required;
+}
+__name(getRequiredFields, "getRequiredFields");
+function validateRequiredFields(formData, schema) {
+  const requiredFields = getRequiredFields(schema);
+  const missing = [];
+  for (const field of requiredFields) {
+    const value = getNestedValue(formData, field);
+    if (value === void 0 || value === null || value === "") {
+      missing.push(field);
+    }
+  }
+  return {
+    valid: missing.length === 0,
+    missing
+  };
+}
+__name(validateRequiredFields, "validateRequiredFields");
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+__name(getNestedValue, "getNestedValue");
+function TextWidget(props) {
+  const {
+    id,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    rawErrors
+  } = props;
+  const config = useMemo(() => ({
+    isTextarea: options?.widget === "textarea",
+    rows: options?.rows || 3,
+    emptyValue: options?.emptyValue
+  }), [options]);
+  const safeValue = useMemo(() => {
+    if (value === null || value === void 0) return "";
+    return String(value);
+  }, [value]);
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+  const handleChange = useCallback((event) => {
+    const newValue = event.target.value;
+    onChange(newValue === "" ? config.emptyValue : newValue);
+  }, [onChange, config.emptyValue]);
+  const handleBlur = useCallback((event) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+  const handleFocus = useCallback((event) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+  if (config.isTextarea) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id,
+        className: `flex min-h-[80px] w-full rounded-md border ${hasError ? "border-destructive" : "border-input"} bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`,
+        placeholder,
+        disabled: disabled || readonly,
+        readOnly: readonly,
+        autoFocus: autofocus,
+        value: safeValue,
+        required,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        rows: config.rows
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: "text",
+      placeholder,
+      disabled,
+      readOnly: readonly,
+      autoFocus: autofocus,
+      value: safeValue,
+      required,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      className: hasError ? "border-destructive" : ""
+    }
+  );
+}
+__name(TextWidget, "TextWidget");
+function NumberWidget(props) {
+  const {
+    id,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    rawErrors
+  } = props;
+  const config = useMemo(() => ({
+    isInteger: schema.type === "integer",
+    step: schema.type === "integer" ? "1" : "any",
+    min: schema.minimum,
+    max: schema.maximum,
+    emptyValue: options?.emptyValue
+  }), [schema, options]);
+  const safeValue = useMemo(() => {
+    if (value === null || value === void 0 || value === "") return "";
+    if (typeof value === "number" && !isNaN(value)) return value;
+    return "";
+  }, [value]);
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+  const handleChange = useCallback((event) => {
+    const newValue = event.target.value;
+    if (newValue === "") {
+      onChange(config.emptyValue);
+    } else {
+      const parsedValue = config.isInteger ? parseInt(newValue, 10) : parseFloat(newValue);
+      onChange(isNaN(parsedValue) ? config.emptyValue : parsedValue);
+    }
+  }, [onChange, config]);
+  const handleBlur = useCallback((event) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+  const handleFocus = useCallback((event) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: "number",
+      placeholder,
+      disabled,
+      readOnly: readonly,
+      autoFocus: autofocus,
+      value: safeValue,
+      required,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      step: config.step,
+      min: config.min,
+      max: config.max,
+      className: hasError ? "border-destructive" : ""
+    }
+  );
+}
+__name(NumberWidget, "NumberWidget");
+function CheckboxWidget(props) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus
+  } = props;
+  const handleChange = /* @__PURE__ */ __name((checked) => {
+    onChange(checked);
+  }, "handleChange");
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      id,
+      checked: value || false,
+      disabled: disabled || readonly,
+      autoFocus: autofocus,
+      onCheckedChange: handleChange,
+      onBlur: () => onBlur(id, value),
+      onFocus: () => onFocus(id, value)
+    }
+  );
+}
+__name(CheckboxWidget, "CheckboxWidget");
+function SelectWidget(props) {
+  const {
+    id,
+    options,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    placeholder,
+    rawErrors
+  } = props;
+  const enumOptions = useMemo(() => {
+    const opts = options?.enumOptions;
+    if (!Array.isArray(opts)) return [];
+    return opts.filter((opt) => opt && opt.value !== void 0);
+  }, [options]);
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+  const safeValue = useMemo(() => {
+    if (value === null || value === void 0) return "";
+    return String(value);
+  }, [value]);
+  const handleChange = useCallback((newValue) => {
+    onChange(newValue);
+    onBlur(id, newValue);
+  }, [onChange, onBlur, id]);
+  if (enumOptions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "text",
+        value: safeValue,
+        onChange: (e) => onChange(e.target.value),
+        onBlur: (e) => onBlur(id, e.target.value),
+        onFocus: (e) => onFocus(id, e.target.value),
+        disabled: disabled || readonly,
+        readOnly: readonly,
+        className: `flex h-10 w-full rounded-md border ${hasError ? "border-destructive" : "border-input"} bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`,
+        placeholder
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: safeValue,
+      onValueChange: handleChange,
+      disabled: disabled || readonly,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            id,
+            className: hasError ? "border-destructive" : "",
+            autoFocus: autofocus,
+            onFocus: () => onFocus(id, value),
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder || "Select an option" })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { children: enumOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), children: option.label || String(option.value) }, String(option.value))) })
+      ]
+    }
+  );
+}
+__name(SelectWidget, "SelectWidget");
+function SwitchWidget(props) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus
+  } = props;
+  const handleChange = /* @__PURE__ */ __name((checked) => {
+    onChange(checked);
+  }, "handleChange");
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      id,
+      checked: value || false,
+      disabled: disabled || readonly,
+      onCheckedChange: handleChange,
+      onBlur: () => onBlur(id, value),
+      onFocus: () => onFocus(id, value)
+    }
+  );
+}
+__name(SwitchWidget, "SwitchWidget");
+function ColorWidget(props) {
+  const {
+    id,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    rawErrors
+  } = props;
+  const colorInputRef = useRef(null);
+  const format = useMemo(() => {
+    if (options?.format) return options.format;
+    if (typeof value === "string" && value.startsWith("#")) return "hex";
+    return "hsl";
+  }, [options?.format, value]);
+  const safeValue = useMemo(() => {
+    if (value === null || value === void 0) return "";
+    return String(value);
+  }, [value]);
+  const hslToCss = useCallback((hslValue) => {
+    if (!hslValue) return "transparent";
+    if (hslValue.startsWith("#")) return hslValue;
+    if (hslValue.startsWith("hsl")) return hslValue;
+    const parts = hslValue.split(" ");
+    if (parts.length === 3) {
+      return `hsl(${parts[0]}, ${parts[1]}, ${parts[2]})`;
+    }
+    return "transparent";
+  }, []);
+  const previewColor = useMemo(() => {
+    return hslToCss(safeValue);
+  }, [safeValue, hslToCss]);
+  const hexToHsl = useCallback((hex) => {
+    hex = hex.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  }, []);
+  const hslToHex = useCallback((hslValue) => {
+    if (!hslValue || hslValue.startsWith("#")) return hslValue || "#000000";
+    const parts = hslValue.split(" ");
+    if (parts.length !== 3) return "#000000";
+    const h = parseInt(parts[0]) / 360;
+    const s = parseInt(parts[1].replace("%", "")) / 100;
+    const l = parseInt(parts[2].replace("%", "")) / 100;
+    const hue2rgb = /* @__PURE__ */ __name((p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    }, "hue2rgb");
+    let r, g, b;
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+    const toHex = /* @__PURE__ */ __name((x) => {
+      const hex = Math.round(x * 255).toString(16);
+      return hex.length === 1 ? "0" + hex : hex;
+    }, "toHex");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }, []);
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+  const handleChange = useCallback((event) => {
+    const newValue = event.target.value;
+    onChange(newValue);
+  }, [onChange]);
+  const handleColorPickerChange = useCallback((event) => {
+    const hexValue2 = event.target.value;
+    if (format === "hsl") {
+      onChange(hexToHsl(hexValue2));
+    } else {
+      onChange(hexValue2);
+    }
+  }, [onChange, format, hexToHsl]);
+  const handleBlur = useCallback((event) => {
+    onBlur(id, event.target.value);
+  }, [id, onBlur]);
+  const handleFocus = useCallback((event) => {
+    onFocus(id, event.target.value);
+  }, [id, onFocus]);
+  const hexValue = useMemo(() => {
+    if (format === "hex" || safeValue.startsWith("#")) {
+      return safeValue || "#000000";
+    }
+    return hslToHex(safeValue);
+  }, [safeValue, format, hslToHex]);
+  const handleColorBoxClick = useCallback(() => {
+    if (!disabled && !readonly) {
+      colorInputRef.current?.click();
+    }
+  }, [disabled, readonly]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleColorBoxClick,
+          disabled: disabled || readonly,
+          className: "h-10 w-10 shrink-0 rounded-md border-2 border-input cursor-pointer hover:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          style: { backgroundColor: previewColor },
+          "aria-label": "Pick color"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: colorInputRef,
+          type: "color",
+          value: hexValue,
+          onChange: handleColorPickerChange,
+          className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer",
+          disabled: disabled || readonly,
+          tabIndex: -1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        type: "text",
+        placeholder: placeholder || (format === "hsl" ? "217 91% 60%" : "#3b82f6"),
+        disabled,
+        readOnly: readonly,
+        autoFocus: autofocus,
+        value: safeValue,
+        required,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        className: `flex-1 font-mono text-sm ${hasError ? "border-destructive" : ""}`
+      }
+    )
+  ] });
+}
+__name(ColorWidget, "ColorWidget");
+function SliderWidget(props) {
+  const {
+    id,
+    disabled,
+    readonly,
+    value,
+    onChange,
+    schema,
+    options,
+    rawErrors
+  } = props;
+  const config = useMemo(() => {
+    const min = schema.minimum ?? options?.min ?? 0;
+    const max = schema.maximum ?? options?.max ?? 100;
+    const step = options?.step ?? (schema.type === "integer" ? 1 : 0.1);
+    const unit = options?.unit;
+    const showInput = options?.showInput !== false;
+    return { min, max, step, unit, showInput };
+  }, [schema, options]);
+  const numericValue = useMemo(() => {
+    if (value === null || value === void 0 || value === "") {
+      return config.min;
+    }
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string") {
+      const parsed = parseFloat(value);
+      return isNaN(parsed) ? config.min : parsed;
+    }
+    return config.min;
+  }, [value, config.min]);
+  const hasError = useMemo(() => {
+    return rawErrors && rawErrors.length > 0;
+  }, [rawErrors]);
+  const handleSliderChange = useCallback((values) => {
+    const newValue = values[0];
+    if (config.unit) {
+      onChange(`${newValue}${config.unit}`);
+    } else {
+      onChange(newValue);
+    }
+  }, [onChange, config.unit]);
+  const handleInputChange = useCallback((event) => {
+    const inputValue = event.target.value;
+    if (config.unit) {
+      const cleanValue = inputValue.replace(config.unit, "").trim();
+      const parsed = parseFloat(cleanValue);
+      if (!isNaN(parsed)) {
+        onChange(`${parsed}${config.unit}`);
+      } else if (inputValue === "") {
+        onChange(`${config.min}${config.unit}`);
+      }
+    } else {
+      const parsed = parseFloat(inputValue);
+      onChange(isNaN(parsed) ? config.min : parsed);
+    }
+  }, [onChange, config.unit, config.min]);
+  const displayValue = useMemo(() => {
+    if (config.unit) {
+      return `${numericValue}${config.unit}`;
+    }
+    return String(numericValue);
+  }, [numericValue, config.unit]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", hasError && "text-destructive"), children: [
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        id,
+        disabled: disabled || readonly,
+        value: [numericValue],
+        onValueChange: handleSliderChange,
+        min: config.min,
+        max: config.max,
+        step: config.step,
+        className: "flex-1"
+      }
+    ),
+    config.showInput ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        value: displayValue,
+        onChange: handleInputChange,
+        disabled,
+        readOnly: readonly,
+        className: cn(
+          "w-20 text-center font-mono text-sm",
+          hasError && "border-destructive"
+        )
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "w-16 text-right font-mono text-sm text-muted-foreground", children: displayValue })
+  ] });
+}
+__name(SliderWidget, "SliderWidget");
+function JsonSchemaForm(props) {
+  const {
+    schema,
+    uiSchema,
+    formData,
+    onSubmit,
+    onChange,
+    onError,
+    showErrorList = "top",
+    liveValidate = false,
+    disabled = false,
+    readonly = false,
+    className,
+    showSubmitButton = true,
+    submitButtonText = "Submit",
+    ...restProps
+  } = props;
+  const validatedSchema = useMemo(() => {
+    {
+      consola.info("[JsonSchemaForm] Validating schema...", schema);
+    }
+    const result = validateSchema(schema);
+    if (!result && true) {
+      consola.error("[JsonSchemaForm] Schema validation failed");
+    }
+    return result;
+  }, [schema]);
+  const normalizedFormData = useMemo(() => {
+    if (!validatedSchema) {
+      {
+        consola.warn("[JsonSchemaForm] Cannot normalize formData - invalid schema");
+      }
+      return null;
+    }
+    {
+      consola.info("[JsonSchemaForm] Normalizing formData...", formData);
+    }
+    const normalized = normalizeFormData(formData, validatedSchema);
+    {
+      consola.info("[JsonSchemaForm] Normalized formData:", normalized);
+    }
+    return normalized;
+  }, [formData, validatedSchema]);
+  const widgets = useMemo(() => ({
+    // Standard widget names (PascalCase) - used by RJSF internally
+    TextWidget,
+    NumberWidget,
+    CheckboxWidget,
+    SelectWidget,
+    SwitchWidget,
+    ColorWidget,
+    SliderWidget,
+    // Lowercase aliases - for uiSchema 'ui:widget' references
+    text: TextWidget,
+    number: NumberWidget,
+    checkbox: CheckboxWidget,
+    select: SelectWidget,
+    switch: SwitchWidget,
+    color: ColorWidget,
+    slider: SliderWidget,
+    range: SliderWidget
+    // alias
+  }), []);
+  const templates = useMemo(() => ({
+    FieldTemplate,
+    ObjectFieldTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldItemTemplate,
+    ErrorListTemplate,
+    BaseInputTemplate
+  }), []);
+  const handleSubmit = useCallback((data) => {
+    if (onSubmit) {
+      const cleanData = {
+        ...data,
+        formData: normalizeFormData(data.formData, validatedSchema)
+      };
+      onSubmit(cleanData);
+    }
+  }, [onSubmit, validatedSchema]);
+  const handleChange = useCallback((data) => {
+    if (onChange) {
+      onChange(data);
+    }
+  }, [onChange]);
+  const handleError = useCallback((errors) => {
+    if (onError) {
+      onError(errors);
+    }
+  }, [onError]);
+  if (!validatedSchema) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: "Invalid schema provided. Please check the schema format." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    Form,
+    {
+      schema: validatedSchema,
+      uiSchema,
+      formData: normalizedFormData,
+      validator,
+      widgets,
+      templates,
+      onSubmit: handleSubmit,
+      onChange: handleChange,
+      onError: handleError,
+      showErrorList,
+      liveValidate,
+      disabled,
+      readonly,
+      ...restProps,
+      children: showSubmitButton && /* @__PURE__ */ jsx("div", { className: "mt-6 flex gap-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled, children: submitButtonText }) })
+    }
+  ) });
+}
+__name(JsonSchemaForm, "JsonSchemaForm");
+var PlaygroundLayout = lazy(
+  () => import('./PlaygroundLayout-4DYBORAS.mjs').then((mod) => ({ default: mod.PlaygroundLayout }))
+);
+var LoadingFallback3 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
+var Playground = /* @__PURE__ */ __name(({ config }) => {
+  return /* @__PURE__ */ jsx(PlaygroundProvider, { config, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback3, {}), children: /* @__PURE__ */ jsx(PlaygroundLayout, {}) }) });
+}, "Playground");
+var OpenapiViewer_default = Playground;
+var cacheDebug = createLogger("MediaCache");
+var STREAM_URL_TTL = 30 * 1e3;
+var DEFAULT_VIDEO_SETTINGS = {
+  volume: 1,
+  isLooping: false
+};
+var initialState = {
+  blobUrls: /* @__PURE__ */ new Map(),
+  imageDimensions: /* @__PURE__ */ new Map(),
+  audioPlaybackPositions: /* @__PURE__ */ new Map(),
+  audioEffectConfigs: /* @__PURE__ */ new Map(),
+  videoStreamUrls: /* @__PURE__ */ new Map(),
+  videoPosterUrls: /* @__PURE__ */ new Map(),
+  videoPlaybackPositions: /* @__PURE__ */ new Map(),
+  videoMetadata: /* @__PURE__ */ new Map(),
+  videoPlayerSettings: DEFAULT_VIDEO_SETTINGS
+};
+var useMediaCacheStore = create()(
+  devtools(
+    persist(
+      (set, get) => ({
+        ...initialState,
+        // ========== Blob URL Management ==========
+        getOrCreateBlobUrl: /* @__PURE__ */ __name((key, content, mimeType) => {
+          const existing = get().blobUrls.get(key);
+          if (existing) {
+            cacheDebug.debug(`Blob URL reused: ${key}`, { refCount: existing.refCount + 1 });
+            set(
+              (state) => ({
+                blobUrls: new Map(state.blobUrls).set(key, {
+                  ...existing,
+                  refCount: existing.refCount + 1
+                })
+              }),
+              false,
+              "blobUrl/incrementRef"
+            );
+            return existing.url;
+          }
+          const blob = new Blob([content], { type: mimeType });
+          const url = URL.createObjectURL(blob);
+          const sizeMB = (content.byteLength / 1024 / 1024).toFixed(2);
+          cacheDebug.debug(`Blob URL created: ${key}`, { mimeType, size: `${sizeMB}MB` });
+          set(
+            (state) => ({
+              blobUrls: new Map(state.blobUrls).set(key, {
+                url,
+                refCount: 1,
+                createdAt: Date.now()
+              })
+            }),
+            false,
+            "blobUrl/create"
+          );
+          return url;
+        }, "getOrCreateBlobUrl"),
+        releaseBlobUrl: /* @__PURE__ */ __name((key) => {
+          const entry = get().blobUrls.get(key);
+          if (!entry) return;
+          if (entry.refCount <= 1) {
+            cacheDebug.debug(`Blob URL revoked: ${key}`);
+            URL.revokeObjectURL(entry.url);
+            set(
+              (state) => {
+                const newMap = new Map(state.blobUrls);
+                newMap.delete(key);
+                return { blobUrls: newMap };
+              },
+              false,
+              "blobUrl/revoke"
+            );
+          } else {
+            cacheDebug.debug(`Blob URL released: ${key}`, { refCount: entry.refCount - 1 });
+            set(
+              (state) => ({
+                blobUrls: new Map(state.blobUrls).set(key, {
+                  ...entry,
+                  refCount: entry.refCount - 1
+                })
+              }),
+              false,
+              "blobUrl/decrementRef"
+            );
+          }
+        }, "releaseBlobUrl"),
+        hasBlobUrl: /* @__PURE__ */ __name((key) => get().blobUrls.has(key), "hasBlobUrl"),
+        // ========== Image Cache ==========
+        cacheDimensions: /* @__PURE__ */ __name((src, dims) => {
+          set(
+            (state) => ({
+              imageDimensions: new Map(state.imageDimensions).set(src, dims)
+            }),
+            false,
+            "image/cacheDimensions"
+          );
+        }, "cacheDimensions"),
+        getDimensions: /* @__PURE__ */ __name((src) => get().imageDimensions.get(src) ?? null, "getDimensions"),
+        // ========== Audio Cache ==========
+        saveAudioPosition: /* @__PURE__ */ __name((uri, time) => {
+          set(
+            (state) => ({
+              audioPlaybackPositions: new Map(state.audioPlaybackPositions).set(
+                uri,
+                time
+              )
+            }),
+            false,
+            "audio/savePosition"
+          );
+        }, "saveAudioPosition"),
+        getAudioPosition: /* @__PURE__ */ __name((uri) => get().audioPlaybackPositions.get(uri) ?? null, "getAudioPosition"),
+        getEffectConfig: /* @__PURE__ */ __name((key) => get().audioEffectConfigs.get(key) ?? null, "getEffectConfig"),
+        cacheEffectConfig: /* @__PURE__ */ __name((key, config) => {
+          set(
+            (state) => ({
+              audioEffectConfigs: new Map(state.audioEffectConfigs).set(
+                key,
+                config
+              )
+            }),
+            false,
+            "audio/cacheEffectConfig"
+          );
+        }, "cacheEffectConfig"),
+        // ========== Video Cache ==========
+        getOrCreateStreamUrl: /* @__PURE__ */ __name((sessionId, path, generator) => {
+          const key = `${sessionId}:${path}`;
+          const cached = get().videoStreamUrls.get(key);
+          if (cached && Date.now() - cached.timestamp < STREAM_URL_TTL) {
+            return cached.url;
+          }
+          const url = generator(sessionId, path);
+          set(
+            (state) => ({
+              videoStreamUrls: new Map(state.videoStreamUrls).set(key, {
+                url,
+                timestamp: Date.now()
+              })
+            }),
+            false,
+            "video/cacheStreamUrl"
+          );
+          return url;
+        }, "getOrCreateStreamUrl"),
+        getPosterUrl: /* @__PURE__ */ __name((title) => get().videoPosterUrls.get(title) ?? null, "getPosterUrl"),
+        cachePosterUrl: /* @__PURE__ */ __name((title, url) => {
+          set(
+            (state) => ({
+              videoPosterUrls: new Map(state.videoPosterUrls).set(title, url)
+            }),
+            false,
+            "video/cachePosterUrl"
+          );
+        }, "cachePosterUrl"),
+        saveVideoPosition: /* @__PURE__ */ __name((key, time) => {
+          set(
+            (state) => ({
+              videoPlaybackPositions: new Map(state.videoPlaybackPositions).set(
+                key,
+                time
+              )
+            }),
+            false,
+            "video/savePosition"
+          );
+        }, "saveVideoPosition"),
+        getVideoPosition: /* @__PURE__ */ __name((key) => get().videoPlaybackPositions.get(key) ?? null, "getVideoPosition"),
+        cacheVideoMetadata: /* @__PURE__ */ __name((url, meta) => {
+          set(
+            (state) => ({
+              videoMetadata: new Map(state.videoMetadata).set(url, meta)
+            }),
+            false,
+            "video/cacheMetadata"
+          );
+        }, "cacheVideoMetadata"),
+        getVideoMetadata: /* @__PURE__ */ __name((url) => get().videoMetadata.get(url) ?? null, "getVideoMetadata"),
+        invalidateSession: /* @__PURE__ */ __name((sessionId) => {
+          set(
+            (state) => {
+              const newUrls = new Map(state.videoStreamUrls);
+              for (const [key] of newUrls) {
+                if (key.startsWith(`${sessionId}:`)) {
+                  newUrls.delete(key);
+                }
+              }
+              return { videoStreamUrls: newUrls };
+            },
+            false,
+            "video/invalidateSession"
+          );
+        }, "invalidateSession"),
+        getVideoPlayerSettings: /* @__PURE__ */ __name(() => get().videoPlayerSettings, "getVideoPlayerSettings"),
+        saveVideoPlayerSettings: /* @__PURE__ */ __name((settings) => {
+          set(
+            (state) => ({
+              videoPlayerSettings: { ...state.videoPlayerSettings, ...settings }
+            }),
+            false,
+            "video/savePlayerSettings"
+          );
+        }, "saveVideoPlayerSettings"),
+        // ========== Global ==========
+        clearCache: /* @__PURE__ */ __name(() => {
+          const stats = get().getCacheStats();
+          cacheDebug.info("Clearing cache", stats);
+          get().blobUrls.forEach(({ url }) => URL.revokeObjectURL(url));
+          set(initialState, false, "clearCache");
+        }, "clearCache"),
+        getCacheStats: /* @__PURE__ */ __name(() => ({
+          blobUrls: get().blobUrls.size,
+          dimensions: get().imageDimensions.size,
+          audioPositions: get().audioPlaybackPositions.size,
+          videoPositions: get().videoPlaybackPositions.size
+        }), "getCacheStats")
+      }),
+      {
+        name: "media-cache-storage",
+        // Only persist playback positions, poster URLs, and player settings
+        partialize: /* @__PURE__ */ __name((state) => ({
+          audioPlaybackPositions: Array.from(
+            state.audioPlaybackPositions.entries()
+          ),
+          videoPlaybackPositions: Array.from(
+            state.videoPlaybackPositions.entries()
+          ),
+          videoPosterUrls: Array.from(state.videoPosterUrls.entries()),
+          videoPlayerSettings: state.videoPlayerSettings
+        }), "partialize"),
+        // Rehydrate Maps from arrays
+        onRehydrateStorage: /* @__PURE__ */ __name(() => (state) => {
+          if (state) {
+            const persistedAudio = state.audioPlaybackPositions;
+            const persistedVideo = state.videoPlaybackPositions;
+            const persistedPosters = state.videoPosterUrls;
+            const persistedSettings = state.videoPlayerSettings;
+            state.audioPlaybackPositions = new Map(
+              Array.isArray(persistedAudio) ? persistedAudio : []
+            );
+            state.videoPlaybackPositions = new Map(
+              Array.isArray(persistedVideo) ? persistedVideo : []
+            );
+            state.videoPosterUrls = new Map(
+              Array.isArray(persistedPosters) ? persistedPosters : []
+            );
+            state.videoPlayerSettings = {
+              ...DEFAULT_VIDEO_SETTINGS,
+              ...persistedSettings && typeof persistedSettings === "object" ? persistedSettings : {}
+            };
+          }
+        }, "onRehydrateStorage")
+      }
+    ),
+    { name: "MediaCacheStore" }
+  )
+);
+var useImageCache = /* @__PURE__ */ __name(() => useMediaCacheStore(
+  useShallow((state) => ({
+    getOrCreateBlobUrl: state.getOrCreateBlobUrl,
+    releaseBlobUrl: state.releaseBlobUrl,
+    hasBlobUrl: state.hasBlobUrl,
+    cacheDimensions: state.cacheDimensions,
+    getDimensions: state.getDimensions
+  }))
+), "useImageCache");
+var useAudioCache = /* @__PURE__ */ __name(() => useMediaCacheStore(
+  useShallow((state) => ({
+    getOrCreateBlobUrl: state.getOrCreateBlobUrl,
+    releaseBlobUrl: state.releaseBlobUrl,
+    hasBlobUrl: state.hasBlobUrl,
+    saveAudioPosition: state.saveAudioPosition,
+    getAudioPosition: state.getAudioPosition,
+    getEffectConfig: state.getEffectConfig,
+    cacheEffectConfig: state.cacheEffectConfig
+  }))
+), "useAudioCache");
+var useVideoCache = /* @__PURE__ */ __name(() => useMediaCacheStore(
+  useShallow((state) => ({
+    getOrCreateBlobUrl: state.getOrCreateBlobUrl,
+    releaseBlobUrl: state.releaseBlobUrl,
+    hasBlobUrl: state.hasBlobUrl,
+    getOrCreateStreamUrl: state.getOrCreateStreamUrl,
+    getPosterUrl: state.getPosterUrl,
+    cachePosterUrl: state.cachePosterUrl,
+    saveVideoPosition: state.saveVideoPosition,
+    getVideoPosition: state.getVideoPosition,
+    cacheVideoMetadata: state.cacheVideoMetadata,
+    getVideoMetadata: state.getVideoMetadata,
+    invalidateSession: state.invalidateSession,
+    getVideoPlayerSettings: state.getVideoPlayerSettings,
+    saveVideoPlayerSettings: state.saveVideoPlayerSettings
+  }))
+), "useVideoCache");
+var useVideoPlayerSettings = /* @__PURE__ */ __name(() => useMediaCacheStore(
+  useShallow((state) => ({
+    settings: state.videoPlayerSettings,
+    saveSettings: state.saveVideoPlayerSettings
+  }))
+), "useVideoPlayerSettings");
+function useBlobUrlCleanup(key) {
+  const releaseBlobUrl = useMediaCacheStore((s) => s.releaseBlobUrl);
+  if (typeof window !== "undefined") {
+    const { useEffect: useEffect13 } = __require("react");
+    useEffect13(() => {
+      return () => {
+        if (key) {
+          releaseBlobUrl(key);
+        }
+      };
+    }, [key, releaseBlobUrl]);
+  }
+}
+__name(useBlobUrlCleanup, "useBlobUrlCleanup");
+function generateContentKey(content) {
+  const arr = new Uint8Array(content);
+  const len = arr.length;
+  const start = arr.slice(0, Math.min(1024, len));
+  const end = arr.slice(Math.max(0, len - 1024));
+  let hash = len;
+  for (let i = 0; i < start.length; i++) {
+    hash = (hash << 5) - hash + start[i] | 0;
+  }
+  for (let i = 0; i < end.length; i++) {
+    hash = (hash << 5) - hash + end[i] | 0;
+  }
+  return `blob-${len}-${hash.toString(16)}`;
+}
+__name(generateContentKey, "generateContentKey");
+var videoDebug = createMediaLogger("VideoPlayer");
+function getVidstackSrc(source) {
+  switch (source.type) {
+    case "youtube":
+      return `youtube/${source.id}`;
+    case "vimeo":
+      return `vimeo/${source.id}`;
+    case "hls":
+      return { src: source.url, type: "application/x-mpegurl" };
+    case "dash":
+      return { src: source.url, type: "application/dash+xml" };
+    case "url":
+      return source.url;
+    default:
+      return "";
+  }
+}
+__name(getVidstackSrc, "getVidstackSrc");
+function DefaultErrorFallback({ error }) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4 text-white bg-black", children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "w-16 h-16 text-muted-foreground",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-lg", children: error || "Video cannot be played" })
+  ] });
+}
+__name(DefaultErrorFallback, "DefaultErrorFallback");
+var VidstackProvider = forwardRef(
+  ({
+    source,
+    aspectRatio = 16 / 9,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    playsInline = true,
+    controls = true,
+    className,
+    showInfo = false,
+    theme = "default",
+    errorFallback,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate
+  }, ref) => {
+    const playerRef = useRef(null);
+    const [hasError, setHasError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState("Video cannot be played");
+    const lastSavedTimeRef = useRef(0);
+    const hasRestoredPositionRef = useRef(false);
+    const {
+      getPosterUrl,
+      cachePosterUrl,
+      saveVideoPosition,
+      getVideoPosition
+    } = useVideoCache();
+    const sourceKey = useMemo(() => {
+      switch (source.type) {
+        case "youtube":
+          return `youtube:${source.id}`;
+        case "vimeo":
+          return `vimeo:${source.id}`;
+        case "hls":
+        case "dash":
+        case "url":
+          return `url:${source.url}`;
+        default:
+          return null;
+      }
+    }, [source]);
+    const posterUrl = useMemo(() => {
+      if (source.poster) return source.poster;
+      if (!source.title) return void 0;
+      const cached = getPosterUrl(source.title);
+      if (cached) return cached;
+      const url = generateOgImageUrl({ title: source.title });
+      cachePosterUrl(source.title, url);
+      return url;
+    }, [source.poster, source.title, getPosterUrl, cachePosterUrl]);
+    const vidstackSrc = useMemo(() => getVidstackSrc(source), [source]);
+    useEffect(() => {
+      const srcString = typeof vidstackSrc === "string" ? vidstackSrc : vidstackSrc.src;
+      videoDebug.load(srcString, source.type);
+    }, [vidstackSrc, source.type]);
+    const retry = useCallback(() => {
+      setHasError(false);
+      setErrorMessage("Video cannot be played");
+      const player = playerRef.current;
+      if (player) {
+        player.currentTime = 0;
+        player.play();
+      }
+    }, []);
+    useImperativeHandle(
+      ref,
+      () => {
+        const player = playerRef.current;
+        return {
+          play: /* @__PURE__ */ __name(() => player?.play(), "play"),
+          pause: /* @__PURE__ */ __name(() => player?.pause(), "pause"),
+          togglePlay: /* @__PURE__ */ __name(() => {
+            if (player) {
+              player.paused ? player.play() : player.pause();
+            }
+          }, "togglePlay"),
+          seekTo: /* @__PURE__ */ __name((time) => {
+            if (player) player.currentTime = time;
+          }, "seekTo"),
+          setVolume: /* @__PURE__ */ __name((volume) => {
+            if (player) player.volume = Math.max(0, Math.min(1, volume));
+          }, "setVolume"),
+          toggleMute: /* @__PURE__ */ __name(() => {
+            if (player) player.muted = !player.muted;
+          }, "toggleMute"),
+          enterFullscreen: /* @__PURE__ */ __name(() => player?.enterFullscreen(), "enterFullscreen"),
+          exitFullscreen: /* @__PURE__ */ __name(() => player?.exitFullscreen(), "exitFullscreen"),
+          get currentTime() {
+            return player?.currentTime ?? 0;
+          },
+          get duration() {
+            return player?.duration ?? 0;
+          },
+          get paused() {
+            return player?.paused ?? true;
+          }
+        };
+      },
+      []
+    );
+    const handlePlay = /* @__PURE__ */ __name(() => onPlay?.(), "handlePlay");
+    const handlePause = useCallback(() => {
+      const player = playerRef.current;
+      if (sourceKey && player && player.currentTime > 0) {
+        saveVideoPosition(sourceKey, player.currentTime);
+        lastSavedTimeRef.current = player.currentTime;
+      }
+      onPause?.();
+    }, [sourceKey, saveVideoPosition, onPause]);
+    const handleEnded = /* @__PURE__ */ __name(() => onEnded?.(), "handleEnded");
+    const handleError = /* @__PURE__ */ __name((detail) => {
+      const error = detail;
+      const msg = error?.message || "Video playback error";
+      videoDebug.error("Vidstack error", { message: msg });
+      setHasError(true);
+      setErrorMessage(msg);
+      onError?.(msg);
+    }, "handleError");
+    const handleLoadStart = /* @__PURE__ */ __name(() => onLoadStart?.(), "handleLoadStart");
+    const handleCanPlay = useCallback(() => {
+      const player = playerRef.current;
+      if (player) {
+        videoDebug.state("canplay", { duration: player.duration });
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }
+      setHasError(false);
+      if (sourceKey && player && !hasRestoredPositionRef.current) {
+        const cachedPosition = getVideoPosition(sourceKey);
+        if (cachedPosition && cachedPosition > 0) {
+          const duration = player.duration;
+          if (cachedPosition < duration - 1) {
+            videoDebug.debug(`Restoring position: ${cachedPosition}s`);
+            player.currentTime = cachedPosition;
+          }
+        }
+        hasRestoredPositionRef.current = true;
+      }
+      onCanPlay?.();
+    }, [sourceKey, getVideoPosition, onCanPlay]);
+    const handleTimeUpdate = useCallback(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      if (sourceKey && player.currentTime > 0) {
+        const timeSinceLastSave = player.currentTime - lastSavedTimeRef.current;
+        if (timeSinceLastSave >= 5 || timeSinceLastSave < 0) {
+          saveVideoPosition(sourceKey, player.currentTime);
+          lastSavedTimeRef.current = player.currentTime;
+        }
+      }
+      onTimeUpdate?.(player.currentTime, player.duration);
+    }, [sourceKey, saveVideoPosition, onTimeUpdate]);
+    useEffect(() => {
+      hasRestoredPositionRef.current = false;
+      lastSavedTimeRef.current = 0;
+    }, [sourceKey]);
+    useEffect(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      const handleSeeking = /* @__PURE__ */ __name(() => {
+        videoDebug.event("seeking", { currentTime: player.currentTime });
+      }, "handleSeeking");
+      const handleSeeked = /* @__PURE__ */ __name(() => {
+        videoDebug.event("seeked", { currentTime: player.currentTime });
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }, "handleSeeked");
+      const handleWaiting = /* @__PURE__ */ __name(() => {
+        videoDebug.warn("WAITING - buffering...");
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }, "handleWaiting");
+      const handleStalled = /* @__PURE__ */ __name(() => {
+        videoDebug.warn("STALLED - network issue");
+        const mediaEl = player.provider?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }, "handleStalled");
+      player.addEventListener("seeking", handleSeeking);
+      player.addEventListener("seeked", handleSeeked);
+      player.addEventListener("waiting", handleWaiting);
+      player.addEventListener("stalled", handleStalled);
+      return () => {
+        player.removeEventListener("seeking", handleSeeking);
+        player.removeEventListener("seeked", handleSeeked);
+        player.removeEventListener("waiting", handleWaiting);
+        player.removeEventListener("stalled", handleStalled);
+      };
+    }, [vidstackSrc]);
+    const isFillMode = aspectRatio === "fill";
+    const computedAspectRatio = aspectRatio === "auto" || aspectRatio === "fill" ? void 0 : aspectRatio;
+    const renderErrorFallback = /* @__PURE__ */ __name(() => {
+      const fallbackProps = { error: errorMessage, retry };
+      if (typeof errorFallback === "function") {
+        return errorFallback(fallbackProps);
+      }
+      if (errorFallback) {
+        return errorFallback;
+      }
+      return /* @__PURE__ */ jsx(DefaultErrorFallback, { ...fallbackProps });
+    }, "renderErrorFallback");
+    const containerStyles = isFillMode ? { width: "100%", height: "100%" } : { aspectRatio: computedAspectRatio };
+    return /* @__PURE__ */ jsxs("div", { className: cn(isFillMode ? "w-full h-full" : "w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "relative w-full rounded-sm bg-black overflow-hidden",
+            isFillMode && "h-full",
+            theme === "minimal" && "rounded-none",
+            theme === "modern" && "rounded-xl shadow-2xl"
+          ),
+          style: containerStyles,
+          children: hasError ? renderErrorFallback() : /* @__PURE__ */ jsxs(
+            MediaPlayer,
+            {
+              ref: playerRef,
+              title: source.title || "Video",
+              src: vidstackSrc,
+              autoPlay,
+              muted,
+              loop,
+              playsInline,
+              onPlay: handlePlay,
+              onPause: handlePause,
+              onEnded: handleEnded,
+              onError: handleError,
+              onLoadStart: handleLoadStart,
+              onCanPlay: handleCanPlay,
+              onTimeUpdate: handleTimeUpdate,
+              className: "w-full h-full",
+              children: [
+                /* @__PURE__ */ jsx(MediaProvider, {}),
+                posterUrl && /* @__PURE__ */ jsx(
+                  Poster,
+                  {
+                    className: "vds-poster",
+                    src: posterUrl,
+                    alt: source.title || "Video poster",
+                    style: { objectFit: "cover" }
+                  }
+                ),
+                controls && /* @__PURE__ */ jsx(DefaultVideoLayout, { icons: defaultLayoutIcons, thumbnails: posterUrl })
+              ]
+            }
+          )
+        }
+      ),
+      showInfo && source.title && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-foreground", children: source.title }) })
+    ] });
+  }
+);
+VidstackProvider.displayName = "VidstackProvider";
+function useVideoPlayerSettings2() {
+  const { settings, saveSettings } = useVideoPlayerSettings();
+  const updateVolume = useCallback(
+    (volume) => {
+      saveSettings({ volume: Math.max(0, Math.min(1, volume)) });
+    },
+    [saveSettings]
+  );
+  const updateLoop = useCallback(
+    (isLooping) => {
+      saveSettings({ isLooping });
+    },
+    [saveSettings]
+  );
+  const updateSettings = useCallback(
+    (newSettings) => {
+      saveSettings(newSettings);
+    },
+    [saveSettings]
+  );
+  return {
+    settings,
+    updateVolume,
+    updateLoop,
+    updateSettings
+  };
+}
+__name(useVideoPlayerSettings2, "useVideoPlayerSettings");
+function getVideoUrl(source) {
+  switch (source.type) {
+    case "url":
+      return source.url;
+    case "data-url":
+      return source.data;
+    default:
+      return "";
+  }
+}
+__name(getVideoUrl, "getVideoUrl");
+var NativeProvider = forwardRef(
+  ({
+    source,
+    aspectRatio = 16 / 9,
+    autoPlay = true,
+    muted = true,
+    loop = true,
+    playsInline = true,
+    preload = "auto",
+    controls = false,
+    disableContextMenu = true,
+    showPreloader = true,
+    preloaderTimeout = 5e3,
+    className,
+    videoClassName,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate
+  }, ref) => {
+    const [isLoading, setIsLoading] = useState(showPreloader);
+    const videoRef = useRef(null);
+    const { settings: savedSettings, updateVolume } = useVideoPlayerSettings2();
+    const videoUrl = getVideoUrl(source);
+    useEffect(() => {
+      videoDebug.load(videoUrl, source.type);
+    }, [videoUrl, source.type]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: /* @__PURE__ */ __name(() => videoRef.current?.play(), "play"),
+        pause: /* @__PURE__ */ __name(() => videoRef.current?.pause(), "pause"),
+        togglePlay: /* @__PURE__ */ __name(() => {
+          const video = videoRef.current;
+          if (video) {
+            video.paused ? video.play() : video.pause();
+          }
+        }, "togglePlay"),
+        seekTo: /* @__PURE__ */ __name((time) => {
+          if (videoRef.current) videoRef.current.currentTime = time;
+        }, "seekTo"),
+        setVolume: /* @__PURE__ */ __name((volume) => {
+          if (videoRef.current) videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        }, "setVolume"),
+        toggleMute: /* @__PURE__ */ __name(() => {
+          if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
+        }, "toggleMute"),
+        enterFullscreen: /* @__PURE__ */ __name(() => videoRef.current?.requestFullscreen(), "enterFullscreen"),
+        exitFullscreen: /* @__PURE__ */ __name(() => document.exitFullscreen(), "exitFullscreen"),
+        get currentTime() {
+          return videoRef.current?.currentTime ?? 0;
+        },
+        get duration() {
+          return videoRef.current?.duration ?? 0;
+        },
+        get paused() {
+          return videoRef.current?.paused ?? true;
+        }
+      }),
+      []
+    );
+    useEffect(() => {
+      if (!showPreloader) return;
+      const video = videoRef.current;
+      if (!video) return;
+      if (video.readyState >= 3) {
+        setIsLoading(false);
+        return;
+      }
+      const hideLoader = /* @__PURE__ */ __name(() => setIsLoading(false), "hideLoader");
+      video.addEventListener("canplay", hideLoader);
+      video.addEventListener("loadeddata", hideLoader);
+      video.addEventListener("playing", hideLoader);
+      const timeout = setTimeout(hideLoader, preloaderTimeout);
+      return () => {
+        video.removeEventListener("canplay", hideLoader);
+        video.removeEventListener("loadeddata", hideLoader);
+        video.removeEventListener("playing", hideLoader);
+        clearTimeout(timeout);
+      };
+    }, [showPreloader, preloaderTimeout]);
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleLoadedMetadata = /* @__PURE__ */ __name(() => {
+        videoDebug.state("loadedmetadata", { duration: video.duration });
+      }, "handleLoadedMetadata");
+      const handleCanPlayDebug = /* @__PURE__ */ __name(() => {
+        videoDebug.state("canplay", { duration: video.duration, buffered: video.buffered.length });
+        videoDebug.buffer(video.buffered, video.duration);
+        video.volume = savedSettings.volume;
+      }, "handleCanPlayDebug");
+      const handleSeeking = /* @__PURE__ */ __name(() => {
+        videoDebug.event("seeking", { currentTime: video.currentTime });
+      }, "handleSeeking");
+      const handleSeeked = /* @__PURE__ */ __name(() => {
+        videoDebug.event("seeked", { currentTime: video.currentTime });
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleSeeked");
+      const handleWaiting = /* @__PURE__ */ __name(() => {
+        videoDebug.warn("WAITING - buffering...");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleWaiting");
+      const handleStalled = /* @__PURE__ */ __name(() => {
+        videoDebug.warn("STALLED - network issue");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleStalled");
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+      video.addEventListener("canplay", handleCanPlayDebug);
+      video.addEventListener("seeking", handleSeeking);
+      video.addEventListener("seeked", handleSeeked);
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("stalled", handleStalled);
+      return () => {
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        video.removeEventListener("canplay", handleCanPlayDebug);
+        video.removeEventListener("seeking", handleSeeking);
+        video.removeEventListener("seeked", handleSeeked);
+        video.removeEventListener("waiting", handleWaiting);
+        video.removeEventListener("stalled", handleStalled);
+      };
+    }, [savedSettings.volume]);
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleVolumeChange = /* @__PURE__ */ __name(() => {
+        updateVolume(video.volume);
+      }, "handleVolumeChange");
+      video.addEventListener("volumechange", handleVolumeChange);
+      return () => video.removeEventListener("volumechange", handleVolumeChange);
+    }, [updateVolume]);
+    const handleContextMenu = /* @__PURE__ */ __name((e) => {
+      if (disableContextMenu) {
+        e.preventDefault();
+      }
+    }, "handleContextMenu");
+    const handleError = /* @__PURE__ */ __name((e) => {
+      const video = e.currentTarget;
+      const errorMsg = video.error?.message || "Video playback error";
+      videoDebug.error("Video error", { code: video.error?.code, message: errorMsg });
+      setIsLoading(false);
+      onError?.(errorMsg);
+    }, "handleError");
+    const handleTimeUpdate = /* @__PURE__ */ __name(() => {
+      const video = videoRef.current;
+      if (video && onTimeUpdate) {
+        onTimeUpdate(video.currentTime, video.duration);
+      }
+    }, "handleTimeUpdate");
+    const isFillMode = aspectRatio === "fill";
+    const computedAspectRatio = aspectRatio === "auto" || aspectRatio === "fill" ? void 0 : aspectRatio;
+    const videoContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      showPreloader && isLoading && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute inset-0 flex items-center justify-center bg-muted/30 backdrop-blur-sm z-10"
+          ),
+          children: /* @__PURE__ */ jsx(Preloader, { size: "lg", spinnerClassName: "text-white" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          className: cn("w-full h-full object-cover", videoClassName),
+          src: videoUrl,
+          autoPlay,
+          muted,
+          loop,
+          playsInline,
+          preload,
+          controls,
+          poster: source.poster,
+          onContextMenu: handleContextMenu,
+          onLoadStart,
+          onCanPlay,
+          onPlay,
+          onPause,
+          onPlaying: () => setIsLoading(false),
+          onEnded,
+          onError: handleError,
+          onTimeUpdate: handleTimeUpdate
+        }
+      )
+    ] });
+    if (isFillMode) {
+      return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full overflow-hidden", className), children: videoContent });
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: computedAspectRatio, children: videoContent }) });
+  }
+);
+NativeProvider.displayName = "NativeProvider";
+function DefaultErrorFallback2({ error }) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4 text-white", children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "w-16 h-16 text-muted-foreground",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-lg", children: error || "Video cannot be previewed" })
+  ] });
+}
+__name(DefaultErrorFallback2, "DefaultErrorFallback");
+var StreamProvider = forwardRef(
+  ({
+    source,
+    aspectRatio = 16 / 9,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    playsInline = true,
+    preload = "metadata",
+    controls = true,
+    disableContextMenu = false,
+    showPreloader = true,
+    preloaderTimeout = 1e4,
+    className,
+    videoClassName,
+    errorFallback,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate,
+    onBufferProgress
+  }, ref) => {
+    const [videoUrl, setVideoUrl] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState("Video cannot be previewed");
+    const videoRef = useRef(null);
+    const contentKeyRef = useRef(null);
+    const lastSavedTimeRef = useRef(0);
+    const getOrCreateBlobUrl = useMediaCacheStore.getState().getOrCreateBlobUrl;
+    const releaseBlobUrl = useMediaCacheStore.getState().releaseBlobUrl;
+    const getOrCreateStreamUrl = useMediaCacheStore.getState().getOrCreateStreamUrl;
+    const saveVideoPosition = useMediaCacheStore.getState().saveVideoPosition;
+    const getVideoPosition = useMediaCacheStore.getState().getVideoPosition;
+    const { settings: savedSettings, updateVolume } = useVideoPlayerSettings2();
+    const retry = useCallback(() => {
+      setHasError(false);
+      setIsLoading(true);
+      if (source.type === "stream") {
+        const streamSource = source;
+        const freshUrl = streamSource.getStreamUrl(streamSource.sessionId, streamSource.path);
+        setVideoUrl(freshUrl);
+        return;
+      }
+      const video = videoRef.current;
+      if (video && videoUrl) {
+        video.load();
+      }
+    }, [source, videoUrl]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: /* @__PURE__ */ __name(() => videoRef.current?.play(), "play"),
+        pause: /* @__PURE__ */ __name(() => videoRef.current?.pause(), "pause"),
+        togglePlay: /* @__PURE__ */ __name(() => {
+          const video = videoRef.current;
+          if (video) {
+            video.paused ? video.play() : video.pause();
+          }
+        }, "togglePlay"),
+        seekTo: /* @__PURE__ */ __name((time) => {
+          if (videoRef.current) videoRef.current.currentTime = time;
+        }, "seekTo"),
+        setVolume: /* @__PURE__ */ __name((volume) => {
+          if (videoRef.current) videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        }, "setVolume"),
+        toggleMute: /* @__PURE__ */ __name(() => {
+          if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
+        }, "toggleMute"),
+        enterFullscreen: /* @__PURE__ */ __name(() => videoRef.current?.requestFullscreen(), "enterFullscreen"),
+        exitFullscreen: /* @__PURE__ */ __name(() => document.exitFullscreen(), "exitFullscreen"),
+        get currentTime() {
+          return videoRef.current?.currentTime ?? 0;
+        },
+        get duration() {
+          return videoRef.current?.duration ?? 0;
+        },
+        get paused() {
+          return videoRef.current?.paused ?? true;
+        }
+      }),
+      []
+    );
+    const isMountedRef = useRef(true);
+    useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+        if (contentKeyRef.current) {
+          useMediaCacheStore.getState().releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
+        }
+      };
+    }, []);
+    useEffect(() => {
+      if (contentKeyRef.current) {
+        const newKey = source.type === "blob" ? generateContentKey(source.data) : null;
+        if (newKey !== contentKeyRef.current) {
+          releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
+        }
+      }
+      setHasError(false);
+      setIsLoading(true);
+      switch (source.type) {
+        case "stream": {
+          const streamSource = source;
+          const url = getOrCreateStreamUrl(
+            streamSource.sessionId,
+            streamSource.path,
+            streamSource.getStreamUrl
+          );
+          videoDebug.load(url, "stream");
+          setVideoUrl(url);
+          break;
+        }
+        case "blob": {
+          const blobSource = source;
+          const contentKey = generateContentKey(blobSource.data);
+          contentKeyRef.current = contentKey;
+          const url = getOrCreateBlobUrl(
+            contentKey,
+            blobSource.data,
+            blobSource.mimeType || "video/mp4"
+          );
+          videoDebug.load(url, "blob");
+          setVideoUrl(url);
+          break;
+        }
+        case "data-url": {
+          const dataUrlSource = source;
+          videoDebug.load(dataUrlSource.data.slice(0, 50) + "...", "data-url");
+          setVideoUrl(dataUrlSource.data);
+          break;
+        }
+        default:
+          videoDebug.error("Invalid video source type", { type: source.type });
+          setVideoUrl(null);
+          setHasError(true);
+          setErrorMessage("Invalid video source");
+      }
+    }, [source]);
+    const getSourceKey = useCallback(() => {
+      switch (source.type) {
+        case "stream":
+          return `stream:${source.sessionId}:${source.path}`;
+        case "blob":
+          return contentKeyRef.current ? `blob:${contentKeyRef.current}` : null;
+        case "data-url":
+          return `data:${source.data.slice(0, 50)}`;
+        default:
+          return null;
+      }
+    }, [source]);
+    const handleCanPlay = useCallback(() => {
+      const video = videoRef.current;
+      if (video) {
+        videoDebug.state("canplay", { duration: video.duration, buffered: video.buffered.length });
+        videoDebug.buffer(video.buffered, video.duration);
+        video.volume = savedSettings.volume;
+      }
+      setIsLoading(false);
+      const sourceKey = getSourceKey();
+      if (sourceKey && video) {
+        const cachedPosition = getVideoPosition(sourceKey);
+        if (cachedPosition && cachedPosition > 0) {
+          const duration = video.duration;
+          if (cachedPosition < duration - 1) {
+            videoDebug.debug(`Restoring position: ${cachedPosition}s`);
+            video.currentTime = cachedPosition;
+          }
+        }
+      }
+      onCanPlay?.();
+    }, [getSourceKey, onCanPlay, savedSettings.volume]);
+    const handleTimeUpdate = useCallback(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const sourceKey = getSourceKey();
+      if (sourceKey && video.currentTime > 0) {
+        const timeSinceLastSave = video.currentTime - lastSavedTimeRef.current;
+        if (timeSinceLastSave >= 5 || timeSinceLastSave < 0) {
+          saveVideoPosition(sourceKey, video.currentTime);
+          lastSavedTimeRef.current = video.currentTime;
+        }
+      }
+      onTimeUpdate?.(video.currentTime, video.duration);
+    }, [getSourceKey, onTimeUpdate]);
+    const handlePause = useCallback(() => {
+      const video = videoRef.current;
+      const sourceKey = getSourceKey();
+      if (sourceKey && video && video.currentTime > 0) {
+        saveVideoPosition(sourceKey, video.currentTime);
+        lastSavedTimeRef.current = video.currentTime;
+      }
+      onPause?.();
+    }, [getSourceKey, onPause]);
+    const handleProgress = useCallback(() => {
+      const video = videoRef.current;
+      if (!video || !onBufferProgress) return;
+      if (video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+        const duration = video.duration;
+        if (duration > 0 && !isNaN(bufferedEnd)) {
+          onBufferProgress(bufferedEnd, duration);
+        }
+      }
+    }, [onBufferProgress]);
+    useEffect(() => {
+      if (!showPreloader || !isLoading) return;
+      const timeout = setTimeout(() => {
+        setIsLoading(false);
+      }, preloaderTimeout);
+      return () => clearTimeout(timeout);
+    }, [showPreloader, isLoading, preloaderTimeout]);
+    const handleContextMenu = /* @__PURE__ */ __name((e) => {
+      if (disableContextMenu) {
+        e.preventDefault();
+      }
+    }, "handleContextMenu");
+    const handleLoadedData = /* @__PURE__ */ __name(() => {
+      setIsLoading(false);
+    }, "handleLoadedData");
+    const handleError = /* @__PURE__ */ __name(() => {
+      const video = videoRef.current;
+      if (video) {
+        videoDebug.error("Video error", { code: video.error?.code, message: video.error?.message });
+      }
+      setIsLoading(false);
+      setHasError(true);
+      setErrorMessage("Failed to load video");
+      onError?.("Video playback error");
+    }, "handleError");
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleLoadedMetadata = /* @__PURE__ */ __name(() => {
+        videoDebug.state("loadedmetadata", { duration: video.duration });
+      }, "handleLoadedMetadata");
+      const handleSeeking = /* @__PURE__ */ __name(() => {
+        videoDebug.event("seeking", { currentTime: video.currentTime });
+      }, "handleSeeking");
+      const handleSeeked = /* @__PURE__ */ __name(() => {
+        videoDebug.event("seeked", { currentTime: video.currentTime });
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleSeeked");
+      const handleWaiting = /* @__PURE__ */ __name(() => {
+        videoDebug.warn("WAITING - buffering...");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleWaiting");
+      const handleStalled = /* @__PURE__ */ __name(() => {
+        videoDebug.warn("STALLED - network issue");
+        videoDebug.buffer(video.buffered, video.duration);
+      }, "handleStalled");
+      video.addEventListener("loadedmetadata", handleLoadedMetadata);
+      video.addEventListener("seeking", handleSeeking);
+      video.addEventListener("seeked", handleSeeked);
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("stalled", handleStalled);
+      return () => {
+        video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        video.removeEventListener("seeking", handleSeeking);
+        video.removeEventListener("seeked", handleSeeked);
+        video.removeEventListener("waiting", handleWaiting);
+        video.removeEventListener("stalled", handleStalled);
+      };
+    }, [videoUrl]);
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleVolumeChange = /* @__PURE__ */ __name(() => {
+        updateVolume(video.volume);
+      }, "handleVolumeChange");
+      video.addEventListener("volumechange", handleVolumeChange);
+      return () => video.removeEventListener("volumechange", handleVolumeChange);
+    }, [videoUrl, updateVolume]);
+    const isFillMode = aspectRatio === "fill";
+    const computedAspectRatio = aspectRatio === "auto" || aspectRatio === "fill" ? void 0 : aspectRatio;
+    const renderErrorFallback = /* @__PURE__ */ __name(() => {
+      const fallbackProps = { error: errorMessage, retry };
+      if (typeof errorFallback === "function") {
+        return errorFallback(fallbackProps);
+      }
+      if (errorFallback) {
+        return errorFallback;
+      }
+      return /* @__PURE__ */ jsx(DefaultErrorFallback2, { ...fallbackProps });
+    }, "renderErrorFallback");
+    if (!videoUrl || hasError) {
+      if (isFillMode) {
+        return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full overflow-hidden bg-black", className), children: renderErrorFallback() });
+      }
+      return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden bg-black", className), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: computedAspectRatio, children: renderErrorFallback() }) });
+    }
+    const videoContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      showPreloader && isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 z-10", children: /* @__PURE__ */ jsx(Preloader, { size: "lg", spinnerClassName: "text-white" }) }),
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          src: videoUrl,
+          className: cn(
+            "w-full h-full object-contain",
+            isLoading && "opacity-0",
+            videoClassName
+          ),
+          autoPlay,
+          muted,
+          loop,
+          playsInline,
+          preload,
+          controls,
+          crossOrigin: "anonymous",
+          poster: source.poster,
+          onContextMenu: handleContextMenu,
+          onLoadStart,
+          onCanPlay: handleCanPlay,
+          onLoadedData: handleLoadedData,
+          onPlay,
+          onPause: handlePause,
+          onEnded,
+          onError: handleError,
+          onTimeUpdate: handleTimeUpdate,
+          onProgress: handleProgress
+        }
+      )
+    ] });
+    if (isFillMode) {
+      return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full overflow-hidden bg-black", className), children: videoContent });
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden bg-black", className), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: computedAspectRatio, children: videoContent }) });
+  }
+);
+StreamProvider.displayName = "StreamProvider";
+var VideoPlayerContext = createContext(null);
+function VideoPlayerProvider({
+  children,
+  getStreamUrl,
+  sessionId
+}) {
+  const value = useMemo(
+    () => ({ getStreamUrl, sessionId }),
+    [getStreamUrl, sessionId]
+  );
+  return /* @__PURE__ */ jsx(VideoPlayerContext.Provider, { value, children });
+}
+__name(VideoPlayerProvider, "VideoPlayerProvider");
+function useVideoPlayerContext() {
+  return useContext(VideoPlayerContext);
+}
+__name(useVideoPlayerContext, "useVideoPlayerContext");
+
+// src/tools/VideoPlayer/utils/resolvers.ts
+function resolvePlayerMode(source, mode = "auto") {
+  if (mode !== "auto") {
+    return mode;
+  }
+  switch (source.type) {
+    case "youtube":
+    case "vimeo":
+    case "hls":
+    case "dash":
+      return "vidstack";
+    case "stream":
+    case "blob":
+      return "streaming";
+    case "data-url":
+    case "url":
+    default:
+      return "native";
+  }
+}
+__name(resolvePlayerMode, "resolvePlayerMode");
+function isSimpleStreamSource(source) {
+  return source.type === "stream" && !("getStreamUrl" in source);
+}
+__name(isSimpleStreamSource, "isSimpleStreamSource");
+function resolveStreamSource(source, context) {
+  if (!context?.getStreamUrl) {
+    console.warn(
+      "VideoPlayer: Stream source requires getStreamUrl. Either provide it in source or wrap with VideoPlayerProvider."
+    );
+    return null;
+  }
+  const sessionId = source.sessionId || context.sessionId;
+  if (!sessionId) {
+    console.warn("VideoPlayer: Stream source requires sessionId.");
+    return null;
+  }
+  return {
+    type: "stream",
+    sessionId,
+    path: source.path,
+    getStreamUrl: context.getStreamUrl,
+    mimeType: source.mimeType,
+    title: source.title,
+    poster: source.poster
+  };
+}
+__name(resolveStreamSource, "resolveStreamSource");
+
+// src/tools/VideoPlayer/utils/fileSource.ts
+function resolveFileSource(options) {
+  const {
+    content,
+    path,
+    mimeType,
+    sessionId,
+    loadMethod,
+    getStreamUrl,
+    title,
+    poster
+  } = options;
+  const contentSize = content ? typeof content === "string" ? content.length : content.byteLength : 0;
+  const hasContent = contentSize > 0;
+  if (loadMethod === "http_stream" && !hasContent && sessionId && getStreamUrl) {
+    return {
+      type: "stream",
+      sessionId,
+      path,
+      getStreamUrl,
+      mimeType,
+      title,
+      poster
+    };
+  }
+  if (typeof content === "string" && hasContent) {
+    return {
+      type: "data-url",
+      data: content,
+      title,
+      poster
+    };
+  }
+  if (content instanceof ArrayBuffer && hasContent) {
+    return {
+      type: "blob",
+      data: content,
+      mimeType: mimeType || "video/mp4",
+      title,
+      poster
+    };
+  }
+  return null;
+}
+__name(resolveFileSource, "resolveFileSource");
+var VideoPlayer = forwardRef(
+  ({
+    source: rawSource,
+    mode = "auto",
+    aspectRatio = 16 / 9,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    playsInline = true,
+    controls = true,
+    preload = "metadata",
+    theme = "default",
+    showInfo = false,
+    className,
+    videoClassName,
+    disableContextMenu = false,
+    showPreloader = true,
+    preloaderTimeout = 5e3,
+    errorFallback,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadStart,
+    onCanPlay,
+    onTimeUpdate
+  }, ref) => {
+    const context = useVideoPlayerContext();
+    const source = useMemo(() => {
+      if (isSimpleStreamSource(rawSource)) {
+        const resolved = resolveStreamSource(rawSource, context);
+        if (!resolved) {
+          return null;
+        }
+        return resolved;
+      }
+      return rawSource;
+    }, [rawSource, context]);
+    if (!source) {
+      const errorMessage = "Stream source requires VideoPlayerProvider with getStreamUrl and sessionId";
+      if (typeof errorFallback === "function") {
+        return /* @__PURE__ */ jsx("div", { className, style: { aspectRatio: aspectRatio === "fill" ? void 0 : aspectRatio }, children: errorFallback({ error: errorMessage }) });
+      }
+      if (errorFallback) {
+        return /* @__PURE__ */ jsx("div", { className, style: { aspectRatio: aspectRatio === "fill" ? void 0 : aspectRatio }, children: errorFallback });
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className,
+          style: {
+            aspectRatio: aspectRatio === "fill" ? void 0 : aspectRatio,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "black",
+            color: "white"
+          },
+          children: /* @__PURE__ */ jsx("p", { children: errorMessage })
+        }
+      );
+    }
+    const resolvedMode = resolvePlayerMode(source, mode);
+    const commonProps = {
+      aspectRatio,
+      autoPlay,
+      muted,
+      loop,
+      playsInline,
+      controls,
+      preload,
+      className,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      onLoadStart,
+      onCanPlay,
+      onTimeUpdate
+    };
+    switch (resolvedMode) {
+      case "vidstack":
+        return /* @__PURE__ */ jsx(
+          VidstackProvider,
+          {
+            ref,
+            source,
+            theme,
+            showInfo,
+            errorFallback,
+            ...commonProps
+          }
+        );
+      case "streaming":
+        return /* @__PURE__ */ jsx(
+          StreamProvider,
+          {
+            ref,
+            source,
+            videoClassName,
+            disableContextMenu,
+            showPreloader,
+            preloaderTimeout,
+            errorFallback,
+            ...commonProps
+          }
+        );
+      case "native":
+      default:
+        return /* @__PURE__ */ jsx(
+          NativeProvider,
+          {
+            ref,
+            source,
+            videoClassName,
+            disableContextMenu,
+            showPreloader,
+            preloaderTimeout,
+            ...commonProps
+          }
+        );
+    }
+  }
+);
+VideoPlayer.displayName = "VideoPlayer";
+function VideoControls({ player, className }) {
+  const store = useMediaStore(player);
+  const remote = useMediaRemote();
+  const isPaused = store.paused;
+  const isMuted = store.muted;
+  const isFullscreen = store.fullscreen;
+  const currentTime = store.currentTime;
+  const duration = store.duration;
+  const volume = store.volume;
+  const formatTime2 = /* @__PURE__ */ __name((seconds) => {
+    if (!seconds || seconds < 0) return "0:00";
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  }, "formatTime");
+  const handleProgressClick = /* @__PURE__ */ __name((e) => {
+    if (!duration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = clickX / rect.width;
+    const newTime = percentage * duration;
+    remote.seek(newTime);
+  }, "handleProgressClick");
+  const handleVolumeChange = /* @__PURE__ */ __name((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+    remote.changeVolume(percentage);
+    if (percentage > 0 && isMuted) {
+      remote.toggleMuted();
+    }
+  }, "handleVolumeChange");
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 flex flex-col justify-end transition-opacity duration-300",
+        "bg-gradient-to-t from-black/80 via-black/20 to-transparent",
+        "opacity-0 group-hover:opacity-100 focus-within:opacity-100",
+        "pointer-events-none group-hover:pointer-events-auto",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 pointer-events-auto", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all group",
+            onClick: handleProgressClick,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary rounded-full transition-all relative group-hover:bg-primary/90",
+                style: { width: `${progress}%` },
+                children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity" })
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-4 pb-4 pointer-events-auto", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => remote.togglePaused(),
+              className: "text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full",
+              children: isPaused ? /* @__PURE__ */ jsx(Play, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(Pause, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "text-white text-sm font-medium", children: [
+            formatTime2(currentTime),
+            " / ",
+            formatTime2(duration)
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 group/volume", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => remote.toggleMuted(),
+                className: "text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full",
+                children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-0 group-hover/volume:w-20 transition-all overflow-hidden",
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all",
+                    onClick: handleVolumeChange,
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "h-full bg-white rounded-full transition-all",
+                        style: { width: `${volume * 100}%` }
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => isFullscreen ? remote.exitFullscreen() : remote.enterFullscreen(),
+              className: "text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full",
+              children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "h-5 w-5" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+__name(VideoControls, "VideoControls");
+function VideoErrorFallback({
+  error,
+  retry,
+  downloadUrl,
+  downloadFilename,
+  fileSize,
+  showRetry = true,
+  className,
+  icon,
+  title,
+  description
+}) {
+  const displayTitle = title || error || "Video cannot be previewed";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-black/90 text-white p-6",
+        className
+      ),
+      children: [
+        icon || /* @__PURE__ */ jsx(FileVideo, { className: "w-16 h-16 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-center", children: displayTitle }),
+        (description || fileSize) && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center", children: description || fileSize }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-2", children: [
+          showRetry && retry && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: retry,
+              className: "gap-2",
+              children: [
+                /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4" }),
+                "Retry"
+              ]
+            }
+          ),
+          downloadUrl && /* @__PURE__ */ jsx(
+            DownloadButton,
+            {
+              url: downloadUrl,
+              filename: downloadFilename,
+              variant: "default",
+              size: "sm",
+              children: "Download to view"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+__name(VideoErrorFallback, "VideoErrorFallback");
+function createVideoErrorFallback(options) {
+  return (props, source) => /* @__PURE__ */ jsx(
+    VideoErrorFallback,
+    {
+      ...props,
+      downloadUrl: options.getDownloadUrl?.(source),
+      downloadFilename: options.getFilename?.(source),
+      fileSize: options.getFileSize?.(source),
+      showRetry: options.showRetry
+    }
+  );
+}
+__name(createVideoErrorFallback, "createVideoErrorFallback");
+function useHybridAudio(options) {
+  const {
+    src,
+    autoPlay = false,
+    initialVolume = 1,
+    loop = false,
+    crossOrigin = "anonymous",
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onError,
+    onReady
+  } = options;
+  const audioRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const sourceNodeRef = useRef(null);
+  const analyserRef = useRef(null);
+  const connectedElementRef = useRef(null);
+  const [state, setState] = useState({
+    isReady: false,
+    isPlaying: false,
+    currentTime: 0,
+    duration: 0,
+    volume: initialVolume,
+    isMuted: false,
+    isLooping: loop,
+    buffered: null,
+    error: null
+  });
+  const initWebAudio = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (connectedElementRef.current === audio && audioContextRef.current) {
+      return;
+    }
+    try {
+      if (!audioContextRef.current) {
+        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+        audioContextRef.current = new AudioContextClass();
+      }
+      const ctx = audioContextRef.current;
+      if (sourceNodeRef.current) {
+        try {
+          sourceNodeRef.current.disconnect();
+        } catch {
+        }
+      }
+      const source = ctx.createMediaElementSource(audio);
+      sourceNodeRef.current = source;
+      const analyser = ctx.createAnalyser();
+      analyser.fftSize = 256;
+      analyser.smoothingTimeConstant = 0.85;
+      analyserRef.current = analyser;
+      source.connect(ctx.destination);
+      source.connect(analyser);
+      connectedElementRef.current = audio;
+    } catch (error) {
+      console.warn("[useHybridAudio] Web Audio init failed:", error);
+    }
+  }, []);
+  const resumeAudioContext = useCallback(async () => {
+    const ctx = audioContextRef.current;
+    if (ctx && ctx.state === "suspended") {
+      await ctx.resume();
+    }
+  }, []);
+  const play = useCallback(async () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    try {
+      initWebAudio();
+      await resumeAudioContext();
+      await audio.play();
+    } catch (error) {
+      console.error("[useHybridAudio] Play failed:", error);
+      onError?.(error);
+    }
+  }, [initWebAudio, resumeAudioContext, onError]);
+  const pause = useCallback(() => {
+    audioRef.current?.pause();
+  }, []);
+  const togglePlay = useCallback(() => {
+    if (state.isPlaying) {
+      pause();
+    } else {
+      play();
+    }
+  }, [state.isPlaying, play, pause]);
+  const seek = useCallback(
+    (time) => {
+      const audio = audioRef.current;
+      if (audio && isFinite(time)) {
+        audio.currentTime = Math.max(0, Math.min(time, state.duration || audio.duration || 0));
+      }
+    },
+    [state.duration]
+  );
+  const seekTo = useCallback(
+    (progress) => {
+      const duration = state.duration || audioRef.current?.duration || 0;
+      seek(duration * Math.max(0, Math.min(1, progress)));
+    },
+    [state.duration, seek]
+  );
+  const skip = useCallback(
+    (seconds) => {
+      seek(state.currentTime + seconds);
+    },
+    [state.currentTime, seek]
+  );
+  const setVolume = useCallback((vol) => {
+    const audio = audioRef.current;
+    if (audio) {
+      const clampedVol = Math.max(0, Math.min(1, vol));
+      audio.volume = clampedVol;
+      setState((prev) => ({ ...prev, volume: clampedVol }));
+    }
+  }, []);
+  const toggleMute = useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.muted = !audio.muted;
+      setState((prev) => ({ ...prev, isMuted: audio.muted }));
+    }
+  }, []);
+  const toggleLoop = useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.loop = !audio.loop;
+      setState((prev) => ({ ...prev, isLooping: audio.loop }));
+    }
+  }, []);
+  const setLoop = useCallback((enabled) => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.loop = enabled;
+      setState((prev) => ({ ...prev, isLooping: enabled }));
+    }
+  }, []);
+  const restart = useCallback(() => {
+    seek(0);
+    play();
+  }, [seek, play]);
+  const controls = {
+    play,
+    pause,
+    togglePlay,
+    seek,
+    seekTo,
+    skip,
+    setVolume,
+    toggleMute,
+    toggleLoop,
+    setLoop,
+    restart
+  };
+  useEffect(() => {
+    const audio = document.createElement("audio");
+    audio.preload = "metadata";
+    audio.crossOrigin = crossOrigin;
+    audio.volume = initialVolume;
+    audio.loop = loop;
+    audioRef.current = audio;
+    return () => {
+      audio.pause();
+      audio.src = "";
+      if (audioContextRef.current) {
+        audioContextRef.current.close().catch(() => {
+        });
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const handlers = {
+      loadedmetadata: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({
+          ...prev,
+          duration: audio.duration,
+          isReady: true
+        }));
+        onReady?.();
+      }, "loadedmetadata"),
+      canplay: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({ ...prev, isReady: true }));
+        if (autoPlay) {
+          play();
+        }
+      }, "canplay"),
+      play: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({ ...prev, isPlaying: true }));
+        onPlay?.();
+      }, "play"),
+      pause: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({ ...prev, isPlaying: false }));
+        onPause?.();
+      }, "pause"),
+      ended: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({ ...prev, isPlaying: false }));
+        onEnded?.();
+      }, "ended"),
+      timeupdate: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({ ...prev, currentTime: audio.currentTime }));
+        onTimeUpdate?.(audio.currentTime);
+      }, "timeupdate"),
+      progress: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({ ...prev, buffered: audio.buffered }));
+      }, "progress"),
+      error: /* @__PURE__ */ __name(() => {
+        const error = new Error(audio.error?.message || "Audio error");
+        setState((prev) => ({ ...prev, error }));
+        onError?.(error);
+      }, "error"),
+      volumechange: /* @__PURE__ */ __name(() => {
+        setState((prev) => ({
+          ...prev,
+          volume: audio.volume,
+          isMuted: audio.muted
+        }));
+      }, "volumechange")
+    };
+    Object.entries(handlers).forEach(([event, handler]) => {
+      audio.addEventListener(event, handler);
+    });
+    return () => {
+      Object.entries(handlers).forEach(([event, handler]) => {
+        audio.removeEventListener(event, handler);
+      });
+    };
+  }, [autoPlay, onPlay, onPause, onEnded, onTimeUpdate, onError, onReady, play]);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio || !src) return;
+    setState((prev) => ({
+      ...prev,
+      isReady: false,
+      currentTime: 0,
+      duration: 0,
+      error: null
+    }));
+    audio.src = src;
+    audio.load();
+  }, [src]);
+  return {
+    audioRef,
+    state,
+    controls,
+    webAudio: {
+      context: audioContextRef.current,
+      analyser: analyserRef.current,
+      sourceNode: sourceNodeRef.current
+    }
+  };
+}
+__name(useHybridAudio, "useHybridAudio");
+function useHybridAudioAnalysis(analyser, isPlaying) {
+  const [levels, setLevels] = useState({ bass: 0, mid: 0, high: 0, overall: 0 });
+  const animationRef = useRef(null);
+  const dataArrayRef = useRef(null);
+  const cleanup = useCallback(() => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (analyser && !dataArrayRef.current) {
+      dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);
+    }
+  }, [analyser]);
+  useEffect(() => {
+    if (!isPlaying || !analyser || !dataArrayRef.current) {
+      cleanup();
+      setLevels((prev) => ({
+        bass: prev.bass * 0.95 < 0.01 ? 0 : prev.bass * 0.95,
+        mid: prev.mid * 0.95 < 0.01 ? 0 : prev.mid * 0.95,
+        high: prev.high * 0.95 < 0.01 ? 0 : prev.high * 0.95,
+        overall: prev.overall * 0.95 < 0.01 ? 0 : prev.overall * 0.95
+      }));
+      return;
+    }
+    const dataArray = dataArrayRef.current;
+    const animate = /* @__PURE__ */ __name(() => {
+      analyser.getByteFrequencyData(dataArray);
+      const binCount = dataArray.length;
+      const bassEnd = Math.floor(binCount * 0.15);
+      let bassSum = 0;
+      for (let i = 0; i < bassEnd; i++) bassSum += dataArray[i];
+      const bass = bassSum / bassEnd / 255;
+      const midStart = bassEnd;
+      const midEnd = Math.floor(binCount * 0.5);
+      let midSum = 0;
+      for (let i = midStart; i < midEnd; i++) midSum += dataArray[i];
+      const mid = midSum / (midEnd - midStart) / 255;
+      const highStart = midEnd;
+      let highSum = 0;
+      for (let i = highStart; i < binCount; i++) highSum += dataArray[i];
+      const high = highSum / (binCount - highStart) / 255;
+      let totalSum = 0;
+      for (let i = 0; i < binCount; i++) totalSum += dataArray[i];
+      const overall = totalSum / binCount / 255;
+      setLevels((prev) => ({
+        bass: prev.bass * 0.7 + bass * 0.3,
+        mid: prev.mid * 0.7 + mid * 0.3,
+        high: prev.high * 0.7 + high * 0.3,
+        overall: prev.overall * 0.7 + overall * 0.3
+      }));
+      animationRef.current = requestAnimationFrame(animate);
+    }, "animate");
+    animationRef.current = requestAnimationFrame(animate);
+    return cleanup;
+  }, [analyser, isPlaying, cleanup]);
+  return levels;
+}
+__name(useHybridAudioAnalysis, "useHybridAudioAnalysis");
+var STORAGE_KEY = "audio-player-settings";
+var DEFAULT_SETTINGS = {
+  enabled: true,
+  variant: "spotlight",
+  intensity: "medium",
+  colorScheme: "primary",
+  volume: 1,
+  isLooping: false
+};
+var VARIANTS = ["spotlight", "glow", "orbs", "mesh", "none"];
+var INTENSITIES = ["subtle", "medium", "strong"];
+var COLOR_SCHEMES = ["primary", "vibrant", "cool", "warm"];
+var VisualizationContext = createContext(null);
+function VisualizationProvider({ children }) {
+  const value = useVisualizationState();
+  return /* @__PURE__ */ jsx(VisualizationContext.Provider, { value, children });
+}
+__name(VisualizationProvider, "VisualizationProvider");
+function useVisualizationState() {
+  const [settings, setSettings] = useLocalStorage(
+    STORAGE_KEY,
+    DEFAULT_SETTINGS
+  );
+  const toggle = useCallback(() => {
+    setSettings((prev) => ({ ...prev, enabled: !prev.enabled }));
+  }, [setSettings]);
+  const setSetting = useCallback(
+    (key, value) => {
+      setSettings((prev) => ({ ...prev, [key]: value }));
+    },
+    [setSettings]
+  );
+  const nextVariant = useCallback(() => {
+    setSettings((prev) => {
+      const currentIndex = VARIANTS.indexOf(prev.variant);
+      const nextIndex = (currentIndex + 1) % VARIANTS.length;
+      return { ...prev, variant: VARIANTS[nextIndex] };
+    });
+  }, [setSettings]);
+  const nextIntensity = useCallback(() => {
+    setSettings((prev) => {
+      const currentIndex = INTENSITIES.indexOf(prev.intensity);
+      const nextIndex = (currentIndex + 1) % INTENSITIES.length;
+      return { ...prev, intensity: INTENSITIES[nextIndex] };
+    });
+  }, [setSettings]);
+  const nextColorScheme = useCallback(() => {
+    setSettings((prev) => {
+      const currentIndex = COLOR_SCHEMES.indexOf(prev.colorScheme);
+      const nextIndex = (currentIndex + 1) % COLOR_SCHEMES.length;
+      return { ...prev, colorScheme: COLOR_SCHEMES[nextIndex] };
+    });
+  }, [setSettings]);
+  const reset = useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, [setSettings]);
+  return useMemo(
+    () => ({
+      settings,
+      toggle,
+      setSetting,
+      nextVariant,
+      nextIntensity,
+      nextColorScheme,
+      reset
+    }),
+    [settings, toggle, setSetting, nextVariant, nextIntensity, nextColorScheme, reset]
+  );
+}
+__name(useVisualizationState, "useVisualizationState");
+function useVisualization() {
+  const context = useContext(VisualizationContext);
+  const fallbackState = useVisualizationState();
+  return context ?? fallbackState;
+}
+__name(useVisualization, "useVisualization");
+var useAudioVisualization = useVisualization;
+var VARIANT_INFO = {
+  spotlight: { label: "Spotlight", icon: "\u{1F4AB}" },
+  glow: { label: "Glow", icon: "\u2728" },
+  orbs: { label: "Orbs", icon: "\u{1F52E}" },
+  mesh: { label: "Mesh", icon: "\u{1F308}" },
+  none: { label: "Off", icon: "\u2B55" }
+};
+var INTENSITY_INFO = {
+  subtle: { label: "Subtle" },
+  medium: { label: "Medium" },
+  strong: { label: "Strong" }
+};
+var COLOR_SCHEME_INFO = {
+  primary: { label: "Primary", preview: "\u{1F535}" },
+  vibrant: { label: "Vibrant", preview: "\u{1F308}" },
+  cool: { label: "Cool", preview: "\u{1F499}" },
+  warm: { label: "Warm", preview: "\u{1F525}" }
+};
+var HybridAudioContext = createContext(null);
+function HybridAudioProvider({ children, ...options }) {
+  const { settings: savedSettings, setSetting } = useVisualization();
+  const effectiveOptions = {
+    ...options,
+    initialVolume: savedSettings.volume,
+    loop: savedSettings.isLooping
+  };
+  const { audioRef, state, controls, webAudio } = useHybridAudio(effectiveOptions);
+  const hasAppliedInitialSettings = useRef(false);
+  useEffect(() => {
+    if (!state.isReady || hasAppliedInitialSettings.current) return;
+    hasAppliedInitialSettings.current = true;
+    controls.setVolume(savedSettings.volume);
+    controls.setLoop(savedSettings.isLooping);
+  }, [state.isReady, savedSettings, controls]);
+  useEffect(() => {
+    if (!state.isReady) return;
+    if (state.volume !== savedSettings.volume) {
+      setSetting("volume", state.volume);
+    }
+    if (state.isLooping !== savedSettings.isLooping) {
+      setSetting("isLooping", state.isLooping);
+    }
+  }, [state.isReady, state.volume, state.isLooping, savedSettings, setSetting]);
+  const audioLevels = useHybridAudioAnalysis(webAudio.analyser, state.isPlaying);
+  const value = useMemo(
+    () => ({
+      state,
+      controls,
+      webAudio,
+      audioLevels,
+      audioRef
+    }),
+    [state, controls, webAudio, audioLevels, audioRef]
+  );
+  return /* @__PURE__ */ jsx(HybridAudioContext.Provider, { value, children });
+}
+__name(HybridAudioProvider, "HybridAudioProvider");
+function useHybridAudioContext() {
+  const context = useContext(HybridAudioContext);
+  if (!context) {
+    throw new Error("useHybridAudioContext must be used within HybridAudioProvider");
+  }
+  return context;
+}
+__name(useHybridAudioContext, "useHybridAudioContext");
+function useHybridAudioState() {
+  const { state } = useHybridAudioContext();
+  return state;
+}
+__name(useHybridAudioState, "useHybridAudioState");
+function useHybridAudioControls() {
+  const { controls } = useHybridAudioContext();
+  return controls;
+}
+__name(useHybridAudioControls, "useHybridAudioControls");
+function useHybridAudioLevels() {
+  const { audioLevels } = useHybridAudioContext();
+  return audioLevels;
+}
+__name(useHybridAudioLevels, "useHybridAudioLevels");
+function useHybridWebAudio() {
+  const { webAudio } = useHybridAudioContext();
+  return webAudio;
+}
+__name(useHybridWebAudio, "useHybridWebAudio");
+var HybridWaveform = memo(/* @__PURE__ */ __name(function HybridWaveform2({
+  mode = "frequency",
+  height = 64,
+  barWidth = 3,
+  barGap = 2,
+  barRadius = 2,
+  progressColor = "hsl(217 91% 60%)",
+  waveColor = "hsl(217 91% 60% / 0.3)",
+  bufferedColor = "hsl(217 91% 60% / 0.15)",
+  className,
+  onSeek
+}) {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const animationRef = useRef(null);
+  const { state, controls, webAudio } = useHybridAudioContext();
+  const handleClick = useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (!canvas || !state.duration) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const progress = x / rect.width;
+      const time = state.duration * progress;
+      controls.seek(time);
+      onSeek?.(time);
+    },
+    [state.duration, controls, onSeek]
+  );
+  const renderFrequency = useCallback(() => {
+    const canvas = canvasRef.current;
+    const analyser = webAudio.analyser;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height: canvasHeight } = canvas;
+    const dpr = window.devicePixelRatio || 1;
+    const displayWidth = width / dpr;
+    let dataArray = null;
+    if (analyser) {
+      dataArray = new Uint8Array(analyser.frequencyBinCount);
+      analyser.getByteFrequencyData(dataArray);
+    }
+    ctx.clearRect(0, 0, width, canvasHeight);
+    if (state.buffered && state.duration > 0) {
+      ctx.fillStyle = bufferedColor;
+      for (let i = 0; i < state.buffered.length; i++) {
+        const start = state.buffered.start(i) / state.duration * width;
+        const end = state.buffered.end(i) / state.duration * width;
+        ctx.fillRect(start, canvasHeight - 3 * dpr, end - start, 3 * dpr);
+      }
+    }
+    const barCount = Math.floor(displayWidth / (barWidth + barGap));
+    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
+    const progressX = width * progress;
+    for (let i = 0; i < barCount; i++) {
+      let barHeight;
+      if (dataArray && state.isPlaying) {
+        const step = Math.floor(dataArray.length / barCount);
+        const value = dataArray[i * step] / 255;
+        barHeight = Math.max(4 * dpr, value * (canvasHeight - 6 * dpr) * 0.9);
+      } else {
+        barHeight = 8 * dpr;
+      }
+      const x = i * (barWidth + barGap) * dpr;
+      const y = (canvasHeight - barHeight) / 2;
+      ctx.fillStyle = x < progressX ? progressColor : waveColor;
+      const radius = barRadius * dpr;
+      const rectWidth = barWidth * dpr;
+      ctx.beginPath();
+      ctx.roundRect(x, y, rectWidth, barHeight, radius);
+      ctx.fill();
+    }
+    if (state.isPlaying) {
+      animationRef.current = requestAnimationFrame(renderFrequency);
+    }
+  }, [
+    webAudio.analyser,
+    state.buffered,
+    state.duration,
+    state.currentTime,
+    state.isPlaying,
+    barWidth,
+    barGap,
+    barRadius,
+    progressColor,
+    waveColor,
+    bufferedColor
+  ]);
+  const renderStatic = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height: canvasHeight } = canvas;
+    const dpr = window.devicePixelRatio || 1;
+    ctx.clearRect(0, 0, width, canvasHeight);
+    if (state.buffered && state.duration > 0) {
+      ctx.fillStyle = bufferedColor;
+      for (let i = 0; i < state.buffered.length; i++) {
+        const start = state.buffered.start(i) / state.duration * width;
+        const end = state.buffered.end(i) / state.duration * width;
+        ctx.fillRect(start, 0, end - start, canvasHeight);
+      }
+    }
+    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
+    const progressWidth = width * progress;
+    ctx.fillStyle = waveColor;
+    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, width, 4 * dpr);
+    ctx.fillStyle = progressColor;
+    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, progressWidth, 4 * dpr);
+    if (progress > 0) {
+      ctx.beginPath();
+      ctx.arc(progressWidth, canvasHeight / 2, 6 * dpr, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }, [state.buffered, state.duration, state.currentTime, progressColor, waveColor, bufferedColor]);
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const dpr = window.devicePixelRatio || 1;
+      const displayWidth = entry.contentRect.width;
+      const displayHeight = height;
+      canvas.width = displayWidth * dpr;
+      canvas.height = displayHeight * dpr;
+      canvas.style.width = `${displayWidth}px`;
+      canvas.style.height = `${displayHeight}px`;
+      if (mode === "frequency") {
+        renderFrequency();
+      } else {
+        renderStatic();
+      }
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [height, mode, renderFrequency, renderStatic]);
+  useEffect(() => {
+    if (mode === "frequency") {
+      renderFrequency();
+    }
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [mode, renderFrequency]);
+  useEffect(() => {
+    if (mode === "static") {
+      renderStatic();
+    }
+  }, [mode, state.currentTime, renderStatic]);
+  useEffect(() => {
+    if (mode === "frequency" && !state.isPlaying) {
+      renderFrequency();
+    }
+  }, [mode, state.isPlaying, renderFrequency]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("w-full", className), children: /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      onClick: handleClick,
+      className: "cursor-pointer",
+      style: { width: "100%", height }
+    }
+  ) });
+}, "HybridWaveform"));
+
+// src/tools/AudioPlayer/utils/formatTime.ts
+function formatTime(seconds) {
+  if (!seconds || !isFinite(seconds) || seconds < 0) return "0:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+__name(formatTime, "formatTime");
+createMediaLogger("AudioPlayer");
+var HybridAudioPlayer = memo(/* @__PURE__ */ __name(function HybridAudioPlayer2({
+  showControls = true,
+  showWaveform = true,
+  waveformMode = "frequency",
+  waveformHeight = 64,
+  showTimer = true,
+  showVolume = true,
+  showLoop = true,
+  className,
+  style
+}) {
+  const { state, controls } = useHybridAudioContext();
+  const isLoading = !state.isReady;
+  const handleVolumeChange = /* @__PURE__ */ __name((value) => {
+    controls.setVolume(value[0] / 100);
+  }, "handleVolumeChange");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-3 p-4 rounded-lg bg-card border", className),
+      style,
+      children: [
+        showWaveform && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            HybridWaveform,
+            {
+              mode: waveformMode,
+              height: waveformHeight,
+              className: cn(isLoading && "opacity-50")
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-primary" }) })
+        ] }),
+        showTimer && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground tabular-nums px-1", children: [
+          /* @__PURE__ */ jsx("span", { children: formatTime(state.currentTime) }),
+          /* @__PURE__ */ jsx("span", { children: formatTime(state.duration) })
+        ] }),
+        showControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9",
+              onClick: controls.restart,
+              disabled: !state.isReady,
+              title: "Restart",
+              children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9",
+              onClick: () => controls.skip(-5),
+              disabled: !state.isReady,
+              title: "Back 5 seconds",
+              children: /* @__PURE__ */ jsx(SkipBack, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "default",
+              size: "icon",
+              className: "h-12 w-12 rounded-full",
+              onClick: controls.togglePlay,
+              disabled: !state.isReady && !isLoading,
+              title: state.isPlaying ? "Pause" : "Play",
+              children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin" }) : state.isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Play, { className: "h-5 w-5 ml-0.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9",
+              onClick: () => controls.skip(5),
+              disabled: !state.isReady,
+              title: "Forward 5 seconds",
+              children: /* @__PURE__ */ jsx(SkipForward, { className: "h-4 w-4" })
+            }
+          ),
+          showVolume && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-9 w-9",
+                onClick: controls.toggleMute,
+                title: state.isMuted ? "Unmute" : "Mute",
+                children: state.isMuted || state.volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Slider,
+              {
+                value: [state.isMuted ? 0 : state.volume * 100],
+                max: 100,
+                step: 1,
+                onValueChange: handleVolumeChange,
+                className: "w-20",
+                "aria-label": "Volume"
+              }
+            )
+          ] }),
+          showLoop && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn("h-9 w-9", state.isLooping && "text-primary"),
+              onClick: controls.toggleLoop,
+              disabled: !state.isReady,
+              title: state.isLooping ? "Disable loop" : "Enable loop",
+              children: /* @__PURE__ */ jsx(Repeat, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "HybridAudioPlayer"));
+
+// src/tools/AudioPlayer/effects/index.ts
+var INTENSITY_CONFIG = {
+  subtle: { opacity: 0.3, scale: 0.02, blur: "blur-2xl" },
+  medium: { opacity: 0.5, scale: 0.04, blur: "blur-xl" },
+  strong: { opacity: 0.7, scale: 0.06, blur: "blur-lg" }
+};
+var COLOR_SCHEMES2 = {
+  primary: ["217 91% 60%"],
+  vibrant: ["217 91% 60%", "142 76% 36%", "262 83% 58%", "25 95% 53%"],
+  cool: ["217 91% 60%", "262 83% 58%", "199 89% 48%"],
+  warm: ["25 95% 53%", "0 84% 60%", "38 92% 50%"]
+};
+var DEFAULT_GLOW_COLORS = [
+  "217 91% 60%",
+  // Blue
+  "262 83% 58%",
+  // Purple
+  "330 81% 60%",
+  // Pink
+  "25 95% 53%"
+  // Orange
+];
+function getEffectConfig(intensity) {
+  return INTENSITY_CONFIG[intensity];
+}
+__name(getEffectConfig, "getEffectConfig");
+function getColors(colorScheme) {
+  return COLOR_SCHEMES2[colorScheme];
+}
+__name(getColors, "getColors");
+function prepareEffectColors(colorScheme, levels) {
+  const baseColors = COLOR_SCHEMES2[colorScheme];
+  const colors = baseColors.length > 1 ? baseColors : DEFAULT_GLOW_COLORS;
+  const hueShift = Math.floor(
+    levels.bass * 30 + levels.mid * 20 + levels.high * 10
+  );
+  return { colors, hueShift };
+}
+__name(prepareEffectColors, "prepareEffectColors");
+function calculateGlowLayers(levels, config, colors) {
+  const { bass, mid, high } = levels;
+  return [
+    // Layer 1: Bass glow - bottom
+    {
+      inset: 60 + bass * 90,
+      opacity: 1,
+      scale: 1 + bass * 0.5,
+      background: `radial-gradient(ellipse 80% 60% at 50% 100%, hsl(${colors[0]} / ${0.4 + bass * 0.4}) 0%, transparent 70%)`,
+      blur: "blur-3xl"
+    },
+    // Layer 2: Mid glow - top
+    {
+      inset: 45 + mid * 75,
+      opacity: 1,
+      scale: 1 + mid * 0.4,
+      background: `radial-gradient(ellipse 70% 50% at 50% 0%, hsl(${colors[1] || colors[0]} / ${0.3 + mid * 0.5}) 0%, transparent 70%)`,
+      blur: "blur-2xl"
+    },
+    // Layer 3: High glow - left
+    {
+      inset: 30 + high * 60,
+      opacity: 1,
+      scale: 1 + high * 0.3,
+      background: `radial-gradient(ellipse 50% 80% at 0% 50%, hsl(${colors[2] || colors[0]} / ${0.3 + high * 0.4}) 0%, transparent 60%)`,
+      blur: "blur-2xl"
+    },
+    // Layer 4: High glow - right
+    {
+      inset: 30 + high * 60,
+      opacity: 1,
+      scale: 1 + high * 0.3,
+      background: `radial-gradient(ellipse 50% 80% at 100% 50%, hsl(${colors[3] || colors[0]} / ${0.3 + high * 0.4}) 0%, transparent 60%)`,
+      blur: "blur-2xl"
+    },
+    // Layer 5: Center pulsing glow
+    {
+      inset: 24 + bass * 45,
+      opacity: 1,
+      scale: 1 + bass * 0.2,
+      background: `radial-gradient(circle at 50% 50%, hsl(${colors[0]} / ${0.2 + bass * 0.3}) 0%, hsl(${colors[1] || colors[0]} / ${0.1 + mid * 0.2}) 40%, transparent 70%)`,
+      blur: "blur-xl",
+      animation: "glow-breathe 2s ease-in-out infinite"
+    }
+  ];
+}
+__name(calculateGlowLayers, "calculateGlowLayers");
+function calculateOrbs(levels, config, colors, baseSize = 50) {
+  const { bass, mid, high, overall } = levels;
+  const size = baseSize * 3;
+  const bassMove = bass * 30;
+  const midMove = mid * 25;
+  const highMove = high * 20;
+  return [
+    // Bass orb - top left, big pulses
+    {
+      x: -40 + bassMove,
+      y: -40 - bassMove * 0.5,
+      size: size * (1 + bass * 1.2),
+      color: colors[0],
+      opacity: 0.5 + bass * 0.5,
+      scale: 1 + bass * 0.6
+    },
+    // Mid orb - top right
+    {
+      x: 130 - midMove * 0.5,
+      y: -30 + midMove,
+      size: size * (0.9 + mid * 1),
+      color: colors[1] || colors[0],
+      opacity: 0.5 + mid * 0.5,
+      scale: 1 + mid * 0.5
+    },
+    // High orb - bottom right
+    {
+      x: 140 + highMove * 0.3,
+      y: 120 - highMove,
+      size: size * (0.8 + high * 0.8),
+      color: colors[2] || colors[0],
+      opacity: 0.4 + high * 0.6,
+      scale: 1 + high * 0.45
+    },
+    // Mid orb 2 - bottom left
+    {
+      x: -30 - midMove * 0.4,
+      y: 130 + midMove * 0.3,
+      size: size * (0.9 + mid * 0.9),
+      color: colors[3] || colors[0],
+      opacity: 0.45 + mid * 0.55,
+      scale: 1 + mid * 0.5
+    },
+    // Center overall orb
+    {
+      x: 50,
+      y: 50,
+      size: size * (0.6 + overall * 1.5),
+      color: colors[0],
+      opacity: 0.3 + overall * 0.5,
+      scale: 1 + overall * 0.7
+    }
+  ];
+}
+__name(calculateOrbs, "calculateOrbs");
+function calculateMeshGradients(levels, config, colors) {
+  const { bass, mid, high, overall } = levels;
+  const bassOffset = bass * 40;
+  const midOffset = mid * 30;
+  const highOffset = high * 25;
+  return [
+    // Large bass blob - top right, pulses hard
+    {
+      width: `${200 + bass * 150}%`,
+      height: `${200 + bass * 150}%`,
+      top: `${ -80 + bassOffset}%`,
+      right: `${ -80 - bassOffset}%`,
+      color: colors[0],
+      opacity: 0.4 + bass * 0.6,
+      scale: 1 + bass * 0.5,
+      rotation: bass * 45,
+      blur: "blur-2xl"
+    },
+    // Mid blob - bottom left
+    {
+      width: `${180 + mid * 120}%`,
+      height: `${180 + mid * 120}%`,
+      bottom: `${ -60 + midOffset}%`,
+      left: `${ -60 - midOffset}%`,
+      color: colors[1] || colors[0],
+      opacity: 0.4 + mid * 0.6,
+      scale: 1 + mid * 0.4,
+      rotation: -mid * 40,
+      blur: "blur-2xl"
+    },
+    // High blob - bottom right
+    {
+      width: `${140 + high * 100}%`,
+      height: `${140 + high * 100}%`,
+      top: `${70 - highOffset}%`,
+      right: `${ -50 + highOffset}%`,
+      color: colors[2] || colors[0],
+      opacity: 0.35 + high * 0.65,
+      scale: 1 + high * 0.35,
+      rotation: high * 35,
+      blur: "blur-xl"
+    },
+    // Extra bass reactive blob - top left
+    {
+      width: `${160 + bass * 140}%`,
+      height: `${160 + bass * 140}%`,
+      top: `${ -60 - bassOffset * 0.8}%`,
+      left: `${ -60 + bassOffset * 0.8}%`,
+      color: colors[3] || colors[1] || colors[0],
+      opacity: 0.35 + bass * 0.65,
+      scale: 1 + bass * 0.55,
+      rotation: -bass * 50,
+      blur: "blur-2xl"
+    },
+    // Center glow - pulses with overall
+    {
+      width: `${80 + overall * 150}%`,
+      height: `${80 + overall * 150}%`,
+      top: "50%",
+      left: "50%",
+      color: colors[0],
+      opacity: 0.3 + overall * 0.5,
+      scale: 1 + overall * 0.4,
+      rotation: 0,
+      isCenter: true,
+      blur: "blur-3xl"
+    }
+  ];
+}
+__name(calculateMeshGradients, "calculateMeshGradients");
+function calculateSpotlight(levels, config, colors, rotation) {
+  const { bass, mid, high, overall } = levels;
+  return {
+    // Rotation speed increases with mid frequencies
+    rotation: rotation + mid * 180,
+    // Border expands with bass
+    inset: 12 + bass * 30,
+    // Color intensities react to different frequencies
+    colors: colors.map((c, i) => ({
+      color: c,
+      opacity: i === 0 ? 0.3 + bass * 0.7 : i === 1 ? 0.3 + mid * 0.7 : 0.3 + high * 0.7
+    })),
+    // Pulse glow - big and reactive
+    pulseInset: 24 + bass * 50,
+    pulseOpacity: 0.3 + bass * 0.7,
+    pulseScale: 1 + bass * 0.4,
+    // Extra glow ring
+    ringOpacity: 0.2 + overall * 0.6,
+    ringScale: 1 + overall * 0.3
+  };
+}
+__name(calculateSpotlight, "calculateSpotlight");
+var EFFECT_ANIMATIONS = `
+  @keyframes spotlight-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes orb-float-1 {
+    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
+    50% { transform: translate(-50%, -50%) translateY(-15px); }
+  }
+
+  @keyframes orb-float-2 {
+    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
+    50% { transform: translate(-50%, -50%) translateX(15px); }
+  }
+
+  @keyframes orb-float-3 {
+    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
+    33% { transform: translate(-50%, -50%) translate(10px, -10px); }
+    66% { transform: translate(-50%, -50%) translate(-10px, 10px); }
+  }
+
+  @keyframes orb-float-4 {
+    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
+    50% { transform: translate(-50%, -50%) translate(-15px, -10px); }
+  }
+
+  @keyframes mesh-float-1 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    25% { transform: translate(-5%, 10%) scale(1.05); }
+    50% { transform: translate(5%, 5%) scale(0.95); }
+    75% { transform: translate(-3%, -5%) scale(1.02); }
+  }
+
+  @keyframes mesh-float-2 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(8%, -8%) scale(1.08); }
+    66% { transform: translate(-6%, 6%) scale(0.92); }
+  }
+
+  @keyframes mesh-float-3 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(10%, 10%) scale(1.1); }
+  }
+
+  @keyframes mesh-float-4 {
+    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
+    25% { transform: translate(10%, -5%) scale(1.1) rotate(5deg); }
+    50% { transform: translate(-5%, 10%) scale(0.95) rotate(-5deg); }
+    75% { transform: translate(-10%, -10%) scale(1.05) rotate(3deg); }
+  }
+
+  @keyframes mesh-pulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
+    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
+  }
+
+  @keyframes glow-breathe {
+    0%, 100% { opacity: 0.6; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.05); }
+  }
+
+  @keyframes glow-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes sparkle-move {
+    0% { opacity: 0; transform: scale(0.8); }
+    50% { opacity: 1; }
+    100% { opacity: 0; transform: scale(1.2); }
+  }
+`;
+function GlowEffect({ data, colors, isPlaying }) {
+  const { layers, hueShift, showPulseRings, showSparkle } = data;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    layers.map((layer, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute rounded-2xl -z-10", layer.blur),
+        style: {
+          inset: `-${layer.inset}px`,
+          background: layer.background,
+          opacity: isPlaying ? layer.opacity : 0,
+          transform: i < 2 ? `scaleY(${layer.scale})` : `scale(${layer.scale})`,
+          animation: isPlaying && layer.animation ? layer.animation : "none",
+          transition: "opacity 0.3s"
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute rounded-2xl blur-xl overflow-hidden -z-10",
+        style: {
+          inset: "-75px",
+          opacity: isPlaying ? 0.6 : 0,
+          transition: "opacity 0.5s"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: `conic-gradient(
+              from ${hueShift}deg at 50% 50%,
+              hsl(${colors[0]} / 0.4) 0deg,
+              hsl(${colors[1] || colors[0]} / 0.3) 90deg,
+              hsl(${colors[2] || colors[0]} / 0.3) 180deg,
+              hsl(${colors[3] || colors[0]} / 0.3) 270deg,
+              hsl(${colors[0]} / 0.4) 360deg
+            )`,
+              animation: isPlaying ? "glow-rotate 6s linear infinite" : "none"
+            }
+          }
+        )
+      }
+    ),
+    showPulseRings && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute -inset-6 rounded-xl border-2 animate-ping -z-10",
+          style: {
+            borderColor: `hsl(${colors[0]} / 0.4)`,
+            animationDuration: "1s"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute -inset-12 rounded-2xl border animate-ping -z-10",
+          style: {
+            borderColor: `hsl(${colors[1] || colors[0]} / 0.3)`,
+            animationDuration: "1.5s",
+            animationDelay: "0.2s"
+          }
+        }
+      )
+    ] }),
+    showSparkle && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute -inset-18 rounded-3xl -z-10",
+        style: {
+          background: `radial-gradient(circle at 50% 30%, hsl(${colors[2] || colors[0]} / 0.5) 0%, transparent 30%)`,
+          animation: "sparkle-move 0.5s ease-out"
+        }
+      }
+    )
+  ] });
+}
+__name(GlowEffect, "GlowEffect");
+function OrbsEffect({ orbs, blur, isPlaying }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: orbs.map((orb, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("absolute rounded-full -z-10", blur),
+      style: {
+        width: orb.size,
+        height: orb.size,
+        left: `${orb.x}%`,
+        top: `${orb.y}%`,
+        background: `radial-gradient(circle at 30% 30%, hsl(${orb.color}) 0%, hsl(${orb.color} / 0.5) 40%, transparent 70%)`,
+        opacity: isPlaying ? orb.opacity : 0,
+        transform: `translate(-50%, -50%) scale(${orb.scale})`,
+        transition: "all 0.08s ease-out"
+      }
+    },
+    i
+  )) });
+}
+__name(OrbsEffect, "OrbsEffect");
+function SpotlightEffect({ data, colors, blur, isPlaying }) {
+  const inset = "inset" in data ? data.inset : 12;
+  const pulseInset = "pulseInset" in data ? data.pulseInset : 24;
+  const ringOpacity = "ringOpacity" in data ? data.ringOpacity : 0.3;
+  const ringScale = "ringScale" in data ? data.ringScale : 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute rounded-xl -z-10", blur),
+        style: {
+          inset: `-${inset}px`,
+          background: `conic-gradient(
+            from ${data.rotation}deg,
+            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5}),
+            hsl(${colors[1] || colors[0]} / ${data.colors[1]?.opacity || 0.7}),
+            hsl(${colors[2] || colors[0]} / ${data.colors[2]?.opacity || 0.5}),
+            hsl(${colors[0]} / ${data.colors[1]?.opacity || 0.7}),
+            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5})
+          )`,
+          opacity: isPlaying ? 1 : 0,
+          transition: "all 0.08s ease-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute -inset-1 rounded-lg bg-background -z-10",
+        style: { opacity: isPlaying ? 1 : 0, transition: "opacity 0.1s" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute rounded-2xl -z-10", blur),
+        style: {
+          inset: `-${pulseInset}px`,
+          background: `radial-gradient(circle, hsl(${colors[0]} / 0.7) 0%, hsl(${colors[0]} / 0.3) 50%, transparent 70%)`,
+          opacity: isPlaying ? data.pulseOpacity : 0,
+          transform: `scale(${data.pulseScale})`,
+          transition: "all 0.08s ease-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute rounded-3xl -z-10 blur-2xl",
+        style: {
+          inset: `-${pulseInset + 30}px`,
+          background: `radial-gradient(circle, hsl(${colors[1] || colors[0]} / 0.4) 0%, transparent 60%)`,
+          opacity: isPlaying ? ringOpacity : 0,
+          transform: `scale(${ringScale})`,
+          transition: "all 0.08s ease-out"
+        }
+      }
+    )
+  ] });
+}
+__name(SpotlightEffect, "SpotlightEffect");
+function MeshEffect({ gradients, isPlaying }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: gradients.map((g, i) => {
+    const isCenter = "isCenter" in g && g.isCenter;
+    const scale = "scale" in g ? g.scale : 1;
+    const rotation = "rotation" in g ? g.rotation : 0;
+    const itemBlur = "blur" in g ? g.blur : "blur-2xl";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute rounded-full -z-10", itemBlur),
+        style: {
+          width: g.width,
+          height: g.height,
+          top: "top" in g ? g.top : void 0,
+          bottom: "bottom" in g ? g.bottom : void 0,
+          left: "left" in g ? g.left : void 0,
+          right: "right" in g ? g.right : void 0,
+          background: isCenter ? `radial-gradient(circle, hsl(${g.color} / 0.6) 0%, hsl(${g.color} / 0.3) 30%, transparent 60%)` : `radial-gradient(circle, hsl(${g.color}) 0%, hsl(${g.color} / 0.5) 30%, transparent 65%)`,
+          opacity: isPlaying ? g.opacity : 0,
+          transform: isCenter ? `translate(-50%, -50%) scale(${scale})` : `scale(${scale}) rotate(${rotation}deg)`,
+          transition: "all 0.08s ease-out"
+        }
+      },
+      i
+    );
+  }) });
+}
+__name(MeshEffect, "MeshEffect");
+var SIZES = {
+  sm: { container: "w-32 h-32", orbBase: 40 },
+  md: { container: "w-40 h-40", orbBase: 50 },
+  lg: { container: "w-48 h-48", orbBase: 60 }
+};
+function AudioReactiveCover({
+  children,
+  size = "lg",
+  variant = "spotlight",
+  intensity = "medium",
+  colorScheme = "primary",
+  onClick,
+  className
+}) {
+  const { isPlaying } = useHybridAudioState();
+  const levels = useHybridAudioLevels();
+  const sizeConfig = SIZES[size];
+  const effectConfig = getEffectConfig(intensity);
+  const { colors, hueShift } = prepareEffectColors(colorScheme, levels);
+  const containerScale = 1 + levels.overall * effectConfig.scale;
+  const glowData = variant === "glow" ? {
+    layers: calculateGlowLayers(levels, effectConfig, colors),
+    hueShift,
+    showPulseRings: levels.bass > 0.5,
+    showSparkle: levels.high > 0.4
+  } : null;
+  const orbsData = variant === "orbs" ? calculateOrbs(levels, effectConfig, colors, sizeConfig.orbBase) : null;
+  const meshData = variant === "mesh" ? calculateMeshGradients(levels, effectConfig, colors) : null;
+  const spotlightData = variant === "spotlight" ? calculateSpotlight(levels, effectConfig, colors, levels.mid * 360) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative", sizeConfig.container, className),
+      style: {
+        transform: `scale(${containerScale})`,
+        transition: "transform 0.1s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0 pointer-events-none overflow-visible", children: [
+          glowData && /* @__PURE__ */ jsx(GlowEffect, { data: glowData, colors, isPlaying }),
+          orbsData && /* @__PURE__ */ jsx(OrbsEffect, { orbs: orbsData, blur: effectConfig.blur, isPlaying }),
+          spotlightData && /* @__PURE__ */ jsx(SpotlightEffect, { data: spotlightData, colors, blur: effectConfig.blur, isPlaying }),
+          meshData && /* @__PURE__ */ jsx(MeshEffect, { gradients: meshData, blur: effectConfig.blur, isPlaying })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-full h-full rounded-lg overflow-hidden shadow-2xl z-10 bg-background cursor-pointer",
+            onClick,
+            role: onClick ? "button" : void 0,
+            tabIndex: onClick ? 0 : void 0,
+            onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: EFFECT_ANIMATIONS } })
+      ]
+    }
+  );
+}
+__name(AudioReactiveCover, "AudioReactiveCover");
+var COVER_SIZES = {
+  sm: "w-24 h-24",
+  md: "w-32 h-32",
+  lg: "w-48 h-48"
+};
+function HybridSimplePlayer(props) {
+  return /* @__PURE__ */ jsx(VisualizationProvider, { children: /* @__PURE__ */ jsx(HybridSimplePlayerContent, { ...props }) });
+}
+__name(HybridSimplePlayer, "HybridSimplePlayer");
+function HybridSimplePlayerContent({
+  src,
+  title,
+  artist,
+  coverArt,
+  coverSize = "md",
+  showWaveform = true,
+  waveformMode = "frequency",
+  waveformHeight = 64,
+  showTimer = true,
+  showVolume = true,
+  showLoop = true,
+  reactiveCover = true,
+  variant,
+  intensity,
+  colorScheme,
+  autoPlay = false,
+  loop = false,
+  initialVolume = 1,
+  layout = "vertical",
+  className,
+  onPlay,
+  onPause,
+  onEnded,
+  onError
+}) {
+  const { settings: vizSettings, nextVariant } = useVisualization();
+  const effectiveVariant = variant ?? (vizSettings.variant !== "none" ? vizSettings.variant : "spotlight");
+  const effectiveIntensity = intensity ?? vizSettings.intensity;
+  const effectiveColorScheme = colorScheme ?? vizSettings.colorScheme;
+  const showReactiveCover = reactiveCover && effectiveVariant !== "none";
+  const renderCoverContent = /* @__PURE__ */ __name(() => {
+    if (typeof coverArt === "string") {
+      return /* @__PURE__ */ jsx("img", { src: coverArt, alt: title || "Album cover", className: "w-full h-full object-cover" });
+    }
+    if (coverArt) {
+      return coverArt;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(Music, { className: "w-1/3 h-1/3 text-muted-foreground/50" }) });
+  }, "renderCoverContent");
+  const isHorizontal = layout === "horizontal";
+  return /* @__PURE__ */ jsx(
+    HybridAudioProvider,
+    {
+      src,
+      autoPlay,
+      loop,
+      initialVolume,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn$1(
+            "flex gap-4",
+            isHorizontal ? "flex-row items-center" : "flex-col items-center",
+            className
+          ),
+          children: [
+            (coverArt || reactiveCover) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 shrink-0", children: [
+              showReactiveCover ? /* @__PURE__ */ jsx(
+                AudioReactiveCover,
+                {
+                  size: coverSize,
+                  variant: effectiveVariant,
+                  intensity: effectiveIntensity,
+                  colorScheme: effectiveColorScheme,
+                  onClick: nextVariant,
+                  children: /* @__PURE__ */ jsx("div", { className: cn$1("rounded-lg overflow-hidden", COVER_SIZES[coverSize]), children: renderCoverContent() })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn$1(
+                    "rounded-lg overflow-hidden shadow-lg cursor-pointer",
+                    COVER_SIZES[coverSize]
+                  ),
+                  onClick: nextVariant,
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => e.key === "Enter" && nextVariant(),
+                  children: renderCoverContent()
+                }
+              ),
+              reactiveCover && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/50 select-none", children: vizSettings.variant === "none" ? "off" : vizSettings.variant })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn$1("flex flex-col gap-3", isHorizontal ? "flex-1 min-w-0" : "w-full max-w-md"),
+                children: [
+                  (title || artist) && /* @__PURE__ */ jsxs("div", { className: cn$1("text-center", isHorizontal && "text-left"), children: [
+                    title && /* @__PURE__ */ jsx("h3", { className: "text-base font-medium text-foreground truncate", children: title }),
+                    artist && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: artist })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    HybridAudioPlayer,
+                    {
+                      showControls: true,
+                      showWaveform,
+                      waveformMode,
+                      waveformHeight,
+                      showTimer,
+                      showVolume,
+                      showLoop,
+                      className: "border-0 bg-transparent"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+__name(HybridSimplePlayerContent, "HybridSimplePlayerContent");
+
+// src/tools/ImageViewer/utils/constants.ts
+var MAX_IMAGE_SIZE = 50 * 1024 * 1024;
+var WARNING_IMAGE_SIZE = 10 * 1024 * 1024;
+var PROGRESSIVE_LOADING_THRESHOLD = 500 * 1024;
+var LQIP_SIZE = 32;
+var LQIP_QUALITY = 0.5;
+var ZOOM_PRESETS = [
+  { label: "Fit", value: "fit" },
+  { label: "25%", value: 0.25 },
+  { label: "50%", value: 0.5 },
+  { label: "100%", value: 1 },
+  { label: "200%", value: 2 },
+  { label: "400%", value: 4 }
+];
+var DEFAULT_TRANSFORM = {
+  rotation: 0,
+  flipH: false,
+  flipV: false
+};
+
+// src/tools/ImageViewer/utils/lqip.ts
+async function createLQIP(imageSrc) {
+  try {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    await new Promise((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = () => reject(new Error("Failed to load image for LQIP"));
+      img.src = imageSrc;
+    });
+    const aspect = img.naturalWidth / img.naturalHeight;
+    const width = aspect >= 1 ? LQIP_SIZE : Math.round(LQIP_SIZE * aspect);
+    const height = aspect >= 1 ? Math.round(LQIP_SIZE / aspect) : LQIP_SIZE;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas.toDataURL("image/jpeg", LQIP_QUALITY);
+  } catch {
+    return null;
+  }
+}
+__name(createLQIP, "createLQIP");
+var imageDebug = createMediaLogger("ImageViewer");
+function ImageToolbar({
+  scale,
+  transform,
+  onRotate,
+  onFlipH,
+  onFlipV,
+  onZoomPreset,
+  onExpand
+}) {
+  const { zoomIn, zoomOut, resetTransform } = useControls();
+  const zoomLabel = useMemo(() => {
+    const percent = Math.round(scale * 100);
+    return `${percent}%`;
+  }, [scale]);
+  return /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7",
+        onClick: () => zoomOut(),
+        title: "Zoom out",
+        children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2 min-w-[52px] font-mono text-xs", children: zoomLabel }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "center", className: "min-w-[80px]", children: ZOOM_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: () => onZoomPreset(preset.value),
+          className: "text-xs justify-center",
+          children: preset.label
+        },
+        preset.label
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7",
+        onClick: () => zoomIn(),
+        title: "Zoom in",
+        children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7",
+        onClick: () => resetTransform(),
+        title: "Fit to view",
+        children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn("h-7 w-7", transform.flipH && "bg-accent"),
+        onClick: onFlipH,
+        title: "Flip horizontal",
+        children: /* @__PURE__ */ jsx(FlipHorizontal, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn("h-7 w-7", transform.flipV && "bg-accent"),
+        onClick: onFlipV,
+        title: "Flip vertical",
+        children: /* @__PURE__ */ jsx(FlipVertical, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7",
+        onClick: onRotate,
+        title: "Rotate 90\xB0",
+        children: /* @__PURE__ */ jsx(RotateCw, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    transform.rotation !== 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground font-mono pl-1", children: [
+      transform.rotation,
+      "\xB0"
+    ] }),
+    onExpand && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          onClick: onExpand,
+          title: "Open in fullscreen",
+          children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] })
+  ] });
+}
+__name(ImageToolbar, "ImageToolbar");
+function ImageInfo({ src }) {
+  const { getDimensions, cacheDimensions } = useImageCache();
+  const [dimensions, setDimensions] = useState(null);
+  useEffect(() => {
+    const cached = getDimensions(src);
+    if (cached) {
+      setDimensions({ w: cached.width, h: cached.height });
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      const dims = { w: img.naturalWidth, h: img.naturalHeight };
+      setDimensions(dims);
+      cacheDimensions(src, { width: dims.w, height: dims.h });
+    };
+    img.src = src;
+  }, [src, getDimensions, cacheDimensions]);
+  if (!dimensions) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "absolute top-3 right-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono", children: [
+    dimensions.w,
+    " \xD7 ",
+    dimensions.h
+  ] });
+}
+__name(ImageInfo, "ImageInfo");
+function useImageTransform(options = {}) {
+  const { resetKey } = options;
+  const [transform, setTransform] = useState(DEFAULT_TRANSFORM);
+  useEffect(() => {
+    setTransform(DEFAULT_TRANSFORM);
+  }, [resetKey]);
+  const rotate = useCallback(() => {
+    setTransform((prev) => ({
+      ...prev,
+      rotation: (prev.rotation + 90) % 360
+    }));
+  }, []);
+  const flipH = useCallback(() => {
+    setTransform((prev) => ({
+      ...prev,
+      flipH: !prev.flipH
+    }));
+  }, []);
+  const flipV = useCallback(() => {
+    setTransform((prev) => ({
+      ...prev,
+      flipV: !prev.flipV
+    }));
+  }, []);
+  const reset = useCallback(() => {
+    setTransform(DEFAULT_TRANSFORM);
+  }, []);
+  const transformStyle = useMemo(() => {
+    const transforms = [];
+    if (transform.rotation !== 0) {
+      transforms.push(`rotate(${transform.rotation}deg)`);
+    }
+    if (transform.flipH) {
+      transforms.push("scaleX(-1)");
+    }
+    if (transform.flipV) {
+      transforms.push("scaleY(-1)");
+    }
+    return transforms.join(" ") || "none";
+  }, [transform]);
+  return {
+    transform,
+    rotate,
+    flipH,
+    flipV,
+    reset,
+    transformStyle
+  };
+}
+__name(useImageTransform, "useImageTransform");
+function useImageLoading(options) {
+  const { content, mimeType, src: directSrc } = options;
+  const getOrCreateBlobUrl = useMediaCacheStore.getState().getOrCreateBlobUrl;
+  const releaseBlobUrl = useMediaCacheStore.getState().releaseBlobUrl;
+  const [src, setSrc] = useState(null);
+  const [lqip, setLqip] = useState(null);
+  const [isFullyLoaded, setIsFullyLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  const contentKeyRef = useRef(null);
+  const isMountedRef = useRef(true);
+  const size = content ? typeof content === "string" ? content.length : content.byteLength : 0;
+  const hasContent = directSrc ? true : size > 0;
+  const useProgressiveLoading = directSrc ? false : size > PROGRESSIVE_LOADING_THRESHOLD;
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (contentKeyRef.current) {
+        useMediaCacheStore.getState().releaseBlobUrl(contentKeyRef.current);
+        contentKeyRef.current = null;
+      }
+    };
+  }, []);
+  useEffect(() => {
+    setError(null);
+    if (directSrc) {
+      imageDebug.load(directSrc, "url");
+      setSrc(directSrc);
+      setIsFullyLoaded(true);
+      return;
+    }
+    if (!hasContent) {
+      setSrc(null);
+      return;
+    }
+    if (size > MAX_IMAGE_SIZE) {
+      const sizeMB = (size / 1024 / 1024).toFixed(1);
+      const errorMsg = `Image too large: ${sizeMB}MB (maximum: 50MB)`;
+      imageDebug.error(errorMsg, { size, sizeMB, maxSize: MAX_IMAGE_SIZE });
+      setError(errorMsg);
+      setSrc(null);
+      return;
+    }
+    if (size > WARNING_IMAGE_SIZE) {
+      const sizeMB = (size / 1024 / 1024).toFixed(1);
+      imageDebug.warn(`Large image: ${sizeMB}MB - may impact performance`);
+    }
+    if (typeof content === "string") {
+      if (content.startsWith("data:")) {
+        imageDebug.load(content.slice(0, 50) + "...", "data-url");
+        setSrc(content);
+        return;
+      }
+      const encoder = new TextEncoder();
+      const buffer = encoder.encode(content).buffer;
+      const contentKey2 = generateContentKey(buffer);
+      if (contentKeyRef.current && contentKeyRef.current !== contentKey2) {
+        releaseBlobUrl(contentKeyRef.current);
+      }
+      contentKeyRef.current = contentKey2;
+      const url2 = getOrCreateBlobUrl(contentKey2, buffer, mimeType || "image/png");
+      imageDebug.load(url2, "blob");
+      imageDebug.state("loaded", { size, mimeType, contentKey: contentKey2 });
+      setSrc(url2);
+      return;
+    }
+    const contentKey = generateContentKey(content);
+    if (contentKeyRef.current && contentKeyRef.current !== contentKey) {
+      releaseBlobUrl(contentKeyRef.current);
+    }
+    contentKeyRef.current = contentKey;
+    const url = getOrCreateBlobUrl(contentKey, content, mimeType || "image/png");
+    imageDebug.load(url, "blob");
+    imageDebug.state("loaded", { size, mimeType, contentKey });
+    setSrc(url);
+  }, [content, mimeType, hasContent, size, directSrc]);
+  useEffect(() => {
+    if (!src || !useProgressiveLoading) {
+      setLqip(null);
+      setIsFullyLoaded(true);
+      return;
+    }
+    setIsFullyLoaded(false);
+    imageDebug.state("progressive loading", { size });
+    createLQIP(src).then((placeholder) => {
+      if (placeholder) {
+        imageDebug.debug("LQIP created");
+        setLqip(placeholder);
+      }
+    });
+    const img = new Image();
+    img.onload = () => {
+      imageDebug.state("fully loaded");
+      setIsFullyLoaded(true);
+    };
+    img.onerror = () => {
+      imageDebug.error("Failed to load full image");
+    };
+    img.src = src;
+  }, [src, useProgressiveLoading, size]);
+  return {
+    src,
+    lqip,
+    isFullyLoaded,
+    useProgressiveLoading,
+    error,
+    contentKey: contentKeyRef.current,
+    size,
+    hasContent
+  };
+}
+__name(useImageLoading, "useImageLoading");
+function ImageViewer({ file, content, src: directSrc, inDialog = false }) {
+  const [scale, setScale] = useState(1);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const containerRef = useRef(null);
+  const controlsRef = useRef(null);
+  const {
+    src,
+    lqip,
+    isFullyLoaded,
+    useProgressiveLoading,
+    error,
+    hasContent
+  } = useImageLoading({ content, mimeType: file.mimeType, src: directSrc });
+  useEffect(() => {
+    setLoadError(false);
+  }, [src]);
+  const { transform, rotate, flipH, flipV, transformStyle } = useImageTransform({
+    resetKey: file.path
+  });
+  const handleZoomPreset = useCallback((value) => {
+    if (!controlsRef.current) return;
+    if (value === "fit") {
+      controlsRef.current.resetTransform();
+    } else {
+      controlsRef.current.setTransform(0, 0, value);
+    }
+  }, []);
+  const handleExpand = useCallback(() => {
+    setDialogOpen(true);
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = /* @__PURE__ */ __name((e) => {
+      if (!containerRef.current?.contains(document.activeElement) && document.activeElement !== containerRef.current) {
+        return;
+      }
+      const controls = controlsRef.current;
+      if (!controls) return;
+      switch (e.key) {
+        case "+":
+        case "=":
+          e.preventDefault();
+          controls.zoomIn();
+          break;
+        case "-":
+          e.preventDefault();
+          controls.zoomOut();
+          break;
+        case "0":
+          e.preventDefault();
+          controls.resetTransform();
+          break;
+        case "r":
+          if (!e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            rotate();
+          }
+          break;
+      }
+    }, "handleKeyDown");
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [rotate]);
+  if (error || loadError) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-3 bg-muted/30 p-4", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-12 h-12 text-destructive/70" }),
+      /* @__PURE__ */ jsxs(Alert$1, { variant: "destructive", className: "max-w-md", children: [
+        /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(AlertDescription$1, { children: error || "Failed to load image" })
+      ] })
+    ] });
+  }
+  if (!hasContent) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30", children: [
+      /* @__PURE__ */ jsx(ImageIcon, { className: "w-12 h-12 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No image content" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: 0,
+      className: cn$1(
+        "flex-1 h-full relative overflow-hidden outline-none",
+        "bg-[length:16px_16px]",
+        "[background-color:hsl(var(--muted)/0.2)]",
+        "[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]",
+        "[background-position:0_0,0_8px,8px_-8px,-8px_0px]"
+      ),
+      children: [
+        src && /* @__PURE__ */ jsx(ImageInfo, { src }),
+        useProgressiveLoading && !isFullyLoaded && /* @__PURE__ */ jsxs("div", { className: "absolute top-3 left-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-pulse" }),
+          "Loading..."
+        ] }),
+        /* @__PURE__ */ jsxs(
+          TransformWrapper,
+          {
+            initialScale: 1,
+            minScale: 0.1,
+            maxScale: 8,
+            centerOnInit: true,
+            centerZoomedOut: true,
+            onTransformed: (ref, state) => {
+              setScale(state.scale);
+              controlsRef.current = ref;
+            },
+            onInit: (ref) => {
+              controlsRef.current = ref;
+            },
+            wheel: { step: 0.1 },
+            doubleClick: { mode: "toggle", step: 2 },
+            panning: { velocityDisabled: false },
+            children: [
+              /* @__PURE__ */ jsx(
+                ImageToolbar,
+                {
+                  scale,
+                  transform,
+                  onRotate: rotate,
+                  onFlipH: flipH,
+                  onFlipV: flipV,
+                  onZoomPreset: handleZoomPreset,
+                  onExpand: !inDialog ? handleExpand : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TransformComponent,
+                {
+                  wrapperClass: "!w-full !h-full cursor-grab active:cursor-grabbing",
+                  contentClass: "!w-full !h-full flex items-center justify-center",
+                  children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                    useProgressiveLoading && lqip && !isFullyLoaded && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: lqip,
+                        alt: "",
+                        "aria-hidden": "true",
+                        className: "absolute inset-0 max-w-full max-h-full object-contain select-none",
+                        style: {
+                          transform: transformStyle,
+                          filter: "blur(20px)",
+                          transition: "opacity 0.3s ease-out",
+                          opacity: isFullyLoaded ? 0 : 1
+                        },
+                        draggable: false
+                      }
+                    ),
+                    src && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src,
+                        alt: file.name,
+                        className: "max-w-full max-h-full object-contain select-none",
+                        style: {
+                          transform: transformStyle,
+                          transition: useProgressiveLoading ? "transform 0.15s ease-out, opacity 0.3s ease-out" : "transform 0.15s ease-out",
+                          opacity: useProgressiveLoading && !isFullyLoaded ? 0 : 1
+                        },
+                        draggable: false,
+                        crossOrigin: "anonymous",
+                        onError: () => setLoadError(true)
+                      }
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        !inDialog && /* @__PURE__ */ jsx(Dialog, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[95vw] max-h-[95vh] w-[95vw] h-[95vh] p-0 overflow-hidden [&>button]:hidden flex flex-col", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: file.name }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 border-b shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: file.name }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(ImageViewer, { file, content, src: directSrc, inDialog: true }) })
+        ] }) })
+      ]
+    }
+  );
+}
+__name(ImageViewer, "ImageViewer");
+var extractTextFromChildren = /* @__PURE__ */ __name((children) => {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (React17.isValidElement(children)) {
+    const props = children.props;
+    return extractTextFromChildren(props.children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join("");
+  }
+  return "";
+}, "extractTextFromChildren");
+var CodeBlock = /* @__PURE__ */ __name(({ code, language, isUser, isCompact = false }) => {
+  const theme = useResolvedTheme();
+  return /* @__PURE__ */ jsxs("div", { className: "relative group my-3", children: [
+    /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        value: code,
+        variant: "ghost",
+        className: `
+          absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+          h-8 w-8
+          ${isUser ? "hover:bg-white/20 text-white" : "hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground"}
+        `,
+        title: "Copy code"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PrettyCode_default,
+      {
+        data: code,
+        language,
+        className: isCompact ? "text-xs" : "text-sm",
+        customBg: isUser ? "bg-white/10" : "bg-muted dark:bg-muted",
+        mode: theme,
+        isCompact
+      }
+    )
+  ] });
+}, "CodeBlock");
+var createMarkdownComponents = /* @__PURE__ */ __name((isUser = false, isCompact = false) => {
+  const textSize = isCompact ? "text-xs" : "text-sm";
+  const headingBase = isCompact ? "text-sm" : "text-base";
+  const headingSm = isCompact ? "text-xs" : "text-sm";
+  return {
+    // Headings - scaled for chat context
+    h1: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h1", { className: `${headingBase} font-bold mb-2 mt-3 first:mt-0`, children }), "h1"),
+    h2: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h2", { className: `${headingSm} font-bold mb-2 mt-3 first:mt-0`, children }), "h2"),
+    h3: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h3", { className: `${headingSm} font-semibold mb-1 mt-2 first:mt-0`, children }), "h3"),
+    h4: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h4", { className: `${headingSm} font-semibold mb-1 mt-2 first:mt-0`, children }), "h4"),
+    h5: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h5", { className: `${headingSm} font-medium mb-1 mt-2 first:mt-0`, children }), "h5"),
+    h6: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h6", { className: `${headingSm} font-medium mb-1 mt-2 first:mt-0`, children }), "h6"),
+    // Paragraphs - compact spacing for chat
+    p: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("p", { className: `${textSize} mb-2 last:mb-0 leading-relaxed break-words`, children }), "p"),
+    // Lists - compact
+    ul: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("ul", { className: `list-disc list-inside mb-2 space-y-1 ${textSize}`, children }), "ul"),
+    ol: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("ol", { className: `list-decimal list-inside mb-2 space-y-1 ${textSize}`, children }), "ol"),
+    li: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("li", { className: "break-words", children }), "li"),
+    // Links - appropriate for chat context
+    a: /* @__PURE__ */ __name(({ href, children }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        className: `${textSize} text-primary underline hover:text-primary/80 transition-colors break-all`,
+        target: href?.startsWith("http") ? "_blank" : void 0,
+        rel: href?.startsWith("http") ? "noopener noreferrer" : void 0,
+        children
+      }
+    ), "a"),
+    // Code blocks - using CodeBlock component with copy functionality
+    pre: /* @__PURE__ */ __name(({ children }) => {
+      let codeContent = "";
+      let language = "plaintext";
+      if (React17.isValidElement(children)) {
+        const child = children;
+        if (child.type === "code" || typeof child.type === "function" && child.type.name === "code") {
+          const codeProps = child.props;
+          const rawClassName = codeProps.className;
+          language = rawClassName?.replace(/language-/, "").trim() || "plaintext";
+          codeContent = extractTextFromChildren(codeProps.children).trim();
+        } else {
+          codeContent = extractTextFromChildren(children).trim();
+        }
+      } else {
+        codeContent = extractTextFromChildren(children).trim();
+      }
+      if (!codeContent) {
+        return /* @__PURE__ */ jsx("div", { className: "my-3 p-3 bg-muted rounded text-sm text-muted-foreground", children: "No content available" });
+      }
+      if (language === "mermaid") {
+        return /* @__PURE__ */ jsx("div", { className: "my-3 max-w-full overflow-x-auto", children: /* @__PURE__ */ jsx(Mermaid_default, { chart: codeContent, className: "max-w-[600px] mx-auto", isCompact }) });
+      }
+      try {
+        return /* @__PURE__ */ jsx(CodeBlock, { code: codeContent, language, isUser, isCompact });
+      } catch (error) {
+        console.warn("CodeBlock failed, using fallback:", error);
+        return /* @__PURE__ */ jsxs("div", { className: "relative group my-3", children: [
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              value: codeContent,
+              variant: "ghost",
+              className: `
+              absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+              h-8 w-8
+              ${isUser ? "hover:bg-white/20 text-white" : "hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground"}
+            `,
+              title: "Copy code"
+            }
+          ),
+          /* @__PURE__ */ jsx("pre", { className: `
+            p-3 rounded text-xs font-mono overflow-x-auto
+            ${isUser ? "bg-white/10 text-white" : "bg-muted text-foreground"}
+          `, children: /* @__PURE__ */ jsx("code", { children: codeContent }) })
+        ] });
+      }
+    }, "pre"),
+    // Inline code
+    code: /* @__PURE__ */ __name(({ children, className }) => {
+      if (className?.includes("language-")) {
+        return /* @__PURE__ */ jsx("code", { className, children });
+      }
+      const codeContent = extractTextFromChildren(children);
+      return /* @__PURE__ */ jsx("code", { className: "px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-foreground break-all", children: codeContent });
+    }, "code"),
+    // Blockquotes
+    blockquote: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("blockquote", { className: `${textSize} border-l-2 border-border pl-3 my-2 italic text-muted-foreground break-words`, children }), "blockquote"),
+    // Tables - compact for chat
+    table: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto my-3", children: /* @__PURE__ */ jsx("table", { className: `min-w-full ${textSize} border-collapse`, children }) }), "table"),
+    thead: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children }), "thead"),
+    tbody: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("tbody", { children }), "tbody"),
+    tr: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/50", children }), "tr"),
+    th: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left font-medium break-words", children }), "th"),
+    td: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1 break-words", children }), "td"),
+    // Horizontal rule
+    hr: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("hr", { className: "my-3 border-0 h-px bg-border" }), "hr"),
+    // Strong and emphasis
+    strong: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }), "strong"),
+    em: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }), "em")
+  };
+}, "createMarkdownComponents");
+var MarkdownMessage = /* @__PURE__ */ __name(({
+  content,
+  className = "",
+  isUser = false,
+  isCompact = false
+}) => {
+  const components = React17.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
+  const textSizeClass = isCompact ? "text-xs" : "text-sm";
+  const proseClass = isCompact ? "prose-xs" : "prose-sm";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
+        ${isUser ? "prose-invert" : "dark:prose-invert"}
+        ${className}
+      `,
+      style: {
+        // Inherit colors from parent - fixes issues with external CSS variables
+        "--tw-prose-body": "inherit",
+        "--tw-prose-headings": "inherit",
+        "--tw-prose-bold": "inherit",
+        "--tw-prose-links": "inherit",
+        color: "inherit"
+      },
+      children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          components,
+          children: content
+        }
+      )
+    }
+  );
+}, "MarkdownMessage");
+
+export { ArrayFieldItemTemplate, ArrayFieldTemplate, AudioReactiveCover, BaseInputTemplate, COLOR_SCHEMES2 as COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, EFFECT_ANIMATIONS, ErrorListTemplate, FieldTemplate, GlowEffect, HybridAudioPlayer, HybridAudioProvider, HybridSimplePlayer, HybridWaveform, INTENSITY_CONFIG, INTENSITY_INFO, ImageViewer, JsonSchemaForm, LottiePlayer, MarkdownMessage, Mermaid_default as Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, OpenapiViewer_default as OpenapiViewer, OrbsEffect, SelectWidget, SliderWidget, SpotlightEffect, StreamProvider, SwitchWidget, TextWidget, VARIANT_INFO, VideoControls, VideoErrorFallback, VideoPlayer, VideoPlayerProvider, VidstackProvider, VisualizationProvider, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map