@krizaka/ui 2.2.0 → 2.4.0

package/dist/video-trimmer.d.ts

@@ -0,0 +1,142 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const videoTrimmer: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            kept?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            strip?: tailwind_variants.ClassValue;
+            frame?: tailwind_variants.ClassValue;
+            shade?: tailwind_variants.ClassValue;
+            range?: tailwind_variants.ClassValue;
+            grip?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            playhead?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            kept?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            strip?: tailwind_variants.ClassValue;
+            frame?: tailwind_variants.ClassValue;
+            shade?: tailwind_variants.ClassValue;
+            range?: tailwind_variants.ClassValue;
+            grip?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            playhead?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    kept: string;
+    track: string;
+    strip: string;
+    frame: string;
+    shade: string;
+    range: string;
+    handle: string;
+    grip: string;
+    playhead: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            kept?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            strip?: tailwind_variants.ClassValue;
+            frame?: tailwind_variants.ClassValue;
+            shade?: tailwind_variants.ClassValue;
+            range?: tailwind_variants.ClassValue;
+            grip?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            playhead?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    kept: string;
+    track: string;
+    strip: string;
+    frame: string;
+    shade: string;
+    range: string;
+    handle: string;
+    grip: string;
+    playhead: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    header: string;
+    kept: string;
+    track: string;
+    strip: string;
+    frame: string;
+    shade: string;
+    range: string;
+    handle: string;
+    grip: string;
+    playhead: string;
+}>>;
+type Part = keyof ReturnType<typeof videoTrimmer>;
+type VideoTrimmerLabels = {
+    /** The start handle ("Start"). */
+    start: string;
+    /** The end handle ("End"). */
+    end: string;
+    /** The playhead ("Playhead"). */
+    playhead: string;
+    /** The length kept, above the track: `(length) => length + " kept"` (the length already formatted). */
+    kept: (length: string) => string;
+};
+declare const videoTrimmerLabels: VideoTrimmerLabels;
+type VideoTrimmerProps = {
+    /** The length of the clip, in seconds. */
+    duration: number;
+    /** The part kept, `[start, end]` in seconds (controlled). */
+    value?: readonly [number, number];
+    /** The part kept at first, uncontrolled. Default: the whole clip. */
+    defaultValue?: readonly [number, number];
+    /** Called on every move of a handle. */
+    onValueChange?: (value: [number, number]) => void;
+    /** Called once a drag or a key press ends: render a preview, save. */
+    onValueCommit?: (value: [number, number]) => void;
+    /** The time played, in seconds: shows the playhead. */
+    time?: number;
+    /** Called when the playhead is moved (a drag on the track, the arrows on the playhead). */
+    onSeek?: (time: number) => void;
+    /** The shortest part that can be kept, in seconds. Default 0.5. */
+    minLength?: number;
+    /** One arrow press, in seconds. Default 0.1. */
+    step?: number;
+    /** Shift + arrow, Page Up / Page Down, in seconds. Default 1. */
+    largeStep?: number;
+    /** Pictures of the clip, in order: the filmstrip. */
+    frames?: readonly string[];
+    /** Track content instead of the filmstrip (a waveform, a coloured band). */
+    children?: React.ReactNode;
+    /** A time as read and shown. Default `m:ss` with tenths. */
+    formatTime?: (seconds: number) => string;
+    /** Shows the times and the length kept above the track. Default `true`. */
+    showHeader?: boolean;
+    /** Not available (a render is running). */
+    disabled?: boolean;
+    /** Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`. */
+    classNames?: Partial<Record<Part, string>>;
+    /** The content of a handle (default: two grip lines). */
+    renderHandle?: (edge: "start" | "end") => React.ReactNode;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<VideoTrimmerLabels>;
+};
+/** Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included. */
+declare function VideoTrimmer({ duration, value: valueProp, defaultValue, onValueChange, onValueCommit, time, onSeek, minLength, step, largeStep, frames, children, formatTime, showHeader, disabled, classNames, renderHandle, labels: given, }: VideoTrimmerProps): React.JSX.Element;
+
+export { VideoTrimmer, type VideoTrimmerLabels, type VideoTrimmerProps, videoTrimmer, videoTrimmerLabels };

