@peaske7/readit 0.1.7 → 0.2.0

package/src/components/DocumentViewer/IframeContainer.tsx

@@ -1,251 +0,0 @@
-import DOMPurify from "dompurify";
-import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  buildIframeScript,
-  createHighlighter,
-  type HighlightComment,
-  type Highlighter,
-} from "../../lib/highlight";
-import {
-  AnchorConfidences,
-  type Comment,
-  FontFamilies,
-  type FontFamily,
-  type SelectionRange,
-} from "../../types";
-
-interface IframeContainerProps {
-  html: string;
-  comments: Comment[];
-  pendingSelection?: SelectionRange;
-  onTextSelect: (
-    text: string,
-    startOffset: number,
-    endOffset: number,
-    selectionTop: number,
-  ) => void;
-  onHighlightPositionsChange?: (
-    positions: Record<string, number>,
-    documentPositions: Record<string, number>,
-    pendingTop?: number,
-  ) => void;
-  onHighlightHover?: (commentId: string | undefined) => void;
-  onHighlightClick?: (commentId: string) => void;
-  fontFamily?: FontFamily;
-}
-
-const FONT_SERIF =
-  'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
-const FONT_SANS =
-  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-
-function getFontStack(fontFamily: FontFamily): string {
-  return fontFamily === FontFamilies.SANS_SERIF ? FONT_SANS : FONT_SERIF;
-}
-
-// Layout styles use !important; prose styles use :where() for zero specificity
-function getBaseStyles(fontFamily: FontFamily): string {
-  const fontStack = getFontStack(fontFamily);
-  return `
-  /* Critical layout - must override external CSS to ensure proper sizing */
-  html {
-    width: 100% !important;
-  }
-  body {
-    width: 100% !important;
-    min-width: 65ch;
-    box-sizing: border-box !important;
-    margin: 0;
-  }
-
-  /* Prose styles as fallback - zero specificity via :where(), easily overridden */
-  :where(body:not([class])) {
-    max-width: 65ch;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 2rem 1rem;
-    line-height: 1.75;
-    color: #3f3f46;
-    font-family: ${fontStack};
-  }
-  :where(body:not([class])) :where(h1, h2, h3, h4, h5, h6) {
-    color: #18181b;
-    font-weight: 600;
-    line-height: 1.25;
-    margin-top: 2em;
-    margin-bottom: 0.5em;
-  }
-  :where(body:not([class])) :where(h1) { font-size: 2.25em; margin-top: 0; }
-  :where(body:not([class])) :where(h2) { font-size: 1.5em; }
-  :where(body:not([class])) :where(h3) { font-size: 1.25em; }
-  :where(body:not([class])) :where(h4) { font-size: 1.125em; }
-  :where(body:not([class])) :where(p) { margin: 1em 0; }
-  :where(body:not([class])) :where(ul, ol) { padding-left: 1.5em; margin: 1em 0; }
-  :where(body:not([class])) :where(li) { margin: 0.5em 0; }
-  :where(body:not([class])) :where(a) { color: #2563eb; text-decoration: underline; }
-  :where(body:not([class])) :where(code) { background: #f4f4f5; padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.875em; }
-  :where(body:not([class])) :where(pre) { background: #f4f4f5; padding: 1em; border-radius: 0.5em; overflow-x: auto; }
-  :where(body:not([class])) :where(pre code) { background: none; padding: 0; }
-  :where(body:not([class])) :where(blockquote) { border-left: 4px solid #e4e4e7; padding-left: 1em; color: #71717a; margin: 1em 0; font-style: italic; }
-  :where(body:not([class])) :where(hr) { border: none; border-top: 1px solid #e4e4e7; margin: 2em 0; }
-  :where(body:not([class])) :where(table) { border-collapse: collapse; width: 100%; margin: 1em 0; }
-  :where(body:not([class])) :where(th, td) { border: 1px solid #e4e4e7; padding: 0.5em 1em; text-align: left; }
-  :where(body:not([class])) :where(th) { background: #fafafa; font-weight: 600; }
-  :where(body:not([class])) :where(img) { max-width: 100%; height: auto; }
-
-  /* Highlight styles - warm ink palette */
-  mark[data-comment-id] {
-    background: rgba(245, 222, 160, 0.5);
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-  }
-  mark[data-comment-id]:hover {
-    background-color: rgba(228, 195, 110, 0.65);
-  }
-  mark[data-comment-id]:active {
-    background-color: rgba(228, 195, 110, 0.75);
-  }
-  mark[data-pending] { background: rgba(180, 180, 180, 0.3); cursor: text; }
-`;
-}
-
-function sanitizeHtml(html: string): string {
-  const sanitized = DOMPurify.sanitize(html, {
-    ADD_TAGS: ["style"],
-    ADD_ATTR: ["style"],
-    FORBID_TAGS: ["script", "iframe", "object", "embed", "form"],
-    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"],
-  });
-
-  // Escape </iframe> to prevent breaking out of srcdoc
-  return sanitized.replace(/<\/iframe/gi, "&lt;/iframe");
-}
-
-function injectStyleTag(html: string, styleTag: string): string {
-  if (/<\/head>/i.test(html)) {
-    return html.replace(/<\/head>/i, `${styleTag}</head>`);
-  }
-  if (/<head[^>]*>/i.test(html)) {
-    return html.replace(/(<head[^>]*>)/i, `$1${styleTag}`);
-  }
-  return styleTag + html;
-}
-
-export function IframeContainer({
-  html,
-  comments,
-  pendingSelection,
-  onTextSelect,
-  onHighlightPositionsChange,
-  onHighlightHover,
-  onHighlightClick,
-  fontFamily = FontFamilies.SERIF,
-}: IframeContainerProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const adapterRef = useRef<Highlighter | null>(null);
-  const [contentHeight, setContentHeight] = useState<number>(0);
-
-  const srcdoc = useMemo(() => {
-    const sanitized = sanitizeHtml(html);
-    const baseStyles = getBaseStyles(fontFamily);
-    const styleTag = `<style id="readit-base-styles">${baseStyles}</style>`;
-
-    const finalHtml = injectStyleTag(sanitized, styleTag);
-
-    return finalHtml + buildIframeScript(window.location.origin);
-  }, [html, fontFamily]);
-
-  useEffect(() => {
-    const adapter = createHighlighter({
-      type: "iframe",
-      getIframe: () => iframeRef.current,
-      onSelect: onTextSelect,
-    });
-
-    adapterRef.current = adapter;
-
-    const unsubPositions = onHighlightPositionsChange
-      ? adapter.onPositionsChange((pos) => {
-          const iframe = iframeRef.current;
-          const iframeOffset = iframe
-            ? iframe.getBoundingClientRect().top + window.scrollY
-            : 0;
-
-          const adjustedDocPositions: Record<string, number> = {};
-          for (const [id, iframePos] of Object.entries(pos.documentPositions)) {
-            adjustedDocPositions[id] = iframePos + iframeOffset;
-          }
-
-          onHighlightPositionsChange(
-            pos.positions,
-            adjustedDocPositions,
-            pos.pendingTop,
-          );
-        })
-      : () => {};
-
-    const unsubHover = onHighlightHover
-      ? adapter.onHighlightHover(onHighlightHover)
-      : () => {};
-
-    const unsubClick = onHighlightClick
-      ? adapter.onHighlightClick(onHighlightClick)
-      : () => {};
-
-    const unsubHeight = adapter.onContentHeightChange?.((height) => {
-      setContentHeight(height);
-    });
-
-    return () => {
-      unsubPositions();
-      unsubHover();
-      unsubClick();
-      unsubHeight?.();
-      adapter.dispose();
-      adapterRef.current = null;
-    };
-  }, [
-    onTextSelect,
-    onHighlightPositionsChange,
-    onHighlightHover,
-    onHighlightClick,
-  ]);
-
-  useEffect(() => {
-    const adapter = adapterRef.current;
-    if (!adapter) return;
-
-    const highlightComments: HighlightComment[] = comments
-      .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
-      .map((c) => ({
-        id: c.id,
-        selectedText: c.selectedText,
-        startOffset: c.startOffset,
-        endOffset: c.endOffset,
-      }));
-
-    adapter.applyHighlights(highlightComments, pendingSelection ?? undefined);
-  }, [comments, pendingSelection]);
-
-  useEffect(() => {
-    const handleTestSelect = (e: Event) => {
-      const { text, startOffset, endOffset } = (e as CustomEvent).detail;
-      onTextSelect(text, startOffset, endOffset, 0);
-    };
-
-    window.addEventListener("test:select-text", handleTestSelect);
-    return () =>
-      window.removeEventListener("test:select-text", handleTestSelect);
-  }, [onTextSelect]);
-
-  return (
-    <iframe
-      ref={iframeRef}
-      srcDoc={srcdoc}
-      sandbox="allow-scripts allow-same-origin"
-      title="Document content"
-      className="w-full border-0"
-      style={{ height: contentHeight || "100%" }}
-    />
-  );
-}

