@orion-studios/payload-studio 0.3.0-beta.0

package/dist/chunk-PGLMIFRY.mjs

@@ -0,0 +1,209 @@
+'use client';
+
+// src/admin/components/BlockPicker.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BlockPicker({
+  blocks,
+  onSelect
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const filtered = blocks.filter(
+    (b) => b.label.toLowerCase().includes(searchQuery.toLowerCase()) || b.slug.toLowerCase().includes(searchQuery.toLowerCase()) || b.description && b.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    blocks.length > 4 && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search sections...",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        style: {
+          padding: "10px 14px",
+          border: "1px solid var(--admin-input-border)",
+          borderRadius: "var(--admin-radius-md)",
+          background: "var(--admin-input-bg)",
+          color: "var(--admin-text)",
+          fontSize: 14,
+          outline: "none",
+          width: "100%",
+          boxSizing: "border-box"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+          gap: 12
+        },
+        children: filtered.map((block) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(block.slug),
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 10,
+              padding: 16,
+              background: "var(--admin-card-bg)",
+              border: "1px solid var(--admin-card-border)",
+              borderRadius: "var(--admin-radius-lg)",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              textAlign: "center"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.borderColor = "var(--admin-accent)";
+              e.currentTarget.style.boxShadow = "var(--admin-card-shadow-hover)";
+              e.currentTarget.style.transform = "translateY(-2px)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.borderColor = "var(--admin-card-border)";
+              e.currentTarget.style.boxShadow = "none";
+              e.currentTarget.style.transform = "translateY(0)";
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: "var(--admin-radius-md)",
+                    background: "var(--admin-accent-subtle)",
+                    color: "var(--admin-accent)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 24,
+                    overflow: "hidden"
+                  },
+                  children: block.imageURL ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: block.imageURL,
+                      alt: block.label,
+                      style: { width: "100%", height: "100%", objectFit: "cover" }
+                    }
+                  ) : block.icon ? block.icon : /* @__PURE__ */ jsx(BlockDefaultIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: "var(--admin-text)",
+                    lineHeight: 1.3
+                  },
+                  children: block.label
+                }
+              ),
+              block.description && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 11,
+                    color: "var(--admin-text-muted)",
+                    lineHeight: 1.4
+                  },
+                  children: block.description
+                }
+              )
+            ]
+          },
+          block.slug
+        ))
+      }
+    ),
+    filtered.length === 0 && /* @__PURE__ */ jsx("p", { style: { textAlign: "center", color: "var(--admin-text-muted)", fontSize: 14, padding: 20 }, children: "No sections match your search." })
+  ] });
+}
+function BlockDefaultIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7" })
+  ] });
+}
+
+// src/admin/components/SectionTabs.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SectionTabs({
+  tabs,
+  defaultTab = 0
+}) {
+  const [activeTab, setActiveTab] = useState2(defaultTab);
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        border: "1px solid var(--admin-border)",
+        borderRadius: "var(--admin-radius-lg)",
+        overflow: "hidden",
+        background: "var(--admin-card-bg)"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: "2px solid var(--admin-border)",
+              background: "var(--admin-surface)",
+              overflowX: "auto",
+              scrollbarWidth: "none"
+            },
+            children: tabs.map((tab, index) => {
+              const isActive = index === activeTab;
+              return /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveTab(index),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "12px 18px",
+                    border: "none",
+                    borderBottom: isActive ? "2px solid var(--admin-accent)" : "2px solid transparent",
+                    marginBottom: -2,
+                    background: "transparent",
+                    color: isActive ? "var(--admin-accent)" : "var(--admin-text-muted)",
+                    fontWeight: isActive ? 600 : 500,
+                    fontSize: 13,
+                    cursor: "pointer",
+                    transition: "all 0.15s ease",
+                    whiteSpace: "nowrap"
+                  },
+                  children: [
+                    tab.icon && /* @__PURE__ */ jsx2("span", { style: { display: "flex", opacity: isActive ? 1 : 0.6 }, children: tab.icon }),
+                    tab.label
+                  ]
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { style: { padding: 20 }, children: tabs[activeTab]?.content })
+      ]
+    }
+  );
+}
+
+export {
+  BlockPicker,
+  SectionTabs
+};

package/dist/chunk-Q76U4Z53.mjs

