Feature/atp canvas blocks (#227)

* add page block type to lexicon and basic component

* add page block generated files

* set up leaflet and post to use the same layout component and adjusted
the interaction panel to work within that

* unified page, page wrapper, and post layouts, made subpage look nice in post

* added a bit of padding under the bottom of posts, deleted unused code

* remove extra merge conflict

* add published page block preview

* always render interaction drawer

* factor out useDrawerOpen

* loosen base_path to string

* scroll pages and comments into view properly

* fixed a weird scrolling issue, also squished the interaction drawer and
page together

* make quotes have a page component

* open sub-page if quoted

* change scroll into view threshold

* scroll into view comments panel

* render quote content from subpages

* implement subpage interaction drawers and buttons

* give quote popup a z-index

* fix actually posting comments on subpages

* convert comment to json before returning

* add interactions preview for subpages

* count top level quotes and comments correctly

* ensure layout doesn't break with canvases

* prev fix broke doc pages, fixed that lol

* specify post pages are docs

* absolutely position comments on subpage preview

* add canvas lexicon

* extract out page component to lineardocumentpage

* add canvas pages and previews

* handle narrow widths for the canvas

* hook rules hooks rule

* remove small canvas size

* added interactions and metadata to leaflet and posted canvases

* some fixes

* make quotehandler work on canvas

---------

Co-authored-by: celine <[e-mail]>

actions/publishToPublication.ts

···
   PubLeafletBlocksUnorderedList,
   PubLeafletDocument,
   PubLeafletPagesLinearDocument,
+  PubLeafletPagesCanvas,
   PubLeafletRichtextFacet,
   PubLeafletBlocksWebsite,
   PubLeafletBlocksCode,
···
         $type: "pub.leaflet.pages.linearDocument",
         blocks: firstPageBlocks,
       },
-      ...pages.map((p) => ({
-        $type: "pub.leaflet.pages.linearDocument",
-        id: p.id,
-        blocks: p.blocks,
-      })),
+      ...pages.map((p) => {
+        if (p.type === "canvas") {
+          return {
+            $type: "pub.leaflet.pages.canvas" as const,
+            id: p.id,
+            blocks: p.blocks as PubLeafletPagesCanvas.Block[],
+          };
+        } else {
+          return {
+            $type: "pub.leaflet.pages.linearDocument" as const,
+            id: p.id,
+            blocks: p.blocks as PubLeafletPagesLinearDocument.Block[],
+          };
+        }
+      }),
     ],
   };
   let rkey = draft?.doc ? new AtUri(draft.doc).rkey : TID.nextStr();
···
   root_entity: string,
 ) {
   let scan = scanIndexLocal(facts);
-  let pages: { id: string; blocks: PubLeafletPagesLinearDocument.Block[] }[] =
-    [];
+  let pages: {
+    id: string;
+    blocks:
+      | PubLeafletPagesLinearDocument.Block[]
+      | PubLeafletPagesCanvas.Block[];
+    type: "doc" | "canvas";
+  }[] = [];
 
   let firstEntity = scan.eav(root_entity, "root/page")?.[0];
   if (!firstEntity) throw new Error("No root page");
···
     if (b.type === "card") {
       let [page] = scan.eav(b.value, "block/card");
       if (!page) return;
-      let blocks = getBlocksWithTypeLocal(facts, page.data.value);
-      pages.push({
-        id: page.data.value,
-        blocks: await blocksToRecord(blocks),
-      });
+      let [pageType] = scan.eav(page.data.value, "page/type");
+
+      if (pageType?.data.value === "canvas") {
+        let canvasBlocks = await canvasBlocksToRecord(page.data.value);
+        pages.push({
+          id: page.data.value,
+          blocks: canvasBlocks,
+          type: "canvas",
+        });
+      } else {
+        let blocks = getBlocksWithTypeLocal(facts, page.data.value);
+        pages.push({
+          id: page.data.value,
+          blocks: await blocksToRecord(blocks),
+          type: "doc",
+        });
+      }
+
       let block: $Typed<PubLeafletBlocksPage.Main> = {
         $type: "pub.leaflet.blocks.page",
         id: page.data.value,
···
       return block;
     }
     return;
+  }
+
+  async function canvasBlocksToRecord(
+    pageID: string,
+  ): Promise<PubLeafletPagesCanvas.Block[]> {
+    let canvasBlocks = scan.eav(pageID, "canvas/block");
+    return (
+      await Promise.all(
+        canvasBlocks.map(async (canvasBlock) => {
+          let blockEntity = canvasBlock.data.value;
+          let position = canvasBlock.data.position;
+
+          // Get the block content
+          let blockType = scan.eav(blockEntity, "block/type")?.[0];
+          if (!blockType) return null;
+
+          let block: Block = {
+            type: blockType.data.value,
+            value: blockEntity,
+            parent: pageID,
+            position: "",
+            factID: canvasBlock.id,
+          };
+
+          let content = await blockToRecord(block);
+          if (!content) return null;
+
+          // Get canvas-specific properties
+          let width =
+            scan.eav(blockEntity, "canvas/block/width")?.[0]?.data.value || 360;
+          let rotation = scan.eav(blockEntity, "canvas/block/rotation")?.[0]
+            ?.data.value;
+
+          let canvasBlockRecord: PubLeafletPagesCanvas.Block = {
+            $type: "pub.leaflet.pages.canvas#block",
+            block: content,
+            x: position.x,
+            y: position.y,
+            width,
+            ...(rotation !== undefined && { rotation }),
+          };
+
+          return canvasBlockRecord;
+        }),
+      )
+    ).filter((b): b is PubLeafletPagesCanvas.Block => b !== null);
   }
 }
 

app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx

