@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/{new-question-composer.tsx → new-library-item-form.tsx}

@@ -1,16 +1,27 @@
 "use client"
 
 /**
- * NewQuestionComposer — single-page authoring for the question bank.
+ * NewLibraryItemForm — single-page authoring for the library.
  *
- * IA (matches the rest of the question bank surfaces):
+ * IA (matches the rest of the library surfaces):
  *
  *   ├─ PageHeader (title + actions; parent trail is in `SiteHeader`)
  *   │     · "New question" + "V1 · Last updated …" subtitle
- *   │     · Save question (⏎) + Save as draft + ⋯ discard (⌘⌥M)
- *   └─ Single column (`FocusedWorkflowPageTemplate` — see `docs/focused-workflow-page-pattern.md`)
- *         · Details — format, folder, difficulty, Bloom, NBME, tags
- *         · Question prompt, answer block, explanation, references
+ *   │     · single primary CTA — Save as draft (⏎)
+ *   │     · ⋯ overflow menu (⌘⌥M) for inspector toggle + discard
+ *   ├─ 2-column layout (lg+): page scrolls as one; inspector card `sticky` on lg+
+ *   │     ┌─ Builder (left, no card chrome)
+ *   │     │     · Question prompt        (h1-style Textarea — type-aware)
+ *   │     │     · Answer block — varies by question type
+ *   │     │     · Explanation / rubric / model answer
+ *   │     │     · References             (repeatable list)
+ *   │     └─ Inspector (right, bg-card panel)
+ *   │           · Question format        (SelectionTileGrid → compact)
+ *   │           · Location               (folder SelectionTileGrid)
+ *   │           · Level / Tier / Cognitive (chips)
+ *   │           · Tags                   (Input + Badge list)
+ *   │       Sidebar-style collapse (⌘⌥]) — collapsed rail mimics
+ *   │       `NestedSecondaryPanelShell` icon mode.
  *
  * Composes existing primitives — `PageHeader`, `Form`/`FormField`,
  * `Input`, `Textarea`, `Checkbox`, `Badge`, `Button`, `Tip`, `Kbd`,
@@ -57,6 +68,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
 import { PageHeader } from "@/components/page-header"
+import { NewFocusTemplate } from "@/components/templates/new-focus-template"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import {
   SelectionTileGrid,
@@ -76,7 +88,7 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command"
-import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+import { LibraryNewFolderSheet } from "@/components/library-new-folder-sheet"
 
 import {
   AUTHORING_QUESTION_TYPES,
@@ -91,13 +103,13 @@ import {
   AUTHORING_RATIONALE_PLACEHOLDER,
   authoringQuestionType,
   type AuthoringQuestionType,
-} from "@/lib/question-bank-authoring"
+} from "@/lib/library-authoring"
 import {
-  DEFAULT_QUESTION_BANK_FOLDERS,
+  DEFAULT_LIBRARY_FOLDERS,
   newFolderId,
-  type QuestionBankFolder,
-  type QuestionBankFolderColorKey,
-} from "@/lib/mock/question-bank-folders"
+  type LibraryFolder,
+  type LibraryFolderColorKey,
+} from "@/lib/mock/library-folders"
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Schema
@@ -259,6 +271,10 @@ type QuestionFormValues = z.infer<typeof questionSchema>
 
 const OPTION_LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H"] as const
 
+// Runtime ID generators — called from user actions (Add option, Add pair, etc.) which
+// only fire AFTER hydration, so `Math.random()` is safe here. NEVER call these from
+// `buildInitial*` factories below — those run during the server render too and a
+// random ID would mismatch the client tree on hydration.
 function newOptionId() {
   return `opt-${Math.random().toString(36).slice(2, 9)}`
 }
@@ -275,16 +291,20 @@ function newBlankId() {
   return `blk-${Math.random().toString(36).slice(2, 9)}`
 }
 
+// SSR-safe defaults — deterministic, index-based IDs so the server and client render
+// the same `id` / `key` / DOM attributes (e.g. `Checkbox` IDs derived from `option.id`).
+// Hydration mismatch issue: `Math.random()` produces different values per call, so
+// using it in initial defaults makes every render emit a different tree.
 function buildInitialOptions(type: AuthoringQuestionType): QuestionFormValues["options"] {
   if (type === "true_false") {
     return [
-      { id: newOptionId(), text: "True", isCorrect: false, rationale: "" },
-      { id: newOptionId(), text: "False", isCorrect: false, rationale: "" },
+      { id: "opt-true", text: "True", isCorrect: false, rationale: "" },
+      { id: "opt-false", text: "False", isCorrect: false, rationale: "" },
     ]
   }
   if (type === "mcq_single" || type === "mcq_multiple") {
-    return Array.from({ length: AUTHORING_DEFAULT_OPTION_COUNT }, () => ({
-      id: newOptionId(),
+    return Array.from({ length: AUTHORING_DEFAULT_OPTION_COUNT }, (_, i) => ({
+      id: `opt-init-${i + 1}`,
       text: "",
       isCorrect: false,
       rationale: "",
@@ -294,16 +314,23 @@ function buildInitialOptions(type: AuthoringQuestionType): QuestionFormValues["o
 }
 
 function buildInitialPairs(): QuestionFormValues["pairs"] {
-  return Array.from({ length: 3 }, () => ({ id: newPairId(), left: "", right: "" }))
+  return Array.from({ length: 3 }, (_, i) => ({
+    id: `pair-init-${i + 1}`,
+    left: "",
+    right: "",
+  }))
 }
 function buildInitialOrderedItems(): QuestionFormValues["orderedItems"] {
-  return Array.from({ length: 4 }, () => ({ id: newOrderedId(), text: "" }))
+  return Array.from({ length: 4 }, (_, i) => ({
+    id: `ord-init-${i + 1}`,
+    text: "",
+  }))
 }
 function buildInitialFillBlankAnswers(): QuestionFormValues["fillBlankAnswers"] {
-  return [{ id: newBlankId(), accepted: "" }]
+  return [{ id: "blk-init-1", accepted: "" }]
 }
 
-function folderBreadcrumb(folderId: string, folders: QuestionBankFolder[]): string {
+function folderBreadcrumb(folderId: string, folders: LibraryFolder[]): string {
   const f = folders.find(x => x.id === folderId)
   if (!f) return ""
   if (f.parentId == null) return f.name
@@ -324,7 +351,7 @@ function difficultyToPercent(value: "easy" | "medium" | "hard"): number {
  * build this comes from analytics; for the mock it is a stable seed so
  * the inspector reads as if the AI had crunched historical data.
  */
