@orhancodestudio/ocsm-core 0.1.0-alpha.1

package/src/admin/components/page-builder.tsx

@@ -0,0 +1,1334 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { type ReactNode, useEffect, useState, useTransition } from "react";
+import {
+  type BackgroundType,
+  type Block,
+  type BlockStyle,
+  type BlockType,
+  BLOCK_TYPES,
+  createBlock,
+  FONT_OPTIONS,
+  FONT_WEIGHT_OPTIONS,
+  GRADIENT_PRESETS,
+  type NavLink,
+  type TextAlign,
+} from "../../blocks/block.types";
+import { BlockItem } from "../../blocks/block-renderer";
+import { themeToCssVariables } from "../../theme/css";
+import type { OcsmTheme } from "../../theme/theme.types";
+import type { SaveDocumentAction, SaveLayoutAction } from "../admin.types";
+import styles from "../admin.module.css";
+import {
+  IconEye,
+  IconEyeOff,
+  IconGrip,
+  IconLogout,
+  IconMonitor,
+  IconPhone,
+  IconTrash,
+} from "./icons";
+
+export interface PageBuilderProps {
+  collection: string;
+  collectionLabel: string;
+  backHref: string;
+  saveAction: SaveDocumentAction;
+  saveLayout: SaveLayoutAction;
+  theme: OcsmTheme;
+  initialSlug?: string;
+  initialTitle?: string;
+  initialBlocks: Block[];
+  initialHeader: Block[];
+  initialFooter: Block[];
+}
+
+type Region = "header" | "body" | "footer";
+
+const LABELS = Object.fromEntries(
+  BLOCK_TYPES.map((entry) => [entry.type, entry.label]),
+) as Record<BlockType, string>;
+
+const REGION_LABEL: Record<Region, string> = {
+  header: "Header",
+  body: "Şablon",
+  footer: "Footer",
+};
+
+export function PageBuilder({
+  collection,
+  collectionLabel,
+  backHref,
+  saveAction,
+  saveLayout,
+  theme,
+  initialSlug,
+  initialTitle,
+  initialBlocks,
+  initialHeader,
+  initialFooter,
+}: PageBuilderProps) {
+  const router = useRouter();
+  const [title, setTitle] = useState(initialTitle ?? "");
+  const [header, setHeader] = useState<Block[]>(initialHeader);
+  const [body, setBody] = useState<Block[]>(initialBlocks);
+  const [footer, setFooter] = useState<Block[]>(initialFooter);
+  const [selected, setSelected] = useState<{
+    region: Region;
+    id: string;
+  } | null>(null);
+  const [addRegion, setAddRegion] = useState<Region | null>(null);
+  const [inspectorHeight, setInspectorHeight] = useState(340);
+  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
+  const [status, setStatus] = useState<{ ok: boolean; text: string } | null>(
+    null,
+  );
+  const [pending, startTransition] = useTransition();
+
+  // Saved baselines — updated after a successful save so "dirty" resets.
+  const [baseTitle, setBaseTitle] = useState(initialTitle ?? "");
+  const [baseBody, setBaseBody] = useState(() => JSON.stringify(initialBlocks));
+  const [baseHeader, setBaseHeader] = useState(() =>
+    JSON.stringify(initialHeader),
+  );
+  const [baseFooter, setBaseFooter] = useState(() =>
+    JSON.stringify(initialFooter),
+  );
+
+  const isNew = !initialSlug;
+
+  const dirty =
+    title !== baseTitle ||
+    JSON.stringify(body) !== baseBody ||
+    JSON.stringify(header) !== baseHeader ||
+    JSON.stringify(footer) !== baseFooter;
+
+  // Warn before leaving/refreshing with unsaved changes.
+  useEffect(() => {
+    if (!dirty) return;
+    function onBeforeUnload(event: BeforeUnloadEvent) {
+      event.preventDefault();
+      event.returnValue = "";
+    }
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [dirty]);
+
+  function listOf(region: Region): Block[] {
+    if (region === "header") return header;
+    if (region === "footer") return footer;
+    return body;
+  }
+
+  function setList(region: Region, updater: (list: Block[]) => Block[]) {
+    if (region === "header") setHeader(updater);
+    else if (region === "footer") setFooter(updater);
+    else setBody(updater);
+  }
+
+  const selectedBlock = selected
+    ? (listOf(selected.region).find((b) => b.id === selected.id) ?? null)
+    : null;
+
+  function addBlock(region: Region, type: BlockType) {
+    const block = createBlock(type);
+    setList(region, (list) => [...list, block]);
+    setSelected({ region, id: block.id });
+    setAddRegion(null);
+  }
+
+  function removeBlock(region: Region, id: string) {
+    setList(region, (list) => list.filter((b) => b.id !== id));
+    if (selected?.region === region && selected.id === id) setSelected(null);
+  }
+
+  function toggleHidden(region: Region, id: string) {
+    setList(region, (list) =>
+      list.map((b) =>
+        b.id === id ? ({ ...b, hidden: !b.hidden } as Block) : b,
+      ),
+    );
+  }
+
+  function startResize(event: React.MouseEvent) {
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = inspectorHeight;
+    function onMove(moveEvent: MouseEvent) {
+      const delta = moveEvent.clientY - startY;
+      const next = Math.min(
+        Math.max(startHeight + delta, 160),
+        window.innerHeight - 220,
+      );
+      setInspectorHeight(next);
+    }
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.userSelect = "";
+    }
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+
+  function reorder(region: Region, from: number, to: number) {
+    setList(region, (list) => {
+      if (
+        from === to ||
+        from < 0 ||
+        to < 0 ||
+        from >= list.length ||
+        to >= list.length
+      ) {
+        return list;
+      }
+      const next = [...list];
+      const [moved] = next.splice(from, 1);
+      if (moved) next.splice(to, 0, moved);
+      return next;
+    });
+  }
+
+  function patchContent(patch: Record<string, unknown>) {
+    if (!selected) return;
+    setList(selected.region, (list) =>
+      list.map((b) =>
+        b.id === selected.id ? ({ ...b, ...patch } as Block) : b,
+      ),
+    );
+  }
+
+  function patchStyle(patch: Partial<BlockStyle>) {
+    if (!selected) return;
+    setList(selected.region, (list) =>
+      list.map((b) =>
+        b.id === selected.id
+          ? ({ ...b, style: { ...b.style, ...patch } } as Block)
+          : b,
+      ),
+    );
+  }
+
+  function onPublish() {
+    setStatus({ ok: true, text: isNew ? "Yayınlanıyor…" : "Kaydediliyor…" });
+    startTransition(async () => {
+      const slug = initialSlug ?? slugify(title);
+      const results = [await saveAction({ collection, slug, title, blocks: body })];
+      if (JSON.stringify(header) !== baseHeader) {
+        results.push(await saveLayout("header", header));
+      }
+      if (JSON.stringify(footer) !== baseFooter) {
+        results.push(await saveLayout("footer", footer));
+      }
+      const failed = results.find((result) => !result.ok);
+      setStatus({
+        ok: !failed,
+        text: failed
+          ? (failed.message ?? "Hata oluştu")
+          : isNew
+            ? "Yayınlandı ✓"
+            : "Kaydedildi ✓",
+      });
+      if (!failed) {
+        setBaseTitle(title);
+        setBaseBody(JSON.stringify(body));
+        setBaseHeader(JSON.stringify(header));
+        setBaseFooter(JSON.stringify(footer));
+      }
+      if (!failed && isNew) router.push(`/ocsm-admin/${collection}/${slug}`);
+      else router.refresh();
+    });
+  }
+
+  const canvasTheme = {
+    background: theme.backgroundColor,
+    color: theme.textColor,
+    fontFamily: theme.fontFamily,
+    ...themeToCssVariables(theme),
+  } as React.CSSProperties;
+
+  const totalBlocks = header.length + body.length + footer.length;
+
+  function renderRegion(region: Region) {
+    return listOf(region)
+      .filter((block) => !block.hidden)
+      .map((block) => (
+        <div
+          key={block.id}
+          data-label={`${REGION_LABEL[region]} · ${LABELS[block.type]}`}
+          className={`${styles.fsSelectable} ${
+            selected?.region === region && selected.id === block.id
+              ? styles.fsSelectableActive
+              : ""
+          }`}
+          onClick={() => setSelected({ region, id: block.id })}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") setSelected({ region, id: block.id });
+          }}
+        >
+          <BlockItem block={block} />
+        </div>
+      ));
+  }
+
+  return (
+    <div className={styles.fsBuilder}>
+      <div className={styles.fsTop}>
+        <a
+          className={styles.fsExit}
+          href={backHref}
+          title={`Çıkış — ${collectionLabel}`}
+          aria-label="Editörden çık"
+        >
+          <IconLogout
+            width={18}
+            height={18}
+            style={{ transform: "scaleX(-1)" }}
+          />
+        </a>
+        <input
+          className={styles.fsTitleInput}
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          placeholder="Sayfa başlığı"
+        />
+        <div className={styles.fsTopRight}>
+          {status ? (
+            <span className={styles.fsStatus}>{status.text}</span>
+          ) : dirty ? (
+            <span className={styles.fsDirty}>● Kaydedilmemiş</span>
+          ) : null}
+          <div className={styles.fsDeviceToggle}>
+            <button
+              type="button"
+              className={`${styles.fsDeviceBtn} ${
+                device === "desktop" ? styles.fsDeviceBtnActive : ""
+              }`}
+              onClick={() => setDevice("desktop")}
+              title="Masaüstü önizleme"
+              aria-label="Masaüstü önizleme"
+            >
+              <IconMonitor width={17} height={17} />
+            </button>
+            <button
+              type="button"
+              className={`${styles.fsDeviceBtn} ${
+                device === "mobile" ? styles.fsDeviceBtnActive : ""
+              }`}
+              onClick={() => setDevice("mobile")}
+              title="Telefon önizleme"
+              aria-label="Telefon önizleme"
+            >
+              <IconPhone width={17} height={17} />
+            </button>
+          </div>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnPrimary}`}
+            onClick={onPublish}
+            disabled={pending}
+          >
+            {pending
+              ? isNew
+                ? "Yayınlanıyor…"
+                : "Kaydediliyor…"
+              : isNew
+                ? "Yayınla"
+                : "Kaydet"}
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.fsBody}>
+        <aside className={styles.fsPanel}>
+          {selectedBlock ? (
+            <>
+              <div
+                className={styles.fsInspectorPane}
+                style={{ height: inspectorHeight }}
+              >
+                <div className={styles.fsPaneHead}>
+                  <span>{LABELS[selectedBlock.type]} ayarları</span>
+                  <button
+                    type="button"
+                    className={styles.fsMiniBtn}
+                    onClick={() => setSelected(null)}
+                    title="Kapat"
+                  >
+                    ✕
+                  </button>
+                </div>
+                <div className={styles.fsPaneBody}>
+                  <Inspector
+                    block={selectedBlock}
+                    onContent={patchContent}
+                    onStyle={patchStyle}
+                  />
+                </div>
+              </div>
+              <button
+                type="button"
+                className={styles.fsResizer}
+                onMouseDown={startResize}
+                title="Sürükleyerek boyutlandır"
+                aria-label="Bölmeleri yeniden boyutlandır"
+              >
+                <span className={styles.fsResizerGrip} />
+              </button>
+            </>
+          ) : null}
+
+          <div className={styles.fsSectionsPane}>
+            <SectionGroup
+              title="Header"
+              note="Tüm sayfalarda görünür"
+              region="header"
+              blocks={header}
+              selectedId={selected?.region === "header" ? selected.id : null}
+              addOpen={addRegion === "header"}
+              onToggleAdd={() =>
+                setAddRegion((r) => (r === "header" ? null : "header"))
+              }
+              onSelect={(id) => setSelected({ region: "header", id })}
+              onRemove={(id) => removeBlock("header", id)}
+              onToggleHidden={(id) => toggleHidden("header", id)}
+              onReorder={(from, to) => reorder("header", from, to)}
+              onAdd={(type) => addBlock("header", type)}
+            />
+            <SectionGroup
+              title="Şablon"
+              note="Yalnızca bu sayfa"
+              region="body"
+              blocks={body}
+              selectedId={selected?.region === "body" ? selected.id : null}
+              addOpen={addRegion === "body"}
+              onToggleAdd={() =>
+                setAddRegion((r) => (r === "body" ? null : "body"))
+              }
+              onSelect={(id) => setSelected({ region: "body", id })}
+              onRemove={(id) => removeBlock("body", id)}
+              onToggleHidden={(id) => toggleHidden("body", id)}
+              onReorder={(from, to) => reorder("body", from, to)}
+              onAdd={(type) => addBlock("body", type)}
+            />
+            <SectionGroup
+              title="Footer"
+              note="Tüm sayfalarda görünür"
+              region="footer"
+              blocks={footer}
+              selectedId={selected?.region === "footer" ? selected.id : null}
+              addOpen={addRegion === "footer"}
+              onToggleAdd={() =>
+                setAddRegion((r) => (r === "footer" ? null : "footer"))
+              }
+              onSelect={(id) => setSelected({ region: "footer", id })}
+              onRemove={(id) => removeBlock("footer", id)}
+              onToggleHidden={(id) => toggleHidden("footer", id)}
+              onReorder={(from, to) => reorder("footer", from, to)}
+              onAdd={(type) => addBlock("footer", type)}
+            />
+          </div>
+        </aside>
+
+        <div className={styles.fsCanvas} data-device={device}>
+          <div className={styles.fsStage} data-device={device} style={canvasTheme}>
+            {totalBlocks === 0 ? (
+              <div className={styles.fsCanvasEmpty}>
+                Soldan bölüm ekleyerek sayfanı oluştur.
+              </div>
+            ) : (
+              <>
+                {renderRegion("header")}
+                {renderRegion("body")}
+                {renderRegion("footer")}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SectionGroup({
+  title,
+  note,
+  region,
+  blocks,
+  selectedId,
+  addOpen,
+  onToggleAdd,
+  onSelect,
+  onRemove,
+  onToggleHidden,
+  onReorder,
+  onAdd,
+}: {
+  title: string;
+  note: string;
+  region: Region;
+  blocks: Block[];
+  selectedId: string | null;
+  addOpen: boolean;
+  onToggleAdd: () => void;
+  onSelect: (id: string) => void;
+  onRemove: (id: string) => void;
+  onToggleHidden: (id: string) => void;
+  onReorder: (from: number, to: number) => void;
+  onAdd: (type: BlockType) => void;
+}) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [overIndex, setOverIndex] = useState<number | null>(null);
+
+  return (
+    <div className={styles.fsGroupSection}>
+      <div className={styles.fsGroupHead}>
+        <span className={styles.fsGroupName}>{title}</span>
+        <span className={styles.fsGroupNote}>{note}</span>
+      </div>
+      <div className={styles.fsList}>
+        {blocks.map((block, index) => (
+          <div
+            key={block.id}
+            draggable
+            onDragStart={() => setDragIndex(index)}
+            onDragEnter={() => setOverIndex(index)}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={() => {
+              if (dragIndex !== null) onReorder(dragIndex, index);
+              setDragIndex(null);
+              setOverIndex(null);
+            }}
+            onDragEnd={() => {
+              setDragIndex(null);
+              setOverIndex(null);
+            }}
+            className={`${styles.fsRow} ${
+              block.id === selectedId ? styles.fsRowActive : ""
+            } ${
+              overIndex === index && dragIndex !== null && dragIndex !== index
+                ? styles.fsRowDrag
+                : ""
+            }`}
+            onClick={() => onSelect(block.id)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") onSelect(block.id);
+            }}
+          >
+            <span className={styles.fsGrip} title="Sürükleyerek sırala">
+              <IconGrip />
+            </span>
+            <span
+              className={styles.fsRowLabel}
+              style={
+                block.hidden
+                  ? { opacity: 0.5, textDecoration: "line-through" }
+                  : undefined
+              }
+            >
+              {LABELS[block.type]}
+            </span>
+            <button
+              type="button"
+              className={styles.fsMiniBtn}
+              onClick={(event) => {
+                event.stopPropagation();
+                onToggleHidden(block.id);
+              }}
+              title={block.hidden ? "Göster" : "Gizle"}
+            >
+              {block.hidden ? (
+                <IconEyeOff width={14} height={14} />
+              ) : (
+                <IconEye width={14} height={14} />
+              )}
+            </button>
+            <button
+              type="button"
+              className={styles.fsMiniBtn}
+              onClick={(event) => {
+                event.stopPropagation();
+                onRemove(block.id);
+              }}
+              title="Sil"
+            >
+              <IconTrash width={14} height={14} />
+            </button>
+          </div>
+        ))}
+
+        <button type="button" className={styles.fsAddCard} onClick={onToggleAdd}>
+          + Bölüm ekle
+        </button>
+
+        {addOpen ? (
+          <div className={styles.fsAddGrid}>
+            {BLOCK_TYPES.filter(
+              (entry) => region === "header" || !entry.headerOnly,
+            ).map((entry) => (
+              <button
+                key={entry.type}
+                type="button"
+                className={styles.fsAddBtn}
+                onClick={() => onAdd(entry.type)}
+              >
+                <span className={styles.fsAddIcon}>{entry.icon}</span>
+                {entry.label}
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function Inspector({
+  block,
+  onContent,
+  onStyle,
+}: {
+  block: Block;
+  onContent: (patch: Record<string, unknown>) => void;
+  onStyle: (patch: Partial<BlockStyle>) => void;
+}) {
+  const noAlign = block.type === "marquee" || block.type === "navbar";
+  return (
+    <>
+      <div className={styles.fsGroup}>
+        <h3 className={styles.fsGroupTitle}>İçerik</h3>
+        <ContentFields block={block} onChange={onContent} />
+      </div>
+      {block.type === "spacer" ? (
+        <div className={styles.fsGroup}>
+          <h3 className={styles.fsGroupTitle}>Arka plan</h3>
+          <BackgroundFields style={block.style} onChange={onStyle} />
+        </div>
+      ) : (
+        <div className={styles.fsGroup}>
+          <h3 className={styles.fsGroupTitle}>Stil</h3>
+          <StyleFields
+            style={block.style}
+            onChange={onStyle}
+            align={!noAlign}
+            width={block.type !== "marquee"}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+function ContentFields({
+  block,
+  onChange,
+}: {
+  block: Block;
+  onChange: (patch: Record<string, unknown>) => void;
+}) {
+  switch (block.type) {
+    case "navbar":
+      return (
+        <>
+          <Control label="Logo metni">
+            <input
+              className={styles.fsInput}
+              value={block.logoText}
+              onChange={(e) => onChange({ logoText: e.target.value })}
+            />
+          </Control>
+          <Control label="Logo görseli (opsiyonel URL)">
+            <input
+              className={styles.fsInput}
+              value={block.logoImageUrl}
+              placeholder="https://… (boşsa metin gösterilir)"
+              onChange={(e) => onChange({ logoImageUrl: e.target.value })}
+            />
+          </Control>
+          <Control label="Logo bağlantısı">
+            <input
+              className={styles.fsInput}
+              value={block.logoHref}
+              onChange={(e) => onChange({ logoHref: e.target.value })}
+            />
+          </Control>
+          <Control label="Logo hizası">
+            <SegControl
+              value={block.logoAlign}
+              options={[
+                { value: "left", label: "Sol" },
+                { value: "center", label: "Orta" },
+                { value: "right", label: "Sağ" },
+              ]}
+              onChange={(v) => onChange({ logoAlign: v })}
+            />
+          </Control>
+          <Control label="Bağlantılar">
+            <NavLinksEditor
+              links={block.links}
+              onChange={(links) => onChange({ links })}
+            />
+          </Control>
+          <Control label="Bağlantı hizası">
+            <SegControl
+              value={block.linksAlign}
+              options={[
+                { value: "left", label: "Sol" },
+                { value: "center", label: "Orta" },
+                { value: "right", label: "Sağ" },
+              ]}
+              onChange={(v) => onChange({ linksAlign: v })}
+            />
+          </Control>
+          <Control label="Konumlandırma">
+            <SegControl
+              value={block.sticky ? "sticky" : "normal"}
+              options={[
+                { value: "normal", label: "Normal" },
+                { value: "sticky", label: "Yapışkan" },
+              ]}
+              onChange={(v) => onChange({ sticky: v === "sticky" })}
+            />
+          </Control>
+        </>
+      );
+
+    case "hero":
+      return (
+        <>
+          <Control label="Başlık">
+            <input
+              className={styles.fsInput}
+              value={block.heading}
+              onChange={(e) => onChange({ heading: e.target.value })}
+            />
+          </Control>
+          <Control label="Alt başlık">
+            <textarea
+              className={styles.fsTextarea}
+              rows={2}
+              value={block.subheading}
+              onChange={(e) => onChange({ subheading: e.target.value })}
+            />
+          </Control>
+          <div className={styles.fsRowGrid}>
+            <Control label="Buton metni">
+              <input
+                className={styles.fsInput}
+                value={block.buttonLabel}
+                onChange={(e) => onChange({ buttonLabel: e.target.value })}
+              />
+            </Control>
+            <Control label="Buton linki">
+              <input
+                className={styles.fsInput}
+                value={block.buttonUrl}
+                onChange={(e) => onChange({ buttonUrl: e.target.value })}
+              />
+            </Control>
+          </div>
+          <Control label="Buton rengi">
+            <ColorControl
+              value={block.buttonColor}
+              onChange={(v) => onChange({ buttonColor: v })}
+            />
+          </Control>
+        </>
+      );
+
+    case "heading":
+      return (
+        <>
+          <Control label="Başlık metni">
+            <input
+              className={styles.fsInput}
+              value={block.text}
+              onChange={(e) => onChange({ text: e.target.value })}
+            />
+          </Control>
+          <Control label="Seviye">
+            <select
+              className={styles.fsSelect}
+              value={block.level}
+              onChange={(e) => onChange({ level: Number(e.target.value) })}
+            >
+              <option value={1}>H1</option>
+              <option value={2}>H2</option>
+              <option value={3}>H3</option>
+            </select>
+          </Control>
+        </>
+      );
+
+    case "richText":
+      return (
+        <Control label="Metin (Markdown)">
+          <textarea
+            className={styles.fsTextarea}
+            rows={9}
+            value={block.markdown}
+            onChange={(e) => onChange({ markdown: e.target.value })}
+          />
+        </Control>
+      );
+
+    case "image":
+      return (
+        <>
+          <Control label="Görsel URL">
+            <input
+              className={styles.fsInput}
+              value={block.url}
+              placeholder="https://…"
+              onChange={(e) => onChange({ url: e.target.value })}
+            />
+          </Control>
+          <Control label="Alternatif metin (erişilebilirlik)">
+            <input
+              className={styles.fsInput}
+              value={block.alt}
+              onChange={(e) => onChange({ alt: e.target.value })}
+            />
+          </Control>
+          <Control label="Bağlantı (opsiyonel)">
+            <input
+              className={styles.fsInput}
+              value={block.link}
+              placeholder="Tıklanınca gidilecek adres"
+              onChange={(e) => onChange({ link: e.target.value })}
+            />
+          </Control>
+          <Control label="Açıklama (caption)">
+            <input
+              className={styles.fsInput}
+              value={block.caption}
+              onChange={(e) => onChange({ caption: e.target.value })}
+            />
+          </Control>
+          <div className={styles.fsRowGrid}>
+            <Control label="Genişlik (%)">
+              <input
+                className={styles.fsInput}
+                type="number"
+                value={block.width}
+                onChange={(e) => onChange({ width: e.target.value })}
+              />
+            </Control>
+            <Control label="Yükseklik (px, boş = otomatik)">
+              <input
+                className={styles.fsInput}
+                type="number"
+                value={block.height}
+                onChange={(e) => onChange({ height: e.target.value })}
+              />
+            </Control>
+          </div>
+          <div className={styles.fsRowGrid}>
+            <Control label="Köşe yuvarlaklığı (px)">
+              <input
+                className={styles.fsInput}
+                type="number"
+                value={block.radius}
+                onChange={(e) => onChange({ radius: e.target.value })}
+              />
+            </Control>
+            <Control label="Sığdırma (yükseklik varsa)">
+              <select
+                className={styles.fsSelect}
+                value={block.fit}
+                onChange={(e) => onChange({ fit: e.target.value })}
+              >
+                <option value="cover">Doldur (kırparak)</option>
+                <option value="contain">Sığdır (tümü görünür)</option>
+                <option value="fill">Esnet</option>
+              </select>
+            </Control>
+          </div>
+        </>
+      );
+
+    case "button":
+      return (
+        <>
+          <div className={styles.fsRowGrid}>
+            <Control label="Metin">
+              <input
+                className={styles.fsInput}
+                value={block.label}
+                onChange={(e) => onChange({ label: e.target.value })}
+              />
+            </Control>
+            <Control label="Link">
+              <input
+                className={styles.fsInput}
+                value={block.url}
+                onChange={(e) => onChange({ url: e.target.value })}
+              />
+            </Control>
+          </div>
+          <Control label="Buton rengi">
+            <ColorControl
+              value={block.buttonColor}
+              onChange={(v) => onChange({ buttonColor: v })}
+            />
+          </Control>
+        </>
+      );
+
+    case "quote":
+      return (
+        <>
+          <Control label="Alıntı">
+            <textarea
+              className={styles.fsTextarea}
+              rows={3}
+              value={block.text}
+              onChange={(e) => onChange({ text: e.target.value })}
+            />
+          </Control>
+          <Control label="Kaynak / yazar">
+            <input
+              className={styles.fsInput}
+              value={block.author}
+              onChange={(e) => onChange({ author: e.target.value })}
+            />
+          </Control>
+        </>
+      );
+
+    case "banner":
+      return (
+        <>
+          <Control label="Metin">
+            <input
+              className={styles.fsInput}
+              value={block.text}
+              onChange={(e) => onChange({ text: e.target.value })}
+            />
+          </Control>
+          <Control label="Link (opsiyonel)">
+            <input
+              className={styles.fsInput}
+              value={block.url}
+              onChange={(e) => onChange({ url: e.target.value })}
+            />
+          </Control>
+        </>
+      );
+
+    case "marquee":
+      return (
+        <>
+          <Control label="Kayan metin">
+            <input
+              className={styles.fsInput}
+              value={block.text}
+              onChange={(e) => onChange({ text: e.target.value })}
+            />
+          </Control>
+          <div className={styles.fsRowGrid}>
+            <Control label="Yön">
+              <select
+                className={styles.fsSelect}
+                value={block.direction}
+                onChange={(e) => onChange({ direction: e.target.value })}
+              >
+                <option value="left">Sola</option>
+                <option value="right">Sağa</option>
+              </select>
+            </Control>
+            <Control label="Hız (sn, düşük = hızlı)">
+              <input
+                className={styles.fsInput}
+                type="number"
+                value={block.speed}
+                onChange={(e) => onChange({ speed: e.target.value })}
+              />
+            </Control>
+          </div>
+          <div className={styles.fsRowGrid}>
+            <Control label="Tekrar (kopya sayısı)">
+              <input
+                className={styles.fsInput}
+                type="number"
+                value={block.repeat}
+                onChange={(e) => onChange({ repeat: e.target.value })}
+              />
+            </Control>
+            <Control label="Kopyalar arası boşluk (px)">
+              <input
+                className={styles.fsInput}
+                type="number"
+                value={block.gap}
+                onChange={(e) => onChange({ gap: e.target.value })}
+              />
+            </Control>
+          </div>
+        </>
+      );
+
+    case "video":
+      return (
+        <Control label="Video URL (YouTube veya embed)">
+          <input
+            className={styles.fsInput}
+            value={block.url}
+            placeholder="https://youtube.com/watch?v=…"
+            onChange={(e) => onChange({ url: e.target.value })}
+          />
+        </Control>
+      );
+
+    case "spacer":
+      return (
+        <Control label="Yükseklik (px)">
+          <input
+            className={styles.fsInput}
+            type="number"
+            value={block.height}
+            onChange={(e) => onChange({ height: e.target.value })}
+          />
+        </Control>
+      );
+  }
+}
+
+function StyleFields({
+  style,
+  onChange,
+  align = true,
+  width = true,
+}: {
+  style: BlockStyle;
+  onChange: (patch: Partial<BlockStyle>) => void;
+  align?: boolean;
+  width?: boolean;
+}) {
+  return (
+    <>
+      {align ? (
+        <Control label="Hizalama">
+          <SegControl
+            value={style.textAlign}
+            options={[
+              { value: "left", label: "Sola" },
+              { value: "center", label: "Orta" },
+              { value: "right", label: "Sağa" },
+            ]}
+            onChange={(v) => onChange({ textAlign: v })}
+          />
+        </Control>
+      ) : null}
+
+      <BackgroundFields style={style} onChange={onChange} />
+
+      <Control label="Yazı rengi">
+        <ColorControl
+          value={style.textColor}
+          onChange={(v) => onChange({ textColor: v })}
+        />
+      </Control>
+      <Control label="Font">
+        <select
+          className={styles.fsSelect}
+          value={style.fontFamily}
+          onChange={(e) => onChange({ fontFamily: e.target.value })}
+        >
+          {FONT_OPTIONS.map((option) => (
+            <option key={option.label} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </Control>
+      <div className={styles.fsRowGrid}>
+        <Control label="Yazı boyutu (px)">
+          <input
+            className={styles.fsInput}
+            type="number"
+            placeholder="otomatik"
+            value={style.fontSize}
+            onChange={(e) => onChange({ fontSize: e.target.value })}
+          />
+        </Control>
+        <Control label="Kalınlık">
+          <select
+            className={styles.fsSelect}
+            value={style.fontWeight}
+            onChange={(e) => onChange({ fontWeight: e.target.value })}
+          >
+            {FONT_WEIGHT_OPTIONS.map((option) => (
+              <option key={option.label} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </Control>
+      </div>
+      {width ? (
+        <div className={styles.fsRowGrid}>
+          <Control label="Dikey boşluk (px)">
+            <input
+              className={styles.fsInput}
+              type="number"
+              value={style.paddingY}
+              onChange={(e) => onChange({ paddingY: e.target.value })}
+            />
+          </Control>
+          <Control label="Genişlik">
+            <select
+              className={styles.fsSelect}
+              value={style.maxWidth}
+              onChange={(e) => onChange({ maxWidth: e.target.value })}
+            >
+              {MAX_WIDTH_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </Control>
+        </div>
+      ) : (
+        <Control label="Dikey boşluk (px)">
+          <input
+            className={styles.fsInput}
+            type="number"
+            value={style.paddingY}
+            onChange={(e) => onChange({ paddingY: e.target.value })}
+          />
+        </Control>
+      )}
+    </>
+  );
+}
+
+function BackgroundFields({
+  style,
+  onChange,
+}: {
+  style: BlockStyle;
+  onChange: (patch: Partial<BlockStyle>) => void;
+}) {
+  return (
+    <>
+      <Control label="Arka plan tipi">
+        <SegControl
+          value={style.bgType}
+          options={[
+            { value: "solid", label: "Düz" },
+            { value: "gradient", label: "Degrade" },
+          ]}
+          onChange={(v) => onChange({ bgType: v as BackgroundType })}
+        />
+      </Control>
+
+      {style.bgType === "solid" ? (
+        <Control label="Arka plan rengi">
+          <ColorControl
+            value={style.background}
+            onChange={(v) => onChange({ background: v })}
+          />
+        </Control>
+      ) : (
+        <>
+          <div className={styles.fsRowGrid}>
+            <Control label="Arka plan başlangıç">
+              <ColorControl
+                value={style.gradientFrom}
+                onChange={(v) => onChange({ gradientFrom: v })}
+              />
+            </Control>
+            <Control label="Arka plan bitiş">
+              <ColorControl
+                value={style.gradientTo}
+                onChange={(v) => onChange({ gradientTo: v })}
+              />
+            </Control>
+          </div>
+          <Control label="Arka plan açısı (derece)">
+            <input
+              className={styles.fsInput}
+              type="number"
+              value={style.gradientAngle}
+              onChange={(e) => onChange({ gradientAngle: e.target.value })}
+            />
+          </Control>
+          <Control label="Arka plan hazır degradeler">
+            <div className={styles.fsPresets}>
+              {GRADIENT_PRESETS.map((preset) => (
+                <button
+                  key={preset.label}
+                  type="button"
+                  className={styles.fsPreset}
+                  title={preset.label}
+                  style={{
+                    background: `linear-gradient(${preset.angle}deg, ${preset.from}, ${preset.to})`,
+                  }}
+                  onClick={() =>
+                    onChange({
+                      gradientFrom: preset.from,
+                      gradientTo: preset.to,
+                      gradientAngle: preset.angle,
+                    })
+                  }
+                />
+              ))}
+            </div>
+          </Control>
+        </>
+      )}
+    </>
+  );
+}
+
+/* ---------------- Small controls ---------------- */
+
+const MAX_WIDTH_OPTIONS = [
+  { label: "Dar", value: "640" },
+  { label: "Normal", value: "720" },
+  { label: "Geniş", value: "960" },
+  { label: "Tam genişlik", value: "full" },
+];
+
+function NavLinksEditor({
+  links,
+  onChange,
+}: {
+  links: NavLink[];
+  onChange: (links: NavLink[]) => void;
+}) {
+  function update(index: number, patch: Partial<NavLink>) {
+    onChange(links.map((link, i) => (i === index ? { ...link, ...patch } : link)));
+  }
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      {links.map((link, index) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: nav links edited in place
+          key={index}
+          style={{ display: "flex", gap: 6, alignItems: "center" }}
+        >
+          <input
+            className={styles.fsInput}
+            value={link.label}
+            placeholder="Etiket"
+            onChange={(event) => update(index, { label: event.target.value })}
+          />
+          <input
+            className={styles.fsInput}
+            value={link.url}
+            placeholder="URL"
+            onChange={(event) => update(index, { url: event.target.value })}
+          />
+          <button
+            type="button"
+            className={styles.fsMiniBtn}
+            onClick={() => onChange(links.filter((_, i) => i !== index))}
+            title="Kaldır"
+          >
+            <IconTrash width={14} height={14} />
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        className={styles.fsAddCard}
+        onClick={() => onChange([...links, { label: "Yeni bağlantı", url: "#" }])}
+      >
+        + Bağlantı ekle
+      </button>
+    </div>
+  );
+}
+
+function Control({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className={styles.fsControl}>
+      <span className={styles.fsControlLabel}>{label}</span>
+      {children}
+    </div>
+  );
+}
+
+function SegControl<T extends string>({
+  value,
+  options,
+  onChange,
+}: {
+  value: T;
+  options: { value: T; label: string }[];
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className={styles.fsSeg}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          className={`${styles.fsSegBtn} ${
+            value === option.value ? styles.fsSegBtnActive : ""
+          }`}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function ColorControl({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className={styles.fsColorRow}>
+      <input
+        type="color"
+        className={styles.fsSwatch}
+        value={value || "#000000"}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <input
+        className={styles.fsInput}
+        value={value}
+        placeholder="otomatik"
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <button
+        type="button"
+        className={styles.fsClearBtn}
+        onClick={() => onChange("")}
+        title="Sıfırla"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
+const TURKISH_CHAR_MAP: Record<string, string> = {
+  ç: "c",
+  ğ: "g",
+  ı: "i",
+  ö: "o",
+  ş: "s",
+  ü: "u",
+};
+
+function slugify(input: string): string {
+  return (
+    input
+      .toLowerCase()
+      .replace(/[çğıöşü]/g, (char) => TURKISH_CHAR_MAP[char] ?? char)
+      .trim()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "untitled"
+  );
+}