···
+"use client";
+import {
+  PubLeafletPagesCanvas,
+  PubLeafletPagesLinearDocument,
+  PubLeafletPublication,
+} from "lexicons/api";
+import { PostPageData } from "./getPostPageData";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { AppBskyFeedDefs } from "@atproto/api";
+import { PageWrapper } from "components/Pages/Page";
+import { Block } from "./PostContent";
+import { CanvasBackgroundPattern } from "components/Canvas";
+import {
+  getCommentCount,
+  getQuoteCount,
+  Interactions,
+} from "./Interactions/Interactions";
+import { Separator } from "components/Layout";
+import { Popover } from "components/Popover";
+import { InfoSmall } from "components/Icons/InfoSmall";
+import { PostHeader } from "./PostHeader/PostHeader";
+import { useDrawerOpen } from "./Interactions/InteractionDrawer";
+
+export function CanvasPage({
+  document,
+  blocks,
+  did,
+  profile,
+  preferences,
+  pubRecord,
+  prerenderedCodeBlocks,
+  bskyPostData,
+  document_uri,
+  pageId,
+  pageOptions,
+  fullPageScroll,
+  pages,
+}: {
+  document_uri: string;
+  document: PostPageData;
+  blocks: PubLeafletPagesCanvas.Block[];
+  profile: ProfileViewDetailed;
+  pubRecord: PubLeafletPublication.Record;
+  did: string;
+  prerenderedCodeBlocks?: Map<string, string>;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+  preferences: { showComments?: boolean };
+  pageId?: string;
+  pageOptions?: React.ReactNode;
+  fullPageScroll: boolean;
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+}) {
+  let hasPageBackground = !!pubRecord.theme?.showPageBackground;
+  let isSubpage = !!pageId;
+  let drawer = useDrawerOpen(document_uri);
+
+  return (
+    <PageWrapper
+      pageType="canvas"
+      fullPageScroll={fullPageScroll}
+      cardBorderHidden={!hasPageBackground}
+      id={pageId ? `post-page-${pageId}` : "post-page"}
+      drawerOpen={
+        !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)
+      }
+      pageOptions={pageOptions}
+    >
+      <CanvasMetadata
+        pageId={pageId}
+        isSubpage={isSubpage}
+        data={document}
+        profile={profile}
+        preferences={preferences}
+        commentsCount={getCommentCount(document, pageId)}
+        quotesCount={getQuoteCount(document, pageId)}
+      />
+      <CanvasContent
+        blocks={blocks}
+        did={did}
+        prerenderedCodeBlocks={prerenderedCodeBlocks}
+        bskyPostData={bskyPostData}
+        pageId={pageId}
+        pages={pages}
+      />
+    </PageWrapper>
+  );
+}
+
+function CanvasContent({
+  blocks,
+  did,
+  prerenderedCodeBlocks,
+  bskyPostData,
+  pageId,
+  pages,
+}: {
+  blocks: PubLeafletPagesCanvas.Block[];
+  did: string;
+  prerenderedCodeBlocks?: Map<string, string>;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+  pageId?: string;
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+}) {
+  let height = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y), 0) : 0;
+
+  return (
+    <div className="canvasWrapper h-full w-fit overflow-y-scroll postContent">
+      <div
+        style={{
+          minHeight: height + 512,
+          contain: "size layout paint",
+        }}
+        className="relative h-full w-[1272px]"
+      >
+        <CanvasBackground />
+
+        {blocks
+          .sort((a, b) => {
+            if (a.y === b.y) {
+              return a.x - b.x;
+            }
+            return a.y - b.y;
+          })
+          .map((canvasBlock, index) => {
+            return (
+              <CanvasBlock
+                key={index}
+                canvasBlock={canvasBlock}
+                did={did}
+                prerenderedCodeBlocks={prerenderedCodeBlocks}
+                bskyPostData={bskyPostData}
+                pageId={pageId}
+                pages={pages}
+                index={index}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+function CanvasBlock({
+  canvasBlock,
+  did,
+  prerenderedCodeBlocks,
+  bskyPostData,
+  pageId,
+  pages,
+  index,
+}: {
+  canvasBlock: PubLeafletPagesCanvas.Block;
+  did: string;
+  prerenderedCodeBlocks?: Map<string, string>;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+  pageId?: string;
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+  index: number;
+}) {
+  let { x, y, width, rotation } = canvasBlock;
+  let transform = `translate(${x}px, ${y}px)${rotation ? ` rotate(${rotation}deg)` : ""}`;
+
+  // Wrap the block in a LinearDocument.Block structure for compatibility
+  let linearBlock: PubLeafletPagesLinearDocument.Block = {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: canvasBlock.block,
+  };
+
+  return (
+    <div
+      className="absolute rounded-lg flex items-stretch origin-center p-3"
+      style={{
+        top: 0,
+        left: 0,
+        width,
+        transform,
+      }}
+    >
+      <div className="contents">
+        <Block
+          pageId={pageId}
+          pages={pages}
+          bskyPostData={bskyPostData}
+          block={linearBlock}
+          did={did}
+          index={[index]}
+          preview={false}
+          prerenderedCodeBlocks={prerenderedCodeBlocks}
+        />
+      </div>
+    </div>
+  );
+}
+
+const CanvasMetadata = (props: {
+  pageId: string | undefined;
+  isSubpage: boolean | undefined;
+  data: PostPageData;
+  profile: ProfileViewDetailed;
+  preferences: { showComments?: boolean };
+  quotesCount: number | undefined;
+  commentsCount: number | undefined;
+}) => {
+  return (
+    <div className="flex flex-row gap-3 items-center absolute top-6 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
+      <Interactions
+        quotesCount={props.quotesCount || 0}
+        commentsCount={props.commentsCount || 0}
+        compact
+        showComments={props.preferences.showComments}
+        pageId={props.pageId}
+      />
+      {!props.isSubpage && (
+        <>
+          <Separator classname="h-5" />
+          <Popover
+            side="left"
+            align="start"
+            className="flex flex-col gap-2 p-0! max-w-sm w-[1000px]"
+            trigger={<InfoSmall />}
+          >
+            <PostHeader
+              data={props.data}
+              profile={props.profile}
+              preferences={props.preferences}
+            />
+          </Popover>
+        </>
+      )}
+    </div>
+  );
+};
+
+const CanvasBackground = () => {
+  return (
+    <div className="w-full h-full pointer-events-none">
+      <CanvasBackgroundPattern pattern="grid" />
+    </div>
+  );
+};

app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx

···
 import type { Json } from "supabase/database.types";
 import { create } from "zustand";
 import type { Comment } from "./Comments";
-import { QuotePosition } from "../quotePosition";
+import { decodeQuotePosition, QuotePosition } from "../quotePosition";
 import { useContext } from "react";
 import { PostPageContext } from "../PostPageContext";
 import { scrollIntoView } from "src/utils/scrollIntoView";
+import { PostPageData } from "../getPostPageData";
+import { PubLeafletComment } from "lexicons/api";
 
 export type InteractionState = {
   drawerOpen: undefined | boolean;
···
     </div>
   );
 };
+
+export function getCommentCount(document: PostPageData, pageId?: string) {
+  if (!document) return;
+
+  if (pageId)
+    return document.document_mentions_in_bsky.filter((q) =>
+      q.link.includes(pageId),
+    ).length;
+  else
+    return document.document_mentions_in_bsky.filter((q) => {
+      const url = new URL(q.link);
+      const quoteParam = url.pathname.split("/l-quote/")[1];
+      if (!quoteParam) return null;
+      const quotePosition = decodeQuotePosition(quoteParam);
+      return !quotePosition?.pageId;
+    }).length;
+}
+
+export function getQuoteCount(document: PostPageData, pageId?: string) {
+  if (!document) return;
+  if (pageId)
+    return document.comments_on_documents.filter(
+      (c) => (c.record as PubLeafletComment.Record)?.onPage === pageId,
+    ).length;
+  else
+    return document.comments_on_documents.filter(
+      (c) => !(c.record as PubLeafletComment.Record)?.onPage,
+    ).length;
+}

app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx

···
+"use client";
+import {
+  PubLeafletComment,
+  PubLeafletDocument,
+  PubLeafletPagesLinearDocument,
+  PubLeafletPublication,
+} from "lexicons/api";
+import { PostPageData } from "./getPostPageData";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import { SubscribeWithBluesky } from "app/lish/Subscribe";
+import { EditTiny } from "components/Icons/EditTiny";
+import {
+  getCommentCount,
+  getQuoteCount,
+  Interactions,
+} from "./Interactions/Interactions";
+import { PostContent } from "./PostContent";
+import { PostHeader } from "./PostHeader/PostHeader";
+import { useIdentityData } from "components/IdentityProvider";
+import { AppBskyFeedDefs } from "@atproto/api";
+import { useDrawerOpen } from "./Interactions/InteractionDrawer";
+import { PageWrapper } from "components/Pages/Page";
+import { decodeQuotePosition } from "./quotePosition";
+
+export function LinearDocumentPage({
+  document,
+  blocks,
+  did,
+  profile,
+  preferences,
+  pubRecord,
+  prerenderedCodeBlocks,
+  bskyPostData,
+  document_uri,
+  pageId,
+  pageOptions,
+  fullPageScroll,
+}: {
+  document_uri: string;
+  document: PostPageData;
+  blocks: PubLeafletPagesLinearDocument.Block[];
+  profile?: ProfileViewDetailed;
+  pubRecord: PubLeafletPublication.Record;
+  did: string;
+  prerenderedCodeBlocks?: Map<string, string>;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+  preferences: { showComments?: boolean };
+  pageId?: string;
+  pageOptions?: React.ReactNode;
+  fullPageScroll: boolean;
+}) {
+  let { identity } = useIdentityData();
+  let drawer = useDrawerOpen(document_uri);
+
+  if (!document || !document.documents_in_publications[0].publications)
+    return null;
+
+  let hasPageBackground = !!pubRecord.theme?.showPageBackground;
+  let record = document.data as PubLeafletDocument.Record;
+
+  const isSubpage = !!pageId;
+
+  return (
+    <>
+      <PageWrapper
+        pageType="doc"
+        fullPageScroll={fullPageScroll}
+        cardBorderHidden={!hasPageBackground}
+        id={pageId ? `post-page-${pageId}` : "post-page"}
+        drawerOpen={
+          !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)
+        }
+        pageOptions={pageOptions}
+      >
+        {!isSubpage && profile && (
+          <PostHeader
+            data={document}
+            profile={profile}
+            preferences={preferences}
+          />
+        )}
+        <PostContent
+          pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
+          pageId={pageId}
+          bskyPostData={bskyPostData}
+          blocks={blocks}
+          did={did}
+          prerenderedCodeBlocks={prerenderedCodeBlocks}
+        />
+        <Interactions
+          pageId={pageId}
+          showComments={preferences.showComments}
+          commentsCount={getCommentCount(document, pageId) || 0}
+          quotesCount={getQuoteCount(document, pageId) || 0}
+        />
+        {!isSubpage && (
+          <>
+            <hr className="border-border-light mb-4 mt-4 sm:mx-4 mx-3" />
+            <div className="sm:px-4 px-3">
+              {identity &&
+              identity.atp_did ===
+                document.documents_in_publications[0]?.publications
+                  ?.identity_did ? (
+                <a
+                  href={`https://leaflet.pub/${document.leaflets_in_publications[0]?.leaflet}`}
+                  className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1 mx-auto"
+                >
+                  <EditTiny /> Edit Post
+                </a>
+              ) : (
+                <SubscribeWithBluesky
+                  isPost
+                  base_url={getPublicationURL(
+                    document.documents_in_publications[0].publications,
+                  )}
+                  pub_uri={
+                    document.documents_in_publications[0].publications.uri
+                  }
+                  subscribers={
+                    document.documents_in_publications[0].publications
+                      .publication_subscriptions
+                  }
+                  pubName={
+                    document.documents_in_publications[0].publications.name
+                  }
+                />
+              )}
+            </div>
+          </>
+        )}
+      </PageWrapper>
+    </>
+  );
+}

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

···
   PubLeafletBlocksWebsite,
   PubLeafletDocument,
   PubLeafletPagesLinearDocument,
+  PubLeafletPagesCanvas,
   PubLeafletBlocksHorizontalRule,
   PubLeafletBlocksBlockquote,
   PubLeafletBlocksBskyPost,
···
   className?: string;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
-  pages: PubLeafletPagesLinearDocument.Main[];
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
 }) {
   return (
     <div
···
   );
 }
 
-let Block = ({
+export let Block = ({
   block,
   did,
   isList,
···
   block: PubLeafletPagesLinearDocument.Block;
   did: string;
   isList?: boolean;
-  pages: PubLeafletPagesLinearDocument.Main[];
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
   previousBlock?: PubLeafletPagesLinearDocument.Block;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
···
       let id = b.block.id;
       let page = pages.find((p) => p.id === id);
       if (!page) return;
+
+      const isCanvas = PubLeafletPagesCanvas.isMain(page);
+
       return (
         <PublishedPageLinkBlock
           blocks={page.blocks}
···
           parentPageId={pageId}
           did={did}
           bskyPostData={bskyPostData}
+          isCanvas={isCanvas}
+          pages={pages}
           className={className}
         />
       );
···
 
 function ListItem(props: {
   index: number[];
-  pages: PubLeafletPagesLinearDocument.Main[];
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
   item: PubLeafletBlocksUnorderedList.ListItem;
   did: string;
   className?: string;

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

···
 "use client";
 import {
-  PubLeafletComment,
   PubLeafletDocument,
   PubLeafletPagesLinearDocument,
+  PubLeafletPagesCanvas,
   PubLeafletPublication,
 } from "lexicons/api";
 import { PostPageData } from "./getPostPageData";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
-import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
-import { SubscribeWithBluesky } from "app/lish/Subscribe";
-import { EditTiny } from "components/Icons/EditTiny";
-import { Interactions } from "./Interactions/Interactions";
-import { PostContent } from "./PostContent";
-import { PostHeader } from "./PostHeader/PostHeader";
-import { useIdentityData } from "components/IdentityProvider";
 import { AppBskyFeedDefs } from "@atproto/api";
 import { create } from "zustand/react";
 import {
···
 import { BookendSpacer, SandwichSpacer } from "components/LeafletLayout";
 import { PageOptionButton } from "components/Pages/PageOptions";
 import { CloseTiny } from "components/Icons/CloseTiny";
-import { PageWrapper } from "components/Pages/Page";
 import { Fragment, useEffect } from "react";
 import { flushSync } from "react-dom";
 import { scrollIntoView } from "src/utils/scrollIntoView";
 import { useParams } from "next/navigation";
 import { decodeQuotePosition } from "./quotePosition";
+import { LinearDocumentPage } from "./LinearDocumentPage";
+import { CanvasPage } from "./CanvasPage";
 
 const usePostPageUIState = create(() => ({
   pages: [] as string[],
···
   bskyPostData: AppBskyFeedDefs.PostView[];
   preferences: { showComments?: boolean };
 }) {
-  let { identity } = useIdentityData();
   let drawer = useDrawerOpen(document_uri);
   useInitializeOpenPages();
   let pages = useOpenPages();
···
     return null;
 
   let hasPageBackground = !!pubRecord.theme?.showPageBackground;
+  let record = document.data as PubLeafletDocument.Record;
+
   let fullPageScroll = !hasPageBackground && !drawer && pages.length === 0;
-  let record = document.data as PubLeafletDocument.Record;
   return (
     <>
       {!fullPageScroll && <BookendSpacer />}
-      <PageWrapper
-        pageType="doc"
+      <LinearDocumentPage
+        document={document}
+        blocks={blocks}
+        did={did}
+        profile={profile}
         fullPageScroll={fullPageScroll}
-        cardBorderHidden={!hasPageBackground}
-        id={"post-page"}
-        drawerOpen={!!drawer && !drawer.pageId}
-      >
-        <PostHeader
-          data={document}
-          profile={profile}
-          preferences={preferences}
-        />
-        <PostContent
-          pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
-          bskyPostData={bskyPostData}
-          blocks={blocks}
-          did={did}
-          prerenderedCodeBlocks={prerenderedCodeBlocks}
-        />
-        <Interactions
-          showComments={preferences.showComments}
-          quotesCount={
-            document.document_mentions_in_bsky.filter((q) => {
-              const url = new URL(q.link);
-              const quoteParam = url.pathname.split("/l-quote/")[1];
-              if (!quoteParam) return null;
-              const quotePosition = decodeQuotePosition(quoteParam);
-              return !quotePosition?.pageId;
-            }).length
-          }
-          commentsCount={
-            document.comments_on_documents.filter(
-              (c) => !(c.record as PubLeafletComment.Record)?.onPage,
-            ).length
-          }
-        />
-        <hr className="border-border-light mb-4 mt-4 sm:mx-4 mx-3" />
-        <div className="sm:px-4 px-3">
-          {identity &&
-          identity.atp_did ===
-            document.documents_in_publications[0]?.publications
-              ?.identity_did ? (
-            <a
-              href={`https://leaflet.pub/${document.leaflets_in_publications[0]?.leaflet}`}
-              className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1 mx-auto"
-            >
-              <EditTiny /> Edit Post
-            </a>
-          ) : (
-            <SubscribeWithBluesky
-              isPost
-              base_url={getPublicationURL(
-                document.documents_in_publications[0].publications,
-              )}
-              pub_uri={document.documents_in_publications[0].publications.uri}
-              subscribers={
-                document.documents_in_publications[0].publications
-                  .publication_subscriptions
-              }
-              pubName={document.documents_in_publications[0].publications.name}
-            />
-          )}
-        </div>
-      </PageWrapper>
+        preferences={preferences}
+        pubRecord={pubRecord}
+        prerenderedCodeBlocks={prerenderedCodeBlocks}
+        bskyPostData={bskyPostData}
+        document_uri={document_uri}
+      />
 
       {drawer && !drawer.pageId && (
         <InteractionDrawer
···
 
       {pages.map((p) => {
         let page = record.pages.find(
-          (page) => (page as PubLeafletPagesLinearDocument.Main).id === p,
-        ) as PubLeafletPagesLinearDocument.Main | undefined;
+          (page) =>
+            (
+              page as
+                | PubLeafletPagesLinearDocument.Main
+                | PubLeafletPagesCanvas.Main
+            ).id === p,
+        ) as
+          | PubLeafletPagesLinearDocument.Main
+          | PubLeafletPagesCanvas.Main
+          | undefined;
         if (!page) return null;
+
+        const isCanvas = PubLeafletPagesCanvas.isMain(page);
+
         return (
           <Fragment key={p}>
             <SandwichSpacer />
-            {/*JARED TODO : drawerOpen here is checking whether the drawer is open on the first page, rather than if it's open on this page. Please rewire this when you add drawers per page!*/}
-            <PageWrapper
-              pageType="doc"
-              cardBorderHidden={!hasPageBackground}
-              id={`post-page-${p}`}
-              fullPageScroll={false}
-              drawerOpen={!!drawer && drawer.pageId === page.id}
-              pageOptions={
-                <PageOptions
-                  onClick={() => closePage(page?.id!)}
-                  hasPageBackground={hasPageBackground}
-                />
-              }
-            >
-              <PostContent
-                pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
-                pageId={page.id}
-                bskyPostData={bskyPostData}
-                blocks={page.blocks}
+            {isCanvas ? (
+              <CanvasPage
+                fullPageScroll={false}
+                document={document}
+                blocks={(page as PubLeafletPagesCanvas.Main).blocks}
                 did={did}
+                preferences={preferences}
+                profile={profile}
+                pubRecord={pubRecord}
                 prerenderedCodeBlocks={prerenderedCodeBlocks}
+                bskyPostData={bskyPostData}
+                document_uri={document_uri}
+                pageId={page.id}
+                pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
+                pageOptions={
+                  <PageOptions
+                    onClick={() => closePage(page?.id!)}
+                    hasPageBackground={hasPageBackground}
+                  />
+                }
               />
-              <Interactions
+            ) : (
+              <LinearDocumentPage
+                fullPageScroll={false}
+                document={document}
+                blocks={(page as PubLeafletPagesLinearDocument.Main).blocks}
+                did={did}
+                preferences={preferences}
+                pubRecord={pubRecord}
+                prerenderedCodeBlocks={prerenderedCodeBlocks}
+                bskyPostData={bskyPostData}
+                document_uri={document_uri}
                 pageId={page.id}
-                showComments={preferences.showComments}
-                quotesCount={
-                  document.document_mentions_in_bsky.filter((q) =>
-                    q.link.includes(page.id!),
-                  ).length
-                }
-                commentsCount={
-                  document.comments_on_documents.filter(
-                    (c) =>
-                      (c.record as PubLeafletComment.Record)?.onPage ===
-                      page.id,
-                  ).length
+                pageOptions={
+                  <PageOptions
+                    onClick={() => closePage(page?.id!)}
+                    hasPageBackground={hasPageBackground}
+                  />
                 }
               />
-            </PageWrapper>
+            )}
             {drawer && drawer.pageId === page.id && (
               <InteractionDrawer
                 pageId={page.id}

app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx

···
 import { useUIState } from "src/useUIState";
 import { CSSProperties, useContext, useRef } from "react";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
-import { PostContent } from "./PostContent";
+import { PostContent, Block } from "./PostContent";
 import {
   PubLeafletBlocksHeader,
   PubLeafletBlocksText,
   PubLeafletComment,
   PubLeafletPagesLinearDocument,
+  PubLeafletPagesCanvas,
   PubLeafletPublication,
 } from "lexicons/api";
 import { AppBskyFeedDefs } from "@atproto/api";
···
 } from "./Interactions/Interactions";
 import { CommentTiny } from "components/Icons/CommentTiny";
 import { QuoteTiny } from "components/Icons/QuoteTiny";
+import { CanvasBackgroundPattern } from "components/Canvas";
 
 export function PublishedPageLinkBlock(props: {
-  blocks: PubLeafletPagesLinearDocument.Block[];
+  blocks: PubLeafletPagesLinearDocument.Block[] | PubLeafletPagesCanvas.Block[];
   parentPageId: string | undefined;
   pageId: string;
   did: string;
···
   className?: string;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
+  isCanvas?: boolean;
+  pages?: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
 }) {
   //switch to use actually state
   let openPages = useOpenPages();
···
         openPage(props.parentPageId, props.pageId);
       }}
     >
-      <DocLinkBlock {...props} />
+      {props.isCanvas ? (
+        <CanvasLinkBlock
+          blocks={props.blocks as PubLeafletPagesCanvas.Block[]}
+          did={props.did}
+          pageId={props.pageId}
+          bskyPostData={props.bskyPostData}
+          pages={props.pages || []}
+        />
+      ) : (
+        <DocLinkBlock
+          {...props}
+          blocks={props.blocks as PubLeafletPagesLinearDocument.Block[]}
+        />
+      )}
     </div>
   );
 }
···
               openInteractionDrawer("quotes", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
-          aria-label="Page quotes"
         >
+          <span className="sr-only">Page quotes</span>
           <QuoteTiny aria-hidden /> {quotes}{" "}
         </button>
       )}
···
               openInteractionDrawer("comments", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
-          aria-label="Page comments"
         >
+          <span className="sr-only">Page comments</span>
           <CommentTiny aria-hidden /> {comments}{" "}
         </button>
       )}
     </div>
   );
 };
+
+const CanvasLinkBlock = (props: {
+  blocks: PubLeafletPagesCanvas.Block[];
+  did: string;
+  pageId: string;
+  bskyPostData: AppBskyFeedDefs.PostView[];
+  pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+}) => {
+  let pageWidth = `var(--page-width-unitless)`;
+  let height =
+    props.blocks.length > 0 ? Math.max(...props.blocks.map((b) => b.y), 0) : 0;
+
+  return (
+    <div
+      style={{ contain: "size layout paint" }}
+      className={`pageLinkBlockPreview shrink-0 h-[200px] w-full overflow-clip relative`}
+    >
+      <div
+        className={`absolute top-0 left-0 origin-top-left pointer-events-none w-full`}
+        style={{
+          width: `calc(1px * ${pageWidth})`,
+          height: "calc(1150px * 2)",
+          transform: `scale(calc(((${pageWidth} - 36) / 1272 )))`,
+        }}
+      >
+        <div
+          style={{
+            minHeight: height + 512,
+            contain: "size layout paint",
+          }}
+          className="relative h-full w-[1272px]"
+        >
+          <div className="w-full h-full pointer-events-none">
+            <CanvasBackgroundPattern pattern="grid" />
+          </div>
+          {props.blocks
+            .sort((a, b) => {
+              if (a.y === b.y) {
+                return a.x - b.x;
+              }
+              return a.y - b.y;
+            })
+            .map((canvasBlock, index) => {
+              let { x, y, width, rotation } = canvasBlock;
+              let transform = `translate(${x}px, ${y}px)${rotation ? ` rotate(${rotation}deg)` : ""}`;
+
+              // Wrap the block in a LinearDocument.Block structure for compatibility
+              let linearBlock: PubLeafletPagesLinearDocument.Block = {
+                $type: "pub.leaflet.pages.linearDocument#block",
+                block: canvasBlock.block,
+              };
+
+              return (
+                <div
+                  key={index}
+                  className="absolute rounded-lg flex items-stretch origin-center p-3"
+                  style={{
+                    top: 0,
+                    left: 0,
+                    width,
+                    transform,
+                  }}
+                >
+                  <div className="contents">
+                    <Block
+                      pageId={props.pageId}
+                      pages={props.pages}
+                      bskyPostData={props.bskyPostData}
+                      block={linearBlock}
+                      did={props.did}
+                      index={[index]}
+                      preview={true}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};

components/Blocks/BlockCommands.tsx

···
     name: "New Canvas",
     icon: <BlockCanvasPageSmall />,
     type: "page",
-    hiddenInPublication: true,
     onSelect: async (rep, props, um) => {
       props.entityID && clearCommandSearchText(props.entityID);
       let entity = await createBlockWithType(rep, props, "card");

components/Canvas.tsx

···
 import { TooltipButton } from "./Buttons";
 import { useBlockKeyboardHandlers } from "./Blocks/useBlockKeyboardHandlers";
 import { AddSmall } from "./Icons/AddSmall";
+import { InfoSmall } from "./Icons/InfoSmall";
+import { Popover } from "./Popover";
+import { Separator } from "./Layout";
+import { CommentTiny } from "./Icons/CommentTiny";
+import { QuoteTiny } from "./Icons/QuoteTiny";
+import { PublicationMetadata } from "./Pages/PublicationMetadata";
+import { useLeafletPublicationData } from "./PageSWRDataProvider";
+import {
+  PubLeafletPublication,
+  PubLeafletPublicationRecord,
+} from "lexicons/api";
 import { useHandleCanvasDrop } from "./Blocks/useHandleCanvasDrop";
 
-export function Canvas(props: { entityID: string; preview?: boolean }) {
+export function Canvas(props: {
+  entityID: string;
+  preview?: boolean;
+  first?: boolean;
+}) {
   let entity_set = useEntitySetContext();
   let ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
···
     return () => abort.abort();
   });
 
-  let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data
-    .value;
-
   return (
     <div
       ref={ref}
···
       `}
     >
       <AddCanvasBlockButton entityID={props.entityID} entity_set={entity_set} />
+
+      <CanvasMetadata isSubpage={!props.first} />
+
       <CanvasContent {...props} />
-      <CanvasWidthHandle entityID={props.entityID} />
     </div>
   );
 }
···
   );
 }
 
-function CanvasWidthHandle(props: { entityID: string }) {
-  let canvasFocused = useUIState((s) => s.focusedEntity?.entityType === "page");
-  let { rep } = useReplicache();
-  let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data
-    .value;
+const CanvasMetadata = (props: { isSubpage: boolean | undefined }) => {
+  let { data: pub } = useLeafletPublicationData();
+  if (!pub || !pub.publications) return null;
+
+  let pubRecord = pub.publications.record as PubLeafletPublication.Record;
+  let showComments = pubRecord.preferences?.showComments;
+
   return (
-    <button
-      onClick={() => {
-        rep?.mutate.assertFact({
-          entity: props.entityID,
-          attribute: "canvas/narrow-width",
-          data: {
-            type: "boolean",
-            value: !narrowWidth,
-          },
-        });
-      }}
-      className={`resizeHandle
-        ${narrowWidth ? "cursor-e-resize" : "cursor-w-resize"} shrink-0 z-10
-         ${canvasFocused ? "sm:block hidden" : "hidden"}
-        w-[8px] h-12
-        absolute top-1/2 right-0 -translate-y-1/2 translate-x-[3px]
-        rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
-    />
+    <div className="flex flex-row gap-3 items-center absolute top-6 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
+      {showComments && (
+        <div className="flex gap-1 text-tertiary items-center">
+          <CommentTiny className="text-border" /> —
+        </div>
+      )}
+      <div className="flex gap-1 text-tertiary items-center">
+        <QuoteTiny className="text-border" /> —
+      </div>
+
+      {!props.isSubpage && (
+        <>
+          <Separator classname="h-5" />
+          <Popover
+            side="left"
+            align="start"
+            className="flex flex-col gap-2 p-0! max-w-sm w-[1000px]"
+            trigger={<InfoSmall />}
+          >
+            <PublicationMetadata />
+          </Popover>
+        </>
+      )}
+    </div>
   );
-}
+};
 
 const AddCanvasBlockButton = (props: {
   entityID: string;
···
 
   if (!permissions.write) return null;
   return (
-    <div className="absolute right-2 sm:top-4 sm:right-4 bottom-2 sm:bottom-auto z-10 flex flex-col gap-1 justify-center">
+    <div className="absolute right-2 sm:bottom-4 sm:right-4 bottom-2 sm:top-auto z-10 flex flex-col gap-1 justify-center">
       <TooltipButton
         side="left"
         open={blocks.length === 0 ? true : undefined}

components/Input.tsx

···
     JSX.IntrinsicElements["textarea"],
 ) => {
   let { label, textarea, ...inputProps } = props;
-  let style = `appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none`;
+  let style = `appearance-none w-full font-normal not-italic bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none`;
   return (
     <label className=" input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]!">
       {props.label}

components/Pages/Page.tsx

···
     return focusedPageID === props.entityID;
   });
   let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
-  let canvasNarrow = useEntity(props.entityID, "canvas/narrow-width")?.data
-    .value;
   let cardBorderHidden = useCardBorderHidden(props.entityID);
+
   let drawerOpen = useDrawerOpen(props.entityID);
   return (
     <CardThemeProvider entityID={props.entityID}>
···
         isFocused={isFocused}
         fullPageScroll={props.fullPageScroll}
         pageType={pageType}
-        canvasNarrow={canvasNarrow}
         pageOptions={
           <PageOptions
             entityID={props.entityID}
···
       >
         {props.first && (
           <>
-            <PublicationMetadata cardBorderHidden={!!cardBorderHidden} />
+            <PublicationMetadata />
           </>
         )}
-        <PageContent entityID={props.entityID} />
+        <PageContent entityID={props.entityID} first={props.first} />
       </PageWrapper>
       <DesktopPageFooter pageID={props.entityID} />
     </CardThemeProvider>
···
   isFocused?: boolean;
   onClickAction?: (e: React.MouseEvent) => void;
   pageType: "canvas" | "doc";
-  canvasNarrow?: boolean | undefined;
   drawerOpen: boolean | undefined;
 }) => {
   return (
···
         className={`
       pageScrollWrapper
       grow
-
       shrink-0 snap-center
       overflow-y-scroll
       ${
···
     ${
       props.pageType === "canvas" &&
       !props.fullPageScroll &&
-      (props.canvasNarrow
-        ? "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"
-        : "sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]")
+      "max-w-[var(--page-width-units)] sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]"
     }
 
 `}
···
     </div>
   );
 };
-// ${narrowWidth ?  " sm:max-w-(--page-width-units)" : }
-const PageContent = (props: { entityID: string }) => {
+
+const PageContent = (props: { entityID: string; first?: boolean }) => {
   let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
   if (pageType === "doc") return <DocContent entityID={props.entityID} />;
-  return <Canvas entityID={props.entityID} />;
+  return <Canvas entityID={props.entityID} first={props.first} />;
 };
 
 const DocContent = (props: { entityID: string }) => {
···
         />
       ) : null}
       <Blocks entityID={props.entityID} />
+      <div className="h-4 sm:h-6 w-full" />
       {/* we handle page bg in this sepate div so that
     we can apply an opacity the background image
     without affecting the opacity of the rest of the page */}

components/Pages/PublicationMetadata.tsx

···
 import { useSubscribe } from "src/replicache/useSubscribe";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { timeAgo } from "src/utils/timeAgo";
-export const PublicationMetadata = ({
-  cardBorderHidden,
-}: {
-  cardBorderHidden: boolean;
-}) => {
+export const PublicationMetadata = () => {
   let { rep } = useReplicache();
   let { data: pub } = useLeafletPublicationData();
   let title = useSubscribe(rep, (tx) => tx.get<string>("publication_title"));

lexicons/api/index.ts

···
 import * as PubLeafletComment from './types/pub/leaflet/comment'
 import * as PubLeafletDocument from './types/pub/leaflet/document'
 import * as PubLeafletGraphSubscription from './types/pub/leaflet/graph/subscription'
+import * as PubLeafletPagesCanvas from './types/pub/leaflet/pages/canvas'
 import * as PubLeafletPagesLinearDocument from './types/pub/leaflet/pages/linearDocument'
 import * as PubLeafletPublication from './types/pub/leaflet/publication'
 import * as PubLeafletRichtextFacet from './types/pub/leaflet/richtext/facet'
···
 export * as PubLeafletComment from './types/pub/leaflet/comment'
 export * as PubLeafletDocument from './types/pub/leaflet/document'
 export * as PubLeafletGraphSubscription from './types/pub/leaflet/graph/subscription'
+export * as PubLeafletPagesCanvas from './types/pub/leaflet/pages/canvas'
 export * as PubLeafletPagesLinearDocument from './types/pub/leaflet/pages/linearDocument'
 export * as PubLeafletPublication from './types/pub/leaflet/publication'
 export * as PubLeafletRichtextFacet from './types/pub/leaflet/richtext/facet'
···
 export * as PubLeafletThemeColor from './types/pub/leaflet/theme/color'
 
 export const PUB_LEAFLET_PAGES = {
+  CanvasTextAlignLeft: 'pub.leaflet.pages.canvas#textAlignLeft',
+  CanvasTextAlignCenter: 'pub.leaflet.pages.canvas#textAlignCenter',
+  CanvasTextAlignRight: 'pub.leaflet.pages.canvas#textAlignRight',
   LinearDocumentTextAlignLeft: 'pub.leaflet.pages.linearDocument#textAlignLeft',
   LinearDocumentTextAlignCenter:
     'pub.leaflet.pages.linearDocument#textAlignCenter',

lexicons/api/lexicons.ts

···
               type: 'array',
               items: {
                 type: 'union',
-                refs: ['lex:pub.leaflet.pages.linearDocument'],
+                refs: [
+                  'lex:pub.leaflet.pages.linearDocument',
+                  'lex:pub.leaflet.pages.canvas',
+                ],
               },
             },
           },
···
               type: 'string',
               format: 'at-uri',
             },
+          },
+        },
+      },
+    },
+  },
+  PubLeafletPagesCanvas: {
+    lexicon: 1,
+    id: 'pub.leaflet.pages.canvas',
+    defs: {
+      main: {
+        type: 'object',
+        required: ['blocks'],
+        properties: {
+          id: {
+            type: 'string',
+          },
+          blocks: {
+            type: 'array',
+            items: {
+              type: 'ref',
+              ref: 'lex:pub.leaflet.pages.canvas#block',
+            },
+          },
+        },
+      },
+      block: {
+        type: 'object',
+        required: ['block', 'x', 'y', 'width'],
+        properties: {
+          block: {
+            type: 'union',
+            refs: [
+              'lex:pub.leaflet.blocks.iframe',
+              'lex:pub.leaflet.blocks.text',
+              'lex:pub.leaflet.blocks.blockquote',
+              'lex:pub.leaflet.blocks.header',
+              'lex:pub.leaflet.blocks.image',
+              'lex:pub.leaflet.blocks.unorderedList',
+              'lex:pub.leaflet.blocks.website',
+              'lex:pub.leaflet.blocks.math',
+              'lex:pub.leaflet.blocks.code',
+              'lex:pub.leaflet.blocks.horizontalRule',
+              'lex:pub.leaflet.blocks.bskyPost',
+              'lex:pub.leaflet.blocks.page',
+            ],
+          },
+          x: {
+            type: 'integer',
+          },
+          y: {
+            type: 'integer',
+          },
+          width: {
+            type: 'integer',
+          },
+          height: {
+            type: 'integer',
+          },
+          rotation: {
+            type: 'integer',
+          },
+        },
+      },
+      textAlignLeft: {
+        type: 'token',
+      },
+      textAlignCenter: {
+        type: 'token',
+      },
+      textAlignRight: {
+        type: 'token',
+      },
+      quote: {
+        type: 'object',
+        required: ['start', 'end'],
+        properties: {
+          start: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.pages.canvas#position',
+          },
+          end: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.pages.canvas#position',
+          },
+        },
+      },
+      position: {
+        type: 'object',
+        required: ['block', 'offset'],
+        properties: {
+          block: {
+            type: 'array',
+            items: {
+              type: 'integer',
+            },
+          },
+          offset: {
+            type: 'integer',
           },
         },
       },
···
   PubLeafletComment: 'pub.leaflet.comment',
   PubLeafletDocument: 'pub.leaflet.document',
   PubLeafletGraphSubscription: 'pub.leaflet.graph.subscription',
+  PubLeafletPagesCanvas: 'pub.leaflet.pages.canvas',
   PubLeafletPagesLinearDocument: 'pub.leaflet.pages.linearDocument',
   PubLeafletPublication: 'pub.leaflet.publication',
   PubLeafletRichtextFacet: 'pub.leaflet.richtext.facet',

lexicons/api/types/pub/leaflet/document.ts

···
 import { type $Typed, is$typed as _is$typed, type OmitKey } from '../../../util'
 import type * as ComAtprotoRepoStrongRef from '../../com/atproto/repo/strongRef'
 import type * as PubLeafletPagesLinearDocument from './pages/linearDocument'
+import type * as PubLeafletPagesCanvas from './pages/canvas'
 
 const is$typed = _is$typed,
   validate = _validate
···
   publishedAt?: string
   publication: string
   author: string
-  pages: ($Typed<PubLeafletPagesLinearDocument.Main> | { $type: string })[]
+  pages: (
+    | $Typed<PubLeafletPagesLinearDocument.Main>
+    | $Typed<PubLeafletPagesCanvas.Main>
+    | { $type: string }
+  )[]
   [k: string]: unknown
 }
 

lexicons/api/types/pub/leaflet/pages/canvas.ts

···
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+import type * as PubLeafletBlocksIframe from '../blocks/iframe'
+import type * as PubLeafletBlocksText from '../blocks/text'
+import type * as PubLeafletBlocksBlockquote from '../blocks/blockquote'
+import type * as PubLeafletBlocksHeader from '../blocks/header'
+import type * as PubLeafletBlocksImage from '../blocks/image'
+import type * as PubLeafletBlocksUnorderedList from '../blocks/unorderedList'
+import type * as PubLeafletBlocksWebsite from '../blocks/website'
+import type * as PubLeafletBlocksMath from '../blocks/math'
+import type * as PubLeafletBlocksCode from '../blocks/code'
+import type * as PubLeafletBlocksHorizontalRule from '../blocks/horizontalRule'
+import type * as PubLeafletBlocksBskyPost from '../blocks/bskyPost'
+import type * as PubLeafletBlocksPage from '../blocks/page'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'pub.leaflet.pages.canvas'
+
+export interface Main {
+  $type?: 'pub.leaflet.pages.canvas'
+  id?: string
+  blocks: Block[]
+}
+
+const hashMain = 'main'
+
+export function isMain<V>(v: V) {
+  return is$typed(v, id, hashMain)
+}
+
+export function validateMain<V>(v: V) {
+  return validate<Main & V>(v, id, hashMain)
+}
+
+export interface Block {
+  $type?: 'pub.leaflet.pages.canvas#block'
+  block:
+    | $Typed<PubLeafletBlocksIframe.Main>
+    | $Typed<PubLeafletBlocksText.Main>
+    | $Typed<PubLeafletBlocksBlockquote.Main>
+    | $Typed<PubLeafletBlocksHeader.Main>
+    | $Typed<PubLeafletBlocksImage.Main>
+    | $Typed<PubLeafletBlocksUnorderedList.Main>
+    | $Typed<PubLeafletBlocksWebsite.Main>
+    | $Typed<PubLeafletBlocksMath.Main>
+    | $Typed<PubLeafletBlocksCode.Main>
+    | $Typed<PubLeafletBlocksHorizontalRule.Main>
+    | $Typed<PubLeafletBlocksBskyPost.Main>
+    | $Typed<PubLeafletBlocksPage.Main>
+    | { $type: string }
+  x: number
+  y: number
+  width: number
+  height?: number
+  rotation?: number
+}
+
+const hashBlock = 'block'
+
+export function isBlock<V>(v: V) {
+  return is$typed(v, id, hashBlock)
+}
+
+export function validateBlock<V>(v: V) {
+  return validate<Block & V>(v, id, hashBlock)
+}
+
+export const TEXTALIGNLEFT = `${id}#textAlignLeft`
+export const TEXTALIGNCENTER = `${id}#textAlignCenter`
+export const TEXTALIGNRIGHT = `${id}#textAlignRight`
+
+export interface Quote {
+  $type?: 'pub.leaflet.pages.canvas#quote'
+  start: Position
+  end: Position
+}
+
+const hashQuote = 'quote'
+
+export function isQuote<V>(v: V) {
+  return is$typed(v, id, hashQuote)
+}
+
+export function validateQuote<V>(v: V) {
+  return validate<Quote & V>(v, id, hashQuote)
+}
+
+export interface Position {
+  $type?: 'pub.leaflet.pages.canvas#position'
+  block: number[]
+  offset: number
+}
+
+const hashPosition = 'position'
+
+export function isPosition<V>(v: V) {
+  return is$typed(v, id, hashPosition)
+}
+
+export function validatePosition<V>(v: V) {
+  return validate<Position & V>(v, id, hashPosition)
+}

lexicons/build.ts

···
   PubLeafletComment,
   PubLeafletRichTextFacet,
   PageLexicons.PubLeafletPagesLinearDocument,
+  PageLexicons.PubLeafletPagesCanvasDocument,
   ...ThemeLexicons,
   ...BlockLexicons,
   ...Object.values(PublicationLexicons),

lexicons/pub/leaflet/document.json

···
             "items": {
               "type": "union",
               "refs": [
-                "pub.leaflet.pages.linearDocument"
+                "pub.leaflet.pages.linearDocument",
+                "pub.leaflet.pages.canvas"
               ]
             }
           }

lexicons/pub/leaflet/pages/canvas.json

···
+{
+  "lexicon": 1,
+  "id": "pub.leaflet.pages.canvas",
+  "defs": {
+    "main": {
+      "type": "object",
+      "required": [
+        "blocks"
+      ],
+      "properties": {
+        "id": {
+          "type": "string"
+        },
+        "blocks": {
+          "type": "array",
+          "items": {
+            "type": "ref",
+            "ref": "#block"
+          }
+        }
+      }
+    },
+    "block": {
+      "type": "object",
+      "required": [
+        "block",
+        "x",
+        "y",
+        "width"
+      ],
+      "properties": {
+        "block": {
+          "type": "union",
+          "refs": [
+            "pub.leaflet.blocks.iframe",
+            "pub.leaflet.blocks.text",
+            "pub.leaflet.blocks.blockquote",
+            "pub.leaflet.blocks.header",
+            "pub.leaflet.blocks.image",
+            "pub.leaflet.blocks.unorderedList",
+            "pub.leaflet.blocks.website",
+            "pub.leaflet.blocks.math",
+            "pub.leaflet.blocks.code",
+            "pub.leaflet.blocks.horizontalRule",
+            "pub.leaflet.blocks.bskyPost",
+            "pub.leaflet.blocks.page"
+          ]
+        },
+        "x": {
+          "type": "integer"
+        },
+        "y": {
+          "type": "integer"
+        },
+        "width": {
+          "type": "integer"
+        },
+        "height": {
+          "type": "integer"
+        },
+        "rotation": {
+          "type": "integer"
+        }
+      }
+    },
+    "textAlignLeft": {
+      "type": "token"
+    },
+    "textAlignCenter": {
+      "type": "token"
+    },
+    "textAlignRight": {
+      "type": "token"
+    },
+    "quote": {
+      "type": "object",
+      "required": [
+        "start",
+        "end"
+      ],
+      "properties": {
+        "start": {
+          "type": "ref",
+          "ref": "#position"
+        },
+        "end": {
+          "type": "ref",
+          "ref": "#position"
+        }
+      }
+    },
+    "position": {
+      "type": "object",
+      "required": [
+        "block",
+        "offset"
+      ],
+      "properties": {
+        "block": {
+          "type": "array",
+          "items": {
+            "type": "integer"
+          }
+        },
+        "offset": {
+          "type": "integer"
+        }
+      }
+    }
+  }
+}

lexicons/src/document.ts

···
 import { LexiconDoc } from "@atproto/lexicon";
 import { PubLeafletPagesLinearDocument } from "./pages/LinearDocument";
+import { PubLeafletPagesCanvasDocument } from "./pages";
 
 export const PubLeafletDocument: LexiconDoc = {
   lexicon: 1,
···
             type: "array",
             items: {
               type: "union",
-              refs: [PubLeafletPagesLinearDocument.id],
+              refs: [
+                PubLeafletPagesLinearDocument.id,
+                PubLeafletPagesCanvasDocument.id,
+              ],
             },
           },
         },

lexicons/src/pages/Canvas.ts

···
+import { LexiconDoc } from "@atproto/lexicon";
+import { BlockUnion } from "../blocks";
+
+export const PubLeafletPagesCanvasDocument: LexiconDoc = {
+  lexicon: 1,
+  id: "pub.leaflet.pages.canvas",
+  defs: {
+    main: {
+      type: "object",
+      required: ["blocks"],
+      properties: {
+        id: { type: "string" },
+        blocks: { type: "array", items: { type: "ref", ref: "#block" } },
+      },
+    },
+    block: {
+      type: "object",
+      required: ["block", "x", "y", "width"],
+      properties: {
+        block: BlockUnion,
+        x: { type: "integer" },
+        y: { type: "integer" },
+        width: { type: "integer" },
+        height: { type: "integer" },
+        rotation: { type: "integer" },
+      },
+    },
+    textAlignLeft: { type: "token" },
+    textAlignCenter: { type: "token" },
+    textAlignRight: { type: "token" },
+    quote: {
+      type: "object",
+      required: ["start", "end"],
+      properties: {
+        start: { type: "ref", ref: "#position" },
+        end: { type: "ref", ref: "#position" },
+      },
+    },
+    position: {
+      type: "object",
+      required: ["block", "offset"],
+      properties: {
+        block: { type: "array", items: { type: "integer" } },
+        offset: { type: "integer" },
+      },
+    },
+  },
+};

lexicons/src/pages/index.ts

···
 export { PubLeafletPagesLinearDocument } from "./LinearDocument";
+export { PubLeafletPagesCanvasDocument } from "./Canvas";