makersclaw 0.2.0 → 0.3.1

package/registry/blocks/page-builder/demo.jsx

@@ -0,0 +1,145 @@
+"use client";
+
+// PageBuilder three ways — the gallery's and the smoke test's surface. Not
+// installed into apps.
+//   Landing page   a launch page opened from the built-in template, saved
+//                  through onSave (a switch makes the save fail); below it,
+//                  the saved page shown with PageView, in the theme.
+//   Start fresh    nothing on the page yet: the friendly first-run state
+//                  with the starter templates.
+//   Your sections  what landing-builder does: its own section blocks and a
+//                  template registered through props, built-ins cut down
+//                  to the basics.
+import { useState } from "react";
+import { Badge, Card, Switch, TabPanel, Tabs, toast } from "../components/ui";
+import { PageBuilder, PageView, STARTER_TEMPLATES, usePageBuilder } from "../components/blocks/page-builder";
+
+const LAUNCH = STARTER_TEMPLATES.find((t) => t.id === "launch");
+
+// A consumer's own sections: HTML with its own class prefix, CSS that
+// names only theme tokens. `data-gjs-name` is the name in Layers.
+const OWN_CSS = `
+.lb-announce{padding:14px 24px;text-align:center;background-color:var(--color-accent);color:var(--color-accent-foreground);font-size:0.9375rem}
+.lb-announce a{color:var(--color-primary);font-weight:600;text-decoration:none}
+.lb-stats{padding:64px 24px;background-color:var(--color-background)}
+.lb-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:960px;margin:0 auto;text-align:center}
+.lb-stat{font-family:var(--theme-font-display);font-size:2.75rem;font-weight:700;line-height:1;color:var(--color-foreground)}
+.lb-stat-label{margin-top:8px;color:var(--color-muted-foreground);font-size:0.9375rem}
+@media (max-width: 768px){.lb-stats-row{grid-template-columns:minmax(0,1fr)}}
+`;
+
+const OWN_BLOCKS = [
+  {
+    id: "announce",
+    label: "Announcement bar",
+    category: "Your sections",
+    thumb: "logos",
+    description: "A thin bar above the page with one link.",
+    css: OWN_CSS,
+    html: `<div class="lb-announce" data-gjs-name="Announcement">Spring release: shared calendars are here. <a href="/changelog">See what is new →</a></div>`,
+  },
+  {
+    id: "stats",
+    label: "Numbers",
+    category: "Your sections",
+    thumb: "features",
+    description: "Three big numbers with a line under each.",
+    css: OWN_CSS,
+    html: `<section class="lb-stats" data-gjs-name="Numbers"><div class="lb-stats-row"><div><p class="lb-stat">4,200</p><p class="lb-stat-label">teams plan their week here</p></div><div><p class="lb-stat">38%</p><p class="lb-stat-label">fewer status meetings</p></div><div><p class="lb-stat">9 min</p><p class="lb-stat-label">to set up, on average</p></div></div></section>`,
+  },
+];
+
+const OWN_TEMPLATES = [
+  {
+    id: "numbers-first",
+    label: "Numbers first",
+    description: "An announcement, the numbers, then a call to action.",
+    thumbs: ["logos", "features", "cta"],
+    css: OWN_CSS,
+    html: `${OWN_BLOCKS[0].html}${OWN_BLOCKS[1].html}<section class="pb-cta pb-center" data-gjs-name="Call to action"><div class="pb-narrow"><h2 class="pb-h2">See it with your own team</h2><p class="pb-lead">Free for two people, for as long as you like.</p><div class="pb-actions"><a class="pb-button" href="/signup">Start free</a></div></div></section>`,
+  },
+];
+
+export default function PageBuilderDemo() {
+  const [tab, setTab] = useState("landing");
+  return (
+    <div className="grid gap-4">
+      <Tabs
+        aria-label="Examples"
+        tabs={[
+          { key: "landing", label: "Landing page" },
+          { key: "fresh", label: "Start fresh" },
+          { key: "own", label: "Your sections" },
+        ]}
+        value={tab}
+        onChange={setTab}
+      />
+      <TabPanel tab="landing" value={tab}>
+        <Landing />
+      </TabPanel>
+      <TabPanel tab="fresh" value={tab}>
+        <PageBuilder title="New page" height="min(720px, 88dvh)" />
+      </TabPanel>
+      <TabPanel tab="own" value={tab}>
+        <PageBuilder
+          title="Spring launch"
+          builtIns="basics"
+          blocks={OWN_BLOCKS}
+          templates={OWN_TEMPLATES}
+          height="min(720px, 88dvh)"
+          onSave={async () => {
+            await new Promise((r) => setTimeout(r, 400));
+            toast.success("Page saved");
+            return { ok: true };
+          }}
+        />
+      </TabPanel>
+    </div>
+  );
+}
+
+function Landing() {
+  const builder = usePageBuilder();
+  const [failSaves, setFailSaves] = useState(false);
+  const [saved, setSaved] = useState(null);
+
+  async function onSave(page) {
+    await new Promise((r) => setTimeout(r, 600));
+    if (failSaves) return { ok: false, error: "The server did not answer (the failing-save switch is on). Your changes are still here." };
+    setSaved(page);
+    toast.success("Page saved");
+    return { ok: true };
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">Edit the page, then save. Switch the theme: the page repaints with it.</p>
+        <Switch id="pb-fail" label="Make saves fail" checked={failSaves} onChange={(e) => setFailSaves(e.target.checked)} />
+      </div>
+      <PageBuilder
+        title="Spring launch"
+        page={{ html: LAUNCH.html }}
+        onSave={onSave}
+        builderRef={builder}
+        height="min(760px, 88dvh)"
+        onUploadImage={async (file) => {
+          await new Promise((r) => setTimeout(r, 500));
+          // In an app: upload to storage and return its public address.
+          return { ok: true, url: URL.createObjectURL(file) };
+        }}
+      />
+      <Card
+        title="The saved page"
+        actions={saved ? <Badge variant="soft">{`${Math.round(saved.html.length / 100) / 10} KB of HTML · ${Math.round(saved.css.length / 100) / 10} KB of CSS`}</Badge> : null}
+        padding="none"
+      >
+        {saved ? (
+          <PageView page={saved} label="Saved page" className="max-h-[520px] overflow-y-auto border-t border-border" />
+        ) : (
+          <p className="px-4 pb-4 text-sm text-muted-foreground">Save the page to see it here, rendered with PageView the way an app shows it.</p>
+        )}
+      </Card>
+    </div>
+  );
+}

