@acms-subir/core 0.0.1

package/src/components/DesignManager.tsx

@@ -0,0 +1,542 @@
+import { useEffect, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+import type { Settings } from '../lib/schema';
+import { ImagePicker } from './editor/ImagePicker';
+
+// Design screen: pick a code-first theme (src/themes/<slug>/), layer sparse
+// token overrides on top (saved to settings.designOverrides — the theme files
+// are never written to), set the site logo, and export the effective design
+// as a committable theme.json.
+
+type SaveState = 'saved' | 'saving' | 'error';
+
+interface ThemeInfo {
+  slug: string;
+  name: string;
+  description: string;
+  tokens: Record<string, string | number>;
+  post: Record<string, string | boolean>;
+  hasHome: boolean;
+}
+
+// post-page toggles: designOverrides key + which theme default backs it
+const POST_TOGGLE_ROWS: { key: string; field: string; label: string; hint: string }[] = [
+  { key: 'postDate', field: 'showDate', label: 'Date', hint: 'Publish date in the post header' },
+  { key: 'postReadingTime', field: 'showReadingTime', label: 'Reading time', hint: '“4 min read” next to the date' },
+  { key: 'postByline', field: 'byline', label: 'Author byline', hint: '“by Name” in the post header' },
+  { key: 'postAuthorCard', field: 'authorCard', label: 'Author card', hint: 'Avatar + bio block under the post' },
+  { key: 'postShare', field: 'share', label: 'Share buttons', hint: 'X, LinkedIn and copy-link' },
+  { key: 'postRelated', field: 'related', label: 'Related reading', hint: 'Three related posts at the bottom' },
+];
+const COVER_LABEL: Record<string, string> = { normal: 'Content width', full: 'Full bleed', overlay: 'Overlay (title on image)', hidden: 'Hidden' };
+interface Pairing { key: string; label: string; headingFont: string; bodyFont: string; googleFonts: string }
+
+interface Props {
+  settings: Settings;
+  themes: ThemeInfo[];
+  pairings: Pairing[];
+  unsplashEnabled: boolean;
+  /** public path of the newest published post, or null when nothing is published */
+  postPreviewPath: string | null;
+}
+
+const COLOR_FIELDS: { key: string; label: string; hint: string }[] = [
+  { key: 'bg', label: 'Background', hint: 'Page background' },
+  { key: 'ink', label: 'Text', hint: 'Body and heading text' },
+  { key: 'accent', label: 'Accent', hint: 'Links and buttons' },
+  { key: 'muted', label: 'Muted text', hint: 'Bylines, captions, metadata' },
+  { key: 'line', label: 'Borders', hint: 'Dividers and card borders' },
+  { key: 'panel', label: 'Panels', hint: 'Cards and link buttons' },
+  { key: 'soft', label: 'Soft fill', hint: 'Tag pills, inline code, table heads' },
+];
+const WIDTHS = [
+  { label: 'Narrow', px: 640 },
+  { label: 'Classic', px: 760 },
+  { label: 'Wide', px: 920 },
+  { label: 'Extra wide', px: 1140 },
+];
+
+// preview device sizes: the iframe renders at the real device width and is
+// scaled down to fit the panel, so responsive breakpoints actually kick in
+const DEVICES = [
+  {
+    key: 'mobile',
+    label: 'Mobile · 390px',
+    width: 390,
+    icon: <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="4.75" y="1.75" width="6.5" height="12.5" rx="1.5" /><path d="M7 12.25h2" /></svg>,
+  },
+  {
+    key: 'tablet',
+    label: 'Tablet · 768px',
+    width: 768,
+    icon: <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2.75" y="1.75" width="10.5" height="12.5" rx="1.5" /><path d="M6.5 12.25h3" /></svg>,
+  },
+  {
+    key: 'desktop',
+    label: 'Desktop · 1280px',
+    width: 1280,
+    icon: <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="1.75" y="2.75" width="12.5" height="8.5" rx="1.5" /><path d="M5.5 14.25h5M8 11.5v2.5" /></svg>,
+  },
+] as const;
+type DeviceKey = (typeof DEVICES)[number]['key'];
+
+export default function DesignManager({ settings, themes, pairings, unsplashEnabled, postPreviewPath }: Props) {
+  const [activeTheme, setActiveTheme] = useState(settings.activeTheme || 'ink');
+  const [overrides, setOverrides] = useState<Record<string, unknown>>(
+    (settings.designOverrides as Record<string, unknown>) ?? {}
+  );
+  const [siteLogo, setSiteLogo] = useState(settings.siteLogo);
+  const [siteFavicon, setSiteFavicon] = useState(settings.siteFavicon);
+  const [siteCover, setSiteCover] = useState(settings.siteCover);
+  const [saveState, setSaveState] = useState<SaveState>('saved');
+  const [logoPickerOpen, setLogoPickerOpen] = useState(false);
+  const [faviconPickerOpen, setFaviconPickerOpen] = useState(false);
+  const [coverPickerOpen, setCoverPickerOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [tick, setTick] = useState(0);
+  const [previewPage, setPreviewPage] = useState<'home' | 'post'>('home');
+  const [previewDevice, setPreviewDevice] = useState<DeviceKey>('mobile');
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [frameBox, setFrameBox] = useState({ w: 0, h: 0 });
+  useEffect(() => {
+    const el = frameRef.current;
+    if (!el) return;
+    const measure = () => setFrameBox({ w: el.clientWidth, h: el.clientHeight });
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const latest = useRef({ activeTheme, overrides, siteLogo, siteFavicon, siteCover });
+  latest.current = { activeTheme, overrides, siteLogo, siteFavicon, siteCover };
+
+  const theme = themes.find((t) => t.slug === activeTheme) ?? themes[0];
+
+  const scheduleSave = () => {
+    setSaveState('saving');
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(async () => {
+      const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
+      const { error } = await actions.settings.update({
+        activeTheme,
+        designOverrides: overrides,
+        siteLogo,
+        siteFavicon,
+        siteCover,
+      });
+      if (error) { setSaveState('error'); return; }
+      setSaveState('saved');
+      setTick((t) => t + 1);
+    }, 500);
+  };
+
+  const setOv = (key: string, value: unknown) => {
+    setOverrides((o) => ({ ...o, [key]: value }));
+    scheduleSave();
+  };
+  const clearOv = (key: string) => {
+    setOverrides((o) => { const n = { ...o }; delete n[key]; return n; });
+    scheduleSave();
+  };
+  const pickTheme = (slug: string) => {
+    setActiveTheme(slug);
+    scheduleSave();
+  };
+
+  const effective = (key: string): string | number =>
+    (overrides[key] as string | number | undefined) ?? theme.tokens[key];
+
+  const copyThemeJson = async () => {
+    const tokens: Record<string, string | number> = { ...theme.tokens };
+    for (const f of [...COLOR_FIELDS.map((c) => c.key), 'width']) {
+      const v = overrides[f];
+      if (v !== undefined && v !== null && v !== '') tokens[f] = v as string | number;
+    }
+    const pairing = pairings.find((p) => p.key === overrides.fontPairing);
+    if (pairing) {
+      tokens.headingFont = pairing.headingFont;
+      tokens.bodyFont = pairing.bodyFont;
+      tokens.googleFonts = pairing.googleFonts;
+    }
+    const json = {
+      name: `${theme.name} (customized)`,
+      description: `Exported from the Design screen — drop into src/themes/<slug>/theme.json.`,
+      tokens,
+    };
+    await navigator.clipboard.writeText(JSON.stringify(json, null, 2));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  };
+
+  const overrideCount = Object.keys(overrides).filter((k) => overrides[k] !== undefined && overrides[k] !== '').length;
+
+  // "you changed it · Reset to theme" hint line, per the plan mock
+  const overriddenHint = (themeValue: string | number, key: string) => (
+    <>
+      Theme says {String(themeValue)} — you changed it ·{' '}
+      <button className="dm-resetlink" type="button" onClick={() => clearOv(key)}>Reset to theme</button>
+    </>
+  );
+
+  return (
+    <div className="dm-layout">
+      <div className="dm-controls">
+        <div className="card card-pad">
+          <div className="dm-cardhead">
+            <p className="dm-sub">
+              Active theme: <b>{theme.name}</b> · loaded from <code>src/themes/{theme.slug}/</code> —
+              values below override it. Overrides apply instantly.
+            </p>
+            <div className="dm-headactions">
+              {overrideCount > 0 && (
+                <button className="btn sm ghost" type="button" onClick={() => { setOverrides({}); scheduleSave(); }}>
+                  Reset all
+                </button>
+              )}
+              <span className={`lm-savestate ${saveState}`}>
+                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+              </span>
+            </div>
+          </div>
+
+          <div className="dm-themes">
+            {themes.map((t) => (
+              <button
+                key={t.slug}
+                type="button"
+                className={`dm-theme ${t.slug === activeTheme ? 'active' : ''}`}
+                title={t.description}
+                onClick={() => pickTheme(t.slug)}
+              >
+                <span
+                  className="dm-swatch"
+                  style={{ background: String(t.tokens.bg), borderColor: String(t.tokens.line) }}
+                >
+                  <span style={{ color: String(t.tokens.ink), fontFamily: String(t.tokens.headingFont) }}>Aa</span>
+                  <i style={{ background: String(t.tokens.accent) }} />
+                </span>
+                <span className="dm-theme-name">{t.name}</span>
+                <span className="dm-theme-desc">{t.description.split(' — ')[0]}</span>
+                {t.hasHome && <span className="dm-chip">coded homepage</span>}
+              </button>
+            ))}
+          </div>
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>Logo</span>
+              <small>Shown in the header instead of the site title</small>
+            </div>
+            <div className="dm-ctl">
+              {siteLogo && <img className="dm-logo" src={siteLogo} alt="Logo" />}
+              <button className="btn sm" type="button" onClick={() => setLogoPickerOpen(true)}>
+                {siteLogo ? 'Replace…' : 'Upload…'}
+              </button>
+              {siteLogo && (
+                <button className="btn sm ghost" type="button" onClick={() => { setSiteLogo(''); scheduleSave(); }}>
+                  Remove
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>Favicon</span>
+              <small>The browser-tab icon — square images work best</small>
+            </div>
+            <div className="dm-ctl">
+              {siteFavicon && <img className="dm-logo" src={siteFavicon} alt="Favicon" style={{ width: 24, height: 24, objectFit: 'contain' }} />}
+              <button className="btn sm" type="button" onClick={() => setFaviconPickerOpen(true)}>
+                {siteFavicon ? 'Replace…' : 'Upload…'}
+              </button>
+              {siteFavicon && (
+                <button className="btn sm ghost" type="button" onClick={() => { setSiteFavicon(''); scheduleSave(); }}>
+                  Remove
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>Share image</span>
+              <small>Default social-preview image for pages and posts without a cover</small>
+            </div>
+            <div className="dm-ctl">
+              {siteCover && <img className="dm-logo" src={siteCover} alt="Share image" />}
+              <button className="btn sm" type="button" onClick={() => setCoverPickerOpen(true)}>
+                {siteCover ? 'Replace…' : 'Upload…'}
+              </button>
+              {siteCover && (
+                <button className="btn sm ghost" type="button" onClick={() => { setSiteCover(''); scheduleSave(); }}>
+                  Remove
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>
+                Fonts
+                {overrides.fontPairing !== undefined && <em className="dm-ovr">override</em>}
+              </span>
+              <small>Heading + body pairing — the theme sets its own by default</small>
+            </div>
+            <div className="dm-ctl">
+              <select
+                className="lm-select"
+                value={String(overrides.fontPairing ?? '')}
+                onChange={(e) => (e.target.value ? setOv('fontPairing', e.target.value) : clearOv('fontPairing'))}
+              >
+                <option value="">Theme default</option>
+                {pairings.map((p) => <option key={p.key} value={p.key}>{p.label}</option>)}
+              </select>
+            </div>
+          </div>
+
+          {COLOR_FIELDS.map((f) => {
+            const ov = overrides[f.key] !== undefined;
+            return (
+              <div className="dm-row" key={f.key}>
+                <div className="dm-lab">
+                  <span>
+                    {f.label}
+                    {ov && <em className="dm-ovr">override</em>}
+                  </span>
+                  <small>{ov ? overriddenHint(theme.tokens[f.key], f.key) : f.hint}</small>
+                </div>
+                <div className="dm-ctl">
+                  <input
+                    type="color"
+                    value={String(effective(f.key))}
+                    onChange={(e) => setOv(f.key, e.target.value)}
+                  />
+                  <input
+                    className="dm-hex"
+                    type="text"
+                    value={String(effective(f.key))}
+                    onChange={(e) => { if (/^#[0-9a-fA-F]{6}$/.test(e.target.value)) setOv(f.key, e.target.value); }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>Content width{overrides.width !== undefined && <em className="dm-ovr">override</em>}</span>
+              <small>
+                {overrides.width !== undefined
+                  ? overriddenHint(`${Number(theme.tokens.width)}px`, 'width')
+                  : `Desktop max width of the whole layout — theme default is ${Number(theme.tokens.width)}px`}
+              </small>
+            </div>
+            <div className="dm-ctl">
+              <div className="dm-width">
+                {WIDTHS.map((w) => (
+                  <button
+                    key={w.px}
+                    type="button"
+                    className={`dm-width-chip ${Number(effective('width')) === w.px ? 'active' : ''}`}
+                    title={`${w.px}px`}
+                    onClick={() => setOv('width', w.px)}
+                  >
+                    {w.label}
+                  </button>
+                ))}
+                <input
+                  type="number"
+                  min={520}
+                  max={1600}
+                  step={10}
+                  value={Number(effective('width'))}
+                  onChange={(e) => {
+                    const v = Number(e.target.value);
+                    if (v >= 520 && v <= 1600) setOv('width', v);
+                  }}
+                />
+                <span className="dm-width-unit">px</span>
+              </div>
+            </div>
+          </div>
+
+          {theme.hasHome && (
+            <div className="dm-row">
+              <div className="dm-lab">
+                <span>Homepage</span>
+                <small>Theme ships a coded template — or use your content page</small>
+              </div>
+              <div className="dm-ctl">
+                <select
+                  className="lm-select"
+                  value={overrides.homeMode === 'content' ? 'content' : 'auto'}
+                  onChange={(e) => (e.target.value === 'content' ? setOv('homeMode', 'content') : clearOv('homeMode'))}
+                >
+                  <option value="auto">Coded · {theme.slug}/home.astro</option>
+                  <option value="content">My content page (marked “home”)</option>
+                </select>
+              </div>
+            </div>
+          )}
+
+          <p className="card-title dm-group">Posts</p>
+          <p className="dm-grouphint">
+            How individual posts render. The theme sets the defaults; anything you change here overrides it site-wide.
+          </p>
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>Feature image{overrides.postCover !== undefined && <em className="dm-ovr">override</em>}</span>
+              <small>The post's cover at the top of the page</small>
+            </div>
+            <div className="dm-ctl">
+              <select
+                className="lm-select"
+                value={String(overrides.postCover ?? '')}
+                onChange={(e) => (e.target.value ? setOv('postCover', e.target.value) : clearOv('postCover'))}
+              >
+                <option value="">Theme default ({COVER_LABEL[String(theme.post.cover)] ?? 'Content width'})</option>
+                <option value="normal">Content width</option>
+                <option value="full">Full bleed</option>
+                <option value="overlay">Overlay — title & info on the image</option>
+                <option value="hidden">Hidden</option>
+              </select>
+            </div>
+          </div>
+
+          {POST_TOGGLE_ROWS.map((r) => (
+            <div className="dm-row" key={r.key}>
+              <div className="dm-lab">
+                <span>{r.label}{overrides[r.key] !== undefined && <em className="dm-ovr">override</em>}</span>
+                <small>{r.hint}</small>
+              </div>
+              <div className="dm-ctl">
+                <select
+                  className="lm-select"
+                  value={String(overrides[r.key] ?? '')}
+                  onChange={(e) => (e.target.value ? setOv(r.key, e.target.value) : clearOv(r.key))}
+                >
+                  <option value="">Theme default ({theme.post[r.field] === false ? 'Hidden' : 'Shown'})</option>
+                  <option value="show">Show</option>
+                  <option value="hide">Hide</option>
+                </select>
+              </div>
+            </div>
+          ))}
+
+          <div className="dm-row">
+            <div className="dm-lab">
+              <span>Export</span>
+              <small>Effective design (theme + your overrides) as a committable <code>theme.json</code></small>
+            </div>
+            <div className="dm-ctl">
+              <button className="btn sm" type="button" onClick={copyThemeJson}>
+                {copied ? 'Copied ✓' : 'Copy as theme.json'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="dm-preview">
+        <div className="dm-preview-bar">
+          <span className="lm-preview-label">Preview</span>
+          <div className="dm-preview-actions">
+            <div className="dm-ptabs">
+              {DEVICES.map((d) => (
+                <button
+                  key={d.key}
+                  type="button"
+                  title={d.label}
+                  aria-label={d.label}
+                  className={`dm-devbtn ${previewDevice === d.key ? 'active' : ''}`}
+                  onClick={() => setPreviewDevice(d.key)}
+                >
+                  {d.icon}
+                </button>
+              ))}
+            </div>
+            {postPreviewPath && (
+              <div className="dm-ptabs">
+                <button
+                  type="button"
+                  className={previewPage === 'home' ? 'active' : ''}
+                  onClick={() => setPreviewPage('home')}
+                >
+                  Home
+                </button>
+                <button
+                  type="button"
+                  className={previewPage === 'post' ? 'active' : ''}
+                  onClick={() => setPreviewPage('post')}
+                >
+                  Post
+                </button>
+              </div>
+            )}
+            <a
+              className="btn sm ghost"
+              href={previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}
+              target="_blank"
+              rel="noopener"
+            >
+              Open ↗
+            </a>
+          </div>
+        </div>
+        {(() => {
+          const device = DEVICES.find((d) => d.key === previewDevice) ?? DEVICES[0];
+          const scale = frameBox.w ? Math.min(1, frameBox.w / device.width) : 1;
+          return (
+            <div className="dm-frame" ref={frameRef}>
+              <iframe
+                key={`${previewPage}-${tick}`}
+                src={`${previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}?design=${tick}`}
+                title="Site preview"
+                style={{
+                  width: device.width,
+                  height: frameBox.h ? frameBox.h / scale : '100%',
+                  transform: `scale(${scale})`,
+                }}
+              />
+            </div>
+          );
+        })()}
+      </div>
+
+      <ImagePicker
+        open={logoPickerOpen}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setLogoPickerOpen(false)}
+        onSelect={(img) => {
+          setSiteLogo(img.src);
+          setLogoPickerOpen(false);
+          scheduleSave();
+        }}
+      />
+      <ImagePicker
+        open={faviconPickerOpen}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setFaviconPickerOpen(false)}
+        onSelect={(img) => {
+          setSiteFavicon(img.src);
+          setFaviconPickerOpen(false);
+          scheduleSave();
+        }}
+      />
+      <ImagePicker
+        open={coverPickerOpen}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setCoverPickerOpen(false)}
+        onSelect={(img) => {
+          setSiteCover(img.src);
+          setCoverPickerOpen(false);
+          scheduleSave();
+        }}
+      />
+    </div>
+  );
+}