package/src/components/DocumentViewer/InlineCode.tsx

@@ -1,60 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import {
-  buildEditorUri,
-  parseFilePath,
-  resolveAbsolutePath,
-} from "../../lib/editor-links";
-import type { EditorScheme } from "../../types";
-import { EditorSchemes } from "../../types";
-import { CodeBlock } from "./CodeBlock";
-
-/**
- * Creates a combined code component for react-markdown that:
- * - Routes fenced code blocks to CodeBlock (syntax highlighting)
- * - Wraps inline code containing file paths with editor links
- * - Falls back to plain <code> for non-file-path inline code
- */
-export function createCodeComponent(
-  editorScheme: EditorScheme,
-  workingDirectory: string | null,
-) {
-  return function CodeComponent({
-    children,
-    className,
-    ...props
-  }: ComponentPropsWithoutRef<"code">) {
-    // Fenced code blocks have className (e.g., "language-ts") or contain newlines
-    if (className || String(children).includes("\n")) {
-      return <CodeBlock className={className}>{children}</CodeBlock>;
-    }
-
-    // Inline code — check for file path patterns
-    if (editorScheme === EditorSchemes.NONE || !workingDirectory) {
-      return <code {...props}>{children}</code>;
-    }
-
-    const text = typeof children === "string" ? children : "";
-    if (!text) {
-      return <code {...props}>{children}</code>;
-    }
-
-    const match = parseFilePath(text);
-    if (!match) {
-      return <code {...props}>{children}</code>;
-    }
-
-    const absolutePath = resolveAbsolutePath(match.path, workingDirectory);
-    const uri = buildEditorUri(
-      editorScheme,
-      absolutePath,
-      match.line,
-      match.col,
-    );
-
-    return (
-      <a href={uri} title={`Open in ${editorScheme}`} className="editor-link">
-        <code {...props}>{children}</code>
-      </a>
-    );
-  };
-}

