@tldiagram/core-ui 1.87.0 → 1.89.7

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.87.0",
+  "version": "1.89.7",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Mertcikla/tld"
+    "url": "git+https://github.com/Mertcikla/tld.git"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/index.ts

@@ -99,7 +99,7 @@ export { HeaderProvider, useSetHeader, useHeader } from './components/HeaderCont
 export * from './types'
 
 // ─── Platform ────────────────────────────────────────────────────────────────
-export type { PlatformFeatures } from './platform/types'
+export type { PlatformFeatures, PlatformRouteContext } from './platform/types'
 export { platform as localPlatform } from './platform/local'
 export { PlatformProvider } from './platform/PlatformContext'
 export { usePlatform } from './platform/context'

package/src/pages/InfiniteZoom.tsx

@@ -18,7 +18,6 @@ import {
   useDisclosure,
   VStack,
 } from '@chakra-ui/react'
-import { useSetHeader } from '../components/HeaderContext'
 import { api } from '../api/client'
 import type { ExploreData, ViewLayer } from '../types'
 import { FitViewIcon as FitViewSvg, TagsIcon, EyeIcon, EyeOffIcon, FocusIcon as FocusSvg } from '../components/Icons'
@@ -40,7 +39,6 @@ const MINI_ONBOARDING_KEY = 'shared_zoom_onboarding_dismissed'
 // ── Inner component ────────────────────────────────────────────────
 function InfiniteZoomInner({ sharedToken, shareSlot }: Props) {
   const navigate = useNavigate()
-  const setHeader = useSetHeader()
 
   const [data, setData] = useState<ExploreData | null>(null)
   const [loading, setLoading] = useState(true)
@@ -111,11 +109,6 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props) {
     setHiddenTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag])
   }, [])
 
-  // Set page header
-  useEffect(() => {
-    setHeader({ node: <Text fontWeight="medium" fontSize="sm" color="gray.300">Explore</Text> })
-    return () => setHeader(null)
-  }, [setHeader])
   useEffect(() => {
     if (sharedToken && canvasReady && !localStorage.getItem(MINI_ONBOARDING_KEY)) {
       setShowMiniOnboarding(true)

package/src/pages/ViewEditor/index.tsx

@@ -860,9 +860,11 @@ function ViewEditorInner({
 
   // ── Dynamic viewport bounds ────────────────────────────────────────────────
   useEffect(() => {
+    const vw = window.innerWidth; const vh = window.innerHeight
+    const emptyExtent: [[number, number], [number, number]] = [[-vw, -vh], [vw, vh]]
     if (flowNodes.length === 0 && drawingPaths.length === 0) {
       setComputedMinZoom((prev) => prev === 0.05 ? prev : 0.05)
-      setComputedTranslateExtent((prev) => prev === undefined ? prev : undefined)
+      setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, emptyExtent) ? prev : emptyExtent)
       return
     }
     let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
@@ -875,17 +877,23 @@ function ViewEditorInner({
     }
     if (!isFinite(minX)) {
       setComputedMinZoom((prev) => prev === 0.05 ? prev : 0.05)
-      setComputedTranslateExtent((prev) => prev === undefined ? prev : undefined)
+      setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, emptyExtent) ? prev : emptyExtent)
       return
     }
-    const vw = window.innerWidth; const vh = window.innerHeight
     const bboxW = maxX - minX; const bboxH = maxY - minY
     let minZoom = Math.sqrt((0.12 * vw * vh) / Math.max(1, bboxW * bboxH))
     if (!isFinite(minZoom) || isNaN(minZoom) || minZoom <= 0) minZoom = 0.05
     const nextMinZoom = Math.max(0.05, Math.min(minZoom, 1))
     setComputedMinZoom((prev) => prev === nextMinZoom ? prev : nextMinZoom)
-    const pmX = Math.max(vw * 2, 2000); const pmY = Math.max(vh * 2, 2000)
-    const nextTranslateExtent: [[number, number], [number, number]] = [[minX - pmX, minY - pmY], [maxX + pmX, maxY + pmY]]
+    // Extent must be ≥ viewport at minZoom (else pan locks). Center on content bbox.
+    // Slack = content-proportional so user can always pan a bit past content edges.
+    const vwFlowMax = vw / nextMinZoom; const vhFlowMax = vh / nextMinZoom
+    const slackX = Math.max(bboxW * 0.5, 400)
+    const slackY = Math.max(bboxH * 0.5, 400)
+    const spanX = Math.max(bboxW + 2 * slackX, vwFlowMax + 2 * slackX)
+    const spanY = Math.max(bboxH + 2 * slackY, vhFlowMax + 2 * slackY)
+    const cx = (minX + maxX) / 2; const cy = (minY + maxY) / 2
+    const nextTranslateExtent: [[number, number], [number, number]] = [[cx - spanX / 2, cy - spanY / 2], [cx + spanX / 2, cy + spanY / 2]]
     setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, nextTranslateExtent) ? prev : nextTranslateExtent)
   }, [flowNodes, drawingPaths])
 
