Book Creation Wizard

apps/api/src/routes/presets.ts

@@ -3,30 +3,10 @@ import path from "node:path"
 import { Hono } from "hono"
 import { HTTPException } from "hono/http-exception"
 import yaml from "js-yaml"
-import { PresetName, StyleguideName } from "@adt/types"
+import { StyleguideName } from "@adt/types"
 
 export function createPresetRoutes(configPath: string): Hono {
   const app = new Hono()
-  const presetsDir = path.join(path.dirname(configPath), "config", "presets")
-
-  // GET /presets/:name — Return preset config overrides
-  app.get("/presets/:name", (c) => {
-    const result = PresetName.safeParse(c.req.param("name"))
-
-    if (!result.success) {
-      throw new HTTPException(404, { message: `Unknown preset: ${c.req.param("name")}` })
-    }
-
-    const name = result.data
-    const presetPath = path.join(presetsDir, `${name}.yaml`)
-    if (!fs.existsSync(presetPath)) {
-      throw new HTTPException(404, { message: `Preset not found: ${name}` })
-    }
-
-    const content = fs.readFileSync(presetPath, "utf-8")
-    const parsed = yaml.load(content) as Record<string, unknown>
-    return c.json({ config: parsed })
-  })
 
   // GET /styleguides — List available styleguide names
   app.get("/styleguides", (c) => {
@@ -88,6 +68,28 @@ table{border-collapse:collapse;width:100%;margin:0.75rem 0;}th,td{border:1px sol
     return c.json({ name, html })
   })
 
+  // POST /styleguides/upload — Upload a styleguide .md file
+  app.post("/styleguides/upload", async (c) => {
+    const body = await c.req.parseBody()
+    const file = body["file"]
+    if (!(file instanceof File)) {
+      throw new HTTPException(400, { message: "Missing file" })
+    }
+    if (!file.name.endsWith(".md")) {
+      throw new HTTPException(400, { message: "Only .md files are accepted" })
+    }
+    const name = file.name.replace(/\.md$/, "")
+    const result = StyleguideName.safeParse(name)
+    if (!result.success) {
+      throw new HTTPException(400, { message: "Invalid styleguide name" })
+    }
+    const styleguidesDir = path.join(path.dirname(configPath), "assets", "styleguides")
+    fs.mkdirSync(styleguidesDir, { recursive: true })
+    const content = await file.text()
+    fs.writeFileSync(path.join(styleguidesDir, `${result.data}.md`), content, "utf-8")
+    return c.json({ name: result.data })
+  })
+
   // GET /config — Return the global base config
   app.get("/config", (c) => {
     if (!fs.existsSync(configPath)) {

apps/studio/eslint-suppressions.json

@@ -9,11 +9,6 @@
       "count": 5
     }
   },
-  "src/components/config/AdvancedLayoutPanel.tsx": {
-    "lingui/no-unlocalized-strings": {
-      "count": 33
-    }
-  },
   "src/components/debug/ConfigTab.tsx": {
     "lingui/no-unlocalized-strings": {
       "count": 16
@@ -84,11 +79,6 @@
       "count": 2
     }
   },
-  "src/routes/books.new.tsx": {
-    "lingui/no-unlocalized-strings": {
-      "count": 49
-    }
-  },
   "src/vite-env.d.ts": {
     "lingui/no-unlocalized-strings": {
       "count": 1

apps/studio/eslint.config.js

@@ -16,7 +16,8 @@ export default [
         {
           ignoreNames: [
             // --- HTML / JSX structural attributes ---
-            "className",
+            // Any prop/identifier containing "className" (e.g. className, bodyClassName, headerClassName)
+            { regex: { pattern: "className", flags: "i" } },
             "style",
             "id",
             "type",
@@ -69,6 +70,11 @@ export default [
             // --- Form / input props (non-visible values) ---
             "defaultValue",
             "value",
+            // Form field name constants (e.g. const RADIO_NAME = "renderStrategy")
+            "RADIO_NAME",
+            "radioName",
+            // Image processing preview pane focus key (ImageProcessingPreviewFocus — not user-visible)
+            "previewFocus",
 
             // --- CSS class & color props (never user-visible) ---
             "rootMargin",
@@ -80,6 +86,11 @@ export default [
             "borderDark",
             "iconColor",
             "colorClass",
+            "bgColor",
+            "imageSrc",
+            "pdfUrl",
+            "adtUrl",
+            "comingSoon",
             { regex: { pattern: "Class$" } },
 
             // --- Data labels (technical CSS descriptions, pipeline labels — not user-facing prose) ---
@@ -94,6 +105,7 @@ export default [
             "direction",
             "fromStage",
             "toStage",
+            "category",
 
             // --- CSS utility class variable names (StageSidebar layout constants) ---
             "gap",
@@ -177,6 +189,9 @@ export default [
             // --- TanStack Router route definitions ---
             "createFileRoute",
 
+            // --- TanStack Form (field paths are identifiers, not UI copy) ---
+            "*.setFieldValue",
+
             // --- CSS class composition utilities ---
             "cn",
             "cva",
@@ -186,6 +201,8 @@ export default [
             "*.toFixed",
           ],
           ignore: [
+            // project brand name (intentional non-translatable literal)
+            "^ADT Studio$",
             // npm package names and module paths (e.g. "@tanstack/react-router")
             "^@?[a-zA-Z0-9_-]+(/[a-zA-Z0-9_.-]+)+",
             // TypeScript import() / type strings using path aliases (e.g. "@/api/client")
@@ -211,6 +228,8 @@ export default [
             "^ADT Studio$",
             // Data URIs (e.g. "data:image/png;base64,...")
             "^data:",
+            // Byte-size literals (e.g. "12 KB", "1.5MB", "2 gb", "10tb")
+            "^[0-9]+(?:\\.[0-9]+)?\\s?(?:B|KB|MB|GB|TB|b|kb|mb|gb|tb)$",
             // HTML fragments used in innerHTML assignments (e.g. `<div id="content">`)
             "^<[a-z]",
             // Closing HTML tags used in string operations (e.g. "</section>")

apps/studio/package.json

@@ -17,12 +17,19 @@
     "@lingui/conf": "^5.9.3",
     "@lingui/core": "^5.9.3",
     "@lingui/react": "^5.9.3",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-form": "^1.28.5",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-router": "^1.0.0",
     "@tanstack/react-virtual": "^3.13.23",
@@ -31,7 +38,9 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dompurify": "^3.2.7",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.469.0",
+    "pdfjs-dist": "^5.5.207",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.0",

apps/studio/src/api/client.ts

@@ -940,15 +940,21 @@ export const api = {
   getTemplates: () =>
     request<{ templates: string[] }>(`/templates`),
 
-  getPreset: (name: string) =>
-    request<{ config: Record<string, unknown> }>(`/presets/${name}`),
-
   getStyleguides: () =>
     request<{ styleguides: string[] }>(`/styleguides`),
 
   getStyleguidePreview: (name: string) =>
     request<{ name: string; html: string }>(`/styleguides/${name}/preview`),
 
+  uploadStyleguide: (file: File) => {
+    const form = new FormData()
+    form.append("file", file)
+    return request<{ name: string }>(`/styleguides/upload`, {
+      method: "POST",
+      body: form,
+    })
+  },
+
   generateStyleguide: (label: string, pageIds: string[], apiKey: string, signal?: AbortSignal) =>
     request<{ name: string; content: string; reasoning: string }>(
       `/books/${label}/generate-styleguide`,

apps/studio/src/components/LanguagePicker.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from "react"
 import { Check, Languages, X } from "lucide-react"
+import { cn } from "@/lib/utils"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Badge } from "@/components/ui/badge"
@@ -25,12 +26,14 @@ export function LanguagePicker({
   multiple,
   label,
   hint,
+  size = "sm",
 }: {
   selected: string | Set<string>
   onSelect: (code: string) => void
   multiple?: boolean
   label: string
   hint?: string
+  size?: "sm" | "default"
 }) {
   const { t } = useLingui()
   const [search, setSearch] = useState("")
@@ -250,9 +253,9 @@ export function LanguagePicker({
     <div className="space-y-2">
       {(label || hint) && (
         <div>
-          {label && <Label className="text-xs">{label}</Label>}
+          {label && <Label className={size === "default" ? "text-sm font-medium" : "text-xs"}>{label}</Label>}
           {hint && (
-            <p className="text-xs text-muted-foreground mt-0.5">{hint}</p>
+            <p className={cn(size === "default" ? "text-sm" : "text-xs", "text-muted-foreground mt-0.5")}>{hint}</p>
           )}
         </div>
       )}
@@ -280,7 +283,7 @@ export function LanguagePicker({
       )}
 
       <div ref={containerRef} className="relative">
-        <Languages className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground z-10" />
+        <Languages className={cn("pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground z-10", size === "default" ? "h-4 w-4 left-3" : "h-3.5 w-3.5")} />
         {/* Locked language chip shown inside the input area */}
         {open && lockedLang && (
           <span className="absolute left-8 top-1/2 -translate-y-1/2 text-xs bg-accent text-accent-foreground rounded px-1.5 py-0.5 z-10 pointer-events-none">
@@ -297,7 +300,11 @@ export function LanguagePicker({
           onFocus={() => setOpen(true)}
           onKeyDown={handleKeyDown}
           placeholder={placeholderText()}
-          className={`h-8 text-xs ${lockedLang && open ? "pl-[calc(var(--chip-offset,5rem)+0.75rem)]" : "pl-8"} ${!multiple && selectedCode ? "pr-16" : ""}`}
+          className={cn(
+            size === "default" ? "h-10 text-sm" : "h-8 text-xs",
+            lockedLang && open ? "pl-[calc(var(--chip-offset,5rem)+0.75rem)]" : size === "default" ? "pl-10" : "pl-8",
+            !multiple && selectedCode && "pr-16",
+          )}
           style={
             lockedLang && open
               ? { paddingLeft: `calc(${lockedLang.name.length * 0.55}rem + 2.5rem)` }
@@ -332,13 +339,15 @@ export function LanguagePicker({
                     key={item.code}
                     type="button"
                     onClick={() => handleItemClick(item)}
-                    className={`flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none transition-colors ${
+                    className={cn(
+                      "flex w-full items-center gap-2 rounded-sm outline-none transition-colors",
+                      size === "default" ? "px-2.5 py-2 text-sm" : "px-2 py-1.5 text-xs",
                       active
                         ? "bg-primary/10 text-primary font-medium"
                         : i === highlighted
                           ? "bg-accent text-accent-foreground"
-                          : "hover:bg-accent hover:text-accent-foreground"
-                    }`}
+                          : "hover:bg-accent hover:text-accent-foreground",
+                    )}
                   >
                     <span className="flex h-4 w-4 items-center justify-center">
                       {active && <Check className="h-3.5 w-3.5" />}

apps/studio/src/components/StudioTopBar.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react"
+import { Link } from "@tanstack/react-router"
+import { Home, Settings } from "lucide-react"
+import { useLingui } from "@lingui/react/macro"
+import { Button } from "@/components/ui/button"
+import { LocaleSwitcher } from "@/components/LocaleSwitcher"
+import { useSettingsDialog } from "@/routes/__root"
+
+export type StudioTopBarProps = {
+  /** When true, the brand row links to `/` with hover styles (e.g. add-book flow). */
+  brandLinksHome?: boolean
+  /** Optional title after `/` (e.g. translated “Add Book”). */
+  trailingTitle?: ReactNode
+}
+
+export function StudioTopBar({ brandLinksHome = false, trailingTitle }: StudioTopBarProps) {
+  const { t } = useLingui()
+  const { openSettings } = useSettingsDialog()
+
+  const brandInner = (
+    <>
+      <Home className="w-4 h-4 shrink-0" />
+      <span className="text-sm font-semibold">ADT Studio</span>
+    </>
+  )
+
+  const brandRow = brandLinksHome ? (
+    <Link
+      to="/"
+      className="flex items-center gap-2.5 hover:bg-gray-600 -ml-2 px-2 h-10 transition-colors"
+      title={t`Back to books`}
+    >
+      {brandInner}
+    </Link>
+  ) : (
+    <div className="flex items-center gap-2.5">{brandInner}</div>
+  )
+
+  return (
+    <div className="shrink-0 min-h-11 py-1 flex items-center bg-gray-700 text-white px-4">
+      <div className="flex items-center min-w-0">
+        {brandRow}
+        {trailingTitle != null && (
+          <>
+            <span className="text-white/40 text-sm mx-2">/</span>
+            <span className="text-sm font-semibold">{trailingTitle}</span>
+          </>
+        )}
+      </div>
+      <div className="ml-auto flex items-center gap-1.5">
+        <LocaleSwitcher />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-10 w-10 shrink-0 text-white/70 hover:text-white hover:bg-gray-600"
+          onClick={openSettings}
+          title={t`API Key Settings`}
+        >
+          <Settings className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}