package/src/components/DocumentViewer/index.ts

@@ -1 +0,0 @@
-export { DocumentViewer } from "./DocumentViewer";

package/src/components/FloatingTOC.tsx

@@ -1,61 +0,0 @@
-import { List } from "lucide-react";
-import { useState } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import type { Heading } from "../hooks/useHeadings";
-import { cn } from "../lib/utils";
-import { TableOfContents } from "./TableOfContents";
-
-interface FloatingTOCProps {
-  headings: Heading[];
-  activeId: string | null;
-  onHeadingClick: (id: string) => void;
-}
-
-export function FloatingTOC({
-  headings,
-  activeId,
-  onHeadingClick,
-}: FloatingTOCProps) {
-  const { t } = useLocale();
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  if (headings.length === 0) return null;
-
-  return (
-    <nav
-      className="fixed left-4 top-16 z-40"
-      onMouseEnter={() => setIsExpanded(true)}
-      onMouseLeave={() => setIsExpanded(false)}
-      aria-label={t("floatingTOC.label")}
-    >
-      {/* Collapsed state: circular button */}
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className={cn(
-          "w-10 h-10 rounded-full bg-white dark:bg-zinc-900 shadow-lg border border-zinc-100 dark:border-zinc-800 flex items-center justify-center text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-150",
-          isExpanded && "opacity-0 pointer-events-none",
-        )}
-        aria-label={t("floatingTOC.label")}
-      >
-        <List className="w-5 h-5" />
-      </button>
-
-      {/* Expanded state: panel */}
-      {isExpanded && (
-        <div className="absolute left-0 top-0 w-56 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-lg shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 p-4 floating-toc-panel">
-          <div className="max-h-[calc(100vh-8rem)] overflow-y-auto">
-            <TableOfContents
-              headings={headings}
-              activeId={activeId}
-              onHeadingClick={(id) => {
-                onHeadingClick(id);
-                setIsExpanded(false);
-              }}
-            />
-          </div>
-        </div>
-      )}
-    </nav>
-  );
-}

package/src/components/ShortcutCapture.tsx

@@ -1,48 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import {
-  eventToBinding,
-  isReservedBinding,
-  type ShortcutBinding,
-} from "../lib/shortcut-registry";
-
-interface ShortcutCaptureProps {
-  onCapture: (binding: ShortcutBinding) => void;
-  onCancel: () => void;
-}
-
-export function ShortcutCapture({ onCapture, onCancel }: ShortcutCaptureProps) {
-  const { t } = useLocale();
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (e.key === "Escape") {
-        onCancel();
-        return;
-      }
-
-      const binding = eventToBinding(e);
-      if (!binding) return;
-
-      if (isReservedBinding(binding)) return;
-
-      onCapture(binding);
-    },
-    [onCapture, onCancel],
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () =>
-      window.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [handleKeyDown]);
-
-  return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-50 border border-amber-200 text-amber-700 text-xs font-medium animate-pulse">
-      {t("shortcutCapture.pressKeys")}
-    </span>
-  );
-}