package/registry/blocks/page-builder/grapes.js

@@ -0,0 +1,18 @@
+// The one door to GrapesJS (grapesjs, BSD-3-Clause, core only — never the
+// commercial Studio SDK) and its React wrapper (@grapesjs/react, MIT).
+// Every file in this block reaches them through here; the blocks built on
+// this one (landing-builder…) reach them through PageBuilder, never the
+// packages directly.
+//
+// Both load on the server without a shim: GrapesJS touches `window` only
+// when an editor is created, which happens in an effect after the mount
+// guard. Its stylesheet ships the way sketch-canvas's does: an import of
+// the package's CSS, which the app's bundler picks up. theme.js repaints
+// what of it is still drawn (the canvas spots, the text toolbar) with
+// tokens and hides nothing else — no default panel is ever created, since
+// the editor runs with <Canvas> (custom UI).
+import "grapesjs/dist/css/grapes.min.css";
+import grapesjs from "grapesjs";
+import GjsEditor, { BlocksProvider, Canvas, WithEditor, useEditorMaybe } from "@grapesjs/react";
+
+export { grapesjs, GjsEditor, BlocksProvider, Canvas, WithEditor, useEditorMaybe };

package/registry/blocks/page-builder/index.js

@@ -0,0 +1,11 @@
+// The PageBuilder block — `makersclaw add page-builder`. Fixed: compose it
+// through its props (README.md beside this file). The page helpers are
+// plain functions and work anywhere, the server included; PageView shows a
+// saved page in the theme. The blocks built on this one (landing-builder…)
+// import it, never grapesjs or @grapesjs/react directly.
+export { PageBuilder, usePageBuilder, readPage, DEVICES } from "./page-builder";
+export { PageView, standaloneDocument } from "./page-view";
+export { BlockThumb, PageThumb, THUMB_NAMES } from "./thumbs";
+export { BASE_CSS, SECTION_BLOCKS, BASIC_BLOCKS, STARTER_TEMPLATES } from "./sections";
+export { STYLE_GROUPS, COLOR_TOKENS, groupsFor, currentOption, patchFor, tokenCss, fontFaceCss, fontLinks } from "./tokens";
+export { PAGE_BASE_CSS, emptyPage, isPageEmpty, cleanHtml, cleanCss, normalizeBlock, templatePage, pageDocument, projectSections } from "./page";