@open-slide/core 0.0.8 → 0.0.10

package/src/app/components/inspector/InspectorProvider.tsx

@@ -1,14 +1,37 @@
 import { Crosshair } from 'lucide-react';
-import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Button } from '@/components/ui/button';
 import { type SlideComment, useComments } from '@/lib/inspector/useComments';
+import { type Edit, type EditOp, useEditor } from '@/lib/inspector/useEditor';
 
-export type PendingTarget = {
+export type SelectedTarget = {
   line: number;
   column: number;
-  anchorRect: DOMRect;
-  clickX: number;
-  clickY: number;
+  anchor: HTMLElement;
+};
+
+type AssetAttrOp = { assetPath: string; previewUrl: string };
+
+type Bucket = {
+  line: number;
+  column: number;
+  styleOps: Map<string, string | null>;
+  textOp: { value: string } | null;
+  attrOps: Map<string, AssetAttrOp>;
+  // Pre-edit snapshot of the DOM, captured the first time we touch
+  // each style key / text / attribute. Used by `cancelEdits` to revert.
+  origStyle: Map<string, string>;
+  origText: { value: string } | null;
+  origAttrs: Map<string, string | null>;
 };
 
 type InspectorCtx = {
@@ -21,8 +44,18 @@ type InspectorCtx = {
   refetch: () => Promise<void>;
   add: (line: number, column: number, text: string) => Promise<void>;
   remove: (id: string) => Promise<void>;
-  pending: PendingTarget | null;
-  setPending: (p: PendingTarget | null) => void;
+  selected: SelectedTarget | null;
+  setSelected: (s: SelectedTarget | null) => void;
+  applyEdit: (line: number, column: number, ops: EditOp[]) => Promise<void>;
+  applyEdits: (edits: Edit[]) => Promise<void>;
+  // Mutate the DOM optimistically, snapshot the pre-edit values, and
+  // remember the ops. `commitEdits` (manual Save or auto-flush on
+  // close) is what actually writes to disk; `cancelEdits` reverts.
+  bufferOps: (line: number, column: number, anchor: HTMLElement, ops: EditOp[]) => void;
+  pendingCount: number;
+  commitEdits: () => Promise<void>;
+  cancelEdits: () => void;
+  committing: boolean;
 };
 
 const Ctx = createContext<InspectorCtx | null>(null);
@@ -35,19 +68,177 @@ export function useInspector(): InspectorCtx {
 
 export function InspectorProvider({ slideId, children }: { slideId: string; children: ReactNode }) {
   const [active, setActive] = useState(false);
-  const [pending, setPending] = useState<PendingTarget | null>(null);
+  const [selected, setSelected] = useState<SelectedTarget | null>(null);
   const { comments, error, refetch, add, remove } = useComments(slideId);
+  const { applyEdit, applyEdits } = useEditor(slideId);
+
+  const pendingRef = useRef<Map<string, Bucket>>(new Map());
+  const [pendingCount, setPendingCount] = useState(0);
+  const [committing, setCommitting] = useState(false);
+
+  const refreshCount = useCallback(() => {
+    let n = 0;
+    for (const b of pendingRef.current.values()) {
+      if (b.styleOps.size > 0 || b.textOp !== null || b.attrOps.size > 0) n++;
+    }
+    setPendingCount(n);
+  }, []);
+
+  const bufferOps = useCallback(
+    (line: number, column: number, anchor: HTMLElement, ops: EditOp[]) => {
+      const key = `${line}:${column}`;
+      let bucket = pendingRef.current.get(key);
+      if (!bucket) {
+        bucket = {
+          line,
+          column,
+          styleOps: new Map(),
+          textOp: null,
+          attrOps: new Map(),
+          origStyle: new Map(),
+          origText: null,
+          origAttrs: new Map(),
+        };
+        pendingRef.current.set(key, bucket);
+      }
+      const style = anchor.style as unknown as Record<string, string>;
+      for (const op of ops) {
+        if (op.kind === 'set-style') {
+          if (!bucket.origStyle.has(op.key)) {
+            bucket.origStyle.set(op.key, style[op.key] ?? '');
+          }
+          bucket.styleOps.set(op.key, op.value);
+          if (anchor.isConnected) style[op.key] = op.value ?? '';
+        } else if (op.kind === 'set-text') {
+          if (bucket.origText === null) {
+            bucket.origText = { value: anchor.textContent ?? '' };
+          }
+          bucket.textOp = { value: op.value };
+          if (anchor.isConnected) anchor.textContent = op.value;
+        } else if (op.kind === 'set-attr-asset') {
+          if (!bucket.origAttrs.has(op.attr)) {
+            bucket.origAttrs.set(
+              op.attr,
+              anchor.hasAttribute(op.attr) ? anchor.getAttribute(op.attr) : null,
+            );
+          }
+          bucket.attrOps.set(op.attr, { assetPath: op.assetPath, previewUrl: op.previewUrl });
+          if (anchor.isConnected) anchor.setAttribute(op.attr, op.previewUrl);
+        }
+      }
+      refreshCount();
+    },
+    [refreshCount],
+  );
+
+  const commitEdits = useCallback(async () => {
+    const buckets = pendingRef.current;
+    if (buckets.size === 0) return;
+    const edits: Edit[] = [];
+    for (const { line, column, styleOps, textOp, attrOps } of buckets.values()) {
+      const list: EditOp[] = [];
+      for (const [k, v] of styleOps) list.push({ kind: 'set-style', key: k, value: v });
+      if (textOp !== null) list.push({ kind: 'set-text', value: textOp.value });
+      for (const [attr, op] of attrOps) {
+        list.push({
+          kind: 'set-attr-asset',
+          attr,
+          assetPath: op.assetPath,
+          previewUrl: op.previewUrl,
+        });
+      }
+      if (list.length > 0) edits.push({ line, column, ops: list });
+    }
+    pendingRef.current = new Map();
+    setPendingCount(0);
+    if (edits.length === 0) return;
+    setCommitting(true);
+    try {
+      await applyEdits(edits);
+    } finally {
+      setCommitting(false);
+    }
+  }, [applyEdits]);
+
+  const cancelEdits = useCallback(() => {
+    if (pendingRef.current.size === 0) return;
+    const root = document.querySelector<HTMLElement>('[data-inspector-root]');
+    for (const b of pendingRef.current.values()) {
+      const el = root?.querySelector<HTMLElement>(`[data-slide-loc="${b.line}:${b.column}"]`);
+      if (!el) continue;
+      const style = el.style as unknown as Record<string, string>;
+      for (const [k, v] of b.origStyle) style[k] = v;
+      if (b.origText !== null) el.textContent = b.origText.value;
+      for (const [attr, value] of b.origAttrs) {
+        if (value === null) el.removeAttribute(attr);
+        else el.setAttribute(attr, value);
+      }
+    }
+    pendingRef.current = new Map();
+    setPendingCount(0);
+  }, []);
+
+  // Auto-flush on inspector close and on route unmount so toggling
+  // off or navigating away doesn't drop buffered edits.
+  const commitRef = useRef(commitEdits);
+  commitRef.current = commitEdits;
+  useEffect(() => {
+    if (!active) commitRef.current().catch(() => {});
+  }, [active]);
+  useEffect(() => {
+    return () => {
+      commitRef.current().catch(() => {});
+    };
+  }, []);
+
+  // Re-apply buffered ops onto any `[data-slide-loc]` element that gets
+  // (re)mounted in the slide canvas. Without this, navigating to a
+  // different page and back drops the optimistic styles, since the
+  // page's DOM nodes are torn down on unmount even though the buffer
+  // (keyed by source line:col) survives.
+  useEffect(() => {
+    const root = document.querySelector<HTMLElement>('[data-inspector-root]');
+    if (!root) return;
+
+    const applyBuffered = (el: HTMLElement) => {
+      const loc = el.dataset.slideLoc;
+      if (!loc) return;
+      const bucket = pendingRef.current.get(loc);
+      if (!bucket) return;
+      const style = el.style as unknown as Record<string, string>;
+      for (const [key, value] of bucket.styleOps) {
+        const v = value ?? '';
+        if (style[key] !== v) style[key] = v;
+      }
+      if (bucket.textOp !== null && el.textContent !== bucket.textOp.value) {
+        el.textContent = bucket.textOp.value;
+      }
+      for (const [attr, op] of bucket.attrOps) {
+        if (el.getAttribute(attr) !== op.previewUrl) el.setAttribute(attr, op.previewUrl);
+      }
+    };
+
+    const replayAll = () => {
+      if (pendingRef.current.size === 0) return;
+      root.querySelectorAll<HTMLElement>('[data-slide-loc]').forEach(applyBuffered);
+    };
+
+    replayAll();
+    const observer = new MutationObserver(replayAll);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
 
   const toggle = useCallback(() => {
     setActive((a) => {
-      if (a) setPending(null);
+      if (a) setSelected(null);
       return !a;
     });
   }, []);
 
   const cancel = useCallback(() => {
     setActive(false);
-    setPending(null);
+    setSelected(null);
   }, []);
 
   const value = useMemo<InspectorCtx>(
@@ -61,10 +252,35 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       refetch,
       add,
       remove,
-      pending,
-      setPending,
+      selected,
+      setSelected,
+      applyEdit,
+      applyEdits,
+      bufferOps,
+      pendingCount,
+      commitEdits,
+      cancelEdits,
+      committing,
     }),
-    [slideId, active, toggle, cancel, comments, error, refetch, add, remove, pending],
+    [
+      slideId,
+      active,
+      toggle,
+      cancel,
+      comments,
+      error,
+      refetch,
+      add,
+      remove,
+      selected,
+      applyEdit,
+      applyEdits,
+      bufferOps,
+      pendingCount,
+      commitEdits,
+      cancelEdits,
+      committing,
+    ],
   );
 
   return <Ctx.Provider value={value}>{children}</Ctx.Provider>;

package/src/app/components/inspector/SaveBar.tsx

@@ -0,0 +1,77 @@
+import { Check, Loader2, Save, Undo2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useInspector } from './InspectorProvider';
+
+// Optimistic DOM updates make the canvas *look* saved, so without
+// this affordance a user could close the tab thinking their tweaks
+// hit disk when they're still buffered in memory.
+export function SaveBar() {
+  const { pendingCount, commitEdits, cancelEdits, committing } = useInspector();
+  const [justSaved, setJustSaved] = useState(false);
+
+  // Brief "Saved" hold so the bar's disappearance feels intentional.
+  useEffect(() => {
+    if (!justSaved) return;
+    const t = setTimeout(() => setJustSaved(false), 1200);
+    return () => clearTimeout(t);
+  }, [justSaved]);
+
+  const visible = pendingCount > 0 || committing || justSaved;
+  if (!visible) return null;
+
+  const onSave = async () => {
+    await commitEdits();
+    setJustSaved(true);
+  };
+
+  return (
+    <div
+      data-inspector-ui
+      className="pointer-events-none absolute bottom-6 left-1/2 z-30 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-200"
+    >
+      <div className="pointer-events-auto flex items-center gap-2 rounded-full border bg-card/95 py-1 pr-1 pl-3 shadow-lg backdrop-blur">
+        {justSaved ? (
+          <span className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+            <Check className="size-3.5 text-emerald-600" />
+            Saved
+          </span>
+        ) : (
+          <span className="text-xs font-medium text-foreground">
+            {pendingCount} unsaved {pendingCount === 1 ? 'change' : 'changes'}
+          </span>
+        )}
+        {!justSaved && (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-7 rounded-full px-2.5 text-[11px] text-muted-foreground hover:text-foreground"
+            onClick={cancelEdits}
+            disabled={committing || pendingCount === 0}
+          >
+            <Undo2 className="size-3.5" />
+            Discard
+          </Button>
+        )}
+        <Button
+          size="sm"
+          className="h-7 rounded-full px-3 text-[11px]"
+          onClick={onSave}
+          disabled={committing || pendingCount === 0}
+        >
+          {committing ? (
+            <>
+              <Loader2 className="size-3.5 animate-spin" />
+              Saving
+            </>
+          ) : (
+            <>
+              <Save className="size-3.5" />
+              Save
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/app/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/app/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/app/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/app/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/app/components/ui/slider.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }