@tomako/tools-runtime 0.1.0

package/src/features/tools/og-image-generator/widget/og-image-generator.tsx

@@ -0,0 +1,742 @@
+"use client";
+
+ 
+
+import { ChevronDown } from "lucide-react";
+import type { ChangeEvent, FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@tomako/ui/collapsible";
+import { Dialog, DialogBody, DialogContent, DialogHeader } from "@tomako/ui/dialog";
+import { Input } from "@tomako/ui/input";
+import { Label } from "@tomako/ui/label";
+import { RadioGroup } from "@tomako/ui/radio-group";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { Textarea } from "@tomako/ui/textarea";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { downloadBlob } from "../../../../lib/file/download";
+import {
+    renderOgImage,
+    type GeneratedOgImage,
+} from "../../../../lib/tools/og-image-generator-render";
+import {
+    OG_IMAGE_PRESET_META,
+    ogImageBackgroundModes,
+    ogImageGeneratorInputSchema,
+    ogImageGridColors,
+    ogImageGridPatterns,
+    ogImagePresets,
+    ogImageTemplates,
+    type OgImageAgentResult,
+    type OgImageAgentSuggestion,
+    type OgImageBackgroundMode,
+    type OgImageFormat,
+    type OgImageGeneratorInput,
+    type OgImageGridColor,
+    type OgImageGridPattern,
+    type OgImageMetadata,
+    type OgImagePreset,
+    type OgImageTemplate,
+    type OgImageTypography,
+} from "../../../../lib/tools/og-image-generator-schema";
+import {
+    fetchOgImageGenerationTask,
+    submitOgImageGeneration,
+} from "../../../../host/client";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+    ToolCompactOption,
+    ToolErrorBanner,
+    ToolStatusLine,
+    ToolWorkspaceLayout,
+} from "../../../../components/tools/workspace";
+import { colorPresets, defaultInput } from "./constants";
+import {
+    ColorField,
+    FieldBlock,
+    ImageUploadField,
+    InlineFieldWithSettings,
+    SectionCard,
+    SliderField,
+    TypographyControls,
+    isPlaceholderTitle,
+} from "./form-fields";
+import { OgImagePreviewPanel } from "./preview-panel";
+import type { BusyMode } from "./types";
+
+export function OgImageGenerator() {
+  const t = useTranslations("toolsUi.ogImageGenerator");
+  const locale = useLocale();
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+  const decorInputRef = useRef<HTMLInputElement | null>(null);
+  const mountedRef = useRef(true);
+  const taskWatch = useLegacyLlmTaskWatch<OgImageAgentResult>();
+  const [input, setInput] = useState<OgImageGeneratorInput>(defaultInput);
+  const [metadata, setMetadata] = useState<OgImageMetadata | null>(null);
+  const [agentResult, setAgentResult] = useState<OgImageAgentResult | null>(null);
+  const [selectedSuggestionId, setSelectedSuggestionId] = useState<string | null>(null);
+  const [output, setOutput] = useState<GeneratedOgImage | null>(null);
+  const [busy, setBusy] = useState<BusyMode>(null);
+  const [taskStatus, setTaskStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTypographyEditor, setActiveTypographyEditor] = useState<"tag" | "title" | null>(
+    null,
+  );
+  const [gridControlsOpen, setGridControlsOpen] = useState(false);
+
+  const currentSize = OG_IMAGE_PRESET_META[input.preset];
+  const aspectRatio = `${currentSize.width} / ${currentSize.height}`;
+  const summary = useMemo(
+    () => t("sizeSummary", { width: currentSize.width, height: currentSize.height }),
+    [currentSize.height, currentSize.width, t],
+  );
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      taskWatch.stop();
+      if (output) URL.revokeObjectURL(output.url);
+    };
+  }, [output, taskWatch]);
+
+  function update<K extends keyof OgImageGeneratorInput>(key: K, value: OgImageGeneratorInput[K]) {
+    setInput((current) => ({ ...current, [key]: value }));
+    setError(null);
+  }
+
+  function updateTypography(
+    key: "tagTypography" | "titleTypography",
+    field: keyof OgImageTypography,
+    value: OgImageTypography[keyof OgImageTypography],
+  ) {
+    setInput((current) => ({
+      ...current,
+      [key]: {
+        ...current[key],
+        [field]: value,
+      },
+    }));
+    setError(null);
+  }
+
+  function clearOutput() {
+    if (output) URL.revokeObjectURL(output.url);
+    setOutput(null);
+  }
+
+  function reset() {
+    clearOutput();
+    setInput(defaultInput);
+    setMetadata(null);
+    setAgentResult(null);
+    setSelectedSuggestionId(null);
+    setTaskStatus(null);
+    setError(null);
+  }
+
+  function handleImageUpload(
+    event: ChangeEvent<HTMLInputElement>,
+    target: "logo" | "decor",
+  ) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setError(target === "logo" ? t("errors.logo") : t("errors.decor"));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const value = typeof reader.result === "string" ? reader.result : "";
+      if (!value) {
+        setError(target === "logo" ? t("errors.logo") : t("errors.decor"));
+        return;
+      }
+      setInput((current) => ({
+        ...current,
+        ...(target === "logo"
+          ? { logoDataUrl: value, logoName: file.name }
+          : { decorImageDataUrl: value, decorImageName: file.name }),
+      }));
+      setError(null);
+    };
+    reader.onerror = () => setError(target === "logo" ? t("errors.logo") : t("errors.decor"));
+    reader.readAsDataURL(file);
+    event.target.value = "";
+  }
+
+  function removeLogo() {
+    setInput((current) => ({
+      ...current,
+      logoDataUrl: undefined,
+      logoName: undefined,
+    }));
+  }
+
+  function removeDecorImage() {
+    setInput((current) => ({
+      ...current,
+      decorImageDataUrl: undefined,
+      decorImageName: undefined,
+    }));
+  }
+
+  async function generateAiDirections() {
+    const parsed = ogImageGeneratorInputSchema.safeParse(input);
+    if (!parsed.success || isPlaceholderTitle(parsed.data.title)) {
+      setError(t("errors.invalidInput"));
+      return;
+    }
+    setBusy("ai");
+    setError(null);
+    setTaskStatus(t("status.submitting"));
+    setAgentResult(null);
+    setSelectedSuggestionId(null);
+
+    try {
+      const submitted = await submitOgImageGeneration(parsed.data, null, locale);
+      const taskId = submitted.taskId;
+      setTaskStatus(t("status.running", { status: submitted.status ?? "PENDING" }));
+
+      await new Promise<void>((resolve) => {
+        taskWatch.start(
+          taskId,
+          async (id) => {
+            const task = await fetchOgImageGenerationTask(id);
+            if (!mountedRef.current) {
+              return { settled: true as const, kind: "error" as const, category: "task" as const };
+            }
+            setTaskStatus(t("status.running", { status: task.status }));
+            if (task.errorCode === "task_failed") {
+              return { settled: true as const, kind: "error" as const, category: "task" as const };
+            }
+            if (task.errorCode === "result_type_invalid") {
+              setError(t("errors.resultType"));
+              return { settled: true as const, kind: "error" as const, category: "schema" as const };
+            }
+            if (task.errorCode === "result_schema_invalid") {
+              setError(t("errors.schema"));
+              return { settled: true as const, kind: "error" as const, category: "schema" as const };
+            }
+            if (task.data) {
+              return { settled: true as const, kind: "success" as const, data: task.data };
+            }
+            return { settled: false as const };
+          },
+          {
+            onStatus: (status) => setTaskStatus(t("status.running", { status })),
+            onSuccess: (result) => {
+              if (!mountedRef.current) return;
+              setMetadata(result.metadata ?? null);
+              setAgentResult(result);
+              const first = result.suggestions[0];
+              if (first) applySuggestion(first);
+              setTaskStatus(t("status.ready"));
+              window.setTimeout(
+                () => resultRef.current?.scrollIntoView({ block: "center", behavior: "smooth" }),
+                40,
+              );
+              resolve();
+            },
+            onError: () => {
+              if (!mountedRef.current) return;
+              setError(t("errors.agent"));
+              resolve();
+            },
+          },
+        );
+      });
+    } catch {
+      setError(t("errors.agent"));
+    } finally {
+      if (mountedRef.current) setBusy(null);
+    }
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    await renderCurrentImage();
+  }
+
+  async function renderCurrentImage() {
+    setError(null);
+    const parsed = ogImageGeneratorInputSchema.safeParse(input);
+    if (!parsed.success) {
+      setError(t("errors.invalidInput"));
+      return;
+    }
+    if (isPlaceholderTitle(parsed.data.title)) {
+      setError(t("errors.placeholder"));
+      return;
+    }
+
+    clearOutput();
+    setBusy("render");
+    window.setTimeout(() => resultRef.current?.scrollIntoView({ block: "center", behavior: "smooth" }), 40);
+
+    try {
+      const generated = await renderOgImage(parsed.data);
+      setOutput(generated);
+    } catch {
+      setError(t("errors.generate"));
+    } finally {
+      if (mountedRef.current) setBusy(null);
+    }
+  }
+
+  function applySuggestion(suggestion: OgImageAgentSuggestion) {
+    setSelectedSuggestionId(suggestion.id);
+    setInput((current) => ({
+      ...current,
+      title: suggestion.title,
+      subtitle: suggestion.subtitle ?? current.subtitle,
+      brand: suggestion.brand ?? current.brand,
+      tags: suggestion.tags ?? current.tags,
+      logoText: suggestion.logoText ?? current.logoText,
+      template: suggestion.template,
+      primaryColor: suggestion.primaryColor,
+      accentColor: suggestion.accentColor,
+      titleTypography: {
+        ...current.titleTypography,
+        color: suggestion.template === "minimal" ? "#111111" : "#FFFFFF",
+      },
+    }));
+    setError(null);
+  }
+
+  function downloadImage() {
+    if (!output) return;
+    downloadBlob(output.blob, output.fileName);
+  }
+
+  return (
+    <>
+      <ToolWorkspaceLayout
+        className="rounded-lg border-[#E5E5E5] shadow-[0_24px_70px_rgba(17,17,17,0.08)]"
+        form={
+          <form onSubmit={(event) => void submit(event)} className="grid gap-5">
+            <div>
+              <h3 className="text-lg font-semibold leading-tight text-[#111111]">{t("chooseTemplate")}</h3>
+              <p className="mt-1 text-sm leading-6 text-[#666666]">{t("workspaceHint")}</p>
+            </div>
+
+            <div>
+              <p className="mb-2 text-[13px] font-semibold text-[#111111]">{t("presetLabel")}</p>
+              <RadioGroup
+                className="grid grid-cols-3 gap-2"
+                value={input.preset}
+                onValueChange={(value) => update("preset", value as OgImagePreset)}
+              >
+                {ogImagePresets.map((preset) => (
+                  <ToolCompactOption
+                    key={preset}
+                    active={input.preset === preset}
+                    label={t(`presets.${preset}.label`)}
+                    value={preset}
+                  />
+                ))}
+              </RadioGroup>
+            </div>
+
+            <div>
+              <p className="mb-2 text-[13px] font-semibold text-[#111111]">{t("templateLabel")}</p>
+              <RadioGroup
+                className="grid grid-cols-3 gap-2"
+                value={input.template}
+                onValueChange={(value) => update("template", value as OgImageTemplate)}
+              >
+                {ogImageTemplates.map((template) => (
+                  <ToolCompactOption
+                    key={template}
+                    active={input.template === template}
+                    label={t(`templates.${template}`)}
+                    value={template}
+                  />
+                ))}
+              </RadioGroup>
+            </div>
+
+            <SectionCard title={t("templatePropertiesTitle")} description={t("templatePropertiesHint")}>
+              <div className="grid gap-4">
+                <FieldBlock label={t("tagLabel")}>
+                  <InlineFieldWithSettings
+                    ariaLabel={t("tagLabel")}
+                    value={
+                      <Input
+                        maxLength={96}
+                        value={input.tags ?? ""}
+                        onChange={(event) => update("tags", event.target.value)}
+                        placeholder={t("tagPlaceholder")}
+                      />
+                    }
+                    onOpenSettings={() => setActiveTypographyEditor("tag")}
+                  />
+                </FieldBlock>
+
+                <FieldBlock label={t("titleLabel")}>
+                  <InlineFieldWithSettings
+                    ariaLabel={t("titleLabel")}
+                    value={
+                      <Input
+                        maxLength={90}
+                        value={input.title}
+                        onChange={(event) => update("title", event.target.value)}
+                        placeholder={t("titlePlaceholder")}
+                      />
+                    }
+                    onOpenSettings={() => setActiveTypographyEditor("title")}
+                  />
+                </FieldBlock>
+
+                <ImageUploadField
+                  chooseLabel={t("chooseLogo")}
+                  fileName={input.logoName}
+                  imageUrl={input.logoDataUrl}
+                  label={t("logoLabel")}
+                  previewAlt={t("logoPreviewAlt")}
+                  selectedLabel={t("logoSelected")}
+                  onChoose={() => logoInputRef.current?.click()}
+                  onRemove={removeLogo}
+                />
+                <input
+                  ref={logoInputRef}
+                  accept="image/*"
+                  className="hidden"
+                  type="file"
+                  onChange={(event) => handleImageUpload(event, "logo")}
+                />
+
+                <ImageUploadField
+                  chooseLabel={t("chooseDecorImage")}
+                  fileName={input.decorImageName}
+                  imageUrl={input.decorImageDataUrl}
+                  label={t("decorImageLabel")}
+                  previewAlt={t("decorImagePreviewAlt")}
+                  selectedLabel={t("decorImageSelected")}
+                  onChoose={() => decorInputRef.current?.click()}
+                  onRemove={removeDecorImage}
+                />
+                <input
+                  ref={decorInputRef}
+                  accept="image/*"
+                  className="hidden"
+                  type="file"
+                  onChange={(event) => handleImageUpload(event, "decor")}
+                />
+
+                <ColorField
+                  label={t("templateBackgroundColorLabel")}
+                  value={input.templateBackgroundColor}
+                  onChange={(value) => update("templateBackgroundColor", value)}
+                />
+              </div>
+            </SectionCard>
+
+            <SectionCard title={t("backgroundTitle")} description={t("backgroundHint")}>
+              <div className="grid gap-4">
+                <div>
+                  <p className="mb-2 text-[13px] font-semibold text-[#111111]">{t("backgroundModeLabel")}</p>
+                  <RadioGroup
+                    className="grid grid-cols-2 gap-2"
+                    value={input.backgroundMode}
+                    onValueChange={(value) => update("backgroundMode", value as OgImageBackgroundMode)}
+                  >
+                    {ogImageBackgroundModes.map((mode) => (
+                      <ToolCompactOption
+                        key={mode}
+                        active={input.backgroundMode === mode}
+                        label={t(`backgroundModes.${mode}`)}
+                        value={mode}
+                      />
+                    ))}
+                  </RadioGroup>
+                </div>
+
+                <ColorField
+                  label={t("backgroundColorLabel")}
+                  value={input.backgroundColor}
+                  onChange={(value) => update("backgroundColor", value)}
+                />
+
+                {input.backgroundMode === "gradient" ? (
+                  <div>
+                    <p className="mb-2 text-[13px] font-semibold text-[#111111]">{t("paletteLabel")}</p>
+                    <div className="grid grid-cols-5 gap-2">
+                      {colorPresets.map((palette) => {
+                        const active =
+                          input.primaryColor === palette.primary &&
+                          input.accentColor === palette.accent &&
+                          input.backgroundColor === palette.background;
+                        return (
+                          <button
+                            key={`${palette.primary}-${palette.accent}`}
+                            aria-label={t("paletteOption")}
+                            className={`flex h-11 rounded-lg border bg-white p-1 outline-none transition focus-visible:ring-4 focus-visible:ring-[#111111]/10 ${
+                              active ? "border-[#111111]" : "border-[#D8D8D8] hover:border-[#111111]"
+                            }`}
+                            type="button"
+                            onClick={() => {
+                              update("primaryColor", palette.primary);
+                              update("accentColor", palette.accent);
+                              update("backgroundColor", palette.background);
+                            }}
+                          >
+                            <span className="flex-1 rounded-l-md" style={{ backgroundColor: palette.primary }} />
+                            <span className="flex-1 rounded-r-md" style={{ backgroundColor: palette.accent }} />
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ) : null}
+
+                <FieldBlock label={t("gridOverlayLabel")}>
+                  <div className="grid gap-3">
+                    <div>
+                      <Label className="mb-2 text-xs text-[#666666]">{t("gridPatternLabel")}</Label>
+                      <Select
+                        value={input.gridPattern}
+                        onValueChange={(value) => update("gridPattern", value as OgImageGridPattern)}
+                      >
+                        <SelectTrigger
+                          className="h-10 w-full rounded-lg border-[#D8D8D8]"
+                          onFocus={() => setGridControlsOpen(true)}
+                          onPointerDown={() => setGridControlsOpen(true)}
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {ogImageGridPatterns.map((pattern) => (
+                            <SelectItem key={pattern} value={pattern}>
+                              {t(`gridPatterns.${pattern}`)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {gridControlsOpen ? (
+                      <>
+                        <div>
+                          <Label className="mb-2 text-xs text-[#666666]">{t("gridColorLabel")}</Label>
+                          <RadioGroup
+                            className="grid grid-cols-3 gap-2"
+                            value={input.gridColor}
+                            onValueChange={(value) => update("gridColor", value as OgImageGridColor)}
+                          >
+                            {ogImageGridColors.map((color) => (
+                              <ToolCompactOption
+                                key={color}
+                                active={input.gridColor === color}
+                                label={t(`gridColors.${color}`)}
+                                value={color}
+                              />
+                            ))}
+                          </RadioGroup>
+                        </div>
+
+                        <SliderField
+                          label={t("gridOpacityLabel")}
+                          max={1}
+                          min={0}
+                          step={0.01}
+                          value={input.gridOpacity}
+                          valueLabel={input.gridOpacity.toFixed(2)}
+                          onChange={(value) => update("gridOpacity", value)}
+                        />
+                        <SliderField
+                          label={t("gridBlurLabel")}
+                          max={100}
+                          min={0}
+                          step={1}
+                          value={input.gridBlurRadius}
+                          valueLabel={`${input.gridBlurRadius}%`}
+                          onChange={(value) => update("gridBlurRadius", value)}
+                        />
+                      </>
+                    ) : null}
+                  </div>
+                </FieldBlock>
+
+                <SliderField
+                  label={t("noiseLabel")}
+                  max={1}
+                  min={0}
+                  step={0.01}
+                  value={input.noise}
+                  valueLabel={input.noise.toFixed(2)}
+                  onChange={(value) => update("noise", value)}
+                />
+              </div>
+            </SectionCard>
+
+            <Collapsible className="rounded-lg border border-[#E5E5E5] bg-[#FAFAFA]">
+              <CollapsibleTrigger className="flex w-full items-center justify-between px-4 py-3 text-left">
+                <div>
+                  <p className="text-sm font-semibold text-[#111111]">{t("advancedTitle")}</p>
+                  <p className="mt-1 text-xs leading-5 text-[#666666]">{t("advancedHint")}</p>
+                </div>
+                <ChevronDown className="size-4 text-[#666666]" />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="grid gap-4 border-t border-[#E5E5E5] px-4 py-4">
+                <div>
+                  <label className="mb-2 block text-[13px] font-semibold text-[#111111]" htmlFor="og-source-url">
+                    {t("sourceUrlLabel")}
+                  </label>
+                  <Input
+                    id="og-source-url"
+                    value={input.sourceUrl ?? ""}
+                    onChange={(event) => update("sourceUrl", event.target.value)}
+                    placeholder={t("sourceUrlPlaceholder")}
+                  />
+                  {metadata ? (
+                    <div className="mt-3 rounded-lg border border-[#E5E5E5] bg-white p-3 text-xs leading-5 text-[#555555]">
+                      <p className="font-semibold text-[#111111]">{metadata.title || metadata.siteName || t("metadataLoaded")}</p>
+                      {metadata.description ? <p className="mt-1 line-clamp-2">{metadata.description}</p> : null}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div>
+                  <label className="mb-2 block text-[13px] font-semibold text-[#111111]" htmlFor="og-brief">
+                    {t("briefLabel")}
+                  </label>
+                  <Textarea
+                    id="og-brief"
+                    className="min-h-20 resize-none"
+                    maxLength={420}
+                    value={input.brief ?? ""}
+                    onChange={(event) => update("brief", event.target.value)}
+                    placeholder={t("briefPlaceholder")}
+                  />
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div>
+                    <label className="mb-2 block text-[13px] font-semibold text-[#111111]" htmlFor="og-brand">
+                      {t("brandLabel")}
+                    </label>
+                    <Input
+                      id="og-brand"
+                      maxLength={32}
+                      value={input.brand ?? ""}
+                      onChange={(event) => update("brand", event.target.value)}
+                      placeholder={t("brandPlaceholder")}
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-2 block text-[13px] font-semibold text-[#111111]" htmlFor="og-logo-text">
+                      {t("logoTextLabel")}
+                    </label>
+                    <Input
+                      id="og-logo-text"
+                      maxLength={12}
+                      value={input.logoText ?? ""}
+                      onChange={(event) => update("logoText", event.target.value)}
+                      placeholder={t("logoTextPlaceholder")}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="mb-2 block text-[13px] font-semibold text-[#111111]" htmlFor="og-subtitle">
+                    {t("subtitleLabel")}
+                  </label>
+                  <Textarea
+                    id="og-subtitle"
+                    className="min-h-20 resize-none"
+                    maxLength={150}
+                    value={input.subtitle ?? ""}
+                    onChange={(event) => update("subtitle", event.target.value)}
+                    placeholder={t("subtitlePlaceholder")}
+                  />
+                </div>
+
+              </CollapsibleContent>
+            </Collapsible>
+
+            {agentResult ? (
+              <div className="rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] p-3">
+                <p className="text-sm font-semibold text-[#111111]">{t("aiSuggestionsTitle")}</p>
+                <div className="mt-3 grid gap-2">
+                  {agentResult.suggestions.map((suggestion) => (
+                    <button
+                      key={suggestion.id}
+                      className={`rounded-lg border p-3 text-left transition ${
+                        selectedSuggestionId === suggestion.id
+                          ? "border-[#111111] bg-white"
+                          : "border-[#E5E5E5] bg-white/70 hover:border-[#111111]"
+                      }`}
+                      type="button"
+                      onClick={() => applySuggestion(suggestion)}
+                    >
+                      <span className="block text-sm font-semibold leading-5 text-[#111111]">{suggestion.title}</span>
+                      <span className="mt-1 block text-xs leading-5 text-[#666666]">{suggestion.rationale}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            {taskStatus ? <ToolStatusLine>{taskStatus}</ToolStatusLine> : null}
+            {error ? <ToolErrorBanner>{error}</ToolErrorBanner> : null}
+
+          </form>
+        }
+        preview={
+          <aside
+            ref={resultRef}
+            className="min-h-[560px] bg-[#FAFAFA] p-5 md:p-6 lg:sticky lg:top-4 lg:min-h-[760px]"
+          >
+            <OgImagePreviewPanel
+              aspectRatio={aspectRatio}
+              busy={busy}
+              format={input.format}
+              input={input}
+              onFormatChange={(value: OgImageFormat) => update("format", value)}
+              onGenerateAi={() => void generateAiDirections()}
+              onRender={() => void renderCurrentImage()}
+              onReset={reset}
+              output={output}
+              summary={summary}
+              onDownload={downloadImage}
+            />
+          </aside>
+        }
+      />
+      <Dialog
+        open={activeTypographyEditor !== null}
+        onOpenChange={(open) => !open && setActiveTypographyEditor(null)}
+      >
+        <DialogContent size="sm">
+          <DialogHeader
+            title={activeTypographyEditor === "tag" ? t("tagLabel") : t("titleLabel")}
+          />
+          <DialogBody>
+            {activeTypographyEditor ? (
+              <TypographyControls
+                labels={t}
+                value={activeTypographyEditor === "tag" ? input.tagTypography : input.titleTypography}
+                onChange={(field, value) =>
+                  updateTypography(
+                    activeTypographyEditor === "tag" ? "tagTypography" : "titleTypography",
+                    field,
+                    value,
+                  )
+                }
+              />
+            ) : null}
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}