create-nextblock 0.15.10 → 0.16.2

package/templates/nextblock-template/components/seo/SocialPreviewDialog.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { Share2 } from 'lucide-react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@nextblock-cms/ui';
+import SocialPreview from './SocialPreview';
+
+/**
+ * The share-card rehearsal, moved behind a button.
+ *
+ * WHY A MODAL. `SocialPreview` renders three platform tabs above a 1.91:1 card that is up
+ * to 520px wide, so inline it costs roughly four hundred vertical pixels in the middle of
+ * a page/post settings form that is already long enough to scroll. That is a poor trade for
+ * something an author consults once while wording a description and then never looks at
+ * again for the rest of the session. Behind a trigger it costs one line, and the moment it
+ * IS wanted it gets the whole viewport instead of a squeezed column.
+ *
+ * WHY THE PRESENTATIONAL COMPONENT STAYS UNTOUCHED. `SocialPreview` knows how three feeds
+ * clip a headline and nothing else — no open state, no trigger, no dialog. Keeping that
+ * split means the same preview can still be dropped inline anywhere it earns the space
+ * (a future site-wide SEO screen, a publish-confirmation step) without having to be
+ * unwrapped from a modal first. This component owns the disclosure; that one owns the
+ * drawing.
+ *
+ * WHY IT STAYS LIVE WHILE OPEN. The props below are the caller's live form state, so every
+ * keystroke in the meta fields behind the dialog repaints the card — the same behaviour the
+ * inline version had. The dialog is a React portal, not a snapshot, so nothing is frozen at
+ * open time and there is no "reopen to refresh" trap.
+ *
+ * NOTHING HERE PERSISTS. This component holds exactly one piece of state — whether the
+ * modal is open — and it is read by nobody but Radix. It contributes no form field, no
+ * FormData entry, and no input to the caller's autosave diff.
+ */
+interface SocialPreviewDialogProps {
+  description: string;
+  imageUrl?: string | null;
+  siteName?: string | null;
+  title: string;
+  /** Optional override for the trigger label, for surfaces that word it differently. */
+  triggerLabel?: string;
+  url: string;
+}
+
+export default function SocialPreviewDialog({
+  description,
+  imageUrl,
+  siteName,
+  title,
+  triggerLabel = 'Preview share card',
+  url,
+}: SocialPreviewDialogProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog onOpenChange={setIsOpen} open={isOpen}>
+      {/* `asChild` so the trigger is the house `Button` rather than a bare Radix button, and
+          `type="button"` explicitly: this renders inside the page/post `<form>`, where a
+          button that inherits the default `submit` type would save the record instead of
+          opening a preview. The visible text is the accessible name, and Radix leaves the
+          element a real focusable button, so keyboard and pointer reach it identically. */}
+      <DialogTrigger asChild>
+        <Button className="h-7 px-2 text-[11px]" size="sm" type="button" variant="outline">
+          <Share2 aria-hidden="true" className="mr-1.5 h-3.5 w-3.5" />
+          {triggerLabel}
+        </Button>
+      </DialogTrigger>
+
+      {/* The card is tall and the platform switcher sits above it, so the panel is capped at
+          85% of the viewport and the BODY scrolls rather than the dialog growing past the
+          screen edge — on a laptop in a browser with devtools open, an uncapped panel would
+          push its own close button out of reach. `overflow-hidden` on the shell keeps the
+          rounded corners from being cut by the scrolling child. */}
+      <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden sm:max-w-[600px]">
+        {/* `pr-8` reserves room for the close affordance the dialog draws at top-right. */}
+        <DialogHeader className="flex-shrink-0 pb-4 pr-8">
+          <DialogTitle>Share preview</DialogTitle>
+          <DialogDescription>
+            How this link is likely to appear when it is shared. Edit the meta title and
+            description behind this dialog and the card updates as you type.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-grow overflow-y-auto py-1">
+          <SocialPreview
+            description={description}
+            imageUrl={imageUrl}
+            siteName={siteName}
+            title={title}
+            url={url}
+          />
+        </div>
+
+        {/* Stated once here rather than repeated on each tab: the numbers in the preview are
+            tuned to observed rendering, and every platform reserves the right to reflow. */}
+        <p className="flex-shrink-0 pt-3 text-[11px] leading-snug text-muted-foreground">
+          Truncation is approximate — each platform reflows link previews on its own terms —
+          so treat a card that clips here as a prompt to shorten the copy, not a guarantee.
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/nextblock-template/components/submit-button.tsx

@@ -1,23 +1,23 @@
-"use client";
-
-import { Button } from "@nextblock-cms/ui";
-import { type ComponentProps } from "react";
-import { useFormStatus } from "react-dom";
-
-type Props = ComponentProps<typeof Button> & {
-  pendingText?: string;
-};
-
-export function SubmitButton({
-  children,
-  pendingText = "Submitting...",
-  ...props
-}: Props) {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button type="submit" aria-disabled={pending} {...props}>
-      {pending ? pendingText : children}
-    </Button>
-  );
-}
+"use client";
+
+import { Button } from "@nextblock-cms/ui";
+import { type ComponentProps } from "react";
+import { useFormStatus } from "react-dom";
+
+type Props = ComponentProps<typeof Button> & {
+  pendingText?: string;
+};
+
+export function SubmitButton({
+  children,
+  pendingText = "Submitting...",
+  ...props
+}: Props) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit" aria-disabled={pending} {...props}>
+      {pending ? pendingText : children}
+    </Button>
+  );
+}

