modern-cms 1.0.0

package/template/apps/web/components/builder/Canvas.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+import type { NavItem, NodeStyle, PageNode, SiteTheme } from "@pgcms/shared";
+import { SiteDataContext } from "@/components/theme/SiteDataContext";
+import { themeToCssVars } from "@/components/theme/ThemeProvider";
+import { DroppableChildren } from "./DroppableChildren";
+import { BuilderCanvasNode } from "./BuilderCanvasNode";
+import { CanvasOverlayContext } from "./CanvasOverlayContext";
+
+export function Canvas({
+  tree,
+  theme,
+  navItems,
+  selectedId,
+  onSelect,
+  onDelete,
+  onDuplicate,
+  onToggleHidden,
+  onChangeStyle,
+  onResizeGridTrack,
+}: {
+  tree: PageNode;
+  theme: SiteTheme;
+  navItems: NavItem[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+  onDuplicate: (id: string) => void;
+  onToggleHidden: (id: string) => void;
+  onChangeStyle: (id: string, style: NodeStyle) => void;
+  onResizeGridTrack?: (gridId: string, axis: "column" | "row", index: number, size: string) => void;
+}) {
+  const [overlayEl, setOverlayEl] = useState<HTMLDivElement | null>(null);
+
+  return (
+    <div
+      className="flex-1 overflow-y-auto bg-slate-100"
+      onClick={() => onSelect("")}
+      // Real content (Logo, Nav Links, Buttons, CTA, and now linkable Containers/Columns)
+      // renders real <a>/<Link> elements straight from the same components used on the
+      // live site. A capture-phase preventDefault runs before Next.js's Link ever gets
+      // to its own bubble-phase click handler (which checks defaultPrevented and bails
+      // out), so clicking one here selects it for editing instead of navigating away.
+      onClickCapture={(e) => e.preventDefault()}
+    >
+      <div
+        className="relative isolate mx-auto bg-white min-h-full shadow-sm"
+        style={{ ...themeToCssVars(theme), fontFamily: "var(--theme-body-font)" }}
+      >
+        <SiteDataContext.Provider value={{ theme, navItems }}>
+          <CanvasOverlayContext.Provider value={overlayEl}>
+            <DroppableChildren parentId={tree.id} childIds={tree.children.map((c) => c.id)}>
+              {tree.children.map((child) => (
+                <BuilderCanvasNode
+                  key={child.id}
+                  node={child}
+                  selectedId={selectedId}
+                  onSelect={onSelect}
+                  onDelete={onDelete}
+                  onDuplicate={onDuplicate}
+                  onToggleHidden={onToggleHidden}
+                  onChangeStyle={onChangeStyle}
+                  onResizeGridTrack={onResizeGridTrack}
+                />
+              ))}
+            </DroppableChildren>
+          </CanvasOverlayContext.Provider>
+        </SiteDataContext.Provider>
+        {/* Toolbar chips portal in here — a flat layer scrolling with the content,
+            immune to any ancestor's compositing/stacking-context quirks. */}
+        <div ref={setOverlayEl} className="absolute inset-0 z-40 pointer-events-none" />
+      </div>
+    </div>
+  );
+}

package/template/apps/web/components/builder/CanvasOverlayContext.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+/**
+ * The scrollable canvas content area that floating toolbar chips portal into.
+ *
+ * Nesting a `position: absolute` toolbar deep inside the node tree isn't safe here:
+ * every node's wrapper carries dnd-kit's `transition`/`transform` styling for drag
+ * animation, and Chromium promotes elements like that to their own compositing layer
+ * whenever they're present — even at rest. That traps a nested toolbar's z-index
+ * inside its ancestor's layer instead of letting it win against sibling content
+ * elsewhere in the header/container (confirmed via document.elementFromPoint showing
+ * an unrelated ancestor div swallowing clicks meant for a deeply nested button).
+ * Portaling into one flat layer that sits alongside the scrollable content sidesteps
+ * the whole class of stacking bugs.
+ */
+export const CanvasOverlayContext = createContext<HTMLDivElement | null>(null);
+
+export function useCanvasOverlay() {
+  return useContext(CanvasOverlayContext);
+}

package/template/apps/web/components/builder/ColorPickerField.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { HexAlphaColorPicker } from "react-colorful";
+
+export function ColorPickerField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string | undefined;
+  onChange: (value: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-1 relative">
+      <label className="text-xs font-medium text-slate-600">{label}</label>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          className="w-8 h-8 rounded border shrink-0"
+          style={{ backgroundColor: value || "#ffffff" }}
+        />
+        <input
+          value={value ?? ""}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="transparent"
+          className="flex-1 border rounded-md px-2 py-1.5 text-sm"
+        />
+      </div>
+      {open && (
+        <div className="absolute z-40 mt-1 bg-white border rounded-md shadow-lg p-2">
+          <HexAlphaColorPicker color={value || "#ffffff"} onChange={onChange} />
+          <button
+            className="text-xs text-slate-500 mt-2 w-full text-center"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/template/apps/web/components/builder/DroppableChildren.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import clsx from "clsx";
+
+export function DroppableChildren({
+  parentId,
+  childIds,
+  children,
+  transparent = false,
+}: {
+  parentId: string;
+  childIds: string[];
+  children: React.ReactNode;
+  /**
+   * When true and non-empty, the wrapper renders with `display: contents` so its
+   * children (e.g. a Container's Column nodes) become direct layout children of
+   * whatever CSS grid/flex the surrounding section component declares — otherwise
+   * this wrapper div is the grid/flex's only item and everything collapses into one
+   * cell. Left opaque while empty so it stays a real, measurable drop target (a
+   * `display: contents` element has no box for dnd-kit to hit-test against).
+   */
+  transparent?: boolean;
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `dropzone:${parentId}`,
+    data: { type: "container", parentId },
+  });
+
+  const isEmpty = childIds.length === 0;
+  const useTransparent = transparent && !isEmpty;
+
+  return (
+    <SortableContext items={childIds} strategy={verticalListSortingStrategy}>
+      <div
+        ref={setNodeRef}
+        style={useTransparent ? { display: "contents" } : undefined}
+        className={clsx(!useTransparent && "min-h-[48px]", !useTransparent && isOver && "bg-blue-50/60")}
+      >
+        {isEmpty && (
+          <div className="text-xs text-slate-400 border border-dashed rounded p-6 text-center m-2">
+            Drop components here
+          </div>
+        )}
+        {children}
+      </div>
+    </SortableContext>
+  );
+}

package/template/apps/web/components/builder/FieldRenderer.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, Video as VideoIcon } from "lucide-react";
+import type { FieldDescriptor } from "@pgcms/shared";
+import { RichTextEditor } from "./RichTextEditor";
+import { MediaPickerModal } from "./MediaPickerModal";
+import { ColorPickerField } from "./ColorPickerField";
+
+export function FieldRenderer({
+  field,
+  value,
+  onChange,
+}: {
+  field: FieldDescriptor;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  switch (field.type) {
+    case "text":
+      return (
+        <LabeledField label={field.label}>
+          <input
+            value={(value as string) ?? ""}
+            placeholder={field.placeholder}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-full border rounded-md px-2 py-1.5 text-sm"
+          />
+        </LabeledField>
+      );
+    case "textarea":
+      return (
+        <LabeledField label={field.label}>
+          <textarea
+            value={(value as string) ?? ""}
+            placeholder={field.placeholder}
+            onChange={(e) => onChange(e.target.value)}
+            rows={3}
+            className="w-full border rounded-md px-2 py-1.5 text-sm"
+          />
+        </LabeledField>
+      );
+    case "url":
+      return (
+        <LabeledField label={field.label}>
+          <input
+            value={(value as string) ?? ""}
+            placeholder={field.placeholder ?? "https://"}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-full border rounded-md px-2 py-1.5 text-sm"
+          />
+        </LabeledField>
+      );
+    case "datetime":
+      return (
+        <LabeledField label={field.label}>
+          <input
+            type="datetime-local"
+            value={(value as string) ?? ""}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-full border rounded-md px-2 py-1.5 text-sm"
+          />
+        </LabeledField>
+      );
+    case "number":
+      return (
+        <LabeledField label={field.label}>
+          <input
+            type="number"
+            min={field.min}
+            max={field.max}
+            step={field.step ?? 1}
+            value={(value as number) ?? 0}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="w-full border rounded-md px-2 py-1.5 text-sm"
+          />
+        </LabeledField>
+      );
+    case "boolean":
+      return (
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={Boolean(value)} onChange={(e) => onChange(e.target.checked)} />
+          {field.label}
+        </label>
+      );
+    case "select":
+      return (
+        <LabeledField label={field.label}>
+          <select
+            value={(value as string) ?? ""}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-full border rounded-md px-2 py-1.5 text-sm bg-white"
+          >
+            {field.options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </LabeledField>
+      );
+    case "color":
+      return <ColorPickerField label={field.label} value={value as string} onChange={onChange} />;
+    case "richtext":
+      return (
+        <LabeledField label={field.label}>
+          <RichTextEditor value={(value as string) ?? ""} onChange={onChange} />
+        </LabeledField>
+      );
+    case "image":
+      return (
+        <LabeledField label={field.label}>
+          <MediaField
+            kind="image"
+            value={value as string}
+            onChange={onChange}
+            open={pickerOpen}
+            setOpen={setPickerOpen}
+          />
+        </LabeledField>
+      );
+    case "video":
+      return (
+        <LabeledField label={field.label}>
+          <MediaField
+            kind="video"
+            value={value as string}
+            onChange={onChange}
+            open={pickerOpen}
+            setOpen={setPickerOpen}
+          />
+        </LabeledField>
+      );
+    case "array":
+      return (
+        <ArrayField
+          field={field}
+          value={(value as Record<string, unknown>[]) ?? []}
+          onChange={onChange as (v: Record<string, unknown>[]) => void}
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+function LabeledField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <label className="text-xs font-medium text-slate-600">{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function MediaField({
+  kind,
+  value,
+  onChange,
+  open,
+  setOpen,
+}: {
+  kind: "image" | "video";
+  value: string;
+  onChange: (v: string) => void;
+  open: boolean;
+  setOpen: (v: boolean) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      {value ? (
+        <div className="relative border rounded-md overflow-hidden h-28 bg-slate-50">
+          {kind === "image" ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={value} alt="" className="w-full h-full object-cover" />
+          ) : (
+            <video src={value} className="w-full h-full object-cover" muted />
+          )}
+        </div>
+      ) : null}
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="w-full flex items-center justify-center gap-2 border-2 border-dashed rounded-md py-2 text-xs text-slate-600 hover:border-blue-400"
+      >
+        {kind === "image" ? <ImagePlus size={14} /> : <VideoIcon size={14} />}
+        {value ? "Change" : "Select"} {kind}
+      </button>
+      {open && (
+        <MediaPickerModal
+          accept={kind}
+          onSelect={(url) => {
+            onChange(url);
+            setOpen(false);
+          }}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+function ArrayField({
+  field,
+  value,
+  onChange,
+}: {
+  field: FieldDescriptor;
+  value: Record<string, unknown>[];
+  onChange: (v: Record<string, unknown>[]) => void;
+}) {
+  const itemFields = field.itemFields ?? [];
+
+  function updateItem(index: number, key: string, itemValue: unknown) {
+    const next = value.map((item, i) => (i === index ? { ...item, [key]: itemValue } : item));
+    onChange(next);
+  }
+
+  function addItem() {
+    const blank: Record<string, unknown> = {};
+    for (const f of itemFields) blank[f.key] = f.default ?? "";
+    onChange([...value, blank]);
+  }
+
+  function removeItem(index: number) {
+    onChange(value.filter((_, i) => i !== index));
+  }
+
+  function move(index: number, dir: -1 | 1) {
+    const target = index + dir;
+    if (target < 0 || target >= value.length) return;
+    const next = [...value];
+    [next[index], next[target]] = [next[target], next[index]];
+    onChange(next);
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-medium text-slate-600">{field.label}</label>
+        <button
+          type="button"
+          onClick={addItem}
+          className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700"
+        >
+          <Plus size={12} /> Add
+        </button>
+      </div>
+      <div className="space-y-3">
+        {value.map((item, index) => (
+          <div key={index} className="border rounded-md p-2 space-y-2 bg-slate-50">
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-slate-400">#{index + 1}</span>
+              <div className="flex items-center gap-1">
+                <button type="button" onClick={() => move(index, -1)} className="text-slate-400 hover:text-slate-700">
+                  <ChevronUp size={14} />
+                </button>
+                <button type="button" onClick={() => move(index, 1)} className="text-slate-400 hover:text-slate-700">
+                  <ChevronDown size={14} />
+                </button>
+                <button type="button" onClick={() => removeItem(index)} className="text-slate-400 hover:text-red-600">
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            </div>
+            {itemFields.map((f) => (
+              <FieldRenderer key={f.key} field={f} value={item[f.key]} onChange={(v) => updateItem(index, f.key, v)} />
+            ))}
+          </div>
+        ))}
+        {value.length === 0 && <div className="text-xs text-slate-400 italic">No items yet</div>}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/components/builder/IconRenderer.tsx

@@ -0,0 +1,7 @@
+import * as Icons from "lucide-react";
+import type { LucideProps } from "lucide-react";
+
+export function IconRenderer({ name, ...props }: { name: string } & LucideProps) {
+  const Icon = (Icons as unknown as Record<string, React.ComponentType<LucideProps>>)[name] ?? Icons.Square;
+  return <Icon {...props} />;
+}