Design editor (Canvas)

// app/page.tsx — load the editor CLIENT-SIDE ONLY. The canvas is browser-only,
// so it must never be server-rendered: dynamic(..., { ssr: false }) keeps it out
// of Next's SSR pass, so it can't throw `window is not defined` on first paint
// (the single most-reported canvas trap). This file is itself a Client
// Component because { ssr: false } isn't allowed in a Server Component
// (Next 15/16 throws). Importing the package on the server is safe — only
// *rendering* the live editor there is what you opt out of.
'use client';
import dynamic from 'next/dynamic';

const Editor = dynamic(() => import('./Editor'), { ssr: false });

export default function Page() {
  return <Editor />;
}

// app/Editor.tsx — the interactive editor. 'use client' is necessary but NOT
// sufficient: Next still SSRs Client Components, which is why app/page.tsx
// above loads this via dynamic(..., { ssr: false }) — never import it directly
// into a Server Component.
'use client';
import { SnowconeCanvas } from '@snowcone-app/canvas';
// The one stylesheet. No Tailwind, no transpilePackages, no config.
import '@snowcone-app/canvas/style.css';

export default function Editor() {
  return (
    // No wrapper class needed — the component scopes its own styles.
    <SnowconeCanvas
      // One artboard per print area. The name is the export key.
      artboards={[{ name: 'Front', width: 1200, height: 1200 }]}
      // Optional: drop the shopper's art in to start from. The src MUST be
      // publicly fetchable AND CORS-enabled (loaded with crossOrigin="anonymous").
      imageConfig={{ src: 'https://your-shop-id.storage.snowcone.app/art.png', scaleMode: 'contain' }}
      // Fires on every edit — persist this JSON to reload the design later.
      onChange={(state) => saveDraft(state)}
    />
  );
}

<SnowconeCanvas
  artboards={[
    { name: 'Front', width: 1200, height: 1200 },
    { name: 'Back',  width: 1200, height: 1200 },
    // clipShape masks content to a shape (e.g. a circular badge).
    { name: 'Pocket', width: 400, height: 400, clipShape: 'circle' },
  ]}
  activeArtboard="Front"
  onArtboardChange={(name) => console.log('now editing', name)}
/>

// SAVE — onChange hands you a CanvasState (elements + artboards).
// Persist the JSON. Do NOT save a flattened PNG as the state.
const [state, setState] = useState<CanvasState | null>(null);

<SnowconeCanvas
  artboards={artboards}
  onChange={setState}
  // RELOAD — feed the saved elements back in to restore an editable design.
  initialElements={savedState?.elements}
/>

import { SnowconeCanvas } from '@snowcone-app/canvas';
import { useRealtimeMockup } from '@snowcone-app/sdk/react';

function LiveCustomizer() {
  const { sendCanvasBlob, mockupResults } = useRealtimeMockup({
    wsUrl: process.env.NEXT_PUBLIC_MERCH_WS_URL,
  });

  return (
    <SnowconeCanvas
      artboards={[{ name: 'Front', width: 1200, height: 1200 }]}
      // Export a blob shortly after each edit settles…
      exportConfig={{
        autoExportConfig: { enabled: true, debounceMs: 200 },
        format: 'blob',
        imageFormat: 'webp',
      }}
      // …and stream it to the renderer for a sub-second mockup preview.
      onExportStatus={(event) => {
        if (event.status === 'complete') {
          const blob = event.result['Front'];
          if (blob instanceof Blob) sendCanvasBlob('Front', blob, 1, 200);
        }
      }}
    />
  );
}

import { useState } from 'react';
import { SnowconeCanvas, useTextBinding } from '@snowcone-app/canvas';
import { serializeStateForServer } from '@snowcone-app/canvas';
import { RenderSession } from '@snowcone-app/sdk';

// 1. A control bound to an editable element BY NAME. useTextBinding('headline')
//    finds every text element whose `name` is 'headline' and edits them. It reads
//    canvas context, so it MUST render inside SnowconeCanvas's `overlay` (which is
//    mounted inside the EditorProvider) — not as a sibling of <SnowconeCanvas/>.
function HeadlineInput() {
  const { text, setText, isConnected } = useTextBinding('headline');
  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      disabled={!isConnected}   // false until a matching element exists
    />
  );
}

function Customizer({ session }: { session: RenderSession }) {
  return (
    <SnowconeCanvas
      artboards={[{ name: 'Front', width: 1200, height: 1200 }]}
      // 2. Name the element so the binding hook can target it.
      //    (Element configs use transformType — 'custom' is plain text.)
      //    Add legibility props so the seeded text reads well at print scale.
      initialElements={[
        {
          transformType: 'custom',
          name: 'headline',
          text: 'YOUR TEXT',
          x: 600, y: 400,
          fontSize: 96,
          color: '#111111',
          textAlign: 'center',
          bold: true,
        },
        // An image element seeds artwork into the design. transformType:'image'
        // + imageUrl. The URL MUST be publicly fetchable AND served with CORS
        // headers (the canvas loads it with crossOrigin="anonymous"); the server
        // also fetches it at render time, so a private/auth-gated URL renders blank.
        {
          transformType: 'image',
          imageUrl: 'https://your-shop-id.storage.snowcone.app/logo.png',
          x: 600, y: 800,
        },
      ]}
      // 3. Binding hooks live in the overlay (inside EditorProvider context).
      overlay={<HeadlineInput />}
      // 4. onChange's CanvasState feeds straight into serializeStateForServer,
      //    whose output is exactly what RenderSession.renderState expects.
      //    artboard 'Front' === the placement arg === catalog placements[].label.
      onChange={(state) =>
        session.renderState('Front', serializeStateForServer(state), 200)
      }
    />
  );
}

import { useRef } from 'react';
import { SnowconeCanvas, type SnowconeCanvasHandle } from '@snowcone-app/canvas';

const canvasRef = useRef<SnowconeCanvasHandle>(null);

async function addToCart() {
  // On-demand, print-resolution export of every artboard.
  const exports = await canvasRef.current?.exportArtboards({
    format: 'blob',
    all: true,
  });
  // exports = { Front: Blob, Back: Blob }
}

<SnowconeCanvas ref={canvasRef} artboards={artboards} />