@multiplatform.one/node-graph 7.11.0 → 7.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/node-graph",
-  "version": "7.11.0",
+  "version": "7.16.0",
   "description": "Node graph editor — React Flow on web, Tamagui knob-aware nodes, an Expo DOM host on native",
   "keywords": [
     "multiplatform",
@@ -13,7 +13,7 @@
   "author": "BitSpur <support@risserlabs.com> (https://risserlabs.com)",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/bitspur/frappe/multiplatform.one.git",
+    "url": "git+https://git.corp.bitspur.com/multiplatform.one/mpo.git",
     "directory": "public/node-graph"
   },
   "source": "src/index.ts",
@@ -80,16 +80,16 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^3.1.1",
-    "@multiplatform.one/forms": "7.11.0",
-    "@multiplatform.one/platform": "7.11.0",
-    "@multiplatform.one/theme": "7.11.0",
+    "@multiplatform.one/forms": "7.16.0",
+    "@multiplatform.one/platform": "7.16.0",
+    "@multiplatform.one/theme": "7.16.0",
     "@xyflow/react": "^12.11.5",
     "@xyflow/system": "0.0.81",
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.11.0",
-    "@multiplatform.one/test-utils": "7.11.0",
+    "@multiplatform.one/config": "7.16.0",
+    "@multiplatform.one/test-utils": "7.16.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.2",
     "@types/react-dom": "^19.2.3",
@@ -102,7 +102,7 @@
     "vitest": "^4.1.5"
   },
   "peerDependencies": {
-    "@multiplatform.one/components": "^7.11.0",
+    "@multiplatform.one/components": "^7.16.0",
     "expo": ">=55",
     "expo-haptics": "*",
     "react": "^19.1.0",

package/src/bench/Perf200.stories.tsx

@@ -48,8 +48,9 @@
 
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@multiplatform.one/forms";
 import { pressTargetStyle } from "@multiplatform.one/theme";
-import { Button, SizableText, XStack, YStack } from "tamagui";
+import { SizableText, XStack, YStack } from "tamagui";
 import type { FrameStats } from "../bench/frameSampler";
 import { gestureEndMark, gestureStartMark } from "../bench/frameSampler";
 import type { GraphEventWire, PerfReportWire } from "../dom/wire";

package/src/nodes/GraphPort.stories.tsx

@@ -19,10 +19,11 @@
  * hide the same warning when it is real.
  */
 
+import { Switch } from "@multiplatform.one/forms";
 import { Preset, Surface } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Label, SizableText, Switch, XStack, YStack } from "tamagui";
+import { SizableText, XStack, YStack } from "tamagui";
 // React Flow's own sheet FIRST: it carries `.react-flow__handle-left/right/
 // top/bottom`, the rules that translate a handle onto the node edge, and
 // nothing in this package reproduces them. Without it a port renders at its
@@ -166,32 +167,20 @@ export const Crowded: Story = {
     return (
       <YStack gap="$5">
         <XStack gap="$6" alignItems="center">
-          <XStack gap="$2" alignItems="center">
-            <Switch
-              id="coarse"
-              size="$2"
-              checked={coarsePointer}
-              onCheckedChange={(v) => setCoarsePointer(Boolean(v))}
-            >
-              <Switch.Thumb />
-            </Switch>
-            <Label htmlFor="coarse" size="$2">
-              coarse pointer (44pt pitch)
-            </Label>
-          </XStack>
-          <XStack gap="$2" alignItems="center">
-            <Switch
-              id="square"
-              size="$2"
-              checked={squareKnob}
-              onCheckedChange={(v) => setSquareKnob(Boolean(v))}
-            >
-              <Switch.Thumb />
-            </Switch>
-            <Label htmlFor="square" size="$2">
-              borderRadius: none — the port stays round anyway
-            </Label>
-          </XStack>
+          <Switch
+            id="coarse"
+            size="$2"
+            checked={coarsePointer}
+            onChange={setCoarsePointer}
+            label="coarse pointer (44pt pitch)"
+          />
+          <Switch
+            id="square"
+            size="$2"
+            checked={squareKnob}
+            onChange={setSquareKnob}
+            label="borderRadius: none — the port stays round anyway"
+          />
         </XStack>
         {/*
           CASCADES, on purpose. `cascade={false}` starts from `defaultKnobs` and
@@ -323,19 +312,13 @@ export const HitTarget: Story = {
       <YStack gap="$6">
         {/* biome-ignore lint/security/noDangerouslySetInnerHtml: story-local debug paint */}
         <style dangerouslySetInnerHTML={{ __html: hitDebugCss }} />
-        <XStack gap="$2" alignItems="center">
-          <Switch
-            id="hit-debug"
-            size="$2"
-            checked={debug}
-            onCheckedChange={(v) => setDebug(Boolean(v))}
-          >
-            <Switch.Thumb />
-          </Switch>
-          <Label htmlFor="hit-debug" size="$2">
-            paint the ::after hit region
-          </Label>
-        </XStack>
+        <Switch
+          id="hit-debug"
+          size="$2"
+          checked={debug}
+          onChange={setDebug}
+          label="paint the ::after hit region"
+        />
 
         <YStack className={debug ? hitDebugClass : undefined} gap="$5">
           {([true, false] as const).map((coarsePointer) => (

package/src/nodes/Overview.stories.tsx

@@ -19,9 +19,10 @@
  * both sides of the crossover rather than a squint at a pixel.
  */
 
+import { Switch } from "@multiplatform.one/forms";
 import { Preset, Surface } from "@multiplatform.one/theme";
 import { useState } from "react";
-import { Label, SizableText, Switch, View, XStack, YStack } from "tamagui";
+import { SizableText, View, XStack, YStack } from "tamagui";
 import type { BuiltinEdgeData } from "../edges/edgeKinds";
 import type { GraphDocument } from "../model/index";
 import { demoGraphSchema } from "../react-flow/demoNodeBody";
@@ -201,19 +202,13 @@ export const crossover = {
       <Preset>
         <Surface size="medium" density="comfortable">
           <YStack gap="$3" padding="$3">
-            <XStack gap="$2" alignItems="center">
-              <Switch
-                id="overview-zoom"
-                size="$2"
-                checked={high}
-                onCheckedChange={(v) => setHigh(Boolean(v))}
-              >
-                <Switch.Thumb />
-              </Switch>
-              <Label htmlFor="overview-zoom" size="$2">
-                overviewZoom 1 (everything is overview) instead of {defaultOverviewZoom}
-              </Label>
-            </XStack>
+            <Switch
+              id="overview-zoom"
+              size="$2"
+              checked={high}
+              onChange={setHigh}
+              label={`overviewZoom 1 (everything is overview) instead of ${defaultOverviewZoom}`}
+            />
             <View width="100%" height={560}>
               <NodeGraphWeb
                 schema={schema}