chore: Add file extensions to jumble imports for deno experiments (#459)

jsantell · web-flow · commit 8b09db9f09c4 · 2025-02-25T15:26:45.000-08:00
diff --git a/typescript/packages/jumble/src/components/AudioRecorderInput.tsx b/typescript/packages/jumble/src/components/AudioRecorderInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonAudioRecording, useAudioRecorder } from '@/hooks/use-audio-recorder';
+import { CommonAudioRecording, useAudioRecorder } from '@/hooks/use-audio-recorder.ts';
 
 interface AudioRecorderProps {
   transcribe?: boolean;
diff --git a/typescript/packages/jumble/src/components/CharmRunner.tsx b/typescript/packages/jumble/src/components/CharmRunner.tsx
@@ -1,10 +1,10 @@
 import React, { useRef } from "react";
 import { render } from "@commontools/html";
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { useNavigate } from "react-router-dom";
-import { fixItCharm } from "@/utils/charm-operations";
+import { fixItCharm } from "@/utils/charm-operations.ts";
 import { LuX } from "react-icons/lu";
-import { DitheredCube } from "@/components/DitherCube";
+import { DitheredCube } from "@/components/DitherCube.tsx";
 
 interface CharmLoaderProps {
   charmImport: () => Promise<any>;
diff --git a/typescript/packages/jumble/src/components/CommandCenter.tsx b/typescript/packages/jumble/src/components/CommandCenter.tsx
@@ -1,15 +1,15 @@
 import { Command } from "cmdk";
 import { useState, useEffect, useMemo, useCallback } from "react";
 import "./commands.css";
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { useMatch, useNavigate } from "react-router-dom";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { DialogDescription, DialogTitle } from "@radix-ui/react-dialog";
-import { DitheredCube } from "./DitherCube";
-import { CommandContext, CommandItem, CommandMode, getCommands } from "./commands";
-import { usePreferredLanguageModel } from "@/contexts/LanguageModelContext";
-import { TranscribeInput } from "./TranscribeCommand";
-import { useBackgroundTasks } from "@/contexts/BackgroundTaskContext";
+import { DitheredCube } from "./DitherCube.tsx";
+import { CommandContext, CommandItem, CommandMode, getCommands } from "./commands.ts";
+import { usePreferredLanguageModel } from "@/contexts/LanguageModelContext.tsx";
+import { TranscribeInput } from "./TranscribeCommand.tsx";
+import { useBackgroundTasks } from "@/contexts/BackgroundTaskContext.tsx";
 
 function CommandProcessor({
   mode,
diff --git a/typescript/packages/jumble/src/components/Loader.tsx b/typescript/packages/jumble/src/components/Loader.tsx
@@ -1,4 +1,4 @@
-import { DitheredCube } from "./DitherCube";
+import { DitheredCube } from "./DitherCube.tsx";
 export const LoadingSpinner = ({
   visible = true,
   height = 512,
diff --git a/typescript/packages/jumble/src/components/NavPath.tsx b/typescript/packages/jumble/src/components/NavPath.tsx
@@ -1,4 +1,4 @@
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { NAME } from "@commontools/builder";
 import React, { useEffect } from "react";
 import { NavLink } from "react-router-dom";
diff --git a/typescript/packages/jumble/src/components/SearchResults.tsx b/typescript/packages/jumble/src/components/SearchResults.tsx
@@ -1,5 +1,5 @@
-import { WebComponent } from "@/components/WebComponent";
-import { SpellSearchResult } from "@/search";
+import { WebComponent } from "@/components/WebComponent.tsx";
+import { SpellSearchResult } from "@/search.ts";
 import { useCallback } from "react";
 
 interface SearchResultsProps {
diff --git a/typescript/packages/jumble/src/components/ShellHeader.tsx b/typescript/packages/jumble/src/components/ShellHeader.tsx
@@ -2,13 +2,13 @@ import { useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import { LuPencil, LuShare2 } from "react-icons/lu";
 import ShapeLogo from "@/assets/ShapeLogo.svg";
-import { NavPath } from "@/components/NavPath";
-import { ShareDialog } from "@/components/spellbook/ShareDialog";
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { NavPath } from "@/components/NavPath.tsx";
+import { ShareDialog } from "@/components/spellbook/ShareDialog.tsx";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { NAME, TYPE } from "@commontools/builder";
 import { useNavigate } from "react-router-dom";
-import { saveSpell } from "@/services/spellbook";
-import { User } from "@/components/User";
+import { saveSpell } from "@/services/spellbook.ts";
+import { User } from "@/components/User.tsx";
 
 type ShellHeaderProps = {
   replicaName?: string;
diff --git a/typescript/packages/jumble/src/components/TranscribeCommand.tsx b/typescript/packages/jumble/src/components/TranscribeCommand.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
-import { useAudioRecorder } from "@/hooks/use-audio-recorder";
-import { CommandContext, CommandItem } from "./commands";
-import { DitheredCube } from "./DitherCube";
+import { useAudioRecorder } from "@/hooks/use-audio-recorder.ts";
+import { CommandContext, CommandItem } from "./commands.ts";
+import { DitheredCube } from "./DitherCube.tsx";
 
 interface TranscribeInputProps {
   mode: { command: CommandItem; placeholder: string };
diff --git a/typescript/packages/jumble/src/components/User.tsx b/typescript/packages/jumble/src/components/User.tsx
@@ -1,4 +1,4 @@
-import { useAuthentication } from "@/contexts/AuthenticationContext";
+import { useAuthentication } from "@/contexts/AuthenticationContext.tsx";
 import { useEffect, useState } from "react";
 
 export function User() {
diff --git a/typescript/packages/jumble/src/components/VariantTray.tsx b/typescript/packages/jumble/src/components/VariantTray.tsx
@@ -1,6 +1,6 @@
 import { Charm } from "@commontools/charm";
-import { CharmRenderer } from "@/components/CharmRunner";
-import { charmId } from "@/utils/charms";
+import { CharmRenderer } from "@/components/CharmRunner.tsx";
+import { charmId } from "@/utils/charms.ts";
 import { useNavigate, useParams } from "react-router-dom";
 import { Cell } from "@commontools/runner";
 
diff --git a/typescript/packages/jumble/src/components/WebComponent.tsx b/typescript/packages/jumble/src/components/WebComponent.tsx
@@ -1,4 +1,4 @@
-import { useWebComponent } from "@/hooks/use-web-component";
+import { useWebComponent } from "@/hooks/use-web-component.ts";
 import React from "react";
 
 export function WebComponent<P extends Record<string, any>>({
diff --git a/typescript/packages/jumble/src/components/commands.ts b/typescript/packages/jumble/src/components/commands.ts
@@ -1,13 +1,13 @@
 import "./commands.css";
 import { castNewRecipe, Charm, CharmManager, compileAndRunRecipe } from "@commontools/charm";
 import { NavigateFunction } from "react-router-dom";
-import { charmId } from "@/utils/charms";
+import { charmId } from "@/utils/charms.ts";
 import { NAME } from "@commontools/builder";
 import { Cell, getDocByEntityId, getEntityId, getRecipe } from "@commontools/runner";
-import { iterateCharm } from "@/utils/charm-operations";
-import { BackgroundJob } from "@/contexts/BackgroundTaskContext";
-import { startCharmIndexing } from "@/utils/indexing";
-import { generateJSON } from "@/utils/prompt-library/json-gen";
+import { iterateCharm } from "@/utils/charm-operations.ts";
+import { BackgroundJob } from "@/contexts/BackgroundTaskContext.tsx";
+import { startCharmIndexing } from "@/utils/indexing.ts";
+import { generateJSON } from "@/utils/prompt-library/json-gen.ts";
 
 export type CommandType = "action" | "input" | "confirm" | "select" | "menu" | "transcribe";
 
diff --git a/typescript/packages/jumble/src/components/spellbook/SearchBox.tsx b/typescript/packages/jumble/src/components/spellbook/SearchBox.tsx
@@ -1,6 +1,6 @@
 import { useLocation, useNavigate } from "react-router-dom";
 import { useTransition, useState, useEffect } from "react";
-import { useDebounce } from "@/hooks/use-debounce";
+import { useDebounce } from "@/hooks/use-debounce.ts";
 
 interface SearchBoxProps {
   defaultValue?: string;
diff --git a/typescript/packages/jumble/src/hooks/use-charm.ts b/typescript/packages/jumble/src/hooks/use-charm.ts
@@ -1,4 +1,4 @@
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { Charm, getIframeRecipe, IFrameRecipe } from "@commontools/charm";
 import { Cell, effect } from "@commontools/runner";
 import React from "react";
diff --git a/typescript/packages/jumble/src/iframe-ctx.ts b/typescript/packages/jumble/src/iframe-ctx.ts
@@ -1,6 +1,6 @@
 import { setIframeContextHandler } from "@commontools/iframe-sandbox";
 import { Action, ReactivityLog, addAction, removeAction } from "@commontools/runner";
-import { llm } from "@/utils/llm";
+import { llm } from "@/utils/llm.ts";
 
 // FIXME(ja): perhaps this could be in common-charm?  needed to enable iframe with sandboxing
 // This is to prepare Proxy objects to be serialized
diff --git a/typescript/packages/jumble/src/main.tsx b/typescript/packages/jumble/src/main.tsx
@@ -5,21 +5,21 @@ import "@/styles/index.css";
 import PhotoFlowIndex from "@/views/experiments/photoflow/Index.tsx";
 import PhotoSetView from "@/views/experiments/photoflow/PhotoSetView.tsx";
 import NewSpell from "@/views/experiments/photoflow/NewSpell.tsx";
-import Shell from "@/views/Shell";
-import { CharmsProvider } from "@/contexts/CharmsContext";
+import Shell from "@/views/Shell.tsx";
+import { CharmsProvider } from "@/contexts/CharmsContext.tsx";
 import "./recipes/index";
-import { CharmsManagerProvider } from "@/contexts/CharmManagerContext";
-import CharmList from "@/views/CharmList";
-import CharmShowView from "@/views/CharmShowView";
-import CharmDetailView from "@/views/CharmDetailView";
-import { LanguageModelProvider } from "./contexts/LanguageModelContext";
-import { BackgroundTaskProvider } from "./contexts/BackgroundTaskContext";
-import { AuthenticationProvider } from "./contexts/AuthenticationContext";
-import { setupIframe } from "./iframe-ctx";
-import GenerateJSONView from "@/views/utility/GenerateJSONView";
-import SpellbookIndexView from "@/views/spellbook/SpellbookIndexView";
-import SpellbookDetailView from "@/views/spellbook/SpellbookDetailView";
-import SpellbookLaunchView from "./views/spellbook/SpellbookLaunchView";
+import { CharmsManagerProvider } from "@/contexts/CharmManagerContext.tsx";
+import CharmList from "@/views/CharmList.tsx";
+import CharmShowView from "@/views/CharmShowView.tsx";
+import CharmDetailView from "@/views/CharmDetailView.tsx";
+import { LanguageModelProvider } from "./contexts/LanguageModelContext.tsx";
+import { BackgroundTaskProvider } from "./contexts/BackgroundTaskContext.tsx";
+import { AuthenticationProvider } from "./contexts/AuthenticationContext.tsx";
+import { setupIframe } from "./iframe-ctx.ts";
+import GenerateJSONView from "@/views/utility/GenerateJSONView.tsx";
+import SpellbookIndexView from "@/views/spellbook/SpellbookIndexView.tsx";
+import SpellbookDetailView from "@/views/spellbook/SpellbookDetailView.tsx";
+import SpellbookLaunchView from "./views/spellbook/SpellbookLaunchView.tsx";
 
 setupIframe();
 
diff --git a/typescript/packages/jumble/src/utils/charm-operations.ts b/typescript/packages/jumble/src/utils/charm-operations.ts
@@ -7,8 +7,8 @@ import {
 } from "@commontools/charm";
 import { Cell, EntityId } from "@commontools/runner";
 
-import { charmId } from "@/utils/charms";
-import { fixRecipePrompt } from "@/utils/prompt-library/recipe-fix";
+import { charmId } from "@/utils/charms.ts";
+import { fixRecipePrompt } from "@/utils/prompt-library/recipe-fix.ts";
 
 export async function fixItCharm(
   charmManager: CharmManager,
diff --git a/typescript/packages/jumble/src/utils/indexing.ts b/typescript/packages/jumble/src/utils/indexing.ts
@@ -1,7 +1,7 @@
 import { CharmManager } from "@commontools/charm";
-import { BackgroundJob } from "@/contexts/BackgroundTaskContext";
-import { charmId } from "./charms";
-import { llm } from "./llm";
+import { BackgroundJob } from "@/contexts/BackgroundTaskContext.tsx";
+import { charmId } from "./charms.ts";
+import { llm } from "./llm.ts";
 import { Cell } from "@commontools/runner";
 import { Charm } from "@commontools/charm";
 interface IndexingContext {
diff --git a/typescript/packages/jumble/src/utils/prompt-library/charm-describe.ts b/typescript/packages/jumble/src/utils/prompt-library/charm-describe.ts
@@ -1,5 +1,5 @@
-import { llm } from "@/utils/llm";
-import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting";
+import { llm } from "@/utils/llm.ts";
+import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting.ts";
 
 const SYSTEM_PROMPT = `
 You are tasked with generating a concise, one-sentence description of a web application based on its specification, code, and schema. Your goal is to capture the essence of what the app does in a clear and informative manner.
diff --git a/typescript/packages/jumble/src/utils/prompt-library/charm-suggestions.ts b/typescript/packages/jumble/src/utils/prompt-library/charm-suggestions.ts
@@ -1,7 +1,7 @@
-import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting";
-import { llm } from "@/utils/llm";
+import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting.ts";
+import { llm } from "@/utils/llm.ts";
 import JSON5 from "json5";
-import { describeCharm } from "@/utils/prompt-library/charm-describe";
+import { describeCharm } from "@/utils/prompt-library/charm-describe.ts";
 const SYSTEM_PROMPT = `
 You are tasked with generating prompt suggestions to iterate on web app functionality in new and interesting directions.
 
diff --git a/typescript/packages/jumble/src/utils/prompt-library/json-gen.ts b/typescript/packages/jumble/src/utils/prompt-library/json-gen.ts
@@ -1,7 +1,7 @@
 import JSON5 from "json5";
 
-import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting";
-import { llm } from "@/utils/llm";
+import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting.ts";
+import { llm } from "@/utils/llm.ts";
 
 const SYSTEM_PROMPT = `
 You are an expert JSON data generator AI. Your task is to design and generate a JSON blob that models and illustrates the data structure that would enable a product feature or idea described by a user.
diff --git a/typescript/packages/jumble/src/utils/prompt-library/recipe-fix.ts b/typescript/packages/jumble/src/utils/prompt-library/recipe-fix.ts
@@ -1,6 +1,6 @@
-import { llm } from "@/utils/llm";
-import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting";
-import { recipeGuidePrompt } from "@/utils/prompt-library/recipe-guide";
+import { llm } from "@/utils/llm.ts";
+import { hydratePrompt, parseTagFromResponse } from "@/utils/prompt-library/prompting.ts";
+import { recipeGuidePrompt } from "@/utils/prompt-library/recipe-guide.ts";
 
 const SYSTEM_PROMPT = `
 You are a code debugging and fixing assistant. Your task is to analyze buggy code that has caused errors and crashes, and then generate fixed code based on the original specifications. The code runs inside an iframe, and errors bubble up from there.
diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -1,4 +1,4 @@
-import { useAuthentication } from "@/contexts/AuthenticationContext";
+import { useAuthentication } from "@/contexts/AuthenticationContext.tsx";
 import { useCallback, useRef, useState } from "react";
 
 const BTN_STYLE=`bg-gray-50 border-2 p-2 w-full flex-1 cursor-pointer`;
diff --git a/typescript/packages/jumble/src/views/CharmDetailView.tsx b/typescript/packages/jumble/src/views/CharmDetailView.tsx
@@ -1,20 +1,20 @@
 import { saveNewRecipeVersion, IFrameRecipe, Charm, getIframeRecipe } from "@commontools/charm";
 import React, { useEffect, useState, useCallback, useRef } from "react";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
-import { useCharmManager } from "@/contexts/CharmManagerContext";
-import { LoadingSpinner } from "@/components/Loader";
-import { useCharm } from "@/hooks/use-charm";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
+import { LoadingSpinner } from "@/components/Loader.tsx";
+import { useCharm } from "@/hooks/use-charm.ts";
 import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
-import { CharmRenderer } from "@/components/CharmRunner";
-import { iterateCharm } from "@/utils/charm-operations";
-import { charmId } from "@/utils/charms";
-import { DitheredCube } from "@/components/DitherCube";
-import { VariantTray } from "@/components/VariantTray";
+import { CharmRenderer } from "@/components/CharmRunner.tsx";
+import { iterateCharm } from "@/utils/charm-operations.ts";
+import { charmId } from "@/utils/charms.ts";
+import { DitheredCube } from "@/components/DitherCube.tsx";
+import { VariantTray } from "@/components/VariantTray.tsx";
 import {
   generateCharmSuggestions,
   type CharmSuggestion,
-} from "@/utils/prompt-library/charm-suggestions";
+} from "@/utils/prompt-library/charm-suggestions.ts";
 import { Cell } from "@commontools/runner";
 type Tab = "iterate" | "code" | "data";
 
diff --git a/typescript/packages/jumble/src/views/CharmList.tsx b/typescript/packages/jumble/src/views/CharmList.tsx
@@ -1,11 +1,11 @@
 import { useCell } from "@/hooks/use-cell";
 import { NavLink } from "react-router-dom";
 import { NAME, UI } from "@commontools/builder";
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { Charm } from "@commontools/charm";
-import { charmId } from "@/utils/charms";
+import { charmId } from "@/utils/charms.ts";
 import { useEffect, useRef, useState } from "react";
-import { Card } from "@/components/Card";
+import { Card } from "@/components/Card.tsx";
 import { useParams } from "react-router-dom";
 import { render } from "@commontools/html";
 import { Cell } from "@commontools/runner";
diff --git a/typescript/packages/jumble/src/views/CharmShowView.tsx b/typescript/packages/jumble/src/views/CharmShowView.tsx
@@ -1,8 +1,8 @@
 import { useParams } from "react-router-dom";
 
-import { CharmRenderer } from "@/components/CharmRunner";
-import { LoadingSpinner } from "@/components/Loader";
-import { useCharm } from "@/hooks/use-charm";
+import { CharmRenderer } from "@/components/CharmRunner.tsx";
+import { LoadingSpinner } from "@/components/Loader.tsx";
+import { useCharm } from "@/hooks/use-charm.ts";
 
 function CharmShowView() {
   const { charmId } = useParams();
diff --git a/typescript/packages/jumble/src/views/Home.tsx b/typescript/packages/jumble/src/views/Home.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import BlobCanvas from "@/components/BlobCanvas.tsx";
 import { useAllBlobs } from "@/utils/api.ts";
 import { useNavigate } from "react-router-dom";
-import { savePhotoSet } from "@/utils/photoset";
+import { savePhotoSet } from "@/utils/photoset.ts";
 
 export default function Home() {
   const { blobs } = useAllBlobs();
diff --git a/typescript/packages/jumble/src/views/NewPhotoSet.tsx b/typescript/packages/jumble/src/views/NewPhotoSet.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useDropzone } from "react-dropzone";
-import { savePhotoSet } from "@/utils/photoset";
+import { savePhotoSet } from "@/utils/photoset.ts";
 
 export default function NewPhotoSet() {
   const navigate = useNavigate();
diff --git a/typescript/packages/jumble/src/views/Shell.tsx b/typescript/packages/jumble/src/views/Shell.tsx
@@ -5,10 +5,10 @@ import { Outlet, useParams, useLocation } from "react-router-dom";
 import { animated } from "@react-spring/web";
 import { MdOutlineStar } from "react-icons/md";
 
-import ShellHeader from "@/components/ShellHeader";
-import { CommandCenter } from "@/components/CommandCenter";
-import { useAuthentication } from "@/contexts/AuthenticationContext";
-import { AuthenticationView } from "@/views/AuthenticationView";
+import ShellHeader from "@/components/ShellHeader.tsx";
+import { CommandCenter } from "@/components/CommandCenter.tsx";
+import { useAuthentication } from "@/contexts/AuthenticationContext.tsx";
+import { AuthenticationView } from "@/views/AuthenticationView.tsx";
 
 
 export default function Shell() {
diff --git a/typescript/packages/jumble/src/views/spellbook/SpellbookDetailView.tsx b/typescript/packages/jumble/src/views/spellbook/SpellbookDetailView.tsx
@@ -23,10 +23,10 @@ import {
   shareSpell,
   trackRun,
   deleteSpell,
-} from "@/services/spellbook";
-import { ActionButton } from "@/components/spellbook/ActionButton";
-import { SpellbookHeader } from "@/components/spellbook/SpellbookHeader";
-import { SpellPreview } from "@/components/spellbook/SpellPreview";
+} from "@/services/spellbook.ts";
+import { ActionButton } from "@/components/spellbook/ActionButton.tsx";
+import { SpellbookHeader } from "@/components/spellbook/SpellbookHeader.tsx";
+import { SpellPreview } from "@/components/spellbook/SpellPreview.tsx";
 
 export default function SpellbookDetailView() {
   const { spellId } = useParams<{ spellId: string }>();
diff --git a/typescript/packages/jumble/src/views/spellbook/SpellbookIndexView.tsx b/typescript/packages/jumble/src/views/spellbook/SpellbookIndexView.tsx
@@ -2,11 +2,11 @@
 
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { SearchBox } from "@/components/spellbook/SearchBox";
-import SpellCard from "@/components/spellbook/SpellCard";
-import { SpellbookHeader } from "@/components/spellbook/SpellbookHeader";
-import { LoadingSpinner } from "@/components/Loader";
-import { listAllSpells, type Spell } from "@/services/spellbook";
+import { SearchBox } from "@/components/spellbook/SearchBox.tsx";
+import SpellCard from "@/components/spellbook/SpellCard.tsx";
+import { SpellbookHeader } from "@/components/spellbook/SpellbookHeader.tsx";
+import { LoadingSpinner } from "@/components/Loader.tsx";
+import { listAllSpells, type Spell } from "@/services/spellbook.ts";
 
 export default function SpellbookIndexView() {
   const [spells, setSpells] = useState<Spell[]>([]);
diff --git a/typescript/packages/jumble/src/views/spellbook/SpellbookLaunchView.tsx b/typescript/packages/jumble/src/views/spellbook/SpellbookLaunchView.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { useCharmManager } from "@/contexts/CharmManagerContext";
+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 import { getRecipe } from "@commontools/runner";
 
 export default function SpellbookLaunchView() {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { DitheredCube } from "./DitherCube";`
	`1`	`+import { DitheredCube } from "./DitherCube.tsx";`
`2`	`2`	`export const LoadingSpinner = ({`
`3`	`3`	`visible = true,`
`4`	`4`	`height = 512,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useCharmManager } from "@/contexts/CharmManagerContext";`
	`1`	`+import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";`
`2`	`2`	`import { NAME } from "@commontools/builder";`
`3`	`3`	`import React, { useEffect } from "react";`
`4`	`4`	`import { NavLink } from "react-router-dom";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useAuthentication } from "@/contexts/AuthenticationContext";`
	`1`	`+import { useAuthentication } from "@/contexts/AuthenticationContext.tsx";`
`2`	`2`	`import { useEffect, useState } from "react";`
`3`	`3`
`4`	`4`	`export function User() {`