package/dist/video-trimmer.js

@@ -0,0 +1,193 @@
+"use client";
+import {
+  clamp,
+  formatClock
+} from "./chunk-EUPTXKH7.js";
+
+// src/video-trimmer/video-trimmer.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var videoTrimmer = tv({
+  slots: {
+    root: "w-full select-none",
+    header: "mb-2 flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary",
+    kept: "rounded-full bg-accent-soft px-2.5 py-0.5 font-sans text-xs font-semibold text-fg",
+    track: "relative h-16 touch-none rounded-xl bg-surface-2 data-[disabled]:opacity-50",
+    strip: "pointer-events-none absolute inset-0 flex overflow-hidden rounded-xl",
+    frame: "h-full min-w-0 flex-1 object-cover",
+    shade: "pointer-events-none absolute inset-y-0 bg-scrim-strong",
+    range: "pointer-events-none absolute inset-y-0 border-y-[3px] border-accent",
+    handle: "absolute inset-y-0 z-10 flex w-6 cursor-ew-resize items-center justify-center bg-accent text-on-accent shadow-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 data-[edge=start]:rounded-l-xl data-[edge=end]:-translate-x-full data-[edge=end]:rounded-r-xl",
+    grip: "flex gap-[3px] [&>span]:h-5 [&>span]:w-[2px] [&>span]:rounded-sm [&>span]:bg-on-accent/70",
+    playhead: "absolute -inset-y-1.5 z-20 w-[3px] -translate-x-1/2 cursor-ew-resize rounded-full bg-fg shadow-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  }
+});
+var videoTrimmerLabels = {
+  start: "Start",
+  end: "End",
+  playhead: "Playhead",
+  kept: (length) => `${length} kept`
+};
+var tenths = (seconds) => `${formatClock(seconds)}.${Math.floor(Math.max(0, seconds) % 1 * 10)}`;
+function VideoTrimmer({
+  duration,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  time,
+  onSeek,
+  minLength = 0.5,
+  step = 0.1,
+  largeStep = 1,
+  frames,
+  children,
+  formatTime = tenths,
+  showHeader = true,
+  disabled,
+  classNames = {},
+  renderHandle,
+  labels: given
+}) {
+  const labels = { ...videoTrimmerLabels, ...given };
+  const s = videoTrimmer();
+  const track = React.useRef(null);
+  const grip = React.useRef(null);
+  const [inner, setInner] = React.useState(() => [defaultValue?.[0] ?? 0, defaultValue?.[1] ?? duration]);
+  const [start, end] = valueProp ?? inner;
+  const total = duration > 0 ? duration : 1;
+  const pct = (seconds) => clamp(seconds, 0, total) / total * 100;
+  const set = (next, commit = false) => {
+    if (!valueProp) setInner(next);
+    onValueChange?.(next);
+    if (commit) onValueCommit?.(next);
+  };
+  const move = (edge, to, commit = false) => {
+    const next = edge === "start" ? [clamp(to, 0, end - minLength), end] : [start, clamp(to, start + minLength, duration)];
+    set([Math.round(next[0] * 1e3) / 1e3, Math.round(next[1] * 1e3) / 1e3], commit);
+  };
+  const seek = (to) => onSeek?.(clamp(to, start, Math.max(start, end - 0.05)));
+  const at = (clientX) => {
+    const box = track.current?.getBoundingClientRect();
+    if (!box || box.width === 0) return 0;
+    return clamp((clientX - box.left) / box.width * duration, 0, duration);
+  };
+  const keys = (which) => (event) => {
+    const current = which === "start" ? start : which === "end" ? end : time ?? start;
+    const big = largeStep;
+    const small = event.shiftKey ? largeStep : step;
+    const target = {
+      ArrowLeft: current - small,
+      ArrowDown: current - small,
+      ArrowRight: current + small,
+      ArrowUp: current + small,
+      PageDown: current - big,
+      PageUp: current + big,
+      Home: 0,
+      End: duration
+    };
+    const to = target[event.key];
+    if (to === void 0 || disabled) return;
+    event.preventDefault();
+    if (which === "playhead") seek(to);
+    else move(which, to, true);
+  };
+  const handle = (edge) => {
+    const own = edge === "start" ? start : end;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": edge === "start" ? labels.start : labels.end,
+        "aria-valuemin": edge === "start" ? 0 : Math.round((start + minLength) * 10) / 10,
+        "aria-valuemax": edge === "start" ? Math.round((end - minLength) * 10) / 10 : Math.round(duration * 10) / 10,
+        "aria-valuenow": Math.round(own * 10) / 10,
+        "aria-valuetext": formatTime(own),
+        "aria-disabled": disabled || void 0,
+        "data-edge": edge,
+        className: s.handle({ className: classNames.handle }),
+        style: { left: `${pct(own)}%` },
+        onPointerDown: (event) => {
+          if (disabled) return;
+          event.stopPropagation();
+          track.current?.setPointerCapture?.(event.pointerId);
+          grip.current = edge;
+        },
+        onKeyDown: keys(edge),
+        children: renderHandle ? renderHandle(edge) : /* @__PURE__ */ jsxs("span", { className: s.grip({ className: classNames.grip }), children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {})
+        ] })
+      },
+      edge
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className: classNames.root }), children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: s.header({ className: classNames.header }), children: [
+      /* @__PURE__ */ jsx("span", { children: formatTime(start) }),
+      /* @__PURE__ */ jsx("span", { className: s.kept({ className: classNames.kept }), children: labels.kept(formatTime(end - start)) }),
+      /* @__PURE__ */ jsx("span", { children: formatTime(end) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: track,
+        className: s.track({ className: classNames.track }),
+        "data-disabled": disabled ? "" : void 0,
+        onPointerDown: (event) => {
+          if (disabled) return;
+          track.current?.setPointerCapture?.(event.pointerId);
+          const t = at(event.clientX);
+          grip.current = onSeek ? "playhead" : Math.abs(t - start) < Math.abs(t - end) ? "start" : "end";
+          if (grip.current === "playhead") seek(t);
+          else move(grip.current, t);
+        },
+        onPointerMove: (event) => {
+          if (!grip.current) return;
+          const t = at(event.clientX);
+          if (grip.current === "playhead") seek(t);
+          else move(grip.current, t);
+        },
+        onPointerUp: () => {
+          if (grip.current && grip.current !== "playhead") onValueCommit?.([start, end]);
+          grip.current = null;
+        },
+        onPointerCancel: () => {
+          grip.current = null;
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: s.strip({ className: classNames.strip }), children: children ?? frames?.map((src, i) => /* @__PURE__ */ jsx("img", { src, alt: "", draggable: false, className: s.frame({ className: classNames.frame }) }, `${i}-${src}`)) }),
+          /* @__PURE__ */ jsx("div", { className: s.shade({ className: classNames.shade }), style: { left: 0, width: `${pct(start)}%`, borderRadius: "0.75rem 0 0 0.75rem" } }),
+          /* @__PURE__ */ jsx("div", { className: s.shade({ className: classNames.shade }), style: { right: 0, width: `${100 - pct(end)}%`, borderRadius: "0 0.75rem 0.75rem 0" } }),
+          /* @__PURE__ */ jsx("div", { className: s.range({ className: classNames.range }), style: { left: `${pct(start)}%`, right: `${100 - pct(end)}%` } }),
+          time !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "slider",
+              tabIndex: disabled || !onSeek ? -1 : 0,
+              "aria-label": labels.playhead,
+              "aria-valuemin": Math.round(start * 10) / 10,
+              "aria-valuemax": Math.round(end * 10) / 10,
+              "aria-valuenow": Math.round(time * 10) / 10,
+              "aria-valuetext": formatTime(time),
+              "aria-readonly": !onSeek || void 0,
+              className: s.playhead({ className: classNames.playhead }),
+              style: { left: `${pct(time)}%` },
+              onKeyDown: onSeek ? keys("playhead") : void 0
+            }
+          ),
+          handle("start"),
+          handle("end")
+        ]
+      }
+    )
+  ] });
+}
+export {
+  VideoTrimmer,
+  videoTrimmer,
+  videoTrimmerLabels
+};
+//# sourceMappingURL=video-trimmer.js.map