package/src/components/ShortcutList.tsx

@@ -1,198 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import type { TranslationKey } from "../lib/i18n";
-import {
-  bindingsEqual,
-  formatBinding,
-  type ShortcutAction,
-  type ShortcutBinding,
-  type ShortcutDefinition,
-} from "../lib/shortcut-registry";
-import { ShortcutCapture } from "./ShortcutCapture";
-
-interface ShortcutListProps {
-  shortcuts: ShortcutDefinition[];
-  onUpdateBinding: (id: string, binding: ShortcutBinding) => Promise<void>;
-  onToggleEnabled: (id: string) => Promise<void>;
-  onResetToDefaults: () => Promise<void>;
-}
-
-const SHORTCUT_GROUPS = [
-  {
-    labelKey: "shortcutGroup.copy" as const,
-    ids: ["copyAll", "copyAllRaw", "copySelectionRaw", "copySelectionLLM"],
-  },
-  {
-    labelKey: "shortcutGroup.navigate" as const,
-    ids: ["navigateNext", "navigatePrevious"],
-  },
-  { labelKey: "shortcutGroup.other" as const, ids: ["clearSelection"] },
-] as const;
-
-const SHORTCUT_LABEL_KEYS: Record<
-  ShortcutAction,
-  { label: TranslationKey; description: TranslationKey }
-> = {
-  copyAll: {
-    label: "shortcut.copyAll.label",
-    description: "shortcut.copyAll.description",
-  },
-  copyAllRaw: {
-    label: "shortcut.copyAllRaw.label",
-    description: "shortcut.copyAllRaw.description",
-  },
-  navigateNext: {
-    label: "shortcut.navigateNext.label",
-    description: "shortcut.navigateNext.description",
-  },
-  navigatePrevious: {
-    label: "shortcut.navigatePrevious.label",
-    description: "shortcut.navigatePrevious.description",
-  },
-  copySelectionRaw: {
-    label: "shortcut.copySelectionRaw.label",
-    description: "shortcut.copySelectionRaw.description",
-  },
-  copySelectionLLM: {
-    label: "shortcut.copySelectionLLM.label",
-    description: "shortcut.copySelectionLLM.description",
-  },
-  clearSelection: {
-    label: "shortcut.clearSelection.label",
-    description: "shortcut.clearSelection.description",
-  },
-};
-
-const isMac =
-  typeof navigator !== "undefined" &&
-  /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-
-export function ShortcutList({
-  shortcuts,
-  onUpdateBinding,
-  onToggleEnabled,
-  onResetToDefaults,
-}: ShortcutListProps) {
-  const { t } = useLocale();
-  const [capturingId, setCapturingId] = useState<string | undefined>();
-
-  const hasOverrides = useMemo(
-    () =>
-      shortcuts.some(
-        (s) => !s.enabled || !bindingsEqual(s.binding, s.defaultBinding),
-      ),
-    [shortcuts],
-  );
-
-  const shortcutMap = useMemo(
-    () => new Map(shortcuts.map((s) => [s.id, s])),
-    [shortcuts],
-  );
-
-  const handleCapture = useCallback(
-    async (id: string, binding: ShortcutBinding) => {
-      const conflict = shortcuts.find(
-        (s) => s.id !== id && s.enabled && bindingsEqual(s.binding, binding),
-      );
-
-      if (conflict) {
-        const currentShortcut = shortcuts.find((s) => s.id === id);
-        if (currentShortcut) {
-          await onUpdateBinding(conflict.id, currentShortcut.binding);
-        }
-      }
-
-      await onUpdateBinding(id, binding);
-      setCapturingId(undefined);
-    },
-    [shortcuts, onUpdateBinding],
-  );
-
-  return (
-    <div className="space-y-4">
-      {SHORTCUT_GROUPS.map((group) => {
-        const groupShortcuts = group.ids
-          .map((id) => shortcutMap.get(id))
-          .filter((s): s is ShortcutDefinition => s !== undefined);
-
-        if (groupShortcuts.length === 0) return null;
-
-        return (
-          <div key={group.labelKey}>
-            <span className="text-[11px] font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">
-              {t(group.labelKey)}
-            </span>
-            <div className="mt-1 space-y-0.5">
-              {groupShortcuts.map((shortcut) => (
-                <div
-                  key={shortcut.id}
-                  className="flex items-center gap-3 py-1.5"
-                >
-                  <span
-                    className="flex-1 text-sm text-zinc-700 dark:text-zinc-300 truncate"
-                    title={t(SHORTCUT_LABEL_KEYS[shortcut.id].description)}
-                  >
-                    {t(SHORTCUT_LABEL_KEYS[shortcut.id].label)}
-                  </span>
-
-                  <div className="flex items-center gap-2.5">
-                    {capturingId === shortcut.id ? (
-                      <ShortcutCapture
-                        onCapture={(binding) =>
-                          handleCapture(shortcut.id, binding)
-                        }
-                        onCancel={() => setCapturingId(undefined)}
-                      />
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={() => setCapturingId(shortcut.id)}
-                        className="inline-flex items-center px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 text-xs font-mono cursor-pointer hover:bg-zinc-200 hover:border-zinc-300 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 transition-colors"
-                      >
-                        {formatBinding(shortcut.binding, isMac)}
-                      </button>
-                    )}
-
-                    <button
-                      type="button"
-                      role="switch"
-                      aria-checked={shortcut.enabled}
-                      onClick={() => onToggleEnabled(shortcut.id)}
-                      title={t("shortcuts.enableDisable")}
-                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors cursor-pointer ${
-                        shortcut.enabled
-                          ? "bg-zinc-600 dark:bg-zinc-400"
-                          : "bg-zinc-300 dark:bg-zinc-700"
-                      }`}
-                    >
-                      <span
-                        className={`inline-block size-3 rounded-full bg-white dark:bg-zinc-900 shadow-sm transition-transform ${
-                          shortcut.enabled
-                            ? "translate-x-3.5"
-                            : "translate-x-0.5"
-                        }`}
-                      />
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        );
-      })}
-
-      <button
-        type="button"
-        onClick={hasOverrides ? onResetToDefaults : undefined}
-        disabled={!hasOverrides}
-        className={
-          hasOverrides
-            ? "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors cursor-pointer"
-            : "text-xs text-zinc-300 dark:text-zinc-600 cursor-default"
-        }
-      >
-        {t("shortcuts.resetToDefaults")}
-      </button>
-    </div>
-  );
-}

package/src/components/comments/CommentMinimap.tsx

@@ -1,62 +0,0 @@
-import { useCommentContext } from "../../contexts/CommentContext";
-import { MINIMAP_HEADER_OFFSET_PX } from "../../lib/layout-constants";
-import { cn } from "../../lib/utils";
-
-interface CommentMinimapProps {
-  /** Absolute Y-positions from document top for each comment */
-  documentPositions: Record<string, number>;
-  documentHeight: number;
-  viewportHeight: number;
-}
-
-export function CommentMinimap({
-  documentPositions,
-  documentHeight,
-  viewportHeight,
-}: CommentMinimapProps) {
-  const { sortedComments, hoveredCommentId, navigateToComment } =
-    useCommentContext();
-
-  // Don't render if no comments or document height is 0
-  if (sortedComments.length === 0 || documentHeight === 0) {
-    return null;
-  }
-
-  // Minimap height is the viewport height minus header
-  const minimapHeight = viewportHeight - MINIMAP_HEADER_OFFSET_PX;
-
-  return (
-    <div
-      className="fixed right-0 top-12 w-3 z-40"
-      style={{ height: minimapHeight }}
-    >
-      {sortedComments.map((comment) => {
-        const position = documentPositions[comment.id];
-        if (position === undefined) return null;
-
-        // Scale absolute position to minimap height
-        const indicatorTop = (position / documentHeight) * minimapHeight;
-
-        const isHovered = hoveredCommentId === comment.id;
-
-        return (
-          <button
-            type="button"
-            key={comment.id}
-            className={cn(
-              "absolute left-0 right-0 h-1.5 rounded-l transition-all duration-150 cursor-pointer",
-              isHovered
-                ? "bg-amber-500 w-4 -translate-x-1"
-                : "bg-amber-500 hover:bg-amber-600 hover:w-4 hover:-translate-x-1",
-            )}
-            style={{
-              top: Math.max(0, Math.min(indicatorTop, minimapHeight - 6)),
-            }}
-            onClick={() => navigateToComment(comment.id)}
-            title={`"${comment.selectedText.slice(0, 30)}${comment.selectedText.length > 30 ? "..." : ""}"`}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/components/ui/ActionBar.tsx

@@ -1,16 +0,0 @@
-import { cn } from "../../lib/utils";
-
-function ActionBar({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="action-bar"
-      className={cn(
-        "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { ActionBar };