@lupinum/ginko-docs 0.2.2 → 0.2.5

package/app/assets/css/tailwind.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./theme-palettes.css";
 @source "../../**/*.{vue,ts}";
 
 @custom-variant dark (&:is(.dark *));
@@ -86,6 +87,9 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-agent-background: var(--agent-background);
+  --color-agent-foreground: var(--agent-foreground);
+  --color-agent-muted: var(--agent-muted);
   --animate-collapsible-down: collapsible-down 0.2s ease-out;
   --animate-collapsible-up: collapsible-up 0.2s ease-out;
 
@@ -111,11 +115,22 @@
 }
 
 :root {
+  /* Surface elevation for prose components (RFC-001). Declared explicitly:
+     Tailwind only emits --shadow-* variables where shadow utilities are used,
+     and prose.css consumes this via var(). */
+  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+
   /* Docs layout (Fumadocs-style shell) */
   --site-header-height: 3.5rem;
+  /* Currently visible banner height; SiteBanner is the single writer. */
+  --site-banner-height: 0px;
   --docs-sidebar-width-expanded: 268px;
   --docs-sidebar-width: var(--docs-sidebar-width-expanded);
   --docs-toc-width: 16rem;
+  /* Anchor scroll offset: sticky header + banner + breathing room. */
+  --content-scroll-margin: calc(
+    var(--site-banner-height, 0px) + var(--site-header-height) + 3.5rem
+  );
 
   --font-body: "Public Sans", system-ui, sans-serif;
   --font-heading: "Public Sans", system-ui, sans-serif;
@@ -125,19 +140,19 @@
 
   --radius: 0.625rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  --foreground: var(--theme-neutral-950);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: var(--theme-neutral-950);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --popover-foreground: var(--theme-neutral-950);
+  --primary: var(--theme-primary-light);
+  --primary-foreground: var(--theme-primary-light-foreground);
+  --secondary: var(--theme-neutral-100);
+  --secondary-foreground: var(--theme-neutral-900);
+  --muted: var(--theme-neutral-100);
+  --muted-foreground: var(--theme-neutral-500);
+  --accent: var(--theme-neutral-100);
+  --accent-foreground: var(--theme-neutral-900);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0.002 247.839);
   --success: oklch(0.55 0.14 162);
@@ -182,12 +197,15 @@
   --home-radius-card: 24px;
   --home-radius-section: 32px;
   --home-radius-panel: 40px;
-  --code: oklch(0.985 0.002 247.839);
-  --code-foreground: oklch(0.13 0.028 261.692);
-  --code-border: oklch(0.928 0.006 264.531);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
+  --code: var(--theme-neutral-50);
+  --code-foreground: var(--theme-neutral-950);
+  --code-border: var(--theme-neutral-200);
+  --border: var(--theme-neutral-200);
+  --input: var(--theme-neutral-200);
+  --ring: var(--theme-primary-light-ring);
+  --agent-background: var(--theme-neutral-900);
+  --agent-foreground: var(--theme-neutral-100);
+  --agent-muted: var(--theme-neutral-400);
   --chart-1: var(--accent-blue);
   --chart-2: var(--accent-mint);
   --chart-3: var(--accent-yellow);
@@ -196,20 +214,21 @@
 }
 
 .dark {
-  --background: oklch(0.135 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.19 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.18 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0 0);
-  --primary-foreground: oklch(0.18 0 0);
-  --secondary: oklch(0.245 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.245 0 0);
-  --muted-foreground: oklch(0.72 0 0);
-  --accent: oklch(0.245 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.4);
+  --background: var(--theme-neutral-950);
+  --foreground: var(--theme-neutral-50);
+  --card: var(--theme-neutral-900);
+  --card-foreground: var(--theme-neutral-50);
+  --popover: var(--theme-neutral-900);
+  --popover-foreground: var(--theme-neutral-50);
+  --primary: var(--theme-primary-dark);
+  --primary-foreground: var(--theme-primary-dark-foreground);
+  --secondary: var(--theme-neutral-800);
+  --secondary-foreground: var(--theme-neutral-50);
+  --muted: var(--theme-neutral-800);
+  --muted-foreground: var(--theme-neutral-400);
+  --accent: var(--theme-neutral-800);
+  --accent-foreground: var(--theme-neutral-50);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.985 0.002 247.839);
   --success: oklch(0.72 0.14 162);
