@tldiagram/core-ui 2.0.2 → 2.0.4

package/src/components/ViewFloatingMenu.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import type { ViewFloatingMenuSlots } from '../slots'
 
 import {
-  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, Slider, SliderTrack, SliderFilledTrack, SliderThumb, useDisclosure
+  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Switch, VStack, useDisclosure
 } from '@chakra-ui/react'
 import { DownloadIcon } from '@chakra-ui/icons'
 import {
@@ -15,12 +15,21 @@ import {
   CollapseExtrasIcon as CollapseExtrasSvg,
   FocusIcon as FocusSvg,
   TagsIcon,
+  ChevronDownIcon,
 } from './Icons'
 import { KbdHint } from './PanelUI'
 import { RedoSvg, UndoSvg } from './ViewDrawMenu'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Tag, ViewLayer } from '../types'
 
+const DENSITY_STOPS = [
+  { value: -2, label: 'Quiet' },
+  { value: -1, label: 'Lean' },
+  { value: 0, label: 'Normal' },
+  { value: 1, label: 'Rich' },
+  { value: 2, label: 'Full' },
+] as const
+
 export interface ViewFloatingMenuProps extends ViewFloatingMenuSlots {
   handleAddElementAtCenter: () => void
   drawingMode: boolean
@@ -105,7 +114,11 @@ function ViewFloatingMenu({
 }: ViewFloatingMenuProps) {
   const { canEdit } = useViewEditorContext()
   const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
+  const { isOpen: isFiltersOpen, onClose: onFiltersClose, onToggle: onFiltersToggle } = useDisclosure()
   const [draftDensityLevel, setDraftDensityLevel] = React.useState(densityLevel)
+  const activeDensityLabel = DENSITY_STOPS.find((stop) => stop.value === draftDensityLevel)?.label ?? 'Normal'
+  const showFilters = !hideFocusView || !!onDensityLevelChange
+  const hasActiveFilters = (!hideFocusView && focusMode) || (!!onDensityLevelChange && densityLevel !== 0)
 
   React.useEffect(() => {
     setDraftDensityLevel(densityLevel)
@@ -191,26 +204,152 @@ function ViewFloatingMenu({
         </>
       )}
 
-      {!hideFocusView && (
+      {showFilters && (
         <>
           <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-          <Tooltip label={focusMode ? 'Show context' : 'Focus on this view'} placement="top" openDelay={200}>
-            <Button
-              variant="ghost"
-              h="28px"
-              px={2.5}
-              color={focusMode ? 'var(--accent)' : 'gray.300'}
-              bg={focusMode ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
-              _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
-              onClick={() => onFocusModeChange(!focusMode)}
-            >
-              <HStack spacing={1.5}>
-                <FocusSvg />
-                <Text fontSize="11px" fontWeight="normal">Focus View</Text>
-                <Box w="6px" h="6px" rounded="full" bg={focusMode ? 'var(--accent)' : 'gray.500'} />
-              </HStack>
-            </Button>
-          </Tooltip>
+          <Popover isOpen={isFiltersOpen} onClose={onFiltersClose} placement="top" isLazy closeOnBlur>
+            <PopoverTrigger>
+              <Button
+                variant="ghost"
+                h="28px"
+                px={2.5}
+                color={isFiltersOpen || hasActiveFilters ? 'var(--accent)' : 'gray.300'}
+                bg={hasActiveFilters ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+                _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                onClick={onFiltersToggle}
+                aria-label="Open filters"
+              >
+                <HStack spacing={1.5}>
+                  <FocusSvg />
+                  <Text fontSize="11px" fontWeight={hasActiveFilters ? 'semibold' : 'normal'}>Filters</Text>
+                  {hasActiveFilters && <Box w="6px" h="6px" rounded="full" bg="var(--accent)" />}
+                  <ChevronDownIcon size={10} strokeWidth={3.5} />
+                </HStack>
+              </Button>
+            </PopoverTrigger>
+            <Portal>
+              <PopoverContent
+                bg="linear-gradient(180deg, rgba(var(--bg-main-rgb), 0.98) 0%, rgba(var(--bg-main-rgb), 0.92) 100%)"
+                backdropFilter="blur(22px)"
+                borderColor="whiteAlpha.100"
+                boxShadow="0 18px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04)"
+                borderRadius="lg"
+                width="280px"
+                _focus={{ boxShadow: 'none' }}
+              >
+                <PopoverBody p={3}>
+                  <VStack align="stretch" spacing={3}>
+                    {!hideFocusView && (
+                      <HStack
+                        justify="space-between"
+                        spacing={3}
+                        px={2.5}
+                        py={2}
+                        rounded="md"
+                        bg={focusMode ? 'rgba(var(--accent-rgb), 0.10)' : 'whiteAlpha.50'}
+                        border="1px solid"
+                        borderColor={focusMode ? 'rgba(var(--accent-rgb), 0.22)' : 'whiteAlpha.100'}
+                      >
+                        <HStack spacing={2.5} minW={0}>
+                          <Box color={focusMode ? 'var(--accent)' : 'gray.400'} flexShrink={0}>
+                            <FocusSvg />
+                          </Box>
+                          <Box minW={0}>
+                            <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Hide External</Text>
+                          </Box>
+                        </HStack>
+                        <Switch
+                          size="sm"
+                          isChecked={focusMode}
+                          onChange={(event) => onFocusModeChange(event.target.checked)}
+                          colorScheme="teal"
+                          flexShrink={0}
+                          aria-label="Toggle external view"
+                        />
+                      </HStack>
+                    )}
+
+                    {onDensityLevelChange && (
+                      <Box
+                        px={2.5}
+                        py={2.5}
+                        rounded="md"
+                        bg="whiteAlpha.50"
+                        border="1px solid"
+                        borderColor="whiteAlpha.100"
+                      >
+                        <HStack justify="space-between" mb={2.5}>
+                          <Box>
+                            <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Density</Text>
+                            <Text fontSize="10px" color="whiteAlpha.600">Control how much detail is shown</Text>
+                          </Box>
+                          <Text
+                            fontSize="10px"
+                            fontWeight="bold"
+                            color="var(--accent)"
+                            bg="rgba(var(--accent-rgb), 0.10)"
+                            border="1px solid"
+                            borderColor="rgba(var(--accent-rgb), 0.18)"
+                            rounded="full"
+                            px={2}
+                            py={0.5}
+                          >
+                            {activeDensityLabel}
+                          </Text>
+                        </HStack>
+                        <Box px={1} pt={1} pb={0.5}>
+                          <Slider
+                            aria-label="Density"
+                            min={-2}
+                            max={2}
+                            step={1}
+                            value={draftDensityLevel}
+                            onChange={setDraftDensityLevel}
+                            onChangeEnd={(value) => {
+                              setDraftDensityLevel(value)
+                              onDensityLevelChange(value)
+                            }}
+                            focusThumbOnChange={false}
+                          >
+                            <SliderTrack h="4px" bg="whiteAlpha.200">
+                              <SliderFilledTrack bg="var(--accent)" />
+                            </SliderTrack>
+                            {DENSITY_STOPS.map((stop) => (
+                              <Box
+                                key={stop.value}
+                                position="absolute"
+                                left={`${((stop.value + 2) / 4) * 100}%`}
+                                top="50%"
+                                transform="translate(-50%, -50%)"
+                                w={stop.value === draftDensityLevel ? '6px' : '2px'}
+                                h={stop.value === draftDensityLevel ? '6px' : '10px'}
+                                rounded="full"
+                                bg={draftDensityLevel >= stop.value ? 'var(--accent)' : 'whiteAlpha.500'}
+                                pointerEvents="none"
+                              />
+                            ))}
+                            <SliderThumb boxSize="14px" bg="white" border="2px solid" borderColor="var(--accent)" />
+                          </Slider>
+                          <HStack justify="space-between" mt={2} px={0.5}>
+                            {DENSITY_STOPS.map((stop) => (
+                              <Text
+                                key={stop.value}
+                                fontSize="9px"
+                                fontWeight={stop.value === draftDensityLevel ? 'bold' : 'medium'}
+                                color={stop.value === draftDensityLevel ? 'whiteAlpha.900' : 'whiteAlpha.500'}
+                              >
+                                {stop.label}
+                              </Text>
+                            ))}
+                          </HStack>
+                        </Box>
+                      </Box>
+                    )}
+                  </VStack>
+                </PopoverBody>
+              </PopoverContent>
+            </Portal>
+          </Popover>
         </>
       )}
       <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
@@ -325,55 +464,6 @@ function ViewFloatingMenu({
         </>
       )}
 
-      {onDensityLevelChange && (
-        <>
-          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-          <Tooltip label={`Density ${draftDensityLevel}`} placement="top" openDelay={200}>
-            <Box
-              w="92px"
-              h="28px"
-              px={2.5}
-              display="flex"
-              alignItems="center"
-              bg="whiteAlpha.50"
-              rounded="md"
-            >
-              <Slider
-                aria-label="Density"
-                min={-2}
-                max={2}
-                step={1}
-                value={draftDensityLevel}
-                onChange={setDraftDensityLevel}
-                onChangeEnd={(value) => {
-                  setDraftDensityLevel(value)
-                  onDensityLevelChange(value)
-                }}
-                focusThumbOnChange={false}
-              >
-                <SliderTrack h="3px" bg="whiteAlpha.200">
-                  <SliderFilledTrack bg="var(--accent)" />
-                </SliderTrack>
-                {[-2, -1, 0, 1, 2].map((value) => (
-                  <Box
-                    key={value}
-                    position="absolute"
-                    left={`${((value + 2) / 4) * 100}%`}
-                    top="50%"
-                    transform="translate(-50%, -50%)"
-                    w="1px"
-                    h="9px"
-                    bg={draftDensityLevel >= value ? 'var(--accent)' : 'whiteAlpha.400'}
-                    pointerEvents="none"
-                  />
-                ))}
-                <SliderThumb boxSize="12px" bg="white" border="2px solid" borderColor="var(--accent)" />
-              </Slider>
-            </Box>
-          </Tooltip>
-        </>
-      )}
-
       {/* Draw mode toggle */}
       <Tooltip
         label={drawingMode ? 'Exit drawing mode' : 'Draw on diagram'}

package/src/demo/viewEditor.ts

@@ -8,6 +8,7 @@ export interface ViewEditorDemoOptions {
   disableOnboarding?: boolean
   hideFocusView?: boolean
   hideExpandExtras?: boolean
+  defaultHiddenLayerTags?: string[]
 }
 
 export const DEMO_VIEW_EDITOR_OPTIONS: Omit<ViewEditorDemoOptions, 'revealProgress'> = {
@@ -16,6 +17,7 @@ export const DEMO_VIEW_EDITOR_OPTIONS: Omit<ViewEditorDemoOptions, 'revealProgre
   disableOnboarding: true,
   hideFocusView: true,
   hideExpandExtras: true,
+  defaultHiddenLayerTags: ['view_layers:admin', 'view_layers:ops'],
 }
 
 

package/src/index.ts

@@ -8,7 +8,7 @@
  */
 
 // ─── Pages ───────────────────────────────────────────────────────────────────
-export { default as ViewEditor } from './pages/ViewEditor'
+export { default as ViewEditor, type ViewEditorPermissions } from './pages/ViewEditor'
 export { default as ViewsPage } from './pages/Views'
 export { default as ViewsGrid } from './pages/ViewsGrid'
 export { default as Dependencies } from './pages/Dependencies'

package/src/pages/InfiniteZoom.tsx

@@ -257,12 +257,12 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
             {noDiagrams ? 'No diagrams to explore yet' : 'Your diagrams are empty'}
           </Text>
           <Text color="gray.500" fontSize="sm" maxW="400px">
-            {noDiagrams 
-              ? 'Start by creating your first diagram in the workspace.' 
+            {noDiagrams
+              ? 'Start by creating your first diagram in the workspace.'
               : 'Add elements to your diagrams in the editor to see them rendered on this infinite canvas.'}
           </Text>
         </VStack>
-        
+
         {!sharedToken && (
           <Button size="sm" colorScheme="blue" onClick={() => navigate('/views')} borderRadius="full" px={6}>
             {noDiagrams ? 'Create First Diagram' : 'Go to Editor'}
@@ -349,7 +349,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
                 onEnabledChange={setCrossBranchEnabled}
                 onBudgetChange={setCrossBranchConnectorBudget}
                 onPriorityChange={setCrossBranchConnectorPriority}
-                label="Branches"
+                label="Filters"
               />
 
               {(allTags.length > 0 || layers.length > 0) && (

package/src/pages/ViewEditor/index.tsx

@@ -100,6 +100,8 @@ 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_INITIAL_FIT_PADDING = 0.25
+const VIEW_EDITOR_FOCUS_FIT_PADDING = 0.35
 const VIEW_EDITOR_EMPTY_EXTENT_RATIO = 0.75
 const VIEW_EDITOR_PAN_MARGIN_RATIO = 0.25
 const VIEW_EDITOR_PAN_MARGIN_MIN = 180
@@ -159,6 +161,19 @@ function viewSnapshotsEqual(left: ViewMetadataSnapshot, right: ViewMetadataSnaps
   return left.id === right.id && left.name === right.name && (left.level_label ?? '') === (right.level_label ?? '')
 }
 
+function nodesMatchCurrentView(nodes: RFNode[], elements: PlacedElement[], viewId: number | null) {
+  if (viewId === null || elements.length === 0) return false
+  if (!elements.every((element) => element.view_id === viewId)) return false
+
+  const nodesById = new Map(nodes.map((node) => [node.id, node]))
+  return elements.every((element) => {
+    const node = nodesById.get(String(element.element_id))
+    return node !== undefined &&
+      Math.abs(node.position.x - (element.position_x ?? 0)) < 0.5 &&
+      Math.abs(node.position.y - (element.position_y ?? 0)) < 0.5
+  })
+}
+
 function alphaColor(color: string, opacity: number): string {
   if (opacity >= 1) return color
   return `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent)`
@@ -193,12 +208,21 @@ function canonicalNodePairKey(leftId: string, rightId: string) {
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface Props extends CoreUISlots {
+export interface ViewEditorPermissions {
+  canEdit?: boolean
+  isOwner?: boolean
+  isFreePlan?: boolean
+}
+
+interface Props extends CoreUISlots, ViewEditorPermissions {
   demoOptions?: ViewEditorDemoOptions
 }
 
 function ViewEditorInner({
   demoOptions,
+  canEdit = true,
+  isOwner = true,
+  isFreePlan = false,
   canvasOverlaySlot,
   toolbarSlot,
   shareSlot,
@@ -225,10 +249,6 @@ function ViewEditorInner({
     undo: undoViewEdit,
     redo: redoViewEdit,
   } = useViewEditHistory()
-  const canEdit = true
-  const isOwner = true
-  const isFreePlan = false
-
   const setHeader = useSetHeader()
   const isMobileLayout = useBreakpointValue({ base: true, md: false }) ?? false
   const [densityLevel, setDensityLevel] = useState(0)
@@ -375,7 +395,7 @@ function ViewEditorInner({
   }, [])
 
   const [layers, setLayers] = useState<import('../../types').ViewLayer[]>([])
-  const [hiddenLayerTags, setHiddenLayerTags] = useState<string[]>([])
+  const [hiddenLayerTags, setHiddenLayerTags] = useState<string[]>(() => demoOptions?.defaultHiddenLayerTags ?? [])
   const hiddenLayerTagsRef = useRef<string[]>([])
   hiddenLayerTagsRef.current = hiddenLayerTags
   const [hoveredLayerTags, setHoveredLayerTags] = useState<string[] | null>(null)
@@ -669,7 +689,7 @@ function ViewEditorInner({
   useEffect(() => {
     const unsub = vscodeBridge.onMessage(async (msg: ExtensionToWebviewMessage) => {
       if (msg.type === 'focus-element') {
-        fitView({ nodes: [{ id: String(msg.elementId) }], duration: 800, padding: 100 })
+        fitView({ nodes: [{ id: String(msg.elementId) }], duration: 800, padding: VIEW_EDITOR_FOCUS_FIT_PADDING })
       } else if (msg.type === 'element-placed') {
         if (viewId === null) return
         try {
@@ -1274,6 +1294,7 @@ function ViewEditorInner({
     if (!rfReadyRef.current || !needsFitView.current) return
     const nodes = rfNodesRef.current
     if (nodes.length === 0) return
+    if (!nodesMatchCurrentView(nodes, viewElementsRef.current, viewIdRef.current)) return
     if (!nodes.every((n) => typeof n.width === 'number' && n.width > 0 && typeof n.height === 'number' && n.height > 0)) return
 
     if (clampedRevealProgress !== null) {
@@ -1283,13 +1304,17 @@ function ViewEditorInner({
       return
     }
 
-    const ok = safeFitView({ duration: 0, padding: 400 })
+    const ok = safeFitView({ duration: 0, padding: VIEW_EDITOR_INITIAL_FIT_PADDING, minZoom: computedMinZoom, maxZoom: 4 })
     if (ok) needsFitView.current = false
     else setTimeout(() => { if (needsFitView.current) maybeFitView() }, 50)
-  }, [applyDemoRevealViewport, clampedRevealProgress, safeFitView, rfNodesRef])
+  }, [applyDemoRevealViewport, clampedRevealProgress, computedMinZoom, safeFitView, rfNodesRef, viewElementsRef, viewIdRef])
 
   const onRFInit = useCallback(() => { rfReadyRef.current = true; maybeFitView() }, [maybeFitView])
 
+  useEffect(() => {
+    needsFitView.current = true
+  }, [viewId])
+
   useEffect(() => { maybeFitView() }, [rfNodes, maybeFitView])
 
   useEffect(() => {
@@ -1310,7 +1335,6 @@ function ViewEditorInner({
     closeElementPanelRef.current()
     closeConnectorPanelRef.current()
     closeProxyConnectorPanelRef.current()
-    needsFitView.current = true
   }, [clearEditHistory, viewId])
 
   // ── Dynamic viewport bounds ────────────────────────────────────────────────