make paths resolvable to node (#335)

packages/components/package.json

@@ -34,7 +34,6 @@
     "@srcbook/shared": "workspace:^",
     "@uiw/codemirror-themes": "^4.23.2",
     "@uiw/react-codemirror": "^4.23.2",
-    "@uiw/react-codemirror": "^4.23.2",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "marked": "catalog:",
@@ -50,8 +49,8 @@
     "codemirror": "*",
     "lucide-react": "*",
     "react": "*",
-    "react-router-dom": "*",
     "react-hotkeys-hook": "*",
+    "react-router-dom": "*",
     "react-textarea-autosize": "*",
     "sonner": "*",
     "tailwind-merge": "*",

packages/components/src/components/ai-generate-tips-dialog.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from './ui/dialog.js';
 
 export default function AiGenerateTipsDialog({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useState(false);

packages/components/src/components/cell-output.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { Ban, Maximize, Minimize, PanelBottomClose, PanelBottomOpen, Sparkles } from 'lucide-react';
 import { CodeCellType, PackageJsonCellType, TsServerDiagnosticType } from '@srcbook/shared';
-import { cn } from '../lib/utils';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/underline-flat-tabs';
-import { useCells } from './use-cell';
+import { cn } from '../lib/utils.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/underline-flat-tabs.js';
+import { useCells } from './use-cell.js';
 import { OutputType, StdoutOutputType, StderrOutputType, CellModeType } from '../types';
-import { Button } from './ui/button';
+import { Button } from './ui/button.js';
 
 type Props = {
   cell: CodeCellType | PackageJsonCellType;

packages/components/src/components/cells/code.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable jsx-a11y/tabindex-no-positive -- this should be fixed and reworked or minimize excessive positibe tabindex */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Dialog, DialogContent } from '../ui/dialog';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
-import Shortcut from '../keyboard-shortcut';
+import { Dialog, DialogContent } from '../ui/dialog.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
+import Shortcut from '../keyboard-shortcut.js';
 import { useNavigate } from 'react-router-dom';
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable.js';
 import {
   Info,
   Play,
@@ -21,22 +21,22 @@ import {
   CopyIcon,
 } from 'lucide-react';
 import TextareaAutosize from 'react-textarea-autosize';
-import AiGenerateTipsDialog from '../ai-generate-tips-dialog';
+import AiGenerateTipsDialog from '../ai-generate-tips-dialog.js';
 import { CellType, CodeCellType, CodeCellUpdateAttrsType } from '@srcbook/shared';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { CellModeType, SessionType } from '../../types';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
 import DeleteCellWithConfirmation from '../delete-cell-dialog';
-import { CellOutput } from '../cell-output';
-import useTheme from '../use-theme';
+import { CellOutput } from '../cell-output.js';
+import useTheme from '../use-theme.js';
 import { useDebouncedCallback } from 'use-debounce';
 import { EditorView } from 'codemirror';
 import { EditorState, Extension } from '@codemirror/state';
 import { unifiedMergeView } from '@codemirror/merge';
 import { toast } from 'sonner';
-import { PrettierLogo } from '../logos';
-import { useCells } from '../use-cell';
+import { PrettierLogo } from '../logos.js';
+import { useCells } from '../use-cell.js';
 
 const DEBOUNCE_DELAY = 500;
 

packages/components/src/components/cells/markdown.tsx

@@ -6,10 +6,10 @@ import CodeMirror, { keymap, Prec, EditorView } from '@uiw/react-codemirror';
 import { markdown } from '@codemirror/lang-markdown';
 import { CircleAlert, Trash2, Pencil } from 'lucide-react';
 import { CellType, MarkdownCellType, MarkdownCellUpdateAttrsType } from '@srcbook/shared';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import DeleteCellWithConfirmation from '../delete-cell-dialog';
-import useTheme from '../use-theme';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import DeleteCellWithConfirmation from '../delete-cell-dialog.js';
+import useTheme from '../use-theme.js';
 
 marked.use({ gfm: true });
 

packages/components/src/components/cells/title.tsx

@@ -1,5 +1,5 @@
 import { TitleCellType, TitleCellUpdateAttrsType } from '@srcbook/shared';
-import { EditableH1 } from '../ui/heading';
+import { EditableH1 } from '../ui/heading.js';
 
 type BaseProps = {
   cell: TitleCellType;

packages/components/src/components/delete-cell-dialog.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
-import { Button } from './ui/button';
+import { Button } from './ui/button.js';
 import {
   Dialog,
   DialogTrigger,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from './ui/dialog';
+} from './ui/dialog.js';
 
 export default function DeleteCellWithConfirmationModal({
   onDeleteCell,

packages/components/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:translate-y-0.5',

packages/components/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

packages/components/src/components/ui/command.tsx

@@ -3,8 +3,8 @@ import { type DialogProps } from '@radix-ui/react-dialog';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../../lib/utils';
-import { Dialog, DialogContent } from './dialog';
+import { cn } from '../../lib/utils.js';
+import { Dialog, DialogContent } from './dialog.js';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

packages/components/src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Dialog = DialogPrimitive.Root;
 

packages/components/src/components/ui/dropdown-menu.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

packages/components/src/components/ui/heading.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { TitleCellUpdateAttrsSchema } from '@srcbook/shared';
 
 const className =

packages/components/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
   ({ className, type, ...props }, ref) => {

packages/components/src/components/ui/navigation-menu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

packages/components/src/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Popover = PopoverPrimitive.Root;
 

packages/components/src/components/ui/resizable.tsx

@@ -1,7 +1,7 @@
 import { DragHandleDots2Icon } from '@radix-ui/react-icons';
 import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const ResizablePanelGroup = ({
   className,

packages/components/src/components/ui/select.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Select = SelectPrimitive.Root;
 

packages/components/src/components/ui/sheet.tsx

@@ -3,7 +3,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Sheet = SheetPrimitive.Root;
 

packages/components/src/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

packages/components/src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Tabs = TabsPrimitive.Root;
 

packages/components/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,

packages/components/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

packages/components/src/components/ui/underline-flat-tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Tabs = TabsPrimitive.Root;
 

packages/components/src/components/use-theme.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { srcbookLight, srcbookDark } from '..//lib/code-theme';
+import { srcbookLight, srcbookDark } from '../lib/code-theme.js';
 
 export type ThemeType = 'light' | 'dark';
 export type CodeThemeType = typeof srcbookLight | typeof srcbookDark;

packages/components/src/index.tsx

@@ -1,31 +1,31 @@
-import TitleCell from './components/cells/title';
-import MarkdownCell from './components/cells/markdown';
-import CodeCell from './components/cells/code';
+import TitleCell from './components/cells/title.js';
+import MarkdownCell from './components/cells/markdown.js';
+import CodeCell from './components/cells/code.js';
 export { TitleCell, MarkdownCell, CodeCell };
 
-export * from './components/ui/button';
-export * from './components/ui/card';
-export * from './components/ui/collapsible';
-export * from './components/ui/command';
-export * from './components/ui/dialog';
+export * from './components/ui/button.js';
+export * from './components/ui/card.js';
+export * from './components/ui/collapsible.js';
+export * from './components/ui/command.js';
+export * from './components/ui/dialog.js';
 export * from './components/ui/dropdown-menu';
-export * from './components/ui/heading';
-export * from './components/ui/input';
-export * from './components/ui/navigation-menu';
-export * from './components/ui/popover';
-export * from './components/ui/resizable';
-export * from './components/ui/select';
-export * from './components/ui/sheet';
-export * from './components/ui/sonner';
-export * from './components/ui/switch';
-export * from './components/ui/tabs';
-export * from './components/ui/textarea';
-export * from './components/ui/tooltip';
+export * from './components/ui/heading.js';
+export * from './components/ui/input.js';
+export * from './components/ui/navigation-menu.js';
+export * from './components/ui/popover.js';
+export * from './components/ui/resizable.js';
+export * from './components/ui/select.js';
+export * from './components/ui/sheet.js';
+export * from './components/ui/sonner.js';
+export * from './components/ui/switch.js';
+export * from './components/ui/tabs.js';
+export * from './components/ui/textarea.js';
+export * from './components/ui/tooltip.js';
 export {
   Tabs as UnderlineTabs,
   TabsList as UnderlingTabsList,
   TabsTrigger as UnderlineTabsTrigger,
   TabsContent as UnderlineTabsContent,
-} from './components/ui/underline-flat-tabs';
+} from './components/ui/underline-flat-tabs.js';
 
-export * from './lib/utils';
+export * from './lib/utils.js';

packages/components/src/ui/heading.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils.js';
 import { TitleCellUpdateAttrsSchema } from '@srcbook/shared';
 
 const className =