@tldiagram/core-ui 1.87.0 → 1.90.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.87.0",
+  "version": "1.90.1",
   "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

@@ -94,6 +94,11 @@ const nodeTypes = {
 }
 const edgeTypes = { default: ViewBezierConnector, contextStraightConnector: ContextStraightConnector, proxyConnectorEdge: ProxyConnectorEdge }
 const EMPTY_LINKS: ViewConnector[] = []
+const VIEW_EDITOR_MIN_ZOOM_FLOOR = 0.12
+const VIEW_EDITOR_EMPTY_EXTENT_RATIO = 0.75
+const VIEW_EDITOR_PAN_MARGIN_RATIO = 0.25
+const VIEW_EDITOR_PAN_MARGIN_MIN = 180
+const VIEW_EDITOR_PAN_MARGIN_MAX = 720
 
 function alphaColor(color: string, opacity: number): string {
   if (opacity >= 1) return color
@@ -808,7 +813,7 @@ function ViewEditorInner({
   // ── FitView ────────────────────────────────────────────────────────────────
   const fitViewRef = useRef(safeFitView)
   fitViewRef.current = safeFitView
-  const [computedMinZoom, setComputedMinZoom] = useState(0.05)
+  const [computedMinZoom, setComputedMinZoom] = useState(VIEW_EDITOR_MIN_ZOOM_FLOOR)
   const [computedTranslateExtent, setComputedTranslateExtent] = useState<[[number, number], [number, number]] | undefined>(undefined)
   const {
     clampedRevealProgress,
@@ -860,9 +865,14 @@ function ViewEditorInner({
 
   // ── Dynamic viewport bounds ────────────────────────────────────────────────
   useEffect(() => {
+    const vw = window.innerWidth; const vh = window.innerHeight
+    const emptyExtent: [[number, number], [number, number]] = [
+      [-vw * VIEW_EDITOR_EMPTY_EXTENT_RATIO, -vh * VIEW_EDITOR_EMPTY_EXTENT_RATIO],
+      [vw * VIEW_EDITOR_EMPTY_EXTENT_RATIO, vh * VIEW_EDITOR_EMPTY_EXTENT_RATIO],
+    ]
     if (flowNodes.length === 0 && drawingPaths.length === 0) {
-      setComputedMinZoom((prev) => prev === 0.05 ? prev : 0.05)
-      setComputedTranslateExtent((prev) => prev === undefined ? prev : undefined)
+      setComputedMinZoom((prev) => prev === VIEW_EDITOR_MIN_ZOOM_FLOOR ? prev : VIEW_EDITOR_MIN_ZOOM_FLOOR)
+      setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, emptyExtent) ? prev : emptyExtent)
       return
     }
     let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
@@ -874,18 +884,24 @@ function ViewEditorInner({
       for (const pt of p.points) { minX = Math.min(minX, pt.x); minY = Math.min(minY, pt.y); maxX = Math.max(maxX, pt.x); maxY = Math.max(maxY, pt.y) }
     }
     if (!isFinite(minX)) {
-      setComputedMinZoom((prev) => prev === 0.05 ? prev : 0.05)
-      setComputedTranslateExtent((prev) => prev === undefined ? prev : undefined)
+      setComputedMinZoom((prev) => prev === VIEW_EDITOR_MIN_ZOOM_FLOOR ? prev : VIEW_EDITOR_MIN_ZOOM_FLOOR)
+      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))
+    if (!isFinite(minZoom) || isNaN(minZoom) || minZoom <= 0) minZoom = VIEW_EDITOR_MIN_ZOOM_FLOOR
+    const nextMinZoom = Math.max(VIEW_EDITOR_MIN_ZOOM_FLOOR, 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.
+    // Keep only modest content-proportional slack so the canvas stays discoverable.
+    const vwFlowMax = vw / nextMinZoom; const vhFlowMax = vh / nextMinZoom
+    const slackX = Math.min(Math.max(bboxW * VIEW_EDITOR_PAN_MARGIN_RATIO, VIEW_EDITOR_PAN_MARGIN_MIN), VIEW_EDITOR_PAN_MARGIN_MAX)
+    const slackY = Math.min(Math.max(bboxH * VIEW_EDITOR_PAN_MARGIN_RATIO, VIEW_EDITOR_PAN_MARGIN_MIN), VIEW_EDITOR_PAN_MARGIN_MAX)
+    const spanX = Math.max(bboxW + 2 * slackX, vwFlowMax)
+    const spanY = Math.max(bboxH + 2 * slackY, vhFlowMax)
+    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 +1149,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>