@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-react/components/PageSpace.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { useEditor } from "../hooks/useEditor";
+import { useValue } from "../hooks/useValue";
+
+export function PageSpace({
+  children,
+  className,
+  dataUi,
+}: {
+  children: ReactNode;
+  className?: string;
+  dataUi: string;
+}) {
+  const editor = useEditor();
+  const pageTransform = useValue(editor.pageTransformSignal);
+
+  return (
+    <div
+      data-ui={dataUi}
+      className={className}
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        transform: pageTransform.toCssString(),
+        transformOrigin: "0 0",
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/_vendor/canvas-react/components/ShapeLayer.tsx

@@ -0,0 +1,428 @@
+import { memo, type CSSProperties, type ReactNode } from "react";
+import {
+  Box,
+  Mat,
+  Vec,
+  type Editor,
+  type ShapeId,
+  type ShapeRecord,
+} from "@land/canvas-core";
+import { useEditor } from "../hooks/useEditor";
+import { useValue } from "../hooks/useValue";
+import { PageSpace } from "./PageSpace";
+import { useCanvasRendererRegistry } from "../host/CanvasRendererRegistryContext";
+
+export function ShapeLayer() {
+  const showDebugSummary = shouldShowShapeLayerDebugSummary();
+
+  return (
+    <div
+      data-ui="shape-layer"
+      className="absolute inset-0"
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <PageSpace dataUi="shape-page-space" className="absolute inset-0">
+        <ShapeRenderList />
+      </PageSpace>
+      {showDebugSummary ? <ShapeLayerDebugSummary /> : null}
+    </div>
+  );
+}
+
+interface ShapeFrame {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  transform: string;
+  transformOrigin: string;
+  elementToPage: Mat;
+}
+
+const ShapeRenderList = memo(function ShapeRenderList() {
+  const editor = useEditor();
+  const retainedShapeIds = useValue(editor.retainedShapeIdsSignal);
+
+  return retainedShapeIds.map((shapeId: ShapeId) => (
+    <ShapeItem key={shapeId} shapeId={shapeId} />
+  ));
+});
+
+const ShapeLayerDebugSummary = memo(function ShapeLayerDebugSummary() {
+  const editor = useEditor();
+  const pageShapeIds = useValue(editor.currentPageShapeIdsSignal);
+  const retainedShapeIds = useValue(editor.retainedShapeIdsSignal);
+  const visibleShapeIds = useValue(editor.renderVisibleShapeIdsSignal);
+  const renderOrderById = useValue(editor.shapeRenderOrderByIdSignal);
+  const visibleShapeIdSet = new Set(visibleShapeIds);
+  const renderOrders = retainedShapeIds.map(
+    (shapeId) => renderOrderById.get(shapeId) ?? -1,
+  );
+  const visibleRenderOrders = retainedShapeIds
+    .filter((shapeId) => visibleShapeIdSet.has(shapeId))
+    .map((shapeId) => renderOrderById.get(shapeId) ?? -1);
+  const hiddenRetainedIds = retainedShapeIds.filter(
+    (shapeId) => !visibleShapeIdSet.has(shapeId),
+  );
+  const summary = {
+    pageShapeCount: pageShapeIds.length,
+    mountedCount: retainedShapeIds.length,
+    visibleCount: visibleShapeIds.length,
+    hiddenRetainedCount: hiddenRetainedIds.length,
+    minRenderOrder:
+      renderOrders.length > 0 ? Math.min(...renderOrders) : null,
+    maxRenderOrder:
+      renderOrders.length > 0 ? Math.max(...renderOrders) : null,
+    mountedRenderOrderSeq: renderOrders.join(","),
+    visibleRenderOrderSeq: visibleRenderOrders.join(","),
+    firstMountedShapeId: retainedShapeIds[0] ?? null,
+    lastMountedShapeId: retainedShapeIds[retainedShapeIds.length - 1] ?? null,
+    hiddenRetainedShapeIds: hiddenRetainedIds,
+  };
+
+  return (
+    <pre
+      data-ui="shape-layer-debug-summary"
+      data-mounted-count={summary.mountedCount}
+      data-visible-count={summary.visibleCount}
+      data-hidden-retained-count={summary.hiddenRetainedCount}
+      data-min-render-order={summary.minRenderOrder ?? undefined}
+      data-max-render-order={summary.maxRenderOrder ?? undefined}
+      hidden
+    >
+      {JSON.stringify(summary)}
+    </pre>
+  );
+});
+
+function shouldShowShapeLayerDebugSummary(): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  return params.get("renderHostDebug") === "1";
+}
+
+const ShapeItem = memo(function ShapeItem({ shapeId }: { shapeId: ShapeId }) {
+  const editor = useEditor();
+  const stableShapeId = shapeId as ShapeId;
+  const shape = useValue(editor.getShapeSignal(stableShapeId));
+  const isVisible = useValue(editor.getShapeRenderVisibleSignal(stableShapeId));
+  const activeToolId = useValue(editor.toolStateSignal).activeToolId;
+  const isSelectedByState = useValue(
+    editor.getShapeSelectedSignal(stableShapeId),
+  );
+  const isSelected = activeToolId === "select" && isSelectedByState;
+  const shapeEditingSession = useValue(
+    editor.getShapeEditingSessionForShapeSignal(stableShapeId),
+  );
+  const renderOrder = useValue(editor.getShapeRenderOrderSignal(stableShapeId));
+  const isDropTarget = useValue(editor.getShapeDropTargetSignal(stableShapeId));
+  const isErasing = useValue(editor.getShapeErasingSignal(stableShapeId));
+  const isSelectedDescendantTransformAncestor = useValue(
+    editor.getShapeSelectedDescendantTransformAncestorSignal(stableShapeId),
+  );
+  const clipAncestorIds = useValue(
+    editor.getShapeClipAncestorIdsSignal(stableShapeId),
+  );
+  const rendererRegistry = useCanvasRendererRegistry();
+
+  if (!shape) {
+    return null;
+  }
+
+  const renderer = rendererRegistry.getShapeRenderer(shape.type);
+  if (!renderer) return null;
+  const Component = renderer.component;
+  const frame = getShapeFrame(editor, shape);
+  const effectiveOpacity = isErasing ? shape.opacity * 0.32 : shape.opacity;
+  const siblingOrderState =
+    isSelected ? editor.getSelectionSiblingOrderState() : null;
+  const parentShape =
+    siblingOrderState?.parentId.startsWith("shape:")
+      ? editor.getShape(siblingOrderState.parentId as ShapeId)
+      : null;
+  const shouldShowOrderBadge = parentShape?.type === "frame";
+
+  return (
+    <div
+      data-ui="shape-instance"
+      data-shape-id={shape.id}
+      data-shape-type={shape.type}
+      data-selected={isSelected ? "true" : "false"}
+      data-drop-target={isDropTarget ? "true" : "false"}
+      data-visible={isVisible ? "true" : "false"}
+      data-render-order={renderOrder >= 0 ? String(renderOrder) : undefined}
+      data-clip-ancestor-count={clipAncestorIds.length}
+      style={{
+        position: "absolute",
+        display: isVisible ? undefined : "none",
+        left: frame.left,
+        top: frame.top,
+        width: frame.width,
+        height: frame.height,
+        opacity: effectiveOpacity === 1 ? undefined : effectiveOpacity,
+        transform: frame.transform,
+        transformOrigin: frame.transformOrigin,
+        pointerEvents: "none",
+        outline: isDropTarget ? "2px solid #2563eb" : undefined,
+        outlineOffset: isDropTarget ? 4 : undefined,
+        boxShadow: isDropTarget
+          ? "0 0 0 6px rgba(37, 99, 235, 0.16)"
+          : undefined,
+        zIndex: renderOrder >= 0 ? renderOrder + 1 : undefined,
+      }}
+    >
+      {isVisible ? (
+        <ShapeClipStack
+          clipAncestorIds={clipAncestorIds}
+          shapeElementToPage={frame.elementToPage}
+        >
+          <Component
+            shape={shape as never}
+            editor={editor}
+            isSelected={isSelected}
+            shapeEditingSession={shapeEditingSession}
+          />
+        </ShapeClipStack>
+      ) : null}
+      {isVisible && isDropTarget ? (
+        <ShapeDropTargetLabel shapeType={shape.type} />
+      ) : null}
+      {isVisible && isSelectedDescendantTransformAncestor ? (
+        <TransformDescendantAncestorBoundary />
+      ) : null}
+      {isVisible && shouldShowOrderBadge && siblingOrderState ? (
+        <ShapeOrderBadge state={siblingOrderState} />
+      ) : null}
+    </div>
+  );
+});
+
+function TransformDescendantAncestorBoundary() {
+  return (
+    <div
+      data-ui="transform-descendant-ancestor-boundary"
+      style={{
+        position: "absolute",
+        inset: 0,
+        border: "1px dashed #64748b",
+        pointerEvents: "none",
+      }}
+    />
+  );
+}
+
+function ShapeOrderBadge({
+  state,
+}: {
+  state: { index: number; count: number };
+}) {
+  return (
+    <div
+      data-ui="shape-order-badge"
+      style={{
+        position: "absolute",
+        right: 8,
+        top: 8,
+        display: "flex",
+        alignItems: "center",
+        height: 22,
+        padding: "0 8px",
+        borderRadius: 999,
+        border: "1px solid rgba(15, 23, 42, 0.12)",
+        background: "rgba(255, 255, 255, 0.94)",
+        color: "#334155",
+        fontFamily:
+          "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        fontSize: 11,
+        fontWeight: 700,
+        lineHeight: "22px",
+        boxShadow: "0 8px 18px rgba(15, 23, 42, 0.12)",
+        whiteSpace: "nowrap",
+        pointerEvents: "none",
+      }}
+    >
+      {state.index + 1} / {state.count}
+    </div>
+  );
+}
+
+function ShapeDropTargetLabel({ shapeType }: { shapeType: string }) {
+  return (
+    <div
+      data-ui="shape-drop-target-label"
+      style={{
+        position: "absolute",
+        left: 10,
+        top: 10,
+        display: "flex",
+        alignItems: "center",
+        height: 24,
+        padding: "0 10px",
+        borderRadius: 999,
+        background: "#2563eb",
+        color: "white",
+        fontFamily:
+          "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        fontSize: 12,
+        fontWeight: 700,
+        lineHeight: "24px",
+        boxShadow: "0 10px 24px rgba(37, 99, 235, 0.24)",
+        whiteSpace: "nowrap",
+        pointerEvents: "none",
+      }}
+    >
+      {shapeType === "frame" ? "Drop into frame" : "Drop into group"}
+    </div>
+  );
+}
+
+function ShapeClipStack({
+  children,
+  clipAncestorIds,
+  shapeElementToPage,
+}: {
+  children: ReactNode;
+  clipAncestorIds: readonly ShapeId[];
+  shapeElementToPage: Mat;
+}) {
+  if (clipAncestorIds.length === 0) {
+    return <>{children}</>;
+  }
+
+  return clipAncestorIds.reduceRight<ReactNode>(
+    (content, ancestorId) => (
+      <ShapeClipBoundary
+        key={ancestorId}
+        ancestorId={ancestorId}
+        shapeElementToPage={shapeElementToPage}
+      >
+        {content}
+      </ShapeClipBoundary>
+    ),
+    children,
+  );
+}
+
+function ShapeClipBoundary({
+  ancestorId,
+  children,
+  shapeElementToPage,
+}: {
+  ancestorId: ShapeId;
+  children: ReactNode;
+  shapeElementToPage: Mat;
+}) {
+  const editor = useEditor();
+  const ancestor = useValue(editor.getShapeSignal(ancestorId));
+  if (!ancestor) {
+    return <>{children}</>;
+  }
+
+  const clipPath = getShapeElementClipPath(
+    editor,
+    ancestor,
+    shapeElementToPage,
+  );
+  if (!clipPath) {
+    return <>{children}</>;
+  }
+
+  const style: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    clipPath,
+    WebkitClipPath: clipPath,
+  };
+
+  return (
+    <div
+      data-ui="shape-clip-boundary"
+      data-clip-ancestor-id={ancestorId}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+function getShapeFrame(
+  editor: Editor,
+  shape: ShapeRecord,
+): ShapeFrame {
+  const renderBounds = editor.computeShapeRenderBounds(shape);
+  const renderToPage = editor.computeShapeRenderToPageTransform(shape);
+  const elementToPage = renderToPage.compose(
+    Mat.Translate(renderBounds.x, renderBounds.y),
+  );
+  return {
+    left: 0,
+    top: 0,
+    width: renderBounds.w,
+    height: renderBounds.h,
+    transform: elementToPage.toCssString(),
+    transformOrigin: "0 0",
+    elementToPage,
+  };
+}
+
+function getShapeElementClipPath(
+  editor: Editor,
+  ancestor: ShapeRecord,
+  shapeElementToPage: Mat,
+): string | null {
+  const util = editor.getShapeUtil(ancestor);
+  const clipBounds = util.getChildClipLocalBounds(ancestor);
+  if (!clipBounds || !isValidBox(clipBounds)) {
+    return null;
+  }
+
+  const ancestorLocalToPage = editor.computeShapeRenderToPageTransform(ancestor);
+  const pageToShapeElement = shapeElementToPage.invert();
+  const points = getBoxCorners(clipBounds).map((point) =>
+    pageToShapeElement.applyToPoint(
+      ancestorLocalToPage.applyToPoint(point),
+    ),
+  );
+
+  return `polygon(${points.map(formatClipPoint).join(", ")})`;
+}
+
+function getBoxCorners(box: Box): Vec[] {
+  return [
+    new Vec(box.minX, box.minY),
+    new Vec(box.maxX, box.minY),
+    new Vec(box.maxX, box.maxY),
+    new Vec(box.minX, box.maxY),
+  ];
+}
+
+function isValidBox(box: Box): boolean {
+  return (
+    Number.isFinite(box.x) &&
+    Number.isFinite(box.y) &&
+    Number.isFinite(box.w) &&
+    Number.isFinite(box.h) &&
+    box.w >= 0 &&
+    box.h >= 0
+  );
+}
+
+function formatClipPoint(point: Vec): string {
+  return `${formatCssNumber(point.x)}px ${formatCssNumber(point.y)}px`;
+}
+
+function formatCssNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number(value.toFixed(3)).toString();
+}

package/_vendor/canvas-react/components/index.ts

@@ -0,0 +1,4 @@
+export { Canvas } from "./CanvasView";
+export { OverlayLayer } from "./OverlayLayer";
+export { PageSpace } from "./PageSpace";
+export { ShapeLayer } from "./ShapeLayer";

package/_vendor/canvas-react/hooks/useEditor.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+import type { Editor } from "@land/canvas-core";
+
+export const EditorContext = createContext<Editor | null>(null);
+
+export function useEditor(): Editor {
+  const editor = useContext(EditorContext);
+  if (!editor)
+    throw new Error("useEditor must be used within EditorContext.Provider");
+  return editor;
+}

package/_vendor/canvas-react/hooks/useValue.ts

@@ -0,0 +1,14 @@
+import { useEffect, useReducer } from "react";
+import { observeValue, type ReadonlyValue } from "@land/canvas-core";
+
+export function useValue<T>(signal: ReadonlyValue<T>): T {
+  const [, forceUpdate] = useReducer((c: number) => c + 1, 0);
+
+  useEffect(() => {
+    return observeValue("useValue", signal, () => {
+      forceUpdate();
+    });
+  }, [signal]);
+
+  return signal.get();
+}

package/_vendor/canvas-react/host/CanvasRendererRegistryContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+import {
+  createCanvasRendererRegistry,
+  type CanvasRendererRegistry,
+} from "./rendererRegistry";
+
+const defaultCanvasRendererRegistry = createCanvasRendererRegistry();
+
+export const CanvasRendererRegistryContext =
+  createContext<CanvasRendererRegistry>(defaultCanvasRendererRegistry);
+
+export function useCanvasRendererRegistry(): CanvasRendererRegistry {
+  return useContext(CanvasRendererRegistryContext);
+}

package/_vendor/canvas-react/host/contextMenuRegistry.ts

@@ -0,0 +1,61 @@
+import type {
+  ContextMenuContext,
+  ContextMenuContribution,
+  ContextMenuContributionTarget,
+  ContextMenuSection,
+  LandCorePlugin,
+} from "@land/canvas-core";
+
+export class CanvasContextMenuRegistry {
+  private readonly contributions = new Map<string, ContextMenuContribution>();
+  private readonly duplicateContributionIds = new Set<string>();
+
+  registerContribution(
+    contribution: ContextMenuContribution,
+    options: { replace?: boolean } = {},
+  ): void {
+    if (this.contributions.has(contribution.id) && !options.replace) {
+      this.duplicateContributionIds.add(contribution.id);
+      return;
+    }
+    this.contributions.set(contribution.id, contribution);
+  }
+
+  registerCorePlugins(plugins: readonly LandCorePlugin[]): void {
+    for (const plugin of plugins) {
+      for (const contribution of plugin.contextMenuContributions ?? []) {
+        this.registerContribution(contribution);
+      }
+    }
+  }
+
+  getDuplicateContributionIds(): string[] {
+    return [...this.duplicateContributionIds];
+  }
+
+  getSections(
+    target: ContextMenuContributionTarget,
+    context: ContextMenuContext,
+  ): ContextMenuSection[] {
+    return [...this.contributions.values()]
+      .filter(
+        (contribution) =>
+          contribution.target === "any" || contribution.target === target,
+      )
+      .filter((contribution) => contribution.when?.(context) ?? true)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .flatMap((contribution) =>
+        [...contribution.getSections(context)].sort(
+          (a, b) => (a.order ?? 0) - (b.order ?? 0),
+        ),
+      );
+  }
+}
+
+export function createCanvasContextMenuRegistry(
+  plugins: readonly LandCorePlugin[] = [],
+): CanvasContextMenuRegistry {
+  const nextRegistry = new CanvasContextMenuRegistry();
+  nextRegistry.registerCorePlugins(plugins);
+  return nextRegistry;
+}

package/_vendor/canvas-react/host/domEventGuards.ts

@@ -0,0 +1,61 @@
+import {
+  type CanvasDomEventGuard,
+  type CanvasDomEventGuardCursorInput,
+  type CanvasDomEventGuardInput,
+  type LandCanvasPlugin,
+} from "@land/canvas-plugin-api";
+
+export class CanvasDomEventGuardRegistry {
+  private readonly guards: CanvasDomEventGuard[] = [];
+  private readonly registeredGuardIds = new Set<string>();
+
+  register(guard: CanvasDomEventGuard): void {
+    if (this.registeredGuardIds.has(guard.id)) {
+      return;
+    }
+
+    this.guards.push(guard);
+    this.registeredGuardIds.add(guard.id);
+  }
+
+  registerCanvasPlugins(plugins: readonly LandCanvasPlugin[]): void {
+    for (const plugin of plugins) {
+      for (const guard of plugin.domEventGuards ?? []) {
+        this.register(guard);
+      }
+    }
+  }
+
+  getGuards(): readonly CanvasDomEventGuard[] {
+    return this.guards;
+  }
+
+  handle(input: CanvasDomEventGuardInput): "continue" | "handled" {
+    for (const guard of this.guards) {
+      if (guard.handle(input) === "handled") {
+        return "handled";
+      }
+    }
+
+    return "continue";
+  }
+
+  getCursor(input: CanvasDomEventGuardCursorInput): string | undefined {
+    for (const guard of this.guards) {
+      const cursor = guard.getCursor?.(input);
+      if (cursor !== undefined) {
+        return cursor;
+      }
+    }
+
+    return undefined;
+  }
+}
+
+export function createCanvasDomEventGuardRegistry(
+  plugins: readonly LandCanvasPlugin[] = [],
+): CanvasDomEventGuardRegistry {
+  const nextRegistry = new CanvasDomEventGuardRegistry();
+  nextRegistry.registerCanvasPlugins(plugins);
+  return nextRegistry;
+}

package/_vendor/canvas-react/host/index.ts

@@ -0,0 +1,38 @@
+export {
+  CanvasRendererRegistryContext,
+  useCanvasRendererRegistry,
+} from "./CanvasRendererRegistryContext";
+export {
+  CanvasDomEventGuardRegistry,
+  createCanvasDomEventGuardRegistry,
+} from "./domEventGuards";
+export {
+  CanvasRendererRegistry,
+  createCanvasRendererRegistry,
+} from "./rendererRegistry";
+export {
+  CanvasToolbarRegistry,
+  createCanvasToolbarRegistry,
+} from "./toolbarRegistry";
+export {
+  CanvasContextMenuRegistry,
+  createCanvasContextMenuRegistry,
+} from "./contextMenuRegistry";
+export type {
+  AnyRegisteredShapeRenderer,
+  RegisteredShapeRenderer,
+  ShapeRendererProps,
+} from "@land/canvas-plugin-api";
+export { createCanvasPluginHostRuntime } from "./pluginHost";
+export type {
+  CanvasPluginHostManifestEntry,
+  CanvasPluginHostManifestToolbarContributionEntry,
+  CanvasPluginHostRuntime,
+  CanvasPluginHostShapeValidationSummary,
+  CanvasPluginHostSource,
+  CanvasPluginHostValidationIssue,
+  CanvasPluginHostValidationIssueSeverity,
+  CanvasPluginHostValidationSummary,
+  CanvasPluginHostVerdict,
+  CreateCanvasPluginHostRuntimeOptions,
+} from "./pluginHost";