@fuma-content/studio 1.0.0 → 1.0.2

package/src/app/globals.css

@@ -1,223 +0,0 @@
-@import "tailwindcss";
-
-@import "tw-animate-css";
-@import "./codeblock/styles.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-  --color-highlight: var(--highlight);
-  --color-brand: var(--brand);
-}
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(53.319% 0.25972 262.653);
-  --primary-foreground: oklch(0.98 0.016 73.684);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.837 0.128 66.29);
-  --chart-2: oklch(0.705 0.213 47.604);
-  --chart-3: oklch(0.646 0.222 41.116);
-  --chart-4: oklch(0.553 0.195 38.402);
-  --chart-5: oklch(0.47 0.157 37.304);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.646 0.222 41.116);
-  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-  --highlight: oklch(0.852 0.199 91.936);
-  --brand: oklch(0.623 0.214 259.815);
-}
-
-.dark {
-  --background: oklch(22.771% 0.00577 285.875);
-  --foreground: oklch(96.416% 0.00011 271.152);
-  --card: oklch(27.521% 0.01101 285.621);
-  --card-foreground: oklch(90.613% 0.00888 264.603);
-  --popover: oklch(18.717% 0.00202 286.054);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(61.824% 0.20616 261.568);
-  --primary-foreground: oklch(0.98 0.016 73.684);
-  --secondary: oklch(31.034% 0.00534 285.995);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(33.792% 0.00523 286.016);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.837 0.128 66.29);
-  --chart-2: oklch(0.705 0.213 47.604);
-  --chart-3: oklch(0.646 0.222 41.116);
-  --chart-4: oklch(0.553 0.195 38.402);
-  --chart-5: oklch(0.47 0.157 37.304);
-  --sidebar: oklch(27.521% 0.01101 285.621);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.705 0.213 47.604);
-  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-  --sidebar-accent: oklch(33.01% 0.00526 286.01);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-  --highlight: oklch(0.852 0.199 91.936);
-  --brand: oklch(0.707 0.165 254.624);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@theme inline {
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-/* Custom variants */
-@custom-variant data-open {
-  &:where([data-state="open"]),
-  &:where([data-open]:not([data-open="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-closed {
-  &:where([data-state="closed"]),
-  &:where([data-closed]:not([data-closed="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-checked {
-  &:where([data-state="checked"]),
-  &:where([data-checked]:not([data-checked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-unchecked {
-  &:where([data-state="unchecked"]),
-  &:where([data-unchecked]:not([data-unchecked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-selected {
-  &:where([data-selected="true"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-disabled {
-  &:where([data-disabled="true"]),
-  &:where([data-disabled]:not([data-disabled="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-active {
-  &:where([data-state="active"]),
-  &:where([data-active]:not([data-active="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}
-
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

package/src/app/layout.client.tsx

@@ -1,15 +0,0 @@
-"use client";
-import { queryClient } from "@/lib/data/query";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ThemeProvider } from "next-themes";
-import { ReactNode } from "react";
-
-export function Providers({ children }: { children: ReactNode }) {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
-        {children}
-      </ThemeProvider>
-    </QueryClientProvider>
-  );
-}

package/src/app/layout.tsx

@@ -1,30 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
-import "./globals.css";
-import { Providers } from "./layout.client";
-
-const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Fuma Content Studio",
-};
-
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" className={inter.variable} suppressHydrationWarning>
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  );
-}

package/src/components/app-sidebar.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar";
-import Link from "next/link";
-import { FileIcon, LayersIcon, Monitor, Moon, SearchIcon, Sun } from "lucide-react";
-import { Badge } from "./ui/badge";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-import { useTheme } from "next-themes";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { Logo } from "./icons/logo";
-import { DocumentActionsContext } from "./collection/document/actions";
-import { eq, ilike, or, useLiveQuery } from "@tanstack/react-db";
-import {
-  collection,
-  documentCollection,
-  type CollectionItem,
-  type DocumentItem,
-} from "@/lib/data/store";
-import { CollectionActionsContext } from "./collection/actions";
-
-export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
-  const [search, setSearch] = React.useState("");
-  const { data: items = [] } = useLiveQuery(
-    (q) => {
-      return q
-        .from({ collection })
-        .join({ docs: documentCollection }, ({ collection, docs }) =>
-          eq(collection.id, docs.collectionId),
-        )
-        .where((b) =>
-          or(ilike(b.collection.name, `${search}%`), ilike(b.docs?.name, `${search}%`)),
-        );
-    },
-    [search],
-  );
-
-  return (
-    <Sidebar variant="floating" {...props}>
-      <SidebarHeader>
-        <SidebarMenuButton asChild>
-          <Link href="/" className="ps-1 font-semibold text-lg font-mono">
-            <Logo className="size-6!" />
-            Fuma Content
-          </Link>
-        </SidebarMenuButton>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent className="flex flex-col gap-2">
-            <div className="inline-flex items-center gap-2 border rounded-full bg-secondary text-secondary-foreground px-3 transition-colors focus-within:ring-2 focus-within:ring-ring">
-              <SearchIcon className="size-4 text-muted-foreground" />
-              <input
-                placeholder="Search..."
-                className="py-1.5 focus-visible:outline-none"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-            <SidebarMenu className="gap-0">
-              {items.map((item, i) => {
-                const subsequence = i > 0 && items[i - 1].collection.id === item.collection.id;
-
-                return (
-                  <React.Fragment key={`${item.collection.id}-${item.docs?.id}`}>
-                    {!subsequence && <SidebarCollectionItem item={item.collection} />}
-                    {item.docs && <SidebarDocumentItem item={item.docs} />}
-                  </React.Fragment>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-      <SidebarFooter>
-        <ThemeToggle />
-      </SidebarFooter>
-    </Sidebar>
-  );
-}
-
-function SidebarDocumentItem({ item }: { item: DocumentItem }) {
-  const pathname = usePathname();
-  const href = `/collection/${item.collectionId}/${item.id}`;
-  return (
-    <DocumentActionsContext document={item}>
-      <SidebarMenuItem>
-        <SidebarMenuButton
-          tooltip={item.name}
-          isActive={pathname === href}
-          className={cn("ps-5", !pathname.startsWith(href + "/") && "text-muted-foreground")}
-          asChild
-        >
-          <Link href={href}>
-            <FileIcon className="text-muted-foreground" />
-            <span>{item.name}</span>
-          </Link>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-    </DocumentActionsContext>
-  );
-}
-
-function SidebarCollectionItem({ item }: { item: CollectionItem }) {
-  const pathname = usePathname();
-  const href = `/collection/${item.id}`;
-  return (
-    <CollectionActionsContext collection={item}>
-      <SidebarMenuItem>
-        <SidebarMenuButton
-          tooltip={item.name}
-          isActive={pathname === href}
-          className={cn("ps-3", !pathname.startsWith(href + "/") && "text-muted-foreground")}
-          asChild
-        >
-          <Link href={href}>
-            <LayersIcon className="text-muted-foreground" />
-            <span>{item.name}</span>
-            {item.badge && <Badge className="ms-auto">{item.badge}</Badge>}
-          </Link>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-    </CollectionActionsContext>
-  );
-}
-
-function ThemeToggle() {
-  const { theme = "light", setTheme } = useTheme();
-
-  return (
-    <Select value={theme} onValueChange={setTheme}>
-      <SelectTrigger className="text-muted-foreground">
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent className="text-muted-foreground">
-        <SelectItem value="light">
-          <Sun className="size-4" />
-          Light
-        </SelectItem>
-        <SelectItem value="dark">
-          <Moon className="size-4" fill="currentColor" />
-          Dark
-        </SelectItem>
-        <SelectItem value="system">
-          <Monitor className="size-4" />
-          System
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-}

package/src/components/code-editor/mdx.lazy.tsx

@@ -1,18 +0,0 @@
-"use client";
-import { type ComponentProps, lazy, Suspense } from "react";
-
-const Editor = lazy(() => import("./mdx").then((mod) => ({ default: mod.MDXCodeEditor })));
-
-export function MDXCodeEditorLazy(props: ComponentProps<typeof Editor>) {
-  return (
-    <Suspense
-      fallback={
-        <div className="p-2 text-sm font-mono flex items-center justify-center text-muted-foreground h-full bg-secondary border rounded-lg">
-          Loading editor...
-        </div>
-      }
-    >
-      <Editor {...props} />
-    </Suspense>
-  );
-}

package/src/components/code-editor/mdx.tsx

@@ -1,48 +0,0 @@
-"use client";
-import { useState } from "react";
-import Editor from "@monaco-editor/react";
-import { useTheme } from "next-themes";
-
-export function MDXCodeEditor({
-  defaultValue,
-  onValueChange,
-}: {
-  defaultValue: string;
-  onValueChange: (value: string) => void;
-}) {
-  const { resolvedTheme } = useTheme();
-  const [value, setValue] = useState(defaultValue);
-
-  return (
-    <Editor
-      language="mdx"
-      value={value}
-      onChange={(value = "") => {
-        setValue(value);
-        onValueChange(value);
-      }}
-      theme={resolvedTheme === "dark" ? "vs-dark" : "light"}
-      loading={
-        <pre className="ps-17 py-5 text-sm size-full">
-          <code>{value}</code>
-        </pre>
-      }
-      className="bg-secondary text-secondary-foreground overflow-hidden border rounded-lg"
-      options={{
-        minimap: { enabled: false },
-        padding: {
-          top: 20,
-          bottom: 20,
-        },
-        fontSize: 14,
-        lineHeight: 1.428571,
-        lineNumbers: "on",
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-        tabSize: 2,
-        formatOnPaste: true,
-        formatOnType: true,
-      }}
-    />
-  );
-}

package/src/components/code-editor/yaml.lazy.tsx

@@ -1,20 +0,0 @@
-"use client";
-import { type ComponentProps, lazy, Suspense } from "react";
-
-const Editor = lazy(() => import("./yaml").then((mod) => ({ default: mod.YamlEditor })));
-
-export function YamlEditorLazy(props: ComponentProps<typeof Editor>) {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex flex-col bg-secondary text-secondary-foreground overflow-hidden border rounded-lg">
-          <div className="p-2 h-[240px] text-sm font-mono flex items-center justify-center text-muted-foreground">
-            Loading editor...
-          </div>
-        </div>
-      }
-    >
-      <Editor {...props} />
-    </Suspense>
-  );
-}

package/src/components/code-editor/yaml.tsx

@@ -1,71 +0,0 @@
-"use client";
-import { useState } from "react";
-import Editor from "@monaco-editor/react";
-import { load, dump } from "js-yaml";
-import { useTheme } from "next-themes";
-
-export function YamlEditor({
-  defaultValue,
-  onValueChange,
-}: {
-  defaultValue: unknown;
-  onValueChange: (v: unknown) => void;
-}) {
-  const { resolvedTheme } = useTheme();
-  const [error, setError] = useState<string | null>(null);
-  const [value, setValue] = useState(() => {
-    try {
-      return dump(defaultValue);
-    } catch {
-      return "";
-    }
-  });
-
-  return (
-    <div className="flex flex-col bg-secondary text-secondary-foreground overflow-hidden border rounded-lg">
-      <Editor
-        height="240px"
-        language="yaml"
-        value={value}
-        onChange={(newValue = "") => {
-          setValue(newValue);
-          try {
-            const parsed = load(newValue);
-            onValueChange(parsed);
-            setError(null);
-          } catch (e) {
-            if (e instanceof Error) {
-              setError(e.message);
-            }
-          }
-        }}
-        theme={resolvedTheme === "dark" ? "vs-dark" : "light"}
-        loading={
-          <pre className="ps-17 py-5 text-sm size-full">
-            <code>{value}</code>
-          </pre>
-        }
-        options={{
-          minimap: { enabled: false },
-          padding: {
-            top: 20,
-            bottom: 20,
-          },
-          fontSize: 14,
-          lineHeight: 1.428571,
-          lineNumbers: "on",
-          scrollBeyondLastLine: false,
-          automaticLayout: true,
-          tabSize: 2,
-          formatOnPaste: true,
-          formatOnType: true,
-        }}
-      />
-      {error && (
-        <p className="p-2 text-sm font-mono border-t font-semibold bg-card text-destructive">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/collection/actions.tsx

@@ -1,41 +0,0 @@
-"use client";
-import type { CollectionItem } from "@/lib/data/store";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "../ui/context-menu";
-import type { ReactElement } from "react";
-import { useCreateDocumentDialog } from "./client";
-import { FilePlusIcon } from "lucide-react";
-
-export function CollectionActionsContext({
-  collection,
-  children,
-}: {
-  collection: CollectionItem;
-  children: ReactElement;
-}) {
-  const createDoc = useCreateDocumentDialog(collection.id);
-
-  let child = (
-    <ContextMenu>
-      <ContextMenuTrigger render={children} />
-      <ContextMenuContent>
-        {createDoc && (
-          <createDoc.trigger asChild>
-            <ContextMenuItem>
-              <FilePlusIcon />
-              Create Document
-            </ContextMenuItem>
-          </createDoc.trigger>
-        )}
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-
-  if (createDoc) child = <createDoc.component>{child}</createDoc.component>;
-
-  return child;
-}

package/src/components/collection/client.tsx

@@ -1,63 +0,0 @@
-"use client";
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { documentCollection, type DocumentItem } from "@/lib/data/store";
-import { useRouter } from "next/navigation";
-import { type ReactNode, createContext, use, useCallback, useMemo, useState } from "react";
-import { useClientContext } from "./context";
-
-const CreateDialogContext = createContext<{
-  open: boolean;
-  setOpen: (v: boolean) => void;
-  onCreate: (item: DocumentItem) => void;
-} | null>(null);
-
-export function useCreateDocumentDialog(collectionId: string) {
-  const Content = useClientContext(collectionId).dialogs?.createDocument;
-  if (!Content) return null;
-
-  return {
-    component: useCallback(
-      ({ children }: { children: ReactNode }) => {
-        const [open, setOpen] = useState(false);
-        const router = useRouter();
-
-        return (
-          <Dialog open={open} onOpenChange={setOpen}>
-            {children}
-            <DialogContent>
-              <DialogTitle>Create Document</DialogTitle>
-              <DialogDescription>Enter the basic information of document.</DialogDescription>
-              <CreateDialogContext
-                value={useMemo(
-                  () => ({
-                    open,
-                    setOpen,
-                    onCreate(item) {
-                      router.push(`/collection/${item.collectionId}/${item.id}`);
-                      documentCollection.utils.writeInsert(item);
-                    },
-                  }),
-                  [open, router],
-                )}
-              >
-                <Content collectionId={collectionId} useDialog={useDialog} />
-              </CreateDialogContext>
-            </DialogContent>
-          </Dialog>
-        );
-      },
-      [Content],
-    ),
-    trigger: DialogTrigger,
-  };
-}
-
-function useDialog() {
-  return use(CreateDialogContext)!;
-}