@tldiagram/core-ui 2.0.5 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/ElementPanel.tsx

@@ -6,7 +6,6 @@ import {
   Box,
   Button,
   CloseButton,
-  Divider,
   FormControl,
   FormLabel,
   HStack,
@@ -1034,49 +1033,87 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
 
             {elementPanelAfterContentSlot}
 
-            {element && (onPromoteVisibility || onDemoteVisibility || onResetVisibility) && (
-              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={2}>
-                <HStack justify="space-between" mb={2}>
-                  <FormLabel fontSize="xs" fontWeight="bold" color="gray.400" mb={0}>DENSITY</FormLabel>
-                  {visibilityOverrideDelta !== 0 && (
-                    <Badge colorScheme={visibilityOverrideDelta > 0 ? 'teal' : 'orange'} variant="subtle">
-                      {visibilityOverrideDelta > 0 ? `+${visibilityOverrideDelta}` : visibilityOverrideDelta}
-                    </Badge>
-                  )}
-                </HStack>
-                <HStack spacing={2}>
-                  <Button variant="subtle" size="sm" color="teal.200" _hover={{ bg: 'teal.900', color: 'teal.100' }} onClick={() => onPromoteVisibility?.(element.id)} flex={1} isDisabled={isReadOnly}>
-                    Promote
-                  </Button>
-                  <Button variant="subtle" size="sm" color="orange.200" _hover={{ bg: 'orange.900', color: 'orange.100' }} onClick={() => onDemoteVisibility?.(element.id)} flex={1} isDisabled={isReadOnly}>
-                    Demote
+            {(element && (onPromoteVisibility || onDemoteVisibility || onResetVisibility)) || (isEdit && canEdit && onMerge) ? (
+              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={4} pb={1}>
+                {element && (onPromoteVisibility || onDemoteVisibility || onResetVisibility) && (
+                  <>
+                    <HStack justify="space-between" mb={2}>
+                      <FormLabel fontSize="xs" fontWeight="semibold" letterSpacing="wider" color="gray.500" mb={0} textTransform="uppercase">Density</FormLabel>
+                      {visibilityOverrideDelta !== 0 && (
+                        <Badge colorScheme={visibilityOverrideDelta > 0 ? 'teal' : 'orange'} variant="subtle" fontSize="xs">
+                          {visibilityOverrideDelta > 0 ? `+${visibilityOverrideDelta}` : visibilityOverrideDelta}
+                        </Badge>
+                      )}
+                    </HStack>
+                    <HStack spacing={2} mb={isEdit && canEdit && onMerge ? 2 : 0}>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        borderColor="teal.700"
+                        color="teal.300"
+                        _hover={{ bg: 'teal.900', borderColor: 'teal.500', color: 'teal.100' }}
+                        onClick={() => onPromoteVisibility?.(element.id)}
+                        flex={1}
+                        isDisabled={isReadOnly}
+                      >
+                        Promote
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        borderColor="orange.700"
+                        color="orange.300"
+                        _hover={{ bg: 'orange.900', borderColor: 'orange.500', color: 'orange.100' }}
+                        onClick={() => onDemoteVisibility?.(element.id)}
+                        flex={1}
+                        isDisabled={isReadOnly}
+                      >
+                        Demote
+                      </Button>
+                      {visibilityOverrideDelta !== 0 && (
+                        <Button variant="ghost" size="sm" color="gray.400" _hover={{ bg: 'whiteAlpha.100', color: 'white' }} onClick={() => onResetVisibility?.(element.id)} isDisabled={isReadOnly}>
+                          Reset
+                        </Button>
+                      )}
+                    </HStack>
+                  </>
+                )}
+                {isEdit && canEdit && onMerge && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    borderColor="teal.700"
+                    color="teal.300"
+                    _hover={{ bg: 'teal.900', borderColor: 'teal.500', color: 'teal.100' }}
+                    onClick={() => onMerge(element.id)}
+                    w="full"
+                  >
+                    Merge
                   </Button>
-                  {visibilityOverrideDelta !== 0 && (
-                    <Button variant="ghost" size="sm" onClick={() => onResetVisibility?.(element.id)} isDisabled={isReadOnly}>
-                      Reset
-                    </Button>
-                  )}
-                </HStack>
-              </Box>
-            )}
-
-
-
-            {isEdit && canEdit && onMerge && (
-              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={2}>
-                <Button variant="subtle" size="sm" color="teal.200" _hover={{ bg: 'teal.900', color: 'teal.100' }}
-                  onClick={() => onMerge(element.id)} w="full">
-                  Merge
-                </Button>
+                )}
               </Box>
-            )}
+            ) : null}
 
             {isEdit && canEdit && (
-              <HStack borderTop="1px solid" borderColor="whiteAlpha.100" pt={2} spacing={2}>
-                <Button variant="subtle" size="sm" color="white" _hover={{ bg: 'whiteAlpha.100' }} onClick={handleDelete} flex={1}>
+              <HStack borderTop="1px solid" borderColor="whiteAlpha.100" pt={4} pb={1} spacing={2}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  color="gray.400"
+                  _hover={{ bg: 'whiteAlpha.100', color: 'white' }}
+                  onClick={handleDelete}
+                  flex={1}
+                >
                   Remove
                 </Button>
-                <Button variant="subtle" size="sm" color="red.300" _hover={{ bg: 'red.900', color: 'red.100' }} onClick={confirmPermanentDelete.onOpen} flex={1}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  color="red.400"
+                  _hover={{ bg: 'red.900', color: 'red.200' }}
+                  onClick={confirmPermanentDelete.onOpen}
+                  flex={1}
+                >
                   Delete Element
                 </Button>
               </HStack>
@@ -1084,24 +1121,19 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
           </VStack>
         </ScrollIndicatorWrapper>
 
-        <Divider borderColor="whiteAlpha.100" />
-
         {/* Footer */}
-        <HStack px={4} py={3} justify="space-between" flexShrink={0}>
-
-          {!autoSaveEdit && (
-            <HStack ml="auto">
-              <Button variant="ghost" size="sm" onClick={handleClose}>
-                Cancel
+        {!autoSaveEdit && (
+          <HStack px={4} py={3} justify="flex-end" flexShrink={0}>
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              Cancel
+            </Button>
+            {canEdit && (
+              <Button size="sm" px={5} colorScheme="blue" onClick={handleSave} isLoading={loading}>
+                Save
               </Button>
-              {canEdit && (
-                <Button size="sm" px={5} colorScheme="blue" onClick={handleSave} isLoading={loading}>
-                  Save
-                </Button>
-              )}
-            </HStack>
-          )}
-        </HStack>
+            )}
+          </HStack>
+        )}
       </SlidingPanel>
 
       <ConfirmDialog

package/src/components/SlidingPanel.tsx

@@ -99,8 +99,6 @@ export default function SlidingPanel({
               backdropFilter="blur(24px)"
               border="1px solid"
               borderColor="whiteAlpha.100"
-              borderTop="2px solid"
-              borderTopColor="var(--accent)"
               rounded="xl"
               shadow="panel"
             >

package/src/pages/AppearanceSettings.tsx

@@ -1,46 +1,32 @@
-import { Box, FormLabel, HStack, Select, Text, Tooltip, VStack, Wrap, WrapItem } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  FormLabel,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  Tooltip,
+  VStack,
+  Wrap,
+  WrapItem,
+} from '@chakra-ui/react'
 import { ACCENT_OPTIONS, BACKGROUND_OPTIONS, ELEMENT_OPTIONS } from '../constants/colors'
 import { useTheme } from '../context/ThemeContext'
 import { useSourceEditor } from '../utils/sourceEditor'
-import type { SourceEditor } from '../api/client'
+import { ChevronDownIcon } from '../components/Icons'
 
 export default function AppearanceSettings({ compact = false }: { compact?: boolean }) {
   const { accent, setAccent, background, setBackground, elementColor, setElementColor } = useTheme()
   const { editor, setEditor } = useSourceEditor()
-  const swatchSize = compact ? '28px' : '32px'
+  const swatchSize = compact ? '21px' : '32px'
   const sectionGap = compact ? 5 : 8
 
   return (
     <VStack align="start" spacing={sectionGap} maxW={compact ? '320px' : '480px'} w="full">
-      <Box w="full">
-        <HStack justify="space-between" align="end" w="full" mb={compact ? 0 : 1}>
-          <Box>
-            <Text fontFamily="heading" fontSize={compact ? 'md' : 'lg'} fontWeight="bold" color="gray.100" mb={1}>
-              Theme
-            </Text>
-          </Box>
-        </HStack>
-      </Box>
 
-      <Box w="full">
-        <FormLabel mb={3} fontSize={compact ? 'xs' : 'sm'} textTransform="uppercase" letterSpacing="0.12em" color="gray.400">
-          Source Editor
-        </FormLabel>
-        <Select
-          size="sm"
-          value={editor}
-          onChange={(event) => setEditor(event.target.value as SourceEditor)}
-          bg="whiteAlpha.50"
-          borderColor="whiteAlpha.200"
-          color="gray.100"
-          maxW="220px"
-          _hover={{ borderColor: 'whiteAlpha.400' }}
-          _focus={{ borderColor: 'blue.400', boxShadow: '0 0 0 1px var(--chakra-colors-blue-400)' }}
-        >
-          <option value="zed">Zed</option>
-          <option value="vscode">VS Code</option>
-        </Select>
-      </Box>
 
       <Box w="full">
         <FormLabel mb={3} fontSize={compact ? 'xs' : 'sm'} textTransform="uppercase" letterSpacing="0.12em" color="gray.400">
@@ -153,6 +139,36 @@ export default function AppearanceSettings({ compact = false }: { compact?: bool
           })}
         </Wrap>
       </Box>
+
+      <Box w="full">
+        <FormLabel mb={3} fontSize={compact ? 'xs' : 'sm'} textTransform="uppercase" letterSpacing="0.12em" color="gray.400">
+          Editor
+        </FormLabel>
+        <Menu>
+          <MenuButton
+            as={Button}
+            size="sm"
+            variant="clay"
+            rightIcon={<ChevronDownIcon size={12} strokeWidth={4} />}
+            minW="140px"
+            textAlign="left"
+            bg="whiteAlpha.100"
+            color="gray.100"
+            _hover={{ bg: 'whiteAlpha.200' }}
+            _active={{ bg: 'whiteAlpha.300' }}
+          >
+            {editor === 'zed' ? 'Zed' : 'VS Code'}
+          </MenuButton>
+          <MenuList>
+            <MenuItem onClick={() => setEditor('zed')} fontWeight={editor === 'zed' ? 'bold' : 'normal'}>
+              Zed
+            </MenuItem>
+            <MenuItem onClick={() => setEditor('vscode')} fontWeight={editor === 'vscode' ? 'bold' : 'normal'}>
+              VS Code
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
     </VStack>
   )
 }