@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/new-question-composer.tsx

@@ -68,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,
@@ -270,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)}`
 }
@@ -286,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: "",
@@ -305,13 +314,20 @@ 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 {
@@ -419,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}
@@ -764,6 +780,8 @@ interface NewQuestionComposerProps {
   defaultFolderId?: string
   /** Where to send the user when they cancel or save. */
   backHref: string
+  /** Label displayed in the `SiteHeader` back-icon (e.g. "Back to Favorites"). */
+  backLabel?: string
   folders?: QuestionBankFolder[]
 }
 
@@ -771,6 +789,7 @@ export function NewQuestionComposer({
   draftQuestionId,
   defaultFolderId,
   backHref,
+  backLabel = "Back",
   folders = DEFAULT_QUESTION_BANK_FOLDERS,
 }: NewQuestionComposerProps) {
   const router = useRouter()
@@ -1089,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 `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="-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
@@ -1108,125 +1413,140 @@ export function NewQuestionComposer({
             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 /
@@ -1758,297 +2078,7 @@ 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
@@ -2188,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)}