@@ -1133,7 +1141,7 @@ function ViewEditorInner({
                 onPaneContextMenu={onPaneContextMenu} onPaneClick={onPaneClick}
                 onPaneMouseMove={onPaneMouseMove}
                 onMoveStart={onMoveStart} onMove={onMove} onMoveEnd={onMoveEnd}
-                translateExtent={computedTranslateExtent} minZoom={computedMinZoom}
+                translateExtent={computedTranslateExtent} nodeExtent={computedTranslateExtent} minZoom={computedMinZoom} maxZoom={4}
                 onReconnect={onReconnect} onReconnectStart={onReconnectStart} onReconnectEnd={onReconnectEnd}
                 nodeTypes={nodeTypesMemo} edgeTypes={edgeTypesMemo}
                 nodesDraggable={canEdit} connectionMode={ConnectionMode.Loose} connectionRadius={25}

package/dist/favicon.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
-  <defs>
-    <clipPath id="roundsq">
-      <rect width="1024" height="1024" rx="224" ry="224" />
-    </clipPath>
-    <filter id="dshadow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="32" result="blur1" />
-      <feFlood flood-color="#63b3ed" flood-opacity="0.3" result="c1" />
-      <feComposite in="c1" in2="blur1" operator="in" result="glow1" />
-      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur2" />
-      <feFlood flood-color="#90cdf4" flood-opacity="0.5" result="c2" />
-      <feComposite in="c2" in2="blur2" operator="in" result="glow2" />
-      <feDropShadow dx="0" dy="20" stdDeviation="20" flood-color="#000" flood-opacity="0.9"
-        result="drop" />
-      <feMerge>
-        <feMergeNode in="glow1" />
-        <feMergeNode in="glow2" />
-        <feMergeNode in="SourceGraphic" />
-      </feMerge>
-    </filter>
-    <linearGradient id="dgrad" x1="0" y1="0" x2="0.6" y2="1">
-      <stop offset="0" stop-color="#90cdf4" />
-      <stop offset="0.45" stop-color="#63b3ed" />
-      <stop offset="1" stop-color="#2b6cb0" />
-    </linearGradient>
-  </defs>
-  <g clip-path="url(#roundsq)" transform="matrix(1, 0, 0, 1, -1.4210854715202004e-14, 0)">
-    <g filter="url(#dshadow)" transform="translate(78, 118) scale(0.8)" fill-rule="evenodd">
-      <path
-        d="M201 18s169-39 340-2c171 38 342 152 342 457S713 902 544 949c-170 48-344 19-344 19l1-566h302V217H201z M455 715c-67 83-122 141-62 48q23-35 33-62h-4a78 78 0 1 1 78-78q0 24-12 44-11 21-33 48"
-        fill="url(#dgrad)" />
-    </g>
-  </g>
-</svg>

package/dist/logo-bw.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
-  <defs>
-    <clipPath id="roundsq">
-      <rect width="1024" height="1024" rx="224" ry="224" />
-    </clipPath>
-  </defs>
-  <g clip-path="url(#roundsq)">
-    <g transform="translate(78, 118) scale(0.8)" fill-rule="evenodd">
-      <path
-        d="M201 18s169-39 340-2c171 38 342 152 342 457S713 902 544 949c-170 48-344 19-344 19l1-566h302V217H201z M455 715c-67 83-122 141-62 48q23-35 33-62h-4a78 78 0 1 1 78-78q0 24-12 44-11 21-33 48"
-        fill="#000000" />
-    </g>
-  </g>
-</svg>