-function difficultyInsightForFolder(folder: QuestionBankFolder | undefined): {
+function difficultyInsightForFolder(folder: LibraryFolder | undefined): {
   /** Predicted level based on the content the author is writing. */
   recommendation: "easy" | "medium" | "hard"
   /** Contextual note shown under the meter (e.g. folder distribution). */
@@ -408,7 +435,7 @@ function BuilderSection({
         <h2 className="text-sm font-semibold text-foreground">
           {title}
           {required ? (
-            <span className="ml-1 text-destructive" aria-hidden="true">
+            <span className="ms-1 text-destructive" aria-hidden="true">
               *
             </span>
           ) : null}
@@ -425,11 +452,11 @@ function BuilderSection({
 // Compact selected tile — same visual rhythm as the collapsed
 // "Question format" card. Clicking the tile opens a Command popover with
 // search, full folder list, and an "Add new folder" footer that bridges to
-// `QuestionBankNewFolderSheet`. Visuals reuse the folder-color tokens from
-// `lib/mock/question-bank-folders.ts` so the inspector reads the same as
-// the rest of the question bank.
+// `LibraryNewFolderSheet`. Visuals reuse the folder-color tokens from
+// `lib/mock/library-folders.ts` so the inspector reads the same as
+// the rest of the library.
 
-const FOLDER_TINT_BG: Record<QuestionBankFolderColorKey, string> = {
+const FOLDER_TINT_BG: Record<LibraryFolderColorKey, string> = {
   brand: "bg-[var(--icon-disc-brand-bg)] text-[var(--icon-disc-brand-fg)]",
   success: "bg-[var(--icon-disc-chart-2-bg)] text-[var(--icon-disc-chart-2-fg)]",
   warning: "bg-[var(--icon-disc-chart-4-bg)] text-[var(--icon-disc-chart-4-fg)]",
@@ -441,7 +468,7 @@ const FOLDER_TINT_BG: Record<QuestionBankFolderColorKey, string> = {
 }
 
 interface FolderPickerControlProps {
-  folders: QuestionBankFolder[]
+  folders: LibraryFolder[]
   value: string
   onChange: (id: string) => void
   open: boolean
@@ -452,14 +479,14 @@ interface FolderPickerControlProps {
 /** Build a tree-ordered array: parents first, then their children
     indented beneath. Each entry carries a `depth` for left-padding. */
 function buildFolderTree(
-  folders: QuestionBankFolder[],
-): Array<{ folder: QuestionBankFolder; depth: number }> {
+  folders: LibraryFolder[],
+): Array<{ folder: LibraryFolder; depth: number }> {
   const roots = folders.filter(f => f.parentId == null)
   const childrenOf = (parentId: string) =>
     folders.filter(f => f.parentId === parentId)
 
-  const out: Array<{ folder: QuestionBankFolder; depth: number }> = []
-  function walk(parent: QuestionBankFolder, depth: number) {
+  const out: Array<{ folder: LibraryFolder; depth: number }> = []
+  function walk(parent: LibraryFolder, depth: number) {
     out.push({ folder: parent, depth })
     for (const child of childrenOf(parent.id)) {
       walk(child, depth + 1)
@@ -628,7 +655,7 @@ function DifficultyMeter({
         : "bg-destructive"
 
   const levelLabel =
-    value === "easy" ? "Easy" : value === "hard" ? "Hard" : "Medium"
+    value === "easy" ? "Low" : value === "hard" ? "High" : "Normal"
 
   return (
     <section className="flex flex-col gap-3">
@@ -753,26 +780,31 @@ interface NewQuestionComposerProps {
   defaultFolderId?: string
   /** Where to send the user when they cancel or save. */
   backHref: string
-  folders?: QuestionBankFolder[]
+  /** Label displayed in the `SiteHeader` back-icon (e.g. "Back to Favorites"). */
+  backLabel?: string
+  folders?: LibraryFolder[]
 }
 
-export function NewQuestionComposer({
+export function NewLibraryItemForm({
   draftQuestionId,
   defaultFolderId,
   backHref,
-  folders = DEFAULT_QUESTION_BANK_FOLDERS,
+  backLabel = "Back",
+  folders = DEFAULT_LIBRARY_FOLDERS,
 }: NewQuestionComposerProps) {
   const router = useRouter()
   const [submitting, setSubmitting] = React.useState(false)
   const [tagDraft, setTagDraft] = React.useState("")
-  const [moreOpen, setMoreOpen] = React.useState(false)
   const [inspectorOpen, setInspectorOpen] = React.useState(true)
-  /** Question-type chooser — collapses to a compact row after first pick. */
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  /** Question-type chooser visibility — collapses into a single
+      "selected type" tile once the author picks the first time so the
+      inspector stays compact for the rest of the authoring flow. */
   const [typeChooserOpen, setTypeChooserOpen] = React.useState(true)
   /** Local folder list — extended in-place when the author adds one
       from the location picker so the new entry is selectable without
       a page navigation. */
-  const [localFolders, setLocalFolders] = React.useState<QuestionBankFolder[]>(folders)
+  const [localFolders, setLocalFolders] = React.useState<LibraryFolder[]>(folders)
   React.useEffect(() => {
     setLocalFolders(prev =>
       prev.length === folders.length && prev.every((f, i) => f.id === folders[i]?.id)
@@ -1076,6 +1108,292 @@ export function NewQuestionComposer({
     </>
   )
 
+  // Inspector body — wired into `NewFocusTemplate.form-inspector` via the `inspector`
+  // render-prop. Renders both the collapsed-rail and expanded-card states so the composer
+  // keeps its existing UX while the template owns the outer `<aside>` chrome (width
+  // transition + sticky positioning).
+  const inspectorContent = (
+    <>
+      {!inspectorOpen ? (
+        <div
+          className={cn(
+            "flex w-12 flex-col items-center gap-1 rounded-xl bg-[var(--secondary-panel-bg)] px-1.5 py-2 ring-1 ring-border shadow-sm",
+          )}
+        >
+          <Tip side="left" label="Show inspector">
+            <button
+              type="button"
+              onClick={() => setInspectorOpen(true)}
+              aria-label="Show inspector"
+              aria-expanded={false}
+              className={cn(
+                "flex size-9 shrink-0 items-center justify-center rounded-md text-sidebar-foreground transition-colors",
+                "hover:bg-sidebar-accent/50",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+              )}
+            >
+              <i
+                className="fa-light fa-arrow-left-to-line text-[15px] leading-none"
+                aria-hidden="true"
+              />
+            </button>
+          </Tip>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex flex-col gap-6 rounded-xl border border-border bg-card p-4",
+            "lg:max-h-[calc(100dvh-var(--header-height)-2rem)] lg:overflow-y-auto lg:overscroll-y-contain",
+          )}
+        >
+          {/* Inspector header — title + collapse control. */}
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-medium text-muted-foreground">
+              Inspector
+            </p>
+            <Tip side="bottom" label="Hide inspector">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => setInspectorOpen(false)}
+                aria-label="Hide inspector"
+                aria-expanded={true}
+              >
+                <i
+                  className="fa-light fa-arrow-right-to-line"
+                  aria-hidden="true"
+                />
+              </Button>
+            </Tip>
+          </div>
+
+          {/* Question format — first-time landing shows the full
+              `SelectionTileGrid` (matches the "File format" pattern
+              in `ExportDrawer`). After the author picks once it
+              collapses into a single selected-type tile with a
+              "Change" affordance that re-opens the grid. */}
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  {typeChooserOpen ? (
+                    <SelectionTileGrid
+                      sectionLabel="Question format"
+                      options={QUESTION_TYPE_TILES}
+                      columns={2}
+                      value={field.value}
+                      onValueChange={v => changeType(v)}
+                      interaction="radio"
+                      idPrefix="qb-format"
+                      itemVariant="outline"
+                      itemMotion="pop"
+                    />
+                  ) : (
+                    <div className="flex flex-col gap-2">
+                      <Label
+                        className="text-xs font-medium text-muted-foreground"
+                      >
+                        Question format
+                      </Label>
+                      <button
+                        type="button"
+                        onClick={() => setTypeChooserOpen(true)}
+                        aria-label={`Change question format — currently ${activeType.label}`}
+                        className={cn(
+                          "group flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5 text-left transition-colors",
+                          "hover:border-foreground/30 hover:bg-muted/40",
+                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        )}
+                      >
+                        <span
+                          className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-[var(--icon-disc-brand-bg)] text-[var(--icon-disc-brand-fg)]"
+                          aria-hidden="true"
+                        >
+                          <i className={cn("fa-light text-base", activeType.icon)} />
+                        </span>
+                        <span className="flex min-w-0 flex-1 flex-col">
+                          <span className="truncate text-sm font-medium text-foreground">
+                            {activeType.label}
+                          </span>
+                          <span className="truncate text-xs text-muted-foreground">
+                            {activeType.tileSummary ?? activeType.description}
+                          </span>
+                        </span>
+                        <span
+                          className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors group-hover:bg-muted group-hover:text-foreground"
+                          aria-hidden="true"
+                        >
+                          <i className="fa-light fa-pen-to-square text-xs" />
+                        </span>
+                      </button>
+                    </div>
+                  )}
+                </FormControl>
+                {typeChooserOpen ? (
+                  <FormDescription>{activeType.description}</FormDescription>
+                ) : null}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Location — compact selected tile (mirrors the
+              collapsed question-format card). Click opens a Command
+              popover with search and an "Add new folder" footer
+              that bridges into `LibraryNewFolderSheet`. */}
+          <FormField
+            control={form.control}
+            name="folderId"
+            render={({ field }) => (
+              <FormItem>
+                <Label
+                  className="text-xs font-medium text-muted-foreground"
+                >
+                  Location
+                </Label>
+                <FormControl>
+                  <FolderPickerControl
+                    folders={localFolders}
+                    value={field.value}
+                    onChange={v => field.onChange(v)}
+                    open={folderPickerOpen}
+                    onOpenChange={setFolderPickerOpen}
+                    onRequestNewFolder={() => {
+                      setFolderPickerOpen(false)
+                      setNewFolderOpen(true)
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Difficulty — meter + AI estimate + PBI + folder note.
+              Defaults to AI mode (the meter follows the folder
+              recommendation); "Override" flips to manual chips for
+              authors who want to lock the level themselves. */}
+          <FormField
+            control={form.control}
+            name="difficulty"
+            render={({ field }) => (
+              <DifficultyMeter
+                value={field.value}
+                onChange={v => field.onChange(v)}
+                mode={difficultyMode}
+                onModeChange={setDifficultyMode}
+                insight={difficultyInsight}
+              />
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="bloom"
+            render={({ field }) => (
+              <InspectorSection title="Bloom's taxonomy">
+                <ToggleGroup
+                  type="single"
+                  variant="outline"
+                  size="sm"
+                  spacing={1}
+                  value={field.value}
+                  onValueChange={v => field.onChange(v)}
+                  className="flex-wrap"
+                >
+                  {AUTHORING_BLOOM_OPTIONS.map(b => (
+                    <ToggleGroupItem
+                      key={b.value}
+                      value={b.value}
+                      title={b.hint}
+                      className="rounded-full px-3"
+                    >
+                      {b.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+              </InspectorSection>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="cogLevel"
+            render={({ field }) => (
+              <InspectorSection
+                title="Cognitive level"
+                description="Broader bucket used for analytics — separate from the tier above."
+              >
+                <ToggleGroup
+                  type="single"
+                  variant="outline"
+                  size="sm"
+                  spacing={1}
+                  value={field.value}
+                  onValueChange={v => field.onChange(v)}
+                  className="flex-wrap"
+                >
+                  {AUTHORING_COG_LEVEL_OPTIONS.map(c => (
+                    <ToggleGroupItem
+                      key={c.value}
+                      value={c.value}
+                      title={c.hint}
+                      className="rounded-full px-3"
+                    >
+                      {c.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+              </InspectorSection>
+            )}
+          />
+
+          <InspectorSection title="Tags" htmlFor="qb-tag-input">
+            {watchedTags.length > 0 ? (
+              <div className="flex flex-wrap gap-1.5">
+                {watchedTags.map(t => (
+                  <Badge key={t} variant="secondary" className="gap-1.5">
+                    <span>#{t}</span>
+                    <Tip side="top" label={`Remove tag ${t}`}>
+                      <button
+                        type="button"
+                        onClick={() => removeTag(t)}
+                        aria-label={`Remove tag ${t}`}
+                        className="-me-0.5 inline-flex size-3.5 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      >
+                        <i
+                          className="fa-light fa-xmark text-[9px]"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </Tip>
+                  </Badge>
+                ))}
+              </div>
+            ) : null}
+            <Input
+              id="qb-tag-input"
+              value={tagDraft}
+              onChange={e => setTagDraft(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === "Enter" || e.key === ",") {
+                  e.preventDefault()
+                  commitTag()
+                }
+              }}
+              onBlur={commitTag}
+              placeholder="STEMI, antibiotics…"
+              className="h-8 text-xs"
+            />
+          </InspectorSection>
+        </div>
+      )}
+    </>
+  )
+
   return (
     <Form {...form}>
       {/* Global shortcuts — bound while the composer is mounted. The
@@ -1089,126 +1407,146 @@ export function NewQuestionComposer({
             disabled={submitting}
             onInvoke={() => setMoreOpen(o => !o)}
           />
+          <Shortcut
+            keys="⌘⌥]"
+            disabled={submitting}
+            onInvoke={() => setInspectorOpen(o => !o)}
+          />
 
+          {/*
+            `<form>` participates in the (app)/layout flex row alongside the sidebar +
+            secondary panel + Ask Leo rail, so it MUST behave like a normal flex column
+            host (flex-1 + min-w-0). Without these classes the form shrinks to its
+            intrinsic content width and the page collapses into a narrow column on the
+            left with the rest of the viewport empty. See `new-placement-form.tsx`.
+          */}
           <form
             onSubmit={form.handleSubmit(values => persist({ ...values, status: "in_review" }, "publish"))}
             noValidate
             aria-label="New question form"
-            className="flex flex-col gap-6"
+            className="flex min-h-0 min-w-0 flex-1 flex-col"
           >
-            <PageHeader
-                title="New question"
-                subtitle={headerSubtitle}
-                actions={
-                  <>
-                    {/* Save as draft — icon-only button (leftmost). */}
-                    <Tip side="bottom" label="Save as draft">
+            <NewFocusTemplate
+              variant="form-inspector"
+              title="New question"
+              back={{ href: backHref, label: backLabel, ariaLabel: `Back to ${backLabel}` }}
+              useSiteHeaderBack
+              hideInspectorToggle
+              inspectorOpen={inspectorOpen}
+              onInspectorOpenChange={setInspectorOpen}
+              inspectorAriaLabel="Question inspector"
+              inspector={() => inspectorContent}
+              header={
+                <PageHeader
+                  title="New question"
+                  subtitle={headerSubtitle}
+                  actions={
+                    <>
+                      {/* Save as draft — icon-only button (leftmost). */}
+                      <Tip side="bottom" label="Save as draft">
+                        <Button
+                          type="button"
+                          size="lg"
+                          variant="outline"
+                          className="aspect-square px-0"
+                          disabled={submitting}
+                          onClick={handleSaveAsDraft}
+                          aria-label="Save as draft"
+                        >
+                          <i className="fa-light fa-file-pen text-base" aria-hidden="true" />
+                        </Button>
+                      </Tip>
+
+                      {/* Primary — Save Question. Full validation; the
+                          question moves to In review and the user is
+                          returned to the parent hub. */}
                       <Button
                         type="button"
                         size="lg"
-                        variant="outline"
-                        className="aspect-square px-0"
                         disabled={submitting}
-                        onClick={handleSaveAsDraft}
-                        aria-label="Save as draft"
+                        aria-busy={submitting}
+                        onClick={handleSaveQuestion}
                       >
-                        <i className="fa-light fa-file-pen text-base" aria-hidden="true" />
+                        {submitting ? (
+                          <>
+                            <i
+                              className="fa-light fa-spinner-third fa-spin text-[13px]"
+                              aria-hidden="true"
+                            />
+                            Saving…
+                          </>
+                        ) : (
+                          <>
+                            Save question
+                            <KbdGroup className="ms-1.5">
+                              <Kbd variant="bare">⏎</Kbd>
+                            </KbdGroup>
+                          </>
+                        )}
                       </Button>
-                    </Tip>
-
-                    {/* Primary — Save Question. Full validation; the
-                        question moves to In review and the user is
-                        returned to the parent hub. */}
-                    <Button
-                      type="button"
-                      size="lg"
-                      disabled={submitting}
-                      aria-busy={submitting}
-                      onClick={handleSaveQuestion}
-                    >
-                      {submitting ? (
-                        <>
-                          <i
-                            className="fa-light fa-spinner-third fa-spin text-[13px]"
-                            aria-hidden="true"
-                          />
-                          Saving…
-                        </>
-                      ) : (
-                        <>
-                          Save question
-                          <KbdGroup className="ml-1.5">
-                            <Kbd variant="bare">⏎</Kbd>
-                          </KbdGroup>
-                        </>
-                      )}
-                    </Button>
 
-                    {/* More — overflow menu (⌘⌥M). */}
-                    <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
-                      <Tip side="bottom" label="More actions">
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            size="lg"
-                            variant="outline"
-                            className="aspect-square px-0"
-                            aria-label="More actions"
+                      {/* More — overflow menu (⌘⌥M). */}
+                      <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+                        <Tip side="bottom" label="More actions">
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              type="button"
+                              size="lg"
+                              variant="outline"
+                              className="aspect-square px-0"
+                              aria-label="More actions"
+                            >
+                              <i
+                                className="fa-light fa-ellipsis text-base"
+                                aria-hidden="true"
+                              />
+                            </Button>
+                          </DropdownMenuTrigger>
+                        </Tip>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            shortcut="⌘⌥]"
+                            onSelect={() => {
+                              window.setTimeout(
+                                () => setInspectorOpen(o => !o),
+                                0,
+                              )
+                            }}
                           >
                             <i
-                              className="fa-light fa-ellipsis text-base"
+                              className={cn(
+                                "fa-light",
+                                inspectorOpen ? "fa-sidebar-flip" : "fa-sidebar",
+                              )}
                               aria-hidden="true"
                             />
-                          </Button>
-                        </DropdownMenuTrigger>
-                      </Tip>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          shortcut="⌘⌥]"
-                          onSelect={() => {
-                            window.setTimeout(
-                              () => setInspectorOpen(o => !o),
-                              0,
-                            )
-                          }}
-                        >
-                          <i
-                            className={cn(
-                              "fa-light",
-                              inspectorOpen ? "fa-sidebar-flip" : "fa-sidebar",
-                            )}
-                            aria-hidden="true"
-                          />
-                          {inspectorOpen ? "Hide inspector" : "Show inspector"}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          shortcut="Esc"
-                          onSelect={() => {
-                            window.setTimeout(() => handleCancel(), 0)
-                          }}
-                          variant="destructive"
-                        >
-                          <i className="fa-light fa-trash-can" aria-hidden="true" />
-                          Discard draft
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </>
-                }
-                className="px-0 lg:px-0"
-              />
-
-            {/* ── 2-column body — scrolls with the page; inspector sticky (lg+) */}
-            <div
-              className={cn(
-                "flex flex-col gap-8",
-                "lg:flex-row lg:items-start",
-                inspectorOpen ? "lg:gap-x-10" : "lg:gap-x-4",
-              )}
+                            {inspectorOpen ? "Hide inspector" : "Show inspector"}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            shortcut="Esc"
+                            onSelect={() => {
+                              window.setTimeout(() => handleCancel(), 0)
+                            }}
+                            variant="destructive"
+                          >
+                            <i className="fa-light fa-trash-can" aria-hidden="true" />
+                            Discard draft
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </>
+                  }
+                  className="px-0 lg:px-0"
+                />
+              }
+              maxWidthClassName="mx-auto w-full max-w-[1100px]"
+              contentClassName="px-8 py-4 pb-16 flex flex-col gap-6"
+              bodyClassName="min-h-0 flex-1 overflow-y-auto overscroll-y-contain"
             >
-              {/* ── Builder (no Card chrome) ─────────────────────────────── */}
-              <div className="flex min-w-0 flex-1 flex-col gap-7 lg:pr-2">
+              {/* ── Builder (no Card chrome) — direct child of the template's
+                  form-inspector grid; inspector lives in the `inspector` prop. */}
+              <div className="flex flex-col gap-7 lg:pe-2">
             {/* Question prompt — a real bordered field, not an
                 inline-editable headline. Larger heading-weight font keeps
                 the question front-and-centre, but the visible border /
@@ -1256,7 +1594,7 @@ export function NewQuestionComposer({
               )}
             />
 
-            {/* MCQ family + True/False — bordered OptionRows. */}
+            {/* Choice family + True/False — bordered OptionRows. */}
             {showOptionsBlock ? (
               <FormField
                 control={form.control}
@@ -1269,7 +1607,7 @@ export function NewQuestionComposer({
                     >
                       <p className="text-xs text-muted-foreground">
                         {isMulti
-                          ? "NCLEX-style — mark every correct response."
+                          ? "Mark every correct response."
                           : isTrueFalse
                             ? "Mark whether the statement is True or False."
                             : "Mark the single best answer. Distractors should be plausible — same length and grammar as the correct option."}
@@ -1604,10 +1942,10 @@ export function NewQuestionComposer({
                       Image hotspot authoring
                     </p>
                     <p className="mt-1 text-xs text-muted-foreground">
-                      Upload an anatomy diagram, x-ray, or ECG, then draw the correct
-                      region(s). Image upload + region drawing tools arrive in the
-                      next phase — for now, describe the expected target in the
-                      explanation below.
+                      Upload an image, then draw the correct region(s). Image
+                      upload + region drawing tools arrive in the next phase —
+                      for now, describe the expected target in the explanation
+                      below.
                     </p>
                   </div>
                   <Button type="button" variant="outline" size="sm" disabled>
@@ -1740,311 +2078,21 @@ export function NewQuestionComposer({
               />
             ) : null}
           </div>
-
-              {/* ── Inspector (right rail) — sticky while the page scrolls (lg+) */}
-              <aside
-                aria-label="Question inspector"
-                className={cn(
-                  "shrink-0",
-                  "lg:pl-2",
-                  inspectorOpen ? "lg:w-[320px]" : "lg:w-14",
-                )}
-              >
-                {!inspectorOpen ? (
-                  <div
-                    className={cn(
-                      "flex w-12 flex-col items-center gap-1 rounded-xl bg-[var(--secondary-panel-bg)] px-1.5 py-2 ring-1 ring-border shadow-sm",
-                      "lg:sticky lg:top-4 lg:z-10",
-                    )}
-                  >
-                    <Tip side="left" label="Show inspector">
-                      <button
-                        type="button"
-                        onClick={() => setInspectorOpen(true)}
-                        aria-label="Show inspector"
-                        aria-expanded={false}
-                        className={cn(
-                          "flex size-9 shrink-0 items-center justify-center rounded-md text-sidebar-foreground transition-colors",
-                          "hover:bg-sidebar-accent/50",
-                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-                        )}
-                      >
-                        <i
-                          className="fa-light fa-arrow-left-to-line text-[15px] leading-none"
-                          aria-hidden="true"
-                        />
-                      </button>
-                    </Tip>
-                  </div>
-                ) : (
-                  <div
-                    className={cn(
-                      "flex flex-col gap-6 rounded-xl border border-border bg-card p-4",
-                      "lg:sticky lg:top-4 lg:z-10",
-                      "lg:max-h-[calc(100dvh-var(--header-height)-2rem)] lg:overflow-y-auto lg:overscroll-y-contain",
-                    )}
-                  >
-                    {/* Inspector header — title + collapse control. */}
-                    <div className="flex items-center justify-between">
-                      <p className="text-xs font-medium text-muted-foreground">
-                        Inspector
-                      </p>
-                      <Tip side="bottom" label="Hide inspector">
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon-sm"
-                          onClick={() => setInspectorOpen(false)}
-                          aria-label="Hide inspector"
-                          aria-expanded={true}
-                        >
-                          <i
-                            className="fa-light fa-arrow-right-to-line"
-                            aria-hidden="true"
-                          />
-                        </Button>
-                      </Tip>
-                    </div>
-
-                    {/* Question format — first-time landing shows the full
-                        `SelectionTileGrid` (matches the "File format" pattern
-                        in `ExportDrawer`). After the author picks once it
-                        collapses into a single selected-type tile with a
-                        "Change" affordance that re-opens the grid. */}
-              <FormField
-                control={form.control}
-                name="type"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      {typeChooserOpen ? (
-                        <SelectionTileGrid
-                          sectionLabel="Question format"
-                          options={QUESTION_TYPE_TILES}
-                          columns={2}
-                          value={field.value}
-                          onValueChange={v => changeType(v)}
-                          interaction="radio"
-                          idPrefix="qb-format"
-                          itemVariant="outline"
-                          itemMotion="pop"
-                        />
-                      ) : (
-                        <div className="flex flex-col gap-2">
-                          <Label
-                            className="text-xs font-medium text-muted-foreground"
-                          >
-                            Question format
-                          </Label>
-                          <button
-                            type="button"
-                            onClick={() => setTypeChooserOpen(true)}
-                            aria-label={`Change question format — currently ${activeType.label}`}
-                            className={cn(
-                              "group flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5 text-left transition-colors",
-                              "hover:border-foreground/30 hover:bg-muted/40",
-                              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                            )}
-                          >
-                            <span
-                              className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-[var(--icon-disc-brand-bg)] text-[var(--icon-disc-brand-fg)]"
-                              aria-hidden="true"
-                            >
-                              <i className={cn("fa-light text-base", activeType.icon)} />
-                            </span>
-                            <span className="flex min-w-0 flex-1 flex-col">
-                              <span className="truncate text-sm font-medium text-foreground">
-                                {activeType.label}
-                              </span>
-                              <span className="truncate text-xs text-muted-foreground">
-                                {activeType.tileSummary ?? activeType.description}
-                              </span>
-                            </span>
-                            <span
-                              className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors group-hover:bg-muted group-hover:text-foreground"
-                              aria-hidden="true"
-                            >
-                              <i className="fa-light fa-pen-to-square text-xs" />
-                            </span>
-                          </button>
-                        </div>
-                      )}
-                    </FormControl>
-                    {typeChooserOpen ? (
-                      <FormDescription>{activeType.description}</FormDescription>
-                    ) : null}
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Location — compact selected tile (mirrors the
-                  collapsed question-format card). Click opens a Command
-                  popover with search and an "Add new folder" footer
-                  that bridges into `QuestionBankNewFolderSheet`. */}
-              <FormField
-                control={form.control}
-                name="folderId"
-                render={({ field }) => (
-                  <FormItem>
-                    <Label
-                      className="text-xs font-medium text-muted-foreground"
-                    >
-                      Location
-                    </Label>
-                    <FormControl>
-                      <FolderPickerControl
-                        folders={localFolders}
-                        value={field.value}
-                        onChange={v => field.onChange(v)}
-                        open={folderPickerOpen}
-                        onOpenChange={setFolderPickerOpen}
-                        onRequestNewFolder={() => {
-                          setFolderPickerOpen(false)
-                          setNewFolderOpen(true)
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Difficulty — meter + AI estimate + PBI + folder note.
-                  Defaults to AI mode (the meter follows the folder
-                  recommendation); "Override" flips to manual chips for
-                  authors who want to lock the level themselves. */}
-              <FormField
-                control={form.control}
-                name="difficulty"
-                render={({ field }) => (
-                  <DifficultyMeter
-                    value={field.value}
-                    onChange={v => field.onChange(v)}
-                    mode={difficultyMode}
-                    onModeChange={setDifficultyMode}
-                    insight={difficultyInsight}
-                  />
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="bloom"
-                render={({ field }) => (
-                  <InspectorSection title="Bloom's taxonomy">
-                    <ToggleGroup
-                      type="single"
-                      variant="outline"
-                      size="sm"
-                      spacing={1}
-                      value={field.value}
-                      onValueChange={v => field.onChange(v)}
-                      className="flex-wrap"
-                    >
-                      {AUTHORING_BLOOM_OPTIONS.map(b => (
-                        <ToggleGroupItem
-                          key={b.value}
-                          value={b.value}
-                          title={b.hint}
-                          className="rounded-full px-3"
-                        >
-                          {b.label}
-                        </ToggleGroupItem>
-                      ))}
-                    </ToggleGroup>
-                  </InspectorSection>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="cogLevel"
-                render={({ field }) => (
-                  <InspectorSection
-                    title="NBME cognitive level"
-                    description="Distinct from Bloom — broader buckets used by NBME item writers."
-                  >
-                    <ToggleGroup
-                      type="single"
-                      variant="outline"
-                      size="sm"
-                      spacing={1}
-                      value={field.value}
-                      onValueChange={v => field.onChange(v)}
-                      className="flex-wrap"
-                    >
-                      {AUTHORING_COG_LEVEL_OPTIONS.map(c => (
-                        <ToggleGroupItem
-                          key={c.value}
-                          value={c.value}
-                          title={c.hint}
-                          className="rounded-full px-3"
-                        >
-                          {c.label}
-                        </ToggleGroupItem>
-                      ))}
-                    </ToggleGroup>
-                  </InspectorSection>
-                )}
-              />
-
-              <InspectorSection title="Tags" htmlFor="qb-tag-input">
-                {watchedTags.length > 0 ? (
-                  <div className="flex flex-wrap gap-1.5">
-                    {watchedTags.map(t => (
-                      <Badge key={t} variant="secondary" className="gap-1.5">
-                        <span>#{t}</span>
-                        <Tip side="top" label={`Remove tag ${t}`}>
-                          <button
-                            type="button"
-                            onClick={() => removeTag(t)}
-                            aria-label={`Remove tag ${t}`}
-                            className="-mr-0.5 inline-flex size-3.5 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                          >
-                            <i
-                              className="fa-light fa-xmark text-[9px]"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </Tip>
-                      </Badge>
-                    ))}
-                  </div>
-                ) : null}
-                <Input
-                  id="qb-tag-input"
-                  value={tagDraft}
-                  onChange={e => setTagDraft(e.target.value)}
-                  onKeyDown={e => {
-                    if (e.key === "Enter" || e.key === ",") {
-                      e.preventDefault()
-                      commitTag()
-                    }
-                  }}
-                  onBlur={commitTag}
-                  placeholder="STEMI, antibiotics…"
-                  className="h-8 text-xs"
-                />
-              </InspectorSection>
-                  </div>
-                )}
-              </aside>
-        </div>
+            </NewFocusTemplate>
       </form>
 
       {/* New folder — invoked from the location picker. Re-uses the
-          shared `QuestionBankNewFolderSheet` (same shell as the folder
+          shared `LibraryNewFolderSheet` (same shell as the folder
           hub) so the surface stays consistent. The created folder is
           appended to `localFolders` and immediately selected. */}
-      <QuestionBankNewFolderSheet
+      <LibraryNewFolderSheet
         open={newFolderOpen}
         onOpenChange={setNewFolderOpen}
         parentFolderId={null}
         descriptionText="Drafts created from this composer can land in the new folder right away."
         onCreated={f => {
           const id = newFolderId()
-          const created: QuestionBankFolder = { id, ...f }
+          const created: LibraryFolder = { id, ...f }
           setLocalFolders(prev => [...prev, created])
           form.setValue("folderId", id, { shouldDirty: true, shouldValidate: false })
         }}
@@ -2170,7 +2218,7 @@ function OptionRow({
       </div>
 
       {rationaleOpen && !locked ? (
-        <div className="pl-10">
+        <div className="ps-10">
           <Textarea
             value={option.rationale}
             onChange={e => onRationaleChange(e.target.value)}