@@ -0,0 +1,249 @@
+import {
+  __export
+} from "./chunk-6BWS3CLP.mjs";
+
+// src/studio-pages/index.ts
+var studio_pages_exports = {};
+__export(studio_pages_exports, {
+  createDefaultStudioDocument: () => createDefaultStudioDocument,
+  layoutToStudioDocument: () => layoutToStudioDocument,
+  pageInspectorPanels: () => pageInspectorPanels,
+  pageNodeTypes: () => pageNodeTypes,
+  pagePaletteGroups: () => pagePaletteGroups,
+  pageStudioModuleManifest: () => pageStudioModuleManifest,
+  studioDocumentToLayout: () => studioDocumentToLayout
+});
+var defaultNodeData = {
+  bookingEmbed: {
+    buttonHref: "/contact",
+    buttonLabel: "Book Consultation",
+    description: "Let visitors book a consultation.",
+    title: "Book a Time"
+  },
+  cta: {
+    backgroundColor: "#1f684f",
+    buttonHref: "/contact",
+    buttonLabel: "Contact Us",
+    description: "Optional supporting copy.",
+    headline: "Ready to get started?",
+    style: "light"
+  },
+  faq: {
+    items: [{ answer: "Answer goes here.", question: "Frequently asked question?" }],
+    title: "Frequently Asked Questions"
+  },
+  featureGrid: {
+    items: [
+      { description: "Explain this point.", icon: "01", title: "Feature One" },
+      { description: "Explain this point.", icon: "02", title: "Feature Two" },
+      { description: "Explain this point.", icon: "03", title: "Feature Three" }
+    ],
+    title: "Section Title",
+    variant: "cards"
+  },
+  formEmbed: {
+    description: "Collect lead details from visitors.",
+    formType: "quote",
+    title: "Request a Quote"
+  },
+  hero: {
+    backgroundColor: "#124a37",
+    headline: "New Hero Section",
+    kicker: "Optional kicker",
+    primaryHref: "/contact",
+    primaryLabel: "Primary Action",
+    secondaryHref: "/services",
+    secondaryLabel: "Secondary Action",
+    subheadline: "Describe your offer clearly for website visitors.",
+    variant: "default"
+  },
+  media: {
+    caption: "Add a caption",
+    size: "default"
+  },
+  richText: {
+    content: {
+      root: {
+        children: [
+          {
+            children: [
+              {
+                detail: 0,
+                format: 0,
+                mode: "normal",
+                style: "",
+                text: "Write your content here.",
+                type: "text",
+                version: 1
+              }
+            ],
+            direction: "ltr",
+            format: "",
+            indent: 0,
+            type: "paragraph",
+            version: 1
+          }
+        ],
+        direction: "ltr",
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1
+      }
+    },
+    title: "Section Heading",
+    width: "normal"
+  },
+  testimonials: {
+    items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
+    title: "What Customers Say"
+  }
+};
+var nodeTypeLabels = {
+  bookingEmbed: "Booking Embed",
+  cta: "Call To Action",
+  faq: "FAQ",
+  featureGrid: "Feature Grid",
+  formEmbed: "Form Embed",
+  hero: "Hero",
+  media: "Media",
+  richText: "Rich Text",
+  testimonials: "Testimonials"
+};
+var pageNodeTypes = Object.keys(defaultNodeData).map((type) => ({
+  type,
+  displayName: nodeTypeLabels[type] || type,
+  description: `Page node for ${nodeTypeLabels[type] || type}`,
+  getDefaultData: () => structuredClone(defaultNodeData[type])
+}));
+var validatePageDocument = (document) => {
+  const issues = [];
+  if (!document.title || document.title.trim().length === 0) {
+    issues.push({
+      code: "pages.title.required",
+      message: "Page title is required before publishing.",
+      path: "title",
+      severity: "error"
+    });
+  }
+  if (document.nodes.length === 0) {
+    issues.push({
+      code: "pages.nodes.required",
+      message: "At least one section is required.",
+      path: "nodes",
+      severity: "error"
+    });
+  }
+  document.nodes.forEach((node, index) => {
+    if (node.type === "hero" && typeof node.data.headline !== "string") {
+      issues.push({
+        code: "pages.hero.headline",
+        message: "Hero section requires a headline.",
+        path: `nodes.${index}.data.headline`,
+        severity: "error"
+      });
+    }
+  });
+  return issues;
+};
+var pagePaletteGroups = [
+  {
+    id: "page-core",
+    label: "Core Sections",
+    items: [
+      { nodeType: "hero", title: "Hero", description: "Top-of-page headline and CTA" },
+      { nodeType: "featureGrid", title: "Feature Grid", description: "Service or value cards" },
+      { nodeType: "richText", title: "Rich Text", description: "Long-form content area" },
+      { nodeType: "media", title: "Media", description: "Image/video section" },
+      { nodeType: "testimonials", title: "Testimonials", description: "Social proof quotes" },
+      { nodeType: "faq", title: "FAQ", description: "Question-and-answer section" },
+      { nodeType: "cta", title: "Call To Action", description: "Conversion strip with button" },
+      { nodeType: "formEmbed", title: "Form Embed", description: "Lead capture form" },
+      { nodeType: "bookingEmbed", title: "Booking Embed", description: "Scheduling panel" }
+    ]
+  }
+];
+var pageInspectorPanels = Object.keys(defaultNodeData).map((nodeType) => ({
+  id: `${nodeType}-panel`,
+  label: `${nodeTypeLabels[nodeType] || nodeType} Settings`,
+  nodeType,
+  fields: [
+    {
+      key: "title",
+      label: "Title",
+      type: "text"
+    }
+  ]
+}));
+var pageStudioModuleManifest = {
+  id: "studio-pages",
+  version: "0.1.0-beta.0",
+  displayName: "Pages Studio Module",
+  nodeTypes: pageNodeTypes,
+  paletteGroups: pagePaletteGroups,
+  inspectorPanels: pageInspectorPanels,
+  validators: [validatePageDocument],
+  migrations: [],
+  compiler: {
+    compileNode: (node) => ({
+      id: node.id,
+      blockType: node.type,
+      ...node.data
+    })
+  },
+  permissions: [
+    { action: "read", role: "admin" },
+    { action: "read", role: "editor" },
+    { action: "read", role: "client" },
+    { action: "update", role: "admin" },
+    { action: "update", role: "editor" },
+    { action: "update", role: "client" },
+    { action: "publish", role: "admin" },
+    { action: "publish", role: "editor" }
+  ]
+};
+var ensureNodeID = (inputID, index) => {
+  if (typeof inputID === "string" && inputID.length > 0) {
+    return inputID;
+  }
+  return `node-${index + 1}`;
+};
+var layoutToStudioDocument = (layout, title) => {
+  const nodes = layout.filter((block) => typeof block.blockType === "string").map((block, index) => {
+    const blockType = String(block.blockType);
+    const { id, blockType: _, ...data } = block;
+    return {
+      id: ensureNodeID(id, index),
+      type: blockType,
+      data
+    };
+  });
+  return {
+    schemaVersion: 1,
+    title,
+    nodes,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+};
+var studioDocumentToLayout = (document) => document.nodes.map((node) => ({
+  id: node.id,
+  blockType: node.type,
+  ...node.data
+}));
+var createDefaultStudioDocument = (title) => ({
+  schemaVersion: 1,
+  title,
+  nodes: [],
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+});
+
+export {
+  pageNodeTypes,
+  pagePaletteGroups,
+  pageInspectorPanels,
+  pageStudioModuleManifest,
+  layoutToStudioDocument,
+  studioDocumentToLayout,
+  createDefaultStudioDocument,
+  studio_pages_exports
+};

package/dist/chunk-WLXZDMK3.mjs

@@ -0,0 +1,154 @@
+import {
+  __export
+} from "./chunk-6BWS3CLP.mjs";
+
+// src/studio/index.ts
+var studio_exports = {};
+__export(studio_exports, {
+  assertStudioDocumentV1: () => assertStudioDocumentV1,
+  compileStudioDocument: () => compileStudioDocument,
+  createEmptyStudioDocument: () => createEmptyStudioDocument,
+  createStudioRegistry: () => createStudioRegistry,
+  migrateStudioDocument: () => migrateStudioDocument,
+  validateStudioDocument: () => validateStudioDocument
+});
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var makeIssue = (message, path, code = "studio.invalid") => ({
+  code,
+  message,
+  path,
+  severity: "error"
+});
+var createEmptyStudioDocument = (title) => ({
+  schemaVersion: 1,
+  title,
+  nodes: [],
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+});
+function assertStudioDocumentV1(input) {
+  if (!isRecord(input)) {
+    throw new Error("Studio document must be an object");
+  }
+  if (input.schemaVersion !== 1) {
+    throw new Error("Unsupported studio schemaVersion");
+  }
+  if (!Array.isArray(input.nodes)) {
+    throw new Error("Studio document nodes must be an array");
+  }
+  const nodes = input.nodes.map((node, index) => {
+    if (!isRecord(node)) {
+      throw new Error(`Node at index ${index} must be an object`);
+    }
+    if (typeof node.id !== "string" || node.id.length === 0) {
+      throw new Error(`Node at index ${index} has invalid id`);
+    }
+    if (typeof node.type !== "string" || node.type.length === 0) {
+      throw new Error(`Node at index ${index} has invalid type`);
+    }
+    if (!isRecord(node.data)) {
+      throw new Error(`Node at index ${index} has invalid data`);
+    }
+    return {
+      id: node.id,
+      type: node.type,
+      data: node.data
+    };
+  });
+  return {
+    schemaVersion: 1,
+    title: typeof input.title === "string" ? input.title : void 0,
+    nodes,
+    updatedAt: typeof input.updatedAt === "string" ? input.updatedAt : void 0
+  };
+}
+function createStudioRegistry(modules) {
+  const moduleByID = new Map(modules.map((mod) => [mod.id, mod]));
+  const nodeTypes = modules.flatMap((mod) => mod.nodeTypes);
+  const nodeTypeByName = new Map(nodeTypes.map((definition) => [definition.type, definition]));
+  return {
+    getModuleByID: (id) => moduleByID.get(id),
+    getNodeTypeByName: (type) => nodeTypeByName.get(type),
+    listInspectorPanels: () => modules.flatMap((mod) => mod.inspectorPanels),
+    listModules: () => [...modules],
+    listPaletteGroups: () => modules.flatMap((mod) => mod.paletteGroups),
+    listNodeTypes: () => [...nodeTypes]
+  };
+}
+function validateStudioDocument(document, modules) {
+  const issues = [];
+  if (document.schemaVersion !== 1) {
+    issues.push(makeIssue("Unsupported schema version", "schemaVersion", "studio.schemaVersion"));
+  }
+  if (!Array.isArray(document.nodes)) {
+    issues.push(makeIssue("Nodes must be an array", "nodes", "studio.nodes"));
+    return issues;
+  }
+  const registry = createStudioRegistry(modules);
+  const nodeIDs = /* @__PURE__ */ new Set();
+  document.nodes.forEach((node, index) => {
+    if (!node.id) {
+      issues.push(makeIssue("Node id is required", `nodes.${index}.id`, "studio.node.id"));
+    }
+    if (nodeIDs.has(node.id)) {
+      issues.push(makeIssue("Node id must be unique", `nodes.${index}.id`, "studio.node.id.duplicate"));
+    }
+    nodeIDs.add(node.id);
+    if (!registry.getNodeTypeByName(node.type)) {
+      issues.push(makeIssue("Unsupported node type", `nodes.${index}.type`, "studio.node.type"));
+    }
+  });
+  for (const module of modules) {
+    for (const validate of module.validators) {
+      issues.push(...validate(document));
+    }
+  }
+  return issues;
+}
+function compileStudioDocument(document, modules) {
+  const issues = validateStudioDocument(document, modules);
+  const compilerEntries = modules.filter((mod) => typeof mod.compiler?.compileNode === "function").map((mod) => mod.compiler?.compileNode);
+  const layout = document.nodes.map((node) => {
+    for (const compileNode of compilerEntries) {
+      if (!compileNode) {
+        continue;
+      }
+      const compiled = compileNode(node);
+      if (compiled) {
+        return compiled;
+      }
+    }
+    return {
+      id: node.id,
+      blockType: node.type,
+      ...node.data
+    };
+  });
+  return {
+    issues,
+    layout
+  };
+}
+function migrateStudioDocument(value, migrations) {
+  const sorted = [...migrations].sort((a, b) => a.fromVersion - b.fromVersion);
+  if (isRecord(value) && value.schemaVersion === 1) {
+    return assertStudioDocumentV1(value);
+  }
+  let current = value;
+  for (const migration of sorted) {
+    if (!isRecord(current) || current.schemaVersion !== migration.fromVersion) {
+      continue;
+    }
+    current = migration.migrate(current);
+  }
+  return assertStudioDocumentV1(current);
+}
+
+export {
+  createEmptyStudioDocument,
+  assertStudioDocumentV1,
+  createStudioRegistry,
+  validateStudioDocument,
+  compileStudioDocument,
+  migrateStudioDocument,
+  studio_exports
+};