@multiplatform.one/node-graph 7.7.2

package/dist/cjs/theme/faces.native.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var faces_exports = {};
+__export(faces_exports, {
+  corruptFirstFamily: () => corruptFirstFamily,
+  faceBytes: () => faceBytes,
+  graphFaceCeilingBytes: () => graphFaceCeilingBytes,
+  graphFaceCss: () => graphFaceCss,
+  graphFaces: () => graphFaces,
+  probeFamily: () => probeFamily,
+  probeRenderedFamily: () => probeRenderedFamily,
+  splitFontStack: () => splitFontStack
+});
+module.exports = __toCommonJS(faces_exports);
+var graphFaces = [{
+  id: "inter-400",
+  family: "Inter",
+  weight: 400,
+  style: "normal",
+  category: "sans-serif",
+  source: "apps/storybook/public/fonts/inter-400.woff2"
+}, {
+  id: "inter-700",
+  family: "Inter",
+  weight: 700,
+  style: "normal",
+  category: "sans-serif",
+  source: "apps/storybook/public/fonts/inter-700.woff2"
+}];
+var graphFaceCeilingBytes = 96 * 1024;
+function faceBytes(faces) {
+  return faces.reduce(function (total, face) {
+    return total + face.byteLength;
+  }, 0);
+}
+function splitFontStack(stack) {
+  return stack.split(",").map(function (part) {
+    return part.trim().replace(/^["']|["']$/g, "").trim();
+  }).filter(function (part) {
+    return part.length > 0;
+  });
+}
+var absentSuffix = "\xA0mp-absent";
+function corruptFirstFamily(stack) {
+  var families = splitFontStack(stack);
+  if (families.length === 0) return stack;
+  var [first, ...rest] = families;
+  var broken = `"${first}${absentSuffix}"`;
+  return [broken, ...rest.map(function (name) {
+    return /\s/.test(name) ? `"${name}"` : name;
+  })].join(", ");
+}
+function probeFamily(param) {
+  var {
+    stack,
+    measure
+  } = param;
+  var widthStack = measure(stack);
+  var corrupted = corruptFirstFamily(stack);
+  var widthFirstCorrupted = measure(corrupted);
+  var hasFallback = splitFontStack(stack).length > 1;
+  var measured = widthStack > 0 && widthFirstCorrupted > 0;
+  var conclusive = hasFallback && measured;
+  return {
+    stack,
+    widthStack,
+    widthFirstCorrupted,
+    matched: conclusive && widthStack !== widthFirstCorrupted,
+    conclusive
+  };
+}
+var probeText = "AaBbGgQqRrWw0123456789";
+function canvasMeasurer(fontSize, fontWeight) {
+  if (typeof document === "undefined") return null;
+  var context = document.createElement("canvas").getContext("2d");
+  if (!context) return null;
+  return function (stack) {
+    context.font = `${fontWeight} ${fontSize} ${stack}`;
+    return context.measureText(probeText).width;
+  };
+}
+function probeRenderedFamily(el) {
+  var empty = {
+    stack: "",
+    widthStack: 0,
+    widthFirstCorrupted: 0,
+    matched: false,
+    conclusive: false
+  };
+  if (typeof window === "undefined") return empty;
+  var style = window.getComputedStyle(el);
+  var stack = style.fontFamily;
+  if (!stack) return empty;
+  var measure = canvasMeasurer(style.fontSize || "16px", style.fontWeight || "400");
+  if (!measure) return {
+    ...empty,
+    stack
+  };
+  return probeFamily({
+    stack,
+    measure
+  });
+}
+function graphFaceCss(faces, assetUris) {
+  return faces.map(function (face) {
+    var uri = assetUris === null || assetUris === void 0 ? void 0 : assetUris[face.id];
+    var src = uri ? `url("${uri}")` : `url("data:font/woff2;base64,${face.base64}")`;
+    return ["@font-face {", `  font-family: "${face.family}";`, `  font-style: ${face.style};`, `  font-weight: ${face.weight};`, "  font-display: block;", `  src: ${src} format("woff2");`, "}"].join("\n");
+  }).join("\n");
+}
+//# sourceMappingURL=faces.native.js.map

package/dist/cjs/theme/faces.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","faces_exports","__export","corruptFirstFamily","faceBytes","graphFaceCeilingBytes","graphFaceCss","graphFaces","probeFamily","probeRenderedFamily","splitFontStack","module","exports","id","family","weight","style","category","source","faces","reduce","total","face","byteLength","stack","split","map","part","trim","replace","filter","length","absentSuffix","families","first","rest","broken","name","test","join","param","measure","widthStack","corrupted","widthFirstCorrupted","hasFallback","measured","conclusive","matched","probeText","canvasMeasurer","fontSize","fontWeight","document","context","createElement","getContext","font","measureText","width","el","empty","window","getComputedStyle","fontFamily"],"sources":["../../../src/theme/faces.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/theme/graphVars.cjs

@@ -0,0 +1,318 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var graphVars_exports = {};
+__export(graphVars_exports, {
+  edgeStrokeWidthPx: () => edgeStrokeWidthPx,
+  elevationBoxShadow: () => elevationBoxShadow,
+  graphCssVars: () => graphCssVars,
+  graphTransitionCss: () => graphTransitionCss,
+  graphVarCss: () => graphVarCss,
+  graphVarValues: () => graphVarValues,
+  handlePaintedPx: () => handlePaintedPx,
+  spaceTokenPx: () => spaceTokenPx,
+  withAlpha: () => withAlpha,
+  xyVarAllowlist: () => xyVarAllowlist
+});
+module.exports = __toCommonJS(graphVars_exports);
+var import_theme = require("@multiplatform.one/theme");
+const xyVarAllowlist = {
+  "--xy-node-background-color": "binds only to .react-flow__node-input/-default/-output/-group; a Tamagui GraphNode carries none of those classes and takes its fill from the knobProps spread",
+  "--xy-node-border": "same four built-in node classes; a GraphNode's border comes from knobProps.controlBorderOutlined / .surface",
+  "--xy-node-border-radius": "same four built-in node classes; a GraphNode's radius rides the CONTAINER-CAP law in graphNode.ts",
+  "--xy-node-color": "same four built-in node classes; a GraphNode's text colour comes from knobProps.body",
+  "--xy-node-boxshadow-hover": "same four built-in node classes, hover only; a GraphNode's elevation comes from knobProps.elevationChrome",
+  "--xy-node-boxshadow-selected": "same four built-in node classes, selected only; selection chrome is painted by GraphNode itself",
+  "--xy-node-group-background-color": "binds only to .react-flow__node-group; this package registers no group node type"
+};
+const spaceTokenPx = {
+  $0: 0,
+  $1: 2,
+  $2: 7,
+  $3: 13,
+  $4: 18,
+  $5: 24,
+  $6: 32
+};
+const graphTransitionCss = {
+  bouncy: "all ease-in 200ms",
+  lazy: "all ease-in 600ms",
+  slow: "all ease-in 500ms",
+  medium: "all ease-in 300ms",
+  quick: "all ease-in 100ms",
+  tooltip: "all ease-in 400ms",
+  snappy: "all ease-out 80ms",
+  gentle: "all ease-in-out 450ms"
+};
+const handlePaintedPx = {
+  small: 8,
+  medium: 10,
+  large: 12
+};
+const edgeStrokeWidthPx = {
+  "0": 1,
+  "0.5": 1.5,
+  "1": 2,
+  "2": 3
+};
+function clamp255(value) {
+  return Math.max(0, Math.min(255, Math.round(value)));
+}
+function roundAlpha(value) {
+  return Math.round(Math.max(0, Math.min(1, value)) * 1e3) / 1e3;
+}
+function withAlpha(color2, alpha) {
+  if (!color2) return void 0;
+  const text = color2.trim();
+  const a = roundAlpha(alpha);
+  const hex = /^#([0-9a-fA-F]{3,8})$/.exec(text);
+  if (hex) {
+    const digits = hex[1];
+    let r;
+    let g;
+    let b;
+    if (digits.length === 3 || digits.length === 4) {
+      r = Number.parseInt(digits[0] + digits[0], 16);
+      g = Number.parseInt(digits[1] + digits[1], 16);
+      b = Number.parseInt(digits[2] + digits[2], 16);
+    } else if (digits.length === 6 || digits.length === 8) {
+      r = Number.parseInt(digits.slice(0, 2), 16);
+      g = Number.parseInt(digits.slice(2, 4), 16);
+      b = Number.parseInt(digits.slice(4, 6), 16);
+    } else {
+      return void 0;
+    }
+    return `rgba(${clamp255(r)}, ${clamp255(g)}, ${clamp255(b)}, ${a})`;
+  }
+  const rgb = /^rgba?\(([^)]+)\)$/.exec(text);
+  if (rgb) {
+    const parts = rgb[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3) return void 0;
+    return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${a})`;
+  }
+  const hsl = /^hsla?\(([^)]+)\)$/.exec(text);
+  if (hsl) {
+    const parts = hsl[1].split(/[,/]+/).map(part => part.trim()).filter(Boolean);
+    if (parts.length < 3) return void 0;
+    return `hsla(${parts[0]}, ${parts[1]}, ${parts[2]}, ${a})`;
+  }
+  return void 0;
+}
+function toCss(value, theme) {
+  if (!value) return void 0;
+  if (value.startsWith("$")) return theme.css(value.slice(1));
+  return value;
+}
+function warnOnce(message) {
+  if (process.env.NODE_ENV === "production") return;
+  console.warn(`[@multiplatform.one/node-graph] ${message}`);
+}
+function elevationBoxShadow(resolved, theme) {
+  const chrome = resolved.knobProps.elevationChrome;
+  const fromWeb = chrome.style?.boxShadow;
+  if (fromWeb) {
+    return {
+      css: fromWeb,
+      colors: fromWeb.match(/rgba?\([^)]*\)/g) ?? []
+    };
+  }
+  if (!chrome.shadowColor || chrome.shadowRadius == null) return {
+    css: "none",
+    colors: []
+  };
+  const raw = chrome.shadowColor.startsWith("$") ? theme.raw(chrome.shadowColor.slice(1)) : chrome.shadowColor;
+  const tinted = withAlpha(raw, chrome.shadowOpacity ?? 0.15);
+  if (!tinted) {
+    warnOnce(`elevation shadow colour ${JSON.stringify(chrome.shadowColor)} is not a literal colour this can blend, so --xy-controls-box-shadow falls back to none`);
+    return {
+      css: "none",
+      colors: []
+    };
+  }
+  const offsetY = chrome.shadowOffset?.height ?? 0;
+  const offsetX = chrome.shadowOffset?.width ?? 0;
+  return {
+    css: `${offsetX}px ${offsetY}px ${chrome.shadowRadius}px ${tinted}`,
+    colors: [tinted]
+  };
+}
+function color(value, fallback) {
+  return {
+    kind: "color",
+    color: value ?? fallback
+  };
+}
+function graphVarValues(resolved, theme, options) {
+  const {
+    knobProps,
+    control,
+    text
+  } = resolved;
+  const themeColor = (key, fallback = "currentColor") => theme.css(key) ?? fallback;
+  const outline = themeColor("outlineColor", themeColor("borderColor"));
+  const bodyColor = toCss(knobProps.body.color, theme) ?? themeColor("color");
+  const hoverBackground = toCss(control.hoverKnobProps?.backgroundColor, theme);
+  const hoverColor = toCss(text.hoverKnobProps?.color, theme);
+  const edgeStrokeWidth = edgeStrokeWidthPx[String(knobProps.controlBorderFilled.borderWidth)] ?? 2;
+  const selectionFill = withAlpha(theme.raw("outlineColor") ?? theme.raw("borderColor"), 0.12);
+  const maskFill = withAlpha(theme.raw("color1"), 0.7);
+  const shadow = elevationBoxShadow(resolved, theme);
+  const handlePainted = handlePaintedPx[knobProps.size] ?? 10;
+  const handleHit = options?.pointer === "fine" ? Math.max(handlePainted, 24) : import_theme.MIN_PRESS_TARGET;
+  const nodeGap = spaceTokenPx[knobProps.gap.gap] ?? 18;
+  const nodePadding = spaceTokenPx[knobProps.panelPadding.padding] ?? 18;
+  return {
+    // ── edges ──
+    "--xy-edge-stroke": color(theme.css("color9"), "currentColor"),
+    "--xy-edge-stroke-selected": {
+      kind: "color",
+      color: outline
+    },
+    "--xy-edge-stroke-width": {
+      kind: "length",
+      px: edgeStrokeWidth
+    },
+    "--xy-connectionline-stroke": {
+      kind: "color",
+      color: outline
+    },
+    "--xy-connectionline-stroke-width": {
+      kind: "length",
+      px: edgeStrokeWidth + 1
+    },
+    "--xy-edge-label-background-color": color(toCss(knobProps.cardSurface.backgroundColor, theme), themeColor("color1")),
+    "--xy-edge-label-color": {
+      kind: "color",
+      color: bodyColor
+    },
+    // ── handles ──
+    "--xy-handle-background-color": color(theme.css("color1"), "transparent"),
+    "--xy-handle-border-color": color(theme.css("color8"), themeColor("borderColor")),
+    // ── selection ──
+    "--xy-selection-background-color": color(selectionFill, "transparent"),
+    "--xy-selection-border": {
+      kind: "composite",
+      css: `1px dashed ${outline}`,
+      colors: [outline]
+    },
+    // ── canvas ──
+    "--xy-background-color": color(toCss(knobProps.surface.backgroundColor, theme), themeColor("color1")),
+    "--xy-background-pattern-color": color(theme.css("color4"), themeColor("borderColor")),
+    // ── minimap ──
+    "--xy-minimap-background-color": color(toCss(knobProps.elevatedSurface.backgroundColor, theme), themeColor("color1")),
+    "--xy-minimap-node-background-color": color(theme.css("color6"), themeColor("borderColor")),
+    "--xy-minimap-node-stroke-color": color(theme.css("borderColor"), "currentColor"),
+    "--xy-minimap-node-stroke-width": {
+      kind: "length",
+      px: knobProps.surface.borderWidth
+    },
+    "--xy-minimap-mask-background-color": color(maskFill, "transparent"),
+    "--xy-minimap-mask-stroke-color": {
+      kind: "color",
+      color: outline
+    },
+    "--xy-minimap-mask-stroke-width": {
+      kind: "length",
+      px: import_theme.hairlineWidth
+    },
+    // ── controls ──
+    "--xy-controls-button-background-color": color(toCss(knobProps.elevatedSurface.backgroundColor, theme), themeColor("color1")),
+    "--xy-controls-button-background-color-hover": color(hoverBackground ?? theme.css("color4"), themeColor("borderColor")),
+    "--xy-controls-button-color": {
+      kind: "color",
+      color: bodyColor
+    },
+    "--xy-controls-button-color-hover": {
+      kind: "color",
+      color: hoverColor ?? bodyColor
+    },
+    "--xy-controls-button-border-color": color(theme.css("borderColor"), "currentColor"),
+    "--xy-controls-box-shadow": {
+      kind: "composite",
+      css: shadow.css,
+      colors: shadow.colors
+    },
+    // ── attribution / resize ──
+    "--xy-attribution-background-color": {
+      kind: "color",
+      color: "transparent"
+    },
+    "--xy-resize-background-color": {
+      kind: "color",
+      color: outline
+    },
+    // ── the mpo-owned layer, for what React Flow has no variable for ──
+    "--mpo-graph-handle-size": {
+      kind: "length",
+      px: handlePainted
+    },
+    "--mpo-graph-handle-hit": {
+      kind: "length",
+      px: handleHit
+    },
+    "--mpo-graph-guide-color": {
+      kind: "color",
+      color: outline
+    },
+    // hairlineWidth, NOT divided by pixelRatio: CSS px inside a WebView are
+    // already density-independent, and dividing would ask for a 0.167 px line
+    // on a 3x phone. A guide is a divider, which is what the token is for.
+    "--mpo-graph-guide-width": {
+      kind: "length",
+      px: import_theme.hairlineWidth
+    },
+    "--mpo-graph-node-gap": {
+      kind: "length",
+      px: nodeGap
+    },
+    "--mpo-graph-node-padding": {
+      kind: "length",
+      px: nodePadding
+    },
+    "--mpo-graph-port-spacing": {
+      kind: "length",
+      px: Math.max(handleHit, nodeGap)
+    },
+    "--mpo-graph-transition": {
+      kind: "composite",
+      css: knobProps.transition ? graphTransitionCss[String(knobProps.transition)] ?? "none" : "none",
+      colors: []
+    }
+  };
+}
+function graphVarCss(value) {
+  switch (value.kind) {
+    case "color":
+      return value.color;
+    case "length":
+      return `${value.px}px`;
+    default:
+      return value.css;
+  }
+}
+function graphCssVars(resolved, theme, options) {
+  const out = {};
+  for (const [name, value] of Object.entries(graphVarValues(resolved, theme, options))) {
+    out[name] = graphVarCss(value);
+  }
+  return out;
+}