@01.software/sdk 0.43.0 → 0.45.0

package/dist/ui/canvas.cjs

@@ -31,8 +31,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ui/Canvas/index.tsx
 var Canvas_exports = {};
 __export(Canvas_exports, {
+  CANVAS_SHAPE_TYPES: () => CANVAS_SHAPE_TYPES,
   CanvasFrame: () => CanvasFrame,
   CanvasRenderer: () => CanvasRenderer,
+  DefaultShapeNode: () => DefaultShapeNode,
   clearTemplateCache: () => clearTemplateCache,
   compileTemplate: () => compileTemplate,
   getBooleanField: () => getBooleanField,
@@ -44,6 +46,7 @@ __export(Canvas_exports, {
   getTextField: () => getTextField,
   isDynamicNode: () => isDynamicNode,
   isFrameNode: () => isFrameNode,
+  isShapeNode: () => isShapeNode,
   prefetchCanvas: () => prefetchCanvas,
   renderFieldValue: () => renderFieldValue,
   sanitizeCSS: () => sanitizeCSS,
@@ -57,12 +60,22 @@ __export(Canvas_exports, {
 module.exports = __toCommonJS(Canvas_exports);
 
 // src/ui/Canvas/types.ts
+var CANVAS_SHAPE_TYPES = [
+  "terminator",
+  "process",
+  "decision",
+  "io",
+  "subprocess"
+];
 function isDynamicNode(node) {
   return node.type === "dynamic";
 }
 function isFrameNode(node) {
   return node.type === "frame";
 }
+function isShapeNode(node) {
+  return node.type === "shape";
+}
 
 // src/ui/Canvas/useCanvas.ts
 var import_react_query = require("@tanstack/react-query");
@@ -86,10 +99,13 @@ function collectionKeys(collection) {
 }
 
 // src/ui/Canvas/query-options.ts
+var CANVAS_STALE_TIME_MS = 6e4;
+var CANVAS_CATALOG_STALE_TIME_MS = 5 * 6e4;
 function canvasQueryOptions(client, slug, id) {
   const identifier = id ?? slug ?? "";
   return {
     queryKey: collectionKeys("canvases").detail(identifier),
+    staleTime: CANVAS_STALE_TIME_MS,
     queryFn: async () => {
       if (id) return client.collections.from("canvases").findById(id);
       const result = await client.collections.from("canvases").find({
@@ -105,8 +121,9 @@ function canvasQueryOptions(client, slug, id) {
 function nodeTypesQueryOptions(client) {
   return {
     queryKey: collectionKeys("canvas-node-types").lists(),
+    staleTime: CANVAS_CATALOG_STALE_TIME_MS,
     queryFn: async () => {
-      const result = await client.collections.from("canvas-node-types").find({ limit: 0 });
+      const result = await client.collections.from("canvas-node-types").find({ limit: 100 });
       return result.docs;
     }
   };
@@ -114,8 +131,9 @@ function nodeTypesQueryOptions(client) {
 function edgeTypesQueryOptions(client) {
   return {
     queryKey: collectionKeys("canvas-edge-types").lists(),
+    staleTime: CANVAS_CATALOG_STALE_TIME_MS,
     queryFn: async () => {
-      const result = await client.collections.from("canvas-edge-types").find({ limit: 0 });
+      const result = await client.collections.from("canvas-edge-types").find({ limit: 100 });
       return result.docs;
     }
   };
@@ -384,10 +402,9 @@ function getFrameData(data, frameId) {
 // src/ui/Canvas/template-compiler.ts
 var import_react4 = __toESM(require("react"), 1);
 var import_sucrase = require("sucrase");
-var WIRE_FORMAT_VERSION = 1;
-var MAX_CACHE_SIZE = 100;
-var MAX_MATERIALIZE_DEPTH = 20;
-var ALLOWED_ELEMENTS = /* @__PURE__ */ new Set([
+
+// src/ui/Canvas/template-security.ts
+var ALLOWED_TEMPLATE_ELEMENTS = [
   "div",
   "span",
   "p",
@@ -421,33 +438,188 @@ var ALLOWED_ELEMENTS = /* @__PURE__ */ new Set([
   "g",
   "circle",
   "rect"
-]);
-var BLOCKED_PATTERNS = [
-  /\bdocument\s*\./,
-  /\bwindow\s*\./,
-  /\bwindow\s*\[/,
-  /\bglobalThis\s*\./,
-  /\bfetch\s*\(/,
-  /\bXMLHttpRequest/,
-  /\beval\s*\(/,
-  /\bFunction\s*\(/,
-  /\bimport\s*\(/,
-  /\blocalStorage/,
-  /\bsessionStorage/,
-  /\bcookie/,
-  /\bpostMessage\s*\(/,
-  /\blocation\s*[.=]/,
-  /\bnavigator\s*\./,
-  /\bsetTimeout\s*\(/,
-  /\bsetInterval\s*\(/,
-  /\bsetImmediate\s*\(/,
-  /\brequire\s*\(/,
-  /\bself\b/,
-  /\bconstructor\s*\.\s*constructor/,
-  /\bReflect\b/,
-  /\bProxy\b/,
-  /\b__proto__\b/
 ];
+var ALLOWED_TEMPLATE_ELEMENT_SET = new Set(ALLOWED_TEMPLATE_ELEMENTS);
+function isAllowedTemplateElement(value) {
+  return ALLOWED_TEMPLATE_ELEMENT_SET.has(value.toLowerCase());
+}
+var TEMPLATE_BLOCKED_PATTERNS = [
+  { pattern: /\bdocument\s*\./, hint: "document API" },
+  { pattern: /\bwindow\s*\./, hint: "window API" },
+  { pattern: /\bwindow\s*\[/, hint: "window indexer" },
+  { pattern: /\bglobalThis\s*\./, hint: "globalThis" },
+  { pattern: /\bfetch\s*\(/, hint: "fetch()" },
+  { pattern: /\bXMLHttpRequest/, hint: "XMLHttpRequest" },
+  { pattern: /\beval\s*\(/, hint: "eval()" },
+  { pattern: /\bFunction\s*\(/, hint: "Function constructor" },
+  { pattern: /\bimport\s*\(/, hint: "dynamic import()" },
+  { pattern: /\blocalStorage/, hint: "localStorage" },
+  { pattern: /\bsessionStorage/, hint: "sessionStorage" },
+  { pattern: /\bcookie/, hint: "cookie access" },
+  { pattern: /\bpostMessage\s*\(/, hint: "postMessage()" },
+  { pattern: /\blocation\s*[.=]/, hint: "location API" },
+  { pattern: /\bnavigator\s*\./, hint: "navigator API" },
+  { pattern: /\bsetTimeout\s*\(/, hint: "setTimeout()" },
+  { pattern: /\bsetInterval\s*\(/, hint: "setInterval()" },
+  { pattern: /\bsetImmediate\s*\(/, hint: "setImmediate()" },
+  { pattern: /\brequire\s*\(/, hint: "require()" },
+  { pattern: /\bself\b/, hint: "self alias" },
+  {
+    pattern: /\bconstructor\s*\.\s*constructor/,
+    hint: "constructor.constructor escape"
+  },
+  { pattern: /\bReflect\b/, hint: "Reflect" },
+  { pattern: /\bProxy\b/, hint: "Proxy" },
+  { pattern: /\b__proto__\b/, hint: "__proto__" }
+];
+function findBlockedTemplatePattern(code) {
+  for (const { pattern, hint } of TEMPLATE_BLOCKED_PATTERNS) {
+    if (pattern.test(code)) return { hint };
+  }
+  return null;
+}
+var SAFE_DATA_URI_PREFIXES = [
+  "data:image/png;",
+  "data:image/jpeg;",
+  "data:image/gif;",
+  "data:image/webp;",
+  "data:image/avif;"
+];
+function isSafeTemplateUrl(value) {
+  if (typeof value !== "string") return false;
+  if (value.startsWith("/") || value.startsWith("./") || value.startsWith("../") || value.startsWith("#")) {
+    return true;
+  }
+  if (SAFE_DATA_URI_PREFIXES.some((prefix) => value.startsWith(prefix))) {
+    return true;
+  }
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+var URL_PROPS = /* @__PURE__ */ new Set([
+  "src",
+  "href",
+  "xlinkhref",
+  "xlink:href",
+  // Obsolete but still implemented URL-bearing attributes on allowed elements.
+  "background",
+  "longdesc",
+  "usemap"
+]);
+function isTemplateUrlProp(name) {
+  return URL_PROPS.has(name.toLowerCase());
+}
+var SRCSET_PROPS = /* @__PURE__ */ new Set([
+  "srcset",
+  // React spells the preload attribute `imageSrcSet`; keep it guarded if the
+  // element allowlist ever expands to include `link`.
+  "imagesrcset"
+]);
+function isTemplateSrcSetProp(name) {
+  return SRCSET_PROPS.has(name.toLowerCase());
+}
+function isSafeTemplateSrcSet(value) {
+  if (typeof value !== "string" || value.trim() === "") return false;
+  return value.split(",").every((candidate) => {
+    const parts = candidate.trim().split(/\s+/);
+    if (parts.length === 0 || parts.length > 2 || !isSafeTemplateUrl(parts[0])) {
+      return false;
+    }
+    const descriptor = parts[1];
+    if (descriptor === void 0) return true;
+    if (/^[1-9]\d*w$/.test(descriptor)) return true;
+    if (/^(?:\d+(?:\.\d+)?|\.\d+)x$/.test(descriptor)) {
+      return Number.parseFloat(descriptor) > 0;
+    }
+    return false;
+  });
+}
+var URL_FUNCTION_PATTERN = /url\s*\(/i;
+var SVG_URL_FUNCTION_PROPS = /* @__PURE__ */ new Set([
+  "clip-path",
+  "clippath",
+  "color-profile",
+  "colorprofile",
+  "cursor",
+  "fill",
+  "filter",
+  "marker",
+  "marker-end",
+  "marker-mid",
+  "marker-start",
+  "markerend",
+  "markermid",
+  "markerstart",
+  "mask",
+  "stroke"
+]);
+function isTemplatePaintProp(name) {
+  return SVG_URL_FUNCTION_PROPS.has(name.toLowerCase());
+}
+function isSafeTemplatePaintValue(value) {
+  if (typeof value === "string") return !URL_FUNCTION_PATTERN.test(value);
+  if (!Array.isArray(value) || value.length === 0) return false;
+  return value.every(
+    (candidate) => typeof candidate === "string" && !URL_FUNCTION_PATTERN.test(candidate)
+  );
+}
+var BLOCKED_STYLE_PROPS = /* @__PURE__ */ new Set([
+  "backgroundImage",
+  "background",
+  "listStyleImage",
+  "content",
+  "borderImage",
+  "borderImageSource",
+  "maskImage",
+  "mask",
+  "filter",
+  "cursor"
+]);
+function sanitizeTemplateStyle(style) {
+  if (!style || typeof style !== "object" || Array.isArray(style)) return {};
+  const safe = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (BLOCKED_STYLE_PROPS.has(key)) continue;
+    if (typeof value === "string" && URL_FUNCTION_PATTERN.test(value)) continue;
+    if (key === "position" && typeof value === "string" && /fixed|sticky/i.test(value)) {
+      continue;
+    }
+    if (key === "zIndex") {
+      const numericValue = typeof value === "number" ? value : parseInt(String(value), 10);
+      if (isNaN(numericValue) || numericValue > 9998) continue;
+    }
+    safe[key] = value;
+  }
+  return safe;
+}
+function sanitizeTemplateProps(props) {
+  const safeProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    const normalizedKey = key.toLowerCase();
+    if (normalizedKey.startsWith("on")) continue;
+    if (key === "dangerouslySetInnerHTML" || key === "ref") continue;
+    if (isTemplateUrlProp(key) && !isSafeTemplateUrl(value)) continue;
+    if (isTemplateSrcSetProp(key) && !isSafeTemplateSrcSet(value)) continue;
+    if (isTemplatePaintProp(key) && !isSafeTemplatePaintValue(value)) {
+      continue;
+    }
+    if (normalizedKey === "style") {
+      safeProps.style = sanitizeTemplateStyle(value);
+      continue;
+    }
+    safeProps[key] = value;
+  }
+  return safeProps;
+}
+
+// src/ui/Canvas/template-compiler.ts
+var WIRE_FORMAT_VERSION = 1;
+var MAX_CACHE_SIZE = 100;
+var MAX_MATERIALIZE_DEPTH = 20;
 var VM_SETUP = `
 var React = {
   createElement: function(type, props) {
@@ -484,52 +656,7 @@ function hashCode(str) {
   return hash.toString(36);
 }
 function validateTemplateCode(code) {
-  return !BLOCKED_PATTERNS.some((pattern) => pattern.test(code));
-}
-var SAFE_DATA_URI_PREFIXES = [
-  "data:image/png;",
-  "data:image/jpeg;",
-  "data:image/gif;",
-  "data:image/webp;",
-  "data:image/avif;"
-];
-function isSafeUrl(value) {
-  if (typeof value !== "string") return false;
-  if (value.startsWith("/") || value.startsWith("./") || value.startsWith("../")) return true;
-  if (SAFE_DATA_URI_PREFIXES.some((p) => value.startsWith(p))) return true;
-  try {
-    const url = new URL(value);
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-var BLOCKED_STYLE_PROPS = /* @__PURE__ */ new Set([
-  "backgroundImage",
-  "background",
-  "listStyleImage",
-  "content",
-  "borderImage",
-  "borderImageSource",
-  "maskImage",
-  "mask",
-  "filter",
-  "cursor"
-]);
-function sanitizeStyle(style) {
-  if (!style || typeof style !== "object" || Array.isArray(style)) return {};
-  const safe = {};
-  for (const [k, v] of Object.entries(style)) {
-    if (BLOCKED_STYLE_PROPS.has(k)) continue;
-    if (typeof v === "string" && /url\s*\(/i.test(v)) continue;
-    if (k === "position" && typeof v === "string" && /fixed|sticky/i.test(v)) continue;
-    if (k === "zIndex") {
-      const n = typeof v === "number" ? v : parseInt(String(v), 10);
-      if (isNaN(n) || n > 9998) continue;
-    }
-    safe[k] = v;
-  }
-  return safe;
+  return findBlockedTemplatePattern(code) === null;
 }
 function materialize(node, depth = 0) {
   if (depth > MAX_MATERIALIZE_DEPTH) return null;
@@ -557,18 +684,8 @@ function materialize(node, depth = 0) {
     const type = String(d.type ?? "");
     const props = d.props && typeof d.props === "object" ? d.props : {};
     const ch = Array.isArray(d.ch) ? d.ch : [];
-    if (!ALLOWED_ELEMENTS.has(type.toLowerCase())) return null;
-    const safeProps = {};
-    for (const [k, v] of Object.entries(props)) {
-      if (k.startsWith("on")) continue;
-      if (k === "dangerouslySetInnerHTML" || k === "ref") continue;
-      if ((k === "src" || k === "href") && !isSafeUrl(v)) continue;
-      if (k === "style") {
-        safeProps[k] = sanitizeStyle(v);
-        continue;
-      }
-      safeProps[k] = v;
-    }
+    if (!isAllowedTemplateElement(type)) return null;
+    const safeProps = sanitizeTemplateProps(props);
     const children = ch.map((c) => materialize(c, depth + 1));
     return import_react4.default.createElement(type, safeProps, ...children);
   }
@@ -852,19 +969,22 @@ function sanitizeImageData(image, safeUrl) {
     ) : image.sizes
   };
 }
-function renderFieldValue(key, val, fieldDef) {
+function renderFieldValue(key, val, fieldDef, imageAlt) {
   if (val == null || val === "") return null;
   const fieldType = fieldDef?.fieldType;
   if (fieldType === "image" || typeof val === "object" && val !== null && "url" in val) {
     const imgUrl = typeof val === "string" ? val : val?.url;
     const safeUrl = sanitizeUrl(imgUrl);
     if (!safeUrl) return null;
+    const embeddedAlt = typeof val === "object" && val !== null && "alt" in val && typeof val.alt === "string" ? val.alt : void 0;
+    const alt = imageAlt?.authored !== void 0 ? imageAlt.authored : embeddedAlt !== void 0 ? embeddedAlt : imageAlt?.fallback ?? "";
     if (fieldType === "image" && typeof val === "object" && val !== null) {
       return /* @__PURE__ */ import_react6.default.createElement(
         Image,
         {
           key,
           image: sanitizeImageData(val, safeUrl),
+          alt,
           fill: true,
           objectFit: "contain",
           style: { flex: 1, minHeight: 0, width: "100%" }
@@ -876,7 +996,7 @@ function renderFieldValue(key, val, fieldDef) {
       {
         key,
         src: safeUrl,
-        alt: "",
+        alt,
         draggable: false,
         style: { flex: 1, minHeight: 0, width: "100%", objectFit: "contain" }
       }
@@ -899,6 +1019,7 @@ function renderFieldValue(key, val, fieldDef) {
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
+  const authoredImageAlt = typeof d.fields?.alt === "string" ? d.fields.alt : void 0;
   return /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
@@ -909,7 +1030,12 @@ function DefaultDynamicNode({ data }) {
         flexDirection: "column"
       }
     },
-    d.fields && Object.entries(d.fields).filter(([, v]) => v != null && v !== "").map(([key, val]) => renderFieldValue(key, val))
+    d.fields && Object.entries(d.fields).filter(([, v]) => v != null && v !== "").map(
+      ([key, val]) => renderFieldValue(key, val, void 0, {
+        authored: authoredImageAlt,
+        fallback: d.label
+      })
+    )
   );
 }
 var TemplateErrorBoundary = class extends import_react6.default.Component {
@@ -939,13 +1065,14 @@ function EnhancedDynamicNode({
   height
 }) {
   useQuickJS();
+  const authoredImageAlt = typeof data.fields?.alt === "string" ? data.fields.alt : void 0;
   if (typeDef.template) {
     const Component = compileTemplate(typeDef.template, typeDef.slug);
     if (Component) {
       return /* @__PURE__ */ import_react6.default.createElement(
         "div",
         {
-          className: `flow-node flow-node--${typeDef.slug}${typeDef.transparentBackground ? " flow-node--transparent-bg" : ""}`,
+          className: `flow-node flow-node--${typeDef.slug}${typeDef.transparentBackground ? "flow-node--transparent-bg" : ""}`,
           style: { width: "100%", height: "100%" }
         },
         /* @__PURE__ */ import_react6.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react6.default.createElement(
@@ -976,7 +1103,10 @@ function EnhancedDynamicNode({
     typeDef.fields.map((f) => {
       const val = data.fields[f.name];
       if (val == null || val === "") return null;
-      return renderFieldValue(f.name, val, f);
+      return renderFieldValue(f.name, val, f, {
+        authored: authoredImageAlt,
+        fallback: data.label
+      });
     })
   );
 }
@@ -1022,6 +1152,90 @@ function DefaultFrameNode({ data }) {
     )
   );
 }
+var DEFAULT_SHAPE_COLOR = "#dbeafe";
+var SHAPE_STROKE = "#334155";
+function ShapeGeometry({ shape, color }) {
+  const common = {
+    fill: color,
+    stroke: SHAPE_STROKE,
+    strokeWidth: 2,
+    vectorEffect: "non-scaling-stroke"
+  };
+  switch (shape) {
+    case "terminator":
+      return /* @__PURE__ */ import_react6.default.createElement("rect", { x: "1", y: "1", width: "198", height: "98", rx: "49", ...common });
+    case "decision":
+      return /* @__PURE__ */ import_react6.default.createElement("polygon", { points: "100,1 199,50 100,99 1,50", ...common });
+    case "io":
+      return /* @__PURE__ */ import_react6.default.createElement("polygon", { points: "25,1 199,1 175,99 1,99", ...common });
+    case "subprocess":
+      return /* @__PURE__ */ import_react6.default.createElement("g", null, /* @__PURE__ */ import_react6.default.createElement("rect", { x: "1", y: "1", width: "198", height: "98", rx: "3", ...common }), /* @__PURE__ */ import_react6.default.createElement(
+        "path",
+        {
+          d: "M20 1V99M180 1V99",
+          fill: "none",
+          stroke: SHAPE_STROKE,
+          strokeWidth: "2",
+          vectorEffect: "non-scaling-stroke"
+        }
+      ));
+    case "process":
+    default:
+      return /* @__PURE__ */ import_react6.default.createElement("rect", { x: "1", y: "1", width: "198", height: "98", rx: "3", ...common });
+  }
+}
+function DefaultShapeNode({ data }) {
+  const shapeData = data;
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      className: `flow-node flow-node--shape flow-node--shape-${shapeData.shape}`,
+      style: { width: "100%", height: "100%", position: "relative" },
+      "data-shape": shapeData.shape
+    },
+    /* @__PURE__ */ import_react6.default.createElement(
+      "svg",
+      {
+        "aria-hidden": "true",
+        focusable: "false",
+        viewBox: "0 0 200 100",
+        preserveAspectRatio: "none",
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ import_react6.default.createElement(
+        ShapeGeometry,
+        {
+          shape: shapeData.shape,
+          color: shapeData.color ?? DEFAULT_SHAPE_COLOR
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react6.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: "12%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          color: "#0f172a",
+          fontSize: 12,
+          fontWeight: 600,
+          textAlign: "center",
+          wordBreak: "break-word"
+        }
+      },
+      shapeData.label
+    )
+  );
+}
 
 // src/ui/Canvas/field-helpers.ts
 function getImageField(fields, name) {
@@ -1234,9 +1448,12 @@ var import_react12 = require("@xyflow/react");
 
 // src/ui/Canvas/node-types-factory.tsx
 var import_react7 = __toESM(require("react"), 1);
+function areNodePropsEqual(prev, next) {
+  return prev.id === next.id && prev.data === next.data && prev.selected === next.selected && prev.dragging === next.dragging && prev.width === next.width && prev.height === next.height;
+}
 function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode) {
   const types = {};
-  types.dynamic = ((props) => {
+  const DynamicNode = (props) => {
     const d = props.data;
     const typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug);
     const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug];
@@ -1285,8 +1502,12 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
       );
     }
     return content;
-  });
-  types.frame = frameRenderer ? ((props) => {
+  };
+  types.dynamic = import_react7.default.memo(
+    DynamicNode,
+    areNodePropsEqual
+  );
+  const FrameNode = frameRenderer ? (props) => {
     const d = props.data;
     const Renderer = frameRenderer;
     return /* @__PURE__ */ import_react7.default.createElement(
@@ -1302,7 +1523,10 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         height: props.height
       }
     );
-  }) : DefaultFrameNode;
+  } : DefaultFrameNode;
+  types.frame = import_react7.default.memo(FrameNode, areNodePropsEqual);
+  const ShapeNode = (props) => /* @__PURE__ */ import_react7.default.createElement(DefaultShapeNode, { ...props });
+  types.shape = import_react7.default.memo(ShapeNode, areNodePropsEqual);
   return types;
 }
 function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
@@ -1512,18 +1736,82 @@ function FocusHandler({
   );
 }
 
+// src/ui/Canvas/accessibility.ts
+var CANVAS_ACCESSIBILITY_LABELS = {
+  ko: {
+    canvas: "\uCE94\uBC84\uC2A4 \uB2E4\uC774\uC5B4\uADF8\uB7A8",
+    node: "\uB178\uB4DC",
+    frame: "\uD504\uB808\uC784",
+    ariaLabelConfig: {
+      "node.a11yDescription.default": "\uCE94\uBC84\uC2A4 \uB2E4\uC774\uC5B4\uADF8\uB7A8\uC758 \uB178\uB4DC\uC785\uB2C8\uB2E4.",
+      "node.a11yDescription.keyboardDisabled": "\uCE94\uBC84\uC2A4 \uB2E4\uC774\uC5B4\uADF8\uB7A8\uC758 \uB178\uB4DC\uC785\uB2C8\uB2E4.",
+      "edge.a11yDescription.default": "\uCE94\uBC84\uC2A4 \uB2E4\uC774\uC5B4\uADF8\uB7A8\uC758 \uC5F0\uACB0\uC120\uC785\uB2C8\uB2E4.",
+      "controls.ariaLabel": "\uCE94\uBC84\uC2A4 \uC81C\uC5B4\uD310",
+      "controls.zoomIn.ariaLabel": "\uD655\uB300",
+      "controls.zoomOut.ariaLabel": "\uCD95\uC18C",
+      "controls.fitView.ariaLabel": "\uD654\uBA74\uC5D0 \uB9DE\uCD94\uAE30",
+      "controls.interactive.ariaLabel": "\uC0C1\uD638\uC791\uC6A9 \uC804\uD658",
+      "minimap.ariaLabel": "\uBBF8\uB2C8\uB9F5",
+      "handle.ariaLabel": "\uC5F0\uACB0\uC810"
+    }
+  },
+  en: {
+    canvas: "Canvas diagram",
+    node: "Node",
+    frame: "Frame",
+    ariaLabelConfig: {
+      "node.a11yDescription.default": "A node in the canvas diagram.",
+      "node.a11yDescription.keyboardDisabled": "A node in the canvas diagram.",
+      "edge.a11yDescription.default": "A connection in the canvas diagram.",
+      "controls.ariaLabel": "Canvas controls",
+      "controls.zoomIn.ariaLabel": "Zoom in",
+      "controls.zoomOut.ariaLabel": "Zoom out",
+      "controls.fitView.ariaLabel": "Fit view",
+      "controls.interactive.ariaLabel": "Toggle interactivity",
+      "minimap.ariaLabel": "Mini map",
+      "handle.ariaLabel": "Handle"
+    }
+  }
+};
+function nodeAriaLabel(node, labels) {
+  const explicitLabel = typeof node.ariaLabel === "string" ? node.ariaLabel.trim() : "";
+  if (explicitLabel) return explicitLabel;
+  const isFrame = node.type === "frame";
+  const label = node.data?.label?.trim();
+  if (!label) return isFrame ? labels.frame : labels.node;
+  return isFrame ? `${label} (${labels.frame})` : label;
+}
+
 // src/ui/Canvas/CanvasRenderer.tsx
+function usePrefersReducedMotion() {
+  const query = "(prefers-reduced-motion: reduce)";
+  const [prefersReducedMotion, setPrefersReducedMotion] = import_react11.default.useState(
+    () => typeof window !== "undefined" && window.matchMedia?.(query).matches
+  );
+  import_react11.default.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = (event) => setPrefersReducedMotion(event.matches);
+    setPrefersReducedMotion(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
 var NullFrameRenderer = () => null;
 function CanvasRenderer({
   data,
   className,
   style,
+  ariaLabel,
+  locale = "en",
   nodeRenderers,
   nodeTypeDefs,
   edgeTypeDefs,
   background = false,
   interactive = false,
   fitView = true,
+  onlyRenderVisibleElements = true,
   onNodeClick,
   onNodeDoubleClick,
   onNodeContextMenu,
@@ -1551,6 +1839,8 @@ function CanvasRenderer({
   minZoom: minZoomProp,
   maxZoom: maxZoomProp
 }) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const accessibilityLabels = CANVAS_ACCESSIBILITY_LABELS[locale];
   const resolvedFrameRenderer = hideFrames ? NullFrameRenderer : frameRenderer;
   const nodeTypeDefsMap = import_react11.default.useMemo(() => {
     if (!nodeTypeDefs?.length) return void 0;
@@ -1568,7 +1858,13 @@ function CanvasRenderer({
       nodeWrapper,
       renderNode
     ),
-    [nodeRenderers, nodeTypeDefsMap, resolvedFrameRenderer, nodeWrapper, renderNode]
+    [
+      nodeRenderers,
+      nodeTypeDefsMap,
+      resolvedFrameRenderer,
+      nodeWrapper,
+      renderNode
+    ]
   );
   const customEdgeTypes = import_react11.default.useMemo(
     () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
@@ -1591,6 +1887,21 @@ function CanvasRenderer({
     }
     return edges;
   }, [data?.edges, edgeTypeDefsMap, edgeRenderers]);
+  const accessibleNodes = import_react11.default.useMemo(
+    () => (data?.nodes ?? []).map((node) => ({
+      ...node,
+      ...node.type === "shape" ? {
+        style: {
+          ...node.style,
+          background: "transparent",
+          border: "none",
+          padding: 0
+        }
+      } : {},
+      ariaLabel: nodeAriaLabel(node, accessibilityLabels)
+    })),
+    [data?.nodes, accessibilityLabels]
+  );
   const translateExtent = import_react11.default.useMemo(() => {
     if (translateExtentProp) return translateExtentProp;
     const es = clampBounds ?? bounds;
@@ -1625,6 +1936,8 @@ function CanvasRenderer({
   return /* @__PURE__ */ import_react11.default.createElement(import_react12.ReactFlowProvider, null, /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
+      role: "region",
+      "aria-label": ariaLabel ?? accessibilityLabels.canvas,
       className,
       style: {
         width: "100%",
@@ -1636,12 +1949,13 @@ function CanvasRenderer({
     /* @__PURE__ */ import_react11.default.createElement(
       import_react12.ReactFlow,
       {
-        nodes: data.nodes ?? [],
+        nodes: accessibleNodes,
         edges: styledEdges,
         nodeTypes,
         edgeTypes: customEdgeTypes,
         defaultViewport: resolvedDefaultViewport,
         fitView: bounds ? false : fitView,
+        onlyRenderVisibleElements,
         translateExtent: activeExtent,
         onNodeClick,
         onNodeDoubleClick,
@@ -1655,13 +1969,15 @@ function CanvasRenderer({
         nodesDraggable: interactive,
         nodesConnectable: false,
         elementsSelectable: interactive || !!onNodeClick || !!onNodeDoubleClick || !!onEdgeClick,
+        autoPanOnSelection: false,
         panOnDrag: interactive,
         zoomOnScroll: interactive,
         zoomOnPinch: interactive,
         zoomOnDoubleClick: false,
         minZoom: minZoomProp,
         maxZoom: maxZoomProp,
-        proOptions: { hideAttribution: true }
+        proOptions: { hideAttribution: true },
+        ariaLabelConfig: accessibilityLabels.ariaLabelConfig
       },
       mergedCSS && /* @__PURE__ */ import_react11.default.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
       background && /* @__PURE__ */ import_react11.default.createElement(import_react12.Background, null),
@@ -1677,7 +1993,7 @@ function CanvasRenderer({
         {
           bounds,
           padding: focusPadding ?? 0.1,
-          animation: focusAnimation ?? true,
+          animation: prefersReducedMotion ? false : focusAnimation ?? true,
           mode: focusMode,
           responsive: responsiveFit ?? true,
           extent: translateExtent,