package/templates/nextblock-template/components/theme-icon.tsx

@@ -1,78 +1,78 @@
-"use client";
-
-import {
-  Aperture,
-  Atom,
-  Blend,
-  Brush,
-  Cloud,
-  Contrast,
-  Droplet,
-  Feather,
-  Flame,
-  Gem,
-  Ghost,
-  Leaf,
-  Moon,
-  Mountain,
-  Palette,
-  Rocket,
-  Snowflake,
-  Sparkles,
-  Star,
-  Sun,
-  Sunrise,
-  Sunset,
-  Waves,
-  Zap,
-  type LucideIcon,
-} from "lucide-react";
-
-/**
- * Curated icon set offered to themes.
- *
- * A fixed map rather than a dynamic lucide lookup: the icon name comes from the
- * database, and importing lucide dynamically by string would either pull the
- * whole icon set into the bundle or break tree-shaking.
- */
-export const THEME_ICONS: Record<string, LucideIcon> = {
-  Sun,
-  Moon,
-  Zap,
-  Sparkles,
-  Palette,
-  Flame,
-  Droplet,
-  Leaf,
-  Star,
-  Cloud,
-  Snowflake,
-  Waves,
-  Mountain,
-  Sunrise,
-  Sunset,
-  Contrast,
-  Blend,
-  Brush,
-  Aperture,
-  Atom,
-  Feather,
-  Gem,
-  Ghost,
-  Rocket,
-};
-
-export const THEME_ICON_NAMES = Object.keys(THEME_ICONS);
-
-export function ThemeIcon({
-  name,
-  size = 16,
-  className,
-}: {
-  name: string;
-  size?: number;
-  className?: string;
-}) {
-  const Icon = THEME_ICONS[name] ?? Palette;
-  return <Icon size={size} className={className} />;
-}
+"use client";
+
+import {
+  Aperture,
+  Atom,
+  Blend,
+  Brush,
+  Cloud,
+  Contrast,
+  Droplet,
+  Feather,
+  Flame,
+  Gem,
+  Ghost,
+  Leaf,
+  Moon,
+  Mountain,
+  Palette,
+  Rocket,
+  Snowflake,
+  Sparkles,
+  Star,
+  Sun,
+  Sunrise,
+  Sunset,
+  Waves,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+
+/**
+ * Curated icon set offered to themes.
+ *
+ * A fixed map rather than a dynamic lucide lookup: the icon name comes from the
+ * database, and importing lucide dynamically by string would either pull the
+ * whole icon set into the bundle or break tree-shaking.
+ */
+export const THEME_ICONS: Record<string, LucideIcon> = {
+  Sun,
+  Moon,
+  Zap,
+  Sparkles,
+  Palette,
+  Flame,
+  Droplet,
+  Leaf,
+  Star,
+  Cloud,
+  Snowflake,
+  Waves,
+  Mountain,
+  Sunrise,
+  Sunset,
+  Contrast,
+  Blend,
+  Brush,
+  Aperture,
+  Atom,
+  Feather,
+  Gem,
+  Ghost,
+  Rocket,
+};
+
+export const THEME_ICON_NAMES = Object.keys(THEME_ICONS);
+
+export function ThemeIcon({
+  name,
+  size = 16,
+  className,
+}: {
+  name: string;
+  size?: number;
+  className?: string;
+}) {
+  const Icon = THEME_ICONS[name] ?? Palette;
+  return <Icon size={size} className={className} />;
+}

package/templates/nextblock-template/components/theme-switcher.tsx

@@ -1,85 +1,85 @@
-"use client";
-
-import { Button } from "@nextblock-cms/ui";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@nextblock-cms/ui";
-import { Laptop } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { useTranslations } from "@nextblock-cms/utils";
-import { useThemeCatalog } from "../context/ThemeCatalogContext";
-import { ThemeIcon } from "./theme-icon";
-
-const ICON_SIZE = 16;
-
-const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
-  const { t } = useTranslations();
-  const themes = useThemeCatalog();
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  const active = themes.find((entry) => entry.slug === theme);
-
-  /**
-   * Built-in slugs keep their existing translation keys so no copy is lost;
-   * admin-created themes fall back to the name stored on the row.
-   */
-  const labelFor = (slug: string, name: string) => {
-    const builtin: Record<string, string> = {
-      light: "theme_light",
-      dark: "theme_dark",
-      vibrant: "theme_vibrant",
-    };
-    const key = builtin[slug];
-    if (!key) return name;
-    const translated = t(key);
-    return translated === key ? name : translated;
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size={"sm"} aria-label={t('theme_switcher')}>
-          {active ? (
-            <ThemeIcon name={active.icon} size={ICON_SIZE} className="text-muted-foreground" />
-          ) : (
-            <Laptop size={ICON_SIZE} className="text-muted-foreground" />
-          )}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-content" align="start">
-        <DropdownMenuRadioGroup
-          value={theme}
-          onValueChange={(e) => setTheme(e)}
-        >
-          {themes.map((entry) => (
-            <DropdownMenuRadioItem key={entry.slug} className="flex gap-2" value={entry.slug}>
-              <ThemeIcon name={entry.icon} size={ICON_SIZE} className="text-muted-foreground" />{" "}
-              <span>{labelFor(entry.slug, entry.name)}</span>
-            </DropdownMenuRadioItem>
-          ))}
-          <DropdownMenuRadioItem className="flex gap-2" value="system">
-            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_system')}</span>
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-export { ThemeSwitcher };
+"use client";
+
+import { Button } from "@nextblock-cms/ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import { Laptop } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useThemeCatalog } from "../context/ThemeCatalogContext";
+import { ThemeIcon } from "./theme-icon";
+
+const ICON_SIZE = 16;
+
+const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const { t } = useTranslations();
+  const themes = useThemeCatalog();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const active = themes.find((entry) => entry.slug === theme);
+
+  /**
+   * Built-in slugs keep their existing translation keys so no copy is lost;
+   * admin-created themes fall back to the name stored on the row.
+   */
+  const labelFor = (slug: string, name: string) => {
+    const builtin: Record<string, string> = {
+      light: "theme_light",
+      dark: "theme_dark",
+      vibrant: "theme_vibrant",
+    };
+    const key = builtin[slug];
+    if (!key) return name;
+    const translated = t(key);
+    return translated === key ? name : translated;
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size={"sm"} aria-label={t('theme_switcher')}>
+          {active ? (
+            <ThemeIcon name={active.icon} size={ICON_SIZE} className="text-muted-foreground" />
+          ) : (
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-content" align="start">
+        <DropdownMenuRadioGroup
+          value={theme}
+          onValueChange={(e) => setTheme(e)}
+        >
+          {themes.map((entry) => (
+            <DropdownMenuRadioItem key={entry.slug} className="flex gap-2" value={entry.slug}>
+              <ThemeIcon name={entry.icon} size={ICON_SIZE} className="text-muted-foreground" />{" "}
+              <span>{labelFor(entry.slug, entry.name)}</span>
+            </DropdownMenuRadioItem>
+          ))}
+          <DropdownMenuRadioItem className="flex gap-2" value="system">
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>{t('theme_system')}</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export { ThemeSwitcher };

package/templates/nextblock-template/context/AuthContext.tsx

@@ -1,10 +1,10 @@
 // context/AuthContext.tsx
-'use client';
-
-import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
-import type { ReactNode } from 'react';
-import type { User, SupabaseClient } from '@supabase/supabase-js';
-import type { Database } from '@nextblock-cms/db';
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import type { User, SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
 
 type Profile = Database['public']['Tables']['profiles']['Row'];
 type UserRole = Database['public']['Enums']['user_role'];
@@ -28,17 +28,17 @@ interface AuthContextType {
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
-  const [user, setUser] = useState<User | null>(serverUser);
-  const [profile, setProfile] = useState<Profile | null>(serverProfile);
-  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
-  const [isLoading] = useState(false);
-
-  useEffect(() => {
-    setUser(serverUser);
-    setProfile(serverProfile);
-    setRole(serverProfile?.role ?? null);
-  }, [serverUser, serverProfile]);
+export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
+  const [user, setUser] = useState<User | null>(serverUser);
+  const [profile, setProfile] = useState<Profile | null>(serverProfile);
+  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
+  const [isLoading] = useState(false);
+
+  useEffect(() => {
+    setUser(serverUser);
+    setProfile(serverProfile);
+    setRole(serverProfile?.role ?? null);
+  }, [serverUser, serverProfile]);
 
   const isAdmin = role === 'ADMIN';
   const isWriter = role === 'WRITER';
@@ -49,11 +49,11 @@ export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProvid
     profile,
     role,
     isLoading,
-    isAdmin,
-    isWriter,
-    isUserRole,
-    supabase: null,
-  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole]);
+    isAdmin,
+    isWriter,
+    isUserRole,
+    supabase: null,
+  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole]);
 
   return (
     <AuthContext.Provider value={value}>
@@ -68,4 +68,4 @@ export const useAuth = () => {
     throw new Error('useAuth must be used within an AuthProvider');
   }
   return context;
-};
+};

package/templates/nextblock-template/context/ThemeCatalogContext.tsx

@@ -1,44 +1,44 @@
-"use client";
-
-import { createContext, useContext, useMemo, type ReactNode } from "react";
-
-/** The switcher-facing shape of a row in `site_themes`. */
-export interface ThemeCatalogEntry {
-  slug: string;
-  name: string;
-  /** lucide-react icon name. */
-  icon: string;
-  colorScheme: "light" | "dark";
-}
-
-/**
- * Themes are read once on the server in app/layout.tsx and handed to the client
- * through this context, so the switcher never fetches and never hardcodes a
- * list. Falls back to the palette shipped in libs/ui/src/styles/theme.css when
- * the table is empty or unreachable.
- */
-export const FALLBACK_THEME_CATALOG: ThemeCatalogEntry[] = [
-  { slug: "light", name: "Light", icon: "Sun", colorScheme: "light" },
-  { slug: "dark", name: "Dark", icon: "Moon", colorScheme: "dark" },
-  { slug: "vibrant", name: "Vibrant", icon: "Zap", colorScheme: "dark" },
-];
-
-const ThemeCatalogContext = createContext<ThemeCatalogEntry[]>(FALLBACK_THEME_CATALOG);
-
-export function ThemeCatalogProvider({
-  themes,
-  children,
-}: {
-  themes?: ThemeCatalogEntry[];
-  children: ReactNode;
-}) {
-  const value = useMemo(
-    () => (Array.isArray(themes) && themes.length > 0 ? themes : FALLBACK_THEME_CATALOG),
-    [themes],
-  );
-  return <ThemeCatalogContext.Provider value={value}>{children}</ThemeCatalogContext.Provider>;
-}
-
-export function useThemeCatalog(): ThemeCatalogEntry[] {
-  return useContext(ThemeCatalogContext);
-}
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+/** The switcher-facing shape of a row in `site_themes`. */
+export interface ThemeCatalogEntry {
+  slug: string;
+  name: string;
+  /** lucide-react icon name. */
+  icon: string;
+  colorScheme: "light" | "dark";
+}
+
+/**
+ * Themes are read once on the server in app/layout.tsx and handed to the client
+ * through this context, so the switcher never fetches and never hardcodes a
+ * list. Falls back to the palette shipped in libs/ui/src/styles/theme.css when
+ * the table is empty or unreachable.
+ */
+export const FALLBACK_THEME_CATALOG: ThemeCatalogEntry[] = [
+  { slug: "light", name: "Light", icon: "Sun", colorScheme: "light" },
+  { slug: "dark", name: "Dark", icon: "Moon", colorScheme: "dark" },
+  { slug: "vibrant", name: "Vibrant", icon: "Zap", colorScheme: "dark" },
+];
+
+const ThemeCatalogContext = createContext<ThemeCatalogEntry[]>(FALLBACK_THEME_CATALOG);
+
+export function ThemeCatalogProvider({
+  themes,
+  children,
+}: {
+  themes?: ThemeCatalogEntry[];
+  children: ReactNode;
+}) {
+  const value = useMemo(
+    () => (Array.isArray(themes) && themes.length > 0 ? themes : FALLBACK_THEME_CATALOG),
+    [themes],
+  );
+  return <ThemeCatalogContext.Provider value={value}>{children}</ThemeCatalogContext.Provider>;
+}
+
+export function useThemeCatalog(): ThemeCatalogEntry[] {
+  return useContext(ThemeCatalogContext);
+}