@fuma-content/studio 0.1.0

package/src/app/globals.css

@@ -0,0 +1,223 @@
+@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

@@ -0,0 +1,15 @@
+"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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,162 @@
+"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

@@ -0,0 +1,18 @@
+"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

@@ -0,0 +1,48 @@
+"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

@@ -0,0 +1,20 @@
+"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

@@ -0,0 +1,71 @@
+"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

@@ -0,0 +1,41 @@
+"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

@@ -0,0 +1,63 @@
+"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)!;
+}