@autono/open-pages 0.1.0 → 0.3.0

package/src/app/components/asset-view.tsx

@@ -22,7 +22,7 @@ import {
 } from 'lucide-react';
 import { useDeferredValue, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { Button, buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '~/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -30,23 +30,23 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from '~/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+} from '~/components/ui/dropdown-menu';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select';
-import { Slider } from '@/components/ui/slider';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+} from '~/components/ui/select';
+import { Slider } from '~/components/ui/slider';
+import { Tabs, TabsList, TabsTrigger } from '~/components/ui/tabs';
+import { ToggleGroup, ToggleGroupItem } from '~/components/ui/toggle-group';
 import {
   type AssetSortDirection,
   type AssetSortKey,
@@ -55,7 +55,7 @@ import {
   type AssetUsageFilter,
   filterAssets,
   sortAssets,
-} from '@/lib/asset-filter';
+} from '~/lib/asset-filter';
 import {
   type AssetEntry,
   type AssetUsage,
@@ -66,9 +66,9 @@ import {
   type SvglItem,
   searchSvgl,
   useAssets,
-} from '@/lib/assets';
-import { format, useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+} from '~/lib/assets';
+import { format, useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 
 type Props = { pageId: string | null };
 

package/src/app/components/command/command-menu.tsx

@@ -1,12 +1,12 @@
 import { Check, Languages, Loader2, Monitor, Moon, RotateCw, Search, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
-import { IconTooltip } from '@/components/icon-tooltip';
-import { buttonVariants } from '@/components/ui/button';
-import { TooltipTrigger } from '@/components/ui/tooltip';
-import { LOCALE_OPTIONS, setLocale } from '@/lib/locale-store';
-import { format, useLocale } from '@/lib/use-locale';
-import { useRestartServer } from '@/lib/use-restart-server';
+import { IconTooltip } from '~/components/icon-tooltip';
+import { buttonVariants } from '~/components/ui/button';
+import { TooltipTrigger } from '~/components/ui/tooltip';
+import { LOCALE_OPTIONS, setLocale } from '~/lib/locale-store';
+import { format, useLocale } from '~/lib/use-locale';
+import { useRestartServer } from '~/lib/use-restart-server';
 import {
   Command,
   CommandDialog,

package/src/app/components/command/command.tsx

@@ -1,8 +1,8 @@
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 import type * as React from 'react';
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
-import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '~/components/ui/dialog';
+import { cn } from '~/lib/utils';
 
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (

package/src/app/components/command/home-command-menu.tsx

@@ -1,8 +1,8 @@
 import { Image as ImageIcon, Palette, Presentation } from 'lucide-react';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useLocale } from '@/lib/use-locale';
-import { usePageTitles } from '@/lib/use-page-titles';
+import { useLocale } from '~/lib/use-locale';
+import { usePageTitles } from '~/lib/use-page-titles';
 import { pageIds } from '../../lib/pages';
 import type { Folder } from '../../lib/sdk';
 import { FolderIconChip } from '../sidebar/folder-item';

package/src/app/components/icon-tooltip.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Tooltip, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider } from '~/components/ui/tooltip';
 
 /**
  * Shared hover label for the toolbar icon buttons. `children` supplies the

package/src/app/components/language-toggle.tsx

@@ -1,16 +1,16 @@
 import { Languages } from 'lucide-react';
-import { IconTooltip } from '@/components/icon-tooltip';
-import { buttonVariants } from '@/components/ui/button';
+import { IconTooltip } from '~/components/icon-tooltip';
+import { buttonVariants } from '~/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { TooltipTrigger } from '@/components/ui/tooltip';
-import { LOCALE_OPTIONS, setLocale } from '@/lib/locale-store';
-import { useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+} from '~/components/ui/dropdown-menu';
+import { TooltipTrigger } from '~/components/ui/tooltip';
+import { LOCALE_OPTIONS, setLocale } from '~/lib/locale-store';
+import { useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 
 export function LanguageToggle() {
   const t = useLocale();

package/src/app/components/sidebar/folder-item.tsx

@@ -5,11 +5,11 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import type { Folder, FolderIcon } from '@/lib/sdk';
-import { useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+} from '~/components/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
+import type { Folder, FolderIcon } from '~/lib/sdk';
+import { useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 import { IconPicker } from './icon-picker';
 
 export const DOC_DND_MIME = 'application/x-page-id';

package/src/app/components/sidebar/icon-picker.tsx

@@ -1,7 +1,7 @@
 import EmojiPicker, { EmojiStyle, Theme } from 'emoji-picker-react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import type { FolderIcon } from '@/lib/sdk';
-import { useLocale } from '@/lib/use-locale';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
+import type { FolderIcon } from '~/lib/sdk';
+import { useLocale } from '~/lib/use-locale';
 
 export const PRESET_COLORS = [
   '#e5484d', // red

package/src/app/components/sidebar/sidebar-footer.tsx

@@ -2,10 +2,10 @@ import config from 'virtual:open-pages/config';
 import { Loader2, RefreshCw, RotateCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { format, useLocale } from '@/lib/use-locale';
-import { useRestartServer } from '@/lib/use-restart-server';
+import { Button } from '~/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui/tooltip';
+import { format, useLocale } from '~/lib/use-locale';
+import { useRestartServer } from '~/lib/use-restart-server';
 
 type UpdateCheck = { current: string; latest: string | null; outdated: boolean };
 type UpdateStatus = 'idle' | 'running' | 'done' | 'error';

package/src/app/components/sidebar/sidebar.tsx

@@ -1,12 +1,12 @@
 import { Plus } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { LanguageToggle } from '@/components/language-toggle';
-import { ThemeToggle } from '@/components/theme-toggle';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import type { Folder, FolderIcon } from '@/lib/sdk';
-import { format, useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+import { LanguageToggle } from '~/components/language-toggle';
+import { ThemeToggle } from '~/components/theme-toggle';
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
+import type { Folder, FolderIcon } from '~/lib/sdk';
+import { format, useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 import { CommandMenuTrigger } from '../command/command-menu';
 import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';

package/src/app/components/theme-toggle.tsx

@@ -1,17 +1,17 @@
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
-import { IconTooltip } from '@/components/icon-tooltip';
-import { buttonVariants } from '@/components/ui/button';
+import { IconTooltip } from '~/components/icon-tooltip';
+import { buttonVariants } from '~/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { TooltipTrigger } from '@/components/ui/tooltip';
-import { useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+} from '~/components/ui/dropdown-menu';
+import { TooltipTrigger } from '~/components/ui/tooltip';
+import { useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();

package/src/app/components/themes/theme-detail.tsx

@@ -1,9 +1,9 @@
 import { ChevronDown, ChevronLeft } from 'lucide-react';
 import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button } from '@/components/ui/button';
-import { useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+import { Button } from '~/components/ui/button';
+import { useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 import { frameUrl } from '../../lib/frame';
 import { PageThumb } from '../../lib/page-thumb';
 import { loadPage, pageKinds, pagesByTheme } from '../../lib/pages';
@@ -174,7 +174,7 @@ function ThemeDocCard({ id }: { id: string }) {
 
 const PROMPT_COLLAPSED_PX = 320;
 
-const HEX_RE = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b/g;
+const HEX_RE = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b|oklch\([^)]*\)/g;
 
 function renderBodyWithSwatches(body: string): ReactNode[] {
   const out: ReactNode[] = [];

package/src/app/components/themes/themes-gallery.tsx

@@ -1,4 +1,4 @@
-import { format, useLocale } from '@/lib/use-locale';
+import { format, useLocale } from '~/lib/use-locale';
 import { PageThumb } from '../../lib/page-thumb';
 import { type Theme, themes } from '../../lib/themes';
 

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

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 const badgeVariants = cva(
   'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 /*
  * Editorial button. Tight square-ish radius, hairline borders instead of

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function Card({
   className,

package/src/app/components/ui/context-menu.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;

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

@@ -1,8 +1,8 @@
 import { XIcon } from 'lucide-react';
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import type * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import { Button } from '~/components/ui/button';
+import { cn } from '~/lib/utils';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;

package/src/app/components/ui/dropdown-menu.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { Menu as DropdownMenuPrimitive } from '@base-ui/react/menu';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 type DropdownMenuPositionerProps = Pick<
   React.ComponentProps<typeof DropdownMenuPrimitive.Positioner>,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 function Label({
   className,

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
 
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 function Progress({
   className,

package/src/app/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function ScrollArea({
   className,

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

@@ -4,7 +4,7 @@ import * as React from "react"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
 
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const Select = SelectPrimitive.Root
 

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

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function Separator({
   className,

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Slider as DocrPrimitive } from "@base-ui/react/slider"
 
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 function Slider({
   className,

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function Tabs({
   className,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '~/lib/utils';
 
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (

package/src/app/components/ui/toggle-group.tsx

@@ -5,8 +5,8 @@ import { type VariantProps } from "class-variance-authority"
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "~/lib/utils"
+import { toggleVariants } from "~/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {

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

@@ -2,7 +2,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-[5px] text-[12px] font-medium whitespace-nowrap outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 data-pressed:bg-foreground data-pressed:text-background [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 function TooltipProvider({
   delay = 0,

package/src/app/frame/main.tsx

@@ -1,6 +1,6 @@
 import 'virtual:open-pages/pages.css';
 import { loadPage } from 'virtual:open-pages/pages';
-import { loadThemeDemo } from 'virtual:open-pages/themes';
+import { loadThemeCss, loadThemeDemo, themeCssIds } from 'virtual:open-pages/themes';
 import { createElement, StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import type { FrameMessage, WorkspaceMessage } from '../lib/frame';
@@ -59,6 +59,8 @@ async function mount() {
         `${themeId ? `themes/${themeId}.demo.tsx` : `pages/${pageId}/index.tsx`} must default-export a component. Got: ${typeof mod.default}`,
       );
     }
+    const theme = themeId ?? mod.meta?.theme;
+    if (theme && themeCssIds.includes(theme)) await loadThemeCss(theme);
     const title = mod.meta?.title ?? pageId ?? themeId ?? '';
     document.title = title;
     root.render(createElement(StrictMode, null, createElement(mod.default)));

package/src/app/lib/themes.ts

@@ -8,6 +8,7 @@ export type Theme = {
   description: string;
   body: string;
   hasDemo: boolean;
+  hasCss: boolean;
 };
 
 export type ThemeDemoModule = {

package/src/app/lib/use-restart-server.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useSyncExternalStore } from 'react';
 import { toast } from 'sonner';
-import { useLocale } from '@/lib/use-locale';
+import { useLocale } from '~/lib/use-locale';
 
 type ServerStatus = { executionId: string; canRestart: boolean };
 

package/src/app/routes/home-shell.tsx

@@ -2,18 +2,18 @@ import { Menu } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
-import { LanguageToggle } from '@/components/language-toggle';
-import { ThemeToggle } from '@/components/theme-toggle';
+import { LanguageToggle } from '~/components/language-toggle';
+import { ThemeToggle } from '~/components/theme-toggle';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useAssets } from '@/lib/assets';
-import { useFolders } from '@/lib/folders';
-import { format, useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+} from '~/components/ui/dropdown-menu';
+import { useAssets } from '~/lib/assets';
+import { useFolders } from '~/lib/folders';
+import { format, useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 import { CommandMenuTrigger } from '../components/command/command-menu';
 import { HomeCommandMenu } from '../components/command/home-command-menu';
 import { FolderIconChip } from '../components/sidebar/folder-item';

package/src/app/routes/home.tsx

@@ -15,7 +15,7 @@ import {
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
+import { Button } from '~/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -23,15 +23,15 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from '~/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { format, useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+} from '~/components/ui/dropdown-menu';
+import { format, useLocale } from '~/lib/use-locale';
+import { cn } from '~/lib/utils';
 import { DOC_DND_MIME, FolderIconChip } from '../components/sidebar/folder-item';
 import { ALL_DOCS_ID, DRAFT_ID } from '../components/sidebar/sidebar';
 import { PageThumb } from '../lib/page-thumb';

package/src/app/routes/page.tsx

@@ -14,8 +14,8 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import { Button } from '~/components/ui/button';
+import { cn } from '~/lib/utils';
 import { type FrameMessage, frameUrl, isFrameMessage, type WorkspaceMessage } from '../lib/frame';
 import { pageChangeIncludes, pageIds, pageKinds } from '../lib/pages';
 import { usePageModule } from '../lib/use-page-module';

package/src/app/routes/themes.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { useLocale } from '@/lib/use-locale';
+import { useLocale } from '~/lib/use-locale';
 import { FolderIconChip } from '../components/sidebar/folder-item';
 import { ThemeDetail } from '../components/themes/theme-detail';
 import { ThemesGallery } from '../components/themes/themes-gallery';

package/src/app/virtual.d.ts

@@ -43,9 +43,12 @@ declare module 'virtual:open-pages/themes' {
     description: string;
     body: string;
     hasDemo: boolean;
+    hasCss: boolean;
   };
 
   export const themes: ThemeMeta[];
+  export const themeCssIds: string[];
+  export function loadThemeCss(id: string): Promise<void>;
   export function loadThemeDemo(id: string): Promise<{
     default: PageComponent;
     design?: DesignSystem;

package/dist/export-B-kBRWB1.js

@@ -1,4 +0,0 @@
-import "./open-pages-plugin-D_DN_zjh.js";
-import { buildPage, exportPages } from "./export-ic28osQP.js";
-
-export { exportPages };