package/dist/video-trimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/video-trimmer/video-trimmer.tsx"],"sourcesContent":["// Client. The trim timeline of a video editor: the clip as a filmstrip (or any track content), the part kept framed\n// between two edge handles — each a `slider` named by a prop, its value read as a time, never past the other one —\n// the outside dimmed, and a playhead to scrub. The handles sit on their value by their outer edge (the start handle\n// to the right of its value, the end handle to its left), so the frame encloses exactly what is kept. Every part\n// takes its own classes (`classNames`) and the handles their own content (`renderHandle`).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp, formatClock } from \"../media\";\n\nexport const videoTrimmer = tv({\n  slots: {\n    root: \"w-full select-none\",\n    header: \"mb-2 flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n    kept: \"rounded-full bg-accent-soft px-2.5 py-0.5 font-sans text-xs font-semibold text-fg\",\n    track: \"relative h-16 touch-none rounded-xl bg-surface-2 data-[disabled]:opacity-50\",\n    strip: \"pointer-events-none absolute inset-0 flex overflow-hidden rounded-xl\",\n    frame: \"h-full min-w-0 flex-1 object-cover\",\n    shade: \"pointer-events-none absolute inset-y-0 bg-scrim-strong\",\n    range: \"pointer-events-none absolute inset-y-0 border-y-[3px] border-accent\",\n    handle:\n      \"absolute inset-y-0 z-10 flex w-6 cursor-ew-resize items-center justify-center bg-accent text-on-accent shadow-md \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"data-[edge=start]:rounded-l-xl data-[edge=end]:-translate-x-full data-[edge=end]:rounded-r-xl\",\n    grip: \"flex gap-[3px] [&>span]:h-5 [&>span]:w-[2px] [&>span]:rounded-sm [&>span]:bg-on-accent/70\",\n    playhead:\n      \"absolute -inset-y-1.5 z-20 w-[3px] -translate-x-1/2 cursor-ew-resize rounded-full bg-fg shadow-md \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\ntype Part = keyof ReturnType<typeof videoTrimmer>;\n\nexport type VideoTrimmerLabels = {\n  /** The start handle (\"Start\"). */\n  start: string;\n  /** The end handle (\"End\"). */\n  end: string;\n  /** The playhead (\"Playhead\"). */\n  playhead: string;\n  /** The length kept, above the track: `(length) => length + \" kept\"` (the length already formatted). */\n  kept: (length: string) => string;\n};\n\nexport const videoTrimmerLabels: VideoTrimmerLabels = {\n  start: \"Start\",\n  end: \"End\",\n  playhead: \"Playhead\",\n  kept: (length) => `${length} kept`,\n};\n\nexport type VideoTrimmerProps = {\n  /** The length of the clip, in seconds. */\n  duration: number;\n  /** The part kept, `[start, end]` in seconds (controlled). */\n  value?: readonly [number, number];\n  /** The part kept at first, uncontrolled. Default: the whole clip. */\n  defaultValue?: readonly [number, number];\n  /** Called on every move of a handle. */\n  onValueChange?: (value: [number, number]) => void;\n  /** Called once a drag or a key press ends: render a preview, save. */\n  onValueCommit?: (value: [number, number]) => void;\n  /** The time played, in seconds: shows the playhead. */\n  time?: number;\n  /** Called when the playhead is moved (a drag on the track, the arrows on the playhead). */\n  onSeek?: (time: number) => void;\n  /** The shortest part that can be kept, in seconds. Default 0.5. */\n  minLength?: number;\n  /** One arrow press, in seconds. Default 0.1. */\n  step?: number;\n  /** Shift + arrow, Page Up / Page Down, in seconds. Default 1. */\n  largeStep?: number;\n  /** Pictures of the clip, in order: the filmstrip. */\n  frames?: readonly string[];\n  /** Track content instead of the filmstrip (a waveform, a coloured band). */\n  children?: React.ReactNode;\n  /** A time as read and shown. Default `m:ss` with tenths. */\n  formatTime?: (seconds: number) => string;\n  /** Shows the times and the length kept above the track. Default `true`. */\n  showHeader?: boolean;\n  /** Not available (a render is running). */\n  disabled?: boolean;\n  /** Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`. */\n  classNames?: Partial<Record<Part, string>>;\n  /** The content of a handle (default: two grip lines). */\n  renderHandle?: (edge: \"start\" | \"end\") => React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<VideoTrimmerLabels>;\n};\n\nconst tenths = (seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}`;\n\ntype Grip = \"start\" | \"end\" | \"playhead\";\n\n/** Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included. */\nexport function VideoTrimmer({\n  duration,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  time,\n  onSeek,\n  minLength = 0.5,\n  step = 0.1,\n  largeStep = 1,\n  frames,\n  children,\n  formatTime = tenths,\n  showHeader = true,\n  disabled,\n  classNames = {},\n  renderHandle,\n  labels: given,\n}: VideoTrimmerProps) {\n  const labels = { ...videoTrimmerLabels, ...given };\n  const s = videoTrimmer();\n  const track = React.useRef<HTMLDivElement>(null);\n  const grip = React.useRef<Grip | null>(null);\n  const [inner, setInner] = React.useState<[number, number]>(() => [defaultValue?.[0] ?? 0, defaultValue?.[1] ?? duration]);\n  const [start, end] = valueProp ?? inner;\n  const total = duration > 0 ? duration : 1;\n  const pct = (seconds: number) => (clamp(seconds, 0, total) / total) * 100;\n\n  const set = (next: [number, number], commit = false) => {\n    if (!valueProp) setInner(next);\n    onValueChange?.(next);\n    if (commit) onValueCommit?.(next);\n  };\n  const move = (edge: \"start\" | \"end\", to: number, commit = false) => {\n    const next: [number, number] =\n      edge === \"start\" ? [clamp(to, 0, end - minLength), end] : [start, clamp(to, start + minLength, duration)];\n    set([Math.round(next[0] * 1000) / 1000, Math.round(next[1] * 1000) / 1000], commit);\n  };\n  const seek = (to: number) => onSeek?.(clamp(to, start, Math.max(start, end - 0.05)));\n\n  const at = (clientX: number) => {\n    const box = track.current?.getBoundingClientRect();\n    if (!box || box.width === 0) return 0;\n    return clamp(((clientX - box.left) / box.width) * duration, 0, duration);\n  };\n\n  const keys = (which: Grip) => (event: React.KeyboardEvent) => {\n    const current = which === \"start\" ? start : which === \"end\" ? end : (time ?? start);\n    const big = largeStep;\n    const small = event.shiftKey ? largeStep : step;\n    const target: Record<string, number> = {\n      ArrowLeft: current - small,\n      ArrowDown: current - small,\n      ArrowRight: current + small,\n      ArrowUp: current + small,\n      PageDown: current - big,\n      PageUp: current + big,\n      Home: 0,\n      End: duration,\n    };\n    const to = target[event.key];\n    if (to === undefined || disabled) return;\n    event.preventDefault();\n    if (which === \"playhead\") seek(to);\n    else move(which, to, true);\n  };\n\n  const handle = (edge: \"start\" | \"end\") => {\n    const own = edge === \"start\" ? start : end;\n    return (\n      <div\n        key={edge}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={edge === \"start\" ? labels.start : labels.end}\n        aria-valuemin={edge === \"start\" ? 0 : Math.round((start + minLength) * 10) / 10}\n        aria-valuemax={edge === \"start\" ? Math.round((end - minLength) * 10) / 10 : Math.round(duration * 10) / 10}\n        aria-valuenow={Math.round(own * 10) / 10}\n        aria-valuetext={formatTime(own)}\n        aria-disabled={disabled || undefined}\n        data-edge={edge}\n        className={s.handle({ className: classNames.handle })}\n        style={{ left: `${pct(own)}%` }}\n        onPointerDown={(event) => {\n          if (disabled) return;\n          event.stopPropagation();\n          track.current?.setPointerCapture?.(event.pointerId);\n          grip.current = edge;\n        }}\n        onKeyDown={keys(edge)}\n      >\n        {renderHandle ? (\n          renderHandle(edge)\n        ) : (\n          <span className={s.grip({ className: classNames.grip })}>\n            <span />\n            <span />\n          </span>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={s.root({ className: classNames.root })}>\n      {showHeader && (\n        <div className={s.header({ className: classNames.header })}>\n          <span>{formatTime(start)}</span>\n          <span className={s.kept({ className: classNames.kept })}>{labels.kept(formatTime(end - start))}</span>\n          <span>{formatTime(end)}</span>\n        </div>\n      )}\n      <div\n        ref={track}\n        className={s.track({ className: classNames.track })}\n        data-disabled={disabled ? \"\" : undefined}\n        onPointerDown={(event) => {\n          if (disabled) return;\n          track.current?.setPointerCapture?.(event.pointerId);\n          const t = at(event.clientX);\n          grip.current = onSeek ? \"playhead\" : Math.abs(t - start) < Math.abs(t - end) ? \"start\" : \"end\";\n          if (grip.current === \"playhead\") seek(t);\n          else move(grip.current, t);\n        }}\n        onPointerMove={(event) => {\n          if (!grip.current) return;\n          const t = at(event.clientX);\n          if (grip.current === \"playhead\") seek(t);\n          else move(grip.current, t);\n        }}\n        onPointerUp={() => {\n          if (grip.current && grip.current !== \"playhead\") onValueCommit?.([start, end]);\n          grip.current = null;\n        }}\n        onPointerCancel={() => {\n          grip.current = null;\n        }}\n      >\n        <div className={s.strip({ className: classNames.strip })}>\n          {children ?? frames?.map((src, i) => <img key={`${i}-${src}`} src={src} alt=\"\" draggable={false} className={s.frame({ className: classNames.frame })} />)}\n        </div>\n        <div className={s.shade({ className: classNames.shade })} style={{ left: 0, width: `${pct(start)}%`, borderRadius: \"0.75rem 0 0 0.75rem\" }} />\n        <div className={s.shade({ className: classNames.shade })} style={{ right: 0, width: `${100 - pct(end)}%`, borderRadius: \"0 0.75rem 0.75rem 0\" }} />\n        <div className={s.range({ className: classNames.range })} style={{ left: `${pct(start)}%`, right: `${100 - pct(end)}%` }} />\n        {time !== undefined && (\n          <div\n            role=\"slider\"\n            tabIndex={disabled || !onSeek ? -1 : 0}\n            aria-label={labels.playhead}\n            aria-valuemin={Math.round(start * 10) / 10}\n            aria-valuemax={Math.round(end * 10) / 10}\n            aria-valuenow={Math.round(time * 10) / 10}\n            aria-valuetext={formatTime(time)}\n            aria-readonly={!onSeek || undefined}\n            className={s.playhead({ className: classNames.playhead })}\n            style={{ left: `${pct(time)}%` }}\n            onKeyDown={onSeek ? keys(\"playhead\") : undefined}\n          />\n        )}\n        {handle(\"start\")}\n        {handle(\"end\")}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}