@@ -254,17 +273,20 @@
   --home-radius-card: 24px;
   --home-radius-section: 32px;
   --home-radius-panel: 40px;
-  --code: oklch(0.18 0.02 260);
-  --code-foreground: oklch(0.985 0.002 247.839);
-  --code-border: oklch(1 0 0 / 12%);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
+  --code: var(--theme-neutral-900);
+  --code-foreground: var(--theme-neutral-50);
+  --code-border: var(--theme-neutral-800);
+  --border: var(--theme-neutral-800);
+  --input: var(--theme-neutral-700);
+  --ring: var(--theme-primary-dark-ring);
+  --agent-background: var(--theme-neutral-950);
+  --agent-foreground: var(--theme-neutral-100);
+  --agent-muted: var(--theme-neutral-400);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-5: var(--primary);
 }
 
 @layer base {

package/app/assets/css/theme-palettes.css

@@ -0,0 +1,309 @@
+/* Palette selection is separate from semantic shadcn tokens. The root values
+   are complete fallbacks for the default theme and incomplete custom ramps. */
+:root {
+  --theme-neutral-50: var(--color-zinc-50);
+  --theme-neutral-100: var(--color-zinc-100);
+  --theme-neutral-200: var(--color-zinc-200);
+  --theme-neutral-300: var(--color-zinc-300);
+  --theme-neutral-400: var(--color-zinc-400);
+  --theme-neutral-500: var(--color-zinc-500);
+  --theme-neutral-600: var(--color-zinc-600);
+  --theme-neutral-700: var(--color-zinc-700);
+  --theme-neutral-800: var(--color-zinc-800);
+  --theme-neutral-900: var(--color-zinc-900);
+  --theme-neutral-950: var(--color-zinc-950);
+  --theme-primary-light: var(--theme-neutral-900);
+  --theme-primary-light-foreground: var(--theme-neutral-50);
+  --theme-primary-light-ring: var(--theme-neutral-500);
+  --theme-primary-dark: var(--theme-neutral-100);
+  --theme-primary-dark-foreground: var(--theme-neutral-900);
+  --theme-primary-dark-ring: var(--theme-neutral-400);
+}
+
+html[data-neutral="slate"] {
+  --theme-neutral-50: var(--color-slate-50);
+  --theme-neutral-100: var(--color-slate-100);
+  --theme-neutral-200: var(--color-slate-200);
+  --theme-neutral-300: var(--color-slate-300);
+  --theme-neutral-400: var(--color-slate-400);
+  --theme-neutral-500: var(--color-slate-500);
+  --theme-neutral-600: var(--color-slate-600);
+  --theme-neutral-700: var(--color-slate-700);
+  --theme-neutral-800: var(--color-slate-800);
+  --theme-neutral-900: var(--color-slate-900);
+  --theme-neutral-950: var(--color-slate-950);
+}
+
+html[data-neutral="gray"] {
+  --theme-neutral-50: var(--color-gray-50);
+  --theme-neutral-100: var(--color-gray-100);
+  --theme-neutral-200: var(--color-gray-200);
+  --theme-neutral-300: var(--color-gray-300);
+  --theme-neutral-400: var(--color-gray-400);
+  --theme-neutral-500: var(--color-gray-500);
+  --theme-neutral-600: var(--color-gray-600);
+  --theme-neutral-700: var(--color-gray-700);
+  --theme-neutral-800: var(--color-gray-800);
+  --theme-neutral-900: var(--color-gray-900);
+  --theme-neutral-950: var(--color-gray-950);
+}
+
+html[data-neutral="zinc"] {
+  --theme-neutral-50: var(--color-zinc-50);
+  --theme-neutral-100: var(--color-zinc-100);
+  --theme-neutral-200: var(--color-zinc-200);
+  --theme-neutral-300: var(--color-zinc-300);
+  --theme-neutral-400: var(--color-zinc-400);
+  --theme-neutral-500: var(--color-zinc-500);
+  --theme-neutral-600: var(--color-zinc-600);
+  --theme-neutral-700: var(--color-zinc-700);
+  --theme-neutral-800: var(--color-zinc-800);
+  --theme-neutral-900: var(--color-zinc-900);
+  --theme-neutral-950: var(--color-zinc-950);
+}
+
+html[data-neutral="neutral"] {
+  --theme-neutral-50: var(--color-neutral-50);
+  --theme-neutral-100: var(--color-neutral-100);
+  --theme-neutral-200: var(--color-neutral-200);
+  --theme-neutral-300: var(--color-neutral-300);
+  --theme-neutral-400: var(--color-neutral-400);
+  --theme-neutral-500: var(--color-neutral-500);
+  --theme-neutral-600: var(--color-neutral-600);
+  --theme-neutral-700: var(--color-neutral-700);
+  --theme-neutral-800: var(--color-neutral-800);
+  --theme-neutral-900: var(--color-neutral-900);
+  --theme-neutral-950: var(--color-neutral-950);
+}
+
+html[data-neutral="stone"] {
+  --theme-neutral-50: var(--color-stone-50);
+  --theme-neutral-100: var(--color-stone-100);
+  --theme-neutral-200: var(--color-stone-200);
+  --theme-neutral-300: var(--color-stone-300);
+  --theme-neutral-400: var(--color-stone-400);
+  --theme-neutral-500: var(--color-stone-500);
+  --theme-neutral-600: var(--color-stone-600);
+  --theme-neutral-700: var(--color-stone-700);
+  --theme-neutral-800: var(--color-stone-800);
+  --theme-neutral-900: var(--color-stone-900);
+  --theme-neutral-950: var(--color-stone-950);
+}
+
+html[data-neutral="taupe"] {
+  --theme-neutral-50: var(--color-taupe-50);
+  --theme-neutral-100: var(--color-taupe-100);
+  --theme-neutral-200: var(--color-taupe-200);
+  --theme-neutral-300: var(--color-taupe-300);
+  --theme-neutral-400: var(--color-taupe-400);
+  --theme-neutral-500: var(--color-taupe-500);
+  --theme-neutral-600: var(--color-taupe-600);
+  --theme-neutral-700: var(--color-taupe-700);
+  --theme-neutral-800: var(--color-taupe-800);
+  --theme-neutral-900: var(--color-taupe-900);
+  --theme-neutral-950: var(--color-taupe-950);
+}
+
+html[data-neutral="mauve"] {
+  --theme-neutral-50: var(--color-mauve-50);
+  --theme-neutral-100: var(--color-mauve-100);
+  --theme-neutral-200: var(--color-mauve-200);
+  --theme-neutral-300: var(--color-mauve-300);
+  --theme-neutral-400: var(--color-mauve-400);
+  --theme-neutral-500: var(--color-mauve-500);
+  --theme-neutral-600: var(--color-mauve-600);
+  --theme-neutral-700: var(--color-mauve-700);
+  --theme-neutral-800: var(--color-mauve-800);
+  --theme-neutral-900: var(--color-mauve-900);
+  --theme-neutral-950: var(--color-mauve-950);
+}
+
+html[data-neutral="mist"] {
+  --theme-neutral-50: var(--color-mist-50);
+  --theme-neutral-100: var(--color-mist-100);
+  --theme-neutral-200: var(--color-mist-200);
+  --theme-neutral-300: var(--color-mist-300);
+  --theme-neutral-400: var(--color-mist-400);
+  --theme-neutral-500: var(--color-mist-500);
+  --theme-neutral-600: var(--color-mist-600);
+  --theme-neutral-700: var(--color-mist-700);
+  --theme-neutral-800: var(--color-mist-800);
+  --theme-neutral-900: var(--color-mist-900);
+  --theme-neutral-950: var(--color-mist-950);
+}
+
+html[data-neutral="olive"] {
+  --theme-neutral-50: var(--color-olive-50);
+  --theme-neutral-100: var(--color-olive-100);
+  --theme-neutral-200: var(--color-olive-200);
+  --theme-neutral-300: var(--color-olive-300);
+  --theme-neutral-400: var(--color-olive-400);
+  --theme-neutral-500: var(--color-olive-500);
+  --theme-neutral-600: var(--color-olive-600);
+  --theme-neutral-700: var(--color-olive-700);
+  --theme-neutral-800: var(--color-olive-800);
+  --theme-neutral-900: var(--color-olive-900);
+  --theme-neutral-950: var(--color-olive-950);
+}
+
+html[data-primary="neutral"] {
+  --theme-primary-light: var(--theme-neutral-900);
+  --theme-primary-light-foreground: var(--theme-neutral-50);
+  --theme-primary-light-ring: var(--theme-neutral-500);
+  --theme-primary-dark: var(--theme-neutral-100);
+  --theme-primary-dark-foreground: var(--theme-neutral-900);
+  --theme-primary-dark-ring: var(--theme-neutral-400);
+}
+
+html[data-primary="red"] {
+  --theme-primary-light: var(--color-red-700);
+  --theme-primary-light-foreground: var(--color-red-50);
+  --theme-primary-light-ring: var(--color-red-500);
+  --theme-primary-dark: var(--color-red-400);
+  --theme-primary-dark-foreground: var(--color-red-950);
+  --theme-primary-dark-ring: var(--color-red-400);
+}
+
+html[data-primary="orange"] {
+  --theme-primary-light: var(--color-orange-700);
+  --theme-primary-light-foreground: var(--color-orange-50);
+  --theme-primary-light-ring: var(--color-orange-500);
+  --theme-primary-dark: var(--color-orange-400);
+  --theme-primary-dark-foreground: var(--color-orange-950);
+  --theme-primary-dark-ring: var(--color-orange-400);
+}
+
+html[data-primary="amber"] {
+  --theme-primary-light: var(--color-amber-500);
+  --theme-primary-light-foreground: var(--color-amber-950);
+  --theme-primary-light-ring: var(--color-amber-500);
+  --theme-primary-dark: var(--color-amber-400);
+  --theme-primary-dark-foreground: var(--color-amber-950);
+  --theme-primary-dark-ring: var(--color-amber-400);
+}
+
+html[data-primary="yellow"] {
+  --theme-primary-light: var(--color-yellow-400);
+  --theme-primary-light-foreground: var(--color-yellow-950);
+  --theme-primary-light-ring: var(--color-yellow-500);
+  --theme-primary-dark: var(--color-yellow-400);
+  --theme-primary-dark-foreground: var(--color-yellow-950);
+  --theme-primary-dark-ring: var(--color-yellow-400);
+}
+
+html[data-primary="lime"] {
+  --theme-primary-light: var(--color-lime-500);
+  --theme-primary-light-foreground: var(--color-lime-950);
+  --theme-primary-light-ring: var(--color-lime-500);
+  --theme-primary-dark: var(--color-lime-400);
+  --theme-primary-dark-foreground: var(--color-lime-950);
+  --theme-primary-dark-ring: var(--color-lime-400);
+}
+
+html[data-primary="green"] {
+  --theme-primary-light: var(--color-green-700);
+  --theme-primary-light-foreground: var(--color-green-50);
+  --theme-primary-light-ring: var(--color-green-500);
+  --theme-primary-dark: var(--color-green-400);
+  --theme-primary-dark-foreground: var(--color-green-950);
+  --theme-primary-dark-ring: var(--color-green-400);
+}
+
+html[data-primary="emerald"] {
+  --theme-primary-light: var(--color-emerald-700);
+  --theme-primary-light-foreground: var(--color-emerald-50);
+  --theme-primary-light-ring: var(--color-emerald-500);
+  --theme-primary-dark: var(--color-emerald-400);
+  --theme-primary-dark-foreground: var(--color-emerald-950);
+  --theme-primary-dark-ring: var(--color-emerald-400);
+}
+
+html[data-primary="teal"] {
+  --theme-primary-light: var(--color-teal-700);
+  --theme-primary-light-foreground: var(--color-teal-50);
+  --theme-primary-light-ring: var(--color-teal-500);
+  --theme-primary-dark: var(--color-teal-400);
+  --theme-primary-dark-foreground: var(--color-teal-950);
+  --theme-primary-dark-ring: var(--color-teal-400);
+}
+
+html[data-primary="cyan"] {
+  --theme-primary-light: var(--color-cyan-700);
+  --theme-primary-light-foreground: var(--color-cyan-50);
+  --theme-primary-light-ring: var(--color-cyan-500);
+  --theme-primary-dark: var(--color-cyan-400);
+  --theme-primary-dark-foreground: var(--color-cyan-950);
+  --theme-primary-dark-ring: var(--color-cyan-400);
+}
+
+html[data-primary="sky"] {
+  --theme-primary-light: var(--color-sky-700);
+  --theme-primary-light-foreground: var(--color-sky-50);
+  --theme-primary-light-ring: var(--color-sky-500);
+  --theme-primary-dark: var(--color-sky-400);
+  --theme-primary-dark-foreground: var(--color-sky-950);
+  --theme-primary-dark-ring: var(--color-sky-400);
+}
+
+html[data-primary="blue"] {
+  --theme-primary-light: var(--color-blue-600);
+  --theme-primary-light-foreground: var(--color-blue-50);
+  --theme-primary-light-ring: var(--color-blue-500);
+  --theme-primary-dark: var(--color-blue-400);
+  --theme-primary-dark-foreground: var(--color-blue-950);
+  --theme-primary-dark-ring: var(--color-blue-400);
+}
+
+html[data-primary="indigo"] {
+  --theme-primary-light: var(--color-indigo-600);
+  --theme-primary-light-foreground: var(--color-indigo-50);
+  --theme-primary-light-ring: var(--color-indigo-500);
+  --theme-primary-dark: var(--color-indigo-400);
+  --theme-primary-dark-foreground: var(--color-indigo-950);
+  --theme-primary-dark-ring: var(--color-indigo-400);
+}
+
+html[data-primary="violet"] {
+  --theme-primary-light: var(--color-violet-600);
+  --theme-primary-light-foreground: var(--color-violet-50);
+  --theme-primary-light-ring: var(--color-violet-500);
+  --theme-primary-dark: var(--color-violet-400);
+  --theme-primary-dark-foreground: var(--color-violet-950);
+  --theme-primary-dark-ring: var(--color-violet-400);
+}
+
+html[data-primary="purple"] {
+  --theme-primary-light: var(--color-purple-600);
+  --theme-primary-light-foreground: var(--color-purple-50);
+  --theme-primary-light-ring: var(--color-purple-500);
+  --theme-primary-dark: var(--color-purple-400);
+  --theme-primary-dark-foreground: var(--color-purple-950);
+  --theme-primary-dark-ring: var(--color-purple-400);
+}
+
+html[data-primary="fuchsia"] {
+  --theme-primary-light: var(--color-fuchsia-700);
+  --theme-primary-light-foreground: var(--color-fuchsia-50);
+  --theme-primary-light-ring: var(--color-fuchsia-500);
+  --theme-primary-dark: var(--color-fuchsia-400);
+  --theme-primary-dark-foreground: var(--color-fuchsia-950);
+  --theme-primary-dark-ring: var(--color-fuchsia-400);
+}
+
+html[data-primary="pink"] {
+  --theme-primary-light: var(--color-pink-700);
+  --theme-primary-light-foreground: var(--color-pink-50);
+  --theme-primary-light-ring: var(--color-pink-500);
+  --theme-primary-dark: var(--color-pink-400);
+  --theme-primary-dark-foreground: var(--color-pink-950);
+  --theme-primary-dark-ring: var(--color-pink-400);
+}
+
+html[data-primary="rose"] {
+  --theme-primary-light: var(--color-rose-700);
+  --theme-primary-light-foreground: var(--color-rose-50);
+  --theme-primary-light-ring: var(--color-rose-500);
+  --theme-primary-dark: var(--color-rose-400);
+  --theme-primary-dark-foreground: var(--color-rose-950);
+  --theme-primary-dark-ring: var(--color-rose-400);
+}

package/app/components/content/DocumentPageShell.vue

@@ -46,7 +46,7 @@ const { t } = useI18n();
           </ul>
         </nav>
 
-        <article class="[&_h2[id]]:scroll-mt-28">
+        <article class="[&_h2[id]]:scroll-mt-[var(--content-scroll-margin)]">
           <slot />
         </article>
       </div>

package/app/components/content/Feedback.vue

@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { useI18n, useRoute } from "#imports";
 import { useGinkoAnalytics } from "#ginko-docs/composables/useGinkoAnalytics";
 import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
+import { buildRepoIssueUrl } from "#ginko-docs/utils/repository";
 
 withDefaults(
   defineProps<{
@@ -17,8 +18,8 @@ const { t, locale } = useI18n();
 const route = useRoute();
 
 const config = useGinkoDocsConfig();
-const enabled = config.feedback.enabled;
-const { track } = useGinkoAnalytics();
+const analytics = useGinkoAnalytics();
+const enabled = config.feedback.enabled && analytics.enabled;
 
 type Sentiment = "positive" | "negative";
 
@@ -27,25 +28,25 @@ const sentiment = ref<Sentiment | null>(null);
 const issueUrl = computed(() => {
   const repository = config.repository;
   if (!repository) return null;
-  const url = new URL(`${repository.url.replace(/\/$/, "")}/issues/new`);
-  url.searchParams.set("title", t("feedback.issueTitle", { path: route.path }));
-  url.searchParams.set("body", t("docs.issueBody", { path: route.path }));
-  return url.toString();
+  return buildRepoIssueUrl(repository, {
+    title: t("feedback.issueTitle", { path: route.path }),
+    body: t("docs.issueBody", { path: route.path }),
+  });
 });
 
 function selectSentiment(s: Sentiment) {
   if (sentiment.value !== null) return;
-  sentiment.value = s;
-  track("docs-feedback", {
+  analytics.track("docs-feedback", {
     path: route.path,
     helpful: s === "positive" ? "yes" : "no",
     locale: locale.value,
   });
+  sentiment.value = s;
 }
 </script>
 
 <template>
-  <div v-if="enabled" class="mt-14 border-y border-border py-5">
+  <div v-if="enabled">
     <Transition
       enter-active-class="transition-opacity duration-200"
       enter-from-class="opacity-0"
@@ -75,7 +76,7 @@ function selectSentiment(s: Sentiment) {
         <Button
           variant="outline"
           size="sm"
-          class="h-9 w-20 rounded-full px-4 text-muted-foreground shadow-sm"
+          class="h-9 min-w-20 rounded-full px-4 text-muted-foreground shadow-sm"
           @click="selectSentiment('positive')"
         >
           <Icon name="lucide:thumbs-up" class="shrink-0" aria-hidden="true" />
@@ -85,7 +86,7 @@ function selectSentiment(s: Sentiment) {
         <Button
           variant="outline"
           size="sm"
-          class="h-9 w-20 rounded-full px-4 text-muted-foreground shadow-sm"
+          class="h-9 min-w-20 rounded-full px-4 text-muted-foreground shadow-sm"
           @click="selectSentiment('negative')"
         >
           <Icon name="lucide:thumbs-down" class="shrink-0" aria-hidden="true" />

package/app/components/content/ImageZoomDialog.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { AnimatePresence, Motion } from "motion-v";
+import { ref, useId } from "vue";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "reka-ui";
+import { useI18n } from "#imports";
+import { useImageZoomMotion } from "./imageZoom";
+
+defineProps<{
+  src?: string;
+  alt?: string;
+  /** Accessible dialog title; falls back to alt, then the zoom label. */
+  label?: string;
+  description?: string;
+}>();
+
+const { t } = useI18n();
+const open = ref(false);
+const layoutId = `ginko-image-${useId()}`;
+const { imageTransition, fadeTransition } = useImageZoomMotion();
+</script>
+
+<template>
+  <DialogRoot v-model:open="open" :modal="false">
+    <DialogTrigger as-child>
+      <slot name="trigger" :layout-id="layoutId" :transition="imageTransition" />
+    </DialogTrigger>
+
+    <DialogPortal>
+      <AnimatePresence>
+        <Motion
+          v-if="open"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="fadeTransition"
+          class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm will-change-opacity"
+        />
+
+        <DialogContent
+          v-if="open"
+          class="fixed inset-0 z-50 flex cursor-zoom-out flex-col items-center justify-center gap-4 p-[4vw] focus:outline-none"
+          @click="open = false"
+        >
+          <DialogTitle class="sr-only">{{ label || alt || t("docs.zoomImage") }}</DialogTitle>
+          <DialogDescription class="sr-only">{{
+            description || alt || t("docs.zoomImage")
+          }}</DialogDescription>
+
+          <Motion as-child :layout-id="layoutId" :transition="imageTransition">
+            <img
+              :src="src"
+              :alt="alt"
+              class="max-h-[82dvh] w-auto max-w-[min(94vw,80rem)] rounded-lg object-contain will-change-transform"
+            />
+          </Motion>
+
+          <Motion
+            v-if="label || alt"
+            as-child
+            :initial="{ opacity: 0, y: 8 }"
+            :animate="{ opacity: 1, y: 0 }"
+            :exit="{ opacity: 0, y: -4 }"
+            :transition="fadeTransition"
+          >
+            <p
+              aria-hidden="true"
+              class="max-w-[min(92vw,40rem)] rounded-full border border-border bg-background px-4 py-1.5 text-center text-sm shadow-sm"
+            >
+              {{ label || alt
+              }}<span v-if="description" class="text-muted-foreground"> · {{ description }}</span>
+            </p>
+          </Motion>
+        </DialogContent>
+      </AnimatePresence>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/app/components/content/PageMarkdownCopy.vue

@@ -54,6 +54,8 @@ const statusMessage = computed(() => {
     </Button>
 
     <DropdownMenu>
+      <!-- No tooltip here: Tooltip is itself a popper root, so wrapping the
+           dropdown trigger steals its anchor and the menu renders off-screen. -->
       <DropdownMenuTrigger as-child>
         <Button
           type="button"

package/app/components/content/imageZoom.ts

@@ -0,0 +1,25 @@
+import { useReducedMotion } from "motion-v";
+import { computed } from "vue";
+
+export const imageZoomTransition = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.42,
+  ease: "easeInOut",
+} as const;
+
+const imageZoomFadeTransition = { duration: 0.16, ease: "easeOut" } as const;
+const noMotionTransition = { duration: 0 } as const;
+
+export function useImageZoomMotion() {
+  const reducedMotion = useReducedMotion();
+
+  return {
+    imageTransition: computed(() =>
+      reducedMotion.value ? noMotionTransition : imageZoomTransition,
+    ),
+    fadeTransition: computed(() =>
+      reducedMotion.value ? noMotionTransition : imageZoomFadeTransition,
+    ),
+  };
+}